@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Spline+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap");



.site-footer {
    --f-bg:          #091f33;  
    --f-text-muted:   #9aaac8;
    --f-text-link:    #c8d8f0;
    --f-text-heading: #ffffff;
    --f-accent:       #5b8ef0;
    --f-divider:      rgba(255,255,255,0.12);
    --f-icon-bg:      rgba(255,255,255,0.08);
    --f-icon-hover:   rgba(91,142,240,0.25);
    --f-watermark:    rgba(91,142,240,0.04);
    --f-transition:   0.3s cubic-bezier(.4,0,.2,1);

    font-family: 'Inter', sans-serif;
    background: var(--f-bg);
    border-radius: 0; /* set to 18px if you want rounded corners */
    padding: 56px 56px 32px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--f-divider);
  }

  /* Light theme override — add class="site-footer light" or use your own toggle */
  
 /* @media (prefers-color-scheme: light) {
  .site-footer{
    --f-bg:           linear-gradient(160deg, #dce6f8 0%, #e8eef8 60%, #f0f4fc 100%);
    --f-text-muted:   #4a5e88;
    --f-text-link:    #2a3e6a;
    --f-text-heading: #0f1a35;
    --f-accent:       #2a5dd4;
    --f-divider:      rgba(26,39,68,0.15);
    --f-icon-bg:      rgba(26,39,68,0.15);
    --f-icon-hover:   rgba(42,93,212,0.15);
    --f-watermark:    rgba(42,93,212,0.04);
  }
} */

  /* Decorative background circles */
  .site-footer::before {
    content: '';
    position: absolute;
    right: -120px; bottom: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    border: 60px solid var(--f-watermark);
    pointer-events: none;
  }
  .site-footer::after {
    content: '';
    position: absolute;
    right: 60px; bottom: 60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    border: 40px solid var(--f-watermark);
    pointer-events: none;
  }
  .logofooter {
    margin-top: 1.1vh;
    max-width: 70px;
    height: fit-content;
    
    
    justify-content: center;
    align-items: center;
  }

  .site-footer .f-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
    gap: 2rem;
    position: relative;
    z-index: 1;
  }

  /* Brand column */
  .site-footer .f-brand {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .site-footer .f-logo {
    color: var(--f-accent);
    width: 36px; height: 36px;
  }

  .site-footer .f-tagline {
    font-size: 0.825rem;
    font-weight: 300;
    color: var(--f-text-muted);
    line-height: 1.6;
    max-width: 240px;
  }

  .site-footer .f-socials {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.25rem;
  }

  .site-footer .f-social-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--f-icon-bg);
    border: 0px solid var(--f-divider);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background var(--f-transition), border-color var(--f-transition), transform 0.2s;
    color: var(--f-text-muted);
    text-decoration: none;
  }

  .site-footer .f-social-btn:hover {
    background: var(--f-icon-hover);
    border-color: var(--f-accent);
    color: var(--f-accent);
    transform: translateY(-2px);
  }

  .site-footer .f-social-btn svg {
    width: 15px; height: 15px;
    fill: currentColor;
  }

  /* Link columns */
  .site-footer .f-col {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .site-footer .f-col h4 {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--f-text-heading);
    margin-bottom: 0.35rem;
  }

  .site-footer .f-col a {
    font-size: 0.84rem;
    font-weight: 300;
    color: var(--f-text-link);
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s, transform 0.2s;
  }

  .site-footer .f-col a:hover {
    color: var(--f-accent);
    transform: translateX(3px);
  }

  .site-footer .f-divider {
    height: 1px;
    background: var(--f-divider);
    margin: 40px 0 24px;
    position: relative;
    z-index: 1;
  }

  .site-footer .f-bottom {
    font-size: 0.78rem;
    font-weight: 300;
    color: var(--f-text-muted);
    position: relative;
    z-index: 1;
  }

  /* Responsive */
  @media (max-width: 900px) {
    .site-footer { padding: 40px 32px 28px; }
    .site-footer .f-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem 2rem;
    }
    .site-footer .f-brand { grid-column: 1 / -1; }
  }

  @media (max-width: 540px) {
    .site-footer { padding: 32px 20px 24px; }
    .site-footer .f-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
  }
/* Mobile Responsiveness */
@media (max-width: 768px) {
  .stat-item h2 {
    font-size: 2.5rem;
  }
  
}