body, html {
  height: 100vh;
  font-family: 'montserrat', sans-serif;
}

.bg-image {
  background-image: url("");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* This line creates the parallax effect */
  min-height: 100vh;
}

.bg-image-2 {
  background-image: url("");
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* This line creates the parallax effect */
  min-height: 100vh;
}

.bg-image-2 .overlay-2{
  background: rgba(0, 0, 0, 0.7); /* Dark overlay for better text readability */
}

.bg-image-why-us {
  background-image: url("");
  background-size: cover;
  background-position: center;/* This line creates the parallax effect */
  min-height: 100vh;
}

/*mobile devices */
@media (max-width: 768px) {
  .bg-image-why-us {
  }
}

.bg-image-why-us-2 {
  background-image: url("");
  background-size: cover;
  background-position: center;/* This line creates the parallax effect */
  min-height: 100vh;
}

/*mobile devices */
@media (max-width: 768px) {
  .bg-image-why-us-2 {
    min-height: 50vh;
  }
}

.bg-image-auth {
  background-image: url("");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; This line creates the parallax effect */
  min-height: 100vh;
}

.container-fluid{
  min-height: 100vh;
}
.overlay {
  background: rgba(0, 0, 0, 0.8); /* Dark overlay for better text readability */
  min-height: 100vh;
}
.overlay-2 {
  /* background: rgba(0, 0, 0, 0.1); Dark overlay for better text readability */
  min-height: 100vh;
  height: fit-content !important;
}

.primary-page-bg{
  background: #EFEFEF;
}
#cityInput:focus{
  outline: none;
  border: none;
  box-shadow: none;
}
.input--primary:focus{
  box-shadow: none;
  border-color: none;
}
.input--primary{
  border-radius: 15px;
  padding: 10px;
  background: white;
  border: none;
  padding: 13px;

}
.input--secondary{
  border-radius: 15px;
  padding: 10px;
  background: #eeeeee;
  border: none;
  padding: 13px;
}
.bg-secondary-custom{
  background: #eeeeee;
}
.reservation-form-card, .account-card{
  background: #eeeeee;
  border-radius: 10px;
}
.booktablecard{
  border-radius: 10px;
  border: 3px dashed #b2afaf;
  padding: 1.5rem;
}
.button--primary{
  border-radius: 20px;
  background: #212529 !important;
  padding: 10px;
  font-weight: 700;
  font-size: 20px;
  color: white;

}
.btn-red{
  background: #ED1C24 !important;
  color: white;
  border: 2px solid #ED1C24 !important;
}
.colorful-bg {
  background: #efefefef;
  /* background-size: 1000% 100% !important; */
  /* animation: create-rainbow-gradient-shift 50s ease infinite !important;
  text-align: center; */
}
  
@keyframes create-rainbow-gradient-shift{
  0%{background-position:0% 50%} 
  100%{background-position:100% 100%}
}
.top-bar{
  position : absolute;
  width: 100%;
  /* left: 8%; */
}
/* on mobile
@media (max-width: 768px) {
  .top-bar{
    left: 0;
  }
} */
.text-right{
  text-align: right;
}
.dashboard-card{
  border-radius: 10px;
  background: white;
  padding: 1.5rem;
  flex-basis: calc(25% - 20px);
}
.email-container{
  position: absolute;
  background: #f4f4f4;
  width: 100%;
  max-width: 500px;
  left: 50%;
  top: -60px;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 2rem;
  -webkit-box-shadow: 10px 10px 44px -24px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 44px -24px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 44px -24px rgba(0, 0, 0, 0.75);
}
.mobile-menu-toggle{
  display: none;
}
.navmenu{
  width: 350px;
}
.display-mobile{
  display: none;
}
.pulse-animation {
  position: relative;
  display: inline-block;
}

.pulse-animation::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.5s infinite;
  z-index: -1; 
}

@keyframes pulse {
  0% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
  }
  100% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0;
  }
}
@media (max-width: 768px) {
  .navmenu{
    /* position: fixed;
    background: white;
    top: 0;
    left: 0;
    margin-top: 0 !important;
    padding: 2rem 1.4rem;
    height: 100vh;
    display: none;
    width: 100%; */
  }

  .d-flex-mobile{
    display: flex !important;
  }
  .mobile-menu-toggle{
    display: block;
  }
  .hide-for-mobile{
    display: none !important;
  }
  .display-mobile{
    display: block !important;
  }
}

