body{
  margin:0;
  font-family:"Book Antiqua", serif;
  background:#fff;
  color:#0f172a;
}

.container{max-width:1200px;margin:auto;padding:0 24px}
.narrow{max-width:780px}

.header{
  position:fixed;
  top:0;left:0;right:0;
  background:#fff;
  border-bottom:1px solid #e5e7f0;
  z-index:100;
}

.navbar{
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo img{height:46px}

.nav a{
  margin-left:20px;
  text-decoration:none;
  font-weight:600;
  color:#0f172a;
}

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

.section{
  padding:96px 0;
  opacity:0;
  transform:translateY(40px);
  transition:.8s;
}

.section.visible{
  opacity:1;
  transform:none;
}

.subtle{background:#f6f8fc}

.hero{
  min-height:90vh;
  background:linear-gradient(135deg,#001533,#002060);
  color:#fff;
  display:flex;
  align-items:center;
}

.hero h1{font-size:56px}

.primary-btn{
  background:#fff;
  color:#002060;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  display:inline-block;
  margin-top:28px;
  text-decoration:none;
}

.interactive-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:28px;
}

.interactive-card{
  background:#fff;
  padding:26px;
  border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  min-height:320px;              /* NEW */
  display:flex;                  /* NEW */
  flex-direction:column;         /* NEW */
  justify-content:flex-start;
}

.tabs{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:24px;
}

.tab{
  border:1px solid #002060;
  padding:10px 18px;
  border-radius:999px;
  background:none;
  cursor:pointer;
}

.tab.active{
  background:#002060;
  color:#fff;
}

.card{
  background:#fff;
  padding:28px;
  border-radius:16px;
  margin-top:24px;
}

.hidden{display:none}

.scorecard{text-align:center}
#finalScore{font-size:56px;font-weight:700;color:#002060}

.logo-strip{
  display:flex;
  gap:24px;
  overflow-x:auto;
}

.logo-box{
  min-width:140px;
  height:80px;
  border:1px dashed #ccc;
  border-radius:12px;
}

.footer{
  background:#0f172a;
  color:#fff;
  padding:32px 0;
}

.footer-inner{
  display:flex;
  justify-content:space-between;
}

.card-detail{
  opacity:0;
  max-height:0;
  overflow:hidden;               /* NEW */
  transition:all .35s ease;
}

.interactive-card:hover .card-detail,
.interactive-card.active .card-detail{
  opacity:1;
  max-height:500px;              /* NEW */
}
.interactive-card {
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.interactive-card:hover,
.interactive-card.active {
  transform: translateY(-10px) scale(1.04);
  box-shadow: 0 24px 50px rgba(0,0,0,.14);
}

.interactive-card:hover .card-detail,
.interactive-card.active .card-detail {
  opacity: 1;
  max-height: 300px;
}
/* ===============================
   SERVICES TIMELINE (2-COLUMN)
   =============================== */

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

.timeline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.timeline-row.reverse {
  direction: rtl;
}

.timeline-row.reverse > * {
  direction: ltr;
}

.timeline-title {
  font-size: 26px;
  font-weight: 700;
  color: #002060;
}

.timeline-content {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  line-height: 1.8;
}

/* Mobile */
@media (max-width: 900px) {
  .timeline-row {
    grid-template-columns: 1fr;
  }

  .timeline-row.reverse {
    direction: ltr;
  }
}
/* CLIENT LOGOS */
.logo-strip {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  padding: 24px 0;
  align-items: center;
  scroll-behavior: smooth;
}

.logo-strip::-webkit-scrollbar {
  height: 6px;
}

.logo-strip::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.logo-strip img {
  height: 70px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}
/* QUESTION OPTIONS – FORCE VERTICAL */
.question .option {
  display: block;
  margin: 8px 0;
  cursor: pointer;
}
/* ===============================
   GLOBAL CENTER ALIGN – FULL SITE
   =============================== */

body,
section,
header,
footer,
.container,
.narrow,
.hero,
.card,
.interactive-card,
.question,
.tabs,
.tab,
.primary-btn,
.secondary-btn,
.nav,
.nav a,
.logo,
.logo-strip,
.scorecard,
.form-actions,
label,
p,
h1, h2, h3, h4, h5, h6,
ul, li {
  text-align: center;
}

/* Center radio options vertically & text centered */
.question label.option {
  display: block;
  text-align: center;
}

/* Center inputs & buttons */
input,
button {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Center navbar items */
.nav {
  justify-content: center;
}

/* Center logo strip */
.logo-strip img{
  height:70px;
  width:auto;
  object-fit:contain;
  filter:none;          /* FIX */
  opacity:1;            /* FIX */
  transition:transform .3s ease;
}

.logo-strip img:hover{
  transform:scale(1.06); /* subtle zoom only */
}
/* ===============================
   WHY US – BOTA GRID FIX
   =============================== */

.bota-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}

/* Ensure cards don’t force wrap */
.bota-grid .interactive-card {
  min-width: 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .bota-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .bota-grid {
    grid-template-columns: 1fr;
  }
}
/* ===============================
   SERVICES – 3 x 3 GRID FIX
   =============================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Tablet */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
/* ===============================
   SERVICES TIMELINE – FINAL FIX
   =============================== */

.timeline {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-top: 60px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

/* DEFAULT: title LEFT, content RIGHT */
.timeline-title {
  font-size: 22px;
  font-weight: 700;
  color: #002060;
  text-align: right;
}

.timeline-content {
  background: #ffffff;
  padding: 28px;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
  text-align: left;
}

/* REVERSED: content LEFT, title RIGHT */
.timeline-row.reverse {
  grid-template-columns: 1fr 1fr;
}

.timeline-row.reverse .timeline-title {
  grid-column: 2;
  text-align: left;
}

.timeline-row.reverse .timeline-content {
  grid-column: 1;
  text-align: right;
}

/* MOBILE STACK */
@media (max-width: 768px) {
  .timeline-row,
  .timeline-row.reverse {
    grid-template-columns: 1fr;
  }

  .timeline-title,
  .timeline-content {
    grid-column: 1 !important;
    text-align: center !important;
  }
}
/* Titles */
.timeline-title {
  text-align: center !important;
}

/* Content boxes */
.timeline-content {
  text-align: center !important;
}

/* Ensure reverse rows also stay centered */
.timeline-row.reverse .timeline-content,
.timeline-row.reverse .timeline-title {
  text-align: center !important;
}

/* Improve readability when centered */
.timeline-content p {
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

/* Mobile safety */
@media (max-width: 768px) {
  .timeline-title,
  .timeline-content {
    text-align: center !important;
  }
}

p,
li,
.timeline-content,
.card-detail,
.question,
label {
  text-align: justify;
}

/* Alternate service card colors */
.services-grid .interactive-card:nth-child(even){
  background:#002060;
  color:#ffffff;
}

.services-grid .interactive-card:nth-child(even) h4,
.services-grid .interactive-card:nth-child(even) p,
.services-grid .interactive-card:nth-child(even) a{
  color:#ffffff;
}
/* ===============================
   TEXT ALIGN FIX (JUSTIFY)
   =============================== */

/* Let’s Introspect questions & options */
#introspect,
#introspect p,
#introspect label,
#introspect .question {
  text-align: justify;
}

/* Service page content */
.timeline,
.timeline-content,
.timeline-content p {
  text-align: justify;
}

/* Service cards short text */
#services .card-detail p {
  text-align: justify;
}
/* ===============================
   SERVICES CARD SIZE FIX
   =============================== */

#services .interactive-card {
  padding: 18px;              /* smaller padding */
  min-height: auto;           /* remove forced height */
}

#services .interactive-card h4 {
  font-size: 18px;            /* tighter heading */
  margin-bottom: 8px;
}

#services .card-detail {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 8px;
}

