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

html{
scroll-behavior:smooth;
}

body{
font-family:Arial,sans-serif;
line-height:1.5;
padding-top:90px;
overflow-x:hidden;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

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

.container{
width:min(1200px,92%);
margin:auto;
}



/* HEADER */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
background:#1f1f1f;
z-index:9999;
transition:.3s ease;
border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header.scrolled{
box-shadow:0 5px 18px rgba(0,0,0,.14);
}

.site-header .container{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
}


.logo img{
max-width:180px;
height:auto;
}



/* NAVIGATION */

.nav-menu{
display:flex;
align-items:center;
gap:34px;
}

.nav-menu li{
display:flex;
align-items:center;
}

.nav-menu a{
color:#fff;
font-size:16px;
font-weight:600;
transition:.3s;
white-space:nowrap;
}

.nav-menu a:hover{
color:#FA4515;
}



/* ORDER BUTTON */

.order-btn{
background:#FA4515;
padding:13px 26px;
border-radius:50px;
color:#fff !important;
font-weight:700;
display:inline-block;
transition:.3s;
}

.order-btn:hover{
background:#e63c0c;
transform:translateY(-2px);
}



/* MOBILE TOGGLE */

.mobile-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:0;
}

.mobile-toggle span{
width:28px;
height:3px;
background:#fff;
border-radius:3px;
transition:.3s;
}


/* animated X */

.mobile-toggle.open span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.mobile-toggle.open span:nth-child(2){
opacity:0;
}

.mobile-toggle.open span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}



/* TABLET */

@media(max-width:991px){

.mobile-toggle{
display:flex;
z-index:10001;
}

.main-nav{
position:fixed;
top:88px;
right:-100%;
width:300px;
height:calc(100vh - 88px);
background:#1f1f1f;
padding:40px 30px;
transition:.35s ease;
overflow-y:auto;
}

.main-nav.active{
right:0;
}

.nav-menu{
flex-direction:column;
align-items:flex-start;
gap:24px;
}

.nav-menu li{
width:100%;
}

.nav-menu a{
display:block;
width:100%;
font-size:18px;
}

.nav-cta{
margin-top:20px;
width:100%;
}

.order-btn{
width:100%;
text-align:center;
}

}



/* MOBILE */

@media(max-width:768px){

body{
padding-top:78px;
}

.site-header .container{
padding:14px 0;
}

.logo img{
max-width:150px;
}

.main-nav{
top:78px;
height:calc(100vh - 78px);
}

}


@media(max-width:480px){

.logo img{
max-width:130px;
}

.main-nav{
width:100%;
padding:35px 24px;
}

.nav-menu a{
font-size:17px;
}

.order-btn{
padding:12px 20px;
}

}


/* HERO SLIDER */

.hero-slider{
position:relative;
width:100%;
height:90vh;
min-height:650px;
overflow:hidden;
}

.slider{
height:100%;
position:relative;
}

.slide{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
opacity:0;
transition:opacity .8s ease;
}

.slide.active{
opacity:1;
z-index:2;
}

.overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
}

.hero-content{
position:absolute;
z-index:3;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#fff;
width:min(900px,90%);
}

.hero-content h1,
.hero-content h2{
font-size:clamp(38px,6vw,68px);
line-height:1.1;
margin-bottom:20px;
font-weight:800;
}

.hero-content p{
font-size:clamp(18px,2vw,24px);
margin-bottom:35px;
}

.hero-buttons{
display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;
}

.hero-btn{
padding:15px 32px;
border-radius:50px;
font-weight:700;
transition:.3s;
}

.hero-btn.primary{
background:#FA4515;
color:#fff;
}

.hero-btn.primary:hover{
background:#e63c0c;
}

.hero-btn.secondary{
border:2px solid #fff;
color:#fff;
}

.hero-btn.secondary:hover{
background:#fff;
color:#111;
}



/* arrows */

.slider-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,.15);
border:none;
width:52px;
height:52px;
border-radius:50%;
color:#fff;
font-size:28px;
cursor:pointer;
z-index:5;
}

.prev{
left:30px;
}

.next{
right:30px;
}



/* dots */

.slider-dots{
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
z-index:5;
}

.dot{
width:13px;
height:13px;
border-radius:50%;
background:rgba(255,255,255,.5);
cursor:pointer;
}

.dot.active{
background:#FA4515;
}



/* mobile */

@media(max-width:768px){

.hero-slider{
height:78vh;
min-height:550px;
}

.slider-arrow{
display:none;
}

.hero-content p{
margin-bottom:28px;
}

.hero-btn{
width:100%;
max-width:280px;
}

}


/* FLAVOR BANNER */

.flavor-banner{
background:#FA4515;
padding:90px 20px;
text-align:center;
}

.flavor-banner h2{
margin:0;
font-size:clamp(38px,6vw,78px);
font-weight:800;
line-height:1.1;
text-transform:uppercase;
letter-spacing:2px;
color:#000;
}


/* tablet */

@media(max-width:768px){

.flavor-banner{
padding:70px 20px;
}

.flavor-banner h2{
font-size:clamp(30px,7vw,48px);
letter-spacing:1px;
}

}


/* mobile */

@media(max-width:480px){

.flavor-banner{
padding:55px 15px;
}

.flavor-banner h2{
font-size:28px;
line-height:1.25;
}

}