/* =====================================================
   MOBILE.CSS
   Food Delivery Local
   Final Mobile Override Layer
===================================================== */


/* =====================================================
   GLOBAL MOBILE SAFETY
   Prevent horizontal scrolling
===================================================== */

html, body{
width:100%;
overflow-x:hidden;
}


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

img{
max-width:100%;
height:auto;
}


/* =====================================================
   MOBILE PAGE WRAP
===================================================== */

@media screen and (max-width:768px){

.page-wrap{
width:100%;
padding:15px;
box-sizing:border-box;
}


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

.hero-banner td{
display:block;
width:100% !important;
text-align:center;
margin-bottom:15px;
}

.hero-title{
font-size:24px;
}

.hero-subtitle{
font-size:18px;
}

.hero-desc{
font-size:15px;
}


/* =====================================================
   HERO IMAGE CONTAINER
===================================================== */

.hero-image-box{
height:auto;
}

.hero-image-box img{
max-width:100%;
height:auto;
}


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

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


/* =====================================================
   SERVICE SECTION STACK
===================================================== */

.services-table td{
display:block;
width:100% !important;
margin-bottom:20px;
text-align:center;
}



/* =====================================================
   HOW IT WORKS STACK
===================================================== */

.how-box td{
display:block;
width:100% !important;
margin-bottom:20px;
}


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

.footer-col{
display:block;
width:100%;
margin-bottom:20px;
text-align:center;
}


/* =====================================================
   GENERIC TABLE STACK
   (SAFE fallback for remaining layout tables)
===================================================== */

table{
width:100%;
}

table tr{
display:block;
width:100%;
}

table td{
display:block;
width:100% !important;
margin-bottom:20px;
text-align:center;
}


/* =====================================================
   BUTTON ADJUSTMENTS
===================================================== */

.coverage-button,
.fdl-btn{
display:inline-block;
width:100%;
max-width:320px;
margin:10px auto;
text-align:center;
}


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

.social-media img{
width:80px;
}

}

/* FIX SERVICE TEXT WRAPPING */

.services-table td{
display:block;
width:100% !important;
text-align:center;
margin-bottom:20px;
padding:10px;
box-sizing:border-box;
}

.services-table p{
max-width:420px;
margin-left:auto;
margin-right:auto;
word-wrap:break-word;
overflow-wrap:break-word;
}