/********** Template CSS — Refactored **********/
/* === Design tokens === */
:root {
  /* Brand colors */
  --primary: #fdb714;
  --secondary: #ee2b7b;
  --accent-blue: #1e94d2;
  --light: #F8F8F9;
  --dark: #001D23;

  /* Fonts */
  --heading-font: 'Lulo Clean One Bold', sans-serif;
  --body-font: 'DIN Next LT Arabic', 'DINNextLTArabic-Regular', 'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* Shadows & effects */
  --shadow-1: 0 1px 2px rgba(0,0,0,.06);
  --shadow-2: 0 10px 24px rgba(0,0,0,.12);
  --ring: 0 0 0 3px rgba(30,148,210,.18);

  /* Layout helpers */
  --nav-offset: 56px;

  /* Fluid type scale */
  --step--1: clamp(0.875rem, 0.74rem + 0.4vw, 1rem);
  --step-0:  clamp(1rem,    0.86rem + 0.6vw, 1.125rem);
  --step-1:  clamp(1.125rem,0.95rem + 0.9vw, 1.375rem);
  --step-2:  clamp(1.375rem,1.10rem + 1.3vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.35rem + 2.0vw, 2.25rem);
  --step-4:  clamp(2rem,    1.60rem + 2.5vw, 3rem);

  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

/* === Base === */
html, body { height: 100%; margin: 0; padding: 0; scroll-behavior: smooth; font-family: var(--body-font); }
body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
body, p, li { font-size: var(--step-0); line-height: 1.6; }
h6{ font-size: var(--step-0); }
h5{ font-size: var(--step-2); line-height:1.25; }
h4{ font-size: var(--step-3); line-height:1.2; }
h3{ font-size: var(--step-3); line-height:1.2; }
h2{ font-size: var(--step-4); line-height:1.15; }
h1{ font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem); line-height:1.1; }
.display-4{ font-size: clamp(2.5rem, 5vw + 1rem, 5rem); line-height:1.05; }

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--heading-font); font-weight: 900; text-transform: uppercase; }

/* Font Awesome icons — single source of truth per user preference */
i[class*="fa"], .fa, .fas, .far, .fal, .fab { color: #011a1f !important; }

/* Utilities */
.container-fluid { 
  container-type: inline-size; 
  container-name: section; 
  padding-left: 15px !important; 
  padding-right: 15px !important; 
  max-width: 100% !important;
}
.row { --bs-gutter-x: 1rem; margin-left: 0 !important; margin-right: 0 !important; }

/* Section specific container overrides */
.vh-section .container-fluid,
.testimonial-section .container-fluid,
#about .container-fluid,
#other-services .container-fluid,
#clients .container-fluid {
  padding-left: 15px !important; 
  padding-right: 15px !important; 
}
.hero-line { display: block; }
.hero-line.nowrap { white-space: nowrap; }
.logo{ height: 42px; width: auto; display: block; }
.footer-logo{ height: 40px; width: auto; display: block; margin-bottom: 1rem; max-width: 100%; filter: brightness(0) invert(1); }
.about-media{ position: relative; aspect-ratio: 16/9; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); }
.about-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.obj-cover{ object-fit: cover; }
.mw-600{ max-width: 600px; } .mw-500{ max-width: 500px; } .mw-400{ max-width: 400px; }
.sec-map{ overflow: hidden; } .map-iframe{ border: 0; }
.btn-tall{ height: 54px; }
.underline{ text-decoration: underline; }

/* Anchor scroll offsets */
#about, #sponsorships, #athlete, #other-services, #clients, #contact { scroll-margin-top: var(--nav-offset); padding-top: 1.5rem !important; }

/* === Back to top === */
.back-to-top { position: fixed; display: none; right: 30px; bottom: 30px; z-index: 99; }

/* === Spinner === */
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }

/* === Buttons === */
.btn { 
  font-weight: 500; 
  transition: transform .2s ease, box-shadow .2s ease, background-color 150ms; 
  min-height: 44px;
  padding: 8px 16px;
}
.btn.btn-primary { background: linear-gradient(90deg, #ffb52e, #ff9f1a); border: none; color:#fff; box-shadow: var(--shadow-1); }
.btn.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); color:#fff; }
.btn:focus { box-shadow: var(--ring) !important; }
.btn.btn-outline-primary { border-width: 2px; border-color: var(--accent-blue); color: var(--accent-blue); background: transparent; }
.btn.btn-outline-primary:hover { background-color: var(--accent-blue); color:#fff; }

@media (max-width: 575.98px){
  .btn{ 
    font-size: 0.9rem; 
    padding: 10px 14px; 
    min-height: 42px;
  }
  .btn-sm-square, .btn-lg-square{ width: 36px; height: 36px; }
}
.btn-square{ width:38px; height:38px; }
.btn-sm-square{ width:32px; height:32px; }
.btn-lg-square{ width:48px; height:48px; }
.btn-square,.btn-sm-square,.btn-lg-square{ padding:0; display:flex; align-items:center; justify-content:center; font-weight:normal; }

/* Custom primary button (no Bootstrap dependency) */
.kf-btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:220px; height:54px; padding:0 22px; border-radius:12px; border:none; cursor:pointer; font-weight:700; color:#fff; background: linear-gradient(90deg, #ffb52e, #ff9f1a); box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, background-color 150ms; }
.kf-btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-2); color:#fff; }
.kf-btn-primary:focus{ outline:0; box-shadow: var(--ring) !important; }

/* === Navbar === */
.fixed-top { transition: .5s; }
.top-bar { height: 45px; border-bottom: 1px solid rgba(255,255,255,.07); }
/* Ensure Follow-us icons are visible on the dark top bar */
.top-bar a, .top-bar i{ color: rgba(255,255,255,.9) !important; }
.top-bar .fa, .top-bar .fas, .top-bar .far, .top-bar .fal, .top-bar .fab, .top-bar i[class*="fa"]{ color: rgba(255,255,255,.95) !important; }
.top-bar a:hover, .top-bar a:focus{ color: var(--primary) !important; }

/*Navbar container fixes */
.navbar {
  padding: 0.5rem 1rem !important;
  min-height: auto !important;
  overflow: visible !important;
  position: relative !important;
}

.navbar .container-fluid {
  padding: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

/* Logo always visible and properly positioned */
.navbar-brand {
  flex-shrink: 0 !important;
  margin-right: 1rem !important;
  z-index: 1051 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-brand .logo {
  height: 42px !important;
  width: auto !important;
  display: block !important;
  max-width: none !important;
}

/*Navbar navigation */
.navbar .dropdown-toggle::after { border: none; content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; vertical-align: middle; margin-left: 8px; }
.navbar .navbar-nav { 
  flex-wrap: nowrap !important; 
  align-items: center; 
  gap: clamp(8px, 1.5vw, 20px); 
  overflow: visible !important;
}
.navbar .navbar-collapse{ 
  flex-wrap: nowrap !important; 
  overflow: visible !important;
}
.navbar .btn{ white-space: nowrap; flex-shrink: 0; }
.navbar .navbar-nav .nav-link { 
  margin-right: 0; 
  padding: 20px clamp(6px, 1vw, 12px); 
  color: #fff; 
  font-weight: 600; 
  outline: none; 
  white-space: nowrap; 
  letter-spacing: .5px; 
  font-size: clamp(10px, .8vw, 13px); 
  text-transform: uppercase; 
  opacity:.95; 
  position:relative; 
}
.navbar .navbar-nav .nav-link:hover{ opacity:1; }
.navbar .navbar-nav .nav-link.active::after, .navbar .navbar-nav .nav-link:hover::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:3px; background: linear-gradient(90deg, var(--primary), var(--accent-blue)); border-radius:2px; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--primary); }

/* Mobile navbar adjustments */
@media (max-width: 991.98px){
  .navbar {
    padding: 0.5rem 0.75rem !important;
  }
  .navbar .container-fluid {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  .navbar-brand {
    order: 0 !important;
    flex-shrink: 0 !important;
  }
  .navbar-brand .logo {
    height: 36px !important;
  }
  .navbar-toggler {
    order: 2 !important;
    flex-shrink: 0 !important;
  }
  .navbar .navbar-nav{ 
    margin-top: 10px; 
    border-top: 1px solid rgba(0,0,0,.07); 
    background: var(--dark); 
    gap: 8px; 
    width: 100% !important;
    flex-wrap: wrap !important;
    order: 3 !important;
  }
  .navbar .navbar-nav .nav-link{ 
    padding: 12px 0; 
    margin-right: 0; 
    font-size: 13px; 
    width: 100% !important;
    text-align: left !important;
  }
  .navbar .navbar-collapse { 
    overflow: visible !important; 
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* Large screen navbar adjustments */
@media (min-width: 992px) and (max-width: 1199.98px){
  .navbar .navbar-nav { gap: clamp(12px, 1.8vw, 18px); }
  .navbar .navbar-nav .nav-link { font-size: clamp(10px, .85vw, 12px); padding: 20px clamp(4px, .8vw, 8px); }
}

/* Extra large screen navbar */
@media (min-width: 1200px){
  .navbar .navbar-nav { gap: 20px; }
  .navbar .navbar-nav .nav-link { font-size: 13px; padding: 20px 8px; }
}

@media (min-width: 992px){
  .navbar .nav-item .dropdown-menu{ display:block; visibility:hidden; top:100%; transform: rotateX(-75deg); transform-origin: 0% 0%; transition:.5s; opacity:0; }
  .navbar .nav-item:hover .dropdown-menu{ transform: rotateX(0deg); visibility: visible; transition:.5s; opacity:1; }
}

/* Ensure toggler is always visible */
.navbar-toggler {
  border: none !important;
  padding: 4px 8px !important;
  z-index: 1050 !important;
  position: relative !important;
  margin-left: auto !important;
}

/* Fix container overflow issues */
.fixed-top {
  overflow: visible !important;
}

.fixed-top .container-fluid {
  overflow: visible !important;
}

/* === Header / Carousel === */
#header-carousel {
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  width: 100vw !important;
  max-width: none !important;
}

#header-carousel .container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

#header-carousel .carousel-item {
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#header-carousel .carousel-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.carousel-caption { inset:0; display:flex; align-items:center; justify-content:center; text-align:center; background: rgba(0,29,35,.8); z-index:1; }
.carousel-control-prev, .carousel-control-next { width: 15%; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 3rem; height: 3rem; background-color: var(--dark); border: 12px solid var(--dark); border-radius: 3rem; }
@media (max-width: 768px){
  #header-carousel .carousel-item{ position:relative; min-height:450px; }
  #header-carousel .carousel-item img{ position:absolute; width:100%; height:100%; object-fit:cover; }
}
.page-header { padding-top: 12rem; padding-bottom: 30px; background: linear-gradient(rgba(0,29,35,.8), rgba(0,29,35,.8)), url(../img/carousel-1.jpg) center/cover no-repeat; }
.page-header .breadcrumb-item+.breadcrumb-item::before { color: #999; }

/* === Causes === */
.causes-item .progress { height: 5px; border-radius: 0; overflow: visible; }
.causes-item .progress .progress-bar { position: relative; overflow: visible; width: 0; border-radius: 0; transition: 5s; }
.causes-item .progress .progress-bar span { position: absolute; top: -7px; right: 0; width: 40px; height: 19px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--primary); color: #fff; }
.causes-item .causes-overlay { position: absolute; inset:0 0 auto 0; width:100%; height:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.5); overflow:hidden; opacity:0; transition:.5s; }
.causes-item:hover .causes-overlay { height: 100%; opacity: 1; }

/* === Service grid === */
.service-grid{ max-width: 1200px; margin-inline: auto; row-gap: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.service-item{ 
  background:#fff; 
  height: 180px; 
  border:1px solid rgba(0,0,0,.06); 
  border-radius:12px; 
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  gap:.4rem; 
  padding: 20px 16px; 
}

@media (max-width: 575.98px){
  .service-item{ 
    height: 160px; 
    padding: 16px 12px; 
    gap: .3rem;
  }
  .service-item h4{ font-size: 1rem; }
  .service-item i{ width: 40px; height: 40px; font-size: 20px; }
}
.card-elevate{ box-shadow: var(--shadow-1); transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.card-elevate:hover, .card-elevate:focus{ transform: translateY(-4px); box-shadow: var(--shadow-2); outline:none; border-color: rgba(253,183,20,.55); }
.service-item i{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--primary) !important; margin-bottom:.15rem; font-size: 22px; }
.service-item h4{ font-size: 1.1rem; line-height:1.2; letter-spacing:.1px; margin: 0 0 .2rem; font-weight:700; }
.service-item p{ margin:0; color:#6c757d; font-size: clamp(12px,1.1vw,13px); line-height: 1.4; }

/* === Enquire Now (Donate with overlay) === */
.donate{ 
  position: relative; 
  background: transparent; 
  padding: clamp(80px, 10vh, 120px) 0 !important;
  margin: 0 !important;
  min-height: 600px;
  display: flex;
  align-items: center;
  z-index: 10 !important;
  isolation: isolate !important;
}
.donate[data-parallax]{ background-size: cover; background-position: center; background-repeat: no-repeat; }
.donate::before{ 
  content: ""; 
  position: absolute; 
  inset: 0; 
  background: rgba(0,29,35,.85); 
  z-index: -1; 
  pointer-events: none;
}

/* Enquire Now section specific fixes */
#contact {
  position: relative !important;
  z-index: 5 !important;
  background: url('../img/enq-img.jpg') center/cover no-repeat !important;
  background-attachment: scroll !important;
  margin: 0 !important;
  margin-top: 0 !important;
  min-height: 100vh !important;
  clear: both !important;
  padding: clamp(80px, 10vh, 120px) 0 !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  overflow: hidden !important;
}

#contact::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,29,35,.75) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#contact > * {
  position: relative !important;
  z-index: 2 !important;
}

#contact .container {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 15px !important;
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  min-height: auto !important;
}

#contact .row {
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

#contact .col-lg-6 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(20px, 4vw, 40px) !important;
  position: relative !important;
  z-index: 4 !important;
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 50% !important;
}

/* Left column (text content) */
#contact .col-lg-6:first-child {
  text-align: left !important;
  padding-right: clamp(20px, 5vw, 60px) !important;
  align-items: flex-start !important;
}

