/* ============================================================
   General Styles
   ============================================================ */

/* Variables */
:root {
    --primary-color: #f8f9fa;
    --secondary-color: #ffffff;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.ttf") format("truetype")
}

/* Base Styles */
body {
    font-family: 'Poppins';
    color: #333;
    background-color: var(--secondary-color);
    margin: 0;
    padding: 0;
}

.btn-primary {
    background-color: #0071A3;
    border: none;
    color: #FDD621;
}


.arrow {
    border: solid rgb(255, 255, 255);
    border-width: 0 0 2px 2px;
    display: inline-block;
    padding: 3px;
}

.left {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.homevideo {
    display: inline-block;
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 0 0 25px;
    border-radius: 15px;
}

    .homevideo img {
        position: absolute;
        top: 50%;
        right: 50%;
        min-width: 100%;
        min-height: 100%;
        z-index: 1;
        max-width: 120%;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .homevideo::before {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: 50%;
        width: 80px;
        height: 90px;
        content: '';
        background: url(../../images/Video_3.svg) center no-repeat;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .homevideo a {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

.aboutvideo {
    display: inline-block;
    width: 100%;
    height: 420px;
    overflow: hidden;
    position: relative;
    margin: 0 0 25px;
    border-radius: 15px;
}

    .aboutvideo img {
        position: absolute;
        top: 50%;
        right: 50%;
        min-width: 100%;
        min-height: 100%;
        z-index: 1;
        max-width: 120%;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .aboutvideo::before {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: 50%;
        width: 80px;
        height: 90px;
        content: '';
        background: url(../../images/Video_3.svg) center no-repeat;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .aboutvideo a {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

.maincontent {
    padding-top: 200px;
}

.logo img {
    width: 163px;
}

.indexOnly {
    display: none;
}

/* ============================================================
   Header and Navigation
   ============================================================ */
.headermenu {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    width: 100%;
}

.sideoppzite {
    text-align: left;
}

.custom-background {
    background: linear-gradient(-180deg, #0C2A3D 20%, #2171A3 100%);
    margin-top: -200px;
    position: relative;
    display: inline-block;
    width: 100%;
    min-height: 650px;
    border-radius: 0 0 30px 30px;
    padding: 280px 30px 0;
}

    .custom-background::before {
        top: -20%;
        content: '';
        right: 50%;
        width: 100%;
        height: 100%;
        z-index: 0;
        position: absolute;
        background: url(../../images/homeBannerTexture.svg) center no-repeat;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .custom-background img.homeGroup {
        position: absolute;
        bottom: 0;
        right: 50%;
        z-index: 1;
        margin-right: -25vw;
        max-width: 40vw;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

.navbar {
    margin-bottom: 0;
    padding: 0 3%;
}

.nav-contant {
    display: inline-block;
    padding-top: 35px;
    align-items: center;
}

    .nav-contant .sign-up {
        border: none;
        border-radius: 30px;
        font-size: 12px;
        padding: 5px;
    }



    .nav-contant .fa.fa-search {
        position: absolute;
        color: #0071A3;
        z-index: 1;
        padding: 0;
        font-size: 18px;
        top: 8px;
        right: 8px;
    }

    .nav-contant .pay-now {
        display: flex;
        align-items: center;
        height: 55px;
    }

    .nav-contant h3 {
        text-align: initial;
        font-size: 16px;
        font-weight: 900;
        width: 36px;
    }

    .nav-contant .pay-now img {
        margin: -32px 0 11px;
        width: 67px;
    }

    .nav-contant .dropdown-toggle {
        background: #F1F1F1;
        border-radius: 30px;
        color: #0071a3;
        font-size: 11px;
    }

    .nav-contant .searchZone .dropdown-toggle {
        background: #F1F1F1;
        border-radius: 0 18px 18px 0;
        color: #0071a3;
        font-size: 11px;
        min-width: 35px;
        min-height: 35px;
    }

.searchZone .dropdown-menu {
    background: transparent;
    padding: 0;
    border: none;
    display: block;
    margin-right: 35px !important;
    margin-top: 0px !important;
}

.nav-md-contant {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
}

.nav-links {
    display: flex;
    gap: 18px;
}

.nav-contant .form-control {
    border-radius: 30px !important;
    color: #C1C1C1;
    font-size: 12px;
    padding: 8px 25px;
    background: #F1F1F1;
    border: none;
}

.searchZone::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    content: '';
    z-index: 2;
}

.nav-contant .searchZone .form-control {
    border-radius: 18px 0 0 18px !important;
    color: #C1C1C1;
    font-size: 12px;
    text-align: right;
    padding: 9px 0 8px 10px;
    background: #F1F1F1;
    border: none;
}

    .nav-contant .searchZone .form-control:focus {
        box-shadow: none !important
    }

.custom-background .nav-contant .form-control {
    background: #F1F1F1;
}


.custom-background .nav-links a {
    background: #ffffff;
    text-transform: uppercase;
}

.nav-links a {
    background: #F1F1F1;
    color: #0071a3;
    border-radius: 30px;
    text-decoration: unset;
    width: 107px;
    height: 40px;
    text-align: center;
    align-content: center;
    font-size: 13px;
}

    .nav-links a svg {
        display: none;
    }

    .nav-links a:hover {
        background: #0071A3;
        color: #fff;
        opacity: 0.9;
    }

    .nav-links a.active {
        background: #0071A3;
        color: #fff;
    }

.titlesubscribe {
    position: relative;
    top: 10px
}

.nav-item a {
    color: var(--secondary-color);
    text-transform: uppercase;
}

ul.teacherside {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

    ul.teacherside li {
        display: inline-block;
        width: 100%;
        list-style: none;
        margin: 0 0 15px;
        position: relative;
        border-radius: 25px;
        min-height: 128px;
        padding: 25px 128px 25px 25px;
        background: #F1F1F1;
    }

        ul.teacherside li a {
            position: absolute;
            z-index: 2;
            width: 100%;
            height: 100%;
        }

        ul.teacherside li span {
            display: inline-block;
            color: #0A5C8A;
            font-size: 20px;
            font-weight: 500;
            margin-top: 22px;
        }

        ul.teacherside li.active {
            background: linear-gradient(-135deg, #2171A3 30%, #0C2A3D 90%);
        }

            ul.teacherside li.active span {
                color: #fff;
            }

.imgteacher {
    position: absolute;
    overflow: hidden;
    width: 78px;
    height: 78px;
    top: 25px;
    right: 25px;
    border: 2px #fff solid;
    border-radius: 50%;
    background: #fff url(../../images//User.svg) center no-repeat;
}

    .imgteacher img {
        position: absolute;
        top: 50%;
        right: 50%;
        min-width: 100%;
        min-height: 100%;
        max-width: 120%;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

.thumbvideo {
    display: inline-block;
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    margin: 0 0 25px;
    border-radius: 30px;
}

    .thumbvideo img {
        position: absolute;
        top: 50%;
        right: 50%;
        min-width: 100%;
        min-height: 100%;
        z-index: 1;
        max-width: 120%;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .thumbvideo small {
        position: absolute;
        bottom: 20px;
        left: 20px;
        background: #000;
        height: 24px;
        z-index: 2;
        border-radius: 12px;
        color: #fff;
        font-size: 14px;
        padding: 0 12px;
        line-height: 24px;
    }

    .thumbvideo::before {
        position: absolute;
        z-index: 2;
        top: 50%;
        right: 50%;
        width: 80px;
        height: 90px;
        content: '';
        background: url(../../images/Video_3.svg) center no-repeat;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .thumbvideo a {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

.videoTitle {
    display: inline-block;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
    margin: 0 0 10px;
}

.videobrief {
    display: inline-block;
    width: 100%;
    font-size: 16px;
    color: #828282;
    line-height: 22px;
}

.langmenu .dropdown-menu[data-bs-popper] {
    right: auto;
    left: 0;
    min-width: 60px;
}

.langmenu .dropdown-item {
    font-size: 12px;
}

/* ============================================================
   Main Content
   ============================================================ */

/* Example Section Styling */
section {
    padding: 40px 3%;
}


/* Our Courses */
.Our-Courses .col-12 {
    margin: 12px 0;
    padding: 63px 79px;
    border-radius: 30px;
}

.Our-Courses .title {
    font-weight: 900;
    text-align: center;
}

.Our-Courses p {
    color: #1E1E1E;
    font-size: 15px;
    line-height: 22px;
}

.Our-Courses .course .grade {
    color: #FDD621;
    font-size: 16px;
}

.Our-Courses .course .school {
    font-weight: 900;
    font-size: 20px;
    color: #fff;
}

.Our-Courses .course .subjects {
    font-size: 12px;
    color: #fff;
    min-height: 53px;
}

.Our-Courses .Subscribe h6 {
    font-weight: 900;
    font-size: 17px;
    color: #fff;
}

.Our-Courses .Subscribe p {
    font-size: 12px;
    color: #fff;
    min-height: 53px;
}

.Our-Courses .course a {
    background: #DDAB0A;
    color: #ffff;
    border-radius: 30px;
    text-decoration: unset;
    text-align: center;
    font-size: 17px;
    padding: 10px;
}

.Our-Courses .col-md-6 {
    align-content: center;
}

.Our-Courses .one {
    position: relative;
    background: linear-gradient(-135deg, #2171A3 30%, #0C2A3D 90%);
}

    .Our-Courses .one::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        content: '';
        z-index: 0;
        background: url(../../images/Isolation_Mode.svg);
    }

    .Our-Courses .one .col-md-8 {
        z-index: 1;
        position: relative;
    }

    .Our-Courses .one img {
        position: absolute;
        bottom: 0;
        right: 50px;
        z-index: 1;
        width: 300px;
    }



.Our-Courses .two {
    position: relative;
    background: linear-gradient(135deg, #2171A3 30%, #0C2A3D 90%);
}

    .Our-Courses .two::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: '';
        z-index: 0;
        background: url(../../images/Isolation_Mode.svg);
    }

    .Our-Courses .two .col-md-8 {
        z-index: 1;
        position: relative;
    }

    .Our-Courses .two img {
        position: absolute;
        bottom: 0;
        left: 50px;
        z-index: 1;
        width: 300px;
    }

.Our-Courses .three {
    position: relative;
    background: linear-gradient(-135deg, #2171A3 30%, #0C2A3D 90%);
}

    .Our-Courses .three::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        content: '';
        z-index: 0;
        background: url(../../images/Isolation_Mode.svg);
    }

    .Our-Courses .three .col-md-6 {
        z-index: 1;
        position: relative;
    }

    .Our-Courses .three img {
        position: absolute;
        bottom: 0;
        right: 50px;
        z-index: 1;
        width: 400px;
    }

.Our-Courses .Subscribe {
    background: url(../../images/Subscribe.png) round;
    text-align: center;
}

    .Our-Courses .Subscribe .form-control {
        border-radius: 30px !important;
        color: #C1C1C1;
        font-size: 12px;
        padding: 8px 25px;
    }

    .Our-Courses .Subscribe .input-group {
        gap: 10px;
    }

    .Our-Courses .Subscribe button {
        border-radius: 30px !important;
        color: #ffffff;
        background: #0071A3;
        font-size: 12px;
        padding: 8px 25px;
    }

/* Learn With US */
.Learn-with-us {
    padding: 60px 5%;
}

    .Learn-with-us .bg-Elementary {
        background: url(../../images/Learn-WIth-us.png) round;
        color: #fff;
        padding: 61px;
        border-radius: 30px;
        margin: 0 0 24px;
    }

    .Learn-with-us .bg-MIDDLE {
        background: url(../../images/Learn-with-us-2.png) round;
        color: #fff;
        padding: 61px;
        border-radius: 30px;
        margin: 0 0 24px;
    }

    .Learn-with-us .bg-High {
        background: url(../../images/Learn-with-us-3.png) round;
        color: #fff;
        padding: 61px;
        border-radius: 30px;
        margin: 0 0 24px;
    }

    .Learn-with-us h6 {
        font-weight: 900;
        font-size: 16px;
        margin: 0;
    }

    .Learn-with-us p {
        font-size: 11px;
    }

    .Learn-with-us .grade-one {
        background: url(../../images/grade-one.png) round;
        height: 200px;
    }

    .Learn-with-us .col-md-4 h6 {
        text-align: -webkit-center;
        margin: 13px 0 28px;
        font-weight: 900;
    }

    .Learn-with-us .grade-two {
        background: url(../../images/grade-two.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-three {
        background: url(../../images/grade-three.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-four {
        background: url(../../images/grade-four.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-five {
        background: url(../../images/grade-five.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-six {
        background: url(../../images/grade-six.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-seven {
        background: url(../../images/grade-seven.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-eight {
        background: url(../../images/grade-eight.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-nine {
        background: url(../../images/grade-nine.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-ten {
        background: url(../../images/grade-ten.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-eleven {
        background: url(../../images/grade-eleven.png) round;
        height: 200px;
    }

    .Learn-with-us .grade-tweleve {
        background: url(../../images/grade-tweleve.png) round;
        height: 200px;
    }

a.grageLink {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* List-view */

.List-view .bg-Elementary {
    background: url(../../images/Learn-WIth-us.png) round;
    color: #fff;
    padding: 40px;
    border-radius: 30px;
    margin: 0 0 24px;
}

.List-view a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
}

.List-view h6 {
    font-weight: 600;
    margin: 18px 0 5px;
}

.List-view p {
    font-size: 12px;
}

.List-view .card-header {
    background: url(../../images/ListViewBg.png) round;
    border-radius: 25px 25px 0 0;
    padding: 23px;
}

    .List-view .card-header img {
        width: 83px;
        margin: 0;
    }

.List-view .card {
    border-radius: 25px;
    border: none;
    color: #fff;
    margin: 0 0 24px;
}

.List-view .card-body {
    background: #F1F1F1;
    padding: 24px;
    display: flex;
    justify-content: space-evenly;
    border-radius: 0 0 25px 25px;
}

    .List-view .card-body button {
        border: 1px solid #DDAB0A;
        background: transparent;
        color: #DDAB0A;
        border-radius: 25px;
        font-size: 13px;
        width: 42%;
        padding: 8px 0;
    }

/* About Us */
.about-us {
    background: url(../../images/aboutUsBg.png) center no-repeat;
    background-size: cover;
    border-radius: 30px;
}

    .about-us .about-us-video {
        text-align: center;
    }

        .about-us .about-us-video iframe {
            width: 65%;
            height: 404px;
            border-radius: 30px;
        }

/* Vision and Mission */
.Vision-Mission {
    background: #0071A3;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    padding: 125px;
}

    .Vision-Mission h6 {
        font-weight: 900;
        margin: 0 0 23px;
    }

    .Vision-Mission p {
        font-size: 12px;
        line-height: 26px;
    }

    .Vision-Mission .Vision {
        width: 49%;
        border-left: 1px solid #ffffff59;
        padding: 0 25px;
    }

    .Vision-Mission .Mission {
        padding: 0 25px;
        width: 50%;
    }

/* contact-us */

.contact-us .form-group {
    margin: 10px 0;
}

    .contact-us .form-group .form-control {
        font-size: 12px;
        border-radius: 10px;
        padding: 11px 10px;
    }

.contact-us .form {
    background: url(../../images/ContactForm.jpg) center no-repeat;
    background-size: cover;
    border-radius: 30px;
    overflow: hidden;
    padding: 60px;
    position: relative;
    color: #fff;
    text-align: center;
}

    .contact-us .form::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: linear-gradient(-90deg, rgba(31, 124, 182, 0.9) 30%, rgba(31, 61, 83, 0.9) 90%);
        backdrop-filter: blur(3px);
    }

.contact-us form {
    position: relative;
    z-index: 1;
}

.contact-us .form h6 {
    font-weight: 900;
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0 0 31px;
}

.contact-us .form button {
    background: #DDAB0A;
    color: #fff;
    border-radius: 30px;
    width: 119px;
    font-size: 14px;
}

.contact-us .reach {
    margin: 51px 0;
}

    .contact-us .reach h6 {
        text-align: center;
        font-weight: 900;
        color: #000;
        margin-bottom: 31px;
    }

    .contact-us .reach .social-links {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 14px;
        font-size: 14px;
    }

.contact-us .follow-us h6 {
    text-align: center;
    font-weight: 900;
    color: #000;
    margin-bottom: 31px;
}

.contact-us .follow-us {
    margin: 51px 0;
}

    .contact-us .follow-us .social-Icons {
        display: flex;
        justify-content: space-evenly;
    }

        .contact-us .follow-us .social-Icons a {
        }

/* Not Found */

.notfound {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 40px 0;
}

    .notfound img {
        display: inline-block;
        margin: 0 0 30px;
        max-width: 100%;
    }

    .notfound h4 {
        display: block;
        margin: 0 0 30px;
        font-size: 20px;
        color: #0071A3;
        font-weight: 700;
    }

    .notfound a {
        display: inline-block;
        background: #0071A3;
        height: 42px;
        border-radius: 21px;
        padding: 0 20px;
        text-decoration: none !important;
        color: #fff !important;
        line-height: 42px;
        text-transform: uppercase;
    }

/* Grade Level */

.innerbannner {
    display: inline-block;
    width: 100%;
    padding: 30px;
    position: relative;
    border-radius: 25px;
    background: linear-gradient(-135deg, #09486D 30%, #0B82C2 90%);
}

    .innerbannner img {
        position: absolute;
        top: 50%;
        left: 120px;
        z-index: 1;
        transform: translateY(-50%);
        width: 170px;
        -webkit-transform: translateY(-50%);
    }

    .innerbannner::before {
        position: absolute;
        content: '';
        width: 400px;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 0;
        background: url(../../images/white-clips.svg);
    }

    .innerbannner a.backbtn {
        display: inline-block;
        color: #fff !important;
        font-size: 14px;
        text-decoration: none !important;
        margin: 0 0 20px;
        position: relative;
        padding-right: 18px;
    }

        .innerbannner a.backbtn::before {
            position: absolute;
            content: '';
            right: 0;
            font-size: 20px;
            font-family: var(--fa-style-family, "Font Awesome 5 Free");
            font-weight: var(--fa-style, 900);
            content: "\f104";
            top: -4px
        }

    .innerbannner h3 {
        display: inline-block;
        width: 60%;
        color: #fff !important;
        font-size: 24px;
        font-weight: 800;
        margin: 0 0 20px;
        text-transform: uppercase;
    }

    .innerbannner h6 {
        display: inline-block;
        width: 60%;
        color: #fff !important;
        font-size: 14px;
        margin: 0 0 10px;
        font-weight: 400;
    }

    .innerbannner button {
        display: inline-block;
        border: none;
        background: #fff;
        border: none;
        border-radius: 23px;
        height: 46px;
        color: #7D7D7D;
        font-size: 14px;
        line-height: 46px;
        padding: 0 35px;
        margin: 0 0 0 10px;
    }

        .innerbannner button.active {
            background: #DDAB0A;
            color: #fff;
        }


.innerbannnerGrade {
    display: inline-block;
    width: 100%;
    padding: 30px;
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(-135deg, #09486D 30%, #0B82C2 90%);
}

    .innerbannnerGrade img {
        position: absolute;
        top: 50%;
        left: 120px;
        z-index: 1;
        transform: translateY(-50%);
        width: 250px;
        -webkit-transform: translateY(-50%);
    }

    .innerbannnerGrade::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 0;
        opacity: 0.3;
        background: url(../../images/white-clips.svg) center repeat;
    }

    .innerbannnerGrade a.backbtn {
        display: inline-block;
        color: #fff !important;
        font-size: 14px;
        text-decoration: none !important;
        margin: 0 0 20px;
        position: relative;
        padding-right: 18px;
    }

        .innerbannnerGrade a.backbtn::before {
            position: absolute;
            content: '';
            right: 0;
            font-size: 20px;
            font-family: var(--fa-style-family, "Font Awesome 5 Free");
            font-weight: var(--fa-style, 900);
            content: "\f104";
            top: -4px
        }

    .innerbannnerGrade h3 {
        display: inline-block;
        width: 90%;
        color: #fff !important;
        font-size: 24px;
        font-weight: 800;
        margin: 0 0 5px;
        text-transform: uppercase;
    }

    .innerbannnerGrade h4 {
        display: inline-block;
        width: 90%;
        color: #fff !important;
        font-size: 24px;
        font-weight: 800;
        margin: 15px 0 5px;
        text-transform: uppercase;
    }

    .innerbannnerGrade h6 {
        display: inline-block;
        width: 95%;
        color: #fff !important;
        font-size: 14px;
        margin: 0 0 10px;
        font-weight: 400;
    }

.imgChapter {
    display: inline-block;
    width: 100%;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    height: 270px;
    background: #F1F1F1;
    margin: 0 0 15px;
}

    .imgChapter img {
        position: absolute;
        top: 50%;
        right: 50%;
        width: 100%;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .imgChapter::before {
        position: absolute;
        display: none;
        z-index: 2;
        top: 50%;
        right: 50%;
        width: 80px;
        height: 90px;
        content: '';
        background: url(../../images/Video_3.svg) center no-repeat;
        transform: translateX(50%) translateY(-50%);
        -webkit-transform: translateX(50%) translateY(-50%);
    }

    .imgChapter a {
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
    }

.chapterblock h4 {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
    display: inline-block;
    width: 100%;
}

.chapterblock span {
    color: #828282;
    font-size: 16px;
    margin: 0 0 5px;
    line-height: 22px;
    overflow: hidden;
    max-height: 66px;
    display: inline-block;
    width: 100%;
}

.chapterblock h6 {
    color: #000;
    font-size: 16px;
    margin: 0 0 10px;
    display: inline-block;
    width: 100%;
}

.chapterblock .dropdown {
    background: #F1F1F1;
    width: calc(100% - 40px);
    border-radius: 20px;
}

    .chapterblock .dropdown button {
        text-align: right;
        padding: 1rem 1.75rem 1rem 0.75rem;
        position: relative;
    }

        .chapterblock .dropdown button::before {
            position: absolute;
            content: '1.';
            right: 17px;
        }

        .chapterblock .dropdown button small {
            position: absolute;
            color: rgba(0,0,0,0.4);
            font-size: 16px;
            left: 15px
        }

        .chapterblock .dropdown button.btn:first-child:active, .chapterblock .dropdown button.btn.show {
            border-color: transparent
        }

.chapterblock .btn-check:focus + .btn, .chapterblock .btn:focus {
    box-shadow: none !important;
}

.chapterblock .dropdown-menu {
    position: relative !important;
    transform: unset !important;
    border: none;
    background: transparent;
    padding: 0 15px;
    margin: 0 0 15px;
    top: -12px !important
}

    .chapterblock .dropdown-menu li {
        margin-bottom: 5px;
        padding: 0 17px 0 80px;
        position: relative;
    }

        .chapterblock .dropdown-menu li small {
            position: absolute;
            color: rgba(0,0,0,0.4);
            font-size: 16px;
            left: 0
        }

        .chapterblock .dropdown-menu li:first-child::before {
            position: absolute;
            content: '2.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(2)::before {
            position: absolute;
            content: '3.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(3)::before {
            position: absolute;
            content: '4.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(4)::before {
            position: absolute;
            content: '5.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(5)::before {
            position: absolute;
            content: '6.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(6)::before {
            position: absolute;
            content: '7.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(7)::before {
            position: absolute;
            content: '8.';
            right: 0;
        }

        .chapterblock .dropdown-menu li:nth-child(8)::before {
            position: absolute;
            content: '9.';
            right: 0;
        }

.chapterblock .dropdown-toggle::after {
    background: none;
    font-size: 22px;
    text-align: center;
    content: "\f107";
    border: none;
    position: absolute;
    width: 40px;
    height: 58px;
    top: 0;
    left: -40px;
    line-height: 58px;
    color: #828282;
    font-family: var(--fa-style-family, "Font Awesome 5 Free");
    font-weight: var(--fa-style, 900);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}

.chapterblock .dropdown-toggle.show::after {
    transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
}


/* chapter Details */

.chapterbar {
    background: #0071A3;
    display: inline-block;
    width: 100%;
    padding: 10px 3%;
    text-align: left;
}

    .chapterbar a {
        float: right;
        color: #fff !important;
        text-decoration: none !important;
        position: relative;
        padding-right: 18px;
        margin-top: 12px;
        font-size: 14px;
    }

        .chapterbar a::before {
            position: absolute;
            right: 0;
            font-size: 20px;
            font-family: var(--fa-style-family, "Font Awesome 5 Free");
            font-weight: var(--fa-style, 900);
            content: "\f104";
            top: -5px
        }

        .chapterbar a:hover {
            color: #DDAB0A !important;
        }

    .chapterbar ul {
        padding: 0;
        margin: 0;
        display: inline-block;
        background: #fff;
        height: 44px;
        border-radius: 22px;
        margin: 0 10px;
    }

        .chapterbar ul li {
            display: inline-block;
            list-style: none;
            color: #0071A3;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
            position: relative;
        }

            .chapterbar ul li img {
                display: inline-block;
                position: relative;
                margin-left: 10px;
                top: -2px
            }

            .chapterbar ul li:first-child {
                padding: 13px 20px 11px 12px;
                margin: 0 0 0 12px;
            }

                .chapterbar ul li:first-child::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    width: 1px;
                    height: 20px;
                    top: 12px;
                    background: #F1F1F1;
                }

            .chapterbar ul li:last-child {
                padding: 13px 12px 10px;
                background: #F1F1F1;
                border-radius: 22px;
                margin-right: 10px;
            }

    .chapterbar button {
        background: #DDAB0A;
        display: inline-block;
        border-radius: 22px;
        line-height: 44px;
        height: 44px;
        color: #fff;
        text-transform: uppercase;
        font-size: 14px;
        font-weight: 600;
        border: none;
        padding: 0 20px;
    }

.sidetitle {
    display: inline-block;
    width: 100%;
    margin: 0 0 20px;
    font-weight: 700;
    color: #000;
    font-size: 20px;
}

#video-container {
    position: relative;
    width: 100%;
    background: #000;
    border: none;
    border-radius: 10px;
    margin-bottom: 15px;
}

#video-containerHome {
    position: relative;
    display: inline-block;
    width: 575px;
    max-width: 100%;
    background: #000;
    border: none;
    border-radius: 10px;
    margin-bottom: 15px;
}

#video-container .chapterbar {
    display: none;
}

.toggled {
    position: fixed !important;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100vh;
    z-index: 100;
    border-radius: 0 !important;
}

    .toggled .chapterbar {
        display: inline-block !important;
    }

video {
    width: 100%;
    position: relative;
    z-index: 10;
    height: auto;
    display: block;
    border-radius: 10px;
}

.toggled video {
    object-fit: contain;
    width: auto;
    max-height: calc(100% - 109px);
    margin-top: 9px;
    max-width: 100%;
    position: fixed;
    right: 50%;
    top: 50%;
    overflow-clip-margin: content-box;
    overflow: clip;
    border-radius: 0 !important;
    transform: translateX(50%) translateY(-50%);
    -webkit-transform: translateX(50%) translateY(-50%);
}

video.videoHome {
    width: 100%;
    max-width: 575px;
    height: auto;
    max-height: 355px;
    display: block;
    border-radius: 10px;
}

#fullscreen-overlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Semi-transparent background */
    color: white;
    /* display: none;  Hidden by default */
    z-index: 9999; /* Ensure it sits above everything else */
    text-align: center;
    padding: 0;
}

/*video:fullscreen ~ #fullscreen-overlay,
video:-webkit-full-screen ~ #fullscreen-overlay {
    display: block; 
}*/ /* Show overlay in fullscreen mode */

#controls {
    display: flex;
    right: 10px;
    z-index: 10;
    width: calc(100% - 20px);
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    align-items: center;
    padding: 1px 10px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 18px;
}

.toggled #controls {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    border-radius: 0;
    background: #333;
}

.toggled .chapterbar ul {
    float: right;
}

#time-display {
    font-family: Arial, sans-serif;
}

#progress-container {
    position: relative;
    flex: 1;
    height: 3px;
    background: #C1C1C1;
    border-radius: 2px;
    margin: 0 10px;
    cursor: pointer;
}

#progress-bar {
    height: 100%;
    background: #fff;
    width: 0;
    border-radius: 2px;
}

button {
    background: #007bff;
    border: none;
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 5px;
}

    button:focus {
        outline: none;
    }

#play-pause-btn {
    background: transparent;
    border: none;
    color: #C1C1C1;
    font-size: 22px;
    padding: 5px 10px;
    cursor: pointer;
}

#full-screen-btn {
    background: #fff;
    border: none;
    color: #000;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 5px;
    margin-right: 10px;
}

.toggled button#full-screen-btn .fa-expand-alt:before {
    content: "\f422";
}

.nextVideo {
    display: inline-block;
    width: 100px;
    position: relative;
}

    .nextVideo a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        z-index: 2;
    }

    .nextVideo img {
        display: inline-block;
        width: 100%;
        border-radius: 10px;
        margin: 0 0 2px;
    }

    .nextVideo span {
        display: inline-block;
        width: 100%;
        padding: 0 0 0 15px;
        position: relative;
        color: #0071A3;
        font-size: 14px;
        font-weight: 500;
    }

        .nextVideo span::before {
            position: absolute;
            top: -5px;
            left: 0;
            font-size: 20px;
            font-weight: normal;
            font-family: var(--fa-style-family, "Font Awesome 5 Free");
            content: "\f054";
            font-weight: var(--fa-style, 900);
        }

.videoDetails {
    font-size: 16px;
    color: #828282;
    font-weight: 100 !important;
}

/* ============================================================
   Footer
   ============================================================ */

footer {
    padding: 20px 0;
    background-color: #F1F1F1;
    color: #7D7D7D;
    text-align: center;
}

    footer h6 {
        text-align: start;
        font-weight: 900;
        text-transform: uppercase;
        font-size: 14px;
        margin: 24px 0 19px;
    }

    footer ul {
        padding: 0;
        list-style: none;
        text-align: start;
    }

    footer .list {
        display: flex;
        gap: 55px;
    }

        footer .list li {
            color: #C1C1C1;
            font-size: 12px;
            margin: 0 0 8px;
        }

            footer .list li a {
                color: #C1C1C1 !important;
                display: inline-block;
                font-size: 12px;
                text-decoration: none !important;
            }

                footer .list li a:hover {
                    color: #0071A3 !important;
                }

    footer .social-links {
        display: flex;
        gap: 10px;
        margin: 24px 0 -10px;
    }

        footer .social-links span {
            font-size: 14px;
        }

    footer .social-Icons {
        margin: 23px 0 0;
        display: flex;
        justify-content: flex-start;
        gap: 13px;
    }

        footer .social-Icons a {
            background: #7D7D7D;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            text-align: center;
        }

        footer .social-Icons svg {
            stroke: #fff;
            fill: transparent;
            position: relative;
            top: 9px
        }

        footer .social-Icons a.insta svg {
            stroke: transparent;
            fill: #fff;
        }

        footer .social-Icons a:hover {
            background: #0071A3;
        }

.copyright {
    font-size: 14px;
    color: #C1C1C1;
}

footer .row {
    margin: 0;
}

.payModal .btn-close {
    position: absolute;
    bottom: -60px;
    right: 50%;
    transform: translateX(50%) scale(1.5);
    -webkit-transform: translateX(50%) scale(1.5);
    background-color: #fff;
    opacity: 1;
    padding: 10px;
    border-radius: 50%;
}

.bannerbay {
    display: inline-block;
    width: 100%;
    border-radius: 20px;
    margin: 0 0 30px;
    color: #fff;
    padding: 40px 35px 20px;
    background: linear-gradient(-135deg, #0071A3 30%, #002A3D 90%);
}

    .bannerbay h3 {
        display: inline-block;
        font-size: 22px;
        font-weight: 700;
        line-height: 22px;
        margin: 0;
    }

    .bannerbay img {
        position: relative;
        bottom: -12px;
        float: left;
        left: 40px;
        transform: scale(1.8);
        -webkit-transform: scale(1.8);
    }

ul.dataforpay {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

    ul.dataforpay li {
        display: inline-block;
        width: 35%;
        margin-left: 20px;
        list-style: none;
        margin-bottom: 20px;
    }

        ul.dataforpay li span {
            display: inline-block;
            width: 100%;
            margin-bottom: 0;
            font-size: 14px;
            color: rgba(30, 30, 30, 0.6);
            vertical-align: top;
        }

        ul.dataforpay li h6 {
            display: inline-block;
            width: 100%;
            margin: 0;
            color: #1E1E1E;
            vertical-align: top;
        }

ul.paymethods {
    display: inline-block;
    width: 100%;
    padding: 0;
    margin: 0;
}

    ul.paymethods li {
        display: inline-block;
        width: 48%;
        margin-left: 1.5%;
        list-style: none;
        margin-bottom: 15px;
        background: #0071A3;
        border-radius: 12px;
        padding: 10px 52px 8px 10px;
        position: relative;
    }

        ul.paymethods li img {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%) scale(0.8);
            -webkit-transform: translateY(-50%) scale(0.8);
        }

        ul.paymethods li span {
            display: inline-block;
            width: 100%;
            margin-bottom: 0;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            vertical-align: top;
            position: relative;
            top: 5px
        }

        ul.paymethods li a {
            display: inline-block;
            margin-bottom: 0;
            font-size: 13px;
            color: #fff !important;
            text-decoration: none !important;
            vertical-align: top;
        }

.payModal h5 {
    color: #1E1E1E;
    font-size: 16px;
    font-weight: 700;
}

.payModal .modal-content {
    position: relative;
}

.paykidimg {
    bottom: 0;
    right: 0;
    position: absolute;
    width: 260px;
}

.teacherHolder {
    display: inline-block;
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.mobilrOnly {
    display: none !important;
}

ul.videolist {
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 0 20px;
}

    ul.videolist li {
        display: inline-block;
        width: 100%;
        margin: 0 0 5px;
        list-style: none;
    }

        ul.videolist li a {
            display: inline-block;
            width: 100%;
            position: relative;
            padding: 0 24px 0 50px;
            color: #C1C1C1 !important;
            text-decoration: none !important;
        }

            ul.videolist li a:hover {
                color: #0071A3 !important;
            }

            ul.videolist li a i {
                position: absolute;
                right: 0;
                top: 0;
                font-size: 15px;
            }

            ul.videolist li a small {
                position: absolute;
                left: 0;
                top: 0;
                font-size: 14px;
            }

            ul.videolist li a span {
                font-size: 14px;
                display: inline-block;
                width: 100%;
                font-weight: 400;
            }

            ul.videolist li a.active {
                color: #DDAB0A !important;
            }

.courseDetails {
    display: inline-block;
    width: 100%;
    margin: 0 0 10px;
    color: #828282;
    font-size: 16px;
    line-height: 22px;
}


.faqasa .accordion-button.collapsed {
    background: #F1F1F1;
    border-radius: 15px;
    border: 1px #f6f8fd solid;
    font-weight: 700;
    color: #0071A3;
}

.faqasa .accordion-button {
    background: #fff;
    margin-bottom: 0;
    border: 1px #ebebeb solid;
    border-radius: 15px 15px 0 0;
    border-bottom: none;
    text-align: right;
}

.faqasa .accordion-item {
    border: none;
    margin-bottom: 15px;
}



    .faqasa .accordion-item:first-of-type .accordion-button {
        border-radius: 15px 15px 0 0;
        background: #F1F1F1;
    }

        .faqasa .accordion-item:first-of-type .accordion-button.collapsed {
            border-radius: 15px;
        }

.faqasa .accordion-button:not(.collapsed) {
    box-shadow: none !important;
    outline: none;
    font-weight: 700;
    color: #0071A3;
    background: #F1F1F1;
}

.faqasa .accordion-collapse {
    border: 1px #ebebeb solid;
    border-top: none;
    border-radius: 0 0 15px 15px;
    background: #F1F1F1;
}

.faqasa .accordion-item:last-of-type .accordion-collapse {
    border-radius: 0 0 15px 15px !important;
}

.faqasa .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 15px !important;
}

.faqasa .accordion-button:focus {
    box-shadow: none !important;
}

.faqasa .accordion-button::after {
    background-size: 0.8rem;
}

.faqasa .accordion-body {
    padding: 0 1.25rem 1rem;
}

.searchZone {
    background: #F1F1F1;
    min-height: 35px;
    min-width: 35px;
    text-align: center;
    border-radius: 18px;
}

.dropend.searchZone .dropdown-toggle::after {
    display: none;
}

@media only screen and (max-width: 852.5px) {

    .aboutvideo {
        height: 280px;
    }

    .innerbannner a.backbtn {
        color: #016093 !important;
        position: absolute;
        top: -35px;
        right: 0
    }

    .innerbannner {
        margin-top: 40px;
        padding: 20px;
    }

        .innerbannner img {
            display: none;
        }

        .innerbannner::before {
            opacity: 0.25;
        }

    .innerbannnerGrade a.backbtn {
        color: #016093 !important;
        position: absolute;
        top: -35px;
        right: 0
    }

    .innerbannnerGrade {
        margin-top: 40px;
        padding: 20px;
        overflow: visible;
    }

        .innerbannnerGrade img {
            display: none;
        }

        .innerbannnerGrade::before {
            opacity: 0.25;
        }

    section {
        padding: 15px 3%;
    }

    .chapterbar {
        background: #fff;
        padding: 0 3%;
    }

        .chapterbar a {
            color: #016093 !important;
        }

        .chapterbar ul, .chapterbar button {
            display: none;
        }

    footer {
        padding: 49px 0 105px;
    }

        footer h6,
        footer .list {
            display: none;
        }

        footer .social-links {
            justify-content: center;
        }

        footer .social-Icons {
            justify-content: center;
            gap: 5%;
        }
}

/* ============================================================
   Responsive
   ============================================================ */

@media only screen and (max-width: 906.5px) {

    #video-container {
        margin-bottom: 0;
        padding: 0;
    }

    #video-containerHome {
        margin-bottom: 0;
        padding: 0;
    }

    .toggled video {
        margin-top: 0;
    }

    .custom-background img.homeGroup {
        right: 3%;
        margin-right: unset;
        max-width: unset;
        transform: unset;
        -webkit-transform: unset;
    }

    .searchZone .dropdown-menu {
        display: none;
    }

        .searchZone .dropdown-menu.show {
            display: block;
            margin-right: 0 !important;
            right: 0 !important;
            width: 100%;
            position: fixed;
        }

    .searchZone::before {
        display: none;
    }

    .nav-contant .searchZone .dropdown-toggle {
        border-radius: 18px;
    }

    .nav-contant .searchZone .form-control {
        border-radius: 0 !important;
        padding: 12px 15px 11px 20px;
    }

    .pcOnly {
        display: none !important;
    }

    .mobilrOnly {
        display: block !important;
    }

    .imgChapter::before {
        display: block;
    }

    .headermenu {
        background: #fff;
        min-height: 185px;
    }

    .indexOnly {
        display: none !important;
    }

    .customLogo {
        display: inline-block !important;
    }

    .navbar {
        padding: 0;
    }

    .Our-Courses .one img {
        right: 50%;
        max-width: 90%;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .Our-Courses .two img {
        right: 50%;
        max-width: 90%;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .Our-Courses .three img {
        right: 50%;
        max-width: 90%;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .Our-Courses .col-12.one {
        padding: 40px 30px 260px;
        text-align: center;
        margin-bottom: 80px;
    }

    .Our-Courses .col-12.two {
        padding: 40px 30px 210px;
        text-align: center;
        margin-bottom: 80px;
    }

    .Our-Courses .col-12.three {
        padding: 40px 30px 150px;
        text-align: center;
        margin-bottom: 80px;
    }

    .Our-Courses .one .course a {
        position: absolute;
        bottom: -310px;
        right: 50%;
        z-index: 2;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }


    .Our-Courses .two .course a {
        position: absolute;
        bottom: -260px;
        right: 50%;
        z-index: 2;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .Our-Courses .three .course a {
        position: absolute;
        bottom: -200px;
        right: 50%;
        z-index: 2;
        transform: translateX(50%);
        -webkit-transform: translateX(50%);
    }

    .Our-Courses .Subscribe {
        background: url(../../images/Subscribe.png) center no-repeat round;
        background-size: cover;
        margin: 12px 0;
        padding: 20px;
    }

    .Subscribe input[type="email"] {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    .Subscribe .input-group {
        justify-content: center;
    }

    .paykidimg {
        display: none;
    }

    .bannerbay img {
        display: none;
    }

    .bannerbay {
        text-align: center;
        padding: 25px 35px 20px;
    }

    ul.dataforpay li {
        width: 42%;
    }

    ul.paymethods li {
        width: 23%;
        margin-left: 1%;
        min-height: 60px;
    }

        ul.paymethods li img {
            right: 50%;
            transform: translateY(-50%) translateX(50%) scale(0.8);
            -webkit-transform: translateY(-50%) translateX(50%) scale(0.8);
        }

        ul.paymethods li span {
            display: none;
        }

        ul.paymethods li a {
            display: none;
        }
}

@media only screen and (max-width: 852.5px) {

    ul.teacherside {
        width: auto;
        white-space: nowrap;
    }

    .teacherHolder {
        overflow-x: auto;
    }

    ul.teacherside li {
        width: auto !important;
        margin: 0 0 0 10px;
        position: relative;
        border-radius: 15px;
        min-height: 70px;
        padding: 10px 70px 10px 10px;
    }

        ul.teacherside li span {
            font-size: 16px;
            margin-top: 14px;
        }

    .imgteacher {
        width: 42px;
        height: 42px;
        top: 15px;
        right: 15px;
    }

    .nav-contant {
        padding-top: 20px;
    }

    .chapterbar a {
        margin-top: 6px;
        margin-bottom: 5px;
    }

    .langmenu .dropdown {
        margin-top: 10px;
    }

    .logo img {
        max-width: 153px;
    }

    .homevideo {
        height: 220px;
    }

    .custom-background {
        padding: 260px 30px 0;
    }

        .custom-background img.homeGroup {
            position: relative;
            bottom: unset;
            right: unset;
            z-index: 1;
            display: inline-block;
            max-width: 100%;
        }

    .navbar {
        padding: 0 3%;
    }

    .nav-contant .sign-up {
        padding: 3px;
    }

        .nav-contant .sign-up span {
            display: none;
        }


    .nav-contant .input-group:hover,
    .nav-contant .input-group:focus {
        position: absolute;
        width: 100%;
        top: 0;
        right: 0;
        height: 56px;
        z-index: 1;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }

        .nav-contant .input-group:hover .form-control,
        .nav-contant .input-group:focus .form-control {
            border-radius: 0px !important;
            padding: 0 37px;
        }

        .nav-contant .input-group:hover i,
        .nav-contant .input-group:focus i {
            padding: 22px 12px;
        }

    .nav-contant .pay-now {
        position: absolute;
        top: 145px;
        left: 0;
        width: 100%;
        border-radius: 0;
    }

    .nav-links a svg {
        display: block;
    }

    .nav-links {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding: 11px;
        border-radius: 30px;
        justify-content: center;
        position: fixed;
        bottom: 9px;
        width: calc(100% - 40px);
        background: #ffff;
        z-index: 10;
    }

        .nav-links a {
            text-align: -webkit-center;
            background: #fff;
        }

            .nav-links a svg {
                fill: #BABABA;
            }

            .nav-links a.active {
                background: #fff;
                color: #0071A3;
            }

                .nav-links a.active svg {
                    fill: #0071A3
                }

            .nav-links a:hover {
                background: unset !important;
                color: unset !important;
                opacity: 0.9;
            }

    .contact-us .form {
        padding: 40px 30px;
    }

    .nav-contant .pay-now img {
        display: none !important;
    }

    .nav-contant h3 {
        width: 100%;
        text-align: center;
        margin: 0;
    }

    main {
        margin: 0;
    }

    .List-view .bg-Elementary,
    .Learn-with-us .bg-Elementary,
    .Learn-with-us .bg-High,
    .Learn-with-us .bg-MIDDLE {
        background: url(../../images/MobileBg.png) round;
    }

    .Vision-Mission {
        padding: 51px;
    }

        .Vision-Mission .Vision {
            width: 100%;
            border-bottom: 1px solid #ffffff59;
            border-left: none;
            padding: 25px 0;
        }

        .Vision-Mission .Mission {
            padding: 37px 0;
            width: 100%;
        }

    .about-us {
        background: none;
    }

        .about-us .about-us-video iframe {
            width: 100%;
            height: revert-layer;
        }
}