/* ===================== Reset & Base ===================== */
@import "tailwindcss";
*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    line-height:1.6;color:#333;background:#fff;overflow-x:hidden;
}
.bigIcon{width:4rem;} .mediumIcon{width:3rem;} .smallIcon{width:2rem;}

/* ===================== Header ===================== */
.headerContainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 2px solid #2c5530;
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0 auto;
    width: 100%;
}

.leftHeader{display:flex;align-items:center;}
.logo{display:flex;align-items:center;gap:2rem;}
.logo img{width:5rem;height:5rem;}
.logo h1{margin:0;font-size:3rem;font-weight:700;color:#2c5530;}

/* Center Navigation */
.centerNav {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.navLink {
    color: #2c5530;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.03em;
    padding: 0.5rem 0;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    background: transparent;
}

.navLink:hover {
    color: #1a3d1f;
    border-bottom-color: #2c5530;
    background: transparent;
}

.navLink.active {
    color: #1a3d1f;
    border-bottom-color: #2c5530;
    background: transparent;
}

.rightHeader{display:flex;gap:4rem;align-items:center;}
.headerAction{gap:0.5rem;display:flex;align-items:center;position:relative;}
.headerAction p{margin:0;font-size:16px;font-weight:600;color:#2c5530;}

/* ===================== Hero / Massage ===================== */



:root{
    --btn-green:#234f2e;
    --btn-green-hover:#1d4226;
    --btn-green-active:#17361f;
}

.leftMassage a.cta,
.leftMassage button.cta,
.bestSellers button,
.leftMassage a > button.cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:1.05rem 1.8rem;
    height:auto; width:auto;
    min-width:220px;
    background:var(--btn-green);
    color:#fff;
    font-weight:800;
    letter-spacing:.06em;
    font-size:clamp(14px,1.4vw,18px);
    line-height:1;
    border:1px solid rgba(0,0,0,.12);
    border-radius:9999px;
    text-decoration:none;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
    cursor:pointer;
}
.leftMassage button.cta{
    appearance:none; -webkit-appearance:none; border:none; background:var(--btn-green);
}
.leftMassage a.cta:hover,
.leftMassage button.cta:hover,
.bestSellers button:hover{ background:var(--btn-green-hover); }
.leftMassage a.cta:active,
.leftMassage button.cta:active,
.bestSellers button:active{ background:var(--btn-green-active); }



.rightMassage{
    position:relative;
    padding:clamp(0px,1.2vw,16px);
}
.slideshow-container{
    position:absolute; inset:0;
    display:block; width:100%; height:100%;
    overflow:hidden; border-radius:2rem;
}
.mySlides{ position:absolute; inset:0; display:none; }
.mySlides:first-child{ display:block; }
.mySlides img{ width:100%; height:100%; object-fit:cover; display:block; }


.prev,.next{
    cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);
    padding:16px;color:#fff;font-weight:bold;font-size:18px;transition:.3s;
    border-radius:8px;user-select:none;background:rgba(0,0,0,.25);
}
.prev{left:12px;} .next{right:12px;}
.prev:hover,.next:hover{background:rgba(0,0,0,.6);}
.text{color:#f2f2f2;font-size:15px;padding:8px 12px;position:absolute;bottom:8px;width:100%;text-align:center;}
.numbertext{color:#f2f2f2;font-size:12px;padding:8px 12px;position:absolute;top:0;}
.dot{
    cursor:pointer;height:10px;width:10px;margin:0 4px;background:#bbb;border-radius:50%;
    display:inline-block;transition:background-color .3s ease;
}
.active,.dot:hover{background:#717171;}

/* ===================== Best Sellers ===================== */
.bestSellers{
    display:flex;flex-direction:column;padding:4rem 0;border:1px solid #2c5530;
}
.bestSellers h1{text-align:center;font-weight:700;margin:0;}

.productGrid{
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 4rem 6rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.productGrid::-webkit-scrollbar {
    height: 8px;
}

.productGrid::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.productGrid::-webkit-scrollbar-thumb {
    background: #2c5530;
    border-radius: 10px;
}

.productGrid::-webkit-scrollbar-thumb:hover {
    background: #1a3d1f;
}

.productContainer{
    display:flex;
    height:40rem;
    border:2px solid #2c5530;
    border-radius:2rem;
    overflow:hidden;
    min-width:30rem;
    max-width:30rem;
    text-align:center;
    align-items:center;
    flex-direction:column;
    justify-content:space-between;
    background:#fff;
    flex-shrink: 0;
}
.productImg{height:65%;width:100%;object-fit:cover;}
.productName{margin:0 .5rem;}
.starPrice{gap:1rem;display:flex;flex-direction:column;}
.reviewStar{display:flex;gap:1rem;}
.reviewStar img{width:2rem;}
.productPrice{margin:0 0 1rem 0;font-weight:bold;}
.bestSellers a{margin:0 auto;width:min(260px,60%);}
.bestSellers button{
    height:100%;width:100%;font-size:1.5rem;background:#2c5530;color:#fff;border-radius:1rem;border:none;padding:.9rem 1.2rem;
}
.bestSellers button,
.bestSellers a.cta{
    min-width: 360px;
    padding: 1.05rem 2.4rem;
}

/* ===================== Customer Review ===================== */
.customerReviewContainer{
    display:flex;flex-direction:column;padding:4rem 0;border:1px solid #2c5530;
}
.customerReviewContainer h1{text-align:center;font-weight:700;margin:0;}
.customerGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px; padding:4rem 6rem;
}
.customerContainer{
    display:flex;height:60rem;border:2px solid #2c5530;border-radius:2rem;overflow:hidden;
    max-width:30rem;text-align:center;align-items:center;flex-direction:column;justify-content:space-between;margin:0 auto;background:#fff;
}
.customerImg{height:70%;width:100%;object-fit:cover;}
.customerReview{display:flex;gap:1rem;padding:2rem;flex-direction:column;align-items:center;height:30%;}
.reviewText{text-align:start;}

/* ===================== Brand Value ===================== */
.brandValue{display:flex;flex-direction:column;gap:6rem;padding:6rem;border:1px solid #2c5530;}
.brandHeader{display:flex;flex-direction:column;gap:2rem;width:min(900px,90%);margin:auto;}
.brandHeader h1{text-align:center;font-weight:700;margin:0;}
.brandHeader p{text-align:center;font-size:1.5rem;margin:0;}
.brandGrid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
    gap:2rem;
}
.brandContainer{display:flex;align-items:center;justify-content:center;gap:2rem;flex-direction:column;}
.brandImg{width:12rem;padding:3rem;border:1px solid;border-radius:999px;}
.brandText{margin:0;}


/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
    .centerNav {
        gap: 1.5rem;
    }
    
    .navLink {
        font-size: 15px;
    }
    
    .rightHeader{gap:2rem;}
}

@media (max-width: 768px){
    .headerContainer{
        padding: 0.75rem 1rem;
        flex-wrap: wrap;
    }
    
    .centerNav {
        gap: 1rem;
        order: 3;
        width: 100%;
        justify-content: center;
        padding-top: 1rem;
        border-top: 1px solid #efe3b8;
    }
    
    .navLink {
        font-size: 14px;
    }
    
    .rightHeader{gap:15px;}
    .headerAction p{font-size:14px;}
    .productGrid{padding:2rem;}
    .customerGrid{padding:2rem;}
    .brandValue{padding:3rem;}
    footer{flex-direction:column;gap:20px;}
}

@media (max-width: 480px){
    .logo img{width:3.5rem;height:3.5rem;}
    .logo h1{font-size:2rem;}
    .rightHeader{gap:10px;}
    .headerAction p{font-size:14px;}
    .headerAction{gap:0.3rem;}