#contact .col-lg-6:first-child h1 {
  font-size: clamp(1.6rem, 3.2vw + 0.5rem, 2.5rem) !important;
  line-height: 1.2 !important;
  margin-bottom: clamp(15px, 2.5vh, 25px) !important;
  max-width: 100% !important;
  color: #ffffff !important;
}

#contact .col-lg-6:first-child p {
  font-size: clamp(0.9rem, 2vw + 0.2rem, 1.1rem) !important;
  line-height: 1.5 !important;
  opacity: 0.9 !important;
  max-width: 100% !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Right column (form) */
#contact .col-lg-6:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: clamp(20px, 4vw, 40px) !important;
}

#contact form {
  width: 100% !important;
  max-width: 450px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Enhance form background */
#contact form > div {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
  padding: clamp(25px, 4vw, 35px) !important;
  border-radius: 16px !important;
  width: 100% !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: relative !important;
  z-index: 6 !important;
}

/* Form inputs styling */
#contact form input,
#contact form textarea {
  width: 100% !important;
  margin-bottom: 0 !important;
  padding: 12px 16px !important;
  border: 2px solid #e5e5e5 !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  background: #ffffff !important;
  transition: border-color 0.3s ease !important;
  box-sizing: border-box !important;
}

#contact form input:focus,
#contact form textarea:focus {
  border-color: #fdb714 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(253, 183, 20, 0.1) !important;
}

#contact form textarea {
  min-height: 90px !important;
  resize: vertical !important;
  font-family: inherit !important;
}

#contact form .btn {
  width: 100% !important;
  padding: 14px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin-top: 8px !important;
  border: none !important;
  border-radius: 10px !important;
  background: linear-gradient(90deg, #fdb714, #ff9f1a) !important;
  color: white !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#contact form .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(253, 183, 20, 0.4) !important;
}

#contact form .form-check {
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 12px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
}

#contact form .form-check input[type="checkbox"] {
  margin: 2px 0 0 0 !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  accent-color: #fdb714 !important;
  cursor: pointer !important;
  border: 2px solid #ccc !important;
  border-radius: 4px !important;
}

#contact form .form-check label {
  font-size: 13px !important;
  color: #555 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  cursor: pointer !important;
  flex-grow: 1 !important;
  text-align: left !important;
  font-weight: 500 !important;
}

/* Mobile responsiveness */
@media (max-width: 991.98px) {
  .testimonial-section {
    padding: clamp(60px, 8vh, 100px) 0 clamp(40px, 5vh, 60px) 0 !important;
    margin: 0 !important;
  }

  #contact {
    margin: 0 !important;
    padding: clamp(60px, 8vh, 80px) 0 !important;
    min-height: 100vh !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #contact .container {
    min-height: auto !important;
    align-items: center !important;
    padding: 0 20px !important;
  }

  #contact .row {
    flex-direction: column !important;
    text-align: center !important;
    gap: 40px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #contact .col-lg-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 15px !important;
  }

  #contact .col-lg-6:first-child {
    text-align: center !important;
    padding: 0 20px !important;
    order: 1 !important;
  }

  #contact .col-lg-6:last-child {
    padding: 0 20px !important;
    order: 2 !important;
  }

  #contact form {
    max-width: 500px !important;
    width: 100% !important;
  }

  #contact form > div {
    padding: 25px 20px !important;
  }
}

@media (max-width: 767.98px) {
  .testimonial-section {
    padding: clamp(50px, 6vh, 80px) 0 clamp(30px, 4vh, 50px) 0 !important;
    margin: 0 !important;
  }

  .donate {
    padding: clamp(50px, 6vh, 60px) 0 !important;
    min-height: auto !important;
  }

  #contact {
    margin: 0 !important;
    padding: clamp(40px, 5vh, 60px) 0 !important;
    min-height: auto !important;
  }

  #contact .container {
    padding: 0 15px !important;
  }

  #contact .row {
    gap: 25px !important;
  }

  #contact .col-lg-6 {
    padding: 0 10px !important;
  }

  #contact .col-lg-6:first-child {
    padding: 0 15px !important;
  }

  #contact .col-lg-6:last-child {
    padding: 0 15px !important;
  }

  #contact .col-lg-6:first-child h1 {
    font-size: clamp(1.4rem, 5vw + 0.3rem, 2.2rem) !important;
    margin-bottom: clamp(15px, 2vh, 20px) !important;
  }

  #contact .col-lg-6:first-child p {
    font-size: clamp(0.9rem, 3vw + 0.1rem, 1.1rem) !important;
    margin-bottom: clamp(15px, 2vh, 20px) !important;
  }

  #contact form > div {
    padding: clamp(20px, 4vw, 30px) !important;
  }
}

