/* =====================================================
   SupportStack Academy — Design Tokens
   ===================================================== */
:root {
  --c-navy-950: #060d1f;
  --c-navy-900: #0c1b3a;
  --c-navy-800: #132650;
  --c-royal-700: #f77f05;
  --c-royal-600: #ffc93c;
  --c-royal-500: #ffc93c;
  --c-yellow: #ffc93c;
  --c-yellow-dark: #e6ad1f;
  --c-orange: #ff6b35;
  --c-orange-dark: #e5501c;
  --c-white: #ffffff;
  --c-ink: #101826;
  --c-slate-50: #f5f7fb;
  --c-slate-100: #eef2f9;
  --c-slate-200: #e3e8f2;
  --c-muted: #5b6478;

  --font-display: "Poppins", sans-serif;
  --font-body: "Montserrat", sans-serif;

  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;

  --shadow-card: 0 10px 30px rgba(12, 27, 58, 0.08);
  --shadow-card-hover: 0 18px 40px rgba(12, 27, 58, 0.14);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.65;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
.brand-text,
.navbar-nav .nav-link,
.btn {
  font-family: var(--font-display);
}

h2 {
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
h3 {
  font-weight: 600;
  font-size: 1.15rem;
}

a {
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--c-royal-700);
  color: #fff;
  padding: 10px 16px;
  z-index: 2000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
  top: 0;
}

:focus-visible {
  outline: 3px solid var(--c-yellow);
  outline-offset: 2px;
}

/* =====================================================
   Header / Navbar
   ===================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.navbar {
  padding: 0.7rem 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--c-royal-600), var(--c-royal-700));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 6px 16px rgba(47, 111, 237, 0.35);
}
.brand-text {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.brand-accent {
  color: var(--c-yellow);
  font-weight: 600;
  margin-left: 2px;
}

.navbar-nav .nav-link {
  color: #060d1f;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.55rem 0.85rem !important;
  border-radius: 8px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #ff6b35;
  background: rgba(255, 255, 255, 0.06);
}

.nav-auth {
  margin-left: 0.5rem;
}

.btn-ghost-nav {
  background: var(--c-orange);
  color: #fff;
  padding: 0.45rem 1.1rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.btn-ghost-nav:hover {
  background: var(--c-yellow);
  color: var(--c-navy-950);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 107, 53, 0.35);
}

.btn-cta-nav {
  background: var(--c-yellow);
  color: var(--c-navy-950);
  padding: 0.45rem 1.15rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.btn-cta-nav:hover {
  background: var(--c-orange);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(255, 107, 53, 0.35);
}

.navbar-toggler {
  border: none;
  background: transparent;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #060d1f !important;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.hamburger-bar {
  width: 24px;
  height: 2.5px;
  background: #060d1f !important;
  border-radius: 2px;
  transition: background-color 0.2s ease;
  color: #060d1f !important;
}
.navbar-toggler:hover .hamburger-bar {
  background: var(--c-yellow);
}

/* Offcanvas */
.offcanvas {
  background: var(--c-navy-950);
  width: 290px;
}
.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.1rem 1.25rem;
}
.offcanvas-body .nav-link {
  color: rgba(255, 255, 255, 0.85);
  padding: 0.75rem 0.5rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.offcanvas-body .nav-link i {
  width: 18px;
  color: var(--c-yellow);
}
.offcanvas-body .nav-link:hover {
  color: var(--c-yellow);
  padding-left: 0.75rem;
}

/* =====================================================
   Hero
   ===================================================== */
.hero {
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(255, 201, 60, 0.1),
      transparent 45%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(255, 107, 53, 0.1),
      transparent 40%
    ),
    linear-gradient(
      160deg,
      var(--c-navy-950) 0%,
      var(--c-navy-900) 55%,
      var(--c-navy-800) 100%
    );
  padding: 4.5rem 0 5rem;
  color: #fff;
  position: relative;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 201, 60, 0.12);
  border: 1px solid rgba(255, 201, 60, 0.4);
  color: var(--c-yellow);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 1.3rem;
}
.badge-live .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-yellow);
  display: inline-block;
}

.hero-title {
  font-size: 2.85rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.2rem;
}
.hero-sub {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
  margin-bottom: 1.8rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 2.2rem;
}

