/* Boilerplate styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--background);
  color: var(--text);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
}

:root {
  --primary: #164E8C;
  --primary-dark: #0D355F;
  --accent: hsl(209, 85%, 50%);
  --accent-dark: hsl(209, 80%, 28%);
  --accent-lignt: hsl(209, 60%, 50%);
  --background: #F1F5F9;
  --surface: hsl(212, 39%, 94%);
  --surface-dark: hsl(212, 39%, 85%);
  --surface-light: #F8FAFC;
  --surface-light-blue: rgb(209, 234, 255);
  --surface-light-blue-text: rgb(10, 66, 199);
  --navbar-clr: hsla(215, 40%, 90%, 0.5125);
  --banner-btn-active: linear-gradient(135deg, #2563EB, #3B82F6);
  --text: #172B3A;
  --text-muted: #64748B;
  --text-light: #F8FAFC;
  --border: #D5DEE8;
  --margin-btm: clamp(.625rem, 1.25rem, 1.625rem);
  --p-font-size: clamp(.35rem, 2vw, .6125rem);
  --heading-font-size: clamp(1.625rem, 2vw, 3rem);
  --heading-font-size-sm: clamp(.9125rem, 3.5vw, 1.25rem);
  --preview-bk: rgba(0, 0, 123, 0.2);
  --heading-font-size-big: clamp(.95rem, 6.5vw, 1.5rem);
  --heading-p-font-size: clamp(.5rem, 4vw, .825rem);
}
/* =========================
   NAVBAR
   ========================= */

.navbar {
  min-height: 3.8rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--navbar-clr);
  backdrop-filter: blur(1rem);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  padding: 0 1.25rem;
  z-index: 1000;
  align-self: self-start;
}

.navbar h5 {
  margin: 0;
  white-space: nowrap;
}

.navbar > .nav-side-menu {
  display: flex;
  align-items: center;
  flex: 1;
}

.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0 auto;
}
.nav-menu a {
  display: block;
  padding: .45rem .55rem;
  text-decoration: none;
  color: var(--text);
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  border-radius: .45rem;
  transition: background-color .2s ease, color .2s ease;
}

.nav-menu a:hover {
  color: var(--primary);
  background: var(--surface-light-blue);
}
.nav-cta a,
.nav-side-cta a{
  color: var(--text-light);
  text-decoration: none;
}
.nav-cta,
.nav-side-cta {
  border: none;
  border-radius: 1rem;
  padding: 10px 20px;
  background-color: var(--accent);
  color: var(--text-light);
  cursor: pointer;
  white-space: nowrap;
}
.nav-cta:hover,
.nav-side-cta:hover {
  background-color: var(--primary);
}

.nav-cta:active,
.nav-side-cta:active {
  background-color: var(--primary-dark);
  transform: scale(.98);
}

.menu-toggle,
.menu-close,
.nav-overlay {
  display: none;
}

