html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  overflow-x: hidden;
}


    :root {
      --dark: #222;
      --accent: #005a8d;
      --gold: #c9a83f;
      --white: #fff;
      --light: #f7f7f7;
      --text-muted: #555;
      --font-sans: 'Open Sans', sans-serif;
      --font-heading: 'Poppins', sans-serif;
    }
    
    * { margin:0; padding:0; box-sizing:border-box; }
    
    body {
      font-family: var(--font-sans);
      background: var(--light);
      color: var(--dark);
      line-height:1.6;
    }
    
    /* Header */
    .dual-header {
      background: var(--white);
      padding:1rem 0;
      border-bottom:2px solid var(--gold);
      text-align:center;
    }
    .dual-header .brand-block img {
      width:48px;
      height:48px;
      display:block;
      margin:0 auto .25rem;
    }
    .dual-header .brand-block h1 {
      font-family: var(--font-heading);
      font-size:1.5rem;
      color:var(--dark);
      margin-bottom:.5rem;
    }
    .dual-header .nav-menu {
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:1rem;
    }
    .dual-header .nav-menu a {
      color:var(--dark);
      text-decoration:none;
      padding:.4rem .75rem;
      border-radius:4px;
      transition:background .2s,color .2s;
    }
    .dual-header .nav-menu a:hover {
      background:var(--gold);
      color:var(--white);
    }




/*.hero-frame {*/
/*  max-width: 1100px;*/
/*  margin: 2rem auto;*/
/*  padding: 1rem;*/
/*  border: 1px solid #ddd;*/
/*  border-radius: 8px;*/
/*  background: #fafafa;*/
/*}*/
/*.hero-swiper { width:100%; height:70vh; border-radius:6px; overflow:hidden }*/
/*.hero-swiper .swiper-slide {*/
/*  background-size:cover; background-position:center 40%; position:relative;*/
/*}*/
/*.slide-content {*/
/*  position:absolute; top:50%; left:50%;*/
/*  transform:translate(-50%,-50%); width:80%; text-align:center;*/
/*}*/
/*.text-box {*/
/*  display:inline-block;*/
/*  background:rgba(255,255,255,0.5);*/
/*  padding:.75rem 1.25rem; border-radius:4px;*/
/*}*/
/*.text-box h2 { font-size:clamp(1.25rem,2.5vw,2rem); margin:0; color:#004a99 }*/
/*.text-box p { font-size:clamp(.9rem,1.8vw,1.1rem); margin:.5rem 0; color:#333 }*/
/*.text-box .btn {*/
/*  background:#004a99; color:#fff;*/
/*  padding:.5rem 1rem; border-radius:4px;*/
/*  text-decoration:none; font-size:.9rem;*/
/*}*/
/*.text-box .btn:hover { background:#003370 }*/
/*.hero-pgn { bottom:.75rem !important }*/
/*.hero-swiper .swiper-pagination-bullet { background:rgba(0,0,0,.3) }*/
/*.hero-swiper .swiper-pagination-bullet-active { background:#004a99 }*/
/*.hero-swiper .swiper-pagination {*/
/*  position: absolute;*/
 /*bottom: 12px !important;   */
/*  left: 50%;*/
/*  transform: translateX(-50%);*/
/*  z-index: 5;*/
/*}*/

/* Header CTA container: ensure children line up */
.header-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;        /* space between button and socials */
}

/* Social block */
.header-social {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  color: #333;
}

/* Label text */
.header-social span {
  margin-right: 0.5rem;
  font-weight: 500;
}

/* Icons */
.header-social .social-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.4rem;
  transition: transform 0.2s, opacity 0.2s;
}

.header-social a:hover .social-icon {
  transform: scale(1.1);
  opacity: 0.8;
}
/* MOBILE HERO REFINEMENTS */
/* MOBILE HERO FIXES */
/*@media (max-width: 600px) {*/
  /* 1) Full-width, no frame */
/*  .hero-frame {*/
/*    max-width: none;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    border: none;*/
/*    background: transparent;*/
/*  }*/

  /* 2) Force a single slide, hide overflows */
/*  .hero-swiper {*/
/*    width: 100%;*/
    /*aspect-ratio: 16 / 9;             */
/*    overflow: hidden !important;*/
/*    border-radius: 6px 6px 0 0; */
/*  }*/
/*  .hero-swiper .swiper-wrapper {*/
/*    display: flex !important;*/
/*  }*/
/*  .hero-swiper .swiper-slide {*/
/*    width: 100% !important;*/
/*    flex-shrink: 0;*/
/*    position: relative;*/
/*    z-index: 1;*/
    /*background-position: center 60% !important;*/