.btn-accent {
  background: var(--c-orange);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.6rem;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
.btn-accent:hover {
  background: var(--c-yellow);
  color: var(--c-navy-950);
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(255, 201, 60, 0.3);
}

.btn-outline-light-cta {
  background: transparent;
  color: #fff;
  font-weight: 700;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 0.75rem 1.6rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}
.btn-outline-light-cta:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateY(-3px);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
}
.hero-meta-item {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-meta-item i {
  color: var(--c-yellow);
}

/* Signature element — Ops Console */
.ops-console {
  background: #0a1730;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45);
  font-family: "Courier New", monospace;
}
.ops-console-bar {
  background: #0f1e3d;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ops-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red {
  background: #ff5f57;
}
.dot-yellow {
  background: #febc2e;
}
.dot-green {
  background: #28c840;
}
.ops-console-title {
  margin-left: 10px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
}
.ops-console-body {
  padding: 1.3rem 1.2rem 1.5rem;
}
.ops-line {
  font-size: 0.85rem;
  color: #8fd694;
  margin-bottom: 1rem;
}
.ops-prompt {
  color: var(--c-yellow);
  margin-right: 6px;
}
.ops-line-muted {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.78rem;
  margin-bottom: 0;
}

.ops-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1rem;
}
.ops-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ops-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.ops-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  font-family: var(--font-display);
}
.text-success-glow {
  color: #3ed97f;
}
.text-yellow-glow {
  color: var(--c-yellow);
}
.text-orange-glow {
  color: var(--c-orange);
}

/* =====================================================
   Section shells
   ===================================================== */
.section {
  padding: 5rem 0;
}
.section-light {
  background: var(--c-white);
}
.section-slate {
  background: var(--c-slate-50);
}
.section-navy {
  background: linear-gradient(160deg, var(--c-navy-950), var(--c-navy-900));
  color: #fff;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 2.2rem;
}
.eyebrow {
  display: inline-block;
  color: var(--c-royal-700);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.eyebrow-light {
  color: var(--c-yellow);
}
.section-lead {
  color: var(--c-muted);
  font-size: 1rem;
  margin-top: 0.6rem;
}
.section-lead-light {
  color: rgba(255, 255, 255, 0.72);
}

/* =====================================================
   About / Values / Stats
   ===================================================== */
.value-card {
  background: var(--c-white);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 2rem 1.7rem;
  height: 100%;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-royal-500);
}
.value-card i {
  font-size: 1.6rem;
  color: var(--c-royal-700);
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(29, 78, 216, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}
.value-card h3 {
  margin-bottom: 0.6rem;
}
.value-card p {
  color: var(--c-muted);
  font-size: 0.94rem;
  margin: 0;
}

.stats-strip {
  background: linear-gradient(135deg, var(--c-navy-950), var(--c-navy-900));
  border-radius: var(--radius-lg);
  padding: 2.5rem 1.5rem;
}
.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
}
.stat-box i {
  font-size: 1.5rem;
  color: var(--c-yellow);
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
}
.stat-label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
}

/* =====================================================
   Feature cards
   ===================================================== */
.feature-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  padding: 2rem 1.7rem;
  height: 100%;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--c-yellow);
}
.feature-card i {
  font-size: 1.5rem;
  color: var(--c-yellow);
  margin-bottom: 1rem;
  display: block;
}
.feature-card h3 {
  color: #fff;
  margin-bottom: 0.5rem;
}
.feature-card p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.92rem;
  margin: 0;
}

/* =====================================================
   Highlight cards
   ===================================================== */
.highlight-card {
  background: var(--c-white);
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-md);
  padding: 1.8rem 1rem;
  text-align: center;
  height: 100%;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}
.highlight-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-card-hover);
  background: linear-gradient(160deg, #ffffff, var(--c-slate-50));
}
.highlight-card i {
  font-size: 1.6rem;
  color: var(--c-orange);
  margin-bottom: 0.9rem;
  display: block;
}
.highlight-card h3 {
  font-size: 0.95rem;
  margin: 0;
}

/* =====================================================
   Topics
   ===================================================== */
