.landing,
.benefits {
  background: linear-gradient(
    -62.58deg,
    #257ab4 17.33%,
    #206a9c 31.64%,
    #0f3449 76.7%,
    #0b2835 91.43%
  ) !important;
  color: #fff;
}

.landing-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1120px;
  padding: 7rem 1rem;
  margin: 0 auto;
}

/* .landing h1 {
    font-size: 2.2rem;
} */

.invoice-reminder .landing-container::before {
  display: none;
}

.invoice-reminder .div-herotext {
  padding-right: 0;
}

section.how-it-works {
  color: #133f5d;
}

.how-it-works-header {
  width: 40%;
  margin: 0 auto;
}

.how-it-works-header p.quote-desc,
.how-it-works-header p.author {
  text-align: center;
  font-size: 1.5rem;
}

.wrap-how-it-works {
  justify-content: space-between;
  text-align: center;
  margin-top: 6rem;
  position: relative;
}

.wrap-how-it-works:before,
.wrap-how-it-works:after {
  content: "";
  width: 74%;
  height: 1px;
  position: absolute;
  margin-left: 13%;
  bottom: 5rem;
  z-index: 1;
}

.wrap-how-it-works:before {
  background: #d9d9d9;
}

.wrap-how-it-works:after {
  height: 3px;
  background: #93c854;
  z-index: 5;
}

.how-it-works-step.step-2 .how-it-works-step-top img {
  height: 147.2px;
}

.how-it-works-step-top h5 {
  margin-top: 10px;
  text-align: center;
}

.how-it-works-step-top h5 span {
  background: #ddedc8;
  font-size: 1em;
  border-radius: 62px;
  line-height: 2;
  padding: 5px 10px;
}

.how-it-works-step-content {
  position: relative;
  font-weight: 700;
  color: #133f5d;
  margin-top: 2.7rem;
  padding-top: 3.3rem;
}

.how-it-works-step-content:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #fff;
  border: 2px #d0d6db solid;
  border-radius: 50px;
  display: block;
  position: absolute;
  top: 0px;
  left: 46%;
  z-index: 9;
}

.how-it-works-step-content h4 {
  font-size: 1.2rem;
}

