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

    body {background:#f4f4f4;}

    @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Playfair+Display:wght@700&family=Bodoni+Moda:wght@700&display=swap');



/* Navbar */

.navbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 7px 30px;

  background: #F8F8F8;

  border-bottom: 1px solid #ddd;

}



/* Logo */

.logo img {

  /* height: 50px; */

  width: 50%;

}



/* Menu */

.menu {

  display: flex;

  align-items: center;

  list-style: none;

 margin-left: 30px; /*  Logo ke side thoda gap */

  flex: 1;

}



.menu li {

  position: relative;

  margin: 0 15px;

}



.menu li a,

.menu li .dropdown-toggle {

  text-decoration: none;

  font-size: 18px;

  color: #333;

  cursor: pointer;

  /* font-weight:600; */

}



/* Dropdown */

.dropdown-content {

  display: none;

  position: absolute;

  top: 100%;

  left: 0;

  background: #fff;

  border: 1px solid #ddd;

  min-width: 150px;

  z-index: 10;

}



.dropdown-content a {

  display: block;

  padding: 10px;

  color: #333;

  text-decoration: none;

}



.dropdown:hover .dropdown-content {

  display: block;

}



/* Actions (Right side buttons) */

.actions {

  display: flex;

  align-items: center;

  gap: 15px; /* Sign In aur Book Now ke beech gap */

  margin-right: 8%;

 

}



.login-btn, .book-btn {

  padding: 8px 16px;

  border: none;

  cursor: pointer;

  border-radius: 5px;

  font-size: 16px;

 

}



.login-btn {

  background: #f0f0f0;

}



.book-btn {

  background: #88C73D;

  

  color: #fff;

}



/* Hamburger */

.hamburger {

  display: none;

  flex-direction: column;

  gap: 5px;

  cursor: pointer;

}



