body.elementor-page-94:not(.elementor-motion-effects-element-type-background), body.elementor-page-94 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start custom CSS for html, class: .elementor-element-b48c2e9 */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap");

/* =========================================================
   DURA ULTIMA — MINIMAL ABOUT HERO
========================================================= */

#du-about-banner,
#du-about-banner * {
  box-sizing: border-box;
}

#du-about-banner {
  --duab-primary: #da252c;
  --duab-hover: #b71e24;
  --duab-dark: #111111;
  --duab-secondary: #1a1a1a;
  --duab-white: #ffffff;

  --duab-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duab-scroll-y: 0px;
  --duab-mouse-x: 0px;
  --duab-mouse-y: 0px;

  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 540px;
  overflow: hidden;
  background: var(--duab-dark);
  color: var(--duab-white);
  font-family: "Inter", sans-serif;
}

#du-about-banner span {
  display: block;
}

.du-about-banner__container {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;

  width: min(100% - 48px, 1560px);
  min-height: 540px;
  margin: 0 auto;
  padding: 90px 0 75px;
}

/* =========================================================
   BACKGROUND
========================================================= */

.du-about-banner__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.du-about-banner__background::before {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 18% 48%,
      rgba(218, 37, 44, 0.13),
      transparent 31%
    ),
    radial-gradient(
      circle at 88% 52%,
      rgba(255, 255, 255, 0.035),
      transparent 30%
    );

  content: "";
}

.du-about-banner__grid {
  position: absolute;
  inset: -100px 0;

  opacity: 0.22;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );

  background-size: 90px 90px;

  transform:
    translate3d(
      var(--duab-mouse-x),
      calc(
        var(--duab-scroll-y) +
        var(--duab-mouse-y)
      ),
      0
    );

  will-change: transform;
}

.du-about-banner__slats {
  position: absolute;
  top: 0;
  right: 0;

  width: 47%;
  height: 100%;

  opacity: 0.13;

  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.06) 18px,
      rgba(255, 255, 255, 0.06) 20px
    );

  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 45%,
    #000
  );

  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 45%,
    #000
  );

  transform: translateY(
    calc(var(--duab-scroll-y) * -0.35)
  );
}

.du-about-banner__light {
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;

  width: 16%;
  opacity: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );

  filter: blur(20px);
  transform: skewX(-18deg);
}

.du-about-banner.is-in-view
  .du-about-banner__light {
  animation: duabLightMove 8.5s ease-in-out infinite;
}

@keyframes duabLightMove {
  0% {
    left: -30%;
    opacity: 0;
  }

  18% {
    opacity: 0.8;
  }

  72% {
    opacity: 0.18;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

/* =========================================================
   TECHNICAL LINES
========================================================= */

.du-about-banner__line {
  position: absolute;

  width: 1px;
  height: 640px;

  background: linear-gradient(
    transparent,
    rgba(218, 37, 44, 0.55),
    transparent
  );

  transform: rotate(31deg);
}

.du-about-banner__line--one {
  top: -150px;
  left: 11%;
}

.du-about-banner__line--two {
  top: -40px;
  left: 16%;
  opacity: 0.32;
}

/* =========================================================
   OUTER FRAME
========================================================= */

.du-about-banner__frame {
  position: absolute;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.du-about-banner__frame--top {
  top: 28px;
}

.du-about-banner__frame--bottom {
  bottom: 28px;
}

/* =========================================================
   CONTENT
========================================================= */

.du-about-banner__content {
  position: relative;
  z-index: 2;

  max-width: 1100px;

  transform:
    translate3d(
      calc(var(--duab-mouse-x) * -0.25),
      calc(var(--duab-mouse-y) * -0.25),
      0
    );
}

.du-about-banner__brand {
  display: flex !important;
  align-items: center;
  gap: 15px;

  margin-bottom: 25px;

  overflow: hidden;

  color: rgba(255, 255, 255, 0.56);

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.7px;
  text-transform: uppercase;
}

.du-about-banner__brand-line {
  width: 48px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--duab-primary);
}

.du-about-banner__title {
  margin: 0;

  color: var(--duab-white);

  font-family: "Poppins", sans-serif;
  font-size: clamp(82px, 10vw, 158px);
  font-weight: 700;
  letter-spacing: -9px;
  line-height: 0.9;
}

.du-about-banner__title > span {
  overflow: hidden;
}

/* =========================================================
   RED ACCENT
========================================================= */

.du-about-banner__accent {
  position: absolute;
  right: 0;
  bottom: 28px;

  width: clamp(160px, 24vw, 390px);
  height: 5px;

  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.du-about-banner__accent::after {
  position: absolute;
  inset: 0;

  background: var(--duab-primary);

  content: "";
  transform: translateX(-100%);
}

.du-about-banner.is-entered
  .du-about-banner__accent::after {
  transform: translateX(0);

  transition:
    transform 1.15s var(--duab-ease) 780ms;
}

/* =========================================================
   ENTRANCE ANIMATION
========================================================= */

.du-about-banner.du-about-banner--motion-ready:not(.is-entered)
  .du-about-banner__brand {
  clip-path: inset(0 100% 0 0);
  transform: translateX(40px);
}

.du-about-banner.du-about-banner--motion-ready.is-entered
  .du-about-banner__brand {
  clip-path: inset(0);
  transform: translateX(0);

  transition:
    clip-path 750ms var(--duab-ease) 120ms,
    transform 750ms var(--duab-ease) 120ms;
}

.du-about-banner.du-about-banner--motion-ready:not(.is-entered)
  .du-about-banner__brand-line {
  width: 0;
}

.du-about-banner.du-about-banner--motion-ready.is-entered
  .du-about-banner__brand-line {
  width: 48px;

  transition:
    width 650ms var(--duab-ease) 370ms;
}

.du-about-banner.du-about-banner--motion-ready:not(.is-entered)
  .du-about-banner__title > span {
  clip-path: inset(100% 0 0 0);
  transform: translateY(95px);
}

.du-about-banner.du-about-banner--motion-ready.is-entered
  .du-about-banner__title > span {
  clip-path: inset(0);
  transform: translateY(0);

  transition:
    clip-path 1.15s var(--duab-ease) 260ms,
    transform 1.15s var(--duab-ease) 260ms;
}

.du-about-banner.du-about-banner--motion-ready:not(.is-entered)
  .du-about-banner__frame--top,
.du-about-banner.du-about-banner--motion-ready:not(.is-entered)
  .du-about-banner__frame--bottom {
  clip-path: inset(0 100% 0 0);
}

.du-about-banner.du-about-banner--motion-ready.is-entered
  .du-about-banner__frame--top,
.du-about-banner.du-about-banner--motion-ready.is-entered
  .du-about-banner__frame--bottom {
  clip-path: inset(0);

  transition:
    clip-path 1.2s var(--duab-ease) 500ms;
}

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

@media (max-width: 1024px) {
  #du-about-banner {
    min-height: 470px;
  }

  .du-about-banner__container {
    width: min(100% - 40px, 920px);
    min-height: 470px;
    padding: 75px 0 65px;
  }

  .du-about-banner__title {
    font-size: clamp(76px, 12vw, 120px);
    letter-spacing: -7px;
  }

  .du-about-banner__slats {
    width: 62%;
  }
}

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

@media (max-width: 767px) {
  #du-about-banner {
    min-height: 360px;
  }

  .du-about-banner__container {
    width: min(100% - 34px, 680px);
    min-height: 360px;
    padding: 65px 0 55px;
  }

  .du-about-banner__brand {
    margin-bottom: 19px;
    font-size: 9px;
    letter-spacing: 2.2px;
  }

  .du-about-banner__brand-line {
    width: 36px;
  }

  .du-about-banner.du-about-banner--motion-ready.is-entered
    .du-about-banner__brand-line {
    width: 36px;
  }

  .du-about-banner__title {
    font-size: clamp(58px, 18vw, 88px);
    letter-spacing: -5px;
    line-height: 0.94;
  }

  .du-about-banner__grid {
    background-size: 64px 64px;
  }

  .du-about-banner__slats {
    width: 78%;
  }

  .du-about-banner__frame--top {
    top: 18px;
  }

  .du-about-banner__frame--bottom {
    bottom: 18px;
  }

  .du-about-banner__accent {
    bottom: 18px;
    width: 42%;
    height: 4px;
  }
}

@media (max-width: 420px) {
  .du-about-banner__title {
    font-size: 56px;
    letter-spacing: -4px;
  }
}

/* =========================================================
   ELEMENTOR EDITOR SAFETY
========================================================= */

body.elementor-editor-active #du-about-banner,
body.elementor-editor-preview #du-about-banner,
.elementor-editor-active #du-about-banner,
.elementor-editor-preview #du-about-banner {
  --duab-scroll-y: 0px !important;
  --duab-mouse-x: 0px !important;
  --duab-mouse-y: 0px !important;
}

