/* ========================================= */
/* RESPONSIVE CSS */
/* ========================================= */





/* ========================================= */
/* EXTRA LARGE DEVICES */
/* 1600px */
/* ========================================= */

@media(max-width:1600px){

    .hero-left h1{
        font-size:68px;
    }

    .services-grid{
        gap:18px;
    }

}





/* ========================================= */
/* LARGE LAPTOP */
/* 1400px */
/* ========================================= */

@media(max-width:1400px){

    .container{
        width:94%;
    }

    .hero-left h1{
        font-size:60px;
    }

    .hero-left p{
        font-size:19px;
    }

    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-container{
        grid-template-columns:repeat(2,1fr);
    }

}





/* ========================================= */
/* LAPTOP */
/* 1200px */
/* ========================================= */

@media(max-width:1200px){

    /* HEADER */

    .nav-menu{
        gap:35px;
    }

    .nav-menu a{
        font-size:16px;
    }

    .header-whatsapp{
        padding:0 20px;
        height:56px;
        font-size:15px;
    }

    .header-whatsapp i{
        font-size:22px;
    }

    .header-right{
        gap:14px;
    }

    .language-toggle{
        height:42px;
        padding:0 12px;
        font-size:14px;
    }

    .header-youtube{
        width:44px;
        height:44px;
        font-size:20px;
    }





    /* HERO */

    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
        gap:60px;
    }

    .hero-left p{
        margin:auto;
        margin-bottom:35px;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-right img{
        max-width:420px;
    }





    /* MAIN */

    .main-grid{
        grid-template-columns:1fr;
    }

    .pickup-form{
        margin-top:30px;
    }

}





/* ========================================= */
/* TABLET */
/* 991px */
/* ========================================= */

@media(max-width:991px){

    /* HEADER */

    .navbar{
        height:85px;
    }

    .menu-toggle{
        display:block;
    }

    .header-whatsapp{
        display:none;
    }

    .header-youtube{
        display:none;
    }





    /* MOBILE MENU */

    .nav-menu{
        position:fixed;
        top:85px;
        left:-100%;
        width:100%;
        height:auto;
        background:#045321;
        flex-direction:column;
        align-items:flex-start;
        padding:40px 7%;
        gap:28px;
        transition:0.4s;
        z-index:999;
    }

    .nav-menu.active{
        left:0;
    }

    .nav-menu a{
        font-size:18px;
    }

    .nav-menu .language{
        width:100%;
        flex-direction:column;
        align-items:flex-start;
    }

    .nav-menu .language-toggle{
        height:46px;
        min-width:150px;
        justify-content:space-between;
    }

    .nav-menu .language-toggle span{
        display:inline;
    }

    .nav-menu .language-menu{
        position:static;
        width:180px;
        margin-top:10px;
        display:none;
        opacity:1;
        visibility:visible;
        transform:none;
        transition:none;
    }

    .nav-menu .language-switcher.open .language-menu{
        display:block;
    }





    /* HERO */

    .hero-section{
        padding-top:140px;
        padding-bottom:70px;
    }

    .hero-left h1{
        font-size:52px;
    }

    .hero-left p{
        font-size:18px;
    }

    .hero-right img{
        max-width:380px;
    }





    /* SERVICES */

    .services-box h2,
    .why-box h2,
    .bottom-card h2{
        font-size:34px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:16px;
    }





    /* PROCESS */

    .process-grid{
        justify-content:center;
    }

}





/* ========================================= */
/* MOBILE LARGE */
/* 768px */
/* ========================================= */

