/* =========================================================
START GLOBAL CSS
========================================================= */

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

html{
scroll-behavior:smooth;
}

body{
background:#f6f1ea;
font-family:'Inter',sans-serif;
overflow-x:hidden;
color:#1a1a1a;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

section{
position:relative;
}

/* =========================================================
END GLOBAL CSS
========================================================= */



/* =========================================================
START NAVBAR CSS
========================================================= */

.navbar{

position:fixed;

top:20px;
left:50%;

transform:translateX(-50%);

width:92%;

padding:18px 42px;

display:flex;
justify-content:space-between;
align-items:center;

z-index:9999;

background:rgba(255,255,255,0.12);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,0.2);

border-radius:100px;

}

.logo-wrap{

display:flex;
align-items:center;
gap:14px;

}

.logo-wrap img{

height:46px;
width:auto;

}

.logo-text{

font-family:'Cormorant Garamond',serif;

font-size:34px;

letter-spacing:1px;

color:white;

}

.nav-links{

display:flex;
gap:42px;

}

.nav-links a{

font-size:12px;

letter-spacing:3px;

color:white;

transition:0.4s;

}

.nav-links a:hover{

opacity:0.7;

}

.nav-right{

display:flex;
gap:25px;

}

.nav-right a{

font-size:12px;

letter-spacing:3px;

color:white;

}

/* =========================================================
END NAVBAR CSS
========================================================= */



/* =========================================================
START HERO SECTION CSS
========================================================= */

.hero-section{

position:relative;

height:100vh;

overflow:hidden;

display:flex;
align-items:center;

}

.hero-bg{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

animation:heroZoom 18s ease-in-out infinite alternate;

}

.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
to right,
rgba(0,0,0,0.74),
rgba(0,0,0,0.18)
);

}

.hero-content{

position:relative;

z-index:5;

margin-left:10%;

max-width:650px;

color:white;

animation:fadeUp 1.6s ease;

}

.hero-tag{

display:inline-block;

font-size:12px;

letter-spacing:6px;

margin-bottom:30px;

color:#dfc18d;

}

.hero-content h1{

font-family:'Cormorant Garamond',serif;

font-size:110px;

line-height:0.9;

font-weight:400;

margin-bottom:30px;

}

