/* Basic Reset and Body Styling */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Prevent horizontal scroll when mobile menu is off-screen */
  transition: margin-left 0.3s ease;
  /* Optional: Smooth push effect on body */

  font-family: sans-serif;
  /* Apply a default font */
  background-color: #ffffff;
  /* Default page background */
  color: var(--text-color-dark);
  /* Default text color */
}

h3 {
  padding: 10px;
  font-weight: 550;
}

p {
  line-height: 25px;
}

/* Style to prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
  /* Optional: Push main content to the right slightly */
  /* margin-left: 300px; */
  /* Match the mobile menu width */
}

/* --- Navbar Container --- */
.navbar {
  display: flex;
  /* Items ko horizontal arrange karein */
  /* justify-content: space-between; /* OLD: Logo aur links ko edges par dhakel raha tha */
  justify-content: flex-start;
  /* NEW: Items ko left se start karein */
  align-items: center;
  /* Items ko vertically center karein */
  background-color: #fff;
  /* White background */
  padding: 15px 30px;
  /* Example padding - aap adjust kar sakte hain */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Halka shadow */
  width: 100%;
  position: relative;
  /* z-index ke liye zaruri */
  z-index: 1000;
  /* Ensure navbar is above other content */
  box-sizing: border-box;
  /* Ensure padding is included in the element's total width */
}

/* --- Navbar Brand (Logo + Text) --- */
.navbar-brand {
  display: flex;
  /* Logo aur text ko horizontal align karein */
  align-items: center;
  /* Vertically align karein */
  /* Optional: Prevent brand from shrinking */
  flex-shrink: 0;
}

.navbar-brand .brand-link {
  text-decoration: none;
  /* Underline hatayein */
  display: flex;
  align-items: center;
}

.navbar-brand .logo {
  height: 30px;
  /* Example height */
  margin-right: 8px;
  /* Logo aur text ke beech space */
}

.navbar-brand .brand-text {
  font-size: 1.5em;
  /* Font size */
  font-weight: bold;
  color: #e20074;
  /* Foodpanda pink color (approx) */
}

.brand-link img {
  height: 34px;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* --- Navbar Links List (Desktop) --- */
.navbar-links {
  list-style: none;
  /* Bullet points hatayein */
  margin: 0;
  padding: 0;
  display: flex;
  /* Desktop par links horizontal show karein */
  align-items: center;
  margin-left: auto;
  /* NEW: Yeh links ko right side mein dhakel dega, left mein saara available space le lega */
  /* Optional: Allow links container to wrap if necessary (generally not desired for desktop) */
  /* flex-wrap: wrap; */
}

.navbar-links li {
  /* Margin ko adjust kar sakte hain */
  margin-left: 20px;
  /* Ya aapki preference ke mutabik */
  /* Optional: Prevent individual link items from shrinking too much */
  flex-shrink: 0;
}

.navbar-links li:first-child {
  margin-left: 0;
  /* Pehle link ke left mein space na ho */
}

/* Individual Navbar Links ki styling */
.navbar-links a {
  text-decoration: none;
  /* Underline hatayein */
  color: #333;
  /* Links ka color (dark grey) */
  font-size: 1em;
  font-weight: normal;
  transition: color 0.3s ease;
  /* Hover par color change ka smooth transition */
  padding: 18px;
}

.navbar-links a:hover {
  color: #e20074;
  /* Hover par pink color */
}

/* --- Hamburger Icon --- */
.hamburger-icon {
  font-size: 28px;
  /* Hamburger icon ka size */
  cursor: pointer;
  color: #333;
  /* Icon ka color */
  display: none;
  /* By default desktop par hide rakhein */
  z-index: 1100;
  /* Navbar ke upar rahe */
}

/* --- Mobile Menu Styling --- */
.mobile-menu {
  position: fixed;
  /* Screen ke relative fixed rahe */
  top: 0;
  left: -300px;
  /* Shuru mein screen ke bahar (left mein) rakhein */
  width: 300px;
  /* Mobile menu ki चौड़ाई (width) - aap adjust kar sakte hain */
  height: 100%;
  /* Screen ki poori height le */
  background-color: #fff;
  /* White background */
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
  /* Right side mein shadow */
  transition: left 0.3s ease;
  /* Slide-in hone ka smooth transition */
  z-index: 1050;
  /* Content ke upar, overlay ke neeche rahe */
  overflow-y: auto;
  /* Agar content zyada ho to scrollbar dikhaye */
  padding-top: 15px;
  /* Top se thodi padding */
  box-sizing: border-box;
  /* Include padding in width/height */
}

/* JavaScript se jab 'open' class add hogi to menu screen par aa jayega */
.mobile-menu.open {
  left: 0;
  /* Screen par slide in karein */
}

/* --- Mobile Menu Header --- */
.mobile-menu-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  /* Bottom border */
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  /* Items ko vertically stack karein */
  align-items: flex-start;
  /* Items ko left align karein */
  position: relative;
  /* Close button positioning ke liye */
}

/* Close button ki styling */
.mobile-menu-header .close-icon {
  position: absolute;
  top: 15px;
  /* Adjust position */
  right: 15px;
  /* Adjust position */
  font-size: 28px;
  /* Size */
  cursor: pointer;
  color: #888;
  /* Color */
  line-height: 1;
  /* Vertical alignment */
}

/* User info styling (icon + text) */
.mobile-menu-header .user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

/* User icon styling */
.mobile-menu-header .user-icon {
  font-size: 28px;
  margin-right: 12px;
  color: rgb(255, 32, 43);
  /* Pink color */
}

/* Greeting text styling */
.mobile-menu-header .greeting {
  font-size: 1.1em;
  color: #333;
  font-weight: bold;
}

/* Login button styling */
.mobile-menu-header .login-button {
  background-color: rgb(255, 32, 43);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 10px;
;
  /* Foodpanda pink */
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
  width: 100%;
  /* Full width */
  text-align: center;
}

.mobile-menu-header .login-button:hover {
  background-color: #c00060;
  /* Hover par darker pink */
}

/* --- Mobile Menu Links --- */
.mobile-menu-links {
  list-style: none;
  margin: 0;
  padding: 0 0 20px 0;
  /* Bottom padding */
}

.mobile-menu-links li {
  border-bottom: 1px solid #eee;
  /* Main links ke beech border */
}

.mobile-menu-links li:last-child {
  border-bottom: none;
  /* Last link ke neeche border nahi */
}

.mobile-menu-links li a {
  display: flex;
  /* Icon aur text ko align karein */
  align-items: center;
  /* Vertically align karein */
  padding: 14px 20px;
  /* Padding */
  text-decoration: none;
  color: #333;
  /* Text color */
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.mobile-menu-links li a:hover {
  background-color: #f8f8f8;
  /* Hover par light background */
}

/* Icons ke liye styling */
.mobile-menu-links .icon {
  font-size: 1.3em;
  /* Icon size */
  margin-right: 15px;
  /* Icon aur text ke beech space */
  color: rgb(239, 4, 16);
;
  /* Pink color (adjust if needed) */
  width: 25px;
  /* Icons ko align karne ke liye fixed width */
  text-align: center;
  /* If using icon fonts, adjust line-height/vertical-align */
}

/* --- Submenu Styling --- */
/* Sirf un links ko target karein jo directly li.has-submenu ke andar hain */
.mobile-menu-links .has-submenu > a {
  justify-content: space-between;
  /* Text/icon aur arrow ke beech space dein */
}

/* Dropdown arrow ki styling */
.mobile-menu-links .has-submenu .dropdown-arrow {
  font-size: 0.8em;
  transition: transform 0.3s ease;
  /* Rotate hone ka smooth transition */
}

/* Jab parent li mein 'open' class ho to arrow ko rotate karein */
.mobile-menu-links .has-submenu.open > a .dropdown-arrow {
  transform: rotate(180deg);
  /* 180 degree rotate karein */
}

/* Submenu list ki styling */
.mobile-menu-links .submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  /* Submenu ke liye thoda alag background */
  /* Shuru mein hide rakhein aur smooth transition ke liye max-height use karein */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  /* Expand/collapse hone ka smooth transition */
}

