/* =================================================
Container
==================================================== */
.col-inner:has(> .row-porto) {
  display: flex;
  flex-direction: column;
}
.row-porto {
  position: relative;
  height: 1000px;
  max-width: 1080px !important;
  margin-inline: auto !important;
}
.row-porto > .col:nth-child(1) > .col-inner {
  text-align: center;
}

/* =================================================
Phone Slider
==================================================== */
.phone-frame {
  position: absolute;
  left: 0;
  top: 5px;
  z-index: 2;

  height: 590px;
  pointer-events: none;

  transform: translateX(-50px);
}
.swipe-indicator {
  height: 30px;
  transform: translateX(-53px);
  margin-top: 20px;
}

.slider1 {
  width: 264px;
  transform: translateX(-52px) !important;
  /* width: 312px; <<<< Ukuran Video Asli (Pakai ini kalau udah update mockup) */
}
.slider2,
.slider3 {
  position: absolute;
  top: 9px;
  z-index: 0;
  width: 220px;
}
.slider2 {
  left: 15px;
}
.slider3 {
  right: 15px;
}
.swiper {
  height: 590px;
  transform: translateX(-50px);
}
.swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(241, 251, 250);
}

.swiper .swiper-slide .screen {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s;

  height: 490px;
  width: 100%;
}
.slider1.swiper .swiper-slide .screen {
  height: 490px;
  /* If below changes change the swiper js config too */
  transform: translateY(13px);
}
/* .slider1.swiper .swiper-slide .screen {
  aspect-ratio: 0.5625;
  object-fit: contain;
  width: auto;
  height: auto;
} <<< Ukuran Video Asli (Pakai ini kalau udah update mockup) */
.slider2.swiper .swiper-slide .screen,
.slider3.swiper .swiper-slide .screen {
  height: 410px;
}

.swiper .swiper-slide .screen img,
.swiper .swiper-slide .screen .video-wrapper {
  object-fit: cover;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 410px;
  background-color: rgb(241, 251, 250);
}
.swiper .swiper-slide .screen .video-wrapper {
  position: relative;
}
.swiper .swiper-slide .screen .video-wrapper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.swiper .swiper-slide .screen .video-wrapper svg {
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* =================================================
Description
==================================================== */
p:has(+ .account-name) {
  font-weight: 700;
  font-size: 18px;
  color: #000;
  margin-bottom: 10px;
}

.account-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.account-name p {
  font-weight: 900;
  font-size: 33px;
  color: #292929;
  margin: 0;
}

.desc {
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  color: #000000;
  line-height: 1.3;
  margin-bottom: 15px;
}
.desc span {
  font-weight: 700;
  font-size: 20px;
  color: #14b9b2;
}

.goals .head,
.strategy .head,
.results .head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.goals .head p,
.strategy .head p,
.results .head p {
  font-weight: 700;
  font-size: 18px;
  color: #404040;
  margin: 0;
}

.goals .content {
  margin-left: 30px;
}
.strategy .content {
  margin-left: 28px;
}
.results .content {
  margin-left: 25px;
}
.goals .content,
.strategy .content,
.results .content {
  margin-bottom: 20px;
}

.goals .content p,
.strategy .content p,
.results .content p {
  font-size: 14px;
  color: #404040;
  line-height: 1.3;
  margin: 0;
}

.goals .content ul,
.strategy .content ul,
.results .content ul {
  margin: 0;
}
.goals .content ul li,
.strategy .content ul li,
.results .content ul li {
  font-size: 14px;
  color: #404040;
  line-height: 1.3;
  margin-bottom: 3px;
  padding-left: 3px;
}
.goals .content ul li::marker,
.strategy .content ul li::marker,
.results .content ul li::marker {
  content: url(/wp-content/themes/flatsome-child/assets/image/list-icon.svg);
}

/* =================================================
Image Sequence
==================================================== */
.row > div:not(.col):not([class^="col-"]):not([class*=" col-"]).image-sequence {
  position: absolute;
  top: 0;

  height: 100%;
  width: 145px !important;
  padding-block: 45px;

  display: flex;
  flex-direction: column;
}
.row
  > div:not(.col):not([class^="col-"]):not(
    [class*=" col-"]
  ).image-sequence.left {
  left: calc((1905px - 1080px) / -2);
  justify-content: center;
  gap: 20px;
  opacity: 25%;
}
.row
  > div:not(.col):not([class^="col-"]):not(
    [class*=" col-"]
  ).image-sequence.right {
  right: calc((1905px - 1080px) / -2);
  justify-content: center;
  gap: 20px;
}

.image-sequence img {
  box-shadow: 0px 4px 4px 0px #00000040;
}