/* ==========================================================================
   CSS Variables & Reset
   ========================================================================== */

:root {
  --clr-primary: #6b4eff;
  --clr-primary-dark: #5639d9;
  --clr-text: #ffffff;
  --clr-text-light: #e0e0ff;
  --clr-bg: #0f0d1a;
  --clr-bg-dark: #08060f;

  --ff-base: "Inter", system-ui, -apple-system, sans-serif;
  --ff-heading: "Playfair Display", Georgia, serif;

  --fs-base: clamp(1rem, 2vw + 1rem, 1.125rem);
  --fs-h1: clamp(3.25rem, 7vw + 1rem, 7.5rem);
  --fs-h2: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-subtitle: clamp(1.25rem, 2.5vw + 0.5rem, 1.75rem);

  --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--ff-base);
  background-color: var(--clr-bg);
  color: var(--clr-text);
  line-height: 1.55;
  font-size: var(--fs-base);
}

/* Ensure each section participates in normal flow (no accidental overlap) */
main > section {
  display: block;
  position: relative;
  width: 100%;
}

main {
  overflow: hidden;
}

/* ==========================================================================
   Layout / Container
   ========================================================================== */

.container {
  width: min(100%, 1400px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(15, 13, 26, 0.65);
  border-block-end: 1px solid rgba(107, 79, 255, 0.12);
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 5.5rem;
}

.logo__text {
  font-family: var(--ff-heading);
  font-weight: 800;
  font-size: 2.1rem;
  letter-spacing: -0.03em;
}

.logo__accent {
  color: var(--clr-primary);
}

.nav__list {
  display: flex;
  gap: 2.4rem;
  list-style: none;
}

.nav__link {
  color: var(--clr-text-light);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.nav__link:hover,
.nav__link.active {
  color: white;
}

.nav__link.active {
  position: relative;
}

.nav__link.active::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: var(--clr-primary);
  inset-block-end: -0.6rem;
  border-radius: 2px;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.search-btn {
  background: transparent;
  border: none;
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}

.btn {
  padding: 0.85rem 1.75rem;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}

.btn--primary {
  background: var(--clr-primary);
  color: white;
}

.btn--primary:hover {
  background: var(--clr-primary-dark);
  transform: translateY(-2px);
}

.lang-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: white;
  padding: 0.65rem 1.1rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  /* Make the section take its own vertical space */
  min-height: 100vh; /* full viewport height */
  /*display: flex;*/
  align-items: center;
}

.hero__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__container {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /*padding: 4rem 2rem; !* optional padding for spacing *!*/
  top: 130px;
}

.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 25px;

  text-align: center;
  max-width: 1199px;
  margin: 0 auto;
}

.hero__title {
  font-family: "Granadia-Book", sans-serif;
  font-weight: 800;
  font-size: 74px;
  line-height: 85px;
  text-align: center;
  color: #ffffff;
}

.hero__subtitle {
  font-family: "Granadia-Book", sans-serif;
  font-weight: 400;
  font-size: 28px;
  text-align: center;
  color: #cacaca;
}

.highlight {
  color: #c9ff00;
  display: inline-block;
}

.hero__subtitle {
  font-size: var(--fs-subtitle);
  color: var(--clr-text-light);
  opacity: 0.92;
}

.floating-tablet-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.floating-tablet {
  display: block;
  max-width: 100%;
  border-radius: 28px;
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.7),
    0 30px 60px -20px rgba(107, 79, 255, 0.35);
  transform: rotateY(-18deg) rotateX(8deg);
  transition: transform 0.8s ease;
}

.floating-tablet-wrapper:hover .floating-tablet {
  transform: rotateY(-12deg) rotateX(4deg) scale(1.03);
}

/* ==========================================================================
   Story Section
   ========================================================================== */