/* Jab parent li mein 'open' class ho to submenu ko dikhayein */
.mobile-menu-links .has-submenu.open .submenu {
  max-height: 500px;
  /* Ek value jo content se badi ho transition ke liye */
}

/* Submenu items ke liye styling */
.mobile-menu-links .submenu li {
  border-bottom: none;
  /* Submenu items ke neeche border nahi */
}

.mobile-menu-links .submenu li a {
  padding: 12px 20px 12px 55px;
  /* Submenu links ko indent karein */
  font-size: 0.95em;
  /* Thoda chhota font size */
  color: #555;
  /* Thoda lighter color */
}

.mobile-menu-links .submenu li a:hover {
  background-color: #eee;
  /* Hover par light grey background */
}

/* --- Overlay Styling --- */
.mobile-menu-overlay {
  position: fixed;
  /* Poore viewport ko cover kare */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black color */
  z-index: 1020;
  /* Menu ke neeche, content ke upar rahe */
  display: none;
  /* Shuru mein hide rakhein */
  transition: opacity 0.3s ease;
  /* Fade-in/out ka smooth transition */
  opacity: 0;
  /* Shuru mein transparent */
}

/* JavaScript se jab 'visible' class add hogi to overlay dikh jayega aur fade in hoga */
.mobile-menu-overlay.visible {
  display: block;
  /* Dikha dein */
  opacity: 1;
  /* Fully visible karein */
}

/* style.css */

/* --- Navbar Container --- */
.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  padding: 20px 11%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 100%;
  position: fixed;
  /* Navbar ko screen par fixed kar dein */
  top: 0;
  /* Screen ke top se shuru karein */
  left: 0;
  /* Screen ke left se shuru karein */
  z-index: 1000;
  box-sizing: border-box;
  transition: top 0.3s ease;
  /* 'top' property mein smooth animation add karein */
}

/* CSS class to hide the navbar */
.navbar-hidden {
  /* Navbar ki height ke barabar usko upar ki taraf move kar dein */
  /* Aapko yeh value adjust karni pad sakti hai agar aapki navbar height alag hai */
  top: -70px;
  /* Example: Assuming navbar height is around 70px */
}

/* Add padding to the main content area to prevent it from being hidden under the fixed navbar */
.page-content {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 150vh;
  transition: margin-left 0.3s ease;
  /* Yahan padding-top dein, jo navbar ki height se thoda zyada ho */
  padding-top: 80px;
  /* Example: Adjust based on your navbar's actual height */
}

/* --- Media Query for Mobile Devices --- */
/* Jab screen width 768px ya usse kam ho */
@media (max-width: 768px) {
  .navbar-links {
    display: none;
    /* Desktop links ko mobile par hide karein */
    margin-left: 0;
    /* Ensure margin-left: auto from desktop doesn't affect mobile */
  }

  .hamburger-icon {
    display: block;
    /* Hamburger icon ko mobile par dikhayein */
    margin-left: auto;
    /* NEW: Hamburger icon ko right side mein dhakel dega */
    font-size: 28px;
    /* Ensure consistent icon size */
    cursor: pointer;
    color: #333;
    z-index: 1100;
  }

  /* Optional: Mobile par navbar padding adjust karein */
  .navbar {
    padding: 14px 20px;
    /* Navbar par justify-content: flex-start; hi rahega */
    justify-content: flex-start;
  }

  /* Optional: Mobile par brand text size adjust karein */
  .navbar-brand .brand-text {
    font-size: 1.4em;
  }

  /* Ensure the brand doesn't take up unnecessary space */
  .navbar-brand {
    flex-shrink: 0;
  }
}

#main {
  background-color: red;
  box-sizing: border-box;
  height: 400px;
  position: relative;
  top: 82px;
}
  .bgimage-container{
    height: 162vh;
    width: 100%;
    /* background-color: red; */
    padding: 37px;
    margin-top: 76px;
    background: url("img.jpg") no-repeat center center;
    background-size: cover;

  }

/* Baaki CSS code same rahega */

/* start order section style */
/* Basic Reset and Body Styling */
.order-section {
  /* background: #fff; */
  /* background: url("img.jpg") no-repeat center center; */
  background: linear-gradient(to bottom, #f5c0cf 0%, #ffd3cc 50%, #fff3f4 100%);

  /* background: linear-gradient(to bottom, #7d2ae8 0%, #00c4cc 40%, #ffffff 100%); */



background-size: cover;
  padding: 168px 5px 65px;
  /* Combined padding */
  color: #fff;
  /* Default text color for section */
  text-align: center;
  overflow: hidden;
}

.container {
  max-width: 700px;
  /* Max width for content */
  margin: 0 auto;
  /* Center the container */
  position: relative;
}

.header-text-container {
  margin-bottom: 30px;
  /* Added spacing below header text */
}

/* Headings Styling */
.main-heading {
    color: black;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: .28px;
    line-height: 1.14;
    margin: 20px 0 4px;
  /* Changed to black as per second code */
}

.sub-heading {
  font-family: "Open Sans", sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  margin-bottom: 30px;
  opacity: 0.9;
  color: #f30000;
  /* Changed to black as per second code */
}

/* Form Container Styling */
.order-form-container {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 3rem;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: left;
  position: relative;
  padding-top: 10px;
  padding-bottom: 1px;
}

/* Tabs Styling */
.tabs {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 20px;
  position: relative;
  border-bottom: 2px solid #eee;
  max-width: 218px;
}

.tab-button {
  background: none;
  border: none;
  padding: 10px 15px;
  font-size: 0.7em;
  cursor: pointer;
  transition: color 0.3s ease;
  color: #555;
  font-weight: 600;
}

.tab-button.active {
  color: #ff202b;
}

.tab-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background-color: #ff202b;
  width: 0;
  transition: left 0.3s ease, width 0.3s ease;
}

/* Tab Content Styling */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Input Group (for icon and input) */
.input-group {
  position: relative;
  margin-bottom: 20px;
  /* Added margin-bottom for spacing */
}

.input-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 1.2em;
  z-index: 1;
  /* Ensure icon is above input */
}

.premium-input {
  width: 100%;
  /* Use 100% width and rely on padding */
  padding: 12px 15px 12px 45px;
  /* Left padding for icon */
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

.premium-input:focus {
  outline: none;
  border-color: #e74c3c;
  box-shadow: 0 0 8px rgba(231, 76, 60, 0.2);
}

/* Autocomplete suggestions list styles */
ul#suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Updated Border for cleaner look */
  border: 1px solid #dcdcdc;
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  position: absolute;
  /* Position relative to form container */
  /* Adjusted width and left to align with input padding */
  width: calc(100% - 60px);
  /* Total width - left/right padding of form-container (30+30) */
  left: 30px;
  /* Align with left padding of form-container */
  z-index: 10;
  /* Ensure suggestions are on top */
  background: #fff;
  /* Ensure background is white */
  /* Updated Box Shadow for softer look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Rounded bottom corners to match form */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  display: none;
  /* Initially hidden */
  font-size: 0.95em;
  /* Slightly smaller font for list items */
  color: #000;
}

ul#suggestions li {
  padding: 10px 15px;
  /* Added horizontal padding */
  background: #fff;
  cursor: pointer;
  /* Updated Border bottom for softer separation */
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  /* Smooth hover effect */
}