.button--secondary{
  border-radius: 20px;
  background: #21252900 !important;
  padding: 10px;
  font-weight: 700;
  font-size: 20px;
  color: rgb(0, 0, 0);
  border: 1.5px solid rgb(88, 87, 87);
}
.button--secondary:hover{
  background: #212529 !important;
  border: none !important;
}
.button--secondary:focus{
  background: #212529 !important;
  border: none !important;
}
.button-bg-transparent{
  background: transparent !important;
  border: 2px solid black !important;
}
.heading-small{
  font-size: 22px;
  letter-spacing: -1px;
}
.heading{
  font-size: 54px;
  letter-spacing: -1px;
}
.heading-no-padding{
  font-size: 54px;
}
.heading-2x{
  font-size: 70px;
  letter-spacing: -1px;
}

/* font size for mobile */
@media (max-width: 768px) {
  .heading{
    font-size: 30px;
    padding: 0 5px;
  }
  .heading-no-padding{
    font-size: 30px;
  }
  .justify-content-center-mobile{
    justify-content: center !important;
  }
}
.cover-content{
  max-width: 790px;
}
.cover-content-2x{
  max-width: 850px;
}
.input-group-text{
  border-radius: 15px;
  border: none;
  background: #d6d6d6;
}
.input-group input:not(#budget){
  /* max-width: 571.4px; */
  font-size: 23px;
  /* margin: 0 15px; */
  padding-left: 25px;
  height: 56.6px;
  border-radius: 20px;
  border-right: none;
  outline: none;
  border: none;
  border-top-right-radius: 0;
}

.input-group.form-group-normal .form-control{
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem!important;
  height: unset!important;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da!important;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: .25rem!important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.input-group.form-group-normal>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: -1px;
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
}
.input-group.form-group-normal:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group.form-group-normal:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
}

/*change font size for mobile */
@media (max-width: 768px) {
  .input-group input{
    font-size: 18px;
  }
}
.input-group button{
  /* max-width: 100px; */
  border-radius: 20px;
  /* padding-right: 22px; */
}
.input-group{
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  z-index: 2;
}
.user-icon{
  position: absolute;
  top: 30px;
  right: 50px;
  width: 40px;
  height: 40px;
}

.logo-link{
 /* position opposite side of the screen to .user-icon */
  position: absolute;
  top: 30px;
  left: 50px;
  width: 40px;
  height: 40px;
}
/*change font size for mobile */
@media (max-width: 768px) {
  .user-icon{
    width: 25px;
    height: 25px;
    top: 20px;
    right: 20px;
  }
  .logo-link{
    width: 25px;
    height: 25px;
    top: 20px;
    left: 20px;
  }
}
.chevron-icon{
  width: 30px;
  height: 30px;
}
.reveal {
  opacity: 0;
  animation: revealAnimation 1.5s ease-in-out forwards;
  animation-delay: 0.1s;
}
@keyframes revealAnimation {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
#suggestionsContainer, #suggestionsContainerRes{
  background: white;
  color: black;
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 20px;
  text-align: left;
  position: relative;
  top: -40px;
  z-index: 1;
  padding-top: 40px;
  
}
.for-operator, .for-content-creator, .role-container, .push-up{
  position: relative;
  top: -40px;
}
a.disabled{
  pointer-events: none;
  cursor: not-allowed;
}
.suggestion-item{
  border-bottom: 2px dashed #ccc;
  margin: 0 15px;
  cursor: pointer;
}
.suggestion-item box-icon{
  position: relative;
    left: 9px;
}
.suggestion-item:last-child{
  border-bottom: none;
}
.suggestion-item-without-border {
  border-bottom: none;
}

.suggested-city-name{
  display: block;
  font-weight: 600;
  font-size: 23px;
}
/*change font size for mobile */
@media (max-width: 768px) {
  .suggested-city-name{
    font-size: 18px;
  }
}
.nav-bar{
  background: black;
  padding: 10px 50px;
}
/*change padding for mobile */
@media (max-width: 768px) {
  .nav-bar{
    padding: 5px 20px;
  }
  #profile-icon{
    width: 25px;
  }

}
.nominate--message{
  /* width: 70%; */
  margin-right: auto;
  margin-left: auto;
}
/*change width for mobile */
@media (max-width: 768px) {
  .nominate--message{
    width: 100%;
  }
}
.subscribe--button{
  border: none;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  padding: 5px;
  align-items: center;
  background: white;
}