/* Prevent over-expansion on hover */
#services .interactive-card:hover .card-detail {
  max-height: 160px;
}
/* =========================================
   FORCE JUSTIFY – SERVICES PAGE (FINAL)
   ========================================= */

/* Entire services page */
body.services-page * {
  text-align: justify !important;
}

/* Timeline content specifically */
.timeline-content,
.timeline-content p,
.timeline-title,
.timeline-title h3,
.timeline-title h4 {
  text-align: justify !important;
}

/* Remove accidental center alignment */
.timeline,
.timeline-row,
.timeline-row * {
  text-align: justify !important;
}

/* =========================================
   SERVICES TIMELINE – LEFT / RIGHT FIX
   ========================================= */

.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* Title column */
.timeline-title {
  flex: 0 0 35%;
  font-weight: 700;
  text-align: left;
}

/* Content column */
.timeline-content {
  flex: 0 0 65%;
  text-align: justify;
}

/* 🔁 REVERSED ROWS */
.timeline-row.reverse {
  flex-direction: row-reverse;
}

/* Reverse title alignment */
.timeline-row.reverse .timeline-title {
  text-align: right;
}

/* Reverse content alignment */
.timeline-row.reverse .timeline-content {
  text-align: justify;
}
/* =========================================
   SERVICES TIMELINE – MOBILE
   ========================================= */

