@media (min-width: 768px) {
  section {
    padding: 6.8rem 0;
  }
}

/* Horizontal Scroll Section Styles */
.horizontal-scroll-section .image-card {
  width: 596px; /* Default width for desktop */
  display: block; /* Make the anchor a block element */
  border-radius: 0.375rem; /* Bootstrap's .rounded class equivalent (rounded-2) */
  overflow: hidden; /* Ensures content (like the image) respects the border-radius */
}

/* The .img-fluid class on the <img> tag handles its responsiveness (max-width: 100%; height: auto;) */
/* The .rounded class on the <img> tag handles its own border radius */


.horizontal-scroll-section .image-card-overlay h5 {
  /* The .text-white class from Bootstrap is applied in HTML */
  /* .mb-0 class from Bootstrap is applied in HTML to remove bottom margin */
  font-size: 1.1rem; /* Custom font size for the title if needed */
}

/* Responsive adjustments for image card width */
@media (max-width: 1199.98px) { /* Extra large devices (large desktops, less than 1200px) */
  .horizontal-scroll-section .image-card {
    width: 480px;
  }
}

@media (max-width: 991.98px) { /* Large devices (desktops, less than 992px) */
  .horizontal-scroll-section .image-card {
    width: 400px;
  }
}

@media (max-width: 767.98px) { /* Medium devices (tablets, less than 768px) */
  .horizontal-scroll-section .image-card {
    width: 320px;
  }
}

@media (max-width: 575.98px) { /* Small devices (landscape phones, less than 576px) */
  .horizontal-scroll-section .image-card {
    width: 280px; /* Adjust for very small screens, could also use viewport units like 80vw */
  }
}

/* Hide scrollbar for the horizontal scroll section */
.horizontal-scroll-section ul.overflow-auto {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.horizontal-scroll-section ul.overflow-auto::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.full-viewport-height-image {
  width: 100%;
  height: 90vh;
  object-fit: cover; /* Ensures the image covers the area, maintaining aspect ratio */
}

.overlay-text-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cover the parent section */
  padding: 1rem; /* Optional: adds some space from the edges */
}

.approach-image-hero-section {
  margin-top: -280px;
  z-index: 1000;
  position: relative;
}

/* --- Styling for Highlighted Package Cards --- */
.package-highlight-card-img {
  width: 100%;
  height: 100%; /* Fill the column height */
  object-fit: cover; /* Cover, don't distort, crop if necessary */
}

/* Apply border radius to the image based on its position in the card structure */
/* When image is on the left (side-by-side layout for sm and up) */
@media (min-width: 576px) {
  .package-highlight-card .col-sm-6:first-child .package-highlight-card-img {
    border-top-left-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: 0; /* No radius on the side connecting to the text part */
    border-bottom-right-radius: 0;
  }
}

/* When image is on top (stacked layout for xs) */
@media (max-width: 575.98px) {
  .package-highlight-card .col-sm-6:first-child .package-highlight-card-img {
    height: 250px; /* Or your preferred height for stacked image */
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: 0; /* Image is on top, so no bottom radius here */
    border-bottom-right-radius: 0;
  }
}

/* Custom styles for fullscreen modal in Bootstrap 4 */
.modal-fullscreen .modal-dialog {
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.modal-fullscreen .modal-content {
  height: 100%;
  border-radius: 0; /* Optional: Remove rounded corners for a true fullscreen look */
  border: 0; /* Optional: Remove default modal border */
  display: flex; /* Enable flex layout for header, body, footer */
  flex-direction: column; /* Stack header, body, footer vertically */
}

.modal-fullscreen .modal-body {
  flex-grow: 1; /* Allow body to take up available vertical space */
  overflow-y: auto; /* Add scroll to body if content overflows */
}

/* Reservation page room image styling */
@media (min-width: 768px) { /* md breakpoint and up */
  .package-image { /* This class is on the image itself in package.html, so it's fine */
    max-width: 30%;
    object-fit: cover; /* Ensures image covers the area without distortion */
    align-self: start; /* Aligns the image to the top of the flex container */
  }
  .reservation-room-image-container { /* New class for the container div */
    max-width: 20%; /* Constrain the container's width */
    align-self: start; /* Align the container in the flex parent */
  }
  .reservation-room-image-container img { /* Style the image inside the container */
    height: 100%; /* Make image fill the container height */
    object-fit: cover; /* Ensures image covers the area without distortion */
    cursor: pointer;
  }
}