.story {
  padding-block: 14vh 18vh;
  background: linear-gradient(to bottom, #0a0814, #05040b);
  position: relative;
  min-height: 100vh;
}

.story__content {
  padding-top: 7rem;
  padding-bottom: 6rem;

  /*position: absolute;*/

  /*left: 5%;*/
  /*bottom: 5%;*/

  /*display: flex;*/
  /*flex-direction: column;*/
  /*align-items: flex-start;*/
  /*gap: 20px;*/

  /*max-width: 677px;*/
}

.mission-vision-background {
  margin-top: -5%;
  background: url("../../images/Rectangle 376714763.png");
  margin-left: 4rem;
  margin-right: 4rem;
}

.two-people-img {
  width: 100%;
}

.two-people-col {
  padding-top: 20%;
  padding-left: 8%;
}

.story__container {
  background: url("../../images/Group 1410103980 1.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.footer-with-bg {
  background: url("../../images/Group 1410103978_1.png");
  background-size: cover;
  background-repeat: no-repeat;
}

.footer-bottom {
  border: none !important;
}

.footer-with-bg.footer--dark .footer-tagline,
.footer-with-bg.footer--dark .footer-location-title,
.footer-with-bg.footer--dark .footer-contact-link,
.footer-with-bg.footer--dark .footer-social .social-icon,
.footer-with-bg.footer--dark .footer-copyright p {
  color: #000000 !important;
}

.footer-location-text {
  color: #715de3 !important;
}

.story__title {
  font-family: "Granadia-Book", sans-serif;
  font-weight: 700;
  font-size: 60px;
  /*line-height: 100px;*/

  color: #715de3;
}

.purple {
  color: var(--clr-primary);
}

.story__text {
  font-size: 1.2rem;
  color: var(--clr-text-light);
  max-inline-size: 52ch;
}

.story__text p {
  /*max-width: 677px;*/

  font-family: "Granadia-Book", sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 32px;

  color: #1d1d1d;
}

.story__text strong {
  color: black;
  font-weight: 600;
}

.floating-device {
  max-width: 100%;
  border-radius: 32px;
  box-shadow:
    0 80px 140px -40px rgba(0, 0, 0, 0.75),
    0 40px 80px -30px rgba(107, 79, 255, 0.3);
  transform: rotateY(22deg) rotateX(-6deg);
  transition: transform 0.9s ease;
}

.floating-device-wrapper:hover .floating-device {
  transform: rotateY(14deg) rotateX(-3deg) scale(1.04);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .hero__container,
  .story__container {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .hero__title {
    text-align: center;
  }

  .hero__subtitle {
    text-align: center;
    margin-inline: auto;
  }

  .story__title {
    text-align: center;
  }

  .story__text {
    text-align: center;
    margin-inline: auto;
  }
}

@media (max-width: 768px) {
  .header__container {
    flex-wrap: wrap;
    gap: 1.2rem;
    padding-block: 1.2rem;
  }

  .nav {
    order: 3;
    width: 100%;
    text-align: center;
  }

  .nav__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem 2rem;
  }

  .header__actions {
    order: 2;
  }

  .hero {
    padding-block-start: 9rem;
  }
}

/* ==========================================================================
   Partners / Trusted By Marquee
   ========================================================================== */

.partners {
  position: relative;
  /* Give the section a proper height to contain content or visual */
  min-height: 400px; /* adjust as needed based on image height */
  background: linear-gradient(to right, #f8f6f7 0%, #f8f6f7 100%);
  overflow: hidden; /* ensures image stays contained */
}

.partners__background {
  /*position: absolute;*/
  /*top: 0;*/
  /*left: 0;*/
  width: 100%;
  height: 100%; /* fill the section completely */
  object-fit: cover; /* ensures it scales nicely */
  z-index: 1; /* behind any content if added later */
  pointer-events: none; /* does not block interactions */
}

.story__image {
  position: absolute;
  top: -10rem;
}

.partners__inner {
  position: relative;
  z-index: 2; /* content above background image */
}

.marquee {
  position: relative;
  width: 200vw; /* Extra wide for movement */
  overflow: hidden;
}

.marquee__track {
  display: flex;
  animation: scroll 45s linear infinite;
  will-change: transform;
}

.marquee--bottom .marquee__track {
  animation-direction: reverse;
  animation-duration: 52s; /* Slightly different speed for interest */
}

.marquee__logos {
  display: flex;
  align-items: center;
  gap: 5rem;
  flex-shrink: 0;
}

.logo-img {
  height: clamp(38px, 6vw, 68px);
  width: auto;
  opacity: 0.82;
  filter: grayscale(60%);
  transition: all 0.5s ease;
}

.logo-img:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.08);
}

/* Tilted bands with gradient */
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--clr-primary) 0%, #9f7eff 100%);
  opacity: 0.07;
  pointer-events: none;
  transform: skewY(-8deg);
}

.marquee--bottom::before,
.marquee--bottom::after {
  transform: skewY(8deg);
}

.mission-vision {
  position: relative;
  overflow: visible; /* allow background to “float” */
  /*border-radius: 12px; !* optional floating card effect *!*/
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* optional floating shadow */
}

.toxic-green {
  color: #d8f73d;
}

.mission-vision::after {
  /*content: "";*/
  /*position: absolute;*/
  /*left: 0;*/
  /*bottom: 0;*/
  /*width: 100%;*/
  /*height: 160px; !* control fade height *!*/
  /*pointer-events: none;*/

  /*background: linear-gradient(*/
  /*        to bottom,*/
  /*        rgba(0, 0, 0, 0) 0%,*/
  /*        rgba(14, 11, 30, 0.6) 60%,*/
  /*        #0E0B1E 100% !* MUST match .team-section background *!*/
  /*);*/

  /*z-index: 2;*/
  /*inset: auto 0 0 0;*/
}

.mission-vision__background {
  position: absolute;
  top: -7%;
  left: 50%;
  width: 80%;
  max-width: 2500px; /* your desired max width */
  height: auto;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;

  /* new */
  min-width: 1800px; /* optional minimum size */
}

.mission-vision__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 60%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

.mission-vision__background img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.mission-vision > .container {
  position: relative;
  z-index: 1; /* content above background */
  padding: 2rem; /* internal spacing */
}

/* Keyframes for infinite scroll */
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Pause on hover (optional - comment out if unwanted) */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .marquee__logos {
    gap: 3rem;
  }

  .marquee__track {
    animation-duration: 60s; /* Slower on mobile for better perception */
  }

  .marquee--bottom .marquee__track {
    animation-duration: 68s;
  }
}

.mission-vision {
  background: #181818;
  color: white;
  /*padding: 150px 0;*/
}

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

.content-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12-column grid */
  gap: 2rem; /* spacing between columns */
  align-items: center; /* vertically center content */
}

.image-side {
  grid-column: 1 / span 3; /* image spans columns 8–12 */
  display: flex;
  justify-content: center; /* center image horizontally in its columns */
  align-items: center; /* vertically center image with text */
  z-index: 1;
  transform: translateY(-480px);
}

.image-side img {
  transform: scale(0.9); /* reduce size slightly */
}

.image-wrapper {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #222;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-side {
  grid-column: 8 / span 5; /* text spans columns 1–7 */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 1;
}

.mission-block h2,
.vision-block h2 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: #fff;
}

.mission-block p,
.vision-block > p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #e0e0e0;
  max-width: 520px;
}

.vision-image {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
}

.vision-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.mission-values-wrapper {
  margin-top: -9%;
}

.mission-values-grid {
  padding: 0 60px;
  --bs-gutter-x: 0.75rem;
  --bs-gutter-y: 0.75rem;
  /*margin-top: 32px;*/
  /*margin-bottom: 24px;*/
}

