.steps {
  width: 100%;
  margin: 40px 0;
}
.steps h2 {
  margin-bottom: 80px;
}
.steps__content {
  position: relative;
  width: 100%;
  height: 1200px;
  margin-top: 80px;
}
.steps__item {
  position: absolute;
  width: 300px;
}
.steps__item-1 {
  z-index: 4;
  top: 0;
  right: 5%;
}
.steps__item-2 {
  z-index: 3;
  top: 10%;
  left: 28%;
}
.steps__item-3 {
  z-index: 2;
  bottom: 20%;
  left: 0%;
}
.steps__item-4 {
  z-index: 1;
  bottom: 0;
  right: 25%
}

.steps__item__arrow {
  position: absolute;
  z-index: -2;
  max-width: unset;
}
.steps__item-2 .steps__item__arrow {
  width: 250px;
  top: 0;
  left: calc(100% + 40px);
}
.steps__item-3 .steps__item__arrow {
  width: 300px;
  bottom: calc(100% + 30px);
  left: 20%;
}
.steps__item-4 .steps__item__arrow {
  width: 360px;
  top: -25%;
  right: calc(100% + 25px);
  transform: rotate(4deg)
}

.steps__item__nbr {
  position: absolute;
  z-index: -1;
  font-size: 180px;
  font-weight: 700;
  opacity: 0.5;
}
.steps__item-1 .steps__item__nbr {
  top: 0;
  right: 0;
  transform: translate(30%, -70%);
  color: var(--pink);
  opacity: 0.75;
}
.steps__item-2 .steps__item__nbr {
  top: 0;
  left: 0;
  transform: translate(-60%, -80%);
  color: var(--green)
}
.steps__item-3 .steps__item__nbr {
  bottom: 0;
  right: 0;
  transform: translate(55%, 75%);
  color: var(--yellow)
}
.steps__item-4 .steps__item__nbr {
  top: 0;
  right: 0;
  transform: translate(75%, -50%);
  color: var(--blue2)
}

.steps__item__card {
  width: 100%;
  aspect-ratio: 1/1;
  padding: 40px;
  border-radius: 25px;
  background-color: #fff;
  box-shadow: 0 0 30px 6px rgba(0,200,232,0.1);
}
.steps__item-1 .steps__item__card {transform: rotate(-10deg)}
.steps__item-2 .steps__item__card {transform: rotate(0deg)}
.steps__item-3 .steps__item__card {transform: rotate(15deg);}
.steps__item-4 .steps__item__card {transform: rotate(7deg);}

.steps__item__card h3 {
  font-size: var(--fontSizeH2);
  font-weight: 900;
  margin-top: 15px;
  margin-bottom: 0;
  color: #fff;
  text-shadow: -1px -1px 0 #000,
  -1px 1px 0 #000,
  1px -1px 0 #000,
  1px 1px 0 #000;
}
.steps__item__card p {
  font-size: var(--fontSizeP2);
  font-weight: 500;
}
.steps__item__card p b {
  font-family: "Poppins";
  font-weight: 800;
}

@media (max-width: 1600px) {
  .steps__content {
    height: 850px
  }
  .steps__item {
    width: 250px;
  }
  .steps__item__card {
    aspect-ratio: 1/0.7;
  }
  .steps__item__nbr {
    font-size: 140px;
  }
  .steps__item-3 {
    bottom: 25%
  }
  .steps__item-3 .steps__item__nbr {
    bottom: 50%;
    right: -40%;
  }
  .steps__item-4 .steps__item__arrow {
    right: calc(100% + 35px);
  }
}

@media (max-width: 1440px) {
  .steps__item-3 {
    left: 5%;
  }
}

@media (max-width: 1400px) {
  .steps__content {
    height: auto;
  }
  .steps__item {
    position: relative;
    top: unset;
    right: unset;
    bottom: unset;
    left: unset;
    margin-bottom: 200px;
  }
  .steps__item-1 {transform: translate(50%, 0)}
  .steps__item-2 {transform: translate(-50%, 0)}
  .steps__item-3 {transform: translate(50%, 0)}
  .steps__item-4 {transform: translate(-50%, 0)}

  .steps__item-2 .steps__item__arrow {
    width: 300px;
    top: unset;
    bottom: calc(100% + 40px);
    left: 100%;
    transform: rotate(-70deg);
  }
  .steps__item-3 .steps__item__arrow {
    width: 300px;
    bottom: calc(100% + 30px);
    left: unset;
    right: 70%;
    transform: rotate(-90deg);
  }
  .steps__item-4 .steps__item__arrow {
    width: 360px;
    top: unset;
    bottom: calc(110% + 40px);
    right: 0%;
    transform: rotate(90deg)
  }

  .steps__item-1 .steps__item__nbr {
    right: 100%;
    transform: translate(-20%, -25%);
  }
  .steps__item-2 .steps__item__nbr {
    transform: translate(-20%, -80%);
  }
  .steps__item-3 .steps__item__nbr {
    bottom: 100%;
    right: 0;
    transform: translate(40%, 40%);
  }
  .steps__item-4 .steps__item__nbr {
    top: 0;
    right: 0;
    transform: translate(75%, -50%);
  }
}

@media (max-width: 800px) {
  .steps__item {
    width: 80%;
    max-width: 300px;
  }
  .steps__item-1 {transform: translate(20%, 0)}
  .steps__item-2 {transform: translate(-20%, 0)}
  .steps__item-3 {transform: translate(20%, 0)}
  .steps__item-4 {transform: translate(-20%, 0)}

  .steps__item__card {
    padding: 25px;
  }

  .steps__item-2 .steps__item__arrow {
    width: 250px;
    bottom: calc(100% + 40px);
    left: 70%;
    transform: rotate(-70deg) rotateX(180deg);
  }
  .steps__item-3 .steps__item__arrow {
    width: 260px;
    bottom: calc(110% + 30px);
    right: 75%;
  }
  .steps__item-4 .steps__item__arrow {
    width: 280px;
    right: 30%;
  }
  
  .steps__item__nbr {
    font-size: 140px;
  }
  .steps__item-1 .steps__item__nbr {
    right: 100%;
    transform: translate(50%, -60%);
  }
  .steps__item-2 .steps__item__nbr {
    transform: translate(-20%, -80%);
  }
  .steps__item-3 .steps__item__nbr {
    bottom: 100%;
    right: 0;
    transform: translate(40%, 40%);
  }
  .steps__item-4 .steps__item__nbr {
    top: -5%;
    right: 25%;
    transform: translate(75%, -50%);
  }
}

@media (max-width: 500px) {
  .steps__item-1 {transform: translate(0, 0)}
  .steps__item-2 {transform: translate(0, 0)}
  .steps__item-3 {transform: translate(0, 0)}
  .steps__item-4 {transform: translate(0, 0)}
  .steps__item__card {
    transform: rotate(0)!important;
  }
  .steps__item-2 .steps__item__arrow {
    bottom: calc(110% + 40px);
    left: 50%;
  }
  .steps__item-3 .steps__item__arrow {
    bottom: calc(115% + 40px);
    right: 30%;
  }
  .steps__item-4 .steps__item__arrow {
  }
}