.topics-tabs {
  gap: 0.5rem;
  flex-wrap: wrap;
}
.topics-tabs .nav-link {
  color: var(--c-ink);
  font-weight: 600;
  font-size: 0.88rem;
  border: 1.5px solid var(--c-slate-200);
  border-radius: 50px;
  padding: 0.55rem 1.3rem;
  background: #fff;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.topics-tabs .nav-link:hover {
  border-color: var(--c-royal-600);
  color: var(--c-royal-700);
}
.topics-tabs .nav-link.active {
  background: var(--c-royal-700);
  color: #fff;
  border-color: var(--c-royal-700);
}

.col-lg-2-4 {
  flex: 0 0 auto;
  width: 20%;
}

.topic-card {
  background: #fff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  height: 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.topic-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--c-orange);
}
.topic-card i {
  font-size: 1.4rem;
  color: var(--c-royal-700);
  margin-bottom: 0.7rem;
  display: block;
}
.topic-card span {
  font-weight: 600;
  font-size: 0.88rem;
}

/* =====================================================
   Registration timeline
   ===================================================== */
.process-section{
    background:#f8fafc;
}

.process-badge{
    display:inline-block;
    background:#fff;
    color:#f77f05;
    padding:8px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
}

.process-timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

.process-timeline:before{
    content:'';
    position:absolute;
    left:40px;
    top:0;
    width:3px;
    height:100%;
    background:#d7dbe7;
}

.process-item{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:25px;
    margin-bottom:35px;
}

.process-icon{
    width:80px;
    height:80px;
    min-width:80px;
    border-radius:50%;
    background:linear-gradient(135deg,#fdc806,#f77f05);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    z-index:2;
    box-shadow:0 10px 30px rgba(13,110,253,.3);
}

.process-icon.finish{
    background:linear-gradient(135deg,#f77f05,#fdc806);
}

.process-content{
    background:#fff;
    width:100%;
    padding:25px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.process-content:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.process-content span{
    color:#fdc806;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:1px;
}

.process-content h5{
    margin:8px 0 10px;
    font-weight:700;
}

.process-content p{
    margin:0;
    color:#6c757d;
    line-height:1.7;
}

@media(max-width:768px){

.process-timeline:before{
    left:30px;
}

.process-item{
    gap:18px;
}

.process-icon{
    width:60px;
    height:60px;
    min-width:60px;
    font-size:22px;
}

.process-content{
    padding:18px;
}

.process-content h5{
    font-size:18px;
}

}









.training-section{
    background:#f8fafc;
}

.training-badge{
    display:inline-block;
    padding:8px 22px;
    border-radius:50px;
    background:#fff;
    color:#f77f05;
    font-weight:600;
    font-size:14px;
}

.section-title{
    font-size:38px;
    font-weight:700;
}

.section-subtitle{
    max-width:760px;
    margin:auto;
    color:#6c757d;
    line-height:1.8;
}

.program-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 15px 40px rgba(0,0,0,.07);
    transition:.35s;
    border:1px solid #eef2f7;
}

.program-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.card-heading{
    display:flex;
    align-items:center;
    margin-bottom:30px;
}

.heading-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:linear-gradient(135deg,#fdc806,#f77f05);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin-right:18px;
}

.heading-icon.service{
    background:linear-gradient(135deg,#f77f05,#fdc806);
}

.card-heading h4{
    margin:0;
    font-size:26px;
    font-weight:700;
}

.card-heading p{
    margin:5px 0 0;
    color:#6c757d;
}

.program-item{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:15px 0;
    border-bottom:1px solid #edf2f7;
    font-size:16px;
    line-height:1.6;
    transition:.3s;
}

.program-item:last-child{
    border-bottom:none;
}

.program-item:hover{
    padding-left:10px;
}

.program-item i{
    color:#fdc806;
    margin-top:4px;
    font-size:16px;
    min-width:18px;
}

@media(max-width:991px){

.section-title{
    font-size:30px;
}

.program-card{
    padding:25px;
}

.card-heading h4{
    font-size:22px;
}

.heading-icon{
    width:60px;
    height:60px;
    font-size:24px;
}

}

@media(max-width:576px){

.section-title{
    font-size:26px;
}

.program-item{
    font-size:15px;
}

}

/* =====================================================
   Testimonials
   ===================================================== */
.testimonial-card {
  background: #fff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 2rem 1.7rem;
  height: 100%;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;

  /* Add these */
  display: flex;
  flex-direction: column;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.testimonial-rating {
  color: var(--c-yellow-dark);
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}

.testimonial-card p {
  color: var(--c-ink);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 1.3rem;
  /* Optional */
  flex-grow: 1;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;

  /* This pushes it to the bottom */
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid #eef2f7; /* Optional separator */
}

.avatar-circle {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-royal-600), var(--c-royal-700));
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.testimonial-person strong {
  display: block;
  font-size: 0.92rem;
}

.testimonial-person span {
  font-size: 0.8rem;
  color: var(--c-muted);
}

/* =====================================================
   FAQ
   ===================================================== */
.custom-accordion .accordion-item {
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-md) !important;
  margin-bottom: 0.9rem;
  overflow: hidden;
}
.custom-accordion .accordion-button {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--c-ink);
  background: #fff;
  padding: 1.1rem 1.4rem;
}
.custom-accordion .accordion-button:not(.collapsed) {
  color: var(--c-royal-700);
  background: rgba(29, 78, 216, 0.05);
  box-shadow: none;
}
.custom-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: var(--c-yellow);
}
.custom-accordion .accordion-body {
  color: var(--c-muted);
  font-size: 0.92rem;
  padding: 1rem 1.4rem 1.3rem;
}

