:root{
  --mainColor: #485f80;
  --primaryFont: "Lora", serif;
        --bg-1:#050b14;
      --bg-2:#07121f;
      --accent:#1f77e5;
      --accent-2:#2d7dff;
      --glass: rgba(255,255,255,.08);
      --glass-border: rgba(255,255,255,.14);
      --text-muted: rgba(255,255,255,.72);
}

body{
  font-family: var(--primaryFont);
}
/* Hero Section CSS */

    /* Section background + soft glow */
    .hero-modern{
      position: relative;
      overflow: hidden;
      background:
  radial-gradient(
    900px 500px at 70% 20%,
    rgba(31, 119, 229, 0.22),
    transparent 60%
  ),
  radial-gradient(
    700px 450px at 20% 85%,
    rgba(18, 78, 155, 0.18),
    transparent 60%
  ),
  linear-gradient(
    180deg,
    #0b1c33,
    #060f1d
  );

      color: #fff;
      padding: 6rem 0;
    }

    /* Animated network-ish lines */
    .hero-modern::before{
      content:"";
      position:absolute;
      inset: -40px;
      background-image:
        linear-gradient(transparent 95%, rgba(255,255,255,.05) 95%),
        linear-gradient(90deg, transparent 95%, rgba(255,255,255,.05) 95%);
      background-size: 50px 50px;
      opacity: .25;
      transform: rotate(8deg);
      pointer-events: none;
      animation: gridFloat 11s ease-in-out infinite;
    }

    @keyframes gridFloat{
      0%,100%{ transform: translate3d(0,0,0) rotate(8deg); }
      50%{ transform: translate3d(-20px,10px,0) rotate(8deg); }
    }

    /* Gradient orb */
    .hero-orb{
      position:absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      right:-180px;
      top:-140px;
      background: radial-gradient(circle at 30% 30%, rgb(0 229 255 / 45%), rgba(45, 125, 255, .22), transparent 60%);
      filter: blur(10px);
      opacity:.9;
      pointer-events:none;
      animation: orbPulse 8s ease-in-out infinite;
    }
    @keyframes orbPulse{
      0%,100%{ transform: scale(1); }
      50%{ transform: scale(1.06); }
    }

    /* Headline gradient */
    .text-gradient{
      background: linear-gradient(90deg, #ffffff 0%, rgb(31 119 229 / 85%) 35%, var(--accent) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* Image styling */
.hero-image{
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 1.5rem;
}

/* Image glass frame enhancement */
.image-frame{
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* Floating badge on image */
.floating-badge{
  position: absolute;
  bottom: 18px;
  right: 18px;
  font-size: .9rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .25rem;
  border: 1px solid rgba(255,255,255,.18);
}

/* Optional subtle image animation */
@media (min-width: 992px){
  .image-frame{
    animation: floatImage 6s ease-in-out infinite;
  }
}

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




    /* Buttons */
    .btn-accent{
          border-radius: 30px;
          background-color: #1f77e5;
          border: 1px solid #1f77e5;
          color: white;
          padding: 1rem 2rem;
    }

    .btn-accent:hover, .btn-outline-glass:hover{
       border: 1px solid #ffffff;
      background-color: transparent;
    }

    .btn-outline-glass{
      border-radius: 30px;
      border: 1px solid white;
      padding: 1rem 2rem;
      color: white;
    }

    /* Small trust pills */
    .trust-pill{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 999px;
      padding: .45rem .75rem;
      color: rgba(255,255,255,.85);
      font-size: .9rem;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }

    /* Scroll reveal */
    .reveal{
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.show{
      opacity: 1;
      transform: translateY(0);
    }

    /* Responsive tweaks */
    @media (max-width: 991.98px){
      .hero-modern{ padding: 4.5rem 0; }
    }





    /* Number section  */

.stats-glass{
  background: linear-gradient(180deg, rgba(31,47,107,0.06), rgba(31,47,107,0));
}

.stat-glass-card{
  padding: 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.stat-glass-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
}

.stat-title{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

.stat-icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  font-weight: 900;
  background: rgb(6 58 123 / 14%);
  color: #063a7b;
}

.stat-value{
  margin-top: 14px;
  font-size: clamp(44px, 4vw, 60px);
  font-weight: 900;
  line-height: 1.0;
  color: #063a7b;
}

.stat-sub{
  margin-top: 8px;
  color: rgba(0,0,0,0.55);
  font-weight: 500;
}



/* Vision */

.vision-card{
  /* border-radius: 20px; */
  background: rgb(31 119 229);
  /* border: 2px solid rgb(6 58 123); */
  box-shadow: 0 14px 45px rgba(0,0,0,0.08);
}

.vision-card h3{
  color: white;
}
.vision-card p{
  color: white;
}
.vision-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgb(255 255 255);
  color: #1f2f6b;
}

.vision-mini{
  /* border-radius: 18px; */
  background: #063a7b;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 180ms ease, box-shadow 180ms ease;
  color: white;
}

.vision-mini:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0,0,0,0.10);
}

.vision-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgb(255 255 255);
  color: #063a7b;
  font-size: 20px;
}

