#pk_flex_content .flex_layout.usp_slider {
  position: relative;
  max-width: 100%;
  margin-bottom: clamp(
    40px,
    40px + (80 - 40) * ((100vw - 320px) / (1215 - 320)),
    80px
  );
  padding: 0;
  background: var(--midnight);
}

#pk_flex_content .flex_layout.usp_slider::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(0deg, #072445, #072445),
    radial-gradient(
      77.27% 77.27% at 50% 50%,
      rgba(46, 138, 212, 0.35) 0%,
      rgba(46, 138, 212, 0) 100%
    );
}

#pk_flex_content .flex_layout.usp_slider .pk-row {
  padding: 80px 0;
}

.flex_layout.usp_slider .pk-swiper {
  position: static;
  overflow: visible;
}

.flex_layout.usp_slider .pk-usp__swiper {
  margin-bottom: 40px;
}

.flex_layout.usp_slider .pk-item::before,
.flex_layout.usp_slider .pk-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(
    270deg,
    rgba(0, 10, 21, 0) 0%,
    rgba(0, 10, 21, 0.6) 62.39%
  );
  overflow: hidden;
}

.flex_layout.usp_slider .pk-item::after {
  content: '';
  width: 100%;
  height: 100%;
  opacity: 0.8;
  aspect-ratio: 1045/590;
  background-position: bottom right;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('./overlay-pattern.png');
}

.flex_layout.usp_slider .pk-item {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.flex_layout.usp_slider .pk-item .pk-item__content {
  position: absolute;
  top: 96px;
  left: 85px;
  right: 0;
  max-width: 715px;
  color: var(--white);
}

.flex_layout.usp_slider .pk-item__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 1220/675;
  overflow: hidden;
}

.flex_layout.usp_slider .pk-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 768px) {
  .flex_layout.usp_slider .pk-item {
    aspect-ratio: 350/605;
    border-radius: 10px;
  }

  .flex_layout.usp_slider .pk-item .pk-item__content {
    top: 30px;
    left: 20px;
  }

  .flex_layout.usp_slider .pk-item__image {
    aspect-ratio: auto;
  }
}

/* Pagination */

.flex_layout.usp_slider .pk-slider__nav {
  width: fit-content;
  position: absolute;
  top: 0%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline: auto;
  translate: -50% -100%;
  transform-origin: bottom center;
  z-index: 10;
}

.flex_layout.usp_slider .pk-slider__nav .progress-dots {
  padding: 8px 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.flex_layout.usp_slider .pk-slider__nav .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
}

.flex_layout.usp_slider .pk-slider__nav .swiper-pagination-bullet-active {
  width: 56px;
  height: 10px;
  border-radius: 99px;
}

.swiper-pagination-bullet-active {
  background: rgba(255, 255, 255, 0.55);
}

/* Progress bar inside active dot */
.flex_layout.usp_slider
  .pk-slider__nav
  .swiper-pagination-bullet-active
  .progress {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: white;
  animation: progressFill 4s linear forwards;
}

@keyframes progressFill {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Play / Pause button */
.flex_layout.usp_slider .pk-slider__nav .usp-playpause,
.flex_layout.usp_slider .pk-slider__nav .usp-playpause:focus {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* .usp-playpause::before {
  content: '❚❚';
  font-size: 20px;
  color: #fff;
}
*/

.flex_layout.usp_slider .pk-slider__nav .usp-playpause::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2219%22%20height%3D%2221%22%20viewBox%3D%220%200%2019%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_1742_10483)%22%3E%3Cpath%20d%3D%22M5.53846%200H1.5C0.671573%200%200%200.671573%200%201.5V19.5C0%2020.3284%200.671573%2021%201.5%2021H5.53846C6.36689%2021%207.03846%2020.3284%207.03846%2019.5V1.5C7.03846%200.671573%206.36689%200%205.53846%200Z%22%20fill%3D%22white%22%2F%3E%3Cpath%20d%3D%22M17.1923%200H13.1538C12.3254%200%2011.6538%200.671573%2011.6538%201.5V19.5C11.6538%2020.3284%2012.3254%2021%2013.1538%2021H17.1923C18.0207%2021%2018.6923%2020.3284%2018.6923%2019.5V1.5C18.6923%200.671573%2018.0207%200%2017.1923%200Z%22%20fill%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_1742_10483%22%3E%3Crect%20width%3D%2218.6923%22%20height%3D%2221%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
}

.flex_layout.usp_slider .pk-slider__nav .usp-playpause.paused::before {
  content: '';
  height: 14px;
  margin-right: -5px;
  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2217%22%20height%3D%2220%22%20viewBox%3D%220%200%2017%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16.5%209.75047C16.5006%2010.0051%2016.4353%2010.2556%2016.3105%2010.4775C16.1856%2010.6995%2016.0055%2010.8853%2015.7875%2011.017L2.28%2019.2802C2.05227%2019.4196%201.79144%2019.4957%201.52445%2019.5007C1.25746%2019.5056%200.993989%2019.4392%200.76125%2019.3083C0.530728%2019.1794%200.338696%2018.9914%200.204904%2018.7637C0.0711107%2018.536%200.000385179%2018.2768%200%2018.0127V1.48828C0.000385179%201.22417%200.0711107%200.964934%200.204904%200.737222C0.338696%200.509511%200.530728%200.321545%200.76125%200.192655C0.993989%200.0617322%201.25746%20-0.00468706%201.52445%200.0002572C1.79144%200.00520146%202.05227%200.0813301%202.28%200.220781L15.7875%208.4839C16.0055%208.6156%2016.1856%208.80145%2016.3105%209.0234C16.4353%209.24534%2016.5006%209.49582%2016.5%209.75047Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E');
  /* margin-left: 3px; */
}