/* ============================================================
   COLOR SYSTEM
   Odd  sections → white  (#FFFFFF) — light bg, dark text
   Even sections → navy   (#1B2B4B) — dark bg, light text
   Header / Footer → #1B2B4B (navy)
   Primary accent  → #2563EB (blue)
   Warm accent     → #F97316 (orange)
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

:root {
  --navy: #86a8a4;
  --navy2: #275d81;
  --navy3: #275d81;
  --white: #FFFFFF;
  --offwhite: #F8FAFF;
  --blue: #e6c120;
  --blue2: #1d4ed8;
  --bluelt: #EFF4FF;
  --bluemid: #DBEAFE;
  --orange: #e6c120;
  --orangelt: #FFF7ED;
  --green: #10B981;
  --purple: #7C3AED;
  --pink: #EC4899;
  --yellow: #e6c120;
  --teal: #0D9488;
  --txt-dark: #0F172A;
  --txt-body: #374151;
  --txt-muted: #6B7280;
  --txt-light: #9CA3AF;
  --txt-w1: #FFFFFF;
  --txt-w2: rgb(255, 255, 255);
  --txt-w3: rgb(255, 255, 255);
  --bdr-light: #9cb5e7;
  --bdr-dark: rgba(158, 187, 221, 0.705);
  --sh-sm: 0 1px 4px rgba(0, 0, 0, .06);
  --sh: 0 4px 16px rgba(0, 0, 0, .08);
  --sh-md: 0 8px 32px rgba(0, 0, 0, .12);
  --sh-lg: 0 20px 60px rgba(0, 0, 0, .14);
  --sh-blue: 0 6px 24px rgba(37, 99, 235, .3);
  --r: 16px;
  --rsm: 10px;
  --tr: all .28s cubic-bezier(.4, 0, .2, 1);
  --font: 'Inter', sans-serif;
  --xs: .75rem;
  --sm: .875rem;
  --base: 1rem;
  --lg: 1.125rem;
  --xl: 1.25rem;
  --2xl: 1.5rem;
  --3xl: 2rem;
  --hero: clamp(2.2rem, 4.5vw, 3.2rem);
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--txt-body);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

a {
  text-decoration: none;
  color: inherit
}

ul {
  list-style: none
}

img {
  max-width: 100%;
  display: block
}

::-webkit-scrollbar {
  width: 5px
}

::-webkit-scrollbar-track {
  background: #f1f5f9
}

::-webkit-scrollbar-thumb {
  background: var(--blue);
  border-radius: 10px
}

/* ── LAYOUT ── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px
}

.sp {
  padding: 50px 0
}

/* ── ALTERNATING BG SYSTEM ──
   .bg-w = white section  (1,3,5,7,9...)
   .bg-n = navy section   (2,4,6,8...)        */
.bg-w {
  background: var(--white)
}

.bg-n {
  background: var(--navy2)
}

/* ── SHARED TAG BADGE ── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

.tag-b {
  background: var(--bluelt);
  border: 1px solid rgba(37, 99, 235, .2);
  color: var(--blue)
}

.tag-b::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0
}

.tag-w {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .9)
}

.tag-w::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0
}

/* ── HEADINGS ── */
.stit {
  font-size: var(--3xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px
}

.stit-d {
  color: var(--txt-dark)
}

.stit-w {
  color: var(--txt-w1)
}

.ssub {
  font-size: var(--lg);
  line-height: 1.75;
  max-width: 560px
}

.ssub-d {
  color: var(--txt-muted)
}

.ssub-w {
  color: var(--txt-w2)
}

.body-d {
  font-size: var(--base);
  color: var(--txt-body);
  line-height: 1.8
}

.body-w {
  font-size: var(--base);
  color: var(--txt-w2);
  line-height: 1.8
}

.shdr {
  text-align: center;
  margin-bottom: 56px
}

.shdr .ssub {
  margin: 0 auto
}

.hl-b {
  color: var(--blue)
}

.hl-o {
  color: var(--orange)
}

/* ── BUTTONS ── */
.bp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blue);
  color: #fff;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--sm);
  font-family: var(--font);
  border: none;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: var(--sh-blue)
}

.bp:hover {
  background:#039c83;;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(37, 99, 235, .38)
}