body.elementor-editor-active #du-about-banner *,
body.elementor-editor-preview #du-about-banner *,
.elementor-editor-active #du-about-banner *,
.elementor-editor-preview #du-about-banner * {
  opacity: 1 !important;
  clip-path: none !important;
  animation-play-state: paused !important;
  transform: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  #du-about-banner,
  #du-about-banner *,
  #du-about-banner *::before,
  #du-about-banner *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  #du-about-banner {
    --duab-scroll-y: 0px !important;
    --duab-mouse-x: 0px !important;
    --duab-mouse-y: 0px !important;
  }

  #du-about-banner *,
  #du-about-banner *::before,
  #du-about-banner *::after {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ab79c7b */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap");

/* =========================================================
   DURA ULTIMA — OUR LEGACY TIMELINE
========================================================= */

#du-about-story,
#du-about-story * {
  box-sizing: border-box;
}

#du-about-story {
  --duleg-primary: #da252c;
  --duleg-hover: #b71e24;
  --duleg-dark: #111111;
  --duleg-secondary: #1a1a1a;
  --duleg-light: #f8f8f8;
  --duleg-white: #ffffff;
  --duleg-text: #5f5f5f;
  --duleg-border: #e6e6e6;

  --duleg-progress: 0;
  --duleg-marker-x: 0px;
  --duleg-bg-y: 0px;
  --duleg-pointer-x: 0px;
  --duleg-pointer-y: 0px;

  --duleg-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: 116px 0;
  background: var(--duleg-light);
  color: var(--duleg-secondary);
  font-family: "Inter", sans-serif;
}

#du-about-story a {
  color: inherit;
  text-decoration: none;
}

#du-about-story img,
#du-about-story svg {
  display: block;
}

.duleg__container {
  position: relative;
  z-index: 3;
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
}

/* =========================================================
   SECTION BACKGROUND
========================================================= */

.duleg__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.duleg__background::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 9% 18%,
      rgba(218, 37, 44, 0.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 91% 78%,
      rgba(17, 17, 17, 0.04),
      transparent 31%
    );
  content: "";
}

.duleg__grid {
  position: absolute;
  inset: -120px 0;
  opacity: 0.45;
  background-image:
    linear-gradient(
      rgba(17, 17, 17, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 17, 17, 0.035) 1px,
      transparent 1px
    );
  background-size: 90px 90px;
  transform:
    translate3d(
      var(--duleg-pointer-x),
      calc(var(--duleg-bg-y) + var(--duleg-pointer-y)),
      0
    );
  will-change: transform;
}

.duleg__glow {
  position: absolute;
  top: -180px;
  left: -180px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(218, 37, 44, 0.09),
    transparent 68%
  );
}

.duleg__watermark {
  position: absolute;
  right: -55px;
  bottom: 45px;
  color: rgba(17, 17, 17, 0.025);
  font-family: "Poppins", sans-serif;
  font-size: clamp(120px, 15vw, 235px);
  font-weight: 700;
  letter-spacing: -12px;
  line-height: 0.8;
  white-space: nowrap;
  transform: translateY(var(--duleg-bg-y));
}

.duleg__technical-line {
  position: absolute;
  width: 1px;
  height: 600px;
  background: linear-gradient(
    transparent,
    rgba(218, 37, 44, 0.35),
    transparent
  );
  transform: rotate(31deg);
}

.duleg__technical-line--one {
  top: -120px;
  left: 12%;
}

.duleg__technical-line--two {
  top: 10px;
  left: 17%;
  opacity: 0.35;
}

/* =========================================================
   INTRODUCTION
========================================================= */

.duleg__header {
  display: grid;
  grid-template-columns:
    minmax(520px, 1.22fr)
    minmax(360px, 0.78fr);
  align-items: end;
  gap: clamp(65px, 8vw, 130px);
}

.duleg__heading-wrap {
  min-width: 0;
}

.duleg__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 23px;
  overflow: hidden;
  color: var(--duleg-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.duleg__eyebrow-line {
  width: 44px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--duleg-primary);
}

.duleg__title {
  max-width: 870px;
  margin: 0;
  color: var(--duleg-secondary);
  font-family: "Poppins", sans-serif;
  font-size: clamp(52px, 5.5vw, 54px);
  font-weight: 700;
  letter-spacing: -4.6px;
  line-height: 0.98;
}

.duleg__title span,
.duleg__title strong {
  display: block;
  overflow: hidden;
}

.duleg__title strong {
  margin-top: 8px;
  color: var(--duleg-primary);
  font-weight: 700;
}

.duleg__introduction {
  max-width: 520px;
  padding: 7px 0 8px 30px;
  border-left: 2px solid var(--duleg-primary);
}

.duleg__introduction p {
  margin: 0;
  color: var(--duleg-text);
  font-size: 13px;
  line-height: 1.9;
}

/* =========================================================
   CONTACT BUTTON
========================================================= */

.duleg__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-width: 168px;
  min-height: 57px;
  margin-top: 31px;
  padding: 0 25px;
  overflow: hidden;
  border: 1px solid var(--duleg-primary);
  border-radius: 4px;
  background: var(--duleg-primary);
  color: var(--duleg-white) !important;
  font-size: 11px;
  font-weight: 600;
  transition:
    border-color 280ms ease,
    background-color 280ms ease,
    box-shadow 280ms ease,
    transform 280ms var(--duleg-ease);
}

.duleg__button::before {
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -55%;
  width: 34%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.25),
    transparent
  );
  content: "";
  transform: skewX(-20deg);
  transition: left 650ms var(--duleg-ease);
}

.duleg__button span,
.duleg__button svg {
  position: relative;
  z-index: 2;
}

.duleg__button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 300ms var(--duleg-ease);
}

.duleg__button:hover {
  border-color: var(--duleg-hover);
  background: var(--duleg-hover);
  box-shadow: 0 17px 38px rgba(218, 37, 44, 0.22);
  transform: translateY(-3px);
}

.duleg__button:hover::before {
  left: 125%;
}

.duleg__button:hover svg {
  transform: translateX(5px);
}

.duleg__button:focus-visible,
.duleg__card:focus-visible {
  outline: 2px solid var(--duleg-primary);
  outline-offset: 4px;
}

/* =========================================================
   TIMELINE STAGE
========================================================= */