ul#suggestions li:last-child {
  border-bottom: none;
  /* No border for last item */
}

ul#suggestions li:hover {
  background: #f9f9f9;
  /* Very light grey hover background */
}

ul#suggestions li.no-match {
  cursor: default;
  color: #888;
  font-style: italic;
  padding: 10px 15px;
  /* Keep padding consistent */
  background: #fff;
  /* Ensure background is white */
}

.highlight {
  font-weight: bold;
  color: #000;
}

/* Loader styles */
.loader-bar {
  margin: 10px 0;
  display: block;
  /* Ensure it takes full width when shown */
  position: relative;
  /* Needed for positioning the loader inside */
  height: 4.8px;
  /* Match loader height */
  background: #eee;
  /* Light background */
  border-radius: 3px;
  overflow: hidden;
  /* Hide overflow animation */
}

.loader {
  width: 100%;
  /* Container width */
  height: 4.8px;
  display: inline-block;
  /* Or block */
  position: absolute;
  /* Position inside loader-bar */
  top: 0;
  left: 0;
  background: #ccc;
  /* Fallback background */
  border-radius: 3px;
  overflow: hidden;
  /* Hide internal animation overflow */
}

.loader::after {
  content: "";
  width: 96px;
  /* Width of the moving bar */
  height: 4.8px;
  background: #c30909;
  /* Loader color */
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: hitZak 0.6s ease-in-out infinite alternate;
}

@keyframes hitZak {
  0% {
    left: 0;
    transform: translateX(-1%);
  }

  100% {
    left: 100%;
    transform: translateX(-99%);
  }
}

/* Button Styling */
.premium-button {
  display: block;
  /* Changed to block to take full width */
  width: 100%;
  background: #ff202b;
  color: #fff;
  padding: 12px 25px;
  font-size: 1.1em;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  margin-top: 20px;
  /* Added margin top */
}

.premium-button:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.3);
}

.premium-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Trust Text Styling */
.trust-text {
  text-align: center;
  margin-top: 16px;
  font-size: 0.7em;
  color: #777;
  padding-bottom: 8px;
}

.trust-icon {
  margin-right: 5px;
  color: #2ecc71;
}

/* max width 768 px */
@media (max-width: 768px) {
  .order-section {
padding: 77px 5px 29px;
  }
}

/* Optional: Responsive adjustments */
@media (max-width: 600px) {
  .main-heading {
    font-size: 25px;
  }

  .sub-heading {
    font-size: 1em;
  }

  .order-form-container {
    padding: 20px;
  }

  .premium-input {
    padding: 10px 15px 10px 35px;
    /* Adjusted padding */
  }

  .input-icon {
    left: 10px;
    font-size: 1em;
  }

  ul#suggestions {
    /* Adjust suggestions list width on smaller screens */
    /* Total width - left/right padding of form-container (20+20) */
    width: calc(100% - 40px);
    left: 20px;
    /* Align with left padding of form-container */
  }

  .premium-button {
    font-size: 1em;
  }
}

/* END order section style */







/* START HOW IT WORKS STYLE */
/* seperator style start */

.decorative-separator {
  display: flex;
  /* Elements ko ek row mein rakhein */
  align-items: center;
  /* Elements ko vertically center karein */
  justify-content: center;
  /* Pure group ko horizontally center karein */
  width: 90%;
  /* Separator ki width */
  max-width: 700px;
  /* Maximum width */
  margin: auto;
  /* Center horizontally if width is less than 100% */
  position: relative;
  /* Pseudo-element line ke liye */
  height: 15px;
  /* Container ko height de rahe hain */
  padding: 15px 10px;
  /* Sides se thoda padding */
  margin-bottom: 10px;
}

/* Main horizontal line banane ke liye pseudo-element ka use */
.decorative-separator::before {
  content: "";
  position: absolute;
  /* Container ke relative position karein */
  top: 50%;
  /* Top se 50% neeche */
  left: 0;
  right: 0;
  height: 1px;
  /* Line ki motai */
  background-color: black;
  /* Line ka color */
  z-index: 0;
  /* Doosre elements ke peeche rakhein */
  transform: translateY(-50%);
  /* Line ko exactly vertically center karein */
}

/* Sabhi andar ke span elements ke liye common style */
.decorative-separator span {
  display: inline-block;
  /* Elements ko inline block banaen */
  position: relative;
  /* Z-index enable karne ke liye */
  z-index: 1;
  /* Line ke upar dikhaen */
  /* vertical-align: middle; */
  /* Flexbox align-items se handle ho raha hai */
  flex-shrink: 0;
  /* Container chota hone par elements shrink na ho */
}

/* Central diamond ki styling */
.center-diamond {
  width: 10px;
  /* Square ki side length */
  height: 10px;
  background-color: black;
  /* Diamond ka color */
  transform: rotate(45deg);
  /* Diamond shape */
  margin: 0 8px;
  /* Around the diamond space */
}

/* Dots ki styling */
.dot {
  width: 4px;
  /* Dot ka size */
  height: 4px;
  background-color: black;
  /* Dot ka color */
  border-radius: 50%;
  /* Circle shape */
  margin: 0 3px;
  /* Dots ke beech aur aas paas space */
}

/* End shapes ki styling (Circle part) */
.end-shape {
  width: 6px;
  /* Circle part ka size */
  height: 6px;
  background-color: black;
  /* Circle part ka color */
  border-radius: 50%;
  /* Circle shape */
  position: relative;
  /* Pseudo-element arrow ke liye */
}

/* Left arrow point ke liye pseudo-element */
.end-shape.left::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  /* Circle ke bilkul left mein position karein */
  transform: translateY(-50%);
  /* Vertically center karein */
  width: 0;
  height: 0;
  /* Border trick se triangle bana rahe hain */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 6px solid black;
  /* Left pointing triangle */
  margin-right: -2px;
  /* Circle se connect karne ke liye adjustment */
}

/* Right arrow point ke liye pseudo-element */
.end-shape.right::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  /* Circle ke bilkul right mein position karein */
  transform: translateY(-50%);
  /* Vertically center karein */
  width: 0;
  height: 0;
  /* Border trick se triangle bana rahe hain */
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid black;
  /* Right pointing triangle */
  margin-left: -2px;
  /* Circle se connect karne ke liye adjustment */
}

/* Elements ke beech ki spacing adjust karna */
/* End shapes aur dots ke beech space */
.end-shape.left {
  margin-right: 8px;
}

.end-shape.right {
  margin-left: 8px;
}

/* Dots aur center diamond ke beech space */
/* Teesra dot (center diamond ke just pehle) */
.dot:nth-of-type(3) {
  margin-right: 8px;
}

/* Chautha dot (center diamond ke just baad) */
.dot:nth-of-type(4) {
  margin-left: 8px;
}
/* end seperator style */

/* CSS Styling for the How it Works Section (with colors, size adjustments, and animation states) */