.bo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  padding: 13px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--sm);
  border: none;
  cursor: pointer;
  transition: var(--tr);
  box-shadow: 0 4px 16px rgba(249, 115, 22, .3)
}

.bo:hover {
  background: #ea6c0a;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(249, 115, 22, .42)
}

.bgl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: #fff;
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--sm);
  border: 2px solid rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: var(--tr)
}

.bgl:hover {
  background: rgba(255, 255, 255, .1);
  border-color: #fff;
  transform: translateY(-2px)
}

.bnav {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 9px 22px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--xs);
  transition: var(--tr);
  box-shadow: 0 3px 12px rgba(240, 238, 237, 0.795)
}

.bnav:hover {
  background: #24b101;
  transform: translateY(-2px)
}

.bcard {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bluelt);
  color: var(--blue);
  padding: 9px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--xs);
  border: 1px solid rgba(37, 99, 235, .2);
  transition: var(--tr);
  margin-top: auto
}

.bcard:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: var(--sh-blue)
}

.bcard-w {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  padding: 9px 18px;
  border-radius: 50px;
  font-weight: 600;
  font-size: var(--xs);
  border: 1px solid rgba(255, 255, 255, .2);
  transition: var(--tr);
  margin-top: auto
}

.card-n:hover .bcard-w {
  background: var(--navy2);
  border-color: var(--orange);
}

.bcard-w:hover {
  background: var(--navy2);
  border-color: var(--orange);
  transform: translateY(-2px)
}

.bp.fw, .bo.fw {
  width: 100%;
  justify-content: center
}

/* ── NAVBAR (navy) ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(0, 0, 0, .2);
  transition: var(--tr)
}

.nav.sc {
  box-shadow: 0 4px 28px rgba(0, 0, 0, .3)
}

.navi {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  height: 68px;
  gap: 24px
}

.logo {
  max-width: 200px;
  max-height: 50px;
}

.lt {
  color: #fff
}

.lx {
  color: var(--orange)
}

.nlinks {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1
}

.nlinks li a {
  font-size: var(--sm);
  font-weight: 500;
  color: var(--txt-w2);
  padding: 6px 11px;
  border-radius: 8px;
  transition: var(--tr)
}

.nlinks li a:hover, .nlinks li a.act {
  color: #095972;
  background: rgba(255, 255, 255, 0.808)
}

.ham {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto
}

.ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--tr)
}

/* ── HERO (navy) ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--navy3);
  position: relative;
  overflow: hidden;
  padding: 110px 0 80px
}

.hshapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none
}

.hs {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: hfl 10s ease-in-out infinite
}

.hs1 {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(37, 99, 235, .35), transparent 70%);
  top: -150px;
  right: -80px;
  opacity: .6;
  animation-delay: 0s
}

.hs2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(249, 115, 22, .2), transparent 70%);
  bottom: -80px;
  left: -60px;
  opacity: .5;
  animation-delay: 3.5s
}

.hs3 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(124, 58, 237, .18), transparent 70%);
  top: 40%;
  left: 35%;
  opacity: .45;
  animation-delay: 6s
}

@keyframes hfl {
  0%, 100% {
    transform: translate(0, 0)
  }

  40% {
    transform: translate(20px, -18px)
  }

  70% {
    transform: translate(-14px, 18px)
  }
}

.hgrid {
  position: absolute;
  inset: 0;
  
  background-size: 52px 52px;
  pointer-events: none
}


.hinner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;
}

/* Hero Left */
.hbadge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgb(10, 125, 129);
  border: 1px solid rgba(249, 115, 22, .35);
  color: #e7eb04;
  padding: 7px 18px;
  border-radius: 100px;
  font-size: var(--xs);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: .06em;
  animation: fup .7s ease both
}

.hero-right{
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}

.bdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
  animation: pd 2s ease infinite
}

@keyframes pd {
  0%, 100% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.7);
    opacity: .4
  }
}

.htit {
  font-size: var(--hero);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 20px;
  letter-spacing: -.03em;
  animation: fup .8s ease .1s both
}

