:root {
  --navy: #071a2e;
  --navy-soft: #0d2a43;
  --cyan: #008db8;
  --cyan-bright: #00a9d6;
  --paper: #f4f9fc;
  --muted: #5d707d;
  --line: #d9e5ec;
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  color: var(--navy);
  background: radial-gradient(circle at 88% 14%, rgba(0,169,214,.18), transparent 30rem), linear-gradient(135deg, #f8fbfd, #edf6fa);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.navbar {
  min-height: 106px;
  padding: 14px 0;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(7,26,46,.08);
  box-shadow: 0 8px 30px rgba(7,26,46,.04);
}
.navbar-brand img { width: 205px; height: auto; }
.navbar .navbar-nav .nav-link { padding: .72rem .9rem !important; color: var(--navy) !important; font-weight: 700 !important; border-radius: 999px; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .active > .nav-link { color: var(--cyan) !important; background: rgba(0,169,214,.08); }
.dropdown-menu { padding: .65rem; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 45px rgba(7,26,46,.12); }
.dropdown-item { padding: .65rem .8rem; color: var(--navy); border-radius: 10px; }
.dropdown-item:hover { color: var(--cyan); background: #edf8fb; }
.dropdown-divider { margin: .25rem 0; border-color: #edf2f5; }

.contact-page { padding: 76px 15px 90px; }
.contact-shell { max-width: 1140px; }
.contact-intro { padding: 30px 55px 55px 5px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: var(--cyan); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 34px; height: 3px; background: var(--cyan); }
.contact-intro h1 { margin: 0 0 22px; font-size: clamp(2.8rem, 5vw, 4.7rem); line-height: .98; font-weight: 800; letter-spacing: -.055em; }
.contact-intro h1 span { color: var(--cyan); }
.contact-intro > p { margin: 0; color: var(--muted); font-size: 1.12rem; line-height: 1.75; }
.contact-details { display: grid; gap: 12px; margin-top: 30px; }
.contact-details > div { display: flex; align-items: center; gap: 12px; color: var(--navy-soft); font-weight: 650; }
.contact-details i { display: grid; width: 38px; height: 38px; place-items: center; color: var(--cyan); background: #fff; border: 1px solid var(--line); border-radius: 12px; }

.contact-card { overflow: hidden; border: 1px solid rgba(7,26,46,.08) !important; border-radius: 26px !important; background: rgba(255,255,255,.97); box-shadow: 0 26px 70px rgba(7,26,46,.14); }
.contact-card .card-header { border: 0; background: transparent; }
.contact-card-title { padding: 28px 30px 2px; color: var(--navy); text-align: left; background: #fff; }
.contact-card-title span { color: var(--cyan); font-size: .75rem; font-weight: 800; letter-spacing: .16em; }
.contact-card-title h3 { margin: 6px 0 5px; font-size: 1.8rem; font-weight: 800; }
.contact-card-title p { margin: 0; color: var(--muted); }
.contact-card .card-body { padding: 26px 30px 32px !important; }
.contact-card .input-group-text { min-width: 50px; justify-content: center; color: var(--cyan) !important; border-color: var(--line); background: var(--paper); }
.contact-card .form-control, #txtInput, #btnrefresh { min-height: 54px; color: var(--navy); border: 1px solid var(--line); background: #f8fbfd; box-shadow: none; }
.contact-card .form-control:focus, #txtInput:focus { z-index: 3; border-color: var(--cyan-bright); background: #fff; box-shadow: 0 0 0 4px rgba(0,169,214,.12); }
.contact-card textarea.form-control { min-height: 130px; padding-top: 15px; resize: vertical; }
.contact-card .input-group { flex-wrap: nowrap; }
.captcha-group { margin-top: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper); }
.captcha-group .input-group { display: grid; grid-template-columns: 62px minmax(155px, 1.4fr) minmax(105px, .85fr) 125px; width: 100%; }
.captcha-group .input-group-prepend { display: block; margin: 0; }
.captcha-group .input-group-text { width: 100%; height: 100%; border-radius: .25rem 0 0 .25rem; }
#txtCaptcha { width: 100%; min-width: 0; padding: 0 4px; font-family: "Arial Narrow", Arial, sans-serif; font-size: .78rem; font-weight: 800; letter-spacing: 0; word-spacing: 0; opacity: 1; }
#txtInput { width: 100%; min-width: 0; padding: 0 12px; }
#btnrefresh { padding: 0 14px; color: var(--cyan); font-weight: 750; cursor: pointer; }
#btnrefresh:hover { color: #fff; border-color: var(--cyan); background: var(--cyan); }
.send-button { width: 100%; min-height: 56px; color: #fff !important; font-size: 1rem; font-weight: 800; border: 0; border-radius: 13px; background: var(--navy); box-shadow: 0 14px 28px rgba(7,26,46,.18); transition: .2s ease; }
.send-button:hover { transform: translateY(-2px); background: var(--cyan); box-shadow: 0 16px 30px rgba(0,141,184,.22); }

@media (max-width: 991.98px) {
  .navbar { min-height: auto; }
  .navbar-collapse { padding-top: 16px; }
  .contact-page { padding-top: 38px; }
  .contact-intro { padding: 20px 5px 36px; }
}
@media (max-width: 575.98px) {
  .navbar-brand img { width: 165px; }
  .contact-card-title { padding: 25px 22px 2px; }
  .contact-card .card-body { padding: 22px !important; }
  .captcha-group .input-group { display: grid; grid-template-columns: 50px 1fr; }
  #txtCaptcha, #txtInput, #btnrefresh { width: 100%; }
  #txtInput { grid-column: 1 / -1; }
  #btnrefresh { grid-column: 1 / -1; }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  .captcha-group .input-group { grid-template-columns: 62px minmax(145px, 1.25fr) minmax(105px, .85fr); }
  #btnrefresh { grid-column: 1 / -1; width: 100%; }
}