/*  }*/
/*  .hero-swiper .swiper-slide-active {*/
/*    z-index: 2;*/
/*  }*/
/*.hero-swiper .slide-img {*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  object-fit: contain;*/
/*  object-position: center;*/
  /*background-color: #000;  */
/*}*/

/*.img-box {*/
/*  width: 100%;*/
  /*aspect-ratio: 16/9;  */
  /*background: #000;         */
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  overflow: hidden;*/
/*}*/

/* 2) Show full image, centered, with bars */
/*.img-box img {*/
/*  width: 100%;*/
/*  height: 100%;*/
  /*object-fit: contain;*/
/*  object-position: center;*/
/*}*/

/* 3) Position your text exactly as before */
/*.slide-content {*/
  /*position: absolute; */
/*}*/
  /* 3) Text box tweaks */
/*  .text-box {*/
/*    background: rgba(255,255,255,0.6);*/
/*    backdrop-filter: blur(4px);*/
/*    padding: .5rem .75rem;*/
/*  }*/
/*  .text-box h2 { font-size: 1.1rem; }*/
/*  .text-box p  { font-size: .85rem; }*/

  /* 4) Bring dots up into the slider */
  /*.hero-swiper .swiper-pagination {*/
  /*  bottom: 8px !important;*/
  /*  left: 50%;*/
  /*  transform: translateX(-50%);*/
  /*}*/
/*}*/

/*@media (min-width: 768px) {*/
/*  .hero-swiper {*/
    /*background: none;  */
/*  }*/
/*  .hero-swiper .swiper-slide {*/
/*    background-image: none;*/
/*  }*/
/*  .hero-swiper .slide-img {*/
/*    display: none;*/
/*  }*/
/*  .hero-swiper .swiper-slide {*/
/*    background-image: var(--bg, none);*/
/*    background-size: cover;*/
/*    background-position: center 40%;*/
/*  }*/
/*}*/



.hero-frame {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
  }

  /*===== Slider Setup =====*/
  .hero-swiper {
    width: 100%;
    height: 70vh;           /* let image dictate height */
    overflow: hidden;
    position: relative;
  }
  .hero-swiper .swiper-wrapper {
    display: flex;
  }
  .hero-swiper .swiper-slide {
    width: 100% !important;
    flex-shrink: 0;
    position: relative;
  }

.hero-swiper .img-box {
  overflow: hidden;
  height: 100%;
  position: relative;
}

