.hero{
height:90vh;
position:relative;
overflow:hidden;
}

.hero video{
width:100%;
height:100%;
object-fit:cover;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:white;
z-index:2;
}

.hero-content h1{
font-size:5rem;
letter-spacing:8px;
margin-bottom:20px;
font-family:'Cormorant Garamond',serif;
}

.hero-content p{
font-size:1.3rem;
margin-bottom:25px;
}

.hero-content a{
background:white;
color:black;
padding:14px 30px;
text-decoration:none;
border-radius:40px;
font-weight:600;
}

.intro{
padding:100px 8%;
text-align:center;
}

.intro h2{
font-size:3rem;
font-family:'Cormorant Garamond',serif;
margin-bottom:20px;
}

.intro p{
max-width:800px;
margin:auto;
line-height:1.8;
}

.products{
padding:0 8% 80px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}

.product-card{
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.08);
transition:.4s;
}

.product-card:hover{
transform:translateY(-10px);
}

.product-card img{
width:100%;
height:300px;
object-fit:contain;
background:#fff;
padding:20px;
}

.product-info{
padding:25px;
}

.category{
color:#c5a15d;
font-size:.85rem;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:8px;
}

.product-info h3{
font-size:1.6rem;
margin-bottom:10px;
font-family:'Cormorant Garamond',serif;
}

.product-info p{
line-height:1.6;
font-size:.95rem;
margin-bottom:15px;
}

.price{
font-size:1.2rem;
font-weight:700;
margin-bottom:15px;
}

.buy-btn{
display:block;
text-align:center;
background:black;
color:white;
padding:12px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}

footer{
background:#111;
color:white;
padding:70px 20px;
text-align:center;
}

.footer-content h2{
font-size:3rem;
font-family:'Cormorant Garamond',serif;
margin-bottom:15px;
}

.footer-content p{
margin:10px 0;
}

@media(max-width:768px){

.hero-content h1{
font-size:3rem;
}

.hero-content p{
font-size:1rem;
}

.products{
grid-template-columns:1fr;
padding:0 5% 60px;
}

}
.hero-logo{
    width:180px;
    margin-bottom:25px;
    animation: fadeIn 1.5s ease;
}

@media(max-width:768px){
    .hero-logo{
        width:120px;
    }
}