/* Define CSS Variables for Colors */
:root {
  --section-bg-color: #a2a2a2; /* White background based on screenshot */
  --primary-color: #6f42c1; /* A vibrant purple - can be adjusted */
  --text-color-dark: #343a40; /* Dark charcoal for headings */
  --text-color-light: #6c757d; /* Muted gray for descriptions */
  /* Adjusted shadow to match the softer look in the screenshot */
  --card-shadow: 0 4px 15px rgb(255 0 0 / 10%);
  /* Slightly smaller hover shadow */
  --card-hover-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Basic heading styles specific to this section */
/* यह रूल केवल .how-it-works-section के अंदर के h2 और h3 पर लागू होगा */
.how-it-works-section h2,
.how-it-works-section h3 {
  font-family: sans-serif;
  color: var(--text-color-dark);
  font-weight: 700;
}

.how-it-works-section {
  padding: 50px 20px; /* Base padding */
  background-color: var(--section-bg-color);
  text-align: center;
  overflow: hidden;
  overflow-x: hidden; /* Horizontal scroll disabled */
  box-sizing: border-box;
}

.how-container {
  max-width: 1100px; /* Keep max-width */
  margin: 0 auto;
  padding: 0 15px; /* Base horizontal padding */
}

/* Specific style for the main section heading */
.how-it-works-section h2 {
  font-size: 3 20px; /* Base heading size */
  margin-bottom: 10px;
  text-align: center;
}

.steps-container {
  display: grid;
  /* Default: 3 columns for large screens */
  grid-template-columns: repeat(3, 1fr);
  gap: 25px; /* Default gap */
  padding-top: 0;
}

.step-card {
  background-color: #ffffff;
  padding: 30px; /* Base padding */
  border-radius: 15px;
  box-shadow: var(--card-shadow);
  display: flex;
  /* Default: Icon above text for large screens */
  flex-direction: column;
  align-items: center; /* Center items vertically in column layout */
  text-align: center; /* Center text in column layout */
  border: none;
  box-sizing: border-box;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out,
    box-shadow 0.3s ease;
}

/* Initial state for animation */
.step-card:not(.is-in-view) {
  opacity: 0;
  transform: translateY(30px);
}

/* Final state for animation */
.step-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Hover effect */
.step-card.is-in-view:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-hover-shadow);
}

.icon-placeholder {
  width: 80px; /* Base icon container size */
  height: 80px; /* Base icon container size */
  margin-bottom: 20px; /* Base margin below icon (for column layout) */
  margin-right: 0; /* Base margin right icon (for column layout) */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* Prevent icon from shrinking */
}

/* Style for the image inside icon-placeholder */
.icon-placeholder img {
  display: block; /* Remove extra space below image */
  max-width: 100%; /* Ensure image fits within container */
  max-height: 100%; /* Ensure image fits within container */
  object-fit: contain; /* Shrink image while maintaining aspect ratio */
}

/* Style for the title inside the card */
.step-title {
  font-size: 20px; /* Base title size */
  color: var(--text-color-dark);
  margin-bottom: 10px;
  font-weight: 700;
  /* text-align inherited from .step-card */
}

/* Style for the description inside the card */
.step-description {
  font-size: 15px; /* Base description size */
  color: var(--text-color-light);
  line-height: 1.5;
  /* text-align inherited from .step-card */
}

/* --- Responsive Adjustments (Switch to 1 column overall, row layout inside card) --- */

/* Tablet and Mobile Screens (up to 767px) */
@media (max-width: 767px) {
  .how-it-works-section {
    padding: 30px 15px; /* Adjust section padding */
  }
  .how-container {
    padding: 0 10px; /* Adjust container padding */
  }
  .how-it-works-section h2 {
    font-size: 18px; /* Adjust heading size */
    margin-bottom: 30px;
  }
  .steps-container {
    /* 1 column for smaller screens */
    grid-template-columns: 1fr;
    gap: 20px; /* Adjust gap between stacked cards */
  }

  .step-card {
    padding: 20px;
    /* IMPORTANT: Change flex direction to horizontal for inner content */
    flex-direction: row;
    align-items: center; /* Align items vertically in row layout */
    text-align: left; /* Align text to the left in row layout */
  }

  .icon-placeholder {
    width: 60px; /* Adjust icon container size */
    height: 60px;
    margin-bottom: 0; /* Remove bottom margin */
    margin-right: 15px; /* Add right margin to separate icon from text */
    /* flex-shrink: 0; -- Already set in base style */
  }

  /* Create a container for text to manage its spacing and layout */
  .step-text-content {
    flex-grow: 1; /* Allow text content to take up available space */
  }

  .step-title {
    font-size: 18px;
    margin-bottom: 6px;
    /* text-align inherited from .step-card (left) */
  }

  .step-description {
    font-size: 14px;
    line-height: 1.4;
    /* text-align inherited from .step-card (left) */
  }
}

/* Further adjustments for very small mobile screens (optional, if needed) */
@media (max-width: 480px) {
  .how-it-works-section {
    padding: 25px 10px;
  }
  .how-it-works-section h2 {
    font-size: 20px;
    margin-bottom: 25px;
  }
  .steps-container {
    gap: 15px;
  }
  .step-card {
    padding: 15px;
    flex-direction: row; /* Keep horizontal flex */
    align-items: center; /* Keep alignment */
    text-align: left; /* Keep text alignment */
  }
  .icon-placeholder {
    width: 50px; /* Further adjust icon container size */
    height: 50px;
    margin-right: 10px; /* Adjust margin */
  }
  /* .step-text-content styles applied from 767px breakpoint */
  .step-title {
    font-size: 16px;
    margin-bottom: 5px; /* Adjust margin */
  }
  .step-description {
    font-size: 13px;
    line-height: 1.4;
  }
}

/* Keep the animation styles */
.step-card:not(.is-in-view) {
  opacity: 0;
  transform: translateY(30px);
}

.step-card.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.step-card.is-in-view:hover {
  transform: translateY(-8px);
  box-shadow: var(--card-hover-shadow);
}

/*HOW IT WORKS STYLE END  */

/* Start your order with a flavor burst on Train Journey style start */
/* CSS Starts Here */
.slider-container {
  position: relative;
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  margin: 20px auto;
  overflow: hidden; /* Hide scrollbar but allow scrolling */
  padding: 0 25px; /* Add padding to make space for arrows visually */
}

.slider {
  display: flex;
  overflow-x: scroll; /* Enable horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling */
  padding-bottom: 15px; /* Space for scrollbar */
  -webkit-overflow-scrolling: touch; /* Improve scrolling on touch devices */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
  padding-top: 15px;
}

/* Hide the default scrollbar */
.slider::-webkit-scrollbar {
  display: none;
}

