/* =========================
   V4 SOFT MOVING LIGHT SYSTEM (DARKER PREMIUM)
========================= */

section {
  position: relative;
  overflow: hidden;
  background: #f1f7ff; /* slightly deeper base */
  transition: background 3s ease;
}

/* keep content above effects */
section > * {
  position: relative;
  z-index: 3;
}

/* =========================
   1. BASE MOVING GRADIENT FIELD (DARKER BLUE DEPTH)
========================= */

section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    120deg,
    #f1f7ff,
    #d9ecff,
    #c7e3ff,
    #eaf4ff,
    #f1f7ff
  );

  background-size: 300% 300%;
  animation: softFlow 32s ease-in-out infinite;
  opacity: 0.95;
}

/* slow drifting motion */
@keyframes softFlow {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 45% 60%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 55% 40%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   2. SHINING WAVE (SLIGHTLY STRONGER CONTRAST)
========================= */

section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 30%,
    rgba(147,197,253,0.18) 45%,
    rgba(96,165,250,0.35) 50%,
    rgba(147,197,253,0.18) 55%,
    transparent 70%,
    transparent 100%
  );

  background-size: 200% 200%;
  animation: softShine 26s ease-in-out infinite;
  transform: skewX(-15deg);
  opacity: 0.85;
}