@media(max-width:768px){

    .container{
        width:95%;
    }





    /* HEADER */

    .navbar{
        height:78px;
    }

    .logo{
        gap:10px;
    }

    .logo img{
        width:60px;
        height:60px;
    }

    .logo-text h2{
        font-size:22px;
    }

    .logo-text p{
        font-size:12px;
    }

    .header-right{
        gap:10px;
    }

    .menu-toggle{
        font-size:28px;
    }





    /* HERO */

    .hero-section{
        padding-top:120px;
        padding-bottom:60px;
    }

    .hero-left h1{
        font-size:42px;
    }

    .hero-left p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .book-btn,
    .whatsapp-outline{
        width:100%;
        justify-content:center;
        font-size:18px;
        padding:16px 24px;
    }

    .hero-right img{
        max-width:320px;
    }





    /* SERVICES */

    .services-box{
        padding:25px;
    }

    .services-grid{
        grid-template-columns:1fr;
    }

    .service-card{
        padding:24px;
    }

    .service-card img{
        height:220px;
    }

    .service-card i{
        font-size:50px;
    }

    .service-card h3{
        font-size:22px;
    }





    /* WHY */

    .why-box{
        padding:60px 0;
    }

    .why-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .why-item{
        flex-direction:column;
        text-align:center;
        align-items:center;
    }

    .why-icon{
        min-width:65px;
        width:65px;
        height:65px;
        font-size:24px;
    }





    /* PROCESS */

    .process-grid{
        flex-direction:column;
    }

    .process-arrow{
        transform:rotate(90deg);
    }

    .process-item{
        width:100%;
        max-width:220px;
    }





    /* FORM */

    .form-top{
        padding:20px;
    }

    .form-top img{
        width:60px;
    }

    .form-top h2{
        font-size:24px;
    }

    .pickup-form form{
        padding:20px;
    }

    .input-box{
        height:55px;
    }

    .pickup-form button{
        height:55px;
        font-size:18px;
    }





    /* TABLE */

    .rate-table th,
    .rate-table td{
        padding:14px;
        font-size:15px;
    }

    .rate-notice{
        flex-direction:column;
        padding:24px;
    }

    .notice-icon{
        width:56px;
        height:56px;
        min-width:56px;
        font-size:24px;
    }

    .rate-heading{
        display:block;
    }

    .rate-category-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .rate-category{
        padding:20px;
    }





    /* FOOTER */

    .main-footer{
        padding-top:60px;
    }

    .footer-container{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-col{
        text-align:center;
    }

    .footer-logo{
        justify-content:center;
    }

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

    .footer-contact p{
        justify-content:center;
    }





    /* FLOAT BUTTON */

    .call-float,
    .whatsapp-float,
    .youtube-float{
        width:58px;
        height:58px;
        font-size:24px;
        right:15px;
    }

    .call-float{
        bottom:155px;
    }

    .whatsapp-float{
        bottom:85px;
    }

    .youtube-float{
        bottom:15px;
    }

}





/* ========================================= */
/* SMALL MOBILE */
/* 576px */
/* ========================================= */

@media(max-width:576px){

    /* HERO */

    .hero-left h1{
        font-size:36px;
        line-height:1.2;
    }

    .hero-left p{
        font-size:16px;
    }

    .hero-right img{
        max-width:260px;
    }





    /* HEADINGS */

    .services-box h2,
    .why-box h2,
    .bottom-card h2{
        font-size:28px;
    }





    /* SERVICES */

    .service-card img{
        height:200px;
    }

    .service-card h3{
        font-size:20px;
    }

    .service-card p{
        font-size:15px;
    }





    /* BUTTONS */

    .book-btn,
    .whatsapp-outline{
        font-size:16px;
    }





    /* FOOTER */

    .footer-logo h2{
        font-size:24px;
    }

    .footer-col h3{
        font-size:22px;
    }

}





/* ========================================= */
/* EXTRA SMALL MOBILE */
/* 420px */
/* ========================================= */

@media(max-width:420px){

    .container{
        width:94%;
    }





    /* HEADER */

    .navbar{
        height:74px;
    }

    .logo img{
        width:52px;
        height:52px;
    }

    .logo-text h2{
        font-size:18px;
    }

    .logo-text p{
        font-size:10px;
    }

    .menu-toggle{
        font-size:25px;
    }

    .nav-menu{
        top:74px;
    }





    /* HERO */

    .hero-section{
        padding-top:110px;
        padding-bottom:50px;
    }

    .hero-left h1{
        font-size:30px;
    }

    .hero-left p{
        font-size:15px;
    }

    .book-btn,
    .whatsapp-outline{
        font-size:15px;
        padding:15px 20px;
    }





    /* CARD */

    .services-box,
    .bottom-card{
        padding:20px;
    }

    .service-card{
        padding:20px;
    }

    .service-card img{
        height:180px;
    }

    .service-card i{
        font-size:42px;
    }

    .service-card h3{
        font-size:19px;
    }





    /* WHY */

    .why-icon{
        width:58px;
        height:58px;
        min-width:58px;
        font-size:22px;
    }

    .why-item h4{
        font-size:20px;
    }

    .why-item p{
        font-size:15px;
    }





    /* FORM */

    .form-top h2{
        font-size:20px;
    }

    .input-box{
        height:52px;
    }

    .pickup-form button{
        height:52px;
        font-size:16px;
    }





    /* TABLE */

    .rate-table th,
    .rate-table td{
        padding:12px;
        font-size:14px;
    }

    .rate-notice{
        padding:20px;
        border-radius:16px;
    }

    .rate-notice h2{
        font-size:22px;
    }

    .rate-notice p,
    .rate-category li{
        font-size:14px;
    }

    .rate-category h3{
        font-size:19px;
    }

    .rate-category li{
        gap:10px;
    }





    /* FLOAT */

    .call-float,
    .whatsapp-float,
    .youtube-float{
        width:54px;
        height:54px;
        font-size:22px;
    }

}





/* ========================================= */
/* LANDSCAPE MOBILE */
/* ========================================= */

@media(max-height:500px) and (orientation:landscape){

    .hero-section{
        padding-top:120px;
        padding-bottom:40px;
    }

    .hero-container{
        gap:30px;
    }

    .hero-left h1{
        font-size:38px;
    }

    .hero-right img{
        max-width:240px;
    }

}