/* ==========================================================
hrī Collection
Neem Herbal Scrub
neem.css
Part 1
========================================================== */


/* =========================
THEME
========================= */

:root{

--neem:#5D7C55;
--sage:#8EA88A;
--cream:#FAF7F1;
--light:#F5F1E8;
--gold:#C8A96A;
--text:#3D3A36;
--muted:#726D67;
--white:#ffffff;

--radius:22px;

--shadow:
0 18px 45px rgba(0,0,0,.08);

}


/* =========================
PAGE
========================= */

body{

background:var(--cream);

color:var(--text);

}


main{

overflow:hidden;

}


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

.header{

position:sticky;

top:0;

z-index:999;

background:rgba(250,247,241,.94);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(0,0,0,.05);

}


.header .container{

display:flex;

justify-content:space-between;

align-items:center;

min-height:78px;

}


.logo{

font-family:"Cormorant Garamond",serif;

font-size:2rem;

text-decoration:none;

color:var(--text);

letter-spacing:1px;

}


.logo span{

display:block;

font-size:.7rem;

letter-spacing:4px;

color:var(--gold);

}


nav{

display:flex;

gap:2rem;

}


nav a{

color:var(--muted);

text-decoration:none;

font-size:.95rem;

transition:.3s;

}


nav a:hover{

color:var(--neem);

}


/* =========================
HERO
========================= */

.hero{

padding:7rem 0;

}


.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

gap:5rem;

align-items:center;

}


.eyebrow{

text-transform:uppercase;

letter-spacing:4px;

color:var(--gold);

font-size:.78rem;

margin-bottom:1rem;

}


.hero h1{

font-family:"Cormorant Garamond",serif;

font-size:5rem;

line-height:1.05;

margin-bottom:1.5rem;

color:var(--text);

}


.hero-description{

font-size:1.1rem;

color:var(--muted);

line-height:1.9;

max-width:640px;

margin-bottom:2rem;

}


.hero-image{

display:flex;

justify-content:flex-end;

}

.hero-image img{

width:120%;

max-width:720px;

border-radius:24px;

}

.hero-image{

position:relative;

right:-40px;

}


/* =========================
BUTTONS
========================= */

.button-group{

display:flex;

gap:1rem;

flex-wrap:wrap;

}


.btn{

display:inline-flex;

justify-content:center;

align-items:center;

padding:15px 32px;

border-radius:999px;

text-decoration:none;

font-weight:600;

transition:.35s;

}


.btn-primary{

background:var(--neem);

color:#fff;

}


.btn-primary:hover{

transform:translateY(-3px);

background:#4F6C49;

}


.btn-outline{

border:1px solid var(--gold);

color:var(--gold);

}


.btn-outline:hover{

background:var(--gold);

color:#fff;

}


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

.section{

padding:7rem 0;

}


.section-title{

text-align:center;

max-width:760px;

margin:0 auto 4rem;

}


.section-title p{

color:var(--gold);

text-transform:uppercase;

letter-spacing:4px;

font-size:.78rem;

margin-bottom:1rem;

}


.section-title h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

margin-bottom:1rem;

}


.lead{

color:var(--muted);

line-height:1.9;

font-size:1.08rem;

}


/* =========================
STORY
========================= */

.grid-2{

display:grid;

grid-template-columns:1fr 1fr;

gap:5rem;

align-items:center;

}


.section-label{

color:var(--gold);

text-transform:uppercase;

letter-spacing:3px;

margin-bottom:1rem;

font-size:.8rem;

}


.grid-2 h2{

font-family:"Cormorant Garamond",serif;

font-size:3rem;

margin-bottom:1.4rem;

}


.grid-2 p{

color:var(--muted);

line-height:1.9;

margin-bottom:1.4rem;

}


.rounded{

border-radius:var(--radius);

}


.shadow{

box-shadow:var(--shadow);

}


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

