:root {
  --shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
  --card-radius: 20px;
}
.banner {
  position: relative;
  margin-bottom: 35px;
  overflow: hidden;
}

.banner-img {
  width: 100%;
  height: var(--banner-img-height);
  object-fit: cover;
}

.banner .cont {
  color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.banner .cont .title {
  font-size: 22px;
  font-family: var(--pf-medium);
}

.banner .cont .des {
  font-size: var(--font-s);
}
.about-left,
.about-right {
  width: 70px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 10;
}
.about-right {
  right: 0;
  left: unset;
}
.zoom-circle {
  --align: 120px;
  --inner-size: 60px;
  width: 200px;
  position: absolute;
  top: var(--align);
  left: 50%;
  bottom: var(--align);
  transform: translate(-50%, 0);
  z-index: 8;
  border-radius: 500px;
  pointer-events: none;
}

.zoom-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  /* Slight glow */
  backdrop-filter: blur(1px);
  /* Only this part blurs background */
  -webkit-backdrop-filter: blur(1px);

  /* Mask: inner circle transparent, outer ring visible */
  mask-image: radial-gradient(
    circle,
    transparent var(--inner-size),
    black var(--inner-size)
  );
  -webkit-mask-image: radial-gradient(
    circle,
    transparent var(--inner-size),
    black var(--inner-size)
  );
}
.sec-title {
  font-size: 28px;
  font-family: var(--pf-medium);
  margin-bottom: 15px;
}
.wwa-card {
  margin: 0 auto 25px;
  text-align: center;
}
.vms-row,
.founder-row {
  display: flex;
  flex-wrap: wrap;
}
.vms-row > div {
  margin-bottom: 20px;
}
.ve-wrap {
  width: 100%;
}
.vi-wrap,
.mi-wrap {
  width: 100%;
  flex-shrink: 0;
}
.ve-wrap {
  flex-grow: 1;
}

