/* ============================================================
   gallery.html — page-specific stylesheet
   Auto-extracted from inline <style> block(s) in this page so it
   can be edited/cached separately from the markup.
   Shared/global rules (navbar, footer, floating icons, animations,
   preloader) live in css/nav_bar.css. Package-detail-page rules
   live in css/package_detail.css.
   ============================================================ */
/* Hero Section */
    .hero-section {
      background: url('../../images/car_images/gallery_hero.webp') center/cover no-repeat;
      height: 50vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
      position: relative;
    }
/* Hero Section (decorative pseudo-element) */


    .hero-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
/* Hero Section H1 */


    .hero-section h1 {
      background-color: rgba(0, 0, 0, 0.541);
      border-radius: 20px;
      padding: 1rem;
      position: absolute;
      font-family: 'Times New Roman', Times, serif;
      font-size: 3rem;
      bottom: 10px;
      z-index: 1;
    }

    /* Gallery Section */
    .gallery {
      padding: 50px 5px;
    }
/* Gallery Img */


    .gallery img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 20px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
/* Gallery Img (hover state) */


    .gallery img:hover {
      transform: scale(1.05);
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
    }
/* Responsive: (max-width: 768px) */


    @media (max-width: 768px) {
      .gallery img {
        height: 270px;
        object-fit: cover;
        padding: 0 10px;
      }
    }