.messenger-icon{
  width: 20px;
  height: 20px;
}
/* .subscribe--message{
  width: 70%;
} */

.rounded--button{
  background-color: transparent;
  border-radius: 23px;
}
.stars-x2 img{
  width: 30px !important;
}
.stars-x3 img{
  width: 50px !important;
}
.border-grey{
  border-color: #d6d6d6 !important;
}

/* .mobile-flex{
  margin:inherit;
  text-align: right
} */
/* flex column on mobile */
@media (max-width: 450px) {
  .flex-column-mobile{
    flex-direction: column;
    align-items: start !important;
    justify-content: start;
  }
  .mobile-flex{
    margin: auto;
    text-align: center;
  }
  .mx-m-auto{
    margin: auto;
  }
}
.bordered--button{
  border : 2px solid #777777
}
.overflowX-hidden{
  overflow-x: hidden;
}
.w-55px{
  width: 45px !important;
}
.deal-action-btn{
  min-width: 130px;
}
.place-action-btn{
  min-width: 150px;
  padding-left: 10px;
  padding-right: 10px;
}
.follow-card{
  border: 3px dashed #212529;
  padding: 1.5rem;
  border-radius: 10px;
  /* background-color: #f6f2ff */
}
.min-width-desktop-600{
  min-width: 200px;
}
@media (min-width: 768px) {
  .w-50-desktop{
    width: 50% !important;
  }
}

.w-95{
  width: 95% !important;
}
.w-90{
  width: 90% !important;
}
@media (max-width: 400px){
  .w-mobile-95{
    width: 95% !important;
  }
}
.listing-card{
  background: white;
  border-radius: 10px;
}
.listing-card-hover:hover {
  background: #fafafa;
}
.bg-warm{
  background: #fedbc6;
}
.pictures-wrapper {
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .pictures-wrapper {
      /* padding-left: 5px; */
      /* padding-right: 5px; */
      margin-right: -10px;
  }
}

/* .pictures-wrapper::before,
.pictures-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  pointer-events: none;
  z-index: 1;
}
.pictures-wrapper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
} */

@media (max-width: 768px) {
  .map-container {
      height: 100px !important;
  }
}

@media (min-width: 768px) {

  .pictures-wrapper::before,
  .pictures-wrapper::after {
      display: none;
  }
}
.bg-none{
  background-color: transparent !important;
}

.listing-card-secondary{
  background: #efefefef;
  border-radius: 10px;
}
.text-info-color{
  color: #d5ff00 !important;
}
.bg-info-color{
  background: #d5ff00;
}
.light-grey{
  background: #a3a3a3 !important;
}
.bg-status-hidden{
  background: #d2d2d2;
}

.gap-6{
  gap: 6rem !important;
}

.bg-status-success{
  background: #abf7c8;
}
.top-25{
  top: 25%;
}
.wrap-link{
  word-break: break-word;
  overflow-wrap: break-word;
  display: inline-block;
  white-space: normal;
}
.bg-status-neutral{
  background: white;
}

.bg-status-danger{
  background: #f5caca;
}

.bg-status-warning{
  background: #fdf6e0;
}

.winner-cover-container{
  border: 3px dashed #fae190;;
}

.bg-status-info{
  background: #d9d9d9;
}

.text-status-success{
  color: #00b74a;
}

.text-status-neutral{
  color: #a3a3a3;
}

.text-status-danger{
  color: #d40008;
}

.text-status-warning{
  color: #242420;
}

.text-status-info{
  color: #a3a3a3;
}

.control-number {
  border-radius: 20px;
  border: 2px solid black;
  padding: 35px;
  font-size: 25px;
}

.people-number {
  padding: 0 30px;
  font-size: 25px;
  border-radius: 20px;
  background-color: #f5f5f5;
  margin: 0 10px;
}    

#people-count {
  font-size: 45px;
  font-weight: 700;
  position: relative;
  top: 10px;
}

#scroll-container .vote--category {
  width: 300px !important;
}