.mission-value-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  min-height: 320px;
  background: #ffffff;
  border-radius: 36px;
  box-shadow: 0px 0px 22px rgba(113, 93, 227, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  padding: 24px 20px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Make center card larger and edges smaller like the reference image */
.mission-values-grid .col {
  display: flex;
  justify-content: center;
}

.mission-values-grid .col:nth-child(1) .mission-value-card {
  max-width: 380px;
  min-height: 380px;
  transform: rotate(-3.5deg);
}

.mission-values-grid .col:nth-child(2) .mission-value-card {
  max-width: 360px;
  min-height: 330px;
  transform: rotate(-2deg);
}

.mission-values-grid .col:nth-child(3) .mission-value-card {
  max-width: 340px;
  min-height: 300px;
  transform: rotate(0deg);
}

.mission-values-grid .col:nth-child(4) .mission-value-card {
  max-width: 360px;
  min-height: 330px;
  transform: rotate(2deg);
}

.mission-values-grid .col:nth-child(5) .mission-value-card {
  max-width: 380px;
  min-height: 380px;
  transform: rotate(3.5deg);
}

/* Second card shape */
.mission-values-grid .col:nth-child(2) .mission-value-card {
  aspect-ratio: 352 / 322;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='322' viewBox='0 0 352 322' fill='none'%3E%3Cpath d='M21.8646 94.7874C21.8915 59.6024 21.9049 42.0099 32.94 31.3307C43.9751 20.6515 61.5586 21.2145 96.7255 22.3406L175.853 24.8744L259.315 27.0095C292.708 27.8637 309.405 28.2908 319.702 38.8549C329.999 49.419 329.999 66.121 329.999 99.5251V223.174C329.999 256.972 329.999 273.871 319.54 284.465C309.08 295.059 292.182 295.275 258.388 295.708L175.853 296.763L96.3129 298.968C61.2304 299.94 43.6891 300.426 32.7065 289.735C21.7238 279.045 21.7372 261.497 21.764 226.401L21.8646 94.7874Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='322' viewBox='0 0 352 322' fill='none'%3E%3Cpath d='M21.8646 94.7874C21.8915 59.6024 21.9049 42.0099 32.94 31.3307C43.9751 20.6515 61.5586 21.2145 96.7255 22.3406L175.853 24.8744L259.315 27.0095C292.708 27.8637 309.405 28.2908 319.702 38.8549C329.999 49.419 329.999 66.121 329.999 99.5251V223.174C329.999 256.972 329.999 273.871 319.54 284.465C309.08 295.059 292.182 295.275 258.388 295.708L175.853 296.763L96.3129 298.968C61.2304 299.94 43.6891 300.426 32.7065 289.735C21.7238 279.045 21.7372 261.497 21.764 226.401L21.8646 94.7874Z' fill='white'/%3E%3C/svg%3E");
}

/* Third card shape */
.mission-values-grid .col:nth-child(3) .mission-value-card {
  aspect-ratio: 352 / 298;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='298' viewBox='0 0 352 298' fill='none'%3E%3Cpath d='M21.8566 94.2397C21.8855 60.0708 21.8999 42.9863 32.5212 32.374C43.1425 21.7617 60.2269 21.7617 94.3959 21.7617H175.849H257.456C291.651 21.7617 308.749 21.7617 319.372 32.3849C329.995 43.008 329.995 60.1057 329.995 94.301V203.104C329.995 237.302 329.995 254.401 319.371 265.024C308.747 275.648 291.648 275.646 257.45 275.643L175.849 275.637H94.3039C60.082 275.637 42.9711 275.637 32.3461 265.003C21.7211 254.369 21.7356 237.258 21.7645 203.036L21.8566 94.2397Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='298' viewBox='0 0 352 298' fill='none'%3E%3Cpath d='M21.8566 94.2397C21.8855 60.0708 21.8999 42.9863 32.5212 32.374C43.1425 21.7617 60.2269 21.7617 94.3959 21.7617H175.849H257.456C291.651 21.7617 308.749 21.7617 319.372 32.3849C329.995 43.008 329.995 60.1057 329.995 94.301V203.104C329.995 237.302 329.995 254.401 319.371 265.024C308.747 275.648 291.648 275.646 257.45 275.643L175.849 275.637H94.3039C60.082 275.637 42.9711 275.637 32.3461 265.003C21.7211 254.369 21.7356 237.258 21.7645 203.036L21.8566 94.2397Z' fill='white'/%3E%3C/svg%3E");
}

/* Fourth card shape */
.mission-values-grid .col:nth-child(4) .mission-value-card {
  aspect-ratio: 352 / 322;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='322' viewBox='0 0 352 322' fill='none'%3E%3Cpath d='M329.897 226.414C329.87 261.599 329.857 279.191 318.822 289.87C307.787 300.55 290.203 299.987 255.036 298.861L175.909 296.327L92.4468 294.192C59.0537 293.337 42.3571 292.91 32.0598 282.346C21.7625 271.782 21.7625 255.08 21.7625 221.676V98.0269C21.7625 64.2294 21.7625 47.3306 32.2222 36.7363C42.6819 26.142 59.5793 25.9258 93.3741 25.4936L175.909 24.4379L255.449 22.2336C290.531 21.2613 308.073 20.7752 319.055 31.4659C330.038 42.1565 330.024 59.7045 329.998 94.8005L329.897 226.414Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='322' viewBox='0 0 352 322' fill='none'%3E%3Cpath d='M329.897 226.414C329.87 261.599 329.857 279.191 318.822 289.87C307.787 300.55 290.203 299.987 255.036 298.861L175.909 296.327L92.4468 294.192C59.0537 293.337 42.3571 292.91 32.0598 282.346C21.7625 271.782 21.7625 255.08 21.7625 221.676V98.0269C21.7625 64.2294 21.7625 47.3306 32.2222 36.7363C42.6819 26.142 59.5793 25.9258 93.3741 25.4936L175.909 24.4379L255.449 22.2336C290.531 21.2613 308.073 20.7752 319.055 31.4659C330.038 42.1565 330.024 59.7045 329.998 94.8005L329.897 226.414Z' fill='white'/%3E%3C/svg%3E");
}

/* Fifth card shape */
.mission-values-grid .col:nth-child(5) .mission-value-card {
  aspect-ratio: 352 / 378;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='378' viewBox='0 0 352 378' fill='none'%3E%3Cpath d='M329.812 94.5655C329.921 59.5891 329.975 42.1008 319.559 31.4762C318.474 30.3698 317.32 29.334 316.102 28.3752C304.414 19.1685 287.034 21.1123 252.275 25L173.787 31.2634L90.1578 36.0489C57.762 37.9026 41.564 38.8295 31.6633 49.313C21.7625 59.7965 21.7625 76.0209 21.7625 108.47V272.351C21.7625 304.985 21.7625 321.303 31.7405 331.803C41.7185 342.303 58.0145 343.134 90.6065 344.796L171.992 348.948L252.036 354.098C288.119 356.419 306.16 357.58 317.612 346.874C329.065 336.168 329.121 318.089 329.233 281.933L329.812 94.5655Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='378' viewBox='0 0 352 378' fill='none'%3E%3Cpath d='M329.812 94.5655C329.921 59.5891 329.975 42.1008 319.559 31.4762C318.474 30.3698 317.32 29.334 316.102 28.3752C304.414 19.1685 287.034 21.1123 252.275 25L173.787 31.2634L90.1578 36.0489C57.762 37.9026 41.564 38.8295 31.6633 49.313C21.7625 59.7965 21.7625 76.0209 21.7625 108.47V272.351C21.7625 304.985 21.7625 321.303 31.7405 331.803C41.7185 342.303 58.0145 343.134 90.6065 344.796L171.992 348.948L252.036 354.098C288.119 356.419 306.16 357.58 317.612 346.874C329.065 336.168 329.121 318.089 329.233 281.933L329.812 94.5655Z' fill='white'/%3E%3C/svg%3E");
}

/* First card (left) shape matches provided SVG */
.mission-value-card.h-100 {
  max-width: 380px;
  min-height: 410px;
  aspect-ratio: 352 / 378;
  border-radius: 0;
  background: #ffffff;
  overflow: hidden;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='378' viewBox='0 0 352 378' fill='none'%3E%3Cpath d='M21.7813 282.852C21.673 317.829 21.6189 335.317 32.0348 345.942C33.1196 347.048 34.2741 348.084 35.4913 349.043C47.1794 358.249 64.5593 356.306 99.3192 352.418L177.806 346.155L261.436 341.369C293.832 339.515 310.03 338.588 319.93 328.105C329.831 317.622 329.831 301.397 329.831 268.948V105.067C329.831 72.4325 329.831 56.1153 319.853 45.6154C309.875 35.1154 293.579 34.2842 260.987 32.6217L179.602 28.4703L99.5576 23.3203C63.475 20.9987 45.4337 19.838 33.9813 30.544C22.5289 41.25 22.473 59.3285 22.3611 95.4854L21.7813 282.852Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='352' height='378' viewBox='0 0 352 378' fill='none'%3E%3Cpath d='M21.7813 282.852C21.673 317.829 21.6189 335.317 32.0348 345.942C33.1196 347.048 34.2741 348.084 35.4913 349.043C47.1794 358.249 64.5593 356.306 99.3192 352.418L177.806 346.155L261.436 341.369C293.832 339.515 310.03 338.588 319.93 328.105C329.831 317.622 329.831 301.397 329.831 268.948V105.067C329.831 72.4325 329.831 56.1153 319.853 45.6154C309.875 35.1154 293.579 34.2842 260.987 32.6217L179.602 28.4703L99.5576 23.3203C63.475 20.9987 45.4337 19.838 33.9813 30.544C22.5289 41.25 22.473 59.3285 22.3611 95.4854L21.7813 282.852Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 22px rgba(113, 93, 227, 0.4));
}