.duleg__stage {
  position: relative;
  min-height: 535px;
  margin-top: 82px;
  padding: 78px 42px 68px;
  overflow: hidden;
  border-top: 5px solid var(--duleg-primary);
  border-right: 1px solid #2b2b2b;
  border-bottom: 1px solid #2b2b2b;
  border-left: 1px solid #2b2b2b;
  border-radius: 4px;
  background: var(--duleg-dark);
  box-shadow:
    0 38px 95px rgba(17, 17, 17, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.duleg__stage-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.duleg__stage-grid {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 54px 54px;
}

.duleg__stage-light {
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;
  width: 17%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  filter: blur(19px);
  transform: skewX(-18deg);
}

.duleg.is-in-view .duleg__stage-light {
  animation: dulegStageLight 9s ease-in-out infinite;
}

@keyframes dulegStageLight {
  0% {
    left: -30%;
    opacity: 0;
  }

  18% {
    opacity: 0.75;
  }

  72% {
    opacity: 0.2;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

.duleg__stage-label {
  position: absolute;
  top: 22px;
  left: 26px;
  color: rgba(255, 255, 255, 0.29);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* =========================================================
   TIMELINE TRACK
========================================================= */

.duleg__track {
  position: absolute;
  top: 51%;
  right: 7%;
  left: 7%;
  z-index: 1;
  height: 2px;
  transform: translateY(-50%);
}

.duleg__track-base,
.duleg__track-fill {
  position: absolute;
  inset: 0;
}

.duleg__track-base {
  background: rgba(255, 255, 255, 0.14);
}

.duleg__track-fill {
  background: var(--duleg-primary);
  box-shadow: 0 0 18px rgba(218, 37, 44, 0.45);
  transform: scaleX(var(--duleg-progress));
  transform-origin: left center;
  will-change: transform;
}

.duleg__track-marker {
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(218, 37, 44, 0.8);
  border-radius: 50%;
  background: var(--duleg-dark);
  transform:
    translate3d(
      var(--duleg-marker-x),
      -50%,
      0
    );
  will-change: transform;
}

.duleg__track-marker i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--duleg-primary);
  box-shadow:
    0 0 10px rgba(218, 37, 44, 0.95),
    0 0 24px rgba(218, 37, 44, 0.5);
}

.duleg.is-in-view .duleg__track-marker i {
  animation: dulegMarkerPulse 1.8s ease-in-out infinite;
}

@keyframes dulegMarkerPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* =========================================================
   CARDS
========================================================= */

.duleg__cards {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 27px;
}

.duleg__card {
  position: relative;
  min-width: 0;
  min-height: 310px;
  padding: 29px 27px 31px;
  overflow: hidden;
  border: 1px solid #dedede;
  border-radius: 3px;
  background: var(--duleg-white);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.17);
  transition:
    border-color 350ms ease,
    box-shadow 450ms ease,
    transform 500ms var(--duleg-ease);
}

.duleg__card--two {
  margin-top: 64px;
}

.duleg__card:hover {
  z-index: 5;
  border-color: rgba(218, 37, 44, 0.58);
  box-shadow: 0 32px 66px rgba(0, 0, 0, 0.26);
  transform: translateY(-10px);
}

.duleg__card--two:hover {
  transform: translateY(-10px);
}

.duleg__card::before {
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image:
    linear-gradient(
      rgba(17, 17, 17, 0.028) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 17, 17, 0.028) 1px,
      transparent 1px
    );
  background-size: 34px 34px;
  content: "";
  pointer-events: none;
}

.duleg__card-index {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 25px;
  color: var(--duleg-primary);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.duleg__card-icon {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 57px;
  margin-bottom: 25px;
  border: 1px solid rgba(218, 37, 44, 0.45);
  background: rgba(218, 37, 44, 0.055);
  color: var(--duleg-primary);
  transition:
    color 350ms ease,
    border-color 350ms ease,
    background-color 350ms ease,
    transform 450ms var(--duleg-ease);
}

.duleg__card:hover .duleg__card-icon {
  border-color: var(--duleg-primary);
  background: var(--duleg-primary);
  color: var(--duleg-white);
  transform: translateY(-4px) rotate(-3deg);
}

.duleg__card-icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.duleg__card-icon path,
.duleg__card-icon circle {
  stroke-dasharray: 140;
  stroke-dashoffset: 0;
}

.duleg__card-content {
  position: relative;
  z-index: 2;
}

.duleg__card-label {
  display: block;
  margin-bottom: 9px;
  color: #9b9b9b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}

.duleg__card-content h3 {
  margin: 0;
  color: var(--duleg-secondary);
  font-family: "Poppins", sans-serif;
  font-size: clamp(21px, 1.7vw, 38px);
  font-weight: 600;
  letter-spacing: -0.9px;
  line-height: 1.18;
  transition:
    color 300ms ease,
    transform 400ms var(--duleg-ease);
}

.duleg__card:hover .duleg__card-content h3 {
  color: var(--duleg-primary);
  transform: translateX(5px);
}

.duleg__card-content p {
  margin: 15px 0 0;
  color: var(--duleg-text);
  font-size: 14px;
  line-height: 1.75;
}

.duleg__card-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
}

.duleg__card-corner::before {
  position: absolute;
  top: -28px;
  right: -28px;
  width: 56px;
  height: 56px;
  background: var(--duleg-primary);
  content: "";
  transform: rotate(45deg);
  transition:
    width 450ms var(--duleg-ease),
    height 450ms var(--duleg-ease);
}

.duleg__card:hover .duleg__card-corner::before {
  width: 72px;
  height: 72px;
}

.duleg__card-line {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--duleg-primary);
  transition: right 550ms var(--duleg-ease);
}

.duleg__card:hover .duleg__card-line {
  right: 0;
}

/* =========================================================
   STAGE FOOTER
========================================================= */

.duleg__stage-footer {
  position: absolute;
  right: 42px;
  bottom: 20px;
  left: 42px;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
}

.duleg__stage-footer span {
  color: rgba(255, 255, 255, 0.29);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.15px;
  text-align: center;
  text-transform: uppercase;
}

.duleg__stage-footer span:not(:last-child) {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__eyebrow {
  clip-path: inset(0 100% 0 0);
  transform: translateX(35px);
}

.duleg.duleg--motion-ready.is-entered
  .duleg__eyebrow {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 720ms var(--duleg-ease) 90ms,
    transform 720ms var(--duleg-ease) 90ms;
}

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__eyebrow-line {
  width: 0;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__eyebrow-line {
  width: 44px;
  transition: width 600ms var(--duleg-ease) 360ms;
}

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__title span,
.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__title strong {
  clip-path: inset(100% 0 0 0);
  transform: translateY(75px);
}

.duleg.duleg--motion-ready.is-entered
  .duleg__title span,
.duleg.duleg--motion-ready.is-entered
  .duleg__title strong {
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    clip-path 1s var(--duleg-ease),
    transform 1s var(--duleg-ease);
}

.duleg.duleg--motion-ready.is-entered
  .duleg__title span:nth-child(1) {
  transition-delay: 180ms;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__title span:nth-child(2) {
  transition-delay: 300ms;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__title strong {
  transition-delay: 420ms;
}

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__introduction {
  clip-path: inset(0 0 0 100%);
  transform: translateX(45px);
}

.duleg.duleg--motion-ready.is-entered
  .duleg__introduction {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 900ms var(--duleg-ease) 400ms,
    transform 900ms var(--duleg-ease) 400ms;
}

/* Stage reveal */

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__stage {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-55px);
  box-shadow: none;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__stage {
  clip-path: inset(0);
  transform: translateX(0);
  box-shadow:
    0 38px 95px rgba(17, 17, 17, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
  transition:
    clip-path 1.2s var(--duleg-ease) 540ms,
    transform 1.2s var(--duleg-ease) 540ms,
    box-shadow 800ms ease 900ms;
}

/* Card stagger */

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__card {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(65px) scale(0.96);
}

.duleg.duleg--motion-ready.is-entered
  .duleg__card {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0) scale(1);
  transition:
    opacity 550ms ease,
    clip-path 950ms var(--duleg-ease),
    transform 950ms var(--duleg-ease),
    border-color 350ms ease,
    box-shadow 450ms ease;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__card--one {
  transition-delay: 790ms;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__card--two {
  transform: translateY(64px) scale(1);
  transition-delay: 930ms;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__card--three {
  transition-delay: 1070ms;
}

/* Preserve second-card offset on hover */

.duleg.duleg--motion-ready.is-entered
  .duleg__card--two:hover {
  transform: translateY(54px);
}

/* Icon drawing */

.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__card-icon path,
.duleg.duleg--motion-ready:not(.is-entered)
  .duleg__card-icon circle {
  stroke-dashoffset: 140;
}

.duleg.duleg--motion-ready.is-entered
  .duleg__card-icon path,
.duleg.duleg--motion-ready.is-entered
  .duleg__card-icon circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.35s ease 1.1s;
}

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

@media (max-width: 1024px) {
  #du-about-story {
    padding: 96px 0;
  }

  .duleg__container {
    width: min(100% - 40px, 920px);
  }

  .duleg__header {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .duleg__title {
    max-width: 850px;
    font-size: clamp(54px, 8vw, 78px);
  }

  .duleg__introduction {
    max-width: 700px;
  }

  .duleg__stage {
    min-height: auto;
    padding: 66px 28px 68px;
  }

  .duleg__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
  }

  .duleg__card {
    min-height: 330px;
    padding: 25px 19px 27px;
  }

  .duleg__card--two {
    margin-top: 45px;
  }

  .duleg.duleg--motion-ready.is-entered
    .duleg__card--two {
    transform: translateY(45px);
  }

  .duleg.duleg--motion-ready.is-entered
    .duleg__card--two:hover {
    transform: translateY(37px);
  }

  .duleg__card-content h3 {
    font-size: 20px;
  }

  .duleg__card-content p {
    font-size: 10px;
  }
}

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

@media (max-width: 767px) {
  #du-about-story {
    padding: 76px 0;
  }

  .duleg__container {
    width: min(100% - 34px, 680px);
  }

  .duleg__watermark {
    display: none;
  }

  .duleg__title {
    font-size: clamp(43px, 12vw, 61px);
    letter-spacing: -3px;
  }

  .duleg__introduction {
    padding-left: 19px;
  }

  .duleg__introduction p {
    font-size: 12px;
  }

  .duleg__button {
    width: 100%;
    justify-content: space-between;
  }

  .duleg__stage {
    margin-top: 58px;
    padding: 58px 15px 58px;
  }

  .duleg__track {
    top: 70px;
    right: auto;
    bottom: 70px;
    left: 34px;
    width: 2px;
    height: auto;
    transform: none;
  }

  .duleg__track-fill {
    transform:
      scaleY(var(--duleg-progress));
    transform-origin: top center;
  }

  .duleg__track-marker {
    top: 0;
    left: 50%;
    transform:
      translate3d(
        -50%,
        var(--duleg-marker-x),
        0
      );
  }

  .duleg__cards {
    grid-template-columns: 1fr;
    gap: 19px;
    padding-left: 39px;
  }

  .duleg__card,
  .duleg__card--two {
    min-height: auto;
    margin-top: 0;
    padding: 25px 22px 27px;
  }

  .duleg__card:hover {
    transform: translateY(-5px);
  }

  .duleg.duleg--motion-ready.is-entered
    .duleg__card--two {
    transform: translateY(0);
  }

  .duleg.duleg--motion-ready.is-entered
    .duleg__card--two:hover {
    transform: translateY(-5px);
  }

  .duleg__card-icon {
    width: 52px;
    height: 52px;
  }

  .duleg__stage-footer {
    display: none;
  }
}

@media (max-width: 430px) {
  .duleg__title {
    font-size: 41px;
  }

  .duleg__stage {
    padding-right: 11px;
    padding-left: 11px;
  }

  .duleg__track {
    left: 25px;
  }

  .duleg__cards {
    padding-left: 29px;
  }

  .duleg__card {
    padding: 23px 18px 25px;
  }
}

/* =========================================================
   ELEMENTOR EDITOR SAFETY
========================================================= */

body.elementor-editor-active #du-about-story,
body.elementor-editor-preview #du-about-story,
.elementor-editor-active #du-about-story,
.elementor-editor-preview #du-about-story {
  --duleg-progress: 1 !important;
  --duleg-bg-y: 0px !important;
  --duleg-pointer-x: 0px !important;
  --duleg-pointer-y: 0px !important;
}

body.elementor-editor-active #du-about-story *,
body.elementor-editor-preview #du-about-story *,
.elementor-editor-active #du-about-story *,
.elementor-editor-preview #du-about-story * {
  opacity: 1 !important;
  clip-path: none !important;
  animation-play-state: paused !important;
}

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

@media (prefers-reduced-motion: reduce) {
  #du-about-story,
  #du-about-story *,
  #du-about-story *::before,
  #du-about-story *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #du-about-story {
    --duleg-progress: 1 !important;
    --duleg-bg-y: 0px !important;
    --duleg-pointer-x: 0px !important;
    --duleg-pointer-y: 0px !important;
  }

  #du-about-story *,
  #du-about-story *::before,
  #du-about-story *::after {
    opacity: 1 !important;
    clip-path: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-17f9f64 */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap");

/* =========================================================
   DURA ULTIMA — BRAND EMOTION SECTION
========================================================= */

#du-brand-emotion,
#du-brand-emotion * {
  box-sizing: border-box;
}

#du-brand-emotion {
  --duemotion-primary: #da252c;
  --duemotion-hover: #b71e24;
  --duemotion-dark: #111111;
  --duemotion-secondary: #1a1a1a;
  --duemotion-light: #f8f8f8;
  --duemotion-white: #ffffff;
  --duemotion-text: #5f5f5f;
  --duemotion-border: rgba(255, 255, 255, 0.13);

  --duemotion-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --duemotion-scroll-y: 0px;
  --duemotion-pointer-x: 0px;
  --duemotion-pointer-y: 0px;

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: 118px 0 105px;
  background: var(--duemotion-dark);
  color: var(--duemotion-white);
  font-family: "Inter", sans-serif;
}

#du-brand-emotion img,
#du-brand-emotion svg {
  display: block;
}