#scrolling-container {
  display: flex;
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.scroll-btn {
  background-color: #000000d9;
  color: #fff;
  border: none;
  /* padding: 10px; */
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px;
  box-shadow: 0 0 10px rgb(0 0 0 / 77%);
}

@media only screen and (max-width: 600px) {
  .scroll-btn {
      display: none;
  }
}

#scroll-prev {
  left: 0;
}

#scroll-next {
  right: 0;
}

#scrolling-container-reviews {
  overflow: hidden;
}
#scrolling-container-reviews {
  overflow-x: scroll;
  scroll-behavior: smooth;
  white-space: nowrap;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; 
}

#scrolling-container-reviews::-webkit-scrollbar {
  display: none; 
}

@media screen and (max-width: 380px) {
  .people-number {
      padding: 0 15px;
      font-size: 15px;
  }
  #people-count {
      font-size: 30px;
  }
  .control-number {
      padding: 20px;
  }
}
.flex-item {
  flex: 1;
}
#modal-back-btn{
  display: none;
}
.step {
  display: none;
}
.step.active {
  display: block;
}


.follow-card.following p{
  display: none;
}
.follow-card.following h1{
  display: none;
}
.follow-card.following{
  border: none;
  padding: unset;
}
.follow-card.following #follow-btn{
  background: #212529 !important;
  color: white !important;
}
.helpful-btn{
  border: 1px solid rgb(149, 148, 148);
  padding: 5px 10px;
  border-radius: 15px;
  color: rgb(149, 148, 148);
  cursor: pointer;
  min-width: 50px;
}
/*change font size for mobile */
@media (max-width: 364px) {
  .deal-action-btn{
    min-width: 90px;
  }
}
.bg-red{
  background: #ED1C24;
}
@media (max-width: 500px) {
  .place-action-btn{
    min-width: 100% !important;
  }
  .w-100-mobile{
    width: 100% !important;
  
  }
  .gap-mobile-10{
    gap: 5px !important;
  }
  .gap-mobile-15{
    gap: 15px !important;
  }
  .reservation-form-page{
    display: flex !important;
    flex-direction: column !important;
  }
}

.z-index-2{
  z-index: 2;
}

.click-cursor{
  cursor: pointer;
}
.backend{
  background: #efefefef;
}

.dropdown-menu-modal {
  display: none;
  position: absolute;
  background-color: white;
  box-shadow: 0px 0.125rem 2.25rem 6px rgba(0, 0, 0, 0.075);
  border-radius: 0.25rem;
  z-index: 1000;
  min-width: 200px;
  padding: 10px;
}
.dropdown-menu-modal a{
  color: black;
  text-decoration: none;
  text-wrap: none;
}
.dropdown-menu-modal.show {
  display: block;
}
#dropdownButton1{
  padding-top :.7rem !important;
}

.like-btn{
  width: 40px;
  border-radius: 50%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input--primary.error-message, .input--secondary.error-message{
  background: #af1a1a30;
}
span.error-message{
  font-size: small;
  color: red;
  display: block;
  margin-top: .4rem;
}
.bordered--button--white{
  border : 2px solid #777777
}
.bordered--button--white--2x{
  border : 2px solid #eaeaea
}
.listing-card.default-option{
  border: 2px #000000 dashed;
  box-sizing: border-box;
}
.bordered--button-2x{
  border : 2px solid black;
}
.border-black{
  border-color: black !important;
}
.rounded--button-2x{
  background-color: transparent;
  border-radius: 30px;
}
.max-width-600{
  max-width: 600px;
}
.max-width-500{
  max-width: 500px !important;
}
.max-width-400{
  max-width: 400px !important;
}
.max-width-300{
  max-width: 300px;
}
.install-prompt{
  position: fixed;
  width: 100%;
  max-width: 330px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 15px;
  bottom: 10px;
  border-radius: 20px;
  box-shadow: 0px 2px 10px #00000087;
}
#cancel-button:hover{
  color: white !important;
}
@media (min-width: 768px) {
  .install-prompt{
    max-width: 500px;
  }
}
.is-invalid {
  border-color: #dc3545 !important;
}
body{
  background: white;
}
.place-body{
  background: rgb(239,239,239);
  background: linear-gradient(180deg, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 40%);
}
.backend-top-bar{
  background: linear-gradient(180deg, rgb(255 255 255) 50%, rgb(239 239 239) 100%);
}
.has-error {
  border: 1px solid #dc3545;
  border-radius: 4px;
  padding: 10px;
}
input::-webkit-date-and-time-value {
  text-align: left;
}
.min-width-400{
  min-width: 400px;
}
.min-width-380{
  min-width: 380px;
}
@media (max-width: 768px) {
  .min-width-380{
    min-width: 300px;
  }
  
}
.min-width-450{
  min-width: 450px;
}
.min-width-500{
  min-width: 500px;
}
.min-width-300{
  min-width: 300px;
}

