/* style css for topbar, footer and navigation */
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
:root {
  --blue: #2B6CB0;
  --blue-light: #3B82C4;
  --blue-pale: #D6E8FA;
  --red: #E53E3E;
  --salmon: #FC8181;
  --white: #FFFFFF;
  --gray: #F7FAFC;
  --text: #1A202C;
  --text-soft: #4A5568;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Nunito', sans-serif;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

/* ── TOP BAR ─────────────────────────────────────── */
    .topbar {
      background: var(--white);
      border-bottom: 1px solid #E2E8F0;
      padding: 14px 48px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 12px;
    }

    .logo-area {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    
    .logo-img {
      height: auto;
      width: 144px;
      max-width: 100%;
      display: block;
      object-fit: contain;
      border: none;
      outline: none;
      box-shadow: none;
      background: transparent;
    }


    .logo-social-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .tagline {
      font-size: 1.5rem;
      /*font-size: 24px;*/
      font-family: 'Caveat', cursive;
      color: var(--text-soft);
      font-weight: 600;
      margin-top: 2px;
    }

    .tagline span {
      color: var(--blue);
      text-decoration: underline;
      text-decoration-color: var(--red);
      font-weight: 800;
    }

    .social-icons {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .social-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 8px;
      text-decoration: none;
      transition: transform 0.2s, box-shadow 0.2s;
      border: none;
      cursor: pointer;
    }

    .social-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
    .social-btn.fb  { background: #1877F2; }
    .social-btn.ig  { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
    .social-btn svg { width: 18px; height: 18px; fill: white; }

    /* ── NAV ─────────────────────────────────────────── */
    nav {
      background: var(--blue);
      padding: 0 48px;
    }

    nav ul {
      list-style: none;
      display: flex;
      align-items: center;
    }

    nav ul li a {
      display: block;
      padding: 15px 20px;
      color: white;
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.3px;
      transition: background 0.2s;
      position: relative;
    }

    nav ul li a::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; right: 50%;
      height: 3px;
      background: var(--salmon);
      border-radius: 2px 2px 0 0;
      transition: left 0.2s, right 0.2s;
    }

    nav ul li a:hover { background: rgba(255,255,255,0.1); }
    nav ul li a:hover::after { left: 12px; right: 12px; }
    nav ul li:not(:last-child) a { border-right: 1px solid rgba(255,255,255,0.15); }

    /* ── FOOTER ─────────────────────────────────────── */
    footer {
      position: relative;
      background: var(--blue);
      color: white;
      padding: 20px 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      overflow: visible;
    }

    footer p {
      font-size: 0.82rem;
      opacity: 0.8;
    }

    footer a.footer-link {
      color: var(--salmon);
      text-decoration: none;
      font-size: 0.85rem;
      font-weight: 700;
    }

    footer a.footer-link:hover {
      text-decoration: underline;
    }

    .footer-mascot {
      position: absolute;
      bottom: 60px;
      right: 10px;
      width: 160px;
      pointer-events: none;
      z-index: 0;
      opacity: 1;
    }

    .divider {
      width: 60px;
      height: 4px;
      background: var(--salmon);
      border-radius: 2px;
      margin-bottom: 48px;
    }

    @media (max-width: 600px) {
      .topbar {
        padding: 14px 16px;
      }

      nav {
        padding: 0 4px;
      }

      nav ul li a {
        padding: 11px 9px;
        font-size: 0.76rem;
      }

      footer {
        padding: 16px;
        flex-direction: column;
        text-align: center;
      }
    }