/*Generics*/
@media screen and (max-width: 1280px) {

    /*Modal*/
    .modal .modal-content .fa-xmark { top: 22%; } 

    /*Two Sides Content Without span*/
    .two-sides-content .no-span-section { padding-left: 0px; }

    /*Footer*/
    .main-footer .footer-wrapper { flex-wrap: wrap; }

}

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

    body { font-size: 16px; }
    
    /*Btn*/
    .btn { font-size: 16px; padding: 8px 14px; }

    /*Header*/
    .main-header { height: 65px; padding-right: 50px; }
    .main-header .logo-header img { width: 165px; }
    .main-header .login-btn { font-size: 16px; }


    /*Menu*/
    .main-header .gated-navigation { position: absolute; right: 20px; }
    .main-header .gated-navigation .menu.open { visibility: visible; opacity: 1; max-height: 1000px; height: 100dvh; }
    .main-header .gated-navigation .menu { visibility: hidden; opacity: 0; max-height: 0; position: fixed; top: 65px; left: 0; width: 100%; background-color: var(--sky-blue); padding: 12px 20px; display: flex; flex-direction: column; gap: 12px; transition: all 0.3s ease; }
    .main-header .gated-navigation .menu li a { padding: 20px 0; font-size: 14px; white-space: nowrap; }

    .main-header .gated-navigation .menuIcon { display: block; cursor: pointer; padding-left: 10px; transition: all 0.3s ease; }
    .main-header .gated-navigation .menuIcon:hover i { color: var(--light-sky-blue); }


    /*Hero*/
    .hero h1 { font-size: 30px; margin-bottom: 30px; text-align: center; }
    .hero .subtitle { font-size: 16px; }
    .hero .container-buttons { gap: 10px; }
    .hero .container-buttons li { padding: 8px 14px; font-size: 16px; }
    .hero .content { margin-top: 45px; }
    .hero .wrapper-arrow { bottom: 30px; }

    /*Section with background*/
    .section-with-bg { min-height: 100vh; height: 100%; }
    .section-with-bg h2 { font-size: 20px; }

    /*Text with image*/
    .text-with-img .content .text-wrapper { font-size: 18px; }
    .text-with-img h2 { font-size: 20px; }

    /*Common Section*/
    .common-section { padding: 60px 20px; }
    .common-section h2 { font-size: 28px; }
    .common-section .subtitle { font-size: 18px; }

    /*Two Sides Content*/
    .two-sides-content .content { gap: 30px; }
    .two-sides-content .right span { font-size: 14px; margin-top: 40px; }
    .two-sides-content .right img { min-width: 220px; }

    /*Two Sides Content With Circle*/
    .two-sides-content.with-circle .right img { min-width: auto; }
    .two-sides-content.with-circle .right .images-wrapper { min-width: 220px; max-width: 220px; }

    /*Slider Section*/
    .slider-section .swiper-wrapper .swiper-slide img { width: 80%; display: block; margin: 0 auto; }
    .slider-section .swiper-wrapper .swiper-slide p { font-size: 14px; max-width: 270px; right: 20px; }

    /*Modal*/
    .modal .modal-content { max-width: 500px; }
    .modal .modal-content .fa-xmark { top: 97px; }

    /*Footer*/
    .main-footer .bottom { padding-top: 70px; }
    .main-footer .logos-wrapper .logo-footer img { width: 160px; }
    .main-footer .logos-wrapper .by-cuemate { width: 250px; }

}

@media screen and (max-width: 768px){
    
    /*Text with image*/
    .text-with-img .content { gap: 35px; }
    .text-with-img .content .text-wrapper { align-items: center; } 

    /*Slider Section*/
    .slider-section { padding: 0 20px; }
    .slider-section .swiper-wrapper .swiper-slide p { font-size: 12px; max-width: 255px; bottom: -5px; }

    .swiper-pagination-bullet { width: 8px; height: 8px; }

    /*Two Sides Content*/
    .two-sides-content .content,
    .two-sides-content .right.display-flex { flex-direction: column; }
    .two-sides-content .right span { padding-left: 0; }

    /*Modal*/
    .modal .modal-content .fa-xmark { top: 27px; }

    /*Footer*/
    .main-footer .footer-wrapper { flex-wrap: wrap; gap: 40px; justify-content: flex-start; }
    .main-footer .logos-wrapper { width: 100%; }
    .main-footer .bottom { flex-direction: column; gap: 30px; }
    .main-footer ul nav .menu { flex-direction: column; gap: 14px; }
    .main-footer .menu .menu-item-has-children .sub-menu { max-width: none; }
    .main-footer .footer-wrapper.no-gated { gap: 30px; }

}

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

    /*Header*/
    .main-header .logo-header { margin-right: 20px;  }
    .main-header .logo-header img { width: 100px; }
    .main-header .right-nav { gap: 14px; }
    .main-header .login-btn,
    .main-header .logout-btn { font-size: 14px; min-width: unset; }

    /*Hero*/
    .hero .container-buttons { flex-direction: column; gap: 15px; }

    /*Common Section*/
    .common-section { padding: 40px 20px; }
    .common-section h2 { text-align: center; }
    .common-section h3 { font-size: 20px; }
    .common-section .subtitle { font-size: 18px; }

    /*Two Sides Content*/
    .two-sides-content { padding: 40px 20px; }
    .two-sides-content .list-item-circle { margin-left: 0; }

    /*Two Sides Content With Circle*/
    .two-sides-content.with-circle .right .images-wrapper .circle.blue { right: -45px; }
    .two-sides-content.with-circle .right .images-wrapper .circle.green { right: -35px; }
    .two-sides-content.with-circle .right .images-wrapper .circle.red { right: -40px; }

    /*Slider Section*/
    .slider-section { padding: 0 10px; }
    .slider-section .swiper-wrapper .swiper-slide p { position: static; margin: 20px auto 0; }

    /*Modal*/
    .modal .modal-content .fa-xmark { top: -50px; right: 0; }
    .modal .modal-content iframe { left: 50%; transform: translateX(-50%); width: 90%; }

    /*Footer*/
    .main-footer { padding: 60px 20px; }
    .main-footer .logos-wrapper .logo-footer img { width: 140px; }
    .main-footer .logos-wrapper .by-cuemate { width: 220px; }
    .main-footer .contact-wrapper { width: 100%; }

    /*Error page*/
    .error404 .page-not-found figure { max-width: 80% !important; }

}