/* CPQ v33: reliable CSS mobile icons + full desktop hero content on phones */

/* Do not depend on Font Awesome or inline SVG for the two mobile header buttons. */
html body .cpq-mobile-header-icon,
html body .cpq-mobile-search-submit{
    -webkit-appearance:none!important;
    appearance:none!important;
    font-family:Arial,sans-serif!important;
    font-size:0!important;
    text-indent:0!important;
    overflow:visible!important;
}
html body .cpq-mobile-header-icon::before,
html body .cpq-mobile-header-icon::after,
html body .cpq-mobile-search-submit::before,
html body .cpq-mobile-search-submit::after{
    content:none!important;
    display:none!important;
}
html body .cpq-mobile-header-icon > i,
html body .cpq-mobile-search-submit > i,
html body .cpq-mobile-header-icon > svg,
html body .cpq-mobile-search-submit > svg{
    display:none!important;
}
html body .cpq-css-icon{
    position:relative!important;
    display:block!important;
    flex:0 0 auto!important;
    box-sizing:border-box!important;
    color:#0b1f3a!important;
    font-size:0!important;
    line-height:1!important;
}

/* Search icon: circle + handle, drawn only with CSS. */
html body .cpq-css-icon-search{
    width:24px!important;
    height:24px!important;
}
html body .cpq-css-icon-search::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    width:13px!important;
    height:13px!important;
    left:2px!important;
    top:2px!important;
    border:2.4px solid currentColor!important;
    border-radius:50%!important;
    background:transparent!important;
    box-sizing:border-box!important;
}
html body .cpq-css-icon-search::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    width:9px!important;
    height:2.4px!important;
    left:14px!important;
    top:16px!important;
    border:0!important;
    border-radius:3px!important;
    background:currentColor!important;
    transform:rotate(45deg)!important;
    transform-origin:left center!important;
}

/* Menu icon: three independent bars. */
html body .cpq-css-icon-menu{
    width:25px!important;
    height:20px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:space-between!important;
}
html body .cpq-css-icon-menu > span{
    display:block!important;
    width:100%!important;
    height:2.6px!important;
    min-height:2.6px!important;
    border-radius:3px!important;
    background:#0b1f3a!important;
    border:0!important;
    margin:0!important;
    padding:0!important;
}

/* Close icon used while the mobile search field is open. */
html body .cpq-css-icon-close{
    width:23px!important;
    height:23px!important;
}
html body .cpq-css-icon-close::before,
html body .cpq-css-icon-close::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:2px!important;
    top:10px!important;
    width:20px!important;
    height:2.5px!important;
    border-radius:3px!important;
    background:#0b1f3a!important;
    transform-origin:center!important;
}
html body .cpq-css-icon-close::before{transform:rotate(45deg)!important;}
html body .cpq-css-icon-close::after{transform:rotate(-45deg)!important;}

html body .menu-offcanves,
html body .menu-offcanves > li,
html body .cpq-mobile-header-actions{
    overflow:visible!important;
}
html body .menu-offcanves > li{
    min-width:40px!important;
    min-height:40px!important;
}
html body .btn-bar.cpq-mobile-header-icon,
html body .m-search-icon.cpq-mobile-header-icon,
html body .m-cross-icon.cpq-mobile-header-icon{
    border:0!important;
    outline:0!important;
    background:transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
}