.hamburger span {

  width: 25px;

  height: 3px;

  background: #333;

}









    .menu {display:flex; gap:25px; align-items: center; margin: auto;}

    .menu li {list-style:none; position:relative;}

    .menu a, .dropdown-toggle {

      text-decoration:none; color:#fff; font-size:16px; transition:0.3s; cursor:pointer;

    }

    .menu a:hover, .dropdown-toggle:hover {color:#88C73D}



    /* Modal */

    .modal {

      display:none; position:fixed; top:0; left:0; width:100%; height:100%;

      background:rgba(0,0,0,0.6); justify-content:center; align-items:center; z-index:1000;

    }

    .modal-content {

      background:#fff; padding:25px; border-radius:10px;

      width:90%; max-width:400px; animation:fadeIn 0.4s; position:relative;

    }

    .modal-content h2 {margin-bottom:15px; text-align:center; color:#0a3d62;}

    .modal-content input, .modal-content select {

      width:100%; padding:10px; margin:8px 0;

      border-radius:6px; border:1px solid #ccc;

    }

    .modal-content button {

      width:100%; margin-top:12px; padding:10px; border:none;

      background:#0a3d62; color:#fff; border-radius:6px; font-size:16px; cursor:pointer;

    }

    .close-btn {background:#d63031 !important;}





    /* Success Message */

.success-message {

  display: none;

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0.8);

  background: linear-gradient(135deg, #2ecc71, #27ae60);

  color: #fff;

  padding: 20px 40px;

  border-radius: 12px;

  font-size: 20px;

  font-weight: 600;

  z-index: 2000;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4),

              0 0 15px rgba(46, 204, 113, 0.7);

  text-align: center;

  letter-spacing: 0.5px;

  animation: popup 0.5s ease forwards;

}



/* Success icon style (optional) */

.success-message::before {

  content: "✔ ";

  font-size: 22px;

  margin-right: 8px;

  color: #fff;

}



/* Animation */

@keyframes popup {

  0% {

    transform: translate(-50%, -50%) scale(0.6);

    opacity: 0;

  }

  60% {

    transform: translate(-50%, -50%) scale(1.05);

    opacity: 1;

  }

  100% {

    transform: translate(-50%, -50%) scale(1);

  }

}





    @keyframes fadeIn {

      from {opacity:0; transform:scale(0.9);}

      to {opacity:1; transform:scale(1);}

    }



   



/* -----------------section start-------------- */

/* .start{

   

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 20px;

    margin: auto;

    background-image: url(../images/vegfood.jpg);

  

} */







.start {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: 20px;

    margin: auto;

    min-height: 80vh; /* height ko responsive banaya */

    background-image: url(../images/vegfood.jpg);

    

    /* background-size: cover; 

    background-position: center; 

    background-repeat: no-repeat; 

    /* box-sizing: border-box; */

}

.start img{

    height: auto;

    width: 82%;

   

border-radius: 30px;}



/* Media Queries for Responsiveness */



/* Small devices (phones) */

@media (max-width: 600px) {

    .start {

        padding: 15px;

        min-height: 60vh;

    }

}



/* Medium devices (tablets) */

@media (min-width: 601px) and (max-width: 1024px) {

    .start {

        padding: 20px;

        min-height: 70vh;

    }

}



/* Large devices (desktops) */

@media (min-width: 1025px) {

    .start {

        padding: 30px;

        min-height: 80vh;

    }

}













/* ---------------footer part------------- */

 footer {

    background: #1c1c1c;

    color: #fff;

    padding: 40px 20px;

    position: relative;

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

  }



  .footer-container {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    max-width: 1200px;

    margin: auto;

  }



  .footer-left h2 {

    margin-bottom: 10px;

    color: #4CAF50;

  }



  .footer-left p {

    margin: 5px 0;

    font-size: 14px;

  }



 .social-icons i {

      font-size: 28px;

      margin-top: 10px;

      margin: 5px;

      /* margin-left: 15px; */

      cursor: pointer;

      color: white;

      transition: color 0.3s;

    }



     .social-icons i:hover {

      color: #4CAF50;

    }



  .footer-right p {

    font-size: 14px;

    margin: 5px 0;

  }



  .footer-right span {

    color: #4CAF50;

    font-weight: bold;

  }



  /* Floating Buttons */

  .floating-btn {

    position: fixed;

    width: 50px;

    height: 50px;

    bottom: 20px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 8px 15px rgba(0,0,0,0.3);

    transition: transform 0.3s;

    z-index: 100;

  }



  .floating-btn img {

    width: 28px;

    height: 28px;

  }



  .floating-btn.whatsapp {

    right: 20px;

    background: #25D366;

  }



  .floating-btn.location {

    right: 80px;

    background: #FF4C4C;

  }



  .floating-btn:hover {

    transform: scale(1.2);

  }



  /* Scroll to Top */

  .scroll-top {

    position: fixed;

    bottom: 90px;

    right: 20px;

    background: #4CAF50;

    color: #fff;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    text-align: center;

    line-height: 45px;

    font-size: 22px;

    cursor: pointer;

    transition: transform 0.3s;

    z-index: 100;

  }



  .scroll-top:hover {

    transform: scale(1.2);

  }



  @media (max-width: 768px) {

    .footer-container {

      flex-direction: column;

      text-align: center;

    }

    .footer-right {

      margin-top: 20px;

    }

  }



































    /* Responsive */

@media (max-width:768px) {

  /* Menu */

  .menu {

    display: none;

    flex-direction: column;

    background: linear-gradient(135deg, #0a3d62, #1e5f9e);

    position: absolute;

    top: 85px;

    left: 0%;

    width: 100%;

    max-height: 80vh;

    overflow-y: auto;

    padding: 10px;

    gap: 15px;

    border-radius: 0 0 15px 15px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.4);

    transform: translateY(-25px);

    opacity: 0;

    transition: all 0.4s ease-in-out;

    backdrop-filter: blur(6px);

    z-index: 1000; /* menu sabse upar */

  }



  .menu.active {

    display: flex;

    transform: translateY(0);

    opacity: 1;

  }



  /* Scrollbar */

  .menu::-webkit-scrollbar {

    width: 6px;

  }

  .menu::-webkit-scrollbar-thumb {

    background: rgba(255,255,255,0.5);

    border-radius: 10px;

  }

  .menu::-webkit-scrollbar-track {

    background: rgba(255,255,255,0.1);

  }



  /* Links */

  .menu li a,

  .menu li .dropdown-toggle {

    color: #fff;

    font-size: 18px;

    letter-spacing: 0.5px;

    transition: all 0.3s ease;

  }

  .menu li a:hover,

  .menu li .dropdown-toggle:hover {

    color: #88C73D;

    transform: translateX(5px);

  }



  /* Dropdown look */

  .dropdown-content {

    position: static;

    background: rgba(0,0,0,0.25);

    border-radius: 8px;

    margin-top: 5px;

    overflow: hidden;

    transition: max-height 0.3s ease;

  }



  .dropdown-content a {

    color: #fff;

    padding: 10px 15px;

    transition: background 0.3s, transform 0.2s;

  }

  .dropdown-content a:hover {

    background: rgba(255,255,255,0.2);

    transform: translateX(8px);

  }



/* Actions buttons side by side (mobile) */

.actions {

  flex-direction: row;   /* 👈 ek line me */

  justify-content: center;

  gap: 10px;

  margin-top: 12px;

}



.login-btn, .book-btn {

  flex: 1;               /* equal width */

  max-width: 120px;      /* button chota hoga */

  border-radius: 6px;

  font-size: 13px;       /* 👈 dono ka same text size */

  padding: 6px 10px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.login-btn {

  background: #f0f0f0;

  color: #333;

}



.book-btn {

  background: #88C73D;

  color: #fff;

}



.login-btn:hover,

.book-btn:hover {

  transform: scale(1.05);

  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

}





  /* Hamburger */

  .hamburger {

    display: flex;

    flex-direction: column;

    gap: 6px;

    cursor: pointer;

    z-index: 1100; /* hamburger menu ke upar rahe */

    transition: transform 0.3s ease;

  }

  .hamburger span {

    width: 28px;

    height: 3px;

    background: #0a3d62;

    border-radius: 3px;

    transition: all 0.4s ease;

  }



  /* Hamburger animation cross */

  .hamburger.active span:nth-child(1) {

    transform: rotate(45deg) translate(6px, 6px);

    background: #ffd700;

  }

  .hamburger.active span:nth-child(2) {

    opacity: 0;

  }

  .hamburger.active span:nth-child(3) {

    transform: rotate(-45deg) translate(7px, -7px);

    background: #ffd700;

  }

}