* {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
   }

   body {
       font-family: "Segoe UI", sans-serif;
       background: #f9f9f9;
       color: #333;
       line-height: 1.6;
   }

   /* Space above the banner */
   .spacer {
       /* height: 2rem; */
   }

   header {
       position: relative;
       width: 100%;
       overflow: hidden;
   }

.header-overlay {
    width: 100%;
    background-image: url("./images/banner4_optimized.png"); /* Temporarily remove gradient */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* padding: 80px 0px 55px 0px; */
    height: 300px;
}

   /* .header-overlay img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
      } */

   .header-text {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: #212220;
       text-align: center;
       /* padding: 1rem 2rem; */
       /* background: rgba(0, 0, 0, 0.4); Slight dark overlay for readability */
       /* border-radius: 8px; */
   }

   .header-text h1 {
       font-size: 2.5rem;
   }

   h1 {
       margin: 0;
       font-size: 2rem;
   }

   .about {
       padding: 2rem;
       max-width: 1100px;
       margin: 1rem auto;
       background: #ffffff;
       border-radius: 8px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   }

   .about-content {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 2rem;
   }

   .about-image {
       flex: 1 1 250px;
       text-align: center;
   }

   .about-image img {
       width: 100%;
       max-width: 300px;
       border-radius: 8px;
       object-fit: cover;
   }

   .about-text {
       flex: 2 1 250px;
   }

   .about-text h2 {
       font-size: 1.6rem;
       margin-bottom: 1rem;
   }

   .about-text p {
       font-size: 1rem;
       color: #555;
   }

   .gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 20px;
       padding: 2rem;
   }

   .section-title {
       text-align: center;
       font-size: 1.6rem;
       color: #333;
   }

   .gallery-item {
       background: #fff;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
       transition: transform 0.3s ease;
   }

   .gallery-item:hover {
       transform: translateY(-5px);
       cursor: pointer
   }

   .gallery-item img {
       width: 100%;
       height: auto;
       display: block;
   }

   .caption {
       padding: 1rem;
   }

   .caption h3 {
       margin-bottom: 0.5rem;
       font-size: 1.2rem;
   }

   .caption p {
       font-size: 0.95rem;
       color: #555;
   }

   /* Lightbox */
   /* .lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        justify-content: center;
        align-items: center;
        z-index: 999;
      }

      .lightbox img {
        max-width: 90%;
        max-height: 80%;
        border-radius: 8px;
      } */

   /* .lightbox:target {
        display: flex;
      } */

   /* .lightbox-close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 2rem;
        color: white;
        text-decoration: none;
      } */

   footer {
       text-align: center;
       padding: 1rem;
       background: #2c3e50;
       color: #ccc;
       font-size: 0.9rem;
   }

   .gallery-container {
       padding: 2rem;
       max-width: 1100px;
       margin: 1rem auto;
       background: #ffffff;
       border-radius: 8px;
       box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
   }

   .banner-img {
       width: 100%;
       height: auto;
       display: block;
   }

   .lightbox-gallery {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
       gap: 1rem;
       max-width: 90%;
       margin: 0 auto;
   }

   .lightbox-gallery img {
       max-width: 300px;
       max-height: 80vh;
       border-radius: 8px;
       object-fit: cover;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
   }

   .lightbox {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: rgba(0, 0, 0, 0.9);
       justify-content: center;
       align-items: center;
       flex-direction: column;
       z-index: 999;
   }

   .lightbox img {
       max-width: 90%;
       max-height: 80%;
       border-radius: 8px;
   }

   .lightbox-controls {
       margin-top: 1rem;
   }

   .lightbox-controls button {
       background: rgba(255, 255, 255, 0.2);
       border: none;
       color: white;
       font-size: 2rem;
       margin: 0 1rem;
       padding: 0.5rem 1rem;
       cursor: pointer;
       border-radius: 6px;
       transition: background 0.3s;
   }

   .lightbox-controls button:hover {
       background: rgba(255, 255, 255, 0.4);
   }

   .lightbox-close {
       position: absolute;
       top: 20px;
       right: 30px;
       font-size: 2rem;
       color: white;
       text-decoration: none;
       cursor: pointer;
   }



   /* Responsive stacking on smaller screens */
   @media (max-width: 768px) {
       .header-text h1 {
           font-size: 1.2rem;
       }

       .header-text {
           padding: 0.5rem 1rem;
       }

       .about h2 {
           font-size: 1.4rem;
       }

       .about-content {
           flex-direction: column;
           text-align: center;
       }

       .about-text h2 {
           font-size: 1.4rem;
       }

       .about-text p {
           font-size: 0.95rem;
       }

       .lightbox-gallery img {
           max-width: 90%;
           height: auto;
       }

       .gallery-container {
           padding: 0px;
           max-width: 1100px;
           margin: 1rem auto;
           background: #ffffff;
           border-radius: 8px;
           box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
       }

          .gallery {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
       gap: 20px;
       padding: 2rem;
   }

.header-overlay {
    width: 100%;
    background-image: url("./images/banner4_optimized.png"); /* Temporarily remove gradient */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    /* padding: 80px 0px 55px 0px; */
    height: 150px;
}
   }