.duemotion__container {
  position: relative;
  z-index: 3;
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
}

/* =========================================================
   BACKGROUND
========================================================= */

.duemotion__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.duemotion__background::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 14% 36%,
      rgba(218, 37, 44, 0.14),
      transparent 30%
    ),
    radial-gradient(
      circle at 89% 76%,
      rgba(255, 255, 255, 0.035),
      transparent 30%
    );
  content: "";
}

.duemotion__grid {
  position: absolute;
  inset: -120px 0;
  opacity: 0.23;
  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px
    );
  background-size: 90px 90px;
  transform:
    translate3d(
      var(--duemotion-pointer-x),
      calc(
        var(--duemotion-scroll-y) +
        var(--duemotion-pointer-y)
      ),
      0
    );
  will-change: transform;
}

.duemotion__slats {
  position: absolute;
  top: 0;
  right: 0;
  width: 43%;
  height: 100%;
  opacity: 0.14;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 18px,
      rgba(255, 255, 255, 0.06) 18px,
      rgba(255, 255, 255, 0.06) 20px
    );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 46%,
    #000
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 46%,
    #000
  );
  transform: translateY(
    calc(var(--duemotion-scroll-y) * -0.35)
  );
}

.duemotion__glow {
  position: absolute;
  top: -180px;
  left: -190px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(218, 37, 44, 0.12),
    transparent 69%
  );
}

.duemotion__beam {
  position: absolute;
  top: -45%;
  bottom: -45%;
  left: -30%;
  width: 17%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );
  filter: blur(19px);
  transform: skewX(-18deg);
}

.duemotion.is-in-view .duemotion__beam {
  animation: duemotionBeam 10s ease-in-out infinite;
}

