html,
body{
    background-color:#ffffff !important;
    background:#ffffff !important;
    margin:0;
    padding:0;
}
.language-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(5px);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.language-box{
    width:720px;
    max-width:95%;
    background:#fff;
    border-radius:25px;
    padding:40px;
    text-align:center;
    animation:popup .35s ease;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
}

@keyframes popup{
from{
opacity:0;
transform:translateY(30px) scale(.9);
}
to{
opacity:1;
transform:none;
}
}

.language-box h1{
font-size:45px;
margin-bottom:10px;
}

.language-box p{
color:#666;
margin-bottom:30px;
}

.language-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}

.language-btn{
padding:18px;
border:none;
background:#f5f7fb;
border-radius:14px;
cursor:pointer;
transition:.3s;
}

.language-btn strong{
display:block;
font-size:24px;
margin-bottom:5px;
}

.language-btn span{
color:#666;
}

.language-btn:hover{
background:#0b8d95;
color:#fff;
transform:translateY(-4px);
}

.language-btn:hover span{
color:#fff;
}

@media(max-width:768px){

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

}
main{
    background:#ffffff !important;
}

section,
main,
.container,
.wrapper{
    background:transparent;
}
main{
    min-height:100vh;
    background:#ffffff;
    padding-top:20px;
}

.section{
    padding:20px 0 50px;
    background:#ffffff;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    margin-bottom:40px;
}

.section-text{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.section-header .badge{
    display:inline-flex;
    align-items:center;
    gap:14px;
    width:fit-content;
    padding:10px 18px;
    border-radius:999px;
    background:#fff3e8;
    border:1px solid rgba(255,106,0,0.18);
    color:#091a33;
    font-size:0.95rem;
    font-weight:700;
}

.section-header h3{
    margin:0;
    color:#091a33;
    font-size:clamp(1.8rem, 2.6vw, 2.6rem);
    font-weight:800;
    line-height:1.15;
    white-space:nowrap;
}

.section-header p{
    margin:0;
    color:#4d6486;
    max-width:70ch;
    line-height:1.8;
}

@media (max-width:768px){
    .section-header{
        flex-direction:column;
        gap:14px;
    }

    .section-header h3{
        white-space:normal;
    }

    .cb-bottom-logo{
        width:60px;
    }
}

/* =========================================================
   HERO SECTION
========================================================= */

.hero{
  padding:22px 0 10px;
}

/* =========================================================
   HERO GRID LAYOUT
========================================================= */

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(320px,0.58fr);
  gap:15px;
  align-items:stretch;
}

/* =========================================================
   HERO LEFT CONTENT
========================================================= */

.hero-copy{
  padding:18px 20px 18px 24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:14px;
  min-height:600px;
  height:100%;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,251,255,0.96));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

/* =========================================================
   BADGE
========================================================= */

.badge{
  display:inline-flex;
  align-items:center;
  gap:14px;
  width:fit-content;
  padding:10px 18px;
  border-radius:999px;
  background:#fff3e8;
  border:1px solid rgba(255,106,0,0.18);
  color:#091a33;
  font-size:0.95rem;
  font-weight:700;
}

/* =========================================================
   BADGE DOT
========================================================= */

.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff6a00;
}

/* =========================================================
   HERO HEADING
========================================================= */

.hero h2{
  margin:6px 0 4px;
  font-size:clamp(2rem,4vw,4rem);
  line-height:1.15;
  letter-spacing:-0.04em;
  color:#091a33;
  font-weight:800;
  text-align:left;
}

/* =========================================================
   HERO PARAGRAPH
========================================================= */

.hero p.lead{
  margin:0 0 6px 4px;
  color:#4d6486;
  font-size:1.08rem;
  max-width:62ch;
  line-height:1.8;
  text-align:justify;
  text-justify:inter-word;
}

/* =========================================================
   TAG STRIP
========================================================= */

.tag-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 12px;
  padding-left:4px;
}

/* =========================================================
   TAG PILL
========================================================= */

.tag-pill{
  padding:10px 14px;
  border-radius:999px;
  background:#fff3e8;
  border:1px solid #ff6a00;
  color:#002d72;
  font-size:0.92rem;
  font-weight:700;
}

/* =========================================================
  Nav CTA BUTTONS
========================================================= */
.nav-cta{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:20px;
    width:100%;
    max-width:1000px;
}

.nav-cta .btn{
    height:74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:22px;
    text-decoration:none;
    font-size:1rem;
    font-weight:800;
    transition:.3s ease;
    box-sizing:border-box;
    background:#002d72;
    color:#ffffff;
    border:2px solid #ff6a00;
}

.nav-cta .btn:hover{
    transform:translateY(-3px);
    background:#00008B;
}

/* =========================
   STORE BADGE & MARQUEE ITEMS
========================== */
.nav-cta .btn-store{
    height:74px; 
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0 15px; 
    border-radius:22px;
    transition:.3s ease;
    box-sizing:border-box;
    flex-shrink:0;

    background:#ffffff;
    color:#091a33;
    
    /* Changed to transparent to remove the saffron line but keep the exact height/alignment */
    border:2px solid transparent; 
}

.nav-cta .btn-store:hover{
    transform:translateY(-3px);
}

.store-badge{
    width:100%;
    height:100%;
    max-width:220px;
    max-height:44px; 
    object-fit:contain;
    display:block;
}

/* =========================
   THE CONTINUOUS LOOP 
========================== */
.store-rotate{
    position:relative;
    width:220px;
    height:70px;
    margin:auto;
    perspective:1000px;
}

.store-logo{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
}

/* App Store */
.badge1{
    animation:showBadge1 2s infinite;
}

/* Play Store */
.badge2{
    animation:showBadge2 2s infinite;
}

/* Keep your keyframes unchanged */

@keyframes showBadge1{

    0%{
        opacity:0;
        transform:rotateY(-90deg) translateX(-30px);
    }

    10%,40%{
        opacity:1;
        transform:rotateY(0deg) translateX(0);
    }

    50%{
        opacity:0;
        transform:rotateY(90deg) translateX(30px);
    }

    100%{
        opacity:0;
    }
}

@keyframes showBadge2{

    0%,50%{
        opacity:0;
    }

    60%{
        opacity:0;
        transform:rotateY(-90deg) translateX(-30px);
    }

    70%,90%{
        opacity:1;
        transform:rotateY(0deg) translateX(0);
    }

    100%{
        opacity:0;
        transform:rotateY(90deg) translateX(30px);
    }
}
/* =========================================================
   BUTTON COLORS
========================================================= */
.btn-secondary{
  background:#002d72;
  color:#ffffff;
  border:2px solid #ff6a00;
  box-shadow:0 8px 20px rgba(255,106,0,0.25);
}

