/* =====================================================
   Contact Page – redesigned  v3
===================================================== */

/* ---- Full-width hero (breaks out of #page container) ---- */
.contact-hero-wrap {
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width:  100vw;
  margin-top: 0px;
}
.contact-hero {
  position: relative;
  width: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, #0d1b35 0%, #1a3a6b 60%, #2563a8 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.contact-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: .38;
}
.contact-hero-overlay {
  position: absolute;
  inset: 0;
  background: none;
}
.contact-hero-body {
  position: relative;
  z-index: 2;
  padding: 58px 0 52px;
  max-width: 600px;
}
.contact-hero-body h1 {
  font-size: 38px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.4px;
  margin: 0 0 14px;
  line-height: 1.25;
}
.contact-hero-body h1 .accent { color: #60a5fa; }
.contact-hero-body p {
  font-size: 15.5px;
  color: rgba(255,255,255,.82);
  margin: 0;
  line-height: 1.7;
  max-width: 500px;
}
.contact-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.22);
  color: #93c5fd;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

/* ---- Cards section ---- */
.contact-cards-section {
  background: #f8fafd;
  padding: 52px 0 44px;
  margin-left:  calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}
.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.contact-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 22px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  transition: box-shadow .22s, transform .22s;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card:hover {
  box-shadow: 0 8px 30px rgba(26,58,107,.13);
  transform: translateY(-3px);
}
.contact-card-icon {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 19px; flex-shrink: 0;
}
.cc-teal   { background: linear-gradient(135deg,#0d7e6a,#10b981); }
.cc-red    { background: linear-gradient(135deg,#b91c1c,#e53e3e); }
.cc-amber  { background: linear-gradient(135deg,#b45309,#f59e0b); }
.contact-card h3 {
  font-size: 15px; font-weight: 700; color: #1e293b; margin: 0; line-height: 1.3;
}
.contact-card p {
  font-size: 13px; color: #64748b; margin: 0; line-height: 1.65; flex: 1;
}
.contact-card a.cc-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fff !important; border: none;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13.5px; font-weight: 700;
  text-decoration: none; cursor: pointer;
  transition: opacity .18s, transform .1s;
  margin-top: 6px; text-align: center;
}
.cc-btn-navy  { background: #1a3a6b; }
.cc-btn-navy:hover  { opacity:.88; transform:translateY(-1px); color:#fff !important; }
.cc-btn-red   { background: #e53e3e; }
.cc-btn-red:hover   { opacity:.88; transform:translateY(-1px); color:#fff !important; }
.contact-card a.cc-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: #1a3a6b; font-size: 14px; font-weight: 700;
  text-decoration: none; margin-top: 4px;
}
.contact-card a.cc-link:hover { color:#2563a8; text-decoration:underline; }

/* ---- Info row ---- */
.contact-info-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 26px 28px;
  display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.contact-info-item { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:180px; }
.cii-icon {
  width:38px; height:38px; border-radius:10px;
  background:#f1f5f9; display:flex; align-items:center; justify-content:center;
  color:#1a3a6b; font-size:16px; flex-shrink:0;
}
.cii-text strong { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:#94a3b8; margin-bottom:3px; }
.cii-text span   { font-size:14px; font-weight:600; color:#1e293b; line-height:1.5; }

/* ---- Notice ---- */
.contact-notice {
  background:#eff6ff; border:1px solid #bfdbfe; border-left:4px solid #1a3a6b;
  border-radius:10px; padding:15px 20px;
  display:flex; gap:12px; align-items:flex-start; margin-top:24px;
}
.contact-notice i { color:#1a3a6b; font-size:17px; margin-top:2px; flex-shrink:0; }
.contact-notice p { font-size:13.5px; color:#1e3a5f; margin:0; line-height:1.65; }

/* ---- Section heading ---- */
.contact-sec-head {
  font-size:21px; font-weight:800; color:#0f172a; margin:0 0 22px;
  display:flex; align-items:center; gap:10px;
}
.contact-sec-head::before {
  content:''; display:inline-block; width:5px; height:21px;
  background:linear-gradient(180deg,#1a3a6b,#3b82f6); border-radius:3px; flex-shrink:0;
}

/* ---- Responsive ---- */
@media (max-width:991px){ .contact-card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:767px){
  .contact-hero-body h1 { font-size:26px; }
  .contact-hero-body p  { font-size:14px; }
  .contact-card-grid    { grid-template-columns:1fr; }
  .contact-info-row     { padding:20px; gap:20px; }
  .contact-hero-body    { padding:40px 0 36px; }
}