@keyframes duemotionBeam {
  0% {
    left: -30%;
    opacity: 0;
  }

  18% {
    opacity: 0.75;
  }

  72% {
    opacity: 0.2;
  }

  100% {
    left: 115%;
    opacity: 0;
  }
}

.duemotion__watermark {
  position: absolute;
  right: -70px;
  bottom: 42px;
  color: rgba(255, 255, 255, 0.022);
  font-family: "Poppins", sans-serif;
  font-size: clamp(125px, 15vw, 235px);
  font-weight: 700;
  letter-spacing: -13px;
  line-height: 0.78;
  white-space: nowrap;
  transform: translateY(var(--duemotion-scroll-y));
}

.duemotion__line {
  position: absolute;
  width: 1px;
  height: 630px;
  background: linear-gradient(
    transparent,
    rgba(218, 37, 44, 0.5),
    transparent
  );
  transform: rotate(31deg);
}

.duemotion__line--one {
  top: -120px;
  left: 10%;
}

.duemotion__line--two {
  top: 10px;
  left: 15%;
  opacity: 0.36;
}

/* =========================================================
   HEADER
========================================================= */

.duemotion__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 72px;
}

.duemotion__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 23px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.1px;
  text-transform: uppercase;
}

.duemotion__eyebrow-index {
  color: var(--duemotion-primary);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.duemotion__eyebrow-line {
  width: 45px;
  height: 1px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.42);
}

.duemotion__title {
  max-width: 1220px;
  margin: 0;
  color: var(--duemotion-white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(57px, 6.7vw, 102px);
  font-weight: 700;
  letter-spacing: -5.8px;
  line-height: 0.96;
}

.duemotion__title span,
.duemotion__title strong {
  display: block;
  overflow: hidden;
}

.duemotion__title strong {
  margin-top: 8px;
  color: var(--duemotion-primary);
  font-weight: 700;
}

/* =========================================================
   MAIN LAYOUT
========================================================= */

.duemotion__layout {
  display: grid;
  grid-template-columns:
    minmax(600px, 1.16fr)
    minmax(430px, 0.84fr);
  align-items: center;
  gap: clamp(65px, 7vw, 112px);
}

/* =========================================================
   IMAGE COMPOSITION
========================================================= */

.duemotion__media {
  position: relative;
  min-width: 0;
  min-height: 650px;
  perspective: 1500px;
  transform:
    translate3d(
      calc(var(--duemotion-pointer-x) * 0.28),
      calc(var(--duemotion-pointer-y) * 0.28),
      0
    );
  transition: transform 250ms ease-out;
}

.duemotion__image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: #191919;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition:
    border-color 350ms ease,
    box-shadow 450ms ease,
    transform 600ms var(--duemotion-ease);
}

.duchoice--main {
  top: 42px;
  right: 7%;
  bottom: 38px;
  left: 16%;
  z-index: 2;
}

.duchoice--secondary {
  top: 0;
  left: 0;
  z-index: 4;
  width: 36%;
  height: 265px;
}

.duchoice--tertiary {
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 39%;
  height: 255px;
}

.duemotion__image-mask {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.duemotion__image img {
  width: calc(100% + 36px);
  height: calc(100% + 36px);
  margin: -18px;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.84) contrast(1.07) brightness(0.8);
  transform:
    translate3d(
      calc(var(--duemotion-pointer-x) * -0.55),
      calc(
        var(--duemotion-pointer-y) * -0.55 +
        var(--duemotion-scroll-y) * 0.22
      ),
      0
    )
    scale(1.05);
  transition:
    filter 500ms ease,
    transform 300ms ease-out;
  will-change: transform;
}

.duchoice--secondary img {
  object-position: center 42%;
}

.duchoice--tertiary img {
  object-position: center;
}

.duemotion__image:hover {
  z-index: 8;
  border-color: rgba(218, 37, 44, 0.7);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.58);
  transform: translateY(-8px);
}

.duemotion__image:hover img {
  filter: saturate(1) contrast(1.04) brightness(0.92);
  transform:
    translate3d(
      calc(var(--duemotion-pointer-x) * -0.55),
      calc(
        var(--duemotion-pointer-y) * -0.55 +
        var(--duemotion-scroll-y) * 0.22
      ),
      0
    )
    scale(1.09);
}

.duemotion__image-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 17, 0.06),
      transparent 53%,
      rgba(17, 17, 17, 0.65)
    );
}

.duemotion__image-number {
  position: absolute;
  top: 16px;
  left: 17px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(17, 17, 17, 0.48);
  color: var(--duemotion-white);
  font-family: "Poppins", sans-serif;
  font-size: 10px;
  font-weight: 600;
}

/* Technical Corners */

.duemotion__corner {
  position: absolute;
  z-index: 5;
  width: 48px;
  height: 48px;
  pointer-events: none;
}

.duemotion__corner--tl {
  top: 22px;
  left: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.72);
  border-left: 1px solid rgba(255, 255, 255, 0.72);
}

.duemotion__corner--br {
  right: 22px;
  bottom: 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.72);
}

/* Interface */

.duemotion__media-interface {
  position: absolute;
  right: 13%;
  bottom: 63px;
  left: 23%;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 19px;
  border-left: 4px solid var(--duemotion-primary);
  background: rgba(17, 17, 17, 0.91);
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.38);
}

.duemotion__interface-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.duemotion__interface-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--duemotion-primary);
  box-shadow: 0 0 12px rgba(218, 37, 44, 0.82);
}

.duemotion.is-in-view .duemotion__interface-status i {
  animation: duemotionStatus 2s ease-in-out infinite;
}

@keyframes duemotionStatus {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Scan */

.duemotion__media-scan {
  position: absolute;
  top: 35px;
  bottom: 35px;
  left: -10%;
  z-index: 6;
  width: 1px;
  opacity: 0;
  background: var(--duemotion-primary);
  box-shadow:
    0 0 15px rgba(218, 37, 44, 0.85),
    0 0 42px rgba(218, 37, 44, 0.34);
}

.duemotion.is-in-view .duemotion__media-scan {
  animation: duemotionScan 7s ease-in-out infinite;
}

@keyframes duemotionScan {
  0%,
  16% {
    left: -10%;
    opacity: 0;
  }

  27% {
    opacity: 0.72;
  }

  74% {
    opacity: 0.3;
  }

  89%,
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* =========================================================
   STORY CONTENT
========================================================= */

.duemotion__content {
  min-width: 0;
}

.duemotion__story {
  padding-left: 27px;
  border-left: 2px solid var(--duemotion-primary);
}

.duemotion__story p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
  line-height: 1.9;
}

.duemotion__story p + p {
  margin-top: 18px;
}

/* =========================================================
   VISION AND COMMITMENT
========================================================= */

.duemotion__principles {
  display: grid;
  gap: 0;
  margin-top: 43px;
  border-top: 1px solid var(--duemotion-border);
}

.duemotion__principle {
  position: relative;
  padding: 27px 7px 29px;
  overflow: hidden;
  border-bottom: 1px solid var(--duemotion-border);
  transition:
    padding-left 450ms var(--duemotion-ease),
    background-color 350ms ease;
}

.duemotion__principle::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--duemotion-primary);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 450ms var(--duemotion-ease);
}

.duemotion__principle:hover {
  padding-left: 20px;
  background: rgba(255, 255, 255, 0.025);
}

.duemotion__principle:hover::before {
  transform: scaleY(1);
}

.duemotion__principle-head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.duemotion__principle-head span {
  color: var(--duemotion-primary);
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.duemotion__principle-head h3 {
  margin: 0;
  color: var(--duemotion-white);
  font-family: "Poppins", sans-serif;
  font-size: clamp(20px, 1.7vw, 27px);
  font-weight: 600;
  letter-spacing: -0.75px;
}

.duemotion__principle p {
  margin: 11px 0 0 34px;
  color: rgba(255, 255, 255, 0.44);
  font-size: 14px;
  line-height: 1.75;
}

.duemotion__principle-line {
  position: absolute;
  right: 100%;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--duemotion-primary);
  transition: right 650ms var(--duemotion-ease);
}