@media (max-width: 768px) {
  .timeline-row,
  .timeline-row.reverse {
    flex-direction: column;
  }

  .timeline-title,
  .timeline-content {
    flex: 100%;
    text-align: justify;
  }

  .timeline-title {
    text-align: left;
  }
}
/* =========================================
   SERVICES TIMELINE – SIZE & OVERFLOW FIX
   ========================================= */

/* Prevent horizontal scrolling globally */
body {
  overflow-x: hidden;
}

/* Timeline container safety */
.timeline {
  max-width: 1100px;
  margin: 0 auto;
  overflow-x: hidden;
}

/* Timeline row */
.timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;               /* reduced gap */
  width: 100%;
  box-sizing: border-box;
}

/* Title column – smaller */
.timeline-title {
  flex: 0 0 30%;           /* ⬅ reduced from 35% */
  max-width: 30%;
  font-weight: 700;
  text-align: left;
  box-sizing: border-box;
}

/* Content column – controlled */
.timeline-content {
  flex: 0 0 70%;           /* ⬅ reduced from 65% */
  max-width: 70%;
  text-align: justify;
  box-sizing: border-box;
}

/* Reverse rows */
.timeline-row.reverse {
  flex-direction: row-reverse;
}

.timeline-row.reverse .timeline-title {
  text-align: right;
}

/* =========================================
   MOBILE – STACKED & COMPACT
   ========================================= */
@media (max-width: 768px) {
  .timeline-row,
  .timeline-row.reverse {
    flex-direction: column;
    gap: 16px;
  }

  .timeline-title,
  .timeline-content {
    flex: 100%;
    max-width: 100%;
    text-align: justify;
  }

  .timeline-title {
    text-align: left;
  }
}
/* =========================================
   SERVICES TIMELINE – HARD WIDTH LOCK
   (MATCHES PREVIOUS WORKING FILE)
   ========================================= */

body {
  overflow-x: hidden;
}

/* Timeline wrapper */
.timeline {
  max-width: 1100px;
  margin: 0 auto;
}

/* Row */
.timeline-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  gap: 40px;
}

/* 🔒 TITLE COLUMN – LOCKED */
.timeline-title {
  width: 32%;
  max-width: 32%;
  min-width: 32%;
  flex-shrink: 0;          /* ⬅ IMPORTANT */
  box-sizing: border-box;
  font-weight: 700;
  text-align: left;
}

