@media (max-width: 1440px) { 
    html { font-size: 58%;}
    .main-slider-wrapper .content { margin-top: 25vh;}
}

@media (max-height: 560px) { 
    .main-slider-wrapper h2 { font-size: 4rem; line-height: normal; margin-bottom: 1rem;}
}



@media (max-width: 1024px) {
    html { font-size: 58%;}
    .container {padding: 0 20px;}
    .main-slider-wrapper h2 { font-size: 5rem;}

    nav.main-nav > ul > li > a, nav.main-nav > ul > li > div > a { padding-left: 13px; padding-right: 13px;}

    .aboutus { padding: 16rem 0 0;}
    .aboutus .content-wrap { margin: auto;}
}

@media (max-width: 768px) {

    html { font-size: 50%;}

    .header { position: fixed;}
    nav.main-nav { position: fixed; flex-direction: column; gap: 2rem; right: 0; width: 100%; max-width: 300px;  background: white; top: 20rem; padding-bottom: 3rem; transform: translateX(300px); transition: all 0.5s ease-in-out;}
    body.menu-active nav.main-nav {transform: translateX(0px);}
    nav.main-nav > ul > li, nav.main-nav > ul > li > ul li {display: block; padding: 2.5rem; border-bottom: solid 1px #c9c9c9} 
    nav.main-nav > ul > li > a, nav.main-nav > ul > li > div > a { color: black; text-align: left; display: inline;}
    nav.main-nav ul { flex-direction: column; width: 100%; text-align: left;}

    .header { overflow: hidden;}
    body.menu-active .header { overflow: visible;}
    .down-arrow-mobile { color: black; cursor: pointer;}
    .has-sub-menu .d-flex { justify-content: space-between;}

    
    .sub-menu { transform: translateY(0%); opacity: 1; visibility: visible; display: none !important; position: static;}
    .has-sub-menu:hover > .sub-menu { display: inherit;}
    .sub-menu.active { display: block !important; margin-top: 10px; background-color: #f9f9f9; height: 200px; overflow: auto;}

    .down-arrow-mobile.rotate { transform: rotate(90deg) !important;}

    .has-sub-menu:hover span.material-symbols-outlined { transform: none; transition: all 0.3s ease;}

    .sub-menu a { border: none; padding: 0;}

    .toggle-menu-icon { display: block; color: white;}
    .toggle-menu-icon span { font-size: 4rem;}
    .main-slider-wrapper .content { padding-left: 20px; padding-right: 20px;}

    .swiper-container, .main-slider-wrapper { height: 72vh;}

    .footer .container { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}

    .number_count { padding: 0; display: flex; align-items: center; justify-content: center; height: 8rem;}

}

@media (max-width: 767px) {
    html { font-size: 40%;}

    .main-slider-wrapper h2 { line-height: normal;}

    .section-2, .content-wrap { flex-direction: column;}

    .bottom-services .service-block { background: none;}

    .section-2 h4 { font-size: 22px;}

    .swiper-slide .content { display: block;}
    .for-desktop { display: none;}
    .main-slider-wrapper .backdrop-slideshow { position: static;}
    .main-slider-wrapper .swiper-slide { display: flex; align-items: center; justify-content: center}
    .main-slider-wrapper .swiper-slide .content, .main-slider-wrapper .swiper-slide .content h2 { color: white;}
    .main-slider-wrapper { height: auto;}
    .swiper-container { height: 100vh;}
    .bottom-services { flex-direction: column; color: black}

    .main-slider-wrapper .content, .main-slider-wrapper .content h2 { color: black}

    .page-banner .container { padding-top: 23rem;}
    .page-banner { height: 70rem;}

    .footer .container { gap: 4rem;}

    .our_team_card_wrapper { row-gap: 4rem;}

    .footer .number { font-size: 20px;}

    .our_services_grid .service-box:last-child { grid-column-start: 1;}

    .footer {margin-top: 0;}

    .main-slider-wrapper .content {
        margin-top: 15vh;
    }
    .aboutus .content-wrap .heading { background: #950e1cb3;}

}

@media (max-width: 680px) { 
    :root {
        --swiper-navigation-size: 22px !important;
    }
    .testimonial-section { padding: 0 5rem;}
    .main-slider-wrapper .img-attribution { top: 92%;}
    .page-banner p { line-height: 25px;}
}

@media (max-width: 480px) {


    .header .main-logo { max-width: 124px;}

    .aboutus .content-wrap .heading { min-width: 100%;}

    .main-slider-wrapper h2 { font-size: 4rem;}
    .main-slider-wrapper p { font-size: 16px; line-height: 24px; margin-top: 4rem;}


}