.htit .hhl {
  background: linear-gradient(120deg, #60A5FA, #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text
}

/* Typing text */
.htyping {
  font-size: var(--lg);
  margin-bottom: 20px;
  animation: fup .8s ease .2s both;
  height: 32px
}

.htyping-prefix {
  color: var(--txt-w2)
}

.htyping-text {
  color: var(--orange);
  font-weight: 600;
  border-right: 2px solid var(--orange);
  padding-right: 3px;
  animation: blink .75s step-end infinite
}

@keyframes blink {
  0%, 100% {
    border-color: var(--orange)
  }

  50% {
    border-color: transparent
  }
}

.hsub {
  font-size: var(--base);
  color: var(--txt-w2);
  line-height: 1.8;
  margin-bottom: 18px;
  animation: fup .8s ease .3s both
}

.hbelief {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--txt-w2);
  padding: 14px 18px;
  border-radius: 12px;
  font-size: var(--sm);
  margin-bottom: 34px;
  animation: fup .8s ease .4s both;
  line-height: 1.65
}

.hbelief strong {
  color: #fff;
  font-weight: 600
}

.hbtns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 42px;
  animation: fup .8s ease .5s both
}

.jbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 100px;
  padding: 5px;
  width: fit-content;
  animation: fup .8s ease .6s both
}

.js {
  padding: 8px 16px;
  border-radius: 100px;
  font-size: var(--xs);
  font-weight: 600;
  color: var(--txt-w3);
  white-space: nowrap;
  transition: var(--tr)
}

.js.ac {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 3px 14px rgba(249, 115, 22, .42)
}

.jar {
  color: rgba(255, 255, 255, .18);
  font-size: .62rem;
  padding: 0 2px
}

/* Hero Right */
.hcard {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r);
  padding: 32px;
  backdrop-filter: blur(14px);
  animation: fup .8s ease .15s both
}

.hclabel {
  font-size: var(--xs);
  font-weight: 700;
  color: var(--txt-w3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 8px
}

.hclabel::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--orange);
  border-radius: 2px
}

.sg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 22px
}

.sb {
  background: rgba(209, 237, 241, 0.178);
  border: 1px solid rgba(255, 255, 255, 0.959);
  border-radius: var(--orange);
  padding: 20px;
  text-align: center
}

.sn {
  display: block;
  font-size: var(--2xl);
  font-weight: 900;
  color: var(--orange);
  line-height: 1.1;
  margin-bottom: 3px
}

.sn.white {
  color: #fff;
  font-size: var(--xl)
}

.sl {
  display: block;
  font-size: var(--xs);
  color: var(--txt-w3);
  font-weight: 600
}

.htags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.htag {
  background: rgba(255, 255, 255, .09);
  color: rgb(255, 255, 255);
  padding: 5px 11px;
  border-radius: 100px;
  font-size: var(--xs);
  font-weight: 500
}

@keyframes fup {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* ── CARDS for WHITE sections ── */
.card-w {
  background: var(--white);
  border: 1px solid var(--bdr-light);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--sh-sm);
  transition: var(--tr)
}

.card-w:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(37, 99, 235, .18)
}

/* ── CARDS for NAVY sections ── */
.card-n {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .2);
  
  border-radius: var(--r);
  padding: 28px;
  backdrop-filter: blur(8px);
  transition: var(--tr)
}

.card-n:hover {
  transform: translateY(-6px);
  background: #e6c120;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
}

/* ── ABOUT (white) ── */
.agrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start
}

.atags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px
}

.atag {
  background: var(--navy2);
  color: var(--blue);
  border: 1px solid rgba(37, 99, 235, .2);
  padding: 6px 13px;
  border-radius: 100px;
  font-size: var(--xs);
  font-weight: 600;
  transition: var(--tr)
}

.atag:hover {
  background: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  cursor: pointer;
}

.vm-cards {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.vm {
  background: var(--white);
  border: 1px solid var(--bdr-light);
  border-radius: var(--r);
  padding: 26px;
  box-shadow: var(--sh-sm);
  transition: var(--tr);
  position: relative;
  overflow: hidden
}

.vm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px
}

.vm.vis::before {
  background: linear-gradient(90deg, var(--blue), #60A5FA)
}

.vm.mis::before {
  background: linear-gradient(90deg, var(--orange), var(--yellow))
}

.vm:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-md);
  border-color: rgba(37, 99, 235, .18)
}

.vmico {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 0px;
  font-size: 1.15rem
}

.vis .vmico {
  background: var(--bluelt);
  color: var(--navy2);
  font-size: 2rem;
}

