/* Body & Hero Styles */
body { margin:0; font-family:'Segoe UI',sans-serif; scroll-behavior:smooth; color:#fff; background:#fff; }
.hero { position:relative; background:linear-gradient(110deg,#0f2c59 0%,#144272 40%,#00d1b2 100%); padding:120px 20px 100px; text-align:center; overflow:hidden; min-height:60vh; }
.hero-bg { position:absolute; inset:0; opacity:0.25; z-index:0; }
.lottie-container { width:90%; height:90%; margin:100px auto 0; }
.hero-content { position:relative; z-index:1; max-width:900px; margin:0 auto; }
.hero-content h1 { font-size:3rem; font-weight:bold; margin-bottom:1rem; }
.hero-content h2 { font-size:2rem; font-weight:600; margin-bottom:2rem; }
.hero-content p { font-size:1.1rem; line-height:1.6; max-width:800px; margin:0 auto 2.5rem; color:rgba(255,255,255,0.9); }
.teal { color:#00d1b2; }
.cta-button { background:transparent; border:2px solid #fff; color:#00d1b2; font-weight:600; padding:10px 25px; border-radius:6px; text-decoration:none; transition:all .3s ease; }
.cta-button:hover { background:#fff; color:#0f2c59; }

/* Navbar Styles */
.navbar { position:fixed; top:0; width:100%; background:#002B73; z-index:1000; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.navbar-container {padding:0 1rem; display:flex; align-items:center; height:6.5rem; justify-content:space-between; }
.navbar-logo { color:#fff; font-size:1.5rem; font-weight:bold; text-decoration:none; }
.navbar-logo:hover, .navbar-logo.active { color:#00d1b2; }
.nav-toggle { display:none; background:none; border:none; flex-direction:column; gap:4px; cursor:pointer; }
.hamburger-line { width:24px; height:2px; background:#fff; }
.nav-links { display:flex; gap:1.5rem; }
.nav-item { color:#fff; text-decoration:none; font-weight:500; transition:color .3s; }
.nav-item:hover, .nav-item.active { color:#00d1b2; font-weight:600; }

/* Mobile */
@media(max-width:768px){
  .nav-toggle { display:flex; }
  .nav-links { position:absolute; top:4rem; left:0; right:0; background:#002B73; flex-direction:column; align-items:center; overflow:hidden; max-height:0; transition:max-height .3s ease; }
  .nav-links.open { max-height:20rem; }
  .nav-item { padding:.75rem 0; width:100%; text-align:center; }
}

/* ─────────────────────────────────────────────────────────────────
   AI Showcase Section
───────────────────────────────────────────────────────────────── */
.ai-showcase {
  position: relative;
  overflow: hidden;
  background: #F9FAFB;
  color: #002B73;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem; /* offset for smooth-scroll nav */
}

.ai-showcase .ai-bg {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
}

#ai-lottie {
  width: 100%;
  height: 100%;
}

.ai-showcase .ai-content {
  position: relative;
  z-index: 1;
  max-width: 80rem; /* ~5xl */
  margin: 0 auto;
}

.ai-showcase h2 {
  font-size: 2.25rem;  /* text-4xl */
  font-weight: bold;
  margin-bottom: 1.5rem;
}

.ai-showcase p {
  font-size: 1.125rem; /* text-lg */
  color: #1A1E5E;
  max-width: 48rem;     /* ~3xl */
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.cta-button-secondary {
  display: inline-block;
  background: #00d1b2;      /* nball-teal */
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
}
.cta-button-secondary:hover {
  background: #019e90;
}

/* ─────────────────────────────────────────────────────────────────
   Services Section & Carousel
───────────────────────────────────────────────────────────────── */
.services-section {
  background: #F9FAFB;
  color: #002B73;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}

.services-title {
  font-size: 2.25rem;  /* text-4xl */
  font-weight: bold;
  margin-bottom: 3rem;
}

.services-slider {
  position: relative;
}

.service-card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin: 0 0.75rem;
}

.service-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: #4A5568; /* gray-700 */
}


.services-slider .slick-prev:hover,
.services-slider .slick-next:hover {
  opacity: 1;
}

.services-slider .slick-prev {
  left: -1rem;
}

.services-slider .slick-next {
  right: -1rem;
}

.services-slider .slick-prev,
.services-slider .slick-next {
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-slider .slick-prev:before,
.services-slider .slick-next:before {
  content: "";
}

.services-slider .slick-dots {
  bottom: -2rem;
}

/* Re-inject simple arrows using Unicode */
.services-slider .slick-prev:before {
  content: "‹";       /* left single angle quote */
  font-size: 3.5rem;
  color: #00d1b2;    /* nball-teal */
}

.services-slider .slick-next:before {
  content: "›";       /* right single angle quote */
  font-size: 3.5rem;
  color: #00d1b2;  /* nball-teal */
}

/* ─────────────────────────────────────────────────────────────────
   Live Prompt Showcase Styles
───────────────────────────────────────────────────────────────── */
.livepromptshowcase {
  position: relative;
  overflow: hidden;
  background:linear-gradient(110deg,#0f2c59 0%,#144272 40%,#00d1b2 100%); padding:120px 20px 100px; text-align:center; overflow:hidden; min-height:60vh;
  color: #ffffff;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}

.livepromptshowcase .live-bg {
  position: absolute;
  inset: 0;
  opacity: 0.20;
  z-index: 0;
  pointer-events: none;
}

#live-lottie {
  width: 100%;
  height: 100%;
}

.live-content {
  position: relative;
  z-index: 1;
  max-width: 80rem;
  margin: 0 auto;
}

.live-content h2 {
  font-size: 2.25rem;  /* ≈ text-4xl */
  font-weight: bold;
  margin-bottom: 2rem;
}

/* Prompt selector */
.prompt-selector {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.prompt-btn {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.prompt-btn.active {
  background: #00d1b2;
  color: white;
}

.prompt-btn:not(.active) {
  background: white;
  color: #0F172A;
}

.prompt-btn:not(.active):hover {
  background: #f0f0f0;
}

/* Response box */
.response-box {
  background: #00d1b2;
  color: #002B73;
  font-family: monospace;
  font-size: 16px;
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-height: 400px;
  overflow-y: auto;
  text-align: left;
  white-space: pre-line;
  margin-bottom: 2rem;
}

/* Book demo button */
.book-demo-btn {
  background: #00d1b2;
  color: #002B73;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.book-demo-btn:hover {
  background: #019e90;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: white;
  color: #002B73;
  padding: 2rem;
  border-radius: 0.5rem;
  max-width: 24rem;
  width: 100%;
  position: relative;
  text-align: left;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────
   Our Story Section
───────────────────────────────────────────────────────────────── */
.ourstory {
  background: #ffffff;
  color: #002B73;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}

.ourstory h2 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.ourstory p {
  max-width: 48rem;
  margin: 0 auto 3rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: #1A1E5E;
}

/* Stakeholder Cards */
.stakeholder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  max-width: 72rem;
  margin: 0 auto 4rem;
}

.card {
  background: #F1F5F9;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s;
}

.card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.card .icon {
  font-size: 2rem;
  color: #00d1b2;
  margin-bottom: 0.75rem;
}

/* Leadership Slider */
.ourstory h3 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.leadership-slider {
  position: relative;
  max-width: 28rem;
  margin: 0 auto;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  padding: 1.5rem;
  box-sizing: border-box;
  text-align: center;
}

.slide img {
  width: 8rem;
  height: 8rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 4px solid #00d1b2;
}

.slide .title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.slide .desc {
  font-size: 0.875rem;
  color: #1A1E5E;
  line-height: 1.5;
}

/* Slider navigation buttons */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: none;
  font-size: 1.25rem;
  padding: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  cursor: pointer;
}

.prev { left: 1rem; }
.next { right: 1rem; }
.prev:hover, .next:hover {
  background: #f0f0f0;
}

/* ─────────────────────────────────────────────────────────────────
   Knowledge Center Styles
───────────────────────────────────────────────────────────────── */
.knowledge-center {
  background: #F9FAFB;
  color: #002B73;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}

.knowledge-center h2 {
  font-size: 2.25rem;  /* ≈ text-4xl */
  font-weight: bold;
  margin-bottom: 3rem;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.5rem;
  max-width: 80rem;
  margin: 0 auto;
}

/* Individual Card */
.card {
  background: #ffffff;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}
.card:hover {
  box-shadow: 0 8px 12px rgba(0,0,0,0.1);
}

.card img {
  width: 100%;
  height: 11rem;           /* ≈ h-44 */
  object-fit: contain;
  background: #ffffff;
  padding: 1rem;
}

.card-content {
  padding: 1.5rem;
  text-align: left;
}

.card-type {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #32C5A6;
  margin-bottom: 0.5rem;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card-desc {
  font-size: 0.875rem;
  color: #1A1E5E;
  margin-bottom: 1rem;
}

.card-actions {
  display: flex;
  gap: 1rem;
}

.card-actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #002B73;
  text-decoration: none;
  transition: color 0.3s ease;
}
.card-actions a:hover {
  color: #00d1b2;
}

/* ─────────────────────────────────────────────────────────────────
   Contact Section Styles
───────────────────────────────────────────────────────────────── */
.contact-section {
  background: #ffffff;
  color: #002B73;
  padding: 4rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem; /* so navbar offset works */
}

.contact-section h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.contact-section p {
  font-size: 1rem;
  color: #4A5568;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 1.25rem;
}

.form-group {
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: #2D3748;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #CBD5E0;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #00d1b2;
  box-shadow: 0 0 0 3px rgba(0,209,178,0.2);
}

.contact-button {
  background: #00d1b2;
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
  max-width: 200px;
  margin: 0 auto;
  display: block;
}

.contact-button:hover {
  background: #019e90;
}

/* ─────────────────────────────────────────────────────────────────
   Contact Section (Side-by-Side Layout)
───────────────────────────────────────────────────────────────── */
.contact-section {
  padding: 4rem 1.5rem;
  background: #fff;
  color: #002B73;
  scroll-margin-top: 4rem;
}

/* Grid wrapper for two columns */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: start;
  max-width: 90rem;
  margin: 0 auto 4rem;
}

/* Left column */
.section-label {
  display: block;
  font-size: 0.875rem;
  color: #6B7280;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}
.section-heading {
  font-family: Segoe UI;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1E3A8A;
  margin-bottom: 2rem;
}

/* Info‐cards grid inside left column */
.contact-info-grid {
  display: grid;
  gap: 1.5rem;
}
.info-card {
  display: flex;
  gap: 1rem;
  background: #ffffff;
  padding: 1.25rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  align-items: center;
}
.info-icon {
  font-size: 1.5rem;
  color: #1E3A8A;
  margin-top: 0.25rem;
}
.info-card h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1E3A8A;
}
.info-card p {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
}

/* Right column */
.contact-form-wrapper h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.form-intro {
  color: #4B5563;
  margin-bottom: 1.5rem;
}
.contact-form {
  display: grid;
  gap: 1rem;
}
.contact-form .form-group {
  text-align: left;
}
.contact-form label {
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  display: block;
  color: #2D3748;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #CBD5E0;
  border-radius: 0.375rem;
  font-size: 1rem;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #00d1b2;
  box-shadow: 0 0 0 3px rgba(0,209,178,0.2);
}
.contact-button {
  background: #00d1b2;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
  justify-self: start;  /* keep button left-aligned under form */
}
.contact-button:hover {
  background: #019e90;
}

/* Mobile stacking (optional) */
@media (max-width: 640px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Solutions Suite Section
───────────────────────────────────────────────────────────────── */
.solutions-section {
  background: #ffffff;
  color: #002B73;
  padding: 6rem 1.5rem;
  text-align: center;
  scroll-margin-top: 4rem; /* so the navbar offset works */
}

.solutions-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
}

.solutions-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 80rem;
  margin: 0 auto;
}

.solution-card {
  background: #F1F5F9;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.solution-icon {
  font-size: 2.5rem;
  color: #00d1b2;
  margin-bottom: 1rem;
}

.solution-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.solution-card p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #1A1E5E;
}

/* Gradient Hero */
.gradient-hero {
  background: linear-gradient(110deg,#0f2c59,#32C5A6);
  padding: 6rem 1.5rem;
  color: #fff;
  text-align: center;
}
.gradient-hero .hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.gradient-hero .hero-sub {
  font-size: 1.125rem;
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Back Button */
.back-btn-wrap {
  text-align: right;
  padding: 1rem 1.5rem 0;
}
.btn-secondary {
  background: #00d1b2;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sticky Internal Nav */
.sticky-nav {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 50;
}
.sticky-nav ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
}
.sticky-nav a {
  color: #1E3A8A;
  font-weight: 500;
  text-decoration: none;
}
.sticky-nav a:hover {
  color: #00d1b2;
}

/* Detail Sections */
.detail-section {
  padding: 4rem 1.5rem;
}
.detail-section.bg-light {
  background: #F9FAFB;
}
.detail-section .container {
  max-width: 60rem;
  margin: 0 auto;
}
.feature-list {
  list-style: disc inside;
  margin-top: 1rem;
  line-height: 1.6;
}
.testimonial {
  font-style: italic;
  margin: 2rem 0;
}

/* CTA Section */
.cta-section {
  padding: 3rem 1.5rem;
}
.btn-primary {
  background: #00d1b2;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  text-decoration: none;
}

/* Responsive */
@media(max-width:768px){
  .sticky-nav ul { flex-wrap: wrap; gap: 1rem; }
}

/* ─── Hero Section ───────────────────────────────────────────── */
.gradient-hero {
  background: linear-gradient(to bottom right, #002B73 0%, #32C5A6 100%);
  color: #ffffff;
  padding: 8rem 1.5rem 5rem;   /* roughly pt-32 pb-20 px-6 */
  text-align: center;
  scroll-margin-top: 4rem;    /* so nav-offset works once added */
}

.gradient-hero h1 {
  font-size: 2.25rem;         /* ≈ text-4xl */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;        /* mb-4 */
}

.gradient-hero p {
  font-size: 1.125rem;        /* ≈ text-lg */
  max-width: 48rem;           /* ≈ max-w-3xl */
  margin: 0 auto;
  opacity: 0.9;               /* text-white/90 */
  margin-bottom: 1.5rem;   /* or whatever spacing you’d like */
}

@media (min-width: 640px) {
  .gradient-hero h1 { font-size: 3rem; }  /* sm:text-5xl */
  .gradient-hero p  { font-size: 1.25rem; }/* sm:text-xl */
}

/* Ensure the hero can contain an absolutely positioned button */
.gradient-hero {
  position: relative;
}

/* Back-to-Solutions Button over Hero */
.gradient-hero .back-btn-wrap {
  position: absolute;
  top: 1rem;      /* adjust as needed (≈ Tailwind’s top-4) */
  right: 1rem;    /* adjust as needed (≈ Tailwind’s right-4) */
  z-index: 10;
}

.gradient-hero .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #00d1b2;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.gradient-hero .btn-secondary:hover {
  background: #019e90;
  color: white;
}

.gradient-hero .btn-secondary .fas {
  color: white;
}

/* Gradient Hero */
.gradient-hero {
  background: linear-gradient(to bottom right, #002B73 0%, #32C5A6 100%);
  color: #fff;
  padding: 8rem 1.5rem 5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}
.gradient-hero h1 {
  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;

}
.gradient-hero p {
  font-size: 1.125rem;
  max-width: 48rem;
  margin: 0 auto;
  opacity: 0.9;
  margin-bottom: 1rem;
}
@media (min-width: 640px) {
  .gradient-hero h1 { font-size: 3rem; }
  .gradient-hero p  { font-size: 1.25rem; }
}

/* Back button */
.back-btn-wrap {
  text-align: right;
  padding: 1rem 1.5rem 0;
}
.btn-secondary {
  background: #00d1b2;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Sticky internal nav */

.sticky-nav a.active {
  color: #00d1b2;
  border-bottom: 2px solid #00d1b2;
}


/* Detail sections */
.detail-section {
  padding: 4rem 1.5rem;
}
.detail-section.bg-light { background: #F9FAFB; }
.container { max-width: 60rem; margin: 0 auto; color: #002B73;}
.feature-list { list-style: disc inside; margin-top: 1rem; line-height: 1.6; color: #002B73;}
.testimonial { font-style: italic; margin: 2rem 0; color:#002B73 }

/* Live Prompt */
.prompt-selector {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1rem; margin-bottom: 1.5rem;
}
.prompt-btn {
  padding: 0.5rem 1rem; border: none; border-radius: 9999px;
  cursor: pointer; transition: background 0.3s, color 0.3s;
}
.prompt-btn.active { background: #00d1b2; color: #fff; }
.prompt-btn:not(.active) { background: #fff; color: #0F172A; }
.prompt-btn:not(.active):hover { background: #f0f0f0; }

.response-box {
  background: #00d1b2; color: #002B73; font-family: monospace;
  padding: 1.5rem; border-radius: 0.5rem; max-height: 400px;
  overflow-y: auto; white-space: pre-line; text-align: left;
  margin-bottom: 2rem;
}

/* CTA Section */
.cta-section { padding: 3rem 1.5rem; }
.btn-primary {
  background: #00d1b2; color: #fff; padding: 0.75rem 1.5rem;
  border-radius: 0.375rem; text-decoration: none;
  font-weight: 600; transition: background 0.3s;
}
.btn-primary:hover { background: #019e90; }

/* Hero Banner (already in your stylesheet) */
.gradient-hero {
  position: relative;              /* make it the containing block */
  background: linear-gradient(
    to bottom right,
    #002B73 0%,
    #32C5A6 100%
  );
  color: #ffffff;
  padding: 8rem 1.5rem 5rem;
  text-align: center;
  scroll-margin-top: 4rem;
}

/* Back button now overlaid in the hero */
.gradient-hero .back-btn-wrap {
  position: absolute;
  top: 1rem;                       /* adjust as needed for spacing */
  right: 1rem;
}

/* Paging offset so nav doesn’t cover it */
.detail-section {
  scroll-margin-top: 4rem;
}

/* Section heading + intro */
#why-container h2 {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
#why-container .lead {
  text-align: center;
  font-size: 1.125rem;
  max-width: 48rem;
  margin: 0 auto 2rem;
  line-height: 1.6;
  color: #1A1E5E;
}

/* Grid & cards */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem,1fr));
  gap: 1.5rem;
}
.value-card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s, transform 0.2s;
}
.value-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.value-card i {
  font-size: 1.75rem;
  color: #00d1b2;
}
.value-card span {
  color: #1A1E5E;
  font-weight: 500;
}

/* Closing line */
#why-container .closing-line {
  text-align: center;
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: 500;
  color: #002B73;
}

/* Core Features slider cards */
.feature-slider .feature-card {
  background: #F1F5F9;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  text-align: left;
  transition: transform 0.3s, box-shadow 0.3s;
}
.feature-slider .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.feature-slider .feature-icon {
  font-size: 2rem;
  color: #00d1b2;
  margin-bottom: 0.75rem;
}
.feature-slider h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.feature-slider p {
  font-size: 0.9375rem;
  color: #1A1E5E;
  line-height: 1.5;
}

/* in your styles.css */

html {
  /* ensure all in-page jumps stop just under the nav */
  scroll-padding-top: 3rem;    /* matches nav height */
}

section[id] {
  /* override Tailwind’s scroll-mt-16 */
  scroll-margin-top: 1rem !important;
}

#why {
  /* tighten up the vertical breathing room */
  padding-top: 1em;    /* was 6rem (py-24) */
  padding-bottom: 1em; /* or whatever you prefer */
}

/* ─── Button Base ─────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;             /* space between icon and text */
  font-weight: 600;
  text-decoration: none;  
  border-radius: 2rem;     /* pill shape */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ─── Primary Button ─────────────────────────────────────────────── */
.btn-primary {
  background-color: #49C17D;  /* your demo-green */
  color: #FFFFFF;
  padding: 0.75rem 1.5rem;
  border: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #3FA86B;  /* slightly darker on hover */
  color: #FFFFFF;
}

/* Ensure all text inside the #overview section is dark */
#overview {
  background-color: #ffffff;
  color: #1A1E5E;
}
/* If you want to be more specific: */
#overview h2,
#overview p {
  color: #1A1E5E;
}

/* Social Follow Block */
.site-footer {
  text-align: center;
  padding: 2rem 1rem;
  background: #002B73;
  color: white;
  position: relative;
}

.social-follow {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: whitesmoke;
}

.social-follow span {
  margin-right: 0.5rem;
  font-weight: 500;
}

.social-follow a {
  margin: 0 0.5rem;
  font-size: 1.25rem;
  color: white;
  transition: color 0.2s ease-in-out;
}

.social-follow a:hover {
  color: #1da1f2;  /* e.g. Twitter blue for hover, adjust as needed */
}

/* ─ Careers Section ─────────────────────────────────────────── */
.careers-section {
  padding: 4rem 1rem;
  background: #ffffff;
  text-align: center;
}

.careers-section h2 {
  font-size: 2rem;
  color: #002B73;
  margin-bottom: 1rem;
}

.careers-section p {
  max-width: 600px;
  margin: 0 auto 2rem;
  color: #555;
}

.job-listings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.job-card {
  border: 1px solid #e0e0e0;
  padding: 1.5rem;
  border-radius: 0.5rem;
  color: #002B73;
  text-align: center;
}

.job-card h3 {
  margin-top: 0;
}

.apply-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: #1a73e8;
  color: #fff;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: background 0.2s;
}

.apply-btn:hover {
  background: #155ab6;
}

.more-roles {
  margin-top: 2rem;
}

.more-roles a {
  color: #1a73e8; 
  text-decoration: none;
  font-weight: 500;
}

/* ─── Footer Links Block ─────────────────────────────────────── */
.footer-links {
  display: flex;
  justify-content: center;      /* center horizontally */
  flex-wrap: wrap;              /* wrap on small screens */
  gap: 1.5rem;                  /* space between links */
  margin-top: 1.5rem;           /* spacing above links */
  padding-top: 1rem;            /* spacing inside footer */
  border-top: 1px solid #e0e0e0;/* light separator line */
}

.footer-links .footer-item {
  font-size: 1rem;
  color: whitesmoke;                  /* secondary text color */
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.footer-links .footer-item:hover {
  color: #1a73e8;               /* primary accent on hover */
  text-decoration: underline;
}

/* Base (desktop) */
.nav-links {
  display: flex;
  gap: 1rem;
}

.nav-toggle {
  display: none;          /* hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
}

/* Hamburger lines styling */
.hamburger-line {
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: transform 0.3s ease;
  display: block;
}

/* ─── Mobile Navbar Toggle ───────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle.open .hamburger-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }
  .nav-toggle.open .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle.open .hamburger-line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }
  
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    z-index: 1002;
  }
  .hamburger-line {
    width: 24px;
    height: 3px;
    background-color: #fff;    /* white lines for contrast */
  }
  .nav-links {
    position: absolute;
    top: 6.5rem;               /* same as your header height */
    left: 0;
    right: 0;
    background: #002B73;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    z-index: 1001;
  }
  .nav-links.open {
    max-height: 20rem;         /* big enough for all your items */
  }
  .nav-item {
    width: 100%;
    padding: 0.75rem 0;
    text-align: center;
  }
}

/* ─── Contact Section: center everything ─────────────────────────────────── */
#contact .contact-grid {
  /* make the grid itself a flex-column and center it within its parent */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#contact .contact-info {
  /* center text and constrain its width */
  text-align: center;
  font-family: Segoe UI;
  max-width: 600px;
  margin: 0 auto;
}

#contact .contact-info-grid {
  /* stack the two info-cards vertically and center them */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

#contact .info-card {
  /* optional—keep each card from stretching too wide */
  width: 100%;
  max-width: 400px;
  align-items: center;
}

/* ─── Center content inside each info‐card ───────────────────────────────── */
#contact .info-card {
  display: flex;               /* make the card a flex container */
  flex-direction: column;      /* stack icon + text vertically */
  align-items: center;         /* horizontally center children */
  text-align: center;          /* center all text inside */
  padding: 1.5rem;             /* ensure there’s some breathing room */
  gap: 0.5rem;                 /* space between icon and text */
}

/* ─── Force footer copyright to be white ───────────────────── */
footer.site-footer p,
footer.site-footer p {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ─── Disable link on copyright line ────────────────────────── */
footer.site-footer p a {
  color:            #ffffff !important;  /* match surrounding text */
  text-decoration:  none      !important;  /* remove underline */
  pointer-events:   none      !important;  /* disable clicks */
  cursor:           default   !important;  /* normal arrow on hover */
}

/* ─── Un-link copyright line ──────────────────────────────────── */
footer.site-footer > p > a {
  color:            #ffffff !important;  /* make it look like plain white text */
  text-decoration:  none      !important;  /* kill the underline */
  pointer-events:   none      !important;  /* disable any clickability */
  cursor:           default   !important;  /* normal arrow, not hand */
}