.hero-content p{

font-size:20px;

line-height:1.9;

color:rgba(255,255,255,0.82);

margin-bottom:45px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn-primary{

padding:18px 42px;

background:#d8be8b;

border-radius:60px;

color:#111;

font-size:12px;

letter-spacing:3px;

transition:0.4s;

}

.btn-secondary{

padding:18px 42px;

border:1px solid rgba(255,255,255,0.35);

border-radius:60px;

color:white;

font-size:12px;

letter-spacing:3px;

backdrop-filter:blur(10px);

transition:0.4s;

}

.btn-primary:hover,
.btn-secondary:hover{

transform:translateY(-4px);

}

.scroll-indicator{

position:absolute;

bottom:40px;
left:50%;

transform:translateX(-50%);

color:rgba(255,255,255,0.7);

font-size:12px;

letter-spacing:5px;

animation:floatText 2s infinite;

}

/* =========================================================
END HERO SECTION CSS
========================================================= */



/* =========================================================
START PRODUCTS SECTION CSS
========================================================= */

.products-section{

padding:140px 8%;

}

.products-header{

text-align:center;

margin-bottom:90px;

}

.products-header span{

font-size:12px;

letter-spacing:6px;

color:#b59664;

}

.products-header h2{

font-family:'Cormorant Garamond',serif;

font-size:76px;

line-height:1;

font-weight:400;

margin-top:24px;
margin-bottom:25px;

}

.products-header p{

max-width:700px;

margin:auto;

line-height:1.9;

color:#666;

}

.products-grid{

display:grid;

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

gap:35px;

}

.product-card{

background:white;

border-radius:35px;

overflow:hidden;

transition:0.5s;

box-shadow:
0 10px 40px rgba(0,0,0,0.05);

}

.product-card:hover{

transform:translateY(-12px);

}

.product-card img{

width:100%;
height:420px;

object-fit:cover;

}

.product-info{

padding:28px;

}

.product-info h3{

font-family:'Cormorant Garamond',serif;

font-size:28px;

line-height:1.1;

font-weight:400;

margin-bottom:12px;

color:#111;

}

.product-info p{

font-size:12px;

letter-spacing:3px;

color:#b59664;

}

/* =========================================================
END PRODUCTS SECTION CSS
========================================================= */



/* =========================================================
START STORY SECTION CSS
========================================================= */

.story-section{

padding:140px 8%;

display:grid;

grid-template-columns:1.2fr 1fr;

gap:80px;

align-items:center;

}

.story-image img{

border-radius:40px;

}

.story-content span{

font-size:12px;

letter-spacing:6px;

color:#b59664;

}

.story-content h2{

font-family:'Cormorant Garamond',serif;

font-size:80px;

line-height:0.95;

font-weight:400;

margin:25px 0;

}

.story-content p{

font-size:19px;

line-height:1.9;

color:#666;

margin-bottom:40px;

}

.story-btn{

display:inline-block;

padding:18px 40px;

background:#16110d;

border-radius:60px;

color:white;

font-size:12px;

letter-spacing:3px;

}

/* =========================================================
END STORY SECTION CSS
========================================================= */



/* =========================================================
START VIDEO SECTION CSS
========================================================= */

.video-section{

height:100vh;

overflow:hidden;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

color:white;

}

.bg-video{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

}

.video-overlay{

position:absolute;

inset:0;

background:
rgba(0,0,0,0.45);

}

.video-content{

position:relative;

z-index:5;

max-width:700px;

}

.video-content span{

font-size:12px;

letter-spacing:6px;

color:#d1b17b;

}

.video-content h2{

font-family:'Cormorant Garamond',serif;

font-size:92px;

line-height:0.95;

font-weight:400;

margin:28px 0;

}

.video-content p{

line-height:1.9;

font-size:20px;

color:rgba(255,255,255,0.82);

}

/* =========================================================
END VIDEO SECTION CSS
========================================================= */



/* =========================================================
START NEWSLETTER CSS
========================================================= */

.newsletter-section{

padding:140px 8%;

background:#1a120d;

text-align:center;

color:white;

}

.newsletter-section span{

font-size:12px;

letter-spacing:6px;

color:#d1b17b;

}

.newsletter-section h2{

font-family:'Cormorant Garamond',serif;

font-size:78px;

line-height:1;

font-weight:400;

margin:30px 0 50px;

}

.newsletter-box{

display:flex;
justify-content:center;

gap:20px;

}

.newsletter-box input{

width:500px;

padding:22px 28px;

border:none;

border-radius:60px;

font-size:16px;

outline:none;

}

.newsletter-box button{

padding:22px 42px;

border:none;

border-radius:60px;

background:#d5ba88;

font-size:12px;

letter-spacing:4px;

cursor:pointer;

}

/* =========================================================
END NEWSLETTER CSS
========================================================= */



/* =========================================================
START FOOTER CSS
========================================================= */

.footer{

background:#0f0b08;

color:white;

padding:110px 8% 60px;

}

.footer-top{

display:flex;
justify-content:space-between;

gap:80px;

margin-bottom:80px;

}

.footer-brand{

max-width:420px;

}

.footer-logo{

display:flex;
align-items:center;
gap:15px;

margin-bottom:25px;

}

.footer-logo img{

height:54px;

}

.footer-logo span{

font-family:'Cormorant Garamond',serif;

font-size:50px;

}

.footer-brand p{

line-height:1.9;

color:rgba(255,255,255,0.7);

}

.footer-links{

display:grid;

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

gap:80px;

}

.footer-column h4{

font-size:12px;

letter-spacing:5px;

color:#d0af74;

margin-bottom:28px;

}

.footer-column a{

display:block;

margin-bottom:18px;

color:rgba(255,255,255,0.7);

transition:0.3s;

}

.footer-column a:hover{

color:white;

}

.footer-bottom{

padding-top:40px;

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

display:flex;
justify-content:space-between;

color:rgba(255,255,255,0.5);

font-size:14px;

}

/* =========================================================
END FOOTER CSS
========================================================= */



/* =========================================================
START WHATSAPP BUTTON CSS
========================================================= */

.whatsapp-button{

position:fixed;

right:25px;
bottom:25px;

width:68px;
height:68px;

border-radius:50%;

background:#25D366;

display:flex;
justify-content:center;
align-items:center;

z-index:99999;

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

transition:0.4s;

}

.whatsapp-button:hover{

transform:scale(1.1);

}

.whatsapp-button img{

width:34px;

}

/* =========================================================
END WHATSAPP BUTTON CSS
========================================================= */



/* =========================================================
START ANIMATION CSS
========================================================= */

@keyframes heroZoom{

from{
transform:scale(1);
}

to{
transform:scale(1.08);
}

}

@keyframes fadeUp{

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

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

}

@keyframes floatText{

0%{
transform:translateX(-50%) translateY(0);
}

50%{
transform:translateX(-50%) translateY(-10px);
}

100%{
transform:translateX(-50%) translateY(0);
}

}

/* =========================================================
END ANIMATION CSS
========================================================= */



/* =========================================================
START MOBILE CSS
========================================================= */

@media(max-width:1100px){

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

.story-section{
grid-template-columns:1fr;
}

.footer-top{
flex-direction:column;
}

}

@media(max-width:768px){

.nav-links{
display:none;
}

.hero-content{
margin:0 8%;
}

.hero-content h1{
font-size:68px;
}

.hero-content p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
}

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

.products-header h2,
.story-content h2,
.video-content h2,
.newsletter-section h2{
font-size:48px;
}

.newsletter-box{
flex-direction:column;
}

.newsletter-box input{
width:100%;
}

.footer-links{
grid-template-columns:1fr;
gap:40px;
}

.footer-bottom{
flex-direction:column;
gap:15px;
}

}

/* =========================================================
END MOBILE CSS
========================================================= */