/* =========================
   PREMIUM GLOBAL STYLE
========================= */

*{
    margin:0;
    padding:0;
	font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;
    box-sizing:border-box;
    scroll-behavior:smooth;
}


body {
    margin: 0;
	overflow-x: hidden;
	font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;

}


body{
    font-family: 'Poppins', sans-serif;
    background:#f5f5f2;
    overflow-x:hidden;
    color:#111;
}

/* =========================
   PREMIUM HEADER
========================= */

header{
    width:100%;
    height:95px;
    background:rgb(255, 255, 255);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 70px;

    position:fixed;
    top:0;
    left:0;
    z-index:999;

    box-shadow:
    0 8px 25px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.06);

    border-bottom:1px solid rgba(0,0,0,0.05);
}

/* =========================
   LOGO
========================= */

.logo{
    position:absolute;
    top:12px;
    left:45px;
    z-index:1000;
}

.logo img{
    width:170px;
    height:auto;

    filter:
    drop-shadow(0 10px 18px rgba(0,0,0,0.18));

    transition:0.4s ease;
}

.logo img:hover{
    transform:scale(1.04) rotate(-2deg);
}

/* =========================
   NAVBAR
========================= */

nav{
    margin-left:auto;
}

nav ul{
    display:flex;
    align-items:center;
    gap:45px;
    list-style:none;
}

nav ul li a{
    text-decoration:none;
    color:#111;
    font-size:1.08rem;
    font-weight:500;
    letter-spacing:0.3px;

    position:relative;
    transition:0.35s ease;
}

/* Premium hover underline */

nav ul li a::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-8px;

    width:0%;
    height:3px;

    background:#245829;
    border-radius:50px;

    transition:0.35s ease;
}

nav ul li a:hover{
    color:#245829;
}

nav ul li a:hover::after{
    width:100%;
}

/* =========================
   HAMBURGER
========================= */

.menu-btn{
    display:none;
    font-size:2rem;
    color:#245829;
    cursor:pointer;
}




#preloader{
    position:fixed;

    inset:0;

    background:#f5f1e8;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:999999;
}

/* LOGO */

#preloader img{
    width:110px;

    animation:pulseLogo 1.5s infinite ease-in-out;

    filter:
    drop-shadow(0 10px 25px rgba(0,0,0,0.18))
    drop-shadow(0 0 22px rgba(36,88,41,0.22));
}

@keyframes pulseLogo{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

    100%{
        transform:scale(1);
    }
}




/* =========================
   DESKTOP PRODUCTS SECTION
========================= */

.desktop-products{
    width:100%;

    margin-top:90px;

    display:flex;
    justify-content:center;

    padding:0 20px;
}

/* CONTAINER */



.products-container{
    width:82%;

    max-width:1150px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(3, 1fr);

    gap:10px;
}
/* =========================
   PREMIUM CARD
========================= */

.product-card{
    background:#ffffff;

    padding:30px;

    border-radius:10px;

    box-shadow:
    0 10px 35px rgba(0,0,0,0.08);

    transition:0.4s ease;

    border:1px solid rgba(0,0,0,0.05);
}

.product-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 18px 45px rgba(0,0,0,0.12);
}



/* PRODUCT LINK */

.product-link{
    text-decoration:none;

    color:inherit;

    display:block;
}


/* =========================
   IMAGE AREA
========================= */

.product-image{
    width:100%;

    background:#ebe3cf;

    border-radius:8px;

    overflow:hidden;

    padding:22px;

    position:relative;
}

.product-image img{
    width:100%;

    height:290px;

    object-fit:contain;

    display:block;
}

/* HAPPY CUSTOMER */

.product-image span{
    position:absolute;

    right:18px;
    bottom:14px;

    font-size:1rem;
    font-weight:600;

    color:#222;
}

/* =========================
   PRODUCT INFO
========================= */

.product-info{
    margin-top:18px;

    background:#245829;

    padding:18px;

    border-radius:8px;
}

.product-info h2{
    color:#fff;

    font-size:2rem;

    line-height:1.2;

    margin-bottom:8px;

    font-weight:700;
}

.product-info p{
    color:#f1f1f1;

    font-size:1.3rem;

    font-weight:500;
}



/* =========================
   FEEDBACK SECTION
========================= */

.feedback-section{
    background:
    linear-gradient(
    135deg,
    #245829,
    #1d4722
    );
    
    border-radius:18px;

    padding:28px;

    overflow:hidden;

    box-shadow:
    0 12px 35px rgba(0,0,0,0.12);

    border:1px solid rgba(255,255,255,0.08);
}

/* =========================
   HEADER
========================= */

.feedback-header{
    margin-bottom:24px;
}

.feedback-header h2{
    color:#fff;

    font-size:2rem;

    margin-bottom:8px;

    font-weight:700;
}

.feedback-header p{
    color:#d8e8da;

    font-size:1rem;
}

/* =========================
   HORIZONTAL SCROLL
========================= */

.feedback-scroll{
    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding-bottom:10px;
}

/* HIDE SCROLLBAR */

.feedback-scroll::-webkit-scrollbar{
    height:6px;
}

.feedback-scroll::-webkit-scrollbar-thumb{
    background:#ffffff50;

    border-radius:20px;
}

