  :root {
      --accent: #1434b2;
      --accent-2: #f65e22;
      --muted: #64748b;
      --max-w: 1220px;
      --pill-bg: #4b4b4b;
  }

  * {
      font-family: "Inter", sans-serif !important;
  }
/* Add space below fixed navbar */
body {
    padding-top: 20px;   /* For desktop */
}

@media (max-width: 991px) {
    body {
        padding-top: 60px;   /* For mobile */
    }
}

/* NAVBAR BASE | Always White Background */
.navbar {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 9999;
    background: #ffffff !important; /* White background */
    padding: 22px 0;
    transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

/* After scroll → White + Shrink + Shadow */
.navbar.nav-scrolled {
    background: #ffffff !important;
    padding: 10px 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}



  /* Remove underline + blue default */
  a {
      text-decoration: none !important;
      color: inherit !important;
  }

  /* Dropdown Base */
  .nav-item .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: all .28s ease;
      border-radius: 14px;
      padding: 10px 0;
      border: 1px solid rgba(255, 255, 255, 0.3);

      /* 🌟 Glass Blur */
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  }

  .nav-item:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
  }

  /* Menu hover underline */
  .navbar-nav .nav-link {
      position: relative;
      padding: 10px 16px;
      font-weight: 500;
  }

  .navbar-nav .nav-link::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 6px;
      width: 0;
      height: 2px;
      background: #1434b2;
      transition: .3s;
      transform: translateX(-50%);
  }

  .navbar-nav .nav-link:hover::after {
      width: 70%;
  }

  /* Mobile hide on top, show after scroll */
/* Mobile fix: always show navbar */
@media (max-width: 991px) {
    .navbar {
        transform: translateY(0) !important;
    }
}



  /* Buttons */
  .btn-dark-round {
      background: #1434b2;
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 600;
      color: #fff !important;
      transition: .3s;
  }

  .btn-dark-round:hover {
      background: #000;
      color: #fff;
  }

  .btn-green-round {
      background: linear-gradient(90deg, #06f273, #06c2f2);
      padding: 12px 28px;
      border-radius: 50px;
      font-weight: 600;
      color: #fff;
  }


  .site-footer {
    margin-top: 35px;
      background: #f6f6f6;
      padding: 48px 18px 16px;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
      color: #071033;
  }

  .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      gap: 30px;
      align-items: flex-start;
      flex-wrap: wrap;
  }

  .footer-col {
      flex: 1;
      min-width: 220px;
  }

  .footer-brand img {
      height: 56px;
      display: block;
      margin-bottom: 12px;
  }

  .footer-desc {
      color: #475569;
      max-width: 360px;
      line-height: 1.6;
      margin-bottom: 12px;
  }

  /* Social icons row (after description) */
  .social-row {
      display: flex;
      gap: 12px;
  }

  .social-btn svg {
      width: 28px;
      height: 28px;
      transition: .2s ease;
  }

  .social-btn:hover svg {
      transform: scale(1.12);
  }


  .footer-heading {
      font-weight: 800;
      margin-bottom: 14px;
      font-size: 16px;
  }

  .footer-links {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .footer-links a {
      color: #071033;
      font-weight: 600;
      text-decoration: none;
      transition: color .15s;
  }

  .footer-links a:hover {
      color: var(--accent);
  }

  .contact-card {
      background: #0b1220;
      color: #fff;
      padding: 18px;
      border-radius: 12px;
      max-width: 360px;
      display: flex;
      gap: 12px;
      align-items: center;
  }

  .contact-card img {
      width: 56px;
      height: 56px;
      border-radius: 8px;
      object-fit: cover;
  }

  .contact-card .contact-txt {
      font-weight: 700;
      font-size: 15px;
  }

  .contact-card small {
      display: block;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      margin-top: 6px;
  }

  .footer-divider {
      height: 1px;
      background: rgba(3, 12, 30, 0.06);
      margin: 28px 0;
      border-radius: 2px;
  }

  .tag-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 22px;
  }

  .tag-p {
      background: var(--pill-bg);
      color: #fff;
      padding: 8px 16px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      opacity: .95;
  }

  .bottom-full {
      background: #000;
      color: #fff;
      padding: 14px 0;
      width: 100%;
  }

  .bottom-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 18px;
  }

  .copyright {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #fff;
      font-weight: 600;
      font-size: 14px;
  }

  .payments {
      display: flex;
      gap: 10px;
      align-items: center;
  }

  .payments img {
      height: 28px;
      display: block;
      border-radius: 4px;
      background: #fff;
      padding: 4px;
  }

  @media (max-width:991px) {
      .footer-inner {
          flex-direction: column;
          gap: 22px;
          align-items: flex-start;
      }

      .bottom-inner {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
      }

      .contact-card {
          width: 100%;
      }
  }