.hero-swiper .img-box img {
  position: absolute;
  top: 0;                 /* anchor at top */
  left: 0;
  width: 100%;
  height: 120%;           /* 130% so bottom 30% is clipped */
  object-fit: cover;
  object-position: center 75%;
}
  /*===== Image Handling =====*/
  /*.img-box {*/
  /*  width: 100%;*/
    /*background: #000;       */
  /*}*/
  /*.img-box img {*/
  /*  display: block;*/
  /*  width: 100%;*/
    /*height: auto;           */
  /*}*/

  /*===== Text Overlay =====*/
  .slide-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    pointer-events: none;
  }
  .text-box {
    pointer-events: auto;
    display: inline-block;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(4px);
    padding: .75rem 1.25rem;
    border-radius: 4px;
  }
  .text-box h2 {
    margin: 0 0 .5rem;
    font-size: clamp(1.25rem,2.5vw,2rem);
    color: #004a99;
  }
  .text-box p {
    margin: 0 0 1rem;
    font-size: clamp(.9rem,1.8vw,1.1rem);
    color: #333;
  }
  .text-box .btn {
    display: inline-block;
    background: #004a99;
    color: #fff;
    text-decoration: none;
    font-size: .9rem;
    padding: .5rem 1rem;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .text-box .btn:hover {
    background: #003370;
  }

  /*===== Pagination Dots =====*/
  .hero-swiper .swiper-pagination {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }

/* ==== MOBILE HERO PROPORTIONS (≤600px) ==== */
/* ===================================
   MOBILE HERO PROPORTIONS (≤600px)
   =================================== */
/* ==================================================
   MOBILE-ONLY: Hero images in neat boxes (≤600px)
   ================================================== */
@media (max-width: 600px) {
  /* 1) Center & constrain .img-box as a card */
  .hero-swiper .img-box {
    width: 90%;                    /* leave a little gutter left & right */
    margin: 0 auto 1rem;           /* center & add space below */
    aspect-ratio: 16 / 9;          /* lock in your ratio (or change to 4/3) */
    overflow: hidden;              /* crop anything outside the box */
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  /* 2) Make sure the <img> fills that card cleanly */
  .hero-swiper .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;             /* fill & crop evenly */
    object-position: top center;   /* keep the top of the frame visible */
    display: block;
  }

  /* 3) Adjust slider height (if needed) so cards never collapse */
  .hero-swiper {
    height: auto !important;       /* let the card’s aspect-ratio drive height */
  }

  /* 4) Pull pagination dots inside view */
  .hero-swiper .swiper-pagination {
    bottom: 6px !important;
  }
}

@media (max-width: 600px) {
  /* Remove the white backdrop */
  .text-box {
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }

  /* Give the words some contrast on any background */
  .text-box h2,
  .text-box p {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  }

  /* Anchor the text at the bottom so you avoid faces */
  .slide-content {
    top: auto !important;
    bottom: 8% !important;
    transform: translateX(-50%) !important;
    width: 90% !important;
  }
}




  
  

    
    /* ─────────────────────────────────────────────────
       HERO RESET & DEFAULT (desktop/tablet)
       ───────────────────────────────────────────────── */
    .hero {
      position: relative;
      display: flex;
      align-items: center;      /* vertical centre */
      justify-content: center;  /* horizontal centre */
      text-align: center;       /* centre all text */
      background-image: url('/assets/images/hero/hero1.jpg');
      background-size: cover;      /* fill & crop */
      background-position: center 60%;
      background-repeat: no-repeat;
      min-height: 60vh;         /* tweak to taste */
      padding: 2rem 1rem;       /* ensure some breathing room */
    }
    
    .hero__content {
      position: relative; 
      z-index: 1;
      max-width: 800px;
      width: 100%;
    }
    
    /* ─────────────────────────────────────────────────
       MOBILE OVERRIDE (≤ 640px)
       ───────────────────────────────────────────────── */
    @media (max-width: 640px) {
      .hero {
        background-image: url('/assets/images/hero-mobile.jpg');
        min-height: 40vh;  
        background-size: contain;
        background-position: center ;
        background-repeat: no-repeat;/* shorter on phones */
        
      }
    
      .hero__content {
        /* keep content centred and readable on small screens */
        text-align: center;
        margin-top: 1rem;
      }
    }

    .hero__content {
      position: relative;
      z-index: 1;
      text-align: center;
      color: #fff;
    }

    .hero__overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.4);
    }
    /* etc… */
    .hero__content {
      position: relative;
      text-align: center;
      max-width: 800px;
      padding: 0 1rem;
    }
    
    .hero__content h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    
    .hero__content p {
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
    }
    
    .btn--primary {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      background-color: #0066cc;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
      border-radius: 4px;
      transition: background .2s;
    }
    
    .btn--primary:hover {
      background-color: #005bb5;
    }
/* Hero Slider */
.hero-slider {
  width: 100%;
  height: 80vh;
  position: relative;
  margin-bottom: 2rem;
}
.hero-slider .swiper-slide.hero {
  background-size: cover;
  background-position: center;
}
.hero-pagination {
  bottom: 1rem !important;
  z-index: 10;
}




/* ==============================
   Snapshot Slider Styles
   ============================== */
#snapshot-slider {
  background: #fafafa;
  margin: 3rem auto;
  padding: 2rem 1rem;
  max-width: 1000px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#snapshot-slider .container {
  max-width: 1000px;
  margin: 0 auto;
}

#snapshot-slider .snapshot-swiper {
  width: 100%;
  overflow: visible;   /* allow shadows to show */
}

#snapshot-slider .swiper-wrapper {
  display: flex;       /* horizontal strip */
  gap: 1rem;           /* space between slides */
}

#snapshot-slider .swiper-slide {
  flex-shrink: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  width: calc((100% - 2rem) / 3);  /* 3 slides per view with 1rem gaps */
  display: flex;
  flex-direction: column;
}

#snapshot-slider .slide-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

#snapshot-slider .slide-caption {
  padding: 0.5rem;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  flex-grow: 1;
}

/* nav arrows */
#snapshot-slider .snapshot-prev,
#snapshot-slider .snapshot-next {
  color: #004a99;
}

/* pagination bullets */
#snapshot-slider .snapshot-pagination .swiper-pagination-bullet {
  background: #004a99;
  opacity: 0.7;
}
#snapshot-slider .snapshot-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* ===== Responsive tweaks ===== */
@media (max-width: 768px) {
  /* 2 slides per view */
  #snapshot-slider .swiper-slide {
    width: calc((100% - 1rem) / 2);
  }
}
@media (max-width: 480px) {
  /* 1 slide per view */
  #snapshot-slider .swiper-slide {
    width: 100%;
  }
}

