body {
  background-color: #FFF;
}

/* ==========================================================
   About Section — layout fixes
   1. Remove fixed height so the section grows with content.
   2. Make card-right-side fill the full card width.
   3. Keep profile cards in normal flow (no absolute overlap).
   ========================================================== */
.about-section {
  height: auto !important;
}

.about-section .about-section-card .card-right-side {
  width: 100%;
}

.about-section .aboutSectionProfile {
  position: relative !important;
  top: auto !important;
  margin-top: -3rem;   /* pull cards up to overlap bottom of green box */
  padding-bottom: 2rem;
  z-index: 1;
}

.about-section .about-section-card {
  position: relative;
  z-index: 0;
}

/* ==========================================================
   Hero image convention — applied to all hero/banner images
   on index.html, OnlineServices.html, Regulations.html,
   Publication&Media.html and ContactUs.html
   ========================================================== */
.hero-img {
  width: 100%;
  height: 380px;
  max-height: 380px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
}

@media (max-width: 992px) {
  .hero-img {
    height: 300px;
    max-height: 300px;
  }
}

@media (max-width: 576px) {
  .hero-img {
    height: 220px;
    max-height: 220px;
  }
}

/* ==========================================================
   Programs and Initiatives — uniform card image height
   ========================================================== */
.programs-section .card-img-top {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

@media (max-width: 576px) {
  .programs-section .card-img-top {
    height: 180px;
  }
}

/* ==========================================================
   Gallery at a Glance — main image + thumbnail grid.
   Desktop: 2-column grid, vertically scrollable.
   Mobile:  1-column grid, vertically scrollable.
   Clicking a thumbnail swaps the main image.
   ========================================================== */
.gallerySectionLeft .gallery-main-img {
  width: 100%;
  height: 450px;
  max-height: 450px;
  object-fit: cover;
  border-radius: 10px;
}

.gallerySectionRight .thumbnails-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 12px;
  max-height: 450px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 8px;
}

.gallerySectionRight .gallery-thumb {
  flex: 0 0 auto;
  width: calc(50% - 6px);
  height: 140px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, outline-color 0.2s ease;
  outline: 3px solid transparent;
}

.gallerySectionRight .gallery-thumb:hover {
  transform: scale(1.03);
}

.gallerySectionRight .gallery-thumb.active {
  outline-color: #4CAF50;
}

/* Custom thin scrollbar for the thumbnail strip */
.gallerySectionRight .thumbnails-container::-webkit-scrollbar {
  width: 6px;
}

.gallerySectionRight .thumbnails-container::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

@media (max-width: 992px) {
  .gallerySectionLeft .gallery-main-img {
    height: 320px;
    max-height: 320px;
  }
  /* Tablet/stacked: keep 2-column grid, switch to vertical scroll */
  .gallerySectionRight .thumbnails-container {
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    max-height: 360px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 12px;
  }
  .gallerySectionRight .gallery-thumb {
    width: calc(50% - 6px);
    height: 110px;
  }
}

@media (max-width: 576px) {
  .gallerySectionLeft .gallery-main-img {
    height: 240px;
    max-height: 240px;
  }
  /* Mobile: 1-column, vertically scrollable */
  .gallerySectionRight .thumbnails-container {
    flex-direction: column;
    flex-wrap: nowrap;
    max-height: 320px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .gallerySectionRight .gallery-thumb {
    width: 100%;
    height: 110px;
  }
}