.duemotion__principle:hover .duemotion__principle-line {
  right: 0;
}

/* =========================================================
   CLOSING STATEMENT
========================================================= */

.duemotion__closing {
  position: relative;
  margin-top: 41px;
  padding: 27px 27px 29px;
  overflow: hidden;
  border: 1px solid var(--duemotion-border);
  background:
    linear-gradient(
      115deg,
      rgba(218, 37, 44, 0.1),
      transparent 48%
    ),
    rgba(255, 255, 255, 0.025);
}

.duemotion__closing-label {
  display: block;
  margin-bottom: 12px;
  color: var(--duemotion-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.duemotion__closing p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.85;
}

.duemotion__closing-accent {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34%;
  height: 4px;
  background: var(--duemotion-primary);
}

/* =========================================================
   BOTTOM RAIL
========================================================= */

.duemotion__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 84px;
  border-top: 1px solid var(--duemotion-border);
  border-bottom: 1px solid var(--duemotion-border);
}

.duemotion__rail span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 61px;
  padding: 10px;
  color: rgba(255, 255, 255, 0.31);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.15px;
  text-align: center;
  text-transform: uppercase;
}

.duemotion__rail span:not(:last-child) {
  border-right: 1px solid var(--duemotion-border);
}

/* =========================================================
   ENTRANCE ANIMATIONS
========================================================= */

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__eyebrow {
  clip-path: inset(0 100% 0 0);
  transform: translateX(38px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__eyebrow {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 750ms var(--duemotion-ease) 80ms,
    transform 750ms var(--duemotion-ease) 80ms;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__eyebrow-line {
  width: 0;
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__eyebrow-line {
  width: 45px;
  transition: width 600ms var(--duemotion-ease) 350ms;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__title span,
.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__title strong {
  clip-path: inset(100% 0 0 0);
  transform: translateY(80px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__title span,
.duemotion.duemotion--motion-ready.is-entered
  .duemotion__title strong {
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    clip-path 1.05s var(--duemotion-ease),
    transform 1.05s var(--duemotion-ease);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__title span {
  transition-delay: 180ms;
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__title strong {
  transition-delay: 330ms;
}

/* Image reveals */

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duchoice--main {
  clip-path: polygon(
    100% 0,
    100% 0,
    100% 100%,
    100% 100%
  );
  transform: translateX(60px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duchoice--main {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%
  );
  transform: translateX(0);
  transition:
    clip-path 1.15s var(--duemotion-ease) 480ms,
    transform 1.15s var(--duemotion-ease) 480ms,
    border-color 350ms ease,
    box-shadow 450ms ease;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duchoice--secondary {
  clip-path: inset(100% 0 0 0);
  transform: translateY(45px) scale(0.94);
}

.duemotion.duemotion--motion-ready.is-entered
  .duchoice--secondary {
  clip-path: inset(0);
  transform: translateY(0) scale(1);
  transition:
    clip-path 950ms var(--duemotion-ease) 690ms,
    transform 950ms var(--duemotion-ease) 690ms,
    border-color 350ms ease,
    box-shadow 450ms ease;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duchoice--tertiary {
  clip-path: inset(0 0 100% 0);
  transform: translateY(-45px) scale(0.94);
}

.duemotion.duemotion--motion-ready.is-entered
  .duchoice--tertiary {
  clip-path: inset(0);
  transform: translateY(0) scale(1);
  transition:
    clip-path 950ms var(--duemotion-ease) 840ms,
    transform 950ms var(--duemotion-ease) 840ms,
    border-color 350ms ease,
    box-shadow 450ms ease;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__media-interface {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-35px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__media-interface {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 850ms var(--duemotion-ease) 960ms,
    transform 850ms var(--duemotion-ease) 960ms;
}

/* Content reveal */

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__story {
  clip-path: inset(0 100% 0 0);
  transform: translateX(44px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__story {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 900ms var(--duemotion-ease) 570ms,
    transform 900ms var(--duemotion-ease) 570ms;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__principle {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(35px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__principle {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    opacity 500ms ease,
    clip-path 850ms var(--duemotion-ease),
    transform 850ms var(--duemotion-ease),
    padding-left 450ms var(--duemotion-ease),
    background-color 350ms ease;
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__principle:nth-child(1) {
  transition-delay: 760ms;
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__principle:nth-child(2) {
  transition-delay: 900ms;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__closing {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(35px);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__closing {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    opacity 550ms ease 1040ms,
    clip-path 900ms var(--duemotion-ease) 1040ms,
    transform 900ms var(--duemotion-ease) 1040ms;
}

.duemotion.duemotion--motion-ready:not(.is-entered)
  .duemotion__rail {
  clip-path: inset(0 50% 0 50%);
}

.duemotion.duemotion--motion-ready.is-entered
  .duemotion__rail {
  clip-path: inset(0);
  transition: clip-path 1s var(--duemotion-ease) 1150ms;
}

/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1250px) {
  .duemotion__layout {
    grid-template-columns:
      minmax(530px, 1.05fr)
      minmax(400px, 0.95fr);
    gap: 58px;
  }

  .duemotion__media {
    min-height: 610px;
  }

  .duchoice--secondary {
    height: 235px;
  }

  .duchoice--tertiary {
    height: 225px;
  }
}

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

@media (max-width: 1024px) {
  #du-brand-emotion {
    padding: 96px 0 90px;
  }

  .duemotion__container {
    width: min(100% - 40px, 920px);
  }

  .duemotion__header {
    margin-bottom: 58px;
  }

  .duemotion__title {
    font-size: clamp(57px, 9vw, 85px);
  }

  .duemotion__layout {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .duemotion__media {
    min-height: 640px;
    transform: none;
  }

  .duemotion__content {
    max-width: 820px;
  }

  .duemotion__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .duemotion__rail span:nth-child(3) {
    border-right: 0;
  }

  .duemotion__rail span:nth-child(-n + 3) {
    border-bottom: 1px solid var(--duemotion-border);
  }
}

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

@media (max-width: 767px) {
  #du-brand-emotion {
    padding: 76px 0 72px;
  }

  .duemotion__container {
    width: min(100% - 34px, 680px);
  }

  .duemotion__watermark {
    display: none;
  }

  .duemotion__header {
    margin-bottom: 45px;
  }

  .duemotion__title {
    font-size: clamp(45px, 13vw, 64px);
    letter-spacing: -3.5px;
  }

  .duemotion__layout {
    gap: 52px;
  }

  .duemotion__media {
    min-height: 530px;
  }

  .duchoice--main {
    top: 60px;
    right: 0;
    bottom: 62px;
    left: 11%;
  }

  .duchoice--secondary {
    width: 44%;
    height: 190px;
  }

  .duchoice--tertiary {
    width: 46%;
    height: 182px;
  }

  .duemotion__media-interface {
    right: 7%;
    bottom: 78px;
    left: 17%;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .duemotion__story {
    padding-left: 18px;
  }

  .duemotion__story p {
    font-size: 12px;
  }

  .duemotion__principle {
    padding-right: 4px;
  }

  .duemotion__principle p {
    margin-left: 0;
    font-size: 10px;
  }

  .duemotion__closing {
    padding: 23px 20px 25px;
  }

  .duemotion__closing p {
    font-size: 11px;
  }

  .duemotion__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 60px;
  }

  .duemotion__rail span {
    border-right: 1px solid var(--duemotion-border) !important;
    border-bottom: 1px solid var(--duemotion-border);
  }

  .duemotion__rail span:nth-child(even) {
    border-right: 0 !important;
  }

  .duemotion__rail span:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (max-width: 430px) {
  .duemotion__title {
    font-size: 42px;
  }

  .duemotion__media {
    min-height: 470px;
  }

  .duchoice--secondary {
    width: 47%;
    height: 165px;
  }

  .duchoice--tertiary {
    width: 49%;
    height: 160px;
  }

  .duemotion__media-interface {
    display: none;
  }

  .duemotion__image-number {
    width: 32px;
    height: 32px;
  }
}

/* =========================================================
   ELEMENTOR EDITOR SAFETY
========================================================= */

body.elementor-editor-active #du-brand-emotion,
body.elementor-editor-preview #du-brand-emotion,
.elementor-editor-active #du-brand-emotion,
.elementor-editor-preview #du-brand-emotion {
  --duemotion-scroll-y: 0px !important;
  --duemotion-pointer-x: 0px !important;
  --duemotion-pointer-y: 0px !important;
}

body.elementor-editor-active #du-brand-emotion *,
body.elementor-editor-preview #du-brand-emotion *,
.elementor-editor-active #du-brand-emotion *,
.elementor-editor-preview #du-brand-emotion * {
  opacity: 1 !important;
  clip-path: none !important;
  animation-play-state: paused !important;
}

body.elementor-editor-active
  #du-brand-emotion
  .duemotion__media,
body.elementor-editor-preview
  #du-brand-emotion
  .duemotion__media {
  transform: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  #du-brand-emotion,
  #du-brand-emotion *,
  #du-brand-emotion *::before,
  #du-brand-emotion *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #du-brand-emotion {
    --duemotion-scroll-y: 0px !important;
    --duemotion-pointer-x: 0px !important;
    --duemotion-pointer-y: 0px !important;
  }

  #du-brand-emotion *,
  #du-brand-emotion *::before,
  #du-brand-emotion *::after {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f8a10d1 */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap");

/* =========================================================
   DURA ULTIMA — PREMIUM CLIENT CAROUSEL
========================================================= */

#du-client-wall,
#du-client-wall * {
  box-sizing: border-box;
}

#du-client-wall {
  --ducl-primary: #da252c;
  --ducl-hover: #b71e24;
  --ducl-dark: #111111;
  --ducl-secondary: #1a1a1a;
  --ducl-light: #f8f8f8;
  --ducl-white: #ffffff;
  --ducl-text: #5f5f5f;
  --ducl-border: #e6e6e6;

  --ducl-gap: 16px;
  --ducl-visible: 5;
  --ducl-bg-y: 0px;
  --ducl-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: hidden;
  padding: 108px 0;
  background: var(--ducl-light);
  color: var(--ducl-secondary);
  font-family: "Inter", sans-serif;
}

#du-client-wall img,
#du-client-wall svg {
  display: block;
}

.ducl__container {
  position: relative;
  z-index: 3;
  width: min(100% - 48px, 1500px);
  margin: 0 auto;
}

/* =========================================================
   BACKGROUND
========================================================= */

.ducl__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ducl__background::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 14% 26%,
      rgba(218, 37, 44, 0.055),
      transparent 29%
    ),
    radial-gradient(
      circle at 88% 78%,
      rgba(17, 17, 17, 0.035),
      transparent 30%
    );
  content: "";
}

.ducl__grid {
  position: absolute;
  inset: -100px 0;
  opacity: 0.46;
  background-image:
    linear-gradient(
      rgba(17, 17, 17, 0.035) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 17, 17, 0.035) 1px,
      transparent 1px
    );
  background-size: 92px 92px;
  transform: translateY(var(--ducl-bg-y));
  will-change: transform;
}

.ducl__glow {
  position: absolute;
  top: 5%;
  right: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(218, 37, 44, 0.07),
    transparent 68%
  );
}

.ducl__watermark {
  position: absolute;
  top: 105px;
  right: -30px;
  color: rgba(17, 17, 17, 0.025);
  font-family: "Poppins", sans-serif;
  font-size: clamp(115px, 15vw, 225px);
  font-weight: 700;
  letter-spacing: -11px;
  line-height: 0.8;
  white-space: nowrap;
  transform: translateY(var(--ducl-bg-y));
}

.ducl__line {
  position: absolute;
  width: 1px;
  height: 520px;
  background: linear-gradient(
    transparent,
    rgba(218, 37, 44, 0.32),
    transparent
  );
  transform: rotate(32deg);
}

.ducl__line--one {
  top: -10px;
  left: 10%;
}

.ducl__line--two {
  top: 90px;
  left: 15%;
  opacity: 0.4;
}

/* =========================================================
   TOPLINE
========================================================= */

.ducl__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 58px;
  padding-bottom: 21px;
  overflow: hidden;
  border-bottom: 1px solid var(--ducl-border);
}

.ducl__section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #777777;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.9px;
  text-transform: uppercase;
}

.ducl__section-number {
  color: var(--ducl-primary);
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.ducl__section-rule {
  width: 42px;
  height: 1px;
  flex: 0 0 auto;
  background: #a0a0a0;
}

.ducl__topline p {
  max-width: 570px;
  margin: 0;
  color: #7b7b7b;
  font-size: 11px;
  line-height: 1.7;
  text-align: right;
}

/* =========================================================
   HEADER
========================================================= */

.ducl__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 52px;
}

.ducl__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 19px;
  color: var(--ducl-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.ducl__eyebrow-line {
  width: 40px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--ducl-primary);
}

.ducl__heading h2 {
  margin: 0;
  color: var(--ducl-secondary);
  font-family: "Poppins", sans-serif;
  font-size: clamp(54px, 6vw, 90px);
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 0.98;
}

.ducl__heading h2 strong {
  display: block;
  color: var(--ducl-primary);
  font-weight: 700;
}

.ducl__header-side {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 8px 0 8px 27px;
  border-left: 1px solid #cccccc;
}

.ducl__header-side p {
  max-width: 390px;
  margin: 0;
  color: var(--ducl-text);
  font-size: 12px;
  line-height: 1.8;
}

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

.ducl__controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

#du-client-wall .ducl__control {
  all: unset !important;

  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1px solid #cfcfcf !important;
  border-radius: 0 !important;

  background: var(--ducl-white) !important;
  color: var(--ducl-secondary) !important;
  box-shadow: none !important;

  cursor: pointer !important;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    background-color 280ms ease,
    transform 280ms var(--ducl-ease) !important;
}

#du-client-wall .ducl__control:hover {
  border-color: var(--ducl-primary) !important;
  background: var(--ducl-primary) !important;
  color: var(--ducl-white) !important;
  transform: translateY(-2px);
}

#du-client-wall .ducl__control:focus-visible {
  outline: 2px solid var(--ducl-primary) !important;
  outline-offset: 3px !important;
}

.ducl__control svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ducl__play-icon {
  display: none !important;
}

.ducl__control.is-paused .ducl__pause-icon {
  display: none !important;
}

.ducl__control.is-paused .ducl__play-icon {
  display: block !important;
}

/* =========================================================
   CAROUSEL
========================================================= */

.ducl__carousel {
  position: relative;
  padding: 25px 25px 22px;
  overflow: hidden;
  border-top: 4px solid var(--ducl-primary);
  border-right: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 28px 70px rgba(17, 17, 17, 0.1);
}

.ducl__carousel::before {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(
      rgba(17, 17, 17, 0.032) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(17, 17, 17, 0.032) 1px,
      transparent 1px
    );
  background-size: 46px 46px;
  content: "";
  pointer-events: none;
}

/* =========================================================
   VIEWPORT
========================================================= */

.ducl__viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ducl__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.ducl__viewport:focus-visible {
  outline: 2px solid var(--ducl-primary);
  outline-offset: 4px;
}

/* =========================================================
   TRACK
========================================================= */

.ducl__track {
  display: flex;
  align-items: stretch;
  gap: var(--ducl-gap);
  width: max-content;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* =========================================================
   LOGO CARD — FIVE VISIBLE
========================================================= */

.ducl__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  width: calc(
    (
      min(100vw - 98px, 1450px) -
      (var(--ducl-gap) * 4)
    ) / 5
  );

  min-width: calc(
    (
      min(100vw - 98px, 1450px) -
      (var(--ducl-gap) * 4)
    ) / 5
  );

  height: 174px;
  padding: 28px 23px;
  overflow: hidden;

  border: 1px solid #e0e0e0;
  background: var(--ducl-white);

  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.055);

  transition:
    border-color 350ms ease,
    box-shadow 400ms ease,
    transform 450ms var(--ducl-ease);
}

.ducl__item::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--ducl-primary);
  content: "";
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 450ms var(--ducl-ease);
}

.ducl__item::after {
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--ducl-primary);
  content: "";
  transition: right 500ms var(--ducl-ease);
}

.ducl__item:hover {
  z-index: 3;
  border-color: rgba(218, 37, 44, 0.42);
  box-shadow: 0 22px 48px rgba(17, 17, 17, 0.12);
  transform: translateY(-6px);
}

.ducl__item:hover::before {
  transform: scaleY(1);
}

.ducl__item:hover::after {
  right: 0;
}

.ducl__item img {
  width: auto;
  max-width: 84%;
  height: auto;
  max-height: 92px;
  object-fit: contain;
  object-position: center;

  opacity: 0.82;
  filter: saturate(0.9);

  transform: scale(0.96);

  transition:
    opacity 350ms ease,
    filter 350ms ease,
    transform 450ms var(--ducl-ease);
}

.ducl__item:hover img {
  opacity: 1;
  filter: saturate(1);
  transform: scale(1);
}

.ducl__item.is-clone {
  pointer-events: auto;
}

/* =========================================================
   BOTTOM RAIL
========================================================= */

.ducl__bottom-rail {
  position: relative;
  z-index: 3;
  margin-top: 22px;
}

.ducl__progress {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: #dddddd;
}

.ducl__progress-fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ducl-primary);
  transition: width 120ms linear;
}

.ducl__categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  padding-top: 17px;
}

.ducl__categories span {
  color: #969696;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1.15px;
  text-align: center;
  text-transform: uppercase;
}

.ducl__categories span:not(:last-child) {
  border-right: 1px solid #dddddd;
}

/* =========================================================
   SECTION ENTRANCE
========================================================= */

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__topline {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-38px);
}