.mis .vmico {
  background: var(--orangelt);
  color: var(--navy2);
  font-size: 2rem;
}

.vm h3 {
  font-size: var(--xl);
  font-weight: 700;
  color: var(--txt-dark);
  margin-bottom: 10px
}

.vm p, .vm li {
  font-size: var(--sm);
  color: var(--txt-body);
  line-height: 1.75
}

.vm li {
  padding: 4px 0 4px 20px;
  position: relative
}

.vm li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700
}

/* ── PROGRAMS (navy) ── */
.pg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.pc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden
}

.pc.ft {
  border-color: rgba(249, 115, 22, .4) !important;
  background: rgba(249, 115, 22, .06) !important
}

.fbadge {
  position: absolute;
  top: -1px;
  right: 18px;
  background: var(--orange);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  padding: 5px 13px;
  border-radius: 0 0 10px 10px;
  letter-spacing: .07em;
  text-transform: uppercase
}

.pico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: rgba(255, 255, 255, .1);
}

.p1 .pico {
  background: rgba(253, 253, 255, 0.2);
  color: #e6c120;
}

.n-card:hover .pico {
  background: #e6c120;
  color: var(--navy3);
}
.p2 .pico {
  background: rgba(16, 185, 129, .2);
  color: #34D399;
}

.p3 .pico {
  background: rgba(124, 58, 237, .2);
  color: #A78BFA;
}

.p4 .pico {
  background: rgba(249, 115, 22, .2);
  color: #FDBA74;
}

.p5 .pico {
  background: rgba(236, 72, 153, .2);
  color: #F9A8D4;
}

.p6 .pico {
  background: rgba(245, 158, 11, .2);
  color: #FCD34D;
}

.pc h3 {
  font-size: var(--base);
  font-weight: 700;
  color: #fff;
}

.pc>p {
  font-size: var(--sm);
  color: var(--txt-w2);
  flex: 1;
  line-height: 1.7;
}

.plist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plist li {
  font-size: var(--xs);
  color: var(--txt-w2);
  display: flex;
  align-items: center;
  gap: 7px
}

.plist li i {
  color: #34D399;
  font-size: .65rem;
  flex-shrink: 0
}

/* ── TOOLS (white) ── */
.ttabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-bottom: 36px
}

.ttab {
  background: var(--white);
  border: 1.5px solid var(--bdr-light);
  color: var(--txt-muted);
  padding: 9px 20px;
  border-radius: 50px;
  font-size: var(--xs);
  font-weight: 600;
  cursor: pointer;
  transition: var(--tr);
  font-family: var(--font);
  box-shadow: var(--sh-sm)
}

.ttab:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--bluelt)
}

.ttab.ac {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
  box-shadow: var(--sh-blue)
}

.tpanel {
  display: none;
  animation: fsi .32s ease
}

.tpanel.ac {
  display: block
}

@keyframes fsi {
  from {
    opacity: 0;
    transform: scale(.97) translateY(6px)
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0)
  }
}

.tcards {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 8px
}

.tcard {
  background:#79aaa8;
  border: 1.5px solid var(--bdr-light);
  border-radius: var(--r);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 130px;
  box-shadow: var(--sh-sm);
  transition: var(--tr)
}

.tcard:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
  transform: translateY(-5px) scale(1.03)
}

.te {
  font-size: 2rem
}

.tcard span {
  font-size: var(--sm);
  font-weight: 600;
  color: var(--txt-dark);
  text-align: center
}