.min-width-200{
  min-width: 200px;
}

.min-width-150{
  min-width: 150px;
}
@media (min-width: 768px) {
  .min-md-width-150 {
    min-width: 150px;
  }
}

.min-width-100{
  min-width: 100px;
}


@media print {
  .no-print {
      display: none;
  }
}
@media (max-width: 400px) {
  .justify-content-center-mobile{
    justify-content: center !important;
  }
  
}
@media (max-width: 550px){
  .min-width-mobile-none{
    min-width: auto !important;
  }
}
.mt-10{
  margin-top: 6rem !important;
}
.continue--button{
  padding: 10px 0;
  max-width: 600px;
  width: 100%;
  font-weight: 800;
  font-size: 23px;
  display: none;
  color: rgb(255, 255, 255);
  position: relative;
  top: -30px;
}

.form-choose-city{
  display:contents;
}

/*change font size for mobile */
@media (max-width: 768px) {
  .auth-cover{
    width: 95% !important;
  }
}
.iti--allow-dropdown{
  display: block !important;
}
#selectedSuggestionsList .suggestion-item{
  background: white;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  border-radius: 15px;
  padding: 20px !important;
  border: none;
  margin-bottom: 10px;
}

.text-underlined{
  text-decoration: underline;
}

/* disabled and readonly input fields */
input:disabled, input[readonly] {
  background-color: #cccccc!important;
  opacity: 1;
}

.search-cover{
  min-height: 75vh;
}

.min-height-300{
  min-height: 300px;
}

.sign-out{
  position: fixed;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000000f5;
  top: 0;
  left: 0;
  z-index: 1000;
}

.sign-out-button{
  padding: 15px 65px;
  display: inline-block;
  border: 2px solid;
  margin-top: 50px;
  border-radius: 62px;
  font-weight: 600;
}

.input-icon-container {
  position: relative;
  display: inline-block;
  width: 100%;
}

input:disabled, input[readonly] {
  /* Ensures the input fills the container */
  width: 100%;
  box-sizing: border-box; /* Optional based on your CSS reset/normalization */
}

.card{
  border-radius: 20px;
}

.streetAddress{
  width: 70% !important;
}

.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}
.phone-mockup-container {
  position: relative;
  width: 280px;
  height: auto; 
}

.phone-iframe {
  position: absolute;
  top: 1%;
  left: 5%;
  width: 130%;
  height: 48rem;
  z-index: 1;
  border-radius: 25px;
  transform: scale(0.7);
  transform-origin: top left;
}

.phone-mockup-container img {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.custom-select-wrapper select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; /* Remove default arrow */
}

.custom-arrow {
  position: absolute;
  top: 55%;
  right: 10px;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Style for custom arrow icon */
.fa-chevron-down {
  color: #333; /* Icon color */
}

.circle-picture {
  width: 150px;
  height: 150px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
}
.wh-50{
  width: 50px;
  height: 50px;
}
.place-picture {
  width: 110px;
  height: 110px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  position: relative;
}

.picture-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
}

.picture-overlay-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
}

.circle-picture-medium {
  width: 110px;
  height: 110px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.circle-picture-x-smaller{
  width: 75px;
  height: 75px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid #EFEFEF;
}
.input-with-icon {
  position: relative;
}
input::-webkit-date-and-time-value {
  text-align: left;
}
.input-icon {
  position: absolute;
  right: 15px;
  top: 66%;
  transform: translateY(-50%);
}
.file-upload-container {
  position: relative;
}
#background-image-value {
  padding-right: 2.5rem; 
}
.upload-icon:not(#video-upload) {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #6c757d;
}
.delete-icon {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.file-upload-container .upload-icon:hover,
.file-upload-container .delete-icon:hover {
  color: #007bff;
}
.circle-picture-small {
  width: 90px;
  height: 90px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid #EFEFEF;
}
.circle-picture-x-small {
  width: 55px;
  height: 55px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid #EFEFEF;
}
.top-nav {
  transition: transform 1s ease; /* Add transition for smooth animation */
}
.bg-grey{
  background: #efefef;
}
.sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  transform: translateY(-100%); /* Initially hide it above the viewport */
}

