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('/assets/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 {
     background-color: #3548c7;
}
 .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: 50px 0 20px 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-content {
         padding: 20px;
    }
     .btn-search{
         z-index:-4 !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;
         margin-top: -60px;
         min-height: 25px;
         border-radius: 10px;
    }
     .input-group {
         flex-direction: column;
    }
     .form-control {
         margin-right: 0;
         margin-bottom: 10px;
    }
     .search-field{
         width: 100% !important;
    }
     .btn-search{
        width: 100%;
    }
     .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 40px !important;
     border-radius: 20px;
     transition: background-color 0.8s ease;
     max-width: 200px;
}
 .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;
}
/* 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}