.active__Number {
            background-color: #191919 !important;
            /* Change to red when active */
            border: 3px solid #950004 !important;
        }

        .dayContainer {
            background-color: #191919;
        }

        #datePicker {
            background-color: #191919;
            color: #fff;
            border: 1px solid #3a3a3a;
            border-radius: 4px;
            padding: 5px;
        }

        /* Base styles */

        .boxes-container {
            display: flex;
            flex-wrap: wrap;
            /* justify-content: space-between; */
            gap: 20px;
            /* Reduced gap for smaller boxes */
            margin-top: 8px;
        }

        .box {
            flex-basis: 45%;
            /* Smaller width for mobile - adjusts for 2 in a row with a bit more space */
            height: 150px;
            /* Adjusted height */
            background-color: #191919;
            border-radius: 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            /* Center content vertically */
            justify-content: center;
            /* Center content horizontally */
            padding: 10px;
            /* Adjusted padding for smaller box */
            border: 2px solid transparent;
            /* Prepare for border color change on hover */
            transition: border-color 0.3s;
            /
        }

        .box:hover {
            border-color: #880611;
            /* Change border color to red on hover */
        }

        .box-content {
            color: #fff;
            text-align: center;
            /* Center text inside the box-content */
        }

        .time {
            display: block;
            margin-bottom: 6px;
        }

        /* Large screens (lg) */

        @media (min-width: 992px) {
            .box {
                flex-basis: 18%;
                /* Even smaller width for large screens to fit 5 in a row neatly */
            }
        }

        @media (min-width: 992px) {
            /* Adjust for your project's 'lg' breakpoint */
            .select__number_part {
                display: contents !important;
            }
            .select__number_bottom {
                display: none !important;
            }
        }

        @media (min-width: 768px) {
            /* scrollable div */
            .calendar__web {
                display: flex !important;
                margin-top: 8px;
            }
            .calendar__Mobile {
                display: none !important;
            }
        }

        @media (max-width: 765px) {
            .calendar__web {
                display: none !important;
            }
            .calendar__Mobile {
                display: flex !important;
                margin-top: 50px;
            }
        }

        @media (max-width: 547px) {
            .span__select {
                margin-bottom: 10px !important;
                display: block;
            }
            
            .select__number_bottom {
                display: block !important;
            }
            .select__number_position {
                width: 100%;
            }
            .select__number_part {
                display: none !important;
            }
        }

        @media (min-width: 548px) and (max-width: 992px) {
            /* Adjust for your project's 'lg' breakpoint */
            .select__number_bottom {
                display: flex !important;
            }
            .select__number_position {
                display: flex !important;
                justify-content: space-between !important;
                width: 100%;
            }
            .select__number_part {
                display: none !important;
            }
        }
  

	/* Container for phone and Book Now button */

		.header__contact-book {
			display: flex;
			align-items: center;
			justify-content: flex-end; /* Adjust this if needed */
		}
		
		/* Style the phone link */
		.header__phone a {
			display: flex;
			align-items: center;
			color: #fff;
			text-decoration: none;
			margin-right: 1rem;  /* Space between phone link and button */
		}
		
		.header__phone a i {
			margin-right: 0.5rem;
			font-size: 1.2rem;
		}
		
		/* Fixed WhatsApp icon */
		.whatsapp-fixed {
			position: fixed;
			bottom: 20px;
			right: 20px;
			z-index: 9999;
			font-size: 2.5rem;
			color: #25D366;   /* WhatsApp green */
			text-decoration: none;
		}
		
		.whatsapp-fixed:hover {
			opacity: 0.8;
		}


	/* Calendar Custom CSS */

		.calendar-header {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-bottom: 10px;
		}
		.calendar-header button {
		  padding: 5px 10px;
		}
		.calendar-grid {
		  display: grid;
		  grid-template-columns: repeat(7, 1fr);
		  gap: 10px;
		}
		.calendar-cell {
		  padding: 10px;
		  border: 1px solid #ddd;
		  text-align: center;
		  cursor: pointer;
		  border-radius: 4px;
		}
		.calendar-cell:hover {
		  background: #f0f0f0;
		}
		.calendar-cell.today {
		  background: #007bff;
		  color: #fff;
		}
		.calendar-cell.selected {
		  border: 2px solid #28a745;
		}
		.available-slots {
		  margin-top: 20px;
		}
		.slot {
		  padding: 8px;
		  border: 1px solid #28a745;
		  border-radius: 4px;
		  margin-bottom: 5px;
		  cursor: pointer;
		  transition: background 0.3s;
		}
		.slot:hover {
		  background: #e9ffe9;
		}

    .room__body.box {
      width: 100%;
      height: auto; /* or a specific height if needed */
      display: flex;
      flex-direction: column; /* Ensures child elements stack vertically */
      padding: 2rem; /* Adjust padding as needed */
      box-sizing: border-box;
  }

  
  .room__header,
  .room__excerpt,
  .room__footer {
    width: 100%; /* Ensure each section takes full width */
  }


/*new css for rooms display issue in index.html*/

@media (min-width: 992px) {
  .rooms--list .room:nth-child(even) .room__body {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.rooms--list .room__body {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  padding: 2rem;
}

@media (min-width: 992px) {
  .rooms--list .room__body {
    width: 50%; /* Increased from 42% to allow more space */
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    padding: 4.375rem 2.75rem;
  }
}

.rooms--grid .room__body {
  position: absolute;
  z-index: 3;
  bottom: 1.875rem;
  left: 1.875rem;
  right: 1.875rem;
}

.rooms--grid-space .room__body {
  top: 1.875rem;
  pointer-events: none;
}

.rooms--modern .room__body {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  position: relative;
  z-index: 3;
}

@media (min-width: 768px) {
  .rooms--modern .room__body {
    padding: 3rem .5rem 3rem 4rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .rooms--modern .room__body {
    padding: 1rem 0 1rem 1.5rem;
  }
}

.rooms--list .room__excerpt p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .rooms--modern .room__excerpt {
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .rooms--modern .room__excerpt {
    font-size: .875rem; /* Slightly increased font size for better readability */
  }
}

/* Override Bootstrap grid constraints */
.row,
.col-md-10,
.rooms.rooms--list {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important; /* Remove Bootstrap's default padding */
}

/* Remove Bootstrap column gutters */
.row.no-gutters > [class*="col-"] {
  padding: 0 !important;
}

.room {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  
}

/* Desktop layout fixes */
@media (min-width: 992px) {
  .room {
    flex-direction: row !important;
    justify-content: flex-start !important; /* Align items to the start */
    gap: 0 !important;
  }

  .room__body.box {
    flex-basis: 60% !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }

  .room__img {
    flex-basis: 40% !important;
    flex-shrink: 0 !important;
    margin-left: 0 !important;
  }
}


.room[data-aos] {
  transform: none !important;
  opacity: 1 !important;
}

/* Mobile View (below 992px) */
@media (max-width: 991.98px) {
  .room {
    flex-direction: column !important; /* Stack vertically */
  }

  .room__body.box,
  .room__img {
    width: 100% !important; /* Force full width */
    flex-basis: auto !important; /* Reset flex-basis */
    margin: 0 !important;
  }
}