:root {
      --primary: #0b3c74; /* deep blue */
      --secondary: #ffffff;
      --accent: #e6f0fb;
      --dark: #0a1f33;
      --muted: #6b7c93;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    }

    body {
      background: var(--secondary);
      color: var(--dark);
      line-height: 1.6;
    }

    /* ===== FOOTER ===== */
    footer {
      background: var(--dark);
      color: #fff;
      padding: 50px 40px 20px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 30px;
      margin-bottom: 30px;
    }

    footer h4 {
      margin-bottom: 14px;
      font-size: 1rem;
    }

    footer p, footer a {
      font-size: 0.85rem;
      color: #dbe5f0;
      text-decoration: none;
      display: block;
      margin-bottom: 6px;
    }

    .copyright {
      text-align: center;
      font-size: 0.75rem;
      color: #b8c7da;
      border-top: 1px solid #233b55;
      padding-top: 14px;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }

      nav ul {
        flex-wrap: wrap;
      }

      .hero h2 {
        font-size: 2rem;
      }
    }

    /* ===== SOCIAL MEDIA ICONS ===== */
    .social-links {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
    }

    .social-links a {
      width: 40px;
      height: 40px;
      background: #233b55;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      border-radius: 6px;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    .social-links a:hover {
      background: var(--primary);
      transform: translateY(-2px);
    }