/* snapshot-scoped: no white gaps & flex layout */
#snapshot-slider .snapshot-swiper {
  overflow: hidden; 
}

#snapshot-slider .snapshot-swiper .swiper-wrapper {
  display: flex;  
}

#snapshot-slider .snapshot-swiper .swiper-slide {
  flex-shrink: 0; /* prevents shrinking below natural width */
}

/* optional: style tweaks */
#snapshot-slider .slide-img { object-fit: cover; }
#snapshot-slider .slide-caption { text-align: center; }
#snapshot-slider .swiper-wrapper {
  display: flex;
  gap: 1rem;
}

#snapshot-slider .swiper-slide {
  flex-shrink: 0;
  width: calc((100% - 3rem) / 4);  /* four slides, 1rem gaps */
}

@media (max-width: 768px) {
  #snapshot-slider .swiper-slide {
    width: calc((100% - 1rem) / 2); /* two slides, 1rem gap */
  }
}

@media (max-width: 480px) {
  #snapshot-slider .swiper-slide {
    width: 100%;                    /* one slide, no gap */
  }
}


/* ==============================
   Snapshot Slider (only these)
   ============================== */
   
     #snapshot-slider {
      background-color: #fafafa;  /* white/light grey block */
      margin: 3rem auto;          /* gap above + centered */
      padding: 2rem 1rem;         /* breathing room */
      max-width: 1000px;          /* constrain width */
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      position: relative;
      z-index: 1;                 /* above anything behind */
    }

    
    #snapshot-slider .container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
.snapshot-swiper {
  width: 100%;
  margin: 2rem 0;
  padding: 3rem 0;
  background: #fff;
  overflow: hidden;
}

.snapshot-swiper .swiper-container {
  width: 100%;
}

.snapshot-swiper .swiper-wrapper {
  display: flex;
  transition: transform 0.3s;
}

.snapshot-swiper .swiper-slide {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  height: 220px;
  margin-right: 1rem; /* space between slides */
}

.snapshot-swiper .slide-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px 6px 0 0;
}

.snapshot-swiper .slide-caption {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: #333;
  text-align: center;
  flex-grow: 1;
}

/* navigation arrows */
.snapshot-swiper .swiper-button-prev,
.snapshot-swiper .swiper-button-next {
  color: #004a99;
}

/* pagination bullets */
.snapshot-swiper .swiper-pagination-bullet {
  background: #004a99;
  opacity: 0.7;
}
.snapshot-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}



/* =====================================
   Hero Overlay—No Box (Desktop & Mobile)
   ===================================== */

