/* ================================================================
   GLOBAL TOKENS (shared across the site)
   ================================================================ */
:root{
  /* Core palette */
  --nav-blue:#0b2240;
  --nav-blue-2:#081a33;
  --gold:#ffd500;
  --soft:#f6f8fb;
  --radius:14px;
  --btn-primary:#0b2240;

  /* Brand extensions (used on some pages) */
  --brand-gold:#F3C63D;        /* home page */
  --brand-ink:#1B2B3A;         /* home page */
}

/* ================================================================
   GLOBAL/SHARED UI (Navbar, Buttons, Mega menu, Search, Images)
   ================================================================ */
/* Bootstrap Components Override - Apply Primary Color */
.btn-primary:not(.btn-outline-primary) {
  background-color: #0b2240 !important;
  border-color: #0b2240 !important;
  color: #fff !important;
}

.btn-primary:not(.btn-outline-primary):hover {
  background-color: #081a33 !important;
  border-color: #081a33 !important;
  color: #fff !important;
}

.btn-primary:not(.btn-outline-primary):focus {
  background-color: #0b2240 !important;
  border-color: #0b2240 !important;
  box-shadow: 0 0 0 0.2rem rgba(11, 34, 64, 0.25) !important;
}

.btn-outline-primary {
  color: #0b2240 !important;
  border-color: #0b2240 !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: #0b2240 !important;
  border-color: #0b2240 !important;
  color: #fff !important;
}

.btn-outline-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(11, 34, 64, 0.25) !important;
}

/* Links */
/*
a:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}

a:hover:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #081a33 !important;
}
 */
/* Text Colors */
.text-primary {
  color: #0b2240 !important;
}

.text-dark:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}

/* Background Colors */
.bg-primary {
  background-color: #0b2240 !important;
}

/* Border Colors */
.border-primary {
  border-color: #0b2240 !important;
}

/* Form Controls */
.form-control:focus {
  border-color: #0b2240 !important;
  box-shadow: 0 0 0 0.2rem rgba(11, 34, 64, 0.25) !important;
}

.form-select:focus {
  border-color: #0b2240 !important;
  box-shadow: 0 0 0 0.2rem rgba(11, 34, 64, 0.25) !important;
}

/* Pagination */
.page-link {
  color: #0b2240 !important;
}

.page-link:hover {
  color: #081a33 !important;
}

.page-item.active .page-link {
  background-color: #0b2240 !important;
  border-color: #0b2240 !important;
}

/* Progress Bars */
.progress-bar {
  background-color: #0b2240 !important;
}

/* Badges */
.badge-primary {
  background-color: #0b2240 !important;
}

/* Alerts */
.alert-primary {
  color: #0b2240 !important;
  background-color: rgba(11, 34, 64, 0.1) !important;
  border-color: rgba(11, 34, 64, 0.2) !important;
}

/* Cards */
.card-header {
  background-color: rgba(11, 34, 64, 0.05) !important;
  border-bottom-color: rgba(11, 34, 64, 0.1) !important;
}

/* Navs */
.nav-pills .nav-link.active {
    border-radius: 0;
  background-color: #0b2240 !important;
}

.nav-tabs .nav-link.active {
    border-radius:0;
  color: #0b2240 !important;
  border-color: #0b2240 #0b2240 #fff !important;
}

/* Dropdowns */
.dropdown-item:focus {
  background-color: rgba(11, 34, 64, 0.1) !important;
}

.dropdown-item.active {
  background-color: #0b2240 !important;
}

/* List Groups */
.list-group-item.active {
  background-color: #0b2240 !important;
  border-color: #0b2240 !important;
}

/* Modals */
.modal-header {
  border-bottom-color: rgba(11, 34, 64, 0.1) !important;
}

.modal-footer {
  border-top-color: rgba(11, 34, 64, 0.1) !important;
}

/* Tables */
.table-primary {
  background-color: rgba(11, 34, 64, 0.1) !important;
}

.table-primary th,
.table-primary td {
  background-color: rgba(11, 34, 64, 0.1) !important;
}

/* Utilities */
.text-primary {
  color: #0b2240 !important;
}

.bg-primary {
  background-color: #0b2240 !important;
}

.border-primary {
  border-color: #0b2240 !important;
}

/* Custom Primary Color Classes */
.text-brand-primary {
  color: #0b2240 !important;
}