.btn-secondary:hover{
  background:#00008B;
  border-color:#ff6a00;
  transform:translateY(-3px);
}

.btn-store:hover{
  transform:translateY(-3px);
  /* The border-color #ff6a00 has been removed from this hover state */
}


/* =========================================================
   HERO KPI CARDS
========================================================= */

.hero-note{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:4px;

  margin-top:12px;

  width:100%;
  max-width:1000px;
}

.mini-card1{
  min-height:110px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;

  border-radius:22px;

  background:#ff6a00;
  color:#ffffff;

  border:2px solid #002d72;

  transition:.3s ease;
}

.mini-card1:hover{
  transform:translateY(-3px);
}

.hero-note .kpi{
  display:block;

  font-size:2.4rem;
  font-weight:900;
  line-height:1;

  color:#ffffff;

  margin-bottom:10px;
}

.hero-note .small{
  color:#ffffff;
  font-size:1rem;
  line-height:1.3;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

  .nav-cta,
  .hero-note{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   WHATSAPP VISUAL CARD
========================================================= */

.visual-card{
  width:100%;
  max-width:390px;
  height:650px;
  min-height:600px;
  justify-self:stretch;
  position:relative;
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(180deg, #111827 0%, #081427 100%);
  border:2px solid rgba(255,255,255,0.06);
  box-shadow:0 35px 90px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  display:flex;
  flex-direction:column;
}

/* =========================================================
   WHATSAPP HEADER
========================================================= */

.wa-header{
  height:92px;
  padding:30px 18px 14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg, #0b5d56, #084842);
  border-radius:30px 30px 0 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}

/* =========================================================
   WHATSAPP AVATAR
========================================================= */

.wa-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.45rem;
  background:linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,0.16);
}

/* =========================================================
   STORE INFO
========================================================= */

.wa-store-info{
  display:flex;
  flex-direction:column;
}

.wa-store-info strong{
  display:block;
  font-size:0.98rem;
  line-height:1.35;
  color:#ffffff;
  font-weight:600;
}

.wa-store-info span{
  margin-top:2px;
  font-size:0.82rem;
  color:#c9f5e0;
}

/* =========================================================
   CHAT AREA
========================================================= */

.wa-chat{
  flex:1;
  min-height:0;
  padding:18px 16px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  background:
    radial-gradient(circle at top right, rgba(37,211,102,0.05), transparent 22%),
    radial-gradient(circle at bottom left, rgba(255,122,24,0.05), transparent 22%),
    linear-gradient(180deg, #041b46 0%, #07152f 100%);
}

/* =========================================================
   CHAT MESSAGE
========================================================= */

.msg{
  max-width:82%;
  padding:13px 15px;
  border-radius:20px;
  font-size:0.92rem;
  line-height:1.55;
  word-wrap:break-word;
  animation:msgShow .35s ease;
}

.left{
  align-self:flex-start;
  background:linear-gradient(180deg, #14325f, #11284d);
  color:#eef4ff;
  border-top-left-radius:6px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 8px 22px rgba(0,0,0,0.16);
}

.right{
  align-self:flex-end;
  background:linear-gradient(135deg, #25d366, #1fb857);
  color:#072039;
  border-top-right-radius:6px;
  font-weight:600;
  box-shadow:0 8px 22px rgba(37,211,102,0.22);
}

/* =========================================================
   SECTION HEADER LAYOUT
========================================================= */

.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  margin-bottom:28px;
}

.text-content{
  flex:1 1 auto;
  min-width:0;
}

.section-header h3{
  font-size:clamp(1.8rem,3vw,2.5rem);
  color:#091a33;
  margin:0 0 6px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:.2px;
}

.section-header p{
  margin:0;
  color:#4d6486;
  font-size:1rem;
  line-height:1.6;
  max-width:64ch;
  text-align:justify;
  text-justify:inter-word;
}

/* =========================================================
   IMAGE BOX
========================================================= */

.image-box{
  width:340px;
  min-width:340px;
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  border-radius:28px;
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  border:1px solid #ff6a00;
  box-shadow:0 14px 40px #ff6a00;
  padding:24px;
  overflow:hidden;
}

.right-logo{
  width:100%;
  height:auto;
  object-fit:contain;
  display:block;
  transition:.3s ease;
}

.image-box:hover .right-logo{
  transform:scale(1.04);
}

/* =========================================================
   GRID LAYOUTS
========================================================= */

.grid-2,
.grid-3,
.grid-4{
  display:grid;
  gap:18px;
}

.grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.grid-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

/* =========================================================
   CARD DESIGN
========================================================= */

.card{
  padding:24px;
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,251,255,0.96));
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}

.card-media{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:18px;
}

.card h4{
  margin:0 0 6px;
  font-size:1.14rem;
  color:#091a33;
  font-weight:800;
  line-height:1.05;
}

.card p{
  margin:0;
  color:#4d6486;
  line-height:1.75;
  text-align:justify;
  text-justify:inter-word;
}

/* =========================================================
   HIGHLIGHT BAND
========================================================= */

.highlight-band{
  margin-top:24px;
  margin-bottom:10px;
  background:linear-gradient(135deg, #002d72, #ff9933);
  color:#ffffff;
  padding:28px 20px;
  border-radius:22px;
  line-height:1.35;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.highlight-band strong{
  display:inline-block;
  font-size:44px;
  margin-bottom:8px;
  font-weight:900;
}

.highlight-band p{
  display:inline-block;
  font-size:18px;
  margin-bottom:8px;
  font-weight:800;
}

/* =========================================================
   STATS PANEL
========================================================= */
.stats-panel{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:28px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  height:100%;
}

.stats-panel h3{
  font-size:1.9rem;
  color:#091a33;
  margin:0 0 14px;
  font-weight:800;
  line-height:1;
  letter-spacing:.3px;
}
.stats-panel p{
  margin-top:6px;
}


.stats-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:5px;
  margin-top:0;
}

.stats-grid .metric{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:max-content;
  padding:12px 10px;
  background:linear-gradient(135deg, #002d72, #041b4a);
  border:2px solid #ff6a00;
  border-radius:24px;
  transition:.25s ease;
}

.metric:hover{
  transform:translateY(-4px);
}

.metric strong{
  display:block;
  margin:0;
  color:#ffffff;
  font-size:1.08rem;
  font-weight:800;
  line-height:1;
  letter-spacing:.2px;
  white-space:nowrap;
}

.list{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin:0;
  padding:0;
  list-style:none;
}

.stats-panel .list li{
  position:relative;
  list-style:none;
  padding:10px 0 10px 38px;
  margin:0;
  font-size:1rem;
  line-height:1.15;
  color:#091a33;
  border-bottom:1px solid rgba(0,45,114,0.05);
}

.stats-panel .list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:10px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff6a00;
  color:#ffffff;
  font-size:0.78rem;
  font-weight:800;
}

/* =========================================================
   TIMELINE PANEL
========================================================= */

.timeline{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:28px;
  box-shadow:0 10px 30px rgba(0,45,114,0.06);
  height:100%;
  display:flex;
  flex-direction:column;
}

.timeline h3{
  font-size:1.9rem;
  color:#091a33;
  margin:0 0 14px;
  font-weight:800;
  line-height:1;
}

.timeline-steps{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.timeline-step{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 16px;
  border-radius:24px;
  background:#f8f9fc;
  transition:.25s ease;
}

.timeline-step:hover{
  background:#f3f6fb;
}

.step-no{
  min-width:42px;
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#002d72;
  border:2px solid #ff6a00;
  color:#ffffff;
  font-size:1.1rem;
  font-weight:800;
  flex-shrink:0;
}

.timeline-step strong{
  display:block;
  color:#091a33;
  font-size:1.02rem;
  font-weight:800;
  line-height:1.2;
  margin-bottom:3px;
}

.timeline-step p{
  margin:0;
  color:#556987;
  line-height:1.35;
  font-size:0.95rem;
  text-align:left;
}

/* =========================================================
   MOBILE RESPONSIVE
========================================================= */

@media (max-width:1080px){
  .hero-grid,
  .grid-4{
    grid-template-columns:1fr;
  }

  .grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero-copy{
    min-height:auto;
  }

  .visual-card{
    max-width:100%;
  }
}

@media (max-width:992px){
  .section-header{
    gap:34px;
  }

  .image-box{
    width:200px;
    min-width:200px;
    height:200px;
  }

  .stats-grid{
    flex-direction:row;
  }
}

@media (max-width:780px){
  .hero-copy{
    padding:24px 20px 24px 24px;
  }

  .hero h2,
  .hero p.lead,
  .tag-strip,
  .nav-cta,
  .hero-note{
    margin-left:0;
    padding-left:0;
  }

  .grid-2,
  .grid-3{
    grid-template-columns:1fr;
  }

  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

  .image-box{
    width:100%;
    min-width:100%;
    height:220px;
  }

  .right-logo{
    max-width:180px;
  }

  .visual-card{
    height:580px;
  }

  .wa-header{
    height:92px;
    padding-top:34px;
  }
}

@media (max-width:768px){
  .hero{
    padding:18px 0 8px;
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .hero-copy{
    min-height:auto;
    padding:18px 16px;
    gap:12px;
  }

  .hero h2{
    font-size:1.8rem;
    line-height:1.15;
    margin:8px 0 6px;
  }

  .hero p.lead{
    font-size:0.98rem;
    line-height:1.7;
    text-align:left;
  }

  .tag-strip{
    gap:8px;
  }

  .tag-pill{
    font-size:0.85rem;
    padding:8px 12px;
  }

  .nav-cta{
    max-width:100%;
    flex-wrap:wrap;
    gap:12px;
    padding-left:0;
    justify-content:flex-start;
  }

  .btn{
    min-width:0;
    width:100%;
  }

  .hero-note{
    flex-direction:column;
    gap:10px;
    max-width:100%;
  }

  .mini-card1{
    width:100%;
  }

  .visual-card{
    max-width:100%;
    height:520px;
    min-height:520px;
    border-radius:28px;
  }

  .wa-header{
    height:auto;
    padding:18px 16px 12px;
    border-radius:24px 24px 0 0;
  }

  .wa-avatar{
    width:44px;
    height:44px;
    font-size:1.2rem;
  }

  .wa-store-info strong{
    font-size:0.92rem;
  }

  .wa-store-info span{
    font-size:0.78rem;
  }

  .wa-chat{
    padding:14px 12px 16px;
  }

  .msg{
    max-width:92%;
    font-size:0.88rem;
    padding:11px 12px;
  }

  .section-header h3{
    font-size:1.6rem;
    line-height:1.15;
    margin-bottom:8px;
  }

  .section-header p{
    font-size:0.98rem;
    line-height:1.6;
  }

  .card{
    padding:18px;
  }

  .card h4{
    font-size:1.05rem;
    margin-bottom:8px;
    line-height:1.15;
  }

  .card p{
    font-size:0.95rem;
    line-height:1.7;
    text-align:left;
  }

  .card-media{
    height:180px;
  }

  .highlight-band{
    padding:18px 16px;
    border-radius:18px;
  }

  .highlight-band strong{
    font-size:1.15rem;
    line-height:1.3;
  }

  .highlight-band p{
    font-size:0.95rem;
    line-height:1.5;
  }

  .stats-panel,
  .timeline{
    padding:18px;
    height:auto;
  }

  .stats-panel h3,
  .timeline h3{
    font-size:1.4rem;
    line-height:1.2;
  }

  .stats-grid{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .metric{
    width:100%;
    max-width:100%;
  }

  .stats-panel .list li{
    font-size:0.95rem;
    line-height:1.4;
    padding:10px 0 10px 34px;
  }

  .timeline-step{
    padding:12px;
    gap:10px;
  }

  .step-no{
    width:36px;
    height:36px;
    min-width:36px;
    font-size:0.95rem;
  }

  .timeline-step strong{
    font-size:0.95rem;
  }

  .timeline-step p{
    font-size:0.88rem;
    line-height:1.35;
  }

  .insight-hero-content h2{
    white-space:normal;
    font-size:1.7rem;
    line-height:1.15;
  }

  .insight-image-card{
    max-width:100%;
  }

  .insight-image-card img{
    height:280px;
  }

  .insight-card{
    padding:18px;
  }

  .insight-card h3{
    font-size:1.35rem;
    line-height:1.2;
  }

  .insight-sub,
  .insight-card p{
    font-size:0.95rem;
    line-height:1.65;
    text-align:left;
  }

  .benefit-item,
  .employment-item{
    padding:14px;
    font-size:0.92rem;
  }

  .quote-box,
  .highlight-box{
    padding:16px;
    border-radius:18px;
  }

  .quote-box p{
    font-size:0.98rem;
    line-height:1.6;
  }

  .vision-layout{
    flex-direction:column;
    gap:20px;
  }

  .cb-image-box1{
    width:220px;
    margin:0 auto;
  }

  .vision-item p{
    font-size:0.95rem;
    line-height:1.35;
  }

  .vision-item span{
    width:28px;
    height:28px;
    min-width:28px;
    font-size:14px;
  }

  .insight-final{
    padding:28px 18px;
    border-radius:22px;
  }

  .insight-final h2{
    font-size:1.7rem;
    line-height:1.15;
  }

  .insight-final h3{
    font-size:1.2rem;
    line-height:1.3;
  }

  .insight-final p{
    font-size:0.95rem;
    line-height:1.7;
  }

  .final-tag{
    font-size:0.9rem;
    padding:11px 18px;
  }
}

@media (max-width:580px){
  .stats-grid{
    flex-direction:column;
  }

  .metric{
    min-height:90px;
  }

  .stats-panel{
    padding:24px;
  }

  .stats-panel h3{
    font-size:1.6rem;
  }

  .timeline{
    padding:22px;
  }

  .timeline h3{
    font-size:1.5rem;
  }

  .timeline-step{
    padding:14px;
    gap:12px;
  }

  .step-no{
    width:38px;
    height:38px;
    min-width:38px;
    font-size:1rem;
  }

  .timeline-step strong{
    font-size:.96rem;
  }

  .timeline-step p{
    font-size:.9rem;
    line-height:1.3;
  }
}

@media (max-width:480px){
  .counter-item{
    width:20px;
    height:22px;
    font-size:12px;
    border-radius:5px;
  }

  .visitor-title{
    font-size:18px;
  }

  .hero-copy{
    padding:16px 14px;
  }

  .hero h2{
    font-size:1.55rem;
  }

  .section-header h3{
    font-size:1.4rem;
  }

  .visual-card{
    height:480px;
    min-height:480px;
  }

  .wa-chat{
    gap:10px;
  }

  .card-media{
    height:180px;
  }

  .insight-image-card img{
    height:240px;
  }

  .timeline{
    padding:16px;
  }
}

/*insight page */
/* =========================================================
   INSIGHT SECTION
========================================================= */

.insight-section{
  padding:20px;
  background:#fff;
}
/* =========================================================
   HERO SECTION
========================================================= */

.insight-hero{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  gap:44px;
  align-items:start;
  margin-bottom:34px;
}

/* =========================================================
   HEADING
========================================================= */

.insight-hero-content h2{
  font-size:clamp(1.8rem,3vw,3.2rem);
  line-height:1.1;
  color:#00163d;
  margin:14px 0;
  font-weight:700;
  white-space:nowrap;
}

/* =========================================================
   PARAGRAPH
========================================================= */

.insight-sub,
.insight-card p{
  color:#4d6486;
  font-size:1rem;
  line-height:1.8;
  margin:0 0 14px;
  text-align:justify;
  text-justify:inter-word;
}

/* =========================================================
   IMAGE SIDE
========================================================= */

.insight-hero-image{
  display:flex;
  justify-content:flex-end;
}

.insight-image-card{
  width:100%;
  max-width:390px;
  overflow:hidden;
  border-radius:30px;
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
}

.insight-image-card img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.insight-overlay{
  padding:24px;
  background:linear-gradient(135deg, #002d72, #041b4a);
}

.insight-overlay h4{
  margin:0 0 10px;
  color:#ffffff;
  font-size:1.1rem;
  font-weight:800;
}

.insight-overlay p{
  margin:0;
  color:#dce8ff;
  line-height:1.7;
}

/* =========================================================
   MAIN CARD
========================================================= */

.insight-card{
  background:#ffffff;

  border-radius:28px;
  padding:30px;

}

/* =========================================================
   CARD HEADING
========================================================= */

.insight-card h3{
  color:#091a33;
  font-size:2rem;
  margin:14px 0;
  line-height:1.1;
  font-weight:800;
}

/* =========================================================
   BENEFITS
========================================================= */

.benefit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.benefit-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-radius:20px;
  background:#f8fbff;
  border:1px solid rgba(0,45,114,0.08);
  color:#091a33;
  font-weight:700;
  line-height:1.5;
  transition:.3s ease;
}

.benefit-item:hover{
  transform:translateY(-2px);
}

.tick-circle{
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#ff6a00;
  color:#0b6b28;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:900;
  line-height:1;
}

/* =========================================================
   EMPLOYMENT GRID
========================================================= */

.employment-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:24px 0;
}

.employment-item{
  padding:16px;
  border-radius:20px;
  background:#fff4ea;
  border:1px solid #ff6a00;
  color:#091a33;
  font-weight:700;
  text-align:center;
  line-height:1.5;
}

/* =========================================================
   HIGHLIGHT BOX
========================================================= */

.highlight-box{
  margin:24px 0;
  padding:24px;
  border-radius:24px;
  background:#fff4ea;
  border:1px solid #ff6a00;
}

.highlight-box strong{
  display:block;
  color:#091a33;
  line-height:1.7;
  margin-bottom:8px;
}

.highlight-box p{
  margin:0;
  color:#4d6486;
}

/* =========================================================
   QUOTE BOX
========================================================= */

.quote-box{
  margin:22px 0;
  padding:22px;
  border-radius:24px;
  background:linear-gradient(135deg, #002d72, #041b4a);
}

.quote-box p{
  color:#ffffff;
  text-align:center;
  margin:0;
  line-height:1.8;
  font-size:1.05rem;
  font-weight:700;
}

/* =========================================================
   VISION POINTS
========================================================= */

.vision-layout{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-top:15px;
}

.vision-points{
  flex:1;
}

.cb-image-box1{
  width:380px;
  flex-shrink:0;
  margin-top:-20px;
}

.cb-bottom-logo{
  width:100%;
  height:auto;
  display:block;
}

.vision-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 0;
}

.vision-item + .vision-item{
  margin-top:8px;
}

.vision-item span{
  width:16px;
  height:16px;
  min-width:16px;
  border-radius:50%;
  background:#ff6a00;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:550;
}

.vision-item p{
  margin:0;
  color:#091a33;
  font-size:18px;
  line-height:1;
  font-weight:700;
}

/* =========================================================
   FINAL CTA
========================================================= */

.insight-final{
  margin-top:40px;
  text-align:center;
  padding:30px 30px 40px;
  border-radius:32px;
  box-shadow:0 14px 40px rgba(0,45,114,0.12);
}

.insight-final h2{
  color:#ffffff;
  font-size:clamp(2rem,4vw,3.5rem);
  margin:0 0 14px;
  line-height:1.1;
}

.insight-final h3{
  color:#091a33;
  margin:0 0 16px;
  font-size:1.7rem;
  font-weight:800;
}

.insight-final p{
  color:#091a33;
  max-width:760px;
  margin:0 auto 24px;
  line-height:1.9;
}

.final-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
  border-radius:999px;
  background:linear-gradient(135deg, #FF9933 0%, #DEF4FC 100%);
  color:#ffffff;
  font-size:1rem;
  font-weight:800;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:992px){
  .insight-hero{
    grid-template-columns:1fr;
  }

  .insight-hero-image{
    justify-content:center;
  }

  .benefit-grid{
    grid-template-columns:1fr;
  }

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

  .vision-layout{
    gap:28px;
  }

  .cb-image-box1{
    width:300px;
  }
}

@media (max-width:768px){
  .insight-section{
    padding:55px 0;
  }

  .insight-hero{
    gap:28px;
  }

  .insight-hero-content h2{
    white-space:normal;
    font-size:1.7rem;
    line-height:1.15;
    margin:10px 0 12px;
  }

  .insight-sub,
  .insight-card p{
    font-size:0.95rem;
    line-height:1.65;
    text-align:left;
  }

  .insight-image-card{
    max-width:100%;
  }

  .insight-image-card img{
    height:320px;
  }

  .insight-overlay{
    padding:18px;
  }

  .insight-card{
    padding:22px;
  }

  .insight-card h3{
    font-size:1.5rem;
    line-height:1.2;
    margin:10px 0 12px;
  }

  .benefit-item{
    padding:14px 16px;
  }

  .employment-grid{
    grid-template-columns:1fr;
  }

  .employment-item{
    padding:14px;
  }

  .highlight-box,
  .quote-box{
    padding:18px;
  }

  .quote-box p{
    font-size:0.98rem;
    line-height:1.6;
  }

  .vision-layout{
    flex-direction:column;
    gap:25px;
  }

  .cb-image-box1{
    width:220px;
    margin:0 auto;
  }

  .vision-item p{
    font-size:16px;
    line-height:1.3;
  }

  .vision-item span{
    width:32px;
    height:32px;
    min-width:32px;
    font-size:16px;
  }

  .insight-final{
    padding:40px 20px;
  }

  .insight-final h2{
    font-size:1.7rem;
  }

  .insight-final h3{
    font-size:1.2rem;
    line-height:1.3;
  }

  .insight-final p{
    font-size:0.95rem;
    line-height:1.7;
  }

  .final-tag{
    font-size:0.9rem;
    padding:11px 18px;
  }
}

@media (max-width:480px){
  .insight-section{
    padding:44px 0;
  }

  .insight-card{
    padding:18px;
  }

  .insight-image-card img{
    height:240px;
  }

  .cb-image-box1{
    width:180px;
  }

  .vision-item p{
    font-size:15px;
  }

  .insight-final{
    padding:32px 16px;
    border-radius:22px;
  }

  .insight-final h2{
    font-size:1.5rem;
  }

  .insight-final h3{
    font-size:1.05rem;
  }
}

/* About page.*/
/* =========================================
   ABOUT PAGE SECTION
========================================= */

.cb-about-section{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  margin-top:6px;
}

/* =========================================
   ABOUT CARDS
========================================= */

.cb-about-card{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:26px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  transition:.35s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

.cb-about-card:hover{
  transform:translateY(-5px);
}

/* =========================================
   LEFT CONTENT CARD
========================================= */

.cb-text-card{
  justify-content:space-between;
}

.cb-text-card .badge{
  margin-bottom:12px;
}

.cb-text-card h3{
  font-size:clamp(2rem,3vw,2.5rem);
  line-height:1.2;
  color:#00163d;
  margin:0 0 12px;
  font-weight:800;
  letter-spacing:-0.3px;
}

.cb-text-card p,
.cb-video-content p,
.feature-box p{
  color:#4d6486;
  line-height:1.7;
  font-size:1rem;
  margin:0;
  text-align:justify;
}

.orange-text{
  color:#ff6a00;
}

/* =========================================
   BRAND LINK
========================================= */

.brand-link{
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
}

.brand-orange{
  color:#ff6a00;
}

.brand-dark{
  color:#00163d;
}

.brand-link:hover .brand-orange{
  color:#ed2323;
}

.brand-link:hover .brand-dark{
  color:#000000;
}

/* =========================================
   BOTTOM IMAGE
========================================= */

.cb-image-box{
  margin-top:18px;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  flex:1;
}

.cb-bottom-logo{
  width:78%;
  max-width:380px;
  object-fit:contain;
  display:block;
}

/* =========================================
   VIDEO CARD
========================================= */

.cb-video-card{
  overflow:hidden;
}

.cb-video-box{
  position:relative;
  width:100%;
  height:100%;
  min-height:380px;
  padding:4px; /* Border thickness */
  border-radius:22px;
  overflow:hidden;
}

/* Animated Border */
.cb-video-box::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:conic-gradient(
    #ff8c00 0deg 180deg,
    #0f4c75 180deg 360deg
  );
  animation:cbRotateBorder 4s linear infinite;
}

/* Inner Video Container */
.cb-video-box video{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:18px;
  background:#edf4ff;
}
@keyframes cbRotateBorder{
  from{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(360deg);
  }
}
.cb-video-content{
  padding-top:16px;
}

.cb-video-content h4{
  font-size:1.45rem;
  color:#002d72;
  margin:0 0 10px;
  font-weight:800;
  line-height:1.3;
}

/* =========================================
   TWO COLUMN INFO GRID
========================================= */

.cb-grid-section{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:22px;
}

.cb-info-card{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:26px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  height:100%;
}

.cb-info-card h4{
  font-size:1.4rem;
  color:#002d72;
  margin:0 0 14px;
  font-weight:800;
  line-height:1.3;
}

.cb-list{
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.cb-list li{
  list-style:none;
  position:relative;
  padding:0 0 0 32px;
  color:#091a33;
  line-height:1.55;
  font-size:1rem;
}

.cb-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#ff6a00;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  font-weight:800;
}

/* =========================================
   HIGHLIGHT BAND
========================================= */

.highlight-band{
  margin-top:20px;
  background:linear-gradient(135deg,#002d72,#00163d);
  color:#ffffff;
  padding:10px;
  border-radius:28px;
  line-height:1.7;
  box-shadow:0 14px 35px rgba(0,45,114,0.12);
  font-size:1rem;
}

.highlight-band strong{
  color:#ffb37a;
}

/* =========================================
   FEATURE GRID
========================================= */

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:22px;
}

.feature-box{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:24px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  transition:.3s ease;
  height:100%;
}

.feature-box:hover{
  transform:translateY(-5px);
}

.feature-box h4{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:1.25rem;
  color:#002d72;
  font-weight:800;
}

.feature-box .icon{
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#ff6a00,#ffb347);
  color:#ffffff;
  font-size:1.5rem;
  flex-shrink:0;
}

.feature-box p{
  margin-top:12px;
}

.bottom-grid{
  margin-top:20px;
}

/* =========================================
   FEATURES PAGE
========================================= */

.feature-page{
  padding:55px 0 65px;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);
}

.section-header{
  margin-bottom:24px;
}

.section-header h3{
  font-size:clamp(2rem,3vw,3rem);
  line-height:1.12;
  color:#00163d;
  margin:10px 0 8px;
  font-weight:800;
  letter-spacing:-0.4px;
  max-width:920px;
}

.section-header p{
  max-width:760px;
  color:#4d6486;
  line-height:1.55;
  font-size:1rem;
  margin:0;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}

.feature-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:24px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  transition:.3s ease;
  min-height:200px;
}

.feature-card:hover{
  transform:translateY(-5px);
}

.feature-icon{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;

  background:linear-gradient(135deg,#0f4c75,#3282b8);
  border:2px solid #ff9933;

  color:#ff7a00;
  font-size:1.7rem;

  box-shadow:
    0 10px 25px rgba(0,149,255,.12),
    0 2px 8px rgba(255,153,51,.10);
}

.feature-content{
  flex:1;
}

.feature-content h4{
  margin:0 0 4px;
  font-size:1.08rem;
  line-height:1.2;
  color:#002d72;
  font-weight:800;
}

.feature-content p{
  margin:0;
  color:#4d6486;
  font-size:.98rem;
  line-height:1.4;
  text-align:left;
}

.feature-benefit-section{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}

.benefit-card{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:26px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
  height:100%;
}

.benefit-card h4{
  margin:0 0 14px;
  font-size:1.35rem;
  line-height:1.3;
  color:#002d72;
  font-weight:800;
}

.benefit-list{
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.benefit-list li{
  list-style:none;
  position:relative;
  padding-left:34px;
  color:#091a33;
  font-size:1rem;
  line-height:1.5;
  text-align:left;
}

.benefit-list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:2px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff6a00;
  color:#ffffff;
  font-size:.72rem;
  font-weight:800;
}
.feature-box{
    margin-top:18px;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    flex:1;
}

.video-border{
    position:relative;
    padding:4px;
    border-radius:24px;
    overflow:hidden;
}

.video-border::before{
    content:"";
    position:absolute;
    inset:-50%;
    background:conic-gradient(
        #ff8c00 0deg 180deg,
        #0f4c75 180deg 360deg
    );
    animation:rotateBorder 4s linear infinite;
}

.feature-box-video{
    position:relative;
    z-index:1;
    width:100%;
    max-width:380px;
    display:block;
    border-radius:20px;
    object-fit:cover;
}

@keyframes rotateBorder{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}
/* =========================================
   BRAND LINK
========================================= */

.brand-link{
  text-decoration:none;
  font-weight:700;
  transition:.3s ease;
}

.brand-orange{
  color:#ff6a00;
}

.brand-dark{
  color:#00163d;
}

.brand-link:hover .brand-orange{
  color:#ed2323;
}

.brand-link:hover .brand-dark{
  color:#000000;
}

/* =========================================
   JOIN PAGE
========================================= */

.price-row{
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:10px;
  margin-top:12px;
}

.price-item,
.price1-item,
.price2-item{
  width:48%;
  border:1px solid #ddd;
  min-height:380px;
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  background:#fff;
  display:flex;
  flex-direction:column;
}

.pricing-card{
  flex:1;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}

.price-item{
  width:48%;
  border:1px solid #ddd;
  border-radius:12px;
  padding:14px;
  text-align:center;
  background:#fff;
}

.price1-item{
  position:relative;
  width:48%;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  background:#fff;
  overflow:hidden;
}

.price1-item::before{
  content:"Offer";
  font-weight:900;
  letter-spacing:3px;
  position:absolute;
  top:14px;
  right:-38px;
  width:140px;
  padding:6px 0;
  background:#ff6a00;
  color:white;
  font-size:14px;
  font-weight:700;
  text-align:center;
  transform:rotate(45deg);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.price-item .badge,
.price1-item .badge,
.price2-item .badge{
  display:block;
  width:max-content;
  margin:12px auto;
  text-align:center;
}

.price2-item{
  position:relative;
  width:48%;
  border:1px solid #ddd;
  border-radius:14px;
  padding:14px 12px;
  text-align:center;
  background:#fff;
  overflow:hidden;
}

.price2-item::before{
  content:"Popular";
  position:absolute;
  top:14px;
  right:-38px;
  width:140px;
  padding:6px 0;
  background:green;
  color:white;
  font-size:14px;
  font-weight:700;
  text-align:center;
  transform:rotate(45deg);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

.price{
  font-size:2rem;
  font-weight:900;
  margin:10px 0 2px;
  color:#091a33;
}

.price small{
  font-size:1rem;
  color:#4d6486;
  font-weight:600;
}

.mini-list,
.list{
  list-style:none;
  padding:0;
  margin-top:10px;
  text-align:left;
}

.mini-list{
  flex-grow:1;
}

.mini-list li,
.list li{
  position:relative;
  padding:6px 0 6px 28px;
  font-size:0.95rem;
  line-height:1.4;
  text-align:left;
}

.mini-list li::before,
.list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#dc430ce0;
  color:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.join-btn{
  display:inline-block;
  margin-top:auto;
  padding:12px 22px;
  background:#ff6a00;
  color:#000;
  font-weight:700;
  text-decoration:none;
  border-radius:10px;
  transition:0.3s;
}
.price-item,
.price1-item,
.price2-item{
  display:flex;
  flex-direction:column;
  min-height:420px; /* same height for all cards */
}

.mini-list{
  flex:1;
}

.join-btn{
  margin-top:auto;
  align-self:center; /* optional: center button horizontally */
}

.join-btn:hover{
  background:#e6861f;
  transform:translateY(-2px);
}

.pricing-card:hover,
.price-item:hover,
.price1-item:hover,
.metric:hover,
.card:hover,
.btn:hover,
.join-btn:hover{
  transform:none !important;
  box-shadow:none !important;
}

/* =========================================
   STATS PANEL
========================================= */

.stats-panel{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:24px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
}

.stats-panel h3{
  font-size:1.8rem;
  color:#002d72;
  margin:14px 0 18px;
  font-weight:800;
  letter-spacing:.3px;
}

.stats-panel li{
  position:relative;
  list-style:none;
  padding:6px 0 6px 34px;
  margin:0;
  font-size:1rem;
  line-height:1.35;
  color:#091a33;
  border-bottom:1px solid rgba(0,45,114,0.05);
}

.stats-panel li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:6px;
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ff6a00;
  color:#ffffff;
  font-size:0.78rem;
  font-weight:800;
  box-shadow:none;
}

.stats-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  align-items:flex-start;
  gap:14px;
  margin-top:22px;
}

.metric{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:max-content;
  padding:12px 22px;
  background:linear-gradient(135deg, #002d72, #041b4a);
  border:2px solid #ff6a00;
  border-radius:24px;
  box-shadow:none;
}

.metric strong{
  margin:0;
  color:#ffffff;
  font-size:1.15rem;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}

/* =========================================
   CONTACT
========================================= */

.contact-shell{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.contact-shell .card,
.form-shell{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:28px;
  padding:22px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
}

.contact-shell .card:hover,
.form-shell:hover{
  transform:translateY(-5px);
  transition:0.3s ease;
}

.contact-shell h4,
.form-shell h4{
  font-size:1.35rem;
  font-weight:800;
  color:#002d72;
  margin-bottom:10px;
}

.contact-shell .list{
  display:grid;
  gap:4px;
  margin:0;
  padding:0;
}

.contact-shell .list li{
  list-style:none;
}

.contact-shell .list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:6px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#dc430ce0;
  color:#f7f7f7;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.highlight-band{
  margin-top:12px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff3e8,#ffffff);
  border:1px solid #ff6a00;
  color:#091a33;
  line-height:1.5;
}

.highlight-band strong{
  color:#002d72;
  font-size:1.02rem;
}

.map-view{
  margin-top:12px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,45,114,0.12);
  box-shadow:0 10px 24px rgba(0,45,114,0.08);
}

.map-view iframe{
  width:100%;
  height:240px;
  display:block;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.field{
  display:grid;
  gap:4px;
  font-weight:600;
  color:#002d72;
  font-size:0.92rem;
}

.field input,
.field select,
.field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(0,45,114,0.14);
  background:#ffffff;
  color:#091a33;
  outline:none;
  transition:0.25s ease;
  font-size:0.95rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:#ff6a00;
  box-shadow:0 0 0 4px rgba(255,106,0,0.10);
}

textarea{
  min-height:120px;
  resize:vertical;
}

.btn-primary{
  margin-top:12px;
  width:100%;
  padding:14px 18px;
  border-radius:16px;
  border:none;
  background:#002d72;
  color:#ffffff;
  font-weight:800;
  cursor:pointer;
  transition:0.3s ease;
}

.btn-primary:hover{
  background:#ff6a00;
  transform:translateY(-3px);
}

/* =========================================
   FAQ
========================================= */



/* =========================================
   LOGIN PAGE
========================================= */

.portal-login-wrap{
  padding:55px 0 70px;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9ff 100%);
}

.portal-login-card{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:18px;
  align-items:stretch;
}

.portal-info-panel,
.portal-form-panel{
  background:#ffffff;
  border:1px solid rgba(0,45,114,0.08);
  border-radius:30px;
  padding:28px;
  box-shadow:0 14px 40px rgba(0,45,114,0.08);
}

.portal-info-content{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.portal-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  padding:10px 16px;
  border-radius:999px;
  background:#fff3e8;
  color:#091a33;
  font-size:.92rem;
  font-weight:700;
}

.portal-badge-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ff6a00;
}

.portal-title{
  font-size:50px;
  line-height:1.02;
  color:#00163d;
  margin:0;
  font-weight:800;
  max-width:560px;
}

.portal-description{
  color:#4d6486;
  line-height:1.6;
  font-size:1rem;
  margin:0;
  max-width:580px;
}

.portal-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.portal-feature-card{
  background:#fff7f0;
  border:1.5px solid #002d72;
  border-radius:18px;
  padding:18px;
  transition:.3s ease;
}

.portal-feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,45,114,.10);
}

