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

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  border-radius: 3px;
  transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---- Tablet 768px - 1024px ---- */
@media (max-width: 1024px) {
  .hero { padding: 60px 40px; }
  .hero-left h1 { font-size: 42px; }
  .hero-left h1 span { font-size: 38px; }
  .circle-bg { width: 300px; height: 300px; top: 80px; left: 30px; }
  .food { width: 160px; height: 160px; }
  .f1 { top: 30px; left: 110px; }
  .f2 { top: 180px; right: 10px; }
  .f3 { bottom: 90px; left: 5px; }
}

/* ---- Mobile max 768px ---- */
@media (max-width: 768px) {

  /* Navbar */
  .hamburger { display: flex; }
  .search { display: none; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 60px; left: 0;
    width: 100%;
    background: #222;
    padding: 20px 0;
    gap: 0;
    z-index: 999;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-bottom: 1px solid #333; }
  .nav-links a { display: block; padding: 14px 25px; font-size: 16px; }

  /* Hero */
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 100px 25px 60px;
    min-height: auto;
    gap: 40px;
  }
  .hero-left { width: 100%; }
  .hero-left h1 { font-size: 32px; }
  .hero-left h1 span { font-size: 30px; }
  .Lekha { max-width: 100%; }

  .hero-right { width: 100%; height: 300px; }
  .circle-bg { width: 240px; height: 240px; top: 30px; left: 50%; transform: translateX(-50%); }
  .food { width: 120px; height: 120px; }
  .f1 { top: 0; left: 50%; transform: translateX(-20px); }
  .f2 { top: 130px; right: 10px; }
  .f3 { top: 130px; left: 10px; }

  /* Features */
  .features { flex-direction: column; align-items: center; height: auto; padding: 40px 20px; gap: 25px; }
  .feature-box { width: 100%; max-width: 450px; height: auto; }

  /* About */
  .About { height: auto; display: flex; flex-direction: column; padding: 50px 20px; margin-bottom: 30px; }
  .About-pic { width: 100%; height: auto; float: none; margin: 0 0 20px 0; }
  .About-pic img { width: 100%; height: auto; margin: 0; }
  .About-lekha { width: 100%; height: auto; float: none; margin: 0; }
  .About-lekha h1 { font-size: 26px; }
  .About-lekha p { font-size: 15px; }
  .About-1 { width: calc(50% - 10px); }

  /* Food Menu */
  .food-menu { padding: 40px 20px; margin-top: 0; }
  .food-menu h2 { font-size: 28px; padding-top: 20px; }

  /* Chefs */
  .chef-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .chef-card img { height: 220px; }

  /* Footer */
  .footer-container { grid-template-columns: 1fr 1fr; }
}

/* ---- Small Mobile max 480px ---- */
@media (max-width: 480px) {
  .hero-left h1 { font-size: 26px; }
  .hero-left h1 span { font-size: 24px; }
  .hero-right { height: 260px; }
  .circle-bg { width: 200px; height: 200px; }
  .food { width: 100px; height: 100px; }
  .f1 { top: 0; left: 50%; transform: translateX(-20px); }
  .f2 { top: 110px; right: 10px; }
  .f3 { top: 110px; left: 10px; }
  .About-1 { width: 100%; }
  .food-grid { grid-template-columns: 1fr; }
  .chef-cards { grid-template-columns: 1fr; }
  .footer-container { grid-template-columns: 1fr; }
}

/* ---- Very Small max 360px (down to 300px) ---- */
@media (max-width: 360px) {

  /* Navbar */
  .navbar { padding: 12px 4%; }
  .logo { font-size: 1.4rem; }

  /* Hero */
  .hero { padding: 90px 16px 50px; }
  .hero-left h1 { font-size: 22px; }
  .hero-left h1 span { font-size: 20px; }
  .offer { font-size: 14px; }
  .Lekha { font-size: 14px; }
  .hero-btn { padding: 10px 22px; font-size: 14px; }

  .hero-right { height: 220px; }
  .circle-bg { width: 170px; height: 170px; top: 20px; }
  .food { width: 85px; height: 85px; }
  .f1 { top: 0; }
  .f2 { top: 90px; right: 5px; }
  .f3 { top: 90px; left: 5px; }

  /* Features */
  .feature-box h3 { font-size: 22px; }
  .feature-box p { font-size: 15px; }

  /* About */
  .About-lekha h1 { font-size: 21px; }
  .About-lekha p { font-size: 14px; }
  .About-1 { padding: 8px; }
  .About-1 h1 { font-size: 26px; margin-left: 8px; }
  .About-1 h3 { font-size: 14px; margin-left: 0; width: auto; }

  /* Food Menu */
  .food-menu { padding: 30px 15px; }
  .food-menu h2 { font-size: 24px; }

  /* Chefs */
  .chef-title h2 { font-size: 26px; }
  .chef-cards { grid-template-columns: 1fr; gap: 20px; }
  .chef-card img { height: 260px; }

  /* Footer */
  .footer { padding-top: 45px; }
  .footer-box h3 { font-size: 17px; }
}