/* ==========================================
   DESIGN TOKENS & VARIABLES
   ========================================== */
:root {
  --primary: #2d5bff;
  --primary-hover: #1e46d0;
  --primary-light: #eff6ff;
  --secondary: #10b981;
  --dark-blue: #0a1b44;
  --text-main: #334155;
  --text-muted: #64748b;
  --white: #ffffff;
  --bg-light: #f8fafc;
  --form-bg: #eff6ff;
  --border: none !important;
  --error: #ef4444;

  --font-heading: "Outfit", sans-serif;
  --font-body: "Outfit", sans-serif;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.02);
  --shadow-md:
    0 10px 25px -5px rgba(45, 91, 255, 0.08),
    0 8px 10px -6px rgba(45, 91, 255, 0.08);
  --shadow-lg: 0 20px 40px -15px rgba(10, 27, 68, 0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================
   RESET & BASE STYLES
   ========================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
    font-family: var(--font-body);
  overflow-x: clip;
  width: 100%;
}

.events-page,
.events-page * {
    font-family: 'Outfit', sans-serif !important;
}

body {
    font-family: var(--font-body);
  font-family: var(--font-body);
  color: var(--text-main);
  background-color: var(--white);
  min-height: 100vh;
  position: relative;
  line-height: 1.5;
}

img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================
   BACKGROUND DECORATION (Grid & Floating Shapes)
   ========================================== */
.grid-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-size: 50px 50px;
  /* background-image:
    linear-gradient(to right, rgba(45, 91, 255, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 91, 255, 0.07) 1px, transparent 1px); */
  pointer-events: none;
}
/* .art-craftimg{
  width: 30.4025rem;
height: 25rem;
} */

.value-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 3rem;
}
.floating-shape {
  position: absolute;
  z-index: -5;
  pointer-events: none;
  opacity: 0.85;
}

#bg-ring-left {
  top: 48%;
  left: 45%;
  width: 250px;
  height: 250px;
  border: 30px solid rgba(45, 91, 255, 0.05);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

#bg-dot-right {
  top: 25%;
  right: 2%;
  width: 28px;
  height: 28px;
  background-color: #0c205a;
  border-radius: 50%;
}

#bg-ring-right {
  top: 35%;
  right: 18%;
  width: 100px;
  height: 100px;
  border: 15px solid rgba(45, 91, 255, 0.05);
  border-radius: 50%;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  color: var(--dark-blue);
  font-weight: 700;
  line-height: 1.15;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */
.btn {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.85rem 1.85rem;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 20%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(30deg);
  transition: box-shadow 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.btn:hover::after {
  transform: translate(600%, 0) rotate(30deg);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(45, 91, 255, 0.2);
}

.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 91, 255, 0.3);
}

.btn-secondary-filled {
  background-color: var(--primary);
  color: var(--white);
  padding: 0.9rem 1.85rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(45, 91, 255, 0.15);
}

.btn-secondary-filled:hover {
  background-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45, 91, 255, 0.25);
}

.btn-outline {
  background-color: var(--white);
  color: var(--dark-blue);
  border: 1px solid var(--border-color);
  padding: 0.9rem 1.85rem;
  border-radius: 50px;
}

.btn-outline:hover {
  background-color: var(--bg-light);
  border-color: var(--dark-blue);
  transform: translateY(-2px);
}

.btn-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

.play-icon {
  color: var(--dark-blue);
}

/* ==========================================
   HEADER / NAVIGATION
   ========================================== */
.header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  position: relative;
}

/* Logo Setup */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  margin-right: auto;
}

.logo-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
}

.logo-svg {
  width: 100%;
  height: 138%;
  object-fit: contain;
  padding-bottom: 18px;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.logo-title {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1;
  letter-spacing: -0.5px;
}

.logo-subtitle-container {
  width: 110px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin-top: 1px;
}

.logo-subtitle {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.1px;
  padding-left: 100%;
  white-space: nowrap;
  animation: logoMarquee 15s linear infinite;
}

@keyframes logoMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

/* Nav Links */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-right: 3rem;
}

.nav-link {
  text-decoration: none;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--dark-blue);
  transition: var(--transition);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: var(--primary);
}

.nav-link.active {
  color: var(--primary);
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: var(--primary);
  border-radius: 2px;
}

/* Header Container Position relative to align mega menu */
.header-container {
  position: relative;
}

/* Nav Item Dropdown Wrapper (No position relative so mega menu spans header-container width) */
.nav-dropdown-wrapper {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
}

.nav-link.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
    .mega-menu {
        background-color: (#ffffff) !important;
        /* backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px); */
    }
}


/* Mega Menu Container */
.mega-menu {
  position: absolute;
  top: 100%; /* Sits directly below the sticky header bottom border line */
  left: 50%;
  transform: translateX(-50%) translateY(10px) translateZ(0);
  width: 900px;
  max-width: 90vw;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 16px;
  box-shadow: 0 30px 60px -15px rgba(10, 27, 68, 0.15);
  padding: 2.5rem 3rem;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) translateZ(0); /* Hardware accelerated compositing layer */
  transition:
    opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.3s;
  pointer-events: none;
  will-change: transform, opacity;
}

@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .mega-menu {
    background-color: rgba(
      255,
      255,
      255,
      0.72
    ); /* Premium 72% glassmorphism opacity */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

.nav-dropdown-wrapper:hover .mega-menu,
.nav-dropdown-wrapper.active-dropdown .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) translateZ(0);
  pointer-events: auto;
}

/* Mega Menu Grid Layout */
.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.mega-menu-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0 2rem;
}

.mega-menu-col:not(:first-child) {
  border-left: 1px solid rgba(226, 232, 240, 0.8);
}

.mega-menu-col:first-child {
  padding-left: 0;
}

.mega-menu-col:last-child {
  padding-right: max(2rem, calc((100vw - 1440px) / 2));
}

.mega-menu-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0 0 0.5rem 0;
  letter-spacing: normal;
  white-space: nowrap; /* Forces headings to stay in a single line */
}

.mega-menu-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.mega-menu-links a {
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: var(--transition);
  display: block;
  line-height: 1.35;
}

.mega-menu-links a:hover {
  color: var(--primary);
  transform: translateX(3px);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

.mobile-menu-toggle span {
  width: 100%;
  height: 3px;
  background-color: var(--dark-blue);
  border-radius: 3px;
  transition: var(--transition);
}

/* ==========================================
   HERO SECTION LAYOUT (Pixel-Perfect Alignment)
   ========================================== */
.hero-section {
    width: 100%;
    height: 630px;
    background-image: url("assets/Homepage hero banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 1.5rem;
    display: grid;
    grid-template-columns: 1.15fr 1fr; /* 53.5% vs 46.5% split to prevent "Educational Ecosystem" text wrapping */
    align-items: flex-start;
    gap: 1rem;
}

/* Left Column: Hero Text Content */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 5;
}

.hero-title {
  margin-top: 55px;
  font-size: clamp(2.8rem, 4vw, 3rem);
  margin-bottom: 2rem;
  color: var(--dark-blue);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
}

.gradient-text {
  background: linear-gradient(135deg, #2d5bff 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-green {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.gradient-text-blue {
  background: linear-gradient(135deg, #2d5bff 0%, #1e46d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.rotating-words-container {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  vertical-align: bottom;
  height: 1.15em;
  overflow: hidden;
  position: relative;
  min-width: 5.2em;
}

.rotating-words-wrapper {
  display: flex;
  flex-direction: column;
  animation: rotateWords 7.5s infinite cubic-bezier(0.76, 0, 0.24, 1);
}

.rotating-words-wrapper span {
  height: 1.15em;
  line-height: 1.15em;
  display: block;
}

@keyframes rotateWords {
  0%,
  25% {
    transform: translateY(0);
  }
  30%,
  55% {
    transform: translateY(-1.15em);
  }
  60%,
  85% {
    transform: translateY(-2.3em);
  }
  90%,
  100% {
    transform: translateY(-3.45em);
  }
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: 1.25rem;
  max-width: 520px;
}

.hero-cta-group {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
  align-items: center;
}

.hero-cta-group .btn-outline {
  background-color: var(--white);
  color: var(--dark-blue);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.hero-cta-group .btn-outline:hover {
  background-color: var(--bg-light);
  border-color: var(--dark-blue);
}

/* Bulletproof rule for Watch Demo button to override all global styles */
#btn-watch-demo {
  color: var(--dark-blue) !important;
  background-color: var(--white) !important;
  border: 1.5px solid #9facc0;
  border-radius: 12px !important;
}

#btn-watch-demo:hover {
  background-color: var(--bg-light) !important;
  border-color: var(--dark-blue) !important;
}

/* Right Column: Overlapping Interactive Layout Area */
.hero-interactive-area {
  position: relative;
  width: 100%;
  max-width: 550px;
  margin-left: 0;
  margin-right: auto;
  justify-content: center;
  height: 530px;
  display: flex;
  margin-left: 0;
  align-items: center;
}

.hero-form-container {
  margin-top: 80px;
}

/* Overlapping Card Form Container */
/* removed bad form container */

/* removed bad form card */

.form-header {
  background-color: #eaeff8;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid rgba(45, 91, 255, 0.1);
  text-align: center;
}
.form-header {
  background-color: #f1f5f9;
  padding: 1.2rem 1rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.form-body {
    padding: 1.25rem 1.5rem;
    background-color: var(--white);
}
.netw-sec {
    
    justify-content: center; /* Horizontal center */
    align-items: center;     /* Vertical center */
    text-align: center;
    padding-top: 5rem;
}
.form-title {
  font-size: 1.12rem;
  font-weight: 800;
  text-align: center;
  color: var(--dark-blue);
  margin: 0;
  letter-spacing: -0.2px;
}

.demo-form {
    display: flex;
    flex-direction: column;
    gap: 0.4rem !important;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.form-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark-blue);
}

.required {
  color: var(--error);
}

.form-input,
.form-select {
  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--dark-blue);
  outline: none;
  transition: var(--transition);
}

.form-input::placeholder {
  color: #94a3b8;
}

.form-input:focus,
.form-select:focus {
  border: none !important;
  outline: none;
}

/* Custom Select Dropdown Chevron styling */
.select-wrapper {
  position: relative;
  width: 100%;
}

.select-wrapper::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230A1B44' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  pointer-events: none;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* padding-right: 2.5rem; */
  cursor: pointer;
}

.form-select:invalid,
.form-select option[value=""] {
  color: #94a3b8;
}

/* Error States */
.form-group.invalid .form-input {
  border-color: var(--error);
}

.error-message {
  font-size: 0.72rem;
  color: var(--error);
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  line-height: 1;
  z-index: 5;
}

.form-group.invalid .error-message {
  display: block;
}

/* Submit Button */
.btn-submit {
  background-color: #1f26e2;
  color: var(--white);
  width: 100%;
  padding: 0.8rem;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  margin-top: 0.4rem;
  font-size: 0.98rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 91, 255, 0.25);
  transition: var(--transition);
}
.btn-dwn{
  background-color: #1f26e2;
  color: var(--white);
  padding: 0.8rem 1.85rem;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 0.99rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 91, 255, 0.25);
  transition: var(--transition);
}

.btn-submit:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(45, 91, 255, 0.35);
}

/* Main Hero Banner Image (Grid + Blob + Kids) */
.hero-banner-image {
  display: none; /* Hidden on desktop, shown on mobile */
  position: absolute;
  right: 45px;
  top: 36%;
  transform: translateY(-50%) scale(1.15);
  transform-origin: right center;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: right center;
  z-index: 2;
  height: 741px;
}

.visual-blob-bg {
  position: absolute;
  top: 5%;
  right: 0;
  width: 100%;
  height: 95%;
  background-color: #0a1b44;
  border-radius: 40% 60% 36% 64% / 54% 36% 64% 46%;
  animation: blob-wobble 12s infinite alternate ease-in-out;
  z-index: 1;
}

.kids-image-wrapper {
  position: absolute;
  top: 5%;
  right: 0;
  width: 100%;
  height: 95%;
  overflow: hidden;
  border-radius: 40% 60% 36% 64% / 54% 36% 64% 46%;
  animation: blob-wobble 12s infinite alternate ease-in-out;
  z-index: 2;
  background-color: #0a1b44;
}

.kids-image {
  position: absolute;
  bottom: 0;
  height: 92%;
  width: 58%;
  
  object-position: center top;
  transition: var(--transition);
}

.kids-boy {
  left: 2%;
  z-index: 1;
}

.kids-girl {
  right: 2%;
  z-index: 2;
}

.kids-image-wrapper:hover .kids-image {
  transform: scale(1.05);
}

/* Blob Animation */
@keyframes blob-wobble {
  0% {
    border-radius: 40% 60% 36% 64% / 54% 36% 64% 46%;
  }
  50% {
    border-radius: 48% 52% 56% 44% / 40% 60% 40% 60%;
  }
  100% {
    border-radius: 40% 60% 36% 64% / 54% 36% 64% 46%;
  }
}

/* ==========================================
   MODAL DIALOG STYLE
   ========================================== */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 27, 68, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.3s ease;
  overflow-y: auto;
  padding: 1.5rem 0;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background-color: var(--white);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 450px;
  width: 90%;
  text-align: center;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  transition: box-shadow 0.3s ease;
}

.modal.open .modal-content {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.modal-close:hover {
  color: var(--dark-blue);
}

.modal-icon {
  width: 60px;
  height: 60px;
  background-color: #def7ec;
  color: #03543f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem auto;
}

.modal-icon svg {
  width: 30px;
  height: 30px;
}

.modal-content h3 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.modal-content p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ==========================================
   ABOUT US SECTION
   ========================================== */
.about-section {
  background-color: var(--white);
  background-image:
    radial-gradient(
      circle at 80% 20%,
      rgba(45, 91, 255, 0.12) 0%,
      transparent 60%
    ),
    linear-gradient(to right, rgba(45, 91, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(45, 91, 255, 0.06) 1px, transparent 1px);
  background-size:
    100% 100%,
    40px 40px,
    40px 40px;
  padding: 2.25rem 2rem 4.5rem 2rem;
  position: relative;
}

.about-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr; /* 53.5% vs 46.5% */
  align-items: center;
  gap: 1rem;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.about-title {
      font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    width: 120%;
}

.about-desc {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 500;
}

.about-vision-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  font-weight: 600;
}

.about-visual-area {
  position: relative;
  width: 100%;
  height: 420px;
  display: flex;
  align-items: center;
}

.about-grid-bg {
  display: none;
}

.about-portrait-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 380px;
  height: 380px;
  z-index: 2;
}

.about-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chairperson-card {
  position: absolute;
  left: 198px;
  bottom: -50px;
  width: 380px;
  background-color: var(--white);
  border-radius: 20px;
  padding: 2.25rem 2rem 2rem 2rem;
  box-shadow: 0 20px 45px rgba(10, 27, 68, 0.08);
  border: 1.5px solid rgba(45, 91, 255, 0.08);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-sizing: border-box;
}

.chairperson-desc {
  font-size: 0.88rem;
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 500;
}

.chairperson-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.chairperson-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chairperson-name {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--primary);
}

.chairperson-role {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
}

.btn-view-more {
  padding: 0.65rem 1.25rem;
  font-size: 0.85rem;
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.5rem;
  border-radius: 30px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Chairperson Bio Modal Specific Styles */
.chairperson-modal-content {
  max-width: 650px;
  text-align: left;
  padding: 2.5rem;
}

/* Split Layout for Chairperson Modal */
.chairperson-modal-content-split {
  max-width: 880px;
  max-height: 88vh;
  width: 90%;
  background-color: var(--white);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.chairperson-modal-split-container {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr; /* Left image, right text */
}

.chairperson-modal-left {
  display: flex;
  align-items: stretch;
  padding: 1.25rem;
  box-sizing: border-box;
}

.chairperson-modal-portrait {
  width: 100%;
  min-height: 0;
  flex: 1;
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
  background-color: transparent;
}

.chairperson-modal-right {
  padding: 1.25rem 1.75rem 1.25rem 0.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  text-align: left;
}

.chairperson-modal-right::-webkit-scrollbar {
  display: none;
}

.chairperson-modal-header {
  border-bottom: 1.5px solid rgba(45, 91, 255, 0.08);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.chairperson-modal-header h3 {
  font-size: 1.2rem;
  margin: 0 0 0.25rem 0;
  color: var(--primary);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
}

.chairperson-modal-role {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  margin: 0;
}

.chairperson-modal-bio p {
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  color: #1e293b;
  text-align: left;
}

.chairperson-modal-bio strong {
  color: var(--dark-blue);
  font-weight: 700;
}

.chairperson-modal-bio p:last-child {
  margin-bottom: 0;
}

/* Modal Close Button for Split Layout */
.chairperson-modal-content-split .modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 20;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  color: var(--text-main);
  transition: var(--transition);
}

.chairperson-modal-content-split .modal-close:hover {
  background-color: var(--white);
  color: var(--primary);
  transform: scale(1.05);
}

/* Responsive adjustments for split modal */
@media (max-width: 768px) {
  .chairperson-modal-split-container {
    grid-template-columns: 1fr;
  }
  .chairperson-modal-left {
    height: 320px;
    min-height: 480px;
    padding: 1.5rem;
  }
  .chairperson-modal-right {
    padding: 0 1.5rem 2rem 1.5rem;
  }
}

.chairperson-modal-content h3 {
  margin-bottom: 0.25rem;
  color: var(--primary);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
}

.modal-author-info {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1.5px solid rgba(45, 91, 255, 0.08);
  padding-bottom: 1.25rem;
}

.modal-author-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  
  border: 2.5px solid var(--primary);
}

.modal-author-title {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 0;
}

.modal-body-content p {
  font-size: 0.92rem;
  line-height: 1.65;
  margin-bottom: 1.2rem;
  color: var(--text-main);
}

.modal-body-content p:last-child {
  margin-bottom: 0;
}

.btn-view-more .link-arrow {
  width: 14px;
  height: 14px;
  transition: var(--transition);
}

.btn-view-more:hover .link-arrow {
  transform: translateX(3px);
}

/* ==========================================
   ABOUT WHY CHOOSE SECTION
   ========================================== */
.about-why-choose-section {
  background-color: var(--white);
  padding: 1.5rem 2rem 2.25rem 2rem;
  position: relative;
  overflow: hidden;
}

.about-why-choose-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr; /* 46.5% vs 53.5% */
  align-items: center;
  gap: 3.5rem;
}

.about-why-choose-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.about-oval-border-container {
  position: relative;
  width: 380px;
  height: 440px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-oval-dotted-border {
  position: absolute;
  top: -12px;
  left: -12px;
  right: -12px;
  bottom: -12px;
  border: 2px dashed #3b82f6;
  border-radius: 46% 54% 48% 52% / 57% 45% 55% 43%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
}

.about-oval-image-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 46% 54% 48% 52% / 57% 45% 55% 43%;
  overflow: hidden;
  z-index: 2;
  background-color: var(--white);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
  border: 3px solid var(--white);
}

.about-oval-image {
  width: 100%;
  height: 100%;
  
  object-position: center;
  transition: var(--transition);
}

.about-oval-image-wrapper:hover .about-oval-image {
  transform: scale(1.04);
}

.about-decorative-dot {
  position: absolute;
  border-radius: 50%;
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.about-dot-blue {
  top: 12%;
  left: -2%;
  width: 16px;
  height: 16px;
  background-color: #3b82f6;
}

.about-dot-pink {
  top: 32%;
  left: -6%;
  width: 22px;
  height: 22px;
  background-color: #ec4899;
}

.about-dot-purple {
  top: 22%;
  right: -8%;
  width: 32px;
  height: 32px;
  background-color: #a78bfa;
  opacity: 0.85;
}

.about-dot-green {
  bottom: -6%;
  left: 55%;
  width: 26px;
  height: 26px;
  background-color: #10b981;
}

.about-curving-arrow-container {
  position: absolute;
  right: -65px;
  bottom: 12%;
  width: 110px;
  height: 110px;
  z-index: 5;
  pointer-events: none;
}

.about-curving-arrow-svg {
  width: 100%;
  height: 100%;
}

.about-why-choose-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-why-choose-title {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.about-why-choose-sub {
  font-size: 1.2rem;
  font-weight: 600;
  color: #64748b;
  line-height: 1.4;
}

.about-why-choose-text-group {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-why-choose-desc {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.7;
  font-weight: 500;
}

/* ==========================================
   WHO WE ARE SECTION
   ========================================== */
.who-we-are-section {
  background-color: var(--white);
  padding: 2.25rem 2rem 1.5rem 2rem;
  position: relative;
}

.who-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.who-content-top {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.who-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.who-desc-top {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.7;
  font-weight: 500;
  max-width: 1150px;
}

.who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: center;
}

.who-left {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.who-subtitle {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark-blue);
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.pillar-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: #f8fafc;
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(45, 91, 255, 0.05);
  box-shadow: 0 4px 12px rgba(10, 27, 68, 0.03);
}

.pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pillar-icon svg {
  width: 20px;
  height: 20px;
}

.icon-blue {
  background-color: #eff6ff;
  color: #2d5bff;
}

.icon-purple {
  background-color: #f5f3ff;
  color: #8b5cf6;
}

.icon-lightblue {
  background-color: #ecfdf5;
  color: #06b6d4;
}

.icon-orange {
  background-color: #fff7ed;
  color: #f97316;
}

.icon-green {
  background-color: #f0fdf4;
  color: #10b981;
}

.icon-pink {
  background-color: #fdf2f8;
  color: #ec4899;
}

.pillar-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark-blue);
}

.who-right {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-container-wrapper {
 position: relative;
    width: 100%;
    max-width: 588px;
    aspect-ratio: 16 / 9;
    background-color: #050e2d;
    border-radius: 24px;
    overflow: hidden;
    border: 12px solid var(--white);
  box-shadow: 0 20px 45px rgb(10 27 68 / 22%);
}

.video-container-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  display: block;
  z-index: 1;
}

.video-overlay-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #050e2d;
  z-index: 5;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.video-overlay-wrapper.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.video-thumbnail-player {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.network-diagram-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.network-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.network-node {
  position: absolute;
  background-color: var(--white);
  border-radius: 30px;
  padding: 0.4rem 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.network-node span {
  line-height: 1.15;
  text-align: left;
}

.node-schools {
  top: 35px;
  left: 50%;
  transform: translateX(-50%);
  color: #2d5bff;
}

.node-teachers {
  top: 125px;
  right: 15px;
  color: #8b5cf6;
}

.node-professionals {
  bottom: 35px;
  right: 25px;
  color: #0ea5e9;
}

.node-parents {
  bottom: 35px;
  left: 25px;
  color: #ec4899;
}

.node-students {
  top: 125px;
  left: 15px;
  color: #10b981;
}

.network-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.02);
  letter-spacing: 5px;
  text-transform: uppercase;
  pointer-events: none;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(45, 91, 255, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(45, 91, 255, 0.4);
  transition: all 0.3s ease;
  z-index: 10;
}

.video-play-btn svg {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background-color: #2d5bff;
  box-shadow: 0 10px 30px rgba(45, 91, 255, 0.6);
}

/* ==========================================
   OUR VISION & MISSION SECTION (ABOUT US)
   ========================================== */
.about-vision-mission-section {
  background-color: #050e2d;
  padding: 3.5rem 2rem;
  position: relative;
  background-image:
    radial-gradient(
      circle at 80% 20%,
      rgba(45, 91, 255, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(16, 185, 129, 0.05) 0%,
      transparent 50%
    );
}

.about-vision-mission-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.about-vision-mission-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  text-align: center;
  letter-spacing: -0.5px;
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.vision-mission-card {
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  min-height: 380px;
  transition: var(--transition);
}

.vision-mission-card:hover {
  border-color: rgba(45, 91, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-4px);
}

.vision-mission-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 3rem 2rem 3rem 2.5rem;
}

.vision-mission-badge {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.vision-card .vision-mission-badge {
  color: #10b981;
}

.mission-card .vision-mission-badge {
  color: #f59e0b;
}

.vision-mission-heading {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.2px;
}

.vision-mission-desc {
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
  font-weight: 500;
}

.vision-mission-image-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0 24px 24px 0;
}

.vision-mission-image {
  width: 100%;
  height: 100%;
  
  object-position: center bottom;
}

/* ==========================================
   OUR JOURNEY SECTION
   ========================================== */
.about-journey-section {
  background-color: var(--white);
  padding: 1.5rem 2rem 2.25rem 2rem;
  position: relative;
}

.about-journey-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-journey-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  text-align: center;
  letter-spacing: -0.5px;
}

.timeline-slider-wrapper {
  position: relative;
  width: 100%;
  overflow-x: auto;
  padding: 1.25rem 0 0rem 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.timeline-slider-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-slider {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-width: 960px;
  position: relative;
  height: 100px;
  padding: 0 4rem;
}

.timeline-axis-line {
  position: absolute;
  top: 65px;
  left: 4rem;
  right: 4rem;
  height: 2.5px;
  background-image: linear-gradient(to right, #cbd5e1 55%, transparent 45%);
  background-size: 8px 2.5px;
  background-repeat: repeat-x;
  background-color: transparent;
  z-index: 1;
}

.timeline-node-item {
  position: relative;
  z-index: 2;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 130px; /* Increased from 110px to fit year text perfectly */
  height: 100px;
  /* transition: all 0.3s ease; */
}

.timeline-node-year {
  font-size: 1.05rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 15px;
  transition: all 0.3s ease;
  z-index: 4;
}

.timeline-node-item::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #cbd5e1;
  border-radius: 50%;
  border: 3.5px solid var(--white);
  top: 65px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: 3;
}

.timeline-node-item.active {
  background-color: #050e2d;
  border-radius: 65px 65px 0 0; /* Updated to match new 130px width */
  height: 67.2px;
  margin-top: 0;
  transform: none;
  box-shadow: 0 10px 25px rgba(5, 14, 45, 0.15);
}

.timeline-node-item.active .timeline-node-year {
  color: var(--white);
  font-size: 1.15rem;
  margin-top: 19px;
  transform: none;
      padding-top: 6px;
}
.fln-head{
color:#0F21BD ;
}
.timeline-node-item.active::after {
  top: 65px;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #10b981;
  width: 18px;
  height: 18px;
  border-width: 4.5px;
}

.timeline-desc-box {
  background-color: #eff6ff;
  border-radius: 24px;
  padding: 3rem;
  border: 1px solid rgba(45, 91, 255, 0.08);
  box-shadow: 0 12px 35px rgba(45, 91, 255, 0.03);
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.timeline-bullets {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 1.5rem;
  margin: 0;
}

.timeline-bullets li {
  font-size: 1.05rem;
  color: var(--text-main);
  line-height: 1.6;
  font-weight: 500;
}

/* ==========================================
   OUR LEADERSHIP SECTION (ABOUT US)
   ========================================== */
.about-leadership-section {
  background-color: #050e2d;
  padding: 1.5rem;
  position: relative;
}

.about-leadership-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about-leadership-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  text-align: left;
}

/* High-contrast carousel button styling on dark blue background */
.leadership-carousel-nav .carousel-btn {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--white);
}

.leadership-carousel-nav .carousel-btn:hover:not(:disabled) {
  background-color: var(--white);
  color: #050e2d; /* Match the dark background */
  border-color: var(--white);
}

.leadership-carousel-nav .carousel-btn:disabled {
  border-color: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
      width: 34px;
    height: 34px;
}

.about-leadership-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.5px;
  margin: 0;
}

.about-leadership-sub {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 700px;
  margin: 0.5rem 0 0 0;
}

.leadership-scroll-container {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  cursor: grab;
}

.leadership-scroll-container:active {
  cursor: grabbing;
}

.leadership-scroll-container::-webkit-scrollbar {
  display: none;
}

.leadership-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.75rem;
  padding: 1rem 0;
}

.leadership-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.40rem;
  flex: 0 0 220px;
}

.leader-avatar-wrapper {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

.leader-avatar {
  width: 100%;
  height: 100%;
  
  object-position: center top;
}

.leadership-card:hover .leader-avatar-wrapper {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 30px rgba(255, 255, 255, 0.15);
}

.leader-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.2px;
  text-align: center;
  }

.leader-role {
  font-size: 1rem; */
    font-weight: 600;
    color: #64edab;
    /* letter-spacing: 1.5px; */
    text-align: center;
  }

/* ==========================================
   OUR BROCHURE SECTION
   ========================================== */
.about-brochure-section {
  background-color: #f8fafc;
  padding: 3.5rem 2rem 2rem 2rem;
  position: relative;
}

.about-brochure-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.about-brochure-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  letter-spacing: -0.5px;
}

.about-brochure-desc {
  font-size: 1.1rem;
  color: var(--text-main);
  line-height: 1.7;
  max-width: 900px;
}

.about-brochure-btn-group {
  margin-top: 1rem;
}

.btn-download-brochure {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.25rem;
  border-radius: 40px;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(45, 91, 255, 0.25);
}

.brochure-icon {
  width: 20px;
  height: 20px;
  transition: box-shadow 0.3s ease;
}

.btn-download-brochure:hover .brochure-icon {
  transform: translateY(2.5px);
}

/* ==========================================
   VISION & MISSION SECTION
   ========================================== */
.vision-mission-section {
  background-color: #050e2d; /* Deep dark blue */
  background-image:
    radial-gradient(
      circle at 80% 20%,
      rgba(45, 91, 255, 0.15) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 20% 80%,
      rgba(16, 185, 129, 0.08) 0%,
      transparent 50%
    );
  padding: 2.5rem 2rem 3rem 2rem;
  position: relative;
  overflow: hidden;
}

.vision-mission-container {
  max-width: 1440px;
  margin: 0 auto;
}

.section-badge-container {
  margin-bottom: 1.25rem;
}

.section-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 0.45rem 1.2rem;
  border-radius: 50px;
  text-transform: uppercase;
}

.section-title {
  color: var(--white);
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  margin-bottom: 3.5rem;
  line-height: 1.15;
}

.vision-mission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.objective-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(15px);
  border-radius: 24px;
  padding: 2.25rem 2.5rem;
  position: relative;
  overflow: hidden;
  height: 287px;
  display: flex;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transition: var(--transition);
}

.objective-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.card-text {
  width: 60%;
  z-index: 5;
}

.card-tag {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.tag-vision {
  color: #10b981;
}

.tag-mission {
  color: #60a5fa;
}

.card-title {
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  /* line-height: 1.2; */
}

.card-desc {
  color: #d9d9d9;
  font-size: 0.98rem;
  /* line-height: 1.6; */
}

.card-image-container {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.card-image {
  max-width: 100%;
  max-height: 98%;
  object-fit: contain;
  object-position: bottom right;
  filter: drop-shadow(0 -5px 15px rgba(0, 0, 0, 0.2));
  transition: box-shadow 0.3s ease;
}

.objective-card:hover .card-image {
  transform: scale(1.04);
}

/* ==========================================
   PRODUCT ECOSYSTEM SECTION
   ========================================== */
.products-section {
  background-color: #f8fafc;
  padding: 2.5rem 1.5rem;
  position: relative;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.products-container {
  max-width: 1440px;
  margin: 0 auto;
}
.free-demo-btn{
  border-radius: 12px;
background: linear-gradient(91deg, #0B1EBA 17.61%, #383ED6 80.05%);
    color: var(--white);
    font-weight:600;
    font-size: 0.99rem;
    cursor: pointer;
    box-shadow: rgba(45, 91, 255, 0.25) 0px 4px 14px;
    padding: 0.7rem 1.85rem;

    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: none;
    transition: var(--transition);
}

.products-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}

.products-header-text {
  max-width: 900px;
}

.products-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.brand-text {
  color: var(--dark-blue);
}

.gradient-text-alt {
  color: var(--primary);
}

.products-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
}

.carousel-nav {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 0.25rem;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border:3px solid var(--dark-blue);
  background-color: transparent;
  color: var(--dark-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.carousel-btn svg {
  width: 26px;
  height: 26px;
}

.carousel-btn:hover:not(:disabled) {
  background-color: var(--dark-blue);
  color: var(--white);
}

.carousel-btn:disabled {
  border: none !important;
  color: #9B9B9B;
  cursor: not-allowed;
  height: 34px;
  width: 34px;
   margin-top: 8px;


}

.carousel-viewport {
  /* overflow: hidden; */
  width: 100%;
  /* padding: 0.5rem 0; */
}

.carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-card {
    flex: 0 0 calc(33.3333% - 0.6667rem); /* Exactly 3 cards with 1rem gaps */
  background-color: var(--white);
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 27, 68, 0.04);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  height: 412px;
  padding: 1rem;
  box-sizing: border-box;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(45, 91, 255, 0.08);
}

.product-image-wrapper {
  width: 100%;
  height: 220px;
  border-radius: 16px;
  overflow: hidden;
}

.product-image {
  width: 100%;
  height: 100%;
  
  object-position: center 15%;
  transition: box-shadow 0.3s ease;
}

.product-card:hover .product-image {
  transform: scale(1.05);
}

.product-card-content {
  padding: 1.25rem 0 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-card-title {
  font-size: 1.15rem;
  /* font-weight: 800; */
  color: var(--dark-blue);
  line-height: 1.35;
  margin-bottom: 0.5rem;
  /* min-height: 44px; */
}

.product-card-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
  /* flex-grow: 1; */
}

.product-link {
      display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 0.5rem;
    color: #2d5bff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--transition);
    align-self: flex-start;
    position: fixed;
    padding-top:7rem;
}

.product-link:hover {
  color: var(--primary);
}

.link-arrow {
  width: 16px;
  height: 16px;
  transition: box-shadow 0.3s ease;
}

.product-link:hover .link-arrow {
  transform: translateX(4px);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #cbd5e1;
  cursor: pointer;
  transition: var(--transition);
}

.carousel-dot.active {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--primary);
}

/* ==========================================
   CHALLENGES & SOLUTIONS SECTION
   ========================================== */
.challenges-section {
  padding: 0;
}

.challenges-section .v-m-color {
  color: #3A9E6E;
}

.challenges-container {
  max-width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 4.6fr 7.4fr;
  gap: 4.5rem;
  align-items: center;
}

.challenges-left {
  display: flex;
  flex-direction: column;
  
}

.challenges-title {
  font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  /* font-weight: 800; */
  line-height: 1.15;
  margin-bottom: 2rem;
  color: var(--white);
}

.challenges-description {
  font-size: 1.1rem;
  color: #94a3b8;
  line-height: 1.65;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.challenges-image-card {
  position: relative;
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  margin-top: auto; /* Push image to the bottom to align heights */
}

.challenges-image {
  width: 100%;
  display: block;
  transition: box-shadow 0.3s ease;
}

.challenges-image-card:hover .challenges-image {
  transform: scale(1.03);
}

.image-overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.5rem 2rem 1.5rem 2rem;
  background: linear-gradient(
    to top,
    rgba(5, 14, 45, 0.95) 0%,
    rgba(5, 14, 45, 0.7) 60%,
    transparent 100%
  );
  color: var(--white);
  text-align: center;
  font-style: italic;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.challenges-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* Further reduced card-to-card gap */
}

.challenge-row-card {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  background: rgba(
    13,
    25,
    77,
    0.45
  ); /* More saturated dark blue glass card background */
 border: 1px solid rgb(255 255 255 / 46%);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 1rem 1.5rem; /* Tightened padding to match left column height */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.challenge-row-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(13, 25, 77, 0.65);
}

.card-part {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.part-challenge {
  flex: 1;
}

.part-solution {
  flex: 1;
}

.part-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-purple {
  background-color: rgba(165, 180, 252, 0.08);
  border: 1px solid rgba(165, 180, 252, 0.25);
  color: #a5b4fc;
}

.icon-green {
  background-color: rgba(52, 211, 153, 0.08);
  border: 1px solid rgba(52, 211, 153, 0.3);
  color: #34d399;
}

.part-icon svg {
  width: 18px;
  height: 18px;
}

.part-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.part-tag {
  font-size: 0.72rem;
  font-weight: 700;
  color: #a5b4fc;
  letter-spacing: 0.5px;
}

.part-tag-sol {
  font-size: 0.72rem;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.5px;
}

.part-desc {
  font-size: 0.98rem;
  color: #e2e8f0;
  font-weight: normal;
  line-height: 1.4;
}

.part-desc-sol {
  font-size: 0.98rem;
  color: var(--white);
  font-weight: normal;
  line-height: 1.4;
}

.card-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: 0.5rem; */
  color: rgba(165, 180, 252, 0.3); /* Vibrant light indigo dots */
  align-self: center;
  width: 48px;
  flex: 0 0 48px;
  margin: 0 1.25rem;
}

.dot-trail {
  height: 1.5px;
  flex-grow: 1;
  background-image: linear-gradient(
    to right,
    rgba(165, 180, 252, 0.3) 33%,
    transparent 33%
  );
  background-size: 6px 1.5px;
  background-repeat: repeat-x;
}

.divider-arrow {
  width: 14px;
  height: 14px;
  color: rgba(165, 180, 252, 0.7); /* Vibrant light indigo arrow */
}

/* ==========================================
   STATS BANNER SECTION
   ========================================== */
.stats-section {
  background-color: var(--white);
  padding: 6rem 1.5rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
  z-index: 5;
}

.stats-container {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: clamp(2.5rem, 3.8vw, 3.2rem);
  font-weight: 800;
  color: #0B1EBA;
  margin-bottom: 0.5rem;
  line-height: 1.1;
  font-family: var(--font-heading);
}

.stat-label {
  font-size: 1.05rem;
  color: var(--text-muted);
  font-weight: 600;
}

.stat-divider {
  width: 1.5px;
  height: 55px;
  background-color: rgba(226, 232, 240, 0.8);
}

/* ==========================================
   WHY CHOOSE US SECTION
   ========================================== */
.why-choose-section {
  background-color: #f8fafc;
  padding: 3rem 1.5rem;
  position: relative;
}

.why-choose-container {
  max-width: 1440px;
  margin: 0 auto;
}

.badge-blue {
  background-color: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(45, 91, 255, 0.1);
}

.why-choose-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 3.5rem;
  line-height: 1.2;
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--white);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 1.75rem 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
  transition: var(--transition);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(45, 91, 255, 0.06);
  border-color: rgba(45, 91, 255, 0.15);
}

.feature-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-bg-blue {
  background-color: #eff6ff;
  color: #3b82f6;
}

.icon-bg-orange {
  background-color: #fff7ed;
  color: #f97316;
}

.icon-bg-green {
  background-color: #ecfdf5;
  color: #10b981;
}

.icon-bg-red {
  background-color: #fef2f2;
  color: #ef4444;
}

.feature-icon {
  width: 22px;
  height: 22px;
}

.feature-text-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.feature-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.3;
}

.feature-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================
   STAKEHOLDER BENEFITS SECTION
   ========================================== */
.stakeholders-section {
  background-color: var(--white);
  padding: 3rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.stakeholders-container {
  max-width: 1440px;
  margin: 0 auto;
}

.stakeholders-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 3.5rem;
  line-height: 1.2;
}

.stakeholder-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.stakeholder-card {
  position: relative;
  height: 350px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.stakeholder-img {
  width: 100%;
  height: 100%;
  
  transition: box-shadow 0.3s ease;
}

.stakeholder-card:hover .stakeholder-img {
  transform: scale(1.06);
}

.stakeholder-info-box {
      position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    background-color: var(--white);
    border-radius: 8px;
    padding: 0.65rem 1.1rem;
    max-height: 45px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.stakeholder-card:hover .stakeholder-info-box {
  max-height: 245px;
  padding: 1.25rem;
}

.stakeholder-badge {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  padding: 0.35rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  width: fit-content;
  flex-shrink: 0;
}

.tag-students {
  background-color: #e6f4ea;
  color: #137333;
}

.tag-teachers {
  background-color: #fef7e0;
  color: #b06000;
}

.tag-leadership {
  background-color: #f3e8fd;
  color: #7627cd;
}

.tag-parents {
  background-color: #fce8e6;
  color: #c5221f;
}

.stakeholder-details {
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease 0.1s;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: left;
}

.stakeholder-card:hover .stakeholder-details {
  opacity: 1;
  visibility: visible;
}

.stakeholder-details li {
  font-size: 0.9rem;
  color: #475569;
  line-height: 1.45;
  position: relative;
  padding-left: 1.25rem;
  font-weight: 500;
}

.stakeholder-details li::before {
content: "\2022";
position: absolute;
left: 0.1rem;
top: 0;
color: var(--text-muted);
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
}

/* ==========================================
   PRODUCT DELIVERABLES SECTION
   ========================================== */
.deliverables-section {
  background-color: #ffffff;
  padding: 3.5rem 1.5rem;
  position: relative;
  /* border-bottom: 1px solid rgba(226, 232, 240, 0.8); */
}

.deliverables-container {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3.6fr 8.4fr;
  gap: 4.5rem;
  align-items: start;
}

.deliverables-left {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 130px;
}

.deliverables-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  margin-bottom: 2rem;
  line-height: 1.2;
}

.deliverables-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 400px;
}

.deliverables-right {
  display: flex;
  flex-direction: column;
}

.deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.deliverable-card {
  background-color: var(--white);
  border: 1px solid rgba(45, 91, 255, 0.12); /* Crisp blue outline border */
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(45, 91, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  transition: var(--transition);
}

.deliverable-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(45, 91, 255, 0.08);
  border-color: rgba(45, 91, 255, 0.25);
}

.deliverable-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: rgba(45, 91, 255, 0.06);
  border: 1px solid rgba(45, 91, 255, 0.15);
  color: #2d5bff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.deliverable-icon-wrapper svg {
  width: 22px;
  height: 22px;
}

.deliverable-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.deliverable-card-content h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.35;
}

.deliverable-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ==========================================
   IMPLEMENTATION JOURNEY SECTION
   ========================================== */
.journey-section#journey {
  background-color: #050e2d;
  padding: 5.5rem 2rem 6.5rem 2rem;
}

.journey-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
}
.testi-sec{
padding: 3rem 0 0 5.3rem;
}
.journey-container {
  max-width: 1440px;
  margin: 0 auto;
}

.badge-journey {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
}

.journey-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 4.5rem;
  line-height: 1.2;
}

.journey-timeline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  z-index: 2;
}

.journey-timeline::before {
  content: "";
  position: absolute;
  top: 27px; /* Center of the 54px circle badge */
  left: 2rem;
  right: 2rem;
  height: 1.5px;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.25) 40%,
    transparent 40%
  );
  background-size: 8px 1.5px;
  background-repeat: repeat-x;
  z-index: 1;
}

/* Journey Timeline Starting/Ending Dots */
.timeline-dot {
  position: absolute;
  top: 27px;
  width: 6px;
  height: 6px;
  background-color: var(--white);
  border-radius: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
}

.timeline-dot-start {
  left: 2rem;
}

.timeline-dot-end {
  right: 2rem;
  transform: translate(50%, -50%);
}

.timeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
  z-index: 5;
  gap: 2em;
}

.step-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 5;
  border: 2px solid currentColor;
  background-color: #050e2d !important;
  transition: var(--transition);
  /* box-shadow:
    0 0 0 4px #050e2d,
    0 0 0 5px currentColor; */
}

.timeline-step:hover .step-circle {
  transform: scale(1.1);
  box-shadow:
    0 0 0 6px #050e2d,
    0 0 0 8px currentColor,
    0 0 20px currentColor;
}

.step-number {
  position: absolute;
  top: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.step-icon {
  width: 18px;
  height: 18px;
  margin-top: 10px; /* Shift down to balance the layout */
}

/* Individual Step Colors */
.step-color-1 {
  background-color: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.step-color-2 {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.step-color-3 {
 
  background-color: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.step-color-4 {
  background-color: rgba(132, 204, 22, 0.15);
  color: #a3e635;
}

.step-color-5 {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.step-color-6 {
  background-color: rgba(217, 70, 239, 0.15);
  color: #f472b6;
}

.step-color-7 {
  background-color: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.step-color-8 {
  background-color: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

.timeline-step-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.step-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--white);
}

.step-desc {
  font-size: 0.85rem;
  color: #94a3b8;
  line-height: 1.45;
  max-width: 120px;
  margin: 0 auto;
}

/* ==========================================
   SUCCESS STORIES & CASE STUDIES SECTION
   ========================================== */
.cases-section {
  background-color: var(--white);
  padding: 3rem 1.5rem;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.cases-container {
  max-width: 1440px;
  margin: 0 auto;
}

.cases-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}

.cases-header-text {
  max-width: 700px;
}

.cases-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.2;
  margin-top: 0.5rem;
}

.cases-viewport {
  overflow: hidden;
  width: 100%;
}

.cases-track {
  display: flex;
  transition: box-shadow 0.3s ease;
}

.case-card {
  flex: 0 0 33.333%; /* 3 cards visible */
  box-sizing: border-box;
  padding: 0 3rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
  border-right: 1px solid rgba(226, 232, 240, 0.8);
}

.case-card:last-child {
  border-right: none;
}

.case-header-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.case-logo-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.02);
}

.case-logo {
  width: 100%;
  height: 100%;
  
}

.case-card-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--dark-blue);
}

.case-card-location {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-weight: 500;
}

.case-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.case-stat {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.case-stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: #10b981; /* Green color matching solution markers */
  line-height: 1.1;
}

.case-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  font-weight: 600;
}

.case-link {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  transition: var(--transition);
  align-self: center;
}

.case-link:hover {
  color: var(--dark-blue);
}

.case-link:hover .link-arrow {
  transform: translateX(4px);
}

.cases-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.cases-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #cbd5e1;
  cursor: pointer;
  transition: var(--transition);
}

.cases-dot.active {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--primary);
}

/* ==========================================
   TESTIMONIALS SECTION
   ========================================== */
.testimonials-section {
  background-color: #ffffff;
  padding: 2rem 2rem 4rem 2rem;
  position: relative;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.testimonials-container {
  max-width: 1440px;
  margin: 0 auto;
}

.testimonials-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 3.5rem;
}

.testimonials-header-text {
  max-width: 700px;
}

.testimonials-title {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--dark-blue);
  line-height: 1.2;
  margin-top: 0.5rem;
}

.testimonials-viewport {
  /* overflow: hidden; */
  width: 100%;
  /* padding: 0.5rem 0; */
  border-radius: 29px;
}

.testimonials-track {
  display: flex;
  gap: 1rem;
  /* transition: box-shadow 0.3s ease; */
}

.testimonial-card {
  flex: 0 0 calc(50% - 0.5rem); /* Exactly 2 cards with a 1rem gap */
  background-image: url('../assets/testimonial-card.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: transparent;
  border: none;
  padding: 6rem 2.5rem 2.5rem 2.5rem; /* slightly more top padding for quote */
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: var(--transition);
  box-sizing: border-box;
  position: relative;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(45, 91, 255, 0.06);
}

.quote-icon {
  width: 32px;
  height: 32px;
  color: rgba(45, 91, 255, 0.15);
  flex-shrink: 0;
}

.quote-icon svg {
  width: 100%;
  height: 100%;
}

.testimonial-quote {
  font-size: 1.08rem;
  color: #334155;
  line-height: 1.65;
  font-weight: 500;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: auto;
}

.author-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-weight: 700;
  font-size: 1.1rem;
}

.avatar-blue {
  background-color: #3b82f6;
}

.avatar-pink {
  background-color: #ec4899;
}

.avatar-green {
  background-color: #10b981;
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.author-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark-blue);
}

.author-title {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
}

.testimonials-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3rem;
}

.testimonials-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #cbd5e1;
  cursor: pointer;
  transition: var(--transition);
}

.testimonials-dot.active {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background-color: var(--primary);
}

/* ==========================================
   EXPERT CONTACT SECTION
   ========================================== */
/* EXPERT SECTION (Home / About) */
.expert-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  position: relative;
  background-color: #ffffff;
}

.expert-container {
  max-width: 1200px;
  margin: 0 auto;
}

.expert-card {
  background-color: #f4f7ff;
  border-radius: 24px;
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.expert-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1629;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.expert-subtitle {
  font-size: 1.1rem;
  color: #64748b;
  margin: 0 0 2.5rem 0;
  max-width: 800px;
}

.expert-form {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 500px;
  justify-content: center;
}

.expert-input {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.expert-input:focus {
  border-color: var(--primary);
}

.expert-btn {
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  border: none;
}

/* RCA EXPERT SECTION */
.rca-expert-section {
  background-color: #0a1629;
  padding: 4rem 1.5rem; /* Cleaned padding */
  position: relative;
}

.expert-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 991px) {
  .expert-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

.expert-info-side {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rca-expert-section .expert-title {
  color: #ffffff;
  margin-bottom: 1.5rem;
}

.expert-desc {
  font-size: 1.1rem;
  color: #94a3b8;
  margin: 0 0 3.5rem 0;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .expert-desc {
    margin-bottom: 2.5rem;
  }
}

.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.contact-info-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    border: none;
}

.contact-info-icon-box svg {
    width: 18px;
    height: 18px;
}

.contact-info-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-info-label {
  font-size: 1.4rem;
    font-weight: 600;
    color: #ffffff;
}

.contact-info-value {
  font-size:1rem;
  color: #94a3b8;
  text-decoration: none;
  line-height: 1.5;
  transition: color 0.2s ease;
}

a.contact-info-value:hover {
  color: var(--primary);
}

.expert-form-card {
  background-color: #f8fafc;
  border-radius: 32px;
  padding: 3rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 576px) {
  .expert-form-card {
    padding: 2rem 1.5rem;
  }
}

.expert-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 576px) {
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.form-group-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: left;
}

.form-group-item.full-width {
  grid-column: span 1;
}

.form-label-item {
  font-size: 0.9rem;
  font-weight: 600;
  color: #64748b;
}

.form-input-item,
.form-textarea-item {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: #0f172a;
  transition: all 0.3s ease;
  font-family: inherit;
}

.form-input-item::placeholder,
.form-textarea-item::placeholder {
  color: #94a3b8;
}

.form-input-item:focus,
.form-textarea-item:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.1);
}

.form-textarea-item {
  resize: vertical;
}

.btn-submit-form {
  background-color: var(--primary);
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 0.5rem;
  font-family: inherit;
}

.btn-submit-form:hover {
  background-color: var(--primary-hover);
}

/* ==========================================
   FOOTER SECTION
   ========================================== */
.footer-section {
  background-color: #0a1435;
  background-image: url('assets/Footer.jpg');
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  padding: 2rem 2rem 8rem 2rem;
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.footer-container {
  max-width: 1440px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2.8fr 4.2fr 2fr 2fr 3fr;
  gap: 1rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.branding-col {
  gap: 1.75rem;
}

.footer-logo-area {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--white);
}

.footer-logo-title {
  font-size: 1.8rem;
  font-weight: 800;
  font-family: var(--font-heading);
}

.footer-logo-svg {
  height: 38px;
  width: auto;
  object-fit: contain;
  /* Removed filter to show colored icon */
}

.footer-logo-subtitle {
  font-size: 0.85rem;
  color: #94a3b8;
  /* font-weight: 700; */
  letter-spacing: 0.5px;
  /* text-transform: uppercase; */
}

.footer-desc {
  font-size: 0.98rem;
  color: #94a3b8;
  line-height: 1.6;
}

.social-links {
  display: flex;
  gap: 0.85rem;
}

.social-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--white);
  border: 4px solid rgba(255, 255, 255, 0.2);
  background-clip: padding-box;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-icon svg {
  width: 18px;
  height: 18px;
  transition: all 0.3s ease;
}

.social-icon:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.4);
}

.footer-col-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-contact-details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-contact-details li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: #94a3b8;
  font-size: 0.98rem;
  line-height: 1.5;
  font-weight: 600;
}

.contact-icon {
  width: 18px;
  height: 18px;
  color: var(--white);
  flex-shrink: 0;
  margin-top: 3px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 14rem;
  padding-top: 5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  opacity: 0;
  visibility: hidden;
}

.footer-bottom p {
  font-size: 0.98rem;
  color: #64748b;
  font-weight: 600;
}

.watermark-bg {
  display: block;
  font-size: 28vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.11);
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  /* text-align: center; */
  width: 100%;
  line-height: 0.75;
  margin-top: 3rem;
  letter-spacing: 0.5vw;
  opacity: 0;
  visibility: hidden;
}

/* Brand Specific Colors for Footer Social Icons */
.social-icon[aria-label="Facebook"] svg {
  fill: #0a1435;
  stroke: #0a1435;
}
.social-icon[aria-label="Facebook"]:hover svg {
  fill: #1877f2;
  stroke: #1877f2;
}

.social-icon[aria-label="LinkedIn"] svg {
  fill: #0a1435;
  stroke: #0a1435;
}
.social-icon[aria-label="LinkedIn"]:hover svg {
  fill: #0a66c2;
  stroke: #0a66c2;
}

.social-icon[aria-label="YouTube"] svg {
  fill: #0a1435;
  stroke: #0a1435;
}
.social-icon[aria-label="YouTube"]:hover svg {
  fill: #ff0000;
  stroke: #ff0000;
}
.social-icon[aria-label="YouTube"] svg polygon {
  fill: var(--white);
  stroke: var(--white);
}

.social-icon[aria-label="X"] svg {
  fill: #0a1435;
  stroke: #0a1435;
}
.social-icon[aria-label="X"]:hover svg {
  fill: #000000;
  stroke: #000000;
}

.social-icon[aria-label="Instagram"] svg {
  fill: none;
  stroke: #0a1435;
}
.social-icon[aria-label="Instagram"]:hover svg {
  stroke: #e1306c;
}

/* ==========================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================== */
@media (max-width: 1200px) {
  .hero-section {
    height: 480px;
    min-height: 480px;
    background-image: linear-gradient(
      180deg,
      var(--primary-light) 0%,
      var(--white) 100%
    );
    padding: 4rem 1.5rem 3rem 1.5rem;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    background-image: none;
    padding: 0;
  }

  .hero-content {
    align-items: center;
    text-align: center;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
    max-width: 650px;
  }

  .hero-cta-group {
    justify-content: center;
  }

  .hero-interactive-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 480px;
    min-height: 480px;
    margin-top: 1rem;
    gap: 1rem;
  }

  .hero-banner-image {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 500px;
    height: 480px;
    display: block;
    margin: 0 auto;
  }

  /* .hero-form-container {
    position: absolute;
    transform: none;
    top: 50%;
    left: -80px;
    transform: translateY(-50%);
    z-index: 10;
    width: 390px;
    border-radius: 30px;
    border: 10px solid rgba(255, 255, 255, 0.30);
    background: #ffffff52;
    box-shadow: 0 5px 20px 0 rgba(152, 152, 152, 0.25);
  } */

  .hero-form-container{
    position: absolute !important;
    left: -138px !important;
    top: 53%;
    transform: translateY(-50%);
    z-index: 10;
    width: 390px;
    border-radius: 16px;
border: 10px solid rgba(255, 255, 255, 0.30);
background: #FFF;
box-shadow: 0 5px 20px 0 rgba(152, 152, 152, 0.25);
}

  .form-card {
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(10, 27, 68, 0.12);
  width: 100%;
  height: auto; /* Ensure button is never cut off */
  display: flex;
  flex-direction: column;
  overflow: hidden; /* For header rounded corners */
  border: none;
  padding: 0;
}
  #bg-ring-left {
    left: 50%;
    top: 75%;
  }

  .vision-mission-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .product-card {
    flex: 0 0 calc(50% - 0.5rem);
    height: 440px;
  }



  .challenges-left {
    position: relative;
    top: auto;
    align-items: flex-start;
    text-align: left;
  }

  .challenges-description {
    margin-left: 0;
    margin-right: auto;
  }

  .challenges-image-card {
    max-width: 600px;
    margin: 0;
  }

  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stakeholder-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .deliverables-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .deliverables-left {
    position: relative;
    top: auto;
    align-items: center;
    text-align: center;
  }

  .deliverables-description {
    margin-left: auto;
    margin-right: auto;
  }

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

  .journey-timeline::before {
    left: 1.5rem;
    right: 1.5rem;
  }

  .step-desc {
    font-size: 0.8rem;
    max-width: 100px;
  }

  .case-card {
    flex: 0 0 50%;
    padding: 0 2rem 1.5rem 2rem;
  }

  .case-card:nth-child(2n) {
    border-right: none;
  }

  .case-card:nth-child(2n + 1) {
    border-right: 1px solid rgba(226, 232, 240, 0.8);
  }

  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }

  .branding-col {
    grid-column: span 3;
    max-width: 600px;
  }

  .contact-col {
    grid-column: span 3;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .about-visual-area {
    height: 480px;
    flex-direction: column;
    align-items: center;
  }

  .about-portrait-wrapper {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    height: 480px;
    aspect-ratio: 1 / 1;
  }

  .chairperson-card {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: -50px auto 0 auto;
    width: 90%;
    max-width: 380px;
    z-index: 12;
  }

  .about-grid-bg {
    display: none;
  }

  .about-why-choose-container {
    grid-template-columns: 1fr;
    gap: 4.5rem;
  }

  .about-curving-arrow-container {
    display: none;
  }

  .who-grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .pillars-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .vision-mission-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .leadership-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .leadership-card {
    flex: 0 0 200px;
  }
}

@media (max-width: 900px) {
  .header-container {
    padding: 1rem 1.5rem;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-right: 0;
    background-color: var(--white);
    border-bottom: 1px solid var(--border-color);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    gap: 1rem;
    align-items: flex-start;
  }

  .nav-menu.mobile-open {
    display: flex;
  }

  .nav-dropdown-wrapper {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-dropdown-wrapper::after {
    display: none;
  }

  .mega-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
    padding: 0.5rem 0 0.5rem 1rem !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important; /* Collapse by default on mobile */
  }

  .nav-dropdown-wrapper.active-dropdown .mega-menu {
    display: block !important;
  }

  .mega-menu-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem; !important;
  }

  .mega-menu-col {
    padding: 0 !important;
    border-left: none !important;
    gap: 0.5rem !important;
  }

  .mega-menu-title {
    font-size: 0.85rem !important;
    padding-bottom: 0.25rem !important;
    border-bottom: none !important;
  }

  .mega-menu-links {
    gap: 0.5rem !important;
    padding-left: 0.5rem !important;
  }

  .mega-menu-links a {
    font-size: 0.92rem !important;
  }

  .nav-link.active::after {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  /* Toggle active state */
  .mobile-menu-toggle.active span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .mobile-menu-toggle.active span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  .hero-section {
    padding: 2.5rem 1.5rem 2.5rem 1.5rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-cta-group {
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
  }

  .hero-interactive-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 480px !important;
    min-height: auto !important;
    margin-top: 1rem !important;
    gap: 1rem; !important;
  }

  .hero-banner-image {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 420px;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* .hero-form-container {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    left: 0 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 390px;
  } */

  .vision-mission-section {
    padding: 4rem 1.5rem 4.5rem 1.5rem;
  }

  .objective-card {
    padding: 2.25rem 2rem 140px 2rem;
    height: 480px;
    min-height: 340px;
  }

  .card-text {
    width: 100%;
  }

  .card-image-container {
    width: 150px;
    height: 150px;
    right: 1.5rem;
  }

  .products-section {
    padding: 3.5rem 1.5rem;
  }

  .products-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .carousel-nav {
    align-self: flex-end;
  }

  .challenge-row-card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem;
  }

  .part-challenge,
  .part-solution {
    flex: 0 0 auto;
    width: 100%;
  }

  .card-divider {
    justify-content: flex-start;
    padding-left: 1.25rem;
    margin: -0.25rem 0;
    align-self: flex-start;
    flex: 0 0 auto;
    width: auto;
  }

  .dot-trail {
    width: 1.5px;
    height: 20px;
    flex-grow: 0;
    background-image: linear-gradient(
      to bottom,
      rgba(165, 180, 252, 0.3) 33%,
      transparent 33%
    );
    background-size: 1.5px 6px;
    background-repeat: repeat-y;
  }

  .divider-arrow {
    transform: rotate(90deg);
    color: rgba(165, 180, 252, 0.7);
  }

  .stats-container {
    flex-direction: column;
    gap: 1rem;
  }

  .stat-divider {
    display: none;
  }

  .why-choose-section {
    padding: 3.5rem 1.5rem;
  }

  .why-choose-title {
    margin-bottom: 2.5rem;
  }

  .stakeholder-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .stakeholders-section {
    padding: 3.5rem 1.5rem;
  }

  .stakeholders-title {
    margin-bottom: 2.5rem;
  }

  .deliverables-section {
    padding: 3.5rem 1.5rem;
  }

  .deliverables-title {
    margin-bottom: 1.5rem;
  }

  .journey-timeline {
    flex-direction: column;
    gap: 1.75rem;
    padding-left: 2rem;
  }

  .journey-timeline::before {
    left: 27px;
    top: 1rem;
    bottom: 1rem;
    width: 1.5px;
    height: 480px;
    background-image: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.25) 40%,
      transparent 40%
    );
    background-size: 1.5px 8px;
    background-repeat: repeat-y;
  }

  .timeline-dot {
    left: 27px;
  }

  .timeline-dot-start {
    top: 1rem;
    transform: translate(-50%, -50%);
  }

  .timeline-dot-end {
    bottom: 1rem;
    top: auto;
    right: auto;
    transform: translate(-50%, 50%);
  }

  .timeline-step {
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 1.2rem;
  }

  .timeline-step-content {
    align-items: flex-start;
  }

  .step-desc {
    margin: 0;
    max-width: 100%;
  }

  .journey-section {
    padding: 3.5rem 1.5rem;
  }

  .journey-title {
    margin-bottom: 1.5rem;
  }

  .cases-section {
    padding: 3.5rem 1.5rem;
  }

  .cases-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .cases-header .carousel-nav {
    align-self: flex-end;
  }

  .testimonial-card {
    flex: 0 0 100%;
  }

  .testimonials-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  .testimonials-header .carousel-nav {
    align-self: flex-end;
  }

  .testimonials-section {
    padding: 2rem 1.5rem 4rem 1.5rem;
  }

  .about-leadership-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
  }

  .about-leadership-header .leadership-carousel-nav {
    align-self: flex-end;
  }

  .about-section {
    padding: 4rem 1.5rem 2rem 1.5rem;
  }

  .about-why-choose-section {
    padding: 2rem 1.5rem 4rem 1.5rem;
  }

  .footer-bottom {
    margin-top: 3.5rem;
  }

  .who-we-are-section {
    padding: 4rem 1.5rem 2rem 1.5rem;
  }

  .about-vision-mission-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
  }

  .about-journey-section {
    padding: 2rem 1.5rem 4rem 1.5rem;
  }

  .about-leadership-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
  }

  .about-brochure-section {
    padding: 4rem 1.5rem 2rem 1.5rem;
  }

  .vision-mission-card {
    grid-template-columns: 1fr;
    min-height: 480px;
  }

  .vision-mission-content {
    padding: 2.5rem 2rem;
  }

  .vision-mission-image-wrapper {
    height: 220px;
    border-radius: 0 0 24px 24px;
  }
}

@media (max-width: 480px) {
  .logo-title {
    font-size: 1.6rem;
  }

  .logo-subtitle {
    font-size: 0.5rem;
  }

  .logo-icon {
    width: 40px;
    height: 40px;
  }

  .hero-title {
    font-size: 2rem;
  }

  .btn {
    width: 100%;
    padding: 0.8rem 1.5rem;
  }

  .hero-banner-image {
    max-width: 320px;
  }

  .hero-form-container {
    margin-top: 0;
  }

  .vision-mission-section {
    padding: 3rem 1rem 3.5rem 1rem;
  }

  .section-title {
    font-size: 2.2rem;
    margin-bottom: 2.5rem;
  }

  .objective-card {
    padding: 2rem 1.25rem 120px 1.25rem;
    min-height: 340px;
  }

  .card-title {
    font-size: 1.45rem;
  }

  .card-image-container {
    width: 120px;
    height: 120px;
  }

  .products-section {
    padding: 4rem 1rem;
  }

  .product-card {
    flex: 0 0 100%;
    height: 420px;
  }

  .product-image-wrapper {
    height: 200px;
  }

  .product-card-content {
    padding: 1rem 0 0 0;
  }

  .product-card-title {
    min-height: 480px;
  }

  .carousel-dots {
    margin-top: 2rem;
  }

  .challenges-section {
    padding: 0;
  }

  .challenge-row-card {
    padding: 1.25rem 1rem;
  }

  .part-icon {
    width: 38px;
    height: 38px;
  }

  .part-icon svg {
    width: 16px;
    height: 16px;
  }

  .part-desc,
  .part-desc-sol {
    font-size: 0.9rem;
  }

  .image-overlay-text {
    font-size: 0.9rem;
    padding: 1.5rem 1rem 1rem 1rem;
  }

  .why-choose-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .feature-card {
    padding: 1.5rem 1.25rem;
    gap: 1.25rem;
  }

  .why-choose-section {
    padding: 4rem 1rem;
  }

  .stakeholders-section {
    padding: 4rem 1rem;
  }

  .stakeholder-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .stakeholder-card {
    height: 300px;
  }

  .deliverables-section {
    padding: 4rem 1rem;
  }

  .deliverables-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .deliverable-card {
    padding: 1.75rem 1.5rem;
    gap: 1.25rem;
  }

  .journey-section {
    padding: 4rem 1rem;
  }

  .journey-timeline {
    gap: 1rem;
    padding-left: 1.5rem;
  }

  .journey-timeline::before {
    left: 23px;
  }

  .timeline-dot {
    left: 23px;
  }

  .step-circle {
    width: 46px;
    height: 46px;
  }

  .step-number {
    top: 4px;
    font-size: 0.6rem;
  }

  .step-icon {
    width: 15px;
    height: 15px;
    margin-top: 8px;
  }

  .step-title {
    font-size: 0.85rem;
  }

  .step-desc {
    font-size: 0.8rem;
  }

  .cases-section {
    padding: 4rem 1rem;
  }

  .case-card {
    flex: 0 0 100%;
    border-right: none !important;
    padding: 0 1rem;
    gap: 1rem;
  }

  .case-stats-row {
    gap: 1rem;
  }

  .case-stat-num {
    font-size: 1.5rem;
  }

  .testimonials-section {
    padding: 4rem 1rem;
  }

  .testimonial-card {
    padding: 2rem 1.5rem 2rem 1.5rem;
    gap: 1rem;
  }

  .testimonial-quote {
    font-size: 1rem;
    line-height: 1.55;
  }

  .expert-card {
    padding: 2.5rem 1.5rem;
    gap: 1rem;
  }

  .expert-form {
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }

  .expert-btn {
    width: 100%;
  }

  .footer-section {
    padding: 5rem 1.5rem 2rem 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .branding-col,
  .contact-col {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .about-section {
    padding: 4rem 1rem 2rem 1rem;
  }

  .about-portrait-wrapper {
    max-width: 300px;
    height: 480px;
  }

  .chairperson-card {
    padding: 1.75rem 1.25rem 1.5rem 1.25rem;
    gap: 1.25rem;
    margin-top: -30px;
  }

  .chairperson-desc {
    font-size: 0.85rem;
  }

  .about-why-choose-section {
    padding: 2rem 1rem 4rem 1rem;
  }

  .about-oval-border-container {
    width: 300px;
    height: 350px;
  }

  .about-decorative-dot {
    display: none;
  }

  .who-we-are-section {
    padding: 4rem 1rem 2rem 1rem;
  }

  .who-desc-top {
    font-size: 0.98rem;
  }

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

  .video-container-wrapper {
    border-radius: 16px;
  }

  .about-vision-mission-section {
    padding: 4rem 1rem;
  }

  .vision-mission-card {
    grid-template-columns: 1fr;
    min-height: 480px;
    padding: 0;
  }

  .vision-mission-content {
    padding: 2rem 1.5rem;
  }

  .vision-mission-image-wrapper {
    height: 180px;
    border-radius: 0 0 24px 24px;
  }

  .about-journey-section {
    padding: 2rem 1rem 4rem 1rem;
  }

  .timeline-slider {
    min-width: 600px;
    padding: 0 1.5rem;
  }

  .timeline-axis-line {
    left: 1.5rem;
    right: 1.5rem;
  }

  .timeline-desc-box {
    padding: 1.5rem;
  }

  .timeline-bullets li {
    font-size: 0.85rem;
  }

  .about-leadership-section {
    padding: 4rem 1rem;
  }

  .leadership-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .leadership-card {
    flex: 0 0 160px;
  }

  .leader-name,
  .leader-role {
    white-space: normal;
  }

  .leader-avatar-wrapper {
    width: 110px;
    height: 110px;
  }

  .leader-name {
    font-size: 1.05rem;
  }

  .about-brochure-section {
    padding: 4rem 1rem 2rem 1rem;
  }

  .testimonials-section {
    padding: 2rem 1rem 4rem 1rem;
  }
}

/* ==========================================
   RCA PRODUCT INNER PAGE STYLES
   ========================================== */
.rca-hero-section {
  width: 100%;
  height: calc(100vh - 80px);
      min-height: 684px;
  
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-image: url("assets/products/rca.jpg");
  background-size: cover;
  /* background-position: right center; */
}

.rca-hero-container {
  max-width: 100%;
  margin: 0;
  padding-left: max(2rem, calc((100vw - 1440px) / 2));
  padding-right: max(2rem, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr; /* Half content, half image */
  gap: 1rem;
  align-items: center;
  height: 100%;
  
  width: 100%;
}

.rca-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  z-index: 5;
  padding-bottom: 9rem;
   /* padding-top: 3rem;  */
  align-self: center; /* Center text vertically */
}

.rca-badge {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.45rem;
  background-color: transparent;
  border: 1px solid rgba(45, 91, 255, 0.2);
  padding: 0.45rem 1rem;
  border-radius: 50px;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.75px;
  width: fit-content;
}

.badge-star-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.rca-hero-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 3rem;
  line-height: 1.08;
  letter-spacing: -0.8px;
  margin: 0;
  
}

.rca-hero-subtitle {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
  
}

.rca-hero-quote {
      font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    /* margin: 0 0 2.5rem 0; */
    max-width: 82%;
}

.rca-hero-cta {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.rca-hero-cta .btn {
  border-radius: 6px;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
}
.rca-hero-cta .btn-primary {
  background-color: #1e3a8a;
  color: #ffffff;
}
.rca-hero-cta .btn-outline {
  background-color: transparent;
  border: 1px solid #94a3b8;
  color: #0f172a;
}
.rca-hero-visual {
  display: flex;
  justify-content: center; /* Center image in its column */
  align-items: flex-end; /* Sit flush at bottom */
  align-self: flex-end;
  position: relative;
  width: 100%;
  z-index: 4;
  overflow: visible;
}

.rca-banner-img {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom right;
  display: block;
  
}

.rca-pillars-section {
  padding: 4.5rem 1.5rem;
  position: relative;
}

.rca-outcomes-section {
  padding: 4.5rem 1.5rem;
  background-color: var(--white);
  position: relative;
}

.rca-section-container {
  max-width: 1440px;
  margin: 0 auto;
  /* text-align: center; */
}

.rca-section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 4.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.section-badge {
  font-size: 0.8rem;
  font-weight:600;
  color: #ffffff96;
  text-transform: uppercase;
  letter-spacing: 1.25px;
}

.section-badge.badge-dark {
  color: #94a3b8;
}

.rca-section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--dark-blue);
  margin: 0;
  line-height: 1.2;
}

.rca-section-title.text-white {
  color: var(--white);
}

.rca-section-desc {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

.rca-section-desc.text-muted {
  color: #94a3b8;
}

/* Pillars Section styles */
.rca-pillars-section {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f0f9f4 60%,
    #e0f5ea 100%
  ); /* White to soft teal/mint gradient */
  /* margin-top: -150px; */
}

.rca-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* Cleaned gap */
  }

.rca-section-header.header-left {
  text-align: left;
  margin-left: 0;
  max-width: 850px;
}

.gradient-highlight {
  color: #4ca3ff;
  font-style: italic;
  font-family: "Georgia", "Times New Roman", serif;
}

.rca-pillar-card {
  background-color: var(--white);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1.5px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 4px 20px rgba(10, 27, 68, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: var(--transition);
}

.rca-pillar-card.active-card {
  border: 2px solid var(--primary);
  box-shadow: 0 8px 30px rgba(45, 91, 255, 0.08);
}

.rca-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(45, 91, 255, 0.1);
  border-color: var(--primary);
}

.rca-pillar-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-blue);
  margin: 0;
}

.rca-pillar-card .pillar-tagline {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--dark-blue);
  line-height: 1.45;
  margin: 0;
}

.rca-pillar-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
}

.pillar-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(45, 91, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

.pillar-icon-box.icon-dark {
  background-color: #0a1b44; /* Dark navy filled box */
  color: #ffffff;
}

.pillar-icon-box svg {
  width: 22px;
  height: 22px;
}

/* ============================
   THE LEARNING JOURNEY SECTION
   ============================ */
.rca-journey-section {
  padding: 5rem 2rem 6rem;
  background-color: #ffffff;
  position: relative;
}

.journey-main-title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #0a1b44;
  margin: 0 0 1rem 0;
  text-align: left;
}

.journey-highlight {
  color: #00c9db;
  font-style: italic;
  font-family: "Georgia", "Times New Roman", serif;
}

.journey-wave-container {
  position: relative;
  width: 100%;
  /* Maintain aspect ratio matching the SVG viewBox 1000:400 = 5:2 */
  aspect-ratio: 5 / 2;
  max-height: 480px;
  margin-top: 1rem;
}

.journey-wave-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
}

/* Text Labels positioned outside SVG */
.journey-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  text-align: center;
  transform: translateX(-50%); /* Center horizontally on the left % */
}

.stage-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: #94a3b8; /* Default inactive grey */
  line-height: 1.2;
  transition: color 0.4s ease;
}

.stage-desc {
  font-size: 0.82rem;
  font-weight: 400;
  color: #64748b;
  font-style: italic;
  line-height: 1.35;
  margin-top: 0.1rem;
}

.stage-tag {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 0.15rem;
}

.stage-tag.tag-blue {
  color: #2d5bff;
}
.stage-tag.tag-purple {
  color: #7c3aed;
}
.stage-tag.tag-cyan {
  color: #00c9db;
}
.stage-tag.tag-green {
  color: #10b981;
}
.stage-tag.tag-grey {
  color: #94a3b8;
}

/* Responsive Journey */
@media (max-width: 900px) {
  .stage-name {
    font-size: 0.9rem;
  }

  .stage-desc {
    font-size: 0.72rem;
  }
}

@media (max-width: 600px) {
  .journey-wave-container {
    aspect-ratio: auto;
    height: 480px;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem 0;
  }

  .journey-wave-svg {
    display: none;
  }

  .journey-label {
    position: static !important;
    transform: none;
    flex-direction: row;
    text-align: left;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid #2d5bff;
  }

  .journey-label:nth-child(3) {
    border-left-color: #7c3aed;
  }
  .journey-label:nth-child(4) {
    border-left-color: #00c9db;
  }
  .journey-label:nth-child(5) {
    border-left-color: #94a3b8;
  }
}

/* ============================
   1. WHY EKSAQ SECTION
   ============================ */
.rca-why-section {
  padding: 3.5rem 1.5rem;
  background-color: #f8fafc;
}

.why-main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1b44;
  margin-bottom: 1.5rem;
}

.why-highlight {
  color: #4fbab6;
}

.why-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.why-card {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 0.3s ease;
}

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

.why-icon-box {
  width: 48px;
  height: 48px;
  background-color: #eef2ff;
  color: #2d5bff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.why-icon-box svg {
  width: 24px;
  height: 24px;
}

.why-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1b44;
  margin: 0;
  line-height: 1.3;
}

.why-card-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* ============================
   2. INTERACTIVE LEXICAL SCORE
   ============================ */
.rca-lexical-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f8fafc;
}

.lexical-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: center;
}

.lexical-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lexical-title {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 800;
  color: #0a1b44;
  line-height: 1.1;
     margin-bottom: 0.3rem;
}

.lexical-highlight {
  background: linear-gradient(90deg, #00c9db 0%, #4ce0b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.lexical-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0;
}

.lexical-desc {
      font-size: 1.05rem;
    color: #64748b;
    line-height: 1.2;
    margin-bottom: 1.5rem;
       margin-top: 0.4rem;
}

.lexical-score-card {
  background-color: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(45, 91, 255, 0.05);
}

.score-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.score-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.score-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: #2d5bff;
  line-height: 1;
  margin-top: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.score-unit {
  font-size: 1.1rem;
  font-weight: 700;
  color: #2d5bff;
}

.score-mapped {
  font-size: 0.85rem;
  font-weight: 700;
  color: #2d5bff;
  background-color: #eef2ff;
  padding: 0.4rem 1.2rem;
  border-radius: 20px;
  border: 1.5px solid #2d5bff;
}

.score-card-divider {
  height: 2px;
  background-color: #f1f5f9;
  margin: 1.5rem 0;
}

.score-card-bottom {
  font-size: 0.85rem;
  color: #64748b;
}

.score-card-bottom strong {
  color: #0a1b44;
}

.lexical-right {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.lexical-band-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background-color 0.3s;
}

.lexical-band-card:hover {
  background-color: #f1f5f9;
}

.band-icon {
  width: 40px;
  height: 40px;
  background-color: #eef2ff;
  color: #2d5bff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.band-icon svg {
  width: 20px;
  height: 20px;
}

.band-content {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.band-name {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.band-name.blue {
  color: #2d5bff;
}

.band-range {
  font-size: 1.05rem;
  font-weight: 600;
  color: #334155;
}

.lexical-green-banner {
  background-color: #ffffff;
  border: 1px solid #4ce0b3;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.green-icon {
  color: #4ce0b3;
  flex-shrink: 0;
}

.green-icon svg {
  width: 24px;
  height: 24px;
}

.green-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: #0a1b44;
  margin: 0;
  line-height: 1.4;
}

/* ============================
   3. TWICE THE DEPTH SECTION
   ============================ */
.rca-depth-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f4f9f8; /* Very light mint tint */
}

.depth-main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1b44;
  text-align: center;
  margin-bottom: 2rem;
}

.depth-highlight {
  background: linear-gradient(90deg, #00c9db 0%, #4ce0b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.depth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.depth-card {
  padding: 2rem;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.depth-card:last-child {
  border-right: none;
}

.depth-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.depth-icon {
  width: 44px;
  height: 44px;
  background-color: #eef2ff;
  color: #2d5bff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.depth-icon svg {
  width: 22px;
  height: 22px;
}

.depth-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0a1b44;
  margin: 0;
  letter-spacing: 0.5px;
}

.depth-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.depth-green-banner {
  background-color: #e2f9ee;
  border: 1.5px solid #4ce0b3;
  border-radius: 40px;
  padding: 1.5rem;
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

.depth-green-banner p {
  font-size: 1rem;
  font-weight: 700;
  color: #0a1b44;
  margin: 0;
}

/* ============================
   4. DIFFERENTIATED TESTING
   ============================ */
.rca-testing-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #0a1629; /* Deep navy */
}

.testing-main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2rem;
}

.testing-highlight {
  background: linear-gradient(90deg, #00c9db 0%, #4ce0b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.testing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.testing-card {
  background-color: #1e293b;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.testing-tag {
  display: inline-block;
  background-color: rgba(45, 91, 255, 0.2);
  color: #93c5fd;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.testing-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 1rem 0;
}

.testing-desc {
  font-size: 1rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

.testing-dark-banner {
  background-color: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  padding: 1.5rem;
  text-align: center;
  margin: 0 auto;
  max-width: 800px;
}

.testing-dark-banner p {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

/* ============================
   5. EXPLORE MODULES SECTION
   ============================ */
.rca-modules-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #ffffff;
}

.modules-main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1b44;
  margin-bottom: 2rem;
}

.modules-highlight {
  background: linear-gradient(90deg, #00c9db 0%, #4ce0b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.modules-tabs {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.module-tab {
  padding: 0.6rem 1.8rem;
  border-radius: 30px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}

.module-tab.active {
  background-color: #2d5bff;
  color: #ffffff;
  border: 1px solid #2d5bff;
}

.module-tab:not(.active) {
  background-color: #ffffff;
  color: #2d5bff;
  border: 1px solid #e2e8f0;
}

.module-tab:not(.active):hover {
  border: none !important;
}

.modules-content-card {
  background-color: #ffffff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  padding: 3rem 4rem;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.02);
}

.modules-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
}

.modules-left {
  display: flex;
  flex-direction: column;
}

.modules-card-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0a1b44;
  margin: 0 0 1rem 0;
  line-height: 1.35;
}

.modules-card-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 2.5rem 0;
}

.modules-stats {
  display: flex;
  gap: 1rem;
}

.stat-box {
  background-color: #f4f6f9;
  border-radius: 12px;
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 4rem;
  font-weight: 800;
  color: #0B1EBA
 ;
  margin-bottom: 0.3rem;
}

.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

.modules-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.module-list-item {
  background-color: #f4f6f9;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.list-icon {
  color: #2d5bff;
  font-size: 1.1rem;
  line-height: 1.4;
  margin-top: 2px;
}

.list-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.module-list-item p {
  margin: 0;
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.6;
}

/* Responsive updates for new sections */
@media (max-width: 1024px) {
  .why-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .lexical-split-layout,
  .modules-split-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .depth-grid,
  .testing-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .why-cards-grid,
  .depth-grid,
  .testing-grid {
    grid-template-columns: 1fr;
  }

  .depth-card {
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  .depth-card:last-child {
    border-bottom: none;
  }

  .modules-content-card {
    padding: 2rem;
  }

  .modules-stats {
    flex-direction: column;
  }
}

/* ============================
   6. READING COMPREHENSION ASSESSMENT SECTION
   ============================ */
.rca-assessment-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #ffffff;
}

.assessment-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 4rem;
}

.assessment-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 2.5rem 2rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 0.3s;
}

.assessment-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.assessment-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.assessment-icon-box.bg-blue {
  background-color: #eef2ff;
}
.assessment-icon-box.bg-purple {
  background-color: #f3e8ff;
}
.assessment-icon-box.bg-cyan {
  background-color: #e0f9fb;
}
.assessment-icon-box.bg-green {
  background-color: #e2f9ee;
}

.assessment-icon-box svg {
  width: 24px;
  height: 24px;
}

.assessment-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0a1b44;
  margin: 0 0 0.75rem 0;
}

.assessment-card p {
  font-size: 0.85rem;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

/* ============================
   7. FOUR PILLARS OF RCA 2.0
   ============================ */
.rca-four-pillars-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #0a1629;
  overflow: hidden;
}

.four-pillars-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  max-width: 1200px;
  /* margin: 0 auto 5rem auto; */
  padding: 0 0 4rem 2rem;
}



.four-pillars-diagram {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.pillars-nodes-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  position: relative;
}

.pillar-node {
  position: relative;
  padding-left: 20px;
}

.node-bracket {
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  position: relative;
  height: 100%;
}

.node-bracket::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 100%
  );
}

.node-bracket::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 100%
  );
}

.node-content {
  padding: 1.5rem 1rem 1.5rem 4.5rem;
  min-height: 140px; height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}




.node-diamond {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  width: 67px;
  height: 100px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 36' fill='%230a1629' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 24 0 Q 24 18 48 18 Q 24 18 24 36 Q 24 18 0 18 Q 24 18 24 0' /%3E%3C/svg%3E");
  background-size: contain;
  padding: 0;
}

.node-number {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}


.node-content h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  line-height: 1.4;
}

.node-content p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0;
}

/* ============================
   8. EMPOWERING STAKEHOLDERS
   ============================ */
.rca-stakeholders-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #0a1629;
}

.stakeholders-main-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 1rem;
}

.stakeholders-highlight {
  background: linear-gradient(90deg, #00c9db 0%, #4ce0b3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.stakeholders-desc {
  font-size: 1.1rem;
  color: #94a3b8;
  margin-bottom: 3rem; /* Cleaned margin */
}

.stakeholders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.rca-stakeholders-section .stakeholder-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sh-icon-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.sh-icon-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}

.sh-icon-inner svg {
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.rca-stakeholders-section .stakeholder-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 1rem 0;
  line-height: 1.4;
}

.rca-stakeholders-section .stakeholder-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Media Query Overrides for RCA Page */
@media (max-width: 1200px) {
  .rca-hero-section {
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 650px;
  
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  /* background-color: #CEDCF6; */
}

  .rca-hero-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .rca-assessment-section,
  .rca-four-pillars-section {
    padding: 3.5rem 1.5rem;
  }

  .rca-section-header {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .assessment-cards-grid,
  .pillars-nodes-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .rca-hero-section {
  width: 100%;
  height: calc(100vh - 80px);
  min-height: 650px;
  
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background-color: #CEDCF6;
}

  .rca-assessment-section,
  .rca-four-pillars-section {
    padding: 4rem 1rem;
  }

  .rca-hero-cta {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .rca-hero-cta .btn {
    width: 100%;
  }
}

/* ============================
   9. FAQ SECTION
   ============================ */
.rca-faq-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #ffffff;
}

.faq-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1b44;
  text-align: center;
  margin-bottom: 2rem;
}

.faq-accordion {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item { padding: 1.25rem 1.5rem !important; margin: 0 !important; height: auto !important;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  border: none !important;
}

.faq-item.active {
  background-color: #f8faff;
  border: none !important;
}

.faq-question { margin: 0 !important; padding: 0 !important; line-height: 1.4 !important;
  padding: 1.75rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.faq-question h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #0a1b44;
  margin: 0;
  padding-right: 2rem;
}

.faq-icon { margin: 0 !important; padding: 0 !important;
  width: 24px;
  height: 24px;
  color: #2d5bff;
  flex-shrink: 0;
  transition: box-shadow 0.3s ease;
}

.faq-icon svg {
  width: 100%;
  height: 100%;
}

.faq-item.active .faq-icon { margin: 0 !important; padding: 0 !important;
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s ease,
    padding 0.4s ease;
  padding: 0 2rem;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 2rem 1.75rem 2rem;
  padding-left: 2px;
}

.faq-answer p {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}

/* ============================
   Institution Index CTA Section
   ============================ */
.institution-index-section {
  background: radial-gradient(100% 100% at 50% 0%, #f0f6ff 0%, #ffffff 100%);
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
}

.institution-index-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.enterprise-pill {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.5rem;
  background-color: #eef2ff;
  color: #2d5bff;
  padding: 0.5rem 1.15rem;
  border-radius: 100px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 2rem;
  border: 1px solid rgba(45, 91, 255, 0.1);
}

.pill-star-icon {
  width: 12px;
  height: 12px;
}

.institution-index-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #0a1b44;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

.index-highlight {
  background: linear-gradient(90deg, #2d5bff 0%, #10b981 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.institution-index-desc {
  font-size: 1.1rem;
  color: #475569;
  max-width: 680px;
  line-height: 1.6;
  margin: 0 0 2.5rem 0;
}

.institution-index-btn-group {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.btn-secondary-outline {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0a1b44;
  padding: 0.85rem 2rem;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.btn-secondary-outline:hover {
  background-color: #f8fafc;
  border: none !important;
  transform: translateY(-1px);
}

@media (max-width: 576px) {
  .institution-index-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .institution-index-btn-group .btn,
  .institution-index-btn-group .btn-secondary-outline {
    width: 100%;
  }
}

/* Responsive stakeholders section grid */
@media (max-width: 1024px) {
  .stakeholders-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

/* ==========================================
   MEGA MENU STYLES
   ========================================== */
.nav-item-dropdown {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.dropdown-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  transition: box-shadow 0.3s ease;
  vertical-align: middle;
}

.mega-menu {
  position: absolute;
  top: 100%;
  /* left: 41%; */
  transform: translateX(-50%) translateY(10px);
  background-color: #fff;
  /* background-color: ("#ffffff" )!important; */
  border-radius: 0 0 16px 16px;
  box-shadow: 0 15px 50px rgba(10, 22, 41, 0.15);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem 1rem;
  width: max-content;
  max-width: 95vw;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 100;
  pointer-events: none;
}

.nav-item-dropdown.active .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.nav-item-dropdown.active .dropdown-icon {
  transform: rotate(180deg);
}

.mega-menu-col {
  padding: 0 1rem;
  border-right: 1px solid rgba(148, 163, 184, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.mega-menu-bg{
  background-color: "#ffffff";
}

.mega-menu-col:last-child {
  border-right: none;
}

.mega-menu-col h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 0.8rem 0;
  }

.mega-menu-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.mega-menu-col ul li a {
  text-decoration: none;
  color: #64748b;
  font-size: 0.85rem;
  transition: color 0.2s ease;
  white-space: nowrap;
  font-weight: 500;
}

.mega-menu-col ul li a:hover {
  color: var(--primary);
}

@media (max-width: 991px) {
  .mega-menu {
    display: none; /* Hide mega menu on mobile for now */
  }
}

.four-pillars-rca { color: #5bc5f2; }
.four-pillars-20 { color: #5bd4a2; }


/* ============================
   HPC PAGE STYLES
   ============================ */

.hpc-hero-section {
    width: 100%;
    background-image:url("assets/hpc_hero.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    display: flex;
}

.hpc-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr; /* Text a bit narrower, image wider */
    gap: 1rem;
    align-items: center;
    width: 100%;
   padding: 0rem 2rem 7rem 1rem;
}

.hpc-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 5;
  padding-top:4rem ;
}

.hpc-hero-badge {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(74, 224, 180, 0.1);
  color: #4ae0b4;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  width: fit-content;
  border: 1px solid rgba(74, 224, 180, 0.2);
}

.hpc-hero-badge svg {
  width: 14px;
  height: 14px;
}

.hpc-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -1px;
  margin: 0;
}

.hpc-highlight {
  color: #4ae0b4;
}

.hpc-hero-desc {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.hpc-desc-bold {
  font-size: 1.05rem;
  color: #a0aec0;
  margin: 0;
  line-height: 1.5;
}

.hpc-desc-light {
  font-size: 1rem;
  color: #718096;
  margin: 0;
  line-height: 1.6;
}

.hpc-hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.hpc-feature-pill {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #94a3b8;
  padding: 0.5rem 1.25rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
}

.hpc-hero-cta {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.btn-outline-light {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  background-color: transparent;
}

.btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.hpc-hero-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 4;
}

.hpc-banner-img {
  width: 100%;
  max-width: 100%;
  max-height: 600px;
  object-fit: contain;
  display: block;
  transform: scale(1.1);
  transform-origin: bottom center;
}

.hpc-comparison-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f8fafc;
}

.hpc-comp-container {
  max-width: 1440px;
  margin: 0 auto;
}

.hpc-comp-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hpc-comp-badge {
  display: inline-block;
  background-color: #eef2ff;
  color: #2d5bff;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.hpc-comp-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0;
}

.hpc-comp-highlight {
  color: #2d5bff;
}

.hpc-comp-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.hpc-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.comp-card {
  border-radius: 24px;
  padding: 3rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
  position: relative;
  overflow: hidden;
}

.comp-card-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.comp-card-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-traditional {
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.card-hpc {
  background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
  color: #ffffff;
}

.comp-card-top {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.comp-icon-box {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-red {
  background-color: #fee2e2;
  color: #ef4444;
}

.icon-white {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.comp-icon-box svg {
  width: 24px;
  height: 24px;
}

.comp-card-top h3 {
  white-space: nowrap;
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.25rem 0;
}

.card-traditional .comp-card-top h3 {
  white-space: nowrap;
  color: #1e293b;
}

.comp-card-top p {
  white-space: nowrap;
  font-size: 0.85rem;
  margin: 0;
}

.card-traditional .comp-card-top p {
  white-space: nowrap;
  color: #64748b;
}

.card-hpc .comp-card-top p {
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
}

.comp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comp-list li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.card-traditional .comp-list li {
  color: #475569;
}

.card-hpc .comp-list li {
  color: #ffffff;
}

.list-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.list-red .list-icon {
  background-color: #fee2e2;
  color: #ef4444;
}

.list-green .list-icon { 
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #4ae0b4; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.list-icon svg {
  width: 14px;
  height: 14px;
}

/* ============================
   HPC DOMAINS SECTION
   ============================ */
.hpc-domains-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f8fafc;
}

.hpc-domains-container {
  max-width: 1440px;
  margin: 0 auto;
}

.hpc-domains-header {
  margin-bottom: 3.5rem;
  text-align: center;
}

.hpc-domains-badge {
  display: inline-block;
  background-color: #eef2ff;
  color: #2d5bff;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hpc-domains-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0;
}

.hpc-domains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.domain-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 3rem 2.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.6);
    transition: box-shadow 0.3s ease;
}



.domain-icon-box {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

.domain-icon-box svg {
  width: 26px;
  height: 26px;
}

.box-blue {
  background-color: #eef2ff;
  color: #2d5bff;
}

.box-purple {
  background-color: #f3e8ff;
  color: #9333ea;
}

.box-green {
  background-color: #dcfce7;
  color: #16a34a;
}

.domain-category {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.text-blue { color: #2d5bff; }
.text-purple { color: #9333ea; }
.text-green { color: #16a34a; }

.domain-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 1.25rem 0;
}

.domain-desc {
  font-size: 1rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* ============================
   HPC POLICY ALIGNMENT SECTION
   ============================ */
.hpc-policy-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #0b1120;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.hpc-policy-container {
  max-width: 1200px;
  margin: 0 auto;
}

.hpc-policy-badge {
  display: inline-block;
  background-color: rgba(255,255,255,0.05);
  color: #a0aec0;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hpc-policy-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 3rem 0;
}

.hpc-tabs-nav {
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  background-color: rgba(255,255,255,0.03);
  padding: 0.5rem;
  border-radius: 16px;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.hpc-tab-btn {
  background: transparent;
  border: none;
  color: #718096;
  padding: 0.875rem 2rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  letter-spacing: 0.5px;
}

.hpc-tab-btn:hover {
  color: #ffffff;
}

.hpc-tab-btn.active {
  background-color: #2d5bff;
  color: #ffffff;
}

.hpc-tab-pane {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}

.hpc-tab-pane.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.hpc-tab-subtitle {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.hpc-tab-line {
  width: 40px;
  height: 2px;
  background-color: #4ae0b4;
}
.line-yellow { background-color: #f59e0b; }

/* TAB 1: NEP 2020 */
.nep-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.nep-card {
  background-color: #121930;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.05);
  border-left: 3px solid #60a5fa;
  transition: all 0.3s ease;
  min-height: 240px;
  display: flex;
  flex-direction: column;
}

.nep-card:hover {
  border-color: rgba(45, 91, 255, 0.4);
  box-shadow: 0 0 20px rgba(45, 91, 255, 0.1);
  transform: translateY(-5px);
}

.nep-watermark {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(255,255,255,0.02);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.nep-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(45, 91, 255, 0.15);
  color: #60a5fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  border: 1px solid rgba(45, 91, 255, 0.3);
}

.nep-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  position: relative;
  z-index: 2;
}

.nep-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 2;
}

/* TAB 2: NCF 2023 */
.ncf-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  align-items: center;
}

.ncf-left h3 {
  color: #ffffff;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 1.5rem 0;
}

.ncf-left p {
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 3rem 0;
}

.ncf-chart {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  height: 100px;
  margin-top: 2rem;
}

.ncf-bar {
  width: 60px;
  border-radius: 6px 6px 0 0;
  opacity: 0.8;
}

.bar-1 { height: 40%; background-color: #0f766e; }
.bar-2 { height: 50%; background-color: #65a30d; }
.bar-3 { height: 45%; background-color: #1d4ed8; }
.bar-4 { height: 70%; background-color: #a21caf; }

.ncf-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ncf-card {
  background-color: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid transparent;
}

.ncf-watermark {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 50px;
  font-weight: 900;
  color: rgba(255,255,255,0.03);
  line-height: 1;
}

.ncf-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.ncf-icon svg { width: 16px; height: 16px; }

.ncf-card h4 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}
/* Fix for global border:none overrides later in the file */
.ncf-card.card-green { border-bottom: 2px solid #10b981 !important; }
.ncf-card.card-yellow { border-bottom: 2px solid #eab308 !important; }
.ncf-card.card-blue { border-bottom: 2px solid #3b82f6 !important; }
.ncf-card.card-pink { border-bottom: 2px solid #ec4899 !important; }


.card-green { border-bottom-color: #10b981; }
.card-green .ncf-icon { background-color: rgba(16, 185, 129, 0.1); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

.card-yellow { border-bottom-color: #eab308; }
.card-yellow .ncf-icon { background-color: rgba(234, 179, 8, 0.1); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.3); }

.card-blue { border-bottom-color: #3b82f6; }
.card-blue .ncf-icon { background-color: rgba(59, 130, 246, 0.1); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }

.card-pink { border-bottom-color: #ec4899; }
.card-pink .ncf-icon { background-color: rgba(236, 72, 153, 0.1); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }

/* TAB 3: COMPETENCY MODEL */
.comp-model-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.comp-model-chart {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.comp-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.comp-bar {
  background-color: #1e3a8a;
  color: #ffffff;
  padding: 0.6rem 1.5rem;
  border-radius: 8px 30px 30px 8px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

.b-8 { width: 100%; }
.b-7 { width: 95%; }
.b-6 { width: 90%; }
.b-5 { width: 80%; }
.b-4 { width: 70%; }
.b-3 { width: 60%; }
.b-2 { width: 50%; }
.b-1 { width: 40%; }

.comp-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: #64748b;
  min-width: 20px;
}

.text-orange { color: #f59e0b; }

.comp-model-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cm-card {
  background-color: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  border: 1px solid rgba(255,255,255,0.05);
}

.cm-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.cm-card-top h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
}

.cm-badge {
  background-color: rgba(255,255,255,0.1);
  color: #94a3b8;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
}

.cm-badge.badge-green { background-color: rgba(74, 224, 180, 0.1); color: #4ae0b4; }
.cm-badge.badge-orange { background-color: rgba(245, 158, 11, 0.1); color: #f59e0b; }

.cm-card p {
  color: #94a3b8;
  font-size: 0.9rem;
  margin: 0;
}

/* ============================
   HPC FIVE PILLARS SECTION
   ============================ */
.hpc-pillars-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f4f7ff;
}

.hpc-pillars-container {
  max-width: 1440px;
  margin: 0 auto;
}

.hpc-pillars-header {
  margin-bottom: 2rem;
}

.hpc-pillars-badge {
  display: inline-block;
  background-color: #e2e8f0;
  color: #3b82f6;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hpc-pillars-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.hpc-highlight-blue {
  color: #2d5bff;
}

.hpc-pillars-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
  max-width: none;
  margin: 0 auto;
}

.hpc-pillars-layout {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: 1rem;
}

/* Vertical Tabs */
.hpc-v-tabs {
  display: flex;
  flex-direction: column;
    gap: 1rem;

}

.hpc-v-tab-btn {
  background-color: #ffffff;
  border: 1px solid transparent;
  padding: 1.25rem;
  flex: 1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  font-family: inherit;
  text-align: left;
}

.hpc-v-tab-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

.v-tab-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent !important;
}

.v-tab-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  flex-grow: 1;
}

.v-tab-arrow {
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hpc-v-tab-btn.active .v-tab-arrow {
  opacity: 1;
}

/* Tab Active States by Theme */
.hpc-v-tab-btn.tab-theme-blue .v-tab-icon { color: #3b82f6; }
.hpc-v-tab-btn.tab-theme-blue.active { background-color: #eff6ff; border: none !important; }
.hpc-v-tab-btn.tab-theme-blue.active .v-tab-arrow { color: #3b82f6; }

.hpc-v-tab-btn.tab-theme-purple .v-tab-icon { color: #a855f7; }
.hpc-v-tab-btn.tab-theme-purple.active { background-color: #faf5ff; border: none !important; }
.hpc-v-tab-btn.tab-theme-purple.active .v-tab-arrow { color: #a855f7; }

.hpc-v-tab-btn.tab-theme-teal .v-tab-icon { color: #14b8a6; }
.hpc-v-tab-btn.tab-theme-teal.active { background-color: #f0fdfa; border: none !important; }
.hpc-v-tab-btn.tab-theme-teal.active .v-tab-arrow { color: #14b8a6; }

.hpc-v-tab-btn.tab-theme-green .v-tab-icon { color: #22c55e; }
.hpc-v-tab-btn.tab-theme-green.active { background-color: #f0fdf4; border: none !important; }
.hpc-v-tab-btn.tab-theme-green.active .v-tab-arrow { color: #22c55e; }

.hpc-v-tab-btn.tab-theme-orange .v-tab-icon { color: #f97316; }
.hpc-v-tab-btn.tab-theme-orange.active { background-color: #fff7ed; border: none !important; }
.hpc-v-tab-btn.tab-theme-orange.active .v-tab-arrow { color: #f97316; }


/* Vertical Panes */
.hpc-v-content-wrapper {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
  position: relative;
}

.v-pane {
  display: none;
  animation: fadeIn 0.4s ease forwards;
}

.v-pane.active {
  display: block;
}

.v-pane-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.v-pane-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.v-pane-icon svg { width: 30px; height: 30px; }

.v-pane-header h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}

.v-pane-desc {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.v-pane-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.v-feature {
  background-color: #f8fafc;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.v-feature span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
}

.check-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
}
.check-icon svg { width: 12px; height: 12px; }

.v-pane-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.v-pill {
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 700;
}

/* Themes for Panes */
/* Blue */
.theme-blue .v-pane-icon { background-color: #eff6ff; color: #3b82f6; }
.theme-blue .check-icon { color: #3b82f6; }
.theme-blue .v-pill { background-color: #eff6ff; color: #3b82f6; }

/* Purple */
.theme-purple .v-pane-icon { background-color: #faf5ff; color: #a855f7; }
.theme-purple .check-icon { color: #a855f7; }
.theme-purple .v-pill { background-color: #faf5ff; color: #a855f7; }

/* Teal */
.theme-teal .v-pane-icon { background-color: #f0fdfa; color: #14b8a6; }
.theme-teal .check-icon { color: #14b8a6; }
.theme-teal .v-pill { background-color: #f0fdfa; color: #14b8a6; }

/* Green */
.theme-green .v-pane-icon { background-color: #f0fdf4; color: #22c55e; }
.theme-green .check-icon { color: #22c55e; }
.theme-green .v-pill { background-color: #f0fdf4; color: #22c55e; }

/* Orange */
.theme-orange .v-pane-icon { background-color: #fff7ed; color: #f97316; }
.theme-orange .check-icon { color: #f97316; }
.theme-orange .v-pill { background-color: #fff7ed; color: #f97316; }

@media (max-width: 992px) {
  .hpc-pillars-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================
   HPC STAKEHOLDER SECTION
   ============================ */
.hpc-stakeholders-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f8fafc;
}

.hpc-stakeholders-container {
  max-width: 1440px;
  margin: 0 auto;
}

.hpc-stakeholders-header {
  margin-bottom: 2rem;
}

.hpc-stakeholders-badge {
  display: inline-block;
  background-color: #eef2ff;
  color: #2d5bff;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hpc-stakeholders-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.hpc-stakeholders-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
}

.hpc-stakeholders-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.hpc-stakeholders-section .stakeholder-card {
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
  border-bottom: 8px solid transparent;
}

.hpc-stakeholders-section .stakeholder-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.sc-content {
  padding: 2.5rem 2rem 1rem 2rem;
  flex-grow: 1;
}

.sc-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.sc-icon-box svg {
  width: 24px;
  height: 24px;
}

.sc-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 0.75rem 0;
}

.sc-desc {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.sc-image-area {
  height: 250px;
  background-color: #f1f5f9;
  position: relative;
  overflow: hidden;
  /* Once images are uploaded, this will act as a background container */
}

.sc-image-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  color: #94a3b8;
  font-size: 0.9rem;
  border-top: 1px dashed #cbd5e1;
}

/* Card Themes */
/* Student - Blue */
.card-blue { border-bottom-color: #1d4ed8; }
.card-blue .sc-icon-box { background-color: #eff6ff; color: #1d4ed8; }
.card-blue .sc-title span { color: #1d4ed8; }

/* Teacher - Red */
.card-red { border-bottom-color: #e11d48; }
.card-red .sc-icon-box { background-color: #ffe4e6; color: #e11d48; }
.card-red .sc-title span { color: #e11d48; }

/* School Leader - Purple */
.card-purple { border-bottom-color: #7e22ce; }
.card-purple .sc-icon-box { background-color: #f3e8ff; color: #7e22ce; }
.card-purple .sc-title span { color: #7e22ce; }

/* Parent - Pink */
.card-pink { border-bottom-color: #be185d; }
.card-pink .sc-icon-box { background-color: #fce7f3; color: #be185d; }
.card-pink .sc-title span { color: #be185d; }

@media (max-width: 1200px) {
  .hpc-stakeholders-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .hpc-stakeholders-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================
   FLOATING STATS CARDS
   ============================ */
.sc-image-area {
  position: relative;
  /* Make sure the image acts as a nice background for the floating card */
  padding: 1rem; /* Padding to inset the floating card */
  display: flex;
  align-items: flex-end; /* Align card to bottom */
}

/* Ensure the image container has a fallback if images fail */
.sc-image-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);
  pointer-events: none;
}

.sc-floating-card {
  background-color: #ffffff;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 140px;
  position: relative;
  z-index: 2; /* Sit above the gradient */
  margin-bottom: 1rem;
  margin-left: 0.5rem;
}

.sc-fc-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.5px;
  line-height: 1.3;
  margin-bottom: 0.75rem;
}

.sc-fc-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.sc-fc-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.sc-fc-circle {
  width: 30px;
  height: 30px;
}

.sc-fc-circle .circle-bg {
  fill: none;
  stroke: #f1f5f9;
  stroke-width: 3.8;
}

.sc-fc-circle .circle-fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.8;
  stroke-linecap: round;
}

.sc-fc-sparkline {
  width: 100%;
  height: 25px;
}

/* Theme Colors for Floating Cards */
.text-blue { color: #1d4ed8; }
.text-red { color: #e11d48; }
.text-purple { color: #7e22ce; }
.text-pink { color: #be185d; }

/* Fix Alignment for Stakeholder Cards */
.hpc-stakeholders-section .stakeholder-card {
  text-align: left;
}

.sc-content {
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sc-image-area {
  justify-content: flex-start;
}

.sc-floating-card {
  margin-left: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ============================
   WHY CHOOSE SECTION
   ============================ */
.hpc-why-choose-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #ffffff;
}

.hpc-why-choose-container {
  max-width: 1440px;
  margin: 0 auto;
}

.hpc-why-choose-header {
  text-align: left;
  margin-bottom: 3rem; /* Cleaned margin */
}

.hpc-why-choose-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0 0 1rem 0;
}

.text-gradient {
  background: linear-gradient(90deg, #14b8a6, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hpc-why-choose-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
}

/* Transformation Grid */
.hpc-transform-layout {
  display: flex;
  flex-direction: column;
}

.transform-headers {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  margin-bottom: 1.5rem;
}

.th-left, .th-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.th-left { justify-content: flex-end; color: #94a3b8; font-weight: 800; letter-spacing: 2px; }
.th-right { justify-content: flex-start; }

.text-green-bold {
  color: #16a34a;
  font-weight: 800;
  letter-spacing: 2px;
}

.th-line {
  flex-grow: 1;
  height: 2px;
  background-color: #e2e8f0;
}

.th-line-short {
  width: 20px;
  height: 2px;
  background-color: #e2e8f0;
}

.th-center {
  display: flex;
  justify-content: center;
}

.th-badge {
  background-color: #ffffff;
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.2);
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.05);
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Timeline */
.transform-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background-color: #e2e8f0;
  z-index: 0;
}

.t-row {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  position: relative;
  z-index: 1;
}

.t-before {
  text-align: right;
  padding-right: 2.5rem;
  color: #64748b;
  font-size: 1.05rem;
  font-weight: 500;
}

.t-after {
  text-align: left;
  padding-left: 2.5rem;
  color: #1e293b;
  font-size: 1.05rem;
  font-weight: 700;
}

.t-middle {
  display: flex;
  justify-content: center;
}

/* 3D Glossy Pills */
.t-pill {
  width: 180px;
  height: 85px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  /* 3D effect styling */
  box-shadow: 
    0 10px 20px -5px rgba(0,0,0,0.2), 
    inset 0 4px 6px rgba(255,255,255,0.4),
    inset 0 -4px 6px rgba(0,0,0,0.2);
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.t-pill::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.pill-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.pill-inner svg {
  width: 20px;
  height: 20px;
}

.pill-val {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.pill-label {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 1;
}

/* Colors for Pills */
.pill-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  box-shadow: 0 10px 25px -5px rgba(22, 163, 74, 0.4), inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.2);
}

.pill-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  box-shadow: 0 10px 25px -5px rgba(29, 78, 216, 0.4), inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.2);
}

.pill-teal {
  background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  box-shadow: 0 10px 25px -5px rgba(3, 105, 161, 0.4), inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.2);
}

.pill-pink {
  background: linear-gradient(135deg, #e11d48 0%, #9f1239 100%);
  box-shadow: 0 10px 25px -5px rgba(159, 18, 57, 0.4), inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.2);
}

.pill-orange {
  background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
  box-shadow: 0 10px 25px -5px rgba(194, 65, 12, 0.4), inset 0 4px 6px rgba(255,255,255,0.4), inset 0 -4px 6px rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
  .transform-headers {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .th-left, .th-right { justify-content: center; }
  .t-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .t-before, .t-after {
    text-align: center;
    padding: 0;
  }
  .timeline-line { display: none; }
}

/* ============================
   DEMO SECTION
   ============================ */
.hpc-demo-section {
  padding: 4rem 1.5rem; /* Cleaned padding */
  background-color: #f4f7ff;
}

.hpc-demo-container {
  max-width: 1100px;
  margin: 0 auto;
}

.hpc-demo-header {
  margin-bottom: 3.5rem;
}

.hpc-demo-badge {
  display: inline-block;
  background-color: #eef2ff;
  color: #2d5bff;
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1.25rem;
  text-transform: uppercase;
}

.hpc-demo-title {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}

.hpc-demo-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
}

.hpc-demo-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1rem;
}

/* Left: Info Card */
.demo-info-card {
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 100%);
  border-radius: 24px;
  padding: 3rem 2.5rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Decorative background circle to add depth */
.demo-info-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

.demo-info-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: #94a3b8;
  margin: 0 0 2rem 0;
}

.demo-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 3rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-grow: 1;
}

.demo-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.demo-checklist .check-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid #06b6d4; /* cyan */
  color: #06b6d4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.demo-checklist .check-circle svg {
  width: 12px;
  height: 12px;
}

.demo-checklist span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
}

.demo-contact-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #cbd5e1;
  font-size: 0.85rem;
}

.contact-item svg {
  width: 18px;
  height: 18px;
  color: #94a3b8;
}

/* Right: Form Card */
.demo-form-card {
  background-color: #ffffff;
  border-radius: 24px;
  padding: 3.5rem 3rem;
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.demo-form-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 2.5rem 0;
}

.demo-form {
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
  /* letter-spacing: 1px; */
}

/* .form-group input {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  color: #1e293b;
  font-family: inherit;
  transition: all 0.3s ease;
} */

.form-group input::placeholder {
  color: #94a3b8;
}

.form-group input:focus {
  outline: none;
  border: none !important;
  box-shadow: 0 0 0 3px rgba(45, 91, 255, 0.1);
  background-color: #ffffff;
}

.demo-submit-btn {
  background-color: #2d5bff;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 1.25rem;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.demo-submit-btn:hover {
  background-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(45, 91, 255, 0.2);
}

.demo-form-note {
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

@media (max-width: 992px) {
  .hpc-demo-layout {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================
   EXACT DESIGN OVERRIDES FOR DEMO
   ============================ */

.demo-info-card {
  background: 
    linear-gradient(to bottom, rgba(9, 19, 115, 0.95) 0%, rgba(9, 19, 115, 0.4) 100%),
    url('Images/hpc form image.png');
  border-radius: 16px;
  padding: 3rem 2.5rem;
  box-shadow: none;
}

.demo-info-card::before {
  display: none;
}

.demo-info-title {
  color: #a5b4fc;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 2rem;
}

.demo-checklist .check-circle {
  width: 20px;
  height: 20px;
  border: 1.5px solid #38bdf8;
  background-color: transparent;
  color: #38bdf8;
  border-radius: 50%;
  box-shadow: none;
}

.demo-checklist .check-circle svg {
  width: 12px;
  height: 12px;
}

.demo-checklist span {
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0;
  color: #ffffff;
}

.demo-contact-glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: none;
}

.demo-form input {
  background-color: #f8fafc;
  border: none;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  color: #334155;
}

.demo-form input:focus {
  background-color: #f1f5f9;
  border: 1px solid #cbd5e1;
  outline: none;
  box-shadow: none;
}

.demo-form .form-group label {
  font-size: 0.7rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 0.4rem;
}

.demo-submit-btn {
  background-color: #3730a3;
  border-radius: 8px;
  margin-top: 0.5rem;
  font-weight: 600;
}

.demo-form-note {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 1rem;
}

/* ==========================================================
   STAKEHOLDER DASHBOARDS SECTION (RESTORED)
   ========================================================== */

.hpc-dashboards-section {
  padding: 3rem 0;
  background-color: #f8fafc;
}

.dashboards-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.dashboards-header {
  text-align: center;
  margin-bottom: 2rem;
}

.dash-badge {
  display: inline-block;
  background-color: #eef2ff;
  color: #4f46e5;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.dash-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1rem;
}

.dash-subtitle {
  font-size: 1.15rem;
  color: #64748b;
  max-width: 700px;
  margin: 0 auto;
}

.dash-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.dash-card {
  background-color: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}

.dash-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
/* Fix dash cards - remove borders and ensure rounded corners */
.dash-card.border-blue, 
.dash-card.border-red, 
.dash-card.border-purple, 
.dash-card.border-pink,
.dash-card {
    border: none !important;
}


.dash-card-content {
  padding: 2.5rem 2rem 1.5rem 2rem; /* Premium generous padding */
  flex: 0 0 auto;
}

.dash-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.dash-icon-wrapper svg {
  width: 24px;
  height: 24px;
}

/* Colors */
.bg-light-blue { background-color: #eff6ff; }
.bg-light-red { background-color: #fef2f2; }
.bg-light-purple { background-color: #f5f3ff; }
.bg-light-pink { background-color: #fdf2f8; }

.text-blue { color: #2563eb; }
.text-red { color: #dc2626; }
.text-purple { color: #7c3aed; }
.text-pink { color: #db2777; }

.border-blue { border-bottom: 4px solid #2563eb; }
.border-red { border-bottom: 4px solid #dc2626; }
.border-purple { border-bottom: 4px solid #7c3aed; }
.border-pink { border-bottom: 4px solid #db2777; }

.dash-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 0.5rem;
}

.dash-card-text {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
}

.dash-card-image {
  flex: 0 1 auto !important;
  width: 100%;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}

.dash-card-image img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

@media (max-width: 1024px) {
  .dash-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .dash-cards-grid {
    grid-template-columns: 1fr;
  }
}

.domain-card.card-blue:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #2563eb;
}

.domain-card.card-purple:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #7c3aed;
}

.domain-card.card-green:hover {
  box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #10b981;
}

.comp-row:hover .comp-bar {
  background-color: #3b82f6; /* Much brighter blue on hover */
  transform: scaleX(1.02); /* Slight extension */
  transform-origin: left center;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.card-hpc h3 { color: #ffffff; }

.list-green .list-icon { 
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #4ae0b4; 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.list-green .list-icon svg { width: 22px; height: 22px; }



/* ==========================================
   SML (School Management & Leadership) STYLES
   ========================================== */
.sml-page { background: #f8fafc; }

/* Hero Section */
.sml-hero-section {
    position: relative;
    padding: 4rem 2rem 6rem;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.sml-hero-bg-wrapper {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}
.sml-hero-bg-image {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    opacity: 0.15;
}
.sml-grid-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at center, transparent 0%, #f8fafc 100%);
}
.sml-hero-gradient-left {
    position: absolute;
    top: 0; left: 0; width: 60%; bottom: 0;
    background: linear-gradient(to right, #f8fafc 0%, transparent 100%);
}
.sml-hero-gradient-bottom {
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 30%;
    background: linear-gradient(to top, #f8fafc 0%, transparent 100%);
}

.sml-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 2.5rem; /* Cleaned gap */
    width: 100%;
}

.sml-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  
}

.sml-badge {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    width: max-content; /* Ensure it never stretches */
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.sml-hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.1;
    color: #0f172a;
    font-weight: 800;
}

.sml-hero-desc {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.6;
    max-width: 600px;
}

.sml-hero-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-blue {
    background: #2563eb;
    color: white;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}
.btn-blue:hover { background: #1d4ed8; }

.btn-glass {
    background: rgba(255,255,255,0.8);
    color: #334155;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}
.btn-glass:hover { background: rgba(255,255,255,1); }

.sml-hero-stats-row {
    display: flex;
    gap: 1.5rem; /* Cleaned gap */
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0,0,0,0.1);
    width: 100%;
}
.sml-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sml-stat-title {
    font-size: 1.25rem;
    font-weight: 700;
}
.sml-stat-subtitle {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.sml-hero-visuals {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem; /* Cleaned gap */
}

.sml-glass-card {
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.sml-glass-card h3 {
    font-size: 2.5rem;
    margin: 0 0 0.5rem 0;
}
.sml-glass-card p {
    color: #475569;
    margin: 0;
    font-weight: 500;
}

/* Vision Section */
.sml-vision-section { padding: 3rem 2rem; background: white; }
.sml-vision-container { max-width: 1200px; margin: 0 auto; }
.sml-vision-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.sml-vision-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1rem;
}
.sml-vision-header h2 { font-size: 2.5rem; color: #0f172a; }
.sml-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; /* Cleaned gap */
}
.sml-vm-card {
    position: relative;
    padding: 3rem;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}
.vm-circle { position: absolute; border-radius: 50%; opacity: 0.1; }
.vm-circle-tr { top: -20%; right: -10%; width: 200px; height: 200px; }
.vm-circle-bl { bottom: -20%; left: -10%; width: 150px; height: 150px; }
.vm-blue { background: #2563eb; }
.vm-green { background: #16a34a; }

.vm-card-content { position: relative; z-index: 1; }
.vm-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.vm-icon-box {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}

.bg-light-blue { background: rgba(37,99,235,0.1); color: #2563eb; }
.bg-light-green { background: rgba(22,163,74,0.1); color: #16a34a; }
.vm-card-main { font-size: 1.25rem; line-height: 1.6; color: #334155; margin-bottom: 1rem; }
.vm-card-sub { color: #64748b; line-height: 1.6; }

/* Framework Section */
.sml-framework-section { padding: 3rem 2rem; background: #f1f5f9; }
.sml-framework-container {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; /* Cleaned gap */
}
.sml-pill-badge {
    display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 50px;
    font-size: 0.75rem; font-weight: 700; margin-bottom: 1.5rem;
}
.badge-red { background: rgba(220,38,38,0.1); color: #dc2626; }
.badge-green { background: rgba(22,163,74,0.1); color: #16a34a; }
.badge-blue-solid { background: #2563eb; color: white; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.red-dot { background: #dc2626; }
.green-dot { background: #16a34a; }

.sml-framework-title { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1.5rem; }
.sml-framework-desc { color: #475569; margin-bottom: 2rem; line-height: 1.6; }

.sml-challenge-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem;
}
.sml-challenge-card {
    background: white; padding: 1.5rem; border-radius: 12px;
}
.sml-challenge-card h4 { font-size: 0.875rem; color: #0f172a; margin: 0 0 0.5rem; }
.sml-challenge-card p { font-size: 0.875rem; color: #64748b; margin: 0; }

.sml-challenge-image-wrapper {
    position: relative; border-radius: 16px; overflow: hidden;
}
.sml-challenge-img { width: 100%; height: 300px; object-fit: cover; }
.sml-quote-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(15,23,42,0.9); padding: 1.5rem; color: white;
    font-style: italic;
}

.sml-timeline { margin-bottom: 2rem; }
.sml-timeline-step { display: flex; gap: 1.5rem; margin-bottom: 2rem; }
.sml-step-marker {
    width: 40px; height: 40px; border-radius: 50%;
    background: #16a34a; color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
}
.sml-step-card h3 { color: #16a34a; font-size: 0.875rem; margin: 0 0 0.25rem; }
.sml-step-card h4 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.sml-step-card p { color: #475569; margin: 0; font-size: 0.875rem; }

.sml-outcomes-box { background: white; padding: 2rem; border-radius: 16px; text-align: center; }
.outcomes-title { font-size: 0.875rem; color: #64748b; margin-bottom: 1rem; }
.outcomes-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; }
.outcome-pill { background: #f1f5f9; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.875rem; font-weight: 500; }
.btn-full { display: block; width: 100%; text-align: center; }

/* Methodologies Section */
.sml-meth-section { padding: 4rem 2rem; background: white; overflow: hidden; }
.sml-meth-container { max-width: 1200px; margin: 0 auto; position: relative; }
.sml-meth-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.sml-meth-badge { background: #f8fafc; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.875rem; font-weight: 600; display: inline-block; margin-bottom: 1rem; }
.sml-meth-title { font-size: 2.5rem; margin-bottom: 1rem; }
.sml-meth-desc { color: #475569; max-width: 600px; margin: 0 auto; }

.sml-meth-radial-area {
    position: relative; height: 600px; display: flex; align-items: center; justify-content: center;
}
.sml-meth-hub {
    width: 250px; height: 250px; border-radius: 50%;
    border: 2px solid rgba(37,99,235,0.2);
    position: relative; z-index: 10;
    background: white;
}
.sml-hub-center-img {
    position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%;
    border-radius: 50%; overflow: hidden; background: #f1f5f9;
}
.sml-hub-center-img img { width: 100%; height: 100%; object-fit: cover; }

.sml-meth-node { position: absolute; width: 250px; }
.node-right { transform: translateY(-50%); }
.node-left { transform: translateY(-50%); text-align: right; }

.node-diamond {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
   width: 67px;
  height: 100px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 48 36' fill='%230a1629' stroke='rgba(255,255,255,0.4)' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 24 0 Q 24 18 48 18 Q 24 18 24 36 Q 24 18 0 18 Q 24 18 24 0' /%3E%3C/svg%3E");
  background-size: contain;
  padding: 40px;
}

.node-number {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.node-text { position: relative; z-index: 1; }
.node-text h4 { margin: 0 0 0.5rem; color: #0f172a; }
.node-text p { font-size: 0.875rem; color: #64748b; margin: 0; }

/* Why Choose Section */
.sml-why-choose-section { padding: 3rem 2rem; background: #0f172a; color: white; }
.sml-why-choose-container { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; /* Cleaned gap */ align-items: center; }
.sml-why-title { font-size: 2.5rem; line-height: 1.2; margin: 1.5rem 0; }
.sml-why-desc { color: #94a3b8; line-height: 1.6; }
.sml-why-right { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; /* Cleaned gap */ }
.sml-why-card { background: rgba(255,255,255,0.05); padding: 2rem; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.sml-why-icon { width: 48px; height: 48px; color: #38bdf8; margin-bottom: 1rem; }
.sml-why-card h4 { font-size: 1.125rem; margin: 0 0 0.5rem; }
.sml-why-card p { font-size: 0.875rem; color: #94a3b8; margin: 0; }

/* Pathways Section */
.sml-pathways-section {
    font-family: 'Outfit', sans-serif; padding: 3rem 2rem; background: white; }
.sml-pathways-container { max-width: 1200px; margin: 0 auto; }
.sml-pathways-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.sml-pathways-title { font-size: 2.5rem; margin: 1.5rem 0; }
.sml-tabs-toggle { display: inline-flex;
    width: max-content; /* Ensure it never stretches */ background: #f1f5f9; padding: 0.5rem; border-radius: 50px; }
.sml-tab-btn { padding: 0.75rem 2rem; border: none; background: transparent; border-radius: 50px; font-weight: 600; color: #64748b; cursor: pointer; }
.sml-tab-btn.active { background: white; color: #0f172a; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

.sml-tab-pane { display: none; }
.sml-tab-pane.active { display: block; }
.sml-tab-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem; /* Cleaned gap */ }
.sml-tab-info h3 { font-size: 1.75rem; margin: 1.5rem 0 1rem; }
.sml-tab-info p { color: #475569; line-height: 1.6; }
.sml-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
.sml-feature-pill { display: flex; align-items: center; gap: 1rem; background: #f8fafc; padding: 1rem; border-radius: 12px; border: 1px solid #e2e8f0; }
.feat-icon { width: 24px; height: 24px; flex-shrink: 0; }
.icon-blue { color: #2563eb; }
.icon-green { color: #16a34a; }

/* Screenshots Section */
.sml-screenshots-section {
    font-family: 'Outfit', sans-serif; padding: 3rem 2rem; background: #f8fafc; text-align: center; }
.sml-screenshots-container { max-width: 1200px; margin: 0 auto; }
.sml-screenshots-title { font-size: 2.5rem; margin-bottom: 3rem; }
.sml-screenshots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; /* Cleaned gap */ }
.sml-screenshot-card { border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.sml-screenshot-card img { width: 100%; display: block; }

@media (max-width: 1024px) {
    .sml-hero-container, .sml-framework-container, .sml-tab-grid, .sml-why-right { grid-template-columns: 1fr; }
    .sml-meth-radial-area { display: flex; flex-direction: column; height: auto; gap: 1.5rem; /* Cleaned gap */ }
    .sml-meth-node { position: relative; width: 100%; top: 0 !important; left: 0 !important; right: 0 !important; transform: none; text-align: left; background: #f8fafc; padding: 1.5rem; border-radius: 12px; }
}

/* ==========================================
   CS (Core Skills) STYLES
   ========================================== */
.cs-page-content { background: #ffffff; }

/* Global Utilities */
.cs-badge {
    background: rgba(45, 91, 255, 0.1);
    color: #2D5BFF;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 1rem;
}
.cs-badge.badge-dark { background: rgba(255,255,255,0.1); color: #fff; }
.cs-badge.badge-light-blue { background: #e0e7ff; color: #4338ca; }
.gradient-text-blue { background: linear-gradient(135deg, #2D5BFF, #60A5FA); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-green { background: linear-gradient(135deg, #10B981, #34D399); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.btn-outline.cs-btn-outline { border: 2px solid #2D5BFF; color: #2D5BFF; }
.btn-outline.cs-btn-outline:hover { background: #2D5BFF; color: #fff; }

/* Hero Section */
.cs-hero-section {
    padding: 3rem 2rem;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.cs-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem; /* Cleaned gap */
    align-items: flex-start;
    position: relative;
    z-index: 1;
}
.cs-hero-content { display: flex; flex-direction: column; gap: 1.5rem; }
.cs-hero-title { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 800; color: #0f172a; line-height: 1.1; margin: 0; }
.cs-hero-subtitle { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; color: #334155; margin: 0; }
.cs-hero-description { font-size: 1.125rem; color: #475569; line-height: 1.6; max-width: 550px; }
.cs-hero-cta-group { display: flex; gap: 1rem; margin-top: 1rem; }

.cs-hero-visual { position: relative; width: 100%; height: 100%; min-height: 500px; display: flex; align-items: center; justify-content: center; }
.cs-image-wrapper { position: relative; width: 100%; max-width: 500px; }
.cs-main-image { width: 100%; height: auto; border-radius: 24px; position: relative; z-index: 2; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.cs-pill {
    position: absolute;
    background: white;
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    font-weight: 600;
    color: #334155;
    z-index: 3;
    animation: float 6s ease-in-out infinite;
}
.pill-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.icon-orange { background: rgba(249,115,22,0.1); color: #f97316; }
.icon-purple { background: rgba(168,85,247,0.1); color: #a855f7; }
.icon-green { background: rgba(34,197,94,0.1); color: #22c55e; }
.icon-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.icon-pink { background: rgba(236,72,153,0.1); color: #ec4899; }

.pill-leadership { top: 10%; left: -10%; animation-delay: 0s; }
.pill-critical { top: 30%; right: -15%; animation-delay: 1s; }
.pill-financial { bottom: 25%; left: -20%; animation-delay: 2s; }
.pill-ai { bottom: 10%; right: -5%; animation-delay: 3s; }
.pill-emotional { top: -5%; right: 20%; animation-delay: 1.5s; }
.pill-communication { bottom: -5%; left: 30%; animation-delay: 2.5s; }

/* Why Section */
.cs-why-section { padding: 3rem 2rem; background: #f8fafc; }
.cs-new-why-container { max-width: 1440px; margin: 0 auto; padding: 0; }
.cs-why-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.cs-why-title { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin: 0; }
.cs-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; /* Cleaned gap */ align-items: center; }
.cs-why-visual { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.cs-why-image { width: 100%; display: block; }
.drawn-icons-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(37,99,235,0.2); }
.drawn-icon { position: absolute; width: 40px; height: 40px; }
.pos-1 { top: 20%; left: 20%; }
.pos-2 { top: 15%; right: 25%; }
.pos-3 { bottom: 30%; left: 15%; }
.pos-4 { bottom: 20%; right: 20%; }
.pos-5 { top: 50%; left: 50%; transform: translate(-50%, -50%); }

.cs-why-content { display: flex; flex-direction: column; gap: 1.5rem; }
.cs-why-heading { font-size: 2rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; }
.cs-why-desc { font-size: 1.125rem; color: #475569; margin: 0; line-height: 1.6; }
.cs-why-highlight { font-size: 1.25rem; font-weight: 600; color: #2D5BFF; border-left: 4px solid #2D5BFF; padding-left: 1rem; margin: 1rem 0; }
.cs-features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1rem; }
.cs-feature { display: flex; flex-direction: column; gap: 0.5rem; background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.cs-feature-icon-wrapper { width: 48px; height: 48px; background: rgba(45,91,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.cs-feature h4 { margin: 0; font-size: 1.125rem; color: #0f172a; }
.cs-feature p { margin: 0; color: #64748b; font-size: 0.875rem; }

/* Competencies Section */
.cs-competencies-section { padding: 4rem 2rem; background: white; }
.cs-comp-container { max-width: 1200px; margin: 0 auto; }
.cs-comp-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ max-width: 700px; margin-left: auto; margin-right: auto; }
.cs-comp-title { font-size: 2.5rem; font-weight: 800; margin: 0 0 1rem; }
.cs-comp-subtitle { color: #475569; font-size: 1.125rem; margin: 0; }
.cs-comp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; /* Cleaned gap */ }

/* Learning Happens Section */
.cs-learning-happens { padding: 3rem 2rem; background: #0f172a; color: white; }
.cs-learning-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1.5rem; /* Cleaned gap */ }
.cs-learning-header { padding-right: 2rem; }
.cs-learning-title { font-size: 2.5rem; margin: 0 0 1rem; font-weight: 800; line-height: 1.2; }
.cs-learning-desc { color: #94a3b8; font-size: 1rem; line-height: 1.6; }
.cs-learning-stage { background: rgba(255,255,255,0.05); border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; }
.stage-illustration { height: 160px; background: rgba(0,0,0,0.5); }
.stage-img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.stage-title-wrap { display: flex; align-items: center; gap: 0.75rem; padding: 1.5rem 1.5rem 0; }
.stage-icon { width: 24px; height: 24px; color: #60A5FA; }
.stage-title { font-size: 1.25rem; margin: 0; text-transform: uppercase; letter-spacing: 2px; }
.stage-list { padding: 1.5rem; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 1.25rem; flex-grow: 1; }
.stage-list li { position: relative; padding-left: 1.5rem; }
.stage-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: #34D399; border-radius: 50%; }
.list-title { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; color: #e2e8f0; }
.list-desc { display: block; font-size: 0.85rem; color: #94a3b8; }

/* Journey Section */
.cs-journey-section { padding: 3rem 2rem; background: #f8fafc; }
.cs-journey-container { max-width: 1440px; margin: 0 auto; }
.cs-journey-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.cs-journey-title { font-size: 2.5rem; margin: 0 0 1rem; font-weight: 800; color: #0f172a; }
.cs-journey-desc { color: #475569; line-height: 1.6; }
.cs-timeline-wrapper { position: relative; padding: 2rem 0; }
.cs-timeline-wrapper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; background: #e2e8f0; transform: translateX(-50%); border-radius: 4px; }
/* Scoped CS Journey Timeline to prevent global conflicts */
.cs-journey-section .timeline-step { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; position: relative; }
.cs-journey-section .timeline-step:last-child { margin-bottom: 0; }
.step-left { flex-direction: row-reverse; }
.step-left .journey-card { margin-right: 50%; transform: translateX(-2rem); }
.step-right .journey-card { margin-left: 50%; transform: translateX(2rem); }
.journey-card { background: white; padding: 2rem; border-radius: 16px; width: calc(100% - 2rem); position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.journey-bg-num { position: absolute; top: 1rem; right: 1rem; font-size: 4rem; font-weight: 900; color: #f1f5f9; line-height: 1; z-index: 0; pointer-events: none; }
.journey-step-tag { display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; gap: 0.5rem; background: rgba(16,185,129,0.1); color: #10B981; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; margin-bottom: 1rem; position: relative; z-index: 1; }
.journey-card h3 { font-size: 1.25rem; color: #0f172a; margin: 0 0 0.5rem; position: relative; z-index: 1; }
.journey-card p { color: #64748b; margin: 0; font-size: 0.85rem; line-height: 1.5; position: relative; z-index: 1; }
.cs-journey-section .timeline-step::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; background: white; border: 4px solid #2D5BFF; border-radius: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 0 0 6px #f8fafc; }

/* Benefits Section */
.cs-benefits-section { padding: 3rem 2rem; background: white; }
.cs-benefits-container { max-width: 1200px; margin: 0 auto; }
.cs-benefits-header { text-align: center; margin-bottom: 3rem; }
.cs-benefits-title { font-size: 2.5rem; font-weight: 800; margin: 0; color: #0f172a; }
.cs-tabs-nav { display: flex; justify-content: center; gap: 1rem; margin-bottom: 3rem; }
.cs-tab-btn { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 50px; border: 2px solid #e2e8f0; background: white; color: #64748b; font-weight: 600; font-size: 1rem; cursor: pointer; transition: 0.3s; }
.cs-tab-btn svg { width: 20px; height: 20px; }
.cs-tab-btn.active { background: #0f172a; color: white; border: none !important; }

.cs-tab-content { display: none; }
.cs-tab-content.active { display: block; animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.cs-tab-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; /* Cleaned gap */ }
.cs-tab-banner { border-radius: 20px; padding: 3rem; display: flex; flex-direction: column; justify-content: center; color: white; }
.theme-blue .cs-tab-banner { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.theme-green .cs-tab-banner { background: linear-gradient(135deg, #059669, #10b981); }
.theme-orange .cs-tab-banner { background: linear-gradient(135deg, #ea580c, #f97316); }
.cs-tab-banner-icon { width: 64px; height: 64px; background: rgba(255,255,255,0.2); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; }
.cs-tab-banner-icon svg { width: 32px; height: 32px; color: white; }
.cs-tab-banner-title { font-size: 2.5rem; line-height: 1.1; margin: 0 0 1rem; font-weight: 800; }
.cs-tab-banner-desc { font-size: 1.125rem; opacity: 0.9; margin: 0; }

.cs-tab-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-content: start; }
.cs-benefit-card { display: flex; gap: 1.5rem; background: #f8fafc; padding: 1.5rem; border-radius: 16px; border: 1px solid #e2e8f0; }
.cs-card-num { font-size: 1.5rem; font-weight: 800; color: #cbd5e1; }
.cs-benefit-card h4 { margin: 0 0 0.5rem; font-size: 1.125rem; color: #0f172a; }
.cs-benefit-card p { margin: 0; font-size: 0.875rem; color: #64748b; line-height: 1.5; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .cs-hero-container, .cs-why-grid, .cs-learning-container, .cs-tab-grid { grid-template-columns: 1fr; }
    .cs-timeline-wrapper::before { left: 24px; }
    .timeline-step { flex-direction: row; justify-content: flex-end; }
    .timeline-step::after { left: 24px; }
    .step-left .journey-card, .step-right .journey-card { margin: 0 0 0 48px; transform: none; width: calc(100% - 48px); }
    .cs-tab-cards { grid-template-columns: 1fr; }
    .cs-pill { display: none; } /* Hide pills on mobile for space */
}

/* ==========================================
   i3DP STYLES
   ========================================== */
.i3dp-page { background: #ffffff; overflow-x: hidden; }

/* Global Utilities */
.btn.i3dp-btn-blue { background: #2D41DB; color: white; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; border: none; }
.btn.i3dp-btn-outline { background: rgba(255,255,255,0.05); border: 1px solid rgba(255, 255, 255, 0.4); color: #ffffff; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; }

/* Hero Section */
.i3dp-hero-section {
    position: relative;
    padding: 4rem 2rem 6rem;
    min-height: 85vh;
    display: flex;
    align-items: center;
    background: url('assets/i3dp-banner.png') center right/cover no-repeat;
    overflow: hidden;
}
.i3dp-hero-bg-glow { position: absolute; top: 0; right: 0; width: 60%; height: 100%; background: radial-gradient(circle at top right, rgba(45, 65, 219, 0.1), transparent 70%); }
.i3dp-hero-container { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; /* Cleaned gap */ align-items: flex-start; position: relative; z-index: 1; }
.i3dp-hero-content { display: flex; flex-direction: column; gap: 1.5rem; }
.i3dp-hero-content h1 { font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 800; color: #ffffff; line-height: 1.1; margin: 0; }
.i3dp-hero-desc { font-size: 1.125rem; color: #e2e8f0; line-height: 1.6; max-width: 550px; margin: 0; }
.i3dp-hero-actions { display: flex; gap: 1rem; margin-top: 1rem; }
.i3dp-hero-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.i3dp-feature-pill { display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; gap: 0.5rem; background: rgba(15, 23, 42, 0.4); padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.875rem; font-weight: 500; color: #f8fafc; border: 1px solid rgba(255, 255, 255, 0.1); }
.i3dp-feature-pill svg { width: 16px; height: 16px; color: #10b981; }

/* Hero Visuals (Floating Cards) */
.i3dp-hero-visuals { position: relative; width: 100%; height: 600px; display: flex; align-items: center; justify-content: center; }
.i3dp-main-image-wrapper { position: relative; width: 100%; max-width: 450px; z-index: 2; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.i3dp-main-image { width: 100%; display: block; }
.i3dp-float-card { position: absolute; padding: 1.25rem; border-radius: 16px; z-index: 3; box-shadow: 0 15px 35px rgba(0,0,0,0.1); animation: float 6s ease-in-out infinite; }
.card-white { background: white; border: 1px solid #f1f5f9; }
.card-glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); }
.i3dp-float-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.i3dp-icon-bg { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.icon-blue { background: rgba(45,65,219,0.1); color: #2D41DB; }
.icon-white { background: #2D41DB; color: white; }
.icon-purple { background: rgba(168,85,247,0.1); color: #a855f7; }
.icon-orange { background: rgba(249,115,22,0.1); color: #f97316; }
.i3dp-float-title { font-weight: 700; font-size: 0.9rem; color: #0f172a; }
.i3dp-float-list { margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: #64748b; }
.i3dp-float-list li { margin-bottom: 0.25rem; padding-left: 1rem; position: relative; }
.i3dp-float-list li::before { content: "?"; position: absolute; left: 0; color: #2D41DB; }
.i3dp-float-desc { font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.4; max-width: 200px; }
.i3dp-glass-text { font-size: 0.8rem; color: #475569; margin: 0 0 0.5rem; line-height: 1.4; }
.i3dp-progress-bar-bg { background: rgba(0,0,0,0.1); height: 6px; border-radius: 3px; margin-bottom: 0.5rem; }
.i3dp-progress-bar-fill { background: #2D41DB; height: 100%; border-radius: 3px; }
.i3dp-progress-text { font-size: 0.75rem; font-weight: 600; color: #0f172a; }

.i3dp-card-top-left { top: 5%; left: -5%; animation-delay: 0s; }
.i3dp-card-top-right { top: 15%; right: -10%; animation-delay: 1s; width: 220px; }
.i3dp-card-bottom-left { bottom: 15%; left: -10%; animation-delay: 2s; }
.i3dp-card-right-mid { top: 50%; right: -15%; animation-delay: 1.5s; transform: translateY(-50%); }
.i3dp-card-bottom-right { bottom: 5%; right: 5%; animation-delay: 2.5s; width: 200px; }

/* Transformation Bridge Section */
.i3dp-transformation-section { padding: 3rem 2rem; background: white; }
.i3dp-transformation-container { max-width: 1200px; margin: 0 auto; }
.i3dp-transformation-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ max-width: 800px; margin-left: auto; margin-right: auto; }
.i3dp-transformation-header h2 { font-size: 2.5rem; margin: 0 0 1rem; color: #0f172a; }
.i3dp-transformation-header p { font-size: 1.125rem; color: #475569; margin: 0; line-height: 1.6; }
.i3dp-bridge-visual { position: relative; margin-top: 4rem; }
.i3dp-bridge-track { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); z-index: 0; display: flex; align-items: center; }
.i3dp-bridge-line { height: 2px; width: 100%; background: linear-gradient(to right, #e2e8f0, #2D41DB); position: absolute; left: 0; right: 0; }
.i3dp-bridge-nodes { width: 100%; display: flex; justify-content: space-between; position: relative; z-index: 1; padding: 0 20%; }
.i3dp-node { width: 12px; height: 12px; border-radius: 50%; background: white; border: 2px solid #cbd5e1; }
.i3dp-node:nth-child(n+4) { border: none !important; background: #2D41DB; box-shadow: 0 0 10px rgba(45,65,219,0.5); }
.i3dp-bridge-content { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; /* Cleaned gap */ align-items: center; position: relative; z-index: 2; }
.i3dp-card-traditional, .i3dp-card-futureready { background: white; padding: 2rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.i3dp-card-traditional { border: 1px solid #e2e8f0; }
.i3dp-card-futureready { border: 2px solid #2D41DB; box-shadow: 0 15px 40px rgba(45,65,219,0.1); }
.i3dp-card-title-gray { color: #64748b; font-size: 1.125rem; text-align: center; margin: 0 0 1.5rem; letter-spacing: 1px; }
.i3dp-card-title-blue { color: #2D41DB; font-size: 1.125rem; text-align: center; margin: 0 0 1.5rem; letter-spacing: 1px; }
.i3dp-card-img-wrapper { border-radius: 12px; overflow: hidden; margin-bottom: -20px; position: relative; z-index: 1; }
.i3dp-card-img-wrapper img { width: 100%; display: block; }
.i3dp-face-icon { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; position: relative; z-index: 2; border: 4px solid white; }
.icon-gray { background: #f1f5f9; color: #64748b; }
.icon-purple-light { background: #e0e7ff; color: #2D41DB; }
.i3dp-traditional-list, .i3dp-futureready-list { margin: 0; padding: 0; list-style: none; }
.i3dp-traditional-list li, .i3dp-futureready-list li { margin-bottom: 0.75rem; font-size: 0.85rem; color: #475569; display: flex; align-items: center; gap: 0.5rem; }
.i3dp-traditional-list li::before { content: "?"; color: #94a3b8; font-weight: bold; font-size: 1.2rem; }
.i3dp-futureready-list li svg { width: 16px; height: 16px; color: #2D41DB; }
.i3dp-bridge-pill { background: #2D41DB; color: white; padding: 1.5rem 2rem; border-radius: 50px; text-align: center; box-shadow: 0 10px 25px rgba(45,65,219,0.3); }
.i3dp-bridge-pill h4 { margin: 0 0 0.25rem; font-size: 1.5rem; font-weight: 800; }
.i3dp-bridge-pill span { font-size: 0.85rem; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }

/* Hexagon Section */
.i3dp-hex-section { padding: 4rem 2rem; background: #0f172a; color: white; overflow: hidden; }
.i3dp-hex-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; /* Cleaned gap */ align-items: center; }
.i3dp-hex-header { grid-column: 1 / -1; text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.i3dp-hex-header h2 { font-size: 2.5rem; margin: 0 0 1rem; }
.i3dp-hex-header p { color: #94a3b8; font-size: 1.125rem; }
.i3dp-hex-graphic { position: relative; height: 500px; display: flex; align-items: center; justify-content: center; }
.i3dp-hex-item { position: absolute; width: 120px; height: 138px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; transition: 0.3s; cursor: pointer; border: 2px solid transparent; }
.i3dp-hex-inner { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1rem; }
.hex-center { width: 140px; height: 161px; background: #2D41DB; cursor: default; z-index: 10; }
.hex-center h3 { margin: 0; font-size: 1.5rem; color: white; }
.hex-center p { margin: 0; font-size: 0.6rem; color: rgba(255,255,255,0.8); letter-spacing: 1px; }
.hex-icon { font-size: 1.5rem; }
.i3dp-hex-inner span { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; line-height: 1.2; color: #cbd5e1; }
/* Positioning Hexagons radially */
.hex-pos-1 { top: 5%; left: 50%; transform: translateX(-50%); }
.hex-pos-2 { top: 25%; right: 15%; }
.hex-pos-3 { bottom: 25%; right: 15%; }
.hex-pos-4 { bottom: 5%; left: 50%; transform: translateX(-50%); }
.hex-pos-5 { bottom: 25%; left: 15%; }
.hex-pos-6 { top: 25%; left: 15%; }

.i3dp-hex-list-wrapper { padding: 2rem; }
.i3dp-hex-list-card { background: rgba(255,255,255,0.05); padding: 2rem; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); }
.i3dp-hex-list-card h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.i3dp-hex-list-desc { color: #94a3b8; font-size: 0.85rem; margin-bottom: 2rem; }
.i3dp-framework-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.framework-list-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: rgba(255,255,255,0.02); border-radius: 8px; cursor: pointer; transition: 0.3s; border: 1px solid transparent; }
.list-item-left { display: flex; align-items: center; gap: 1rem; }
.list-icon { font-size: 1.25rem; }
.list-text { font-weight: 500; color: #e2e8f0; }
.list-arrow { width: 16px; height: 16px; color: #94a3b8; opacity: 0; transform: translateX(-10px); transition: 0.3s; }
.framework-list-item:hover, .framework-list-item.active { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.framework-list-item:hover .list-arrow, .framework-list-item.active .list-arrow { opacity: 1; transform: translateX(0); color: white; }

/* Journey Section */
.i3dp-journey-section { padding: 3rem 2rem; background: #f8fafc; }
.i3dp-journey-container { max-width: 1440px; margin: 0 auto; }
.i3dp-journey-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.i3dp-journey-header h2 { font-size: 2.5rem; margin: 0 0 1rem; }
.i3dp-journey-desktop { position: relative; height: 450px; display: block; }
.i3dp-journey-mobile { display: none; }
.i3dp-journey-svg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.i3dp-journey-svg { width: 100%; height: 100%; }
.i3dp-journey-points { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
.i3dp-jpoint { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.i3dp-jnode { width: 24px; height: 24px; background: white; border: 4px solid #3B82F6; border-radius: 50%; position: relative; z-index: 3; box-shadow: 0 0 0 4px #f8fafc; }
.node-purple { border: none !important; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.i3dp-jline-up, .i3dp-jline-down { width: 2px; height: 40px; background: #cbd5e1; position: absolute; z-index: 1; }
.i3dp-jline-up { bottom: 100%; }
.i3dp-jline-down { top: 100%; }
.i3dp-jcard { position: absolute; background: white; padding: 1rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; width: 120px; z-index: 2; border: 1px solid #e2e8f0; }
.card-above { bottom: calc(100% + 40px); }
.card-below { top: calc(100% + 40px); }
.jcard-icon { font-size: 1.5rem; }
.jcard-title { font-size: 0.8rem; font-weight: 600; color: #334155; line-height: 1.2; }
.card-purple { background: #8B5CF6; border: none !important; }
.text-white { color: white !important; }

/* Curriculum Overview Section */
.i3dp-overview-section { padding: 3rem 2rem; background: white; }
.i3dp-overview-container { max-width: 1200px; margin: 0 auto; }
.i3dp-overview-header { text-align: center; margin-bottom: 3rem; /* Cleaned margin */ }
.i3dp-overview-kicker { font-size: 0.85rem; font-weight: 700; color: #2D41DB; letter-spacing: 2px; }
.i3dp-overview-header h2 { font-size: 2.5rem; margin: 0.5rem 0 1rem; }
.i3dp-universe-graphic { position: relative; height: 600px; width: 100%; max-width: 600px; margin: 0 auto; }
.i3dp-universe-orbit { position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; border: 1px dashed #cbd5e1; border-radius: 50%; }
.i3dp-universe-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; background: #2D41DB; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 10; box-shadow: 0 0 30px rgba(45,65,219,0.3); }
.i3dp-universe-core h3 { color: white; margin: 0; font-size: 1.1rem; line-height: 1.2; }
.i3dp-radial-line { position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; background: #e2e8f0; transform-origin: 0 0; z-index: 1; }
.i3dp-domain-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; z-index: 5; text-align: center; }
.domain-circle { width: 56px; height: 56px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border: 2px solid; }
.domain-icon { font-size: 1.25rem; }
.domain-label { font-size: 0.8rem; font-weight: 600; color: #334155; line-height: 1.2; background: rgba(255,255,255,0.8); padding: 2px 4px; border-radius: 4px; }

/* Outcomes Section */
.i3dp-outcomes-section { padding: 3rem 2rem; background: #f8fafc; }
.i3dp-outcomes-container { max-width: 1200px; margin: 0 auto; }
.i3dp-outcomes-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.i3dp-outcomes-kicker { font-size: 0.85rem; font-weight: 700; color: #10B981; letter-spacing: 2px; }
.i3dp-outcomes-header h2 { font-size: 2.5rem; margin: 0.5rem 0 1rem; }
.i3dp-outcomes-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem; /* Cleaned gap */ }
.i3dp-outcome-card { padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
/* Scoped i3DP Outcome Cards to prevent global background issues */
.i3dp-outcome-card.card-blue { background: white; border-top: 4px solid #3B82F6; }
.i3dp-outcome-card.card-green { background: white; border-top: 4px solid #10B981; }
.i3dp-outcome-card.card-purple { background: white; border-top: 4px solid #8B5CF6; }
.outcome-badge { display: inline-block; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; margin-bottom: 1.5rem; }
.badge-blue { background: #eff6ff; color: #1d4ed8; }
.badge-green { background: #ecfdf5; color: #047857; }
.badge-purple { background: #f5f3ff; color: #6d28d9; }
.i3dp-outcome-card h3 { font-size: 1.5rem; margin: 0 0 1rem; color: #0f172a; }
.outcome-subtext { color: #64748b; margin-bottom: 2rem; line-height: 1.6; }
.outcome-list { list-style: none; padding: 0; margin: 0; }
.outcome-list li { padding: 1rem 0; border-bottom: 1px solid #e2e8f0; font-size: 0.85rem; font-weight: 500; color: #334155; }
.outcome-list li:last-child { border-bottom: none; }

/* Responsive Media Queries handled globally */

/* ==========================================
   F2F STYLES
   ========================================== */

/* Hero Section */

.btn.btn-primary.btn-arrow { background: #3B82F6; border: none !important; display: inline-flex;
    width: max-content; /* Ensure it never stretches */ align-items: center; gap: 0.5rem; }
.btn.btn-outline { border: 2px solid white; color: white; background: transparent; }


/* =========================================
   F2F HERO SECTION (NEW DESIGN)
   ========================================= */
.f2f-hero-section {
  position: relative;
  width: 100%;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-color: #f4f8fb; /* Fallback */
  /* User will provide real image, we use a placeholder or assume one exists */
  background-image: url('assets/f2f-hero-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover; 
  background-position: center right;
  padding: 6rem 0;
  overflow: hidden;
}

.f2f-hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  /* Gradient fade from solid left to transparent right */
  background: linear-gradient(to right, rgba(244, 248, 251, 1) 0%, rgba(244, 248, 251, 0.95) 30%, rgba(244, 248, 251, 0.7) 50%, rgba(244, 248, 251, 0) 80%);
  z-index: 1;
}

.f2f-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-left: max(2rem, calc((100vw - 1440px) / 2));
  padding-right: max(2rem, calc((100vw - 1440px) / 2));
}

.f2f-hero-content {
  max-width: 680px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.f2f-hero-title {
  /* font-size: clamp(2.5rem, 4vw, 4rem); */
  font-size:3rem;
  font-weight: 800;
  color: #0a1b44;
  line-height: 1.3;
  letter-spacing: -0.5px;
  margin: 0;
}

.f2f-text-blue {
  color: #3b82f6; /* Matching the bright blue in the screenshot */
}

.f2f-hero-desc {
  font-size: 1.125rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

.f2f-hero-actions {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
}

.f2f-hero-actions .btn {
  padding: 0.85rem 1.8rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 1rem;
  display: inline-flex;
    width: max-content; /* Ensure it never stretches */
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.f2f-btn-primary {
  background-color: #2d5bff;
  color: #ffffff;
  border: 2px solid #2d5bff;
}

.f2f-btn-primary:hover {
  background-color: #1e40af;
  border: none !important;
}

.f2f-btn-outline {
  background-color: transparent;
  color: #0a1b44;
  border: 2px solid #cbd5e1;
}

.f2f-btn-outline:hover {
  border: none !important;
  background-color: rgba(0,0,0,0.03);
}

@media (max-width: 900px) {
  .f2f-hero-section::before {
    background: linear-gradient(to right, rgba(244, 248, 251, 1) 0%, rgba(244, 248, 251, 0.95) 60%, rgba(244, 248, 251, 0.6) 100%);
  }
}

@media (max-width: 768px) {
  .f2f-hero-section {
  }
  .f2f-hero-section::before {
    background: rgba(244, 248, 251, 0.85); /* Solid transparent overlay on mobile */
  }
  .f2f-hero-content {
    text-align: center;
    margin: 0 auto;
  }
  .f2f-hero-actions {
    flex-direction: column;
  }
}

/* Frameworks Alignment Section */

.f2f-alignment-section { padding: 4rem 1.5rem; /* Cleaned padding */ background: #f4f8fb; }
.f2f-align-container { max-width: 1200px; margin: 0 auto; }
.f2f-align-header { text-align: center; margin-bottom: 2.5rem; /* Cleaned margin */ }
.f2f-align-header h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); margin: 0 0 1rem; color: #0f172a; font-weight: 800; line-height: 1.2; }
.f2f-align-header .text-cyan { color: #40b0a6; /* Exact teal/cyan color */ }
.f2f-align-header p { font-size: 1.1rem; color: #64748b; font-weight: 400; max-width: 800px; margin: 0 auto; }

.f2f-align-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.f2f-align-card { 
    padding: 2.5rem; 
    border-radius: 12px; 
    background: #ffffff; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); 
}

.card-orange { 
    border: 1px solid #fed7aa; /* Very light orange border */
    box-shadow: 0 10px 40px rgba(249, 115, 22, 0.05);
}

.card-green { 
    border: 1px solid #4ade80; /* Green border */
    box-shadow: 0 10px 40px rgba(34, 197, 94, 0.05);
}

.f2f-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.f2f-card-icon { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.icon-orange { background: #ffedd5; color: #ea580c; }
.icon-green { background: #dcfce7; color: #16a34a; }
.f2f-card-icon svg { width: 24px; height: 24px; }
.f2f-card-header h3 { font-size: 1.3rem; margin: 0; color: #0f172a; font-weight: 700; }

.f2f-card-list { list-style: none; padding: 0; margin: 0; }
.f2f-card-list li { 
    padding: 0.5rem 0; 
    color: #475569; 
    position: relative; 
    padding-left: 1.25rem; 
    font-size: 0.85rem;
    font-weight: 500;
}
.list-orange li::before { 
    content: "?"; 
    color: #f97316; 
    position: absolute; 
    left: 0; 
    font-size: 0.6rem; 
    top: 0.75rem; 
}
.list-green li::before { 
    content: "?"; 
    color: #22c55e; 
    position: absolute; 
    left: 0; 
    font-size: 0.6rem; 
    top: 0.75rem; 
}




/* =========================================
   F2F GLOBAL FONT FIX
   ========================================= */
[class^="f2f-"] {
    font-family: 'Outfit', sans-serif;
}

/* =========================================
   WHY F2F SECTION
   ========================================= */
.f2f-why-section { 
    padding: 4rem 1.5rem; /* Cleaned padding */ 
    background: #0a1b44; 
    color: white; 
    position: relative; 
    overflow: hidden;
}

.f2f-why-bg-grid {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 40%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); 
    background-size: 50px 50px; 
    opacity: 0.6;
    z-index: 1;
}

.f2f-why-container { 
    max-width: 1300px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 0.9fr 1.1fr; 
    gap: 2.5rem; /* Cleaned gap */ 
    align-items: stretch; 
    position: relative; 
    z-index: 2; 
}

.f2f-why-content h2 { 
    font-size: clamp(1.8rem, 3.5vw, 2.4rem); 
    font-weight: 800;
    margin: 0 0 1rem; 
    color: #ffffff; /* Explicitly set to white */
}
.f2f-why-content h2 .text-cyan { color: #40b0a6; }

.f2f-why-intro { 
    font-size: 1.1rem; 
    color: #e2e8f0; 
    margin-bottom: 2rem; 
    font-weight: 400;
}

.f2f-question-boxes { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    margin-bottom: 2.5rem; 
}

.f2f-q-box { 
    background: rgba(255,255,255,0.05); 
    padding: 1.25rem 1.5rem; 
    border-radius: 8px; 
    font-weight: 500; 
    font-size: 1rem; 
    border: 1px solid rgba(255,255,255,0.1);
    color: #f8fafc;
}

.f2f-why-desc { 
    color: #e2e8f0; 
    line-height: 1.7; 
    margin-bottom: 1.25rem; 
    font-size: 1.05rem;
}

.f2f-why-visual {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.f2f-why-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    object-fit: contain;
}

/* =========================================
   WHAT IS F2F SECTION
   ========================================= */
.f2f-what-section { 
    padding: 4rem 1.5rem; /* Cleaned padding */ 
    background: #eef4f9; 
}

.f2f-what-container { 
    max-width: 1200px; 
    margin: 0 auto; 
}

.f2f-what-header { 
    text-align: center; 
    margin-bottom: 2.5rem; /* Cleaned margin */ 
}

.f2f-what-header h2 { 
    font-size: clamp(1.8rem, 3.5vw, 2.4rem); 
    font-weight: 800;
    margin: 0 0 0.75rem; 
    color: #0a1b44; 
}
.f2f-what-header h2 .text-cyan { color: #40b0a6; }

.f2f-what-header p {
    font-size: 1.1rem;
    color: #475569;
    font-weight: 500;
}

.f2f-what-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 1.5rem; 
}

.f2f-what-card { 
    background: #ffffff; 
    padding: 2rem; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    display: flex; 
    align-items: flex-start;
    gap: 1.5rem; 
    border-left: 6px solid #e2e8f0; /* Default border */
    transition: transform 0.3s ease;
}

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

.f2f-what-icon { 
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-shrink: 0;
}
.f2f-what-icon svg { width: 24px; height: 24px; }

.f2f-what-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}
.f2f-what-text p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

/* Card Themes */
.card-theme-purple { border-left-color: #8b5cf6; }
.card-theme-purple .f2f-what-icon { background: #ede9fe; color: #7c3aed; }

.card-theme-green { border-left-color: #22c55e; }
.card-theme-green .f2f-what-icon { background: #dcfce7; color: #16a34a; }

.card-theme-indigo { border-left-color: #6366f1; }
.card-theme-indigo .f2f-what-icon { background: #e0e7ff; color: #4f46e5; }

.card-theme-orange { border-left-color: #f97316; }
.card-theme-orange .f2f-what-icon { background: #ffedd5; color: #ea580c; }

.card-theme-teal { border-left-color: #14b8a6; }
.card-theme-teal .f2f-what-icon { background: #ccfbf1; color: #0d9488; }

.card-theme-pink { border-left-color: #ec4899; }
.card-theme-pink .f2f-what-icon { background: #fce7f3; color: #db2777; }

.card-theme-yellow { border-left-color: #eab308; }
.card-theme-yellow .f2f-what-icon { background: #fef9c3; color: #ca8a04; }

.card-theme-blue { border-left-color: #3b82f6; }
.card-theme-blue .f2f-what-icon { background: #dbeafe; color: #2563eb; }

.f2f-what-footer {
    text-align: center;
    margin-top: 3.5rem;
    color: #334155;
    font-weight: 500;
    font-size: 1.05rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    /* General Grid Resets */
    .sml-hero-container, .sml-why-grid, .sml-audience-grid, .sml-pillars-grid, .sml-assessment-grid, .sml-roles-grid { grid-template-columns: 1fr !important; }
    .sml-curriculum-grid, .sml-tab-layout { grid-template-columns: 1fr !important; }
    
    .cs-hero-container, .cs-why-grid, .cs-learning-container, .cs-tab-grid, .cs-comp-grid { grid-template-columns: 1fr !important; }
    .cs-tab-cards { grid-template-columns: 1fr !important; }
    
    .i3dp-hero-container, .i3dp-outcomes-grid { grid-template-columns: 1fr !important; }
    
    .f2f-hero-content { padding: 0 1rem; }
    .f2f-align-grid, .f2f-why-container, .f2f-get-started-container { grid-template-columns: 1fr !important; }
    
    /* Specific adjustments */
    .sml-hero-visual, .cs-hero-visual, .i3dp-hero-visuals { min-height: 400px; margin-top: 2rem; }
    .sml-audience-card, .sml-role-card { width: 100%; margin: 0 auto; max-width: 400px; }
    .sml-tabs-nav { flex-direction: column; }
    
    .cs-pill { display: none; }
    .cs-timeline-wrapper::before { left: 24px !important; }
    .cs-journey-section .timeline-step { flex-direction: row !important; justify-content: flex-end !important; }
    .cs-journey-section .timeline-step::after { left: 24px !important; }
    .cs-journey-section .step-left .journey-card, .cs-journey-section .step-right .journey-card { margin: 0 0 0 48px !important; transform: none !important; width: calc(100% - 48px) !important; }
    
    .i3dp-hex-graphic { height: auto; min-height: 400px; transform: scale(0.8); }
    .i3dp-journey-desktop { display: none !important; }
    .i3dp-journey-mobile { display: block !important; position: relative; padding: 2rem 0; }
    .i3dp-mobile-timeline-line { position: absolute; left: 24px; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, #3B82F6, #8B5CF6); }
    .i3dp-m-item { display: flex; align-items: center; gap: 1.5rem; /* Cleaned gap */ margin-bottom: 2rem; position: relative; z-index: 1; }
    .i3dp-m-node { width: 24px; height: 24px; border-radius: 50%; background: white; border: 4px solid #3B82F6; flex-shrink: 0; margin-left: 14px; }
    .node-purple-mobile { border: none !important; }
    .i3dp-m-card { background: white; padding: 1.5rem; border-radius: 12px; flex-grow: 1; border: 1px solid #e2e8f0; display: flex; align-items: center; gap: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
    
    .f2f-timeline::before { left: 32px !important; }
    .f2f-step-circle { width: 48px; height: 48px; margin-left: 8px; }
    .f2f-step-num { font-size: 1rem; }
    .f2f-question-boxes { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Typography adjustments for mobile */
    .sml-hero-title, .cs-hero-title, .i3dp-hero-content h1, .f2f-hero-content h1 { font-size: 2.5rem !important; }
    .sml-section-title, .cs-why-title, .cs-comp-title, .cs-journey-title, .cs-benefits-title, .f2f-align-header h2, .f2f-why-content h2, .f2f-what-header h2, .f2f-how-header h2, .f2f-industries-header h2, .f2f-build-header h2, .f2f-choose-header h2, .f2f-faq-header h2, .f2f-get-started-content h2 { font-size: 2rem !important; }
    
    /* Layout padding adjustments */
    .sml-hero-section, .cs-hero-section, .i3dp-hero-section, .f2f-hero-section { padding-top: 6rem; padding-bottom: 4rem; }
    section { padding: 4rem 1.5rem !important; }
    
    /* Buttons */
    .sml-hero-cta-group, .cs-hero-cta-group, .i3dp-hero-actions, .f2f-hero-actions { flex-direction: column; width: 100%; }
    .btn { width: 100%; justify-content: center; }
    
    /* Specific components */
    
    
    .i3dp-float-card { position: relative !important; animation: none !important; width: 100% !important; margin-bottom: 1rem; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; }
    .i3dp-hero-visuals { height: auto; flex-direction: column; }
    .i3dp-main-image-wrapper { margin-bottom: 2rem; }
    .i3dp-universe-graphic { height: auto; display: flex; flex-direction: column; gap: 1rem; }
    .i3dp-universe-orbit, .i3dp-radial-line { display: none; }
    .i3dp-domain-node { position: relative !important; top: auto !important; left: auto !important; transform: none !important; display: flex; flex-direction: row; text-align: left; background: #f8fafc; padding: 1rem; border-radius: 12px; border: 1px solid #e2e8f0; width: 100%; }
    .i3dp-universe-core { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 auto 2rem; }
    .domain-circle { flex-shrink: 0; }
    .domain-label { background: transparent; padding: 0; font-size: 1rem; }
    
    .i3dp-bridge-track { display: none; }
    .i3dp-bridge-content { grid-template-columns: 1fr; gap: 1rem; }
    .i3dp-bridge-pill { margin: 2rem 0; }
    
    /* SML specific */
    .sml-curriculum-tabs { flex-wrap: wrap; }
    .sml-curr-tab { width: calc(50% - 0.5rem); padding: 1rem 0.5rem; }
}

/* ==========================================
   PRODUCT DELIVERABLES SECTION (Global)
   ========================================== */
.fln-deliverables-section {
    padding: 4rem 2rem;
    background: #f8fafc;
    overflow: hidden;
}
.fln-deliverables-container {
    max-width: 1440px;
    margin: 0 auto;
}
.deliverables-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}
.deliverables-header-text {
    max-width: 600px;
}
.trust-badge {
    background: #f59e0b;
    display: inline-block;
    padding: 0.5rem 1rem;
    position: relative;
    margin-bottom: 1rem;
}
.trust-badge::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 20px solid #f59e0b;
}
.trust-badge-text {
    color: #fff;
    font-weight: 800;
    font-size: 0.875rem;
    letter-spacing: 1px;
}
.deliverables-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: #0f172a;
}
.text-teal { color: #14b8a6; }
.deliverables-subtitle {
    font-size: 1.125rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}
.deliverables-toggle-container {
    position: relative;
}
.owl-placeholder {
    width: 250px;
    height: 150px;
    position: relative;
}
.del-toggles {
    display: flex;
    gap: 1rem;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.del-btn {
    background: white;
    border: 2px solid #e2e8f0;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    color: #64748b;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.del-btn.active {
    border: none !important;
    color: #3b82f6;
}
.deliverables-books-carousel {
    display: flex;
    gap: 1.5rem; /* Cleaned gap */
    overflow-x: auto;
    padding-bottom: 2rem;
    scrollbar-width: none;
}
.deliverables-books-carousel::-webkit-scrollbar {
    display: none;
}
.del-book-card {
    min-width: 280px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
}
.book-cover {
    height: 380px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
.bg-light-blue { background: #eff6ff; }
.book-series-title {
    font-size: 1rem;
    font-weight: 800;
    color: #ef4444;
    margin: 1rem 0 0.5rem;
}
.book-title {
    font-size: 2rem;
    font-weight: 800;
    color: #3b82f6;
    margin: 0 0 0.5rem;
}
.book-grade {
    background: white;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}
@media (max-width: 768px) {
    .deliverables-header-row {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }
    .trust-badge::after { display: none; }
    .deliverables-title { font-size: 2rem; }
}

/* =========================================
   HOW F2F WORKS SECTION
   ========================================= */
.f2f-how-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background: #0a1b44;
    color: white;
}

.f2f-how-header {
    text-align: center;
    margin-bottom: 3rem; /* Cleaned margin */
}

.f2f-how-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 0;
    color: white;
}

.f2f-how-header h2 .text-cyan { color: #40b0a6; }

.f2f-how-timeline {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    position: relative;
}

.f2f-how-timeline::before {
    content: '';
    position: absolute;
    top: 55px; /* Half of circle height */
    left: 10%;
    right: 10%;
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 10px, transparent 10px, transparent 20px);
    z-index: 1;
}

.f2f-how-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

.f2f-step-circle-outer {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0a1b44;
}

.f2f-step-circle-inner {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.f2f-how-step h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
    color: white;
}

.f2f-how-step p {
    font-size: 0.9rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
    max-width: 250px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .f2f-how-timeline {
        flex-direction: column;
        gap: 3rem;
    }
    .f2f-how-timeline::before {
        display: none; /* Hide dashed line on mobile */
    }
}

/* =========================================
   EXPLORE INDUSTRIES SECTION
   ========================================= */
.f2f-industries-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background: #eef4f9;
}

.f2f-ind-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Cleaned margin */
}

.f2f-ind-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: #0a1b44;
}
.f2f-ind-header h2 .text-cyan { color: #40b0a6; }

.f2f-ind-header p {
    font-size: 1.1rem;
    color: #475569;
}

.f2f-ind-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* Cleaned gap */
}

.f2f-ind-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.f2f-ind-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.f2f-ind-icon svg { width: 24px; height: 24px; color: white; }

.f2f-ind-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.5rem;
}

.f2f-ind-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.f2f-ind-list li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.25rem;
    color: #475569;
    font-size: 0.85rem;
    font-weight: 500;
}
.f2f-ind-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.ind-theme-blue .f2f-ind-icon { background: #2563eb; }
.ind-theme-blue .f2f-ind-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.ind-theme-purple .f2f-ind-icon { background: #7c3aed; }
.ind-theme-purple .f2f-ind-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.ind-theme-pink .f2f-ind-icon { background: #e11d48; }
.ind-theme-pink .f2f-ind-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

@media (max-width: 900px) {
    .f2f-ind-grid { grid-template-columns: 1fr; max-width: 500px; }
}

/* =========================================
   WHAT STUDENTS BUILD SECTION
   ========================================= */
.f2f-build-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background: #0a1b44;
    color: white;
}

.f2f-build-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Cleaned margin */
}

.f2f-build-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 1rem;
    color: white;
}
.f2f-build-header h2 .text-cyan { color: #40b0a6; }

.f2f-build-header p {
    font-size: 1.1rem;
    color: #cbd5e1;
}

.f2f-build-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.f2f-build-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}

.f2f-build-pill {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.25);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: inline-flex;
    width: max-content; /* Ensure it never stretches */
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.f2f-build-pill:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
    border-top: 1px solid rgba(255,255,255,0.5);
    transform: translateY(-2px);
}

.f2f-pill-num {
    color: #40b0a6;
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 0.9;
}

.f2f-pill-text {
    font-weight: 600;
    font-size: 1rem;
    color: white;
}

/* =========================================
   WHY CHOOSE F2F SECTION
   ========================================= */
.f2f-choose-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background: #eef4f9;
}

.f2f-choose-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Cleaned margin */
}

.f2f-choose-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 0;
    color: #0a1b44;
}
.f2f-choose-header h2 .text-cyan { color: #40b0a6; }

.f2f-choose-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem; /* Cleaned gap */
}

.f2f-choose-card { background: #ffffff; border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border-left: 6px solid #3b82f6; /* Blue border */
    display: flex;
    flex-direction: column;
}

.f2f-choose-card h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0a1b44;
    margin: 0 0 1.5rem;
}

.f2f-choose-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    flex-grow: 1;
}

.f2f-choose-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
}

.f2f-choose-list li svg {
    color: #3b82f6;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.f2f-choose-summary {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
    color: #1e3a8a; /* Darker blue */
    font-weight: 700;
    font-size: 0.85rem;
    margin: 0;
}

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

/* =========================================
   WHAT COMES NEXT SECTION (GRADUATION)
   ========================================= */
.f2f-graduation-section {
    padding: 5rem 1.5rem; /* Cleaned padding */
    position: relative;
    background: url('assets/f2f-graduation-bg.jpg') center/cover no-repeat;
    background-color: #0a1b44; /* Fallback */
    color: white;
    text-align: center;
    overflow: hidden;
}

/* Dark blue/purple overlay to make text readable */
.f2f-graduation-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 27, 68, 0.85); /* Deep navy with 85% opacity */
    z-index: 1;
}

.f2f-grad-container {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.f2f-grad-header h2 {
    font-size: clamp(2.2rem, 4.5vw, 3rem);
    font-weight: 800;
    margin: 0 0 1.5rem;
    color: white;
    line-height: 1.15;
}
.f2f-grad-header h2 .text-cyan { color: #40b0a6; }

.f2f-grad-text {
    font-size: 1.1rem;
    color: #e2e8f0;
    line-height: 1.8;
    margin: 0;
    font-weight: 400;
}

/* =========================================
   F2F FAQ SECTION
   ========================================= */
.f2f-faq-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background-color: #eef4f9;
}

.f2f-faq-header {
    text-align: center;
    margin-bottom: 2.5rem; /* Cleaned margin */
}

.f2f-faq-header h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.4rem);
    font-weight: 800;
    margin: 0;
    color: #2b3b5c;
}

/* Gradient text for Questions */
.f2f-faq-header h2 .text-gradient-cyan {
    background: linear-gradient(to right, #3b82f6, #40b0a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.f2f-faq-accordion {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.f2f-faq-item {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.f2f-faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.f2f-faq-question h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    padding-right: 2rem;
}

.f2f-faq-icon {
    width: 20px;
    height: 20px;
    color: #3b82f6;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.f2f-faq-icon svg {
    width: 100%;
    height: 100%;
}

.f2f-faq-item.active .f2f-faq-icon {
    transform: rotate(180deg);
}

.f2f-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 2rem;
}

.f2f-faq-item.active .f2f-faq-answer {
    max-height: 500px; /* arbitrary large value */
    padding: 0 2rem 1.5rem 2rem;
}

.f2f-faq-answer-inner {
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
}

.f2f-faq-answer p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}


/* =========================================
   GET STARTED SECTION
   ========================================= */
.f2f-get-started-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background-color: #ffffff;
}

.f2f-get-started-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center; /* Explicitly prevent stretching */
}

.f2f-gs-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push text to top, image to bottom */
}

.f2f-gs-content h2 {
    font-size: clamp(1.5rem, 2.2vw, 2.2rem); /* Reduced to fit on one line */
    white-space: nowrap;
    font-weight: 800;
    margin: 0 0 1rem;
    color: #1e293b;
    line-height: 1.2;
}

.f2f-gs-content h2 .text-gradient-cyan {
    background: linear-gradient(to right, #3b82f6, #40b0a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.f2f-gs-text {
    font-size: 0.85rem; /* Reduced font size */
    color: #475569;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.f2f-gs-text p {
    margin: 0 0 0.4rem;
}

.f2f-gs-visual {
    position: relative;
    width: 100%;
    margin-top: auto; /* Ensure it stays at the bottom */
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.f2f-gs-visual img {
    width: 100%;
    max-height: 100%; /* Prevent it from overflowing vertically */
    object-fit: contain; /* Keep aspect ratio intact while fitting */
    border-radius: 12px;
}

/* Form Card */
.f2f-gs-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    /* Removed space-between to fix massive gaps */
    height: 100%;
}

.f2f-gs-form-card h3 {
    font-size: 1.35rem; /* Reduced slightly */
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.f2f-gs-form-card > p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.f2f-form-label-group {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
}

/* Tabs */
.f2f-form-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.f2f-tab-btn {
    flex: 1;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.3s ease;
}

.f2f-tab-btn.active {
    background: #0f172a;
    color: white;
    border: none !important;
}

/* Form Fields */
.f2f-form-group {
    margin-bottom: 1rem;
}

.f2f-form-group label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.3rem;
}

.f2f-form-control {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.9rem;
    color: #334155;
    outline: none;
    transition: border-color 0.3s ease;
}

.f2f-form-control:focus {
    border: none !important;
    background: #ffffff;
}

.f2f-form-control::placeholder {
    color: #94a3b8;
}

.f2f-form-submit {
    width: 100%;
    padding: 0.9rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 0.5rem; /* Standard margin */
}

.f2f-form-submit:hover {
    background: #1d4ed8;
}

@media (max-width: 900px) {
    .f2f-get-started-container {
        grid-template-columns: 1fr;
    }
}

   ========================================= */
.f2f-get-started-section {
    padding: 4rem 1.5rem; /* Cleaned padding */
    background-color: #ffffff;
}

.f2f-get-started-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center; /* Explicitly prevent stretching */
}

.f2f-gs-content h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    margin: 0 0 1.5rem;
    color: #1e293b;
    line-height: 1.2;
}

.f2f-gs-content h2 .text-gradient-cyan {
    background: linear-gradient(to right, #3b82f6, #40b0a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.f2f-gs-text {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.f2f-gs-text p {
    margin: 0 0 0.5rem;
}

.f2f-gs-visual {
    position: relative;
    width: 100%;
}
.f2f-gs-visual img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Form Card */
.f2f-gs-form-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
}

.f2f-gs-form-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.f2f-gs-form-card > p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.f2f-form-label-group {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
}

/* Tabs */
.f2f-form-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.f2f-tab-btn {
    flex: 1;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    transition: all 0.3s ease;
}

.f2f-tab-btn.active {
    background: #0f172a;
    color: white;
    border: none !important;
}

/* Form Fields */
.f2f-form-group {
    margin-bottom: 1.25rem;
}

.f2f-form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.4rem;
}

.f2f-form-control {
    width: 100%;
    padding: 0.95rem 1rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.85rem;
    color: #334155;
    outline: none;
    transition: border-color 0.3s ease;
}

.f2f-form-control:focus {
    border: none !important;
    background: #ffffff;
}

.f2f-form-control::placeholder {
    color: #94a3b8;
}

.f2f-form-submit {
    width: 100%;
    padding: 1rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 0.5rem;
}

.f2f-form-submit:hover {
    background: #1d4ed8;
}

@media (max-width: 900px) {
    .f2f-get-started-container {
        grid-template-columns: 1fr;
    }
}

.f2f-why-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}


/* Transparent bridge to prevent hover loss on mega menu */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
}

.nav-item-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}


/* Fix HPC Domain Cards Overlap with Global Card Styles */
.hpc-domains-grid .domain-card {
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    background: #ffffff !important;
    padding: 2.5rem 2rem !important; /* Slightly reduced padding to match screenshot 2 */
}

/* Remove any inherited border-top or border-bottom from global .card-blue, etc. */
.hpc-domains-grid .domain-card.card-blue,
.hpc-domains-grid .domain-card.card-purple,
.hpc-domains-grid .domain-card.card-green {
    border-top: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-left: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.6) !important;
}

/* Keep the hover effect strictly on box-shadow */
.hpc-domains-grid .domain-card.card-blue:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #2563eb !important;
}
.hpc-domains-grid .domain-card.card-purple:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #7c3aed !important;
}
.hpc-domains-grid .domain-card.card-green:hover {
    box-shadow: 0 10px 40px rgba(0,0,0,0.03), inset 0 -6px 0 #10b981 !important;
}


/* Tightly pack the content inside HPC domain cards */
.hpc-domains-grid .domain-card {
    justify-content: flex-start !important;
}

.hpc-domains-grid .domain-icon-box {
    margin-bottom: 1.25rem !important; /* Smaller gap below icon */
}

.hpc-domains-grid .domain-category {
    margin-bottom: 0.5rem !important; /* Smaller gap below category */
    font-size: 0.75rem !important;
}

.hpc-domains-grid .domain-title {
    margin: 0 0 1rem 0 !important; /* Smaller gap below title */
    font-size: 1.5rem !important; /* Slightly smaller title font */
}

.hpc-domains-grid .domain-desc {
    margin: 0 !important; /* Remove bottom margin from paragraph */
    line-height: 1.5 !important;
    font-size: 0.95rem !important;
}


/* Provide tinted backgrounds for dark mode NCF cards */
.ncf-card.card-green { background: rgba(16, 185, 129, 0.08) !important; }
.ncf-card.card-yellow { background: rgba(234, 179, 8, 0.08) !important; }
.ncf-card.card-blue { background: rgba(59, 130, 246, 0.08) !important; }
.ncf-card.card-pink { background: rgba(236, 72, 153, 0.08) !important; }
.ncf-card.card-purple { background: rgba(139, 92, 246, 0.08) !important; }



/* ==========================================
   NEW CS PAGE STYLES
   ========================================== */

.cs-new-hero {
    position: relative;
    padding: 6rem 2rem 4rem 2rem;
    overflow: hidden;
    /* background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); */
    background-image: url("assets/CS-banner.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}

.cs-new-hero-container {
    max-width: 1440px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

.cs-new-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem 0;
    line-height: 1.1;
}

.cs-new-hero-content h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
}

.cs-new-hero-content p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 2.5rem 0;
    max-width: 90%;
}

.cs-new-hero-btns { margin-top: 3rem;
    display: flex;
    gap: 1rem;
}

.btn-solid-blue {
    background: #2D5BFF;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-solid-blue:hover {
    background: #1e40af;
}

.btn-outline-blue {
    background: transparent;
    color: #2D5BFF;
    border: 1px solid #2D5BFF;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.btn-outline-blue:hover {
    background: rgba(45, 91, 255, 0.05);
}

.cs-new-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.1); /* Ensure it fills space well like the screenshot */
}

/* Why Section */
.cs-new-why {
    padding: 5rem 2rem;
    background: #ffffff;
    position: relative;
}

.cs-new-why-container {
    max-width: 1440px;
    margin: 0 auto;
}

.cs-new-why-header {
    margin-bottom: 3rem;
}

.cs-new-badge {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
}

.cs-new-why-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.text-blue { color: #3B82F6; }
.text-green { color: #10B981; }

.cs-new-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: flex-start;
}

.cs-new-why-image img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.cs-new-why-content h3 {
    font-size: 1.5rem;
    color: #1e293b;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.4;
}

.cs-why-desc {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
}

.cs-why-highlight {
    color: #2D5BFF;
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0 0 2rem 0;
}

.cs-why-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cs-why-feature {
    text-align: center;
}

.cs-why-feature .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.cs-why-feature .feature-icon svg {
    width: 24px;
    height: 24px;
}

.cs-why-feature h4 {
    font-size: 0.85rem;
    color: #0f172a;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.cs-why-feature p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .cs-new-hero-container { grid-template-columns: 1fr; gap: 2rem; }
    .cs-new-why-grid { grid-template-columns: 1fr; gap: 3rem; }
    .cs-new-hero-image img { transform: scale(1); }
}

@media (max-width: 768px) {
    .cs-why-features { grid-template-columns: 1fr; }
}

/* New Competencies Section */
.cs-new-competencies {
    padding: 5rem 2rem;
    background: #ffffff; /* Or light gradient if needed */
    position: relative;
}

.cs-new-comp-container {
    max-width: 1440px;
    margin: 0 auto;
}

.cs-new-comp-header {
    margin-bottom: 4rem;
}

.cs-new-comp-header h2 {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0.5rem 0;
}

.cs-new-comp-header p {
    font-size: 1.1rem;
    color: #64748b;
    margin: 0;
}

.cs-new-comp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.cs-comp-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    z-index: 1;
}

.cs-comp-icon-shape {
    position: absolute;
    top: 0;
    right: 0;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    padding-left: 5px;
    z-index: 1; /* Place above the expanding background */
    pointer-events: none;
}

/* The expanding circle background */
.cs-comp-card::before {
    content: '';
    position: absolute;
    top: -15px;
    right: -15px;
    width: 85px;
    height: 85px;
    background: #e0e7ff;
    border-radius: 50%; /* Perfect circle */
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Slow, smooth expansion */
    transform-origin: center;
    z-index: 0;
}

/* HOVER ANIMATION EXPANSION */
.cs-comp-card:hover::before {
    transform: scale(12); /* Expands slowly to cover the entire card */
}

.cs-comp-card:hover {
    border: 1px solid #c7d2fe;
    box-shadow: 0 15px 35px rgba(45, 91, 255, 0.1);
}

.cs-comp-card:hover p {
    color: #475569;
}

.cs-comp-icon-shape svg {
    width: 28px;
    height: 28px;
    color: #2D5BFF;
}

.cs-comp-card h3 {
    font-size: 1.25rem;
    color: #0f172a;
    font-weight: 700;
    margin: 1rem 0 0.75rem 0;
    padding-right: 50px; /* Space for the icon */
    position: relative;
    z-index: 2;
}

.cs-comp-card p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

@media (max-width: 1024px) {
    .cs-new-comp-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .cs-new-comp-grid { grid-template-columns: 1fr; }
}


/* ==========================================
   HOW LEARNING HAPPENS SECTION
   ========================================== */
.cs-learning-process {
    padding: 6rem 0;
    background: transparent;
    position: relative;
    z-index: 2;
}

.cs-lp-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 3.5rem;
    align-items: flex-start;
}

.cs-lp-intro {
    position: sticky;
    top: 120px;
}

.cs-lp-intro h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--dark-blue);
    letter-spacing: -1px;
}

.cs-lp-intro p {
    font-size: 1.15rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.cs-lp-stages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cs-lp-stage {
    display: flex;
    flex-direction: column;
}

.cs-lp-stage-img-placeholder {
    width: 100%;
    height: 200px;
    background: #f1f5ff; /* Slightly softer blue */
    border-radius: 12px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(45, 91, 255, 0.05); /* very subtle border */
}
.cs-lp-stage-img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 12px;
    margin-bottom: 2rem;
    display: block;
    background: transparent;
}


.cs-lp-stage-img-placeholder svg {
    width: 50px;
    height: 50px;
    opacity: 0.8;
}

.cs-lp-stage-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 800; /* Bolder to match figma */
    color: #0f172a; /* Specific dark slate color for this section only */
    margin-bottom: 1.5rem;
}

.cs-lp-stage-title svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.cs-lp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-lp-list li {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
    padding-left: 1.25rem;
}

.cs-lp-list li::before {
    content: '?';
    color: var(--primary);
    position: absolute;
    left: 0;
    top: -2px;
    font-size: 1.5rem;
    line-height: 1;
}

.cs-lp-list li strong {
    font-size: 1.05rem;
    color: #0f172a; /* Specific dark slate color for this section only */
    font-weight: 700;
}

.cs-lp-list li span {
    font-size: 0.85rem;
    color: #64748b; /* Specific muted slate color for this section only */
    line-height: 1.5;
    margin-top: 2px;
}

@media (max-width: 1100px) {
    .cs-lp-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .cs-lp-intro {
        position: relative;
        top: 0;
        text-align: center;
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .cs-lp-stages {
        grid-template-columns: 1fr;
    }
}


/* ==========================================
   THE LEARNER'S JOURNEY SECTION
   ========================================== */
.cs-learner-journey {
    background: transparent;
    padding: 0;
    position: relative;
    overflow: hidden;
    color: #fff;
    font-family: 'Outfit', sans-serif;
}

.cs-lj-glow {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: 0.25;
    pointer-events: none;
    z-index: 1;
}

.cs-lj-glow.glow-top-right {
    top: -300px;
    right: -300px;
    background: radial-gradient(circle, rgba(45,91,255,0.5) 0%, transparent 70%);
}

.cs-lj-glow.glow-bottom-left {
    bottom: -300px;
    left: -300px;
    background: radial-gradient(circle, rgba(0,230,118,0.2) 0%, transparent 70%);
}

.cs-lj-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.cs-lj-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 4rem;
}

.cs-lj-badge {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: rgba(255,255,255,0.1);
    color: #cbd5e1;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cs-lj-header h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #fff;
    line-height: 1.2;
}

.cs-lj-header p {
    font-size: 1.15rem;
    color: #cbd5e1;
    line-height: 1.6;
    max-width: 800px;
}

/* Timeline Layout */
.cs-lj-timeline {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

.cs-lj-row {
    display: flex;
    width: 100%;
    position: relative;
    padding-bottom: 1.5rem;
}

/* Stagger rows vertically to compress timeline */
.cs-lj-row:not(:first-child) {
    margin-top: 0;
}

/* FIX STACKING CONTEXT: Make earlier rows render on top of later rows so arrows are visible! */
.cs-lj-timeline > .cs-lj-row:nth-child(1) { z-index: 10; }
.cs-lj-timeline > .cs-lj-row:nth-child(2) { z-index: 9; }
.cs-lj-timeline > .cs-lj-row:nth-child(3) { z-index: 8; }
.cs-lj-timeline > .cs-lj-row:nth-child(4) { z-index: 7; }
.cs-lj-timeline > .cs-lj-row:nth-child(5) { z-index: 6; }
.cs-lj-timeline > .cs-lj-row:nth-child(6) { z-index: 5; }
.cs-lj-timeline > .cs-lj-row:nth-child(7) { z-index: 4; }

.cs-lj-row.left-row {
    justify-content: flex-start;
}

.cs-lj-row.right-row {
    justify-content: flex-end;
}

/* Glassmorphism Cards */
.cs-lj-card {
    width: calc(50% - 1.5rem); /* Exactly leaves 3rem total gap in center */
    background: rgba(24, 30, 82, 0.4); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    position: relative;
    z-index: 5;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
}

.cs-lj-watermark {
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    font-size: 14rem; 
    font-weight: 900;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    letter-spacing: -5px;
}

.cs-lj-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2); 
}

.cs-lj-pill span {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 2px;
    font-weight: 600;
}

.cs-lj-pill strong {
    font-size: 1rem;
    color: #fff;
    line-height: 1;
    font-weight: 800;
}

.cs-lj-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.cs-lj-card p {
    font-size: 0.85rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Pixel-Perfect Dashed Paths */
.cs-lj-path {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0.9;
    height: 2.5rem; /* Initial drop out of the card */
    top: 100%; /* Start exactly at the bottom of the card */
}

/* Path from Left Card to Right Card */
.path-to-right {
    left: calc(50% - 6rem); /* Start near the right edge of Card 1 */
    right: calc(50% - 6rem); /* End near the left edge of Card 2 */
    border-left: 2px dashed #00E676;
    border-bottom: 2px dashed #00E676;
    border-bottom-left-radius: 16px;
}
.path-to-right::before {
    content: '';
    position: absolute;
    top: 100%;
    right: -2px;
    height: 2rem; /* Final drop into Card 2 */
    border-right: 2px dashed #00E676;
}
.path-to-right::after {
    content: '';
    position: absolute;
    top: calc(100% + 2rem - 10px); 
    right: -7px; 
    width: 12px;
    height: 12px;
    border-bottom: 3px solid #00E676;
    border-right: 3px solid #00E676;
    transform: rotate(45deg); 
}

/* Path from Right Card to Left Card */
.path-to-left {
    right: calc(50% - 6rem); /* Start near the left edge of Card 2 */
    left: calc(50% - 6rem); /* End near the right edge of Card 3 */
    border-right: 2px dashed #00E676;
    border-bottom: 2px dashed #00E676;
    border-bottom-right-radius: 16px;
}
.path-to-left::before {
    content: '';
    position: absolute;
    top: 100%;
    left: -2px;
    height: 2rem; /* Final drop into Card 3 */
    border-left: 2px dashed #00E676;
}
.path-to-left::after {
    content: '';
    position: absolute;
    top: calc(100% + 2rem - 10px); 
    left: -7px; 
    width: 12px;
    height: 12px;
    border-bottom: 3px solid #00E676;
    border-left: 3px solid #00E676;
    transform: rotate(-45deg);
}

@media (max-width: 900px) {
    .cs-lj-row {
        margin-top: 0 !important;
        padding-bottom: 2rem;
    }
    .cs-lj-row.left-row, .cs-lj-row.right-row {
        justify-content: center;
    }
    .cs-lj-card {
        width: 100%;
    }
    .cs-lj-path {
        display: none;
    }
    .cs-lj-header {
        text-align: center;
        margin: 0 auto 3rem;
    }
}

/* ==========================================
   STAKEHOLDER BENEFITS SECTION (Core Skills)
   ========================================== */
.cs-stakeholders {
    background: #f8fafc;
    padding: 6rem 0;
    position: relative;
    font-family: 'Outfit', sans-serif;
    color: #0f172a;
}

.cs-st-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-st-header-wrap {
    margin-bottom: 3rem;
}

.cs-st-badge {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cs-st-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
    color: #0f172a;
}
.cs-st-title .cs-st-highlight {
    color: #10b981; /* Default teal/green gradient vibe */
}

/* Tabs */
.cs-st-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 3rem;
    width: 100%;
}

.cs-st-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    padding: 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.cs-st-tab svg {
    width: 24px;
    height: 24px;
}

.cs-st-tab::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 3px;
    background: #2563eb;
    transition: width 0.3s ease;
}

.cs-st-tab.active {
    color: #2563eb;
}

.cs-st-tab.active::after {
    width: 100%;
}

/* Specific Tab Colors for Active State */
.cs-st-tab[data-tab="st-parents"].active {
    color: #10b981;
}
.cs-st-tab[data-tab="st-parents"].active::after {
    background: #10b981;
}

.cs-st-tab[data-tab="st-schools"].active {
    color: #d97706;
}
.cs-st-tab[data-tab="st-schools"].active::after {
    background: #d97706;
}

/* Tab Content */
.cs-st-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.cs-st-content.active {
    display: block;
    opacity: 1;
}

.cs-st-layout {
    display: flex;
    gap: 2rem;
}

/* Left Hero Card */
.cs-st-hero {
    flex: 0 0 35%;
    border-radius: 16px;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(0,0,0,0.05);
}

.cs-st-hero-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.cs-st-hero-icon svg {
    width: 32px;
    height: 32px;
    color: #fff;
}

.cs-st-hero h3 {
    font-size: 3rem;
    font-weight: 900;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.cs-st-hero p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* Theme Colors for Hero Cards */
.cs-st-hero.theme-blue {
    background: #eff6ff;
}
.cs-st-hero.theme-blue h3 { color: #1d4ed8; }
.cs-st-hero.theme-blue p { color: #3b82f6; }
.cs-st-hero.theme-blue .cs-st-hero-icon { background: #2563eb; }

.cs-st-hero.theme-green {
    background: #ecfdf5;
}
.cs-st-hero.theme-green h3 { color: #047857; }
.cs-st-hero.theme-green p { color: #10b981; }
.cs-st-hero.theme-green .cs-st-hero-icon { background: #10b981; }

.cs-st-hero.theme-orange {
    background: #fffbeb;
}
.cs-st-hero.theme-orange h3 { color: #b45309; }
.cs-st-hero.theme-orange p { color: #d97706; }
.cs-st-hero.theme-orange .cs-st-hero-icon { background: #f59e0b; }

/* Right Grid */
.cs-st-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Feature Item Default State */
.cs-st-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

.cs-st-num {
    background: #f1f5f9;
    color: #64748b;
    font-weight: 800;
    font-size: 1.2rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.cs-st-text h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    transition: all 0.3s ease;
}

.cs-st-text p {
    margin: 0;
    font-size: 1rem;
    color: #475569;
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* Hover States (The specific request!) */
.hover-blue:hover {
    background: #2563eb;
    box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4);
}
.hover-blue:hover .cs-st-num {
    background: #ffffff;
    color: #2563eb;
}
.hover-blue:hover .cs-st-text h4,
.hover-blue:hover .cs-st-text p {
    color: #ffffff;
}

.hover-green:hover {
    background: #10b981;
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
}
.hover-green:hover .cs-st-num {
    background: #ffffff;
    color: #10b981;
}
.hover-green:hover .cs-st-text h4,
.hover-green:hover .cs-st-text p {
    color: #ffffff;
}

.hover-orange:hover {
    background: #eab308; /* or #d97706 */
    box-shadow: 0 10px 25px -5px rgba(234, 179, 8, 0.4);
}
.hover-orange:hover .cs-st-num {
    background: #ffffff;
    color: #eab308;
}
.hover-orange:hover .cs-st-text h4,
.hover-orange:hover .cs-st-text p {
    color: #ffffff;
}

/* Keep the first items statically hovered for demonstration if needed? 
   The user asked "after hovering the mouse color should apper like that",
   so standard :hover is exactly what they want! */

@media (max-width: 900px) {
    .cs-st-layout {
        flex-direction: column;
    }
    .cs-st-grid {
        grid-template-columns: 1fr;
    }
    .cs-st-tabs {
    display: flex;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 3rem;
    width: 100%;
}
}

/* ==========================================
   NATIONAL & GLOBAL FRAMEWORK ALIGNMENT
   ========================================== */
.cs-framework {
    background: #f0fdf4; /* Very light subtle green/blue tint like mockup */
    background: linear-gradient(135deg, #f4f9f9 0%, #e6f6f4 100%);
    padding: 6rem 0;
    font-family: 'Outfit', sans-serif;
}

.cs-framework-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
}

.cs-framework-header {
    margin-bottom: 4rem;
}

.cs-framework-badge {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cs-framework-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 0 0 1rem 0;
    letter-spacing: -1px;
}

/* Gradient/Color text for Title */
.cs-framework-title .text-blue { color: #2563eb; }
.cs-framework-title .text-teal { color: #14b8a6; }
.cs-framework-title .text-green { color: #10b981; }
.cs-framework-title .text-green-light { color: #34d399; }
.cs-framework-title .text-green-neon { color: #6ee7b7; }
.cs-framework-title .text-sep { color: #94a3b8; margin: 0 0.5rem; font-weight: 300; }

.cs-framework-subtitle {
    font-size: 1.2rem;
    color: #475569;
    margin: 0;
}

/* Cards Grid */
.cs-framework-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cs-fw-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    background: #0f172a;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* Background Image */
.cs-fw-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
    /* Dark gradient at the bottom so title is visible by default */
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.cs-fw-card::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(to top, rgba(10, 11, 46, 0.9) 0%, transparent 100%);
    z-index: 1;
    transition: opacity 0.5s ease;
}

/* Hover Overlay (The dark blue background that appears) */
.cs-fw-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg, rgba(10, 11, 46, 0.85) 0%, rgba(10, 11, 46, 0.98) 100%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Card Content Container */
.cs-fw-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 2.5rem 2rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.cs-fw-pill {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.4s ease;
}

.cs-fw-card h3 {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    transition: transform 0.4s ease;
    }

/* Hidden Bullet List */
.cs-fw-list {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    pointer-events: none;
}

.cs-fw-list li {
    color: #e2e8f0;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    position: relative;
    padding-left: 1.25rem;
}

.cs-fw-list li::before {
    content: '?';
    position: absolute;
    left: 0;
    color: #fff;
    font-weight: bold;
}

.cs-fw-list li strong {
    color: #fff;
    display: inline;
}

/* ============================
   HOVER EFFECTS (THE MAGIC!)
   ============================ */

.cs-fw-card:hover .cs-fw-bg {
    transform: scale(1.05);
    filter: blur(2px);
}

.cs-fw-card:hover::before {
    opacity: 0;
}

.cs-fw-card:hover .cs-fw-overlay {
    opacity: 1;
}

/* Slide badge and title up */
/* Slide badge and title up (Handled naturally by the expanding list) */
.cs-fw-card:hover .cs-fw-pill,
.cs-fw-card:hover h3 {
    /* Optional slight scale or color change if needed, but translation is automatic */
}

/* Fade in and expand the list */
.cs-fw-card:hover .cs-fw-list {
    opacity: 1;
    max-height: 400px; /* Large enough to hold the content */
    margin-top: 1.5rem;
    pointer-events: auto;
}

/* Responsive */
@media (max-width: 900px) {
    .cs-framework-grid {
        grid-template-columns: 1fr;
    }
    .cs-framework-title {
        font-size: 2.5rem;
    }
}

/* ==========================================
   FAQ SECTION
   ========================================== */
.cs-faq {
    background: #f8fafc;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 6rem 0;
    font-family: 'Outfit', sans-serif;
}

.cs-faq-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 3.5rem;
    align-items: center;
}

.cs-faq-left {
    flex: 0 0 35%;
    
    
}

.cs-faq-badge {
    display: inline-block;
    padding: 0.4rem 1.25rem;
    background: #e0e7ff;
    color: #4338ca;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.cs-faq-title {
    font-size: 3rem;
    font-weight: 900;
    margin: 0 0 1.5rem 0;
    line-height: 1.1;
}

.cs-faq-title .text-dark {
    color: #0f172a;
    white-space: nowrap;
    font-size: 3rem;
}

.cs-faq-title .text-gradient {
    background: linear-gradient(to right, #2563eb, #34d399); /* Blue to green gradient */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.cs-faq-subtitle {
    font-size: 1.1rem;
    color: #64748b; /* Gray */
    margin: 0;
    line-height: 1.5;
}

/* Right Accordion */
.cs-faq-right {
    flex: 1;
}

.cs-faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cs-faq-item {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.cs-faq-question {
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 700;
    font-size: 1.15rem;
    color: #334155;
    transition: background 0.3s ease;
}

.cs-faq-question:hover {
    background: #f8fafc;
}

.cs-faq-icon {
    background: #2563eb;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
}

.cs-faq-icon svg {
    width: 20px;
    height: 20px;
}

.cs-faq-item.active .cs-faq-icon {
    transform: rotate(180deg);
}
.cs-faq-item.active .cs-faq-question {
    color: #2563eb;
}

.cs-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.cs-faq-answer-inner {
    padding: 0 2rem 1.5rem 2rem;
    color: #475569;
    line-height: 1.6;
    font-size: 1.05rem;
}

/* Responsive */
@media (max-width: 900px) {
    .cs-faq-container {
        flex-direction: column;
    }
    .cs-faq-left {
        position: static;
        margin-bottom: 2rem;
    }
}

/* ==========================================
   CTA BANNER SECTION
   ========================================== */

   
.cs-cta-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
    /* Negate the bottom padding of FAQ and overlap footer */
    margin-bottom: -9rem;
    transform: translateY(3rem);
}

.cs-cta-banner {
    background: linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%);
    border-radius: 24px;
    padding: 4rem 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    font-family: 'Outfit', sans-serif;
}

.cs-cta-left {
    flex: 1;
    padding-right: 3rem;
}

.cs-cta-left h2 {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 0 1rem 0;
    line-height: 1.2;
    }

.cs-cta-left .text-dark {
    color: #0f172a;
}
.cs-cta-left .text-blue {
    color: #2563eb;
}
.cs-cta-left .text-teal {
    color: #34d399;
}

.cs-cta-left p {
    font-size: 1.1rem;
    color: #475569;
    margin: 0;
}

.cs-cta-right {
    flex: 0 0 450px;
}

.cs-cta-form {
    display: flex;
    background: #ffffff;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.cs-cta-form input {
    flex: 1;
    border: none;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    outline: none;
}

.cs-cta-form input::placeholder {
    color: #94a3b8;
}

.cs-cta-form button {
    background: #2563eb;
    color: #ffffff;
    border: none;
    padding: 0 2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cs-cta-form button:hover {
    background: #1d4ed8;
}

/* Add extra padding to the top of the footer so the banner doesn't cover footer content */
.footer-section {
    padding-top: 50px; 
}

@media (max-width: 900px) {
    .cs-cta-banner {
        flex-direction: column;
        padding: 3rem 2rem;
        text-align: center;
    }
    .cs-cta-left {
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .cs-cta-right {
        flex: 1;
        width: 100%;
    }
    .cs-cta-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 10;
    /* Negate the bottom padding of FAQ and overlap footer */
    margin-bottom: -13rem;
    transform: translateY(3rem);
}
    .footer-section {
        padding-top: 100px !important; 
    }
}

/* Exact Design Redesign for Transformation Section */
.i3dp-transformation-section {
    background-color: #f8fafc;
    padding: 6rem 2rem;
}
.i3dp-bridge-visual { position: relative; margin-top: 3rem; }
.i3dp-simple-bridge-line {
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 1.5px;
    background: #2563eb;
    z-index: 0;
}
.i3dp-bridge-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card Styling Update */
.i3dp-card-traditional, .i3dp-card-futureready {
    flex: 0 0 350px;
    background: #ffffff;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.i3dp-card-traditional {
    border: 1px solid #e2e8f0;
}
.i3dp-card-futureready {
    border: 1.5px solid #2563eb;
}

/* Titles inside cards */
.i3dp-card-title-gray {
    text-align: center;
    color: #64748b;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}
.i3dp-card-title-blue {
    text-align: center;
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

/* Image wrappers and icons overlapping */
.i3dp-card-img-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible; /* to allow icon to overlap */
    margin-bottom: 3.5rem; /* space for icon and list */
}
.i3dp-card-img-wrapper img {
    width: 100%;
    border-radius: 12px;
    display: block;
}
.i3dp-face-icon {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.i3dp-face-icon.icon-gray {
    color: #64748b;
    border: 2px solid #e2e8f0;
}
.i3dp-face-icon.icon-purple-light {
    color: #2563eb;
    border: 2px solid #2563eb;
}

/* Lists */
.i3dp-traditional-list, .i3dp-futureready-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.i3dp-traditional-list li, .i3dp-futureready-list li {
    font-size: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.i3dp-traditional-list li {
    color: #475569;
}
.i3dp-futureready-list li {
    color: #334155;
}
.cross-icon {
    color: #94a3b8;
    font-size: 1.1rem;
    font-weight: bold;
}
.check-icon {
    color: #2563eb;
    font-size: 1.1rem;
    font-weight: bold;
}

/* Solid Blue Center Pill */
.i3dp-bridge-center {
    flex: 1;
    display: flex;
    justify-content: center;
}
.i3dp-solid-bridge-pill {
    background: #2563eb;
    color: white;
    padding: 1.5rem 2.5rem;
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}
.i3dp-solid-bridge-pill h4 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
}
.i3dp-solid-bridge-pill span {
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 900px) {
    .i3dp-bridge-content {
        flex-direction: column;
        gap: 3rem;
    }
    .i3dp-simple-bridge-line {
        display: none;
    }
    .i3dp-card-traditional, .i3dp-card-futureready {
        width: 100%;
        flex: none;
    }
}

/* Exact Design Redesign for Hex Section */
.i3dp-hex-section { padding: 6rem 2rem; background: #f8fafc; color: #0f172a; }
.i3dp-hex-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; }
.i3dp-hex-header p { font-size: 1.15rem; color: #64748b; margin: 0; }

.i3dp-hex-item { 
    position: absolute; 
    width: 130px; 
    height: 150px; 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    transition: 0.3s; 
    cursor: pointer; 
    z-index: 5;
    background: transparent;
    border: none;
}
.i3dp-hex-inner { 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    background: #ffffff; 
    width: 95%; 
    height: 95.5%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center;
    padding: 10px;
    gap: 0.25rem;
}
.i3dp-hex-inner span { 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: #1e293b; 
    line-height: 1.3;
    text-transform: capitalize;
    letter-spacing: 0;
}
.hex-icon { font-size: 1.8rem; margin-bottom: 0.2rem; }

/* Specific Hex Border Colors */
.hex-blue { background: #2563eb; }
.hex-purple { background: #9333ea; }
.hex-teal { background: #06b6d4; }
.hex-green { background: #10b981; }
.hex-yellow { background: #f59e0b; }
.hex-red { background: #ef4444; }

/* Center Hexagon */
.hex-center { 
    width: 160px; 
    height: 184px; 
    background: linear-gradient(135deg, #3b82f6, #8b5cf6); 
    z-index: 10;
}
.hex-center .center-inner { 
    background: transparent; 
    width: 100%; height: 100%; 
}
.hex-center h3 { margin: 0; font-size: 2.2rem; font-weight: 800; color: white; }
.hex-center p { margin: 0; font-size: 0.75rem; color: white; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; }

/* Rings and Lines */
.i3dp-hex-ring {
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1.5px dashed #94a3b8;
    border-radius: 50%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.i3dp-hex-lines { 
    position: absolute; 
    width: 350px; 
    height: 350px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.i3dp-hex-line { position: absolute; width: 100%; height: 1.5px; border-top: 1.5px dashed #94a3b8; }

/* The polygon is pointy-top! Angles to vertices: 90 (up), 30, 150 */
.line-1 { transform: rotate(90deg); }
.line-2 { transform: rotate(30deg); }
.line-3 { transform: rotate(150deg); }

.hex-pos-1 { top: calc(50% - 175px - 69px); left: calc(50% - 60px); } 
.hex-pos-2 { top: calc(50% - 87.5px - 69px); left: calc(50% + 151.5px - 60px); } 
.hex-pos-3 { top: calc(50% + 87.5px - 69px); left: calc(50% + 151.5px - 60px); } 
.hex-pos-4 { top: calc(50% + 175px - 69px); left: calc(50% - 60px); } 
.hex-pos-5 { top: calc(50% + 87.5px - 69px); left: calc(50% - 151.5px - 60px); } 
.hex-pos-6 { top: calc(50% - 87.5px - 69px); left: calc(50% - 151.5px - 60px); }

/* Right Column List Card */
.i3dp-hex-list-wrapper { padding: 1rem; }
.i3dp-hex-list-card { 
    background: #ffffff; 
    padding: 2.5rem 3rem; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.08); 
    border: none; 
}
.i3dp-hex-list-card h3 { color: #0f172a; font-size: 1.6rem; font-weight: 700; margin-bottom: 0.5rem; }
.i3dp-hex-list-card p.i3dp-hex-list-desc { color: #64748b; font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; }
.framework-list-item { 
    background: transparent; 
    border: none; 
    padding: 1.25rem 0; 
    border-bottom: 1px solid #f1f5f9; 
    border-radius: 0;
}
.framework-list-item:last-child { border-bottom: none; }
.list-item-left { display: flex; align-items: center; gap: 1rem; }
.list-icon { font-size: 1.5rem; }
.list-text { color: #334155; font-size: 1.05rem; font-weight: 600; transition: color 0.3s; }
.list-arrow { color: #3b82f6; opacity: 1; transform: translateX(0); width: 18px; height: 18px; transition: transform 0.3s; }
.framework-list-item:hover .list-arrow, .framework-list-item.active .list-arrow { transform: translateX(5px); }
.framework-list-item:hover .list-text, .framework-list-item.active .list-text { color: #2563eb; }

@media (max-width: 900px) {
    .i3dp-hex-graphic { height: 600px; transform: scale(0.8); }
}

/* HEXAGON ALIGNMENT FIX */
.i3dp-hex-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

@media (max-width: 900px) {
    .i3dp-hex-container {
        grid-template-columns: 1fr !important;
    }
}

/* Reset any old transforms that were inherited */
.hex-pos-1, .hex-pos-2, .hex-pos-3, .hex-pos-4, .hex-pos-5, .hex-pos-6 {
    transform: none !important;
}

.i3dp-hex-item:hover, .i3dp-hex-item.active {
    transform: scale(1.08) !important;
    z-index: 20;
}

/* Fix for the grid wrapper */
.i3dp-hex-container {
    display: block !important;
}

.i3dp-hex-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 3.5rem;
    align-items: center;
}

@media (max-width: 900px) {
    .i3dp-hex-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem;
    }
}

/* Learning Journey Exact Redesign */
.i3dp-journey-section { padding: 6rem 2rem; background: #f8fafc; overflow: hidden; }
.i3dp-journey-container { max-width: 1200px; margin: 0 auto; position: relative; }
.i3dp-journey-header { text-align: center; margin-bottom: 5rem; }
.i3dp-journey-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; }
.i3dp-journey-header p { font-size: 1.15rem; color: #64748b; margin: 0; }

.i3dp-journey-desktop { position: relative; height: 500px; max-width: 1100px; margin: 0 auto; }
.i3dp-journey-svg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.i3dp-journey-svg { width: 100%; height: 100%; overflow: visible; }
.i3dp-journey-points { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

.i3dp-jpoint { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); }

.i3dp-jnode {
    width: 26px; height: 26px; background: white; border: 4px solid #6366f1; border-radius: 50%;
    position: relative; z-index: 10; box-shadow: 0 0 10px rgba(99,102,241,0.4);
}
.i3dp-jnode:not(.node-final)::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 10px; height: 10px; background: #6366f1; border-radius: 50%;
}
.node-final { 
    border: none !important; box-shadow: 0 0 10px rgba(139,92,246,0.4); 
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #8b5cf6; padding-bottom: 2px;
}

.i3dp-jline { position: absolute; width: 1px; border-left: 1.5px dashed #cbd5e1; left: 50%; z-index: 0; pointer-events: none; }
.i3dp-jline.up { bottom: 13px; height: 75px; }
.i3dp-jline.down { top: 13px; height: 75px; }

.i3dp-jcard {
    background: white; border-radius: 16px; padding: 12px 24px; box-shadow: 0 15px 35px rgba(0,0,0,0.06);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: absolute; left: 50%; transform: translateX(-50%); width: 200px; z-index: 5;
    border: 1px solid #f1f5f9; pointer-events: auto; transition: transform 0.3s;
}
.i3dp-jcard:hover { transform: translateX(-50%) translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.i3dp-jcard.up { bottom: calc(100% + 75px); }
.i3dp-jcard.down { top: calc(100% + 75px); }

.jcard-icon { font-size: 1.8rem; margin-bottom: 5px; }
.jcard-title { font-size: 1rem; font-weight: 700; color: #1e293b; text-align: center; }

.i3dp-jcard.card-final {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6); border: none; box-shadow: 0 15px 30px rgba(139, 92, 246, 0.3);
}
.i3dp-jcard.card-final .jcard-title { color: white; }

@media (max-width: 900px) {
    .i3dp-journey-desktop { display: none; }
    /* Just hiding it on mobile for this specific fix since user only provided desktop screenshot */
}

/* Curriculum Overview Exact Redesign */
.i3dp-overview-section { padding: 6rem 2rem; background: #0b1121; color: white; overflow: hidden; }
.i3dp-overview-container { max-width: 1200px; margin: 0 auto; position: relative; }
.i3dp-overview-header { text-align: center; margin-bottom: 6rem; }
.i3dp-overview-kicker { display: block; font-size: 0.85rem; font-weight: 700; color: #3b82f6; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.75rem; }
.i3dp-overview-header h2 { font-size: 2.8rem; font-weight: 800; color: white; margin-bottom: 1rem; }
.i3dp-overview-header p { font-size: 1.15rem; color: #94a3b8; margin: 0; }

.i3dp-universe-graphic { position: relative; height: 500px; width: 500px; margin: 0 auto 4rem auto; }
.i3dp-universe-orbit {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; z-index: 0;
}
.i3dp-universe-core {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 180px; height: 180px;
    background: radial-gradient(circle, #3b82f6 0%, #1e3a8a 100%);
    border-radius: 50%; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 0 60px rgba(59, 130, 246, 0.5), inset 0 0 20px rgba(255,255,255,0.2);
}
.i3dp-universe-core::after {
    content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px;
    border: 2px solid rgba(96, 165, 250, 0.4); border-radius: 50%;
}
.i3dp-universe-core h3 { font-size: 1.5rem; font-weight: 700; color: white; text-align: center; margin: 0; line-height: 1.2; z-index: 15; }

.i3dp-radial-line {
    position: absolute; top: 50%; left: 50%; width: 250px; height: 1px;
    background: rgba(255,255,255,0.08); transform-origin: 0 50%; z-index: 1;
}

.i3dp-domain-node {
    position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 140px; text-align: center; z-index: 5;
}
.domain-circle {
    width: 60px; height: 60px; background: #0b1121; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; position: relative;
}
.border-blue { border: 2px solid #3b82f6; }
.border-purple { border: 2px solid #a855f7; }
.border-green { border: 2px solid #10b981; }
.border-pink { border: 2px solid #ec4899; }
.border-yellow { border: 2px solid #eab308; }
.border-red { border: 2px solid #ef4444; }
.border-lightblue { border: 2px solid #0ea5e9; }
.border-lightpurple { border: 2px solid #d946ef; }

.domain-icon { font-size: 1.6rem; z-index: 2; }
.domain-label { font-size: 0.85rem; color: #94a3b8; font-weight: 600; line-height: 1.4; transition: color 0.3s; background: transparent !important; padding: 0 !important; }

.i3dp-domain-node:hover .domain-label { color: white; }
.i3dp-domain-node:hover .domain-circle { box-shadow: 0 0 15px rgba(255,255,255,0.15); }

@media (max-width: 768px) {
    .i3dp-universe-graphic { width: 300px; height: 300px; }
    .i3dp-radial-line { width: 150px; }
    .i3dp-universe-core { width: 120px; height: 120px; }
    .i3dp-universe-core h3 { font-size: 1.1rem; }
    .i3dp-domain-node { width: 100px; }
    .domain-label { font-size: 0.7rem; }
}

/* Tangible Outcomes Section */
.i3dp-outcomes-section { padding: 6rem 2rem; background: #f8fafc; color: #0f172a; }
.i3dp-outcomes-container { max-width: 1400px; margin: 0 auto; }
.i3dp-outcomes-header { text-align: center; margin-bottom: 4rem; }
.i3dp-outcomes-kicker { display: block; font-size: 0.9rem; font-weight: 700; color: #3b82f6; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.75rem; }
.i3dp-outcomes-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.i3dp-outcomes-header p { font-size: 1.15rem; color: #64748b; margin: 0; max-width: 800px; margin: 0 auto; }

.i3dp-outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.i3dp-outcome-card {
    border-radius: 20px; padding: 2rem; display: flex; flex-direction: column;
}
.card-blue { background: #eff6ff; border: none; }
.card-green { background: #f0fdf4; border: none; }
.card-purple { background: #faf5ff; border: none; }

.outcome-badge { display: inline-block; padding: 0.35rem 1rem; border-radius: 20px; font-size: 0.85rem; font-weight: 700; color: white; margin-bottom: 1rem; align-self: flex-start; }
.badge-blue { background: #2563eb; }
.badge-green { background: #10b981; }
.badge-purple { background: #8b5cf6; }

.outcome-title { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; }
.outcome-desc { font-size: 0.9rem; color: #64748b; margin-bottom: 1.5rem; }

.outcome-img-wrapper { width: 100%; height: 200px; border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; }
.outcome-img { width: 100%; height: 100%; object-fit: cover; }

.list-kicker { font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; }
.kicker-blue { color: #3b82f6; }
.kicker-green { color: #10b981; }
.kicker-purple { color: #8b5cf6; }

.outcome-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; flex-grow: 1; }
.outcome-list li { position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: #334155; margin-bottom: 0.75rem; line-height: 1.4; }
.outcome-list li::before {
    content: '\2713'; position: absolute; left: 0; top: 0; font-size: 0.8rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%; color: white;
}
.list-blue li::before { background: #bfdbfe; color: #2563eb; }
.list-green li::before { background: #bbf7d0; color: #10b981; }
.list-purple li::before { background: #e9d5ff; color: #8b5cf6; }

.outcome-build-section { border-top: 1px solid rgba(0,0,0,0.05); padding-top: 1.5rem; }
.build-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.b-icon {
    width: 30px; height: 30px; border-radius: 50%; background: white;
    border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

@media (max-width: 1024px) {
    .i3dp-outcomes-grid { grid-template-columns: 1fr; }
}

/* Fix list alignments for outcomes */
.outcome-list { list-style: none !important; padding: 0 !important; margin: 0 0 1.5rem 0 !important; flex-grow: 1; }
.outcome-list li { 
    display: flex !important; align-items: flex-start !important; gap: 0.4rem !important;
    padding: 0 0 0.85rem 0 !important; margin: 0 !important;
    border: none !important; background: transparent !important;
    line-height: 1.4 !important;
}
.outcome-list li::before, .outcome-list li::after { display: none !important; } /* Kill global pseudos */

.outcome-check {
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-shrink: 0 !important; width: 18px !important; height: 18px !important;
    border-radius: 50% !important; color: white !important; font-size: 0.75rem !important; font-weight: bold !important;
    margin: 2px 0 0 0 !important; padding: 0 !important;
}
.outcome-text { font-size: 0.95rem !important; color: #334155 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; }

.list-blue .outcome-check { background: #bfdbfe !important; color: #2563eb !important; }
.list-green .outcome-check { background: #bbf7d0 !important; color: #10b981 !important; }
.list-purple .outcome-check { background: #e9d5ff !important; color: #8b5cf6 !important; }

/* Stakeholder Benefits Section */
.i3dp-benefits-section { padding: 6rem 2rem; background: #ffffff; color: #0f172a; }
.i3dp-benefits-container { max-width: 1200px; margin: 0 auto; }

.i3dp-benefits-header { text-align: center; margin-bottom: 3rem; }
.i3dp-benefits-kicker { display: block; font-size: 0.85rem; font-weight: 800; color: #3b82f6; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.75rem; }
.i3dp-benefits-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.i3dp-benefits-header p { font-size: 1.15rem; color: #64748b; margin: 0; max-width: 700px; margin: 0 auto; }

/* Toggle */
.i3dp-benefits-toggle {
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; padding: 0.35rem; border-radius: 50px;
    width: max-content; margin: 0 auto 4rem auto;
}
.toggle-btn {
    border: none; background: transparent; padding: 0.75rem 2rem;
    border-radius: 50px; font-weight: 700; font-size: 1rem; color: #64748b;
    display: flex; align-items: center; gap: 0.5rem; cursor: pointer; transition: all 0.3s;
}
.toggle-btn.active {
    background: white; color: #0f172a; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Layout */
.i3dp-benefits-content {
    display: grid; grid-template-columns: 1fr 2fr; gap: 2rem;
}

/* Left Card */
.benefits-main-card {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    border-radius: 24px; padding: 3rem 2.5rem; color: white;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.benefits-main-card::before {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 250px; height: 250px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1); pointer-events: none;
}
.benefits-main-card::after {
    content: ''; position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.05); pointer-events: none;
}

.main-card-icon { font-size: 3rem; margin-bottom: 1.5rem; z-index: 2; position: relative; }
.benefits-main-card h3 { font-size: 1.8rem; font-weight: 800; color: white; margin-bottom: 1rem; z-index: 2; position: relative; }
.benefits-main-card p { font-size: 1rem; color: #dbeafe; line-height: 1.5; margin-bottom: auto; z-index: 2; position: relative; }

.main-card-stats { display: flex; gap: 1rem; margin-top: 4rem; z-index: 2; position: relative; }
.stat-box {
    background: rgba(255,255,255,0.15); border-radius: 16px; padding: 1.5rem 1rem;
    flex: 1; text-align: center; display: flex; flex-direction: column;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); backdrop-filter: blur(5px);
}
.stat-val { font-size: 2rem; font-weight: 800; color: white; margin-bottom: 0.25rem; }
.stat-label { font-size: 0.75rem; color: #dbeafe; }

/* Right Grid */
.benefits-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.benefit-card {
    background: #f0f6ff; border-radius: 20px; padding: 2.5rem 2rem 2rem 2.5rem;
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.bcard-num {
    position: absolute; top: 1.5rem; right: 2rem;
    font-size: 3.5rem; font-weight: 800; color: #bad4f5; line-height: 1;
}
.bcard-icon { font-size: 1.8rem; margin-bottom: 2rem; }
.benefit-card h4 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.75rem; }
.benefit-card p { font-size: 1rem; color: #64748b; line-height: 1.5; margin-bottom: 2rem; }
.bcard-line {
    margin-top: auto; width: 30px; height: 3px; background: #3b82f6; border-radius: 3px;
}

@media (max-width: 1024px) {
    .i3dp-benefits-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .benefits-grid { grid-template-columns: 1fr; }
}

/* Certification & Outcomes Section */
.i3dp-cert-section { padding: 6rem 2rem; background: #f8fafc; color: #0f172a; }
.i3dp-cert-container { max-width: 1200px; margin: 0 auto; }

.i3dp-cert-header { text-align: center; margin-bottom: 4rem; }
.i3dp-cert-kicker { display: block; font-size: 0.85rem; font-weight: 800; color: #3b82f6; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.75rem; }
.i3dp-cert-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.i3dp-cert-header p { font-size: 1.15rem; color: #64748b; margin: 0; max-width: 800px; margin: 0 auto; }

.i3dp-cert-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }

/* Left Pathway */
.cert-pathway { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.cert-pathway::before {
    content: ''; position: absolute; left: 1.2rem; top: 2rem; bottom: 3rem;
    width: 2px; background: linear-gradient(to bottom, #cbd5e1, #93c5fd, #a855f7);
    z-index: 0;
}
.path-step { display: flex; align-items: center; gap: 1.5rem; position: relative; z-index: 1; }
.path-icon {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: white;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); font-size: 1.2rem; flex-shrink: 0;
}
.icon-final { background: #6d28d9; }

.path-card {
    background: white; border-radius: 12px; padding: 1.25rem 1.5rem;
    flex-grow: 1; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.card-final { background: #f5f3ff; box-shadow: 0 4px 20px rgba(109,40,217,0.1); }
.card-final .path-text h4, .card-final .path-text p { color: #6d28d9; }

.path-text h4 { font-size: 1.05rem; font-weight: 800; color: #0f172a; margin-bottom: 0.2rem; }
.path-text p { font-size: 0.85rem; color: #64748b; margin: 0; }

.path-line { width: 30px; height: 4px; border-radius: 4px; }
.line-gray { background: #94a3b8; }
.line-light-blue { background: #60a5fa; }
.line-blue { background: #3b82f6; }
.line-light-purple { background: #a855f7; }
.line-purple { background: #8b5cf6; }
.line-deep-purple { background: #6d28d9; }

/* Right Content */
.cert-right { display: flex; flex-direction: column; gap: 1.5rem; }

.cert-award-card {
    position: relative; background: white; border-radius: 20px;
    padding: 3rem 2rem; text-align: center;
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.1);
}
.cert-award-card::before {
    content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px;
    background: linear-gradient(135deg, #3b82f6, #a855f7);
    border-radius: 23px; z-index: 1;
}

.award-icon-wrapper { position: relative; display: inline-block; margin-bottom: 1.5rem; }
.award-icon-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70px; height: 70px; background: #f59e0b; filter: blur(20px); opacity: 0.6;
    border-radius: 50%;
}
.award-icon {
    position: relative; font-size: 2rem; display: flex; align-items: center; justify-content: center;
    width: 70px; height: 70px; background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 50%; box-shadow: 0 4px 10px rgba(217, 119, 6, 0.3);
}

.award-kicker { display: block; font-size: 0.75rem; font-weight: 800; color: #2563eb; letter-spacing: 1px; margin-bottom: 1rem; text-transform: uppercase; }
.cert-award-card h3 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; }
.award-desc { font-size: 1rem; color: #64748b; margin-bottom: 1.5rem; }
.award-divider { width: 80%; height: 1px; background: #e2e8f0; margin: 0 auto 1.5rem auto; }
.award-sub { font-size: 0.85rem; color: #64748b; margin-bottom: 0.25rem; }
.award-program { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 2rem; }

.award-badges { display: flex; justify-content: center; gap: 1rem; }
.a-badge {
    width: 35px; height: 35px; border-radius: 50%; background: #f8fafc;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 1rem;
}

/* Stats grid */
.cert-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cstat-card { background: white; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.cstat-val { font-size: 1.8rem; font-weight: 800; background: linear-gradient(135deg, #3b82f6, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.25rem; }
.cstat-label { font-size: 0.85rem; color: #64748b; }

@media (max-width: 1024px) {
    .i3dp-cert-content { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .cert-stats { grid-template-columns: 1fr; }
    .path-card { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* FAQ Section */
.i3dp-faq-section { padding: 6rem 2rem; background: #ffffff; color: #0f172a; }
.i3dp-faq-container { max-width: 900px; margin: 0 auto; }

.i3dp-faq-header { text-align: center; margin-bottom: 2.5rem; }
.i3dp-faq-kicker { display: block; font-size: 0.85rem; font-weight: 800; color: #a855f7; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.75rem; }
.i3dp-faq-header h2 { font-size: 2.8rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.i3dp-faq-header p { font-size: 1.05rem; color: #64748b; margin: 0; }

.i3dp-faq-list { display: flex; flex-direction: column; gap: 1rem; }


/* CTA Section */
.i3dp-cta-section {
    position: relative; padding: 7rem 2rem; overflow: hidden;
    background: linear-gradient(135deg, #0a2559, #2343a4, #531885);
    color: white; text-align: center;
}
.i3dp-cta-container { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

.cta-floating { position: absolute; font-size: 2.5rem; opacity: 0.15; z-index: 1; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.cta-f1 { top: 25%; left: 12%; transform: rotate(-15deg); }
.cta-f2 { top: 12%; right: 25%; transform: rotate(10deg); }
.cta-f3 { bottom: 15%; left: 22%; transform: rotate(-5deg); }
.cta-f4 { bottom: 20%; right: 18%; transform: rotate(15deg); }

.cta-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.4rem 1.25rem; border-radius: 50px; font-size: 0.85rem; font-weight: 600;
    margin-bottom: 2rem; backdrop-filter: blur(5px);
}
.pulse-dot {
    width: 8px; height: 8px; background: #10b981; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.i3dp-cta-section h2 { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; color: white; }
.highlight-text {
    background: linear-gradient(90deg, #93c5fd, #e9d5ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

.i3dp-cta-section p {
    font-size: 1.15rem; color: #cbd5e1; line-height: 1.6; max-width: 750px; margin: 0 auto 3rem auto;
}

.cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cta-btn {
    padding: 1rem 2rem; border-radius: 50px; font-weight: 700; font-size: 1rem;
    text-decoration: none; transition: transform 0.2s, box-shadow 0.2s;
}
.cta-btn:hover { transform: translateY(-3px); }

.btn-white { background: white; color: #1d4ed8; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.btn-white:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.15); }

.btn-outline { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: white; backdrop-filter: blur(5px); }
.btn-outline:hover { background: rgba(255,255,255,0.2); }

.btn-gradient { background: linear-gradient(135deg, #a855f7, #6366f1); color: white; border: none; }
.btn-gradient:hover { box-shadow: 0 10px 20px rgba(168, 85, 247, 0.4); }

@media (max-width: 768px) {
    .i3dp-cta-section h2 { font-size: 2.5rem; }
    .cta-buttons { flex-direction: column; width: 100%; max-width: 350px; margin: 0 auto; }
}

/* ==========================================
   SML STYLES
   ========================================== */

/* SML Hero Section */
.sml-hero-section {
    background-color: #0D1533; /* Dark navy */
    color: white;
    padding: 2rem 0rem 0rem 2rem;
    overflow: hidden;
}

.sml-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

/* Left Text Area */
.sml-hero-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #10b981;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}
.sml-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
}
.text-green { color: #10b981; }
.sml-desc {
    font-size: 1.15rem;
    color: #94a3b8;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 90%;
}

.sml-actions { display: flex; gap: 1rem; margin-bottom: 4rem; }
.sml-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 1rem 2rem; border-radius: 12px; font-weight: 700; font-size: 1rem;
    text-decoration: none; transition: all 0.3s;
}
.btn-blue { background: #3b82f6; color: white; border: 1px solid #3b82f6; }
.btn-blue:hover { background: #2563eb; }
.btn-dark-outline { background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.2); }
.btn-dark-outline:hover { background: rgba(255,255,255,0.1); }

.sml-stats { display: flex; gap: 2.5rem; }
.sml-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-highlight { font-size: 1.35rem; font-weight: 800; color: #10b981; }
.stat-sub { font-size: 0.7rem; color: #64748b; letter-spacing: 1px; }

/* Right Visual Area */
.sml-hero-visual {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    cursor: crosshair;
}

.sml-grid-container {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
}

.sml-bg-img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; position: absolute; top: 0; left: 0; z-index: 1;
}

.sml-grid-tiles {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 1fr);
    z-index: 2;
}

.s-tile {
    width: 100%; height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    transform-style: preserve-3d;
}

.t-blue { background: rgba(59, 130, 246, 0.75); }
.t-transparent { background: transparent; }

/* Jumbling Hover Effect */
.sml-hero-visual:hover .t-blue {
    opacity: 0;
    transform: rotateY(180deg) scale(0.85);
}
.sml-hero-visual:hover .t-transparent {
    background: rgba(59, 130, 246, 0.2);
}

/* Floating Cards */
.sml-float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1.25rem 2rem;
    border-radius: 16px;
    z-index: 5;
    display: flex; flex-direction: column; gap: 0.25rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    pointer-events: none; /* Let hovers pass through */
}
.float-val { font-size: 2.2rem; font-weight: 800; color: #10b981; line-height: 1; margin-bottom: 0.25rem; }
.float-label { font-size: 1rem; color: white; font-weight: 600; }

.float-top { top: 25%; left: -10%; }
.float-bottom { bottom: 15%; right: 10%; }

@media (max-width: 1024px) {
    .sml-hero-container { grid-template-columns: 1fr; gap: 6rem; }
    .sml-title { font-size: 3.5rem; }
    .float-top { left: 5%; }
    .sml-hero-visual { max-width: 600px; margin: 0 auto; }
}

/* Vision & Mission Section (SML) */
.sml-vm-section { padding: 6rem 2rem; background: #fafbfc; color: #0f172a; }
.sml-vm-container { max-width: 1200px; margin: 0 auto; }

.sml-vm-header { margin-bottom: 3rem; }
.sml-vm-kicker { display: inline-block; background: #eef2ff; color: #4f46e5; padding: 0.35rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem; }
.sml-vm-header h2 { font-size: 3rem; font-weight: 800; color: #0f172a; margin: 0; }

.sml-vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

.sml-vm-card {
    background: white; border-radius: 20px; padding: 3rem 2.5rem;
    position: relative; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.card-vision { border: 1px solid #e0e7ff; }
.card-mission { border: 1px solid #d1fae5; }

/* Background shapes */
.vm-bg-shape { position: absolute; width: 250px; height: 250px; border-radius: 50%; z-index: 0; pointer-events: none; }
.v-shape-top { top: -100px; right: -50px; background: #e0e7ff; opacity: 0.8; }
.v-shape-bottom { bottom: -100px; left: -100px; background: #e0e7ff; opacity: 0.6; }
.m-shape-top { top: -100px; right: -50px; background: #d1fae5; opacity: 0.8; }
.m-shape-bottom { bottom: -100px; left: -100px; background: #d1fae5; opacity: 0.6; }

.vm-card-header { position: relative; z-index: 10; display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.vm-icon {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.icon-vision { background: #e0e7ff; color: #4f46e5; }
.icon-mission { background: #d1fae5; color: #059669; }

.vm-title { font-size: 1.1rem; font-weight: 800; letter-spacing: 1px; margin: 0; }
.title-vision { color: #4f46e5; }
.title-mission { color: #059669; }

.vm-p-main { position: relative; z-index: 10; font-size: 1.15rem; color: #1e293b; line-height: 1.6; font-weight: 500; margin-bottom: 2rem; }
.text-highlight { font-weight: 800; }
.highlight-vision { color: #4f46e5; }
.highlight-mission { color: #059669; }

.vm-p-sub { position: relative; z-index: 10; font-size: 1rem; color: #64748b; line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
    .sml-vm-grid { grid-template-columns: 1fr; }
}

/* SML Framework Section */
.sml-framework-section {
    position: relative;
    background-color: #040b16; 
    color: white;
    padding: 8rem 2rem;
    overflow: hidden;
}

.sml-framework-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

/* Common elements */
.sml-pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.03);
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2.5rem;
}
.dot { width: 8px; height: 8px; border-radius: 50%; }
.red-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.green-dot { background: #10b981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }

.sml-fw-title { font-size: 3.2rem; font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; }
.sml-fw-desc { font-size: 1.1rem; color: #94a3b8; line-height: 1.7; margin-bottom: 3rem; max-width: 90%; }

/* Left Column: Challenge Grid */
.challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 3rem; }
.c-card {
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.02);
    padding: 1.5rem;
    border-radius: 12px;
    transition: background 0.3s;
}
.c-card:hover { background: rgba(255,255,255,0.05); }
.c-card h4 { font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 0.75rem; color: #e2e8f0; }
.c-card p { font-size: 1rem; color: #94a3b8; margin: 0; line-height: 1.5; }

/* Challenge Image Box */
.challenge-image-box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.challenge-image-box img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; flex-grow: 1; min-height: 300px;
}
.challenge-quote {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(4, 11, 22, 0.95) 20%, rgba(4, 11, 22, 0));
    padding: 3rem 2rem 1.5rem 2rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
}

/* Right Column: Solution Timeline */
.solution-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
.solution-timeline::before {
    content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px;
    width: 2px; background: rgba(255,255,255,0.1);
}

.st-item { display: flex; gap: 1.5rem; position: relative; z-index: 2; }
.st-indicator {
    width: 40px; height: 40px; border-radius: 50%;
    background: #10b981; color: #040b16; font-weight: 800; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}
.st-card {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.3), rgba(15, 23, 42, 0.5));
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 1.5rem; border-radius: 12px; flex-grow: 1;
    backdrop-filter: blur(10px);
}
.st-card h4 { font-size: 0.85rem; font-weight: 800; letter-spacing: 1.5px; color: #60a5fa; margin-bottom: 0.75rem; text-transform: uppercase; }
.st-card p { font-size: 1rem; color: #94a3b8; margin: 0; line-height: 1.5; }
.st-card p strong { color: white; display: block; margin-bottom: 0.2rem; }

/* Program Outcomes Block */
.solution-outcomes {
    border: 1px solid rgba(59, 130, 246, 0.3);
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    padding: 2.5rem;
    backdrop-filter: blur(10px);
}
.outcomes-title { font-size: 1rem; font-weight: 800; color: #10b981; letter-spacing: 1.5px; margin-bottom: 1.5rem; }
.outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; }
.o-pill {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.15);
    padding: 1rem; border-radius: 8px; font-size: 0.9rem; color: #e2e8f0;
}
.outcomes-btn {
    display: block; width: 100%; text-align: center;
    background: #2563eb; color: white; font-weight: 700;
    padding: 1.25rem; border-radius: 8px; text-decoration: none;
    transition: background 0.2s; font-size: 1.05rem;
}
.outcomes-btn:hover { background: #1d4ed8; }

@media (max-width: 1024px) {
    .sml-framework-container { grid-template-columns: 1fr; gap: 5rem; }
    .sml-fw-title { font-size: 2.8rem; }
}
@media (max-width: 768px) {
    .challenge-grid, .outcomes-grid { grid-template-columns: 1fr; }
}

.sml-col-challenge { display: flex; flex-direction: column; }

/* SML Methodologies Section */
.sml-meth-section { padding: 6rem 2rem; background: #f8fafc; color: #0f172a; overflow: hidden; }
.sml-meth-container { max-width: 1400px; margin: 0 auto; }

.sml-meth-header { text-align: center; margin-bottom: 4rem; }
.sml-meth-kicker { display: inline-block; background: #e0e7ff; color: #4338ca; padding: 0.35rem 1.25rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.25rem; }
.sml-meth-header h2 { font-size: 3.2rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.text-gradient { background: linear-gradient(90deg, #3b82f6, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sml-meth-header p { font-size: 1.15rem; color: #64748b; line-height: 1.6; margin: 0; }

.sml-meth-layout { display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; }

.meth-col { display: flex; flex-direction: column; justify-content: space-between; height: 500px; }

.meth-item { display: flex; gap: 1.25rem; align-items: flex-start; }
.item-left { text-align: left; justify-content: flex-start; }
.item-right { text-align: left; justify-content: flex-start; }

/* The 'push-out' class creates the curved effect around the circle */



.meth-num { font-size: 3.5rem; font-weight: 800; color: #2563eb; line-height: 0.8; }
.meth-text h4 { font-size: 1.1rem; font-weight: 800; color: #1e293b; margin-bottom: 0.25rem; }
.meth-text p { font-size: 0.9rem; color: #64748b; margin: 0; line-height: 1.4; max-width: 320px; }

/* Center Graphic */
.meth-center { position: relative; width: 450px; height: 450px; flex-shrink: 0; margin: 0 1rem; }

.meth-blob {
    width: 100%; height: 100%;
    background: #1e293b; /* Dark navy */
    border-radius: 54% 46% 38% 62% / 47% 61% 39% 53%; /* Organic blob shape instead of perfect circle */
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; /* Clips the lines to the blob edge */
}

/* Dividing Lines */
.m-line { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.2); }
.line-1 { transform: translateY(-50%) rotate(0deg); }
.line-2 { transform: translateY(-50%) rotate(45deg); }
.line-3 { transform: translateY(-50%) rotate(90deg); }
.line-4 { transform: translateY(-50%) rotate(135deg); }

/* Inner Image Container */
.m-inner-img {
    position: absolute;
    width: 260px; height: 260px;
    background: white;
    border-radius: 41% 59% 49% 51% / 54% 45% 55% 46%; /* Inner blob shape */
    z-index: 5;
    padding: 8px; /* Creates white border effect */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.m-inner-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* Radial Icons (Green) */
.m-icon {
    position: absolute; top: 50%; left: 50%;
    color: #10b981; font-size: 1.5rem; font-weight: bold;
    z-index: 2;
    /* Basic trick: translate to center, rotate, move outwards, rotate back */
}
.m-icon-1 { transform: translate(-50%, -50%) rotate(22.5deg) translateY(-175px) rotate(-22.5deg); }
.m-icon-2 { transform: translate(-50%, -50%) rotate(67.5deg) translateY(-175px) rotate(-67.5deg); }
.m-icon-3 { transform: translate(-50%, -50%) rotate(112.5deg) translateY(-175px) rotate(-112.5deg); }
.m-icon-4 { transform: translate(-50%, -50%) rotate(157.5deg) translateY(-175px) rotate(-157.5deg); }
.m-icon-5 { transform: translate(-50%, -50%) rotate(202.5deg) translateY(-175px) rotate(-202.5deg); }
.m-icon-6 { transform: translate(-50%, -50%) rotate(247.5deg) translateY(-175px) rotate(-247.5deg); }
.m-icon-7 { transform: translate(-50%, -50%) rotate(292.5deg) translateY(-175px) rotate(-292.5deg); }
.m-icon-8 { transform: translate(-50%, -50%) rotate(337.5deg) translateY(-175px) rotate(-337.5deg); }

@media (max-width: 1200px) {
    .sml-meth-layout { grid-template-columns: 1fr; gap: 3.5rem; }
    .meth-center { margin: 0 auto; order: -1; }
    .meth-col { height: auto; gap: 2rem; }
    .item-left { text-align: left; justify-content: flex-start; flex-direction: row-reverse; }
    .item-left.push-out { margin-right: 0; }
    .item-right.push-out { margin-left: 0; }
    .meth-text { max-width: 100%; }
}

/* Specific Curve Positioning */
.item-left-08 { transform: translateX(5rem); }
.item-left-07 { transform: translateX(1.5rem); }
.item-left-06 { transform: translateX(-1.5rem); }
.item-left-05 { transform: translateX(4rem); }

.item-right-01 { transform: translateX(-5rem); }
.item-right-02 { transform: translateX(-1.5rem); }
.item-right-03 { transform: translateX(1.5rem); }
.item-right-04 { transform: translateX(-4rem); }

@media (max-width: 1200px) {
    .item-left-08, .item-left-07, .item-left-06, .item-left-05,
    .item-right-01, .item-right-02, .item-right-03, .item-right-04 {
        transform: none !important;
    }
}

/* Why Choose EKSAQ Section */
.sml-why-section { padding: 8rem 2rem; background: #f8fafc; color: #0f172a; }
.sml-why-container { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: center; }

/* Left Side */
.sml-why-pill { display: inline-block; background: #e0e7ff; color: #4338ca; padding: 0.35rem 1.25rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.5rem; }
.sml-why-title { font-size: 3.5rem; font-weight: 800; color: #0f172a; margin-bottom: 2rem; line-height: 1.1; letter-spacing: -1px; }
.sml-why-desc { font-size: 1.15rem; color: #64748b; line-height: 1.7; margin: 0; max-width: 95%; }

/* Right Side Grid */
.sml-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.why-card { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.why-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
.why-icon-wrap { width: 50px; height: 50px; background: #f1f5f9; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.why-icon { font-size: 1.25rem; color: #334155; }
.why-card h4 { font-size: 1.05rem; font-weight: 800; color: #1e293b; margin-bottom: 1rem; }
.why-card p { font-size: 1rem; color: #64748b; line-height: 1.6; margin: 0; }

@media (max-width: 1024px) {
    .sml-why-container { grid-template-columns: 1fr; gap: 3.5rem; }
    .sml-why-title { font-size: 3rem; }
}
@media (max-width: 768px) {
    .sml-why-grid { grid-template-columns: 1fr; }
}

/* NEW SML Pathways Section (Forced Override) */
.sml-pathways-section {
    font-family: 'Outfit', sans-serif; padding: 6rem 2rem; background: #f4f7fb; color: #0f172a; }
.sml-pathways-container { max-width: 1400px; margin: 0 auto; }

/* Header & Toggle */
.pathways-header { text-align: center; margin-bottom: 5rem; }
.sml-pill-blue { display: inline-block; background: #e0e7ff; color: #4338ca; padding: 0.35rem 1.25rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 1.5rem; }
.pathways-header h2 { font-size: 3.5rem; font-weight: 800; color: #1e293b; line-height: 1.2; margin-bottom: 2.5rem; letter-spacing: -1px; }
.text-blue-gradient { color: #2563eb; }
.text-green-gradient { background: linear-gradient(90deg, #0ea5e9, #10b981); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.pathways-toggle-wrap { display: flex; justify-content: center; }
.pathways-toggle { background: white; padding: 0.35rem; border-radius: 50px; display: inline-flex; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.toggle-btn { background: transparent; border: none; padding: 1rem 2.5rem; border-radius: 50px; font-size: 1rem; font-weight: 700; color: #2563eb; cursor: pointer; transition: all 0.3s ease; }
.toggle-btn.active { background: #2563eb; color: white; box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3); }

/* Content Layout */
.pathway-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3.5rem; align-items: start; animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Left Content */
.pathway-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 1.5rem; }
.pill-green { background: #dcfce7; color: #166534; }
.pill-blue { background: #e0e7ff; color: #3730a3; }
.pathway-left h3 { font-size: 2.4rem; font-weight: 800; color: #0f172a; margin-bottom: 1.5rem; line-height: 1.2; letter-spacing: -0.5px; }
.pathway-left p { font-size: 1.1rem; color: #64748b; line-height: 1.7; margin: 0; }

/* Right Content (List Grid) */
.pathway-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.p-item { background: white; border: 1px solid rgba(0,0,0,0.04); border-radius: 12px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; font-size: 1rem; font-weight: 700; color: #1e293b; box-shadow: 0 4px 15px rgba(0,0,0,0.02); transition: transform 0.2s; }
.p-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.04); }

/* Icons */
.p-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; color: white; flex-shrink: 0; }
.icon-blue { background: #2563eb; }
.icon-green { background: #10b981; }

@media (max-width: 1024px) {
    .pathway-content { grid-template-columns: 1fr; gap: 3rem; }
    .pathways-header h2 { font-size: 2.8rem; }
}
@media (max-width: 768px) {
    .pathway-list { grid-template-columns: 1fr; }
    .pathways-toggle { flex-direction: column; border-radius: 16px; padding: 0.5rem; }
    .toggle-btn { border-radius: 12px; }
}

/* NEW Product Screenshots Section (Forced Override) */
.sml-screenshots-section {
    font-family: 'Outfit', sans-serif; padding: 6rem 2rem; background: #f4f7fb; }
.sml-screenshots-container { max-width: 1400px; margin: 0 auto; }
.sml-screenshots-container h2 { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 2rem; text-align: center; }

/* The gray background box behind the grid */
.sml-screenshots-bg-box {
    background-color: #e2e8f0; /* Light gray background */
    padding: 3rem;
    border-radius: 8px;
}

.sml-screenshots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.screenshot-box { 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
    background: white;
}
.hover-color-img {
    width: 100%; 
    height: auto; 
    display: block;
    /* Removed the grayscale filter completely! Images are full color now. */
}

@media (max-width: 1024px) {
    .sml-screenshots-grid { grid-template-columns: 1fr; }
    .sml-screenshots-bg-box { padding: 1.5rem; }
}

/* NEW SML Benefits Section */
.sml-benefits-section { padding: 8rem 2rem; background: #f8fafc; color: #0f172a; }
.sml-benefits-container { max-width: 1400px; margin: 0 auto; }

.sml-benefits-header { text-align: center; margin-bottom: 4rem; }
.sml-benefits-header h2 { font-size: 3.2rem; font-weight: 800; color: #1e293b; margin-bottom: 1.5rem; letter-spacing: -1px; }
.sml-benefits-header p { font-size: 1.15rem; color: #64748b; line-height: 1.6; margin: 0 auto; max-width: 800px; }

.sml-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

.ben-card { background: white; padding: 2.5rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.ben-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }

.ben-icon-wrap { width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; font-size: 1.3rem; }
.ben-tag { display: inline-block; padding: 0.35rem 0.8rem; border-radius: 50px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.25rem; }

.ben-card h4 { font-size: 1.15rem; font-weight: 800; color: #1e293b; margin-bottom: 1rem; }
.ben-card p { font-size: 1rem; color: #64748b; line-height: 1.6; margin: 0; }

/* Colors */
.bg-blue-light { background: #e0e7ff; } .text-blue { color: #4338ca; } .bg-blue-lighter { background: #eff6ff; }
.bg-purple-light { background: #f3e8ff; } .text-purple { color: #7e22ce; } .bg-purple-lighter { background: #faf5ff; }
.bg-cyan-light { background: #cffafe; } .text-cyan { color: #0e7490; } .bg-cyan-lighter { background: #ecfeff; }
.bg-green-light { background: #dcfce7; } .text-green { color: #15803d; } .bg-green-lighter { background: #f0fdf4; }
.bg-orange-light { background: #ffedd5; } .text-orange { color: #c2410c; } .bg-orange-lighter { background: #fff7ed; }

/* Special Card */
.ben-card-special { background: linear-gradient(135deg, #091024, #0b1a5e); padding: 3rem; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; justify-content: center; }
.ben-special-icon-wrap { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 2.5rem; font-size: 1.5rem; color: white; }
.ben-card-special h3 { font-size: 1.55rem; font-weight: 800; color: white; margin-bottom: 0.75rem; line-height: 1.4; letter-spacing: -0.5px; }
.ben-card-special .text-green-special { color: #34d399; }

@media (max-width: 1024px) { .sml-benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sml-benefits-grid { grid-template-columns: 1fr; } }

/* NEW SML FAQ Section */
.sml-faq-section {
    font-family: 'Outfit', sans-serif; padding: 4rem 2rem 4rem 2rem; background: #f4f7fb; color: #0f172a; }
.sml-faq-container { max-width: 900px; margin: 0 auto; }

.sml-faq-header { text-align: center; margin-bottom: 3.5rem; }
.sml-faq-header h2 { font-size: 3.5rem; font-weight: 800; color: #0f172a; margin-top: 1.5rem; letter-spacing: -1px; }

.sml-faq-list { display: flex; flex-direction: column; gap: 1rem; }
.sml-faq-item { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sml-faq-item:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,0.05); }

.sml-faq-btn { width: 100%; text-align: left; background: none; border: none; padding: 1.5rem 2rem; font-size: 1.05rem; font-weight: 700; color: #1e293b; cursor: pointer; transition: color 0.2s; }
.sml-faq-btn:hover { color: #2563eb; }

@media (max-width: 768px) {
    .sml-faq-header h2 { font-size: 2.8rem; }
    .sml-faq-btn { padding: 1.25rem 1.5rem; font-size: 1rem; }
}

/* CS Page Specific Footer Override */
.footer-section.core-skills-footer {
  padding-top: 160px !important;
}

/* ==========================================
   CAREERS PAGE STYLES
   ========================================== */

/* Careers Hero */
.careers-hero {
    position: relative;
    width: 100%;
    min-height: 550px;
    background-image: url("assets/careers-hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Fallback image name */
    display: flex;
    align-items: center;
    padding: 2rem 5%;
    background-color: #0f172a; /* Fallback color */
}
.careers-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
}
.careers-hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    color: white;
    margin-left: 5%;
}
.careers-pill {
    display: inline-block;
    padding: 0.5rem 1.75rem;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 2rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}
.careers-hero h1 { font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem; letter-spacing: -1px; }
.careers-hero p { font-size: 1.15rem; line-height: 1.7; color: rgba(255,255,255,0.9); }

/* Positions Section */
.careers-positions-section {
    position: relative;
    z-index: 3;
    margin-top: -60px;
    padding: 0 5% 6rem 5%;
}
.careers-positions-container {
    background: white;
    border-radius: 20px;
    padding: 3rem 4rem;
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
    max-width: 1300px;
    margin: 0 auto;
}
.careers-positions-header { margin-bottom: 2.5rem; }
.careers-positions-header h2 { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.25rem; }
.careers-positions-header p { color: #64748b; font-size: 1.05rem; margin: 0; }

/* Filters */
.careers-filters {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    align-items: center;
}
.filter-search {
    flex: 2;
    position: relative;
}
.filter-search .search-icon {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}
.filter-search input {
    width: 100%;
    padding: 1rem 1rem 1rem 3.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    color: #0f172a;
    transition: border-color 0.2s;
}
.filter-search input:focus { outline: none; border: none !important; }

.filter-dropdown {
    flex: 1;
    position: relative;
}
.filter-dropdown select {
    width: 100%;
    padding: 1rem 3rem 1rem 1.5rem;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    font-size: 1rem;
    color: #334155;
    appearance: none;
    background-color: white;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2364748b%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-position: right 1.25rem top 50%;
    background-size: 0.65rem auto;
    cursor: pointer;
    background-repeat: no-repeat;
}
.btn-clear-all {
    padding: 1rem 2.5rem;
    background: #0f172a;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-clear-all:hover { background: #1e293b; }

/* Job Cards Grid */
.careers-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.job-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    background: white;
    transition: transform 0.2s, box-shadow 0.2s;
}
.job-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
    border: none !important;
}
.job-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.job-dept { color: #64748b; font-size: 1rem; font-weight: 500; }
.job-type-pill { color: #2563eb; background: #eff6ff; border: 1px solid #bfdbfe; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }

.job-title { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 1.25rem; }

.job-meta { display: flex; gap: 1.5rem; color: #64748b; font-size: 1rem; font-weight: 500; margin-bottom: 1.5rem; }
.job-meta span { display: flex; align-items: center; gap: 0.5rem; }

.job-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.skill-pill { background: #f8fafc; color: #334155; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; }
.skill-more { color: #2563eb; font-size: 0.85rem; font-weight: 800; align-self: center; margin-left: 0.25rem; }

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}
.job-date { color: #64748b; font-size: 0.9rem; font-weight: 500; }
.btn-apply { background: #2563eb; color: white; padding: 0.75rem 2.5rem; border-radius: 8px; font-weight: 700; font-size: 1rem; border: none; cursor: pointer; transition: background 0.2s; }
.btn-apply:hover { background: #1d4ed8; }

@media (max-width: 1024px) {
    .careers-grid { grid-template-columns: 1fr; }
    .careers-filters { flex-wrap: wrap; }
    .filter-search { flex: 100%; }
    .filter-dropdown { flex: 1; }
}
@media (max-width: 768px) {
    .careers-hero h1 { font-size: 2.5rem; }
    .careers-positions-container { padding: 2rem; }
    .careers-filters { flex-direction: column; gap: 1rem; }
    .filter-dropdown, .btn-clear-all { width: 100%; }
    .job-meta { flex-direction: column; gap: 0.75rem; }
}

/* ==========================================
   JOB DETAILS PAGE STYLES
   ========================================== */

/* Job Hero */
.job-hero {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-image: url("assets/careers-hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; /* Reusing hero or fallback */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    background-color: #0f172a;
}
.job-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.65); /* Dark overlay */
    z-index: 1;
}
.job-hero-content {
    position: relative;
    z-index: 2;
    color: white;
}
.job-pill {
    display: inline-block;
    padding: 0.35rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.7);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
}
.job-hero h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; color: white !important; }
.job-meta-hero { display: flex; gap: 2rem; justify-content: center; color: rgba(255,255,255,0.9); font-size: 1.05rem; font-weight: 500; }
.job-meta-hero span { display: flex; align-items: center; gap: 0.5rem; }

/* Content Section */
.job-content-section {
    padding: 4rem 5% 8rem 5%;
    background: #f8fafc;
}
.job-content-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 3.5rem;
}

/* Left Column */
.job-details-left h2 { font-size: 1.75rem; font-weight: 800; color: #0f172a; margin-bottom: 1.25rem; margin-top: 2rem; }
.job-details-left h2:first-child { margin-top: 0; }
.job-details-left p { font-size: 1.05rem; color: #475569; line-height: 1.8; margin-bottom: 1.5rem; }

.job-responsibilities { list-style: none; padding: 0; margin-bottom: 2rem; }
.job-responsibilities li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
}
.job-responsibilities li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #64748b;
    font-size: 1.5rem;
    line-height: 1;
    top: -2px;
}

/* Right Column (Form) */
.job-apply-right { position: relative; }
.job-apply-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #e2e8f0;
    position: sticky;
    top: 100px;
}
.form-section-title { font-size: 1.15rem; font-weight: 800; color: #1e293b; margin-bottom: 1.5rem; margin-top: 2rem; }
.form-section-title:first-child { margin-top: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; font-size: 0.95rem; font-weight: 700; color: #334155; margin-bottom: 0.6rem; }
.form-group .req { color: #ef4444; }
.form-group input, .form-group select {
    width: 100%;
    padding: 0.95rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
    color: #0f172a;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus { outline: none; border: none !important; }

.resume-upload-box {
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 2.5rem 1rem;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.resume-upload-box:hover { background: #eff6ff; border: none !important; }
.resume-upload-box input[type="file"] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.upload-text { font-size: 1rem; font-weight: 700; color: #1e293b; margin-top: 1rem; margin-bottom: 0.25rem; }
.upload-hint { font-size: 0.8rem; color: #64748b; }

.btn-submit-app {
    width: 100%;
    background: #2563eb;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.2s;
}
.btn-submit-app:hover { background: #1d4ed8; }

@media (max-width: 900px) {
    .job-content-container { grid-template-columns: 1fr; }
    .job-apply-card { position: relative; top: 0; }
}
@media (max-width: 768px) {
    .job-hero h1 { font-size: 2.5rem; }
    .job-meta-hero { flex-direction: column; gap: 1rem; align-items: center; }
    .form-row { grid-template-columns: 1fr; }
    .job-apply-card { padding: 1.5rem; }
}

/* ==========================================
   RESOURCES / SOLUTIONS PAGE STYLES
   ========================================== */

.resources-hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-color: #0b1836; /* Dark navy background */
    padding: 5rem 5%;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Faint grid background */
.resources-grid-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
}

.resources-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

/* Left Content */
.resources-content {
    flex: 1;
    max-width: 550px;
}
.resources-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(16, 185, 129, 0.15); /* Soft green bg */
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #34d399; /* Light green text */
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.resources-content h1 {
    font-size: 4.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}
.resources-content .text-green { color: #34d399; }
.resources-content p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin-bottom: 2.5rem;
}
.btn-book-demo {
    background: #2563eb;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.05rem;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-book-demo:hover { background: #1d4ed8; }


/* Right Visual (Nodes) */
.resources-visual {
    flex: 1;
    position: relative;
    width: 600px;
    height: 600px;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.node-connections {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}
.conn-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1.5;
    stroke-dasharray: 4, 4;
}

/* Center Logo Node */
.node-center {
    position: absolute;
    z-index: 3;
    width: 120px;
    height: 120px;
    background: #020617;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}
.node-center-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.logo-bars { width: 30px; height: 6px; border-radius: 4px; }
.logo-bars:nth-child(1) { background: #38bdf8; width: 20px; align-self: flex-start; }
.logo-bars:nth-child(2) { background: #34d399; width: 30px; }
.logo-bars:nth-child(3) { background: #818cf8; width: 25px; align-self: flex-end; }
.node-center span { color: white; font-weight: 800; font-size: 0.9rem; margin-top: 0.5rem; letter-spacing: 1px; }

/* Orbit Nodes */
.node-orbit {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transform: translate(-50%, -50%);
}
.node-img-wrapper {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 4px;
    background: #0b1836;
}
.node-img-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Specific Positions */
.node-top { top: 8%; left: 50%; }
.node-top-right { top: 25%; left: 80%; }
.node-bottom-right { top: 75%; left: 80%; }
.node-bottom { top: 92%; left: 50%; }
.node-bottom-left { top: 75%; left: 20%; }
.node-top-left { top: 25%; left: 20%; }

/* Colored Borders */
.border-blue { border: 2px solid #3b82f6; }
.border-yellow { border: 2px solid #eab308; }
.border-pink { border: 2px solid #ec4899; }
.border-cyan { border: 2px solid #06b6d4; }
.border-green { border: 2px solid #10b981; }
.border-orange { border: 2px solid #f97316; }

.node-label {
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    font-weight: 600;
    }

@media (max-width: 1024px) {
    .resources-container { flex-direction: column; text-align: center; }
    .resources-content { margin-bottom: 3rem; }
    .resources-content h1 { font-size: 3.5rem; }
}
@media (max-width: 768px) {
    .resources-visual { transform: scale(0.6); margin-top: -80px; margin-bottom: -80px; }
}

/* ==========================================
   STAKEHOLDER SOLUTIONS STYLES
   ========================================== */

.stakeholder-solutions-section {
    background-color: #f8fafc; /* Very light slate/blue */
    padding: 6rem 5%;
}

.stakeholder-solutions-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stakeholder-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem auto;
}

.stakeholder-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.stakeholder-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}
.stakeholder-title .text-blue { color: #2563eb; }

.stakeholder-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
}

/* Solutions Grid */
.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.solution-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.solution-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

.solution-card-img-wrap {
    position: relative;
    width: 100%;
    height: 220px;
}
.solution-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlays */
.solution-card-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 3rem 1.5rem 1.25rem 1.5rem;
}
.solution-card-overlay h3 {
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.overlay-blue { background: linear-gradient(to top, rgba(37, 99, 235, 0.95), transparent); }
.overlay-purple { background: linear-gradient(to top, rgba(147, 51, 234, 0.95), transparent); }
.overlay-green { background: linear-gradient(to top, rgba(16, 185, 129, 0.95), transparent); }
.overlay-cyan { background: linear-gradient(to top, rgba(6, 182, 212, 0.95), transparent); }
.overlay-orange { background: linear-gradient(to top, rgba(234, 88, 12, 0.95), transparent); }
.overlay-pink { background: linear-gradient(to top, rgba(219, 39, 119, 0.95), transparent); }

.solution-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.solution-card-content p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    flex: 1;
}

.solution-link {
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.solution-link:hover { text-decoration: underline; }

.link-blue { color: #2563eb; }
.link-purple { color: #9333ea; }
.link-green { color: #10b981; }
.link-cyan { color: #0891b2; }
.link-orange { color: #ea580c; }
.link-pink { color: #db2777; }

@media (max-width: 1024px) {
    .solutions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .solutions-grid { grid-template-columns: 1fr; }
    .stakeholder-title { font-size: 2.25rem; }
}

/* ==========================================
   INTEGRATED ECOSYSTEM STYLES
   ========================================== */

.integrated-eco-section {
    background-color: #f4f7fb;
    padding: 6rem 5%;
}

.integrated-eco-container {
    max-width: 1400px;
    margin: 0 auto;
}

.integrated-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

.integrated-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.integrated-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}
.gradient-text-blue-green {
    background: linear-gradient(to right, #2563eb, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.integrated-subtitle {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.7;
}

.eco-products-flow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 1rem;
}

.eco-product-card {
    background: white;
    border-radius: 16px;
    padding: 2rem 1rem;
    text-align: center;
    min-width: 170px;
    flex: 1;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(226, 232, 240, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.2s;
}
.eco-product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.06); }

.eco-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.25rem;
}

.eco-product-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.eco-product-card p {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.eco-arrow {
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colors */
.icon-cyan { background: #ecfeff; color: #06b6d4; }
.text-cyan { color: #06b6d4; }

.icon-blue { background: #eff6ff; color: #3b82f6; }
.text-blue { color: #3b82f6; }

.icon-purple { background: #faf5ff; color: #a855f7; }
.text-purple { color: #a855f7; }

.icon-green { background: #f0fdf4; color: #22c55e; }
.text-green { color: #22c55e; }

.icon-orange { background: #fff7ed; color: #f97316; }
.text-orange { color: #f97316; }

.icon-pink { background: #fdf2f8; color: #ec4899; }
.text-pink { color: #ec4899; }

@media (max-width: 1024px) {
    .eco-products-flow { justify-content: flex-start; }
    .eco-product-card { min-width: 200px; }
}

/* ==========================================
   RESOURCES IMPACT SECTION
   ========================================== */
.res-impact-section {
    background-color: #0b1120; /* Very dark navy */
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
}
.res-impact-container {
    max-width: 1300px;
    margin: 0 auto;
}
.res-impact-header {
    text-align: center;
    margin-bottom: 4rem;
}
.res-impact-pill {
    display: inline-block;
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}
.res-impact-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: white;
    margin: 0;
    letter-spacing: -0.5px;
}
.res-text-green { color: #34d399; }

.res-impact-grid {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.res-impact-card {
    background: #1e293b;
    border-radius: 20px;
    padding: 2.5rem 1.5rem;
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}
.res-impact-card:hover { transform: translateY(-5px); }

.res-impact-icon {
    width: 65px;
    height: 65px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}
.bg-blue-dark { background: rgba(59, 130, 246, 0.15); }
.bg-purple-dark { background: rgba(168, 85, 247, 0.15); }
.bg-cyan-dark { background: rgba(6, 182, 212, 0.15); }
.bg-green-dark { background: rgba(34, 197, 94, 0.15); }
.bg-orange-dark { background: rgba(249, 115, 22, 0.15); }

.res-impact-num {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}
.text-blue { color: #3b82f6; }
.text-purple { color: #a855f7; }
.text-cyan { color: #06b6d4; }
.text-green { color: #22c55e; }
.text-orange { color: #f97316; }

.res-impact-label {
    color: #94a3b8;
    font-size: 0.9rem;
    font-weight: 500;
}

@media (max-width: 1024px) {
    .res-impact-grid { grid-template-columns: repeat(3, 1fr); display: grid; }
}
@media (max-width: 768px) {
    .res-impact-grid { grid-template-columns: repeat(2, 1fr); }
    .res-impact-title { font-size: 2.2rem; }
}

/* ==========================================
   IMPLEMENTATION JOURNEY SECTION
   ========================================== */
.res-journey-section {
    background-color: #f8fafc;
    padding: 6rem 5%;
}
.res-journey-container {
    max-width: 1400px;
    margin: 0 auto;
}
.res-journey-header {
    text-align: center;
    margin-bottom: 5rem;
}
.res-journey-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}
.res-journey-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.5px;
}
.res-gradient-scale {
    background: linear-gradient(to right, #0ea5e9, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.res-journey-timeline-wrapper {
    position: relative;
    padding: 2rem 0;
}
.res-journey-line {
    position: absolute;
    top: 55px; /* Center of the 70px icon box + 2rem padding */
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(to right, #2563eb, #34d399);
    z-index: 1;
}

.res-journey-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    overflow-x: auto;
    padding-bottom: 1rem; /* For scrollbar */
}
/* Hide scrollbar for cleaner look if needed */
.res-journey-steps::-webkit-scrollbar { height: 4px; }
.res-journey-steps::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.res-step {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 10px;
}

.res-step-icon {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    background: white;
}
.res-step-icon svg { margin-bottom: 2px; }

/* The alternating styles */
.box-solid {
    background: #1d4ed8;
    color: white;
    box-shadow: 0 4px 15px rgba(29,78,216,0.3);
}
.box-outline {
    background: white;
    color: #1d4ed8;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.res-step-num {
    font-size: 0.75rem;
    font-weight: 800;
}

.res-step-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.5rem;
}
.res-step-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1024px) {
    .res-journey-line { display: none; }
    .res-journey-steps { flex-wrap: nowrap; justify-content: flex-start; }
}

@media (max-width: 768px) {
    .stakeholder-title, .integrated-title {
        white-space: normal;
        font-size: 2rem;
    }
}

/* ==========================================
   EDUCATION CHALLENGES SECTION
   ========================================== */
.res-challenges-section {
    background-color: #f8fafc;
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
}

.res-challenges-container {
    max-width: 1400px;
    margin: 0 auto;
}

.res-challenges-header {
    text-align: center;
    margin-bottom: 4rem;
}

.res-challenges-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.res-challenges-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* Grid Layout */
.res-chal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Header Pills */
.res-chal-header {
    text-align: center;
    padding: 1rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.head-pink { background: #fce7f3; color: #db2777; border: 1px solid #fbcfe8; }
.head-blue { background: #e0e7ff; color: #4f46e5; border: 1px solid #c7d2fe; }
.head-green { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }

/* Data Cells */
.res-chal-cell {
    display: flex;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}
.cell-pink { background: #fdf2f8; border: 1px solid #fce7f3; }
.cell-blue { background: #eff6ff; border: 1px solid #e0e7ff; }
.cell-green { background: #f0fdf4; border: 1px solid #dcfce7; }

/* Icons */
.chal-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 1rem;
    flex-shrink: 0;
}
.icon-pink { color: #f43f5e; background: rgba(244, 63, 94, 0.15); }
.icon-blue { color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.icon-green { color: #10b981; background: rgba(16, 185, 129, 0.15); }

.res-chal-cell strong {
    font-weight: 800;
    color: #0f172a;
}

@media (max-width: 1024px) {
    .res-chal-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .res-chal-header {
        display: none; /* Hide header pills on mobile */
    }
}

/* ==========================================
   FEATURES GRID SECTION
   ========================================== */
.res-features-section {
    background-color: #0b1120;
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
}

.res-features-container {
    max-width: 1400px;
    margin: 0 auto;
}

.res-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.res-feature-card {
    background: #192233;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.05);
}

.res-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

/* Wavy Top Right Image */
.res-feat-img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 180px;
    height: 140px;
    border-bottom-left-radius: 100%;
    overflow: hidden;
    border-left: 6px solid;
    border-bottom: 6px solid;
}
.res-feat-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top right;
}

/* Theme Colors */
.icon-bg-purple { background: rgba(168, 85, 247, 0.15); }
.border-wave-purple { border: none !important; }
.text-purple { color: #a855f7; }
.list-purple li::before { background: #a855f7; }

.icon-bg-orange { background: rgba(249, 115, 22, 0.15); }
.border-wave-orange { border: none !important; }
.text-orange { color: #f97316; }
.list-orange li::before { background: #f97316; }

.icon-bg-green { background: rgba(16, 185, 129, 0.15); }
.border-wave-green { border: none !important; }
.text-green { color: #10b981; }
.list-green li::before { background: #10b981; }

.icon-bg-yellow { background: rgba(234, 179, 8, 0.15); }
.border-wave-yellow { border: none !important; }
.text-yellow { color: #eab308; }
.list-yellow li::before { background: #eab308; }

.icon-bg-blue { background: rgba(59, 130, 246, 0.15); }
.border-wave-blue { border: none !important; }
.text-blue { color: #3b82f6; }
.list-blue li::before { background: #3b82f6; }

.icon-bg-cyan { background: rgba(6, 182, 212, 0.15); }
.border-wave-cyan { border: none !important; }
.text-cyan { color: #06b6d4; }
.list-cyan li::before { background: #06b6d4; }

.feat-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.feat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feat-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: 0.85rem;
    font-size: 0.85rem;
    color: #94a3b8;
    line-height: 1.5;
}

.feat-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

@media (max-width: 1024px) {
    .res-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .res-features-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   SUCCESS STORIES SECTION
   ========================================== */
.res-success-section {
    background-color: #f4f7fb;
    padding: 6rem 5%;
}
.res-success-container {
    max-width: 1400px;
    margin: 0 auto;
}
.res-success-header {
    text-align: center;
    margin-bottom: 4rem;
}
.res-success-pill {
    display: inline-block;
    background: #e0e7ff;
    color: #4f46e5;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}
.res-success-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.5px;
}
.res-success-title .text-blue { color: #2563eb; }

.res-success-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.res-story-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.res-story-img-wrap {
    position: relative;
    height: 220px;
}
.res-story-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.res-story-gradient {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 60%;
}
.grad-blue { background: linear-gradient(to top, rgba(37,99,235,0.9), transparent); }
.grad-purple { background: linear-gradient(to top, rgba(168,85,247,0.9), transparent); }
.grad-green { background: linear-gradient(to top, rgba(22,163,74,0.9), transparent); }

.res-story-tag {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}
.tag-blue { background: #2563eb; }
.tag-purple { background: #a855f7; }
.tag-green { background: #16a34a; }

.res-story-content {
    padding: 2rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.res-story-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1.5rem;
}
.res-stat-block { display: flex; flex-direction: column; }
.res-stat-label { font-size: 0.75rem; color: #64748b; font-weight: 600; margin-bottom: 0.25rem; }
.res-stat-num { font-size: 1.5rem; font-weight: 900; }
.text-slate { color: #475569; }
.res-stat-arrow { font-size: 1.5rem; font-weight: 900; }
.res-stat-desc { font-size: 0.75rem; color: #64748b; line-height: 1.4; border-left: 1px solid #e2e8f0; padding-left: 1rem; margin-left: 0.5rem; }

.res-story-school { font-size: 0.95rem; font-weight: 800; margin-bottom: 0.75rem; }
.res-story-content p { font-size: 0.85rem; color: #64748b; line-height: 1.6; margin: 0; }


/* ==========================================
   FINAL CTA SECTION
   ========================================== */
.res-cta-section {
    background-color: #2563eb; /* Primary Blue */
    padding: 6rem 5%;
}
.res-cta-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.res-cta-pill {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: white;
    padding: 0.4rem 1.25rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
}

.res-cta-title {
    font-size: 4rem;
    font-weight: 900;
    color: white;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}
.text-green-light { color: #6ee7b7; } /* Mint green */

.res-cta-left p {
    color: rgba(255,255,255,0.85);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.res-cta-buttons {
    display: flex;
    gap: 1rem;
}
.res-btn-demo {
    background: #6ee7b7;
    color: #064e3b;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.res-btn-demo:hover { background: #34d399; }

.res-btn-brochure {
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.4);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.2s;
}
.res-btn-brochure:hover { background: rgba(255,255,255,0.1); }

.res-cta-img-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
    border-radius: 24px;
    overflow: hidden;
}
.res-cta-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-float-card {
    position: absolute;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}
.cta-float-card strong { font-size: 1.25rem; font-weight: 900; color: #0f172a; margin-bottom: 0.25rem; }
.cta-float-card span { font-size: 0.75rem; font-weight: 700; color: #64748b; }

.float-top-right {
    top: 2rem; right: 2rem;
    background: #6ee7b7;
}
.float-top-right span { color: #064e3b; }

.float-bottom-left {
    bottom: 2rem; left: 2rem;
}

@media (max-width: 1024px) {
    .res-success-grid { grid-template-columns: 1fr; gap: 2rem; }
    .res-cta-container { grid-template-columns: 1fr; }
    .float-bottom-left { left: 2rem; }
}

.mega-menu-resources-bg {
    background-image: url('assets/mega-menu-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* Faint background if needed */
    background-position: center right;
    /* background-color: rgba(235, 237, 240, 0.95) !important; */
}
/* Ensure the text is highly visible against the background */
.mega-menu-resources-bg .mega-menu-title {
    color: #1e293b;
}
.mega-menu-resources-bg .mega-menu-links a {
    color: #475569;
}
.mega-menu-resources-bg .mega-menu-links a:hover {
    color: #2563eb;
}
.resources-bg{
  background-color: #ffffff;
}
/* ==========================================
   BLOGS PAGE HERO SECTION
   ========================================== */
.blogs-hero-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-image: url('assets/blogs-hero-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
}

.blogs-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Dark gradient overlay that is solid on the left and transparent on the right */
    background: linear-gradient(to right, rgba(9, 11, 28, 1) 0%, rgba(9, 11, 28, 0.95) 40%, rgba(9, 11, 28, 0.4) 100%);
    z-index: 1;
}

.blogs-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 5%;
}

.blogs-hero-content {
    max-width: 600px;
}

.blogs-hero-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
.pill-dot {
    width: 6px;
    height: 6px;
    background-color: #10b981; /* Green dot */
    border-radius: 50%;
    margin-right: 0.5rem;
}

.blogs-hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
    letter-spacing: -1px;
}
.text-blue-bright { color: #3b82f6; }
.text-green-mint { color: #34d399; }

.blogs-hero-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.blogs-hero-btn {
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    background-color: #2563eb;
    border: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.blogs-hero-btn:hover {
    background-color: #1d4ed8;
}

@media (max-width: 768px) {
    .blogs-hero-title { font-size: 2.5rem; }
    .blogs-hero-overlay { background: linear-gradient(to right, rgba(9, 11, 28, 0.95) 0%, rgba(9, 11, 28, 0.8) 100%); }
}

/* ==========================================
   BLOGS ARTICLES GRID SECTION
   ========================================== */
.blogs-articles-section {
    background-color: #f8fafc;
    padding: 5rem 5%;
    font-family: 'Outfit', sans-serif;
}

.blogs-articles-container {
    max-width: 1400px;
    margin: 0 auto;
}

.blogs-articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.blogs-articles-title {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
}

/* Custom Dropdown Filter */
.blogs-filter-wrapper {
    position: relative;
    width: 280px;
}
.blogs-filter-select {
    width: 100%;
    appearance: none;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
    color: #334155;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.blogs-filter-select:focus {
    outline: none;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.filter-arrow {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #94a3b8;
}

/* Grid */
.blogs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.blog-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.blog-img-wrapper {
    position: relative;
    height: 250px;
    width: 100%;
}
.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category Pills */
.blog-category {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: white;
    z-index: 10;
}
.cat-purple { background: #9333ea; }
.cat-orange { background: #ea580c; }
.cat-teal { background: #0d9488; }
.cat-blue { background: #2563eb; }
.cat-green { background: #16a34a; }
.cat-blue-dark { background: #1d4ed8; }

.blog-content {
    position: relative;
    padding: 1.5rem 1.5rem 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.blog-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 1rem 0;
    flex: 1;
}

.blog-meta {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 1rem;
}
.blog-meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.meta-dot {
    margin: 0 0.75rem;
    color: #cbd5e1;
}

.blog-footer {
    display: flex;
    margin-top: auto;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.blog-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}
.avatar-blue { background: #3b82f6; }
.avatar-teal { background: #14b8a6; }
.avatar-cyan { background: #06b6d4; }

.author-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #334155;
}

.blog-read-more {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-read-more:hover {
    color: #1d4ed8;
}

.blogs-load-more {
    text-align: center;
}
.btn-load-more {
    padding: 0.85rem 2.5rem;
    background: #2563eb;
    font-weight: 700;
    border-radius: 8px;
}

@media (max-width: 1024px) {
    .blogs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .blogs-grid { grid-template-columns: 1fr; }
    .blogs-articles-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .blogs-filter-wrapper { width: 100%; }
}

/* ==========================================
   BLOG POST PAGE
   ========================================== */
.post-page {
    background-color: #fafbfd;
    font-family: 'Outfit', sans-serif;
}

/* Post Hero */
.post-hero-section {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-image: url('assets/blog-assessment.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
}
.post-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(9, 11, 60, 0.98) 0%, rgba(9, 11, 60, 0.85) 50%, rgba(9, 11, 60, 0.4) 100%);
    z-index: 1;
}
.post-hero-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
    padding: 3rem 5%;
}

.post-back-btn {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 3rem;
    transition: all 0.2s;
}
.post-back-btn:hover { background: rgba(255,255,255,0.1); color: white; }

.post-meta-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.post-meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
}
.blog-category {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: white;
    z-index: 10;
}

.post-hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.5px;
}

/* Post Body */
.post-body-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 5%;
}

.post-author-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.post-content {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.8;
}
.post-content h2 {
    font-size: 1.4rem;
    font-weight: 800;
    color: #0f172a;
    margin: 2.5rem 0 1rem 0;
}
.post-content p {
    margin-bottom: 1.5rem;
}
.post-list {
    margin: 0 0 2rem 0;
    padding-left: 1.5rem;
}
.post-list li {
    margin-bottom: 1rem;
}
.post-list li strong {
    color: #334155;
}

/* Inline Feature (List next to image) */
.post-inline-feature {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    margin: 2rem 0;
}
.post-inline-feature .post-list {
    flex: 1;
    margin: 0;
}
.inline-img-right {
    width: 300px;
    object-fit: cover;
    height: 300px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    flex-shrink: 0;
    margin-top: 1rem;
}
@media (max-width: 900px) {
    .post-inline-feature { flex-direction: column-reverse; }
    .inline-img-right { width: 100%; margin-top: 0; margin-bottom: 2rem; }
}

/* Key Takeaways Box */
.post-takeaways-box {
    background-color: #f0f7ff;
    border-radius: 16px;
    padding: 2.5rem;
    margin: 3rem 0 5rem 0;
}
.takeaways-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.takeaways-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
}
.takeaways-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.takeaways-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.takeaways-list li:last-child { margin-bottom: 0; }
.takeaways-list li span {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background-color: #34d399;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    margin-top: 2px;
}

/* Related Articles Section */
.post-related-section {
    background-color: #fafbfd;
    padding: 4rem 5% 6rem 5%;
}
.post-related-container {
    max-width: 1200px;
    margin: 0 auto;
}
.post-related-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 2.5rem 0;
}

/* ==========================================
   CASE STUDIES PAGE HERO SECTION
   ========================================== */
.case-hero-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-image: url('assets/case-studies-hero-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    display: flex;
    align-items: center;
    font-family: 'Outfit', sans-serif; /* Global font */
}

.case-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Dark gradient overlay that is solid on the left and transparent on the right */
    background: linear-gradient(to right, rgba(9, 11, 28, 1) 0%, rgba(9, 11, 28, 0.95) 40%, rgba(9, 11, 28, 0.4) 100%);
    z-index: 1;
}

.case-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 5%;
}

.case-hero-content {
    max-width: 700px;
}

.case-hero-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    padding: 0.35rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}
/* .pill-dot is already defined in style.css */

.case-hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    line-height: 1.15;
    margin: 0 0 1.5rem 0;
    letter-spacing: -1px;
}
/* text colors are defined */

.case-hero-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.case-hero-btn {
    padding: 0.85rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    background-color: #2563eb;
    border: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.case-hero-btn:hover {
    background-color: #1d4ed8;
}

@media (max-width: 768px) {
    .case-hero-title { font-size: 2.5rem; }
    .case-hero-overlay { background: linear-gradient(to right, rgba(9, 11, 28, 0.95) 0%, rgba(9, 11, 28, 0.8) 100%); }
}

/* ==========================================
   CASE STUDIES GRID SECTION
   ========================================== */
.cs-grid-section {
    background-color: #f8fafc;
    padding: 5rem 5%;
    font-family: 'Outfit', sans-serif;
}

.cs-grid-container {
    max-width: 1400px;
    margin: 0 auto;
}

.cs-section-title {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 3rem 0;
}

.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.cs-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #f1f5f9;
}
.cs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.cs-img-wrapper {
    position: relative;
    height: 240px;
    width: 100%;
}
.cs-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-category {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: white;
    z-index: 10;
}
.cat-pink { background: #db2777; }

.cs-content {
    position: relative;
    padding: 1.75rem 1.75rem 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cs-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.cs-desc {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    flex: 1;
}

.cs-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
    margin-top: auto;
}

.cs-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
}

.cs-view-link {
    font-size: 0.8rem;
    font-weight: 800;
    color: #2563eb;
    text-decoration: none;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.cs-view-link:hover {
    color: #1d4ed8;
}

@media (max-width: 1024px) {
    .cs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .cs-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   CASE STUDY DETAIL PAGE
   ========================================== */
.study-page {
    background-color: #fafbfd;
    font-family: 'Outfit', sans-serif;
}

/* Study Hero */
.study-hero-section {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
}
.study-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(16, 24, 60, 0.95) 0%, rgba(16, 24, 60, 0.8) 50%, rgba(16, 24, 60, 0.4) 100%);
    z-index: 1;
}
.study-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    padding: 4rem 5%;
}

.study-back-btn {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 2.5rem;
    transition: all 0.2s;
}
.study-back-btn:hover { background: rgba(255,255,255,0.1); color: white; }

.study-meta-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.study-category {
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: white;
}
.cat-blue { background: #2563eb; }
.study-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    font-weight: 500;
}

.study-hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: white;
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
}

/* Study Body */
.study-body-section {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 5% 6rem 5%;
}

.study-content {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.8;
}
.study-content h2 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 3rem 0 1.25rem 0;
}
.study-content h2:first-child {
    margin-top: 0;
}
.study-content p {
    margin-bottom: 1.5rem;
}

/* Highlight Block */
.study-highlight {
    border-left: 3px solid #8b5cf6; /* purple */
    padding: 1rem 0 1rem 1.5rem;
    margin: 2.5rem 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
}

/* Timeline */
.timeline {
    position: relative;
    margin: 2.5rem 0;
}
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 17px;
    width: 2px;
    background: #e2e8f0;
}
.timeline-item {
    position: relative;
    padding-left: 3rem;
    margin-bottom: 2.5rem;
}
.timeline-item:last-child {
    margin-bottom: 0;
}
.timeline-marker {
    position: absolute;
    left: 0;
    top: 5px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1rem;
    z-index: 2;
    border: 4px solid #fafbfd;
}
.timeline-phase {
    display: block;
    color: #10b981;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}
.timeline-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}
.timeline-content p {
    margin: 0;
    font-size: 0.95rem;
}

/* Stats Grid */
.study-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    padding: 3rem 0;
    margin: 3rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.stat-item {
    text-align: left;
}
.stat-value {
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.text-purple { color: #8b5cf6; }
.text-cyan { color: #06b6d4; }
.stat-label {
        font-size: 1.1rem;
    color: #94a3b8;
    font-weight: 400;
}
@media (max-width: 768px) {
    .study-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}
@media (max-width: 480px) {
    .study-stats-grid { grid-template-columns: 1fr; }
}

/* Testimonial Block */
.testimonial-block {
    border-left: 3px solid #10b981; /* green */
    padding: 0.5rem 0 0.5rem 1.5rem;
    margin-bottom: 2.5rem;
}
.testimonial-quote {
    font-size: 1.1rem;
    color: #334155;
    margin: 10px 0 1.25rem 0 !important;
}
.testimonial-author {
    font-size: 0.95rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.2rem;
}
.testimonial-role {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ==========================================
   SML PAGE HERO SECTION
   ========================================== */
.sml-page {
    font-family: 'Outfit', sans-serif;
}
.p-2-s{
  background: green;
  padding: 2px;
  border-radius: 6px;
  padding: 5px 10px 10px 5px;
}
.sml-hero-section {
    position: relative;
    width: 100%;
    min-height: 480px;
    background-color: #0D1533; /* Exact color requested */
    background-image: url('assets/sml_hero_bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Smooth gradient overlay to seamlessly blend #0D1533 into the image */
.sml-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Solid #0D1533 on the left, fading to completely transparent on the far right, with a soft blue tint over the image */
    /* background: linear-gradient(to right, #0D1533 0%, #0D1533 45%, rgba(13, 21, 51, 0.8) 60%, rgba(37, 99, 235, 0.2) 100%); */
    z-index: 1;
}

.sml-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    padding: 2rem 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sml-hero-content {
    max-width: 600px;
}

.sml-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(16, 185, 129, 0.3); /* faint green border */
    border-radius: 50px;
    padding: 0.4rem 1.2rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #10b981; /* mint green */
    margin-bottom: 2rem;
    background: rgba(16, 185, 129, 0.05);
}

.sml-hero-title {
    font-size: clamp(2.5rem, 3vw, 3.2rem);
    font-weight: 900;
    color: white;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    letter-spacing: -0.5px;
}
.text-green-mint { color: #64EDAB !important; }

.sml-hero-desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 520px;
}

.sml-hero-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.sml-btn-outline {
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    transition: all 0.2s;
}
.sml-btn-outline:hover {
    background-color: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.3);
}

.sml-hero-stats {
    display: flex;
    align-items: center;
    gap: 3rem;
    margin-bottom: 18px;
}
.sml-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sml-stat-val {
    font-size: 1.25rem;
    font-weight: 900;
}
.sml-stat-lbl {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255,255,255,0.8);
    letter-spacing: 1px;
}

/* Glassmorphism Floating Cards */
.sml-hero-graphics {
    position: relative;
    z-index: 10;
    width: 45%;
    height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sml-glass-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 1.5rem;
    width: 240px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.glass-card-1 {
    top: 37%;
    left: 13px;
}
.glass-card-2 {
    bottom: -20%;
    right: 11%;
}

.glass-card-3 {
    right: 17%;
    top: -75px;
}

.glass-val {
    font-size: 2.25rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.glass-lbl {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .sml-hero-container { flex-direction: column; align-items: flex-start; gap: 3rem; }
    .sml-hero-graphics { width: 100%; height: 250px; }
    .sml-hero-section { background-size: cover; }
    .sml-hero-overlay { background: linear-gradient(to right, #0D1533 0%, rgba(13, 21, 51, 0.9) 60%, rgba(37, 99, 235, 0.5) 100%); }
}
@media (max-width: 768px) {
    .sml-hero-title { font-size: 3rem; }
    .sml-hero-buttons { flex-direction: column; align-items: stretch; }
    .sml-hero-stats { flex-wrap: wrap; gap: 1.5rem; }
}

/* ==========================================
   SML VISION & MISSION SECTION
   ========================================== */
.sml-vision-section {
    background-color: #ffff; /* The exact grayish cool color from the screenshot */
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
}

.sml-vision-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sml-vision-header {
    margin-bottom: 3.5rem;
}

.vision-pill {
    display: inline-block;
    background-color: #cbd5e1;
    color: #2563eb;
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.vision-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.5px;
}

.vision-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.v-card {
    position: relative;
    /* background: #e2e5e9; */
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

/* Decorative Background Circles */
.v-card-bg-top {
    position: absolute;
    top: -86px;
    right: -50px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    z-index: 1;
}
.v-card-bg-bottom {
    position: absolute;
    bottom: -97px;
    left: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    z-index: 1;
}

/* Specific Colors for Vision (Blue) vs Mission (Green) */
.card-vision {
    border-color: rgba(37, 99, 235, 0.2);
}
.card-vision .v-card-bg-top { background: rgba(37, 99, 235, 0.15); }
.card-vision .v-card-bg-bottom { background: rgba(37, 99, 235, 0.1); }

.card-mission {
    border-color: rgba(0, 166, 105, 0.2) !important;
}
.card-mission .v-card-bg-top { background: rgba(0, 166, 105, 0.4) !important; }
.card-mission .v-card-bg-bottom { background: rgba(0, 166, 105, 0.19) !important; }

/* Mission Card Colors */
.card-mission .text-green-mint, 
.card-mission .v-card-title {
    color: #00A669 !important;
}
.card-mission .icon-green, 
.card-mission .v-icon-box {
    background: rgba(0, 166, 105, 0.2) !important;
    color: #00A669 !important;
}


/* Card Content */
.v-card-content {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem;
}

.v-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
}
.v-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.icon-blue {
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
}
.icon-green {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.v-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.text-blue-bright { color: #2563eb !important; }
/* .text-green-mint is already defined globally */


.v-card-main-text {
    font-size: 1.15rem;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.v-card-sub-text {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .vision-cards-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   SML CHALLENGE & FRAMEWORK SECTION
   ========================================== */
.sml-framework-section {
    position: relative;
    background-color: #060927;
    background-image: url('assets/sml-school-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
    color: white;
}
.sml-framework-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* background: linear-gradient(to bottom, rgba(6, 9, 39, 1) 0%, rgba(6, 9, 39, 0.95) 40%, rgba(6, 9, 39, 0.75) 100%); */
    z-index: 1;
}

.sml-framework-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

/* Dark Pill */
.sml-pill-dark {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 0.4rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.dot-red { background: #ef4444; }
.dot-green { background: #10b981; }

.sml-fw-title {
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
    color: #ffffff;
    }

.sml-fw-desc {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 90%;
}

/* Challenge Grid */
.sml-challenge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 3rem;
}
.sml-challenge-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
}
.sml-challenge-card h4 {
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
    margin: 0 0 0.5rem 0;
    letter-spacing: 1px;
}
.sml-challenge-card p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    line-height: 1.4;
}

/* Challenge Image */
.sml-challenge-img-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
    flex: 1;
    min-height: 300px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
.sml-challenge-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sml-challenge-img-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    padding: 3rem 1.5rem 1.5rem 1.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

/* Framework Timeline */
.sml-timeline {
    position: relative;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.sml-timeline::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 19px;
    width: 2px;
    background: rgba(255, 255, 255, 0.2);
}
.sml-tl-item {
    position: relative;
    padding-left: 4rem;
    margin-bottom: 1.5rem;
}
.sml-tl-marker {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #64EDAB;
    color: #060927;
    font-weight: 900;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.sml-tl-card {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
}
.sml-tl-card h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #67e8f9; /* cyan */
    margin: 0 0 0.5rem 0;
    letter-spacing: 1.5px;
}
.sml-tl-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.5rem 0;
}
.sml-tl-card p {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
    line-height: 1.5;
}

/* Outcomes Box */
.sml-outcomes-box {
    border: 1px solid rgba(16, 185, 129, 0.4);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 2rem;
}
.outcomes-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: #10b981;
    letter-spacing: 1px;
    margin: 0 0 1.5rem 0;
}
.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.outcome-pill {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}
.btn-full {
    width: 100%;
    justify-content: center;
    padding: 1rem;
}

@media (max-width: 1024px) {
    .sml-framework-container { grid-template-columns: 1fr; gap: 4rem; }
    .sml-challenge-grid { grid-template-columns: 1fr; }
    .outcomes-grid { grid-template-columns: 1fr; }
}

.sml-col-challenge {
    display: flex;
    flex-direction: column;
}

.nowrap-title { white-space: nowrap !important; }

/* ==========================================
   SML METHODOLOGIES SECTION
   ========================================== */
.sml-method-section {
    background-color: #f4f5f9;
    padding: 6rem 5%;
    font-family: 'Outfit', sans-serif;
}
.sml-method-container {
    max-width: 1550px;
    margin: 0 auto;
}
.text-center { text-align: center; }

.sml-method-header {
    margin-bottom:-4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sml-method-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0.5rem 0 1rem 0;
    letter-spacing: -1px;
}
.sml-method-desc {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
        text-align: center;
}

.sml-method-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 5rem;
    align-items: stretch;
}

.sml-method-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3rem 0; /* Align with the visible circle, not the transparent bounding box */
    position: relative;
    z-index: 10;
}
.col-left {
    padding-right: 2rem;
}
.col-right {
    padding-left: 2rem;
}

/* Hug the circle curve */


.sml-method-center {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}
.sml-method-center img {
    width: 750px;
    max-width: none;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.08));
}

.method-item {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.text-right {
    text-align: right;
}

.method-num {
    font-size: 4.5rem;
    font-weight: 900;
    color: #2563eb;
    line-height: 1;
    letter-spacing: -3px;
}
.method-text h3 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 0.4rem 0;
}
.method-text p {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 1200px) {
    .offset-left { transform: translateX(0); }
    .offset-right { transform: translateX(0); }
    .sml-method-center img { width: 400px; }
}
@media (max-width: 900px) {
    .sml-method-grid { grid-template-columns: 1fr; }
    .sml-method-center { order: -1; margin-bottom: 3rem; }
    .sml-method-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 3rem 0; /* Align with the visible circle, not the transparent bounding box */
    position: relative;
    z-index: 10;
}
    .method-item { justify-content: flex-start; }
    .col-left .method-item { flex-direction: row-reverse; }
    .text-right { text-align: left; }
}

/* Interactive Blue Checkerboard Grid (4x4 Pattern) */
.sml-hero-grid-overlay {
    position: absolute;
    top: 5%;
    right: 2%;
    width: 42%;
    height: 90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 15px; /* Cards do not touch */
    z-index: 5;
}

.blue-block {
    background: rgba(37, 99, 235, 0.7);
    transition: opacity 0.4s ease;
    pointer-events: auto;
    opacity: 0.8;
    
}

/* 4x4 Grid Pattern Matching Figma */
.block-1 { grid-column: 3; grid-row: 1; }
.block-2 { grid-column: 4; grid-row: 1; }

.block-3 { grid-column: 2; grid-row: 2; }
.block-4 { grid-column: 4; grid-row: 2; }

.block-5 { grid-column: 1; grid-row: 3; }
.block-6 { grid-column: 3; grid-row: 3; }

.block-7 { grid-column: 2; grid-row: 4; }
.block-8 { grid-column: 4; grid-row: 4; }

/* The Individual "Reveal" Hover Effect */
/* When hovering over a SPECIFIC block, only THAT block fades out to reveal the image underneath */
.blue-block:hover {
    opacity: 0 !important;
}

/* Curved Layout Offsets */
.item-08 { transform: none; }
.item-07 { transform: none; }
.item-06 { transform: none; }
.item-05 { transform: none; }

.item-01 { transform: none; }
.item-02 { transform: none; }
.item-03 { transform: none; }
.item-04 { transform: none; }

/* Make sure text doesn't get squished when pushed inwards */
.method-item { width: 350px; }
.col-left .method-item { margin-left: auto; }

@media (max-width: 1200px) {
    .item-08, .item-07, .item-06, .item-05, .item-01, .item-02, .item-03, .item-04 { transform: none; }
    .method-item { width: auto; }
}

/* Force timeline pills to keep their dark gradients */
.t-pill.pill-green {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #ffffff !important;
}
.t-pill.pill-blue {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;
}

/* Fix FAQ active state to match reference */
.cs-faq-item.active {
    border-bottom: 3px solid #2563eb !important;
    background: #ffffff !important;
    border-radius: 12px;
}
.cs-faq-item.active .cs-faq-question {
    color: #0f172a !important; /* Keep text dark */
}

/* ==========================================
   FREE DEMO PAGE STYLES
   ========================================== */

.free-demo-page {
    background-color: #f8fafc;
    min-height: 100vh;
    padding-top: 100px;
    padding-bottom: 4rem;
}

.demo-hero-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 2rem 2rem 5rem 2rem;
}

.demo-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
}

/* Left Content */
.demo-left {
    padding-top: 0;
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background-color: #eff6ff;
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
}

.badge-dot {
    width: 6px;
    height: 6px;
    background-color: #2563eb;
    border-radius: 50%;
}

.demo-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -1px;
}

.demo-desc {
    font-size: 1.05rem;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.demo-illustration {
    margin-top: 3rem;
    text-align: center;
}

.demo-img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* Right Content: Glass Form Card */
.demo-right {
    position: relative;
    padding-top: 0;
}

.demo-form-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}

.form-header {
    background: #eef2ff;
    padding: 1.5rem 2rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.form-header h3 {
    color: #1e1b4b;
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
}

.demo-form {
    padding: 2.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.form-group .required {
    color: #ef4444;
}

.demo-form input,
.demo-form select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: #334155;
    transition: all 0.2s ease;
}

.demo-form input:focus,
.demo-form select:focus {
    outline: none;
    border: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.demo-form input::placeholder {
    color: #94a3b8;
}

/* Custom Select Dropdown Styling */
.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    pointer-events: none;
}

.demo-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
}

.btn-submit {
    width: 100%;
    padding: 1rem;
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
    font-family: inherit;
}

.btn-submit:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}


/* Bottom CTA Section */
.demo-cta-section {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 2rem;
}

.demo-cta-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 24px;
    padding: 4rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.demo-cta-card h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.demo-cta-card p {
    color: #475569;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.demo-cta-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 0.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
}

.demo-cta-form input {
    flex: 1;
    border: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    outline: none;
    background: transparent;
}

.demo-cta-form .btn-submit {
    width: auto;
    margin-top: 0;
    padding: 0.75rem 2rem;
}

@media (max-width: 1024px) {
    .demo-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .demo-title {
        font-size: 3rem;
    }
}

.demo-form-card {
    padding: 0 !important; /* Force no padding */
}
.form-header {
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
.demo-form {
    padding: 2rem !important; /* Slightly less padding to give fields more width */
    box-sizing: border-box;
}

/* Update form layout to 2 columns to prevent scrolling */
.demo-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    padding: 2rem !important;
}

.demo-form .form-group {
    margin-bottom: 1.25rem;
}

/* Make State and Submit button span full width if needed, or leave Submit full width */
.demo-form .btn-submit {
    grid-column: span 2;
    margin-top: 0.5rem;
}

/* On mobile, stack them back to 1 column */
@media (max-width: 768px) {
    .demo-form {
        grid-template-columns: 1fr;
    }
    .demo-form .btn-submit {
        grid-column: span 1;
    }
}

@media (max-width: 992px) {
    .sml-audience-card:nth-child(6) {
        grid-column: span 1;
    }
}

/* =========================================================================
   RCA HERO CONTENT OVERRIDE
   ========================================================================= */
.rca-hero-content {
  padding: -4rem 0 0 2rem;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 650px !important; /* Fix overlapping text into the image */
}

/* Fix huge gap below hero section */
/* .rca-hero-section {
    height: auto !important;
    min-height: 0 !important;
    padding: 6rem 0 2rem 0 !important;
} */

/* Fix font difference and overlapping descenders */
.gradient-highlight, .journey-highlight {
    font-family: inherit !important;
    font-style: normal !important;
}

/* Fix Learning Journey Stage Tag Background Block & Selection */
.journey-label .stage-tag {
    background: transparent !important;
}
.journey-wave-container, .journey-label {
    user-select: none;
}

/* Fix image expansion and alignment */
.demo-img {
    max-width: 320px !important;
    margin: 0 auto;
    display: block;
}

/* Ensure container aligns items nicely */
.demo-container {
    align-items: stretch !important; /* Stretch columns to same height if needed, though they should be balanced now */
}

/* Let the form card fill the height if stretch is applied */
.demo-right {
    display: flex;
}
.demo-form-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.demo-form {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center the form fields vertically within the card */
}

/* Keep the 2-column grid inside the form but within the flex layout */
.demo-form > div, .demo-form > button {
    /* these aren't grid items anymore if display: flex, wait! */
}

/* Fix image expansion and alignment */
.demo-img {
    max-width: 350px !important;
    margin: 0 auto;
    display: block;
}

.demo-right {
    display: flex;
    height: 100%;
}

.demo-form-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.demo-form {
    flex-grow: 1;
    /* Grid properties are already !important from last fix */
    align-content: start; padding-top: 3rem !important; /* Spaces the fields out nicely if the form card stretches */
}

/* Convert form back to 1 column per user request, but compact it to fit the height! */
.demo-form {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 2rem 2.5rem !important; /* Good horizontal padding */
}

/* Make submit button span 1 column since the grid is 1 column */
.demo-form .btn-submit {
    grid-column: span 1 !important;
    margin-top: 0.5rem;
    padding: 0.85rem !important; /* slightly thinner button */
}

/* Reduce gaps between fields */
#form-book-demo .form-group {
    margin-bottom: 0.4rem !important;
}

/* Reduce height of inputs slightly so 7 of them fit neatly without making the form too tall */
#form-book-demo input,
#form-book-demo select {
    padding: 0.45rem 1rem !important;
}

/* Reduce label margin to save space */
#form-book-demo .form-group label {
    margin-bottom: 0.15rem !important;
    font-size: 0.7rem !important;
}

/* =========================================================================
   FLN CUSTOM STYLES ADDED BY USER
   ========================================================================= */
.fln-page-main {
  background-color: #ffffff; /* Light cream beige */
  min-height: 100vh;
}
.n-school {
    width: 21.5rem;
    height: 7.0625rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fln-hero-section {
    background-image: url('assets/FLN_product/FLN-hero-section.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: 1749px;
    width: 100%;
}

.fln-hero-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding-top: 7%;
   margin-left: 7%;
}
.fln-hero-container-2{
    max-width: 1200px;
  margin: 0 auto;
  gap: 2rem;
      padding-top: 3%;
    margin-left: 6%;
}
/* Pencil Badge */
.fln-pencil-badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2rem;
  position: relative;
}

.pencil-text {
  background-color: #facc15; /* Yellow */
  color: #1e293b;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 0.6rem 1rem;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}

.pencil-tip {
  width: 0;
  height: 0;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 20px solid #facc15;
  position: relative;
}
.pencil-tip::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -20px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #1e293b; /* Lead tip */
}

/* Typography */
.fln-hero-title {
  font-size: clamp(3.5rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1.5rem 0;
  letter-spacing: -1px;
}

.text-gold {
  color: #d4af37;
}

.fln-hero-subtitle {
  font-family: "Love Ya Like A Sister", cursive;
  font-size: 3.25rem;
  color: #1e293b;
  line-height: 1.3;
  /* margin: 0 0 2rem 0; */
  font-weight: 400;
}

.fln-hero-desc {
  font-size: 1.25rem;
  color: #000000;
  line-height: 1.6;
  /* max-width: 90%; */
    margin: 0 0 2.2rem 0;
  padding-top:12px;
}
.fln-hero-desc2 {
  font-size: 1.25rem;
  color: #000000;
  line-height: 26px; /* 130% */
    margin: 0 0 2.2rem 0;
  padding-top:12px;
  width: 490px;
}
.why-heading{
  background: linear-gradient(90deg, #2244DF 50.48%, #64EDAB 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Outfit;
font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 48px;
}
.why-heading-m{
  font-size: 48px;
font-style: normal;
font-weight: 800;
line-height: 48px;
}
/* Buttons */
.fln-hero-cta {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.btn-fln-blue {
  background: linear-gradient(91deg, #0B1EBA 17.61%, #383ED6 80.05%);
  color: white !important;
  border-radius: 12px !important; /* Less rounded than HPC pills */
  padding: 1rem 2rem !important;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
  font-weight: 600 !important;
  text-decoration: none;
}
.why-trust-us{
  background-image: url("assets/FLN_product/Why-Trust-us.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  height: 100vh;
    position: relative;   /* Required for z-index */
    z-index: 999;         /* Higher than previous section */
           margin-top: -221px;
        display: flex;
}

/* Specific fix for FLN page to avoid cropping the cards on the right */
.fln-page-main .why-trust-us {
  height: auto;
  aspect-ratio: 5760 / 2548;
}

.btn-fln-watch {
  color: #1e293b !important;
  border: 1px solid #000000 !important;
  border-radius: 12px !important;
  padding: 1rem 2rem !important;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 600 !important;
  transition: all 0.3s ease;
  text-decoration: none;
}
.fln-hero-section{
    position: relative;
    overflow: hidden;
}
.fln-hero-image{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 2;
    pointer-events: none;
   margin-bottom: 147px;
}

.fln-hero-image img{
    width: 100%;
    max-width: 760px;
    height: auto;
    display: block;
}

.btn-fln-watch:hover {
  background-color: #f1f5f9 !important;
}

.btn-fln-watch svg {
  width: 14px;
  height: 14px;
}

/* Visual Placeholder */
.fln-placeholder-image {
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 3px dashed #cbd5e1;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  background-color: rgba(255,255,255,0.5);
  text-align: center;
}

/* Clouds Decor */
.fln-clouds-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  z-index: 1;
}

.fln-cloud {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.cloud-yellow {
  bottom: 20px;
  opacity: 0.4;
  transform: scaleX(1.1);
}

.cloud-white {
  z-index: 1;
}

@media (max-width: 992px) {
  .fln-hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .fln-hero-desc {
    max-width: 100%;
    margin: 0 auto 2.5rem auto;
  }
  .fln-hero-cta {
    justify-content: center;
  }
  .fln-pencil-badge {
    justify-content: center;
  }
}

/* Text Scroller */
.text-scroller {
  display: inline-block;
  height: 1.2em; /* matching line height */
  overflow: hidden;
  vertical-align: bottom;
}

.text-scroll-inner {
  display: flex;
  flex-direction: column;
  animation: scrollText 9s cubic-bezier(0.68, -0.55, 0.26, 1.55) infinite;
}

.text-scroll-item {
  height: 1.2em;
  display: flex;
  align-items: center;
  padding-bottom: 0.1em;
}

@keyframes scrollText {
  0%, 20% { transform: translateY(0); }
  33%, 53% { transform: translateY(-100%); }
  66%, 86% { transform: translateY(-200%); }
  100% { transform: translateY(-300%); }
}

/* Fluffy CSS Clouds */
.fln-clouds-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 250px;
  z-index: 1;
  pointer-events: none;
}

.fln-cloud-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cloud-yellow .c-bubble {
  background-color: #eab308; /* Soft yellow */
}

.cloud-white .c-bubble {
  background-color: #ffffff;
}

.c-bubble {
  position: absolute;
  border-radius: 50%;
  /* Optional: subtle float animation */
  animation: floatCloud 8s ease-in-out infinite alternate;
}

/* Delay bubbles slightly so they bob differently */
.c-bubble:nth-child(even) { animation-duration: 10s; animation-delay: 1s; }
.c-bubble:nth-child(3n) { animation-duration: 12s; animation-delay: 2s; }

@keyframes floatCloud {
  0% { transform: translateY(0); }
  100% { transform: translateY(-15px); }
}

/* Sun and Star */
.c-sun {
  position: absolute;
  bottom: 120px;
  left: 45%;
  width: 80px;
  height: 80px;
  animation: rotateSun 20s linear infinite;
}

.c-star {
  position: absolute;
  bottom: 150px;
  right: 15%;
  width: 50px;
  height: 50px;
  animation: floatCloud 6s ease-in-out infinite alternate;
}

@keyframes rotateSun {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Fix Scroller Alignment (Single Line) */
.fln-hero-title {
  display: flex;
  align-items: flex-end; /* Align to bottom so they sit on the same line */
  flex-wrap: nowrap; /* Force single line */
  gap: 0.75rem;
}

.text-scroller {
  height: 1.1em; /* strict height constraint */
  vertical-align: bottom;
  margin-bottom: -0.1em; /* slight adjustment for baseline alignment */
}

.text-scroll-item {
  height: 1.1em;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  .fln-hero-title {
    flex-wrap: wrap; /* Only wrap on very small screens */
    justify-content: center;
  }
}

/* ============================
   FIX FOR FLN HERO TITLE & SCROLLER
   ============================ */
.fln-hero-title {
  display: block !important;
  white-space: nowrap !important; /* STRICTLY prevent wrapping */
  font-size: clamp(2.5rem, 5vw, 4.5rem) !important; /* Slightly smaller to ensure it fits */
  padding-top: 1rem;
}

.text-scroller {
  display: inline-flex !important;
  height: 1.1em !important;
  overflow: hidden !important;
  vertical-align: bottom !important;
  margin-bottom: -0.05em !important;
  padding-left: 0.2rem;
}

.text-scroll-inner {
  display: flex !important;
  flex-direction: column !important;
  animation: scrollText 9s cubic-bezier(0.68, -0.55, 0.26, 1.55) infinite !important;
}

.text-scroll-item {
  height: 1.1em !important;
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 0 !important;
}

.text-gold {
  color: #d9a05b !important; /* Matching the exact Figma beige-gold color */
}

/* ============================
   FLN MISSION & VISION SECTION
   ============================ */
.fln-mission-vision-section {
  position: relative;
  background-color: #fefdfa;
  padding: 6rem 2rem;
  overflow: hidden;
}

.fln-path-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

.fln-path-bg svg {
  width: 100%;
  height: 100%;
}

.fln-decor {
  position: absolute;
  font-size: 3rem;
  z-index: 1;
  opacity: 0.6;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.decor-star-1 { top: 15%; left: 10%; transform: rotate(-15deg); }
.decor-star-2 { top: 5%; right: 15%; font-size: 2rem; }
.decor-cloud-1 { bottom: 10%; left: 25%; font-size: 6rem; opacity: 0.3; }

.fln-mv-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

.fln-mission-box {
  padding-top: 6rem; /* Push down to match layout */
  padding-right: 2rem;
}

.fln-vision-box {
  padding-left: 2rem;
}

/* Handwritten Typography */
.fln-mv-title {
  font-family: 'Gochi Hand', cursive, 'Special Elite', monospace;
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
  letter-spacing: 1px;
}

.text-mv-blue {
  color: #2563eb;
}

.text-mv-green {
  color: #4ade80;
}

.fln-mv-text {
  font-family: 'Patrick Hand', 'Gochi Hand', cursive;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #334155;
  text-align: center;
}

.fln-pencil-rocket-placeholder {
  margin-top: 3rem;
  width: 100%;
  height: 350px;
  background-color: rgba(253, 224, 71, 0.2);
  border: 3px dashed #facc15;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ca8a04;
  font-weight: 600;
  transform: rotate(-5deg); /* playful tilt */
}

@media (max-width: 992px) {
  .fln-mv-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .fln-mission-box {
    padding-top: 2rem;
    padding-right: 0;
  }
  .fln-vision-box {
    padding-left: 0;
  }
  .fln-path-bg {
    opacity: 0.3; /* fade path on mobile so it doesn't block text */
  }
}

/* Fix for sticky header */
.fln-page-main main {
  overflow-x: hidden;
  width: 100%;
}

.fln-page-main .header {
  position: fixed !important;
  left: 0;
  top: 0 !important;
  z-index: 9999 !important; /* Ensure it stays above everything */
  box-shadow: 0 4px 30px rgba(0,0,0,0.05); /* Slight shadow to separate from content */
}

/* Compensate for fixed header */
/* NOTE: We restrict this to .fln-page-main so it doesn't break other pages! */
.fln-page-main {
    font-family: var(--font-body);
    padding-top: 90px; 
}

/* =========================================================================
   SML METHODOLOGIES FIXES (USER REQUEST)
   ========================================================================= */

/* 1. Outer wrapper max-width & centering */
.sml-method-container {
    max-width: 1400px !important; /* Figma-like frame width */
    margin: 0 auto !important;
    box-sizing: border-box;
    padding: 0 2rem;
}

/* Ensure the grid doesn't bleed out */
.sml-method-grid {
    width: 100%;
}

/* 2. Fix Text Overflow / Clipping & Max Width */
.method-item {
    width: auto !important; /* Remove the hardcoded 350px */
}
.method-text {
    max-width: 280px !important; /* Force text to wrap inside the column */
}

/* 3. Fix Vertical Spacing Inconsistencies (Overlapping) */
.sml-method-col {
    justify-content: center !important; /* Remove space-between */
    gap: 3.5rem !important; /* Apply a consistent, symmetrical gap to both left and right */
}

/* 4. Tighter gap between Number (01) and Text */
.method-item {
    gap: 1rem !important; /* Reduced from 1.5rem for tighter spacing */
}

/* =========================================================================
   SML METHODOLOGIES - HUGGING THE CURVE FIX
   ========================================================================= */

/* Bring the columns much closer to the center image */
.sml-method-grid {
    grid-template-columns: minmax(250px, 1fr) auto minmax(250px, 1fr) !important;
    gap: 0 !important; /* Remove gaps so columns sit right against the center image */
    justify-content: center !important;
}

/* Align items inside the columns so they are flush against the center boundary */
.col-left {
    align-items: flex-end !important; /* Push right, towards image */
}
.col-right {
    align-items: flex-start !important; /* Push left, towards image */
}

/* 
   Curve Offsets: 
   The center image is circular/blob-shaped. It is widest in the middle, and narrower at top/bottom.
   To make the text "hug" the shape without overlapping it, we push the top/bottom items INWARDS,
   and let the middle items sit normally.
*/

/* LEFT COLUMN (08 is top, 05 is bottom) */
.col-left .item-08 { transform: translateX(60px) !important; } /* Push heavily right (inward) */
.col-left .item-07 { transform: translateX(10px) !important; } /* Slight push */
.col-left .item-06 { transform: translateX(10px) !important; } /* Slight push */
.col-left .item-05 { transform: translateX(60px) !important; } /* Push heavily right (inward) */

/* RIGHT COLUMN (01 is top, 04 is bottom) */
.col-right .item-01 { transform: translateX(-60px) !important; } /* Push heavily left (inward) */
.col-right .item-02 { transform: translateX(-10px) !important; } /* Slight push */
.col-right .item-03 { transform: translateX(-10px) !important; } /* Slight push */
.col-right .item-04 { transform: translateX(-60px) !important; } /* Push heavily left (inward) */

/* Restore max-width to slightly wider so text fits nicely next to the numbers */
.method-text {
    max-width: 250px !important;
}
.method-text h3 {
    font-size: 1.1rem !important;
}

/* =========================================================================
   SML METHODOLOGIES PROPER FIGMA ALIGNMENT
   ========================================================================= */

/* 1. Heading should be strictly on one line */
.sml-method-title {
    white-space: nowrap !important;
}

/* 2. Restore "Wide Range" horizontal gap between text and image */
.sml-method-grid {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 2rem !important; /* Solid gap so text isn't crammed into the image */
    justify-content: center !important;
}

/* 3. Wider vertical gap to perfectly align the 4 items with the 4 icons vertically */
.sml-method-col {
    justify-content: center !important;
    gap: 4.5rem !important; /* Increased gap to stretch the items vertically matching the icons */
}

/* 4. Subtle Curve (Hugging without compressing) */
.col-left {
    align-items: flex-end !important; /* Base alignment to right edge */
}
.col-right {
    align-items: flex-start !important; /* Base alignment to left edge */
}

/* LEFT COLUMN offsets */
.col-left .item-08 { transform: translateX(20px) !important; } /* Hug slightly in */
.col-left .item-07 { transform: translateX(-30px) !important; } /* Push out to clear the bulge */
.col-left .item-06 { transform: translateX(-30px) !important; } /* Push out to clear the bulge */
.col-left .item-05 { transform: translateX(20px) !important; } /* Hug slightly in */

/* RIGHT COLUMN offsets */
.col-right .item-01 { transform: translateX(-20px) !important; } /* Hug slightly in */
.col-right .item-02 { transform: translateX(30px) !important; } /* Push out to clear the bulge */
.col-right .item-03 { transform: translateX(30px) !important; } /* Push out to clear the bulge */
.col-right .item-04 { transform: translateX(-20px) !important; } /* Hug slightly in */

/* Ensure text is wide enough but wraps nicely */
.method-text {
    max-width: 260px !important;
}

/* =========================================================================
   SML METHODOLOGIES - ULTIMATE PERFECT FIGMA ALIGNMENT
   ========================================================================= */

/* Force heading to one line */
.sml-method-title {
    white-space: nowrap !important;
}

/* Use Flexbox for tight, pixel-perfect control around the image */
.sml-method-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important; /* Remove grid gaps */
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* The center image container */
.sml-method-center {
    flex-shrink: 0 !important;
    margin: 0 !important;
    z-index: 1;
}
.sml-method-center img {
    width: 700px !important; /* Standardize image width */
    height: auto !important;
    display: block;
}

/* The left and right columns */
.sml-method-col {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Spread the 4 items perfectly from top to bottom */
    height: 600px !important; /* Match the vertical span of the icons on the image */
    z-index: 10 !important;
    gap: 0 !important; /* Let space-between handle the vertical distribution */
}

/* Pull columns inwards into the transparent space of the image */
.col-left {
    align-items: flex-end !important;
    margin-right: -40px !important;
}
.col-right {
    align-items: flex-start !important;
    margin-left: -40px !important;
}

/* 
   Curve Offsets to make each text block sit exactly next to its icon!
   The circle is narrow at the top and bottom, so we push those items INWARDS heavily.
   The circle is wide in the middle, so we push those items INWARDS slightly.
*/

/* LEFT COLUMN (08 is top ribbon, 05 is bottom flask) */
.col-left .item-08 { transform: translateX(30px) !important; } /* Top: push heavily right */
.col-left .item-07 { transform: translateX(-35px) !important; } /* Mid-top: slight push */
.col-left .item-06 { transform: translateX(-35px) !important; } /* Mid-bot: slight push */
.col-left .item-05 { transform: translateX(30px) !important; } /* Bottom: push heavily right */

/* RIGHT COLUMN (01 is top pencil, 04 is bottom book) */
.col-right .item-01 { transform: translateX(-30px) !important; } /* Top: push heavily left */
.col-right .item-02 { transform: translateX(35px) !important; } /* Mid-top: slight push */
.col-right .item-03 { transform: translateX(35px) !important; } /* Mid-bot: slight push */
.col-right .item-04 { transform: translateX(20px) !important; } /* Bottom: push heavily left */

/* Text sizing so it fits cleanly */
.method-item {
    width: auto !important;
    max-width: none !important;
}
.method-text {
    max-width: 250px !important;
}

/* Ensure all method item headings stay on one line */
.method-text {
    max-width: 320px !important; /* Increase width so paragraphs have room */
}
.method-text h3 {
    white-space: nowrap !important;
}

/* =========================================================================
   SML EMPOWERING LEADERS SECTION
   ========================================================================= */
.sml-empower-section {
    font-family: 'Outfit', sans-serif;
    padding: 4rem 2rem;
    background-color: #f8fafc; /* Very faint off-white/blue matching screenshot */
}
.sml-empower-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 2rem;
    align-items: center;
}
.sml-empower-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin: 1rem 0;
    letter-spacing: -0.5px;
}
.text-empower-gradient {
    background: linear-gradient(90deg, #2563eb 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.sml-empower-desc {
    font-size: 1.1rem;
    color: #64748b;
    line-height: 1.8;
    max-width: 90%;
}
.sml-empower-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: center;
}
.empower-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}
.empower-card:hover {
    transform: translateY(-5px);
}
.empower-icon-wrapper {
    width: 54px;
    height: 54px;
    background: #f8fafc;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}
.empower-icon-wrapper svg {
    width: 26px;
    height: 26px;
    color: #0f172a;
    stroke-width: 2.5;
}
.empower-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem 0;
}
.empower-card p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 992px) {
    .sml-empower-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .sml-empower-right {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   SML EMPOWERING LEADERS HOVER EFFECTS (STRICTLY SCOPED)
   ========================================================================= */

/* Ensure smooth transitions on the elements */
.sml-empower-section .empower-card {
    transition: all 0.3s ease;
    border: none !important; /* Default border */
    height: 252px;
}
.sml-empower-section .empower-card h3,
.sml-empower-section .empower-icon-wrapper,
.sml-empower-section .empower-icon-wrapper svg {
    transition: all 0.3s ease;
}

/* Card 1: Blue Hover */
.sml-empower-section .empower-card-blue:hover {
    border: none !important;
    box-shadow: 0 10px 30px rgba(37, 99, 235, 0.12) !important;
}
.sml-empower-section .empower-card-blue:hover h3 {
    color: #2563eb !important;
}
.sml-empower-section .empower-card-blue:hover .empower-icon-wrapper {
    background-color: #eff6ff !important; /* light blue */
}
.sml-empower-section .empower-card-blue:hover .empower-icon-wrapper svg {
    color: #2563eb !important;
}

/* Card 2: Pink Hover */
.sml-empower-section .empower-card-pink:hover {
    border: none !important;
    box-shadow: 0 10px 30px rgba(225, 29, 72, 0.12) !important;
}
.sml-empower-section .empower-card-pink:hover h3 {
    color: #e11d48 !important;
}
.sml-empower-section .empower-card-pink:hover .empower-icon-wrapper {
    background-color: #fff1f2 !important; /* light pink */
}
.sml-empower-section .empower-card-pink:hover .empower-icon-wrapper svg {
    color: #e11d48 !important;
}

/* Card 3: Purple Hover */
.sml-empower-section .empower-card-purple:hover {
    border: none !important;
    box-shadow: 0 10px 30px rgba(147, 51, 234, 0.12) !important;
}
.sml-empower-section .empower-card-purple:hover h3 {
    color: #9333ea !important;
}
.sml-empower-section .empower-card-purple:hover .empower-icon-wrapper {
    background-color: #faf5ff !important; /* light purple */
}
.sml-empower-section .empower-card-purple:hover .empower-icon-wrapper svg {
    color: #9333ea !important;
}

/* Card 4: Orange Hover */
.sml-empower-section .empower-card-orange:hover {
    border: none !important;
    box-shadow: 0 10px 30px rgba(234, 88, 12, 0.12) !important;
}
.sml-empower-section .empower-card-orange:hover h3 {
    color: #ea580c !important;
}
.sml-empower-section .empower-card-orange:hover .empower-icon-wrapper {
    background-color: #fff7ed !important; /* light orange */
}
.sml-empower-section .empower-card-orange:hover .empower-icon-wrapper svg {
    color: #ea580c !important;
}

/* =========================================================================
   SML PATHWAYS SECTION (TABS)
   ========================================================================= */
.sml-pathways-section {
    font-family: 'Outfit', sans-serif;
    padding: 4rem 2rem;
    background-color: #f4f5f9; /* Soft cool gray/white from screenshot */
}
.sml-pathways-container {
    max-width: 1200px;
    margin: 0 auto;
}
.sml-pathways-header {
    text-align: center;
    margin-bottom: 3rem;
}
.sml-pathways-title {
    font-size: 3.2rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    margin-top: 1.5rem;
    letter-spacing: -1px;
}
.text-pathway-gradient {
    background: linear-gradient(90deg, #2563eb 0%, #34d399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Tab Switcher */
.sml-tab-switcher-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
}
.sml-tab-switcher {
    display: inline-flex;
    background: #ffffff;
    border-radius: 50px;
    padding: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.sml-tab-btn {
    background: transparent;
    border: none;
    padding: 14px 40px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.3s ease;
}
.sml-tab-btn.active {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

/* Tab Content */
.sml-tab-pane {
    display: none; /* hidden by default */
    animation: fadeIn 0.4s ease-in-out;
}
.sml-tab-pane.active {
    display: grid;
    grid-template-columns: 3.5fr 6.5fr;
    gap: 5rem;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Left Pane Content */
.pathway-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.pathway-pill svg {
    width: 14px;
    height: 14px;
}
.pathway-pill.pill-green {
    background: #d1fae5;
    color: #059669;
}
.pathway-pill.pill-blue {
    background: #e0e7ff;
    color: #4f46e5;
}
.sml-pane-left h3 {
    font-size: 2rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}
.sml-pane-left p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.8;
}

/* Right Pane Grid */
.sml-pane-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-content: start;
}
.pathway-list-item {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.2s ease;
}
.pathway-list-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.pathway-list-item span {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
}
.pathway-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pathway-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 4;
}
.pathway-icon.icon-blue {
    background: #2563eb;
    color: #ffffff;
}
.pathway-icon.icon-green {
    background: #10b981;
    color: #ffffff;
}

@media (max-width: 992px) {
    .sml-tab-pane.active {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .sml-pane-right {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   SML PRODUCT SCREENSHOTS SECTION
   ========================================================================= */
.sml-screenshots-section {
    font-family: 'Outfit', sans-serif;
    padding: 4rem 2rem 4rem 2rem;
    background-color: #f4f5f9; /* Seamless continuation of previous section */
    transition: background-color 0.6s ease;
}
.sml-screenshots-section:hover {
    background-color: #f0f4ff; /* Light vibrant blue matching the images */
}
.sml-screenshots-container {
    max-width: 1300px; /* Wide layout to match Figma */
    margin: 0 auto;
}
.sml-screenshots-title {
    font-size: 2.2rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 2.5rem;
    text-align: left;
    letter-spacing: -0.5px;
}
.sml-screenshots-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.product-screenshot-card {
    background: #ffffff;
    border-radius: 12px; /* Smooth corners for the frame */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06); /* Soft floating shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
}
.product-screenshot-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}
.screenshot-img-base {
    width: 100%;
    height: auto;
    display: block;
    -webkit-filter: grayscale(100%) opacity(90%); 
    filter: grayscale(100%) opacity(90%);
}

.screenshot-img-color {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
}

/* Reveal full vibrant colors on hover */
.product-screenshot-card:hover .screenshot-img-color {
    opacity: 1;
}

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

/* =========================================================================
   SML TARGET AUDIENCE SECTION (Empowering Education Leaders)
   ========================================================================= */
.sml-target-audience-section {
    font-family: 'Outfit', sans-serif;
    padding: 4rem 2rem 4rem 2rem;
    background-color: #f8fafc; /* Very light faint background */
}
.sml-audience-container {
    max-width: 1200px;
    margin: 0 auto;
}
.sml-audience-header {
    text-align: center;
    margin-bottom: 4rem;
}
.audience-pill {
    display: inline-block;
    background-color: #eff6ff;
    color: #3b82f6;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.audience-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}
.text-blue-light {
    color: #3b82f6;
}
.text-teal {
    color: #2dd4bf;
}
.audience-desc {
    font-size: 1.1rem;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}
.sml-audience-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.audience-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.audience-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.audience-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.icon-bg-blue { background-color: #eff6ff; color: #3b82f6; }
.icon-bg-purple { background-color: #f3e8ff; color: #9333ea; }
.icon-bg-teal { background-color: #e6fffa; color: #0d9488; }
.icon-bg-green { background-color: #ecfdf5; color: #10b981; }
.icon-bg-orange { background-color: #fff7ed; color: #f97316; }
.icon-bg-dark-accent { background-color: #1e3a8a; color: #34d399; }

.audience-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.badge-blue { background-color: #eff6ff; color: #3b82f6; }
.badge-purple { background-color: #f3e8ff; color: #9333ea; }
.badge-teal { background-color: #e6fffa; color: #0d9488; }
.badge-green { background-color: #ecfdf5; color: #10b981; }
.badge-orange { background-color: #fff7ed; color: #f97316; }

.audience-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}
.audience-card p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}
.audience-card.card-dark {
    background: linear-gradient(to bottom, #1e2b4d 0%, #00A669 100%);
color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.card-dark .card-dark-text {
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .sml-audience-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .sml-audience-grid {
        grid-template-columns: 1fr;
    }
    .audience-title {
        font-size: 2.2rem;
    }
}

/* =========================================================================
   SML FAQ SECTION
   ========================================================================= */
.sml-faq-section {
    font-family: 'Outfit', sans-serif;
    padding: 4rem 2rem 4rem 2rem;
    background-color: #f8fafc;
}
.sml-faq-container {
    max-width: 800px;
    margin: 0 auto;
}
.sml-faq-header {
    text-align: center;
    margin-bottom: 3rem;
}
.text-gradient-blue-green {
    background: linear-gradient(90deg, #3b82f6, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sml-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.sml-faq-item {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    overflow: hidden;
}
.sml-faq-question {
    padding: 1.5rem 2rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    list-style: none; /* Hide default marker */
    position: relative;
    transition: background-color 0.2s;
}
.sml-faq-question::-webkit-details-marker {
    display: none;
}
.sml-faq-question:hover {
    background-color: #fcfcfd;
}
.sml-faq-answer {
    padding: 0 2rem 1.5rem 2rem;
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
}

/* Override Stage Name Font Weight */
.stage-name {
    font-weight: 600 !important;
}

/* ============================
   FLN TRUST & CREDIBILITY SECTION
   ============================ */
.fln-trust-section {
  padding: 5rem 2rem;
  background-color: #f0fdfc; /* very light cyan */
  position: relative;
  z-index: 5;
}

.fln-trust-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: center;
}

/* Left Side Styles */
.trust-badge {
  display: inline-block;
  background-color: #fbbf24;
  padding: 0.25rem 1rem;
  border-radius: 4px;
  margin-bottom: 1rem;
  position: relative;
}

.trust-badge-text {
  font-weight: 700;
  font-size: 0.8rem;
  color: #000;
  letter-spacing: 1px;
}

.trust-title {
  font-size: 3rem;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.trust-highlight {
  background: linear-gradient(90deg, #3b82f6, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.trust-desc {
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 3rem;
}

/* Fallback Jigsaw Stats Layout */
.trust-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  position: relative;
  margin-bottom: 2rem;
}

.t-stat-card {
  border-radius: 12px;
  padding: 1.5rem;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  min-height: 140px;
  transition: transform 0.3s;
}

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

.t-stat-card h3 {
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.t-stat-card p {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}

.t-stat-icon {
  margin-bottom: 0.5rem;
  width: 24px;
  height: 24px;
}

.stat-teal { background-color: #008f95; }
.stat-green { background-color: #16a34a; transform: translateY(-20px); }
.stat-pink { background-color: #db2777; }
.stat-orange { background-color: #ea580c; }
.stat-blue { background-color: #2563eb; transform: translateY(-20px); grid-column: 2; }


/* Right Side Styles (Interactive Cards) */
.trust-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.trust-card {
  background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Initial styling */
.tc-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.tc-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
}

.trust-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.trust-card p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.5;
  transition: all 0.3s ease;
}
.holistic-gradient-text{
  background: linear-gradient(90deg, #2244DF 0%, #64EDAB 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: Outfit;
font-size: 2.2rem !important;
font-style: normal;
font-weight: 800;
}
.book-sec{
  text-align: center;
  width: auto;

}
.holistic-growth-section{
  background-image: url("assets/FLN_product/holistic-growth.png");
      /* background-repeat: no-repeat;
    background-position: center; */
    background-size: cover;
    /* padding-bottom: 16rem; */
        position: relative;
}

/* Card Accent Colors */
.tc-blue { border: 2px solid #3b82f6 !important; }
.tc-blue .tc-icon { color: #3b82f6; background-color: #eff6ff; }

.tc-purple { border: 2px solid #a855f7 !important; }
.tc-purple .tc-icon { color: #a855f7; background-color: #faf5ff; }

.tc-teal { border: 2px solid #14b8a6 !important; }
.tc-teal .tc-icon { color: #14b8a6; background-color: #f0fdfa; }

.tc-orange { border: 2px solid #f97316 !important; }
.tc-orange .tc-icon { color: #f97316; background-color: #fff7ed; }

.tc-pink { border: 2px solid #ec4899 !important; }
.tc-pink .tc-icon { color: #ec4899; background-color: #fdf2f8; }

.tc-green { border: 2px solid #22c55e !important; }
.tc-green .tc-icon { color: #22c55e; background-color: #f0fdf4; }

/* HOVER EFFECTS - AS REQUESTED */
.tc-blue:hover { background: linear-gradient(113deg, #2244DF 24.98%, #122579 85.08%); border-color: #3b82f6 !important; }
.tc-purple:hover { background: linear-gradient(109deg, #7C3AED 21.23%, #3D1483 89.64%); border-color: #a855f7 !important; }
.tc-teal:hover { background: linear-gradient(108deg, #0891B2 20.65%, #086075 90.85%); border-color: #14b8a6 !important; }
.tc-orange:hover {background: linear-gradient(111deg, #DB2777 21.53%, #740838 87.52%); border-color: #f97316 !important; }
.tc-pink:hover { background: linear-gradient(109deg, #16A34A 20.57%, #076F2D 87.1%); border-color: #ec4899 !important; }
.tc-green:hover { background: linear-gradient(110deg, #F27324 24.86%, #AB4009 88.56%); border-color: #22c55e !important; }

.trust-card:hover h4,
.trust-card:hover p {
  color: #ffffff;
}

.trust-card:hover .tc-icon {
  background-color: rgba(255,255,255,0.2);
  color: #ffffff;
}

@media (max-width: 992px) {
  .fln-trust-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .trust-cards-grid {
    grid-template-columns: 1fr;
  }
  .stat-green, .stat-blue {
    transform: none;
  }
}

/* ============================
   PRODUCT ECOSYSTEM SECTION
   ============================ */
.fln-ecosystem-section {
    position: relative;
    /* z-index: 99999; */

    background-image: url("/assets/FLN_product/Our-Offerings.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* padding-bottom: 13rem; */
}

/* Decorative background planes */
.eco-decor {
  position: absolute;
  opacity: 0.6;
  z-index: 1;
}

.eco-decor svg {
  width: 48px;
  height: 48px;
  transform: rotate(15deg);
}

.plane-1 { top: 10%; left: 10%; transform: rotate(-20deg); }
.plane-2 { top: 40%; right: 10%; transform: rotate(45deg) scale(0.8); }
.plane-3 { bottom: 20%; left: 15%; transform: rotate(10deg); }
.plane-4 { bottom: 5%; right: 25%; transform: rotate(-30deg) scale(1.2); }

.fln-eco-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.eco-header {
  margin-bottom:2rem;
  text-align: center;
  padding-top:6rem;
}

.eco-title {
  font-size: 3.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 1rem;
}

.text-gradient-blue-green {
  background: linear-gradient(90deg, #3b82f6, #4ade80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eco-subtitle {
  font-size: 1.2rem;
  color: #475569;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Offerings Grid */
.eco-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  /* margin-bottom:2rem; */
}

.eco-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eco-icon-wrapper {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.eco-card:hover .eco-icon-wrapper {
  transform: translateY(-5px);
}

.eco-icon-wrapper svg {
  width: 40px;
  height: 40px;
}

/* Specific Icon Colors */
.bg-teal { background-color: #06b6d4; }
.text-teal { color: #06b6d4; }

.bg-orange { background-color: #f97316; }
.text-orange { color: #f97316; }

.bg-darkblue { background-color: #0369a1; }
.text-darkblue { color: #0369a1; }

.bg-olive { background-color: #84cc16; }
.text-olive { color: #84cc16; }

.bg-indigo { background-color: #6366f1; }
.text-indigo { color: #6366f1; }

.bg-magenta { background-color: #9d174d; }
.text-magenta { color: #9d174d; }

/* Handwritten Typography */
.eco-card-title {
  font-family: 'Special Elite', 'Patrick Hand', cursive;
  font-size: 1.8rem;
  /* margin-bottom: 1rem; */
}

.eco-card-desc {
  font-family: 'Patrick Hand', 'Gochi Hand', cursive;
  font-size: 1.3rem;
  color: #334155;
  line-height: 1.2;
  /* margin-bottom: 1rem; */
}

.eco-card-link {
  font-family: var(--font-body), sans-serif;
  color: #3b82f6;
  text-decoration: underline;
  font-weight: 500;
  font-size: 1rem;
  transition: color 0.2s;
}

.eco-card-link:hover {
  color: #1d4ed8;
}

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

@media (max-width: 768px) {
  .eco-grid {
    grid-template-columns: 1fr;
  }
  .eco-title {
    font-size: 2.5rem;
  }
}

/* ==========================================================================
   WE ARE UNIQUE SECTION (FLN)
   ========================================================================== */

.unique-section {
  background-image: url("assets/FLN_product/why-chose-fln-cards.png");
  background-size: cover;
height: 888px;
    background-size: cover;
    text-align: center;
    padding-top: 2rem;
}

.unique-title {
  font-size: 2.8vw;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1vw;
  margin-top:5rem;
}

.unique-title span.highlight-blue { color: #3b82f6; }
.unique-title span.highlight-teal { color: #14b8a6; }

.unique-subtitle {
  color: #475569;
  font-size: 1vw;
  max-width: 50vw;
  margin: 0 auto 2vw;
  line-height: 1.6;
}

.unique-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* gap: 3vw; */
  width: 86vw;
  margin: 0 auto;
  position: relative;
      z-index: 2;
    margin-top: 13rem;
}

.unique-card {
  background-color: white;
  border-radius: 1.5rem;
  /* padding: 4vw 3vw 3vw; */
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  position: relative;
  transition: transform 0.3s ease;
  aspect-ratio: 1 / 1.1;
  height:70%;
}

.unique-card:hover {
  transform: translateY(-10px);
}

.unique-card-bg-1 {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(204,251,255,0.7) 100%);
  border: 2px dashed #06b6d4;
}

.unique-card-bg-2 {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(253,246,227,1) 100%);
  border: 2px dashed #d97706;
}

.unique-card-bg-3 {
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(204,251,255,0.7) 100%);
  border: 2px dashed #06b6d4;
}

.unique-icon {
  width: 5vw;
  height: 5vw;
  object-fit: contain;
  margin-bottom: 2vw;
}

.unique-card-title {
  font-size: 1.6vw;
  font-weight: 700;
  margin-bottom: 1vw;
  line-height: 1.4;
}

.text-darkblue { color: #0369a1; }
.text-olive { color: #b45309; }
.text-teal { color: #64EDAB; }

.unique-card-desc {
  font-size: 1.1vw;
  color: #334155;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .unique-section { padding: 10vw 2rem; background-size: cover; background-image: url('assets/FLN_product/We are Unique/We are Unique.png'); }
  .unique-grid { width: 90vw; grid-template-columns: 1fr; gap: 6vw; }
  .unique-card { aspect-ratio: auto; padding: 8vw 6vw; }
  .unique-title { font-size: 6vw; }
  .unique-subtitle { font-size: 3vw; max-width: 90vw; margin-bottom: 10vw; }
  .unique-card-title { font-size: 4vw; margin-bottom: 2vw; }
  .unique-icon { width: 12vw; height: 12vw; margin-bottom: 4vw; }
  .unique-card-desc { font-size: 3vw; }
}


/* ==========================================================================
   PROBLEM SOLUTION SECTION (FLN)
   ========================================================================== */
.problem-solution-section {
  width: 100vw;
  height: 56.5vw;
  background-image: url('assets/FLN_product/Problem Solution/Problem & Solution.png');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
  position: relative;
  overflow: hidden;
  margin-top: -5rem;
    z-index: 1;
}
.ps-cont{
  text-align: center;
}
.ps-challenge-container {
     position: absolute;
    left: 24%;
    top: 35%;
    width: 23%;
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    letter-spacing: -1px;
}

#ps-challenge-text {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.6vw;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.5;
  transition: opacity 0.3s ease;
  padding-left: 100px;
}

.ps-solution-container {
  position: absolute;
  left: 54%;
  top: 50%;
  width: 23%;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#ps-solution-text {
  font-family: 'Comic Sans MS', 'Chalkboard SE', 'Marker Felt', cursive, sans-serif;
  font-size: 1.6vw;
  font-weight: 600;
  color: #22c55e;
  line-height: 1.4;
  transition: opacity 0.3s ease;
  padding-right: 84px;
    padding-top: 155px;
}

.ps-arrow {
  position: absolute;
  top: 53%;
  width: 7vw;
  cursor: pointer;
  z-index: 10;
  transition: transform 0.2s ease;
  padding-left: 42px;
}

.ps-arrow:hover {
  transform: scale(1.2);
}

.ps-arrow-left {
     left: 21%;
}

.ps-arrow-right {
  right: 23%;
}

@media (max-width: 768px) {
  .problem-solution-section {
    height: 100vw;
  }
  #ps-challenge-text, #ps-solution-text {
    font-size: 3vw;
  }
  .ps-arrow {
    width: 6vw;
  }
}


/* ==========================================================================
   STAKEHOLDER SECTION (FLN)
   ========================================================================== */
.stakeholder-section {
  width: 100vw;
  /* height: 72.2vw; */
  position: relative;
  transition: background-image 0.4s ease-in-out;
  margin-left: -5rem;
}

.sh-hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 10;
}

.sh-teacher {
  left: 10%;
  top: 25%;
  width: 15%;
  height: 30%;
}

.sh-student {
  left: 25%;
  top: 20%;
  width: 20%;
  height: 30%;
}

.sh-head {
  left: 8%;
  top: 55%;
  width: 17%;
  height: 30%;
}

.sh-parent {
  left: 25%;
  top: 55%;
  width: 20%;
  height: 30%;
}

@media (max-width: 768px) {
  .stakeholder-section {
    height: 100vw;
  }
}

/* ==========================================
   VIDEO TESTIMONIALS
   ========================================== */

#testimonials {
    border-bottom: none;
}

.video-testimonials-section {
    padding-top: 1rem;
    padding-bottom: 5rem;
}
.video-card {
  background-image: none !important; background-color: #effbff;
      background-color: #ffffffe3 !important;
  /* padding: 0 !important; */
    padding: 1.25rem;
    position: relative;
    border-radius: 36px;
    background-color: var(--white);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 10px 30px rgb(0 0 0 / 6%);
}
.video-card .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    aspect-ratio: 16/9;
    border-radius:3px;
}
.video-card .play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.video-card .play-button-overlay:hover {
    background-color: rgba(255,255,255,0.45);
    transform: translate(-50%, -50%) scale(1.08);
}
.video-card .play-button-overlay svg {
    width: 32px;
    height: 32px;
    color: #fff;
    margin-left: 4px; /* visually center the play icon */
}


/* ==========================================
   CUSTOM DROPDOWN UI
   ========================================== */
.custom-dropdown {
    position: relative;
    width: 100%;
}
.custom-dropdown-selected {
    cursor: pointer;
    user-select: none;
    background-color: var(--white);
    /* Arrow is handled by .select-wrapper::after normally, but just in case we let it bleed through */
}
.custom-dropdown-options {
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-top: 0;
    margin-bottom: 4px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.15);
    z-index: 999;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    padding: 0.5rem 0;
}
.custom-dropdown-options.show {
    display: block;
    animation: fadeInDown 0.2s ease;
}
.custom-option {
    padding: 0.75rem 1.2rem;
    font-size: 0.9rem;
    color: var(--dark-blue);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.custom-option:hover {
    background-color: rgba(45, 91, 255, 0.05);
    color: var(--primary);
}
.custom-option.active {
    background-color: rgba(45, 91, 255, 0.1);
    font-weight: 700;
    color: var(--primary);
}
.custom-option.placeholder {
    color: #94a3b8;
    display: none; /* Hide the 'Select Product' option from the dropdown list */
}

/* Scrollbar styling for custom dropdown */
.custom-dropdown-options::-webkit-scrollbar {
    width: 6px;
}
.custom-dropdown-options::-webkit-scrollbar-track {
    background: transparent;
}
.custom-dropdown-options::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.custom-dropdown-options::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Remove Browser Autofill Background Color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: var(--dark-blue) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.yellow-dashed.card-divider {
    flex: 0 0 65px;
    width: 65px;
    margin: 0 1rem;
}
.yellow-dashed .dash-trail {
    flex-grow: 1;
    border-bottom: 3px dashed #eab308;
    margin: 0;
    opacity: 1;
}
.yellow-dashed .divider-arrow {
    color: #eab308;
    width: 20px;
    opacity: 1;
}
.part-icon.icon-purple {
    background: rgba(168, 85, 247, 0.15); /* Translucent purple */
    color: #c084fc;
    border-radius: 12px;
    padding: 10px;
    width: 48px;
    height: 48px;
}
.part-icon.icon-green {
    background: rgba(16, 185, 129, 0.15); /* Translucent green */
    color: #34d399;
    border-radius: 50%;
    padding: 10px;
    width: 44px;
    height: 44px;
}















/* FAQ Arrows for SML Page */
.sml-faq-question::after {
    content: '';
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.3s ease;
}

details[open] .sml-faq-question::after {
    transform: translateY(-50%) rotate(180deg);
}


/* ==========================================================================
   EVENTS PAGE STYLES
   ========================================================================== */

/* Hero Section */
.events-hero-section {
    position: relative;
    padding: 10rem 2rem 8rem 2rem;
    color: white;
    overflow: hidden;
}

.events-hero-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
}

.events-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.events-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, rgba(8,11,40,0.95) 0%, rgba(8,11,40,0.85) 50%, rgba(8,11,40,0.4) 100%);
    z-index: 1;
}

.events-hero-content {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.events-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 2rem;
}

.events-pill .dot {
    width: 6px;
    height: 6px;
    background-color: #34d399;
    border-radius: 50%;
    margin-right: 8px;
}

.events-title {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: white;
}

.text-blue-highlight {
    color: #2563eb;
}

.events-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.events-btn-demo {
    padding: 14px 30px;
    font-size: 1.1rem;
    border-radius: 8px;
}

/* Main Layout */
.events-main-section {
    padding: 4rem 2rem 8rem 2rem;
    background-color: #f8fafc;
}
.events-hero-gradient {
    background: linear-gradient(90deg, #3b82f6 0%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.events-main-container {
    max-width: 1300px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 3rem;
}

/* Top Tabs */
.events-tabs-header {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
    border-bottom: none;
    padding-bottom: 0;
}

.events-top-tabs {
    display: flex;
    gap: 2rem;
    border-bottom: 2px solid #e2e8f0;
}

.events-tab-link {
    background: none;
    border: none;
    padding: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    position: relative;
}

.events-tab-link.active {
    color: #2563eb;
}

.events-tab-link.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #2563eb;
}

.events-tab-pane {
    display: none;
}
.events-tab-pane.active {
    display: block;
}

/* Filter Pills */
.events-filter-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.events-pill-btn {
    background: #e2e8f0;
    border: none;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
}

.events-pill-btn.active {
    background: #2563eb;
    color: white;
}

.events-pill-btn:hover:not(.active) {
    background: #cbd5e1;
}

/* Grid & Cards */
.events-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 4rem;
}

.event-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.event-card-image {
    position: relative;
    height: 220px;
}

.event-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.5px;
}

.tag-purple { background-color: #a855f7; }
.tag-orange { background-color: #f59e0b; }

.event-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.event-card-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.event-card-content p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.event-meta {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 2rem;
}

.event-meta i {
    margin-right: 6px;
}

.event-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.event-view-link {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}

/* Pagination */
.events-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.page-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn.page-nav {
    width: auto;
    padding: 0 1rem;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 8px;
}

.page-btn:hover, .page-btn.active {
    background: #eff6ff;
    color: #2563eb;
}

.page-dots {
    display: flex;
    align-items: end;
    padding: 0 0.5rem;
    color: #64748b;
}

/* Sidebar */
.events-right-col {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.events-sidebar-box {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.03);
}

.why-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.why-item:last-child {
    margin-bottom: 0;
}

.why-icon {
    width: 40px;
    height: 40px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.why-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.why-text p {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
}

/* Filter Box */
.filter-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.filter-box-header h4 {
    font-size: 1.1rem;
    font-weight: 700;
}

.clear-all-btn {
    background: none;
    border: none;
    color: #2563eb;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-form-group {
    margin-bottom: 1.5rem;
}

.filter-form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.events-select, .events-date-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #475569;
    outline: none;
    font-family: inherit;
}

.filter-apply-btn {
    margin-top: 1rem;
    padding: 14px;
}

/* Features Section */
.events-features-section {
    padding: 4rem 2rem 8rem 2rem;
    background-color: white;
    text-align: center;
}

.events-features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.events-features-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 4rem;
    position: relative;
    display: inline-block;
}

.events-features-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #2563eb;
}

.events-features-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
}

.e-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-right: 1px solid #f1f5f9;
}

.e-feature-item:last-child {
    border-right: none;
}

.e-feature-icon {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}
.e-feature-icon.bg-blue { background: #eff6ff; color: #3b82f6; }
.e-feature-icon.bg-purple { background: #f3e8ff; color: #a855f7; }
.e-feature-icon.bg-indigo { background: #e0e7ff; color: #6366f1; }
.e-feature-icon.bg-teal { background: #ccfbf1; color: #14b8a6; }
.e-feature-icon.bg-sky { background: #e0f2fe; color: #0ea5e9; }
.e-feature-icon.bg-rose { background: #ffe4e6; color: #f43f5e; }

.e-feature-item p {
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.4;
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .events-main-container {
        grid-template-columns: 1fr;
    }
    
    .events-features-grid {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 3rem;
    }
    
    .e-feature-item:nth-child(3n) {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .events-hero-title {
        font-size: 3rem;
    }
    
    .events-grid {
        grid-template-columns: 1fr;
    }
    
    .events-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .e-feature-item:nth-child(2n) {
        border-right: none;
    }
    .e-feature-item:nth-child(3n) {
        border-right: 1px solid #f1f5f9; /* Restore if needed */
    }
}

/* ==========================================================================
   BROCHURES PAGE STYLES
   ========================================================================== */

/* Hero Section */
.bro-hero-section {
    background-color: #080b28; /* Dark navy */
    padding: 10rem 2rem 8rem 2rem;
    color: white;
}

.bro-hero-container {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.bro-hero-left {
    flex: 1;
    max-width: 600px;
}

.bro-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 3rem;
}

.bro-pill .dot {
    width: 6px;
    height: 6px;
    background-color: #34d399; /* teal dot */
    border-radius: 50%;
    margin-right: 8px;
}

.bro-title-wrapper {
    position: relative;
    margin-bottom: 2rem;
}

.bro-title-bg-text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 8rem;
    font-weight: 900;
    color: rgba(52, 211, 153, 0.2); /* Faint teal behind */
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

.bro-hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    position: relative;
    z-index: 1;
}

.bro-hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.6;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.bro-btn-demo {
    padding: 14px 30px;
    font-size: 1.1rem;
    border-radius: 8px;
    background-color: #2563eb;
    border: none;
}

.bro-hero-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.bro-hero-mockup {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    transform: rotate(5deg) scale(1.1); /* Match the slanted mockup look */
    transition: transform 0.3s ease;
}

.bro-hero-mockup:hover {
    transform: rotate(2deg) scale(1.15);
}

/* Main Grid Layout */
.bro-main-section {
    padding: 6rem 2rem 8rem 2rem;
    background-color: #f8fafc;
}

.bro-main-container {
    max-width: 1200px;
    margin: 0 auto;
}

.bro-section-header {
    margin-bottom: 4rem;
}

.bro-section-title {
    font-size: 3.5rem;
    font-weight: 900;
    color: #0f172a;
    margin-top: 1rem;
}

.text-gradient-teal {
    background: linear-gradient(90deg, #3b82f6, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Grid & Cards */
.bro-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.bro-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bro-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 50px rgba(0,0,0,0.08);
}

.bro-card-top {
    padding: 2.5rem 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bro-tag {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

.tag-blue {
    background-color: #eff6ff;
    color: #2563eb;
}

.tag-green {
    background-color: #ecfdf5;
    color: #059669;
}

.bro-card-top h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.bro-card-top p {
    font-size: 1rem;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.bro-download-btn {
    width: 100%;
    padding: 12px;
    font-weight: 600;
    background-color: #2563eb;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: auto; /* Pushes button perfectly to the bottom */
}

.bro-card-bottom {
    height: 250px; /* Fixed height for image area */
    width: 100%;
    overflow: hidden;
    flex-shrink: 0; /* Prevents image from shrinking when text above is long */
}

.bro-card-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bro-card:hover .bro-card-bottom img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 1024px) {
    .bro-hero-container {
        flex-direction: column;
        text-align: center;
    }
    
    .bro-title-bg-text {
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 6rem;
    }
    
    .bro-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bro-grid {
        grid-template-columns: 1fr;
    }
    
    .bro-section-title {
        font-size: 2.5rem;
    }
    
    .bro-title-bg-text {
        font-size: 4rem;
    }
    
    .bro-hero-title {
        font-size: 3.5rem;
    }
}


/* =========================================================================
   FAQ PAGE STYLES
   ========================================================================= */
.faq-hero-section {
    position: relative;
    padding: 8rem 5% 6rem 5%;
    min-height: 450px;
    display: flex;
    align-items: center;
    background-color: #0b1120;
    overflow: hidden;
}

.faq-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.faq-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.faq-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

.faq-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 50px;
    color: #e2e8f0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.faq-pill .dot {
    width: 6px;
    height: 6px;
    background-color: #38bdf8;
    border-radius: 50%;
}

.faq-title {
    font-size: 4rem;
    font-weight: 800;
     color: white; 
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.faq-hero-gradient {
    background: linear-gradient(135deg, #3b82f6, #2dd4bf);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-subtitle {
    font-size: 1.1rem;
    color: #94a3b8;
    max-width: 500px;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.btn.faq-btn-demo {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

/* Accordion Section */
.faq-main-section {
    background-color: #fafbfd;
    padding: 5rem 5%;
}

.faq-container {
    max-width: 1000px;
    margin: 0 auto;
}

.faq-section-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2rem;
}

.faq-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.active {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border-color: #cbd5e1;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.faq-num {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.faq-item.active .faq-num {
    background: #2563eb;
    color: white;
}

.faq-q-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0f172a;
}

.faq-icon {
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-answer p {
    padding: 7px 1.5rem 1.5rem 4rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    padding-left: 49px;
}

/* CTA Section */
.faq-cta-section {
    padding: 0 5% 5rem 5%;
    background-color: #fafbfd;
}

.faq-cta-container {
    max-width: 1200px;
    margin: 0 auto;
    background: linear-gradient(90deg, #050b24, #0f2c8a, #07102e);
    border-radius: 16px;
    padding: 3rem 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-cta-content h2 {
    color: white;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.faq-cta-content p {
    color: #94a3b8;
    font-size: 1.1rem;
    margin: 0;
}

.faq-cta-action .btn-outline-light {
    background: rgba(255,255,255,0.05);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.faq-cta-action .btn-outline-light:hover {
    background: rgba(255,255,255,0.15);
}

@media (max-width: 768px) {
    .faq-cta-container {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }
    .faq-answer p {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }
}


.faq-page, .faq-page * {
    font-family: 'Outfit', sans-serif !important;
}
.faq-q-text {
    font-weight: 500 !important;
}
.faq-item.active .faq-num {
    background: var(--primary) !important;
}
/* Ensure the accordion expands via CSS to bypass any JS issues */
.faq-item.active .faq-answer {
    max-height: 500px !important;
}


/* ========================================= */
/* GLOSSARY PAGE STYLES */
/* ========================================= */

.glossary-page {
    background-color: #f1f5f9;
}

/* HERO SECTION */
.glossary-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 50%, #312e81 100%);
    padding: 6rem 2rem 4rem;
    position: relative;
    overflow: hidden;
    color: white;
}

.glossary-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.glossary-hero-left {
    flex: 1;
    max-width: 600px;
}

.glossary-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.glossary-subtitle {
    font-size: 1.125rem;
    color: #e2e8f0;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.glossary-search-wrap {
    display: flex;
    background: white;
    padding: 0.5rem;
    border-radius: 999px;
    margin-bottom: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.glossary-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.5rem 1.5rem;
    font-size: 1rem;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
}

.glossary-search-btn {
    border-radius: 999px;
    padding: 0.75rem 2rem;
    font-weight: 600;
}

/* Alphabet Filter */
.alphabet-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.alpha-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alpha-btn:hover {
    background: white;
    transform: translateY(-2px);
}

.alpha-btn.active {
    background: #6366f1;
    color: white;
}

/* Hero Right: Nodes Graphic */
.glossary-hero-right {
    flex: 1;
    position: relative;
    height: 350px;
    display: none;
}

@media (min-width: 900px) {
    .glossary-hero-right { display: block; }
}

.glossary-nodes-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.g-node {
    position: absolute;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    width: 220px;
    z-index: 2;
}

.g-node h4 {
    font-size: 1rem;
    margin: 0.5rem 0 0.25rem;
    font-weight: 600;
}

.g-node p {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.4;
}

.g-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-block;
}

.g-badge-blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.g-badge-cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.g-badge-green { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.g-badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.g-node-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0f172a;
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
}

.g-node-center h4 { margin: 0; font-size: 0.95rem; font-weight: 600; }
.g-search-icon { color: #60a5fa; }

/* Node Positioning */
.g-node-1 { top: 0; left: 0; }
.g-node-2 { top: 0; right: 0; }
.g-node-3 { bottom: 0; left: 0; }
.g-node-4 { bottom: 0; right: 0; }

.g-nodes-lines {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
}

.g-nodes-lines .dashed-line {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1.5;
    stroke-dasharray: 4, 4;
}

/* CONTENT LAYOUT */
.glossary-content-section {
    padding: 4rem 2rem;
}

.glossary-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.glossary-main {
    flex: 1;
}

.glossary-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 900px) {
    .glossary-container { flex-direction: column; }
    .glossary-sidebar { width: 100%; }
}

/* MAIN CONTENT */
.glossary-header {
    margin-bottom: 2rem;
}

.glossary-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.badge-count {
    background: #6366f1;
    color: white;
    font-size: 0.75rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
}

.letter-group {
    margin-bottom: 3rem;
}

.letter-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.letter-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letter-line {
    flex: 1;
    height: 1px;
    background: #cbd5e1;
}

.letter-count {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

/* Term Cards */
.term-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.term-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.term-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.term-body {
    flex: 1;
}

.term-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.term-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.term-tag {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tag-learning { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
.tag-assessment { background: rgba(59, 130, 246, 0.1); color: #2563eb; }

.term-body p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* SIDEBAR WIDGETS */
.g-widget {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.g-widget h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.g-search-small input {
    width: 100%;
    padding: 0.6rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
}

.g-search-small input:focus { border-color: #3b82f6; }

/* Category List */
.g-category-list {
    list-style: none;
    padding: 0; margin: 0;
}

.g-category-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
    transition: color 0.2s ease;
}

.g-category-list li:last-child { border-bottom: none; }
.g-category-list li:hover { color: #2563eb; }

.g-cat-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
}

.cat-icon-wrap {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-bg-assessment { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.cat-bg-learning { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.cat-bg-leadership { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.cat-bg-tech { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.cat-bg-research { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.cat-bg-teaching { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.g-cat-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cat-count-num {
    background: #f1f5f9;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}

/* Popular Tags */
.g-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.g-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    background: white;
    border: 1px solid #e2e8f0;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.g-tag:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #1e293b;
}

/* Subscribe Widget */
.g-widget-subscribe {
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    color: white;
    text-align: center;
    box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.3);
}

.subscribe-icon {
    margin-bottom: 1rem;
}

.g-widget-subscribe h4 {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.g-widget-subscribe p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.g-subscribe-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.g-subscribe-form input {
    padding: 0.7rem 1rem;
    border-radius: 999px;
    border: none;
    outline: none;
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
}

.btn-white {
    background: white;
    color: #6366f1;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.7rem;
    width: 100%;
}

.btn-white:hover {
    background: #f8fafc;
}

.g-subscribe-note {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.75rem;
}


/* Fix Glossary Hero Text Colors */
.glossary-hero h1,
.glossary-hero h4,
.glossary-hero p {
    color: white !important;
}
.glossary-hero-left .glossary-subtitle {
    color: #e2e8f0 !important;
}
.g-node p {
    color: #94a3b8 !important;
}
.glossary-search-input {
    color: #1e293b !important;
}
.glossary-search-input::placeholder {
    color: #94a3b8 !important;
}


/* Fix FLN problem-solution overlap */
.ps-challenge-container,
.ps-solution-container {
    pointer-events: none !important;
}
#ps-challenge-text {
    transition: opacity 0.3s ease !important;
}


/* ==========================================================================
   INTERACTIVE LEXILE SCORE SECTION
   ========================================================================== */
.lexile-interactive-section {
  padding: 4rem 2rem;
  background-color: #f9fafb;
}

.lexile-main-card {
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 3rem;
  /* max-width: 1200px; */
  margin: 0 auto;
  border: 1px solid #e5e7eb;
}

.lexile-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}

.lexile-left-label {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-size: 1.25rem;
  color: #1e3a8a;
}

.lexile-right-score {
  text-align: right;
}

.lexile-score-display {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

.lexile-score-hint {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 0.25rem;
}

/* Slider Track Area */
.lexile-slider-container {
  position: relative;
  margin-bottom: 4rem;
  padding-top: 3rem; /* Space for tooltip */
}

.lexile-track {
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(to right, #f59e0b 0%, #10b981 50%, #2563eb 100%);
  width: 100%;
  position: relative;
  z-index: 1;
}

/* Native Range Input over the custom track */
.lexile-range-input {
  position: absolute;
  top: 3rem;
  left: 0;
  width: 100%;
  height: 20px;
  -webkit-appearance: none;
  background: transparent;
  z-index: 10;
  margin: 0;
  cursor: pointer;
}

.lexile-range-input:focus {
  outline: none;
}

.lexile-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent; /* Invisible, we use a custom DOM thumb */
    cursor: grab;
}

.lexile-range-input::-moz-range-thumb {
    appearance: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: grab;
}

.lexile-range-input:active::-webkit-slider-thumb {
  cursor: grabbing;
}

/* Custom Visual Thumb & Tooltip */
.lexile-tooltip-wrapper {
  position: absolute;
  top: 0;
  left: 53.5%; /* Default for 750 / 1400 */
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: left 0.1s linear;
}

.lexile-tooltip {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 700;
  color: #1e3a8a;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.lexile-thumb {
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  border: 4px solid #3b82f6;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lexile-thumb-inner {
  width: 10px;
  height: 10px;
  background: #3b82f6;
  border-radius: 50%;
}

/* Tick Marks */
.lexile-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.75rem;
  position: relative;
  padding: 0 10px; /* offset for thumb width */
}

.lexile-ticks .tick {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.lexile-ticks .tick::before {
  content: '';
  position: absolute;
  top: -15px;
  width: 1px;
  height: 5px;
  background: #d1d5db;
}

.tick-score {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.tick-grade {
  font-family: var(--font-body), 'Outfit', sans-serif;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* Bottom Cards */
.lexile-bottom-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.lexile-complexity-card, .lexile-breakdown-card {
  border: 1.5px solid #bfdbfe;
  border-radius: 1rem;
  padding: 2rem;
  background: white;
}

.lexile-card-header {
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-size: 1.1rem;
  color: #4b5563;
  margin-bottom: 1.5rem;
}

.lexile-badge-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.lexile-badge {
  background: #eff6ff;
  color: #2563eb;
  padding: 0.4rem 1rem;
  border-radius: 2rem;
  font-family: var(--font-heading), 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
}

.lexile-mapped {
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: #6b7280;
}
.lexile-mapped strong {
  color: #111827;
}

.lexile-desc-text {
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: #4b5563;
  line-height: 1.6;
  font-size: 1rem;
}

.lexile-mapped-desc {
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: #6b7280;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.lexile-ref-title {
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: #6b7280;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}

.lexile-ref-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body), 'Outfit', sans-serif;
  color: #6b7280;
  font-size: 0.95rem;
}

.lexile-ref-list li {
  padding: 0.4rem 0;
  transition: color 0.2s, font-weight 0.2s;
}

.lexile-ref-list li.active {
  color: #2563eb;
  font-weight: 700;
}

@media (max-width: 768px) {
  .lexile-bottom-cards {
    grid-template-columns: 1fr;
  }
  .lexile-top-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .lexile-right-score {
    text-align: left;
  }
  .tick-grade {
    display: none;
  }
}


/* --- RECONSTRUCTED PRODUCT PAGES PATCH --- */
/* Fixes missing SVG constraints and layout wrappers for i3dp.html and cs.html */

/* cs.html - Core Skills Hero Fixes */
.cs-skills-list { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem; }
.cs-skills-list .skills-col { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.cs-skills-list .skills-col li { display: flex; align-items: center; gap: 0.75rem; font-size: 1.1rem; font-weight: 500; color: #1e293b; }
.skill-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; }
.skill-icon svg { width: 24px; height: 24px; opacity: 0.7; }
.cs-icon-orange { color: #f59e0b; background: transparent; }
.cs-icon-green { color: #10b981; background: transparent; }
.cs-icon-teal { color: #14b8a6; background: transparent; }
.cs-icon-blue { color: #3b82f6; background: transparent; }
.cs-icon-purple { color: #8b5cf6; background: transparent; }
.cs-icon-pink { color: #ec4899; background: transparent; }

/* i3dp.html - Hero Pills and Compare Cards Fixes */
.i3dp-hero-pills-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; }
.i3dp-icon-pill { display: flex; align-items: center; gap: 0.75rem; }
.i3dp-icon-pill .icon-circle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(45, 91, 255, 0.1); color: #2d5bff; border-radius: 50%; }
.i3dp-icon-pill .icon-circle svg { width: 22px; height: 22px; }
.i3dp-icon-pill span { font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: #1e293b; }

.i3dp-compare-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.ecosystem-card { background: #fff; padding: 2rem; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
.ecosystem-icon-wrapper { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.ecosystem-icon-wrapper svg { width: 28px; height: 28px; }
.ecosystem-card h3 { font-size: 1.25rem; color: #0f172a; margin-bottom: 0.75rem; line-height: 1.3; font-weight: 700; }
.ecosystem-card p { font-size: 1rem; color: #475569; line-height: 1.6; }
.bg-orange-light { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.bg-green-light { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.bg-blue-light { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.bg-red-light { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.bg-purple-light { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }

/* i3dp.html - Outcome List SVGs */
.outcome-list li svg { width: 20px; height: 20px; flex-shrink: 0; }
.outcome-badges .badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #f1f5f9; color: #64748b; font-size: 14px; }

/* --- RECONSTRUCTED FLN & I3DP ALIGNMENT PATCH --- */

/* FLN Modules - Flip Grid */
.holistic-flip-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 1rem;
}
.holistic-flip-card {
    background-color: transparent;
    width: 250px;
    height: 330px;
    perspective: 1000px;
}
.holistic-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.holistic-flip-card:hover .holistic-flip-inner {
    transform: rotateY(180deg);
}
.holistic-flip-front, .holistic-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1vw;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
.holistic-flip-front img, .holistic-flip-back img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 1vw;
}
.holistic-flip-back {
    transform: rotateY(180deg);
}
.holistic-title { text-align: center; font-size: 2.2rem; color: #0f172a; font-weight:800;     padding-top: 2rem; }
.holistic-subtitle { text-align: center; font-size: 1.1rem; color: #64748b; }

/* i3DP Comparison Cards */
.i3dp-compare-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}
.compare-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.compare-card.traditional-card { border-top: 4px solid #ef4444; }
.compare-card.future-ready-card { border-top: 4px solid #3b82f6; }
.compare-header { padding: 1.5rem; text-align: center; }
.compare-header h3 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.compare-header h3.text-blue { color: #3b82f6; }
.compare-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
}
.compare-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.compare-icon {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.compare-icon.icon-sad { color: #ef4444; }
.compare-icon.icon-happy { color: #3b82f6; }
.compare-icon svg { width: 24px; height: 24px; }
.compare-list { list-style: none; padding: 2.5rem 1.5rem 1.5rem; margin: 0; }
.compare-list li { padding: 0.75rem 0; border-bottom: 1px solid #f1f5f9; color: #475569; font-size: 0.95rem; }
.compare-list li:last-child { border-bottom: none; }

/* i3DP Outcomes Grid */
.outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}
.outcome-card {
    background: #fff;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
}
.outcome-card.card-blue { border-top: 4px solid #3b82f6; }
.outcome-card.card-green { border-top: 4px solid #10b981; }
.outcome-card.card-purple { border-top: 4px solid #8b5cf6; }
.outcome-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.outcome-tag.tag-blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.outcome-tag.tag-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.outcome-tag.tag-purple { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
.outcome-img-wrapper { width: 100%; height: 180px; margin: 1.5rem 0; border-radius: 12px; overflow: hidden; }
.outcome-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.outcome-list-title { font-size: 0.95rem; font-weight: 700; margin: 1.5rem 0 1rem; text-transform: uppercase; letter-spacing: 0.5px; }
.outcome-list-title.title-blue { color: #3b82f6; }
.outcome-list-title.title-green { color: #10b981; }
.outcome-list-title.title-purple { color: #8b5cf6; }
.outcome-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.outcome-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; color: #475569; line-height: 1.4; }
.outcome-list.list-blue li svg { color: #3b82f6; }
.outcome-list.list-green li svg { color: #10b981; }
.outcome-list.list-purple li svg { color: #8b5cf6; }

/* --- RECONSTRUCTED CSS ALIGNMENTS PART 3 --- */

/* cs.html - Why Core Skills Layout */
.cs-new-why-container { max-width: 1440px; margin: 0 auto; }
.cs-new-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: flex-start;
    margin-top: 3rem;
}
.cs-new-why-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cs-new-why-content h3 {
    font-size: 1.8rem;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}
.cs-why-desc {
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 2rem;
    line-height: 1.6;
}
.cs-why-highlight-new {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
}
.cs-why-pillars {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    text-align: center;
}
.cs-pillar-item img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 1rem;
}
.cs-pillar-item h4 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.25rem; }
.cs-pillar-item h4.text-blue { color: #3b82f6; }
.cs-pillar-item h4.text-green { color: #10b981; }
.cs-pillar-item h4.text-purple { color: #8b5cf6; }
.cs-pillar-item span { font-size: 0.95rem; color: #64748b; }

/* i3dp.html - Ecosystem Grid Layout */
.i3dp-ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* --- RECONSTRUCTED CSS ALIGNMENTS PART 4 (LP Section & Highlights) --- */

/* cs.html - How Learning Happens (LP Container) */
.cs-lp-new-container {
    max-width: 1440px;
    margin: 6rem auto 4rem auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}
.cs-lp-new-content h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 3rem;
}
.cs-lp-new-steps {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
}
.cs-lp-step {
    text-align: center;
    flex: 1;
}
.cs-lp-step .step-icon {
    width: 64px;
    height: 64px;
    background: #e0e7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #2563eb;
}
.cs-lp-step .step-icon svg {
    width: 28px;
    height: 28px;
}
.cs-lp-step h4 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}
.cs-lp-step p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.5;
}
.cs-lp-new-image {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.cs-lp-new-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Why Core Skills Highlight Text */
.cs-why-highlight-new {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2563eb; /* Matches the blue text in screenshot 2 */
    margin-bottom: 2rem;
}

/* --- GLOBAL BUTTON OVERRIDES (User Request) --- */
.btn, .btn-primary, .btn-secondary-filled, .btn-outline, .btn-submit,
.btn-view-more, .btn-download-brochure, .free-demo-btn, .btn-secondary-outline,
.btn-outline-light, .btn-blue, .btn-glass, .btn-solid-blue, .btn-outline-blue,
.btn-white, .btn-gradient, .btn-dark-outline, .btn-apply, .btn-submit-app,
.btn-book-demo, .btn-load-more, .btn-fln-blue, .btn-fln-watch {
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
}

/* --- OUR APPROACH SECTION ALIGNMENT FIX (index.html) --- */
.why-eksaq-section {
    padding: 5rem 2rem;
}
.why-eksaq-title {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 1rem auto;
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
}
.why-eksaq-description {
    text-align: left;
    max-width: 1200px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
}

/* --- CAROUSEL OVERFLOW FIX --- */
.carousel-viewport, .testimonials-viewport {
    overflow: hidden !important;
    padding: 20px 4px;
    margin: -20px -4px;
}

/* --- GLOBAL CAROUSEL ANIMATION OVERRIDE --- */
.carousel-track, .testimonials-track, .cases-track {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* ============================
   HPC DEMO FORM ALIGNMENT FIX
   ============================ */
.hpc-demo-layout .demo-form-card {
    padding: 3rem 2.5rem !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hpc-demo-layout .demo-form {
    padding: 0 !important; 
    display: flex !important; /* Override the global grid applied to demo-form */
    flex-direction: column;
    gap: 1.25rem;
}

.hpc-demo-layout .demo-form-card h3 {
    margin: 0 0 2rem 0 !important;
}

/* Ensure info panel matches height */
.hpc-demo-layout .demo-info-card {
    justify-content: flex-start;
}
.demo-contact-glass {
    margin-top: 3rem; /* Add specific spacing below checklist */
}

/* Make sure the form rows work */
.hpc-demo-layout .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* ============================
   HPC WHY CHOOSE ALIGNMENT FIX
   ============================ */
.hpc-why-choose-header {
    text-align: center !important;
}

.transform-headers {
    grid-template-columns: 1fr auto 1fr !important;
    gap: 2rem !important;
}

.th-badge {
    white-space: nowrap !important;
}
/* =========================================
   i3DP Page V2 (Figma Redesign)
   ========================================= */

.i3dp-page {
    font-family: 'Outfit', sans-serif !important;
}

/* HERO SECTION */


/* Radial Glow Behind Lady */


.i3dp-v2-container {
    /* max-width: 1280px; */
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
}

/* LEFT COLUMN */
.i3dp-v2-content {
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.i3dp-v2-content h1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.i3dp-v2-desc {
    font-size: 1.1rem;
    color: #e2e8f0;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 90%;
    font-weight: 300;
}

.i3dp-v2-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 4rem;
}

.i3dp-v2-btn-blue {
    background-color: #2D41DB;
    color: white;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    border: none;
}

.i3dp-v2-btn-outline {
    background-color: transparent;
    color: white;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.i3dp-v2-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.i3dp-v2-icon-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.i3dp-v2-icon-pill .icon-bg {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2D41DB;
}

.i3dp-v2-icon-pill .icon-bg svg {
    width: 24px;
    height: 24px;
}

.i3dp-v2-icon-pill span {
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}

/* RIGHT COLUMN (VISUALS) */
.i3dp-v2-visuals {
    position: relative;
    height: 100%;
    min-height: 600px;
}

.hero-main-img {
    position: absolute;
    bottom: -2rem; 
    right: 5%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

/* FLOATING CARDS */
.float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
    color: #0f172a;
    font-size: 0.8rem;
}

.fc-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.fc-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e0e7ff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-icon svg { width: 14px; height: 14px; }
.fc-icon.icon-purple { background: #f3e8ff; color: #a855f7; }
.fc-icon.icon-blue { background: #e0e7ff; color: #3b82f6; }
.fc-icon.icon-orange { background: #ffedd5; color: #f97316; }

/* Progress Card */
.card-progress { top: 10%; right: -5%; width: 280px; background: rgba(255, 255, 255, 0.15); border-color: rgba(255,255,255,0.3); color: white; }
.card-progress .fc-header { color: white; }
.card-progress .fc-icon { background: white; color: #3b82f6; }
.card-progress p { font-size: 0.75rem; color: rgba(255,255,255,0.8); margin-bottom: 0.75rem; line-height: 1.4; }
.progress-track { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; margin-bottom: 0.5rem; }
.progress-fill { height: 100%; background: #a855f7; border-radius: 3px; }
.progress-percent { font-size: 0.7rem; font-weight: 700; }

/* Tools Card */
.card-tools { top: 25%; left: -5%; width: 220px; }
.card-tools ul { list-style: none; padding: 0; margin: 0; }
.card-tools ul li { margin-bottom: 0.4rem; padding-left: 1rem; position: relative; color: #64748b; font-size: 0.75rem;}
.card-tools ul li::before { content: "?"; position: absolute; left: 0; color: #3b82f6; }

/* Create Card */
.card-create { top: 45%; right: -15%; width: 240px; }
.card-create p { color: #64748b; margin: 0; line-height: 1.4; }

/* Design Card */
.card-design { bottom: 15%; left: 0%; width: 220px; }
.card-design ul { list-style: none; padding: 0; margin: 0; }
.card-design ul li { margin-bottom: 0.4rem; padding-left: 1rem; position: relative; color: #64748b; font-size: 0.75rem;}
.card-design ul li::before { content: "?"; position: absolute; left: 0; color: #3b82f6; }

/* Cert Card */
.card-cert { bottom: 5%; right: 0; width: 260px; background: rgba(255, 255, 255, 0.15); border-color: rgba(255,255,255,0.3); color: white; }
.card-cert .fc-header { color: white; }
.card-cert p { font-size: 0.75rem; color: rgba(255,255,255,0.9); margin: 0; line-height: 1.4; }

@media (max-width: 992px) {
    .i3dp-v2-container { grid-template-columns: 1fr; }
    .i3dp-v2-visuals { display: none; }
    .i3dp-v2-hero { padding: 8rem 2rem 4rem; }
}
/* =========================================
   i3DP COMPARE SECTION V2
   ========================================= */
.i3dp-page .i3dp-compare-section {
    background-color: #F4F6FB;
    padding: 4rem 2rem;
}

.i3dp-page .i3dp-compare-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.i3dp-page .i3dp-compare-text h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.i3dp-page .i3dp-compare-text p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.i3dp-page .i3dp-compare-cards {
    display: block;
    width: 100%;
}

.i3dp-page .compare-card {
    background: #ffffff;
    border: 1px solid #bfdbfe !important;
    border-radius: 24px !important;
    padding: 1.5rem;
    box-shadow: none !important;
    border-top: 1px solid #bfdbfe !important; /* Override old colored top border */
}

.i3dp-page .compare-header {
    padding: 0 0 1rem 0;
    text-align: center;
}

.i3dp-page .traditional-card .compare-header h3 {
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.i3dp-page .future-ready-card .compare-header h3 {
    color: #2D41DB;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.i3dp-page .compare-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: visible; /* To allow icon to overlap out slightly */
    height: 140px;
    margin-bottom: 2rem;
}

.i3dp-page .compare-image-wrapper img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.i3dp-page .compare-icon {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e2e8f0;
    color: #64748b;
    border: 3px solid #ffffff;
}

.i3dp-page .icon-happy {
    background: #e0e7ff;
    color: #8b5cf6;
}

.i3dp-page .compare-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.i3dp-page .compare-list li {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.75rem;
    position: relative;
    padding-left: 1.2rem;
}

.i3dp-page .compare-list li::before {
    content: "?";
    position: absolute;
    left: 0;
    color: #94a3b8;
}

@media (max-width: 992px) {
    .i3dp-page .i3dp-compare-container {
        grid-template-columns: 1fr;
    }
}
/* =========================================
   i3DP ECOSYSTEM SECTION V2
   ========================================= */
.i3dp-page .i3dp-ecosystem-section {
    background-color: #ffffff;
    padding: 6rem 2rem;
}
.i3dp-page .i3dp-ecosystem-header {
    text-align: center;
    margin-bottom: 4rem;
}
.i3dp-page .i3dp-ecosystem-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 1rem;
}
.i3dp-page .i3dp-ecosystem-header p {
    font-size: 1.1rem;
    color: #64748b;
}
.i3dp-page .i3dp-ecosystem-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
}
.i3dp-page .ecosystem-card {
    background: #ffffff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
    padding: 2rem 1.5rem !important;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.i3dp-page .ecosystem-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
}
.i3dp-page .ecosystem-card h3 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
}
.i3dp-page .ecosystem-card p {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}
@media (max-width: 1200px) {
    .i3dp-page .i3dp-ecosystem-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .i3dp-page .i3dp-ecosystem-grid { grid-template-columns: 1fr; }
}

/* =========================================
   i3DP FEATURES SECTION V2
   ========================================= */
.i3dp-page .i3dp-features-section {
    background-color: #F8FAFC;
    padding: 6rem 2rem;
}
.i3dp-page .i3dp-features-header {
    text-align: center;
    margin-bottom: 4rem;
}
.i3dp-page .i3dp-features-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 1rem;
}
.i3dp-page .i3dp-features-header p {
    font-size: 1.1rem;
    color: #64748b;
}
.i3dp-page .i3dp-features-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.i3dp-page .feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.i3dp-page .feature-icon {
    width: 44px;
    height: 44px;
    background: #e0e7ff;
    color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.i3dp-page .feature-icon svg {
    width: 20px;
    height: 20px;
}
.i3dp-page .feature-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}
.i3dp-page .feature-content p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 992px) {
    .i3dp-page .i3dp-features-grid { grid-template-columns: 1fr; }
}

/* =========================================
   i3DP GLANCE SECTION V2
   ========================================= */
.i3dp-page .i3dp-glance-section {
    background-color: #F8FAFC;
    padding: 4rem 2rem 6rem;
}
.i3dp-page .i3dp-glance-header {
    text-align: center;
    margin-bottom: 4rem;
}
.i3dp-page .i3dp-glance-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 1rem;
}
.i3dp-page .i3dp-glance-header p {
    font-size: 1rem;
    color: #64748b;
}
.i3dp-page .i3dp-glance-stats {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.i3dp-page .glance-stat {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.i3dp-page .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.i3dp-page .stat-icon svg {
    width: 32px;
    height: 32px;
}
.i3dp-page .stat-info h4 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.25rem 0;
    line-height: 1;
}
.i3dp-page .stat-info p {
    font-size: 0.9rem;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}
.i3dp-page .stat-divider {
    width: 1px;
    height: 60px;
    background-color: #e2e8f0;
}
@media (max-width: 992px) {
    .i3dp-page .i3dp-glance-stats {
        flex-direction: column;
        gap: 2rem;
    }
    .i3dp-page .stat-divider {
        width: 100%;
        height: 1px;
    }
}
/* =========================================
   USER CORRECTIONS FOR V2
   ========================================= */

/* Hero Section: Use uploaded banner image, remove radial glow */
.i3dp-v2-hero {
    background: url('assets/i3dp-banner.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding: 6rem 2rem 4rem !important; /* Ensure enough padding so banner shows well */
    min-height: 700px;
}

.i3dp-v2-hero::before {
    display: none !important;
}

/* Compare Section: Center icon exactly on image bottom edge */
.i3dp-page .compare-image-wrapper {
    margin-bottom: 2.5rem !important; /* Add more space below image for icon and list */
}

.i3dp-page .compare-icon {
    bottom: -18px !important; /* Exactly half of 36px height */
    z-index: 10;
}

/* =========================================
   USER CORRECTIONS V3
   ========================================= */

/* Fix the corrupted bullet and borders in Compare list */
.i3dp-page .compare-list {
    margin-top: 2rem !important;
}

.i3dp-page .compare-list {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 1.5rem auto !important;
}
.i3dp-page .compare-list li {
    border-bottom: none !important;
    padding: 0.4rem 0 0.4rem 1.2rem !important;
    font-size: 1.1rem !important; /* Increased font size */
    width: fit-content !important;
    text-align: left !important;
}

.i3dp-page .compare-list li::before {
    content: '\2022' !important; 
    top: 0.4rem;
}

/* Fix Ecosystem cards being too squished */
.i3dp-page .i3dp-ecosystem-grid {
    gap: 1rem !important;
}

.i3dp-page .ecosystem-card {
    padding: 1.5rem 1rem !important;
}

.i3dp-page .ecosystem-card h3 {
    font-size: 0.85rem !important;
    margin-bottom: 0.75rem !important;
}

.i3dp-page .ecosystem-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 1rem !important;
}
/* =========================================
   USER CORRECTIONS V4 - Compare Section Alignment
   ========================================= */

/* 40% text, 60% cards split */
.i3dp-page .i3dp-compare-container {
    grid-template-columns: 4fr 6fr !important; 
    gap: 4rem !important;
}

/* Fix the massive spacing inside the list */
.i3dp-page .compare-list {
    padding: 0 !important; /* Remove old padding that was pushing things down */
    margin-top: 1.5rem !important;
}

.i3dp-page .compare-list li {
    padding: 0.3rem 0 0.3rem 1.2rem !important;
    margin-bottom: 0.3rem !important;
}

/* Adjust image spacing */
.i3dp-page .compare-image-wrapper {
    margin-bottom: 1.5rem !important;
    height: 200px !important; /* Balanced height */
}

/* Title text */
.i3dp-page .i3dp-compare-text h2 {
    margin-bottom: 1rem !important;
}

.i3dp-page .i3dp-compare-text p {
    margin-bottom: 1rem !important;
}
/* =========================================
   USER CORRECTIONS V5 - Glance Section
   ========================================= */
.i3dp-page .i3dp-glance-section {
    background-color: #ffffff !important;
}
/* =========================================
   TANGIBLE OUTCOMES SECTION V2
   ========================================= */
.i3dp-page .i3dp-outcomes-v2 {
    padding: 6rem 2rem;
}

.i3dp-page .outcomes-header {
    text-align: center;
    margin-bottom: 4rem;
}

.i3dp-page .outcomes-header .subtitle {
    color: #2D41DB;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.i3dp-page .outcomes-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 1rem;
}

.i3dp-page .outcomes-header .desc {
    font-size: 1.1rem;
    color: #475569;
}

.i3dp-page .outcomes-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.i3dp-page .outcome-card {
    border-radius: 20px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.i3dp-page .card-blue { background-color: #F4F9FF; border: 1px solid #dbeafe; }
.i3dp-page .card-green { background-color: #F2FCF5; border: 1px solid #d1fae5; }
.i3dp-page .card-purple { background-color: #F9F5FF; border: 1px solid #f3e8ff; }

.i3dp-page .oc-pill {
    display: inline-block;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    align-self: flex-start;
}
.i3dp-page .pill-blue { background-color: #2563eb; }
.i3dp-page .pill-green { background-color: #10b981; }
.i3dp-page .pill-purple { background-color: #8b5cf6; }

.i3dp-page .outcome-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
}

.i3dp-page .oc-desc {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.i3dp-page .oc-img {
    margin-bottom: 1.5rem;
    width: 100%;
}

.i3dp-page .oc-img img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.i3dp-page .outcome-card h4 {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}
.i3dp-page .outcome-card h4:first-of-type { margin-top: 0; }

.i3dp-page .text-blue { color: #2563eb; }
.i3dp-page .text-green { color: #10b981; }
.i3dp-page .text-purple { color: #8b5cf6; }

.i3dp-page .oc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.i3dp-page .oc-list li {
    font-size: 0.8rem;
    color: #475569;
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.4;
}

.i3dp-page .oc-list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
}

.i3dp-page .list-blue li::before { background: #dbeafe; color: #2563eb; }
.i3dp-page .list-green li::before { background: #d1fae5; color: #10b981; }
.i3dp-page .list-purple li::before { background: #f3e8ff; color: #8b5cf6; }

.i3dp-page .oc-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.i3dp-page .oc-icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.i3dp-page .oc-nav-pill {
    display: flex;
    align-items: center;
    background: #1e293b;
    color: white;
    border-radius: 20px;
    height: 32px;
    padding: 0 0.75rem;
    gap: 0.5rem;
}

.i3dp-page .oc-nav-pill svg { width: 14px; height: 14px; }
.i3dp-page .oc-nav-pill .div-line { width: 1px; height: 14px; background: rgba(255,255,255,0.2); }

@media (max-width: 992px) {
    .i3dp-page .outcomes-grid { grid-template-columns: 1fr; }
}

/* Adjust full width */
.i3dp-page .outcomes-grid {
    max-width: 1500px !important; /* Increase from 1280 to 1500 for a much wider spread */
    padding: 0 1rem;
}
/* =========================================
   STAKEHOLDERS SECTION
   ========================================= */
.i3dp-page .i3dp-stakeholders-section {
    background-color: #0f172a;
    padding: 5rem 2rem;
    margin-top: -121px;
}

.i3dp-page .stakeholders-container {
    max-width: 1400px;
    margin: 0 auto;
}

.i3dp-page .stakeholders-container h2 {
    text-align: center;
    color: white;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 3rem;
}

.i3dp-page .stakeholders-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

.i3dp-page .sh-card {
    background: white;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.i3dp-page .sh-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.i3dp-page .sh-icon svg { width: 24px; height: 24px; }
.i3dp-page .sh-blue { background: #eff6ff; color: #2563eb; }
.i3dp-page .sh-green { background: #ecfdf5; color: #10b981; }
.i3dp-page .sh-orange { background: #fff7ed; color: #f59e0b; }
.i3dp-page .sh-purple { background: #faf5ff; color: #8b5cf6; }
.i3dp-page .sh-teal { background: #f0fdfa; color: #14b8a6; }

.i3dp-page .sh-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.i3dp-page .sh-card p {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 992px) {
    .i3dp-page .stakeholders-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .i3dp-page .stakeholders-grid { grid-template-columns: 1fr; }
}

/* =========================================
   FAQ SECTION
   ========================================= */
.i3dp-page .i3dp-faq-section {
    background: white;
    padding: 6rem 2rem;
}

.i3dp-page .faq-container {
    max-width: 900px;
    margin: 0 auto;
}

.i3dp-page .faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.i3dp-page .faq-header .subtitle {
    color: #8b5cf6;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.i3dp-page .faq-header h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    color: #0f172a;
    font-weight: 800;
    margin-bottom: 1rem;
}

.i3dp-page .faq-header .desc {
    color: #475569;
    font-size: 1.1rem;
}

.i3dp-page .faq-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.i3dp-page .faq-item {
    background: white;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.i3dp-page .faq-item:hover {
    border-color: #7dd3fc;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}

.i3dp-page .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.i3dp-page .faq-icon {
    width: 20px;
    height: 20px;
    color: #38bdf8;
}

/* =========================================
   CTA SECTION
   ========================================= */
.i3dp-page .i3dp-cta-section {
    background: linear-gradient(135deg, #1e3a8a 0%, #4c1d95 100%);
    padding: 6rem 2rem;
    position: relative;
    overflow: hidden;
}

.i3dp-page .cta-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.i3dp-page .cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 2rem;
}

.i3dp-page .cta-pill .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
}

.i3dp-page .i3dp-cta-section h2 {
    color: white;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.i3dp-page .text-light-blue { color: #93c5fd !important; }

.i3dp-page .i3dp-cta-section p {
    color: #cbd5e1;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.i3dp-page .cta-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.i3dp-page .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 12px !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.i3dp-page .btn-white {
    background: white;
    color: #2563eb;
}
.i3dp-page .btn-white svg { width: 18px; height: 18px; }
.i3dp-page .btn-white:hover { background: #f8fafc; }

.i3dp-page .btn-outline-light {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
}
.i3dp-page .btn-outline-light:hover { background: rgba(255,255,255,0.2); }

.i3dp-page .btn-purple {
    background: #8b5cf6 !important;
    color: white !important;
    border: none !important;
}
.i3dp-page .btn-purple:hover { background: #7c3aed !important; }
/* Fixes for alignment */
.i3dp-page .faq-item svg {
    width: 24px !important;
    height: 24px !important;
    color: #38bdf8;
    flex-shrink: 0;
}

.i3dp-page .btn {
    width: max-content !important;
    flex: 0 0 auto !important;
}
/* Update compare list visibility */
.i3dp-page .compare-list li {
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

.i3dp-page .compare-list li::before {
    color: #94a3b8;
}

.i3dp-page .future-ready-card .compare-list li {
    color: #0f172a;
    font-weight: 600;
}

.i3dp-page .future-ready-card .compare-list li::before {
    color: #2563eb;
    font-weight: bold;
}
/* =========================================
   F2F HERO V3 (Banner Design)
   ========================================= */
.f2f-hero-v3 {
    position: relative;
    background: #eef2f6 url('assets/f2f-%20assests/Banner.png') no-repeat center right;
    background-size: cover;
    padding: 0rem 0 6rem 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden; /* CRITICAL for the infinite lines */
}

.f2f-hero-v3-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.f2f-hero-v3-content {
    max-width: 500px;
    position: relative;
    z-index: 10;
}

.f2f-hero-v3-title {
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 2rem;
}

.f2f-hero-v3-title .text-teal {
    color: #0891b2;
}

.f2f-hero-v3-title .text-green-gradient {
    color: #10b981;
}

.f2f-hero-v3-list {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.f2f-hero-v3-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.1rem;
    color: #1e293b;
    position: relative;
}

.f2f-hero-v3-list li span strong {
    font-weight: 800;
    color: #0f172a;
}

.f2f-line-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.f2f-line {
    position: absolute;
    right: 100%; /* Stops right where the arrow starts */
    width: 100vw; /* Extends past left edge */
    height: 1.5px;
}

.f2f-line-wrap svg {
    width: 20px;
    height: 20px;
    z-index: 1;
}

/* Colors for lines and arrows */
.f2f-item-red .f2f-line { background: #f43f5e; }
.f2f-item-red svg { color: #f43f5e; }

.f2f-item-orange .f2f-line { background: #f59e0b; }
.f2f-item-orange svg { color: #f59e0b; }

.f2f-item-purple .f2f-line { background: #a855f7; }
.f2f-item-purple svg { color: #a855f7; }

.f2f-item-green .f2f-line { background: #84cc16; }
.f2f-item-green svg { color: #84cc16; }

.f2f-item-blue .f2f-line { background: #3b82f6; }
.f2f-item-blue svg { color: #3b82f6; }

.f2f-item-teal .f2f-line { background: #06b6d4; }
.f2f-item-teal svg { color: #06b6d4; }

.f2f-hero-v3-actions {
    display: flex;
    gap: 1rem;
}

.btn-blue-solid {
    background: #3b82f6;
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 99px !important;
    font-weight: 600;
}
.btn-blue-solid:hover { background: #2563eb; }
.btn-blue-solid svg { width: 18px; height: 18px; margin-left: 0.5rem; }

.btn-white-outline {
    background: transparent;
    color: #475569;
    border: 1px solid #94a3b8;
    padding: 0.8rem 1.5rem;
    border-radius: 99px !important;
    font-weight: 600;
}
.btn-white-outline:hover { background: white; border-color: #cbd5e1; }
/* =========================================
   F2F POWERED BY SECTION
   ========================================= */
.f2f-powered-section {
    padding: 4rem 3rem;
    background: white;
}

.f2f-powered-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 4rem;
    align-items: center;
}

.f2f-powered-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.f2f-watermark {
    font-size: clamp(2rem, 3.5vw, 4rem) !important;
    white-space: nowrap !important;
    color: #F1F5FE !important;
    text-shadow: none !important;
    opacity: 53.7 !important;
    letter-spacing: 4px !important;
}
.f2f-powered-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #1e3a8a;
    line-height: 1.3;
    margin-top: -1rem; /* Pull up over watermark */
    position: relative;
    z-index: 2;
}

.f2f-powered-img {
    margin-top: 2rem;
    max-width: 90%;
}

.f2f-powered-img img {
    width: 100%;
    height: auto;
    display: block;
}

.f2f-powered-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.f2f-power-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.f2f-power-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: #e2e8f0;
}

.f2f-p-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f2f-p-icon svg { width: 20px; height: 20px; }
.f2f-p-icon.icon-blue { background: #eff6ff; color: #3b82f6; }
.f2f-p-icon.icon-purple { background: #faf5ff; color: #a855f7; }
.f2f-p-icon.icon-green { background: #f0fdf4; color: #22c55e; }
.f2f-p-icon.icon-orange { background: #fff7ed; color: #f97316; }

.f2f-power-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.f2f-power-text p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

@media (max-width: 992px) {
    .f2f-powered-container {
        flex-direction: column;
        gap: 3rem;
    }
    .f2f-watermark { font-size: 3rem; }
}

@media (max-width: 576px) {
    .f2f-powered-grid { grid-template-columns: 1fr; }
}
.i3dp-page .f2f-watermark, .f2f-watermark {
    font-size: clamp(2rem, 3.5vw, 4rem) !important;
    white-space: nowrap !important;
    color: #f1f5f9 !important;
    text-shadow: none !important;
    opacity: 0.7 !important;
    letter-spacing: 4px !important;
}
/* Adjust line gap and alignment */
.i3dp-page .f2f-watermark, .f2f-watermark {
    text-align: left;
    line-height: 1;
    margin-bottom: 0;
    margin-left: -2px; /* Slight offset to perfectly align with the P below it depending on font rendering */
}

.f2f-powered-title {
    margin-top: -1.5rem; /* Adjust this to match the specific gap they want */
    line-height: 1.6 !important; /* Increase line gap between the two lines of the blue title */
    text-align: left;
}

/* Card Design with Theme Borders */
.f2f-power-card {
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    gap: 0.75rem !important;
}

/* Card 1 Blue */
.f2f-powered-grid .f2f-power-card:nth-child(1) {
    border: 1px solid rgba(59, 130, 246, 0.2) !important; /* Light blue border */
}

/* Card 2 Purple */
.f2f-powered-grid .f2f-power-card:nth-child(2) {
    border: 1px solid rgba(168, 85, 247, 0.2) !important; /* Light purple border */
}

/* Card 3 Green */
.f2f-powered-grid .f2f-power-card:nth-child(3) {
    border: 1px solid rgba(34, 197, 94, 0.2) !important; /* Light green border */
}

/* Card 4 Orange */
.f2f-powered-grid .f2f-power-card:nth-child(4) {
    border: 1px solid rgba(249, 115, 22, 0.2) !important; /* Light orange border */
}

.f2f-power-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
}
/* Interactive Hover Borders for Powered Cards */
.f2f-powered-grid .f2f-power-card:nth-child(1) { border: 1px solid #f8fafc !important; transition: all 0.3s ease; }
.f2f-powered-grid .f2f-power-card:nth-child(1):hover { border-color: #3b82f6 !important; }

.f2f-powered-grid .f2f-power-card:nth-child(2) { border: 1px solid #f8fafc !important; transition: all 0.3s ease; }
.f2f-powered-grid .f2f-power-card:nth-child(2):hover { border-color: #a855f7 !important; }

.f2f-powered-grid .f2f-power-card:nth-child(3) { border: 1px solid #f8fafc !important; transition: all 0.3s ease; }
.f2f-powered-grid .f2f-power-card:nth-child(3):hover { border-color: #22c55e !important; }

.f2f-powered-grid .f2f-power-card:nth-child(4) { border: 1px solid #f8fafc !important; transition: all 0.3s ease; }
.f2f-powered-grid .f2f-power-card:nth-child(4):hover { border-color: #f97316 !important; }
/* Restore colored background strokes (borders) */
.f2f-powered-grid .f2f-power-card:nth-child(1) { border: 1px solid rgba(59, 130, 246, 0.15) !important; }
.f2f-powered-grid .f2f-power-card:nth-child(1):hover { border: 1px solid rgba(59, 130, 246, 1) !important; }

.f2f-powered-grid .f2f-power-card:nth-child(2) { border: 1px solid rgba(168, 85, 247, 0.15) !important; }
.f2f-powered-grid .f2f-power-card:nth-child(2):hover { border: 1px solid rgba(168, 85, 247, 1) !important; }

.f2f-powered-grid .f2f-power-card:nth-child(3) { border: 1px solid rgba(34, 197, 94, 0.15) !important; }
.f2f-powered-grid .f2f-power-card:nth-child(3):hover { border: 1px solid rgba(34, 197, 94, 1) !important; }

.f2f-powered-grid .f2f-power-card:nth-child(4) { border: 1px solid rgba(249, 115, 22, 0.15) !important; }
.f2f-powered-grid .f2f-power-card:nth-child(4):hover { border: 1px solid rgba(249, 115, 22, 1) !important; }
/* =========================================
   F2F WHY SECTION V3
   ========================================= */
.f2f-why-v3 {
    background: linear-gradient(135deg, #eef2f6 0%, #e0e7ff 100%);
    padding: 6rem 2rem;
        margin-top: -67px;
}

.f2f-why-v3-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 4rem;
}

.f2f-why-v3-content {
    flex: 1;
}

.f2f-why-v3-content h2 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.f2f-why-v3-content h2 .text-dark-blue {
    color: #0f172a;
}

.f2f-why-v3-content h2 .text-light-blue {
    color: #38bdf8;
}

.f2f-why-v3-content .subtitle {
    font-size: 1.25rem;
    color: #475569;
    margin-bottom: 2.5rem;
}

.f2f-why-v3-content .highlight-text {
    font-size: 1.4rem;
    color: #f97316; /* Orange */
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.f2f-why-v3-content .desc {
    font-size: 1.1rem;
    color: #1e293b;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.f2f-why-v3-image {
    flex: 1.2;
    display: flex;
    justify-content: flex-end;
}

.f2f-why-v3-image img {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .f2f-why-v3-container {
        flex-direction: column;
        text-align: center;
        gap: 3rem;
    }
    .f2f-why-v3-image {
        justify-content: center;
    }
}
/* Update F2F? to linear gradient */
.f2f-why-v3-content h2 .text-light-blue {
    background: linear-gradient(to right, #38bdf8, #2dd4bf) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}

/* Update orange text to linear gradient */
.f2f-why-v3-content .highlight-text {
    background: linear-gradient(to right, #f97316, #fbbf24) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
}
/* =========================================
   F2F WHAT IS SECTION (WITH MARQUEE)
   ========================================= */
.f2f-whatis-section {
    padding: 6rem 2rem 4rem;
    background: #f8fafc;
}

.f2f-whatis-container {
    max-width: 1400px;
    margin: 0 auto;
}

.f2f-whatis-grid {
    display: flex;
    align-items: center;
    gap: 4rem;
    margin-bottom: 4rem;
}

.f2f-whatis-img {
    flex: 1;
}

.f2f-whatis-img img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.f2f-whatis-content {
    flex: 1;
}

.f2f-whatis-content h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

.f2f-whatis-content h2 .text-blue { color: #3b82f6; }
.f2f-whatis-content h2 .text-teal { color: #14b8a6; }

.f2f-whatis-content p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    max-width: 600px;
}

/* Scrolling Marquee */
.f2f-marquee-wrapper {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 1.25rem 2rem;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: flex;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.f2f-marquee-content {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation: scrollMarquee 25s linear infinite;
}

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

.f2f-m-item { font-weight: 700; font-size: 1.1rem; padding: 0 0.5rem; }
.f2f-m-arrow { color: #94a3b8; font-weight: 400; letter-spacing: -2px; padding: 0 0.2rem; }

.f2f-m-red { color: #ef4444; }
.f2f-m-blue { color: #3b82f6; }
.f2f-m-brown { color: #92400e; }
.f2f-m-green { color: #22c55e; }
.f2f-m-purple { color: #a855f7; }
.f2f-m-yellow { color: #eab308; }
.f2f-m-teal { color: #14b8a6; }

/* =========================================
   F2F PROCESS SECTION
   ========================================= */
.f2f-process-section {
    padding: 6rem 2rem;
    background: #f8fafc;
    position: relative;
}

.f2f-process-container {
    max-width: 1400px;
    margin: 0 auto;
}

.f2f-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
}

/* Faint connecting lines behind the icons */
.f2f-process-grid::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(148, 163, 184, 0.2);
    z-index: 1;
}

.f2f-process-step {
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

.f2f-step-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    color: white;
}

.f2f-step-icon svg { width: 40px; height: 40px; }
.f2f-step-icon.icon-blue { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.f2f-step-icon.icon-purple { background: linear-gradient(135deg, #c084fc, #9333ea); }
.f2f-step-icon.icon-green { background: linear-gradient(135deg, #4ade80, #16a34a); }
.f2f-step-icon.icon-orange { background: linear-gradient(135deg, #fb923c, #f97316); }

.f2f-process-step h3 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
}

.f2f-process-step p {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

/* =========================================
   F2F STUDENT EXPERIENCE SECTION
   ========================================= */
.f2f-experience-section {
    padding: 4rem 2rem 6rem;
    background: #f8fafc;
}

.f2f-experience-container {
    max-width: 1400px;
    margin: 0 auto;
}

.f2f-experience-container img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 992px) {
    .f2f-whatis-grid { flex-direction: column; text-align: center; }
    .f2f-process-grid { grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; }
    .f2f-process-grid::before { display: none; }
}

@media (max-width: 576px) {
    .f2f-process-grid { grid-template-columns: 1fr; }
}
.f2f-process-container img {
    width: 100%;
    height: auto;
    display: block;
}
/* =========================================
   F2F INDUSTRIES SLIDER
   ========================================= */
.f2f-industries-section {
    background: #f8fafc;
}

.f2f-ind-header {
    text-align: center;
    max-width: 800px;
    margin: -128px auto 4rem;
}

.f2f-ind-header h2 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1rem;
}

.f2f-ind-header .text-teal-gradient {
    background: linear-gradient(to right, #14b8a6, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.f2f-ind-header p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
}

.f2f-slider-wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.f2f-ind-grid {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 2rem;
    padding: 1rem 0 2rem;
}

.f2f-ind-grid::-webkit-scrollbar {
    height: 8px;
}
.f2f-ind-grid::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 4px;
}
.f2f-ind-grid::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

.f2f-ind-card {
    flex: 0 0 350px;
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    scroll-snap-align: start;
    border: 1px solid #f1f5f9;
}

.f2f-ind-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.f2f-ind-icon svg { width: 24px; height: 24px; }

.f2f-ind-card h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

.f2f-ind-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.f2f-ind-list li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.5;
}

.f2f-ind-list li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 6px; height: 6px; border-radius: 50%; background-color: currentColor; }

.list-blue li::before { color: #2563eb; }
.list-purple li::before { color: #9333ea; }
.list-red li::before { color: #e11d48; }
.list-orange li::before { color: #d97706; }
.list-pink li::before { color: #db2777; }
.list-teal li::before { color: #0d9488; }
.list-green li::before { color: #059669; }

.f2f-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: white;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #0f172a;
    z-index: 10;
    transition: all 0.2s ease;
}

.f2f-slider-btn:hover { background: #f8fafc; color: #3b82f6; }
.f2f-slider-btn.prev { left: -10px; }
.f2f-slider-btn.next { right: -10px; }

@media (max-width: 768px) {
    .f2f-slider-btn { display: none; }
    .f2f-slider-wrapper { padding: 0; }
    .f2f-ind-card { flex: 0 0 85vw; }
}


/* Fix Bullet Alignment using Flexbox */
.f2f-ind-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding-left: 0 !important;
}

.f2f-ind-list li::before {
    position: relative !important;
    left: 0 !important;
    top: 0.4rem !important; /* Visual center adjustment */
    flex-shrink: 0 !important;
    margin-top: 0 !important;
}

/* Enhanced Pill Number for F2F */
.f2f-pill-num {
    background: rgba(45, 212, 191, 0.15) !important;
    color: #2dd4bf !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
}

.f2f-build-pill {
    padding: 0.8rem 1.5rem !important; /* Slightly tighter padding to fit the new circle numbers beautifully */
}
/* Fix Build Grid Fluid Alignment */
.f2f-build-grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    max-width: 1300px !important;
    margin: 0 auto !important;
}
/* Force 4-4-2 Layout styling */
.f2f-build-grid {
    display: flex !important;
    flex-direction: column !important; /* Stack rows vertically */
    align-items: center !important;
    gap: 1.25rem !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.f2f-build-row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Prevent wrapping on desktop to force 4 per line */
    justify-content: center !important;
    gap: 1rem !important;
    width: 100% !important;
}

.f2f-build-pill {
    flex: 0 1 auto !important; /* Allow shrinking/growing */
    white-space: normal !important; /* Let text wrap inside pill if needed */
    text-align: center;
    justify-content: center; /* Center the text and number inside */
    padding: 0.75rem 1rem !important;
}

.f2f-pill-text {
    line-height: 1.3;
    font-size: 0.95rem !important;
}

@media (max-width: 1024px) {
    .f2f-build-row {
        flex-wrap: wrap !important; /* Let them wrap naturally on smaller tablets/phones */
    }
    .f2f-build-pill {
        flex: 0 0 calc(50% - 1rem); /* 2 per line on tablet */
    }
}
@media (max-width: 600px) {
    .f2f-build-pill {
        flex: 0 0 100%; /* 1 per line on mobile */
    }
}


/* Make Choose header match exact style */
.f2f-choose-header h2 .text-teal-gradient {
    background: linear-gradient(to right, #14b8a6, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Refine Grad Header text alignment */
.f2f-grad-header {
    max-width: 900px;
}

.f2f-grad-header h2 {
    font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
}
/* Fix Get Started Overlap and Alignment */
.f2f-get-started-container {
    align-items: flex-start !important; /* Align to top instead of center */
    gap: 4rem !important; /* Increase gap to prevent overlap */
}

.f2f-gs-content h2 {
    white-space: normal !important; /* REMOVE NOWRAP that was causing text to bleed into form */
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
}

.f2f-tab-btn {
    border-radius: 99px !important; /* Perfectly round pill tabs */
}
/* Ensure perfect alignment at the top */
.f2f-get-started-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: start !important;
    gap: 5rem !important;
}

.f2f-gs-content {
    padding-top: 1rem; /* Slight nudge if needed to align perfectly with form card padding */
}




/* FLN Modal Styles */
.fln-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fln-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.fln-modal-content {
  background: #ffffff;
  width: 90%;
  max-width: 450px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  transform: translateY(20px);
  transition: transform 0.3s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.fln-modal-overlay.active .fln-modal-content {
  transform: translateY(0);
}

.fln-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #1e293b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  line-height: 1;
}

.fln-modal-header {
  background: #0ea5e9; /* Teal/cyan */
  padding: 3rem 2rem 1.5rem;
  text-align: center;
  color: white;
  position: relative;
}

.fln-modal-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
}

.fln-modal-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.3;
}

.fln-modal-wave {
  width: 100%;
  height: 45px;
  background: #0ea5e9;
  position: relative;
  margin-bottom: -1px;
}

.fln-modal-wave svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.fln-modal-body {
  padding: 1.5rem 2.5rem 3rem;
  text-align: center;
  background: #ffffff;
}

.fln-modal-body p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #0f172a;
  margin: 0;
  font-weight: 400;
}





/* ==========================================================================
   RCA NEW HERO SECTION (REPLACEMENT)
   ========================================================================== */
.rca-hero-new {
    position: relative;
    /* width: 100vw; */
    /* min-height: 85vh; */
    background-image: url('assets/RCA/rca-banner.jpg');
    background-size: cover;
    /* background-position: center left; */
    background-repeat: no-repeat;
        height: 705px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 2rem 5%;
    font-family: 'Outfit', sans-serif;
}



.rca-hero-container {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    align-items: center;
    gap: 2rem;
}

.rca-hero-left {
    flex: 1;
    /* max-width: 50%; */
}

.rca-hero-title-top {
    font-size: 2.2vw;
    color: #111827;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 0.5rem;
}
.rca-hero-title-top .is-now {
    font-size: 1.5vw;
    font-weight: 500;
    color: #374151;
}

.rca-hero-title-main {
    font-size: 5vw;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(90deg, #1d4ed8, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
    letter-spacing: -1px;
}

.rca-hero-subtitle-teal {
    font-size: 2.2vw;
    color: #0ea5e9;
    font-weight: 700;
    margin-bottom: 2rem;
}

.rca-hero-desc-new {
    font-size: 1.5vw;
    color: #4b5563;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 3rem;
        margin-bottom: 7rem;
}

/* Badges Row */










/* Right Graphic */


.rca-hero-right img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 992px) {
    .rca-hero-container { flex-direction: column; text-align: center; }
    .rca-hero-left { max-width: 100%; }
    .rca-hero-title-top { font-size: 4vw; }
    .rca-hero-title-top .is-now { font-size: 3vw; }
    .rca-hero-title-main { font-size: 8vw; }
    .rca-hero-subtitle-teal { font-size: 4vw; }
    .rca-hero-desc-new { font-size: 3vw; }
    
    
    
}

/* ==========================================================================
   RCA NEW PILLARS SECTION (IMAGE CARDS)
   ========================================================================== */
.rca-pillars-section-new {
    width: 100vw;
    padding: 5rem 5%;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
    font-family: 'Outfit', sans-serif;
}

.rca-section-header-centered {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 4rem auto;
}

.rca-section-header-centered .rca-section-title {
    font-size: 3.5vw;
    font-weight: 900;
    color: #111827;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.rca-blue-subtitle {
    font-size: 1.8vw;
    color: #3b82f6; /* Blue */
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.rca-section-desc-centered {
    font-size: 1.2vw;
    color: #374151;
    line-height: 1.6;
    font-weight: 500;
}

.rca-pillars-grid-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1300px;
    margin: 0 auto;
}

.rca-pillar-card-img {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.03);
}

.rca-pillar-card-img:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.pillar-top-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

.pillar-card-content h3 {
    font-size: 1.4vw;
    font-weight: 800;
    color: #111827;
    margin-bottom: 0.75rem;
}

.pillar-card-content .pillar-tagline {
    font-size: 1.05vw;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.pillar-card-content .pillar-desc-blue {
    font-size: 0.95vw;
    font-weight: 500;
    color: #64748b; /* Slate blue-gray */
    line-height: 1.5;
}

@media (max-width: 992px) {
    .rca-section-header-centered .rca-section-title { font-size: 6vw; }
    .rca-blue-subtitle { font-size: 4vw; }
    .rca-section-desc-centered { font-size: 3vw; }
    .rca-pillars-grid-new { grid-template-columns: 1fr; gap: 2rem; }
    .rca-pillar-card-img { padding: 1.25rem; }
    .pillar-card-content h3 { font-size: 5vw; }
    .pillar-card-content .pillar-tagline { font-size: 4vw; }
    .pillar-card-content .pillar-desc-blue { font-size: 3.5vw; }
}


.rca-long-title {
    white-space: nowrap;
    font-size: 1.15vw !important;
    letter-spacing: -0.5px;
}

@media (max-width: 992px) {
    .rca-long-title {
        font-size: 4.5vw !important;
        white-space: normal;
    }
}

.why-card-img {
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto 1.5rem auto;
    display: block;
    object-fit: contain;
}

/* ==========================================================================
   RCA WHY SECTION OVERRIDES (Remove card effect & center)
   ========================================================================== */
.why-main-title {
    text-align: center !important;
    width: 100%;
    margin-bottom: 3rem !important;
}

.why-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto !important;
}

.why-card-title {
    text-align: center !important;
    margin-bottom: 0.5rem !important;
}

.why-card-desc {
    text-align: center !important;
}

.why-card-img {
    margin: 0 auto 1.5rem auto !important;
    object-fit: contain;
}

/* ==========================================================================
   FAQ SECTION FIXES
   ========================================================================== */
.faq-title {
    color: #0a1b44 !important;
    text-align: center !important;
    margin-bottom: 3rem !important;
    font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
}

.faq-answer p {
    text-align: left !important;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem !important;
    margin: 0 !important;
}

/* ==========================================================================
   LEXICAL SCORE SECTION TEXT ALIGNMENT FIX
   ========================================================================== */
.lexical-title,
.lexical-subtitle,
.lexical-desc {
    text-align: center !important;
}

.lexical-desc {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 900px !important;
}

/* ==========================================================================
   CENTER ALIGNMENT REQUESTS (Headings & Paragraphs)
   ========================================================================== */
.testing-main-title,
.four-pillars-title,
.modules-main-title,
.stakeholders-main-title,
.rca-assessment-section .rca-section-title,
.rca-assessment-section .rca-section-header h2 {
    text-align: center !important;
    width: 100%;
}

.rca-testing-section p,
.rca-four-pillars-section p,
.rca-modules-section p,
.rca-stakeholders-section p,
.rca-assessment-section .rca-section-desc,
.rca-assessment-section .rca-section-header p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rca-assessment-section .rca-section-header,
.rca-stakeholders-section .rca-section-header,
.rca-modules-section .rca-section-header,
.rca-four-pillars-section .rca-section-header,
.rca-testing-section .rca-section-header {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Fix for Why RCA JPG background */
.rca-why-section {
    background-color: #ffffff !important;
}

.why-image-container img {
    mix-blend-mode: multiply;
}






.anchor-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  background-color: #ffffff;
  border-radius: 20px;
  padding: 3rem 3rem 0 3rem !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.04);
  border-top: 4px solid transparent;
    border-top-color: transparent;
  align-items: center;
}







/* Added Pink Theme for HPC Pane */
.theme-pink .check-icon { color: #ec4899; }
.theme-pink .v-pill { background-color: #fce7f3; color: #ec4899; }









/* ============================
   HPC ANCHORS SECTION 
   ============================ */
.hpc-anchors-section { padding: 5rem 2rem; background-color: #f8fafc; }
.hpc-anchors-container { max-width: 1440px; margin: 0 auto; }
.hpc-anchors-header { margin-bottom: 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hpc-anchors-title { font-size: 2.5rem; font-weight: 800; color: #0f172a; margin-bottom: 1rem; }
.hpc-anchors-subtitle { font-size: 1.1rem; color: #64748b; max-width: 800px; }
.hpc-anchors-layout { display: flex; flex-direction: column; gap: 3rem; }
.anchor-card { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; background-color: #ffffff; border-radius: 20px; padding: 3rem; box-shadow: 0 10px 40px rgba(0,0,0,0.04); border-top: 4px solid transparent; align-items: center; }
.anchor-theme-blue { border-top-color: #3b82f6; }
.anchor-theme-green { border-top-color: #10b981; }
.anchor-card-visual { width: 100%; }
.anchor-card-content { display: flex; flex-direction: column; justify-content: center; }
.anchor-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 100px; font-size: 0.85rem; font-weight: 700; width: fit-content; margin-bottom: 2rem; }
.anchor-badge .dot { width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; }
.badge-blue { background-color: #eff6ff; color: #3b82f6; }
.badge-green { background-color: #ecfdf5; color: #10b981; }
.anchor-subheading { font-size: 0.95rem; font-weight: 700; margin-bottom: 0.5rem; }
.anchor-title { font-size: 2.2rem; font-weight: 800; color: #0f172a; margin-bottom: 1.5rem; }
.anchor-desc { font-size: 1.1rem; line-height: 1.7; color: #64748b; margin-bottom: 2rem; }
.anchor-footer { border-top: 1px solid #e2e8f0; padding-top: 1.5rem; }
.anchor-footer p { font-size: 0.95rem; color: #94a3b8; font-style: italic; margin: 0; }
@media (max-width: 992px) {
  .anchor-card { grid-template-columns: 1fr; padding: 2rem; }
  .anchor-theme-blue .anchor-card-visual { order: -1; }
  .anchor-theme-green .anchor-card-visual { order: -1; }
}










.rca-gradient-text {
    background: linear-gradient(90deg, #1d4ed8, #0ea5e9, #10b981);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}


.rca-card-num {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
    color: #2244df;
    opacity: 0.3;
    display: inline-block;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.rca-pillar-card-img:hover {
    border-color: #2244df !important;
}
.rca-pillar-card-img:hover .rca-card-num {
    opacity: 1;
}




.lexile-ticks .tick {
    transition: all 0.3s ease;
}
.lexile-ticks .tick.active .tick-score {
    color: #2563eb;
    transform: scale(1.1);
}
.lexile-ticks .tick.active .tick-grade {
    color: #1e3a8a;
    font-weight: 800;
    transform: scale(1.1);
}


.sh-hover-card {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  height: 420px;
  background: #1e293b;
  border: 1px solid rgba(255,255,255,0.05);
}
.sh-hover-card img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.sh-hover-card:hover img {
  transform: scale(1.05);
}
.sh-hover-content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, #1e293b 65%, transparent 100%);
  padding: 4rem 1.2rem 1.5rem;
  text-align: center;
  color: white;
  transition: all 0.4s ease;
}
.sh-hover-card:hover .sh-hover-content-wrapper {
  background: linear-gradient(to top, #1e293b 85%, transparent 100%);
}
.sh-hover-title {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 0;
  position: relative;
  z-index: 2;
  color: white !important;
}
.sh-hover-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.5;
  margin: 0;
  position: relative;
  z-index: 2;
}
.sh-hover-card:hover .sh-hover-desc {
  max-height: 180px;
  opacity: 1;
  margin-top: 1rem;
}














/* i3DP Overhauled Section (V2) */
.i3dp-compare-section.v2-layout {
    background-color: #f4f6fa;
    padding: 5rem 0 3rem 0;
    position: relative;
}
.i3dp-compare-container.v2-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: 0;
    align-items: stretch;
}
.i3dp-compare-text.v2-text {
    padding: 2rem 4rem 2rem 2rem;
}
.i3dp-pill-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.i3dp-pill-header .pill-icon {
    width: 48px;
    height: 48px;
    background-color: #20409A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}
.i3dp-pill-header .pill-text {
    display: flex;
    flex-direction: column;
}
.i3dp-pill-header .pill-text strong {
    color: #20409A;
    font-size: 1.25rem;
    line-height: 1.2;
}
.i3dp-pill-header .pill-text span {
    color: #20409A;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.i3dp-compare-text.v2-text h2 {
    font-size: 3.2rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 1.5rem;
}
.i3dp-compare-text.v2-text h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 4px;
    background: linear-gradient(90deg, #20409A 0%, rgba(32,64,154,0.3) 100%);
    border-radius: 2px;
}
.i3dp-compare-text.v2-text p {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.i3dp-compare-text.v2-text p:first-of-type {
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 2rem;
}
.i3dp-compare-text.v2-text p:first-of-type::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(32,64,154,0.2) 0%, rgba(32,64,154,0) 100%);
}

/* Right Visuals */
.i3dp-visual-col {
    position: relative;
    display: flex;
    flex-direction: column;
    background: white;
}
.i3dp-image-box {
    position: relative;
    width: 100%;
    height: 400px;
}
.i3dp-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.floating-pill {
    position: absolute;
    top: -1.2rem;
    right: 2rem;
    background: #0D1533;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
    z-index: 2;
}

/* Features Grid */
.i3dp-features-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: white;
}
.i3dp-feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 0.5rem;
    position: relative;
    
}

.i3dp-feature-item::after {
    content: "";
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    border-radius: 3px;
}
.i3dp-feature-item.feat-border-blue::after { background-color: #2563eb; }
.i3dp-feature-item.feat-border-green::after { background-color: #16a34a; }
.i3dp-feature-item.feat-border-purple::after { background-color: #9333ea; }
.i3dp-feature-item.feat-border-orange::after { background-color: #ea580c; }
.i3dp-feature-item.feat-border-dark::after { background-color: #1e3a8a; }

.feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1rem;
}
.feat-icon.bg-blue { background-color: #2563eb; }
.feat-icon.bg-green { background-color: #16a34a; }
.feat-icon.bg-purple { background-color: #9333ea; }
.feat-icon.bg-orange { background-color: #ea580c; }
.feat-icon.bg-dark { background-color: #1e3a8a; }

.i3dp-feature-item h4 {
    font-size: 0.85rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.i3dp-feature-item p {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    padding: 0 0.5rem;
    margin-bottom: 1.5rem;
}

/* Impact Banner */
.i3dp-impact-banner {
    background-color: #0D1533;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2rem auto 0 auto;
    border-radius: 12px;
    max-width: 1320px;
}
.banner-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.banner-item:last-child {
    border-right: none;
}
.banner-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    flex-shrink: 0;
}
.banner-text {
    color: white;
    font-size: 1.05rem;
    line-height: 1.4;
}
.banner-text .text-green { color: #10b981; }
.banner-text .text-blue { color: #60a5fa; }

@media (max-width: 1024px) {
    .i3dp-compare-container.v2-container {
        grid-template-columns: 1fr;
    }
    .i3dp-compare-text.v2-text {
        padding: 2rem;
    }

    .i3dp-impact-banner {
        grid-template-columns: 1fr;
        margin: 2rem;
    }
    .banner-item {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
}
@media (max-width: 768px) {
    .i3dp-features-grid {
        grid-template-columns: 1fr;
    }
}
}