section{
  padding-left: 2rem; 
  padding-right: 2rem;
}

/* ── Smooth scroll ── */
html { scroll-behavior: smooth; }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 99px; }

/* ══════════════════════
   KEYFRAMES
══════════════════════ */
@keyframes gradientDrift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes floatYSlow {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}
@keyframes pulseDot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.5; transform:scale(.75); }
}
@keyframes bannerPulse {
  0%,100% { opacity:1; }
  50%      { opacity:.92; }
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ══════════════════════
   HERO
══════════════════════ */
.hero-bg {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8edff 35%, #f8fafc 70%, #eef2ff 100%);
  background-size: 400% 400%;
  animation: gradientDrift 12s ease-in-out infinite;
}
.mesh-overlay {
  background-image:
    linear-gradient(rgba(38,56,217,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,56,217,.035) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── Floating hero image ── */
.hero-img-wrap {
  animation: floatY 7s ease-in-out infinite;
  filter: drop-shadow(0 32px 64px rgba(38,56,217,.18));
}
.hero-img-wrap img {
  border-radius: 24px;
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
}

/* ── Floating badge cards ── */
.float-badge {
  animation: floatY 5s ease-in-out infinite;
  position: absolute;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  z-index: 10;
}

/* ══════════════════════
   NAV
══════════════════════ */
#navbar {
  transition: background .3s ease, box-shadow .3s ease;
}

.nav-link {
  position: relative;
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  transition: color .3s ease;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: #2638D9;
  transition: width .25s ease;
}

.nav-link:hover {
  color: #2638D9;
}

.nav-link:hover::after {
  width: 100%;
}

/* When navbar is on a light section */
#navbar.scrolled {
  background: #0a1322;
  box-shadow: 0 2px 15px rgba(0,0,0,.08);
}

#navbar.scrolled .nav-link {
  color: #ffffff; /* or #2638D9 */
}

#navbar.scrolled .nav-link:hover {
  color: #2638D9;
}

/* Make navbar black when mobile menu is open */
body:has(#mobile-menu:not(.hidden)) #navbar {
  background-color: #000000 !important;
}

/* ══════════════════════
   BUTTONS
══════════════════════ */
.btn-primary {
  background: #2638D9;
  color: white;
  border-radius: 12px;
  font-weight: 600;
  font-size: .875rem;
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(38,56,217,.38);
  background: #000EA3;
}
.btn-outline {
  background: white;
  color: #2638D9;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  font-weight: 600;
  font-size: .875rem;
  padding: 13px 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.08);
  border-color: #2638D9;
}

/* ══════════════════════
   SECTION LABELS
══════════════════════ */
.section-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2638D9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section-eyebrow::before {
  content:'';
  display:inline-block;
  width:20px; height:1.5px;
  background:#2638D9;
  border-radius:99px;
}

/* ══════════════════════
   TAG PILLS
══════════════════════ */
.tag { 
  font-size:.68rem; font-weight:700; 
  letter-spacing:.06em; text-transform:uppercase;
  padding:3px 10px; border-radius:99px; 
}

/* ══════════════════════
   CARDS
══════════════════════ */
.card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  transition: transform .35s cubic-bezier(.22,1,.36,1),
              box-shadow .35s cubic-bezier(.22,1,.36,1),
              border-color .3s ease;
}
.card:hover {
  transform: translateY(-7px);
  box-shadow: 0 24px 64px rgba(38,56,217,.11);
  border-color: rgba(38,56,217,.2);
}
.card:hover .card-icon { transform: rotate(4deg) scale(1.08); }
.card:hover .arrow-icon { transform: translateX(5px); }
.card-icon { transition: transform .3s ease; }
.arrow-icon { transition: transform .25s ease; }

/* ══════════════════════
   STAT CARDS
══════════════════════ */
.stat-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(38,56,217,.10);
}

/* ══════════════════════
   NEWS CARDS
══════════════════════ */
.news-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(15,23,42,.10);
}
.news-card:hover .news-title { color: #2638D9; }
.news-title { transition: color .2s; }
.news-img { transition: transform .5s ease; overflow:hidden; }
.news-card:hover .news-img img { transform: scale(1.05); }

/* ══════════════════════
   TICKER / MARQUEE
══════════════════════ */
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 30s linear infinite;
  
}
.ticker-track:hover { animation-play-state: paused; }

