:root{
    --overlay: #0B036378; /* exact color you specified */
    --accent-blue: #0A57D6; /* blue used for the moving circle & titles */
    --track-grey: rgba(0,0,0,0.47); /* #00000078 equivalent */
    --container-width: 1180px;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: white;
    color: black;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* ---- NAV ---- */
  header.topbar{
    display:block;
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,0.06);
    padding:18px 0;
  }

  .container{
    width:100%;
    max-width:var(--container-width);
    margin:0 auto;
    padding:0 24px;
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 18px;
  }

  .brand{
    display:flex;
    align-items:center;
    gap:12px;
  }

  .brand-logo{
    width:46px;
    height:46px;
    object-fit:contain;
    border-radius:6px;
    /* Replace "logo.png" with your local image path */
  }

  .company-name{
    color: black;
    font-weight:700;
    font-size:20px;
    text-decoration:none;
    letter-spacing:0.2px;
  }

  nav.main-nav ul{
    list-style:none;
    display:flex;
    gap:28px;
    align-items:center;
  }
nav.main-nav a {
  position: relative;
  color: black;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 6px 0;
  opacity: .95;
  transition: color 0.3s ease;
}

nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;              /* thickness of the line */
  width: 0;
  background-color: #0283F7; /* pick your hover line color */
  transition: width 0.3s ease;
}

nav.main-nav a:hover {
  color: #0283F7; /* optional: change text color on hover */
}

