* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 100svh;
}
body.no-scroll {
  overflow: hidden;
}


main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
main .hero {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 5rem;
}
main .hero .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2.3125rem;
  max-width: 86.875rem;
  width: 100%;
}
main .hero .container h2 {
  font-family: Montserrat Alternates, sans-serif;
  font-weight: 700;
  font-style: Bold;
  font-size: 2.25rem;
  line-height: 125%;
  text-align: center;
}
main .hero .container ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.8125rem;
  list-style: none;
}
main .hero .container ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  width: 25%;
  padding: 1.3125rem;
  border: 0.0625rem solid rgb(143, 35, 136);
  border-radius: 1rem;
  -webkit-box-shadow:0rem .4375rem .9375rem 0rem rgba(0, 0, 0, 0.1),
                0rem 1.75rem 1.75rem 0rem rgba(0, 0, 0, 0.09),
                0rem 3.875rem 2.3125rem 0rem rgba(0, 0, 0, 0.05),
                0rem 6.875rem 2.75rem 0rem rgba(0, 0, 0, 0.01),
                0rem 10.75rem 3rem 0rem rgba(0, 0, 0, 0);
          box-shadow: 0rem .4375rem .9375rem 0rem rgba(0, 0, 0, 0.1),
                0rem 1.75rem 1.75rem 0rem rgba(0, 0, 0, 0.09),
                0rem 3.875rem 2.3125rem 0rem rgba(0, 0, 0, 0.05),
                0rem 6.875rem 2.75rem 0rem rgba(0, 0, 0, 0.01),
                0rem 10.75rem 3rem 0rem rgba(0, 0, 0, 0);
background: linear-gradient(180deg, rgba(124, 80, 154, 0) 40.15%, rgba(124, 80, 154, 0.19) 168.97%);
background-color: #fff;
}
main .hero .container ul li:nth-of-type(1) img {
  width: 4.5rem;
  height: 4.5625rem;
}
main .hero .container ul li:nth-of-type(2) img {
  width: 4.4375rem;
  height: 4.4375rem;
}
main .hero .container ul li:nth-of-type(3) img {
  width: 6.125rem;
  height: 6.125rem;
}
main .hero .container ul li:nth-of-type(4) img {
  width: 4.6875rem;
  height: 4.625rem;
}
main .hero .container ul li p {
  font-family: Mazzard, sans-serif;
  font-weight: 300;
  font-size: 1rem;
  text-align: center;
  color: rgb(0, 0, 0);
}
main .hero .container button {
  width: 18.125rem;
  height: 4.1875rem;
  border-radius: 0.75rem;
  background: #8f2388;
  border: none;
  font-family: Mazzard, sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 125%;
  color: rgb(255, 255, 255);
 box-shadow: -0.0625rem .1875rem .4375rem 0rem rgba(0, 0, 0, 0.1),
                    -0.25rem .75rem .8125rem 0rem rgba(0, 0, 0, 0.09),
                    -0.625rem 1.6875rem 1.0625rem 0rem rgba(0, 0, 0, 0.05),
                    -1.125rem 3.0625rem 1.3125rem 0rem rgba(0, 0, 0, 0.01),
                    -1.75rem 4.75rem 1.4375rem 0rem rgba(0, 0, 0, 0);
}

@media all and (max-width: 1000px) {
  main .hero {
    padding: 60px 16px 25px;
    margin: 0;
    gap: 45px;
  }
  main .hero .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 30px;
    max-width: 330px;
  }
  main .hero .container h2 {
    font-size: 24px;
  }
  main .hero .container ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 12px;
  }
  main .hero .container ul li {
    width: 100%;
    font-size: 12px;
  }
  main .hero .container button {
    width: 100%;
    font-size: 16px;
  }
}