/* Hero Banner V2 - Card Window Approach with Counter-Scaling */

/* CSS Reset for Hero Banner - Isolate from global styles */
.hero-banner-v2,
.hero-banner-v2 *,
.hero-banner-v2 *::before,
.hero-banner-v2 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.hero-banner-v2 {
  position: relative;
  width: 100%;
  height: 100vh;
  /* height: calc(100vh - 72px); */
  /* margin-top: 72px; */
  overflow: hidden;
  background-color: #F7F5F2;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-banner-v2 .hero-banner-v2-cards-title {
  position: absolute;
  top: calc(50% - 306px);
  padding: 0 30px 42px;
  height: 125px;
  align-content: end;
  color: #FF5E00;
  text-align: center;
  font-family: NeuSans;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 115%; /* 34.5px */
  letter-spacing: -0.3px;
}

/* Card Window - Acts as viewport/window showing background */
.hero-banner-v2-card-window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  border-radius: 0px;
  /* Smooth opacity transition when switching cards */
  transition: opacity 0.4s ease;
}

/* Center card starts visible at full screen */
.hero-banner-v2-card-center {
  z-index: 3;
  opacity: 1;
  border-radius: 3% ;
}

.hero-banner-v2-card-center::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hero-banner-v2-header-poster);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hero-banner-v2-card-center[data-header-poster-visible="false"]::before {
  opacity: 0;
}

/* Left and right cards start hidden */
.hero-banner-v2-card-left,
.hero-banner-v2-card-right {
  z-index: 2;
  opacity: 0;
  border-radius: 3% ;
}

/* Background images - maintain full viewport size via counter-scaling */
.hero-banner-v2-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  transform-origin: center center;
  /* No CSS transitions - JS controls all animations */
}

.hero-banner-v2-card-poster {
  pointer-events: none;
  transition: opacity 0.25s ease;
}

video.hero-banner-v2-card-bg[data-media-ready="false"] {
  opacity: 0 !important;
}

video.hero-banner-v2-card-bg[data-media-ready="true"] + .hero-banner-v2-card-poster {
  opacity: 0;
}

video.hero-banner-v2-card-bg,
video.hero-banner-v2-mobile-products__bg-media {
  pointer-events: none;
}

video.hero-banner-v2-card-bg::-webkit-media-controls,
video.hero-banner-v2-card-bg::-webkit-media-controls-panel,
video.hero-banner-v2-card-bg::-webkit-media-controls-start-playback-button,
video.hero-banner-v2-card-bg::-webkit-media-controls-play-button,
video.hero-banner-v2-mobile-products__bg-media::-webkit-media-controls,
video.hero-banner-v2-mobile-products__bg-media::-webkit-media-controls-panel,
video.hero-banner-v2-mobile-products__bg-media::-webkit-media-controls-start-playback-button,
video.hero-banner-v2-mobile-products__bg-media::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0 !important;
}

/* Center card backgrounds - Header visible initially */
#bg-header {
  opacity: 1;
  z-index: 2;
}

#bg-header-poster {
  z-index: 2;
}

#bg-office {
  opacity: 0;
  z-index: 1;
}

#bg-office-poster {
  z-index: 1;
}

/* Other backgrounds visible by default */
#bg-cloud,
#bg-rovo {
  opacity: 1;
  z-index: 1;
}

#bg-cloud-poster,
#bg-rovo-poster {
  z-index: 1;
}