.vi-card,
.mi-card {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--white);
  padding: 22px;
  border-radius: var(--card-radius);
  height: 100%;
  box-shadow: var(--shadow);
}
.vms-row .title {
  font-family: var(--pf-medium);
  margin-bottom: 10px;
}
.vms-row p {
  font-size: var(--font-s);
  margin-bottom: 5px;
}
.gif-img {
  width: 35px;
  margin: 5px auto;
}
.ve-card {
  position: relative;
  height: 312px;
  border-radius: 20px;
  overflow: hidden;
  clip-path: polygon(
    0 0,
    0 100%,
    22% 100%,
    27% 95%,
    76% 95%,
    81% 100%,
    100% 100%,
    100% 0,
    71% 0,
    66% 12%,
    35% 12%,
    28% 0
  );
}
.ve-card video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills and crops like a background */
  z-index: 0;
}
.founder-wrap,
.team-card {
  padding: 20px;
  box-shadow: var(--shadow);
  border-radius: var(--card-radius);
  background-color: var(--white);
}
.foi-wrap {
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 20px;
}
.fo-cont-wrap {
  width: 100%;
  flex-grow: 1;
}
.foi-card {
  position: relative;
}
.foi-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    360deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 175px;
  z-index: 2;
}
.foi-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: top;
  border-top-left-radius: var(--card-radius);
  border-top-right-radius: var(--card-radius);
}
.pos-card {
  width: auto;
  color: var(--white);
  padding: 10px 16px;
  line-height: normal;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 1px white;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pos-card .name {
  font-size: var(--font-m);
  font-family: var(--pf-regular);
  font-weight: unset;
}
.pos-card .pos {
  font-size: var(--font-s);
  font-family: var(--pf-light);
}
.foi-card .pos-card {
  position: absolute;
  left: 15px;
  bottom: 15px;
  z-index: 10;
}
.fo-cont-card {
  background: var(--smart-primary-lite);
  height: 100%;
  border-radius: var(--card-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15px;
}

.fo-cont-card p {
  margin-bottom: 10px;
}
.team-row {
  display: flex;
  flex-wrap: wrap;
}
.team-row > div {
  width: 100%;
  margin-bottom: 15px;
}
.team-card {
  padding: 10px;
  position: relative;
}
.team-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
}
.team-card .pos-card {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
}
.oe-wrapper {
  background-image: url(../images/about/about-expertise-banner.webp);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 50px 0;
  color: var(--white);
}
.oe-wrapper .title {
  font-size: 28px;
  margin-bottom: 12px;
}
.oe-wrapper p {
  font-family: var(--pf-light);
  text-transform: capitalize;
}
.oe-row {
  display: flex;
  flex-wrap: wrap;
}
.oe-row > div {
  width: 100%;
  margin-bottom: 25px;
}
.glass-card {
  position: relative;
  padding: 30px 10px;
  text-align: center;
  line-height: normal;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 10px;
  box-shadow: -8px -8px 20px rgba(255, 255, 255, 0.1),
    /* top-left soft glow */ 8px 8px 20px rgba(0, 0, 0, 0.6); /* bottom-right darker shadow */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.glass-card .count {
  font-size: 40px;
}
.about-us .smart-heading .title {
  font-size: 28px;
}
.owl-carousel.associates img {
  height: 65px;
  object-fit: contain;
}
.vi-card,
.ve-card,
.mi-card,
.foi-card,
.team-card img {
  transition: transform 0.3s ease;
  transform: translateZ(0); /* prevents blur */
  will-change: transform; /* hint for smoother GPU rendering */
}
.vi-card:hover,
.ve-card:hover,
.mi-card:hover,
.foi-card:hover,
.team-card:hover img {
  transform: scale(1.03);
}
.aim-wrap img {
  border-radius: var(--card-radius);
}
.aim-wrap {
  position: relative;
  border-radius: var(--card-radius);
  overflow: hidden;
}
.aim-wrap::after,
.aim-cont {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.aim-wrap::after {
  content: "";
  display: block;
  /* background: linear-gradient(360deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); */
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85) 100%);
  height: 100%;
}
.aim-cont {
  text-align: center;
  color: var(--white);
  padding: 0 5px 2px 5px;
  z-index: 1;
}
.aim-cont .title {
  font-size: 18px;
  font-family: var(--font-heading);
  margin-bottom: 2px;
}
@media (min-width: 576px) {
  .zoom-circle {
    --align: 95px;
    --inner-size: 80px;
    width: 260px;
  }
  .about-left,
  .about-right {
    width: 125px;
  }
  .banner .cont .title {
    font-size: 40px;
  }
  .banner .cont .des {
    font-size: var(--font-m);
  }
  .team-row {
    margin-left: -10px;
    margin-right: -10px;
  }
  .team-row > div {
    padding-right: 12px;
    padding-left: 12px;
  }
  .team-row > div {
    width: 50%;
  }
  .team-card img {
    height: 320px;
  }
  .oe-row {
    margin-left: -25px;
    margin-right: -25px;
  }
  .oe-row > div {
    width: calc(100% / 2);
    padding-left: 25px;
    padding-right: 25px;
  }
  .aim-cont .title{
    font-size: 25px;
  }
}
@media (min-width: 768px) {
  .about-left,
  .about-right {
    width: 175px;
  }
  .zoom-circle {
    --align: 45px;
    --inner-size: 100px;
    width: 365px;
  }
  .fo-cont-card > div {
    width: 80%;
  }
}
@media (min-width: 992px) {
  .zoom-circle {
    --align: -70px;
    --inner-size: 180px;
    width: 565px;
  }
  .vi-wrap,
  .mi-wrap {
    width: 25%;
  }
  .ve-wrap {
    width: 50%;
  }
  .wwa-card {
    width: 55%;
  }
  .vms-row,
  .founder-row {
    flex-wrap: nowrap;
    margin-left: -10px;
    margin-right: -10px;
  }
  .vms-row > div,
  .founder-row > div {
    padding-right: 12px;
    padding-left: 12px;
  }
  .team-row > div {
    width: 25%;
  }
  .oe-row {
    flex-wrap: nowrap;
  }
  .oe-row > div {
    width: calc(100% / 5);
    margin-bottom: 0;
  }
  .foi-wrap {
    width: 35%;
    margin-bottom: 0;
  }
  .fo-cont-wrap {
    width: 75%;
  }
}
@media (min-width: 1199px) {
  .team-row > div {
    width: 20%;
  }
}