/* Keep the complete desktop homepage banner visible on phones. */
@media (max-width:767.98px){
    html body section.h-1-banner.bannar-area{
        display:block!important;
        visibility:visible!important;
        opacity:1!important;
        min-height:0!important;
        height:auto!important;
        overflow:visible!important;
        padding:20px 0 44px!important;
        margin:0!important;
        background:var(--bg-white,#fff)!important;
    }
    html body section.h-1-banner.bannar-area *,
    html body section.h-1-banner.bannar-area .animate__animated{
        visibility:visible!important;
        opacity:1!important;
        animation:none!important;
        -webkit-animation:none!important;
        transform:none!important;
        -webkit-transform:none!important;
    }
    html body section.h-1-banner.bannar-area > .container{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        padding-left:18px!important;
        padding-right:18px!important;
    }
    html body section.h-1-banner.bannar-area > .container > .row:first-child{
        display:flex!important;
        flex-direction:column!important;
        flex-wrap:nowrap!important;
        margin:0!important;
    }
    html body section.h-1-banner.bannar-area > .container > .row:first-child > [class*="col-"]{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        flex:0 0 auto!important;
        padding-left:0!important;
        padding-right:0!important;
    }
    html body section.h-1-banner.bannar-area > .container > .row:first-child > [class*="order-1"]{
        order:1!important;
    }
    html body section.h-1-banner.bannar-area > .container > .row:first-child > [class*="order-2"]{
        order:2!important;
    }
    html body section.h-1-banner.bannar-area img{
        display:block!important;
        width:100%!important;
        max-width:520px!important;
        height:auto!important;
        object-fit:contain!important;
        margin:0 auto 14px!important;
    }
    html body section.h-1-banner.bannar-area .h-1-banner-text{
        display:block!important;
        width:100%!important;
        margin:0!important;
        text-align:right!important;
        direction:rtl!important;
    }
    html body section.h-1-banner.bannar-area .h-1-banner-text h1{
        display:block!important;
        width:auto!important;
        max-width:100%!important;
        margin:10px 0 14px!important;
        font-size:34px!important;
        line-height:1.35!important;
        letter-spacing:0!important;
        text-align:right!important;
        direction:rtl!important;
    }
    html body section.h-1-banner.bannar-area .h-1-banner-text p{
        display:block!important;
        width:100%!important;
        margin:0 0 18px!important;
        font-size:15px!important;
        line-height:1.9!important;
        text-align:right!important;
        direction:rtl!important;
    }
    html body section.h-1-banner.bannar-area .search-option{
        display:block!important;
        width:100%!important;
        margin:0 0 22px!important;
        position:relative!important;
    }
    html body section.h-1-banner.bannar-area .search-option form{
        display:block!important;
        position:relative!important;
        width:100%!important;
    }
    html body section.h-1-banner.bannar-area .search-option .form-control{
        display:block!important;
        width:100%!important;
        min-height:52px!important;
        padding:12px 112px 12px 14px!important;
        margin:0!important;
        text-align:right!important;
        direction:rtl!important;
    }
    html body section.h-1-banner.bannar-area .search-option .submit-cls{
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        top:7px!important;
        right:7px!important;
        min-height:38px!important;
        padding:8px 14px!important;
        white-space:nowrap!important;
    }
    html body section.h-1-banner.bannar-area .students-rating{
        display:none!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card{
        display:block!important;
        position:static!important;
        width:100%!important;
        margin:14px 0 0!important;
        bottom:auto!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card > .row{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        margin:0!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card > .row > [class*="col-"]{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        padding:0!important;
        margin:0!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1{
        display:block!important;
        width:100%!important;
        margin:0!important;
        padding:16px!important;
        border-radius:10px!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 > .row{
        display:grid!important;
        grid-template-columns:58px minmax(0,1fr)!important;
        align-items:center!important;
        gap:12px!important;
        margin:0!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 > .row > div{
        display:block!important;
        width:auto!important;
        max-width:none!important;
        padding:0!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 img{
        width:52px!important;
        height:52px!important;
        margin:0!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 h6,
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 p{
        display:block!important;
        margin:0!important;
        text-align:right!important;
        direction:rtl!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 h6{
        margin-bottom:4px!important;
        font-size:16px!important;
        line-height:1.5!important;
    }
    html body section.h-1-banner.bannar-area .bannar-card .banner-card-1 p{
        font-size:14px!important;
        line-height:1.7!important;
    }
}

@media (max-width:420px){
    html body section.h-1-banner.bannar-area .h-1-banner-text h1{
        font-size:29px!important;
    }
}