/* ==========================================
HARMONY PEARL BAG
========================================== */

.bag-hero{
padding:90px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.hero-content h1{
font-size:4.4rem;
line-height:1;
margin:20px 0;
}

.hero-content p{
max-width:520px;
margin-bottom:35px;
}

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
}

.hero-image img{
width:100%;
border-radius:24px;
display:block;
}

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

}

/* ==========================================
ABOUT
========================================== */

.bag-about{

padding:110px 0;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image img{

width:100%;

border-radius:22px;

}

.about-content h2{

margin:18px 0 25px;

}

.feature-list{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

margin-top:45px;

}

.feature-item{

display:flex;

gap:18px;

align-items:flex-start;

}

.feature-item img{

width:42px;

}

.feature-item h4{

margin-bottom:8px;

}



/* ==========================================
DETAILS
========================================== */

.product-details{

padding:110px 0;

}

.details-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}

.details-image img{

width:100%;

border-radius:20px;

}

.details-table table{

width:100%;

border-collapse:collapse;

margin-top:30px;

}

.details-table th{

text-align:left;

padding:18px 0;

width:180px;

font-weight:600;

border-bottom:1px solid #ece7df;

}

.details-table td{

padding:18px 0;

border-bottom:1px solid #ece7df;

}

/* ==========================================
VALUES
========================================== */

.bag-values{

padding:110px 0;

}

.values-grid{

display:grid;

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

gap:25px;

}

.value-card{

background:#fff;

border-radius:18px;

padding:40px 28px;

text-align:center;

box-shadow:0 8px 30px rgba(0,0,0,.05);

}

.value-card img{

width:52px;

margin-bottom:18px;

}



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

.bag-gallery{

padding:110px 0;

}

.section-heading{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:60px;

}

.gallery-grid{

display:grid;

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

gap:25px;

}

.gallery-grid img{

width:100%;

border-radius:18px;

display:block;

}



/* ==========================================
CUSTOMER MOMENTS
========================================== */

.customer-moments{

padding:110px 0;

}

.moments-grid{

display:grid;

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

gap:25px;

}

.moment-card{

overflow:hidden;

border-radius:18px;

}

.moment-card img{

width:100%;

display:block;

transition:.4s;

}

.moment-card:hover img{

transform:scale(1.05);

}



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

.bag-cta{

padding:70px 0;

}

.cta-grid{

background:#f8f3ec;

border-radius:24px;

padding:60px;

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

}


/* =========================
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:992px){

.hero-grid,
.about-grid,
.details-grid{

grid-template-columns:1fr;

}

.values-grid{

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

}

.moments-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.cta-grid{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.hero-content h1{

font-size:3rem;

}

.feature-list{

grid-template-columns:1fr;

}

.values-grid{

grid-template-columns:1fr;

}

.footer-top,
.footer-bottom{

flex-direction:column;

gap:20px;

text-align:center;

}
.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:3rem;

}

}