.slider-item {
  flex: 0 0 auto; /* Prevent items from shrinking */
  margin-right: 20px; /* Space between items */
  text-align: center;
  /* Default: show 4 items on larger screens. Adjusted by media queries */
  width: calc(100% / 4 - 20px);
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.slider-item img {
  width: 150px; /* Adjust size as needed */
  height: 150px; /* Adjust size as needed */
  border-radius: 50%; /* Make image circular */
  object-fit: cover; /* Crop image to fit circle */
  border: 1px solid #ddd; /* Optional border */
}

.brand-name {
  margin-top: 10px;
  font-size: 17px;
  font-weight: bold;
}

.delivery-time {
  font-size: 12px;
  color: #555;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.9); /* Slightly more opaque */
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 10;
  font-size: 20px;
  color: #333;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.left-arrow {
  left: 0px; /* Position closer to the edge */
  display: none; /* Initially hidden */
}

.right-arrow {
  right: 0px; /* Position closer to the edge */
}

.arrow:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* Responsive Adjustments */

/* For medium screens (e.g., tablets) */
@media (max-width: 768px) {
  .slider-item {
    width: calc(100% / 3 - 20px); /* Show 3 items */
  }
}

/* For small screens (e.g., mobile phones) */
@media (max-width: 480px) {
  .slider-item {
    width: calc(100% / 2 - 20px); /* Show 2 items */
  }
  .arrow {
    width: 30px; /* Smaller arrows */
    height: 30px;
    font-size: 16px;
  }
  .left-arrow {
    left: 5px;
  }
  .right-arrow {
    right: 5px;
  }
  .slider-container {
    padding: 0 15px; /* Reduce padding */
  }
}

/* For very small screens */
@media (max-width: 320px) {
  .slider-item {
    width: calc(100% / 1 - 20px); /* Show 1 item */
  }
}
/* CSS Ends Here */

/* phone frame style start */

/* Add some extra height if needed for scrolling */
/* body { min-height: 150vh; } */
.container-phoneframe {
  font-family: sans-serif;
  /* Or use your chosen font */
  margin: 0;
  padding: 20px;
  background: linear-gradient(to right, #fcd7d9, #ffffff);
  /* same as section-1 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.download-card-container {
  width: 90%;
  max-width: 1000px;
  /* Adjust max width as needed */
  margin: 50px auto;
  /* Added margin for spacing */
  background: linear-gradient(135deg, #ffffff, #ffe6f0);
  border-radius: 15px;
  /* Rounded corners for the card */
  padding: 15px;
  padding-left: 80px;
  box-shadow: 0 10px 30px rgb(239 137 137 / 29%);
  /* Subtle shadow */
  position: relative;
  /* Needed for the pseudo-element border/effect */
  overflow: hidden;
  /* Ensures content stays within rounded corners */
}

/* Adding a subtle border/glow effect using a pseudo-element */
.download-card-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 15px;
  /* Adjust the color and spread for the desired effect */
  box-shadow: inset 0 0 0 2px rgba(247, 166, 166, 0.5);
  /* Light pink inner shadow */
  pointer-events: none;
  /* Allows clicking through the pseudo-element */
}

.download-card {
  display: flex;
  flex-wrap: wrap;
  /* Allows wrapping on smaller screens */
  gap: 10px;
  /* Space between left and right sections */
  align-items: center;
}

.left-content {
  flex: 1;
  /* Take up available space */
  min-width: 300px;
  /* Minimum width before wrapping */
  padding-left: 8px;
}

.left-content h1 {
  font-size: 2.5em;
  /* Adjust font size */
  margin-bottom: 10px;
  color: #333;
}

.left-content p {
  font-size: 1.1em;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0;
}

.right-content {
  flex: 1;
  /* Take up available space */
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 250px;
  /* Minimum width before wrapping */
}

.phone-mockup {
  position: relative;
  /* Ensure positioning context for absolute children */
  width: 250px;
  /* Adjust as needed */
  height: auto;
  /* Maintain aspect ratio */
  text-align: center;
  /* Center the image and any block content */
}

.phone-mockup img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
}

/* Removed .qr-overlay-text and .phone-on-screen-text styles */

/* --- Styles for the new text content inside the phone --- */
.phone-text-content {
  position: absolute;
  /* Position relative to .phone-mockup */
  top: 15%;
  /* Adjust vertical position */
  left: 50%;
  /* Center horizontally */
  transform: translateX(-50%);
  /* Adjust for its own width to truly center */
  width: 80%;
  /* Limit text width to fit phone screen */
  text-align: center;
  /* Center the text lines */
  color: red;
  /* Set text color to red */
  z-index: 2;
  /* Ensure text is above the image */
  /* Add pointer-events: none; if you need clicks to go through to the image */
}

.phone-text-content p {
  margin: 0 0 10px 0;
  /* Add bottom margin between text blocks */
  line-height: 1.2;
  /* Adjust line height */
}

.phone-text-content p:last-child {
  margin-bottom: 0;
  /* No bottom margin for the last paragraph */
}

.phone-text-content .main-heading {
  font-size: 1.1em;
  /* Adjust font size */
  font-weight: 700;
  /* Bold */
  /* You might need to adjust margin-bottom here too */
}

.phone-text-content .sub-text {
  font-size: 0.9em;
  /* Adjust font size */
  font-weight: 400;
  /* Regular */
  /* You might need to adjust margin-bottom here too */
}

.phone-text-content .offer-text {
  font-size: 1.3em;
  /* Adjust font size */
  font-weight: 400;
  /* Regular weight for "get upto" */
  /* You might need to adjust margin-top here for space from sub-text */
  margin-top: 20px;
  /* Add more space above the offer text */
}

.phone-text-content .offer-text strong {
  font-weight: 700;
  /* Bold for "20% OFF" */
}

/* --- Styles for the new overlay image --- */
.overlay-image {
  position: absolute;
  /* Position relative to .phone-mockup */
  top: 134%;
  /* Adjust vertical position */
  left: 50%;
  /* Center horizontally */
  transform: translate(-50%, -50%);
  /* Center both horizontally and vertically */
  width: 80%;
  /* Adjust width relative to phone mockup */
  height: auto;
  /* Maintain aspect ratio */
  z-index: 2;
  /* Ensure image is above the phone frame (z-index 1) but below the text (z-index 3) */
  /* You might need to adjust width/height and top/left/transform based on the actual image and desired placement */
}

#party_icon {
  height: auto;
  width: 10px;
}

/* --- Animation Styles --- */

/* Initial state: slightly moved down and hidden */
.js-scroll {
  opacity: 0;
  transform: translateY(50px);
  /* Start 50px below its final position */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  /* Animation duration and easing */
  will-change: opacity, transform;
  /* Optimize for animation */
}

/* Final state: visible and in its original position */
.js-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* Move to its original position */
}

/* --- Responsive adjustments --- */
@media (max-width: 768px) {
  .download-card {
    flex-direction: column;
    /* Stack items on smaller screens */
    text-align: center;
  }

  .download-card-container {
    padding-left: 0;
  }

  .left-content,
  .right-content {
    min-width: unset;
    /* Remove minimum width */
    width: 100%;
  }

  .phone-text-content {
    top: 15%;
    /* Adjust vertical position for smaller screens */
    width: 90%;
    /* Allow text to take more width */
  }

  .phone-text-content .main-heading {
    font-size: 1.1em;
    /* Adjust font size */
  }

  .phone-text-content .sub-text {
    font-size: 0.8em;
    /* Adjust font size */
  }

  .phone-text-content .offer-text {
    font-size: 1.1em;
    /* Adjust font size */
    margin-top: 15px;
    /* Adjust margin */
  }

  .left-content h1 {
    font-size: 2em;
  }

  .overlay-image {
    top: 145%;
  }

  .left-content p {
    font-size: 1em;
  }
}

/* image card auto scroll slider css start  */
/* Style for the section if needed, though often not necessary for basic grouping */

.slider-container {
  position: relative;
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 0 40px;
  /* Add padding to make space for buttons */
  box-sizing: border-box;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease;
  /* Adjust margin to handle spacing between cards */
  margin: 0 -10px;
  height: 225px;
}

.slide {
  flex-shrink: 0;
  /* Prevent slides from shrinking */
  display: flex;
  justify-content: center;
  /* Center the card within the slide */
  align-items: center;
  /* Center the card vertically */
  /* Add padding to create space between cards */
  padding: 0 10px;
  box-sizing: border-box;
}

/* Default: Show 3 items per view on large screens */
.slide {
  width: calc(100% / 3);
}

.card {
  width: 100%;
  /* Card takes full width of its parent (.slide) */
  max-width: 320px;
  /* Maximum width for the card */
  height: 180px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-text-container {
  position: relative;
  bottom: 198px;
  font-size: 32px;
  left: 17px;
  color: white;
  font-family: "Inter", sans-serif;
  /* font-weight: 400; */
  font-style: normal;
  stroke: 1px solid black;
}

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffffcc;
  border: none;
  font-size: 26px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-btn:hover {
  background: #ffffff;
}

#prevBtn {
  left: 5px;
}

#nextBtn {
  right: 5px;
  left: auto;
}

.dots {
  text-align: center;
  margin-top: 15px;
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  background: #bbb;
  border-radius: 5px;
  cursor: pointer;
  transition: width 0.3s ease, background-color 0.3s ease, margin 0.3s ease;
}