.sticky.slide-in { /* Class to trigger the slide-in */
  transform: translateY(0); 
}
.slide-in .pcard{
  display: block !important;
}
.slide-in .cllogo{
  display: none !important;
}
.nav-main-class{
  height: 4.5rem;
}
.circle-picture-xsmall {
  width: 45px;
  height: 45px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid white;
}

.circle-picture-xx-small {
  width: 35px;
  height: 35px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid #EFEFEF;
}

.circle-picture.secondary-bg, .circle-picture-medium.secondary-bg{
  background-color: #f5f5f5;
  border: 3px solid #bababa;
}

.bg-pending-notif{
  background: #ff914d;
}
.notification-card-pending{
  background: #fde1d1;
}
@media (min-width : 768px){
  .nav-centered-desktop{
    margin: auto;
    width: 85%;
    padding-left: 1.5rem !important;
    padding-right: .8rem !important;
  }
  .nav-centered-desktop.no-px{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


.chat-left{
  position: fixed;
  right: 0;
  height: 100vh;
  padding: 1.4rem;
}
.cursor-not-allowed{
  cursor: not-allowed !important;
}
.circle-picture-smaller{
  width: 70px;
  height: 70px;
  background-color: white;
  border-radius: 50%; /* Makes the div a circle */
  display: flex;
  align-items: center; /* Vertically center the content */
  justify-content: center; /* Horizontally center the content */
  background-size: cover; /* Ensure the image is fully contained within the circle */
  background-repeat: no-repeat; /* Prevent the image from repeating */
  background-position: center;
  border: 3px solid #EFEFEF;
}

.mobile-mockup {
  position: relative;
  width: 290px; /* Adjust to the width of your mobile mockup */
  height: 580px; /* Adjust to the height of your mobile mockup */
  overflow: hidden; /* Hide overflow content */
  margin-left: auto;
  margin-right: auto;
}

.mockup-img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.iframe-content {
  position: absolute;
  top: 2.65%; /* Adjust these values */
  left: 5.5%; /* Adjust these values */
  width: 89%; /* Adjust these values */
  height: 95%; /* Adjust these values */
  border: none;
  z-index: 1;
}

/* #qrcode{
  border: 2px dashed grey;
  padding: 10px;
  border-radius: 10px;
  display: inline-block;
} */

.vote--header-cover{
  gap: 10px;
}
.vote--logo{
  flex-shrink: 0;
}
/* #heart-icon #icon svg{
  width: 17px !important;
  height: 17px !important;
} */

#vote--button{
  padding: 5px 10px;
  gap: 5px;
}

.vote--nominate-bg {
  height: 400px;
  background-image: linear-gradient(0deg, rgba(0,0,0,1) 26%, rgba(0,0,0,30%) 50%), url("");
  background-size: 100%, cover;
  background-position: top center, center;
  border-radius: 10px;
}
#loadGif{
  background-color: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#loadGif img{
  width: 100px;
}
/* mobile devices  */
@media (max-width: 768px) {
  /* .vote--heading{
    font-size: 20px !important;
  } */
  .vote--subheading{
    font-size: 12px !important;
  }
  .vote--more-info{
    font-size: 13px !important;
  }
}

.nominate--button{
  position: relative;
  top: 50px;
}

.vote--button--checked{
  padding: 5px 35px !important;
  background: #00D54F !important;
}

@media (max-width: 768px) {
  .vote--button--checked{
    background: #00D54F !important;
    font-size: 20px;
    /* make it rounded background  */
    border-radius: 50%;
    padding: 5px 25px !important;

  }
  .vote--button--unchecked{
    font-size: 20px;
    /* make it rounded background  */
    border-radius: 50%;
    padding: 5px 25px !important;

  }
}
.vote--categories, .list-reviews{
  width: 95%;
}