/* 🔒 CONTENT COLUMN – LOCKED */
.timeline-content {
  width: 68%;
  max-width: 68%;
  min-width: 68%;
  flex-shrink: 0;          /* ⬅ IMPORTANT */
  box-sizing: border-box;
  text-align: justify;
}

/* Reverse rows */
.timeline-row.reverse {
  flex-direction: row-reverse;
}

.timeline-row.reverse .timeline-title {
  text-align: right;
}

/* =========================================
   MOBILE – STACKED (NO OVERFLOW)
   ========================================= */
@media (max-width: 768px) {
  .timeline-row,
  .timeline-row.reverse {
    flex-direction: column;
    gap: 16px;
  }

  .timeline-title,
  .timeline-content {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    text-align: justify;
  }

  .timeline-title {
    text-align: left;
  }
}
/* ==================================================
   GLOBAL MOBILE SAFETY
   ================================================== */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ==================================================
   TYPOGRAPHY – MOBILE SCALE
   ================================================== */
@media (max-width: 768px) {

  body {
    font-size: 15px;
    line-height: 1.6;
  }

  h1 {
    font-size: 32px;
    line-height: 1.15;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 20px;
  }

  h4 {
    font-size: 18px;
  }
}

/* ==================================================
   HEADER & NAVBAR
   ================================================== */
@media (max-width: 768px) {

  .navbar {
    height: auto;
    padding: 14px 0;
    flex-direction: column;
    gap: 12px;
  }

  .logo img {
    height: 38px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  .nav a {
    margin: 0;
    font-size: 14px;
  }
}

/* ==================================================
   HERO SECTION
   ================================================== */
@media (max-width: 768px) {

  .hero {
    min-height: auto;
    padding: 120px 0 80px;
    text-align: center;
  }

  .hero p {
    font-size: 16px;
  }

  .primary-btn {
    padding: 12px 22px;
    font-size: 14px;
  }
}

/* ==================================================
   GRID SECTIONS (ENABLE, SERVICES, WHY US)
   ================================================== */
@media (max-width: 768px) {

  .interactive-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .interactive-card {
    padding: 22px;
  }
}

/* ==================================================
   WHY US – BUILD OPERATE TRANSFER AUDIT
   ================================================== */
@media (max-width: 768px) {

  #Why\ Us .interactive-grid {
    grid-template-columns: 1fr;
  }

  #Why\ Us .interactive-card {
    min-height: auto;
  }
}

/* ==================================================
   LET’S INTROSPECT – QUESTIONS
   ================================================== */
@media (max-width: 768px) {

  .tabs {
    justify-content: center;
  }

  .tab {
    font-size: 13px;
    padding: 8px 14px;
  }

  .question label {
    display: block;
    margin: 8px 0;
  }
}

/* ==================================================
   CLIENT LOGOS – HORIZONTAL SCROLL
   ================================================== */
@media (max-width: 768px) {

  .logo-strip {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 12px;
  }

  .logo-box {
    min-width: 120px;
    height: 70px;
    flex-shrink: 0;
  }
}

/* ==================================================
   SERVICES PAGE TIMELINE – STACKED
   ================================================== */
@media (max-width: 768px) {

  .timeline-row,
  .timeline-row.reverse {
    flex-direction: column;
    gap: 14px;
  }

  .timeline-title,
  .timeline-content {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    text-align: justify;
  }

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

/* ==================================================
   CONNECT & FOOTER
   ================================================== */
@media (max-width: 768px) {

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  input,
  button {
    width: 100%;
  }
}
/* ===============================
   CLIENT LOGOS – SAME SIZE
   =============================== */

.logo-strip {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  padding: 10px 0;
}

.logo-box {
  width: 140px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 10px;
}

.logo-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* ===============================
   BOTA CARDS – ALTERNATE COLORS
   =============================== */

#Why\ Us .interactive-card {
  min-height: 180px;
  transition: all 0.35s ease;
}

