@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@300;400;500;600;700&display=swap');

/* ==========================================
OUR FOOD PAGE
========================================== */

.ourfood-page{


background:#111111;

color:#ffffff;

font-family:'Poppins',sans-serif;

overflow-x:hidden;


}

.ourfood-page *{


box-sizing:border-box;


}

/* ==========================================
HERO
========================================== */

.food-hero{


min-height:85vh;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:
url('../images/franchise-bg.jpg')
center center/cover no-repeat;

position:relative;


}

.food-overlay{


position:absolute;

inset:0;

background:
rgba(0,0,0,.65);


}

.food-hero-content{


position:relative;

z-index:2;

max-width:900px;

padding:40px;


}

.food-hero-content span{


color:#ff8c04;

letter-spacing:4px;

font-size:14px;


}

.food-hero-content h1{


font-family:'Anton',sans-serif;

font-size:clamp(55px,8vw,120px);

line-height:.9;

margin:20px 0;


}

.food-hero-content p{


color:#d5d5d5;

font-size:20px;

line-height:1.8;


}

/* ==========================================
STORY
========================================== */

.food-story{


padding:120px 0;


}

.story-container{


width:min(1300px,92%);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;


}

.story-text span{


color:#ff8c04;

letter-spacing:4px;


}

.story-text h2{


font-family:'Anton',sans-serif;

font-size:60px;

margin:20px 0;


}

.story-text p{


color:#cfcfcf;

line-height:1.9;

margin-bottom:20px;


}

.story-image{


text-align:center;


}

.story-image img{


max-width:100%;

width:550px;

filter:
drop-shadow(
    0 0 30px rgba(255,120,0,.25)
);


}

/* ==========================================
SECTION HEADING
========================================== */

.section-heading{


text-align:center;

margin-bottom:70px;


}

.section-heading span{


color:#ff8c04;

letter-spacing:4px;

font-size:14px;


}

.section-heading h2{


font-family:'Anton',sans-serif;

font-size:65px;

margin-top:15px;


}

/* ==========================================
VALUES
========================================== */

.food-values{


padding:120px 0;


}

.values-grid{


width:min(1300px,92%);

margin:auto;

display:grid;

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

gap:30px;


}

.value-card{


background:#1b1b1b;

border-radius:30px;

border:
1px solid rgba(255,255,255,.05);

padding:50px 40px;

text-align:center;

transition:.3s;


}

.value-card:hover{


transform:translateY(-5px);


}

.value-card{


font-size:50px;


}

.value-card h3{


font-family:'Anton',sans-serif;

font-size:32px;

margin:20px 0 15px;


}

.value-card p{


color:#bcbcbc;

line-height:1.8;


}

/* ==========================================
INGREDIENTS
========================================== */

.ingredients-section{


padding:120px 0;


}

.ingredients-container{


width:min(1300px,92%);

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;


}

.ingredients-image{


text-align:center;


}

.ingredients-image img{


width:550px;

max-width:100%;


}

.ingredients-content span{


color:#ff8c04;

letter-spacing:4px;


}

.ingredients-content h2{


font-family:'Anton',sans-serif;

font-size:60px;

margin:20px 0;


}

.ingredients-content p{


color:#d0d0d0;

line-height:1.9;

margin-bottom:20px;


}

/* ==========================================
CTA
========================================== */

.food-cta{


height:500px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

background:
url('../images/franchise-bg.jpg')
center center/cover no-repeat;


}

.food-cta-overlay{


position:absolute;

inset:0;

background:
rgba(0,0,0,.75);


}

.food-cta-content{


position:relative;

z-index:2;

max-width:900px;

padding:40px;


}

.food-cta-content span{


color:#ff8c04;

letter-spacing:4px;


}

.food-cta-content h2{


font-family:'Anton',sans-serif;

font-size:clamp(40px,6vw,80px);

margin:20px 0 30px;


}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:992px){


.story-container,
.ingredients-container{

    grid-template-columns:1fr;

    text-align:center;
}

.values-grid{

    grid-template-columns:1fr;
}


}

@media(max-width:768px){

/* ==========================
MOBILE MENU OVERLAY
========================== */

.overlay{


position:fixed;

inset:0;

background:
rgba(0,0,0,.65);

opacity:0;

visibility:hidden;

transition:.3s ease;

z-index:99989;


}

.overlay.active{


opacity:1;

visibility:visible;


}

.food-hero-content h1{

    font-size:60px;
}

.food-hero-content p{

    font-size:16px;
}

.story-text h2,
.ingredients-content h2,
.section-heading h2{

    font-size:42px;
}

.food-cta-content h2{

    font-size:42px;
}


}