body.restaurant-theme {
      font-family: 'Poppins', sans-serif;
      margin: 0;
      background-color: #fcfcfc; /* Very light background */
      color: #333;
      line-height: 1.6;
      overflow-x: hidden; /* Prevent horizontal scroll due to animations */
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    button {
      cursor: pointer;
      border: none;
      padding: 12px 22px; /* Slightly larger padding */
      border-radius: 8px;
      font-weight: 600;
      font-size: 16px; /* Slightly larger font */
      transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* More prominent shadow */
    }

    button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

    /* Header */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 30px;
      background-color: #ffffff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .logo {
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 700;
      color: #e67e22; /* Primary brand color */
      display: flex;
      align-items: center;
    }

    .logo .material-icons {
      margin-right: 10px;
      font-size: 32px;
    }

    .search-box {
      display: flex;
      align-items: center;
      background-color: #d2f1df91;
     
      border-radius: 30px;
      padding: 10px 20px;
      width: 45%;
      max-width: 500px;
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    }

    .search-box input {
      border: none;
      background: transparent;
      outline: none;
      padding: 5px;
      flex-grow: 1;
      font-size: 17px;
      color: #27ae60;
    }

    .search-box .material-icons {
      color: #27ae60;
      margin-right: 12px;
      font-size: 22px;
    }

    .menu-icon {
      display: none; /* Hidden on desktop */
      cursor: pointer;
      font-size: 30px;
      color: #333;
    }

    /* Navigation */
    nav {
      background-color: rgba(0, 0, 0, 0.05);
      color: #e67e22;
      padding: 12px 30px;
      text-align: center;
      transition: max-height 0.4s ease-out, padding 0.4s ease-out;
      overflow: hidden;
      max-height: 60px; /* Initial height for desktop */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    nav.active {
      max-height: 350px; /* Max height when active for mobile */
      padding: 15px 30px;
    }
#navlinks{
    align-items: center;
    text-align: center;
    justify-content: center;
    margin-top: 55px;
}
    nav a {
      color:#abebc5d7;
      margin: 0 20px;
      font-weight: 500;
      padding: 10px 0;
      display: inline-flex;
      align-items: center;
      transition: color 0.3s ease, transform 0.3s ease;
      position: relative;
    }

    nav a::after {
      content: '';
      position: absolute;
      width: 0%;
      height: 2px;
      background: black;
      bottom: 5px;
      left: 0;
      transition: width 0.3s ease;
    }

    nav a:hover {
      color: #e67e22;
      transform: translateY(-2px);
    }

    nav a:hover::after {
      width: 100%;
    }

    nav a .material-icons {
      margin-right: 8px;
      font-size: 20px;
    }
/* General Navigation Styles */
nav {
  background-color: #333;
  /* Removed fixed padding here as it will be applied dynamically when active */
  padding: 0; /* Start with no padding when closed */
  text-align: left; /* Align items to the left when stacked */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex; /* Keep flex for stacking */
  flex-direction: column; /* Stack links vertically by default */
  width: 100%; /* Take full width */
  max-height: 0; /* *Crucially, hides the menu by default* */
  overflow: hidden; /* Hide content when collapsed */
  transition: max-height 0.4s ease-out, padding 0.4s ease-out; /* Smooth transition */
  position: absolute; /* Position under the header */
  top: 70px; /* Adjust based on your header's height */
  left: 0;
  z-index: 999; /* Ensure it appears above other content */
}

/* Style individual navigation links */
nav a {
  color: #fff;
  margin: 0; /* Remove horizontal margin */
  padding: 12px 20px; /* Add padding for clickable area */
  display: block; /* Make each link a block element */
  transition: background-color 0.3s ease, color 0.3s ease;
  border-bottom: 1px solid #555; /* Separator between links */
}

nav a:last-child {
  border-bottom: none; /* No border for the last link */
}

nav a:hover {
  background-color: #555; /* Darker background on hover */
  color: #e67e22; /* Highlight color */
  transform: none; /* Remove previous transform */
}

/* Force the underline to be based on the block link */
nav a::after {
  content: '';
  position: absolute;
  width: 0%;
  height: 2px;
  background: #e67e22;
  bottom: 0px; /* Position at the very bottom of the link */
  left: 20px; /* Align with left padding */
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: calc(100% - 40px); /* Adjust width to fit padding */
}

/* Always show hamburger menu icon */
.menu-icon {
  display: block !important; /* *Forces the icon to always show* */
  cursor: pointer;
  font-size: 30px;
  color: #333;
}