/* light sweep */
@keyframes softShine {
  0%   { background-position: -150% 0; }
  50%  { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* =========================
   SECTION VARIATIONS (DARKER BLUE SCALE)
========================= */

#insights::before {
  background: linear-gradient(120deg, #f1f7ff, #dbeafe, #f1f7ff);
}

#services::before {
  background: linear-gradient(120deg, #eef6ff, #d6e9ff, #eef6ff);
}

#approach::before {
  background: linear-gradient(120deg, #f1f7ff, #d9ecff, #eef6ff);
}

#why::before {
  background: linear-gradient(120deg, #eef5ff, #dcecff, #eef5ff);
}

#customers::before {
  background: linear-gradient(120deg, #f1f7ff, #d9ecff, #f1f7ff);
}

.cta-block::before {
  background: linear-gradient(120deg, #dbeafe, #f1f7ff, #dbeafe);
}

/* =========================
   BODY DEPTH CONTROL
========================= */

body {
  transition: background 4s ease;
  background: #f1f7ff;
}

body[data-active-section="insights"] { background: #eef6ff; }
body[data-active-section="services"] { background: #eaf4ff; }
body[data-active-section="approach"] { background: #f0f6ff; }
body[data-active-section="why"] { background: #edf5ff; }
body[data-active-section="customers"] { background: #eef7ff; }

/* =========================
   PERFORMANCE
========================= */

section {
  will-change: transform, background;
}

section::before,
section::after {
  transform: translateZ(0);
}

/* HERO OVERLAY (slightly deeper for contrast balance) */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    120deg,
    rgba(226, 240, 255, 0.20),
    rgba(186, 220, 255, 0.12),
    rgba(147, 197, 253, 0.10)
  );

  backdrop-filter: blur(1px);
}
.hero {
  position: relative;
  min-height: 100vh;        /* critical fix */
  height: 100svh;           /* better mobile support */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
  max-width: 900px;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.05); /* slight cinematic zoom */
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: radial-gradient(
      circle at 20% 30%,
      rgba(147, 197, 253, 0.35),
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(186, 230, 253, 0.25),
      transparent 45%
    );

  animation: floatGlow 10s ease-in-out infinite alternate;
}

@keyframes floatGlow {
  0% {
    transform: translateY(0px) scale(1);
  }
  100% {
    transform: translateY(-20px) scale(1.05);
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: -50%;
  z-index: 1;

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 60%
  );

  transform: rotate(25deg);
  animation: shineSweep 8s linear infinite;
  opacity: 0.4;
}

@keyframes shineSweep {
  0% {
    transform: translateX(-40%) rotate(25deg);
  }
  100% {
    transform: translateX(40%) rotate(25deg);
  }
}

.hero-content {
  animation: heroFadeUp 1.2s ease-out both;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-logo {
  animation: logoBreath 1.6s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

@keyframes logoBreath {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(147, 197, 253, 0));
  }

  50% {
    transform: scale(1.06);
    filter: drop-shadow(0 0 18px rgba(147, 197, 253, 0.45));
  }

  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(147, 197, 253, 0));
  }
}



h2:hover {
  font-weight: 750;
  letter-spacing: 0.8px;
    
  transform: translateY(-2px);
  text-shadow: 0 6px 20px rgba(147, 197, 253, 0.25);
}
h2:hover {
  background: linear-gradient(
    110deg,
    #0f172a 0%,
    #0f172a 40%,
    #00a8d5 50%,
    #0f172a 60%,
    #00a8d5 100%
  );

  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: lightFill 4.2s linear infinite;
}

/* shine movement */
@keyframes lightFill {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

body {
  margin: 0;
  background: #0b1220; /* or your base bluish tone */
}

section {
  position: relative;
  margin: 0;
  padding: 120px 0;
  background: transparent;
}

/* smooth blending fade between sections */
section::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 0;

  background: radial-gradient(
    circle at center,
    rgba(147,197,253,0.12),
    transparent 70%
  );

  animation: floatFade 8s ease-in-out infinite;
}

@keyframes floatFade {
  0%, 100% { transform: translateY(0px); opacity: 0.4; }
  50% { transform: translateY(10px); opacity: 0.8; }
}




.hero-content {
  position: relative;
  z-index: 2;

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

  text-align: center;

 /* 🔥 controls spacing between logo, h1, h3 */
}


.hero h1 {
  margin: 0;
  line-height: 1.1;
}

.hero h3 {
  margin: 0;
  line-height: 1.2;
  opacity: 0.85;
}
.hero-logo {
  width: 360px;   /* adjust down from large default */
  height: auto;
  margin-bottom: 20px;
}











/* =========================
   SERVICE CARD TYPOGRAPHY FIX
========================= */

.service-card {
  position: relative;
  overflow: hidden;
}

/* ensure consistent text block sizing */
.service-card h3,
.service-card p {
  background: #ffffff;
  color: #00a8d5;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* =========================
   H3 (SMALLER + CONSISTENT)
========================= */

.service-card h3 {
  font-size: 15px;           /* reduced for uniform compact look */
  font-weight: 600;
  line-height: 1.3;
  padding: 12px 14px 6px 14px;

  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  border-bottom: 1px solid rgba(0, 168, 213, 0.12);
}

/* =========================
   PARAGRAPH (TIGHTER + CLEAN)
========================= */

.service-card p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;          /* reduces vertical spread */
  letter-spacing: 0.1px;     /* improves readability */
  word-spacing: 0.5px;       /* fixes “too wide spacing feel” */

  padding: 8px 14px 14px 14px;

  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;

  color: #1a9cc7;
  opacity: 0.95;
}

/* =========================
   CONSISTENT CARD FOOTPRINT FIX
   (prevents uneven height perception)
========================= */

.service-card h3,
.service-card p {
  min-height: auto;
}

/* optional hover refinement */
.service-card:hover h3,
.service-card:hover p {
  color: #007aa3;
}


































/* =========================
   VALUE CARDS V3 (WHITE PREMIUM)
========================= */

.value-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 30px;
}

/* CARD */
.value-card-v2 {
  position: relative;
  background: #ffffff; /* pure white */
  border-radius: 14px;
  padding: 22px 20px;

  border: 1px solid rgba(0, 168, 213, 0.10);
  box-shadow: 0 8px 22px rgba(0, 60, 90, 0.06);

  transition: all 0.3s ease;
  overflow: hidden;
}

/* LEFT ACCENT BAR */
.value-accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;

  background: linear-gradient(
    180deg,
    #00a8d5,
    #4fc3f7
  );
}

/* TEXT */
.value-card-v2 p {
  margin: 0;
  padding-left: 10px;

  font-size: 14px;
  line-height: 1.7;
  text-align: justify;

  color: #0b6f8f; /* deep professional blue */
  word-spacing: 0.4px;
  letter-spacing: 0.1px;
}

/* HOVER STATE */
.value-card-v2:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 168, 213, 0.25);
  box-shadow: 0 16px 35px rgba(0, 168, 213, 0.12);
}

/* subtle light sweep */
.value-card-v2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 10%,
    rgba(0,168,213,0.06),
    transparent 55%
  );
  opacity: 0;
  transition: 0.4s ease;
}

.value-card-v2:hover::after {
  opacity: 1;
}




















/* =========================
   ABOUT GRID COMPACT MODE
   (REDUCES HEIGHT ~40-50%)
========================= */

.about-grid {
  align-items: start;
}

/* compress left content spacing */
.about-content {
  gap: 10px !important;
}

/* reduce paragraph spacing heavily */
.about-text {
  margin: 0 0 10px 0 !important;
  line-height: 1.55 !important;
  font-size: 14.5px !important;
}

/* reduce title spacing */
.about-title {
  margin-bottom: 8px !important;
  font-size: 32px !important;
}

/* compress highlight section */
.about-highlights {
  margin-top: 12px !important;
  gap: 10px !important;
}

/* shrink highlight cards */
.highlight-card {
  padding: 12px 10px !important;
}

/* reduce number size slightly */
.highlight-card span {
  font-size: 18px !important;
}

/* compress right panel */
.glass-card {
  padding: 18px !important;
}

