/**
 * MIKA ABOUT WIDGETS — Shared Stylesheet
 * Base: _about_inline.css (about.html). Overlays: GSAP + Who We Are responsive.
 */

@import url("_about_inline.css");

:root {
  --color-ink: var(--mika-color-ink, #111116);
  --color-blue: var(--mika-color-primary, #2546FF);
  --color-pink: #FF2D75;
  --color-yellow: #FFD400;
  --color-lime: #D4FF00;
  --color-gray-600: #555555;
  --color-bg: #F8F7F3;
  --container-px: var(--mika-container-px, clamp(1.25rem, 4vw, 3rem));
  --font-script: "Caveat", cursive;
}

body.mika-about-gsap-active .mika-reveal:not(.is-revealed):not(.is-visible),
body.mika-about-gsap-active .who-panel:not(.is-revealed):not(.is-visible),
body.mika-about-gsap-active .our-value-card:not(.is-revealed):not(.is-visible),
body.mika-about-gsap-active .about-stat-item:not(.is-revealed):not(.is-visible),
body.mika-about-gsap-active .why-choose-item:not(.is-revealed):not(.is-visible),
body.mika-about-gsap-active .about-stats-container:not(.is-revealed):not(.is-visible) {
  opacity: 0;
}

body.mika-about-gsap-reduced .mika-reveal,
body.mika-about-gsap-reduced .who-panel,
body.mika-about-gsap-reduced .our-value-card,
body.mika-about-gsap-reduced .about-stat-item,
body.mika-about-gsap-reduced .why-choose-item,
body.mika-about-gsap-reduced .about-stats-container,
.elementor-editor-active .mika-reveal,
.elementor-editor-active .lets-talk-section,
.elementor-editor-active .lets-talk-wrap,
.elementor-editor-active .lets-talk-home,
.elementor-editor-active .who-panel,
.elementor-editor-active .our-value-card,
.elementor-editor-active .about-stat-item,
.elementor-editor-active .why-choose-item,
.elementor-editor-active .about-stats-container,
.is-revealed,
.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

.mika-motion-word { display: inline-block; }

.about-hero__h1 { margin: 0 0 1.25rem; max-width: 100%; }
.about-hero__display {
  display: block;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.85rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-ink, #111116);
}
.about-hero__script {
  font-family: var(--font-script), "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(2.35rem, 4vw, 3.35rem);
  color: var(--color-blue);
  display: block;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: break-word;
  max-width: 100%;
}
.about-hero__script-underline {
  display: block;
  width: min(100%, 380px);
  height: 18px;
  margin-top: -0.15rem;
  color: inherit;
}
.about-hero__body {
  font-family: "Inter", sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.65;
  color: rgba(17, 17, 22, 0.72);
  max-width: 38ch;
  margin: 0 0 1.75rem;
}
.about-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 50px;
  text-decoration: none;
  color: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  padding: 0;
  border-radius: 0;
}
.about-hero__cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.about-hero__cta-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.about-hero__left { min-width: 0; max-width: min(680px, 100%); }

.about-stats-dots {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 40px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.95;
  color: #FF2D75;
}
.about-stats-container {
  position: relative;
  z-index: 5;
  background: #111116;
  background: rgba(17, 17, 22, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 2.5rem 2rem;
  overflow: visible;
  max-width: 1400px;
  width: 90vw;
  margin-inline: auto;
  border-radius: 35px 12px 30px 10px/10px 30px 12px 35px;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

/* —— Who We Are (overrides _about_inline) —— */
.who-we-are-section {
  overflow-x: clip !important;
  overflow-y: visible;
  background-color: var(--mika-who-bg, var(--color-bg, #F8F7F3));
  background-image: none;
}
.elementor-widget-mika-about-who-we-are .who-we-are-section {
  background-color: var(--mika-who-bg, var(--color-bg, #F8F7F3));
  background-image: none;
}
.who-we-are-section .mika-container,
.who-we-are-container {
  width: min(94vw, 100%) !important;
  max-width: 1540px !important;
  box-sizing: border-box;
  padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
}
.who-we-are-grid { min-width: 0; width: 100%; }
.who-left {
  flex: 0 1 27.5% !important;
  max-width: 27.5% !important;
  min-width: 0;
}
.who-right {
  flex: 0 1 69.5% !important;
  max-width: 69.5% !important;
  min-width: 0;
}
.who-heading-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-right: 2.25rem;
  box-sizing: border-box;
}
.who-heading {
  margin: 0 0 0.5rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.who-crown {
  position: absolute;
  right: 0;
  top: -18px;
  width: 46px;
  height: 38px;
  color: #111116;
  pointer-events: none;
}
.who-underline {
  width: 130px;
  height: 12px;
  color: #0047FF;
  display: block;
  margin-top: 4px;
  margin-bottom: 1.6rem;
  overflow: visible;
  flex-shrink: 0;
}
.who-underline-image-wrap {
  --who-underline-x: 0px;
  --who-underline-y: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 1.6rem;
  line-height: 0;
  transform: translate(var(--who-underline-x), var(--who-underline-y));
  position: relative;
  z-index: 2;
}
.who-underline-image {
  display: block;
  width: 130px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
.who-body { max-width: 36ch; }
.who-cta svg { width: 18px; height: 18px; flex-shrink: 0; }
.who-filmstrip-wrapper { position: relative; width: 100%; min-width: 0; }
.who-doodle { position: absolute; z-index: 10; pointer-events: none; }
.who-doodle--yellow { left: -25px; top: -20px; width: 85px; height: 65px; color: #FFC800; }
.who-doodle--star { right: -25px; top: -30px; width: 50px; height: 50px; color: #0047FF; }
.who-doodle--dots { right: -42px; top: 10px; width: 55px; height: 65px; opacity: 0.35; color: #111116; z-index: 0; }
.who-doodle--zigzag { right: 80px; bottom: -25px; width: 160px; height: 50px; color: #FF2D75; }
.who-filmstrip-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100%;
  min-width: 0;
}
.who-panel {
  height: clamp(220px, 28vw, 440px) !important;
  min-width: 0;
}
.who-panel__logo-overlay {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.92;
  pointer-events: none;
}
.who-panel__logo-overlay svg { width: clamp(22px, 3vw, 28px); height: clamp(22px, 3vw, 28px); }
.who-panel__logo-overlay span {
  color: #fff;
  font-size: clamp(0.45rem, 0.7vw, 0.55rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 3px;
  white-space: nowrap;
}
.who-panel--neon { background: #0d0a1a; }
.who-panel--neon > img { opacity: 0.35; }
.who-panel__neon-text {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  left: clamp(10px, 2vw, 16px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.who-panel__neon-text span {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(0.95rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  color: #b87eff;
  text-shadow: 0 0 10px rgba(184, 126, 255, 0.9), 0 0 20px rgba(184, 126, 255, 0.5);
}

@media (max-width: 1199px) {
  .who-we-are-grid { flex-direction: column !important; align-items: stretch !important; gap: 3rem !important; }
  .who-left, .who-right { flex: 1 1 auto !important; max-width: 100% !important; width: 100% !important; }
  .who-body { max-width: 52ch; }
  .who-filmstrip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
  .who-panel { height: auto !important; aspect-ratio: 3 / 4; }
  .who-panel--neon { grid-column: 1 / -1 !important; aspect-ratio: 16 / 7; }
  .who-doodle--dots, .who-doodle--zigzag { display: none !important; }
  .who-doodle--yellow { left: -8px; top: -12px; width: 64px; height: 48px; }
  .who-doodle--star { right: -8px; top: -16px; width: 40px; height: 40px; }
}

@media (max-width: 768px) {
  .who-we-are-section { padding-block: 3rem 3.5rem !important; }
  .who-we-are-grid { gap: 2.25rem !important; }
  .who-heading { font-size: clamp(1.75rem, 7vw, 2.25rem) !important; }
  .who-heading-wrap { padding-right: 1.75rem; }
  .who-crown { width: 34px; height: 28px; top: -12px; }
  .who-body { max-width: none; font-size: 0.92rem; margin-bottom: 1.75rem; }
  .who-doodle { display: none !important; }
  .who-filmstrip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.65rem !important; }
  .who-panel { height: auto !important; aspect-ratio: 3 / 4; border-radius: 12px; }
  .who-panel--neon { grid-column: 1 / -1 !important; aspect-ratio: 16 / 8; }
  .who-panel__neon-text span { font-size: clamp(1.05rem, 5.5vw, 1.35rem); }
  .who-panel:hover { transform: none; }

  .about-hero { padding-bottom: 2rem !important; }
  .about-hero__grid { grid-template-columns: 1fr !important; padding-block: 2rem 1.5rem !important; gap: 2rem !important; }
  .about-hero__right {
    display: block !important;
    opacity: 1 !important;
    height: 370px !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 1rem auto 0 !important;
    position: relative !important;
    overflow: visible !important;
  }
  .about-photo-wrap {
    position: absolute !important;
    left: 50% !important;
    top: 40px !important;
    margin-left: -85px !important;
    width: 250px !important;
    height: 280px !important;
  }
  .about-sticky-note {
    position: absolute !important;
    right: 4% !important;
    top: 10px !important;
  }
  .about-yellow-card {
    position: absolute !important;
    left: 6% !important;
    bottom: 25px !important;
    width: 120px !important;
    height: 120px !important;
  }
  .about-blue-brush {
    position: absolute !important;
    left: 2% !important;
    bottom: 15px !important;
    width: 220px !important;
    height: 110px !important;
  }
  .about-pink-brush {
    position: absolute !important;
    right: 2% !important;
    bottom: 5px !important;
    width: 200px !important;
    height: 90px !important;
  }
  .about-circular-stamp {
    position: absolute !important;
    left: 14% !important;
    top: 0 !important;
  }
  .about-hero__display { font-size: clamp(2rem, 9vw, 2.75rem) !important; }
  .about-hero__script { font-size: clamp(1.85rem, 8vw, 2.5rem) !important; }
  .about-hero__body { max-width: none; }
  .about-stats-brush, .about-stats-dots { display: none !important; }
  .about-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .our-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.25rem !important; }
  .why-choose-grid { flex-direction: column !important; }
  .why-choose-left, .why-choose-right { max-width: 100% !important; width: 100% !important; }
  .why-choose-items-grid { grid-template-columns: 1fr !important; }
  .lets-talk-home { flex-direction: column !important; }
  .lets-talk-brush, .lets-talk-black-dashes, .lets-talk-yellow-splash { display: none !important; }
  .lets-talk-heading { white-space: normal !important; }
}

@media (max-width: 576px) {
  .who-we-are-container, .who-we-are-section .mika-container { width: 100% !important; padding-inline: 1rem; }
  .who-filmstrip-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
  .who-panel { height: auto !important; aspect-ratio: 16 / 10 !important; border-radius: 14px !important; }
  .who-panel--neon { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9 !important; }
  .who-panel__neon-text span { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
  .about-stats-grid { grid-template-columns: 1fr !important; gap: 2.25rem !important; padding-inline: 0 !important; justify-items: center !important; }
  .about-stats-container { padding: 2.25rem 1.25rem !important; width: 92vw !important; }
  .about-stat-item { width: min(100%, 280px) !important; margin-inline: auto !important; justify-content: flex-start !important; }
}

.elementor-device-mobile .who-we-are-grid,
.elementor-device-tablet .who-we-are-grid {
  flex-direction: column !important;
}
.elementor-device-mobile .who-left,
.elementor-device-mobile .who-right,
.elementor-device-tablet .who-left,
.elementor-device-tablet .who-right {
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
.elementor-device-mobile .who-doodle { display: none !important; }
.elementor-device-mobile .who-filmstrip-grid {
  grid-template-columns: 1fr !important;
  gap: 1rem !important;
}
.elementor-device-mobile .who-panel { height: auto !important; aspect-ratio: 16 / 10 !important; border-radius: 14px !important; }
.elementor-device-mobile .who-panel--neon { grid-column: 1 / -1 !important; aspect-ratio: 16 / 9 !important; }
.elementor-device-mobile .about-hero__grid { grid-template-columns: 1fr !important; padding-block: 2rem 1rem !important; }
.elementor-device-mobile .about-hero__right {
  display: block !important;
  height: 370px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 1rem auto 0 !important;
  position: relative !important;
  overflow: visible !important;
}
.elementor-device-mobile .about-stats-grid { grid-template-columns: 1fr !important; gap: 2.25rem !important; padding-inline: 0 !important; justify-items: center !important; }
.elementor-device-mobile .about-stat-item { width: min(100%, 280px) !important; margin-inline: auto !important; justify-content: flex-start !important; }
.elementor-device-mobile .our-values-grid,
.elementor-device-mobile .why-choose-items-grid { grid-template-columns: 1fr !important; }
.elementor-device-tablet .our-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.elementor-device-mobile .lets-talk-home { flex-direction: column !important; }

/* elementor editor compatibility */
.elementor-editor-active .mika-reveal,
.elementor-editor-active .who-panel,
.elementor-editor-active .our-value-card,
.elementor-editor-active .about-stat-item,
.elementor-editor-active .why-choose-item,
.elementor-editor-active .about-stats-container,
.elementor-editor-active .about-hero__left > *,
.elementor-editor-active .about-hero__right > * {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}

/* Framer-like interactive spring hover effects */
.our-value-card,
.who-panel,
.why-choose-item,
.about-stat-item {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.our-value-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.why-choose-item:hover {
  transform: translateY(-5px) scale(1.015);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
}

.about-stat-item:hover {
  transform: translateY(-4px) scale(1.03);
}

.about-hero__cta {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.about-hero__cta:hover {
  transform: scale(1.05) translateY(-2px);
}

/* Hero photo — ambient float (matches Works page .wk-hero__visual) */
@keyframes mikaHeroAmbientFloat {
  0%   { transform: translateY(0px) rotate(0deg); }
  50%  { transform: translateY(-8px) rotate(1.5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* About Hero — single composite visual */
.about-hero__right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto !important;
  min-height: 0;
}

.about-hero__visual {
  width: 100%;
  max-width: min(560px, 100%);
  margin-inline: auto;
}

.about-hero__visual-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transform-origin: center center;
  animation: mikaHeroAmbientFloat 5s ease-in-out infinite;
  filter: none !important;
}

.elementor-editor-active .about-hero__visual-img,
.elementor-editor-preview .about-hero__visual-img {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__visual-img {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .about-hero__visual {
    max-width: 100%;
  }
}

/* ===========================================================
   ABOUT STATS BAND — full width (this widget only)
   =========================================================== */
.elementor-section:has(.elementor-widget-mika-about-stats .about-stats-section--full-width),
.e-con:has(.elementor-widget-mika-about-stats .about-stats-section--full-width),
.elementor-container:has(.elementor-widget-mika-about-stats .about-stats-section--full-width),
.elementor-column:has(.elementor-widget-mika-about-stats .about-stats-section--full-width),
.elementor-widget-wrap:has(> .elementor-widget-mika-about-stats .about-stats-section--full-width) {
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-widget-mika-about-stats:has(.about-stats-section--full-width) {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.elementor-widget-mika-about-stats .about-stats-section--full-width {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding-inline: 0 !important;
}

.elementor-widget-mika-about-stats .about-stats-section--full-width .about-stats-container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: clamp(1.25rem, 3.5vw, 4rem) !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}

.elementor-widget-mika-about-stats .about-stats-section--full-width .about-stats-grid {
  width: 100% !important;
  max-width: none !important;
  padding-inline: clamp(0.5rem, 2vw, 2rem) !important;
  box-sizing: border-box !important;
}

/* Editor / preview: same full-width band without double breakout */
.elementor-editor-active .elementor-widget-mika-about-stats:has(.about-stats-section--full-width),
.elementor-editor-preview .elementor-widget-mika-about-stats:has(.about-stats-section--full-width) {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-editor-active .elementor-widget-mika-about-stats .about-stats-section--full-width .about-stats-container,
.elementor-editor-preview .elementor-widget-mika-about-stats .about-stats-section--full-width .about-stats-container {
  max-width: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  border-radius: 0 !important;
}

@media (max-width: 768px) {
  .elementor-widget-mika-about-stats .about-stats-section--full-width .about-stats-container {
    width: 100% !important;
    max-width: none !important;
  }
}

/* ===========================================================
   OUR VALUES GRID — background + responsive (this widget only)
   =========================================================== */
.elementor-widget-mika-about-values .our-values-section {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--mika-values-bg, var(--color-bg, #F8F7F3));
  background-image: none;
}

.elementor-widget-mika-about-values .our-values-grid {
  width: 100%;
  min-width: 0;
}

.elementor-widget-mika-about-values .our-value-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1199px) {
  .elementor-widget-mika-about-values .our-values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 991px) {
  .elementor-widget-mika-about-values .our-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }

  .elementor-widget-mika-about-values .our-values-section {
    padding-block: 3.25rem 4rem !important;
  }

  .elementor-widget-mika-about-values .our-values-section .mika-container {
    width: min(94vw, 100%) !important;
    max-width: 100% !important;
    padding-inline: clamp(0.75rem, 3vw, 1.5rem) !important;
    box-sizing: border-box !important;
  }

  .elementor-widget-mika-about-values .our-values-section > svg {
    opacity: 0.35;
    transform: scale(0.85);
    transform-origin: top right;
  }
}

@media (max-width: 640px) {
  .elementor-widget-mika-about-values .our-values-grid {
    grid-template-columns: 1fr !important;
    gap: 1.15rem !important;
  }

  .elementor-widget-mika-about-values .our-values-section {
    padding-block: 2.5rem 3.25rem !important;
    overflow-x: clip;
  }

  .elementor-widget-mika-about-values .our-values-section > svg {
    display: none !important;
  }

  .elementor-widget-mika-about-values .our-values-header {
    margin-bottom: 1.75rem !important;
  }

  .elementor-widget-mika-about-values .our-value-card {
    padding: 1.85rem 1.15rem 1.4rem !important;
  }
}

.elementor-device-tablet .elementor-widget-mika-about-values .our-values-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.elementor-device-mobile .elementor-widget-mika-about-values .our-values-grid {
  grid-template-columns: 1fr !important;
}

/* —— Why Choose: heading underline image (same flow as Who We Are) —— */
.elementor-widget-mika-about-why-choose .why-choose-section {
  background-color: var(--mika-why-bg, var(--color-bg, #F8F7F3));
  background-image: none;
}
.why-choose-heading-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.why-choose-underline {
  width: 150px;
  height: 14px;
  color: #0047FF;
  display: block;
  margin-top: 4px;
  overflow: visible;
  flex-shrink: 0;
}
.why-choose-underline-image-wrap {
  --why-underline-x: 0px;
  --why-underline-y: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  line-height: 0;
  transform: translate(var(--why-underline-x), var(--why-underline-y));
  position: relative;
  z-index: 2;
}
.why-choose-underline-image {
  display: block;
  width: 150px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}