@media (max-width: 575.98px) {
  .donate {
    padding: clamp(40px, 5vh, 50px) 0 !important;
    min-height: auto !important;
  }

  #contact {
    min-height: 100vh !important;
    padding: clamp(80px, 12vh, 100px) 0 clamp(60px, 8vh, 80px) 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  #contact .container {
    padding: 0 15px !important;
    min-height: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #contact .row {
    flex-direction: column !important;
    gap: 30px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #contact form {
    max-width: 100% !important;
    width: 100% !important;
  }

  #contact .col-lg-6:first-child,
  #contact .col-lg-6:last-child {
    padding: 0 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  #contact .col-lg-6:first-child {
    text-align: center !important;
    order: 1 !important;
  }

  #contact .col-lg-6:last-child {
    order: 2 !important;
  }

  #contact .col-lg-6:first-child h1 {
    font-size: clamp(1.4rem, 5vw + 0.3rem, 1.8rem) !important;
    margin-bottom: 15px !important;
  }

  #contact .col-lg-6:first-child p {
    font-size: clamp(0.9rem, 3.5vw + 0.1rem, 1rem) !important;
    margin-bottom: 15px !important;
  }

  #contact form > div {
    padding: 25px 20px !important;
    min-height: auto !important;
    gap: 16px !important;
    background: rgba(255,255,255,0.98) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.25) !important;
  }

  #contact form input,
  #contact form textarea {
    padding: 12px 16px !important;
    margin-bottom: 0 !important;
    font-size: 15px !important;
  }

  #contact form textarea {
    min-height: 90px !important;
  }

  #contact form .btn {
    padding: 14px !important;
    margin-top: 8px !important;
    font-size: 16px !important;
  }

  #contact form .form-check {
    margin-bottom: 0 !important;
    padding: 12px 0 !important;
    gap: 12px !important;
  }

  #contact form .form-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
  }

  #contact form .form-check label {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}

/* === Team === */
.team-item img{ position:relative; top:0; transition:.5s; }
.team-item:hover img{ top:-30px; }
.team-item .team-text{ position:relative; height:100px; transition:.5s; }
.team-item:hover .team-text{ margin-top:-60px; height:160px; }
.team-item .team-text .team-social{ opacity:0; transition:.5s; }
.team-item:hover .team-text .team-social{ opacity:1; }
.team-item .team-social .btn{ display:inline-flex; color: var(--primary); background:#fff; border-radius:40px; }
.team-item .team-social .btn:hover{ color:#fff; background: var(--primary); }

/* === Testimonial === */
/* Testimonials section proper spacing */
.testimonial-section {
  padding: clamp(80px, 10vh, 120px) 0 clamp(80px, 10vh, 100px) 0 !important;
  background: #ffffff;
  position: relative;
  margin: 0 !important;
  z-index: 5 !important;
}

.testimonial-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(0,0,0,.08);
}

/* Keep Testimonial main heading in a single line (robust across wrappers) */
.container-fluid:has(.testimonial-carousel) h1,
.container-fluid:has(.testimonial-carousel) h2,
.container:has(.testimonial-carousel) h1,
.container:has(.testimonial-carousel) h2,
.vh-section:has(.testimonial-carousel) h1,
.vh-section:has(.testimonial-carousel) h2,
section:has(.testimonial-carousel) h1,
section:has(.testimonial-carousel) h2{ white-space: nowrap; text-wrap: nowrap; overflow-wrap: normal; }

@media (max-width: 1200px){
  .container-fluid:has(.testimonial-carousel) h1,
  .container-fluid:has(.testimonial-carousel) h2,
  .container:has(.testimonial-carousel) h1,
  .container:has(.testimonial-carousel) h2,
  .vh-section:has(.testimonial-carousel) h1,
  .vh-section:has(.testimonial-carousel) h2,
  section:has(.testimonial-carousel) h1,
  section:has(.testimonial-carousel) h2{ font-size: clamp(1.6rem, 3.2vw + 1rem, 2.6rem); }
}
.testimonial-carousel::before, .testimonial-carousel::after { position:absolute; content:""; top:0; height:100%; width:0; z-index:1; }
.testimonial-carousel::before{ left:0; background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
.testimonial-carousel::after{ right:0; background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); }
@media (min-width:768px){ .testimonial-carousel::before, .testimonial-carousel::after{ width:200px; } }
@media (min-width:992px){ .testimonial-carousel::before, .testimonial-carousel::after{ width:300px; } }
.testimonial-carousel .owl-item .testimonial-text{ background: var(--light); transform: scale(.8); transition:.5s; }
.testimonial-carousel .owl-item.center .testimonial-text{ background: var(--primary); transform: scale(1); }
.testimonial-carousel .owl-item .testimonial-text *, .testimonial-carousel .owl-item .testimonial-item img{ transition:.5s; }
.testimonial-carousel .owl-item.center .testimonial-text *{ color: var(--light) !important; }
.testimonial-carousel .owl-item.center .testimonial-item img{ background: var(--primary) !important; }
.testimonial-carousel .owl-nav{ position:absolute; width:350px; top:15px; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; opacity:0; transition:.5s; z-index:1; }
.testimonial-carousel:hover .owl-nav{ width:300px; opacity:1; }
.testimonial-carousel .owl-nav .owl-prev, .testimonial-carousel .owl-nav .owl-next{ position:relative; color: var(--primary); font-size:45px; transition:.5s; }
.testimonial-carousel .owl-nav .owl-prev:hover, .testimonial-carousel .owl-nav .owl-next:hover{ color: var(--dark); }

/* === Footer === */
.footer{ 
  margin-top: auto !important; 
  margin-bottom:0 !important; 
  padding-bottom:0 !important; 
  padding-left: 15px !important; 
  padding-right: 15px !important; 
  position: relative !important;
  z-index: 10 !important;
  clear: both !important;
}
.footer .container-fluid{ padding-left:0 !important; padding-right:0 !important; }
.footer .btn.btn-link{ display:block; margin-bottom:5px; padding:0; text-align:left; color: rgba(255,255,255,.7); font-weight:normal; text-transform:capitalize; transition:.3s; }
.footer .btn.btn-link::before{ position:relative; content:"\f105"; font-family:"Font Awesome 5 Free"; font-weight:900; color: rgba(255,255,255,.7); margin-right:10px; }
.footer .btn.btn-link:hover{ color:#fff; letter-spacing:1px; box-shadow:none; }
.footer .btn.btn-square{ display:inline-flex; color: rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.7); }
.footer .btn.btn-square:hover{ color: var(--secondary); border-color: var(--light); }
.footer .btn.btn-square i{ color: inherit !important; }
.footer .copyright{ padding: 12px 0 0 0 !important; font-size:15px; border-top: 1px solid rgba(255,255,255,.1); }
.footer .copyright a{ color: var(--secondary); }
.footer .copyright a:hover{ color: var(--primary); }

/* Footer: ensure FA icons are visible on dark bg */
.footer .btn.btn-square{ color: rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.footer .btn.btn-square:hover{ color: var(--primary); border-color: rgba(255,255,255,.7); background: #ffffff; }
.footer .btn.btn-square i{ color: inherit !important; }

.footer i[class*="fa"], .footer .fa, .footer .fas, .footer .far, .footer .fal, .footer .fab{ color: rgba(255,255,255,.95) !important; }

/* Footer: remove link underlinese */
.footer a, .footer a:link, .footer a:visited{ text-decoration: none !important; border-bottom: 0 !important; }
.footer a:hover, .footer a:focus{ text-decoration: none !important; }
/* Neutralize utility if applied */
.footer .underline{ text-decoration: none !important; }

/* === Section layouts === */
.vh-section{ 
  min-block-size: auto; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  padding-block: clamp(60px, 10vh, 120px) !important; 
  position:relative; 
  margin-bottom: 0 !important;
}
.vh-section > .container, .vh-section > .container-fluid{ 
  width:100%; 
  max-width:1180px; 
  margin-inline:auto; 
  padding-inline: clamp(20px, 4vw, 40px); 
}

@media (max-width: 767.98px){
  .vh-section{ 
    padding-block: clamp(50px, 8vh, 80px) !important; 
  }
}

@media (max-width: 575.98px){
  .vh-section{ 
    padding-block: clamp(40px, 6vh, 60px) !important; 
  }
}
.vh-section::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(0,0,0,.08); }
.vh-section:nth-of-type(even){ background: linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%); }
.vh-section:nth-of-type(odd){ background:#ffffff; }

/* Section headers */
.section-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:24px; flex-wrap: wrap; justify-content: center; }
.section-label{ font-family: var(--heading-font); font-weight:800; letter-spacing:.5px; text-transform: uppercase; font-size: clamp(20px, 4vw + 0.5rem, 30px); padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 24px); border-radius:12px; background: rgba(253,183,20,.10); color:#f37021; }
.section-title{ display:block; width:100%; font-family: var(--body-font); font-weight:600; font-size: clamp(1.1rem, 2.8vw + 0.3rem, 1.6rem); letter-spacing:.4px; text-transform:uppercase; color:#334247; opacity:.9; margin:.5rem 0 1rem; background:none !important; padding:0; border-radius:0; word-wrap: break-word; hyphens: auto; max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }

/* Ambient backgrounds */
.section-ambient{ position:relative; isolation:isolate; }
.section-ambient::before{ content:""; position:absolute; inset:-2px; z-index:0; pointer-events:none; background:
  radial-gradient(600px 220px at 8% 12%, rgba(253,183,20,.08), transparent 60%),
  radial-gradient(520px 240px at 92% 88%, rgba(30,148,210,.08), transparent 55%);
}
.section-ambient > *{ position:relative; z-index:1; }

/* About section tweaks */
#about { 
  padding: clamp(80px, 10vh, 120px) 0 !important;
  position: relative;
}
#about .row{ --bs-gutter-x: clamp(24px, 4vw, 56px); align-items:center; }
#about .rich-copy{ max-width: 620px; margin-left: auto; }
#about h2 { font-size: 2rem; margin-bottom: 1rem; font-weight: 700; color: #f37021; }
#about p{ color:#344b53; opacity:.9; }
#about .btn:hover{ transform: translateY(-1px); }
#about::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(0,0,0,.08); }

/* About Us specific styling - now consistent with universal sizing */
#about .section-label {
  font-size: clamp(20px, 4vw + 0.5rem, 30px) !important;
  padding: clamp(10px, 2.5vw, 14px) clamp(16px, 4vw, 24px) !important;
  font-weight: 800 !important;
}

