@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

:root{
  --sl-translation: all 0.4s ease-in-out;
  --black77: hsl(0deg 0% 46.67%);
  --black30: hsl(0deg 0% 18.82%);
  --black1f: hsl(0deg 0% 12.16%);
  --black2f: hsl(210deg 8.75% 31.37%);
  --black3f: hsl(210deg 13.95% 83.14%);
  --success-color: hsl(109.41deg 40.16% 24.9%);
  --success-bg-color: hsl(108.39deg 40.26% 84.9%);
  --warning-color: hsl(40deg 40.16% 24.9%);
  --warning-bg-color: hsl(40.65deg 40.26% 84.9%);
  --error-color: hsl(349.41deg 40.16% 24.9%);
  --error-bg-color: hsl(348.39deg 40.26% 84.9%);
  --info-color: hsl(190.04deg 89.72% 49.61%);
  --info-bg-color: hsl(186.67deg 40.91% 91.37%);
  --danger-bg-color: hsl(0deg 40.26% 84.9%);
  --danger-color: hsl(0deg 65.69% 40%);
  --smoky-black: hsl(20deg 60% 1.96%);
  --sl-color-gray-800: hsl(240 3.7% 15.9%);
  --sl-color-neutral-eee: #eee;
  --sl-color-neutral-0: hsl(0, 0%, 100%);
  --white-color: hsl(0deg 0% 100%);
  --white-color1000: hsl(180, 11%, 98%);
  --white-color95: hsl(0deg 0% 95%);
  --border-radius-10: 10px;
  --sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
  --sl-shadow-small: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-medium: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-large: 0 2px 8px hsl(240 3.8% 46.1% / 12%);
  --sl-shadow-x-large: 0 4px 16px hsl(240 3.8% 46.1% / 12%);
  --primary-10: hsl(230, 100%, 68%);
  --primary-medium-light: hsl(230.06deg 100% 68.04% / 66.27%);
  --primary-light: hsl(229.89deg 97.94% 80.98% / 46.27%);
}

body::-webkit-scrollbar {
    width: 9px; 
}

body::-webkit-scrollbar-thumb {
    background-color: #888; 
    border-radius: 10px; 
    border: 3px solid #f1f1f1;
}

body::-webkit-scrollbar-track {
    background-color: #f1f1f1; 
    border-radius: 10px; 
}

.menu-toggle{
    outline: none;
    border: none;
}

.menu-toggle:hover,.menu-toggle:focus{
    outline: none;
    border: none;
}

.account-action{
    margin-top: -0.3em;
}

.hp-body-bg{
    min-height: 800px;
}

/* search form styles*/
.search-form-section{
    margin-top: -50px;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

@media (min-width: 65em) {
    .search-form-section{
        margin-top: -70px;
    }
}


/* ............... */
/* form tab styles */
/* ............... */
.tabs {
    display: flex;
    position: relative;
    background-color: #e6eef9;
    padding-top: 0.3rem;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: max-content;
    height: max-content;
    gap: 0.7em;
  }
  
  .tabs * {
    z-index: 2;
  }
  
  .search-form-choice input[type="radio"] {
    display: none;
  }
  
  .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    padding-left: 0.4em;
    padding-right: 0.4em;
    width: max-content;
    min-width: 50px;
    font-size: .8rem;
    color: black;
    font-weight: 500;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    cursor: pointer;
    transition: color 0.15s ease-in;
  }
  
  .container input[type="radio"]:checked + label {
    color: var(--primary-10);
  }
  
  .container input[id="flight-radio"]:checked ~ .glider {
    transform: translateX(0);
  }
  
  .container input[id="hotel-radio"]:checked ~ .glider {
    transform: translateX(100%);
  }
  
  .glider {
    position: absolute;
    display: flex;
    height: 25px;
    width: max-content;
    min-width: 71px;
    z-index: 1;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: 0.25s ease-out;
    padding: 0.3em 0.3em 0 ;
  }

/* ................... */
/* end form tab styles */
/* ................... */
  
/* .......................... */
/* flights search form styles */
/* .......................... */
.search-form-container{
  border-radius: var(--border-radius-10);
  min-height: 100px;
  padding: 1.2em 0.5em 0.5em;
  box-shadow: var(--sl-shadow-medium);
}

.search-form-container.result{
  padding: 0em 0.5em 0.5em;
}