.ducl.ducl--motion-ready.is-entered
  .ducl__topline {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 950ms var(--ducl-ease) 60ms,
    transform 950ms var(--ducl-ease) 60ms;
}

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__section-rule {
  width: 0;
}

.ducl.ducl--motion-ready.is-entered
  .ducl__section-rule {
  width: 42px;
  transition: width 600ms var(--ducl-ease) 400ms;
}

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__eyebrow {
  clip-path: inset(0 100% 0 0);
  transform: translateX(35px);
}

.ducl.ducl--motion-ready.is-entered
  .ducl__eyebrow {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 720ms var(--ducl-ease) 220ms,
    transform 720ms var(--ducl-ease) 220ms;
}

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__heading h2 {
  clip-path: inset(100% 0 0 0);
  transform: translateY(65px);
}

.ducl.ducl--motion-ready.is-entered
  .ducl__heading h2 {
  clip-path: inset(0);
  transform: translateY(0);
  transition:
    clip-path 1s var(--ducl-ease) 310ms,
    transform 1s var(--ducl-ease) 310ms;
}

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__header-side {
  clip-path: inset(0 0 0 100%);
  transform: translateX(45px);
}

.ducl.ducl--motion-ready.is-entered
  .ducl__header-side {
  clip-path: inset(0);
  transform: translateX(0);
  transition:
    clip-path 850ms var(--ducl-ease) 480ms,
    transform 850ms var(--ducl-ease) 480ms;
}