/* reduce list spacing */
.glass-card li {
  margin-bottom: 5px !important;
  font-size: 13.5px !important;
}

/* IMPORTANT: kill extra bottom breathing space */
.about-v4 {
  padding: 70px 0 30px !important;
}

/* =========================
   ABOUT SECTION V4 CLEAN
   SINGLE SOURCE OF TRUTH
========================= */

.about-v4 {
  padding: 90px 0 70px;
  background: #f7fbff;
  position: relative;
  overflow: hidden;
}

/* soft animated light background */
.about-v4::before {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    120deg,
    #ffffff,
    #eef7ff,
    #e3f2ff,
    #f8fcff,
    #ffffff
  );

  background-size: 300% 300%;
  animation: aboutFlow 18s ease-in-out infinite;
  z-index: 0;
  opacity: 0.95;
}

@keyframes aboutFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* =========================
   LAYOUT GRID (FIXED)
========================= */

.about-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* =========================
   LEFT SIDE CONTENT
========================= */

.about-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-title {
  font-size: 36px;
  font-weight: 800;
  color: #0b4f6c;
  margin: 0 0 8px 0;
  letter-spacing: -0.4px;
}

.about-text {
  font-size: 15.5px;
  line-height: 1.8;
  color: #1b2b3a;
  margin: 0;
  text-align: justify;
}

/* =========================
   HIGHLIGHTS (CLEAN GRID)
========================= */

.about-highlights {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.highlight-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 16px 14px;
  text-align: center;

  border: 1px solid rgba(0,168,213,0.10);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);

  transition: 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 26px rgba(0,168,213,0.12);
}

.highlight-card span {
  font-size: 20px;
  font-weight: 800;
  color: #00a8d5;
  display: block;
}

.highlight-card p {
  font-size: 13px;
  color: #355a6b;
  margin: 6px 0 0;
}

/* =========================
   RIGHT PANEL (FIXED)
========================= */

.about-visual {
  position: sticky;
  top: 90px;
}

.glass-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 26px;

  border: 1px solid rgba(0,168,213,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);

  animation: floatSoft 6s ease-in-out infinite;
}

@keyframes floatSoft {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.glass-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0b4f6c;
  margin-bottom: 14px;
}

.glass-card ul {
  margin: 0;
  padding-left: 18px;
}

.glass-card li {
  font-size: 14px;
  color: #1b2b3a;
  margin-bottom: 8px;
}

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

@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-highlights {
    grid-template-columns: 1fr;
  }

  .about-visual {
    position: relative;
    top: auto;
  }
}
/* =========================
   ABOUT SECTION GAP FIX (SAFE PATCH)
   DO NOT CHANGE HTML
========================= */

/* kill bottom overflow gap */
.about-v4 {
  padding: 90px 0 40px !important; /* reduced bottom padding */
  margin: 0 !important;
  overflow: hidden;
}

/* container spacing normalization */
.about-grid {
  margin: 0 !important;
  padding: 0 !important;
  align-items: start;
}

/* remove default paragraph spacing chaos */
.about-text {
  margin: 0 0 14px 0 !important;
  line-height: 1.8;
}

/* last paragraph should not push layout */
.about-text:last-of-type {
  margin-bottom: 0 !important;
}

/* highlight section spacing control */
.about-highlights {
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

/* prevent cards from adding extra bottom space */
.highlight-card {
  margin: 0 !important;
}

/* visual panel should not stretch layout */
.about-visual {
  margin: 0 !important;
  padding: 0 !important;
}

/* glass card internal spacing stability */
.glass-card {
  margin: 0 !important;
}

/* remove accidental section gap from next section */
#about + section {
  margin-top: 0 !important;
  padding-top: 60px; /* controlled spacing only */
}

/* safety: prevent animation affecting layout height */
.about-v4 * {
  box-sizing: border-box;
}

/* OPTIONAL: prevent flex/grid collapsing issues */
.about-content,
.about-visual {
  min-height: 0;
}

.about-visual {
  margin-left: 100px  !important ; 
   margin-top: 100px  !important ; 
}
.value-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}
.value-card-v2 p {
  font-weight: 700;
}




/* =========================================
   VISION & MISSION PAGE
========================================= */

.page-vision {
  background: #f7fbff;
  overflow-x: hidden;
}

/* HERO */

.vm-hero {
  position: relative;
  overflow: hidden;

  padding:
    170px
    0
    120px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #eef8ff,
      #dff2ff
    );
}

.vm-hero-bg {
  position: absolute;
  inset: -20%;

  background:
    radial-gradient(circle at 20% 30%, rgba(0,168,213,0.15), transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(79,195,247,0.18), transparent 35%);

  animation: vmFlow 12s ease-in-out infinite alternate;
}

