.hotel-box {
  padding: 1px 21px 11px 21px;
  margin-bottom: 24px;
  }
  .hotel-container {
    /* margin-bottom: 41px; */
    /* border: 1px solid #D9DFC6; */
    flex: 1 1;
    border: 1px solid #d9dfc6;
    height: 93px;
    margin-top: 24px;
  }
  .from-hotel-group {
    margin-bottom: 20px;
    flex: 1;
    border: 1px solid #d9dfc6;
    height: 93px;
  }
  .location-headers {
    font-size: 11px;
    font-weight: bold;
    color: #7a7a7a;
    text-transform: uppercase;
    margin-bottom: 5px;
    padding-left: 12px;
    padding-top: 6px;
  }
  .hotel-city-name {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    color: #000;
    border: none;
    outline: none;
    background-color: transparent;
    padding: 11px;
    margin: -2px;
  }
  .hotel-city-name-2{
    width: 100%;
    font-size: 14px;
    font-weight:400;
    color: #000;
    border: none;
    outline: none;
    background-color: transparent;
    /* padding: 11px; */
    margin: -2px;
  }
  .serach_button{
    position: absolute;
    bottom: -20px;
    left: 41%;
  }
  .dropdown-size{
      font-family: sans-serif;
      font-size: 14px;
      font-weight: 200;
  }
  .city-name{
      font-size: 10px;
      /* font-family: ridley; */
      padding: 11px;
  }
  .textsizes{
      font-size: 14px;
      font-weight: bold;
      /* color: #7a7a7a; */
  }
  .textcolor{
      color: #7a7a7a;
      font-size:10px;
  }
  /* .hotel-form{
    background-color: white;
   
  } */
  .hotel-form-text-color, .custom-icon{
    color: #785ef7;
  }

  .hotel-form-box {
    padding: 5px 9px 7px 7px;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(50, 50, 50, 0.05);
    /* color: red; */
    min-height: 34px;
    border: none;
    box-shadow: none;
    padding-left: 12px;
    height: 50px;
    width: 117%;
}
 
  .image-modal{
    overflow-y: auto;
  }
  .search-bar2{
    background-color: #281f55;
    padding: 15px;
    margin: 0 auto;
    max-width: 1400px;
    border-radius: 1px;
    margin-top: 53px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 10;

  }
  .error{
    color: red;
  }
  .heading-line{
    font-size: 26px;
    font-weight: bold;
  }
  .hotel-photo{
    width: 275px;
    height: 138px;
    object-fit: cover;
    border-radius: 4px; /* Optional: Rounds the corners */
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow */
}
.button_width{
  
    width: 20%;
}
.hotel_booking_cards{
  border-radius: 4px;
}

.hotel-photos {
  width: 100px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  margin-top: 4px;
  /* margin: 5px; Adds spacing between images */
  transition: transform 0.3s ease-in-out;
}

.hotel-photos:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
}
  
.photos-container{
  width: 90%;
}
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 90%;
  overflow-y: scroll;
}

.modal-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.modal-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* Container for individual images */
.image-container {
  position: relative;
}

/* Image styling */
.hotel-photos {
  width: 100%;
  /* height: auto; */
  transition: filter 0.3s ease; /* Smooth transition for blur effect */
}

.hotel-photos.blur-sm {
  filter: blur(1px); /* Apply blur effect */
}

.hotel-photos:hover {
  filter: blur(1); /* Remove blur on hover */
}
.hotel_photos_container{
  height: 90%;
  overflow-y: scroll;

}
.hotel_images_container{
  height: 50%;
  width: 100%;
}
.hotel_photos_all{
  height: 90%;
  width: 100%;
  border-radius: 8px;
}
/* Overlay for the "View All" button */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
  color: white;
  font-size: 20px;
}

/* "View All" button styling */
/* .view-all-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 5px;
  cursor: pointer;
} */