/* ══════════════════════
   PARALLAX IMAGE
══════════════════════ */
.parallax-img {
  will-change: transform;
}

/* ══════════════════════
   GSAP INIT STATES
══════════════════════ */
.g-fade    { opacity:0; transform:translateY(28px); }
.g-left    { opacity:0; transform:translateX(-36px); }
.g-right   { opacity:0; transform:translateX(36px); }
.g-scale   { opacity:0; transform:scale(.94); }
.g-fade-up { opacity:0; transform:translateY(16px); }

/* ══════════════════════
   CTA BANNER
══════════════════════ */
.cta-gradient {
  background: linear-gradient(130deg, #2638D9 0%, #000EA3 55%, #0f1e35 100%);
  animation: bannerPulse 7s ease-in-out infinite;
}

/* ══════════════════════
   SECTOR CARDS
══════════════════════ */
.sector-img {
  height: 240px;
  object-fit: cover;
  width: 100%;
  border-radius: 16px 16px 0 0;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.sector-wrap { overflow: hidden; border-radius: 16px 16px 0 0; }
.sector-card:hover .sector-img { transform: scale(1.06); }
.sector-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .3s;
}
.sector-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 72px rgba(38,56,217,.13);
  border-color: rgba(38,56,217,.18);
}

/* ══════════════════════
   LEADERSHIP
══════════════════════ */
.leader-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.leader-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(38,56,217,.12);
}
.leader-img {
  width:100%; height:280px; object-fit:cover;
  transition: transform .5s ease;
}
.leader-card:hover .leader-img { transform: scale(1.04); }

.leader-image{
    position:relative;
    overflow:hidden;
    border-radius:20px 20px 0 0;
    cursor:pointer;
}

.leader-img{
    width:100%;
    height:400px;
    object-fit:cover;
    transition:all .6s ease;
}

/* Image Effect */
.leader-image:hover .leader-img{
    filter:grayscale(100%);
    transform:scale(1.08);
}

/* Overlay */
.leader-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    opacity:0;
    transition:.5s ease;
}

/* Show Overlay */
.leader-image:hover .leader-overlay{
    opacity:1;
}

/* Name */
.leader-overlay h3{
    color:#fff;
    font-size:22px;
    font-weight:700;
    transform:translateY(20px);
    transition:.5s ease;
}

/* Title */
.leader-overlay p{
    color:#ddd;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-top:8px;

    transform:translateY(20px);
    transition:.6s ease;
}

/* Animate Text */
.leader-image:hover .leader-overlay h3,
.leader-image:hover .leader-overlay p{
    transform:translateY(0);
}

/* ══════════════════════
   IMPACT / PHILANTHROPY
══════════════════════ */
.impact-img {
  border-radius: 24px;
  width:100%; height:420px; object-fit:cover;
  box-shadow: 0 32px 80px rgba(15,23,42,.14);
}