@keyframes vmFlow {
  from {
    transform: translate(-2%, -2%) scale(1);
  }

  to {
    transform: translate(2%, 2%) scale(1.05);
  }
}

.vm-hero-wrap {
  position: relative;
  z-index: 2;

  text-align: center;
}

.vm-badge {
  display: inline-flex;

  padding: 10px 18px;

  border-radius: 100px;

  background: rgba(255,255,255,0.8);

  border:
    1px solid rgba(0,168,213,0.12);

  color: #0087ab;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;

  margin-bottom: 24px;
}

.vm-title {
  font-size: clamp(54px, 8vw, 100px);

  line-height: 0.95;

  font-weight: 900;

  letter-spacing: -3px;

  margin-bottom: 28px;

  background:
    linear-gradient(
      90deg,
      #0b2a3a,
      #00a8d5,
      #0b2a3a
    );

  background-size: 220% auto;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: titleMove 8s linear infinite;
}

@keyframes titleMove {
  from {
    background-position: 0% center;
  }

  to {
    background-position: 220% center;
  }
}

.vm-sub {
  max-width: 900px;

  margin-inline: auto;

  font-size: 20px;

  line-height: 1.9;

  color: #3c6477;
}

/* SECTION */

.vm-section {
  padding: 90px 0;
}

.vm-section-alt {
  background: #ffffff;
}

.vm-grid {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 34px;

  align-items: stretch;
}

/* PANEL */

.vm-panel {
  position: relative;

  overflow: hidden;

  padding: 44px;

  border-radius: 28px;

  background:
    rgba(255,255,255,0.78);

  backdrop-filter: blur(12px);

  border:
    1px solid rgba(0,168,213,0.08);

  box-shadow:
    0 15px 40px rgba(0,168,213,0.08);

  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease;
}

.vm-panel:hover {
  transform: translateY(-8px);

  box-shadow:
    0 24px 55px rgba(0,168,213,0.16);
}

.vm-glow {
  position: absolute;

  inset: -40%;

  background:
    radial-gradient(circle,
      rgba(0,168,213,0.10),
      transparent 60%);

  animation: glowMove 8s ease infinite;
}

@keyframes glowMove {
  0% {
    transform: translate(-10%, -10%);
  }

  50% {
    transform: translate(10%, 10%);
  }

  100% {
    transform: translate(-10%, -10%);
  }
}

.vm-label {
  position: relative;
  z-index: 2;

  display: inline-flex;

  margin-bottom: 20px;

  color: #00a8d5;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.vm-panel h2 {
  position: relative;
  z-index: 2;

  font-size: 42px;

  line-height: 1.1;

  font-weight: 800;

  color: #0b2a3a;

  margin-bottom: 24px;
}

.vm-panel p {
  position: relative;
  z-index: 2;

  font-size: 16px;

  line-height: 1.95;

  color: #44687a;

  margin-bottom: 18px;
}

/* SIDE */

.vm-side-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.vm-mini-card,
.vm-stat-card {
  background: #ffffff;

  border-radius: 20px;

  padding: 28px;

  border:
    1px solid rgba(0,168,213,0.08);

  box-shadow:
    0 10px 28px rgba(0,168,213,0.06);

  transition:
    transform 0.35s ease;
}

.vm-mini-card:hover,
.vm-stat-card:hover {
  transform: translateY(-5px);
}

.vm-mini-card h3,
.vm-stat-card span {
  color: #00a8d5;

  font-size: 26px;
  font-weight: 800;

  display: block;

  margin-bottom: 10px;
}

.vm-mini-card p,
.vm-stat-card p {
  color: #4b6d7e;

  line-height: 1.8;
}

/* PHILOSOPHY */

.vm-philosophy {
  padding: 100px 0 120px;

  background:
    linear-gradient(
      180deg,
      #f7fbff,
      #ffffff
    );
}

.vm-head {
  text-align: center;

  margin-bottom: 50px;
}

.vm-head span {
  color: #00a8d5;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.vm-head h2 {
  font-size: 52px;

  font-weight: 800;

  color: #0b2a3a;

  margin-top: 14px;
}

.vm-philo-grid {
  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;
}