/* =====================================================
   Contact
   ===================================================== */
.contact-form {
  background: #fff;
  border: 1px solid var(--c-slate-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.form-label {
  font-weight: 600;
  font-size: 0.88rem;
}
.form-control {
  border-radius: 10px;
  border: 1.5px solid var(--c-slate-200);
  padding: 0.65rem 0.9rem;
}
.form-control:focus {
  border-color: var(--c-royal-600);
  box-shadow: 0 0 0 0.2rem rgba(47, 111, 237, 0.15);
}

.map-placeholder {
  background: var(--c-slate-100);
  border: 1.5px dashed var(--c-slate-200);
  border-radius: var(--radius-lg);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--c-muted);
}
.map-placeholder i {
  font-size: 2.2rem;
  color: var(--c-royal-600);
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0.9rem;
  font-size: 0.92rem;
}
.contact-info-item i {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(29, 78, 216, 0.08);
  color: var(--c-royal-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* =====================================================
   Footer
   ===================================================== */
.site-footer {
  background: var(--c-navy-950);
  color: rgba(255, 255, 255, 0.72);
  padding: 4rem 0 1.5rem;
}
.footer-about {
  font-size: 0.9rem;
  margin: 1rem 0 1.2rem;
  max-width: 320px;
}
.footer-heading {
  color: #fff;
  font-size: 1rem;
  margin-bottom: 1.1rem;
}
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.68);
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}
.footer-links a:hover {
  color: var(--c-yellow);
  padding-left: 4px;
}
.footer-links i {
  width: 18px;
  color: var(--c-yellow);
  margin-right: 6px;
}

.social-icons {
  display: flex;
  gap: 10px;
}
.social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}
.social-icons a:hover {
  background: var(--c-orange);
  transform: translateY(-3px);
  color: #fff;
}

.footer-divider {
  border-color: rgba(255, 255, 255, 0.1);
  margin: 2.5rem 0 1.3rem;
}
.footer-bottom {
  text-align: center;
  font-size: 0.82rem;
}

/* =====================================================
   Floating buttons
   ===================================================== */
.float-btn {
  position: fixed;
  right: 22px;
  z-index: 1040;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
  border: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.float-btn:hover {
  transform: translateY(-4px) scale(1.05);
  color: #fff;
}

.float-whatsapp {
  bottom: 96px;
  background: #25d366;
}
.float-call {
  bottom: 32px;
  background: var(--c-royal-700);
}
.float-top {
  bottom: 96px;
  right: 22px !important;
  background: var(--c-navy-900);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease,
    transform 0.2s ease;
}
.float-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}









/* ===========================
   Journey Section
=========================== */

.journey-section{
    background:#f8fafc;
    overflow:hidden;
}

.journey-title{
    color:#1e2a4a;
    font-weight:700;
}

.journey-subtitle{
    color:#6c757d;
    max-width:700px;
    margin:auto;
}

/*============================
 Phase Tracker
============================*/

.journey-phase-tracker{
    position:relative;
}