#Why\ Us .interactive-card:nth-child(even) {
  background: #002060;
  color: #fff;
}

#Why\ Us .interactive-card:nth-child(even) .card-detail {
  color: #e0e7ff;
}

/* Hover expansion */
#Why\ Us .interactive-card:hover {
  transform: translateY(-8px) scale(1.05);
  min-height: 260px;
}
/* ===============================
   INTROSPECT TABS – BIGGER
   =============================== */

.tabs .tab {
  font-size: 15px;
  padding: 12px 22px;
  font-weight: 600;
}

/* Radio buttons on RIGHT */
.question label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.question input[type="radio"] {
  order: 2;
}
/* ===============================
   SERVICES GRID – 3 x 3
   =============================== */

#services .interactive-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
  #services .interactive-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  #services .interactive-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   LET’S INTROSPECT – RADIO LEFT
   =============================== */

.question label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}

/* radio explicitly on left */
.question input[type="radio"] {
  order: 0;
  margin: 0;
}
/* ===============================
   LET’S INTROSPECT – BIG TABS
   =============================== */

.tabs {
  justify-content: center;
  gap: 18px;
}

.tabs .tab {
  font-size: 17px;
  padding: 16px 30px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 240px;
  text-align: center;
}
/* ===============================
   LET’S INTROSPECT – TABS SINGLE LINE
   =============================== */

.tabs {
  display: flex;
  flex-wrap: nowrap;              /* ❗ force single line */
  justify-content: center;
  gap: 16px;
  overflow-x: auto;               /* safety for smaller screens */
  padding-bottom: 6px;
}

.tabs::-webkit-scrollbar {
  height: 6px;
}
.tabs::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

/* Tab button size */
.tabs .tab {
  white-space: nowrap;            /* ❗ prevent breaking text */
  font-size: 17px;
  padding: 16px 28px;
  font-weight: 700;
  border-radius: 999px;
  min-width: auto;
}
/* ===============================
   LET’S INTROSPECT – RADIO INLINE FIX
   =============================== */

.question label {
  display: flex;
  align-items: center;     /* ✅ vertical alignment */
  gap: 12px;
  margin-bottom: 10px;
  cursor: pointer;
}

/* radio circle */
.question input[type="radio"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}
/* ==========================================
   LET’S INTROSPECT – RADIO BUTTON FINAL FIX
   ========================================== */

/* Force each option into a single row */
.question label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;

  margin: 10px 0 !important;
  line-height: 1.5 !important;
  cursor: pointer;
}

/* Ensure radio stays inline */
.question input[type="radio"] {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Prevent text from dropping below */
.question label span,
.question label p {
  display: inline !important;
}
/* Smooth anchor navigation fix */
html {
  scroll-behavior: smooth;
}

/* Offset for fixed header */
.timeline-row {
  scroll-margin-top: 140px; /* adjust if header height changes */
}

.timeline-row {
  display: flex;
  align-items: center;   /* 👈 THIS FIXES VERTICAL ALIGNMENT */
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 80px;
}
.timeline-row.reverse {
  flex-direction: row-reverse;
}
.timeline-title {
  font-size: 28px;        /* increased */
  font-weight: 700;
  line-height: 1.3;
  max-width: 320px;
  text-align: center;
}
.timeline-content {
  font-size: 17px;        /* balanced with title */
  line-height: 1.8;
  text-align: justify;
}
#whyus h4 {
  font-size: 22px;
  font-weight: 700;
}

#whyus .card-detail p {
  font-size: 16.5px;
  line-height: 1.7;
}
#whyus .interactive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
#whyus .interactive-card {
  min-height: 220px;          /* smaller default */
  display: flex;
  flex-direction: column;
  justify-content: center;    /* 👈 vertical centering */
}
#whyus .interactive-card {
  transition: all 0.35s ease;
}

#whyus .interactive-card:hover {
  transform: scale(1.08);
  z-index: 2;
}