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

body{
font-family:'Poppins',sans-serif;
background:#fff;
line-height:1.6;
}

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

section{
padding:45px 0;
}

/* HERO */

.hero{
background:url('../images/hero.jpg') center/cover no-repeat;
height:100vh;
min-height:600px;
}

.hero-overlay{
background:rgba(0,0,0,0.65);
height:100%;
display:flex;
flex-direction:column;
}

/* NAVIGATION */

.top-nav{
background:#0B3D91;
padding:14px 35px;
border-radius:60px;
width:90%;
max-width:1200px;
margin:20px auto;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:10px;
z-index:1000;
}

.logo-box{
background:#fff;
padding:8px 25px;
border-radius:50px;
}

.logo-box img{
height:40px;
}

.menu-box{
background:#fff;
padding:10px 35px;
border-radius:50px;
display:flex;
gap:30px;
}

.menu-box a{
text-decoration:none;
font-weight:600;
color:#000;
}

.desktop-signin{
background:#fff;
padding:9px 25px;
border-radius:50px;
text-decoration:none;
font-weight:600;
color:#000;
}

.menu-toggle{
display:none;
border:none;
background:none;
font-size:24px;
cursor:pointer;
}

/* HERO CONTENT */

.hero-content-center{
flex:1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
padding:20px;
}

.hero-content-center h1{
font-size:50px;
}

.hero-caption{
margin:10px 0 25px;
font-size:18px;
}

/* HERO FOOD GALLERY */

.hero-menu-gallery{
display:flex;
gap:15px;
overflow-x:auto;
padding:10px 0;
}

.hero-menu-gallery img{
width:150px;
height:150px;
border-radius:18px;
flex-shrink:0;
background:#fff;
padding:10px;
}

.hero-menu-gallery::-webkit-scrollbar{
display:none;
}

/* HERO BUTTONS */

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

.btn-primary{
background:#FF6A00;
color:#fff;
padding:12px 35px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}

.btn-outline{
border:2px solid #FF6A00;
color:#FF6A00;
padding:12px 35px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}

/* SECTION HEADINGS */

.section-highlight{
text-align:center;
margin-bottom:20px;
font-family:'Fredoka',sans-serif;
font-size:36px;
color:#ff6a00;
}

.caption-box{
background:#000;
color:#fff;
padding:12px 30px;
border-radius:50px;
width:max-content;
margin:0 auto 20px;
}

/* POPULAR DISHES GALLERY */

.gallery-container{
width:90%;
max-width:1200px;
margin:auto;
background:#f5f5f5;
border-radius:30px;
padding:25px;
display:flex;
gap:20px;
overflow-x:auto;
}

.gallery-container img{
width:200px;
height:200px;
object-fit:cover;
border-radius:20px;
flex-shrink:0;
}
.vendor-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
}

.vendor-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-start;
}

.vendor-card {
  width: 150px;            /* fixed card width */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  padding: 8px;
  cursor: pointer;
  background: #fff;
  transition: transform 0.2s;
}

.vendor-card:hover {
  transform: scale(1.05);
}

.vendor-card img {
  width: 100%;             /* force width to card width */
  height: 100px;           /* uniform height */
  object-fit: cover;       /* crop large images nicely */
  display: block;
  border-bottom: 1px solid #eee;
}

.vendor-card span {
  display: block;
  font-weight: 600;
  font-size: 14px;         /* readable text */
  margin-top: 6px;
  line-height: 1.2em;
  word-break: break-word;
}

.vendor-card small {
  display: block;
  font-size: 12px;
  color: #555;
  margin-top: 2px;
}
/* HOW IT WORKS */

.how-container{
width:90%;
max-width:1100px;
margin:auto;
display:flex;
gap:25px;
flex-wrap:wrap;
}

.how-box{
flex:1;
min-width:200px;
background:#f9f9f9;
padding:25px;
border-radius:20px;
text-align:center;
}

.icon-circle{
width:60px;
height:60px;
background:#ff6a00;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
color:#fff;
margin:0 auto 15px;
}

/* GET STARTED */

.get-started-container{
width:90%;
max-width:1100px;
margin:auto;
display:flex;
gap:20px;
flex-wrap:wrap;
}

.get-box{
flex:1;
min-width:250px;
border:4px solid;
border-radius:20px;
padding:25px;
text-align:center;
}

.get-box.rider{
border-color:#0B3D91;
}

.get-box.vendor{
border-color:#FFC107;
}

.get-box.career{
border-color:#FF6A00;
}

.section-btn{
display:inline-block;
margin-top:15px;
padding:10px 25px;
border-radius:40px;
color:#fff;
text-decoration:none;
font-weight:600;
}

.rider .section-btn{
background:#0B3D91;
}

.vendor .section-btn{
background:#FFC107;
color:#000;
}

.career .section-btn{
background:#FF6A00;
}

/* FAQ SECTION */

.faq-section{
background:#f7f7f7;
padding:50px 0;
}

.faq-container{
width:90%;
max-width:1100px;
margin:auto;
display:flex;
gap:40px;
align-items:center;
flex-wrap:wrap;
}

.faq-left{
flex:1;
min-width:260px;
}

.faq-right{
flex:1;
min-width:260px;
display:flex;
justify-content:center;
align-items:center;
}

.faq-right img{
width:100%;
max-width:420px;
height:auto;
border-radius:20px;
}

.faq-item{
background:#fff;
padding:20px;
border-radius:15px;
margin-bottom:20px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.faq-item h4{
margin-bottom:8px;
}

/* FOOTER */

.footer{
background:#000;
color:#fff;
padding:60px 0 20px;
}

.footer-container{
width:90%;
max-width:1200px;
margin:auto;
display:flex;
gap:40px;
flex-wrap:wrap;
}

.footer-col{
flex:1;
min-width:200px;
}

.footer-col h3{
margin-bottom:15px;
}

.footer-col a{
display:block;
color:#fff;
text-decoration:none;
margin-bottom:8px;
font-size:14px;
}

.footer-bottom{
text-align:center;
margin-top:30px;
font-size:14px;
}

/* MOBILE */

@media(max-width:768px){

.menu-toggle{
display:block;
}

.menu-box{
display:none;
position:absolute;
top:90px;
left:0;
width:100%;
background:#fff;
flex-direction:column;
gap:20px;
padding:20px;
}

.menu-box.show{
display:flex;
}

.desktop-signin{
display:none;
}

.hero-content-center h1{
font-size:34px;
}

.hero-buttons{
flex-direction:column;
}

.faq-container{
flex-direction:column;
text-align:center;
}

}