.ducl.ducl--motion-ready:not(.is-entered)
  .ducl__carousel {
  clip-path: inset(0 100% 0 0);
  transform: translateX(-55px);
  box-shadow: none;
}

.ducl.ducl--motion-ready.is-entered
  .ducl__carousel {
  clip-path: inset(0);
  transform: translateX(0);
  box-shadow: 0 28px 70px rgba(17, 17, 17, 0.1);
  transition:
    clip-path 1.15s var(--ducl-ease) 620ms,
    transform 1.15s var(--ducl-ease) 620ms,
    box-shadow 800ms ease 900ms;
}

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

@media (max-width: 1024px) {
  #du-client-wall {
    --ducl-visible: 3;
    padding: 94px 0;
  }

  .ducl__container {
    width: min(100% - 40px, 920px);
  }

  .ducl__header {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ducl__header-side {
    max-width: 700px;
  }

  .ducl__item {
    width: calc(
      (
        min(100vw - 90px, 870px) -
        (var(--ducl-gap) * 2)
      ) / 3
    );

    min-width: calc(
      (
        min(100vw - 90px, 870px) -
        (var(--ducl-gap) * 2)
      ) / 3
    );

    height: 165px;
    padding: 25px 18px;
  }

  .ducl__item img {
    max-width: 86%;
    max-height: 84px;
  }
}

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

@media (max-width: 767px) {
  #du-client-wall {
    --ducl-visible: 1;
    padding: 75px 0;
  }

  .ducl__container {
    width: min(100% - 32px, 680px);
  }

  .ducl__watermark {
    display: none;
  }

  .ducl__topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 45px;
  }

  .ducl__topline p {
    max-width: 100%;
    text-align: left;
  }

  .ducl__header {
    margin-bottom: 38px;
  }

  .ducl__heading h2 {
    font-size: clamp(45px, 13vw, 63px);
    letter-spacing: -3px;
  }

  .ducl__header-side {
    align-items: flex-start;
    flex-direction: column;
    padding-left: 18px;
  }

  .ducl__header-side p {
    max-width: 100%;
  }

  .ducl__controls {
    width: 100%;
    justify-content: flex-end;
  }

  .ducl__carousel {
    padding: 16px 16px 20px;
  }

  .ducl__item {
    width: calc(100vw - 66px);
    min-width: calc(100vw - 66px);
    height: 175px;
    padding: 30px 22px;
  }

  .ducl__item:hover {
    transform: none;
  }

  .ducl__item img {
    max-width: 80%;
    max-height: 92px;
  }

  .ducl__categories {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .ducl__categories span {
    border-right: 0 !important;
  }
}

/* =========================================================
   ELEMENTOR EDITOR SAFETY
========================================================= */

body.elementor-editor-active #du-client-wall,
body.elementor-editor-preview #du-client-wall,
.elementor-editor-active #du-client-wall,
.elementor-editor-preview #du-client-wall {
  --ducl-bg-y: 0px !important;
}

body.elementor-editor-active #du-client-wall *,
body.elementor-editor-preview #du-client-wall *,
.elementor-editor-active #du-client-wall *,
.elementor-editor-preview #du-client-wall * {
  opacity: 1 !important;
  clip-path: none !important;
  animation-play-state: paused !important;
}

body.elementor-editor-active
  #du-client-wall
  .ducl__carousel,
body.elementor-editor-preview
  #du-client-wall
  .ducl__carousel {
  transform: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  #du-client-wall,
  #du-client-wall *,
  #du-client-wall *::before,
  #du-client-wall *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  #du-client-wall {
    --ducl-bg-y: 0px !important;
  }

  #du-client-wall *,
  #du-client-wall *::before,
  #du-client-wall *::after {
    opacity: 1 !important;
    clip-path: none !important;
  }
}/* End custom CSS */