.dot.active {
  width: 25px;
  background: #555;
  border-radius: 5px;
  margin: 0 6px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .slider-container {
    padding: 0 30px;
    /* Adjust padding for buttons */
  }

  /* Show 2 items per view on medium screens */
  .slide {
    width: calc(100% / 2);
  }

  .slider-btn {
    width: 35px;
    height: 35px;
    font-size: 22px;
    padding: 8px;
  }
}

@media (max-width: 480px) {
  .slider-container {
    padding: 0 20px;
    /* Adjust padding for buttons */
  }

  /* Show 1 item per view on small screens */
  .slide {
    width: 100%;
  }

  .slider-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
    padding: 5px;
  }
}

/* image card auto scroll slider css END */

/* Styles for the 'Why Choose Us' section for Railfoodcourt */
.railfoodcourt-why-choose-us {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin-bottom: 40px;
  padding: 25px 15px; /* Default padding */
  border-radius: 10px;
  max-width: 1110px; /* Ek max-width set kar sakte hain taki bahut badi screens par zyada na faile */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; /* padding border ke andar rahe */
  background-color: #ffff; /* Thoda alag background color */
}

.railfoodcourt-why-choose-us h2 {
    text-align: center;
    margin-bottom: 22px;
    font-style: oblique;
    color: #1e2023;
}

.railfoodcourt-why-choose-us .features-grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Always two columns */
  gap: 20px; /* Items ke beech mein gap */
}

.railfoodcourt-why-choose-us .feature-item {
  background-color: #ffffff;
  background: linear-gradient(17 deg, 2px solid #f10e0e, white);
  border-radius: 12px; /* Screenshot jaisa thoda zyada rounded corners */
  padding: 20px; /* Default padding */
  display: flex;
  align-items: flex-start; /* Ya 'center' agar icon ko vertically center karna hai content ke sath */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Thoda refined shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #4b4a4a;
}

.railfoodcourt-why-choose-us .feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
}

.railfoodcourt-why-choose-us .feature-icon {
  font-size: 20px; /* Default Icon ka size */
  color: #e74c3c; /* Icon ka color */
  margin-right: 15px; /* Default margin */
  padding-top: 5px; /* Content ke sath behtar alignment ke liye */
  flex-shrink: 0; /* Icon ko shrink hone se rokega agar content zyada ho */
}

.railfoodcourt-why-choose-us .feature-content p {
  margin: 0 0 8px 0;
  line-height: 1.5; /* Line height thoda kam kiya */
  color: rgb(51, 51, 51);
;
  font-size: 14px; /* Default Content font size */
}

.railfoodcourt-why-choose-us .feature-content p:last-child {
  margin-bottom: 0;
}

.railfoodcourt-why-choose-us .feature-content p strong {
  color: #34495e;
  font-size: 16px; /* Default Title font size */
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.railfoodcourt-why-choose-us .feature-content p em {
  font-size: 12px; /* Default T&C font size */
  color: #7f8c8d;
}

/* --- Responsive Adjustments for Smaller Screens (Always 2 Columns) --- */

/* Tablet and Smaller Screens (e.g., up to 767px) */
@media (max-width: 767px) {
  .railfoodcourt-why-choose-us {
    padding: 20px 10px; /* Padding adjust kiya */
    margin-bottom: 30px;
  }
  .railfoodcourt-why-choose-us h2 {
    font-size: 22px; /* Heading size adjust kiya */
    margin-bottom: 25px;
  }
  .railfoodcourt-why-choose-us .features-grid-container {
    /* grid-template-columns: 1fr; -- Removed to keep 2 columns */
    gap: 15px; /* Gap adjust kiya */
  }
  .railfoodcourt-why-choose-us .feature-item {
    padding: 15px; /* Padding adjust kiya */
  }
  .railfoodcourt-why-choose-us .feature-icon {
    font-size: 20px; /* Icon size adjust kiya */
    margin-right: 10px; /* Margin adjust kiya */
  }
  .railfoodcourt-why-choose-us .feature-content p {
    font-size: 12px; /* Content font size adjust kiya */
    margin-bottom: 5px;
    line-height: 1.4; /* Line height adjust kiya */
  }
  .railfoodcourt-why-choose-us .feature-content p strong {
    font-size: 14px; /* Title font size adjust kiya */
    margin-bottom: 4px;
  }
  .railfoodcourt-why-choose-us .feature-content p em {
    font-size: 10px; /* T&C font size adjust kiya */
  }
}

/* Smaller Mobile Screens (e.g., up to 480px) */
@media (max-width: 480px) {
  .railfoodcourt-why-choose-us {
    padding: 15px 5px; /* Padding aur adjust kiya */
    margin-bottom: 25px;
  }
  .railfoodcourt-why-choose-us h2 {
    font-size: 18px; /* Heading size aur adjust kiya */
    margin-bottom: 20px;
  }
  .railfoodcourt-why-choose-us .features-grid-container {
    gap: 10px; /* Gap aur kam kiya */
  }
  .railfoodcourt-why-choose-us .feature-item {
    padding: 10px; /* Padding aur adjust kiya */
    /* Flex direction ko row hi rakhenge jaisa screenshot mein dikh raha hai */
  }
  .railfoodcourt-why-choose-us .feature-icon {
    font-size: 18px; /* Icon size aur adjust kiya */
    margin-right: 8px; /* Margin adjust kiya */
  }
  .railfoodcourt-why-choose-us .feature-content p {
    font-size: 10px; /* Content font size ko kafi kam kiya */
    margin-bottom: 4px;
    line-height: 1.3; /* Line height aur kam kiya */
  }
  .railfoodcourt-why-choose-us .feature-content p strong {
    font-size: 12px; /* Title font size aur adjust kiya */
    margin-bottom: 3px;
  }
  .railfoodcourt-why-choose-us .feature-content p em {
    font-size: 9px; /* T&C font size aur adjust kiya */
  }
}







/* // how instruction paragraph css start*/
/* New container class */

#how-instruction{
  width: 100%;
        background: #f9f9f9;
}
.how-instruction-container {
  /* Updated class name for the section */
  max-width: 1200px;
  margin: auto;
  background: #f9f9f9;
  padding: 30px;
  border-radius: 12px;
}

.how-instruction-sec {
  /* Add your styles for the main container here */
  /* Based on your previous body styles, you might want: */
  /* font-family: sans-serif; */
  /* background-color: #ffffff; */
  /* color: var(--text-color-dark); */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: margin-left 0.3s ease;
  font-family: sans-serif;
  background-color: #ffffff;
  color: #333;
  /* Placeholder, use your var(--text-color-dark); */

  font-family: Arial, Helvetica, sans-serif; /* Default font for this section */
}

.web-how-heading-main {
  /* text-align: center; */
  font-size: 20px;
  color: #343a40;
  margin-bottom: 20px;

}

/* --- Styling for the new Radio Button Group --- */
.web-how-radio-group {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  margin-top: 15px;
}

/* Hide the actual radio input element */
.web-how-radio-group input[type="radio"] {
  display: none;
}

/* Style the Label (this is what the user sees and clicks) */
.web-how-radio-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
    font-size: 14px;
      font-weight: bold;
  color: #333;
  user-select: none;
  transition: color 0.3s ease;
}

/* Style the custom radio indicator (the circle) using a pseudo-element on the label */
.web-how-radio-group label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 5px solid #333;
  /* Border for the unselected state */
  border-radius: 50%;
  margin-right: 8px;
  background-color: white;
  /* White fill for the unselected state */
  transition: border-color 0.3s ease, background-color 0.3s ease;
  box-sizing: border-box;
}

/* Style the label and custom indicator when the associated radio input IS CHECKED */
.web-how-radio-group input[type="radio"]:checked + label {
  color: #c0392b;
  /* Set text color for the checked label */
}