.vm-philo-card {
  padding: 34px;

  background: #ffffff;

  border-radius: 24px;

  text-align: center;

  border:
    1px solid rgba(0,168,213,0.08);

  box-shadow:
    0 10px 25px rgba(0,168,213,0.06);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.vm-philo-card:hover {
  transform: translateY(-8px);

  box-shadow:
    0 18px 40px rgba(0,168,213,0.12);
}

.vm-philo-card h3 {
  font-size: 24px;

  font-weight: 800;

  color: #00a8d5;

  margin-bottom: 14px;
}

.vm-philo-card p {
  color: #44687a;

  line-height: 1.8;
}

/* RESPONSIVE */

@media (max-width: 992px) {

  .vm-grid,
  .vm-philo-grid {
    grid-template-columns: 1fr;
  }

  .vm-panel {
    padding: 30px;
  }

  .vm-panel h2 {
    font-size: 34px;
  }

  .vm-head h2 {
    font-size: 38px;
  }

}

/* ========================================
   CORE VALUES PAGE
======================================== */

.values-hero {
  position: relative;
  overflow: hidden;
  padding: 170px 0 120px;
  background:
    linear-gradient(
      135deg,
      #f8fcff,
      #edf7ff,
      #ffffff
    );
}

.values-hero::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: -250px;
  right: -180px;

  background:
    radial-gradient(
      circle,
      rgba(0,168,213,0.12),
      transparent 70%
    );

  animation: valuesFloat 10s ease-in-out infinite;
}

@keyframes valuesFloat {

  0%,100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(25px);
  }

}

.values-hero-wrap {
  position: relative;
  z-index: 2;
  max-width: 900px;
  text-align: center;
}

.values-mini-title {
  display: inline-block;
  margin-bottom: 20px;

  padding: 8px 18px;

  border-radius: 999px;

  background: rgba(0,168,213,0.08);

  color: #00a8d5;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
}

.values-hero h1 {
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  color: #09384d;
  margin-bottom: 22px;
}

.values-hero p {
  font-size: 18px;
  line-height: 1.9;
  color: #4b6f81;
  max-width: 760px;
  margin: auto;
}

/* ========================================
   VALUES GRID
======================================== */

.values-main-section {
  padding: 100px 0;
  background: #ffffff;
}

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

.core-value-card {
  position: relative;

  background: #ffffff;

  border-radius: 26px;

  padding: 38px 34px;

  overflow: hidden;

  border: 1px solid rgba(0,168,213,0.08);

  box-shadow:
    0 10px 35px rgba(15,70,92,0.06);

  transition: 0.45s ease;
}

.core-value-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background:
    linear-gradient(
      90deg,
      #00a8d5,
      #67d6ff
    );
}

.core-value-card:hover {
  transform: translateY(-10px);

  box-shadow:
    0 18px 45px rgba(0,168,213,0.14);
}

.value-icon {
  width: 72px;
  height: 72px;

  border-radius: 22px;

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

  background:
    linear-gradient(
      135deg,
      #e7f8ff,
      #f7fdff
    );

  font-size: 28px;

  margin-bottom: 28px;
}

.core-value-card h3 {
  font-size: 24px;
  font-weight: 800;
  color: #0b4055;
  margin-bottom: 16px;
}

.core-value-card p {
  font-size: 15px;
  line-height: 1.9;
  color: #547485;
}

/* ========================================
   PRINCIPLES
======================================== */

.principles-section {
  padding: 110px 0;
  background: #f8fcff;
}

.principles-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.section-badge {
  display: inline-block;

  margin-bottom: 20px;

  color: #00a8d5;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
}

.principles-left h2 {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 800;
  color: #09384d;
  margin-bottom: 22px;
}

.principles-left p {
  font-size: 16px;
  line-height: 1.9;
  color: #4f7284;
  margin-bottom: 18px;
}

.principles-right {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 22px;
}

.principle-box {
  background: #ffffff;

  border-radius: 22px;

  padding: 30px;

  border: 1px solid rgba(0,168,213,0.08);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.05);

  transition: 0.35s ease;
}

.principle-box:hover {
  transform: translateY(-8px);
}

.principle-box span {
  font-size: 42px;
  font-weight: 800;
  color: rgba(0,168,213,0.18);

  display: block;

  margin-bottom: 14px;
}

.principle-box h4 {
  font-size: 18px;
  font-weight: 700;
  color: #0d4b61;
}

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

.values-cta {
  padding: 110px 0;

  background:
    linear-gradient(
      135deg,
      #0c4d63,
      #0a607d
    );

  text-align: center;
}

.values-cta h2 {
  color: #ffffff;

  font-size: 52px;

  font-weight: 800;

  margin-bottom: 18px;
}

.values-cta p {
  color: rgba(255,255,255,0.85);

  font-size: 18px;

  max-width: 760px;

  margin: auto auto 35px;
}

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

@media (max-width: 992px) {

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

  .principles-wrap {
    grid-template-columns: 1fr;
  }

  .principles-right {
    grid-template-columns: 1fr;
  }

  .values-hero {
    padding: 150px 0 90px;
  }

  .values-cta h2 {
    font-size: 38px;
  }

}


.hero-video {
  will-change: transform;
  transform: translateZ(0);
}

/* ==================================================
   ABOUT PAGE PREMIUM
================================================== */

