/*======================================
  Laptop (1200px to 993px)
======================================*/

@media (max-width:1200px){

    .header-wrapper{
        padding:0 40px;
    }

    .main-menu{
        gap:20px;
    }

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

    .header-btn{
        padding:0 18px;
        font-size:13px;
    }

    .header-phone{
        font-size:13px;
    }

    /*======================================
    Hero - Laptop (1200px)
    ======================================*/

    .hero-section{
        min-height:650px;
    }

    .hero-wrapper{
        min-height:650px;
        margin-top:0;
    }

    .hero-content{
        width:480px;
        margin-left:40px;
        margin-top:0;
    }

    .hero-title{
        font-size:40px;
    }

    .hero-description{
        font-size:16px;
    }

    .hero-main-image{
        width:760px;
    }

    .hero-card-1{
        right:360px;
    }

    .hero-card-2{
        right:300px;
    }

    .hero-card-3{
        right:70px;
    }

}


/*======================================
  Tablet (992px to 768px)
======================================*/

@media (max-width:991px){

   /* Tablet Header (768px - 991px) */
.header-wrapper{
    padding:0 25px;
    gap:10px;
}

.site-logo img,
.custom-logo{
    width:90px;
}

.main-navigation{
    flex:1;
    margin:0 20px;
    display:flex;
    justify-content:center;
}

.main-menu{
    display:flex;
    gap:20px;
}

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

.header-right{
    display:flex;
    align-items:center;
    gap:10px;
}

/* Contact button hide */
.header-btn{
    display:none;
}

/* Phone show */
.header-phone{
    display:flex;
    padding:8px 14px;
    font-size:13px;
}

    /*======================================
    Hero - Tablet
    ======================================*/

    .hero-section{
        min-height:560px;
        padding:40px 0;
        overflow:hidden;
    }

    .hero-wrapper{
        min-height:560px;
        margin-top:0;
        display:flex;
        align-items:center;
    }

    .hero-content{
        width:45%;
        margin-left:20px;
        margin-top:0;
        z-index:5;
    }

    .hero-badge{
        font-size:14px;
    }

    .hero-title{
        font-size:32px;
        line-height:1.25;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-main-image{
        position:absolute;
        width:500px;
        right:-100px;
        bottom:0;
    }

    .hero-bottom-left{
        width:150px;
        left:10px;
    }

    .hero-top-left{
        width:80px;
    }

    .hero-top-right{
        width:90px;
    }

    .hero-card{
        transform:scale(.65);
    }

    .hero-card-1{
        right:180px;
        top:80px;
    }

    .hero-card-2{
        right:140px;
        top:200px;
    }

    .hero-card-3{
        right:20px;
        top:40px;
    }


    /*======================================
      About Us
    ======================================*/

    .about-section{
        padding:70px 30px;
    }

    .about-content{
        max-width:100%;
        margin-bottom:40px;
    }

    .about-heading{
        font-size:38px;
    }

    .about-description{
        font-size:16px;
    }

    .about-stats{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
        margin:40px 0;
    }

    .about-images{
        grid-template-columns:1fr;
        gap:20px;
    }

    .about-images img{
        height:300px;
    }

    /* Products */

    .products-section{
        padding:70px 30px;
    }

    .products-content{
        margin-bottom:40px;
    }

    .products-title{
        font-size:36px;
    }

    .products-description{
        font-size:16px;
    }

    .products-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:25px;
        align-items:start;
    }

    .product-card{
        height:auto;
        display:flex;
        flex-direction:column;
    }

    .product-content{
        padding:20px;
        flex:1;
    }

    .product-content h4{
        font-size:18px;
    }

    .product-content p{
        font-size:16px;
    }

    .product-image img{
        display:block;
        width:100%;
        height:220px;
        object-fit:cover;
    }


    /* Why Choose Us */
    .why-section{
        position:relative;
        padding:80px 20px;
        height:auto;
        background-size:cover;
        background-position:center;
    }

    .why-box{
        width:90%;
        max-width:760px;
        margin:40px auto;
        padding:25px;
        border-radius:18px;
        position:relative;
        z-index:5;
    }

    .why-title{
        font-size:34px;
    }

    .why-description{
        font-size:16px;
    }

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

    .why-feature{
        padding:18px;
    }

    .why-feature h4{
        font-size:18px;
    }

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

    .testimonial-section{
        padding:120px 30px 60px;
    }

    .testimonial-wrapper{
        min-height:420px;
    }

    .testimonialSwiper{
        max-width:420px;
        position:relative;
        z-index:10;
    }

    .testimonial-title{
        font-size:34px;
    }

    .testimonial-review{
        font-size:16px;
        line-height:1.7;
    }

    /* Left Images */
    .left-image-1{
        width:120px;
        left:20px;
        top:20px;
    }

    .left-image-2{
        width:100px;
        left:60px;
        top:120px;
    }

    /* Right Images */
    .right-image-1{
        width:70px;
        right:110px;
        top:10px;
    }

    .right-image-2{
        width:110px;
        right:20px;
        top:110px;
    }

    /* Leaves */
    .top-left-leaf{
        width:70px;
        left:0;
        top:20px;
    }

    .bottom-left-leaf{
        width:80px;
        left:80px;
        top:260px;
    }

    .top-right-leaf{
        width:70px;
        right:10px;
        top:40px;
    }

    .bottom-right-leaf{
        width:90px;
        right:80px;
        top:260px;
    }



}