.flight-search-form.single-destination{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.flight-search-form.single-destination .single-destination-container{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

@media (min-width: 55em) {
  .flight-search-form.single-destination{
      gap: 4px;
  }

  .flight-search-form.single-destination .single-destination-container{
      gap: 4px;
  }
}

@media (min-width: 65em) {
  .flight-search-form.single-destination{
      gap: 0.8em;
  }

  .flight-search-form.single-destination .single-destination-container{
      flex-direction: row;
  }
}

.flight-search-form.single-destination .search-input-container.place-search-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (min-width: 55em) {
  .flight-search-form.single-destination .search-input-container.place-search-container{
      gap: 4px;
      flex-direction: row;
  }
}

@media (min-width: 65em) {
  .flight-search-form.single-destination .search-input-container.place-search-container{
      width: 50%;
  }
}

.flight-search-form.single-destination .search-info-container{
  display: flex;
  width: 100%;
  gap: 1.5em;
  justify-content: center;
  align-items: center;
  padding: 0.5em 0;
}

.search-input-cover{
  background-image: linear-gradient(to bottom, #f1f4fe 0, #f1f4fe 100%);
  display: flex;
  flex-direction: column;
  padding: 0.4em 0.4em 0.4em 0.8em;
  gap: 0.2em;
  cursor: pointer;
  min-height: 60px;
  max-height: 80px;
}

@media (min-width: 65em) {
  .search-input-cover{
      min-width: 70px;
  }
}

.flight-search-form.single-destination .search-input-cover.place-input{
  width: 100%;
}

.flight-search-form.single-destination .search-input-cover.place-input.from{
  border-top-left-radius: var(--border-radius-10);
}


@media (min-width: 55em) {
  .flight-search-form.single-destination .search-input-cover.place-input{
    width: 50%;
  }

  .flight-search-form.single-destination .search-input-cover.place-input.to{
      border-top-right-radius: var(--border-radius-10);
  }
}

@media (min-width: 65em) {
  .flight-search-form.single-destination .search-input-cover.place-input.from{
      border-bottom-left-radius: var(--border-radius-10);
  }

  .flight-search-form.single-destination .search-input-cover.place-input.to{
      border-bottom-right-radius: 0px;
      border-top-right-radius: 0px;
  }
}

.flight-search-form.single-destination  .search-info-wrapper{
  display: flex;
  gap: 3px;
  width: 100%;
  flex-direction: column;
}

.flight-search-form.single-destination .time-container{
  display: flex;
  gap: 3px;
  width: 100%;
}

select.currency{
  border: 0 none;
  background-color: transparent;
  outline: none;
}

@media (min-width: 55em) {
  .flight-search-form.single-destination  .search-info-wrapper{
      gap: 4px;
      flex-direction: row;
  }

  .flight-search-form.single-destination .time-container{
      width: 60%;
  }
}

.flight-search-form.single-destination .search-input-cover.date{
  width: 50%;
}

.flight-search-form.single-destination .search-input-cover.passenger{
  width: 100%;
  border-bottom-right-radius: var(--border-radius-10);
  border-bottom-left-radius: var(--border-radius-10);
}

@media (min-width: 55em) {
  .flight-search-form.single-destination .search-input-cover.passenger{
      border-bottom-left-radius: 0;
  }

  .flight-search-form.single-destination .search-input-cover.date.left{
      border-bottom-left-radius: var(--border-radius-10);
  }
}

@media (min-width: 65em) {
  .flight-search-form.single-destination .search-input-cover.date.left{
      border-bottom-left-radius: 0px;
  }
  
  .flight-search-form.single-destination .search-input-cover.passenger{
      width: 50%;
      border-top-right-radius: var(--border-radius-10);
      border-bottom-right-radius: var(--border-radius-10);
  }

  .flight-search-form.single-destination .search-input-cover.passenger{
      width: 40%;
  }
}

.flight-search-form.single-destination .search-btn-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 55em) {
  .flight-search-form.single-destination .search-btn-container{
      width: 25%;
  }

}

.search-btn{
  background-color: var(--primary-10);
  width: 100%;
  color: #fff;
  border-radius: 0;
  border: none;
  cursor: pointer;
  border-radius: var(--border-radius-10);
  min-height: 60px;
  min-height: 62px;
}

.search-btn:hover,.search-btn:focus{
  outline: none;
  border: none;
}




.flight-search-form.multi-destination{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.flight-search-form.single-destination .search-btn{
  max-width: 100px;
  max-height: 50px;
  min-width: max-content;
  min-height: max-content;
  padding: 0.4em 1.4em;
  border-radius: 1.5em;
}

.flight-search-form.multi-destination .search-btn{
  max-width: 100px;
  max-height: 50px;
  min-width: max-content;
  min-height: max-content;
  padding: 0.4em 1.4em;
  border-radius: 1.5em;
}

@media (min-width: 55em) {
  .flight-search-form.multi-destination{
      gap: 4px;
  }

  

}

.flight-search-form.multi-destination .flights-wrapper{
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.flight-search-form.multi-destination .flight-cover{
  display: flex;
  width: 100%;
  gap: 3px;
  position: relative;
  flex-direction: column;
}

.flight-search-form.multi-destination .flight-cover > *{
  flex: 1;
}

.flight-search-form.multi-destination .search-input-cover.from{
  border-top-left-radius: var(--border-radius-10);
  border-top-right-radius: var(--border-radius-10);
}

.flight-search-form.multi-destination .search-input-cover.date{
  border-bottom-right-radius: var(--border-radius-10);
  border-bottom-left-radius: var(--border-radius-10);
  
}

.flight-search-form.multi-destination .cancel-cover{
  position: absolute;
  right: -0.5em;
  top: -0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 23px;
  width: 23px;
  background-color: red;
  border-radius: 1.5em;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
}


.flight-search-form.multi-destination .search-info-container{
  display: flex;
  gap: 2.5em;
  padding-top: 1em;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media (min-width: 55em) {
  .flight-search-form.multi-destination .flight-cover{
      flex-direction: row;
  }

  .flight-search-form.multi-destination .flight-cover > *{
      flex: 1;
  }

  .flight-search-form.multi-destination .search-input-cover.from{
      border-top-right-radius: 0;
      border-bottom-left-radius: var(--border-radius-10);
  }

  .flight-search-form.multi-destination .search-input-cover.date{
      border-bottom-left-radius: 0;
      border-top-right-radius: var(--border-radius-10);
  }
}

@media (min-width: 65em) {
  .flight-search-form.multi-destination .search-info-container{
    gap: 1.5em;
  }
}

.flight-search-form.multi-destination .search-info-cover{
  display: flex;
  gap: 4px;
  width: 100%;
  flex-direction: column;
}

@media (min-width: 55em) {
  .flight-search-form.multi-destination .search-info-cover{
      gap: 4px;
      flex-direction: row;
  }
}

.flight-search-form.multi-destination .search-input-cover.passengers{
  width: 100%;
  border-top-left-radius: var(--border-radius-10);
  border-bottom-left-radius: var(--border-radius-10);
  border-top-right-radius: var(--border-radius-10);
  border-bottom-right-radius: var(--border-radius-10);
  cursor: pointer;
}

@media (min-width: 55em) {
  .flight-search-form.multi-destination .search-input-cover.passengers{
      width: 60%;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
  }
}

.passengers-field{
  position: relative;
}

.passengers-field::after{
  content: '';
  position: absolute;
  right: 1em;
  top: 1em;
  border: 0.3em solid;
  border-color: hsl(0deg 0% 46.67%) transparent transparent;
  cursor: pointer;
}

.opened.passengers-field::after{
  top: 0.7em;
  border-color: transparent transparent hsl(0deg 0% 46.67%);
  cursor: pointer;
}

.flight-search-form.multi-destination .opened.search-input-cover.passengers::after{
  top: 0.7em;
  border-color: transparent transparent hsl(0deg 0% 46.67%);
  cursor: pointer;
}

.flight-search-form.multi-destination .add-flight-container{
  width: 60%;
}

.flight-search-form.multi-destination .add-flight-btn{
  height: 80%;
  border: none;
  border-radius: var(--border-radius-10);
  padding: 0.5em 1em;
  display: flex;
  align-items: center;
  gap: 1em;
  cursor: pointer;
}

.flight-search-form.multi-destination  .search-btn-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 55em) {
  .flight-search-form.multi-destination .add-flight-container{
      width: 40%;
      display: flex;
      justify-content: end;
      align-items: center;
  }
}

.search-option-container {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 1.5em 1em;
}

@media (min-width: 55em) {
  .search-option-container{
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
  }
}

.input-label-cover > .label{
  font-size: 0.8rem;
  padding: 0.3em 0;
  font-weight: 600;
  color: #1f1f1f;
  margin: 0;
}

.search-input-wrapper{
  margin-top: auto;
}

.search-input-field{
  border: none;
  background-color: transparent;
  outline: none;
  padding-left: 0;
  font-size: 0.9rem;
  width: 100%;

}

.passenger-picker{
  position: absolute;
  background-color: #f9f9ff;
  max-width: 350px;
  min-width: 250px;
  top: 110%;
  left: 0;
  display: none;
  padding: 0.8em 0.5em;
  border-radius: var(--border-radius-10);
  min-height: 100px;
  width: 100%;
  z-index: 20;
  box-shadow: 0 1px 2px hsl(240 3.8% 46.1% / 12%);
  gap: 0.1em;

}

.adult-select{
  border-radius: 5px;
  padding: 0.8em 0;
  border: 1px solid hsl(210deg 13.95% 83.14%);
  outline: none;
  width: 100%;
  margin-top: 0.2em;
}

.adult-select:focus{
  border: 1px solid hsl(210deg 13.95% 83.14%);
  outline: none;
}

.passenger-counters-container{
  padding: 0.5em 0;
  display: flex;
  gap: 1.2em;
  align-items: center;
}

.passenger-counters-cover{
  display: flex;
  gap: 1em;
}

.passenger-counters{
  height: 30px;
  width: 30px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

.passenger-number{
  height: 30px;
  width: 30px;
  text-align: center;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 1.1rem;
}

.passenger-number:hover, .passenger-number:focus{
  border: none;
  outline: none;
}

.flight-type,.flight-type:focus{
  outline: none;
  border: 1px solid hsl(210deg 13.95% 83.14%);
}

.flight-switch-container{
  position: relative;
}

.flight-switch-cover{
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  right: -1.5em;
  left: -1.5em;
}

.flight-switch-btn{
  height: 40px;
  width: 40px;
  border-radius: 1.5em;
  border: 3.5px solid #ffffff;
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.switch-icon{
  position: absolute;
  font-size: 1rem;
  color: #1f1f1f;
  font-weight: 500;
}

.switch-icon.top::before{
  content: "\21BC";

}

.switch-icon.bottom::after{
  content: "\21C1";
}

/* auto complete ui */
.autocomplete {
  position: relative;
}

.suggestions {
  border-top: none;
  max-height: 180px;
  overflow-y: auto;
  position: absolute;
  top: 103%;
  left: 0;
  width: 100%;
  background-color: #f9f9ff;
  z-index: 1000;
}

@media (min-width: 65em) {
  .suggestions {
      width: 130%;
  }
}

.suggestions::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.suggestions::-webkit-scrollbar-thumb {
    background-color: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

.suggestions::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Color when hovered */
}

.suggestions::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
}

/* For Firefox */
.suggestions {
    scrollbar-width: thin; /* Makes scrollbar thinner */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

/* For Internet Explorer and Edge */
.suggestions {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
        
.suggestion-item {
  padding: 0.3em;
  cursor: pointer;
  display: flex;
  gap: 0.5em;
}
        
.suggestion-item:hover, .flight-destination-suggestion-item:hover {
  background-color: #f0f0f0;
}

.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.hover\:font-hairline:hover{font-weight:100}

.plane-icon{
  justify-content: center;
  align-items: center;
}

.plane-icon > *{
  color: #777777;
  font-size: 0.8rem;
}

.airport-data > strong{
  font-size: 0.7rem;
}

.airport-loc{
  font-size: 0.7rem;
}

.loc{
  font-size: 0.6rem;
  padding-top:0.4em;
}

.multi-city-init{
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  width: max-content;
  color: inherit;
}

.flex-1{flex:1 1 0%}

/* ........................ */
/* end flight search styles */
/* ........................ */

/* ................... */
/* hotel search styles */
/* ................... */
.hotel-search-form.hotels-search-destination{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.hotel-search-form.hotels-search-destination .hotels-search-container{
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

@media (min-width: 55em) {
  .hotel-search-form.hotels-search-destination{
      gap: 4px;
  }

  .hotel-search-form.hotels-search-destination .hotels-search-container{
      gap: 4px;
  }
}

@media (min-width: 65em) {
  .hotel-search-form.hotels-search-destination{
      gap: 0.8em;
  }

  .hotel-search-form.hotels-search-destination .hotels-search-container{
      flex-direction: row;
  }
}

.hotel-search-form.hotels-search-destination .search-input-container.place-search-container{
  width: 100%;
}

@media (min-width: 65em) {
  .hotel-search-form.hotels-search-destination .search-input-container.place-search-container{
      width: 40%;
  }
}

.hotel-search-form.hotels-search-destination .search-info-container{
  display: flex;
  width: 100%;
  gap: 1.5em;
  justify-content: center;
  align-items: center;
  padding: 0.5em 0;
}

.hotel-search-form.hotels-search-destination .search-input-cover.place-input{
  width: 100%;
  border-top-left-radius: var(--border-radius-10);
  border-top-right-radius: var(--border-radius-10);
}

@media (min-width: 65em) {
  .hotel-search-form.hotels-search-destination .search-input-cover.place-input{
      border-top-right-radius: 0px;
      border-bottom-left-radius: var(--border-radius-10);
  }
}

.hotel-search-form.hotels-search-destination .search-info-wrapper{
  display: flex;
  gap: 3px;
  width: 100%;
  flex-direction: column;
}

.hotel-search-form.hotels-search-destination .check-container{
  display: flex;
  gap: 3px;
  width: 100%;
}


@media (min-width: 55em) {
  .hotel-search-form.hotels-search-destination .search-info-wrapper{
      flex-direction: row;
      gap: 4px;
  }

  .hotel-search-form.hotels-search-destination .check-container{
      width: 60%;
  }
}

.hotel-search-form.hotels-search-destination .search-input-cover.date{
  width: 50%;
}

.hotel-search-form.hotels-search-destination .search-input-cover.guest{
  width: 100%;
  border-bottom-left-radius: var(--border-radius-10);
  border-bottom-right-radius: var(--border-radius-10);
}

@media (min-width: 55em) {
  .hotel-search-form.hotels-search-destination .search-input-cover.guest{
      border-bottom-left-radius: 0;
  }

  .hotel-search-form.hotels-search-destination .search-input-cover.checkin{
      border-bottom-left-radius: var(--border-radius-10);
  }
}

@media (min-width: 65em) {
  .hotel-search-form.hotels-search-destination .search-info-wrapper{
      gap: 4px;
      width: 60%;
  }

  .hotel-search-form.hotels-search-destination .search-input-cover.guest{
      width: 40%;
      border-top-right-radius: var(--border-radius-10);
      border-bottom-right-radius: var(--border-radius-10);
  }

  .hotel-search-form.hotels-search-destination .search-input-cover.checkin{
      border-bottom-left-radius: 0px;
  }

}


.hotel-search-form.hotels-search-destination .search-btn-container{
  width: 100%;
  display: flex;
  justify-content: center;
}

.hotel-search-form.hotels-search-destination .search-btn{
  max-width: 100px;
  max-height: 50px;
  min-width: max-content;
  min-height: max-content;
  padding: 0.4em 1.4em;
  border-radius: 1.5em;
}

@media (min-width: 55em) {
  .hotel-search-form.hotels-search-destination .search-btn{
      max-width: 100px;
      max-height: 50px;
      min-width: max-content;
      min-height: max-content;
      padding: 0.4em 1.4em;
      border-radius: 1.5em;
  }
}

/* ............................ */
/* end hotel search form styles */
/* ............................ */

/* multi items */
.MultiCarousel {
  float: left;
  overflow: hidden;
  position: relative;
}

.MultiCarousel.price-calender-container{
  width: 94%;
  box-shadow: var(--sl-shadow-small);
}

.MultiCarousel.price-cards-container{
  width: 100%;
  height: 100%;
}

.MultiCarousel.hd-attractions-container{
  width: 100%;
  height: 100%;
}

.MultiCarousel.hd-travel-means-container{
  width: 100%;
  height: 100%;
}

.MultiCarousel.hd-img-container{
  width: 100%;
  height: 100%;
}

@media (min-width: 65em) {
  .MultiCarousel.price-calender-container{
    width: 100%;
  }

}

.MultiCarousel .MultiCarousel-inner {
  transition: 1s ease all;
  float: left;
  display: flex;
  align-items: center;
}

.MultiCarousel .MultiCarousel-inner .item {
  float: left;
}

.MultiCarousel.price-cards-container .MultiCarousel-inner .item {
  float: left;
  height: 300px;
  margin: 0 5px;
}

.MultiCarousel.hd-attractions-container .MultiCarousel-inner .item {
  float: left;
  height: 250px;
  margin: 0 5px;
}

.MultiCarousel.hd-travel-means-container .MultiCarousel-inner .item {
  float: left;
  height: 270px;
  margin: 0 5px;
}

@media (min-width: 768px) {
  .MultiCarousel.hd-travel-means-container .MultiCarousel-inner .item {
    height: 270px;
  }

  .MultiCarousel.hd-attractions-container .MultiCarousel-inner .item {
    width: 210px !important;
  }
}

.MultiCarousel.hd-img-container .MultiCarousel-inner{
  min-width: max-content !important;
}

.MultiCarousel.hd-img-container .MultiCarousel-inner .item {
  float: left;
  height: max-content;
  width: 100% !important;
  margin: 0 5px;
}

.MultiCarousel.price-calender-container .MultiCarousel-inner .item > .pad15 {
  margin: 10px 0;
  display: flex;
  border-left: 1px solid var(--bs-gray-300);
  border-right: 1px solid var(--bs-gray-300);
  gap: 1px;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.flight-price-card {
  display: flex;
  height: 300px;
  max-width: 250px;
  /* background-color: #22Bc22; */
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.MultiCarousel.hd-attractions-container .MultiCarousel-inner .item > .pad15 {
  display: flex;
  height: 100%;
  /* background-color: #eeeeee; */
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.MultiCarousel.hd-attractions-container .MultiCarousel-inner .img-wrapper{
  background-repeat: no-repeat; 
  height: 250px;
  background-color: #eeeeee; 
  width: 100%;
  background-size: 100% 100%;
}

@media (min-width: 768px) {
  .MultiCarousel.hd-attractions-container .MultiCarousel-inner .img-wrapper{
    height: 150px;
    width: 95%;
  }
}

.MultiCarousel.hd-travel-means-container .MultiCarousel-inner .item > .pad15 {
  display: flex;
  height: 100%;
  background-color: #eeeeee;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.MultiCarousel.hd-img-container .MultiCarousel-inner .item > .pad15 {
  display: flex;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.scroll-btn{
  border-radius: 1.5em;
  border: none;
  outline: none;
  padding: 0.3em;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #f1f4fe 0, #f1f4fe 100%);
  color: var(--bs-gray);
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  box-shadow: var(--sl-shadow-small);
}


.scroll-btn:hover,.scroll-btn:focus{
  outline: none;
  background-color: #49e5fa9a;
}


.MultiCarousel .leftLst, .MultiCarousel .rightLst {
  position: absolute;
  top: calc(50% - 15px);
}

.MultiCarousel.hd-img-container .leftLst,.MultiCarousel.hd-img-container .rightLst{
  top: auto;
  bottom: 5px;
  z-index: 20;
  height: 40px;
  width: 40px;
}

.MultiCarousel.hd-travel-means-container .leftLst,
.MultiCarousel.hd-travel-means-container .rightLst,
.MultiCarousel.hd-attractions-container .leftLst,
.MultiCarousel.hd-attractions-container .rightLst{
  top: auto;
  bottom: 5px;
  z-index: 20;
  height: 35px;
  width: 35px;
}

.MultiCarousel.hd-img-container .leftLst,
.MultiCarousel.hd-travel-means-container .leftLst,
.MultiCarousel.hd-attractions-container .leftLst{
  right: 55px;
  left: auto;
}

.MultiCarousel .leftLst {
  left: 0;
}

.MultiCarousel.hd-img-container .rightLst, 
.MultiCarousel.hd-travel-means-container .rightLst, 
.MultiCarousel.hd-attractions-container .rightLst{
  right: 5px;
}

.MultiCarousel .rightLst {
  right: 0;
}

/* multi items */

/*  */
/* aside section */
/*  */
.aside-card{
  min-height: 100px;
  padding: 1.2em 1em;
}

.bg-white-purple{
  background-image: linear-gradient(to bottom, #f1f4fe 0, #f1f4fe 100%) !important;
}

.border-r-10{
  border-radius: var(--border-radius-10) !important;
}

.progress-bar-container{
  width: 95%;
  /* justify-content: center; */
  display: flex;
  padding-top: 0.2em;
}

@media (min-width: 55em) {
  .progress-bar-container{
    width: 98%;
  }
}

.flight-card-detail {
  display: none;
}

.hotel-detail-section {
  display: none;
}

@media (min-width: 65em) {
  .progress-bar-container{
    width: 98%;
  }
}
/*  */
/* end aside section */
/*  */

/*  */
/* flight filtering container */
/*  */
.filtering-container{
  min-height: 50px;
}

/*  */
/* end flight filtering container */
/*  */

/* flight result card */
.flight-result-card .top-content{
  min-height: 120px;
}

.hotel-result-card .top-content{
  min-height: 200px;
}

.hotel-result-card .hotel-image-container{
  height: 320px;
  overflow: hidden;
}

.hotel-image-container .hotel-image{
  height: 320px;
  width: 100%;
  transition: all 0.4s ease-in-out;
}

.hotel-image-container .hotel-image:hover{
  transform: scale(1.05);
}

.flight-result-card  .right-content{
  width: 30%;
}

.flight-result-card  .left-content{
  width: 20%;
}

.flight-result-card .center-content{
  width: 50%;
}

.flight-result-card .select-ticket-cta,.hotel-result-card .select-ticket-cta{
  border: none;
  outline: none;
  padding: 1.2em;
}

.flight-result-card .select-ticket-cta,.hotel-result-card .select-ticket-cta:focus{
  outline: none;
  border: none;
}

.hotel-result-card .center-content{
  min-height: 100px;
}

.hotel-result-card .right-content{
  min-height: 50px;
}

@media (min-width: 55em) {
  .flight-result-card .select-ticket-cta,.hotel-result-card .select-ticket-cta{
    padding: 0.7em;
    font-size: 15px;
  }

  .hotel-result-card .hotel-image-container{
    height: 200px;
    width: 240px;
  }

  .hotel-image-container .hotel-image{
    height: 200px;
    width: 240px;
  }

  .hotel-result-card .center-content{
    width: 50%;
  }

  .hotel-result-card .right-content{
    width: 25%;
  }
}

.radius-circle{
  border-radius: 50% !important;
}

.hotel-image-container .swiper-button-next{
  right: 10%;
  height: 40px;
  width: 40px;
}

.hotel-image-container .swiper-button-next svg{
  height: 100px;
  width: 100px;
}

.hotel-image-container .swiper-button-prev{
  left: 10%;
  height: 40px;
  width: 40px;
}

.hotel-image-container .swiper-button-prev svg{
  height: 150px;
  width: 150px;
}

@media (min-width: 55em) {
  .hotel-image-container .swiper-button-next{
    height: 30px;
    width: 30px;
  }
  
  .hotel-image-container .swiper-button-next svg{
    height: 150px;
    width: 150px;
  }
  
  .hotel-image-container .swiper-button-prev{
    height: 30px;
    width: 30px;
  }
  
  .hotel-image-container .swiper-button-prev svg{
    height: 150px;
    width: 150px;
  }
}

@media (min-width: 65em) {
  .flight-result-card  .left-content{
    width: 15%;
  }
  
  .flight-result-card .center-content{
    width: 55%;
  }

  
}

.hotel-image-container .swiper-button-prev{
  left: 10%;
  height: 40px;
  width: 40px;
}

.hotel-image-container .swiper-button-prev svg{
  height: 150px;
  width: 150px;
}

@media (min-width: 55em) {
  .hotel-image-container .swiper-button-next{
    height: 30px;
    width: 30px;
  }
  
  .hotel-image-container .swiper-button-next svg{
    height: 150px;
    width: 150px;
  }
  
  .hotel-image-container .swiper-button-prev{
    height: 30px;
    width: 30px;
  }
  
  .hotel-image-container .swiper-button-prev svg{
    height: 150px;
    width: 150px;
  }
}

.swiper-button-next, .swiper-button-prev{
  height: 30px !important;
} 

.swiper-button-next:after, .swiper-button-prev:after {
  background-size: 7px 20px !important;
  content: "";
}

.swiper-button-next:after, .swiper-button-prev:after {
  font-size: 15px !important;
}


@media (min-width: 1024px) {
  .swiper-button-next, .swiper-button-prev{
      height: 50px !important;
  } 
  
  .swiper-button-next{
      right: 5%;
  }

  .swiper-button-prev{
      left: 10%;
  }
}


.flight-price-cents{
  margin-left: -5px;
}

.flight-price-currency{
  margin-right: -2px;
}

.flight-info{
  min-height: 15%;
  padding-bottom: 0.2em;
  position: relative;
}

.flight-tag{
  position: absolute;
}

.label-container{
  padding: 0.3em 0;
  position: absolute;
  right: 0;
  left: 0;
  top: -0.9em;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.label-container .label{
  padding: 0.1em 1.4em;
  font-weight: 400;
  border-radius: 1.5em;
  color: var(--white-color1000);
  font-size: 0.6rem;
  text-align: center;
}

.label-container .label.cheap{
  background-color: #22Bc22;
  display: none;
}

.label-container .label.fast{
  background-color: #ff7f7f;
  display: none;
}

.label-container .label.direct{
  background-color: #a2cfff;
  display: none;
}

@media (min-width: 55em) {
  .label-container{
      padding-left: 0.5em;
  }

  .label-container .label{
      font-size: 0.7rem;
      padding: 0.1em 1.8em;
      font-weight: 500;
  }
}



.center-content .flight-card-header{
  height: 30%;
}

.center-content .flight-card-body{
  height: 70%;
}

.center-content .flight-destination-card{
  height: 100%;
}

.center-content .flight-destination-main{
  height: 80%;
}

.center-content .time{
  font-size: 0.5rem;
}

@media (min-width: 65em) {
  .center-content .time{
    font-size: 0.7rem;
  } 
}

.center-content .flight-destination-center{
  width: 80%;
}

@media (min-width: 55em) {
  .center-content .flight-destination-center{
    width: 50%;
  }
}

@media (min-width: 65em) {
  .center-content .flight-destination-center{
    width: 60%;
  }
}

.center-content .dot{
  height: 6px;
  width: 6px;
  background-color: var(--primary-10);
  border-radius: 50%;
}

.center-content .box{
  border-radius: 0 !important;
  height: 8px;
  width: 8px;
  background-color: #555;
}

.center-content .path{
  border-top: 1px dotted #888;
  top: 0.25em;
  z-index: 0;
}

.center-content .airport-code{
  font-size: 0.5rem;
}

.trip-time{
  top: -1.5em;
  font-size: 0.5rem;
}

.flight-detail-section{
  height: 400px;
}

/* end flight result card */

.primary-10-color{
  color: var(--primary-10) !important;
}

.c-txt{
  color: var(--bs-body-color) !important;
}

.c-txt-light{
  color: var(--bs-gray-500) !important;
}

.sm-shadow{
  box-shadow: var(--sl-shadow-small) !important;
}

.br-circle{
  border-radius: 100% !important;
}

@media (min-width:768px) {
  .w-md-75{
    width: 75% !important;
  }

  .w-md-50{
    width: 50% !important;
  }
}


/* flight card result tabs */

.tab-radio {
  display: none;
}

.tab-label {
  padding: 5px 10px;
  cursor: pointer;
  display: inline-block;
  color: #555;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

/* Style for the active tab when the corresponding radio is checked */
.tab-radio:checked + .tab-label {
  color: var(--primary-10);
  border-bottom-color: var(--primary-10);
}

.tab-content {
  display: none;
  height: 340px;
}

.tab-radio:checked ~ .tab-content {
  display: block;
}

.tabs-result {
  display: flex;
  border-bottom: 0.5px solid #ccc;
}

/* end */

/* flight price cards styles*/
.buy-ticket-cta{
  width: 100%;
  background-color: var(--bs-gray-500);
  color: var(--primary-10);
}

.ribbon-wrap {
  width: 80px;
  height: 100px;
  position: absolute;
  top: 0px;
  left: 0px;
  pointer-events: none;
  overflow: hidden;
}
.ribbon {
  width: 130px;
  font-size: 0.5rem;
  text-align: center;
  padding: 3px 0;
  background: #FF6B6B;
  color: #fff;
  position: absolute;
  transform: rotate(-45deg);
  right: -17px;
  top: 15%;
}

/* end flight price cards styles */

/* flight detail section  styles*/
.flight-detail-wrapper{
  height: 350px;
}

.flight-stop-detail-header{
  min-height: 35px;
}

.flight-detail-cover{
  overflow-y: auto;
}

.flight-detail-cover::-webkit-scrollbar {
  width: 9px; 
}

.flight-detail-cover::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 10px; 
  border: 3px solid #f1f1f1;
}

.flight-detail-cover::-webkit-scrollbar-track {
  background-color: #f1f1f1; 
  border-radius: 10px; 
}
/* end flight detail section */

/* hotel card styles */

.hotel-detail-container{
  height: 365px;
  overflow-y: auto;
}

.hotel-detail-container::-webkit-scrollbar {
  width: 9px; 
}

.hotel-detail-container::-webkit-scrollbar-thumb {
  background-color: #888; 
  border-radius: 10px; 
  border: 3px solid #f1f1f1;
}

.hotel-detail-container::-webkit-scrollbar-track {
  background-color: #f1f1f1; 
  border-radius: 10px; 
}

.hotel-images-section{
  min-height: 300px;
}
/* end hotel card styles */

.btn-arrow {
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  margin: 5px 0;
  position: relative;
  box-shadow: var(--sl-shadow-small);
}

/* Up Arrow */
.btn-arrow.up::before {
  content: '';
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(-135deg);
}

/* Down Arrow */
.btn-arrow.down::before {
  content: '';
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  transform: rotate(45deg);
}

.btn-arrow:hover {
  background-color: lightgray;
}

/* vertical carousel */
.vertical-carousel-container {
  overflow: hidden;
  position: relative;
}

.vertical-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 0.5s ease-in-out;
}

.vertical-carousel-item {
  opacity: 0.3;
  transition: opacity 0.5s ease-in-out;
}

.vertical-carousel-item.focused {
  opacity: 1;
}

.flight-destination-card.vertical-carousel-item:not(.focused) {
  display: none !important; /* Hide non-focused items */
}

/* end vertical carousel */

/* load more styles */
.load-more-cover{
  width: 160px;
}

.load-more-cta{
  border-radius: 0;
  border: none;
  box-shadow: var(--sl-shadow-small);
  transition: all 0.4s ease-in-out;
  background-color: var(--primary-light);
}

.load-more-cta:focus,.load-more-cta:hover{
  box-shadow: var(--sl-shadow-medium);
  outline: none;
  border: none;
  background-color: var(--primary-medium-light);
  color: #e6eef9;
}

.load-more-cta:hover{
  transform: scale(1.01);
}
/* end load more styles */

/* hotel detail styles */
.hotel-detail-container .hotel-img-cover{
  width: 100%;
  min-height: 280px;
}

.hotel-detail-container .hotel-big-img-cover{
  height: 280px;
  width: 100%;
  border-radius: var(--border-radius-10);
}

.hotel-detail-container .hotel-big-img{
  height: 280px;
  width: 100%;
}

.hotel-detail-container .hotel-thum-cover{
  display: flex;
  align-items: center;
  width: 100%;
}

.hotel-detail-container .hotel-thum-cover.inner{
  gap: 0.3em;
}

.hotel-detail-container .hotel-sm-img-cover{
  height: 50px;
  width: 70px;
  max-width: 70px;
}

.hotel-detail-container .hotel-sm-img{
  height: 100%;
  width: 100%;
  border-radius: var(--border-radius-10);
}

@media (min-width: 55em) {
  .hotel-detail-container .hotel-img-cover{
      width: 100%;
  }

  .hotel-detail-container .hotel-thum-cover.inner{
    gap: 0.1em;
  }

  .hotel-detail-container .hotel-big-img-cover{
    height: 280px;
  }
  
  .hotel-detail-container .hotel-big-img{
    height: 280px;
    width: 100%;
  } 
}

.mySwiper .swiper-slide-thumb-active {
  opacity: 0.5;
}

/* General button styles */
.slide-btn{
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
  border: none;
  border-radius: 50%; /* Makes the buttons round */
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the content horizontally and vertically */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional shadow */
  transition: background-color 0.3s ease;
  padding: 0; /* Remove default padding */
  position: absolute;
  font-size: 0.5rem;
}

.bg-transparent{
  background: transparent !important;
}

.swiper-button-next.slide-btn{
  right: 10%;
}

.swiper-button-prev.slide-btn{
  left: 10%;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev,
.swiper-button-prev, 
.swiper-container-rtl .swiper-button-next{
    background-image: none;
}

/* Hover effect */
.slide-btn:hover {
  background-color: #e0e0e0;
}

/* SVG icon styling */
.slide-btn svg {
  width: 24px;
  height: 24px;
  stroke: #333; /* Arrow color */
  transition: stroke 0.3s ease;
  display: block; /* Ensure the SVG behaves as a block element */
  position: absolute;
}

/* Change arrow color on hover */
.slide-btn:hover svg {
  stroke: #555;
}
/* end hotel detail styles */

.chart-container {
  width: 50%;
  margin: 20px auto;
  position: relative;
}

canvas {
  position: relative;
}

/* available rooms style */
.available-room-container{
  min-height: 70px;
  max-height: 70px;
}

.book-room-cta{
  background-color: var(--primary-10);
  color: #fff;
  transition: all 0.4s ease-in-out;
}

.book-room-cta:hover, .book-room-cta:focus{
  background-color: var(--primary-light);
}

.hotel_gate_info__logo{
  /* transform: scale(0.3); */
  width: 30%;
}

@media (min-width: 768px) {
  .hotel_gate_info__logo{
    width: 8em;
  }
}

.hotel-room-img-cover{
  height: 60px;
  width: 80px;
  overflow: hidden;
}

.hotel-room-img{
  height: 100%;
  width: 100%;
}
/* end available room style */

.border-top{
  border-top: 2px solid var(--bs-gray-300) !important;
}

.more-items-toggle-btn{
  cursor: pointer;
}

/* popular destination flight result page cards */
.flight-result-popular-destination .popular-destination-card{
  min-height: 180px;
}

.flight-result-popular-destination .swiper-pagination-progressbar-fill{
  background: var(--primary-10) !important;
}

.flight-popular-destination-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{
  background: var(--primary-10);
}

.popular-destination-pagination{
  bottom: 0 !important;
  top: auto !important;
  right: 20% !important;
  left: 20% !important;
  width: 50% !important;
  color: var(--primary-10) !important;
}

.text-body-color{
  color: var(--bs-body-color) !important;
}

.flight-saved-search{
  transition: all 0.4s ease-in-out;
}

.flight-saved-search:hover{
  color: var(--primary-10);
  width: max-content;
}

.follow-icon{
  color: var(--bs-body-color);
  transition: all 0.4s ease-in-out;
}

.follow-icon:hover{
  color: var(--primary-10);
}

/* end popular destination flight result card */

.skeleton-cover {
  width: max-content;
  height: max-content;
  background: #f9f9f9; /* Lighter background color */
  background: linear-gradient(110deg, #f7f7f7 8%, #ffffff 18%, #f7f7f7 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

.skeleton-light {
  width: max-content;
  height: max-content;
  background: #f9f9f9; /* Lighter background color */
  background: linear-gradient(110deg, #f7f7f7 8%, #ffffff 18%, #f7f7f7 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

.skeleton-light > *{
opacity: 0;
  pointer-events: none;
}

.skeleton {
  width: max-content;
  height: max-content;
  background: #eee;
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  border-radius: 5px;
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}
.skeleton > *{
  opacity: 0;
  pointer-events: none;
}

@keyframes shine {
  to {
      background-position-x: -200%;
  }
}

/* Skeleton loader styling */
.skeleton-loader {
  width: 100%;
  height: 180px; /* Match the image height */
  background-color: #e0e0e0;
  border-radius: 10px;
  animation: skeleton-animation 1.5s infinite ease-in-out;
}

@keyframes skeleton-animation {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f0f0f0;
  }
  100% {
    background-color: #e0e0e0;
  }
}

/* Hide the image initially */
.loaded-image {
  display: none;
}

.star {
  cursor: pointer;
  color: gray; /* Gray color for empty stars */
}
.star.filled {
  color: gold; /* Gold color for filled stars */
}

/* hotel detail page */
.hd-bg-img{
  height: 350px;
  width: 100%;
  /* display: block;
  object-fit: cover; */
}

.gallery_list-item {
  position: relative;
  display: inline-block;
  /* right: 100%; */
  background-color: #EEEEEE;
  width: 620px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.travel-card{
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat; 
  width: 100%; 
  height: 100%;
}

@media (min-width: 768px) {
  .hd-bg-img{
    height: 450px;
  }
}

@media (min-width: 1024px) {
  .hd-bg-img{
    height: 500px;
    /* width: 80%; */
    
  }
}

.galery_photo-wrapper{
  width: 310px;
  height: 195px;
  overflow: hidden;
}

.galery_photo {
  position: relative;
  vertical-align: top;
  transition: transform 30s linear;
  display: inline-block;
  width: 310px;
  height: 195px;
  background-color: #EEEEEE;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.galery_photo-wrapper:hover .galery_photo {
  transform: scale(2);
}

/* end hotel detail page */

.hd-small-img-container{
  grid-template-rows: repeat(2, auto); /* Two rows with automatic height */
  grid-auto-flow: column; /* Flow items into columns automatically */
  grid-auto-columns: auto; /* Automatic width for the columns */
  gap: 10px; /* Add space between grid items if needed */
}

/* hotel detail booking form */
.hd-form-container{
  min-height: 450px;
}

@media (min-width: 768px) {
  .hd-form-container{
    max-width: 350px;
  }
}
/* end hotel detail booking form */

.primary-btn{
  color: white;
  background-color: var(--primary-10);
  transition: all 0.3s ease-in-out;
}

.primary-btn:hover,.primary-btn:focus{
  background-color: var(--primary-medium-light);
  color: white;
}

.travel-card-inner-cover{
  min-height: 50%;
  /* background-image: linear-gradient(0deg, #f1f4fe 40%, rgba(0, 0, 0, 0)); */
  background-image: linear-gradient(0deg, rgba(241, 244, 254, 0.6) 60%, rgba(0, 0, 0, 0));

}

/* her img styles */
@media (min-width: 768px) {
  .landing-hero-img{
    height: 420px;
  }
}

@media (min-width: 992px) {
  .landing-hero-img{
    height: 620px;
  }
}

/* blogs styles */
.big-blog-card{
  min-height: 400px;
  position: relative;
  display: inline-block;
  /* right: 100%; */
  background-color: #EEEEEE;
  width: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* CSS for the loading spinner */
.loading-spinner {
  border: 4px solid #f3f3f3; /* Light grey background */
  border-top: 4px solid #3498db; /* Blue top border */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite; /* Spin animation */
  margin: 10px auto;
}

.loading-spinner.large{
  height: 55px;
  width: 55px;
  background-color: #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .12);
  animation: spin 300ms linear infinite; /* Spin animation */
  border-top: 4px solid var(--primary-10);
}

@media (min-width: 992px) {
  .loading-spinner.large{
    height: 76px;
    width: 76px;
  }

  #fetch-icon{
    top: 23% !important;
  }

  #fetch-hotel-icon{
    top: 35% !important;
  }
}

.fetchDataModal{
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.025863690202643563) 0%, rgba(255,255,255,0.8073762952446604) 25%); 
}

.fetchTicketDataModal{
  display: none;
}

@media (min-width:1280px){
  .lg\:d-flex{display:flex}
  .lg\:flex-1{flex:1 1 0%}
  .lg\:flex-row{flex-direction:row !important}
}

/* Keyframe for spinning animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.small-blog-card{
  min-height: 150px;
}
/* end blog styles */
.bg-glass {
  background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(1rem);
          backdrop-filter: blur(1rem);
}

/* Basic tooltip circle styles */
#tooltip {
  position: absolute;
  width: 50px;
  height: 50px;
  /* background: hsl(230, 100%, 68%); */
  border: 1px solid var(--primary-10);
  border-radius: 50%;
  display: none; /* Hidden by default */
  pointer-events: none; /* Prevent tooltip from blocking mouse interaction */
  opacity: 0.9;
  background: radial-gradient(circle,  hsl(230, 100%, 68%, 0) 0%,  hsl(230, 100%, 68%) 98%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Scale down the tooltip when hovering over elements with cursor: pointer */
.pointer-hover {
  transform: scale(0.7); /* Shrinks tooltip */
}

/* loader styles  */
.loading-circle {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 76px;
  width: 76px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .12);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 0 2px 0 rgba(0, 0, 0, .12);
}

.loading-circle {
  position: inherit;
  left: inherit;
  height: 55px;
  width: 55px;
}


.logo-img{
  height: 27px;
}

.footer-logo{
  height: 38px;
}


.px-3-5{
  padding-left: 0.875rem; /* 14px */ 
  padding-right: 0.875rem; 
}

.py-3-5{
  padding-top: 0.875rem; /* 14px */ 
  padding-bottom: 0.875rem; 
}

.px-2-5{
  padding-left: 0.625rem; /* 10px */ 
  padding-right: 0.625rem; /* 10px */
}

.py-2-5{
  padding-top: 0.625rem; /* 10px */ 
  padding-bottom: 0.625rem;
}



.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}

.bg-indigo-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}

.bg-indigo-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1));
}

.bg-indigo-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
}

.bg-indigo-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}

.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}

.bg-indigo-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.bg-indigo-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 48 163 / var(--tw-bg-opacity, 1));
}

.bg-indigo-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(49 46 129 / var(--tw-bg-opacity, 1));
}

.s-16{
  height: 16px;
}

.s-15{
  height: 15px;
}

.s-14{
  height: 14px;
}

.s-40{
  height: 40px;
}

.s-35{
  height: 35px;
}

.s-25{
  height: 25px;
}

.s-20{
  height: 20px;
}

.font-size-9{
  font-size:9px
}

.font-size-10 {
  font-size:10px
}
.font-size-11 {
  font-size:11px
}
.font-size-12 {
  font-size:12px
}
.font-size-13 {
  font-size:13px
}
.font-size-14 {
  font-size:14px
}
.font-size-15 {
  font-size:15px
}
.font-size-16 {
  font-size:16px
}
.font-size-18 {
  font-size:18px
}
.font-size-20 {
  font-size:20px
}
.font-size-22 {
  font-size:22px
}
.font-size-24 {
  font-size:24px
}
.font-size-26 {
  font-size:26px
}
.font-size-27 {
  font-size:27px
}
.font-size-28 {
  font-size:28px
}
.font-size-30 {
  font-size:30px
}
.font-size-32 {
  font-size:32px
}
.font-size-35 {
  font-size:35px
}
.font-size-36 {
  font-size:36px
}
.font-size-38 {
  font-size:38px
}
.font-size-40 {
  font-size:40px
}
.font-size-43 {
  font-size:43px
}
.font-size-46 {
  font-size:46px
}
.font-size-48 {
  font-size:48px
}

.map-wrapper{
  display: flex;
  justify-content: center;
}

.map-container{
  position: relative;
  padding-top: 1em;
  
}

@media (max-width: 55em) {
  .map-container{
      max-width: 280px;
  }
}

.map{
  height: 140px;
  width: 100%;
}

.map-btn-cover{
  position: absolute;
  top: 100px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  
}

.map-action-btn{
  padding: 0.5em 1em;
  border-radius: 0;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: hsl(0, 0%, 12%);
  color: #f8f8f8;
  transition: all 0.4s ease-in;
  font-size: 0.9rem;
}

.map-action-btn:hover{
  color: #f8f8f8;
  background-color: hsl(0, 0%, 32%);
}

.map-action-btn:focus{
  outline: none;
  color: #f8f8f8;
  background-color: hsl(0, 0%, 32%);
}

@media (min-width: 50em){
  .map-container{
      width: 100%;
      
  }

  .map-cover{
      display: none;
      position: absolute;
      height: 80vh;
      background-color: #ffffff;
      width: 93vw;
      top: -30vh;
      box-shadow: 0 2px 4px hsl(240 3.8% 46.1% / 12%);
    }
  
    .map-cover{
      top: -20vh;
      width: 400px;
      height: 350px;
    }
}


@media (min-width: 60em){
  .map-cover{
    width: 600px;
    height: 450px;
  }
}

#map-popup {
  position: fixed;
  bottom: -100%; /* Initially hidden */
  left: 0;
  width: 100%;
  height: 50vh; /* Set desired height */
  background: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: bottom 0.4s ease-in-out;
  z-index: 1000;
  display: none;
}

#map-popup.active {
  bottom: 0; /* Slide up */
  display: block;
}

#map-popup .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: red;
  color: white;
  padding: 5px 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

/* refresh modal */
.refresh-modal-section {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.refresh-modal-container {
  width: 275px;
  height: 0;
  background: #f9f9ff;
  border-radius: 5px;
  position: relative;
  padding: 15px;
  overflow: hidden;
  transition: height 1s, opacity 1s;
  opacity: 0;
}

.modal--open {
  overflow: visible;
  height: 280px;
  opacity: 1;
}

.modal__icon {
  position: absolute;
  background: #e44043;
  border-radius: 50%;
  color: #fff;
  width: 50px;
  height: 50px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border: 4px #fff solid;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  opacity: 0;
  transition: top 0.5s, opacity 0.5s;
}

.modal__icon--visible {
  top: -25px;
  opacity: 1;
}

.modal__title {
  font-weight: 400;
  color: #333;
  text-align: center;
  margin-top: 40px;
  font-size: 22px;
  opacity: 0;
  animation: fadeUp 0.8s linear alternate;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
}

.modal__text {
  font-weight: 300;
  color: #696969;
  text-align: center;
  margin-top: 25px;
  font-size: 0.85rem;
  line-height: 1.5;
  display: block;
  animation: fadeUp 0.8s linear alternate;
  opacity: 0;
  animation-delay: 0.8s;
  animation-fill-mode: forwards;
}

.button {
  outline: none;
  appearance: none;
  border: none;
  width: 100%;
  margin-top: 35px;
  background: #49e4fa;
  padding: 10px 25px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  animation: fadeUp 0.8s linear alternate;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.button__label {
  color: #fff;
  font-weight: 300;
  font-size: 18px;
  transition: color 0.3s ease-in-out;
}

.button:hover, .button:focus {
  background: rgba(73, 228, 250, 0.2);
}

.button:hover .button__label {
  color: #49e4fa;
}

@keyframes fadeUp {
  0% {
      transform: translateY(10px);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}
/* end refresh modal */