/* ── WHY (navy) ── */
.wg {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.wcard {
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.wcard::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  transform: scaleX(0);
  transition: transform .3s ease;
  transform-origin: left
}

.w1::after, .w7::after, .w8::after {
  background: linear-gradient(90deg, #60A5FA, #93C5FD)
}

.w2::after {
  background: linear-gradient(90deg, #34D399, #6EE7B7)
}

.w3::after {
  background: linear-gradient(90deg, #A78BFA, #C4B5FD)
}

.w4::after {
  background: linear-gradient(90deg, #FDBA74, #FCD34D)
}

.w5::after {
  background: linear-gradient(90deg, #F9A8D4, #FBCFE8)
}

.w6::after {
  background: linear-gradient(90deg, var(--orange), #FDBA74)
}

.wcard:hover::after {
  transform: scaleX(1)
}

.wico {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin: 0 auto 16px
}

.w1 .wico {
  background: rgba(37, 99, 235, .2);
  color: #60A5FA
}

.w2 .wico {
  background: rgba(16, 185, 129, .2);
  color: #34D399
}

.w3 .wico {
  background: rgba(124, 58, 237, .2);
  color: #A78BFA
}

.w4 .wico {
  background: rgba(249, 115, 22, .2);
  color: #FDBA74
}

.w5 .wico {
  background: rgba(236, 72, 153, .2);
  color: #F9A8D4
}

.w6 .wico {
  background: rgba(245, 158, 11, .2);
  color: #FCD34D
}

.w7 .wico {
  background: rgba(13, 148, 136, .2);
  color: #2DD4BF
}

.w8 .wico {
  background: rgba(37, 99, 235, .2);
  color: #60A5FA
}

.wcard h4 {
  font-size: var(--sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px
}

.wcard p {
  font-size: var(--xs);
  color: var(--txt-w2);
  line-height: 1.6
}

/* ── TEAM/MESSAGES (white) ── */
.msgs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.msg-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.msg-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bluemid), var(--bluelt));
  border: 2px solid rgb(235, 136, 7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0
}

.msg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.photo-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--txt-light);
  font-size: var(--xs);
  font-weight: 600
}

.photo-ph i {
  font-size: 1.6rem;
  color: var(--blue);
  opacity: .45
}

.msg-role {
  font-size: var(--xs);
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .08em
}

.msg-name {
  font-size: var(--lg);
  font-weight: 700;
  color: var(--txt-dark)
}

.msg-quote {
  font-size: var(--sm);
  color: var(--txt-body);
  line-height: 1.75;
  font-style: italic;
  border-left: 3px solid var(--bluemid);
  padding-left: 14px;
  flex: 1
}

.msg-full {
  font-size: var(--sm);
  color: var(--txt-body);
  line-height: 1.75;
  margin-top: 8px
}

.msg-card.founder {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: start
}

.fl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center
}

.fphoto {
  width: 200px;
  height: 180px;
  border-radius: 5%;
  border: 2px solid rgb(235, 136, 7);
  background:url(/assets/founder.jpeg);
  background-size: cover;
  object-fit: fill;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.fphoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.fph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--txt-light);
  font-size: var(--xs);
  font-weight: 600
}

.fph i {
  font-size: 2.2rem;
  color: var(--blue);
  opacity: .4
}

/* ── CERT (navy) ── */
.cfl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center
}

.clist {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 11px
}

.clist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--sm);
  color: var(--txt-w2);
  font-weight: 500
}

.clist li i {
  color: #faf760;
  width: 18px;
  text-align: center;
  flex-shrink: 0
}

.cwrap {
  display: flex;
  justify-content: center;
  perspective: 1000px
}

.cpaper {
  background: #fff;
  border-radius: 16px;
  padding: 36px 32px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .8);
  width: 340px;
  position: relative;
  overflow: hidden;
  transform: rotateY(-5deg) rotateX(3deg);
  transition: var(--tr);
  border: 1px solid #E5E7EB
}

.cpaper:hover {
  transform: rotateY(0) rotateX(0) scale(1.02)
}

.cbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--blue), #60A5FA, var(--orange), var(--yellow))
}

.cbrand {
  text-align: center;
  margin: 12px 0 4px;
  font-size: var(--2xl);
  font-weight: 800;
  color: var(--navy)
}

.cbrand span {
  color: var(--orange)
}

.cstars {
  text-align: center;
  color: var(--yellow);
  font-size: .8rem;
  letter-spacing: 3px;
  margin: 4px 0
}

.chr {
  border: none;
  border-top: 1px solid #E5E7EB;
  margin: 10px 0
}

.chead {
  text-align: center;
  font-size: var(--base);
  font-weight: 700;
  color: var(--txt-dark);
  margin-bottom: 3px
}

.csub {
  text-align: center;
  font-size: var(--xs);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 16px
}

.caw {
  text-align: center;
  font-size: var(--xs);
  color: var(--txt-muted);
  margin-bottom: 6px
}

.cline {
  border-bottom: 1px solid #E5E7EB;
  margin: 0 24px 18px;
  height: 26px
}