/* 1) Remove the white/blur backdrop */
.slide-content .text-box {
  background: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

/* 2) Style the text for contrast over any image */
.slide-content .text-box h2,
.slide-content .text-box p {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

/* 3) Anchor the overlay at the bottom center */
.slide-content {
  top: auto !important;
  bottom: 8% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 600px;              /* optional cap on very wide screens */
  text-align: center;  
}

/* 4) Tweak button colors if needed */
.slide-content .btn {
  background: rgba(0, 74, 153, 0.85) !important;
  color: #fff !important;
  border: none !important;
}




 
    .news-flash {
      background: #004a99;
      color: #fff;
      padding: 0.5rem 1rem;
      overflow: hidden;
    }
    
    .news-flash .container {
      display: flex;
      align-items: center;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .news-flash__label {
      flex: 0 0 auto;
      font-weight: bold;
      margin-right: 1rem;
    }
    
    .news-flash__list {
      flex: 1 1 auto;
      display: flex;
      animation: marquee 15s linear infinite;
      list-style: none;
      padding-left: 0;
      margin: 0;
    }
    
    .news-flash__list li {
      margin-right: 3rem;
      white-space: nowrap;
    }
    
    /* marquee effect */
    @keyframes marquee {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-100%); }
    }
    
    /* Call-to-Action Banner */
    .cta-banner {
      padding: 3rem 1rem;
      text-align: center;
      color: #fff;
      position: relative;
      overflow: hidden;
    }
    
    .cta-banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
    }
    
    .cta-banner .container {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      z-index: 2;
    }
    
    .cta-banner__title {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    
    .cta-banner__text {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 2rem;
    }
    
    .cta-banner__btn {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      text-decoration: none;
      background-color: #ff6600;
      border-radius: 4px;
      transition: background-color 0.2s ease;
    }
    
    .cta-banner__btn:hover {
      background-color: #e65500;
    }
    
    @media (max-width: 768px) {
      .cta-banner__title {
        font-size: 1.75rem;
      }
      .cta-banner__text {
        font-size: 1rem;
      }
    }

    /* Vision Section */
    .about {
      background: #fafafa;
      padding: 5rem 1rem;
    }
    .about .container {
      max-width: 900px;
      margin: 0 auto;
    }
    .about h2 {
      text-align: center;
      margin-bottom: 2.5rem;
      font-size: 2.25rem;
      color: #1a1a1a;
    }
    .about__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
    }
    .about__item h3 {
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
      color: #004a99;
    }
    .about__item p {
      font-size: 1rem;
      line-height: 1.7;
      color: #333;
    }

    /* Events Section */
    .events {
      padding: 4rem 1rem;
      background: #fff;
    }
    .events .container {
      max-width: 1000px;
      margin: 0 auto;
    }
    .events h2 {
      text-align: center;
      font-size: 2rem;
      margin-bottom: 2rem;
      color: #1a1a1a;
    }
    .events__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }
    .event-card {
      background: #f8f8f8;
      padding: 1.5rem;
      border-radius: 6px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .event-card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.5rem;
      color: #004a99;
    }
    .event-date,
    .event-location {
      font-size: 0.95rem;
      color: #555;
      margin: 0.25rem 0;
    }
    .btn--secondary {
      display: inline-block;
      margin-top: 1rem;
      padding: 0.6rem 1.2rem;
      background-color: #0066cc;
      color: #fff;
      text-decoration: none;
      border-radius: 4px;
      transition: background 0.2s;
    }
    .btn--secondary:hover {
      background-color: #0055aa;
    }

    /* 2) Styles for the quick-links block */
    .news-links {
      padding: 2rem 1rem;
      background: #fafafa;
      text-align: center;
    }
    
    .news-links h2 {
      font-size: 1.75rem;
      margin-bottom: 1.5rem;
    }
    
    .news-links__grid {
      display: flex;
      gap: 1rem;
      justify-content: center;
      margin-bottom: 1.5rem;
    }
    
    .news-links__grid a {
      display: block;
      width: 120px;
      height: 120px;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .news-links__grid a:hover {
      transform: translateY(-4px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .news-links__grid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .news-redirect .container {
      text-align: center;
      margin: 1.5rem 0;
    }

    .news-flash__link {
      display: block;
      color: inherit;
      text-decoration: none;
    }
    
    /* move your existing .news-flash rules to apply to the link */
    .news-flash__link .news-flash__label,
    .news-flash__link .news-flash__list {
      pointer-events: none; /* so the marquee still animates when hovered/clicked */
    }
    .news-flash__link:hover {
      cursor: pointer;
    }


    /* Committee Preview */
    .committee-preview {
      background: #fafafa;
      padding: 4rem 1rem;
    }
    .committee-preview .container {
      max-width: 900px;
      margin: 0 auto;
    }
    .committee-preview h2 {
      text-align: center;
      font-size: 2rem;
      color: #1a1a1a;
      margin-bottom: 2rem;
    }
    .preview-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 2rem;
    }
    .member-card {
      text-align: center;
    }
    .member-card img {
      width: 120px;
      height: 120px;
      object-fit: cover;
      border-radius: 50%;
      border: 2px solid #ddd;
      margin-bottom: 0.75rem;
    }
    .member-card h5 {
      font-size: 1rem;
      margin: 0.25rem 0;
      color: #004a99;
    }
    .member-card p {
      font-size: 0.85rem;
      color: #555;
      margin: 0;
    }
    .preview-cta {
      text-align: center;
      margin-top: 2rem;
    }
    .preview-cta .btn--primary {
      padding: 0.6rem 1.4rem;
      font-size: 0.95rem;
    }


    .contact {
      padding: 3rem 1rem;
      background: #fff;
      text-align: center;
    }
    
    .contact h2 {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    
    .contact__grid {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
    }
    
    .contact__info {
      flex: 1 1 250px;
      text-align: left;
      line-height: 1.8;
    }
    
    .contact__info a {
      color: #004a99;
      text-decoration: none;
    }
    
    .contact__map {
      flex: 1 1 300px;
      height: 200px;
    }
    
    .contact__map iframe {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 8px;
    }

    .site-footer {
      background: #002b5c;
      color: #fff;
      padding: 2rem 1rem;
      text-align: center;
    }
    
    .footer__nav,
    .footer__social {
      display: flex;
      gap: 1.5rem;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }
    
    .site-footer a {
      color: #fff;
      text-decoration: none;
      font-size: 0.95rem;
    }
    
    .site-footer a:hover {
      text-decoration: underline;
    }
    
    .site-footer small {
      display: block;
      margin-top: 1rem;
      font-size: 0.85rem;
    }

    /* Base & Utility */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    html {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: #333;
    }
    
    body {
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    
    /* Privacy Page Main Content */
    main.privacy {
      background: #fafafa;
      padding: 4rem 1rem;
    }
    
    main.privacy h1 {
      font-size: 2rem;
      color: #004a99;
      text-align: center;
      margin-bottom: 1rem;
    }
    
    main.privacy p {
      margin-bottom: 1rem;
    }
    
    main.privacy h2 {
      font-size: 1.5rem;
      color: #004a99;
      margin-top: 2rem;
      margin-bottom: 0.75rem;
    }
    
    main.privacy ul {
      list-style: disc inside;
      margin: 0 0 1.5rem;
      padding: 0;
    }
    
    main.privacy li {
      margin-bottom: 0.5rem;
    }
    
    main.privacy a {
      color: #004a99;
      text-decoration: underline;
      transition: opacity 0.2s;
    }
    
    main.privacy a:hover {
      opacity: 0.8;
    }
    
    
    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .header__inner,
      .footer__inner {
        flex-direction: column;
      }
      .header__nav,
      .footer__nav {
        margin-top: 1rem;
      }
    }

    /* 1. Fluid container padding */
    .container {
      padding: 0 1rem;
      margin: 0 auto;
    }
    
    /* 2. Global mobile-first styles
       (already cover most single-column layouts) */
    
    /* 3. Adjust header/nav */
    @media (max-width: 768px) {
      .header__inner {
        flex-direction: column;
        align-items: flex-start;
      }
      .header__nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-top: 0.75rem;
      }
      .header__nav a {
        margin: 0.5rem 0;
      }
    }
    
    /* 4. Hero tweaks */
    @media (max-width: 640px) {
      .hero {
        padding: 2rem 1rem;
      }
      .hero h1 {
        font-size: 1.5rem;
        line-height: 1.3;
      }
    }
    
    /* 5. Snapshot slider already has Swiper breakpoints, but ensure full-width slides: */
    .swiper-container {
      width: 100%;
    }
    @media (max-width: 640px) {
      .swiper-slide {
        width: 80% !important;
        margin: 0 auto;
      }
    }
    
    /* 6. How-It-Works & News-Quick-Links: stack into one column */
    @media (max-width: 768px) {
      .how-it-works .steps,
      .news-links__grid {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .how-it-works .step,
      .news-links__grid a {
        width: 100%;
        max-width: 300px;
      }
    }
    
    /* 7. CTA Banner: shrink text and padding */
    @media (max-width: 768px) {
      .cta-banner {
        padding: 2rem 1rem;
      }
      .cta-banner__title {
        font-size: 1.75rem;
      }
      .cta-banner__text {
        font-size: 1rem;
      }
    }
    
    /* 8. Contact section: switch to one-column */
    @media (max-width: 640px) {
      .contact__grid {
        flex-direction: column;
        text-align: left;
      }
      .contact__map {
        height: 180px;
      }
    }
    
    /* 9. Footer: center items vertically */
    @media (max-width: 768px) {
      .footer__inner {
        flex-direction: column;
      }
      .footer__nav,
      .footer__social {
        flex-direction: column;
        gap: 0.5rem;
      }
    }
    
    /* 10. Typography tweaks for small screens */
    @media (max-width: 480px) {
      html { font-size: 14px; }
    }


    /*==================================================
      CONTACT PAGE OVERRIDES
    ==================================================*/
    #contact .container {
      /* force all direct text to align left */
      text-align: left;
    }
    
    #contact h2 {
      /* if your <h2> was centering via a global rule */
      text-align: left;
    }
    
    #contact p,
    #contact .contact__info p {
      /* ensure your paragraphs in the info block are left-aligned */
      text-align: left;
    }
    
    /* About Section */
    #about {
      background: var(--white);
      padding:3rem 1rem;
      max-width:800px;
      margin:0 auto;
      text-align:center;
    }
    #about h2 {
      font-family: var(--font-heading);
      font-size:2rem;
      color:var(--accent);
      margin-bottom:1.5rem;
    }
    #about p {
      color:var(--text-muted);
      margin-bottom:1rem;
    }
    
    /* Committee Section */
    .committee .container {
      width: 90%;
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem 0;
    }
    
    .role-group {
      margin-bottom: 2.5rem;
    }
    
    .role-group h4 {
      font-family: var(--font-heading);
      font-size: 1.4rem;
      color: var(--accent);
      margin-bottom: 1rem;
      text-align: center;
    }
    
    /* Grid of member cards */
    .member-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.5rem;
      align-items: start;
    }
    
    /* Individual member card */
    .member-card {
      background: var(--white);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 1rem;
      text-align: center;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    
    /* Round avatars */
    .member-card img {
      display: block;                /* center with auto-margins */
      width: 120px;
      height: 120px;
      object-fit: cover;
      object-position: center top;
      border-radius: 50%;            /* makes it a perfect circle */
      border: 2px solid var(--gold);
      margin: 0 auto 0.75rem;        /* auto-horizontally center + bottom space */
    }

    
    .member-card h5 {
      font-family: var(--font-heading);
      font-size: 1rem;
      margin-bottom: 0.25rem;
      color: var(--dark);
    }
    
    .member-card p {
      font-size: 0.9rem;
      color: var(--text-muted);
    }
    
    /* Mobile tweak: single column */
    @media (max-width: 480px) {
      .member-grid { grid-template-columns: 1fr; }
    }
    
    /* Contact Section */
   /* Contact Section */
    .contact .container {
      padding: 3rem 1rem;
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .contact h2 {
      font-family: var(--font-heading);
      text-align: center;
      color: var(--accent);
      margin-bottom: 2rem;
    }
    
    /* Two-column grid */
    .contact-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 2rem;
    }
    
    /* Address & map */
    .contact-info h4 {
      font-family: var(--font-heading);
      margin-bottom: 1rem;
      color: var(--dark);
    }
    .map-container {
      margin-top: 1rem;
      border: 2px solid var(--border-color);
      border-radius: 6px;
      overflow: hidden;
    }
    
    /* Form styling */
    .contact-form h4 {
      font-family: var(--font-heading);
      margin-bottom: 1rem;
      color: var(--dark);
    }
    .contact-form form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    .contact-form label {
      display: flex;
      flex-direction: column;
      font-size: .95rem;
      color: var(--dark);
    }
    .contact-form input,
    .contact-form textarea {
      padding: .6rem .8rem;
      font-family: var(--font-sans);
      border: 1px solid var(--border-color);
      border-radius: 4px;
      resize: vertical;
    }
    .contact-form button {
      width: fit-content;
      padding: .6rem 1.2rem;
      font-family: var(--font-heading);
      background: var(--gold);
      color: var(--white);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background .2s;
    }
    .contact-form button:hover {
      background: var(--accent);
    }

    .form-status {
      padding: 1rem;
      border-radius: 4px;
      margin-bottom: 1rem;
      font-weight: 600;
    }
    .form-status.success { background: #e6f7e6; color: #2d662d; }
    .form-status.error   { background: #fdecea; color: #741f1f; }

    /* Tournaments Section */
    .tournaments .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }
    
    .tournaments h2 {
      font-family: var(--font-heading);
      color: var(--accent);
      text-align: center;
      margin-bottom: 1.5rem;
    }
    
    /* Upcoming Events Table */
    .tourn-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 3rem;
    }
    
    .tourn-table th,
    .tourn-table td {
      padding: 0.75rem 1rem;
      border: 1px solid var(--border-color);
      text-align: left;
    }
    
    .tourn-table th {
      background: var(--dark);
      color: var(--white);
    }
    
    .tourn-table tbody tr:nth-child(even) {
      background: var(--grey-light);
    }
    
    .btn {
      display: inline-block;
      padding: 0.4rem 0.8rem;
      background: var(--gold);
      color: var(--white);
      border-radius: 4px;
      text-decoration: none;
      font-family: var(--font-heading);
      transition: background 0.2s;
    }
    
    .btn:hover {
      background: var(--accent);
    }
    
    /* Past Results Grid */
    .result-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.5rem;
    }
    
    .result-card {
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 1rem;
      background: var(--white);
      box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    }
    
    .result-card h4 {
      font-family: var(--font-heading);
      margin-bottom: 0.5rem;
      color: var(--dark);
    }
    
    .result-card p {
      margin: 0.25rem 0;
      font-size: 0.95rem;
      color: var(--text-muted);
    }


    /* Footer */
    .site-footer {
      background: var(--dark);
      color: var(--white);
      text-align:center;
      padding:2rem 1rem;
    }
    .site-footer .footer-links a {
      color: var(--light);
      margin: 0 .5rem;
      text-decoration:none;
      transition:color .2s;
    }
    .site-footer .footer-links a:hover {
      color: var(--gold);
    }
    .site-footer p {
      margin-top:1rem;
      font-size:.8rem;
    }
    /* Gallery Section */
    .gallery .container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 3rem 1rem;
    }
    
    .gallery h2 {
      font-family: var(--font-heading);
      color: var(--accent);
      text-align: center;
      margin-bottom: 2rem;
    }
    
    /* Grid Layout */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1rem;
    }
    
    .gallery-item img {
      display: block;
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      transition: transform 0.2s;
    }
    
    .gallery-item img:hover {
      transform: scale(1.03);
    }
    
    /* Lightbox Overlay */
    .lightbox {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.85);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .lightbox-img {
      max-width: 90%;
      max-height: 80%;
      border-radius: 4px;
    }
    
    .lightbox-close {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 2rem;
      color: var(--white);
      cursor: pointer;
    }
    
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 0.75rem;
      margin-bottom: 2rem;
    }
    
    .gallery-grid .thumb {
      position: relative;
      cursor: pointer;
      overflow: hidden;
      border-radius: 4px;
    }
    
    .gallery-grid .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .2s;
    }
    
    .gallery-grid .thumb:hover img {
      transform: scale(1.05);
    }
    
    .gallery-grid .thumb.more {
      background: rgba(0,0,0,0.6);
      color: #fff;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    
    /* Mobile tweaks */
    @media(max-width:600px) {
      .dual-header .brand-block h1 { font-size:1.2rem; }
      .dual-header .nav-menu { gap:.5rem; }
    }
    /*  Elegant Event Heading  */
    .gallery .container h3 {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;           /* slightly smaller */
      font-weight: 700;
      text-transform: none;        /* keep original casing */
      letter-spacing: 0.5px;       /* subtle tracking */
      color: var(--accent);
      margin: 1.5rem 0 0.75rem;    /* less vertical gap */
      text-align: center;
    }
    
    .gallery .container h3::after {
      width: 50px;                 /* shorter underline */
      height: 3px;                 /* thinner flourish */
      margin-top: 0.4rem;          /* tighter under-title spacing */
    }

/* Allow clicks through when PhotoSwipe is closed */


 /*────────────────────────────────────────────────────────*/
/* 0) RESET & BOX-SIZING                                   */
/*────────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.5;
  overflow-x: hidden; /* prevent accidental overflow */
}