@media(max-width:992px){

.hero-grid,
.grid-2{

grid-template-columns:1fr;

gap:3rem;

}

.hero{

text-align:center;

}

.hero-description{

margin:auto auto 2rem;

}

.hero h1{

font-size:3.2rem;

}

.button-group{

justify-content:center;

}

nav{

display:none;

}

}


@media(max-width:768px){

.section{

padding:5rem 0;

}

.hero{

padding:5rem 0;

}

.hero h1{

font-size:2.6rem;

}

.section-title h2{

font-size:2.3rem;

}

.grid-2 h2{

font-size:2.3rem;

}

}


/* ==========================================================
neem.css
Part 2
Benefits • Ingredients • Gallery • Feature Cards
==========================================================*/


/* =========================
BENEFITS
========================= */

.grid-3{

display:grid;

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

gap:2rem;

}


.benefit-card{

background:#fff;

border-radius:var(--radius);

padding:2.5rem;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}


.benefit-card:hover{

transform:translateY(-10px);

}


.icon-circle{

width:82px;

height:82px;

margin:0 auto 1.5rem;

border-radius:50%;

background:linear-gradient(135deg,var(--light),#ffffff);

display:flex;

align-items:center;

justify-content:center;

}


.icon-circle img{

width:40px;

height:40px;

}


.benefit-card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.8rem;

margin-bottom:.8rem;

}


.benefit-card p{

color:var(--muted);

line-height:1.8;

}


/* =========================
INGREDIENTS
========================= */

.ingredient-card{

display:flex;

align-items:flex-start;

gap:1.25rem;

padding:1.25rem;

margin-bottom:1.25rem;

border-radius:18px;

background:#fff;

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

transition:.3s;

}


.ingredient-card:hover{

transform:translateX(6px);

}


.ingredient-card img{

width:72px;

height:72px;

object-fit:contain;

flex-shrink:0;

}


.ingredient-card h3{

font-size:1.35rem;

margin-bottom:.4rem;

font-family:"Cormorant Garamond",serif;

}


.ingredient-card p{

margin:0;

color:var(--muted);

line-height:1.8;

}


/* =========================
GALLERY
========================= */

.gallery-grid{

display:grid;

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

gap:1.5rem;

}


.gallery-item{

overflow:hidden;

border-radius:22px;

background:#fff;

box-shadow:var(--shadow);

}


.gallery-item img{

width:100%;

height:100%;

display:block;

object-fit:cover;

transition:.45s;

}


.gallery-item:hover img{

transform:scale(1.08);

}


.gallery-large{

grid-column:span 2;

grid-row:span 2;

}


.image-zoom{

overflow:hidden;

}


/* =========================
FEATURE CARDS
========================= */

.grid-4{

display:grid;

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

gap:2rem;

}


.feature-card{

background:#fff;

border-radius:22px;

padding:2rem;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}


.feature-card:hover{

transform:translateY(-8px);

}


.feature-card h3{

font-family:"Cormorant Garamond",serif;

font-size:1.6rem;

margin-bottom:.8rem;

}


.feature-card p{

color:var(--muted);

line-height:1.8;

}


/* =========================
UNIVERSAL IMAGE
========================= */

img{

max-width:100%;

}


/* =========================
HOVER UTILITIES
========================= */

.hover-lift{

transition:.35s;

}


.hover-lift:hover{

transform:translateY(-10px);

}


.fade-up{

animation-duration:.8s;

}


.fade-left{

animation-duration:.8s;

}


.fade-right{

animation-duration:.8s;

}


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

@media(max-width:1100px){

.grid-3{

grid-template-columns:1fr 1fr;

}

.grid-4{

grid-template-columns:1fr 1fr;

}

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.gallery-large{

grid-column:auto;

grid-row:auto;

}

}



@media(max-width:768px){

.grid-3,

.grid-4,

.gallery-grid{

grid-template-columns:1fr;

}

.benefit-card,

.feature-card{

padding:2rem;

}

.ingredient-card{

flex-direction:column;

align-items:center;

text-align:center;

}

.ingredient-card img{

margin-bottom:.8rem;

}

}



