/*==================================================
HRI COLLECTION
Candles Page
==================================================*/

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

}
f
/*==============
Hero
==============*/

.hero{
padding:90px 0;
}

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

.hero-content h1{
font-size:clamp(3rem,5vw,5rem);
line-height:1.05;
margin:20px 0;
}

.hero-content p{
font-size:1.1rem;
color:#666;
line-height:1.9;
max-width:560px;
}

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

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


/*==============
Products
==============*/

.product-section{
padding:100px 0;
}

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

.product-section.alternate .product-image{
order:2;
}

.product-section.alternate .product-content{
order:1;
}

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

.product-content h2{
font-size:3rem;
margin:18px 0;
}

.product-content .lead{
color:#666;
line-height:1.9;
margin-bottom:30px;
}

.feature-list{
list-style:none;
padding:0;
margin:0 0 35px;
}

.feature-list li{
margin-bottom:14px;
padding-left:22px;
position:relative;
color:#555;
}

.feature-list li::before{
content:"✦";
position:absolute;
left:0;
color:#b9975b;
}


/*==============
Guide
==============*/

.guide-section{
padding:100px 0;
background:#faf8f4;
}

.guide-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.guide-card{
background:#fff;
padding:40px;
border-radius:22px;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}

.guide-card h3{
margin:15px 0 20px;
}

.guide-card ul,
.guide-card ol{
padding-left:20px;
line-height:1.9;
color:#666;
}

.guide-card li{
margin-bottom:10px;
}

.qr-card{
text-align:center;
}

.qr-image{
width:180px;
margin:25px auto;
display:block;
}

.qr-card a{
color:#7d8f70;
text-decoration:none;
word-break:break-word;
}


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

.cta-section{
padding:100px 20px;
text-align:center;
}

.cta-section h2{
font-size:3rem;
margin-bottom:18px;
}

.cta-section p{
max-width:700px;
margin:0 auto 35px;
color:#666;
line-height:1.8;
}
/* =========================
FOOTER
========================= */

.footer{

background:#234036;

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;

margin:0;

}

.footer li{

margin-bottom:.8rem;

}

.footer a{

text-decoration:none;

color:#D8D2C8;

transition:.3s;

}

.footer a:hover{

color:#fff;

}

.copyright{

text-align:center;

padding:2rem 0;

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

font-size:.9rem;

color:rgba(255,255,255,.7);

}

/*==============
Responsive
==============*/

@media(max-width:991px){

.hero-grid,
.product-grid{
grid-template-columns:1fr;
}

.product-section.alternate .product-image,
.product-section.alternate .product-content{
order:unset;
}

.guide-grid{
grid-template-columns:repeat(2,1fr);
}

.hero{
text-align:center;
}

.hero-content p{
margin:auto;
}

.hero-buttons{
justify-content:center;
}

}


@media(max-width:768px){

.hero{
padding:70px 0;
}

.product-section{
padding:70px 0;
}

.guide-section{f
padding:70px 0;
}

.guide-grid{
grid-template-columns:1fr;
}

.hero-content h1{
font-size:2.8rem;
}

.product-content h2{
font-size:2.3rem;
}

.cta-section h2{
font-size:2.2rem;
}

.hero-grid,
.product-grid{
gap:40px;
}

.guide-card{
padding:30px;
}

.qr-image{
width:150px;
}

}


.footer{

text-align:center;

}

}


@media(max-width:576px){

.cta-box h2{

font-size:2rem;

}

.cta-box p{

font-size:.95rem;

}

.footer-grid{

gap:2rem;

}

}