/*────────────────────────────────────────────────────────*/
/* 1) GLOBAL CONTAINER                                    */
/*────────────────────────────────────────────────────────*/
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/*────────────────────────────────────────────────────────*/
/* 2) HEADER & FOOTER PLACEHOLDERS                        */
/*────────────────────────────────────────────────────────*/
#header-placeholder,
#footer-placeholder {
  width: 100%;
}

/*────────────────────────────────────────────────────────*/
/* 3) MAIN FLEX LAYOUT                                    */
/*────────────────────────────────────────────────────────*/
.content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;      /* allows children to wrap on small screens */
}
.roster {
  flex: 2 1 0;          /* grow:2, shrink:1, basis:0 */
  min-width: 0;         /* allow shrinking */
}
.registration {
  flex: 1 1 0;          /* grow:1, shrink:1, basis:0 */
  min-width: 0;
}

/*────────────────────────────────────────────────────────*/
/* 4) STACK SECTIONS ON MOBILE                            */
/*────────────────────────────────────────────────────────*/
@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }
}

/*────────────────────────────────────────────────────────*/
/* 5) SECTION HEADINGS                                     */
/*────────────────────────────────────────────────────────*/
.roster h2,
.registration h2 {
  color: #004a99;
  margin-bottom: 1rem;
}

