/* =====================================================
   LAYOUT.CSS
   Food Delivery Local
   Page Layout Sections
===================================================== */


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

.hero-banner{
background:#f5f7f6;
border:1px solid #dcdcdc;
margin-bottom:30px;
}

.hero-title{
color:#1f3a2e;
font-size:28px;
font-weight:bold;
margin-bottom:6px;
}

.hero-subtitle{
color:#2e7d32;
font-size:16px;
margin-bottom:8px;
}

.hero-desc{
font-size:14px;
max-width:700px;
}

.hero-image-box{
display:flex;
align-items:center;
justify-content:center;
height:240px;
background:#eaeaea;
border:1px solid #ccc;
overflow:hidden;
}

.hero-caption{
color:#555;
font-size:14px;
margin-top:12px;
text-align:center;
}

.fdl-hero{
display:flex;
align-items:center;
gap:30px;
}

.fdl-hero-logo img{
width:320px;
height:auto;
}

/* =====================================================
   COVERAGE BOX
===================================================== */

.coverage-box{
background:white;
border-radius:12px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
overflow:hidden;
}

.coverage-header{
background:#2e7d32;
color:white;
font-weight:bold;
text-align:center;
font-size:18px;
padding:18px;
}

.coverage-body{
padding:24px;
}

.coverage-text{
font-size:16px;
margin-bottom:18px;
}

.coverage-button{
display:block;
background:#2e7d32;
color:white;
padding:16px;
border-radius:35px;
font-weight:bold;
text-decoration:none;
margin-top:12px;
}

.coverage-button:hover{
background:#256628;
}


/* =====================================================
   SERVICE SECTIONS
===================================================== */

.services-table{
width:100%;
}

.services-table td{
vertical-align:top;
}


/* =====================================================
   HOW IT WORKS SECTION
===================================================== */

.how-box{
margin-top:20px;
}

.how-step{
background:#ffffff;
border-radius:12px;
box-shadow:0 3px 10px rgba(0,0,0,0.08);
text-align:center;
padding:25px;
}

.how-number{
width:38px;
height:38px;
line-height:38px;
border-radius:50%;
background:#2e7d32;
color:#fff;
font-weight:bold;
margin:0 auto 12px auto;
}


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

.footer{
background:#f5f5f5;
margin-top:40px;
padding:25px 15px;
}

.footer-col{
vertical-align:top;
}

.footer-header{
text-align:center;
font-weight:bold;
margin-bottom:12px;
font-size:16px;
}

.footer-col a{
display:block;
text-align:center;
color:#2e7d32;
text-decoration:none;
margin-bottom:6px;
}

.footer-col a:hover{
text-decoration:underline;
}

.footer-copy{
color:#777;
font-size:13px;
text-align:center;
padding-top:10px;
}


/* =====================================================
   CITY PAGE LAYOUT
===================================================== */

.city-wrap{
max-width:900px;
margin:auto;
padding:40px 20px;
}

.city-hero{
text-align:center;
margin-bottom:40px;
}

.city-recruit{
margin-bottom:40px;
}

.city-opportunity ul{
margin-top:20px;
padding-left:20px;
}

.city-apply{
margin-top:25px;
font-weight:bold;
}

.city-business{
margin-top:40px;
}

.city-restaurants{
margin-top:40px;
}


/* =====================================================
   SOCIAL MEDIA SECTION
===================================================== */

.social-media{
text-align:center;
margin-top:20px;
}

.social-media img{
width:100px;
margin:0 8px;
}

.coverage-button{
display:inline-block;
background:#2e7d32;
color:white;
padding:16px 28px;
border-radius:35px;
font-weight:bold;
text-decoration:none;
margin-top:12px;
max-width:280px;
width:auto;
text-align:center;
}

.coverage-button:hover{
background:#256628;
}