/* Content Overlay - Step 1 */
section.hero-banner-v2 div.hero-banner-v2-content {
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 8vh;
  opacity: 1;
  transition: opacity 0.4s ease;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-content.hero-banner-v2-content--hidden {
  opacity: 0;
  pointer-events: none;
}

section.hero-banner-v2 div.hero-banner-v2-content h1.hero-banner-v2-title {
  display: block;
  color: #FFF;
  text-align: center;
  /* Use exact font-family name from @font-face - must match exactly 'NeuSans' */
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 90px;
  font-style: normal;
  font-weight: 300 !important; /* Force light weight - override shared.css h1 rule */
  line-height: 90px;
  letter-spacing: -1.8px;
  margin: 0 0 28px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  /* Ensure browser uses the actual font file, not synthetic weight */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Force browser to use the actual font file */
  font-variation-settings: normal;
}

section.hero-banner-v2 div.hero-banner-v2-content p.hero-banner-v2-lead {
  display: block;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  margin: 0 0 34px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  max-width: 800px;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-content div.hero-banner-v2-cta-container {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-content div.hero-banner-v2-cta-container a.hero-banner-v2-cta-button {
  display: flex;
  width: 124px;
  height: 42px;
  padding: 14px 8px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  background: #000;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.16px;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background 0.3s ease;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-content div.hero-banner-v2-cta-container a.hero-banner-v2-cta-button:hover {
  border: 1px solid #f08cfc;
  color: white;
  background: #F08CFC;
}

/* Card Content Overlay - Shown in Step 2 (bottom) and Step 3 (center) */
section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 256px;
  height: 330px;
  /* height: 363px; */
  transform-origin: center center;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 20px 20px 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.4s ease, justify-content 0.4s ease;
  pointer-events: none;
  /* Improve text rendering during transforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  text-rendering: optimizeLegibility;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content.hero-banner-v2-card-content--visible {
  opacity: 1;
  pointer-events: auto;
}

/* Step 3: Center the content in full screen */
section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content.hero-banner-v2-card-content--centered {
  justify-content: center;
}

/* Card Content Expanded - Step 3 Enhanced Styling */
section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  /* justify-content: flex-start; */
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 112px;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 124px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  text-rendering: optimizeLegibility;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded.hero-banner-v2-card-content-expanded--visible {
  opacity: 1;
  pointer-events: auto;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded p.hero-banner-v2-card-eyebrow-expanded {
  display: block;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.26px;
  margin: 0 0 28px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded h2.hero-banner-v2-card-title-expanded {
  display: block;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 50px;
  font-style: normal;
  font-weight: 300;
  line-height: 108%;
  letter-spacing: -0.04em;
  max-width: 980px;
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded p.hero-banner-v2-card-lead2-expanded {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(16px, 1.35vw, 20px);
  font-style: normal;
  font-weight: 400;
  line-height: 135%;
  max-width: 720px;
  margin: 0 0 40px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 34px 0;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded div.hero-banner-v2-card-icon-item-expanded {
  display: flex;
  width: clamp(60px, 5vw, 82px);
  height: clamp(60px, 5vw, 82px);
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded div.hero-banner-v2-card-icon-item-expanded img.hero-banner-v2-card-icon-img-expanded {
  display: block;
  width: clamp(34px, 3.4vw, 46px);
  height: clamp(34px, 3.4vw, 46px);
  object-fit: contain;
  border: none;
  margin: 0;
  padding: 0;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-cta-container {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-cta-container a.hero-banner-v2-card-cta-button {
  display: flex;
  min-width: 114px;
  height: 42px;
  padding: 12px 18px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  background: #000;
  border: none;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.16px;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  transition: background 0.3s ease;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-cta-container a.hero-banner-v2-card-cta-button:hover {
  border: 1px solid #f08cfc;
  color: white;
  background: #F08CFC;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content h2.hero-banner-v2-card-title {
  display: block;
  color: #FFF;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 400;
  line-height: 105%;
  letter-spacing: -0.3px;
  margin: 0 0 12px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content p.hero-banner-v2-card-lead {
  display: block;
  color: #FFF;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin: 0 0 20px 0;
  padding: 0;
  border: none;
  background: none;
  text-decoration: none;
  text-transform: none;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content div.hero-banner-v2-card-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  height: 90px;
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content div.hero-banner-v2-card-icons div.hero-banner-v2-card-icon-item {
  display: flex;
  width: 42px;
  height: 42px;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}

section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content div.hero-banner-v2-card-icons div.hero-banner-v2-card-icon-item img.hero-banner-v2-card-icon-img {
  display: block;
  width: 20px;
  height: 22px;
  object-fit: contain;
  border: none;
  margin: 0;
  padding: 0;
}

/* Segmented Control - Step 3 Bottom Navigation */
section.hero-banner-v2 div.hero-banner-v2-segmented-control {
  position: absolute;
  bottom: 57px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  width: auto;
  height: 42px;
  padding: 0px 2px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

section.hero-banner-v2 div.hero-banner-v2-segmented-control.hero-banner-v2-segmented-control--visible {
  opacity: 1;
  pointer-events: auto;
}

section.hero-banner-v2 div.hero-banner-v2-segmented-control div.hero-banner-v2-segmented-indicator {
  /* Indicator hidden - using direct button background animation instead */
  display: none;
}

section.hero-banner-v2 div.hero-banner-v2-segmented-control button.hero-banner-v2-segmented-option {
  position: relative;
  height: 38px;
  min-width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #FFF;
  text-align: center;
  font-family: 'NeuSans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  cursor: pointer;
  transition: background 1s ease, color 1s ease;
  box-sizing: border-box;
  padding: 0 16px;
  white-space: nowrap;
  z-index: 1;
  overflow: hidden;
}

/* Lighter white color that sweeps left-to-right over the darker base */
section.hero-banner-v2 div.hero-banner-v2-segmented-control button.hero-banner-v2-segmented-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #FFF;
  border-radius: 0;
  transition: left 0s;
  z-index: -1;
  pointer-events: none;
}

section.hero-banner-v2 div.hero-banner-v2-segmented-control button.hero-banner-v2-segmented-option:hover:not(.hero-banner-v2-segmented-option--active) {
  background: rgba(255, 255, 255, 0.15);
}

/* Active state: darker background appears immediately, lighter white sweeps from left to right */
section.hero-banner-v2 div.hero-banner-v2-segmented-control button.hero-banner-v2-segmented-option.hero-banner-v2-segmented-option--active {
  background: rgba(255, 255, 255, 0.7);
  color: #000;
}

/* 12-second transition for all active buttons (both auto and manual) */
section.hero-banner-v2 div.hero-banner-v2-segmented-control button.hero-banner-v2-segmented-option.hero-banner-v2-segmented-option--active::before {
  left: 0;
  transition: left 12s linear;
}

/* Responsive */
@media (max-width: 768px) {
  section.hero-banner-v2 div.hero-banner-v2-content {
    margin: 0 30px;
  }

  .hero-banner-v2 .hero-banner-v2-cards-title {
    padding-bottom: 48px;
  }

  section.hero-banner-v2 div.hero-banner-v2-content h1.hero-banner-v2-title {
    font-size: 35px;
    line-height: 115%;
    font-weight: 400 !important;
    letter-spacing: 0;
    margin-bottom: 26px;
  }

  section.hero-banner-v2 div.hero-banner-v2-content p.hero-banner-v2-lead {
    font-size: 16px;
    line-height: 125%;
    margin-bottom: 40px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded {
    padding-top: 96px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 142px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded p.hero-banner-v2-card-eyebrow-expanded {
    font-size: 18px;
    margin-bottom: 32px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded h2.hero-banner-v2-card-title-expanded {
    font-size: 30px;
    font-weight: 300;
    line-height: 112%;
    margin-bottom: 32px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded p.hero-banner-v2-card-lead2-expanded {
    font-weight: 400;
    line-height: 125%;
    font-size: 15px;
    margin-bottom: 34px;
  }

  /* Icons */
  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded {
    gap: 10px;
    max-width: 100%;
    margin-bottom: 24px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded div.hero-banner-v2-card-icon-item-expanded {
    width: 56px;
    height: 56px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded div.hero-banner-v2-card-icon-item-expanded img.hero-banner-v2-card-icon-img-expanded {
    width: 32px;
    height: 32px;
  }

  /* Segmented Control - Step 3 Bottom Navigation */
  section.hero-banner-v2 div.hero-banner-v2-segmented-control {
    bottom: 100px;
  }
}

@media (max-height: 700px) {
  .hero-banner-v2 .hero-banner-v2-cards-title {
    padding-bottom: 30px;
  }

  /* Card Content Expanded - Step 3 Enhanced Styling */
  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded {
    padding-top: 84px;
  }

  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded p.hero-banner-v2-card-lead2-expanded {
    margin-bottom: 24px;
  }

  /* Icons */
  section.hero-banner-v2 div.hero-banner-v2-card-window div.hero-banner-v2-card-content-expanded div.hero-banner-v2-card-icons-expanded {
    margin-bottom: 22px;
  }

  /* Segmented Control - Step 3 Bottom Navigation */
  section.hero-banner-v2 div.hero-banner-v2-segmented-control {
    bottom: 48px !important;
  }
}

/* Mobile Dots Navigation - Step 2 (cards-visible state) */
section.hero-banner-v2 div.hero-banner-v2-mobile-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 16px;
  opacity: 0;
  pointer-events: none;
  top: calc(50vh + 216px);
  height: 7px;
}

section.hero-banner-v2 div.hero-banner-v2-mobile-dots.hero-banner-v2-mobile-dots--visible {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

section.hero-banner-v2 div.hero-banner-v2-mobile-dots button.hero-banner-v2-mobile-dot {
  width: 7px;
  height: 7px;
  min-width: unset;
  border: none;
  background: #E1E1E1;
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  border-radius: 8px;
  transition: all 0.4s ease;
}

section.hero-banner-v2 div.hero-banner-v2-mobile-dots button.hero-banner-v2-mobile-dot.active {
  background: #ff5e00;
  width: 26px;
}

.hero-banner-v2-mobile-products {
  display: none;
}

/* Mobile dots only visible on screens < 800px and during cards-visible state */
@media (min-width: 800px) {
  section.hero-banner-v2 div.hero-banner-v2-mobile-dots {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-banner-v2-mobile-products {
    display: block;
    background: #f7f5f2;
    padding: 74px 0 97px;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__container {
    width: 100%;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__title {
    max-width: 320px !important;
    margin: 0 auto 48px !important;
    padding: 0 30px !important;
    color: #ff5e00 !important;
    text-align: center !important;
    font-family: NeuSans !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 115% !important;
    letter-spacing: -0.3px !important;
  }

  .hero-banner-v2-mobile-products__slider {
    width: 100% !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hero-banner-v2-mobile-products__slider .swiper-wrapper {
    align-items: stretch !important;
  }

  .hero-banner-v2-mobile-products__slide {
    width: auto ;
    height: auto !important;
  }

  .hero-banner-v2-mobile-products__card {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    /* min-height: 360px !important; */
    border-radius: 10px !important;
    overflow: hidden !important;
    background-color: #ff7b2f !important;
    background-image: var(--hero-mobile-products-poster) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 100%;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    background-image: var(--hero-mobile-products-poster) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .hero-banner-v2-mobile-products__poster {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    opacity: 1 !important;
    transition: opacity 0.25s ease !important;
    pointer-events: none !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .hero-banner-v2-mobile-products__bg-media {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    opacity: 0 !important;
    transition: opacity 0.25s ease !important;
    background-color: transparent !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
  }

  .hero-banner-v2-mobile-products__card[data-media-ready="true"] .hero-banner-v2-mobile-products__poster {
    opacity: 0 !important;
  }

  .hero-banner-v2-mobile-products__card[data-media-ready="true"] .hero-banner-v2-mobile-products__bg-media {
    opacity: 1 !important;
  }

  .hero-banner-v2-mobile-products__card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
      linear-gradient(180deg, rgba(54, 19, 11, 0.08) 0%, rgba(54, 19, 11, 0.22) 100%) !important;
    pointer-events: none !important;
  }

  .hero-banner-v2-mobile-products__card-content {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    width: 100% !important;
    /* min-height: 360px !important; */
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 40px 20px 20px 20px !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__card-title {
    color: #fff !important;
    font-family: NeuSans !important;
    font-size: 30px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 105% !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 12px !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__card-lead {
    /* max-width: 180px !important; */
    color: rgba(255, 255, 255, 0.95) !important;
    font-family: NeuSans !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 120% !important;
    margin: 0 !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__card-icons {
    display: flex !important;
    max-width: 200px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 30px !important;
    margin-bottom: 30px !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }

  .hero-banner-v2-mobile-products__icon-item {
    display: flex !important;
    width: 42px !important;
    height: 42px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 5px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(6px) !important;
  }

  .hero-banner-v2-mobile-products__icon-img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
  }

  .hero-banner-v2-mobile-products__card-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 5px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: NeuSans !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 125% !important;
    letter-spacing: -0.14px !important;
    transition: 0.3s;
    margin-top: auto !important;
    transform: translateZ(0) !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
  }

  .hero-banner-v2-mobile-products__card-cta:hover {
    background-color: #ff5e00;
    border-color: #ff5e00;
    color: white;
  }

  body .hero-banner-v2-mobile-products .swiper .swiper-pagination,
  .hero-banner-v2-mobile-products__pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 18px !important;
  }

  .hero-banner-v2-mobile-products .swiper-pagination .swiper-pagination-bullet,
  .hero-banner-v2-mobile-products .swiper-pagination .swiper-pagination-bullet[data-active="false"] {
    display: block !important;
    flex: 0 0 auto !important;
    width: 7px !important;
    height: 7px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(9, 30, 66, 0.12) !important;
    opacity: 1 !important;
    transition:
      width 0.25s ease,
      background-color 0.25s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
  }

  .hero-banner-v2-mobile-products .swiper-pagination .swiper-pagination-bullet[data-active="true"] {
    width: 26px !important;
    background-color: #ff5e00 !important;
  }

  @supports (-webkit-touch-callout: none) {
    .hero-banner-v2-mobile-products__card,
    .hero-banner-v2-mobile-products__media,
    .hero-banner-v2-mobile-products__poster,
    .hero-banner-v2-mobile-products__bg-media,
    .hero-banner-v2-mobile-products__card::before {
      -webkit-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
      -webkit-backface-visibility: hidden !important;
      backface-visibility: hidden !important;
      -webkit-mask-image: -webkit-radial-gradient(white, black);
    }

    .hero-banner-v2-mobile-products__poster,
    .hero-banner-v2-mobile-products__bg-media {
      transition: none !important;
    }

    .hero-banner-v2-mobile-products__card-content,
    .hero-banner-v2-mobile-products__card-title,
    .hero-banner-v2-mobile-products__card-lead,
    .hero-banner-v2-mobile-products__card-icons,
    .hero-banner-v2-mobile-products__card-cta {
      -webkit-transform: translateZ(0) !important;
      transform: translateZ(0) !important;
      -webkit-backface-visibility: hidden !important;
      backface-visibility: hidden !important;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
    }

    .hero-banner-v2-mobile-products__card-content {
      will-change: auto !important;
    }
  }
}