/*======================================
  Mobile (767px to 576px)
======================================*/

@media (max-width:767px){
    .header-wrapper{
        width:100%;
        max-width:100%;
        padding:0 15px;
        box-sizing:border-box;
        overflow:hidden;
    }

    .site-header{
        width:100%;
        overflow:hidden;
    }

    .site-logo img,
    .custom-logo{
        width:75px;
    }

    .menu-toggle{
        display:flex;
    }

    .main-navigation{
        position:fixed;
        left:-100%;
    }

    .header-right{
        display:none;
    }

    .main-navigation.active{
        left:0;
    }

    .main-menu{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:20px;
    }

    .main-menu li{
        width:100%;
    }

    .main-menu li a{
        display:block;
        width:100%;
        font-size:18px;
    }

    body.menu-open{
        overflow:hidden;
    }


    /*======================================
    Hero - Mobile
    ======================================*/

    .hero-section{
        min-height:auto;
        padding:40px 0 0;
    }

    .hero-badge{
        justify-content:center;
        font-size:14px;
    }

    .hero-title{
        font-size:30px;
        line-height:1.3;
    }

    .hero-description{
        font-size:16px;
        max-width:100%;
    }

    .hero-btn{
        margin:auto;
    }

    /* About Us */

    .about-section{
        padding:60px 20px;
    }

    .about-badge{
        font-size:16px;
    }

    .about-heading{
        font-size:30px;
    }

    .about-description{
        font-size:15px;
    }

    .about-stats{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
        margin:40px 0;
    }

    .about-stat h3{
        font-size:32px;
    }

    .about-stat h5{
        font-size:18px;
    }

    .about-stat p{
        font-size:15px;
    }

    .about-images img{
        height:220px;
    }
    
    /*  Products */
    
    .products-section{
        padding:60px 20px;
    }

    .product-content h4{
        font-size:20px;
        margin-bottom:12px;
    }

    .product-content p{
        font-size:16px;
        line-height:1.6;
        margin-bottom:0;
    }

    .products-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }

    .product-card{
        display:flex;
        flex-direction:column;
        overflow:hidden;
    }

    .product-content{
        min-height:auto;
    }

    .product-image{
        position:relative;
        margin-top:auto;
    }

    .product-image img{
        width:100%;
        height:220px;
        display:block;
        object-fit:cover;
    }

    .product-arrow{
        position:absolute;
        top:-18px;
        right:18px;
    }

    /*======================================
    Why Choose Us - Mobile
    ======================================*/
    .why-section{
        position:relative;
        padding:70px 15px;
        height:auto;
        background-size:cover;
        background-position:center;
    }

    .why-box{
        width:95%;
        max-width:700px;
        margin:30px auto;
        padding:20px;
        border-radius:16px;
        position:relative;
        z-index:5;
    }

    .why-badge{
        font-size:14px;
    }

    .why-title{
        font-size:28px;
        line-height:1.3;
    }

    .why-description{
        font-size:14px;
        line-height:1.6;
    }

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

    .why-feature{
        padding:15px;
    }

    .why-feature img{
        width:34px;
        height:34px;
    }

    .why-feature h4{
        font-size:15px;
    }

    .why-feature p{
        font-size:13px;
        line-height:1.5;
    }

    .testimonial-section{
        padding:80px 20px 40px;
    }

    .testimonial-wrapper{
        min-height:auto;
    }

    .testimonialSwiper{
        max-width:100%;
    }

    .testimonial-title{
        font-size:28px;
    }

    .testimonial-review{
        font-size:15px;
    }

}


/*======================================
  Small Mobile (575px and below)
======================================*/

@media (max-width:576px){

    .header-wrapper{
        padding:0 15px;
    }

    .main-navigation{
        width:100%;
    }

}

/* Tablet + Desktop */
@media (min-width:768px){

    .menu-toggle{
        display:none;
    }

    .main-navigation{
        position:static;
        display:flex;
        margin:0 30px;
        width:auto;
        height:auto;
        padding:0;
        box-shadow:none;
        background:transparent;
    }

    .main-menu{
        display:flex;
        flex-direction:row;
        gap:15px;
        align-items:center;
    }

    .header-right{
        display:flex;
    }

}