/* When 'active' class is added to nav, expand it */
nav.active {
  max-height: 350px; /* Adjust as needed based on your menu item count */
  padding: 15px 0; /* Apply vertical padding when active */
}



    /* Hero Section */
    .hero-section {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(' ');
        background-size: cover;
        background-position: center;
        color: #fff;
        text-align: center;
        padding: 120px 20px;
        position: relative;
        overflow: hidden;
        margin-bottom: 60px; /* Space before first section */
    }

    .hero-content {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    .hero-content h1 {
        font-family: 'Playfair Display', serif;
        font-size: 60px;
        margin-bottom: 20px;
        line-height: 1.2;
        text-shadow: 3px 3px 8px rgba(0,0,0,0.3);
        opacity: 0; /* For animation */
        transform: translateY(20px); /* For animation */
        animation: fadeInSlideUp 1s ease-out forwards;
        animation-delay: 0.2s;
    }

    .hero-content p {
        font-size: 22px;
        margin-bottom: 40px;
        opacity: 0; /* For animation */
        transform: translateY(20px); /* For animation */
        animation: fadeInSlideUp 1s ease-out forwards;
        animation-delay: 0.5s;
    }

    .hero-buttons .order-now-btn {
        background-color: #e67e22;
        color: #fff;
        margin-right: 20px;
        opacity: 0; /* For animation */
        animation: fadeInScale 0.8s ease-out forwards;
        animation-delay: 0.8s;
    }

    .hero-buttons .order-now-btn:hover {
        background-color: #d35400;
    }

    .hero-buttons .view-menu-btn {
        background-color: transparent;
        border: 2px solid #fff;
        color: #fff;
        box-shadow: none;
        opacity: 0; /* For animation */
        animation: fadeInScale 0.8s ease-out forwards;
        animation-delay: 1s;
    }

    .hero-buttons .view-menu-btn:hover {
        background-color: rgba(255,255,255,0.1);
        transform: translateY(-3px);
        box-shadow: 0 4px 8px rgba(255,255,255,0.2);
    }

    .main-heading {
      text-align: center;
      margin-top: 50px;
      margin-bottom: 15px;
      /* font-family: 'Playfair Display', serif; */
      font-family: 'Times New Roman', Times, serif;
      font-size: 38px;
      font-weight: 500;
      color: #333; /* Darker for main headings */
      position: relative;
      padding-bottom: 10px;
      opacity: 0; /* For scroll animation */
      transform: translateY(20px); /* For scroll animation */
      transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* For scroll animation */
    }

    .main-heading.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .main-heading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 3px;
        background-color: #e67e22; /* Default highlight */
        border-radius: 2px;
    }

    /* Specific heading colors for each section */
    .fast-food-heading .fas { color: #e67e22; }
    .fast-food-heading::after { background-color: #e67e22; }

    .indian-meals-heading { color: #28a745; }
    .indian-meals-heading .fas { color: #28a745; }
    .indian-meals-heading::after { background-color: #28a745; }

    .tandoori-heading { color: #8e44ad; }
    .tandoori-heading .fas { color: #8e44ad; }
    .tandoori-heading::after { background-color: #8e44ad; }

    .drinks-soups-heading { color: #3498db; }
    .drinks-soups-heading .fas { color: #3498db; }
    .drinks-soups-heading::after { background-color: #3498db; }

    .popular-heading { color: #e74c3c; } /* Red */
    .popular-heading .fas { color: #e74c3c; }
    .popular-heading::after { background-color: #e74c3c; }

    .why-choose-us-heading { color: #27ae60; } /* Emerald Green */
    .why-choose-us-heading .fas { color: #27ae60; }
    .why-choose-us-heading::after { background-color: #27ae60; }

    .testimonials-heading { color: #6c757d; } /* Grayish */
    .testimonials-heading .fas { color: #6c757d; }
    .testimonials-heading::after { background-color: #6c757d; }


    .main-heading .fas {
      margin-right: 12px;
      font-size: 36px;
    }

    .sub-heading {
      text-align: center;
      color: #777;
      font-size: 19px;
      margin-bottom: 40px;
      font-weight: 400;
      opacity: 0; /* For scroll animation */
      transform: translateY(20px); /* For scroll animation */
      transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s; /* Delay after main heading */
      font-family: 'Times New Roman', Times, serif;
    }

    .sub-heading.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Scroll reveal animation base for sections (used for containing grid) */
    .section-container.scroll-reveal {
        opacity: 0;
        transform: translateY(50px);
        transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }

    .section-container.scroll-reveal.visible {
        opacity: 1;
        transform: translateY(0);
    }


    /* Discount Badge */
    .discount-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      background-color: #e74c3c; /* Red */
      color: #fff;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 600;
      z-index: 10;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* View More Button */
    .view-more-btn {
      background-color: #e67e22; /* Default orange */
      color: #fff;
      margin-top: 20px;
      display: inline-flex;
      align-items: center;
    }

    .view-more-btn:hover {
      background-color: #d35400;
    }

    .view-more-btn .fas {
      margin-left: 10px;
    }

    /* Card Base Styles for Hover & Scroll Animation */
    .base-card-style {
        border-radius: 12px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        overflow: hidden;
       
        flex-direction: column;
        transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.8s ease-out, transform 0.8s ease-out; /* Added for scroll reveal */
        opacity: 0; /* For scroll animation */
        transform: translateY(30px); /* For scroll animation */
    }

    .base-card-style.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .base-card-style:hover {
        transform: translateY(-10px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }

    .card-image-base {
        width: 100%;
        height: 200px; /* Base height */
        background-size: cover;
        background-position: center;
        position: relative;
        transition: transform 0.3s ease; /* For image hover zoom */
        
    }

    .base-card-style:hover .card-image-base {
        transform: scale(1.05); /* Slight zoom on hover */
    }

    .card-content-base {
        padding: 25px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-content-base h3 {
        font-family: 'Playfair Display', serif;
        font-size: 24px;
        margin-top: 0;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        font-weight: 700;
    }

    .card-content-base h3 .fas {
        margin-right: 10px;
        font-size: 22px;
    }

    .card-content-base p {
        font-size: 16px;
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
    }


    /* --- Fast Food & Quick Bites Section (Section 1) --- */
    .fast-food-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 35px;
      padding: 0 30px 60px;
      max-width: 1300px;
      margin: 0 auto;
    }

    .fast-food-grid .base-card-style {
        border: 1px solid rgba(0,0,0,0.05); /* Light border */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    /* Unique background colors for each fast-food card */
    .fast-food-grid .card-1 { background-color: #FFF8F5; } /* Light Peach */
    .fast-food-grid .card-2 { background-color: #F5FFFB; } /* Very Light Green */
    .fast-food-grid .card-3 { background-color: #F5F8FF; } /* Very Light Blue */
    .fast-food-grid .card-4 { background-color: #FFF5F8; } /* Very Light Pink */
    .fast-food-grid .card-5 { background-color: #F8FFFF; } /* Light Cyan */
    .fast-food-grid .card-6 { background-color: #FFFCF5; } /* Creamy Yellow */

    .fast-food-grid h3 { color: #e67e22; } /* Orange */
    .fast-food-grid h3 .fas { color: #d35400; } /* Darker Orange */

    .fast-food-grid .view-more-btn {
        background-color: #e67e22;
    }

    /* --- Indian Meals Section (Section 2) --- */
    .indian-meals-layout {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns for desktop */
        gap: 35px;
        padding: 0 30px 60px;
        max-width: 1300px;
        margin: 0 auto;
        align-items: stretch;
    }

    .indian-meals-layout .base-card-style {
        background-color: #F5FFF8; /* Light Mint Green */
        border: 1px solid #E0FFE9;
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.1); /* Subtle green shadow */
    }

    .indian-meals-layout h3 { color: #28a745; } /* Forest Green */

    .indian-meals-layout .view-more-btn {
        background-color: #28a745;
    }

    .indian-meal-large-card .card-image-base {
        height: 500px; /* Larger image for the big card */

    }
    

    .indian-meals-right-side {
        display: grid;
        grid-template-columns: 1fr; /* Stacks on small screens, 1 col for desktop */
        gap: 35px;
    }

    .indian-meal-small-card {
        flex-direction: row; /* Keep horizontal for small card on desktop */
    }

    .indian-meal-small-card .card-image-base {
        min-width: 180px; /* Fixed width for image on side */
        height: 180px;
        border-radius: 12px 0 0 12px; /* Rounded only on left */
    }

    .indian-meal-small-card .card-content-base {
        padding: 20px;
    }

    .indian-meal-small-card h3 { font-size: 22px;}
    .indian-meal-small-card p { font-size: 15px; }

    /* --- Indian Tandoori & Grilled Section (Section 3) --- */
    .tandoori-grilled-wrapper {
        padding: 0 30px 60px;
        max-width: 1300px;
        margin: 0 auto;
    }

    .tandoori-row {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Two columns for desktop */
        gap: 35px;
        margin-bottom: 35px;
    }

    .tandoori-grilled-wrapper .base-card-style {
        background-color: #F8F5FF; /* Light Lavender */
        border: 1px solid #EAE0FF;
        box-shadow: 0 4px 15px rgba(142, 68, 173, 0.1); /* Subtle purple shadow */
    }

    .tandoori-grilled-wrapper h3 { color: #8e44ad; } /* Deep Purple */
    .tandoori-grilled-wrapper h3 .fas { color: #6c3483; } /* Darker Purple */

    .tandoori-grilled-wrapper .view-more-btn {
        background-color: #8e44ad;
    }

    .tandoori-large-card .card-image-base {
        height: 280px;
    }

    .tandoori-small-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Ensure two columns for desktop within this row */
        gap: 35px;
    }

    .tandoori-small-card {
        flex-direction: row; /* Keep horizontal for small card on desktop */
    }

    .tandoori-small-card .card-image-base {
        min-width: 180px;
        height: 180px;
        border-radius: 12px 0 0 12px;
    }

    .tandoori-small-card .card-content-base {
        padding: 20px;
    }

    .tandoori-small-card h3 { font-size: 22px;}
    .tandoori-small-card p { font-size: 15px; }


    /* --- Drinks & Soups Section (Section 4) --- */
    .drinks-soups-wrapper {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 35px;
      padding: 0 30px 60px;
      max-width: 1300px;
      margin: 0 auto;
    }

    .drinks-soups-wrapper .base-card-style {
        border: 1px solid rgba(0,0,0,0.05); /* Light border */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    }

    /* Unique background colors for each drinks/soups card */
    .drinks-soups-wrapper .card-1 { background-color: #F5F8FF; } /* Light Sky Blue */
    .drinks-soups-wrapper .card-2 { background-color: #F5FEFF; } /* Lighter Cyan */
    .drinks-soups-wrapper .card-3 { background-color: #FFFAFF; } /* Very Light Magenta */
    .drinks-soups-wrapper .card-4 { background-color: #F8FFF5; } /* Lightest Green */
    .drinks-soups-wrapper .card-5 { background-color: #FFF5F8; } /* Very Light Pink (reused light) */
    .drinks-soups-wrapper .card-6 { background-color: #FBF5FF; } /* Pale Purple */

    .drinks-soups-wrapper h3 { color: #3498db; } /* Royal Blue */
    .drinks-soups-wrapper h3 .fas { color: #2980b9; } /* Darker Blue */

    .drinks-soups-wrapper .view-more-btn {
        background-color: #3498db;
    }

    /* --- Special Offer Banner --- */
    .offer-banner {
        background: linear-gradient(135deg, #f78d3b, #e67e22); /* Orange gradient */
        color: #fff;
        padding: 50px 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
        max-width: 1300px;
        margin: 60px auto;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(247, 141, 59, 0.3);
        overflow: hidden;
        opacity: 0; /* For scroll animation */
        transform: translateY(50px); /* For scroll animation */
        transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* For scroll animation */
    }
    .offer-banner.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .offer-banner-image {
        flex-shrink: 0;
        width: 350px;
        height: 250px;
        background-size: cover;
        background-position: center;
        border-radius: 12px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        padding-bottom: 25px;
       
       
    }

    .offer-banner-content {
        text-align: right;
        max-width: 600px;
    }

    .offer-banner-content h2 {
        font-family: 'Playfair Display', serif;
        font-size: 48px;
        margin-bottom: 15px;
        line-height: 1.2;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.15);
    }

    .offer-banner-content p {
        font-size: 19px;
        margin-bottom: 30px;
        opacity: 0.9;
    }

    .offer-banner-content .grab-deal-btn {
        background-color: #fff;
        color: #e67e22;
        padding: 12px 25px;
        font-size: 18px;
        border-radius: 30px;
    }

    .offer-banner-content .grab-deal-btn:hover {
        background-color: #f0f0f0;
        color: #d35400;
        transform: translateY(-5px);
        box-shadow: 0 8px 18px rgba(0,0,0,0.2);
    }

    /* --- Popular Items Section --- */
    .popular-items-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 35px;
        padding: 0 30px 60px;
        max-width: 1300px;
        margin: 0 auto;
    }

    .popular-item-card {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        overflow: hidden;
        transition: transform 0.4s ease, box-shadow 0.4s ease, opacity 0.8s ease-out, transform 0.8s ease-out; /* Added for scroll reveal */
        text-align: center;
        border: 1px solid #f0f0f0;
        opacity: 0; /* For scroll animation */
        transform: translateY(30px); /* For scroll animation */
    }

    .popular-item-card.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .popular-item-card:hover {
        transform: scale(1.03) translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 0 0 5px rgba(231, 76, 60, 0.2); /* Glow effect */
    }

    .popular-item-card-image {
        width: 100%;
        height: 220px;
        background-size: cover;
        background-position: center;
        border-bottom: 1px solid #eee;
        transition: transform 0.3s ease; /* For image hover zoom */
    }
    .popular-item-card:hover .popular-item-card-image {
        transform: scale(1.05); /* Slight zoom on hover */
    }

    .popular-item-card-content {
        padding: 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popular-item-card-content h3 {
        font-family: 'Playfair Display', serif;
        font-size: 26px;
        color: #333;
        margin-top: 0;
        margin-bottom: 10px;
    }

    .popular-item-card-content .rating {
        color: #f1c40f; /* Gold for stars */
        margin-bottom: 21px;
        font-size: 18px;
    }
    .popular-item-card-content .rating .fas {
        margin: 0 2px;
    }

    .popular-item-card-content .price {
        font-size: 18px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.555); /* Red price */
        margin-bottom: 20px;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }

    .popular-item-card-content .add-to-cart-btn {
        background-color: #e74c3c;
        color: #fff;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 25px;
    }

    .popular-item-card-content .add-to-cart-btn:hover {
        background-color: #c0392b;
    }


.blink{
     animation: blinkGlow 1s infinite alternate;
     color: #3498db;
}
    

  
    /* Footer Container */
    footer {
      background: linear-gradient(to right, #f7f9fc, #f1f2f7);
      color: #222;
      padding: 40px 10%;
    }

    /* --- Mobile Layout (Default - isko pehle fix karte hain) --- */
    .footer-top {
        display: flex;
        flex-direction: column; /* Main sections ko stack karega */
        gap: 20px; /* Sections ke beech mein space */
    }

    .about-and-links-group {
        display: flex;
        flex-direction: row; /* Mountain Delight aur Quick Links ko side-by-side rakhega */
        justify-content: space-between;
        gap: 20px;
    }

    .footer-col {
        flex: 1 1 45%; /* Dono cards ko barabar space dega */
        min-width: 150px;
    }

    .footer-social-section {
        flex-direction: column;
    }

    /* Headings and Links */
    .footer-col h3 {
      font-family: 'Playfair Display', serif;
      font-size: 20px;
      margin-bottom: 15px;
      color: #1a1a1a;
      position: relative;
      padding-bottom: 5px;
    }

    .footer-col h3::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 50px;
      height: 3px;
      background: #778899;
      border-radius: 2px;
    }

    .footer-col ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-col ul li {
      margin-bottom: 10px;
      font-size: 14px;
      color: #444;
    }
    
    /* Social Icons */
    .footer-social {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px;
    }

    .footer-social a {
      text-decoration: none;
      font-size: 20px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #e0e4eb;
      color: #444;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

   
    .contact-info { margin-top: 15px; font-size: 14px; color: #444; }
    .contact-info div { display: flex; align-items: center; margin-bottom: 8px; gap: 8px; }
    .contact-info i { font-size: 16px; color: #1a1a1a; }
    .footer-social a:hover { background: #778899; color: #fff; transform: translateY(-3px); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
    .footer-legal-info { font-size: 14px; color: #555; text-align: left; }
    .footer-legal-info p { margin: 0; margin-bottom: 8px; }
    .footer-legal-info .location-info-bottom { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; }
    .footer-legal-info .location-info-bottom i { font-size: 16px; color: #555; }
    



    /* सर्च बॉक्स के अंदर सुझावों के लिए स्टाइल */
#suggestions-box {
    position: absolute;
    top: 100%; /* सर्च बार के ठीक नीचे */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 0px solid #ddd;
    border-top: none;
    max-height: 200px; /* सुझावों के लिए अधिकतम ऊँचाई */
    overflow-y: auto;
    z-index: 99; /* सुनिश्चित करें कि यह दूसरे तत्वों के ऊपर दिखे */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 0 0 15px 15px; /* नीचे के कोने गोल करें */
}

/* सुझावों में हर आइटम के लिए स्टाइल */
.suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 16px;
    color: #333;
}

.suggestion-item:hover {
    background-color: #f1f1f1;
}

/* मोबाइल पर सर्च बॉक्स के लिए पोजिशनिंग */
@media (max-width: 768px) {
    .search-box.active {
        top: 60px; /* हेडर के नीचे पोजिशन करें */
        left: 10px;
        right: 10px;
        width: auto;
        display: block; /* ब्लॉक करने से सुझावों को सही जगह मिलेगी */
    }
    #suggestions-box {
        top: 45px; /* मोबाइल पर इनपुट के ठीक नीचे पोजिशन करें */
        left: 0;
        right: 0;
    }
}
.logo img{
  width: 100px;
  height:100px;
}