:root{

  --ink:#0b0b10;
  --muted:#50505c;
  --brand:#0d6efd;
  --gov-gradient: linear-gradient(90deg, var(--brand), #6ea8fe 40%, #6f42c1, var(--brand));
}

/* Reset + base */
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6;
  overflow-x:hidden;
}

/* ===== HEADER ===== */
header {
  background: linear-gradient(90deg, #0D6EFD, #6EA8FE, #6F42C1, #0D6EFD);
  padding: 10px 0;
}
nav {
  display:flex; justify-content:space-between; align-items:center;
  padding: 0 30px;
}
.logo svg { height:45px; display:block; }
.nav-links { list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.nav-links a {
  color:#fff; text-decoration:none; font-size:18px; font-weight:500;
  transition:all .3s ease; padding-bottom:2px;
}
.nav-links a:hover,
.nav-links a.active {
  color:#FFA500;
  border-bottom:2px solid #FFA500;
}
@media(max-width:768px){
  nav{flex-direction:column}
  .nav-links{flex-direction:column; gap:20px; margin-top:20px}
  .nav-links a{font-size:20px}
}



   :root{
      --brand-blue: #0d6efd;
      --brand-purple: #6f42c1;
      --muted: #6b7280;
      --max-width: 1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
      color:#123047;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
    }

    /* 🔵 Animated Background */
    .bg-anim {
      position: fixed;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }

    .bg-anim span {
      position: absolute;
      display: block;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      filter: blur(140px);
      opacity: 0.4;
      animation: float 18s ease-in-out infinite;
    }

    .bg-anim span:nth-child(1){
      background: var(--brand-blue);
      top: -200px;
      left: -200px;
      animation-delay: 0s;
    }
    .bg-anim span:nth-child(2){
      background: var(--brand-purple);
      top: 60%;
      left: 70%;
      animation-delay: 4s;
    }
    .bg-anim span:nth-child(3){
      background: #00c2ff;
      top: 80%;
      left: 10%;
      animation-delay: 8s;
    }

    @keyframes float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50% { transform: translate(60px, -40px) scale(1.15); }
    }

    .bg-overlay {
      position: fixed;
      inset: 0;
      background: radial-gradient(800px 400px at 10% 10%, rgba(13,110,253,0.08), transparent 10%),
                  radial-gradient(700px 300px at 90% 80%, rgba(111,66,193,0.06), transparent 10%);
      mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.02) 100%);
      z-index: 1;
      pointer-events: none;
    }

    

    header,h1{margin:0}
.title{
  text-align:center;
  margin-top:18px;
  margin-bottom:10px;
  background: radial-gradient(800px 400px at 10% 10%, rgba(13,110,253,0.08), transparent 10%),
                  radial-gradient(700px 300px at 90% 80%, rgba(111,66,193,0.06), transparent 10%);

}

