/* ===================== 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{
    margin:0 auto;display:flex;width:90%;justify-content:space-between;padding:2rem;
}
.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;}
.rightHeader{display:flex;gap:4rem;}
.headerAction{gap:1rem;display:flex;align-items:center;}
.headerAction p{margin:0;font-size:2rem;font-weight:700;color:#2c5530;}

/* ===================== Hero / Massage ===================== */
.massageContainer{
    display:grid;
    grid-template-columns: 65% 35%;
    align-items:stretch;
    width:100%;
    min-height:clamp(420px,55vh,720px);
    border:1px solid #efe3b8;
}

.leftMassage{
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    text-align:center;
    background-color:#efe3b8;
    padding:clamp(16px,3vw,48px);
}

.leftTag{
    border:1px solid;
    border-radius:2rem;
    width:fit-content;
    padding:.5rem 2rem;
}

.leftMassage h1{
    font-weight:600;
    text-align:center;
    font-size:clamp(28px,4.5vw,64px);
    line-height:1.12;
}
.leftMassage p{ font-size:clamp(14px,1.6vw,20px); margin-top:.5rem; }

.leftBannerButton{
    display:flex; gap:2rem; margin-top:1rem; justify-content:center;
}


: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); }


.leftMassage a, .leftMassage button{
    width:auto !important;
    height:auto !important;
}

.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:grid;
    grid-template-columns:repeat(auto-fit,minmax(480px,1fr));
    gap:24px; padding:4rem 6rem;
}
.productContainer{
    display:flex;height:40rem;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;
}
.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(220px,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: 768px){
    .headerContainer{padding:0 15px;}
    .rightHeader{gap:15px;}
    .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;}
}