/* Hero */
.hero{
    background-image: url(/images/about\ banner2.png);
    display: flex;
    align-items: center;
    justify-content: left;
}
.hero-content{
    margin-left: 2rem;
    width: min(650px, 50%);
}
.hero-content h2 span{
    color: var(--surface-light-blue-text);
    opacity: 0;
    transform: translateY(20px);
    animation: heroItem 0.7s ease-out 0.3s forwards;
}
.hero-content h2{
    margin-bottom: .625rem;
    opacity: 0;
    font-size: var(--heading-font-size);
    transform: translateY(20px);
    animation: heroItem 0.7s ease-out 0.5s forwards;
}
.hero-content p{
    margin-bottom: .625rem;
    color: var(--text-muted);
    font-weight: 550;
    opacity: 0;
    font-size: clamp(0.875rem, 0.5vw + 0.75rem, 1rem);
    transform: translateY(20px);
    animation: heroItem 0.7s ease-out 0.7s forwards;
}
.hero-content .hero-btn a{
  text-decoration: none;
  color: var(--text-light);
}
.hero-content .hero-btn{
    margin-top: .5rem;
    padding: .5rem 1rem;
    border-radius: .625rem;
    border: none;
    background-color: var(--accent);
    color: var(--text-light);
    opacity: 0;
    transform: translateY(20px);
    animation: heroItem 0.7s ease-out 0.9s forwards;
    transition: all 300ms cubic-bezier(0.62, -0.63, 0, 2.31);;
}
.hero-content .hero-btn:hover{
    translate: 0 -5px;
    background-color: var(--accent-dark);
}
.hero-content .hero-btn:active{
    background-color: var(--primary-dark);
    scale: .98;
}
@keyframes heroItem {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* About */
.about{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: clamp(.625rem, 1.25rem, 1.625rem);
    margin-bottom: clamp(.625rem, 1.25rem, 1.625rem);
}
.about-content{
    padding-left: min(.625rem, 6%);
    padding-right: min(.625rem, 10%); 
    width: min(30rem, 50%);
    max-width: 705px;
}
.about-content p{
    font-size: var(--p-font-size);
    font-weight: 450;
    padding-right: min(.625rem, 10%); 
}
.about-content h3{
    margin-top: .5rem;
    margin-bottom: .625rem;
    font-size: var(--heading-font-size);
}
.about-img {
    display: flex;
    justify-content: center;
}

.about .about-img img {
    width: clamp(15rem, 45vw, 35rem);
    height: clamp(12rem, 30vw, 25rem);

    max-width: 100%;
    object-fit: cover;

    border-radius: 1rem;
    padding-left: clamp(0rem, 1vw, 0.9125rem);
}
/* Mission and Vision */
.ma-cont .ma{
    text-align: center;
    font-size: var(--heading-font-size-big);
    margin-bottom: var(--margin-btm);
    position: relative;
    width: max-content;
    max-width: 100%;
}
.ma-cont{
    display: flex;
    justify-content: center;
    width: 100vw;
}
.ma-cont .ma::after{
  content: '';
  position: absolute;
  width: 20%;
  height: .2rem;
  background-color: var(--text);
  border-radius: .625rem;
  bottom: -.4rem;
  left: 50%;
  transform: translateX(-50%);
}
.goals{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--surface-light-blue);
    margin: auto;
    width: min(85vw, 70%);
    height: auto;
    padding: min(1.25rem, 10%);
    border-radius: 1rem;
    margin-bottom: var(--margin-btm);
}
.goals p{
    color: var(--text-muted);
    font-size: var(--p-font-size);
}
.goals i{
    background: var(--accent);
    border-radius: 50%;
    color: white;
    font-size: clamp(1.25rem, 1.625rem, 3.25rem);
    padding: min(.625rem, 6%);
}
.goals .mission{
    padding-right: min(.9125rem, 10%);
}
.preview{
    background-image: url(/images/analytics.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100vw;
    height: 102.5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.preview .stats-cover{
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: var(--text-light);
    background-color: var(--preview-bk);
    backdrop-filter: blur(3px);
    width: 100vw;
    height: 102.5px;
}
.preview .stats-cover .stats small{
    font-weight: bold;
    font-size: clamp(.35rem, 1.5vw, .6125rem);
}
/* testimonial */
#testimonial{
  width: 100vw;
  overflow-x: hidden;
}
.testimonial-heading {
  width: min(100% - 2rem, 900px);
  margin: 0 auto 2rem;
  text-align: center;
}

.testimonial-heading span {
  display: block;

  margin-bottom: 0.5rem;

  color: var(--accent);

  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.testimonial-heading h2 {
  margin: 0;

  color: var(--text);

  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}
.testimonial-slider{
  display: flex;
  margin: .625rem auto;
  margin-left: clamp(.9125rem, 1.5rem, 2.25rem);
  gap: 1rem;
  width: 100vw;
  overflow-x: auto;
  scroll-behavior: smooth;
  anchor-name: --testimonial;
  scroll-snap-type: x mandatory;
  mask-image: linear-gradient(
  to right,
  transparent,
  black 10%,
  black 90%,
  transparent
);
margin-bottom: clamp(.9125rem, 1.75rem, 3.9125rem);
scroll-marker-group: after;
}
.testimonial-slider::scroll-marker-group{
  display: flex;
  justify-content: center;
  gap: 0.5em;
  height: 50px;
  width: 100vw;
}
.testimonial-slider > *::scroll-marker {
  content: "";
  font-size: 2rem;
  height: .40em;
  width: .40em;
  color: black;
  background-color: var(--surface-dark);
  border-radius: 50%;
}
.testimonial-slider > *::scroll-marker:target-current{
  background-color: var(--primary);
}
.testimonial-slider::-webkit-scrollbar{
  display: none;
}
.testimonial-slider::scroll-button(right), .testimonial-slider::scroll-button(left){
  content: "›";
  border: none;
  background-color: var(--primary);
  color: var(--text-light);
  font-size: 2rem;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  padding-bottom: .2em;
  cursor: pointer;
  position: absolute;
  position-anchor: --testimonial;
  position-area: right center;
}
.testimonial-slider::scroll-button(right){
  translate: -190%;
}
.testimonial-slider::scroll-button(left){
  content: "‹";
  position-area: left center;
  translate: 30%;
}
.testimonial-slider::scroll-button(right):disabled, .testimonial-slider::scroll-button(left):disabled{
  opacity: 0.5;
  cursor: auto;
}
.testimonials-card {
  scroll-snap-align: start;
  flex: 0 0 30%;
  aspect-ratio: 5 / 3;
  padding: 1rem;
  text-align: left;
  background-color: var(--surface);
  border: 1px solid var(--border);
  align-content: center;
  border-radius: .6rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: 0 .15rem .5rem rgba(0,0,0,.05);
}
.testimonials-card p{
  font-size: var(--heading-p-font-size);
  align-content: center
}
.stars {
  color: #f5a623;
  font-size: .8rem;
  letter-spacing: .1rem;
  margin-bottom: .4rem;
}

.clients {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.clients img {
  width: 2rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 50%;
}

.clients div {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.clients strong { color: var(--primary); font-size: var(--heading-p-font-size); }
.clients span { color: var(--text-muted); font-size: var(--p-font-size); }

/* =========================================
   FALLBACK CONTROLS
========================================= */

#testimonial.js-fallback {
  position: relative;
  margin-top: var(--margin-btm);
  margin-bottom: var(--margin-btm);
}


/* =========================================
   CONTROLS CONTAINER
========================================= */

#testimonial.js-fallback
.testimonial-fallback-controls {
  display: flex;

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

  width: 100%;

  margin-top: 1rem;

  position: static;
}


/* =========================================
   PREVIOUS / NEXT BUTTONS
========================================= */

#testimonial.js-fallback
.testimonial-fallback-prev,

#testimonial.js-fallback
.testimonial-fallback-next {
  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 44px;
  height: 44px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 1px solid var(--primary);
  border-radius: 50%;

  background: var(--primary);
  color: var(--text-light);

  font-family: inherit;
  font-size: 1.1rem;

  cursor: pointer;

  z-index: 20;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12);

  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}


/* =========================================
   LEFT BUTTON
========================================= */

#testimonial.js-fallback
.testimonial-fallback-prev {
  left: 1.75rem;
}


/* =========================================
   RIGHT BUTTON
========================================= */

#testimonial.js-fallback
.testimonial-fallback-next {
  right: 0.125rem;
}


/* =========================================
   HOVER
========================================= */

#testimonial.js-fallback
.testimonial-fallback-prev:hover:not(:disabled),

#testimonial.js-fallback
.testimonial-fallback-next:hover:not(:disabled) {
  background: var(--primary-dark);

  transform:
    translateY(-50%)
    scale(1.05);
}


/* =========================================
   DISABLED
========================================= */

#testimonial.js-fallback
.testimonial-fallback-prev:disabled,

#testimonial.js-fallback
.testimonial-fallback-next:disabled {
  opacity: 0.5;

  cursor: auto;

  transform: translateY(-50%);
}


/* =========================================
   DOTS
========================================= */

#testimonial.js-fallback
.testimonial-fallback-dots {
  display: flex;

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

  gap: 0.45rem;
}


/* =========================================
   DOT
========================================= */

#testimonial.js-fallback
.testimonial-fallback-dot {
  width: 10px;
  height: 10px;

  padding: 0;

  border: 1px solid var(--border);

  border-radius: 50%;

  background: var(--surface);

  cursor: pointer;

  appearance: none;
  -webkit-appearance: none;
}

#testimonial.js-fallback
.testimonial-fallback-dot[aria-current="true"] {
  width: 22px;
  border-radius: 35%;
  border-color: var(--primary);

  background: var(--primary);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

  #testimonial.js-fallback
  .testimonial-fallback-prev {
    left: 0.5rem;
  }

  #testimonial.js-fallback
  .testimonial-fallback-next {
    right: 0.5rem;
  }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  #testimonial.js-fallback
  .testimonial-fallback-prev,

  #testimonial.js-fallback
  .testimonial-fallback-next {
    width: 38px;
    height: 38px;

    font-size: 0.9rem;
  }

  #testimonial.js-fallback
  .testimonial-fallback-prev {
    left: 0.35rem;
  }

  #testimonial.js-fallback
  .testimonial-fallback-next {
    right: 0.35rem;
  }
}
/* Banner */
.banner {
  position: relative;
  width: min(90%, 1200px);
  margin: 0 auto;
  height: clamp(80px, 12vw, 130px);
  border-radius: clamp(8px, 1.5vw, 16px);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 clamp(16px, 4vw, 48px);
  box-sizing: border-box;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  margin-bottom: var(--margin-btm);
}

/* Background image of the sky/plane */
.banner-bg {
  position: absolute;
  inset: 0;
  background-image: url(/images/bannner-img.png); 
  background-size: cover;
  background-position: center;
  z-index: 1;
}

/* Left-side blur and color tint transition controlled via mask-image */
.banner-blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(90deg, #0b3c65 0%, rgba(11, 60, 101, 0.85) 45%, rgba(11, 60, 101, 0) 75%);
  
  /* Gradual fade mask making the right side reveal the clear background image */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 75%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(0,0,0,0) 75%);
  
  z-index: 2;
}

.banner-content {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: clamp(16px, 3vw, 32px);
}

.text-group h2 {
  margin: 0;
  font-size: clamp(14px, 2.2vw, 24px);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-group p {
  margin: clamp(2px, 0.5vw, 6px) 0 0 0;
  font-size: clamp(10px, 1.2vw, 14px);
  color: #e0e8f9;
  font-weight: 400;
}

.cta-button {
  background: #ffffff;
  color: #0b3c65;
  padding: clamp(6px, 1.2vw, 12px) clamp(12px, 2.5vw, 24px);
  border-radius: clamp(4px, 0.8vw, 8px);
  font-size: clamp(11px, 1.3vw, 15px);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s cubic-bezier(0.66, -0.44, 0, 2.41), background-color 0.2s cubic-bezier(0.66, -0.44, 0, 2.41);
}

.cta-button:hover {
  transform: translateY(-2px);
  background: #f0f4f8;
}
.cta-button:active{
  scale: .98;
  background-color: #e6f0fa;
}
/* Responsiveness */
/* about */
@media(max-width: 640px){
  .about{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr;
  }
  .about .about-img img{
    width: min(600px, 80%);
    height: auto;
  }
  .about .about-img{
    margin: 0%;
    height: max-content;
  }
  .about-content{
    margin-top: 1rem;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* align-content: center; */
    /* place-content: center; */
  }
  .about-content p{
    text-align: center;
    width: min(600px, 80%);
  }
}

/* testimonial */

/* tablet */
@media (min-width: 551px) and (max-width: 1100px){
  .testimonial-slider::scroll-button(right), .testimonial-slider::scroll-button(left){
    font-size: 1.5rem;
    height: 45px;
    width: 45px;
  }
  .testimonials-card{
    flex: 0 0 45%;
    height: 10em;
  }
  .testimonial-slider{
mask-image: linear-gradient(
  to right,
  black 70%,
  transparent 100%
);
  }
  .testimonial-slider > *::scroll-marker {
    height: 0.625rem;
    width: 0.625rem;
  }
}
/* mobile */
@media(max-width: 550px){
  body{
    overflow-x: hidden;
  }
  .testimonial-slider::scroll-button(right), .testimonial-slider::scroll-button(left){
    font-size: 1.3125rem;
    width: 45px;
    height: 45px;
  }
  .testimonials-card{
    flex: 0 0 95%;
    margin-left: var(--margin-btm);
    margin-right: var(--margin-btm);
    scroll-snap-align: start;
  }
  .testimonial-slider{
    mask-image: none;
    width: 100%;
    scroll-snap-type: x mandatory;
  }
  .testimonial-slider > *::scroll-marker {
    height: 0.625rem;
    width: 0.625rem;
  }
}
/* =========================================================
   PEDANI ABOUT PAGE — COMPLETE MOBILE RESPONSIVE FIX
   Add this AFTER all existing about.css rules
   ========================================================= */

/* ---------- GLOBAL MOBILE SAFETY ---------- */

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

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

img {
  max-width: 100%;
  height: auto;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   MOBILE NAVBAR
   ========================================================= */

@media (max-width: 499px) {

  .navbar {
    width: 100%;
    min-height: 3.8rem;
    height: 3.8rem;
    padding: 0 1rem;
    gap: .5rem;
  }

  .navbar h5 {
    max-width: calc(100% - 3.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8rem;
  }

  /* Hide desktop CTA */
  .navbar > .nav-cta {
    display: none;
  }

  /* Hamburger */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 2.5rem;
    height: 2.5rem;

    margin-left: auto;

    padding: 0;

    border: none;
    border-radius: .6rem;

    background: transparent;
    color: var(--text);

    font-size: 1.25rem;

    cursor: pointer;
    z-index: 1100;
  }

  .menu-toggle:active {
    background: var(--surface-light-blue);
  }

  /* Slide-out menu */
  .navbar > .nav-side-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: min(82vw, 340px);
    height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    padding: 5rem 1.25rem 1.5rem;

    background: rgba(248, 250, 252, .98);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: -10px 0 30px rgba(0, 0, 0, .15);

    transform: translateX(100%);

    transition:
      transform .35s cubic-bezier(.4, 0, .2, 1);

    z-index: 1050;

    overflow-y: auto;
  }

  .navbar.menu-open .nav-side-menu {
    transform: translateX(0);
  }

  /* Navigation links */
  .navbar .nav-menu {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: .35rem;

    margin: 0;
    padding: 0;

    list-style: none;
  }

  .navbar .nav-menu li {
    width: 100%;
  }

  .navbar .nav-menu a {
    display: flex;
    align-items: center;

    width: 100%;

    min-height: 3rem;

    padding: .75rem 1rem;

    border-radius: .65rem;

    font-size: .9rem;
    font-weight: 500;

    white-space: normal;

    color: var(--text);

    transition:
      background-color .2s ease,
      color .2s ease,
      transform .2s ease;
  }

  .navbar .nav-menu a:hover {
    color: var(--primary);
    background: var(--surface-light-blue);
    transform: translateX(3px);
  }

  /* Active About link */
  .navbar .nav-menu .active a {
    color: var(--surface-light-blue-text);
    background: var(--surface-light-blue);
  }

  .navbar .nav-menu .active a::after {
    display: none;
  }

  /* Close button */
  .menu-close {
    position: absolute;

    top: 1rem;
    right: 1rem;

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

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: var(--surface);
    color: var(--primary);

    font-size: 1.1rem;

    cursor: pointer;

    z-index: 1101;
  }

  .menu-close:active {
    transform: scale(.94);
  }

  /* CTA inside mobile menu */
  .navbar .nav-side-cta {
    /* display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 3rem;

    margin-top: auto;
    padding: .75rem 1rem;

    border-radius: .75rem;

    background: var(--accent);
    color: white;

    font-size: .85rem; */
    display: none;
  }

  /* Overlay */
  .navbar .nav-overlay {
    position: fixed;

    inset: 0;

    display: block;

    width: 100%;
    height: 100dvh;

    background: rgba(0, 0, 0, .35);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;
    visibility: hidden;

    transition:
      opacity .3s ease,
      visibility .3s ease;

    z-index: 1001;
  }

  .navbar.menu-open .nav-overlay {
    opacity: 1;
    visibility: visible;
  }

  body.menu-open {
    overflow: hidden;
  }


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

  .hero {
    width: 100%;

    min-height: clamp(24rem, 100vw, 31rem);

    padding: 2.5rem 1.25rem;

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

    background-image: url("/images/mobile-about-banner.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    background-attachment: scroll;
  }

  .hero-content {
    width: min(100%, 25rem);

    margin-left: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-content h2 {
    width: 100%;

    margin-bottom: .75rem;

    font-size: clamp(1.75rem, 8vw, 2.5rem);

    line-height: 1.12;
  }

  .hero-content h2 span {
    display: inline;
  }

  .hero-content p {
    width: min(100%, 25rem);

    margin-bottom: .75rem;

    font-size: clamp(.8rem, 3.2vw, .95rem);

    line-height: 1.6;

    color: var(--text-muted);

    font-weight: 450;
  }

  .hero-content .hero-btn {
    margin-top: .35rem;

    min-height: 2.75rem;

    padding: .7rem 1.1rem;

    border-radius: .65rem;

    font-size: .85rem;
  }


  /* =======================================================
     ABOUT SECTION
     ======================================================= */

  .about {
    width: calc(100% - 2rem);

    margin: 1rem auto;

    padding: 1rem;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: center;

    gap: 1.25rem;

    background: var(--surface);

    border-radius: 1rem;

    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06);
  }

  .about .about-img {
    width: 100%;

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

    margin: 0;
    padding: 0;
  }

  .about .about-img img {
    display: block;

    width: 100%;
    max-width: 32rem;

    height: auto;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    padding: 0;

    border-radius: .85rem;
  }

  .about-content {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;

    display: block;
  }

  .about-content h6 {
    margin-bottom: .4rem;

    color: var(--accent);

    font-size: .7rem;

    letter-spacing: .08em;
  }

  .about-content h3 {
    margin: 0 0 .65rem;

    font-size: clamp(1.25rem, 6vw, 1.75rem);

    line-height: 1.25;
  }

  .about-content p {
    width: 100%;

    margin: 0;

    padding: 0;

    font-size: .8rem;

    line-height: 1.7;

    color: var(--text-muted);

    font-weight: 400;

    text-align: left;
  }


  /* =======================================================
     MISSION + VISION
     ======================================================= */

  .ma-cont {
    width: 100%;

    margin: 1.75rem 0 1rem;

    padding: 0 1rem;

    display: flex;
    justify-content: center;
  }

  .ma-cont .ma {
    width: auto;
    max-width: 100%;

    margin: 0;

    text-align: center;

    font-size: clamp(1.25rem, 6vw, 1.7rem);

    line-height: 1.2;
  }

  .goals {
    width: calc(100% - 2rem);

    margin: 0 auto 1rem;

    padding: 1rem;

    display: grid;
    grid-template-columns: 1fr;

    gap: 1rem;

    border-radius: 1rem;
  }

  .goals .mission,
  .goals .vision {
    width: 100%;

    padding: 0;

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

    text-align: center;
  }

  .goals .mission {
    padding-bottom: 1rem;

    border-bottom: 1px solid var(--border);
  }

  .goals i {
    display: grid;
    place-items: center;

    width: 3rem;
    height: 3rem;

    margin-bottom: .5rem;

    padding: 0;

    font-size: 1.15rem;
  }

  .goals h4 {
    margin-bottom: .35rem;

    font-size: 1rem;
  }

  .goals p {
    width: 100%;

    margin: 0;

    font-size: .75rem;

    line-height: 1.65;
  }


  /* =======================================================
     STATS / PREVIEW
     ======================================================= */

  .preview {
    width: 100%;

    min-height: 13rem;
    height: auto;

    background: url(/images/analytics.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .preview .stats-cover {
    width: 100%;
    min-height: 13rem;
    height: auto;

    padding: 1.25rem .75rem;

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

    gap: 1rem;
  }

  .preview .stats-cover .stats {
    min-width: 0;

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

    justify-content: center;

    text-align: center;
  }

  .preview .stats i {
    margin-bottom: .25rem;

    font-size: 1rem;
  }

  .preview .stats h5 {
    margin: 0;

    font-size: clamp(1.2rem, 6vw, 1.7rem);

    line-height: 1.1;
  }

  .preview .stats small {
    display: block;

    max-width: 8rem;

    margin-top: .3rem;

    font-size: .6rem;

    line-height: 1.35;

    text-align: center;
  }


  /* =======================================================
     TESTIMONIAL HEADING
     ======================================================= */

  #testimonial {
    width: 100%;

    margin: 2rem 0 0;

    overflow: hidden;
  }

  .testimonial-heading {
    width: calc(100% - 2rem);

    margin: 0 auto 1rem;

    text-align: center;
  }

  .testimonial-heading span {
    margin-bottom: .35rem;

    font-size: .65rem;

    letter-spacing: .1em;
  }

  .testimonial-heading h2 {
    font-size: clamp(1.5rem, 7vw, 2rem);

    line-height: 1.15;
  }


  /* =======================================================
     TESTIMONIAL SLIDER
     ======================================================= */

  .testimonial-slider {
    width: 100%;

    margin: .75rem 0 0;
    padding: .25rem 1rem 1rem;

    display: flex;

    gap: .75rem;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-padding-left: 1rem;

    mask-image: none;
    -webkit-mask-image: none;

    scrollbar-width: none;
  }

  .testimonial-slider::-webkit-scrollbar {
    display: none;
  }

  /* Your actual HTML class is .testimonials-card */
  .testimonials-card {
    flex: 0 0 calc(100vw - 2.5rem);

    width: calc(100vw - 2.5rem);

    min-width: calc(100vw - 2.5rem);

    min-height: 12rem;

    aspect-ratio: auto;

    padding: 1rem;

    display: grid;
    grid-template-rows: auto 1fr auto;

    border-radius: .8rem;

    scroll-snap-align: start;

    text-align: left;
  }

  .testimonials-card p {
    margin: .5rem 0 1rem;

    font-size: .78rem;

    line-height: 1.6;
  }

  .testimonials-card .stars {
    font-size: .75rem;

    letter-spacing: .08rem;
  }

  .clients {
    gap: .55rem;
  }

  .clients img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .clients strong {
    font-size: .75rem;
  }

  .clients span {
    font-size: .65rem;
  }

  /* Keep fallback controls inside the page */
  #testimonial.js-fallback .testimonial-fallback-controls {
    margin-top: .5rem;
  }

  #testimonial.js-fallback .testimonial-fallback-prev,
  #testimonial.js-fallback .testimonial-fallback-next {
    width: 2.25rem;
    height: 2.25rem;

    font-size: .9rem;
  }


  /* =======================================================
     BOTTOM CTA BANNER
     ======================================================= */

  .banner {
    width: calc(100% - 2rem);

    min-height: 15rem;
    height: auto;

    margin: 1.5rem auto;

    padding: 1.5rem 1rem;

    display: flex;
    align-items: center;
  }

  .banner-content {
    width: 100%;

    display: flex;
    flex-direction: column;

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

    gap: 1rem;

    text-align: left;
  }

  .text-group {
    width: 100%;
  }

  .text-group h2 {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem);

    line-height: 1.25;
  }

  .text-group p {
    max-width: 24rem;

    font-size: .7rem;

    line-height: 1.55;
  }

  .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.75rem;

    padding: .7rem 1rem;

    font-size: .75rem;

    border-radius: .6rem;
  }

  /* Make the banner background work better vertically */
  .banner-blur-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(11, 60, 101, .95) 0%,
        rgba(11, 60, 101, .75) 65%,
        rgba(11, 60, 101, .35) 100%
      );

    -webkit-mask-image: none;
    mask-image: none;
  }


  /* =======================================================
     MOBILE SPACING
     ======================================================= */

  .about + .ma-cont {
    margin-top: 1.5rem;
  }

  .preview + br,
  .preview + br + br {
    display: none;
  }
}


