/* FULL PAGE SCROLL */

.panel{
height:100vh;

position:relative;
overflow:hidden;
}

/* =========================
RESET
========================= */

body{
background:#000;
font-family:'Inter',sans-serif;
overflow-x:hidden;
color:white;

overflow-y:scroll;
height:100vh;
}

/* =========================
HERO SECTION Whole Front view
========================= */

.hero{
width:100%;
min-height:100vh;

background:
linear-gradient(
rgba(0,0,0,0),
rgba(0,0,0,0)
),

url("Cover.png")
center center/cover no-repeat;

display:flex;
align-items:center;

padding:0 10%;
position:relative;
}

/* =========================
TOP LOGO
========================= */

.top-logo{
position:fixed;
top:5px;
left:50%;
transform:translateX(-50%);
z-index:100;
width:220px;
display:flex;
justify-content:center;
align-items:center;
transition:0.3s ease;
}

.top-logo img{
margin-top: 10px;
width:75%;
display:block;

/* removes harsh white-box feeling */
mix-blend-mode:multiply;

/* luxury glow */
filter:
drop-shadow(0 0 18px rgba(214,161,77,0.15));

opacity:0.95;
}

.hero-content{
max-width:700px;
}

/*TimelessBold */

.hero-sub{
font-size:14px;
letter-spacing:3px;
margin-bottom:24px;
opacity:0.85;
}

/*TimelessBold Yellow Line */

.hero-line{
width:80px;
height:2px;
background:#d6a14d;
margin-bottom:30px;
}

.hero h1{
font-family:'Cormorant Garamond',serif;
font-size:6rem;
line-height:0.9;
font-weight:300;
margin-bottom:30px;
}

.hero h1 span{
color:#d6a14d;
}

.hero p{
font-size:19px;
line-height:1.8;
opacity:0.88;
max-width:580px;
margin-bottom:45px;
}

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

.btn{
padding:18px 36px;
text-decoration:none;
letter-spacing:2px;
text-transform:uppercase;
font-size:13px;
transition:0.4s ease;
}

.btn-primary{
background:white;
color:black;
}

.btn-primary:hover{
background:#d6a14d;
color:black;
}

.btn-outline{
border:1px solid rgba(255,255,255,0.5);
color:white;
}

.btn-outline:hover{
border-color:#d6a14d;
background:rgba(214,161,77,0.1);
}

/* =========================
FLOATING SIDEBAR
========================= */

.lux-sidebar{
position:fixed;
top:30px;
left:30px;
z-index:9999;
}

@media(max-width:992px){

.top-logo{
width:130px;
top:14px;
}

}

@media(max-width:480px){

.top-logo{
width:100px;
top:16px;
}

.mobile-cart{
width:46px;
height:46px;
top:20px;
right:18px;
}

.mobile-cart svg{
width:18px;
height:18px;
}

.lux-sidebar{
top:20px;
left:18px;
}

}

/* Burger */

.lux-burger{
width:72px;
height:72px;

border-radius:50%;

background:rgba(10,10,10,0.78);

backdrop-filter:blur(18px);

border:1px solid rgba(214,161,77,0.35);

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;

cursor:pointer;

box-shadow:
0 0 25px rgba(214,161,77,0.18),
inset 0 0 10px rgba(255,255,255,0.03);

transition:0.4s ease;
}

.lux-burger:hover{
transform:scale(1.05);

box-shadow:
0 0 40px rgba(214,161,77,0.35),
inset 0 0 12px rgba(255,255,255,0.05);
}

/* Menu */

.lux-menu{
width:260px;

margin-top:18px;
padding:28px 22px;

border-radius:28px;

background:
linear-gradient(
180deg,
rgba(18,18,18,0.96),
rgba(5,5,5,0.93)
);

backdrop-filter:blur(25px);

border:1px solid rgba(214,161,77,0.22);

box-shadow:
0 0 40px rgba(214,161,77,0.12),
inset 0 0 25px rgba(255,255,255,0.02);

transform:translateX(-320px);
opacity:0;

transition:0.5s cubic-bezier(.77,0,.18,1);
}

.lux-menu a{
display:flex;
align-items:center;
gap:18px;

padding:16px 18px;
margin-bottom:12px;

border-radius:18px;

text-decoration:none;
color:white;

font-size:13px;
letter-spacing:2px;
font-weight:500;

transition:0.35s ease;
}