.web-how-radio-group input[type="radio"]:checked + label::before {
  border-color: #fe2008;
  /* Red border for selected state */
  background-color: #fff;
  /* White fill for selected state - creating a red border effect */
}

/* Optional: Hover effect on the label (changes border color slightly) */
.web-how-radio-group label:hover::before {
  border-color: #e74c3c;
  /* Highlight border on hover */
}

/* --- End Styling for Radio Button Group --- */

/* --- Existing Styles for Instruction Boxes --- */
.web-how-instruction-box {
  display: none;
  /* Hidden by default */
  animation: fadeIn 0.4s ease-in-out forwards;
  /* Apply animation */
}

.web-how-instruction-box.web-how-active {
  display: block;
  /* Shown when active class is added by JS */
}

.web-how-sub-heading {
  font-size: 17px;
  color: #343a40;
  margin-top: 20px;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  padding-left: 0;
      font-style: italic;
}

.web-how-ordered-list {
  margin-left: 0;
  padding-left: 40px;
  color: #444;
}

.web-how-list-item {
  margin-bottom: 15px;
  line-height: 1.6;
}

.web-how-list-item strong {
  color: #343a40;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    opacity: 1;
  }
}

.web-how-note {
  margin-top: 20px;
  font-weight: 300;
  color: #777878;
  padding: 15px;
  background-color: #ffffff;
  border-left: 4px solid #111111;
  border-radius: 4px;
}

.how-instruction-sec > .web-how-intro-text {
  /* Updated selector */
  font-size: 1.1em;
  color: #343a40;
  margin-bottom: 25px;
  text-align: center;
}

.how-instruction-sec > .web-how-sub-text {
  /* Updated selector */
  text-align: center;
  margin-bottom: 25px;
  font-style: italic;
  color: rgb(51, 51, 51);
;
}

.web-how-paragraph {
  /* line-height: 2px; */
  font-size: 15px;
  color: rgb(51, 51, 51);
;
}

/* footer css start */
/* CSS Variables for easy color changes - Adjusted for dark theme */
:root {
  --footer-bg-color: #253031; /* Black background */
  --footer-text-color: #ffffff; /* White text */
  --footer-heading-color: #ffffff; /* White headings */
  --link-color: #cccccc; /* Light grey links */
  --link-hover-color: #ffffff; /* White on hover */
  --border-color: #333333; /* Dark grey border for hr */
  --social-icon-bg: transparent; /* Social icons have transparent background */
  --social-icon-color: #ffffff; /* White icon color */
  --app-button-bg: #ffffff;
  --app-button-text: #000000;
}

/* Global Reset - Apply to all elements */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Footer Section Styles */
#web-ft-sec {
  width: 100%;
  position: relative;
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 60px 0 30px;
  font-size: 14px;
  line-height: 1.6;
  font-family: "Roboto", sans-serif;
}

.web-ft-row {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: flex; /* Default to flex for large screens */
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.web-ft-col {
  padding: 0 10px;
  margin-bottom: 20px;
}

/* Flex-basis for columns (Large Screen - Default) */
.web-ft-col:nth-child(1) {
  flex-basis: 10%;
  min-width: 100px;
}

.web-ft-col:nth-child(2),
.web-ft-col:nth-child(3) {
  flex-basis: 18%;
  min-width: 150px;
}

.web-ft-col:nth-child(4) {
  flex-basis: 20%;
  min-width: 180px;
}

.web-ft-col:nth-child(5) {
  flex-basis: 25%;
  min-width: 200px;
}

.web-ft-logo {
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-bottom: 20px;
  display: block;
  margin-right: auto;
  border-radius: 5px;
}

/* Headings within Footer Columns are already specific enough */
.web-ft-col h3 {
  width: fit-content;
  margin-bottom: 15px;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  color: var(--footer-heading-color);
  position: relative;
  text-align: left;
}

/* Remove underline for headings if not needed as per screenshot */
.web-ft-col h3 .web-ft-underline {
  display: none;
}

/* *** SPECIFIC STYLES FOR UL, LI, A INSIDE FOOTER *** */
#web-ft-sec ul {
  /* Style for UL only within the footer section */
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

#web-ft-sec ul li {
  /* Style for LI only within the footer section */
  margin-bottom: 8px;
}

#web-ft-sec ul li a {
  /* Style for A only within LI within the footer section */
  text-decoration: none;
  color: var(--link-color);
  transition: color 0.2s ease;
  font-size: 14px;
  display: inline-block;
}

#web-ft-sec ul li a:hover {
  /* Style for A hover only within LI within the footer section */
  color: var(--link-hover-color);
}
/* *** END SPECIFIC UL/LI/A STYLES *** */

/* Styling for the stacked sections in the 4th column (Restaurants/Delivery) */
.web-ft-col:nth-child(4) h3:first-of-type {
  margin-top: 0;
}

.web-ft-col:nth-child(4) h3:nth-of-type(2) {
  margin-top: 20px;
  margin-bottom: 15px;
}

.web-ft-col:nth-child(4) #web-ft-sec ul:nth-of-type(2) {
  /* Made ul specific */
  margin-top: 0;
}

/* Social Icons Styling */
.web-ft-social-icons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.web-ft-social-icons a {
  color: var(--social-icon-color);
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--link-color);
  border-radius: 50%;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.web-ft-social-icons a:hover {
  border-color: var(--link-hover-color);
  color: var(--link-hover-color);
  transform: none;
}

/* App Download Buttons */
.web-ft-app-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.web-ft-app-buttons a {
  display: block;
  width: 130px;
  max-width: 100%;
  height: auto;
  background-color: var(--app-button-bg);
  transition: opacity 0.2s ease;
  border-radius: 10px;
}

.web-ft-app-buttons a img {
  display: block;
  width: 100%;
  height: auto;
}

.web-ft-app-buttons a:hover {
  opacity: 0.9;
}

/* *** SPECIFIC STYLE FOR HR INSIDE FOOTER *** */
#web-ft-sec hr {
  /* Style for HR only within the footer section */
  width: 90%;
  max-width: 1180px;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  margin: 40px auto 20px;
}
/* *** END SPECIFIC HR STYLE *** */

.web-ft-copyright {
  text-align: left;
  font-size: 13px;
  color: var(--link-color);
  line-height: 1.5;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.web-ft-copyright i {
  margin: 0 5px;
}

/* Underline animation styles (kept but hidden by default) */
.web-ft-underline {
  width: 100%;
  height: 2px;
  background: var(--border-color);
  border-radius: 3px;
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  overflow: hidden;
}

.web-ft-underline span {
  width: 15px;
  height: 100%;
  background: var(--link-color);
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: -20px;
  animation: moving 2s linear infinite;
}

@keyframes moving {
  0% {
    left: -20px;
  }
  100% {
    left: 100%;
  }
}

/* Media Query for Smaller Screens (Mobile Layout) */
@media (max-width: 768px) {
  #web-ft-sec {
    padding: 30px 0 20px;
  }

  .web-ft-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    gap: 20px 10px;
    width: 95%;
    max-width: none;
    margin: auto;
    padding: 0;
  }

  .web-ft-col {
    flex-basis: auto !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    margin-bottom: 0;
    padding: 0 5px;
    text-align: left;
  }

  /* Position Grid Items */
  .web-ft-col:nth-child(1) {
    grid-column: 1 / 3; /* Span across both columns */
    grid-row: 1;
    padding: 0 10px;
  }

  .web-ft-col:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .web-ft-col:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .web-ft-col:nth-child(4) {
    grid-column: 1;
    grid-row: 3;
    margin-top: 10px;
  }

  .web-ft-col:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
    margin-top: 10px;
  }

  .web-ft-logo {
    margin: 0;
    margin-bottom: 20px;
    max-width: 100px;
  }

  .web-ft-col h3 {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
    width: 100%;
  }

  /* Adjust spacing for stacked sections in 4th column on mobile grid */
  .web-ft-col:nth-child(4) h3:nth-of-type(2) {
    margin-top: 15px;
    margin-bottom: 10px;
  }

  /* *** SPECIFIC STYLES FOR UL, LI, A INSIDE FOOTER (MOBILE) *** */
  #web-ft-sec ul {
    /* Style for UL only within footer section (mobile) */
    text-align: left; /* Keep left aligned */
  }

  #web-ft-sec ul li {
    /* Style for LI only within footer section (mobile) */
    margin-bottom: 6px;
  }

  #web-ft-sec ul li a {
    /* Style for A only within LI within footer section (mobile) */
    display: inline-block; /* Keep as inline-block */
  }
  /* *** END SPECIFIC UL/LI/A STYLES (MOBILE) *** */

  .web-ft-social-icons {
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 15px;
  }

  .web-ft-social-icons a {
    width: 25px;
    height: 25px;
    font-size: 16px;
  }

  .web-ft-app-buttons {
    align-items: flex-start;
    gap: 8px;
  }

  .web-ft-app-buttons a {
    width: 110px;
  }

  #web-ft-sec hr {
    /* Style for HR only within footer section (mobile) */
    width: 95%;
    max-width: none;
    margin: 30px auto 15px;
  }

  .web-ft-copyright {
    text-align: left;
    width: 95%;
    max-width: none;
    margin: 0 auto;
    padding: 0 10px;
    font-size: 12px;
  }
}