/* =========================================================
   VERY SMALL PHONES
   320px–380px
   ========================================================= */

@media (max-width: 380px) {

  .navbar {
    padding: 0 .75rem;
  }

  .navbar h5 {
    font-size: .72rem;
  }

  .hero {
    min-height: 26rem;
    padding: 2rem 1rem;
  }

  .hero-content h2 {
    font-size: 1.7rem;
  }

  .hero-content p {
    font-size: .75rem;
  }

  .about {
    width: calc(100% - 1.25rem);
    padding: .75rem;
  }

  .about-content h3 {
    font-size: 1.2rem;
  }

  .about-content p {
    font-size: .75rem;
  }

  .goals {
    width: calc(100% - 1.25rem);
    padding: .85rem;
  }

  .preview .stats-cover {
    gap: .5rem;
    padding: 1rem .5rem;
  }

  .preview .stats h5 {
    font-size: 1.2rem;
  }

  .preview .stats small {
    font-size: .55rem;
  }

  .testimonials-card {
    flex-basis: calc(100vw - 2rem);
    min-width: calc(100vw - 2rem);
  }

  .banner {
    width: calc(100% - 1.25rem);
    padding: 1.25rem .85rem;
  }
}


/* =========================================================
   LANDSCAPE PHONES
   ========================================================= */