.view-all-btn:hover {
  background-color: white;
}
.btn-outline-color {
  border: 1px solid #785ef7;
  color: #785ef7;
  background-color: transparent;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.btn-outline-color:hover,.rating-color ,.modal2 {
  background-color: #785ef7;
  color: white;
}
.close_icon{
  right: -2.25rem;
  width: 24px;
  height: 24px;
}
.btn-color_h1 {
  color: white;
  background-color: #785ef7;
  width: 7.5rem;
  /* padding: 8px 16px;
  border-radius: 6px;
  font-weight: bold;
  transition: all 0.3s ease-in-out; */
}

.rating-color:hover {
  background-color: #5a3ec8;
}
.hotel-city{
  margin-top: 0;
    margin-bottom: 1rem;
    width: 100%;
}
.photos-hotels{
  width: 62%;
  height: 335px;
  object-fit: cover;
  border-radius: 16px; /* Optional: Rounds the corners */
/* box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); Optional: Adds a shadow */
}
.photos-hotel{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  /* box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); */
}
.text-sizes-color{
  font-size: 13px;
  /* color: gray; */
}
.hoteldetail-conatiner{
  background-color: #f2f2f2;
}

.text_hotel_address{
  /* font-size: 12px; */
  font-weight:400;
  font-family: sans-serif;

}
.hotel-border{
  border-radius: 16px;
}
.hotel-border2{
  border-radius: 8px;

}
.light_color_cotrav{
  background-color: #f0eeff;
}
.hotelPhotos_Payment{
  position: relative;
   max-height: 175px;
   border-radius: 8px 8px 8px 8px;
   border: none;
   width: 100%;
  /* width: 50%;
  height: 20%; */
}
.payment_width_box {
  width: 34.333333%
}
.payment_width_boxs {
  width: 63.333333%
  

}
.button_book {
  border: 1px solid #785ef7; /* Corrected border */
  color: #785ef7;
  background-color: white;
  border-radius: 4px; /* Optional: Add rounded corners */
  padding: 5px 10px; /* Optional: Add spacing */
  font-weight: 600; /* Optional: Make text bold */
  transition: background-color 0.3s ease;
  height: 27px;
}

.button_book:hover {
  background-color: #785ef7;
  color: white;
}

.font18{
  font-size: 18px;
}
.font12{
  font-size: 12px;
}
ul {
  padding-left: 1rem !important;
}
.photos-hotelss{
  width: 100%;
  height: 247px;
  object-fit: cover;
  border-radius: 16px;
}
.hotel_button_color{
  background-color: #e8e4ff;
  border-color: #785ef7;
}
.information_button{
  color: #785ef7;
}
.active_tabs {

border-color: #785ef7;
}
.margin_City{
  margin-top: -0.75rem !important;
}
.loader_size{
  height: 130px;
  width: 130px;
}
.add_gusts_box{
  width: 157%;
}

/******* Hotel Booking *********/
.search-bar3{
  background-color: #f2f2f2;
  overflow-y: auto;
  /* padding: 15px; */
  margin: 0 auto;
  max-width: 1325px;
  border-radius: 1px;
  margin-top: 53px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 10;

}
#widgetHeader2{
  height: auto;;
}
.purple-header{
  height: auto;
  width: 100%;
  padding: 20px 40px 50px 40px;
  background-color: #281f55;
  /* background-color: #785ef7; */
}

.floating-bookings{
  padding: 40px;
  position: relative;
  top: -90px;
}
.card_background{
  background-color: #f2f2f2;
}
.box-color{
  background-color: #ebebff;
}

/* ADD GUST FORM DESIGN*/

.guestDtls__addBtn {
  font-size: 16px;
  font-weight: 900;
}
.guestsInfo__row {
  margin-bottom: 27px;
}
.makeFlex {
  display: flex
;
}
.guestDtls__col {
  display: flex
;
  flex-direction: column;
  flex-shrink: 0;
}
html[dir=ltr] .appendRight10 {
  margin-right: 10px;
}

.guestDtls__col.width70 {
  width: 70px;
}
.appendBottom10 {
  margin-bottom: 10px;
}

.btn-color{
  background-color: white;
  color: #785ef7;
  width: 189px;
  height: 35px;
  font-size: 13px;
}
.capText {
  text-transform: uppercase;
}

.appendBottom10 {
  margin-bottom: 10px;
}
.font11 {
  font-size: calc(var(--font-scale, 1)* 11px);
  line-height: 11px;
}
.frmSelect {
  -webkit-appearance: none;
  border: 1px solid #bebebe;
  border-radius: 4px;
  font-family: lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  outline: 0;
  padding: 0 20px 0 10px;
  width: 100%;
}
.makeFlex.column {
  flex-direction: column;
}

.makeFlex .flexOne {
  flex: 1;
}
html[dir=ltr] .appendRight10 {
  margin-right: 10px;
}
.guestDtls__col.width247 {
  width: 247px;
}