/* ----------------- Animation ----------------- */
/* --- Step 1 --- */
.step-1 .how-it-works-step-top,
.wrap-rolling-img,
.step-3 .how-it-works-step-top {
  position: relative;
  text-align: center;
  width: 100%;
  height: 192px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.step-1 .wrap-jumping-img {
  position: relative;
  opacity: 1;
  -webkit-animation: step-1-push-in 12s;
  -moz-animation: step-1-push-in 12s;
  animation: step-1-push-in 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.step-1 .how-it-works-step-content:before {
  border: 2px #d0d6db solid;
  -webkit-animation: step-1-marker 12s;
  -moz-animation: step-1-marker 12s;
  animation: step-1-marker 12s;
  animation-iteration-count: infinite;
}

.step-2 .how-it-works-step-content:before {
  border: 2px #d0d6db solid;
  -webkit-animation: step-2-marker 12s;
  -moz-animation: step-2-marker 12s;
  animation: step-2-marker 12s;
  animation-iteration-count: infinite;
}

.step-3 .how-it-works-step-content:before {
  border: 2px #d0d6db solid;
  -webkit-animation: step-3-marker 12s;
  -moz-animation: step-3-marker 12s;
  animation: step-3-marker 12s;
  animation-iteration-count: infinite;
}

.wrap-how-it-works:after {
  opacity: 1;
  -webkit-animation: step-line 12s;
  -moz-animation: step-line 12s;
  animation: step-line 12s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.step-3 .wrap-jumping-img {
  position: relative;
  opacity: 1;
  -webkit-animation: step-3-push-in 12s;
  -moz-animation: step-3-push-in 12s;
  animation: step-3-push-in 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.rolling-img {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
  padding-bottom: 0;
  padding-top: 5px;
}

.wrap-rolling-img .rolling-img:first-child {
  opacity: 1;
  -webkit-animation: rolling-1 12s;
  -moz-animation: rolling-1 12s;
  animation: rolling-1 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.wrap-rolling-img .rolling-img:nth-child(2) {
  opacity: 1;
  -webkit-animation: rolling-2 12s;
  -moz-animation: rolling-2 12s;
  animation: rolling-2 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

.wrap-rolling-img .rolling-img:last-child {
  opacity: 1;
  -webkit-animation: rolling-3 12s;
  -moz-animation: rolling-3 12s;
  animation: rolling-3 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
  }

  80% {
    opacity: 1;
    -webkit-transform: translateY(2%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@-moz-keyframes push-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(0);
  }

  30% {
    opacity: 1;
    -moz-transform: translateY(-20%);
  }

  80% {
    opacity: 1;
    -moz-transform: translateY(2%);
  }

  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}

@keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  80% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }

  60% {
    opacity: 0;
    -webkit-transform: translateY(110%);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}

@-moz-keyframes push-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }

  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}

@keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes step-1-push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  2% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  5% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  6% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  95% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes rolling-1 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  17% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  19% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  22% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  23% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  29% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  34% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes rolling-2 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  34% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  36% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  39% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  40% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  46% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  51% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes rolling-3 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  51% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  53% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  56% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  57% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  95% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes step-1-marker {
  0% {
    border-color: #93c854;
    background: #abdd62;
  }

  95% {
    border-color: #93c854;
    background: #abdd62;
  }

  100% {
    border-color: #d0d6db;
    background: #fff;
  }
}

@keyframes step-2-marker {
  0% {
    border-color: #d0d6db;
    background: #fff;
  }

  15% {
    border-color: #d0d6db;
    background: #fff;
  }

  17% {
    border-color: #93c854;
    background: #abdd62;
  }

  95% {
    border-color: #93c854;
    background: #abdd62;
  }

  100% {
    border-color: #d0d6db;
    background: #fff;
  }
}

@keyframes step-3-marker {
  0% {
    border-color: #d0d6db;
    background: #fff;
  }

  40% {
    border-color: #d0d6db;
    background: #fff;
  }

  63% {
    border-color: #d0d6db;
    background: #fff;
  }

  67% {
    border-color: #93c854;
    background: #abdd62;
  }

  95% {
    border-color: #93c854;
    background: #abdd62;
  }

  100% {
    border-color: #d0d6db;
    background: #fff;
  }
}

@keyframes step-line {
  0% {
    width: 0;
  }

  15% {
    width: 36%;
  }

  25% {
    width: 36%;
  }

  63% {
    width: 74%;
  }

  95% {
    width: 74%;
  }

  100% {
    width: 0;
  }
}

@keyframes step-2-push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  8% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  15% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  17% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  95% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes step-3-push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  65% {
    opacity: 0;
    -webkit-transform: translateY(10%);
    -moz-transform: translateY(10%);
    -ms-transform: translateY(10%);
    -o-transform: translateY(10%);
    transform: translateY(10%);
  }

  67% {
    opacity: 1;
    -webkit-transform: translateY(-20%);
    -moz-transform: translateY(-20%);
    -ms-transform: translateY(-20%);
    -o-transform: translateY(-20%);
    transform: translateY(-20%);
  }

  70% {
    opacity: 1;
    -webkit-transform: translateY(2%);
    -moz-transform: translateY(2%);
    -ms-transform: translateY(2%);
    -o-transform: translateY(2%);
    transform: translateY(2%);
  }

  71% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  95% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}

/* ----------------- /Animation ----------------- */

.kolom-konten a {
  border-bottom: 1px #fff solid;
  color: #fff;
  font-size: var(--paragraph-fs);
  padding-bottom: 5px;
  font-weight: 600;
  transition: 0.3s all;
}

.kolom-konten a:hover {
  border-color: transparent;
}

.kolom-konten {
  max-width: 75%;
  margin: 0 auto;
}

.kolom-konten--gambar {
  text-align: center;
}

.content-text.testi h2 {
  text-align: right;
  color: #133f5d;
  font-size: 2.5rem;
  padding-right: 2rem;
  padding-bottom: 0;
}

.users-testimony .card {
  padding: 3em 2em 3em 3em;
  width: 100%;
  /* max-width: 584px; */
  text-align: left;
  background: linear-gradient(
    122.33deg,
    #133f5d 26.62%,
    #4195d5 88.48%,
    #71b0e0 105.12%
  );
  border-radius: 15px;
  height: 295px;
}

.carousel-item {
  background: transparent;
}

.content-illustration.testi .carousel-inner .paper-aurora {
  position: absolute;
  width: 100%;
  max-width: 400px;
  right: -1rem;
  bottom: -12em;
}

.content-illustration.testi .carousel-inner .paper-aurora.paper-blue-aurora {
  right: 58%;
  bottom: 3em;
}

.button-slider-row {
  display: flex;
  justify-content: flex-end;
  gap: 5%;
  padding-top: 1rem;
  padding-right: 2rem;
}

.button-slider {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #133f5d;
  display: flex;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button--previous img {
  transform: rotate(180deg);
}

.button-slider img {
  width: 18px;
}

.button-slider.disabled {
  background: #c8cfd5;
  cursor: not-allowed;
  pointer-events: none;
}

.carousel-inner {
  position: relative;
  overflow: visible;
}

.testimony-desc {
  width: 100%;
  /* max-width: 593px; */
  position: relative;
}

.testimony-desc p {
  font-family: "Lustria";
  font-style: normal;
  font-weight: 400;
  font-size: 18.2px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #fff;
  padding-top: 2rem;
  max-width: 420px;
}

.carousel-item:last-child .testimony-desc p {
  padding: 1rem 0;
}

.content-illustration .testimony-desc img {
  position: absolute;
  right: 9px;
  top: -3rem;
  width: 100%;
  max-width: 35px;
  opacity: 0.3;
}

.users-testimony .jobtitle img {
  max-width: 220px;
  filter: brightness(0) invert(1);
  max-height: 60px;
  width: auto;
}

.users-testimony .jobtitle img#tehkotjok-logo {
  max-width: 135px;
}

.testimony-name p {
  font-family: "Lato", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  text-align: left !important;
  color: #fff;
  padding-bottom: 0;
}

.testimony-name-title {
  font-weight: 400;
}

.testimony-points {
  display: none;
}

.testimony-points.active {
  display: flex;
  justify-content: right;
  gap: 2rem;
}

.testimony-points h2 {
  padding-bottom: 0;
}

.testimony-points-item {
  max-width: 200px;
  text-align: right;
}

.testimony-points-item p {
  color: #133f5d;
  font-weight: 400;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  gap: 4em;
}

.copy-footer {
  width: 50%;
}

.illustration-footer {
  width: 50%;
  text-align: center;
}

.footer-content h2 {
  text-align: left;
  padding-bottom: 1rem;
  color: var(--Green50);
}

.illustration-footer img {
  width: 100%;
}

.footer-row.new-footer #homepage-footer {
  border-top: 1px solid #ffffff8f !important;
}

@media screen and (max-width: 768px) {
  .landing-container {
    padding: 12em 3em 0 !important;
  }

  .invoice-reminder .div-herotext {
    text-align: center;
  }

  .hero-image img {
    margin-top: 0;
  }

  .how-it-works-header {
    width: 60%;
  }

  .how-it-works-step.step-2 .how-it-works-step-top img {
    height: auto;
    width: 90%;
  }

  .wrap-jumping-img img {
    height: 100px;
  }

  .step-1 .how-it-works-step-top,
  .wrap-rolling-img,
  .step-3 .how-it-works-step-top {
    height: 140px;
  }

  .kolom-konten {
    text-align: center;
  }

  .flex-container {
    display: grid !important;
    margin-top: 0 !important;
  }

  .content-illustration {
    width: 100%;
    padding: 0;
  }

  .illustration-footer img {
    max-width: 250px;
    margin-bottom: -4rem;
  }

  .testimoni {
    position: relative;
  }

  .testimoni .paper-container {
    padding-bottom: 8.5rem;
  }

  .blue-gradient-footer .paper-container {
    padding-top: 6rem;
  }

  .users-testimony .card {
    height: auto;
  }

  .button-slider-row {
    justify-content: center;
    padding-right: 0;
    padding-bottom: 2rem;
    position: absolute;
    gap: 1rem;
    bottom: 1.5rem;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
  }

  .content-text.testi,
  .content-illustration.testi {
    width: 100%;
  }

  .content-text.testi h2 {
    text-align: center;
    padding-right: 0;
    padding-bottom: 2rem;
    padding-top: 0;
  }

  .testimony-desc p {
    text-align: left !important;
    max-width: 100%;
  }

  .content-text {
    width: 75%;
    margin: auto;
  }

  .testimoni br {
    display: none;
  }

  .footer-content {
    display: flex;
    gap: 0;
    flex-direction: column;
  }

  .copy-footer,
  .copy-footer h2,
  .copy-footer p {
    text-align: center;
  }

  .copy-footer {
    order: 2;
    width: 100%;
  }

  .illustration-footer {
    order: 1;
    width: 100%;
  }

  .illustration-footer img {
    display: flex;
    margin: 0 auto;
    max-width: 400px;
  }

  .paper-button {
    margin-top: 1em;
  }
}

@media screen and (max-width: 480px) {
  .invoice-reminder .container-hero.landing-container {
    padding: 8rem 1rem 4rem !important;
  }

  .how-it-works-header {
    width: 100%;
  }

  .how-it-works-header p.quote-desc,
  .how-it-works-header p.author {
    font-size: 1.2rem;
  }

  .kolom-konten {
    max-width: 100%;
  }

  .step-1 .wrap-jumping-img,
  .step-1 .how-it-works-step-content:before,
  .step-2 .how-it-works-step-content:before,
  .step-3 .how-it-works-step-content:before,
  .wrap-how-it-works:after,
  .step-3 .wrap-jumping-img {
    animation: none;
  }

  .how-it-works-step-content:before {
    display: none;
  }

  .how-it-works-step-content {
    margin-top: 0.5rem;
    padding-top: 0;
    position: absolute;
    top: -3.5rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .how-it-works-step {
    /* margin-bottom: 2.5rem; */
    margin-bottom: 6rem;
    position: relative;
  }

  .step-1 .how-it-works-step-top,
  .step-3 .how-it-works-step-top {
    height: unset;
  }

  /* .rolling-img {
        position: relative;
    } */

  /* .rolling-img:first-child, .rolling-img:nth-child(2) {
        display: none;
    } */

  .wrap-how-it-works:before,
  .wrap-how-it-works:after {
    display: none;
  }

  .wrap-rolling-img .rolling-img:first-child {
    opacity: 1;
    -webkit-animation: rolling-infinity-1 8s;
    -moz-animation: rolling-infinity-1 8s;
    animation: rolling-infinity-1 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
  }

  .wrap-rolling-img .rolling-img:nth-child(2) {
    opacity: 1;
    -webkit-animation: rolling-infinity-2 8s;
    -moz-animation: rolling-infinity-2 8s;
    animation: rolling-infinity-2 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
  }

  .wrap-rolling-img .rolling-img:last-child {
    opacity: 1;
    -webkit-animation: rolling-infinity-3 8s;
    -moz-animation: rolling-infinity-3 8s;
    animation: rolling-infinity-3 8s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-out;
  }

  br {
    display: none;
  }

  .how-it-works-step.step-2 .how-it-works-step-top img {
    width: 80%;
  }

  .wrap-jumping-img img {
    height: 60px;
  }

  .landing-text {
    order: 2;
  }

  .hero-image img {
    margin-bottom: -3rem;
  }

  .landing-text p {
    padding-bottom: 0;
  }

  .how-it-works .container {
    padding-bottom: 0;
  }

  .illustration-footer img {
    margin: 0 auto -2rem;
    max-width: 320px;
  }

  .kolom-konten--gambar img {
    margin-bottom: -1.5rem;
  }

  .how-it-works-step-content h4 {
    font-size: 1.3rem;
  }

  @keyframes rolling-infinity-1 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    9% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    14% {
      opacity: 1;
      -webkit-transform: translateY(-20%);
      -moz-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      -o-transform: translateY(-20%);
      transform: translateY(-20%);
    }

    16% {
      opacity: 1;
      -webkit-transform: translateY(2%);
      -moz-transform: translateY(2%);
      -ms-transform: translateY(2%);
      -o-transform: translateY(2%);
      transform: translateY(2%);
    }

    18% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    31% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    38% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }
  }

  @keyframes rolling-infinity-2 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    38% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    41% {
      opacity: 1;
      -webkit-transform: translateY(-20%);
      -moz-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      -o-transform: translateY(-20%);
      transform: translateY(-20%);
    }

    45% {
      opacity: 1;
      -webkit-transform: translateY(2%);
      -moz-transform: translateY(2%);
      -ms-transform: translateY(2%);
      -o-transform: translateY(2%);
      transform: translateY(2%);
    }

    46% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    60% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    67% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }
  }

  @keyframes rolling-infinity-3 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    67% {
      opacity: 0;
      -webkit-transform: translateY(10%);
      -moz-transform: translateY(10%);
      -ms-transform: translateY(10%);
      -o-transform: translateY(10%);
      transform: translateY(10%);
    }

    70% {
      opacity: 1;
      -webkit-transform: translateY(-20%);
      -moz-transform: translateY(-20%);
      -ms-transform: translateY(-20%);
      -o-transform: translateY(-20%);
      transform: translateY(-20%);
    }

    74% {
      opacity: 1;
      -webkit-transform: translateY(2%);
      -moz-transform: translateY(2%);
      -ms-transform: translateY(2%);
      -o-transform: translateY(2%);
      transform: translateY(2%);
    }

    78% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    89% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -ms-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }

    96% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }

    100% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }
  }
}