/*
Theme Name: FryCuisine
Author: Reshma
Version: 1.0
*/
/* =========================
THEME STYLE CSS
========================= */

body{

margin:0;
padding:0;
font-family:Georgia, serif;
background:#f4f1ec;
color:#111;

}


/* =========================
HEADER
========================= */

.site-header{

background:#ffffff;
padding:18px 0;
position:sticky;
top:0;
z-index:999;
box-shadow:0 2px 10px rgba(0,0,0,0.05);

}

.header-container{

width:90%;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;

}

.logo a{

text-decoration:none;
font-size:34px;
font-weight:700;
color:#111;

}

.main-menu ul{

display:flex;
gap:30px;
list-style:none;
margin:0;
padding:0;

}

.main-menu ul li a{

text-decoration:none;
font-size:17px;
font-weight:600;
color:#333;
transition:0.3s;

}

.main-menu ul li a:hover{

color:#b25d2c;

}


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

.hero{

height:100vh;
background-size:cover;
background-position:center;
position:relative;
display:flex;
align-items:center;

}

.hero::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.45);

}

.hero-content{

position:relative;
z-index:2;
width:90%;
margin:auto;
color:white;

}

.hero-content h1{

font-size:95px;
line-height:1.1;
margin-bottom:30px;
max-width:900px;

}

.hero-content p{

font-size:28px;
line-height:1.7;
max-width:900px;

}

.hero-buttons{

margin-top:40px;

}

.hero-buttons a{

display:inline-block;
padding:18px 40px;
margin-right:20px;
border-radius:50px;
text-decoration:none;
font-size:20px;
font-weight:700;

}

.btn-white{

background:white;
color:#111;

}

.btn-yellow{

background:#f7b500;
color:#111;

}


/* =========================
SECTION TITLE
========================= */

.section-title{

text-align:center;
font-size:85px;
font-weight:700;
margin:100px 0 70px 0;

}


/* =========================
MASONRY GRID
========================= */

.food-grid{

column-count:2;
column-gap:30px;
width:90%;
margin:auto;

}


/* =========================
CARD
========================= */

.food-card{

background:white;
margin-bottom:30px;
border-radius:20px;
overflow:hidden;
display:inline-block;
width:100%;
box-shadow:0 5px 20px rgba(0,0,0,0.08);
break-inside:avoid;
transition:0.4s;

}

.food-card:hover{

transform:translateY(-10px);

}

.food-card img{

width:100%;
display:block;

}

.food-content{

padding:30px;

}

.food-content .meta{

font-size:15px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:20px;
color:#777;

}

.food-content h2{

font-size:55px;
line-height:1.2;
margin-bottom:20px;

}

.food-content p{

font-size:28px;
line-height:1.8;
color:#444;

}

.food-content a{

display:inline-block;
margin-top:25px;
text-decoration:none;
font-size:24px;
font-weight:700;
color:#b25d2c;

}


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

.footer-cta{

background:#050505;
color:white;
padding:120px 20px;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
margin-top:100px;

}

.footer-cta .container{

width:100%;

}

.footer-cta h2{

font-size:60px;
margin-bottom:25px;
line-height:1.3;

}

.footer-cta p{

font-size:26px;
color:#ddd;
line-height:1.7;

}


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

@media(max-width:992px){

.hero-content h1{

font-size:65px;

}

.section-title{

font-size:55px;

}

.food-content h2{

font-size:38px;

}

.food-content p{

font-size:22px;

}

.footer-cta h2{

font-size:45px;

}

}

@media(max-width:768px){

.food-grid{

column-count:1;

}

.hero{

height:auto;
padding:140px 0;

}

.hero-content h1{

font-size:50px;

}

.hero-content p{

font-size:22px;

}

.header-container{

flex-direction:column;
gap:20px;

}

.main-menu ul{

gap:15px;
flex-wrap:wrap;
justify-content:center;

}

.section-title{

font-size:45px;

}

.footer-cta h2{

font-size:38px;

}

.footer-cta p{

font-size:20px;

}

}