:root {
  /* Colors */
  --navy:         #072a52;
  --blue-700:     #0b5fae;
  --blue-600:     #1571cf;
  --blue-500:     #2e8ee0;
  --blue-300:     #7ec1f2;
  --blue-100:     #eaf3fc;
  --blue-50:      #f6fafe;
  --white:        #ffffff;
  --ink:          #16324f;
  --ink-soft:     #5b7996;
  --line:         #dfeaf6;

  /* Layout Boundaries */
  --radius-lg:    24px;
  --radius-md:    16px;
  --radius-sm:    10px;

  /* Shadows */
  --shadow-soft:  0 20px 45px -22px rgba(7, 42, 82, 0.22);
  --shadow-hover: 0 24px 55px -20px rgba(7, 42, 82, 0.3);

  /* Typography Fallbacks */
  --font-body:    "Inter", sans-serif;
  --font-display: "Inter", sans-serif;
}


@supports (font-variation-settings: normal) {
  :root {
    --font-body:    "InterVariable", sans-serif;
    --font-display: "InterVariable", sans-serif;
  }
}


html, body {
  font-family: var(--font-body);
  font-feature-settings: "liga" 1, "calt" 1; /* Fix for Chrome */
}

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    background:var(--white);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;}
  .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}
  :focus-visible{outline:2px solid var(--blue-500);outline-offset:2px;}

  /* =========================================================
     UTILITY BAR
     ========================================================= */
  .utility-bar{width:100%;background:var(--blue-700);color:#eaf3fc;font-size:.78rem;padding:8px 0;}
  .utility-bar .wrap{display:flex;justify-content:flex-end;align-items:center;}

  /* =========================================================
     HERO — Left-aligned layout to complement left-text logo design
     ========================================================= */
  .hero{
  width:100%;padding:80px 0 64px;position:relative;overflow:hidden;
  padding-top: 50px;
  }
  .hero .wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start; /* Shifted to left-aligned */
    text-align:left;        /* Shifted to left-aligned */
    max-width:840px;
  }
 
  .hero-logo-container {
    width: 60%;
    height: 60%;
    max-width: 380px;
    margin-bottom: 32px;
  }
  .hero-logo-container img {
   height: 60%; 
   width: 60%;
  }

  /* NEW: Coming Soon Badge */
  .coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blue-700);
    color: #ffffff;
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(11, 95, 174, 0.15);
  }
  .badge-pulse-dot {
    width: 8px;
    height: 8px;
    background: var(--blue-300);
    border-radius: 50%;
    animation: badgePulse 2s infinite;
  }
  @keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.4; }
  }

  .hero-heading{
    font-family:var(--font-display);font-weight:800;
    font-size:clamp(2rem, 4.5vw, 3.2rem);line-height:1.15;color:var(--navy);margin:0 0 20px;
  }
  .hero-heading .accent{color:var(--blue-600);}
  .hero-desc{color:var(--ink-soft);font-size:1.05rem;line-height:1.75;max-width:720px;margin:0 0 24px 0;}

  /* =========================================================
     PARTNERS BANNER 
     ========================================================= */
  .institution-banner {
    width: 100%;
    background: var(--white);
    border-top: 4px solid var(--blue-600);
    border-bottom: 4px solid var(--blue-600);
    padding: 24px 0;
  }
  .institution-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* =========================================================
     FOOTER — Uniform, Harmonized Dual Action Boxes
     ========================================================= */
  footer.site-footer {
    background: var(--navy);
    color: #eaf3fc;
    padding: 56px 0;
    border-top: 4px solid var(--blue-600);
  }
  .footer-flex {
    display: flex;
  justify-content: space-between;
  /* 1. CHANGE from center to stretch so columns match heights on desktop */
  align-items: stretch; 
  flex-wrap: wrap;
  gap: 24px;
  }
  .footer-left, .footer-right {
   flex: 1 1 0%;
  width: 100%;
  max-width: 500px;
  
  display: flex;
  }
  
  .footer-action-card {
    display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 18px 24px;
  border-radius: var(--radius-md);
  min-height: 115px; 
  height: 100%; 
  
  transition: background 0.23s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.23s ease;
  width: 100%;
  }
  .footer-action-card:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: var(--blue-300);
  }
  
  .action-icon-box {
    width: 46px;
    height: 46px;
    background: #0077b5;
    color: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .action-icon-box svg {
    width: 24px;
    height: 24px;
  }

  .action-img-box {
    width: 110px;
    height: 46px;
    background: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 6px;
    overflow: hidden;
  }
  .action-img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .action-meta h4 {
    margin: 0 0 3px 0;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
  }
  .action-meta p {
    margin: 0;
    font-size: 0.82rem;
    color: #a9c6e3;
    line-height: 1.3;
  }

  /* =========================================================
     RESPONSIVE
     ========================================================= */
  @media (max-width:768px){
    .footer-flex {
      flex-direction: column;
    }
    .footer-left, .footer-right {
      max-width: 100%;
      width: 100%;
    }
  }
  @media (max-width:640px){
    .utility-bar .wrap{justify-content:center;}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
    html{scroll-behavior:auto;}
  }


@media (max-width: 380px) {
  .footer-action-card {
    flex-direction: column;   
    align-items: flex-start;  
    gap: 12px;                
    padding: 16px;           
    height: auto !important;  
    min-height: 0 !important; 
  }

  .action-meta {
    width: 100%;
    overflow-wrap: break-word; 
    word-break: break-word;
  }

  .action-meta h4 {
    font-size: 0.92rem;       
  }
}