/* ══════════════════════
   FOOTER
══════════════════════ */
.footer-link {
  color: #94a3b8;
  font-size:.875rem;
  text-decoration:none;
  transition: color .2s;
  display:block;
  padding:3px 0;
}
.footer-link:hover { color:#e2e8f0; }

/* ══════════════════════
   RESPONSIVE HELPERS
══════════════════════ */
@media (max-width:768px) {
  .hero-img-wrap { display:none; }
  .float-badge { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

img{
    transition:.5s;
}
.card:hover img{
    transform:scale(1.05);
}
/* ══════════════════════
   Terms & Conditions
══════════════════════ */
  /* Custom Styles */
        :root {
            --progress: 0%;
        }

        body {
            font-feature-settings: "cv11", "ss01";
            font-variation-settings: "opsz" 100;
        }

        /* Progress Bar */
        .progress-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, #3b82f6, #2563eb, #1d4ed8);
            transform-origin: left;
            transform: scaleX(var(--progress));
            z-index: 100;
            transition: transform 0.1s ease-out;
        }

        /* Smooth reveal animation */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Section cards hover effect */
        .section-card {
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .section-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

        /* Table of Contents link hover */
        .toc-link {
            position: relative;
            transition: all 0.3s ease;
        }

        .toc-link::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 2px;
            background: #2563eb;
            transition: width 0.3s ease;
        }

        .toc-link:hover::before {
            width: 100%;
        }

        .toc-link.active {
            color: #2563eb;
            font-weight: 600;
        }

        .toc-link.active::before {
            width: 100%;
        }

        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f5f9;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

        /* Print styles */
        @media print {
            .progress-bar, .toc-sidebar, .no-print {
                display: none !important;
            }
            body {
                background: white;
                color: black;
            }
            .section-card {
                box-shadow: none;
                border: 1px solid #e2e8f0;
            }
        }

        /* Mobile TOC toggle */
        .toc-mobile {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .toc-mobile.open {
            max-height: 500px;
        }

        /* ════════════════════════════════════════════════
    UNIQUE MOBILE VIEW - COMPACT & MODERN
═══════════════════════════════════════════════════ */

/* Progress Bar - Slim & Elegant */
.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    width: calc(var(--progress, 0) * 100%);
    z-index: 100;
    transition: width 0.15s ease;
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.5);
}

/* Reveal Animation - Smooth Fade */
.reveal {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Active TOC Link - Minimal Indicator */
.toc-link.active {
    color: #2563eb;
    font-weight: 500;
    background: linear-gradient(90deg, rgba(37,99,235,0.08), transparent);
    padding-left: 12px;
    border-radius: 0 4px 4px 0;
}

/* Mobile TOC - Slide Down */
.toc-mobile {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toc-mobile.open {
    max-height: 600px;
}

/* Navbar Scrolled - Glass Effect */
header.scrolled .absolute {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* ════════════════════════════════════════════════
    MOBILE FIRST - 768px
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Compact Typography */
    h1.text-5xl, h1.text-6xl, h1.text-7xl {
        font-size: 2.25rem !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
    }
    
    h2.text-2xl, h2.text-3xl {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
    }
    
    p.text-xl, p.text-lg {
        font-size: 0.95rem !important;
        line-height: 1.65 !important;
    }
    
    /* Hero Section - Compact */
    section:first-of-type {
        padding-top: 5.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    #badge {
        padding: 0.375rem 0.875rem !important;
        font-size: 0.75rem !important;
    }
    
    #meta, #actions {
        gap: 0.75rem !important;
    }
    
    #actions button, #actions a {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.8125rem !important;
    }
    
    /* Navbar - Minimal */
    header .h-\[72px\] {
        height: 56px !important;
    }
    
    header .w-\[220px\] {
        width: 150px !important;
        height: 28px !important;
    }
    
    header a[href="#subsidiaries"] {
        padding: 0.375rem 0.875rem !important;
        font-size: 0.75rem !important;
    }
    
    header .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* Section Cards - Compact & Clean */
    .section-card {
        padding: 1.25rem !important;
        margin-bottom: 1rem !important;
        border-radius: 12px !important;
        border-width: 1px !important;
    }
    
    .section-card .w-12.h-12 {
        width: 2.25rem !important;
        height: 2.25rem !important;
        border-radius: 10px !important;
    }
    
    .section-card .w-12.h-12 span,
    .section-card .w-12.h-12 i {
        font-size: 0.875rem !important;
    }
    
    .section-card .mb-6 {
        margin-bottom: 0.75rem !important;
    }
    
    .section-card .mb-4, .section-card .mb-3 {
        margin-bottom: 0.5rem !important;
    }
    
    /* Info Boxes - Slim */
    .bg-gradient-to-r.rounded-xl.p-6 {
        padding: 0.875rem !important;
        border-radius: 10px !important;
        border-width: 1px !important;
    }
    
    .bg-gradient-to-r.rounded-xl h3 {
        font-size: 0.9375rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .bg-gradient-to-r.rounded-xl ul li {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Grid Items - Single Column */
    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 0.75rem !important;
    }
    
    .grid .bg-slate-50, .grid .bg-amber-50 {
        padding: 0.75rem !important;
        border-radius: 8px !important;
    }
    
    .grid .bg-slate-50 span, .grid .bg-amber-50 span {
        font-size: 0.8125rem !important;
    }
    
    /* Contact Cards */
    .grid.grid-cols-1.md\:grid-cols-2.gap-6 .bg-white\/10 {
        padding: 0.875rem !important;
        border-radius: 10px !important;
    }
    
    .grid .text-xs {
        font-size: 0.6875rem !important;
    }
    
    .grid .font-semibold {
        font-size: 0.8125rem !important;
    }
    
    /* Footer - Stacked */
    footer {
        padding: 2.5rem 1.25rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        text-align: center;
    }