#about .section-title,
#about h1.display-6 {
  font-size: clamp(1.1rem, 2.8vw + 0.3rem, 1.6rem) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}

/* Clients strip */
#clients img{ max-height:140px; width:auto; filter:none; opacity:1; transition: transform .2s ease; }
#clients img:hover{ transform: translateY(-2px); }
/* Equalize logo boxes + width clamp */
#clients .client-image{ display:block; margin-inline:auto; padding:4px; object-fit:contain; max-width:220px; max-height:120px; }
@container section (max-width: 680px){
  #clients img{ max-height:80px; }
  #clients .client-image{ max-width:160px; max-height:80px; }
}

/* === Extended Services (Other Services) === */
#other-services { 
  background:#f9fbfc; 
  padding: clamp(80px, 10vh, 120px) 0; 
  margin: 0 !important;
  position: relative;
}
#other-services::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(0,0,0,.08); }
.other-services-box{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:24px; max-width:1100px; margin: 2rem auto 0; }
.service-card{ background:#fff; padding:24px 20px; border:1px solid rgba(0,0,0,.06); border-radius:16px; text-align:center; box-shadow: var(--shadow-1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; height:200px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.service-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(253,183,20,.35); }
.service-card i{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: color-mix(in srgb, var(--accent-blue) 12%, transparent); color: var(--primary) !important; margin-bottom:.2rem; font-size:24px; }
.service-card h5{ font-size: 1.1rem; line-height:1.3; letter-spacing:.1px; margin: 0 0 .25rem; font-weight:700; text-transform:uppercase; color:#0f2e3c; }
.service-card p{ margin:0; color:#6c757d; font-size: clamp(13px,1.2vw,14px); line-height:1.6; }

/* === Map Section === */
.sec-map { 
  position: relative !important; 
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  padding: 0 !important;
  overflow: visible !important;
  background: #ffffff !important;
  min-height: 450px !important;
  z-index: 5 !important;
  clear: both !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.sec-map .container-fluid { 
  padding: 0 !important; 
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: 100% !important;
}

.sec-map .row {
  margin: 0 !important;
  height: 100% !important;
}

.sec-map .col-12 {
  padding: 0 !important;
  height: 100% !important;
}

.map-iframe { 
  border: 0 !important; 
  width: 100% !important; 
  height: 450px !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  min-height: 450px !important;
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Map responsive heights */
@media (max-width: 991.98px) {
  .map-iframe { 
    height: 400px !important; 
  }
  .sec-map {
    min-height: 400px !important;
  }
}

@media (max-width: 767.98px) {
  .map-iframe { 
    height: 380px !important; 
  }
  .sec-map {
    min-height: 380px !important;
  }
}

@media (max-width: 575.98px) {
  .map-iframe { 
    height: 350px !important; 
  }
  .sec-map {
    min-height: 350px !important;
  }
}

@media (max-width: 420px) {
  .map-iframe { 
    height: 320px !important; 
  }
  .sec-map {
    min-height: 320px !important;
  }
}

/* === Contact & Map Separation === */
#contact { 
  margin-bottom: 0 !important; 
  position: relative !important;
  z-index: 15 !important;
  clear: both !important;
}

#map-section {
  position: relative !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  clear: both !important;
  display: block !important;
}

body > *:last-child { margin-bottom: 0 !important; }

/* Clients section spacing */
#clients { 
  padding: clamp(80px, 10vh, 120px) 0 !important;
  position: relative;
}
#clients::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: rgba(0,0,0,.08); }

/* === Container queries === */
@container section (max-width: 700px){ .section-label{ font-size: clamp(24px, 8cqw, 36px); } .section-title{ font-size: var(--step--1); } }
@container section (max-width: 600px){ .service-item{ padding: 1rem; } }
@container section (max-width: 560px){ .testimonial-text{ padding: 1rem !important; } }

/* === Clients: continuous marquee === */
#clients .marquee-viewport{ 
  overflow: hidden; 
  position: relative; 
  width: 100%;
}
#clients .marquee-track{ 
  display: flex; 
  align-items: center; 
  gap: clamp(32px, 5vw, 48px); 
  width: max-content; 
  will-change: transform; 
  animation: clients-marquee 40s linear infinite; 
}
#clients:hover .marquee-track{ animation-play-state: paused; }
@keyframes clients-marquee{ 
  from { transform: translateX(0); } 
  to { transform: translateX(-50%); } 
}

