/* ------------------------------------------------------------------ */
/* Brand theme — Figma tokens.                                          */
/* Loaded AFTER main.css (see layout.tsx) so these override the         */
/* template's default palette. Applies the Figma green primary, cool    */
/* Grey neutrals, gradients, shadows and the Manrope display font.      */
/* Both OS color schemes map to the same theme for consistency.         */
/* ------------------------------------------------------------------ */

:root {
  /* Raw Figma palette (source of truth) */
  --figma-white: #ffffff;
  --figma-black: #000000;

  /* Primary / green */
  --figma-primary-50: #edfdf3;
  --figma-primary-100: #c7f7db;
  --figma-primary-200: #a2f2c3;
  --figma-primary-300: #7cedaa;
  --figma-primary-400: #56e892;
  --figma-primary-500: #31e379;
  --figma-primary-600: #1ccc64;
  --figma-primary-700: #19b659;
  --figma-primary-800: #12813f;
  --figma-primary-900: #0d5b2d;
  --figma-primary-950: #07361a;

  /* Grey / cool neutral */
  --figma-grey-50: #f4f4f6;
  --figma-grey-100: #dddee2;
  --figma-grey-200: #c6c8ce;
  --figma-grey-300: #afb1ba;
  --figma-grey-400: #989ba6;
  --figma-grey-500: #818593;
  --figma-grey-600: #6d717f;
  --figma-grey-700: #585b66;
  --figma-grey-800: #44464f;
  --figma-grey-900: #303238;
  --figma-grey-950: #1c1d21;

  /* Gradients */
  --gradient-p1: linear-gradient(93deg, #c7f7db 0%, #1ccc64 100%);
  --gradient-p2: linear-gradient(274deg, #56e892 0%, #19b659 100%);
  --gradient-p3: linear-gradient(96deg, #1ccc64 31.85%, #c7f7db 83.62%);
  --gradient-p4: linear-gradient(101deg, #31e379 0%, #19b659 100%);

  /* Shadows */
  --shadow-1: 0px 4px 24px 0px rgba(0, 0, 0, 0.1);
  --shadow-2: 2px 2px 8px 0px rgba(0, 0, 0, 0.25);
  --shadow-3: 0px 2px 8px 0px rgba(0, 0, 0, 0.1), 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
  --shadow-4: 0px 0px 5px 2px rgba(151, 154, 160, 0.13);
  --shadow-5: 0px -4px 16px 0px rgba(0, 0, 0, 0.2);
}

:root {
  /* Light scheme tokens -> Figma brand */
  --base--light: var(--figma-white);
  --base-rgb--light: 255, 255, 255;
  --base-tint--light: var(--figma-grey-50);
  --base-tint-rgb--light: 244, 244, 246;
  --base-bright--light: var(--figma-white);
  --base-bright-rgb--light: 255, 255, 255;
  --accent--light: var(--figma-primary-600);
  --highlight--light: var(--figma-primary-400);
  --base-opp--light: var(--figma-grey-950);
  --base-opp-rgb--light: 28, 29, 33;
  --t-bright--light: var(--figma-grey-950);
  --t-medium--light: var(--figma-grey-700);
  --t-muted--light: var(--figma-grey-500);
  --t-muted-extra--light: var(--figma-grey-200);
  --t-opp-bright--light: var(--figma-white);
  --t-opp-medium--light: var(--figma-grey-200);
  --t-opp-muted--light: var(--figma-grey-500);
  --t-opp-muted-extra--light: var(--figma-grey-700);
  --st-muted--light: var(--figma-grey-200);
  --st-medium--light: var(--figma-grey-400);
  --st-bright--light: var(--figma-grey-950);

  /* Dark scheme tokens -> same brand theme (keeps site consistent) */
  --base--dark: var(--figma-white);
  --base-rgb--dark: 255, 255, 255;
  --base-tint--dark: var(--figma-grey-50);
  --base-tint-rgb--dark: 244, 244, 246;
  --base-bright--dark: var(--figma-white);
  --base-bright-rgb--dark: 255, 255, 255;
  --accent--dark: var(--figma-primary-600);
  --highlight--dark: var(--figma-primary-400);
  --base-opp--dark: var(--figma-grey-950);
  --base-opp-rgb--dark: 28, 29, 33;
  --t-bright--dark: var(--figma-grey-950);
  --t-medium--dark: var(--figma-grey-700);
  --t-muted--dark: var(--figma-grey-500);
  --t-muted-extra--dark: var(--figma-grey-200);
  --t-opp-bright--dark: var(--figma-white);
  --t-opp-medium--dark: var(--figma-grey-200);
  --t-opp-muted--dark: var(--figma-grey-500);
  --t-opp-muted-extra--dark: var(--figma-grey-700);
  --st-muted--dark: var(--figma-grey-200);
  --st-medium--dark: var(--figma-grey-400);
  --st-bright--dark: var(--figma-grey-950);

  /* Force the active tokens regardless of OS color scheme */
  --base: var(--figma-white);
  --base-rgb: 255, 255, 255;
  --base-tint: var(--figma-grey-50);
  --base-tint-rgb: 244, 244, 246;
  --base-bright: var(--figma-white);
  --base-bright-rgb: 255, 255, 255;
  --accent: var(--figma-primary-600);
  --highlight: var(--figma-primary-400);
  --base-opp: var(--figma-grey-950);
  --base-opp-rgb: 28, 29, 33;
  --t-bright: var(--figma-grey-950);
  --t-medium: var(--figma-grey-700);
  --t-muted: var(--figma-grey-500);
  --t-muted-extra: var(--figma-grey-200);
  --t-opp-bright: var(--figma-white);
  --t-opp-medium: var(--figma-grey-200);
  --t-opp-muted: var(--figma-grey-500);
  --t-opp-muted-extra: var(--figma-grey-700);
  --st-muted: var(--figma-grey-200);
  --st-medium: var(--figma-grey-400);
  --st-bright: var(--figma-grey-950);

  --bg-demo-screen-01: url("/img/yehulu-p1/22.png");
  --bg-demo-screen-02: url("/img/yehulu-p1/23.png");
  --bg-demo-screen-03: url("/img/yehulu-p1/24.png");
  --bg-demo-screen-04: url("/img/yehulu-p1/25.png");
  --bg-demo-screen-05: url("/img/yehulu-p1/26.png");
  --bg-demo-screen-06: url("/img/yehulu-p1/27.png");
  --bg-demo-screen-07: url("/img/yehulu-p1/28.png");
  --bg-demo-screen-08: url("/img/yehulu-p1/29.png");
  --bg-demo-screen-09: url("/img/yehulu-p1/30.png");
  --bg-demo-screen-10: url("/img/yehulu-p1/31.png");

  /* Permanent accent typography -> brand green */
  --pt-t-accent-bright: var(--figma-white);
  --pt-t-accent-medium: var(--figma-primary-200);
  --pt-t-accent-muted: var(--figma-primary-100);
}

:root {
  /* Adapt the template's accent typography to match the hero (Manrope) */
  --_font-accent: "Manrope", var(--font-manrope, ui-sans-serif, system-ui, sans-serif);
}

html {
  color-scheme: light;
}

body {
  background-color: var(--base);
  background-image: linear-gradient(
    180deg,
    var(--figma-primary-50) 0%,
    #f5fef9 45%,
    #ffffff 100%
  );
  background-attachment: fixed;
  color: var(--t-medium);
  transition: background-color 0.3s ease;
}

/* Manrope everywhere, matching the hero */
body,
button,
input,
textarea,
select,
.mxd-page-content,
.mxd-header,
header,
footer,
section {
  font-family: var(--font-manrope, ui-sans-serif, system-ui, sans-serif);
}

.mxd-demo-cta__trust {
  margin: 1.6rem 0 0;
  color: var(--t-medium);
  opacity: 0.72;
}

/* ------------------------------------------------------------------ */
/* Fixed header (replaces the template hamburger toggle + overlay)      */
/* ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 3rem;
  width: 100%;
  padding: 0.9rem 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(28, 29, 33, 0.08);
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
          box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.site-header > * {
  pointer-events: auto;
}

@media only screen and (min-width: 768px) {
  .site-header {
    padding: 1rem 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .site-header {
    padding: 1.1rem 7rem;
  }
}

.site-header__logo {
  position: relative;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.site-header__logo .mxd-logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo .mxd-logo__full {
  display: block;
  width: auto;
  height: 4.2rem;
  max-width: 18rem;
  object-fit: contain;
}

@media only screen and (max-width: 767px) {
  .site-header__logo .mxd-logo__full {
    height: 3.6rem;
    max-width: 15rem;
  }
}

/* ------------------------------------------------------------------ */
/* Customer / Business switch (sits right of the logo)                  */
/* ------------------------------------------------------------------ */
.site-header__brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2rem;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.audience-toggle {
  --audience-toggle-pad: 0.4rem;
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  padding: var(--audience-toggle-pad);
  border: 1px solid rgba(28, 29, 33, 0.1);
  border-radius: 10rem;
  background-color: rgba(255, 255, 255, 0.6);
}

.audience-toggle__thumb {
  position: absolute;
  top: var(--audience-toggle-pad);
  bottom: var(--audience-toggle-pad);
  left: var(--audience-toggle-pad);
  width: calc(50% - var(--audience-toggle-pad));
  border-radius: 10rem;
  background-color: var(--accent);
  -webkit-box-shadow: var(--shadow-2);
          box-shadow: var(--shadow-2);
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
}

.audience-toggle[data-active="business"] .audience-toggle__thumb {
  -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
          transform: translateX(100%);
}

.audience-toggle__option {
  position: relative;
  z-index: 1;
  padding: 0.9rem 1.6rem;
  font: normal 600 1.3rem/1 var(--_font-accent);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06rem;
  color: var(--t-bright);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.72;
  -webkit-transition: color var(--_animspeed-medium) var(--_animbezier), opacity var(--_animspeed-medium) var(--_animbezier);
  transition: color var(--_animspeed-medium) var(--_animbezier), opacity var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .audience-toggle__option:hover,
.audience-toggle__option:focus-visible {
  opacity: 1;
}

.audience-toggle[data-active="customer"] .audience-toggle__option:first-of-type,
.audience-toggle[data-active="business"] .audience-toggle__option:last-of-type {
  color: var(--figma-white);
  opacity: 1;
}

@media only screen and (max-width: 767px) {
  .site-header__brand {
    gap: 1.2rem;
  }

  .audience-toggle__option {
    padding: 0.8rem 1rem;
    font-size: 1.1rem;
    letter-spacing: 0.02rem;
  }
}

@media only screen and (max-width: 479px) {
  .site-header {
    gap: 1rem;
    padding-right: 1.2rem;
    padding-left: 1.6rem;
  }

  .site-header__logo .mxd-logo__full {
    height: 3rem;
    max-width: 11rem;
  }

  .site-header__burger {
    width: 4rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1439px) {
  .site-header {
    gap: 2rem;
  }

  .site-header__links {
    gap: 2rem;
  }
}

.mxd-demo-footer__logo .mxd-logo {
  display: inline-flex;
  align-items: center;
}

.mxd-demo-footer__logo .mxd-logo__full {
  display: block;
  width: auto;
  height: clamp(4.2rem, 4.4vw, 6.4rem);
  max-width: min(24rem, 100%);
  object-fit: contain;
}

.site-header__nav {
  margin-left: auto;
}

.site-header__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__link {
  position: relative;
  font: normal 600 1.5rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.08rem;
  color: var(--t-bright);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.72;
  -webkit-transition: opacity var(--_animspeed-medium) var(--_animbezier);
  transition: opacity var(--_animspeed-medium) var(--_animbezier);
}

.site-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.6rem;
  width: 100%;
  height: 0.2rem;
  background-color: var(--accent);
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
  -webkit-transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: -webkit-transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  transition: transform var(--_animspeed-medium) var(--_animbezier), -webkit-transform var(--_animspeed-medium) var(--_animbezier);
}

.no-touch .site-header__link:hover,
.site-header__link:focus-visible {
  opacity: 1;
}

.no-touch .site-header__link:hover::after,
.site-header__link:focus-visible::after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}

.site-header__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.5rem;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.site-header__cta {
  display: none;
}

@media only screen and (min-width: 768px) {
  .site-header__cta {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: inline-flex;
  }
}

.site-header__burger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.8rem;
  width: 5.5rem;
  height: 3.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-header__burger .hamburger__line {
  background-color: var(--t-bright);
}

/* desktop: hide burger + mobile menu, show inline nav */
@media only screen and (min-width: 1200px) {
  .site-header__burger,
  .site-mobile-menu {
    display: none !important;
  }
}

/* mobile/tablet: inline nav collapses into the burger drawer */
@media only screen and (max-width: 1199px) {
  .site-header__nav {
    display: none;
  }

  .site-header__burger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile menu drawer                                                  */
/* ------------------------------------------------------------------ */
.site-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 6rem 3rem;
  overflow-y: auto;
  background-color: var(--base);
  background-image: linear-gradient(180deg, var(--figma-primary-50) 0%, var(--base) 100%);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity var(--_animspeed-medium) var(--_animbezier), visibility var(--_animspeed-medium) var(--_animbezier);
  transition: opacity var(--_animspeed-medium) var(--_animbezier), visibility var(--_animspeed-medium) var(--_animbezier);
}

.site-mobile-menu--open {
  opacity: 1;
  visibility: visible;
}

.site-mobile-menu__close {
  position: absolute;
  top: 3rem;
  right: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 5.5rem;
  height: 3.6rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.site-mobile-menu__close svg {
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: var(--t-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.site-mobile-menu__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-mobile-menu__link {
  font: normal 700 3rem/1.1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: -0.05rem;
  color: var(--t-bright);
  text-decoration: none;
}

.site-mobile-menu__cta {
  -ms-flex-item-align: start;
  align-self: flex-start;
  margin-top: 4rem;
}

/* ------------------------------------------------------------------ */
/* Fullscreen menu: vertically center the numbered list so the empty    */
/* space is split evenly above/below instead of piling below the items. */
/* ------------------------------------------------------------------ */
@media only screen and (min-width: 1200px) {
  .mxd-menu__left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .main-menu {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* ------------------------------------------------------------------ */
/* Landing image frames                                                */
/* ------------------------------------------------------------------ */
.mxd-demo-grid__image,
.demo-card__image,
.mxd-resp-promo__image,
.demo-swiper-slide__image,
.mxd-demo-components__object,
.marquee__component,
.mxd-niche-cards__image,
.landing-features-cards .mxd-niche-cards__inner {
  position: relative;
  overflow: hidden;
}

.mxd-demo-grid__image img,
.demo-card__image img,
.demo-card__image video,
.mxd-resp-promo__image img,
.demo-swiper-slide__image img,
.mxd-demo-components__object img,
.marquee__component img,
.mxd-niche-cards__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mxd-demo-grid__image {
  aspect-ratio: 16 / 11;
  border-color: rgba(28, 29, 33, 0.12);
  border-radius: 2.4rem;
  background-color: var(--figma-grey-50);
  box-shadow: 0 24px 70px -42px rgba(28, 29, 33, 0.42);
}

.mxd-demo-grid__gallery {
  --landing-card-gap: clamp(1.8rem, 2.4vw, 3.6rem);
  row-gap: var(--landing-card-gap);
}

.mxd-demo-grid__gallery > .mxd-demo-grid__item {
  padding: calc(var(--landing-card-gap) / 2);
}

.mxd-demo-grid__image img,
.mxd-demo-grid__screen {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

.mxd-demo-grid__image img {
  opacity: 0;
}

.demo-card__image {
  min-height: 42rem;
  background-color: var(--figma-grey-50);
}

.demo-card__image img,
.demo-card__image video,
.demo-card__image .img-01,
.demo-card__image .img-02 {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}

.mxd-resp-promo__image,
.demo-swiper-slide__image {
  aspect-ratio: 16 / 10;
}

.mxd-demo-components__object,
.marquee__component {
  aspect-ratio: 4 / 3;
}

.landing-features-cards .mxd-niche-cards__inner {
  isolation: isolate;
  border-radius: 2.8rem;
}

.landing-features-cards .mxd-niche-cards__title,
.landing-features-cards .mxd-niche-cards__descr {
  position: relative;
  z-index: 2;
}

.landing-features-cards .mxd-niche-cards__image.absolute-desktop-bottom,
.landing-features-cards .mxd-niche-cards__image.absolute-desktop-full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.landing-features-cards .mxd-niche-cards__image.absolute-desktop-bottom img,
.landing-features-cards .mxd-niche-cards__image.absolute-desktop-full img {
  width: 100%;
  height: 100%;
}

.landing-features-cards .mxd-niche-cards__image.absolute-desktop-bottom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.76) 44%,
    rgba(255, 255, 255, 0.18) 100%
  );
}

.how-it-works-hero .inner-headline__bg {
  background: var(--figma-grey-950);
}

.how-it-works-hero .inner-headline__bg img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.how-it-works-hero .inner-headline__cover {
  background:
    linear-gradient(180deg, rgba(7, 54, 26, 0.18) 0%, rgba(7, 54, 26, 0.34) 48%, rgba(7, 54, 26, 0.72) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.1) 58%, rgba(0, 0, 0, 0.24) 100%);
}

@media only screen and (min-width: 1200px) {
  .mxd-demo-grid__image {
    aspect-ratio: 16 / 10;
  }

  .demo-card__image {
    min-height: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .mxd-demo-grid__image {
    aspect-ratio: 4 / 3;
    border-radius: 1.8rem;
  }

  .demo-card__image {
    min-height: 34rem;
  }

  .landing-features-cards .mxd-niche-cards__inner {
    border-radius: 2rem;
  }
}

/* Final media-fill pass for card sections across the template. */
.mxd-page-content :is(
  .mxd-demo-grid__image,
  .demo-card__image,
  .mxd-resp-promo__image,
  .demo-swiper-slide__image,
  .marquee__component,
  .mxd-niche-cards__image.absolute-desktop-bottom,
  .mxd-niche-cards__image.absolute-desktop-full,
  .mxd-project-item__media,
  .card__image,
  .services-card__image,
  .mxd-team-grid__photo,
  .mxd-team-list__photo,
  .mxd-blog-item__media,
  .post-featured__thumb,
  .post-featured-fullscreen__thumb,
  .post-simple-alt__media,
  .recent-post__thumb,
  .widget__image,
  .mxd-article__thumb,
  .mxd-images-grid__inner,
  .mxd-about-team__img,
  .mxd-about-images__img,
  .mxd-split-descr__image,
  .mxd-cpb-list__image,
  .mxd-awards__image,
  .mxd-resume__image,
  .mxd-testimonials-card__photo,
  .mxd-testimonials-image__wrap,
  .mxd-testimonials-project__photo,
  .mxd-next-prj__image
) {
  position: relative;
  overflow: hidden;
}

.mxd-page-content :is(
  .mxd-demo-grid__image,
  .demo-card__image,
  .mxd-resp-promo__image,
  .demo-swiper-slide__image,
  .marquee__component,
  .mxd-niche-cards__image.absolute-desktop-bottom,
  .mxd-niche-cards__image.absolute-desktop-full,
  .mxd-project-item__media,
  .card__image,
  .services-card__image,
  .mxd-team-grid__photo,
  .mxd-team-list__photo,
  .mxd-blog-item__media,
  .post-featured__thumb,
  .post-featured-fullscreen__thumb,
  .post-simple-alt__media,
  .recent-post__thumb,
  .widget__image,
  .mxd-article__thumb,
  .mxd-images-grid__inner,
  .mxd-about-team__img,
  .mxd-about-images__img,
  .mxd-split-descr__image,
  .mxd-cpb-list__image,
  .mxd-awards__image,
  .mxd-resume__image,
  .mxd-testimonials-card__photo,
  .mxd-testimonials-image__wrap,
  .mxd-testimonials-project__photo,
  .mxd-next-prj__image
) :is(img, video) {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
}