/*────────────────────────────────────────────────────────*/
/* 6) RESPONSIVE TABLE WRAPPER                             */
/*────────────────────────────────────────────────────────*/
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  min-width: 0;         /* allow shrinking in flex container */
}
.table-responsive table {
  width: 100% !important;
  margin: 0;
  border-collapse: collapse;
}

/*────────────────────────────────────────────────────────*/
/* 7) DATA TABLE STYLING                                   */
/*────────────────────────────────────────────────────────*/
#players-table th,
#players-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
  font-size: 14px;
}
#players-table thead th {
  background: #004a99;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
#players-table tbody tr:nth-child(odd) {
  background: #fafafa;
}

/*────────────────────────────────────────────────────────*/
/* 8) FORM STYLING                                         */
/*────────────────────────────────────────────────────────*/
.registration form {
  display: flex;
  flex-direction: column;
}
.registration label {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.registration input,
.registration select {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 0;
}
.registration .btn {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #004a99;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
.registration .btn:hover {
  background: #003370;
}

/*────────────────────────────────────────────────────────*/
/* 9) TIGHTER TABLE PADDING ON VERY SMALL SCREENS         */
/*────────────────────────────────────────────────────────*/
@media (max-width: 576px) {
  #players-table th,
  #players-table td {
    padding: 4px 6px;
    font-size: 12px;
  }
}