/* =========================
   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);
    }
}













/* =========================
   CONTACT SECTION
========================= */

.contact-section{
    width:100%;

    padding:170px 40px 80px;

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

    gap:40px;

    background:
    linear-gradient(
    to bottom,
    #f8f7f3,
    #f2efe7
    );
}

/* =========================
   LEFT SIDE
========================= */

.contact-left{
    width:48%;
}

/* TAG */

.contact-tag{
    display:inline-block;
    margin-top: 30px;
    background:
    rgba(36,88,41,0.10);

    color:#245829;

    padding:10px 16px;

    border-radius:50px;

    font-size:0.9rem;

    font-weight:600;

    margin-bottom:18px;
}

/* TITLE */

.contact-left h2{
    font-size:3rem;

    line-height:1.2;

    color:#1a1a1a;

    margin-bottom:18px;

    font-weight:700;
}

/* DESCRIPTION */

.contact-left p{
    color:#555;

    font-size:1rem;

    line-height:1.8;

    margin-bottom:30px;
}

/* =========================
   INFO CARDS
========================= */

.contact-info-wrapper{
    display:flex;
    flex-direction:column;

    gap:18px;
}

.contact-info-card{
    background:#ffffff;

    border-radius:14px;

    padding:22px;

    display:flex;

    gap:18px;

    align-items:flex-start;

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

    box-shadow:
    0 10px 30px rgba(0,0,0,0.06);

    transition:0.4s ease;
}

.contact-info-card:hover{
    transform:translateY(-5px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.10);
}

/* ICON */

.contact-icon{
    width:55px;
    height:55px;

    border-radius:12px;

    background:
    rgba(36,88,41,0.10);

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

    font-size:1.5rem;

    flex-shrink:0;
}

/* HEADING */

.contact-info-card h3{
    color:#245829;

    font-size:1.2rem;

    margin-bottom:8px;

    font-weight:700;
}

/* TEXT */

.contact-info-card p{
    margin:0;

    color:#555;

    line-height:1.7;
}

/* =========================
   RIGHT FORM
========================= */

.contact-right{
    width:42%;
}

/* FORM */

.premium-contact-form{
    background:
    rgba(255,255,255,0.80);

    backdrop-filter:blur(14px);

    border-radius:20px;

    padding:30px;

    border:1px solid rgba(255,255,255,0.5);

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

/* INPUT BOX */

.input-box{
    margin-bottom:18px;
}

.input-box input,
.input-box textarea{
    width:100%;

    border:none;

    outline:none;

    background:#f5f5f5;

    border-radius:12px;

    padding:16px 18px;

    font-size:1rem;

    color:#222;

    border:1px solid transparent;

    transition:0.3s ease;
}

/* TEXTAREA */

.input-box textarea{
    height:160px;

    resize:none;
}

/* FOCUS */

.input-box input:focus,
.input-box textarea:focus{
    border-color:#245829;

    background:#ffffff;
}

/* BUTTON */

.premium-contact-form button{
    width:100%;

    height:60px;

    border:none;

    border-radius:14px;

    background:
    linear-gradient(
    135deg,
    #245829,
    #16381a
    );

    color:#fff;

    font-size:1.05rem;

    font-weight:600;

    cursor:pointer;

    transition:0.4s ease;

    box-shadow:
    0 12px 30px rgba(36,88,41,0.25);
}

/* HOVER */

.premium-contact-form button:hover{
    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(36,88,41,0.35);
}

/* =========================
   MAP
========================= */

.contact-map-section{
    width:100%;

    padding:0 40px 90px;

    background:#f2efe7;

    display:flex;
    justify-content:center;
}

.contact-map-box{
    width:100%;
    max-width:1300px;

    overflow:hidden;

    border-radius:14px;

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

.contact-map-box iframe{
    width:100%;

    height:450px;

    border:none;

    display:block;
}

/* =========================
   TABLET
========================= */

@media(max-width:992px){

    .contact-section{
        flex-direction:column;

        padding:140px 20px 60px;
    }

    .contact-left,
    .contact-right{
        width:100%;
    }

    .contact-left h2{
        font-size:2.2rem;
    }
}

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

@media(max-width:600px){

    .contact-section{
        padding:120px 12px 40px;

        gap:24px;
    }

    .contact-tag{
        font-size:0.72rem;

        padding:8px 12px;

        margin-bottom:12px;
    }

    .contact-left h2{
        font-size:1.6rem;

        margin-bottom:12px;
    }

    .contact-left p{
        font-size:0.82rem;

        line-height:1.7;

        margin-bottom:20px;
    }

    .contact-info-wrapper{
        gap:12px;
    }

    .contact-info-card{
        padding:14px;

        border-radius:10px;

        gap:12px;
    }

    .contact-icon{
        width:42px;
        height:42px;

        font-size:1.1rem;

        border-radius:8px;
    }

    .contact-info-card h3{
        font-size:0.9rem;

        margin-bottom:5px;
    }

    .contact-info-card p{
        font-size:0.72rem;
    }

    .premium-contact-form{
        padding:16px;

        border-radius:14px;
    }

    .input-box{
        margin-bottom:12px;
    }

    .input-box input,
    .input-box textarea{
        padding:12px 14px;

        font-size:0.85rem;

        border-radius:10px;
    }

    .input-box textarea{
        height:120px;
    }

    .premium-contact-form button{
        height:52px;

        font-size:0.9rem;

        border-radius:10px;
    }

    .contact-map-section{
        padding:0 12px 50px;
    }

    .contact-map-box{
        border-radius:10px;
    }

    .contact-map-box iframe{
        height:260px;
    }
}











/* =========================
   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;
}