body {
     font-family: 'Poppins', sans-serif;
}
 .hero {
     position: relative;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     color: white;
     background: url('https://cdn.ordernowqr.com/assets-search/images/ordernow-bg.jpg?') no-repeat center center/cover;
     margin-bottom: -150px;
}
 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
    /* Dark overlay */
     z-index: 0;
}
 .hero-content {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
}
 .hero h1 {
     margin-bottom: 20px;
}
 .search-field .input-group {
     display: flex;
     align-items: center;
}
 .search-field .input-group .form-control {
     flex: 1;
     font-size: 18px;
     padding: 10px 15px;
     border-right: none;
    padding-left : 35px;
}
 .search-field .input-group .btn {
     flex-shrink: 0;
     font-size: 18px;
     padding: 10px 20px;
     border-top-left-radius: 0;
    /* Remove the left border radius */
     border-bottom-left-radius: 0;
}
 .search-field {
     width: 100%;
     max-width: 900px;
    /* Adjust this value as needed */
}
 .btn-theme {
     background-color: #455EEB;
     color: white;
     transition: background-color 0.8s ease;
}
 .btn-theme:hover {
     color : #fff;
     background-color: #3149d4;
}
 .notch {
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 250px;
     height: 125px;
     background-color: white;
     border-bottom-right-radius: 30px;
     border-bottom-left-radius: 30px;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .logo {
     max-width: 80%;
     max-height: 80%;
}
 .btn-search{
     z-index:1;
}

 .navbar-top {
     background-color: rgba(0,0,0,0) !important;
}
 .navbar-top .nav-link{
    color:#fff !important;
}
 .navbar-top .navbar-brand{
     background-color: #fff;
     padding: 40px 0 10px 35px;
     border-radius: 25px;
     margin-top: -50px;
}
 .navbar {
     transition: background-color 0.8s ease, padding 0.8s ease, box-shadow 0.8s ease;
}
 .navbar-top {
     padding: 20px 0;
     box-shadow: none;
}
 @media (max-width: 991.98px) {

    .hero{ margin-bottom: 10px;}

     .hero-content {
         padding: 20px;
    }
     .btn-search{
         z-index:-4 !important;
        
         border-radius: 0 20px 20px 0 !important;
    }

     .navbar-top {
     background-color: rgba(255,255,255,1) !important;
    }

     .navbar-top .nav-link{
    color:#4d4d4d !important;
}

 .navbar-top .nav-link-special{color:#fff !important}
 .top-search-field{
  width:100% !important;
}
.location-input::placeholder {
    font-size: 14px; /* Adjust the font size as needed */
  }
}
 .navbar {
     padding: 1rem;
     position: absolute;
     top:0;
     left:0;
     z-index: 2;
     width: 100%;
}
 .navbar-brand {
     display: flex;
     align-items: center;
}
 .navbar-brand .logo {
     height: 60px;
}
 .navbar-nav .nav-link {
     color: #333;
     font-weight: 500;
     margin-left: 1rem;
     font-size:18px 
}
 @media (max-width: 991.98px) {
     .navbar-nav {
         margin-top: 1rem;
    }
     .navbar-nav .nav-link {
         margin-left: 0;
         padding: 0.5rem 0;
    }
}
 .hero-content h6{
     margin-top: -15px;
     margin-bottom: 30px;
}
 .city-card {
     border: none;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: transform 0.8s ease;
     border-radius: 25px 25px 0 0;
}
 .city-card:hover {
     transform: translateY(-5px);
}
 .city-card .card-img-top {
     height: 200px;
     object-fit: cover;
     border-radius: 20px 20px 0 0;
}
 .city-card .card-body {
     text-align: center;
}
 .city-card .btn-primary {
     background-color: #455EEB;
     border-color: #455EEB;
}
 .city-card .btn-primary:hover {
     background-color: #3548c7;
     border-color: #3548c7;
}
 
 .input-group {
     display: flex;
     flex-wrap: wrap;
}
 .form-control {
     flex: 1;
}
 .btn {
     flex-shrink: 0;
}
 .location-input{
    border-radius: 20px 0 0 20px;
}
 .btn-search{
    border-radius: 0 20px 20px 0;
     padding-right: 50px !important;
     padding-left: 40px !important;
}
 .location-dropdown {
     position: absolute;
     background-color: #fff;
     width: 100%;
     max-height: 200px;
     
     color:#505250;
     z-index: -1;
     min-height: 45px;
     border-radius: 0 0 20px 20px;
     padding-top: 20px;
     top:-20px;
     text-align: left;
     padding-left:20px;
     overflow-y: hidden !important;
}
 .location-input-container {
     position: relative;
     width:500px 
}
 @media (max-width: 991.98px) {
     .location-input-container {
         position: relative;
         width:100%;
    }
     .location-dropdown {
         padding-top: 50px;
        
         min-height: 25px;
         border-radius: 10px;
    }
    .input-group {
        flex-direction: row !important; /* Keep input and button in a single row */
    }
     .form-control {
         margin-right: 0;
         margin-bottom: 10px;
    }
    
    /* .search-field, .btn-search{
        border-radius: 10px !important;
    }*/
     .location-input-container{
        width: 100%;
    }
}
 .search-field:focus {
     border-bottom:2px solid #eee;
     box-shadow: none;
}
 .location-dropdown-item {
     padding: 6px 12px;
     cursor: pointer;
     font-size:14px;
}
 .location-dropdown-item:hover {
     background-color: #f1f1f1;
}
 .section-popular-restaurants{
     background-color: #f5f5f5;
     padding:1% 5% 
}
 .section-title{
     text-align: center;
     margin-bottom: 50px;
}
 .section-title {
     text-align: center;
     font-size: 24px;
     font-weight: 600;
     margin: 40px 0;
     position: relative;
     padding-bottom: 10px;
}
 .section-title::after {
     content: '';
     display: block;
     width: 100px;
     height: 3px;
     background-color: #455EEB;
     margin: 10px auto 0;
}
 .footer {
     background-color: #343a40;
     color: white;
}
 .footer .nav-link {
     color: white;
}
 .footer .nav-link:hover {
     color: #455EEB;
}
 .nav-link-special{
     background-color:#455EEB;
     color:#fff !important;
     font-size:20px;
     padding:5px 20px !important;
     border-radius: 20px;
     transition: background-color 0.8s ease;
     max-width: 350px;
}
 .nav-link-special:hover{
     background-color: #3548c7;
}

/* Animation for new elements */
.custom-user-profile {
    opacity: 0; /* Start invisible */
    transform: translateY(20px); /* Start slightly below */
    transition: opacity 1s ease-out, transform 1s ease-out !important; /* Smooth transition */
}

.custom-user-profile.visible {
    opacity: 1; /* Fade in */
    transform: translateY(0); /* Slide up */
}
/* Prefixing custom classes to avoid conflicts */
 .custom-user-profile {
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 0 2rem 0 rgba(136, 152, 170, 0.15);
     background-color: #fff;
     position: relative;
     height: 180px;
     background-size: cover !important;
}
 .custom-cover {
     position: relative;
}
 .custom-cover .custom-description {
     position: absolute;
     top: -5px;
     left: 0;
     color: #fff;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 110%) !important;
     width: 100%;
}
 .custom-description{
     padding:10px;
}
 .custom-cover .custom-description .custom-name {
     font-size: 20px;
     text-align: center;
}
 .custom-cover .custom-description .custom-location {
     font-size: 15px;
     text-align: center;
}
 .custom-float-btn {
     position: absolute;
     right: 20px;
     bottom: 10px;
}
 .custom-profile-picture {
     width: 80px;
     height: 80px;
     overflow: hidden;
     border-radius: 100%;
     margin-top: -50px;
     border: solid 4px #fff;
     position: absolute;
     bottom: 10px;
     left: 20px;
}
 .custom-profile-picture img {
     width: 100%;
     position: relative;
}
/* Loading animation */
 .custom-lds-ellipsis, .custom-lds-ellipsis div {
     box-sizing: border-box;
}
 .custom-lds-ellipsis {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 50px;
}
 .custom-lds-ellipsis div {
     position: absolute;
     top: 33.33333px;
     width: 13.33333px;
     height: 13.33333px;
     border-radius: 50%;
     background: currentColor;
     animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
 .custom-lds-ellipsis div:nth-child(1) {
     left: 8px;
     animation: custom-lds-ellipsis1 0.6s infinite;
}
 .custom-lds-ellipsis div:nth-child(2) {
     left: 8px;
     animation: custom-lds-ellipsis2 0.6s infinite;
}
 .custom-lds-ellipsis div:nth-child(3) {
     left: 32px;
     animation: custom-lds-ellipsis2 0.6s infinite;
}
 .custom-lds-ellipsis div:nth-child(4) {
     left: 56px;
     animation: custom-lds-ellipsis3 0.6s infinite;
}
 @keyframes custom-lds-ellipsis1 {
     0% {
         transform: scale(0);
    }
     100% {
         transform: scale(1);
    }
}
 @keyframes custom-lds-ellipsis3 {
     0% {
         transform: scale(1);
    }
     100% {
         transform: scale(0);
    }
}
 @keyframes custom-lds-ellipsis2 {
     0% {
         transform: translate(0, 0);
    }
     100% {
         transform: translate(24px, 0);
    }
}
/* View button */
 .custom-view-btn a {
     color: #fff;
     background-color: #455EEB;
     padding: 5px 30px;
     border-radius: 10px;
     text-decoration: none;
     border: 1px solid #fff;
     font-size: 20px;
}
 .custom-view-btn a:hover {
     background-color: #566ded;
}
 #site-header {
     background-color: #fff;
}
 .site-breadcrumbs {
    display:none
}
 .page-header {
     height: 300px;
}
 .footer {
     color: white;
}
 .footer .first-row {
     background-color: black;
}
 .footer .second-row {
     background-color: #455EEB;
}
 .footer .nav-link {
     color: white;
}
 .footer .nav-link:hover {
     color: #ddd;
}
 .navbar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     background-color: #fff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     z-index: 100;
     transition: padding 0.8s ease;
}

.navbar .logo {
     height: 60px;
     transition: height 0.8s ease;
}

 @media (min-width: 991.98px) {
 
 .navbar .logo {
     height: 100px;
     transition: height 0.8s ease;
}

}
/* Sticky navbar styles */
 .navbar.sticky {
     padding: 5px 0;
}
 .navbar.sticky .logo {
     height: 40px;
}
 .navbar.sticky .nav-link {
     font-size:16px;
}
/* Basic styling for input and dropdown */
 .location-input {
     padding: 8px;
    /* Example padding */
     width: 100%;
     box-sizing: border-box;
    /* Ensure padding is included in width */
     position: relative;
     z-index: 2;
}
 .location-dropdown {
     border: 1px solid #ccc;
     background-color: #fff;
     position: absolute;
     width: 100%;
     max-height: 250px;
     overflow-y: auto;
     display: none;
    /* Initially hidden */
     z-index: 1;
    /* Ensure dropdown is above other elements */
    padding: 25px 0 15px 0;
    
}
 .location-dropdown-show {
     display: block;
    /* Show when the class is added */
}
 .location-dropdown-item {
     padding: 8px 35px;
     cursor: pointer;
     display: flex;
     align-items: center;
}
 .location-dropdown-item i {
     margin-right: 8px;
    /* Spacing between icon and text */
     font-size: 16px;
    /* Adjust icon size if needed */
}
 .location-dropdown-item:hover {
     background-color: #f0f0f0;
}
/* For WebKit browsers (Chrome, Safari) */
 ::-webkit-scrollbar {
     width: 12px;
    /* Width of the scrollbar */
     height: 12px;
    /* Height of the horizontal scrollbar */
}
 ::-webkit-scrollbar-track {
     background: #f1f1f1;
    /* Track color */
     border-radius: 10px;
    /* Rounded corners for the track */
}
 ::-webkit-scrollbar-thumb {
     background: #888;
    /* Color of the scrollbar thumb */
     border-radius: 10px;
    /* Rounded corners for the thumb */
}
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
    /* Color of the scrollbar thumb on hover */
}
/* For Firefox */
 .scrollbar {
     scrollbar-width: thin;
    /* Thin scrollbar */
     scrollbar-color: #888 #f1f1f1;
    /* Thumb and track color */
}
/* For Internet Explorer and Edge (legacy) */
 body {
     -ms-overflow-style: scrollbar;
}
 .location-dropdown {
     max-height: 250px;
    /* Adjust height as needed */
     overflow-y: auto;
     scrollbar-width: thin;
    /* For Firefox */
     scrollbar-color: #9dc1fa #f1f1f1;
    /* For Firefox: thumb and track color */
}
 .location-dropdown::-webkit-scrollbar {
     width: 8px;
    /* Thin scrollbar for WebKit browsers */
}
 .location-dropdown::-webkit-scrollbar-thumb {
     background-color: #9dc1fa;
     border-radius: 10px;
    /* Rounded scrollbar thumb */
}
 .location-dropdown::-webkit-scrollbar-track {
     background-color: #f1f1f1;
    /* Background of the track */
}

 .sticky {
     background-color: #fff;
    /* or any color you prefer */
     padding: 10px 0;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
 .location-dropdown-collapsed{
     display:none;
}
 .location-dropdown-show{
     display:block;
}
 

/* Styles for elements with data-bg attribute */
[data-bg] {
  /* or any desired height */
  background-color: #9caaf7; /* Placeholder color */
  background-size: cover;
  background-position: center;
}

/* Styles for images with data-src attribute */
img[data-src] {
  opacity: 0;
  transition: opacity 0.8s;
  background-color: #f0f0f0; /* Placeholder color */
  /* Optional: add a placeholder image */
  background-image: url('/assets/images/ordernow-menu.jpg');
  background-size: cover;
  background-position: center;
}

img[data-src][src] {
  opacity: 1;
  background: none; /* Remove placeholder background when the image loads */
}


.on-title{margin-top:75px; background-color: #F4F4F4; padding-top:20px; padding-bottom:10px}
      .on-title h1{font-size:22px}
      
      .sidebar {
 
  padding: 20px;
  height:100%;
  padding-top:50px;
  border-right:2px solid #eee;

}

.accordion-button {
  font-weight: bold;
}

.accordion-body {
  padding: 10px 20px;
}

.form-check {
  margin-bottom: 10px;
}

.price-range {
  margin-top: 10px;
}

.price-range-values {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
}

.top-search-field{
  height: 60px;
}


.custom-view-btn{display:none !important}





.custom-user-profile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.custom-user-profile:hover {
    transform: scale(1.05);
}

.custom-user-profile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* dark overlay */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 1; /* Make sure it is behind the text */
}

.custom-user-profile:hover::before {
    opacity: 1;
}

.custom-user-profile .custom-description {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    z-index: 2; /* Ensure it is above the dark overlay */
}

.custom-user-profile .custom-name {
    display: block;
    font-weight: bold;
    text-align: center;
}

.custom-user-profile .custom-location {
    display: block;
    font-size: 1rem;
    text-align: center;
}

.custom-profile-picture{z-index:5}


footer {
  background: #0d0d0d; /* or use gradient: linear-gradient(135deg,#3b1d82,#1e4f9e); */
}

.footer-link {
  color: #ccc;
  text-decoration: none;
  display: inline-block;
  margin-bottom: .4rem;
  transition: color .2s ease, transform .2s ease;
}
.footer-link:hover {
  color: #fff;
  transform: translateX(3px);
}

.social-icons .social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-right: 8px;
  border-radius: 50%;
  background: #1a1a1a;
  color: #ccc;
  transition: all .3s ease;
  text-decoration: none;
}
.social-icons .social:hover {
  background: linear-gradient(135deg,#6c3bff,#007bff);
  color: #fff;
  transform: translateY(-2px);
}


.modern-btn {
      position: relative;
      background: #455EEB;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
      padding: 16px 40px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      overflow: hidden;
      text-transform: uppercase;
      letter-spacing: 1px;
      box-shadow: 0 4px 20px rgba(69, 94, 235, 0.4);
      transition: all 0.3s ease-in-out;
      margin-top:60px;
    }

    /* Glow moving inside */
    .modern-btn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, rgba(255,255,255,0.2), rgba(255,255,255,0));
      transform: skewX(-20deg);
      animation: glowMove 2.5s infinite;
    }

    @keyframes glowMove {
      0%   { left: -100%; }
      50%  { left: 100%; }
      100% { left: 100%; }
    }

    .modern-btn:hover {
      box-shadow: 0 6px 30px rgba(69, 94, 235, 0.6);
      transform: scale(1.05);
    }


     /* Modal wrapper */
    .ordernow-register-modal .modal-content {
      background: #ffffff;
      border-radius: 16px;
      border: none;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
      padding: 10px;
    }

    /* Header */
    .ordernow-register-modal .modal-header {
      border-bottom: none;
      text-align: center;
      display: block;
    }
    .ordernow-register-modal .modal-title {
      font-weight: 700;
      color: #2c3e50;
    }
    .ordernow-register-modal .sub-heading {
      font-size: 14px;
      color: #777;
      margin-top: 5px;
      margin-bottom: 15px;
    }

    /* Inputs */
    .ordernow-register-modal .input-group {
      position: relative;
    }
    .ordernow-register-modal .form-control {
      border-radius: 10px;
      padding: 12px;
      font-size: 15px;
      border: 1px solid #ddd;
      transition: all 0.25s ease;
    }
    .ordernow-register-modal .form-control:focus {
      border-color: #455EEB;
      box-shadow: 0 0 0 3px rgba(69, 94, 235, 0.2);
    }
    /* Right-side check icon */
    .ordernow-register-modal .valid-icon {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #455EEB;
      opacity: 0;
      transition: opacity 0.2s ease;
      pointer-events: none;
    }
    .ordernow-register-modal .form-control.valid ~ .valid-icon {
      opacity: 1;
    }

    /* Button */
    .ordernow-register-modal .btn-register {
      background: linear-gradient(135deg, #455EEB, #6A7BFF);
      border: none;
      border-radius: 10px;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      width: 100%;
      color: #fff;
      transition: all 0.3s ease;
    }
    .ordernow-register-modal .btn-register:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(69, 94, 235, 0.4);
    }

    /* Footer */
    .ordernow-register-modal .modal-footer {
      border-top: none;
      justify-content: center;
    }
    .ordernow-register-modal .small-text {
      font-size: 14px;
      color: #666;
    }
    .ordernow-register-modal .small-text a {
      font-weight: 600;
      text-decoration: none;
      color: #455EEB;
    }
    .ordernow-register-modal .small-text a:hover {
      text-decoration: underline;
    }

    /* Animation */
    .ordernow-register-modal .modal-dialog {
      transform: translateY(20px);
      opacity: 0;
      transition: all 0.35s ease;
    }
    .ordernow-register-modal.show .modal-dialog {
      transform: translateY(0);
      opacity: 1;
    }

     @media (max-width: 991.98px) {
    .btn-search {
        width: 100px; /* Set a fixed width for the button */
        padding-right: 10px !important;
        padding-left: 10px !important;
        margin-top:-10px;
        z-index: 2 !important;
    }

    .location-dropdown{
      margin-top: -10px;
    z-index: 1;
    }

  }

  .on_type-btn-group {
            display: flex;
        }
        .on_type-btn {
            padding: 10px 20px;
            border: 2px solid white;
            background-color: transparent;
            color: white;
            text-decoration: none;
            cursor: pointer;
            outline: none;
            font-size: 16px;
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            border-radius: 8px;
            position: relative;
            overflow: hidden;
        }
        .on_type-btn::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            background-color: rgba(255, 255, 255, 0.1);
            transition: transform 0.5s ease;
            transform: translate(-50%, -50%) scale(0);
            border-radius: 50%;
            z-index: 0;
        }
        .on_type-btn:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
        .on_type-btn:hover {
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
        }
        .on_type-btn.active {
            background-color: white;
            color: black;
        }
        .on_type-btn:first-child {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .on_type-btn:last-child {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .cta-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 80px 0;
    color: white;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Adjust the opacity value as needed to make it darker */
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.btn-cta{background-color: #455EEB; border-radius: 50px; border:none; padding:10px 30px; }
.btn-cta:hover{background-color: #3548c7;}
.city-card .btn{border-radius: 50px; padding:5px 25px;}
.logo-wrapper {
        background: rgba(255, 255, 255, 0.8);
    display: inline-block;
    padding: 15px 20px;
    border-radius: 12px 12px 0 0;
    max-width: 15%;
    margin-bottom: -48px;
}