nav.main-nav a:hover::after {
  width: 100%;
}

  /* tiny right-side icons */
  .nav-actions{display:flex;gap:14px;align-items:center}
  .icon{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.04);color:#3d3939;
  }


    :root{
      --left-grad: #0463BA;
      --right-grad: #001D38;
      --btn-brown: #9c6a22;
      --gold-1: #B9802A;
      --gold-2: #C88724;
      --muted: rgba(255,255,255,0.85);
      --muted-2: rgba(255,255,255,0.75);
      --max-width: 1150px;
      --container-pad: 24px;
    }

    html,body{height:100%;margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial;}
    body{background:#fff;color:#0b0b0b;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

    .contact-hero{background:linear-gradient(90deg,var(--left-grad) 0%,var(--right-grad) 100%);color:#fff;padding:68px 20px;text-align:center}
    .contact-hero .wrap{max-width:980px;margin:0 auto}
    .contact-hero h1{font-size:40px;line-height:1;margin:0 0 12px;font-weight:800}
    .contact-hero p{margin:0 auto 18px;max-width:820px;color:rgba(255,255,255,0.92);font-size:16px}
    .contact-hero .accent{display:inline-block;height:6px;width:72px;background:linear-gradient(180deg,var(--gold-2),var(--gold-1));border-radius:999px;margin-top:12px}

    .container{max-width:var(--max-width);margin:0 auto;padding:0 var(--container-pad);box-sizing:border-box}

    .contact-main{margin-top:-40px;padding-bottom:48px}
    .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start}

    .card{background:#fff;border-radius:14px;padding:28px;box-shadow:0 18px 40px rgba(4,35,77,0.08);border:1px solid rgba(11,20,40,0.03)}

    .contact-form h2{margin:0 0 8px;font-size:20px;font-weight:800;color:#072B9D}
    .contact-form p.lead{margin:0 0 18px;color:#333}

    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
    .form-group{display:flex;flex-direction:column;margin-bottom:12px}
    label{font-size:13px;margin-bottom:6px;color:#233}
    input[type='text'],input[type='email'],input[type='tel'],select,textarea{
      padding:12px 14px;border-radius:10px;border:1px solid #e6e8ec;font-size:14px;outline:none;box-shadow:none;
      transition:box-shadow .15s ease,border-color .15s ease;resize:vertical;background:#fff;color:#111
    }
    input:focus,textarea:focus,select:focus{border-color:var(--gold-2);box-shadow:0 6px 24px rgba(200,136,36,0.12)}
    textarea{min-height:140px}

    .contact-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;border:none;background:linear-gradient(180deg,var(--gold-2),var(--gold-1));color:#fff;font-weight:800;cursor:pointer;box-shadow:0 10px 28px rgba(156,106,34,0.18)}

    .form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
    .form-note{font-size:13px;color:#6b6b6b}

    .contact-info .card{padding:22px;background:linear-gradient(180deg,rgba(4,35,77,0.98),rgba(0,26,88,0.95));color:#fff}
    .info-item{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
    .info-item .icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);font-weight:700}
    .info-item h4{margin:0;font-size:15px}
    .info-item p{margin:6px 0 0;color:black;font-size:14px}

    .small-cta{display:inline-block;margin-top:8px;padding:10px 14px;border-radius:10px;background:rgba(255,255,255,0.1);color:#fff;text-decoration:none;font-weight:700}

    .big-map{margin-top:40px;width:100%;height:420px;border-radius:14px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,0.15)}
    .big-map iframe{width:100%;height:100%;border:0}

    .form-success{display:none;padding:14px;border-radius:10px;background:#E6F8EE;color:#06462a;border:1px solid rgba(6,70,42,0.08);margin-top:12px}

    @media (max-width:980px){
      .contact-grid{grid-template-columns:1fr}
    }

    :root{
      --left-grad: #0463BA;
      --right-grad: #001D38;
      --btn-brown: #9c6a22;
      --muted: rgba(255,255,255,0.85);
      --muted-2: rgba(255,255,255,0.75);
      --small: 13px;
      --max-width: 1150px;
    }

    .site-footer{background: linear-gradient(90deg,var(--left-grad) 0%,var(--right-grad) 100%);color: white;padding: 48px 20px 22px;border-top: 6px solid rgba(255,255,255,0.03);box-shadow: inset 0 1px 0 rgba(255,255,255,0.02)}
    .footer-inner{max-width: var(--max-width);margin: 0 auto;display: grid;grid-template-columns: 1.1fr 1fr;gap: 40px;align-items: start}
    .footer-left{padding-top:8px}
    .brand1{font-weight:800;letter-spacing:0.4px;margin: 0 0 28px 0;font-size: clamp(30px, 4.1vw, 44px);color: #ffffff}
    .lists{display: grid;grid-template-columns: repeat(2, minmax(0,1fr));gap: 18px 48px;margin-top: 6px}
    .list-block h4{margin:0 0 12px 0;font-size: 18px;font-weight:700}
    .list-block ul{list-style:none; padding:0; margin:0}
    .list-block li{margin:8px 0;font-size: 14px;color: var(--muted-2);line-height:1.6}
    .footer-right{display:flex;flex-direction:column;gap: 24px;padding-top:6px}
    .newsletter h3, .contact h3{margin:0 0 10px 0;font-size:18px;font-weight:700}
    .newsletter p{margin:0 0 14px 0;color:var(--muted-2);font-size:14px;max-width:380px}
    .subscribe{display:flex; gap:12px; align-items:center}
    .subscribe input[type="email"]{flex:1; padding:12px 18px; border-radius:999px; border: none; outline:none;background: rgba(255,255,255,0.92);font-size:14px; color:#1a1a1a; box-shadow: 0 4px 18px rgba(0,0,0,0.12);min-width: 220px}
    .btn {padding:10px 18px; border-radius:999px; border:none; cursor:pointer; font-weight:700; white-space:nowrap;box-shadow: 0 6px 18px rgba(0,0,0,0.18)}
    .btn-primary{background: var(--btn-brown); color: white;}
    .btn-primary:hover{filter:brightness(.95)}
    .contact p{margin:6px 0;color:var(--muted-2);font-size:14px;line-height:1.5}
    .contact .bold{color:#ffffff;font-weight:700}
    .footer-bottom{margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.04);font-size:12px; color: rgba(255,255,255,0.85)}
    .lists .list-block{min-width:0}
    @media (max-width:900px){.footer-inner{grid-template-columns: 1fr}.lists{grid-template-columns:1fr 1fr}.newsletter p{max-width:100%}}
    @media (max-width:520px){.lists{grid-template-columns:1fr}.subscribe{flex-direction:column;align-items:stretch}.subscribe input{width:100%}.btn{width:100%}}