/* ==========================================================
neem.css
Part 3
Timeline • FAQ • CTA • Footer • Product Cards
==========================================================*/


/* =========================
HOW TO USE
========================= */

.timeline{

display:grid;

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

gap:2rem;

margin-top:4rem;

}


.timeline-card{

background:#fff;

border-radius:22px;

padding:2.5rem;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}


.timeline-card:hover{

transform:translateY(-8px);

}


.timeline-number{

width:70px;

height:70px;

border-radius:50%;

background:var(--neem);

color:#fff;

margin:0 auto 1.5rem;

display:flex;

justify-content:center;

align-items:center;

font-size:1.5rem;

font-family:"Cormorant Garamond",serif;

}


.timeline-card h3{

margin-bottom:.75rem;

font-size:1.6rem;

font-family:"Cormorant Garamond",serif;

}


/* =========================
FAQ
========================= */

.accordion{

max-width:900px;

margin:auto;

}


.accordion details{

background:#fff;

margin-bottom:1rem;

border-radius:18px;

overflow:hidden;

box-shadow:0 6px 20px rgba(0,0,0,.05);

}


.accordion summary{

list-style:none;

cursor:pointer;

padding:1.5rem 2rem;

font-weight:600;

font-size:1.05rem;

position:relative;

}


.accordion summary::-webkit-details-marker{

display:none;

}


.accordion summary::after{

content:"+";

position:absolute;

right:28px;

top:50%;

transform:translateY(-50%);

font-size:1.5rem;

color:var(--gold);

}


.accordion details[open] summary::after{

content:"–";

}


.accordion details p{

padding:0 2rem 2rem;

color:var(--muted);

line-height:1.9;

}


/* =========================
PRODUCT CARDS
========================= */

.product-card{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}


.product-card:hover{

transform:translateY(-8px);

}


.product-card img{

width:100%;

aspect-ratio:6/5;

object-fit:cover;

}


.product-card-content{

padding:2rem;

}


.product-card-content h3{

font-family:"Cormorant Garamond",serif;

margin-bottom:.8rem;

font-size:1.7rem;

}


.product-card-content p{

margin-bottom:1.5rem;

}


/* =========================
CTA
========================= */

.cta-box{

background:linear-gradient(
135deg,
#F5F1E8,
#FFFDF8
);

border-radius:28px;

padding:5rem;

text-align:center;

box-shadow:var(--shadow);

}


.cta-box h2{

margin-bottom:1.25rem;

}


.cta-box p{

max-width:680px;

margin:0 auto 2rem;

}


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

.footer{

background:#2B2B29;

color:#D8D2C8;

margin-top:6rem;

}


.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:4rem;

padding:5rem 0;

}


.footer h3,

.footer h4{

color:#fff;

margin-bottom:1rem;

}

.footer p{

line-height:1.8;
color:#D8D2C8;

}

.footer ul{

list-style:none;

padding:0;

}


.footer li{

margin-bottom:.7rem;

}


.footer a{

color:#D8D2C8;

text-decoration:none;

}


.footer a:hover{

color:#fff;

}


.copyright{

text-align:center;

padding:2rem 0;

border-top:1px solid rgba(255,255,255,.08);

font-size:.9rem;

}


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

@media(max-width:1100px){

.timeline{

grid-template-columns:1fr 1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:3rem;

}

.cta-box{

padding:3.5rem;

}

}


@media(max-width:768px){

.timeline{

grid-template-columns:1fr;

}

.timeline-card{

padding:2rem;

}

.accordion summary{

padding:1.25rem 1.5rem;

}

.accordion details p{

padding:0 1.5rem 1.5rem;

}

.cta-box{

padding:2.5rem 1.5rem;

}

.footer{

text-align:center;

}

}