.page-about {
  background: #f7fbff;
}

/* HERO */

.ab-hero {
  position: relative;
  overflow: hidden;
  padding: 180px 0 130px;
}

.ab-hero-bg {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 20% 30%, rgba(0,168,213,0.12), transparent 35%),
    radial-gradient(circle at 80% 70%, rgba(0,168,213,0.10), transparent 40%),
    linear-gradient(
      135deg,
      #ffffff,
      #eef7ff,
      #f7fbff
    );

  background-size: 200% 200%;
  animation: heroFlow 14s ease infinite;
}

@keyframes heroFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.ab-hero-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 950px;
}

.ab-badge {
  display: inline-flex;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(0,168,213,0.08);
  color: #008db3;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 26px;
}

.ab-title {
  font-size: clamp(46px, 6vw, 82px);
  line-height: 1.05;
  font-weight: 900;
  color: #0d2436;
  letter-spacing: -2px;
}

.ab-sub {
  max-width: 760px;
  margin: 30px auto 0;
  font-size: 18px;
  line-height: 1.8;
  color: #426273;
}

/* SECTION */

.ab-section {
  padding: 110px 0;
}

.ab-section-alt {
  background: linear-gradient(
    180deg,
    #ffffff,
    #f7fbff
  );
}

.ab-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: start;
}

.ab-label,
.ab-head span {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: #00a8d5;
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.ab-panel h2,
.ab-head h2 {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 850;
  color: #10283a;
  margin-bottom: 28px;
}

.ab-panel p {
  font-size: 16px;
  line-height: 1.9;
  color: #476476;
  margin-bottom: 18px;
}

/* SIDE CARDS */

.ab-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ab-mini-card {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0,168,213,0.10);

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

  box-shadow: 0 10px 35px rgba(0,0,0,0.05);

  transition: 0.35s ease;
}

.ab-mini-card:hover {
  transform: translateY(-8px);
}

.ab-mini-card span {
  display: block;
  font-size: 34px;
  font-weight: 900;
  color: #00a8d5;
  margin-bottom: 10px;
}

.ab-mini-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #486476;
}

/* CARDS */

.ab-cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 26px;
  margin-top: 60px;
}

.ab-card {
  background: white;
  border-radius: 28px;
  padding: 36px;

  border: 1px solid rgba(0,168,213,0.08);

  box-shadow: 0 12px 30px rgba(0,0,0,0.04);

  transition: 0.35s ease;
}

.ab-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0,168,213,0.12);
}

.ab-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #123246;
  margin-bottom: 14px;
}

.ab-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #547080;
}

/* PROCESS */

.ab-process {
  padding: 110px 0;
}

.ab-process-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  margin-top: 70px;
}

.ab-step {
  position: relative;

  background: white;
  border-radius: 26px;
  padding: 34px;

  border: 1px solid rgba(0,168,213,0.08);

  overflow: hidden;
}

.ab-step-no {
  font-size: 54px;
  font-weight: 900;
  color: rgba(0,168,213,0.10);
  margin-bottom: 20px;
}

.ab-step h3 {
  font-size: 22px;
  font-weight: 800;
  color: #123246;
  margin-bottom: 12px;
}

.ab-step p {
  font-size: 15px;
  line-height: 1.8;
  color: #547080;
}

/* RESPONSIVE */

@media (max-width: 992px) {

  .ab-grid,
  .ab-process-grid,
  .ab-cards {
    grid-template-columns: 1fr;
  }

  .ab-title {
    font-size: 48px;
  }

  .ab-panel h2,
  .ab-head h2 {
    font-size: 34px;
  }

}








































/* =========================================
   HOME V5 PREMIUM
========================================= */

:root{
  --navy:#0f1725;
  --navy-2:#162234;
  --slate:#5f6f85;
  --line:rgba(255,255,255,0.08);
  --cyan:#3dc7ff;
  --cyan-soft:#8fe3ff;
  --light:#f4f8fc;
}

/* BODY */

.home-v5{
  background:#f6f9fc;
  color:#101828;
  overflow-x:hidden;
}

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

.hero-v5{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#09111d;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      115deg,
      rgba(5,10,18,.92),
      rgba(8,18,32,.84),
      rgba(8,20,36,.75)
    );
}

.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:70px;
  align-items:center;
  padding-top:140px;
  padding-bottom:110px;
}

/* LEFT */

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#cfe8ff;
  font-size:13px;
  font-weight:600;
  margin-bottom:28px;
  backdrop-filter:blur(12px);
}

.hero-title{
  font-size:68px;
  line-height:1.02;
  font-weight:800;
  color:#fff;
  max-width:850px;
  letter-spacing:-2px;
  margin-bottom:26px;
  font-family:"Poppins",sans-serif;
}