.phase-line{
    position:absolute;
    top:30px;
    left:0%;
    /* right:8%; */
    height:3px;
    background:linear-gradient(90deg,#0d6efd,#20c997,#ffc107,#198754);
    z-index:1;
}

.phase-item{
    position:relative;
    z-index:2;
}

.phase-icon-wrap{
    width:65px;
    height:65px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin:auto;
    border:4px solid #fff;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    transition:.35s;
}

.phase-item:hover .phase-icon-wrap{
    transform:translateY(-6px);
}

.phase-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    display:inline-block;
    margin-top:10px;
}

.phase-label{
    font-size:15px;
    font-weight:600;
    margin-top:10px;
}

/*============================
 Timeline
============================*/

.journey-timeline{
    position:relative;
}

.timeline-line{
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:3px;
    transform:translateX(-50%);
    background:repeating-linear-gradient(
    to bottom,
    #d9dce3 0,
    #d9dce3 10px,
    transparent 10px,
    transparent 18px);
}

.timeline-row{
    position:relative;
    margin-bottom:25px;
}

.timeline-node{
    width:18px;
    height:18px;
    border-radius:50%;
    border:4px solid #fff;
    box-shadow:0 0 0 3px currentColor;
    position:relative;
    z-index:3;
}

/*============================
 Cards
============================*/

.journey-card{
    background:#fff;
    border-radius:18px;
    padding:20px;
    border:1px solid #edf1f7;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.35s;
    height:100%;
}

.journey-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.10);
}

.journey-card-success{
    background:#f5fff7;
}

.step-icon{
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:18px;
    flex-shrink:0;
}

.step-badge{
    font-size:12px;
    font-weight:700;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    font-size:13px;
    font-weight:600;
}

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

.journey-banner{
    background:linear-gradient(135deg,#eef5ff,#ffffff);
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.banner-icon{
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0d6efd;
    color:#fff;
    font-size:22px;
}

/*============================
 Brand Colors
============================*/

.bg-indigo{background:#6610f2!important;color:#fff;}
.bg-indigo-subtle{background:#ece2fd!important;}
.text-indigo{color:#6610f2!important;}
.border-indigo{border-color:#6610f2!important;}

.bg-teal{background:#20c997!important;color:#fff;}
.bg-teal-subtle{background:#d8f8ed!important;}
.text-teal{color:#20c997!important;}
.border-teal{border-color:#20c997!important;}

.bg-purple{background:#6f42c1!important;color:#fff;}
.bg-purple-subtle{background:#ece5fa!important;}
.text-purple{color:#6f42c1!important;}
.border-purple{border-color:#6f42c1!important;}

.bg-pink{background:#d63384!important;color:#fff;}
.bg-pink-subtle{background:#fde7f2!important;}
.text-pink{color:#d63384!important;}
.border-pink{border-color:#d63384!important;}

/*============================
 Tablet
============================*/

@media(max-width:991px){

.timeline-line{
    left:28px;
}

.timeline-node{
    margin:auto;
}

.phase-icon-wrap{
    width:55px;
    height:55px;
    font-size:20px;
}

.journey-card{
    margin-left:18px;
}

}

/*============================
 Mobile
============================*/

@media(max-width:767px){

/* show tracker in mobile */
.journey-phase-tracker{
    overflow-x:auto;
    padding-bottom:15px;
}

.journey-phase-tracker .row{
    flex-wrap:nowrap;
    min-width:650px;
}

.phase-line{
    left:40px;
    right:40px;
}

/* timeline left */
.timeline-line{
    left:18px;
}

.timeline-row{
    margin-bottom:18px;
}

.timeline-row .col-lg-2{
    display:none!important;
}

.journey-card{
    margin-left:22px;
    padding:16px;
}

.step-icon{
    width:44px;
    height:44px;
    font-size:16px;
}

.banner-icon{
    width:48px;
    height:48px;
}

.journey-banner{
    text-align:center;
}

.journey-banner .btn{
    width:100%;
}

}

/*============================
 Small Mobile
============================*/

@media(max-width:575px){

.journey-title{
    font-size:28px;
}

.journey-subtitle{
    font-size:15px;
}

.phase-label{
    font-size:13px;
}

.journey-card h6{
    font-size:15px;
}

.journey-card p{
    font-size:13px;
}

.step-badge{
    font-size:11px;
}

}