:root{
  --brand:#2563eb; --brand-600:#1d4ed8; --text:#0f172a; --muted:#64748b;
  --line:#e5e7eb; --surface:#ffffff; --shadow:0 12px 28px rgba(2,6,23,.10);
  --radius:16px;
}

/* ===== CONTACT PAGE (SCOPED) ===== */
.contact-page .contact-hero{
  background:linear-gradient(180deg,#0b3a78,#0a2f63);
   border:1px solid var(--line);
  padding:56px 0 38px; margin-top:12px; border-radius:12px;
}
.contact-page .container{ width:min(1100px,92%); margin-inline:auto; }
.contact-page .breadcrumb-mini{ font-size:.9rem; color:var(--muted); margin-bottom:.35rem; }
.contact-page .breadcrumb-mini a{ color:var(--brand); text-decoration:none; }
.contact-page .contact-hero h1{ font-weight:700; margin:.2rem 0 .4rem; color: #ffd24d; 
     letter-spacing: 0.1rem; 
}
.contact-page .contact-hero .sub{ color:#fff; max-width:800px; letter-spacing: 0.1rem; }

.contact-page .contact-wrap{ padding:40px 0 70px; }
.contact-page .grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:24px; }

.contact-page .card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px;
}

/* Info */
.contact-page .info h3{ margin:0 0 .6rem; font-weight:800; }
.contact-page .info-list{ list-style:none; padding:0; margin:0; }
.contact-page .info-list li{ display:flex; gap:.6rem; align-items:flex-start; color:#475569; margin:.5rem 0; }
.contact-page .dot{ width:10px; height:10px; border-radius:50%; background:var(--brand); margin-top:.45rem; }
.contact-page .map{ border-radius:12px; overflow:hidden; margin-top:12px; }

/* Form */
.contact-page label{ display:block; font-weight:600; margin:.25rem 0 .35rem; }
.contact-page .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-page .row-1{ display:grid; gap:14px; }

.contact-page input, .contact-page textarea{
  width:100%; border:1px solid #dfe3ea; border-radius:12px;
  padding:10px 12px; font:inherit; background:#fff; outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-page input:focus, .contact-page textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 .18rem rgba(37,99,235,.15);
}

/* Button */
.contact-page .btn-primary{
  display:inline-block; background-color: #0a2f63;
  color: #fff;
  font-weight: 600; border:none;
  font-weight:700; padding:12px 24px; border-radius:999px; cursor:pointer;
  box-shadow:0 10px 22px rgba(37,99,235,.28);
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
  margin-top:8px;
}
.contact-page .btn-primary:hover{
   background-color: #2980B9;
   color: #fff;
    transform:translateY(-2px); box-shadow:0 14px 28px rgba(37,99,235,.36);
}
.contact-page .note{ color:var(--muted); font-size:.9rem; margin-top:8px; }

/* Toast (not scoped to container so it can float over page) */
.toast{
  position:fixed; right:18px; bottom:18px; background:#16a34a; color:#fff;
  padding:12px 16px; border-radius:12px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* Pop-in animation */
.contact-page .pop{ opacity:0; transform: translateY(28px) scale(.98); }
.contact-page .in-view{
  opacity:1; transform: translateY(0) scale(1);
  transition: transform .9s cubic-bezier(.25,.8,.25,1), opacity .9s cubic-bezier(.25,.8,.25,1);
}

/* Responsive */
@media (max-width: 880px){
  .contact-page .grid{ grid-template-columns:1fr; }
}