/* Enhanced client image styling for marquee */
#clients .client-image{ 
  flex-shrink: 0;
  padding: 8px 12px; 
  max-width: clamp(140px, 20vw, 220px); 
  max-height: clamp(80px, 12vw, 120px); 
  object-fit: contain;
  filter: grayscale(20%) opacity(0.85);
  transition: filter 0.3s ease, transform 0.3s ease;
}
#clients .client-image:hover{
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* Mobile optimizations */
@media (max-width: 768px) {
  #clients .marquee-track { 
    gap: clamp(24px, 6vw, 32px); 
    animation-duration: 30s;
  }
  #clients .client-image{ 
    max-width: clamp(100px, 25vw, 160px); 
    max-height: clamp(60px, 15vw, 90px); 
    padding: 6px 8px;
  }
}

@media (max-width: 480px) {
  #clients .marquee-track { 
    gap: 20px; 
    animation-duration: 25s;
  }
  #clients .client-image{ 
    max-width: clamp(80px, 28vw, 120px); 
    max-height: clamp(50px, 16vw, 70px); 
    padding: 4px 6px;
  }
}

/* === Testimonials: tighten active card width & padding (override) === */
@media (min-width: 768px) and (max-width: 991.98px){
  .testimonial-carousel .owl-item{ text-align:center; }
  .testimonial-carousel .owl-item .testimonial-text{
    display:inline-block;
    width:auto !important;
    max-width: clamp(320px, 85vw, 520px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:16px 22px !important;
    border-radius:12px !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }
}
@media (min-width: 992px){
  .testimonial-carousel .owl-item{ text-align:center; }
  .testimonial-carousel .owl-item .testimonial-text{
    display:inline-block;
    width:auto !important;
    max-width: clamp(460px, 42vw, 720px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:18px 26px !important;
    border-radius:12px !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .testimonial-carousel .owl-stage-outer{ padding-left:12px; padding-right:12px; }
}

/* Mobile testimonial fixes */
@media (max-width: 767.98px){
  .testimonial-carousel .owl-item .testimonial-text{
    max-width: calc(100vw - 40px) !important;
    margin: 0 auto !important;
    padding: 14px 18px !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
  }
  .testimonial-carousel .owl-item .testimonial-text p{
    font-size: clamp(0.85rem, 3.5vw + 0.1rem, 1rem) !important;
    line-height: 1.5 !important;
  }
}
#clients .row{ --bs-gutter-x: .125rem; --bs-gutter-y: .125rem; justify-content: center !important; }
#clients .client-image{ padding: 0; max-width: 280px; max-height: 140px; }
#clients .marquee-track{ gap:16px !important; }
/* fixed stray marker */


/* Testimonials: force-hide arrows/dots */
.testimonial-carousel .owl-nav,
.testimonial-carousel .owl-dots{ display:none !important; }

/* Hero & overlay sections: parallax disabled */
.page-header{ background-attachment: scroll; }
.donate[data-parallax]{ background-attachment: scroll; }

/* === Responsive Fix Pack (no content hidden) === */
/* 1) Universal media safety + fluid embeds */
img, video, iframe { max-width: 100%; height: auto; }
.map-iframe { width: 100% !important; aspect-ratio: 16 / 9; display: block; }

/* 2) Container breathing room on very small screens */
@media (max-width: 576px){
  .container-fluid{ padding-left: 10px !important; padding-right: 10px !important; }
  .container{ padding-left: 10px !important; padding-right: 10px !important; }
}

/* 2.5) Fix gutter spacing on mobile */
@media (max-width: 767.98px){
  .row{ --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }
}

/* 3) Heading wrap safety for narrow devices (avoid clipped titles) */
@media (max-width: 520px){
  .container-fluid:has(.testimonial-carousel) h1,
  .container-fluid:has(.testimonial-carousel) h2,
  .container:has(.testimonial-carousel) h1,
  .container:has(.testimonial-carousel) h2,
  .vh-section:has(.testimonial-carousel) h1,
  .vh-section:has(.testimonial-carousel) h2,
  section:has(.testimonial-carousel) h1,
  section:has(.testimonial-carousel) h2{
    white-space: normal !important; text-wrap: wrap !important; overflow-wrap: anywhere !important;
  }
}

/* 4) Navbar: tighter spacing & safer collapse */
@media (max-width: 991.98px){
  .navbar .navbar-nav{ gap: 8px; padding: 1rem 0; }
  .navbar .navbar-nav .nav-link{ margin-right: 0; padding: 12px 0; font-size: 0.9rem; }
  .navbar-toggler{ padding: 4px 8px; font-size: 1.1rem; }
  .navbar-brand .logo{ height: 36px; }
}

@media (max-width: 575.98px){
  .navbar .navbar-nav{ gap: 6px; }
  .navbar .navbar-nav .nav-link{ padding: 10px 0; font-size: 0.85rem; }
  .navbar-brand .logo{ height: 32px; }
}

/* 5) Hero caption padding so text never touches edges */
.carousel-caption{ padding: clamp(16px, 4vw, 32px); }

/* 6) Team cards: disable hover jumps on mobile to avoid overlap/hidden text */
@media (max-width: 576px){
  .team-item img{ top: 0 !important; }
  .team-item:hover img{ top: 0 !important; }
  .team-item .team-text{ height: auto !important; margin-top: 0 !important; }
}

/* 7) Service tiles: allow natural height & prevent overflow in flex */
.service-item, .service-card{ min-width: 0; }
@media (max-width: 576px){
  .service-item{ min-height: unset; }
  .service-card{ min-height: 180px; height: 180px; padding: 18px 16px; }
}

/* 8) Clients strip: keep logos readable on small phones */
@media (max-width: 420px){
  #clients img{ max-height: 64px; }
  #clients .client-image{ max-width: 140px; max-height: 64px; }
}

/* 9) Parallax & fixed backgrounds: provide mobile-safe fallback (prevents iOS crop) */
@media (max-width: 991.98px){
  .page-header{ background-attachment: scroll !important; }
  .donate[data-parallax]{ background-attachment: scroll !important; }
}

/* 10) Forms: inputs always full width with comfortable touch height */
input[type="text"], input[type="email"], input[type="tel"], textarea{
  width: 100%; 
  min-height: 48px; 
  font-size: 16px; /* Prevents zoom on iOS */
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
}
textarea{ 
  min-height: 120px; 
  resize: vertical;
}

/* Newsletter input responsive fix */
@media (max-width: 575.98px){
  .footer .position-relative input{
    padding-right: 80px; /* Make room for button */
  }
  .footer .position-relative .btn{
    padding: 8px 12px;
    font-size: 0.8rem;
  }
}

/* 11) Carousels: never let edge gradients cover content on tiny screens */
@media (max-width: 360px){
  .testimonial-carousel::before, .testimonial-carousel::after{ display: none !important; }
}

/* 12) Prevent accidental clipping in flex layouts */
*:where(.d-flex, .flex, .row, .service-grid, .other-services-box) > *{ min-width: 0; }

/* 13) Ensure section headings break nicely across all sections */
.section-label, .section-title, h1, h2, h3, h4{ 
  overflow-wrap: anywhere; 
  max-width: 100%;
  box-sizing: border-box;
}

/* Universal heading protection - prevent any heading from overflowing */
h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4 {
  max-width: 100% !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  hyphens: auto !important;
  box-sizing: border-box !important;
}

/* Specific fixes for section headings that appear to overflow */
#sponsorships h2, #athlete h2 {
  font-size: clamp(1.4rem, 3.5vw + 0.5rem, 2.2rem) !important;
  line-height: 1.2 !important;
  max-width: calc(100vw - 30px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  padding: 0 10px !important;
}

/* Additional fix for Sports Sponsorship Agency and Athlete Management section titles */
#sponsorships .section-title,
#sponsorships h1,
#athlete .section-title,
#athlete h1 {
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  max-width: calc(100vw - 40px) !important;
  font-size: clamp(0.9rem, 2.5vw + 0.3rem, 1.2rem) !important;
  padding: 0 15px !important;
  margin: 0 auto !important;
}

@media (max-width: 767.98px) {
  #sponsorships .section-title,
  #sponsorships h1,
  #athlete .section-title,
  #athlete h1 {
    font-size: clamp(0.85rem, 2.8vw + 0.2rem, 1.1rem) !important;
    padding: 0 20px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 575.98px) {
  #sponsorships .section-title,
  #sponsorships h1,
  #athlete .section-title,
  #athlete h1 {
    font-size: clamp(0.8rem, 3.2vw + 0.15rem, 1rem) !important;
    padding: 0 25px !important;
    line-height: 1.5 !important;
  }
}

/* 14) Additional mobile fixes */
@media (max-width: 575.98px){
  /* Typography adjustments */
  h1, .display-4{ font-size: clamp(1.5rem, 5vw, 2rem) !important; line-height: 1.2 !important; }
  h2, .display-6{ font-size: clamp(1.3rem, 4vw, 1.6rem) !important; line-height: 1.3 !important; }
  h3{ font-size: clamp(1.1rem, 3.5vw, 1.4rem) !important; line-height: 1.3 !important; }
  h4{ font-size: clamp(1rem, 3vw, 1.2rem) !important; line-height: 1.3 !important; }
  h5{ font-size: clamp(0.95rem, 2.5vw, 1.1rem) !important; line-height: 1.3 !important; }
  p, body{ font-size: clamp(0.9rem, 2.5vw, 1rem) !important; line-height: 1.5 !important; }

  /* Fix carousel height on mobile */
  #header-carousel .carousel-item{ min-height: 400px; }

  /* Improve logo visibility */
  .logo{ height: 36px; }
  .footer-logo{ height: 36px; max-width: 180px; }

  /* Testimonial text size */
  .testimonial-text p{ font-size: 0.9rem; line-height: 1.5; }

  /* Map height adjustment */
  .map-iframe{ height: 300px !important; }
}

/* Medium screen adjustments */
@media (min-width: 576px) and (max-width: 991.98px){
  h1, .display-4{ font-size: clamp(1.8rem, 4vw, 2.5rem) !important; }
  h2, .display-6{ font-size: clamp(1.5rem, 3.5vw, 2rem) !important; }
  h3{ font-size: clamp(1.3rem, 3vw, 1.7rem) !important; }
  h4{ font-size: clamp(1.1rem, 2.5vw, 1.4rem) !important; }
  h5{ font-size: clamp(1rem, 2vw, 1.2rem) !important; }
  p, body{ font-size: clamp(0.95rem, 2vw, 1.05rem) !important; }
}

/* 15) Ultra-small screen adjustments */
@media (max-width: 360px){
  .container-fluid{ padding-left: 6px !important; padding-right: 6px !important; }
  .service-item{ padding: 12px 8px; }
  .btn{ font-size: 0.8rem; padding: 8px 12px; }
}

/* === Hero Text Overflow Fix === */
/* Keep hero copy inside the viewport across devices */
#header-carousel .carousel-caption{ 
  padding: clamp(12px, 4vw, 48px) !important; 
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,29,35,.75) !important;
  z-index: 2 !important;
}