.hero-sub{
  max-width:720px;
  font-size:18px;
  line-height:1.9;
  color:rgba(255,255,255,.72);
  margin-bottom:40px;
}

.hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:55px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:720px;
}

.hero-stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:28px 22px;
  backdrop-filter:blur(12px);
}

.hero-stat span{
  display:block;
  font-size:32px;
  font-weight:800;
  color:#fff;
  margin-bottom:10px;
}

.hero-stat p{
  color:rgba(255,255,255,.7);
  font-size:14px;
  line-height:1.5;
}

/* RIGHT */

.hero-right{
  position:relative;
}

.hero-panel{
  position:relative;
  overflow:hidden;
  background:rgba(10,17,30,.72);
  border:1px solid rgba(255,255,255,.08);
  border-radius:34px;
  padding:40px;
  backdrop-filter:blur(16px);
  box-shadow:
    0 20px 80px rgba(0,0,0,.35);
}

.panel-glow{
  position:absolute;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(61,199,255,.18), transparent 70%);
  top:-180px;
  right:-120px;
}

.panel-label{
  display:inline-block;
  color:var(--cyan-soft);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:18px;
}

.hero-panel h3{
  color:#fff;
  font-size:34px;
  line-height:1.2;
  font-weight:700;
  margin-bottom:34px;
}

.hero-panel-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.hero-list-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.hero-list-item span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--cyan);
  flex-shrink:0;
}

.hero-list-item p{
  color:rgba(255,255,255,.8);
  font-size:15px;
  font-weight:500;
}

/* =========================================
   SECTION BASE
========================================= */

.home-about-strip,
.home-services-v5,
.why-v5,
.clients-v5,
.cta-v5{
  padding:110px 0;
}

.vm-philosophy{
  padding-top:110px;
  padding-bottom:110px;
}

/* =========================================
   ABOUT STRIP
========================================= */

.home-about-strip{
  background:#fff;
}

.strip-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}

.section-mini{
  display:inline-block;
  color:#3b82f6;
  font-size:13px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:18px;
}

.strip-left h2{
  font-size:50px;
  line-height:1.1;
  font-weight:800;
  color:#0f1725;
  letter-spacing:-1px;
}

.strip-right p{
  color:#526173;
  line-height:2;
  font-size:16px;
}

/* =========================================
   SERVICES
========================================= */

.home-services-v5{
  background:#eef5fb;
}

.services-v5-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin-top:60px;
}

.service-v5-card{
  background:#fff;
  border-radius:26px;
  padding:38px;
  transition:.35s ease;
  border:1px solid rgba(15,23,37,.06);
  box-shadow:0 10px 30px rgba(15,23,37,.04);
}

.service-v5-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(15,23,37,.08);
}

.service-v5-card h3{
  font-size:22px;
  line-height:1.3;
  font-weight:700;
  color:#0f1725;
  margin-bottom:18px;
}

.service-v5-card p{
  color:#607086;
  line-height:1.9;
  font-size:15px;
}

/* =========================================
   WHY
========================================= */

.why-v5{
  background:#fff;
}

.why-grid-v5{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

.why-card-v5{
  background:linear-gradient(
    180deg,
    #142132,
    #0e1827
  );

  border-radius:28px;
  padding:42px;
  position:relative;
  overflow:hidden;
}

.why-card-v5::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(
    90deg,
    #3dc7ff,
    #8fe3ff
  );
}

.why-card-v5 h3{
  color:#fff;
  font-size:26px;
  font-weight:700;
  margin-bottom:18px;
}

.why-card-v5 p{
  color:rgba(255,255,255,.72);
  line-height:1.9;
}

/* =========================================
   CLIENTS
========================================= */

.clients-v5{
  background:#f6f9fc;
}

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

.cta-v5{
  background:#0c1522;
}

.cta-v5-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
  padding:60px;
  border-radius:34px;
  background:linear-gradient(
    135deg,
    #162235,
    #0d1726
  );
  border:1px solid rgba(255,255,255,.06);
}

.cta-v5-box span{
  display:inline-block;
  color:#82dfff;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:16px;
}

.cta-v5-box h2{
  color:#fff;
  font-size:46px;
  line-height:1.1;
  font-weight:800;
  margin-bottom:18px;
  max-width:760px;
}

.cta-v5-box p{
  color:rgba(255,255,255,.7);
  line-height:1.9;
  max-width:700px;
}

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

@media(max-width:1100px){

  .hero-grid,
  .strip-grid{
    grid-template-columns:1fr;
  }

  .services-v5-grid,
  .why-grid-v5{
    grid-template-columns:1fr 1fr;
  }

  .hero-title{
    font-size:56px;
  }

}

