@media only screen and (min-width: 1200px) {
  #hero-section {
    padding: 190px 0;
  }
  #step-section .arr-1 {
    top: 175px;
    left: -20px;
  }
  #step-section .arr-2 {
    top: 510px;
    left: 120px;
  }
  #step-section .arr-3 {
    top: 500px;
    right: 150px;
  }
  #step-section .arr-4 {
    top: 170px;
    right: -40px;
  }
}

@media only screen and (min-width: 1400px) {
  #hero-section {
    padding: 225px 0;
  }
  #hero-section h1 {
    font-size: 4rem;
  }
  #step-section .arr-1 {
    top: 175px;
    left: -20px;
  }
  #step-section .arr-2 {
    top: 460px;
    left: 120px;
  }
  #step-section .arr-3 {
    top: 500px;
    right: 150px;
  }
  #step-section .arr-4 {
    top: 170px;
    right: -40px;
  }
}

@media only screen and (min-width: 1660px) {
  #hero-section {
    padding: 17rem 0;
  }
  #hero-section h1 {
    font-size: 4.5rem;
  }
  #step-section .arr-1 {
    top: 175px;
    left: 165px;
  }
  #step-section .arr-2 {
    top: 460px;
    left: 370px;
  }
  #step-section .arr-3 {
    top: 460px;
    right: 310px;
  }
  #step-section .arr-4 {
    top: 170px;
    right: 165px;
  }
}

@media only screen and (max-width: 1200px) {
  #step-section .arr-1,
  #step-section .arr-2,
  #step-section .arr-3,
  #step-section .arr-4 {
    visibility: hidden;
  }
}

@media only screen and (min-width: 992px) {
  .col-30percent {
    flex: 0 0 auto;
    width: 30%;
  }
}

@media only screen and (max-width: 991px) {
  #hero-section {
    margin-top: 4rem;
  }
  .cookies-banner {
    padding: 1rem 1.2rem;
  }
}

@media only screen and (max-width: 768px) {
  #hero-section h1 {
    font-size: 2.8rem;
  }
  #p3-section .row ul li img {
    width: 80px;
  }
}

@media only screen and (max-width: 575px) {
  #hero-section h1 {
    line-height: 1.1;
  }

  .btn-main {
    margin: 0 auto;
  }

  #section-partner-account h2 {
    font-size: 34px;
    padding: 20px 0;
  }
  #section-partner-account h4 {
    font-size: 24px;
  }

  #why-section h3 {
    font-size: 30px;
  }

  #step-section .row .btn-main {
    padding: 0.8rem;
  }

  #step-section .row .btn-main a {
    font-size: 16px;
  }
}

.text-why {
  width: 140%;
  text-align: left !important;
}

@media only screen and (max-width: 991px) {
  #hero-section {
    background: linear-gradient(0deg, #000000bf, rgb(88 23 121 / 84%)),
      url(../images/hero-bg.png) no-repeat right center / cover;
  }
}

@media (max-width: 1200px) {
  .text-why {
    font-size: 18px;
    width: 100%;
  }

  .text-list {
    font-size: 18px;
  }
}

@media (max-width: 1063px) {
  .text-why {
    font-size: 16px;
    width: 100%;
  }

  .text-list {
    font-size: 16px;
  }
}

/* @media (max-width: 767px) {
  .text-why {
    font-size: 14px;
    width: 100%;
  }

  .text-list {
    font-size: 14px;
  }
} */