@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400&display=swap');

*{
    letter-spacing: normal !important
}
body,
p {
    font-family: 'Varela Round', sans-serif;
    font-size: 28px;
    font-family: 'Tajawal', sans-serif;
}


.logo1 {
    margin-right: 0;
    margin-left: 25px;
}
.logo2 {
    margin-right:0;
    margin-left: 40px;
}

.menu ul {
    padding-left: 0px;
    padding-right: 0px;
}
.sub-menu {
    text-align:right;
    right:0%;
    left:auto
}
.menu-item:hover .sub-menu-item a {
    left: auto;
    right:0
}

    .menu-item:hover .sub-menu-item a:hover {
        left:auto;
        right: 10px;
    }

.menu-item:nth-child(n+3):nth-child(-n+4):hover .sub-menu-item a:before {

    left:auto;
    right: 0px;
}

.menu-item:nth-child(n+3):nth-child(-n+4):hover .sub-menu-item a:hover:before {
    left: auto;
    right:-5px
}

.menubtn.open .line::after {
    transform: rotate(-90deg) translate(-4.7px, -4.5px);
    border-radius: 20px 0 0 20px;
}

.mobile-menu .nav-mobile {
    right: auto;
    left: 0;
    transform: translateX(-300px)
}
.mobile-menu .accordion-body .sub-item, .mobile-menu a {
    text-align: right;
}

    @media screen and (max-width:1300px) {
        .mobile-menu ul .menu-item {
            text-align: right;
        }

        .accordion-button::after {
            margin-left: 0;
            margin-right: auto;
        }
    }

    .Athar-main-image {
    right: auto;
    left: 180px
}
@media screen and (max-width: 991.98px) {
    .Athar-main-image {
        left:0;
    }
}
    .Athar-pages-image.sub-header {
        right: auto;
        left: 180px
    }


    .text-dir {
        padding-right: 0;
        padding-left: 150px;
    }

    .athar-dir .text-dir {
        padding-right: 150px;
        padding-left: 0;
    }

    @media screen and (max-width:1250px) {
        .text-dir {
            padding-right: 0;
            padding-left: 50px;
        }

        .athar-dir .text-dir {
            padding-right: 50px;
            padding-left: 0;
        }
    }

    .contact-left {
        padding-left: 0;
        padding-right: 150px
    }

    @media screen and (max-width:1200px) {
        .contact-left {
            padding-left: 0;
            padding-right: 50px;
        }
    }

    body, p, input, textarea, button, span, div, section,
    #contact input, #contact textarea, .disc-course h3, a {
        font-size: 28px
    }
    @media screen and (max-width:700px){
        body, p, input, textarea, button, span, div, section,
        #contact input, #contact textarea, .disc-course h3, a {
            font-size: 20px
        }
    }
    .disc-course h3, h3 {
        font-size: 20px !important;
    }

    input, textarea {
        font-size: 18px;
    }

    .info i {
        margin-right: 0;
        margin-left: 10px;
    }

    .search-icon-box {
        border-radius: 5px 0px 0px 5px;
    }

    .departements .sub-item {
        position: relative;
        left: auto;
        right: 30px;
        transition: .5s;
    }

        

        .departements .sub-item::before {
            left:auto;
            right: -25px;
        }
@media screen and (max-width: 991.98px) {
    .filter-icon-box {
        display: flex
    }

    .filter-departments-body {
       
        left:auto;
        right: 30px;
        padding: 20px;
        padding-left:40px
    }

    .filter-departments-box:hover .filter-departments-body {
        opacity: 1;
        z-index: 100;
    }

    .filter-departments-body h4 {
        display: none
    }
}


.departements .sub-item {
    position: relative;
    font-size: 16px;
    left: auto;
    right: 30px;
    transition: .5s;
}



    .departements .sub-item::before {
        left: auto;
        right: -35px;
    }