header .logo h1,
.home-header-title {
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

    .subtitle{
      color:var(--muted);
      text-align:center;
      max-width:920px;
      margin:14px auto 48px;
      font-size:15px;
      line-height:1.6;
    }

    .contact-area{
      display:flex;
      gap:28px;
      align-items:flex-start;
      justify-content:center;
      flex-wrap:wrap;
    }

    .card{
      border-radius:16px;
      padding:34px;
      flex: 1 1 600px;
      min-width:280px;
      transition: transform 0.32s ease, box-shadow 0.32s ease;
      position:relative;
      overflow:visible;
      background:#f5f5f5;
      box-shadow: 0 20px 50px rgba(18,48,71,0.1);
    }
    .card:hover{ transform: translateY(-8px); box-shadow: 0 28px 60px rgba(18,48,71,0.15);}

    .form-card{ 
      padding: 36px 40px 44px;
      flex: 1 1 600px;
      max-width: 700px;
    }

    .card h2{
      font-size:18px;
      margin:0 0 18px 0;
      display:flex;
      gap:12px;
      align-items:center;
      color:var(--brand-blue);
      font-weight:700;
    }

    .icon-wrap{
      width:36px;height:36px;border-radius:8px;
      display:inline-flex;align-items:center;justify-content:center;
      background: linear-gradient(180deg, rgba(13,110,253,0.12), rgba(111,66,193,0.08));
      flex-shrink:0;
    }
    .icon-svg{ width:20px;height:20px;display:block; }

    .form-card form{ display:block; margin-top:6px;}
    .form-row{ display:flex; gap:12px; }
    .form-group{ position:relative; margin-bottom:16px; width:100%; }
    .form-group input, .form-group textarea{
      width:100%;
      font-family:inherit;
      font-size:14px;
      padding:14px 14px;
      border-radius:8px;
      border:1px solid #e6e9ef;
      background:rgba(255,255,255,0.98);
      outline:none;
      transition: box-shadow .18s, border-color .18s, transform .18s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .form-group textarea{ resize:vertical; min-height:140px; padding-top:12px; padding-bottom:12px; }

    .form-group label{
      position:absolute;
      left:12px;
      top:50%;
      transform:translateY(-50%);
      background:transparent;
      color:#9aa3b2;
      padding:0 6px;
      font-size:13px;
      pointer-events:none;
      transition: transform .18s, font-size .18s, top .18s, color .18s;
    }

    .form-group input:focus, .form-group textarea:focus{
      border-color: rgba(13,110,253,0.9);
      box-shadow: 0 6px 18px rgba(13,110,253,0.06);
    }
    .form-group input:focus + label,
    .form-group input:not(:placeholder-shown) + label,
    .form-group textarea:focus + label,
    .form-group textarea:not(:placeholder-shown) + label{
      top:-10px;
      font-size:12px;
      color:var(--brand-blue);
      transform:none;
      background:#f5f5f5;
    }

    .cta{
      display:inline-block;
      margin-top:12px;
      padding:12px 18px;
      border-radius:10px;
      font-weight:800;
      cursor:pointer;
      border:none;
      background:linear-gradient(90deg,var(--brand-blue),var(--brand-purple));
      color:white;
      font-size:15px;
      box-shadow: 0 8px 22px rgba(13,110,253,0.14);
      transition: transform .14s ease;
    }
    .cta:active{ transform: translateY(1px) }
    .status{ font-size:13px; margin-top:12px; color:#0b6a8a; }

    .bottom-strip{
      height:64px;
      margin-top:44px;
      border-radius:12px;
      background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
      opacity:0.6;
    }

    @media (max-width:980px){
      .page-wrap{ padding:34px 20px; margin:28px auto 80px; }
      h1{font-size:30px}
      .contact-area{ gap:18px }
      .card{ padding:22px; border-radius:12px; }
      .form-card{ padding:28px 32px; }
    .background: linear-gradient(90deg, #0d6efd, #6f42c1) !important;

      
    }
    @media (max-width:640px){
      .page-wrap{ padding:20px 14px; }
      h1{font-size:26px}
      .subtitle{ font-size:14px }
      .contact-area{ flex-direction:column; align-items:stretch }
      .card{ width:100%; }
   .background: linear-gradient(90deg, #0d6efd, #6f42c1) !important;

    }




footer.footer {
  background: #ffffff !important;
  position: relative;
  z-index: 10;
}

.footer-container {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:50px;
  margin-bottom:30px;
  align-items:flex-start;
}
.footer-field { flex:1; min-width:220px; }
.footer-brand { margin-left:0; }
.footer-field h4 { 
  margin-bottom:14px; 
  font-size:16px; 
  font-weight:700; 
  color:#0D6EFD; 
}
.footer-field ul { list-style:none; padding:0; margin:0; }
.footer-field ul li { margin-bottom:10px; }
.footer-field ul li a { color:#111; text-decoration:none; font-weight:600; }
.footer-field ul li a:hover { color:#0D6EFD; }

.logo-box { display:inline-block; margin-bottom:12px; }
.footer-logo { width:170px; display:block; }
.footer-desc { font-size:14px; color:#444; line-height:1.6; max-width:280px; }

.footer-socials {
  display:flex; 
  gap:16px; 
  margin-top:14px; 
  align-items:center;
}
.footer-socials .social {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px; height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid #e9e9ef;
  transition:transform .2s, box-shadow .2s;
}
.footer-socials .social:hover {
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 6px 12px rgba(0,0,0,.15);
}

.footer-bottom {
  border-top:1px solid #e9e9ef;
  padding-top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  font-size:13px;
}
.footer-links a { margin-left:18px; color:#111; text-decoration:none; }
.footer-links a:hover { color:#0D6EFD; }

/* Responsive */
@media (max-width:768px){
  .footer-container{flex-direction:column;gap:30px;}
  .footer-field{min-width:100%;}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center;}
}

/* Contact Us gradient font, not affected by header background */
.title {
  background: transparent !important;
}

.title h1 {
  position: relative;
  z-index: 5;
  background: linear-gradient(90deg, #0d6efd, #6f42c1) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}