.cbot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end
}

.cqr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--txt-muted);
  font-size: .65rem;
  font-weight: 600;
  background: #F8FAFF;
  border: 1px solid #E5E7EB;
  padding: 9px;
  border-radius: 9px
}

.cqr i {
  color: var(--blue)
}

.csig {
  text-align: center
}

.csline {
  border-bottom: 1px solid #E5E7EB;
  width: 120px;
  margin-bottom: 7px
}

.csig span {
  display: block;
  font-size: var(--xs);
  font-weight: 700;
  color: var(--txt-dark)
}

.csr {
  font-size: .65rem !important;
  color: var(--txt-muted) !important;
  font-weight: 400 !important;
  margin-top: 2px
}

/* ── REGISTER (white) ── */
.rgrid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start
}

.rben {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px
}

.rb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sm);
  color: var(--txt-body);
  font-weight: 500
}

.rb i {
  color: var(--green);
  font-size: .95rem
}

.fcard {
  background: var(--white);
  border: 1px solid var(--bdr-light);
  border-radius: var(--r);
  padding: 36px 32px;
  box-shadow: var(--sh-md)
}

.fcard h3 {
  font-size: var(--2xl);
  font-weight: 700;
  color: var(--txt-dark);
  margin-bottom: 24px
}

.fg {
  margin-bottom: 16px
}

.fg label {
  display: block;
  font-size: var(--xs);
  font-weight: 700;
  color: var(--txt-muted);
  margin-bottom: 6px;
  letter-spacing: .04em;
  text-transform: uppercase
}

.fg input, .fg select {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--bdr-light);
  border-radius: var(--rsm);
  font-size: var(--sm);
  font-family: var(--font);
  color: var(--txt-dark);
  background: var(--white);
  transition: var(--tr);
  outline: none;
  appearance: none
}

.fg input:focus, .fg select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
}

.fg input::placeholder {
  color: var(--txt-light)
}

.rmsg {
  margin-top: 12px;
  font-size: var(--sm);
  text-align: center;
  font-weight: 600;
  min-height: 22px
}

.rmsg.ok {
  color: var(--green)
}

.rmsg.er {
  color: #EF4444
}

/* ── FOOTER (navy) ── */
.ft {
  background: var(--navy);
  padding: 64px 0 0
}

.fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--bdr-dark)
}
.fbrand .logo{
  width: 100%;
  height: 100px;
  margin: 10px 0 14px;
  display: flex;
  align-items: center;
}
.fbrand .logo>img{
  max-width: 250px;
  max-height: 100px;
}

.fbrand p {

  font-size: var(--sm);
  color: var(--txt-w2);
  margin: 40px 0 22px;
  line-height: 1.75;
  max-width: 270px
}


.fcol h5 {
  font-size: var(--sm);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px
}

.fcol ul {
  display: flex;
  flex-direction: column;
  gap: 9px
}

.fcol ul li a {
  font-size: var(--sm);
  color: var(--txt-w2);
  transition: var(--tr)
}

.fcol ul li a:hover {
  color: #fff;
  padding-left: 4px
}

.fcol p {
  font-size: var(--sm);
  color: var(--txt-w2);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 9px
}

.fcol p i {
  color: var(--orange);
  font-size: .95rem;
  flex-shrink: 0
}

/* Location block in footer */
.floc {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--bdr-dark);
  border-radius: var(--rsm);
  overflow: hidden;
  margin-top: 4px
}

.floc iframe {
  width: 100% !important;
  display: block;
  filter: hue-rotate(185deg) saturate(.5) brightness(.55)
}

.floc-label {
  padding: 10px 14px;
  font-size: var(--xs);
  font-weight: 700;
  color: var(--txt-w2);
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--bdr-dark);
  background: rgba(255, 255, 255, .04)
}

.floc-label i {
  color: var(--orange)
}

.fbadge {
  display: inline-block;
  background: var(--orange);
  color: #FFF;
  border: 1px solid rgba(249, 115, 22, .3);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: var(--xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sicons {
  display: flex;
  gap: 8px;
  margin-top: 4px
}

.sico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .88rem;
  color: #fff;
  transition: var(--tr)
}

.sico:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25)
}

.sfb {
  background: #fcfcfc;
  color: #0A66C2;
  font-size: 1rem !important;
}