/* footer css end  */

/* ------------------------------------ */
/* STYLES FOR #railfood-faq SECTION   */
/* ------------------------------------ */   
 
#FAQSection{
  width: 100%;
  background: #f9f9f9;
padding-bottom: 2px;
}
.rfc-faq-section {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
      font-family: Arial, sans-serif;
      line-height: 1.6;
      border-radius: 8px;
      overflow: hidden;
      transition: max-height 0.5s ease;
    }
    .rfc-faq-section h2 {
      text-align: center;
      margin-bottom: 20px;
      font-style: oblique;
    }
    .rfc-question {
      font-weight: 550;
      margin-top: 20px;
    }
    .rfc-answer {
      margin-left: 15px;
      font-size: 15px;
    }
    .rfc-list {
      margin-left: 30px;
    }
     .rfc-toggle-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      background-color:#171717 ;
      color: #fff;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      transition: background-color 0.3s ease;
      box-shadow: rgb(15 15 15 / 32%) 0px 4px 8px;
    }


      .rfc-toggle-button svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }
    .arrow-rotated {
      transform: rotate(180deg);
    }

        .rfc-hidden {
      display: none;
    }

    .answer-span{
      font-style: italic;    font-style: italic;
    color: rgb(140, 40, 248);
    }
/* end style */




/* styling for abount section */





/* group order section styling start */
/* आपके मूल कोड से CSS */
.bus-text {
  font-size: 16px;
}

/* यह स्टाइल अब #busAnimationSection पर लागू होगी */
#busAnimationSection {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  margin: 0 auto; /* नया: सेक्शन को सेंटर करने के लिए */
  font-family: Arial, sans-serif;
  overflow: hidden;
  position: relative; /* यह बादलों के लिए आवश्यक है */

  /* नया: अधिकतम चौड़ाई सेट करें */
  max-width: 1090px;
  width: 100%; /* यह सुनिश्चित करने के लिए कि यह छोटी स्क्रीन पर पूरी चौड़ाई लेता है */

  /* बादलों के लिए आसमान का बैकग्राउंड और रोड बैकग्राउंड दोनों को जोड़ें */
  background: linear-gradient(to bottom, #ffffff 70%, #b0e0e6 100%),
    url("road_background.png");
  background-repeat: repeat-x, repeat-x; /* पहला रिपीट स्काई के लिए, दूसरा रोड के लिए */
  background-size: 100% 100%, auto 100%; /* पहला साइज़ स्काई के लिए, दूसरा रोड के लिए */
  background-position: 0% 0%, 0% 100%; /* पहला पोजीशन स्काई के लिए, दूसरा रोड के लिए */
  animation: moveBackground 10s linear infinite; /* सुनिश्चित करें कि यह एनिमेशन काम करे */

  padding-top: 200px; /* आपके मूल कोड से */
  padding-bottom: 10px; /* आपके मूल कोड से */
}

/* पहियों के लिए स्पिन एनिमेशन */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* बस बॉडी के लिए जंप एनिमेशन */
@keyframes jump {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-8px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}

/* बैकग्राउंड को हॉरिजॉन्टली मूव करने के लिए एनिमेशन */
/* यह एनिमेशन अब Sky Gradient और Road Background दोनों पर लागू होगा */
@keyframes moveBackground {
  from {
    background-position: 0% 0%, 0% 100%; /* स्काई और रोड दोनों को मूव करें */
  }
  to {
    background-position: -100% 0%, -100% 100%; /* नया: % का उपयोग करें ताकि यह कंटेनर की चौड़ाई के सापेक्ष हो */
  }
}

/* बस के पीछे 'हवा' के इफ़ेक्ट के लिए एनिमेशन */
@keyframes motionBlur {
  0% {
    transform: translateX(0) scaleX(0.8);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50px) scaleX(1.2);
    opacity: 0.2;
  }
  100% {
    transform: translateX(-100px) scaleX(0.8);
    opacity: 0;
  }
}

#busAnimationSection .bus-wrapper {
  position: relative;
  width: 350px;
  height: 180px;
  z-index: 5;
}

#busAnimationSection .bus-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 350px;
  height: 150px;
  background-color: #9647cf;
  border-radius: 16px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  z-index: 1;
  animation: jump 1.5s ease-in-out infinite;
}

/* बस के पीछे 'हवा' का इफ़ेक्ट बनाने के लिए pseudo-element */
#busAnimationSection .bus-body::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -9px;
  transform: translateY(-50%);
  width: 250px;
  height: 60px;
  background: linear-gradient(
    to right,
    rgba(227, 129, 254, 0.5),
    rgba(255, 255, 255, 0)
  );
  border-radius: 50%;
  filter: blur(8px);
  z-index: 0;
  animation: motionBlur 1.2s ease-out infinite;
}

#busAnimationSection .wheels-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 33px;
  box-sizing: border-box;
  z-index: 10;
}

#busAnimationSection .wheel-img {
  width: 80px;
  height: 80px;
  animation: spin 0.4s linear infinite;
  display: block;
  border-radius: 50%;
  background-color: #34495e;
  border: 5px solid #2c3e50;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

#busAnimationSection .bus-rear-image {
  position: absolute;
  bottom: 110px;
  left: 11%;
  transform: translateX(-50%);
  width: 78%;
  height: auto;
  z-index: 0;
  animation: jump 1.6s ease-in-out infinite;
}

/* बादलों के लिए नया CSS */
.cloud {
  position: absolute;
  background: #bb7bd6;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  opacity: 0.8;
  animation: moveCloud linear infinite;
  z-index: 0;
  top: 0;
}

.cloud::before,
.cloud::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud::before {
  width: 60%;
  height: 60%;
  top: -30%;
  left: 10%;
}

.cloud::after {
  width: 80%;
  height: 80%;
  top: -20%;
  right: 5%;
}

/* बादलों की गति के लिए कीफ्रेम */
@keyframes moveCloud {
  from {
    /* नया: बादलों को कंटेनर की चौड़ाई के सापेक्ष 100% से शुरू करें */
    transform: translateX(100%);
  }
  to {
    /* नया: बादलों को कंटेनर की चौड़ाई के सापेक्ष -150% तक ले जाएं */
    transform: translateX(-150%);
  }
}