.appendRight10 {
  margin-right: 10px;
}
.guestDtls__col {
  display: flex
;
  flex-direction: column;
  flex-shrink: 0;
}
.guestDtlsTextLbl {
  min-height: 11px;
}
.capText {
  text-transform: uppercase;
}
.frmTextInput {
  border: 1px solid #bebebe;
  border-radius: 4px;
  font-family: lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  outline: 0;
  padding: 0 10px;
  width: 100%;
  min-width: 200px;
}
.frmTextInputs {
  border: 1px solid #bebebe;
  border-radius: 5px;
  font-family: lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 37px;
  outline: 0;
  padding: 0 10px;
  width: 100%;

}
/* Container for the phone input */
.phone-container {
  display: flex;
  align-items: center;
  border: 1px solid #bebebe;
  border-radius: 4px;
  width: 100%;
  height: 40px;
  background: white;
  position: relative;
}

/* Country Code Dropdown Styling */
.react-tel-input .flag-dropdown {
  width: auto !important;  /* Ensures only country code is visible */
  border-right: 1px solid #bebebe !important;
  padding: 0 10px !important;
  background-color: #f5f5f5 !important;
  min-width: 70px; /* Adjust width based on country code */
}

/* Hide Flag in Dropdown */
.hide-flag .flag-dropdown .selected-flag {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.hide-flag .flag {
  display: none !important;  /* Hides the flag */
}

/* Ensure Proper Spacing for Input */
.react-tel-input .form-control {
  padding-left: 80px !important; /* Adjust based on country code width */
  height: 36px !important;
  width: 100% !important;
  font-size: 14px !important;
  /* border: none !important; */
  /* outline: none !important; */
}
.input-wrapper {
  position: relative; /* Keep the structure intact */
  display: flex;
  flex-direction: column;
  align-items: start;
}

.frmTextInput {
  border: 1px solid #bebebe;
  border-radius: 4px;
  font-family: lato, sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 40px;
  outline: 0;
  padding: 0 10px;
  width: 100%;
  min-width: 200px;
  box-sizing: border-box; /* Ensures padding doesn't affect width */
}

.error-message {
  position: absolute;
  bottom: -18px; /* Positions below the input */
  left: 0;
  color: red;
  font-size: 12px;
  white-space: nowrap;
}


/* Ensure Number Field is in Proper Alignment */
.selectedCode {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #bebebe;
  border-radius: 4px 0 0 4px;
  color: #000;
  font-size: 14px;
  height: 40px;
  min-width: 70px;
  padding: 0 10px;
  pointer-events: auto;
}

.makeFlex.spaceBetween {
  justify-content: space-between;
}

.makeFlex.hrtlCenter {
  align-items: center;
}
.appendBottom15 {
  margin-bottom: 15px;
}
.checkmarkOuter {
  display: inline-flex
;
  flex-shrink: 0;
  align-items: center;
  /* min-height: 18px; */
  position: relative;
}
.grayText {
  color: #9b9b9b;
}
.appendLeft3 {
  margin-left: 3px;
}
.font14 {
  font-size: calc(var(--font-scale, 1)* 14px);
  line-height: 14px;
}
.guestDtls__add {
  align-items: center;
  display: flex
;
}
html[dir=ltr] .appendRight5 {
  margin-right: 5px;
}


.appendRight5 {
  margin-right: 5px;
}

.form-input{
  @apply w-full rounded-md border border-white-light bg-white px-4 py-2 text-sm font-semibold text-black !outline-none focus:border-primary focus:ring-transparent dark:border-[#17263c] dark:bg-[#121e32] dark:text-white-dark dark:focus:border-primary;
}
/* .css-uoam7u-MuiButtonBase-root-MuiChip-root{
  height: 24px;
  margin-top: 2px;
  font-size: 11px;
  padding: 5px;
}*/
.css-uoam7u-MuiButtonBase-root-MuiChip-root .MuiChip-deleteIcon{
      height: 16px;
}
.css-1jzq0dw-MuiChip-label{
  font-size: 11px;
}
.width_adjust{
  width: 80%;
}
.text-xs , .text-sm, .text-lg{
  font-family: 'Inter', sans-serif;
}
.width_adjustment{
  width: 624px;
}
.width_images_final{
  width: 224px;
}
.hotel_images_final{
  height: 121px;
  width: 205px;
}
.hotel_forms_home{
   width: 400px;
   max-height: 500px;                                   
}
.select_box{
  max-height: 10px;
}
/* In your CSS or Tailwind config */
.custom-scroll-select {
  max-height: 150px;
  overflow-y: auto;
}