/* ==========================================================================
   Data Quora Insights - Market Research Company
   Custom styles layered on top of the Exsit template (main.css)
   ========================================================================== */

:root{
  --brand-navy:#10294B;
  --brand-blue:#1B4B82;
  --brand-teal:#0E7C86;
  --brand-gold:#E8A33D;
  --brand-ink:#1E2A38;
  --brand-soft:#F3F7FB;
}

body{
  font-family:"DM Sans",Arial,sans-serif;
}

/* ---------- Text logo ---------- */
.text-logo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:"Sora",Arial,sans-serif;
  font-weight:700;
  line-height:1.15;
  color:#10294B;
  text-decoration:none;
  white-space:nowrap;
}
.text-logo .logo-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg,#0E7C86,#1B4B82);
  color:#fff;
  flex:none;
}
.text-logo .logo-mark svg{width:22px;height:22px}
.text-logo .logo-name{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.text-logo .logo-name .t1{font-size:20px;letter-spacing:-.2px}
.text-logo .logo-name .t2{font-size:11px;font-weight:600;letter-spacing:2.5px;color:#0E7C86;text-transform:uppercase}
.text-logo:hover{color:#10294B}

.navbar-brand{padding-top:12px;padding-bottom:12px}

/* ---------- Header over dark hero (home) ---------- */
.header-wrapper.nav-on-dark .text-logo .logo-name .t1{color:#fff}
.header-wrapper.nav-on-dark .text-logo .logo-name .t2{color:#8FD9D2}
.header-wrapper.nav-on-dark:not(.scroll-header) .navbar-nav > .nav-item > .nav-link{color:#fff!important}
.header-wrapper.nav-on-dark:not(.scroll-header) .navbar-nav > .nav-item > .nav-link:hover{color:#B8FB04!important}
.header-wrapper.nav-on-dark:not(.scroll-header) .mobile-menu-trigger{color:#fff}
.header-wrapper.nav-on-dark.scroll-header .text-logo .logo-name .t1{color:#10294B}
.header-wrapper.nav-on-dark.scroll-header .text-logo .logo-name .t2{color:#0E7C86}
.header-wrapper.nav-on-dark.scroll-header .navbar-nav > .nav-item > .nav-link{color:#212529!important}
.header-wrapper.nav-on-dark.scroll-header .mobile-menu-trigger{color:#212529!important}

/* footer version (on dark bg) */
.footer-logo{
  color:#fff;
}
.footer-logo .logo-name .t1{color:#fff}
.footer-logo:hover{color:#fff}

/* ---------- Hero (home) ---------- */
.hero-grad{
  background:linear-gradient(135deg,#0E2238 0%,#12355C 52%,#0E5E66 100%);
}
.hero-grad .hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 85% 15%,rgba(14,124,134,.35),transparent 60%),
    radial-gradient(700px 420px at 8% 90%,rgba(184,251,4,.18),transparent 60%);
  pointer-events:none;
}

/* ---------- Inner page hero / banner ---------- */
.inner-hero{
  background:linear-gradient(160deg,#EAF2FB 0%,#F7FBFF 55%,#E4F5F3 100%);
  position:relative;
  overflow:hidden;
}
.inner-hero .magic-dots{
  position:absolute;right:-40px;top:-40px;width:260px;opacity:.7;pointer-events:none;
}
.inner-hero .magic-dots.left{left:-40px;top:auto;bottom:-60px;transform:scaleX(-1)}

/* ---------- Eyebrow pill ---------- */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border-radius:100px;
  background:#fff;
  border:1px solid #dce6f0;
  box-shadow:0 6px 20px -12px rgba(16,41,75,.25);
  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#10294B;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#0E7C86;flex:none}

/* ---------- Service / feature cards ---------- */
.card-hover{
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease,border-color .3s ease;
}
.card-hover:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 50px -30px rgba(16,41,75,.35);
  border-color:#bcd3e8;
}
.svc-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:18px;flex:none;
  background:linear-gradient(135deg,#0E7C86,#1B4B82);
  color:#fff;
}
.svc-badge svg{width:30px;height:30px}
.svc-badge.light{background:#EAF2FB;color:#10294B}
.svc-badge.gold{background:linear-gradient(135deg,#E8A33D,#c97a1e);color:#fff}

/* ---------- Stat numbers ---------- */
.stat-num{
  font-family:"Sora",Arial,sans-serif;
  font-weight:700;
  color:#1B4B82;
  line-height:1;
  letter-spacing:-1px;
}

/* ---------- Checked list ---------- */
ul.tick-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
ul.tick-list li{display:flex;gap:12px;align-items:flex-start;color:#495057;font-weight:500}
ul.tick-list li .tick{
  flex:none;margin-top:3px;width:22px;height:22px;border-radius:50%;
  background:#E4F5F3;color:#0E7C86;
  display:inline-flex;align-items:center;justify-content:center;
}
ul.tick-list li .tick svg{width:12px;height:12px}

/* ---------- Process steps ---------- */
.process-step{position:relative}
.process-step .step-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:50%;font-family:"Sora",Arial,sans-serif;
  font-weight:700;font-size:17px;color:#fff;
  background:linear-gradient(135deg,#0E7C86,#1B4B82);
  box-shadow:0 14px 26px -14px rgba(16,41,75,.5);
}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg,#10294B 0%,#12355C 45%,#0E5E66 100%);
  position:relative;overflow:hidden;
}

/* ---------- Clearance for the absolutely-positioned header ---------- */
/* Bootstrap's .pt-5/.py-5 (!important) would override the template's
   .header-top, letting the header overlap the first section. Re-assert it. */
.header-top{--ht-top:96px;padding-top:var(--ht-top)!important}
@media (max-width:991.98px){.header-top{--ht-top:74px}}

/* ---------- Tables force dark header on light pages ---------- */
.table .thead-dark th{
  background:#10294B;color:#fff;border:none;font-weight:600;
}

/* ---------- Contact card icons ---------- */
.contact-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:16px;flex:none;
  background:linear-gradient(135deg,#0E7C86,#1B4B82);color:#fff;
}
.contact-ico svg{width:26px;height:26px}

/* ---------- Job role card ---------- */
.role-card{
  border:1px solid #dce6f0;border-radius:16px;padding:24px;background:#fff;
  transition:.3s;
}
.role-card:hover{
  border-color:#bcd3e8;box-shadow:0 24px 40px -28px rgba(16,41,75,.3);
}

/* ---------- Misc ---------- */
.badge-soft{
  display:inline-flex;align-items:center;padding:5px 13px;border-radius:100px;
  background:#EAF2FB;color:#10294B;font-size:13px;font-weight:600;
}
.rounded-16{border-radius:18px}
.rounded-22{border-radius:22px}
.lh-32{line-height:1.75}
.fs-15{font-size:15px}
.fs-17{font-size:17px}
.fs-18{font-size:18px}
.fs-21{font-size:21px}
.top-n-22{top:-22px}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#1B4B82;text-decoration:none}
.link-more:hover{color:#0E7C86}
.link-more svg{width:16px;height:16px;transition:transform .3s}
.link-more:hover svg{transform:translateX(4px)}