@media (max-width: 499px) and (orientation: landscape) {

  .hero {
    min-height: 22rem;
  }

  .hero-content {
    max-width: 32rem;
  }

  .about {
    flex-direction: row;
    align-items: center;
  }

  .about .about-img,
  .about-content {
    flex: 1 1 50%;
  }

  .about .about-img img {
    aspect-ratio: 4 / 3;
  }

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

  .goals .mission {
    padding-right: 1rem;
    padding-bottom: 0;

    border-right: 1px solid var(--border);
    border-bottom: none;
  }

  .preview .stats-cover {
    grid-template-columns: repeat(4, 1fr);
    min-height: 9rem;
  }

  .preview {
    min-height: 9rem;
    background: url(/images/analytics.png);
    background-repeat: no-repeat;
    background-size: cover;
  }
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================
   MOBILE
   ========================= */

@media (max-width: 704px) {
  body{
    overflow-x: hidden;
  }
  .navbar {
    height: 3.8rem;
    padding: 0 1rem;
  }

  .navbar > .nav-side-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    width: min(82vw, 360px);
    height: 100vh;
    padding: 5rem 1.5rem 2rem;
    background: rgba(248,250,252,.96);
    backdrop-filter: blur(20px);
    box-shadow: -10px 0 30px rgba(0,0,0,.15);
    transform: translateX(100%);
    transition: transform 350ms cubic-bezier(.4,0,.2,1);
    z-index: 1050;
  }

  .navbar.menu-open .nav-side-menu {
    transform: translateX(0);
  }

  .navbar > .nav-side-menu .nav-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: .5rem;
    margin: 0;
  }

  .nav-menu a {
    width: 100%;
    padding: 1rem;
    font-size: .9rem;
  }

  .nav-side-cta {
    width: 100%;
    margin-top: auto;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 1100;
  }

  .menu-close {
    display: flex;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--surface);
    color: var(--primary);
    font-size: 1.2rem;
    cursor: pointer;
  }

  .nav-overlay {
    display: block;
    position: fixed;
    height: 100vh;
    inset: 0;
    background: rgba(0,0,0,.3125);
    backdrop-filter: blur(1rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
    z-index: 1001;
  }

  .navbar.menu-open .nav-overlay {
    opacity: 1;
    visibility: visible;
  }

  .navbar > .nav-cta {
    display: none;
  }

  body.menu-open {
    overflow: hidden;
  }

  /* hero */
  .hero{
    min-height: 28rem;
    background: url(/images/mobile-about-banner.png);
    background-position: end;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .hero p{
    color: #172B3A;
    font-weight: 400;
  }
}