.sig {
  background: #fcfcfc;
  color: #bc1888 !important;
  font-size: 1rem !important;
}

.sli {
  background: #fcfcfc;
  color: #0A66C2;
  font-size: 1rem !important;
}

.fbot {
  padding: 20px 0;
  text-align: center
}

.fbot p {
  font-size: 14px;
  color: #05424d;
  font-weight: 600;
}

/* ── CONTACT section ── */
.cgrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start
}

.cinfo {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.chero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, .08);
  padding: 20px 22px;
  border-radius: var(--r);
  border: 1px solid var(--bdr-dark)
}

.cico {
  width: 48px;
  height: 48px;
  background: var(--blue);
  color: #fff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0
}

.chero h4 {
  font-size: var(--base);
  font-weight: 700;
  color: #fff
}

.chero p {
  font-size: var(--xs);
  color: var(--txt-w2)
}

.cit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid var(--bdr-dark)
}

.cit i {
  color: #60A5FA;
  font-size: .95rem;
  margin-top: 3px;
  width: 18px;
  text-align: center;
  flex-shrink: 0
}

.cit div span {
  display: block;
  font-size: var(--xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--txt-w3);
  font-weight: 700;
  margin-bottom: 2px
}

.cit div a, .cit div p {
  font-size: var(--sm);
  color: #fff;
  font-weight: 500
}

.cit div a:hover {
  color: #FDBA74
}

.cmap iframe {
  width: 100% !important;
  border-radius: var(--r);
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.041);
  filter: hue-rotate(185deg) saturate(.9) brightness(.8)
}

/* ── SCROLL REVEAL ── */
.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1)
}

.rv.vs {
  opacity: 1;
  transform: translateY(0)
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .hinner {
    grid-template-columns: 1fr
  }

  .hcard {
    display: none
  }

  .pg {
    grid-template-columns: repeat(2, 1fr)
  }

  .wg {
    grid-template-columns: repeat(2, 1fr)
  }

  .fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }

  .msgs-grid {
    grid-template-columns: 1fr
  }

  .msg-card.founder {
    grid-template-columns: 1fr
  }

  .fl {
    align-items: center;
  }
}

@media(max-width:768px) {
  .sp {
    padding: 50px 0
  }

  .container {
    padding: 0 20px
  }

  .nlinks, .bnav {
    display: none
  }

  .ham {
    display: flex
  }

  .nlinks.op {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--navy);
    padding: 14px 20px 22px;
    border-bottom: 1px solid var(--bdr-dark);
    gap: 3px;
    z-index: 999
  }

  .agrid, .cfl, .rgrid, .cgrid {
    grid-template-columns: 1fr;
    gap: 36px
  }

  .pg {
    grid-template-columns: 1fr
  }

  .wg {
    grid-template-columns: 1fr 1fr
  }

  .fgrid {
    grid-template-columns: 1fr;
    gap: 28px
  }

  .cpaper {
    width: 100%;
    max-width: 340px
  }

  .htit {
    font-size: 2.1rem
  }
}

@media(max-width:480px) {
  .wg {
    grid-template-columns: 1fr
  }

  .htit {
    font-size: 1.85rem
  }

  .hbtns {
    flex-direction: column;
    align-items: flex-start
  }

  .container {
    padding: 0 16px
  }
}


/* testinomial css */

.testimonial-section {
  padding: 50px 20px;
  background: #f8fafc;
  overflow: hidden;
}

.ts-title {
  text-align: center;
  font-size: 28px;
  margin-bottom: 30px;
}

.ts-wrapper {
  overflow: hidden;
  position: relative;
}

.ts-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: scrollLeft 35s linear infinite;
}

.ts-card {
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 280px;
  max-width: 280px;
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.ts-card img {
  width: 100px;
  height: 100px;
  border-radius: 5%;
  border: 1px solid  #ea9c0a;
  object-fit: cover;
  margin-bottom: 10px;
  
}

.ts-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.ts-card p {
  min-height: 100px;
  max-height: 100px;
  font-size: 13px;
  color: #555;
}

.ts-wrapper:hover .ts-track {
  animation-play-state: paused;
}

.ts-wrapper {
  cursor: grab;
  scroll-behavior: smooth;
}

.ts-wrapper:active {
  cursor: grabbing;
}


@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}