@media(max-width:768px){

  .hero-grid{
    padding-top:130px;
    padding-bottom:80px;
  }

  .hero-title{
    font-size:42px;
  }

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

  .hero-stats{
    grid-template-columns:1fr;
  }

  .services-v5-grid,
  .why-grid-v5{
    grid-template-columns:1fr;
  }

  .strip-left h2,
  .cta-v5-box h2{
    font-size:34px;
  }

  .hero-panel{
    padding:30px;
  }

  .cta-v5-box{
    padding:36px;
    flex-direction:column;
    align-items:flex-start;
  }

}





























/* ========================================
   ABOUT HERO — LIGHT PREMIUM THEME
======================================== */

.ab-hero {
  position: relative;
  overflow: hidden;

  padding: 170px 0 120px;

  background:
    linear-gradient(
      135deg,
      #f8fcff,
      #edf7ff,
      #ffffff
    );
}

/* Floating Ambient Glow */
.ab-hero::before {
  content: "";

  position: absolute;

  width: 700px;
  height: 700px;

  top: -260px;
  right: -180px;

  background:
    radial-gradient(
      circle,
      rgba(0,168,213,0.12),
      transparent 70%
    );

  animation: abFloat 10s ease-in-out infinite;
}

.ab-hero::after {
  content: "";

  position: absolute;

  width: 500px;
  height: 500px;

  bottom: -180px;
  left: -140px;

  background:
    radial-gradient(
      circle,
      rgba(103,214,255,0.12),
      transparent 70%
    );

  animation: abFloat 12s ease-in-out infinite reverse;
}

/* Animation */
@keyframes abFloat {

  0%,100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(25px);
  }

}

/* Content Wrapper */
.ab-hero-content {
  position: relative;
  z-index: 2;

  max-width: 920px;
}

/* Badge */
.ab-badge {
  display: inline-block;

  margin-bottom: 24px;

  padding: 10px 18px;

  border-radius: 999px;

  background:
    rgba(0,168,213,0.08);

  color: #00a8d5;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;

  animation: fadeUp 0.7s ease forwards;
}

/* Heading */
.ab-title {
  margin-bottom: 28px;

  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -2px;

  color: #09384d;

  animation: fadeUp 0.95s ease forwards;
}

.ab-title span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #00a8d5,
      #53d2ff
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Paragraph */
.ab-sub {
  max-width: 760px;

  margin-bottom: 42px;

  font-size: 18px;
  line-height: 1.9;

  color: #4b6f81;

  animation: fadeUp 1.1s ease forwards;
}

/* Buttons */
.ab-hero-actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;

  animation: fadeUp 1.25s ease forwards;
}

/* Shared Button */
.ab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 16px 30px;

  border-radius: 16px;

  font-size: 15px;
  font-weight: 700;

  text-decoration: none;

  transition: 0.35s ease;
}

/* Primary */
.ab-btn-primary {
  background:
    linear-gradient(
      135deg,
      #00a8d5,
      #53d2ff
    );

  color: #ffffff;

  box-shadow:
    0 14px 35px rgba(0,168,213,0.22);
}

.ab-btn-primary:hover {
  transform: translateY(-5px);

  box-shadow:
    0 20px 45px rgba(0,168,213,0.28);
}

/* Secondary */
.ab-btn-secondary {
  background: #ffffff;

  border: 1px solid rgba(0,168,213,0.12);

  color: #0d4b61;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.05);
}

.ab-btn-secondary:hover {
  transform: translateY(-5px);

  border-color: rgba(0,168,213,0.28);
}

/* Entrance Animation */
@keyframes fadeUp {

  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}

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

@media (max-width: 992px) {

  .ab-hero {
    padding: 150px 0 90px;
  }

  .ab-title {
    font-size: clamp(38px, 8vw, 58px);
    line-height: 1.08;
  }

}

@media (max-width: 768px) {

  .ab-hero {
    padding: 140px 0 80px;
  }

  .ab-title {
    font-size: 42px;
    letter-spacing: -1px;
  }

  .ab-sub {
    font-size: 16px;
    line-height: 1.8;
  }

  .ab-hero-actions {
    flex-direction: column;
  }

  .ab-btn {
    width: 100%;
  }

}


.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* VIDEO FULL COVER */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

/* ONLY VIDEO DARK OVERLAY (not content) */
.hero-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.55)
  );

  z-index: 2;
}

/* CONTENT IS CLEAN (NO BACKGROUND) */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: white;
  padding: 20px;
}

/* OPTIONAL: subtle text glow for readability */
.hero-content h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 6px 25px rgba(0,0,0,0.6);
}

.hero-content h3 {
  font-weight: 400;
  opacity: 0.9;
  text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.hero-logo {
 width: 400px;
  height: auto;

  margin-bottom: 20px;
}