.vision-mini-2{
  background: #1f77e5;
}

.vision-mini-2 .vision-icon{
  color: #1f77e5;
}


/* Services section */


.services-title{
  color: #1f2f6b;
  letter-spacing: .2px;
}

/* section spacing / background */
.services-grid{
  background: #fff;
}

/* clickable card */
.service-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 160px;
  padding: 14px 10px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.service-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12);
  background: #063a7b;
  color: white;
}

.service-card:hover .service-icon{
  color: white;
      background: rgb(255 255 255 / 36%);
}

.service-card:hover .service-label{
  color: white;
}

/* icon */
.service-icon{
  width: 68px;
  height: 68px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgb(6 58 123 / 14%);
  color: #063a7b;
  font-size: 29px;
}

/* text */
.service-label{
  text-align: center;
  color: #111827;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.15;
}


/* Certification Sections */


.cert-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  /* border-radius: 18px; */
  padding: 2rem;
  box-shadow: 0 14px 40px rgba(0,0,0,0.08);
  transition: transform 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
}

.cert-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
}

.cert-logo{
  height: 90px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.cert-logo img{
  max-height: 90px;
  max-width: 120px;
  object-fit: contain;
}

.cert-title{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 10px;
}

.cert-chip{
  align-self: flex-start;
  background: rgba(31,47,107,0.10);
  color: #1f2f6b;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.cert-text{
  color: rgba(0,0,0,0.60);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 0;
  flex: 1;
}

.cert-link{
  margin-top: 14px;
  text-decoration: none;
  font-weight: 700;
  color: #1f2f6b;
  font-size: 14px;
}

/* Case studies */
/* =========================
   Case Studies Section
   ========================= */

.cs-section {
  background: #f6f9fc;
  padding: 64px 0;
}
.cs-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0b2b5b;
}

/* =========================
   Card layout
   ========================= */
.cs-card {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  /* box-shadow: 0 8px 22px rgba(16, 24, 40, 0.08); */
  background: #fff;
  height: 100%;
  display: flex;                  /* 🔑 key */
  flex-direction: row;            /* left + right */
  align-items: stretch;           /* 🔑 equal height */
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* =========================
   Left side (logo)
   ========================= */
.cs-card .cs-left {
  flex: 1;                        /* 🔑 */
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #ffffff;
}

.cs-card .cs-left img {
  max-width: 90%;
  max-height: 140px;
  object-fit: contain;
}

/* =========================
   Right side (content)
   ========================= */
.cs-card .cs-right {
  flex: 1;                        /* 🔑 same height as left */
  padding: 24px;

  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertical centering */
  gap: 10px;

  background: #ffffff;
  transition: background 0.25s ease, color 0.25s ease;
}

/* =========================
   Typography
   ========================= */
.cs-heading {
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
}

.cs-objective-label {
  font-weight: 700;
  margin: 6px 0 0;
  font-size: 0.95rem;
  color: #0b2b5b;
  transition: color 0.25s ease;
}

.cs-objective-text {
  margin: 0;
  color: #3c4b66;
  font-size: 0.95rem;
  transition: color 0.25s ease;
}

/* =========================
   Button
   ========================= */
.btn-cs {
  width: fit-content;
  padding: .5rem 2rem;
  border-radius: 30px;
  background: #063a7b;
  color: #fff;
  border: 0;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.2s ease;
}

.btn-cs:hover {
  opacity: 0.95;
}

/* =========================
   Highlight only on hover
   ========================= */
.cs-card.is-highlight .cs-right {
  /* background: #6e4747; */
  color: inherit;
}

.cs-card.is-highlight:hover .cs-right {
  background: #063a7b;
  color: #ffffff;
}

.cs-card.is-highlight:hover .cs-objective-label,
.cs-card.is-highlight:hover .cs-objective-text {
  color: #e8ecff;
}

.cs-card.is-highlight:hover .btn-cs {
  background: #e9eefc;
  color: #0b2b5b;
}


/* =========================
   Carousel controls
   ========================= */
.carousel-control-prev,
.carousel-control-next {
  width: 48px;
}
/* Prev icon (left) */
.carousel-control-prev-icon{
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23063a7b'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

/* Next icon (right) */
.carousel-control-next-icon{
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23063a7b'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}


.carousel-control-next, .carousel-control-prev {
  opacity: 1 !important;
}





.carousel-control-next {
    right: -70px;
}

.carousel-control-prev {
    left: -70px;
}

/* Card spacing */
.cs-gap > [class*="col-"] {
  margin-bottom: 18px;
}