#header-carousel .carousel-caption .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 100% !important;
}

#header-carousel .carousel-caption .row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
}

#header-carousel .carousel-caption .col-12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#header-carousel .carousel-caption h1,
#header-carousel .carousel-caption .display-4{
  max-width: 95vw !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

/* Each hero line (sentence) should be on its own line but not break within */
#header-carousel .carousel-caption h1 .hero-line {
  display: block !important;
  white-space: nowrap !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  line-height: 1.15 !important;
}

#header-carousel .carousel-caption p{ 
  max-width: min(90vw, 650px) !important; 
  margin: clamp(16px, 3vh, 24px) auto clamp(24px, 4vh, 32px) !important;
  text-align: center !important;
  white-space: normal !important;
  font-size: clamp(1rem, 2.5vw + 0.2rem, 1.25rem) !important;
  font-weight: 400 !important;
  opacity: 0.95 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.4 !important;
}

/* Scale down hero heading on smaller screens so it never bleeds */
@media (max-width: 1199.98px){
  #header-carousel .carousel-caption .display-4,
  #header-carousel .carousel-caption h1{ font-size: clamp(1.8rem, 4.2vw + .4rem, 2.8rem) !important; }
}
@media (max-width: 767.98px){
  #header-carousel .carousel-caption .display-4,
  #header-carousel .carousel-caption h1{ font-size: clamp(1.4rem, 5.8vw + .25rem, 2.2rem) !important; letter-spacing: .3px !important; }
  #header-carousel .carousel-caption p{ 
    font-size: clamp(0.9rem, 3.2vw + .15rem, 1.05rem) !important; 
    margin: clamp(12px, 2.5vh, 20px) auto clamp(20px, 3.5vh, 28px) !important;
    line-height: 1.5 !important;
  }
}
@media (max-width: 479.98px){
  #header-carousel .carousel-caption .display-4,
  #header-carousel .carousel-caption h1{ font-size: clamp(1.2rem, 6.5vw + .15rem, 1.8rem) !important; line-height: 1.2 !important; }
  #header-carousel .carousel-caption p{ font-size: clamp(0.85rem, 4vw + .1rem, 1rem) !important; }
}

