:root {
  --color-primary: #00313c;
  --color-secondary: #ff606d;
  --color-secondary-dark: #bb4751;
  --color-primary-light: #66838a;
  --color-primary-dark: #1a4650;
  --color-primary-alt: #4d6f77;
  --color-grey: #696969;
  --color-midnight-forest: #99adb1;
  --color-midnight-forest-alt: #ccd6d8;
  --color-grey-light: #fafafa;
  --color-white: #ffffff;
  --color-grey-dark: #2b2b2b;
  --color-grey-dark-alt: #676767;
}

html,
body {
  overflow-x: clip;
  margin: 0;
  width: 100%;
  font-family: "Montserrat", sans-serif;
}

body {
  background: linear-gradient(50deg, #fafafa 83.97%, #d5dddf 100%);
  display: flex;
  flex-direction: column;
}

.summary-card {
  box-shadow: -1px -1px 7px 0 rgba(1, 31, 38, 0.08),
    1px 1px 7px 0 rgba(204, 214, 216, 0.1);
  background: #ffffff;
}

.going-live-card {
  background: linear-gradient(118deg, #00303c 6.13%, #011f26 75.9%);
  box-shadow: 0 0 7px 5px rgba(26, 70, 80, 0.12),
    0 2px 10px -1px rgba(3, 164, 108, 0.5);
}

/* Carousel item base styles - all properties consolidated */
.carousel-item {
  -webkit-transform: translateZ(0); /* Force hardware acceleration */
  transform: translateZ(0); /* Standard property */
  -webkit-backface-visibility: hidden; /* Prevent flickering */
  backface-visibility: hidden; /* Standard property */
  -webkit-perspective: 1000px; /* Enable 3D transforms */
  perspective: 1000px; /* Standard property */
  will-change: transform, left, width, height; /* Hint browser for optimization */
  transition: all 0.5s ease-in-out; /* Single transition for all properties */
}

/* Carousel positioning and sizing based on data-position */
.carousel-item[data-position="1"] {
  left: 6% !important;
  width: 38.4vw !important;
  height: 28.8vw !important;
  min-width: 202px !important;
  min-height: 154px !important;
  max-width: 322px !important;
  max-height: 238px !important;
  z-index: 0 !important;
}

.carousel-item[data-position="2"] {
  left: 13% !important;
  width: 44.4vw !important;
  height: 32.4vw !important;
  min-width: 238px !important;
  min-height: 178px !important;
  max-width: 382px !important;
  max-height: 286px !important;
  z-index: 10 !important;
}

.carousel-item[data-position="3"] {
  left: 50% !important;
  transform: translateZ(0) translateX(-50%) !important;
  -webkit-transform: translateZ(0) translateX(-50%) !important;
  width: 50.4vw !important;
  height: 36vw !important;
  min-width: 262px !important;
  min-height: 190px !important;
  max-width: 442px !important;
  max-height: 322px !important;
  z-index: 20 !important;
}

.carousel-item[data-position="4"] {
  left: 87% !important;
  transform: translateZ(0) translateX(-100%) !important;
  -webkit-transform: translateZ(0) translateX(-100%) !important;
  width: 44.4vw !important;
  height: 32.4vw !important;
  min-width: 238px !important;
  min-height: 178px !important;
  max-width: 382px !important;
  max-height: 286px !important;
  z-index: 10 !important;
}

.carousel-item[data-position="5"] {
  left: 94% !important;
  transform: translateZ(0) translateX(-100%) !important;
  -webkit-transform: translateZ(0) translateX(-100%) !important;
  width: 38.4vw !important;
  height: 28.8vw !important;
  min-width: 202px !important;
  min-height: 154px !important;
  max-width: 322px !important;
  max-height: 238px !important;
  z-index: 0 !important;
}

/* Responsive positioning */
@media (min-width: 640px) {
  .carousel-item[data-position="1"] {
    left: 6% !important;
    width: 36vw !important;
    height: 26.4vw !important;
    min-width: 247px !important;
    min-height: 187px !important;
    max-width: 391px !important;
    max-height: 295px !important;
  }

  .carousel-item[data-position="2"] {
    left: 13% !important;
    width: 40.8vw !important;
    height: 30vw !important;
    min-width: 295px !important;
    min-height: 223px !important;
    max-width: 511px !important;
    max-height: 379px !important;
  }

  .carousel-item[data-position="3"] {
    width: 48vw !important;
    height: 34.8vw !important;
    min-width: 331px !important;
    min-height: 247px !important;
    max-width: 631px !important;
    max-height: 463px !important;
  }

  .carousel-item[data-position="4"] {
    left: 87% !important;
    transform: translateZ(0) translateX(-100%) !important;
    -webkit-transform: translateZ(0) translateX(-100%) !important;
    width: 40.8vw !important;
    height: 30vw !important;
    min-width: 295px !important;
    min-height: 223px !important;
    max-width: 511px !important;
    max-height: 379px !important;
  }

  .carousel-item[data-position="5"] {
    left: 94% !important;
    transform: translateZ(0) translateX(-100%) !important;
    -webkit-transform: translateZ(0) translateX(-100%) !important;
    width: 36vw !important;
    height: 26.4vw !important;
    min-width: 247px !important;
    min-height: 187px !important;
    max-width: 391px !important;
    max-height: 295px !important;
  }
}

@media (min-width: 768px) {
  .carousel-item[data-position="1"] {
    left: 6% !important;
    width: 32.4vw !important;
    height: 24vw !important;
    min-width: 278px !important;
    min-height: 218px !important;
    max-width: 458px !important;
    max-height: 350px !important;
  }

  .carousel-item[data-position="2"] {
    left: 13% !important;
    width: 40.8vw !important;
    height: 30vw !important;
    min-width: 374px !important;
    min-height: 278px !important;
    max-width: 578px !important;
    max-height: 422px !important;
  }

  .carousel-item[data-position="3"] {
    width: 48vw !important;
    height: 34.8vw !important;
    min-width: 422px !important;
    min-height: 314px !important;
    max-width: 698px !important;
    max-height: 506px !important;
  }

  .carousel-item[data-position="4"] {
    left: 87% !important;
    transform: translateZ(0) translateX(-100%) !important;
    -webkit-transform: translateZ(0) translateX(-100%) !important;
    width: 40.8vw !important;
    height: 30vw !important;
    min-width: 374px !important;
    min-height: 278px !important;
    max-width: 578px !important;
    max-height: 422px !important;
  }

  .carousel-item[data-position="5"] {
    left: 94% !important;
    transform: translateZ(0) translateX(-100%) !important;
    -webkit-transform: translateZ(0) translateX(-100%) !important;
    width: 32.4vw !important;
    height: 24vw !important;
    min-width: 278px !important;
    min-height: 218px !important;
    max-width: 458px !important;
    max-height: 350px !important;
  }
}

/* Mobile-specific carousel positioning */
@media (max-width: 639px) {
  .carousel-item[data-position="1"] {
    left: 0% !important;
  }

  .carousel-item[data-position="2"] {
    left: 7% !important;
  }

  .carousel-item[data-position="3"] {
    left: 50% !important;
  }

  .carousel-item[data-position="4"] {
    left: 93% !important;
  }

  .carousel-item[data-position="5"] {
    left: 100% !important;
  }
}