@media (max-width: 991.98px) {
  .mission-values-grid .col .mission-value-card {
    transform: none;
    max-width: 100%;
  }
}

.mission-value-card .mission-value-icon img {
  width: 60px; /* adjust size */
  height: 60px; /* adjust size */
  z-index: 10; /* above everything else */
  padding-bottom: 10px;
}

/* Optional: add a bit of margin below the floating icon */
.mission-value-card p {
  font-size: 1rem;
  line-height: 1.4;
  color: #1d1d1d;
  margin-top: 50px; /* leave space for the floating icon */
  margin-bottom: 0;
}

.mission-value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 20px 40px rgba(113, 93, 227, 0.5);
}

/* Mission values text styling (scoped) */
.mission-values-grid .mission-value-text {
  width: 215.8px;
  height: 68px;

  font-family: "Granadia-Book", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 28px;
  line-height: 34px;

  color: #161616;

  flex: none;
  order: 1;
  flex-grow: 0;
}

/* Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px 24px;
  margin-top: 16px;
}

.value-item {
  text-align: center;
}

.value-item .icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: 12px;
  color: #a78bfa; /* purple accent – adjust to your brand purple */
  font-weight: bold;
}

.value-item p {
  font-size: 1.05rem;
  line-height: 1.4;
  color: #d1d5db;
  font-weight: 500;
}

/* ==========================================================================
   Responsive adjustments
   ========================================================================== */

@media (max-width: 1024px) {
  .content-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .vision-image {
    max-width: 420px;
  }
}