@media (max-width: 768px) {
  .flex-grow-mobile-0{
    flex-grow: 0 !important;
  }
}
.sticky-tab{
  position: sticky;
  top: 20px;
  transition: transform 0.4s ease-out;
}
@media (max-width: 768px) {
  .d-flex-m{
    display: flex !important;
  }
  .sticky-tab{
    top: 0;
    position: static;
    transition: none;
  }
}
.bounce {
  animation: bounce 0.6s;
}

@keyframes bounce {
  0% { transform: translateY(-20px); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

.list-reviews{
  margin: auto;
}
.vote--category{
  border-radius: 10px
}
.bg-disabled{
  background: #e4e4e4 !important;
}
.vote--category--checked{
  background: #d3f6d1 !important;
}
.cover-container{
  width: 85%;
}
@media (max-width: 768px) {
  .cover-container{
    width: 100%;
  }
}
.vote--nominate-text{
  /* position: relative;
  top: 50px; */
}
.vote--category{
  text-align: start;
}
.review-icon{
  display: inline-block;
  padding: 15px;
  border: 10px solid #EFEFEF;
  border-radius: 50px !important;
}
#desktop-social-share{
  /* position: relative;
  left: 5%; */
}
/* .vote--welcome--buttons a{
  width: 25% !important;
} */

@media screen and (max-width: 768px) {
  .ipad-resp{
    width: 100% !important;
  }
}
/* on a small screen, make the text smaller */
@media (max-width: 768px) {
  .vote--welcome--buttons a{
    /* display: block; */
    /* width: 100% !important; */
    margin-top: 10px;
    /* padding: 13px; */
  }
  .vote--button--unchecked{
    border-radius: 20px;
  }
  .vote--button--checked{
    margin: 1px;
    border-radius: 20px;
    padding: 5px 35px !important;
    margin-left: 15px !important;
  }
  #vote--button{
    margin: 1px 3px;
    height: 50% !important;
  }
  .vote--category{
    font-size: 19px !important;
  }
  .nominate--image{
    width: 96% !important;
  }
  .vote--nominate-bg{
    text-align: center;
    height: 300px !important;
  }
  .nominate--button{
    top: 5px !important;
  }
  .vote--category--city{
    display: block !important;
  }
}

.qrcodecard{
  width: 290px;
  position: relative;
}
.qrcodecard #qrcode{
  border: none;
}

.qrcodecard {
  position: relative;
  border: none;
  /* Your existing styles for the card */
}

.qrcodecard::after {
  content: '';
  position: absolute;
  top: 100%; /* Position at the bottom of the card */
  left: 50%; /* Center horizontally */
  margin-left: -20px; /* Adjust based on the triangle's size to center it */
  border-width: 20px; /* Adjust size to your preference */
  border-style: solid;
  border-color: #ffffff transparent transparent transparent; /* Match the card's background color */
}

/* small device */
@media (max-width: 768px) {
  .voter-count{
    width: 50% !important;
  }
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  background-color: #f1f1f1;
  border-radius: 50%;
  /* border: 2px solid #000; */
}

.number {
  font-size: 26px;
  font-weight: bold;
}

/*change font size for mobile */
@media (max-width: 768px) {
  .how--it--works .d-flex{
    flex-direction: column !important;
    text-align: center !important;
  }
  .local-sponsor-button, .get-started-button{
    width: 100% !important;
  }
  .footer-flex{
    flex-direction: column !important;
  }
}

.categories-list .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, margin 0.3s ease; /* Smooth transition for transform and shadow */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-top: 5px !important;

}

.categories-list{
  cursor: pointer;

}

.categories-list .card:hover {
  transform: scale(1.2); /* Scale up the card */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10; /* Ensure the card is above others */
  margin: 5px 0px !important;

  text-wrap: nowrap;
}

@keyframes bounceAndFadeOut {
  0% {
      transform: scale(1);
      opacity: 1;
  }
  50% {
      transform: scale(1.1); /* Slightly larger for the bounce effect */
  }
  100% {
      transform: scale(0.8); /* Scale down */
      opacity: 0; /* Fade out */
  }
}

@keyframes bounceFadeIn {
  0% {
      transform: scale(0.8);
      opacity: 0;
  }
  50% {
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
      opacity: 1;
  }
}