/* =========================
   CARD
========================= */

.feedback-card{
    min-width:260px;
    min-height: 200px;

    background:#fff;

    border-radius:14px;

    overflow:hidden;

    flex-shrink:0;

    transition:0.4s ease;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.15);
}

.feedback-card:hover{
    transform:translateY(-8px);
}

/* IMAGE */

.feedback-card img{
    width:100%;
    height:400px;

    object-fit:cover;

    display:block;
}


/* =========================
   4TH PRODUCT POSITION
========================= */

.product-card:nth-child(4){

    grid-column:1 / 2;
}

/* =========================
   FEEDBACK POSITION
========================= */

.feedback-section{

    grid-column:2 / 4;
}




/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:992px){

    header{
        height:90px;
        padding:0 25px;
    }

    .logo{
        left:50%;
        transform:translateX(-50%);
        top:12px;
    }

    .logo img{
        width:145px;
    }

    nav{
        position:fixed;

        top:90px;
        right:-100%;

        width:280px;
        height:100vh;

        background:rgba(255,255,255,0.96);

        backdrop-filter:blur(18px);

        transition:0.4s ease;

        box-shadow:
        -10px 0 25px rgba(0,0,0,0.08);

        padding-top:60px;
    }

    nav.active{
        right:0;
    }

    nav ul{
        flex-direction:column;
        gap:38px;
    }

    nav ul li a{
        font-size:1.15rem;
    }

    .menu-btn{
        display:block;
        margin-left:auto;
        z-index:1001;
    }

    .hero{
        padding-top:150px;
    }

  
}

/* =========================
   SMALL MOBILE
========================= */

@media(max-width:600px){

    .logo img{
        width:125px;
    }

    
}


/* =========================
   PREMIUM FOOTER
========================= */

footer{
    width:100%;

    background:#000;

    margin-top:80px;

    padding:28px 0;

    border-top:4px solid #245829;
}

.footer-container{
    width:92%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

/* =========================
   LEFT TEXT
========================= */

.footer-left{
    color:#d7d7d7;

    font-size:1rem;
    font-weight:400;

    letter-spacing:0.4px;
}

/* =========================
   RIGHT LINKS
========================= */

.footer-right{
    display:flex;
    align-items:center;
    gap:28px;
}

.footer-right a{
    text-decoration:none;

    color:#ffffff;

    font-size:1rem;
    font-weight:500;

    position:relative;

    transition:0.35s ease;
}

/* Hover Effect */

.footer-right a::after{
    content:'';

    position:absolute;
    left:0;
    bottom:-6px;

    width:0%;
    height:2px;

    background:#245829;

    transition:0.35s ease;
}

.footer-right a:hover{
    color:#4fa063;
}

.footer-right a:hover::after{
    width:100%;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:700px){

    .footer-container{
        flex-direction:column;

        text-align:center;
    }

    .footer-right{
        gap:22px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .footer-left{
        font-size:0.92rem;
    }

    .footer-right a{
        font-size:0.95rem;
    }
}



.hero-banner img{
    width:100%;
    height:auto;
    margin-top: 200px;
    display:block;
    object-fit:cover;
}





/* =========================
   MOBILE RESPONSIVE
========================= */

@media(max-width:768px){

    /* BANNER */

    .hero-banner img{
    width:100%;
    height:auto;
    margin-top: 0px;
    display:block;

    object-fit:cover;
}


    /* PRODUCTS SECTION */

    .desktop-products{
        margin-top:55px;

        padding:0 10px;
    }

    /* GRID */

    .products-container{
        width:100%;

        grid-template-columns:repeat(2, 1fr);

        gap:14px;
    }

    /* PRODUCT CARD */

    .product-card{
        padding:10px;

        border-radius:10px;
    }

    /* IMAGE AREA */

    .product-image{
        padding:10px;

        border-radius:8px;
    }

    .product-image img{
        width:100%;

        height:110px;

        object-fit:contain;
    }

    /* HAPPY CUSTOMER */

    .product-image span{
        right:8px;
        bottom:6px;

        font-size:0.45rem;
    }

    /* PRODUCT INFO */

    .product-info{
        margin-top:10px;

        padding:10px;

        border-radius:6px;
    }

    .product-info h2{
        font-size:0.75rem;

        line-height:1.3;

        margin-bottom:3px;
    }

    .product-info p{
        font-size:0.58rem;
    }

    /* =========================
       FEEDBACK SECTION
    ========================== */

    .feedback-section{
        grid-column:1 / -1;

        padding:14px;

        border-radius:10px;
    }

    /* HEADER */

    .feedback-header{
        margin-bottom:12px;
    }

    .feedback-header h2{
        font-size:1rem;

        margin-bottom:4px;
    }

    .feedback-header p{
        font-size:0.58rem;
    }

    /* SCROLL AREA */

    .feedback-scroll{
        gap:10px;
    }

    /* FEEDBACK CARD */

    .feedback-card{
        min-width:140px;

        border-radius:8px;
    }

    .feedback-card img{
        width:100%;
        

        height:190px;

        object-fit:cover;
    }

    
}

/* FIX PRODUCT POSITION */

.product-card:nth-child(4){

    grid-column:auto;
}