@media (max-width: 640px) {
  .mission-vision {
    padding: 60px 0;
  }

  .mission-block h2,
  .vision-block h2 {
    font-size: 1.875rem;
  }

  .mission-block p,
  .vision-block > p {
    font-size: 1.125rem;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 16px;
  }
}

/* ==========================================================================
   Section: Our Team
   ========================================================================== */

.team-section {
  position: relative;
  padding-left: 140px;
  background-color: #181818;
  z-index: 1;
}

.team-section .container {
  position: relative;
  z-index: 1;
}

.team-section .frame-6 {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.team-section .text-wrapper-4 {
  position: absolute;
  top: 35%;
  left: 250px; /* a bit inset from the section edge */
  writing-mode: vertical-rl;
  white-space: nowrap;
  color: #181818;
  width: 113px;
  height: 554px;
  transform: translateY(-50%) rotate(180deg); /* read bottom -> top */
  transform-origin: left center;
  font-size: 64px; /* ensure it has a visible size */
  font-weight: 800;
  line-height: 1;
  opacity: 1;
  z-index: 50;
  pointer-events: none;
  margin: 0;
  -webkit-text-stroke: 1px #c7ff2b;
}

.team-section .we-re-not-just-a {
  margin: 0;
  max-width: 820px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  line-height: 1.6;
}

.team-section .carousel-nav2 {
  width: 100%;
  display: flex; /* override inline-flex */
  justify-content: center; /* center the buttons */
  align-items: center;
  gap: 12px; /* spacing between buttons (or keep Bootstrap gap-3) */
  margin: 16px 0 24px;
}

/* Nav buttons */
.team-section .ula-nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    border-color 0.2s ease;
}

.team-section .ula-nav-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(167, 139, 250, 0.7);
  transform: translateY(-1px);
}

.team-section .ula-nav-btn:focus-visible {
  outline: 2px solid rgba(167, 139, 250, 0.9);
  outline-offset: 2px;
}

/* Carousel container spacing */
.team-section .frame-8 .container {
  max-width: 1400px;
}

/* Owl structural bits (needed so items align + overflow behaves) */
.team-section .team-carousel.owl-carousel {
  position: relative;
  width: 100%;
}

.team-section .team-carousel .owl-stage-outer {
  overflow: hidden;
}

.team-section .team-carousel .owl-stage {
  display: flex;
  padding-top: 20px;
}

.team-section .team-carousel .owl-item {
  display: flex;
}