/* Mobile specific adjustments */
@media (max-width: 991.98px) {
  #header-carousel .carousel-caption h1 .hero-line:nth-child(1),
  #header-carousel .carousel-caption h1 .hero-line:nth-child(2) {
    display: inline !important;
    white-space: nowrap !important;
  }
  #header-carousel .carousel-caption h1 .hero-line:nth-child(1)::after {
    content: "\00a0" !important;
  }
  #header-carousel .carousel-caption h1 .hero-line:nth-child(3) {
    display: block !important;
    white-space: nowrap !important;
  }
}

/* === Section labels (pills) – universal responsive fix === */
/* Make all section labels responsive and prevent overflow */
.section-label{
  display: block !important;                 /* force its own row */
  text-align: center !important;             /* center text inside */
  width: fit-content !important;
  max-width: calc(100vw - 40px) !important;  /* prevent viewport overflow */
  padding: clamp(8px, 2.2vw, 12px) clamp(12px, 3.5vw, 20px) !important;
  margin: 18px auto 14px !important; /* centered + breathing room */
  border-radius: 999px !important;
  white-space: normal !important;            /* allow wrapping */
  text-wrap: wrap !important;
  overflow-wrap: anywhere !important;        /* break long words */
  line-height: 1.2 !important;
  position: relative;             /* create a new stacking context */
  z-index: 1;
  box-sizing: border-box !important;
}

/* Universal section spacing and pill management */
@media (max-width: 575.98px){
  .section-label{ 
    font-size: clamp(14px, 3.8vw + 0.2rem, 18px) !important; 
    padding: 8px 12px !important; 
    margin: 16px auto 12px !important; 
  }
}

/* Ensure elements below pills don't overlap */
.section-label + *{ margin-top: 16px !important; }
.section-label + .btn, .section-label + [class*="btn-"]{ margin-top: 16px !important; }

/* Section spacing improvements */
.vh-section .section-head{ gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Pills always on their own row */
p .section-label{
  display: block !important;          
  text-align: center !important;
  margin: 14px auto 14px !important;  
  max-width: calc(100vw - 40px) !important;
}

/* Extra breathing room on small screens */
@media (max-width: 575.98px){
  .vh-section{ margin-top: 8px !important; }
  .section-head{ margin-top: 8px !important; }
  p .section-label{ margin: 18px auto 16px !important; }
}
/* === Hero heading: perfect center alignment === */
/* Assumes each line is wrapped in <span class="hero-line">…</span> inside the H1 */
#header-carousel {
  min-height: 100vh !important;
}

#header-carousel .carousel-item {
  min-height: 100vh !important;
}

#header-carousel .carousel-caption {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: clamp(20px, 5vw, 60px) !important;
}

#header-carousel .carousel-caption .container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

#header-carousel .carousel-caption .row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 !important;
}

#header-carousel .carousel-caption .col-12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#header-carousel .carousel-caption h1 {
  text-align: center !important;
  display: block !important;
  margin: 0 auto clamp(20px, 3vh, 30px) auto !important;
  line-height: 1.1 !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

#header-carousel .carousel-caption h1 .hero-line {
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  position: relative !important;
}

#header-carousel .carousel-caption p{ 
  max-width: min(85vw, 600px) !important; 
  margin: 0 auto clamp(20px, 4vh, 35px) auto !important;
  text-align: center !important;
  white-space: normal !important;
  font-size: clamp(1rem, 2.2vw + 0.2rem, 1.2rem) !important;
  font-weight: 400 !important;
  opacity: 0.95 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.5 !important;
}

#header-carousel .carousel-caption .btn {
  margin-top: 0 !important;
}

/* Mobile alignment */
@media (max-width: 991.98px) {
  #header-carousel .carousel-caption {
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: clamp(15px, 4vw, 40px) !important;
  }

  #header-carousel .carousel-caption .container {
    padding: 0 15px !important;
  }

  #header-carousel .carousel-caption h1 {
    margin-bottom: clamp(15px, 2.5vh, 25px) !important;
  }

  #header-carousel .carousel-caption h1 .hero-line:nth-child(-n+2){
    display:inline !important;       /* place first two on one line */
    white-space: nowrap !important;  /* keep together */
  }
  #header-carousel .carousel-caption h1 .hero-line:nth-child(1)::after{ content:"\00a0"; }

  #header-carousel .carousel-caption p {
    margin-bottom: clamp(15px, 3vh, 25px) !important;
    max-width: 90vw !important;
  }
}

@media (max-width: 575.98px) {
  #header-carousel .carousel-caption {
    padding: clamp(10px, 3vw, 25px) !important;
  }

  #header-carousel .carousel-caption .container {
    padding: 0 10px !important;
  }

  #header-carousel .carousel-caption h1 {
    margin-bottom: clamp(12px, 2vh, 20px) !important;
  }

  #header-carousel .carousel-caption p {
    margin-bottom: clamp(12px, 2.5vh, 20px) !important;
    max-width: 95vw !important;
  }
}