.lux-menu a:hover{
background:rgba(214,161,77,0.08);

transform:translateX(8px);

box-shadow:
0 0 25px rgba(214,161,77,0.12);
}

.lux-menu a.active{
background:rgba(214,161,77,0.10);

border:1px solid rgba(214,161,77,0.18);
}

.lux-menu .icon{
width:34px;
height:34px;

border-radius:10px;

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

font-size:17px;

color:#d6a14d;

background:rgba(214,161,77,0.08);

border:1px solid rgba(214,161,77,0.12);
}

/* =========================
PRODUCT SECTION
========================= */

.product-section{
height:100vh;
width:100%;
background:#000;

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

scroll-snap-align:start;
}

.product-showcase{
height:100vh;
width:100%;

position:relative;
overflow:hidden;
}

.product-showcase img{

width:100%;

height:100%;

object-fit:cover;

margin:0;

display:block;

}

.product-info{
position:absolute;

left:50%;

bottom:25px;

transform:translateX(-50%);

text-align:center;

width:90%;
}

.product-info h2{

font-family:'Cormorant Garamond',serif;

font-size:70px;

font-weight:300;

letter-spacing:0;

margin-bottom:5px;

}

.product-info p{
font-size:20px;
line-height:1.8;
}

.product-info span{
font-size:22px;
color:#d49631;
}

.discover-arrow{

font-size:12px;

color:#fff;

transition:.3s;

animation:bounce 1.8s infinite;

}

@keyframes bounce{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(6px);
}

}

@media(max-width:768px){

.product-showcase img{
width:100%;
height:100vh;
margin:0;
}

.product-info{
bottom:8%;
width:92%;
}

.product-info h2{
font-size:2.6rem;
}

.product-info p{
font-size:15px;
}

}

/* =========================
FOOTER
========================= */

.lux-footer{
height:100vh;

scroll-snap-align:start;
scroll-snap-stop:always;

display:flex;
flex-direction:column;
justify-content:center;

background:#0a0a0a;
}

.footer-container{

width:90%;
max-width:1600px;

margin:auto;

display:grid;

grid-template-columns:
2fr
1fr
1fr
1.5fr;

gap:80px;

padding-bottom:60px;

}

.footer-logo{

width:220px;

margin-bottom:25px;

}

.footer-brand h2{

font-family:'Cormorant Garamond',serif;

font-size:42px;

margin-bottom:20px;

color:#d49631;

}

.footer-brand p{

color:#999;

line-height:1.8;

max-width:400px;

}

.footer-container h3{

color:white;

margin-bottom:25px;

font-size:20px;

}

.footer-container a{

display:block;

text-decoration:none;

color:#999;

margin-bottom:14px;

transition:.3s;

}

.newsletter input{

width:100%;

padding:14px;

margin-bottom:15px;

background:#151515;

border:1px solid #222;

color:white;

}

.newsletter button{

width:100%;

padding:15px;

background:#d49631;

border:none;

font-weight:600;

cursor:pointer;

}

.footer-bottom{

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

text-align:center;

padding:25px;

color:#888;

}

@media(max-width:768px){

.lux-footer{
height:auto;
min-height:100vh;
overflow:visible;
padding:80px 0 20px;
}

}

@media(max-width:1100px){

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

.hero h1{
font-size:4rem;
}

}

@media(max-width:768px){

.hero{
padding-top:140px;
padding-bottom:100px;
}

.hero h1{
font-size:3rem;
}

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

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

.section-title{
font-size:2.6rem;
}

.lux-sidebar{
top:18px;
left:18px;
}

}

.desktop-rightnav a{
color:#d6a14d;
text-decoration:none;
letter-spacing:2px;
word-spacing: 20px;
font-size:15px;
}

.discover-btn{
display:inline-flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
font-family:'Inter',sans-serif;
font-size:11px;
letter-spacing:4px;
text-transform:uppercase;
color:white;
transition:.35s;
}

.discover-btn:hover{

color:#d6a14d;

}

.discover-arrow{

margin-top:8px;

font-size:13px;

animation:bounce 1.8s infinite;

}

.hero,
.product-section,
.lux-footer{
height:100vh;
scroll-snap-align:start;
scroll-snap-stop:always;
}