.bg-brand-primary {
  background-color: #0b2240 !important;
}

.border-brand-primary {
  border-color: #0b2240 !important;
}

/* Headings - Apply primary color except white ones */
h1:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}
h2:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}
h3:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}
h4:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}
h5:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}
h6:not(.text-white):not([style*="color: white"]):not([style*="color: #fff"]):not([style*="color: #ffffff"]) {
  color: #0b2240 !important;
}

/* ===== NAVBAR (shared look) ===== */
.g-nav{ border-bottom-left-radius:22px; border-bottom-right-radius:22px; }
.g-nav .navbar-brand img{ height:56px; }
.g-nav .nav-link{
  position:relative; font-weight:300; color:var(--nav-blue);
  border-radius:10px; padding:.35rem .65rem;
  transition: color .18s ease, background .18s ease;
}
.g-nav .nav-link:hover,
.g-nav .nav-link:focus{ color:#fff !important; background:var(--nav-blue) !important; }
.g-nav .nav-link.active{ color:var(--nav-blue-2); font-weight:800; }

/* ===== BUTTONS (shared) ===== */
.nav-cta .btn{ border-radius:999px; font-weight:800; }
.btn-join{ background:linear-gradient(90deg,#ffd500,#ffb703); border:0; color:#000; }
.btn-join:hover{ filter:brightness(.95); }
.btn-outline-darkblue{
  border:2px solid var(--nav-blue); color:var(--nav-blue); background:#fff;
}
.btn-outline-darkblue:hover,
.btn-outline-darkblue:focus{ background:var(--nav-blue); color:#fff; }

/* Some pages use a 1px outline variant */
.btn-outline-darkblue.btn-1px{ border-width:1px; }

.text-darkblue{
  color:var(--nav-blue) !important;
}

.btn-darkblue{
  background-color:var(--nav-blue); color:#fff; border:2px solid var(--nav-blue);
}
.btn-darkblue:hover,
.btn-darkblue:focus{ background-color:var(--nav-blue-2); border-color:var(--nav-blue-2); color:#fff; }

/* Why AI Section Styling */
.why-ai-section {
  min-height: 480px;
  padding: 4rem 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.why-ai-section .overlay {
  background: rgba(0, 0, 0, 0.2);
}

.why-ai-section .bg-dark.bg-opacity-75 {
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(4px);
}

.why-ai-section h1,
.why-ai-section h2,
.why-ai-section h3,
.why-ai-section h4,
.why-ai-section h5,
.why-ai-section h6,
.why-ai-section p,
.why-ai-section span,
.why-ai-section li,
.why-ai-section div:not(.btn):not(.overlay),
.why-ai-section small {
  color: #ffffff !important;
}

.why-ai-section .btn-outline-info {
  border-color: #0dcaf0 !important;
  color: #0dcaf0 !important;
  background: transparent !important;
}

.why-ai-section .btn-outline-info:hover {
  background-color: #0dcaf0 !important;
  color: #000 !important;
  border-color: #0dcaf0 !important;
}

.why-ai-section .btn-danger {
  background-color: #dc3545 !important;
  border-color: #dc3545 !important;
  color: #ffffff !important;
}

.why-ai-section .text-warning,
.why-ai-section .bi-star-fill {
  color: #ffc107 !important;
}

/* ===== STICKY SUBNAV (Program Page) ===== */
.subnav-link,
.nav-link.subnav-link {
  color: var(--nav-blue) !important;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.subnav-link:hover,
.nav-link.subnav-link:hover {
  color: var(--nav-blue-2) !important;
}

/* ===== MEGA MENU (shared) ===== */
.dropdown-mega{ position: static; }
.dropdown-menu-mega{
  left:0; right:0; top:100%;
  border:1px solid #e9ecef; border-radius:16px; padding:1rem;
  box-shadow:0 20px 40px rgba(0,0,0,.08); background:#fff; margin-top:.6rem;
  z-index:2000; pointer-events:auto;
}
.mega-title{ font-weight:800; color:var(--nav-blue); margin-bottom:.25rem; }
.mega-desc{ font-size:.925rem; color:#6c757d; margin-bottom:.75rem; }
.mega-item{
  display:flex; gap:.6rem; align-items:flex-start; padding:.45rem .55rem;
  border-radius:10px; color:#0c2340; text-decoration:none;
}
.mega-item:hover{ background:var(--soft); text-decoration:none; }
.mega-item .bi{ font-size:1.1rem; margin-top:.15rem; color:var(--nav-blue); }

/* ===== SEARCH OVERLAY (shared) ===== */
.search-toggle{ background:transparent; border:0; }
.search-overlay{ position:fixed; inset:0; background:rgba(12,35,64,.88); display:none; z-index:1060; }
.search-panel{
  max-width:860px; margin:12vh auto 0; background:#fff;
  border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden;
}
.search-input-wrap{ position:relative; padding:1rem 1.25rem; }
.search-input-wrap .form-control{ height:56px; border-radius:999px; padding-left:3rem; }
.search-input-wrap .bi-search{
  position:absolute; left:2.2rem; top:50%; transform:translateY(-50%); color:#6c757d;
}
.search-results{ max-height:380px; overflow:auto; }
.search-row{
  display:flex; gap:.6rem; align-items:flex-start; padding:.6rem .9rem;
  border-bottom:1px solid #f0f2f5;
}
.search-row:hover{ background:#f7f9fc; }
.search-row small{ color:#6c757d; display:block; }

/* ===== IMAGES: lazy wrapper (shared) ===== */
.img-container{ position:relative; }

/* ===== RESPONSIVE: shared dropdown fallback ===== */
@media (max-width: 991.98px){
  .dropdown-menu-mega{ position:static; box-shadow:none; margin-top:.25rem; }
}








/* ================================================================
   HERO SECTIONS (consolidated)
   ================================================================ */
.hero{
  position:relative; height:40vh;
  background:url('assets/Rectangle 182.png') center center / cover no-repeat;
  color:#fff; text-align:center; display:flex; align-items:center; justify-content:center;
}
.hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.5); }
.hero > *{ position:relative; z-index:1; }

.hero-banner{
  min-height:60vh;
  background: url('/assets/Rectangle 182.png') center center/cover no-repeat;
}

.hero-events{
  height:30vh;
  background: url('assets/Rectangle 182.png') center center / cover no-repeat;
}

.hero.standards-hero{
  min-height:60vh; background-repeat:no-repeat; background-size:cover; background-position:center;
}

.hero-logo{ max-width:220px; height:auto; }

.top-border-4{ border-top:4px solid var(--bs-primary); }
.icon-40{ height:40px; width:auto; }


/* ================================================================
   PAGE: Home (hero, marquee, gallery, offerings, timeline, recognition)
   ================================================================ */

/* Recognition */
.recognition-img { height:280px; object-fit:cover; object-position:center; }



/* Standards image responsiveness */
.standards-img{ width:100%; height:auto; max-width:100%; margin-inline:auto; }
@media (min-width:1200px) and (max-width:1399.98px){ .standards-img{ max-width:380px; } }
@media (max-width:1199.98px) and (min-width:992px){ .standards-img{ max-width:320px; } }
@media (max-width:991.98px){ .standards-img{ max-width:280px; margin:1rem auto; } }


/* ================================================================
   INLINE STYLES EXTRACTED FROM HTML
   ================================================================ */



/* Logo max height */
.logo-max-height {
  max-height: 140px;
}

/* Button width utilities */
.btn-width-90 {
  width: 90%;
}

.btn-width-50 {
  width: 50%;
}

/* Image utilities */
.img-max-height-48vh {
  max-height: 48vh;
  object-fit: contain;
}

.img-aspect-16x9 {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.img-aspect-16x6 {
  aspect-ratio: 16/6;
  object-fit: cover;
}

/* Profile image utilities */
.profile-img-40 {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/* Play button utilities */
.play-button {
  width: 68px;
  height: 68px;
}

/* Text utilities */
.text-max-width-880 {
  max-width: 880px;
}

.text-max-width-780 {
  max-width: 780px;
}

.text-max-width-800 {
  max-width: 800px;
}

.text-max-width-900 {
  max-width: 900px;
}

/* Font family utilities */
.font-serif {
  font-family: serif;
}

/* Footer logo height */
.footer-logo {
  height: 60px;
}

/* ================================================================
   INLINE STYLES EXTRACTED FROM HTML
   ================================================================ */

/* Hero section slider styles */
.hero { min-height: calc(58vh - 10px); }
@media (min-width: 768px){ .hero { min-height: calc(68vh - 10px); } }
@media (min-width: 992px){ .hero { min-height: calc(80vh - 10px); } }

/* Background image layer */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }

/* Readability gradient */
.hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.10) 70%, rgba(0,0,0,0) 100%);
}

/* Keep carousel control icons visible on any photo */
.carousel-control-prev-icon, .carousel-control-next-icon { filter: invert(1); }
#heroCarousel {
  -webkit-text-size-adjust: 100%;
}
#heroCarousel h1, #heroCarousel h2, #heroCarousel p {
  overflow-wrap: anywhere;     /* break long words if needed */
  word-break: break-word;
  text-wrap: balance;          /* nicer line breaks when supported */
}

/* Marquee section styles */
.gio-marquee {
  overflow: hidden;
  /* container height = badge height + 10px */
  --badge-h: 150px;     /* tweak if you want smaller/larger badges */
  min-height: calc(var(--badge-h) + 10px);
}
.gio-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2rem;
  white-space: nowrap;      /* never wrap */
  width: max-content;       /* shrink-to-content so translateX works perfectly */
  will-change: transform;
  transform: translateX(0); /* JS will animate from -singleWidth → 0 */
}
.gio-badge {
  height: var(--badge-h);
  width: auto;              /* keep aspect ratio; avoid distortion */
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes gio-scroll-ltr-px {
  0%   { transform: translateX(var(--marquee-start, 0)); }
  100% { transform: translateX(0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gio-marquee__track { animation: none !important; }
}

/* Gallery section styles */
.gallery-fullwidth img {
  width: 85vw;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}
/* Optional: constrain max width on ultra-wide screens */
@media (min-width: 1800px) {
  .gallery-fullwidth img {
    max-width: 1920px;
  }
}

/* Offerings section styles */
.offer-card{ border-radius:1rem; }
.icon-badge{
  width:56px; height:56px; border-radius:0.9rem;
  background:var(--brand-gold); color:var(--brand-ink);
  display:flex; align-items:center; justify-content:center;
}

/* Synchronised timeline styles */
.sync-timeline {
  /* set the image height — tune once so circles align */
  --img-h-lg: 760px;   /* desktop/laptop image height */
  --lane-gap: 2rem; /* space between image and text lanes */

  /* percentages of each circle along the image (0 = top, 100 = bottom) */
  --p1: 10%;
  --p2: 26%;
  --p3: 38%;
  --p4: 58%;
  --p5: 70%;
  --p6: 89%;
}

/* 3-column canvas (desktop) */
.timeline-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: var(--lane-gap);
  align-items: start;
}

/* Center image fixed to the agreed height */
.timeline-img {
  height: var(--img-h-lg);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Each side is a positioning canvas */
.timeline-grid .lane {
  position: relative;
  min-height: var(--img-h-lg);
}

/* Place each milestone by percentage beside its circle */
.timeline-grid .milestone {
  position: absolute;
  top: var(--top);         /* e.g. var(--p1) */
  transform: translateY(-50%);
  max-width: 32rem;
}

/* ---------- Mobile/Tablet timeline ---------- */
.dotline {
  position: relative;
  width: 20px; height: 100%;
}
.dotline::before {
  content: "";
  position: absolute; left: 9px; top: -8px; bottom: -8px;
  width: 2px; background: repeating-linear-gradient(
    to bottom, #c5d0db 0, #c5d0db 6px, transparent 6px, transparent 12px
  );
}
.dotline .dot {
  position: relative; z-index: 1;
  display: block; width: 14px; height: 14px; border-radius: 50%;
  background: #15324b; margin: 6px 0 0 3px;
}

/* Typographic polish */
.sync-timeline h5 { margin-bottom: .25rem; }

/* tighten the gap between lanes and image */
.sync-timeline .timeline-grid { --lane-gap: clamp(12px, 1.8vw, 28px); }

/* LEFT lane: right-align and nudge toward the middle image */
.sync-timeline .timeline-grid .lane:first-child .milestone{
  right: 0;                 /* anchor to the inner edge of the lane */
  text-align: right;        /* headings & text align toward the image */
  max-width: 34rem;         /* optional: allow slightly wider text */
  padding-right: .25rem;    /* tiny breathing space from the edge */
  transform: translate(8px, -50%); /* <-- nudge a bit closer to the image */
}