/* =========================================================
   QuestAsia Myanmar — brand stylesheet
   Palette drawn from the company logo: deep globe-blue + ring-red
   ========================================================= */

:root{
  --qa-navy:        #0b2e6b;
  --qa-navy-dark:   #071b42;
  --qa-navy-soft:   #eef2fa;
  --qa-red:         #e42313;
  --qa-red-dark:    #b81a0e;
  --qa-ink:         #182238;
  --qa-gray:        #5c6478;
  --qa-line:        #e3e7f0;
  --qa-bg:          #f6f7fb;
  --font-display:   'Poppins', sans-serif;
  --font-body:      'Inter', sans-serif;
}

html{ scroll-behavior:smooth; }

body{
  font-family: var(--font-body);
  color: var(--qa-ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,.brand-font{
  font-family: var(--font-display);
  color: var(--qa-navy);
  font-weight:600;
}

a{ text-decoration:none; }

.container-narrow{ max-width: 780px; }

.section{ padding: 5rem 0; }
.section-sm{ padding: 3rem 0; }
.bg-soft{ background: var(--qa-bg); }
.bg-navy-soft{ background: var(--qa-navy-soft); }

.eyebrow{
  display:inline-block;
  font-family: var(--font-display);
  font-size:.82rem;
  font-weight:600;
  color: var(--qa-red);
  letter-spacing:.02em;
  margin-bottom:.6rem;
}

.section-title{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom:.6rem; }
.section-lead{ color: var(--qa-gray); max-width: 620px; }

/* ---------- Buttons ---------- */
.btn-qa-primary{
  background: var(--qa-red);
  border-color: var(--qa-red);
  color:#fff;
  font-weight:600;
  padding:.7rem 1.6rem;
  border-radius:2px;
}
.btn-qa-primary:hover{ background: var(--qa-red-dark); border-color: var(--qa-red-dark); color:#fff; }

.btn-qa-outline{
  background:transparent;
  border:1.5px solid var(--qa-navy);
  color: var(--qa-navy);
  font-weight:600;
  padding:.65rem 1.5rem;
  border-radius:2px;
}
.btn-qa-outline:hover{ background: var(--qa-navy); color:#fff; }

.btn-qa-outline-light{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:600;
  padding:.65rem 1.5rem;
  border-radius:2px;
}
.btn-qa-outline-light:hover{ background:#fff; color: var(--qa-navy); border-color:#fff; }

/* ---------- Top info bar ---------- */
.topbar{
  background: var(--qa-navy-dark);
  color:#cfd9f2;
  font-size:.82rem;
  padding:.45rem 0;
}
.topbar a{ color:#cfd9f2; }
.topbar a:hover{ color:#fff; }
.topbar .sep{ color:#3a4a72; margin:0 .6rem; }

/* ---------- Navbar ---------- */
.navbar-qa{
  padding:.9rem 0;
  background:#fff;
  border-bottom:1px solid var(--qa-line);
}
.navbar-qa .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-family: var(--font-display);
  font-weight:700;
  color: var(--qa-navy);
  line-height:1.1;
}
.navbar-qa .navbar-brand .brand-mark{
  width:42px; height:42px; flex:0 0 auto;
}
.navbar-qa .navbar-brand small{
  display:block;
  font-family: var(--font-body);
  font-weight:500;
  font-size:.68rem;
  color: var(--qa-red);
  letter-spacing:.03em;
}
.navbar-qa .nav-link{
  font-weight:500;
  color: var(--qa-ink);
  margin:0 .35rem;
  padding:.5rem .3rem !important;
  border-bottom:2px solid transparent;
}
.navbar-qa .nav-link:hover,
.navbar-qa .nav-link.active{
  color: var(--qa-navy);
  border-bottom-color: var(--qa-red);
}
.navbar-qa .dropdown-menu{
  border:none;
  box-shadow:0 12px 30px rgba(11,46,107,.14);
  border-radius:4px;
  padding:.4rem;
}
.navbar-qa .dropdown-item{ border-radius:3px; padding:.55rem .9rem; font-size:.93rem; }
.navbar-qa .dropdown-item:hover{ background: var(--qa-navy-soft); color: var(--qa-navy); }
.nav-cta{
  background: var(--qa-red);
  color:#fff !important;
  border-radius:10px;
  padding:.55rem 1.1rem !important;
  margin-left:.4rem;
}
.nav-cta:hover{ background: var(--qa-red-dark); color:#fff !important; border-bottom-color:transparent !important; }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: var(--qa-navy);
  color:#fff;
  overflow:hidden;
  padding: 4.5rem 0 5.5rem;
}
.hero .ring{
  position:absolute;
  border-radius:50%;
  border: 22px solid rgba(228,35,19,.85);
  right:-160px;
  top:-120px;
  width:520px; height:520px;
}
.hero .ring::after{
  content:"";
  position:absolute; inset:22px;
  border-radius:50%;
  background: radial-gradient(circle at 32% 28%, #1a4590 0%, var(--qa-navy) 70%);
}
.hero .eyebrow{ color:#ffb3ab; }
.hero h1{ color:#fff; font-size: clamp(2rem, 4vw, 3rem); line-height:1.15; }
.hero h1 em{ color:#ff8d81; font-style:normal; }
.hero p.lead{ color:#c9d4ec; max-width:520px; }
.hero-stats{ margin-top:2.6rem; }
.hero-stats .num{ font-family:var(--font-display); font-size:1.9rem; font-weight:700; color:#fff; }
.hero-stats .lbl{ font-size:.8rem; color:#9fb0d6; }

/* ---------- Cards ---------- */
.qa-card{
  border:1px solid var(--qa-line);
  border-left:3px solid var(--qa-navy);
  background:#fff;
  padding:1.7rem 1.6rem;
  height:100%;
}
.qa-card .icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background: var(--qa-navy-soft);
  color: var(--qa-navy);
  border-radius:6px;
  margin-bottom:1rem;
  font-size:1.35rem;
}
.qa-card h5{ font-size:1.05rem; }
.qa-card p{ color: var(--qa-gray); font-size:.92rem; margin-bottom:0; }

.qa-card--red{ border-left-color: var(--qa-red); }
.qa-card--red .icon{ background:#fdeceb; color: var(--qa-red); }

/* ---------- Process / steps ---------- */
.step{ position:relative; padding-left:3.6rem; }
.step .step-num{
  position:absolute; left:0; top:0;
  width:2.6rem; height:2.6rem;
  border-radius:50%;
  background: var(--qa-navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700;
}
.step h5{ font-size:1.02rem; margin-bottom:.35rem; }
.step p{ color: var(--qa-gray); font-size:.9rem; }

/* ---------- Team ---------- */
.team-card{ text-align:center; }
.team-card .avatar{
  width:96px; height:96px; border-radius:50%;
  background: var(--qa-navy-soft);
  color: var(--qa-navy);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  margin:0 auto 1rem;
  border:3px solid #fff;
  box-shadow:0 0 0 2px var(--qa-line);
}
.team-card h6{ margin-bottom:.15rem; font-family:var(--font-display); }
.team-card .role{ color: var(--qa-red); font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.team-card .deg{ color: var(--qa-gray); font-size:.8rem; }

/* ---------- Activity card ---------- */
.activity-card{ border:1px solid var(--qa-line); background:#fff; height:100%; }
.activity-card .thumb{
  height:170px;
  background: linear-gradient(135deg, var(--qa-navy) 0%, #163a7d 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:2rem;
  overflow:hidden;
  position:relative;
}
.activity-card .thumb-gallery{
  display:flex; flex-wrap:wrap;
  gap:2px;
  max-height:220px;
  overflow-y:auto;
}
.activity-card .thumb-gallery img{
  flex:1 1 32%;
  height:110px;
  object-fit:cover;
  min-width:80px;
}
.activity-card .thumb-gallery img:only-child{ flex-basis:100%; height:170px; }
.activity-card .body{ padding:1.3rem 1.4rem; }
.activity-card .date{ font-size:.78rem; color: var(--qa-red); font-weight:600; }
.activity-card h5{ font-size:1rem; margin:.3rem 0 .5rem; }
.activity-card p{ color: var(--qa-gray); font-size:.88rem; }

/* ---------- Country tabs / jobs ---------- */
.country-tab{
  border:1px solid var(--qa-line);
  padding:.6rem 1.3rem;
  color: var(--qa-ink);
  font-weight:600;
  font-size:.92rem;
  background:#fff;
}
.country-tab.active,
.country-tab:hover{ background: var(--qa-navy); border-color: var(--qa-navy); color:#fff; }

.job-card{ border:1px solid var(--qa-line); background:#fff; padding:1.4rem; height:100%; }
.job-card .thumb{ height:120px; margin:-1.4rem -1.4rem 1rem; overflow:hidden; }
.job-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.job-card .flag{ font-size:.76rem; color: var(--qa-red); font-weight:700; letter-spacing:.03em; margin-bottom:.5rem; }
.job-card h6{ font-size:1rem; line-height:1.4; min-height:2.8em; }

/* ---------- Forms ---------- */
.qa-form label{ font-weight:600; font-size:.9rem; color: var(--qa-ink); }
.qa-form .form-control, .qa-form .form-select{
  border-radius:2px;
  border-color: var(--qa-line);
  padding:.6rem .8rem;
}
.qa-form .form-control:focus, .qa-form .form-select:focus{
  border-color: var(--qa-navy);
  box-shadow:0 0 0 .2rem rgba(11,46,107,.12);
}

/* ---------- Contact info blocks ---------- */
.info-line{ display:flex; gap:.9rem; margin-bottom:1.4rem; }
.info-line .ic{
  width:42px; height:42px; flex:0 0 auto;
  background: var(--qa-navy-soft); color: var(--qa-navy);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Footer ---------- */
.footer-qa{ background: var(--qa-navy-dark); color:#aebbdd; padding-top:3.5rem; }
.footer-qa h6{ color:#fff; font-family:var(--font-display); font-size:.95rem; margin-bottom:1.1rem; }
.footer-qa a{ color:#aebbdd; }
.footer-qa a:hover{ color:#fff; }
.footer-qa ul{ list-style:none; padding:0; margin:0; }
.footer-qa li{ margin-bottom:.6rem; font-size:.9rem; }
.footer-bottom{ border-top:1px solid #16244a; margin-top:2.5rem; padding:1.1rem 0; font-size:.82rem; color:#7d8cb4; }

/* ---------- Page header (inner pages) ---------- */
.page-head{
  background: var(--qa-navy);
  color:#fff;
  padding: 2.6rem 0;
}
.page-head .crumb{ color:#9fb0d6; font-size:.85rem; }
.page-head .crumb a{ color:#c9d4ec; }
.page-head h1{ color:#fff; font-size:1.9rem; margin-bottom:.3rem; }

/* ---------- Alerts ---------- */
.alert-qa-success{ background:#e8f6ee; border:1px solid #b7e3c6; color:#1e6b3c; }
.alert-qa-error{ background:#fdecea; border:1px solid #f4b6b0; color:#a3271a; }

@media (max-width: 767px){
  .hero .ring{ width:320px; height:320px; right:-140px; top:-90px; border-width:16px; }
}