.bounce-fade-in {
  animation: bounceFadeIn 0.6s ease forwards;
}


.categories-list .card.bounce-and-fade-out {
  animation: bounceAndFadeOut 0.6s ease forwards; /* Adjust duration as needed */
}
.bg-auth{
  background-image: url("");
  background-size: cover;
  background-position: center;
  height: 100vh;
}
/* General style for larger screens */
.review--container {
  display: flex;
  flex-wrap: wrap; /* Allow items to wrap to the next line */
  gap: 2rem; /* Adjust the gap as needed */
}

/* Each flex item takes full width on smaller screens */

/* Optional: Additional responsive adjustments */
/* General style */
@media (max-width: 768px) {
  /* .review--container > div {
      flex: 0 0 calc(50% - 2rem); 
  } */
  .review--container{
    gap: .8rem !important;
  }
}

/* Optional: Adjustments for very small screens */
/* @media (max-width: 480px) {
  .review--container > div {
      flex: 0 0 100%;
  }
} */
@media (max-width: 768px) {
  #heading--restaurants{
    font-size: 2.5rem !important;
  }
}

.hide-list{
  display: none;
}

.st-label{
  font-weight: 800;
  color: black;
  font-family: 'montserrat', sans-serif;
}

.st-shares{
  color: black;
  font-family: 'montserrat', sans-serif;
}

.form-check-input {
  position: relative;
  appearance: none;
  width: 24px; /* increased width */
  height: 24px; /* increased height */
  border: 2px solid #ccc;
  border-radius: 50% !important;
  margin-right: 10px;
  cursor: pointer;
  background-color: #f8f9fa; /* change color to white-ish */
}
.pagination-container .pagination {
  display: flex;
  list-style: none;
  gap: 5px;
}
.pagination-container{
  margin-top: 20px;
}
.pagination-container .pagination a {
  padding: 5px 10px;
  border: 1px solid #ccc;
  text-decoration: none;
  color: #333;
}

.form-check-input.sm{
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

.form-check-input:checked {
  background-color: #e0e3e7;
  border-color: #b7b6b6;

}

.form-check-input:checked::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; /* increased width */
  height: 14px; /* increased height */
  background-color: #00D54F;
  border-radius: 50% !important;
  
}

.redeem-container{
  background: #f2edfd;
  border-radius: 20px;
}

.bg-expired{
  background: #fce8e8;
}

.order-online-modal-overlay {
  background: #000000e6 !important;
  position: fixed !important;
  width: 100vw;
  height: 100vh;
  top: 0 !important;
  left: 0 !important;
  z-index: 100 !important;
  display: none;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
}

.close-modal-btn {
  cursor: pointer;
}


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

.form-check-label {
  cursor: pointer;
}

.liked{
  background: #F4EFFF;
  border: 3px dashed #212529;
}

.liked .like-btn{
  background: #212529;
  border: none;
}

.follow-btn{
  height: 50px;
  min-width: 120px;
}

.follow-btn:hover{
  background: #212529;
  color: white !important;
}

.follow-btn:focus{
  background: #212529;
  color: white !important;
}

@media (max-width: 570px) {
  .follow-btn{
    width: 100%;
    margin-top: 10px;
  }
}

.deal-container {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .deal-container {
      flex-direction: column;
  }
}

@media (max-width: 767px) {
  .deal-container {
      flex-direction: column-reverse;
  }
}

.button-padding{
  padding: 10px !important;
}

.video-container {
  width: 100%; /* Full width of the parent container */
  max-width: 1080px; /* Limit the maximum width */
  aspect-ratio: 9 / 16; /* Enforces the 1080x1920 aspect ratio */
  background-color: #ffffff; /* Light grey background for visibility */
  border: 2px dashed #ccc; /* Dashed border to indicate the drop area */
  border-radius: 10px; /* Optional: Rounded corners */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999; /* Grey color for the icon */
  font-size: 24px; /* Size of the icon */
  position: relative; /* Ensure proper positioning for potential children elements */
  overflow: hidden;
}

.video-container i {
  font-size: 4rem !important;
  color: black;
  cursor: pointer;
  z-index: 2;
}

#video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#clear-video-button {
  cursor: pointer;
}

.play-icon{
  position: absolute;
  color: white !important;
}