/* Card */
.team-section .team-card {
  position: relative; /* anchor for absolute .team-info */

  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px; /* adjust if needed */
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-section .team-card:hover {
  transform: translateY(-8px);
  border-color: rgba(167, 139, 250, 0.55);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.team-img {
  width: 100%;
  height: 581px;
  object-fit: cover;
  transition: 0.4s ease-in-out;
}

.team-card:hover .team-img {
  transform: scale(1.05);
  filter: brightness(80%);
}

.team-section .team-img {
  display: block;
  width: 100%;
  /*height: auto;         !* or keep a fixed height if you want *!*/
  object-fit: cover;
  transition: 0.4s ease-in-out;
  height: 581px; /* adjust if needed */
}

.team-section .team-card:hover .team-img {
  transform: scale(1.05);
  filter: brightness(80%);
}

.team-section .team-info {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: min(520px, 85%);
  transform: translateX(-50%) translateY(18px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0.25s ease;
}

.team-section .team-card:hover .team-info,
.team-section .team-card:focus-within .team-info {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.team-section .team-card:hover .team-info {
  transform: translateX(-50%) translateY(0);
}

.team-section .team-card:focus-within .team-info {
  transform: translateX(-50%) translateY(0);
}

.team-card:hover .team-info {
  transform: translateX(-50%) translateY(0);
}

.team-info {
  position: absolute;
  bottom: -120px;
  width: 85%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  text-align: center;
  padding: 18px 10px;
  border-radius: 16px;
  transition: 0.4s;
  box-shadow: 0px 0px 25px rgba(255, 255, 255, 0.2);
}

.team-info h5 {
  margin: 0;
  font-weight: 700;
}

.team-info span {
  font-size: 14px;
  color: #666666;
}

.team-section .team-info h5 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b4eff;
  font-weight: 700;
}

.team-section .team-info span {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #111;
}

/* Responsive */
@media (max-width: 768px) {
  .team-section {
    padding: 80px 0;
  }

  .team-section .text-wrapper-4 {
    font-size: 34px;
  }

  .team-section .team-img {
    height: 320px;
  }
}

.section-title {
  font-size: 3.5rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 60px;
  background: linear-gradient(90deg, #c084fc, #a78bfa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

/* Grid layout – horizontal scroll on mobile if needed, but fits 4 cards on desktop */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 24px;
  justify-content: center;
}

.team-card {
  position: relative;
  /*border-radius: 24px;*/
  overflow: hidden;
  aspect-ratio: 3 / 4;
  /*background: #1a1a1a;*/
  /*border: 1px solid #333;*/
  transition: all 0.4s ease;
  /*border-radius: 24px;*/
  /*overflow: hidden;*/
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  /*position: relative;*/
  border-radius: 18px;
  /*overflow: hidden;*/
  cursor: pointer;
}

.team-card:hover {
  transform: translateY(-12px);
  border-color: #a78bfa;
  box-shadow: 0 20px 40px rgba(167, 139, 250, 0.15);
}

.image-wrapper {
  width: 100%;
  height: 100%;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%; /* slight top crop to match portrait framing */
  transition: transform 0.6s ease;
}

.team-card:hover .image-wrapper img {
  transform: scale(1.08);
}

/* Highlighted CEO card */
.team-card.highlight {
  position: relative;
  z-index: 2;
  border: 2px solid #a78bfa;
  box-shadow: 0 0 40px rgba(167, 139, 250, 0.25);
  transform: scale(1.08);
}

.team-card.highlight .info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
  padding: 32px 24px 24px;
  text-align: center;
}

.role {
  font-size: 1.1rem;
  font-weight: 600;
  color: #c4b5fd;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.name {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
}

/* Responsive */
@media (max-width: 1100px) {
  .team-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 32px;
  }

  .team-card.highlight {
    transform: scale(1.05);
  }
}

@media (max-width: 640px) {
  .team-section {
    padding: 80px 0;
  }

  .section-title {
    font-size: 2.75rem;
  }

  .team-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .team-card.highlight {
    transform: none;
  }
}

/* ==========================================================================
   Section: FAQ / Everything About Us
   ========================================================================== */

.faq-section {
  background: #fff;
  color: #111;
  padding: 100px 0;
  position: relative;
}

.faq-section .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Everything you need to know about us (Figma sizing notes) */
.faq-section .section-title {
  width: 1140px;
  height: 72px;
  max-width: 100%;

  font-size: 3rem;
  font-weight: 800;
  line-height: 72px;

  text-align: center;
  margin: 0 auto 64px;

  /* Keep it solid on white (no gradient text fill) */
  color: #111;
  background: none;
  -webkit-text-fill-color: currentColor;
  letter-spacing: -0.5px;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  border-bottom: 1px solid #e5e7eb;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  padding: 24px 0;
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
}

.faq-question:hover {
  opacity: 0.9;
}

.number {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--clr-primary);
  min-width: 50px;
}

.question-text {
  font-size: 1.375rem;
  font-weight: 600;
  flex: 1;
  color: #111;
}

.toggle {
  font-size: 1.75rem;
  font-weight: bold;
  color: var(--clr-primary);
  min-width: 30px;
  text-align: center;
  transition: transform 0.3s ease;

  /* Ensure rotation affects the icon consistently */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toggle .toggle-icon {
  display: block;
}

/* Default (closed): keep down chevron as-is */
.faq-item .toggle {
  transform: rotate(0deg);
}

/* Open: rotate so it points up */
.faq-item.active .toggle {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.5s ease,
    padding 0.3s ease;
  padding: 0 0 0 74px; /* align under question text */
}

.faq-item.active .faq-answer {
  max-height: 800px; /* large enough for content */
  padding: 0 0 32px 74px;
}

.faq-answer p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #374151;
  margin: 16px 0;
}

.faq-answer p:first-child {
  margin-top: 0;
}

/* Remove dark wave overlay on white background */
.faq-section::before {
  content: none;
}

/* Responsive */
@media (max-width: 768px) {
  .faq-section .section-title {
    font-size: 2.25rem;
    line-height: 1.15;
    height: auto;
  }

  .faq-question {
    padding: 20px 0;
    gap: 16px;
  }

  .number {
    font-size: 1.5rem;
    min-width: 40px;
  }

  .question-text {
    font-size: 1.25rem;
  }

  .toggle {
    font-size: 1.5rem;
  }

  .faq-answer {
    padding-left: 56px;
  }

  .faq-item.active .faq-answer {
    padding-left: 56px;
  }
}

/* ==========================================================================
   Section: Leadership
   ========================================================================== */

.leadership-section {
  background: #fff;
  color: #111;
  padding: clamp(72px, 10vw, 120px) 0;
  border-top: 1px solid #eef0f4;
  border-bottom: 1px solid #eef0f4;
}

.leadership-section .container {
  max-width: 1200px;
}

.leadership-section .row {
  row-gap: 32px;
}

.leadership-section .section-title {
  font-size: clamp(2rem, 3vw + 1.5rem, 4rem);
  line-height: 1.1;
  font-weight: 800;
  color: #111;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
}

.leadership-content {
  font-size: clamp(1.25rem, 0.6vw + 1rem, 1.25rem);
  line-height: 1.8;
  color: #374151;
}

.leadership-content p {
  margin: 0 0 18px;
}

.leadership-content p:last-child {
  margin-bottom: 0;
}

.leadership-section img {
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(15, 13, 26, 0.18);
  object-fit: cover;
}

@media (max-width: 768px) {
  .leadership-section {
    padding: 64px 0;
  }

  .leadership-section .section-title {
    font-size: 2.25rem;
    text-align: center;
  }

  .leadership-content {
    text-align: center;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: linear-gradient(to bottom, #0a0a0a 0%, #120d2b 100%);
  color: #d1d5db;
  padding: 80px 0 40px;
  position: relative;
}

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

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 48px;
  margin-bottom: 64px;
}

.footer-brand {
  max-width: 400px;
}

.logo {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.logo-highlight {
  color: #c084fc; /* purple */
}

.tagline {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, #e0e7ff, #c4b5fd, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-locations {
  display: flex;
  flex-direction: column;
  gap: 32px;
  text-align: right;
}

.location-block h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.location-block p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #9ca3af;
}

.back-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(167, 139, 250, 0.15);
  border-radius: 50%;
  color: #c084fc;
  font-size: 1.5rem;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 16px 0;
  align-self: flex-end;
}

.back-to-top:hover {
  background: #a78bfa;
  color: white;
  transform: translateY(-4px);
}

.contact-link {
  color: #c084fc;
  font-weight: 600;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s;
  align-self: flex-end;
}

.contact-link:hover {
  color: #d8b4fe;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  padding-top: 40px;
  border-top: 1px solid #222;
}

.copyright {
  font-size: 0.95rem;
  color: #6b7280;
}

.copyright a {
  color: #a78bfa;
  text-decoration: none;
}

.copyright a:hover {
  text-decoration: underline;
}

.social-links {
  display: flex;
  gap: 20px;
}

.social-links a {
  opacity: 0.7;
  transition:
    opacity 0.3s,
    transform 0.3s;
}

.social-links a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.social-links img {
  filter: brightness(0) invert(0.8); /* makes icons light/purple-ish – adjust as needed */
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }

  .footer-locations {
    text-align: center;
    align-items: center;
  }

  .back-to-top,
  .contact-link {
    align-self: center;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .tagline {
    font-size: 1.875rem;
  }

  .site-footer {
    padding: 60px 0 40px;
  }
}

@media (max-width: 520px) {
  body {
    /*background: no-repeat !important;*/
    background-size: cover !important;
    background: url("../../images/Group 1410103988_17.png") no-repeat !important;
    background-size: 100% auto !important;
  }

  .hero__title {
    font-size: 42px;
    line-height: unset;
  }

  .d-mobile-none {
    display: none;
  }

  .hero__subtitle {
    font-size: 18px;
    width: 70%;
  }

  .hero__subtitle.pb-5 {
    padding-bottom: 1rem !important;
  }

  .team-section .text-wrapper-4 {
    writing-mode: unset;
    transform: none;
    text-align: center;
    position: static;
    width: unset;
    height: unset;
    font-size: 72px;
  }

  .story__image {
    width: 400px;
    top: -37rem;
  }

  .story__content {
    padding-top: 13rem;
    padding-bottom: 0;
  }

  .story__title {
    font-size: 42px;
    font-weight: bolder;
    text-align: start;
  }

  .story__text p {
    font-size: 16px;
    text-align: start;
    line-height: 24px;
  }

  .story__container {
    gap: 1rem;
  }

  .two-people-img {
    width: 100%;
    margin-top: 0;
  }

  .two-people-col {
    text-align: center;
    padding-bottom: 5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mission-vision-background {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }
}

.hero__side-visual {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* behind main content */
  display: flex;
  flex-direction: column; /* stack images vertically */
  align-items: flex-start;
  pointer-events: none; /* ensure they don't block clicks */
}

.hero__ellipse-image {
  display: block;
  margin-bottom: 10px; /* space between ellipse and screenshot */
  max-width: 100%;
  height: auto;
  z-index: 3;
}

.hero__side-image {
  position: absolute;
  top: 100px;
  display: block;
  max-width: 100%;
  height: auto;
  z-index: 2;
}

body {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background: url("../../images/about-us-hero-background.png");
}

@media (min-width: 768px) and (max-width: 1024px) {
  body.template-aboutpage {
    background: url("../../images/Group 1410103988_17.png") no-repeat top center !important;
    background-size: 100% 760px !important;
    background-color: #181818 !important;
    overflow-x: hidden;
  }

  main > section.s {
    overflow: hidden;
    padding-bottom: 0;
    background: transparent;
  }

  main > section.s > .container-fluid > .row:first-child {
    min-height: 640px;
    align-items: flex-start;
    padding-top: 8rem;
    padding-bottom: 2rem;
  }

  .hero__title {
    max-width: 30rem;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0 !important;
    font-size: clamp(2.6rem, 5.4vw, 3.6rem);
    line-height: 1.08;
    overflow-wrap: break-word;
  }

  .hero__subtitle {
    width: min(82%, 30rem);
    margin-top: 1.35rem;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 0 !important;
    font-size: 1.12rem;
    line-height: 1.4;
  }

  .story__container {
    gap: 0;
    margin-top: 0;
    padding: 1rem 2rem 1.5rem;
    padding-bottom: 0;
    background: transparent !important;
    background-position: center top;
    overflow: hidden;
  }

  .story__container > .col-1,
  .story__image {
    display: none !important;
  }

  .story__content {
    width: 100%;
    max-width: 42rem;
    margin-right: auto;
    margin-left: auto !important;
    margin-bottom: 0;
    padding: 2rem 1.75rem 2.15rem;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 18px 38px rgba(23, 18, 45, 0.12);
    overflow: hidden;
  }

  .story__title {
    font-size: 2.35rem;
    line-height: 1.1;
    text-align: start;
  }

  .story__text,
  .story__text p {
    max-width: 36rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .mission-vision {
    padding: 0 0 3rem;
    overflow: hidden;
    box-shadow: none;
  }

  .mission-vision > .container-fluid,
  .mission-vision > .container-fluid > .row > .col-12 {
    padding-right: 0;
    padding-left: 0;
  }

  .mission-vision > .container-fluid > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .mission-vision-background {
    width: 100%;
    margin: 0 !important;
    padding: 2.5rem 1.25rem 3rem;
    background-size: cover;
    background-position: center;
  }

  .mission-vision-background > .row > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .two-people-img {
    display: block;
    width: min(100%, 480px);
    margin: 0 auto 1.5rem;
  }

  .two-people-col {
    padding: 0 1.25rem 1.5rem !important;
    text-align: center;
  }

  .vision-block,
  .mission-block {
    width: 100%;
    max-width: none;
    padding: 0 0.5rem;
  }

  .vision-block h2,
  .mission-block h2 {
    font-size: 2.05rem;
    line-height: 1.15;
  }

  .vision-block > p,
  .mission-block p {
    max-width: 38rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.08rem;
    line-height: 1.55;
  }

  .mission-values-wrapper {
    margin-top: 1.25rem;
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .mission-values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    padding: 0 1rem;
    margin-right: 0;
    margin-left: 0;
  }

  .mission-values-grid .col {
    flex: 0 1 calc(50% - 0.5rem);
    width: auto;
    max-width: 220px;
    padding: 0;
  }

  .mission-values-grid .col .mission-value-card,
  .mission-value-card.h-100,
  .mission-values-grid .col:nth-child(1) .mission-value-card,
  .mission-values-grid .col:nth-child(2) .mission-value-card,
  .mission-values-grid .col:nth-child(3) .mission-value-card,
  .mission-values-grid .col:nth-child(4) .mission-value-card,
  .mission-values-grid .col:nth-child(5) .mission-value-card {
    width: 100%;
    max-width: none !important;
    min-height: 190px !important;
    aspect-ratio: auto !important;
    border-radius: 22px;
    transform: none !important;
    filter: none;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 22px 14px;
  }

  .mission-value-card .mission-value-icon img {
    width: 56px;
    height: 56px;
    padding-bottom: 6px;
  }

  .mission-values-grid .mission-value-text {
    width: auto;
    height: auto;
    font-size: 1rem;
    line-height: 1.3;
  }

  .leadership-section {
    padding: 56px 0;
  }

  .leadership-section .row > div:first-child {
    order: 2;
    padding: 28px 18px 0 !important;
  }

  .leadership-section .row > div:last-child {
    order: 1;
  }

  .leadership-section .section-title {
    margin-bottom: 1rem;
    font-size: 2.35rem;
    line-height: 1.1;
    text-align: center;
  }

  .leadership-content {
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: start !important;
  }

  .leadership-section img {
    border-radius: 18px;
  }
}

@media (max-width: 767.98px) {
  body.template-aboutpage {
    background: url("../../images/Group 1410103988_17.png") no-repeat top center !important;
    background-size: 100% 680px !important;
    background-color: #181818 !important;
  }

  main > section.s {
    overflow: hidden;
    padding-bottom: 0;
    background: transparent;
  }

  main > section.s > .container-fluid > .row:first-child {
    min-height: 560px;
    align-items: flex-start;
    padding-top: 7rem;
    padding-bottom: 1.5rem;
  }

  .hero__title {
    max-width: 22rem;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0 !important;
    font-size: 2.05rem;
    line-height: 1.08;
    overflow-wrap: break-word;
  }

  .hero__subtitle {
    width: min(88%, 22rem);
    margin-top: 1.25rem;
    margin-right: auto;
    margin-left: auto;
    padding-bottom: 0 !important;
    font-size: 1rem;
    line-height: 1.35;
  }

  .story__container {
    gap: 0;
    margin-top: 0;
    padding: 0.75rem 1rem 1rem;
    padding-bottom: 0;
    background: transparent !important;
    background-position: center top;
    overflow: hidden;
  }

  .story__container > .col-1,
  .story__image {
    display: none !important;
  }

  .story__content {
    width: 100%;
    max-width: 24rem;
    margin-right: auto;
    margin-left: auto !important;
    margin-bottom: 0;
    padding: 1.35rem 1rem 1.6rem;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(23, 18, 45, 0.12);
    overflow: hidden;
  }

  .story__title {
    font-size: 1.85rem;
    line-height: 1.1;
    text-align: start;
  }

  .story__text {
    max-width: 21rem;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .story__text p {
    margin-bottom: 0.75rem;
    font-size: 0.92rem;
    line-height: 1.45;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .mission-vision {
    padding: 0 0 2.5rem;
    overflow: hidden;
    box-shadow: none;
  }

  .mission-vision > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }

  .mission-vision > .container-fluid > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .mission-vision > .container-fluid > .row > .col-12 {
    padding-right: 0;
    padding-left: 0;
  }

  .mission-vision-background {
    width: 100%;
    margin: 0 !important;
    padding: 2rem 0.75rem 2.5rem;
    background-size: cover;
    background-position: center;
  }

  .two-people-img {
    display: block;
    width: min(100%, 360px);
    margin: 0 auto 1.25rem;
  }

  .two-people-col {
    padding: 0 1rem 1.5rem !important;
    text-align: center;
  }

  .vision-block,
  .mission-block {
    width: 100%;
    max-width: none;
    padding: 0 0.25rem;
  }

  .vision-block h2,
  .mission-block h2 {
    font-size: 1.8rem;
    line-height: 1.15;
  }

  .vision-block > p,
  .mission-block p {
    max-width: none;
    margin-right: auto;
    margin-left: auto;
    font-size: 1rem;
    line-height: 1.5;
  }

  .mission-values-wrapper {
    margin-top: 1rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .mission-values-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0.875rem;
    padding: 0 0.75rem;
    margin-right: 0;
    margin-left: 0;
  }

  .mission-values-grid .col {
    flex: 0 1 calc(50% - 0.5rem);
    width: auto;
    max-width: 168px;
    padding: 0;
  }

  .mission-values-grid .col .mission-value-card,
  .mission-value-card.h-100 {
    width: 100%;
    max-width: none !important;
    min-height: 168px !important;
    aspect-ratio: auto;
    border-radius: 20px;
    transform: none !important;
    filter: none;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    padding: 18px 10px;
  }

  .mission-values-grid .col:nth-child(1) .mission-value-card,
  .mission-values-grid .col:nth-child(2) .mission-value-card,
  .mission-values-grid .col:nth-child(3) .mission-value-card,
  .mission-values-grid .col:nth-child(4) .mission-value-card,
  .mission-values-grid .col:nth-child(5) .mission-value-card {
    max-width: none !important;
    min-height: 168px !important;
    aspect-ratio: auto !important;
  }

  .mission-value-card .mission-value-icon img {
    width: 48px;
    height: 48px;
    padding-bottom: 6px;
  }

  .mission-values-grid .mission-value-text {
    width: auto;
    height: auto;
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .leadership-section {
    padding: 48px 0;
  }

  .leadership-section .row > div:first-child {
    order: 2;
    padding: 24px 12px 0 !important;
  }

  .leadership-section .row > div:last-child {
    order: 1;
  }

  .leadership-section .section-title {
    margin-bottom: 1rem;
    font-size: 2rem;
    line-height: 1.1;
    text-align: center;
  }

  .leadership-content {
    font-size: 0.95rem;
    line-height: 1.55;
    text-align: start !important;
  }

  .leadership-section img {
    border-radius: 18px;
  }
}