.portal-feature-card strong{
  display:block;
  color:#002d72;
  font-size:1rem;
  font-weight:800;
  margin-bottom:6px;
}

.portal-small-text{
  color:#4d6486;
  line-height:1.5;
}

.portal-login-switch{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.portal-switch-btn{
  flex:1;
  border:none;
  border-radius:16px;
  padding:14px 16px;
  background:#eef3fb;
  color:#002d72;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;
}

.portal-switch-btn.active{
  background:#ff6a00;
  color:#ffffff;
}

.portal-form-box{
  display:flex;
  flex-direction:column;
}

.portal-form-title{
  font-size:1.8rem;
  color:#00163d;
  margin:0 0 6px;
  font-weight:800;
}

.portal-form-subtitle{
  color:#4d6486;
  margin:0 0 20px;
  line-height:1.5;
}

.portal-form-layout{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.portal-input-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.portal-input-group span{
  font-size:.92rem;
  font-weight:700;
  color:#002d72;
}

.portal-input-group input{
  width:100%;
  padding:14px 16px;
  border-radius:16px;
  border:1px solid rgba(0,45,114,0.12);
  background:#ffffff;
  outline:none;
  transition:.3s ease;
  font-size:.95rem;
}

.portal-input-group input:focus{
  border-color:#ff6a00;
  box-shadow:0 0 0 4px rgba(255,106,0,0.10);
}

.portal-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.portal-remember{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  color:#4d6486;
}

.portal-help-link{
  text-decoration:none;
  color:#ff6a00;
  font-size:.92rem;
  font-weight:700;
}

.portal-btn{
  width:100%;
  text-align:center;
  text-decoration:none;
  border:none;
  border-radius:18px;
  padding:15px 18px;
  font-weight:800;
  cursor:pointer;
  transition:.3s ease;
}

.portal-btn-primary{
  background:#ff6a00;
  color:#ffffff;
}

.portal-btn-primary:hover{
  background:#e65d00;
}

.portal-btn-secondary{
  background:#fff3e8;
  color:#ff6a00;
  border:1px solid rgba(255,106,0,0.18);
}

.portal-btn-secondary:hover{
  background:#ffe4cc;
}

/* =========================================================
   GLOBAL RESPONSIVE FIXES
   KEEP EXISTING DESIGN - MOBILE SAFE
========================================================= */

/* ---------- LARGE TABLET ---------- */
@media (max-width: 1200px){

  .hero-grid,
  .insight-hero,
  .portal-login-card{
    gap:24px;
  }

  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid-4{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

/* ---------- TABLET ---------- */
@media (max-width: 992px){

  /* Main Layouts */
  .hero-grid,
  .insight-hero,
  .cb-about-section,
  .cb-grid-section,
  .feature-benefit-section,
  .contact-shell,
  .portal-login-card{
    grid-template-columns:1fr;
  }

  .grid-4,
  .grid-3,
  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid-2{
    grid-template-columns:1fr;
  }

  /* Hero */
  .hero-copy{
    min-height:auto;
  }

  .visual-card{
    max-width:100%;
    margin:auto;
  }

  .hero-note{
    flex-wrap:wrap;
  }

  .mini-card1{
    min-width:220px;
  }

  /* Section Header */
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }

  .image-box{
    width:100%;
    min-width:100%;
  }

  /* Vision */
  .vision-layout{
    flex-direction:column;
    gap:24px;
  }

  .cb-image-box1{
    width:280px;
    margin:auto;
  }

  /* Pricing */
  .price-row{
    flex-direction:column;
  }

  .price-item,
  .price1-item,
  .price2-item{
    width:100%;
  }

  /* FAQ */
  .faq-item{
    width:100%;
  }

  /* Portal */
  .portal-feature-grid{
    grid-template-columns:1fr;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 768px){

  /* Section Spacing */
  .hero,
  .feature-page,
  .portal-login-wrap,
  .insight-section{
    padding-left:0;
    padding-right:0;
  }

  /* Typography */
  .hero h2{
    font-size:clamp(1.8rem,8vw,2.8rem);
    line-height:1.15;
  }

  .section-header h3,
  .insight-card h3,
  .cb-text-card h3{
    font-size:clamp(1.5rem,6vw,2rem);
  }

  .portal-title{
    font-size:2.2rem;
  }

  /* Cards */
  .card,
  .cb-about-card,
  .cb-info-card,
  .feature-box,
  .feature-card,
  .benefit-card,
  .portal-info-panel,
  .portal-form-panel,
  .stats-panel,
  .timeline{
    padding:20px;
  }

  /* Hero Buttons */
  .nav-cta{
    flex-direction:column;
    gap:12px;
    max-width:100%;
    padding-left:0;
  }

  .btn{
    width:100%;
    min-width:unset;
  }

  /* KPI Cards */
  .hero-note{
    flex-direction:column;
  }

  /* Grids */
  .grid-3,
  .grid-4,
  .feature-grid,
  .benefit-grid,
  .employment-grid{
    grid-template-columns:1fr;
  }

  /* Features */
  .feature-card{
    min-height:auto;
  }

  /* Contact */
  .form-grid{
    grid-template-columns:1fr;
  }

  /* Image Cards */
  .insight-image-card img{
    height:300px;
  }

  .cb-video-box{
    min-height:240px;
  }

  /* Login */
  .portal-form-row{
    flex-direction:column;
    align-items:flex-start;
  }

  /* Stats */
  .stats-grid{
    justify-content:center;
  }

  .metric{
    min-width:180px;
  }

  /* Timeline */
  .timeline-step{
    padding:14px;
  }

  .step-no{
    width:38px;
    height:38px;
    min-width:38px;
  }
}

/* ---------- SMALL MOBILE ---------- */
@media (max-width: 480px){

  .hero-copy,
  .card,
  .cb-about-card,
  .cb-info-card,
  .feature-box,
  .feature-card,
  .benefit-card,
  .portal-info-panel,
  .portal-form-panel,
  .timeline,
  .stats-panel{
    padding:18px;
    border-radius:22px;
  }

  .hero h2{
    font-size:1.9rem;
  }

  .section-header h3,
  .portal-title{
    font-size:1.7rem;
  }

  .portal-form-title{
    font-size:1.4rem;
  }

  .visual-card{
    height:540px;
  }

  .wa-header{
    height:84px;
    padding:24px 14px 12px;
  }

  .wa-avatar{
    width:44px;
    height:44px;
  }

  .cb-bottom-logo{
    width:90%;
  }

  .cb-image-box1{
    width:220px;
  }

  .metric{
    width:100%;
    max-width:260px;
    min-width:auto;
  }

  .metric strong{
    font-size:1rem;
    text-align:center;
  }

  .price-item,
  .price1-item,
  .price2-item{
    min-height:auto;
  }

  .map-view iframe{
    height:180px;
  }

  .faq-question{
    font-size:.92rem;
    padding:12px;
  }

  .faq-answer{
    font-size:.9rem;
  }

  .feature-icon{
    width:48px;
    height:48px;
    min-width:48px;
    font-size:1.25rem;
  }
}

:root{
  --cb-page-top-gap: 24px;
  --cb-page-bottom-gap: 24px;
}

/* Uniform gap after hero/header */
.section-header{
  margin-bottom: var(--cb-page-top-gap) !important;
}

/* Uniform spacing before the body blocks */
.cb-about-section,
.cb-grid-section,
.grid-3,
.feature-grid,
.feature-benefit-section,
.bottom-grid,
.stats-grid,
.contact-shell,
.form-grid,
.portal-login-card{
  margin-top: var(--cb-page-top-gap) !important;
}

/* Uniform gap between page content and footer */
main{
  padding-bottom: var(--cb-page-bottom-gap) !important;
}

/*about*/

.cd-grid-8{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.cd-feature-box{
    background:#fff;
    border:1px solid #e6ebf2;
    border-radius:30px;
    padding:22px;
    box-shadow:0 4px 15px rgba(0,0,0,.05);
}

.cd-feature-content{
    display:flex;
    align-items:flex-start;
    gap:18px;
}

.cd-icon{
    width:68px;
    height:68px;
    min-width:68px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2f6fa7;
    border:2px solid #ff7a00;
    border-radius:18px;
    font-size:30px;
}

.cd-feature-box h4{
    margin:0 0 10px;
    color:#002f7f;
    font-size:22px;
    font-weight:700;
}

.cd-feature-box p{
    margin:0;
    color:#566b8d;
    font-size:18px;
    line-height:1.5;
}

@media(max-width:992px){
    .cd-grid-8{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .cd-grid-8{
        grid-template-columns:1fr;
    }
}

/*indexpage*/