/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f7f4ee;
color:#222;
overflow-x:hidden;
}


/* HERO */

.hero{

background:
linear-gradient(
135deg,
#140b03,
#5c3706
);

padding:120px 20px;

text-align:center;

color:white;

}

.hero-overlay{
max-width:900px;
margin:auto;
}

.hero-tag{

font-size:12px;

letter-spacing:6px;

text-transform:uppercase;

color:#d4af37;

margin-bottom:20px;

}

.hero h1{

font-family:'Cormorant Garamond',serif;

font-size:82px;

line-height:1;

margin-bottom:20px;

}

.hero span{
color:#d4af37;
}

.hero-subtitle{

font-size:20px;

font-weight:300;

max-width:650px;

margin:auto;

opacity:.95;

}


/* FAQ SECTION */

.faq-section{

max-width:1000px;

margin:auto;

padding:80px 20px;

}

.faq-section h2{

font-family:'Cormorant Garamond',serif;

font-size:52px;

margin-bottom:35px;

color:#111;

}


/* FAQ CARD */

.faq-item{

background:white;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

box-shadow:
0 8px 25px rgba(0,0,0,.08);

transition:.3s;

}

.faq-item:hover{

transform:translateY(-3px);

}


/* QUESTION */

.faq-question{

width:100%;

background:white;

border:none;

padding:24px;

font-size:18px;

font-weight:600;

cursor:pointer;

display:flex;

justify-content:space-between;

align-items:center;

text-align:left;

color:#222;

}

.faq-question span{

font-size:28px;

color:#c89b3c;

font-weight:700;

transition:.3s;

}

.faq-question.active span{

transform:rotate(45deg);

}


/* ANSWER */

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

background:#fcfaf6;

}

.faq-answer p{

padding:0 24px 24px;

font-size:15px;

line-height:1.8;

color:#555;

}


/* CTA */

.cta{

margin-top:50px;

padding:120px 20px;

text-align:center;

background:
linear-gradient(
135deg,
#140b03,
#5c3706
);

color:white;

}

.cta h2{

font-family:'Cormorant Garamond',serif;

font-size:70px;

margin-bottom:15px;

}

.cta p{

font-size:18px;

margin-bottom:30px;

opacity:.9;

}


/* BUTTON */

.shop-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 40px;

background:#d4af37;

color:white;

text-decoration:none;

font-size:18px;

font-weight:600;

border-radius:14px;

transition:.3s;

box-shadow:
0 10px 25px rgba(212,175,55,.25);

}

.shop-btn:hover{

transform:translateY(-4px);

background:#c89b3c;

box-shadow:
0 15px 35px rgba(212,175,55,.35);

}


/* FLOATING EFFECT */

.faq-item,
.shop-btn{
animation:fadeUp .6s ease;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}


/* TABLET */

@media(max-width:992px){

.hero h1{
font-size:62px;
}

.faq-section h2{
font-size:42px;
}

.cta h2{
font-size:52px;
}

}


/* MOBILE */

@media(max-width:768px){

.hero{
padding:90px 20px;
}

.hero h1{
font-size:46px;
}

.hero-subtitle{
font-size:16px;
}

.faq-section{
padding:60px 16px;
}

.faq-section h2{
font-size:34px;
}

.faq-question{
font-size:16px;
padding:20px;
}

.faq-answer p{
font-size:14px;
}

.cta{
padding:90px 20px;
}

.cta h2{
font-size:40px;
}

.shop-btn{
width:100%;
max-width:320px;
}

}


/* SMALL MOBILE */

@media(max-width:480px){

.hero h1{
font-size:38px;
}

.hero-tag{
letter-spacing:3px;
}

.faq-section h2{
font-size:30px;
}

.faq-question{
font-size:15px;
}

}