.btn-white {
  background-color: #fff;
  border: solid 1px #81D1D7;
  border-radius: 40px;
  box-shadow: 5px 5px 15px 0px rgba(216, 216, 216, 0.1);
  color: #81D1D7;
  font-family: "M PLUS Rounded 1c";
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
  transition-duration: 0.4s;
  width: 296px;
}
.btn-white::before {
  background-color: #81D1D7;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 21px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 36px;
  height: 36px;
  transition-duration: 0.4s;
}
.btn-white:hover::before {
  background-color: #fff;
}
.btn-white::after {
  color: #fff;
  content: "\f077";
  font-family: "Font Awesome 6 Free";
  font-size: 1.125rem;
  font-weight: 600;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-45%) rotate(90deg);
  -webkit-transform: translateY(-45%) rotate(90deg);
  -ms-transform: translateY(-45%) rotate(90deg);
  right: 30px;
  transition-duration: 0.4s;
}
.btn-white:hover::after {
  color: #81D1D7;
}
.btn-white:hover {
  background-color: #81D1D7;
  color: #fff;
  opacity: 1;
}

.btn-color {
  background-color: #81D1D7;
  border-radius: 40px;
  box-shadow: 5px 5px 15px 0px rgba(216, 216, 216, 0.1);
  color: #fff;
  font-family: "M PLUS Rounded 1c";
  font-size: 1.125rem;
  font-weight: 500;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0;
  position: relative;
  transition-duration: 0.4s;
  width: 296px;
}
.btn-color::before {
  background-color: #fff;
  border-radius: 50%;
  content: "";
  position: absolute;
  right: 21px;
  top: 50%;
  transform: translateY(-45%);
  -webkit-transform: translateY(-45%);
  -ms-transform: translateY(-45%);
  width: 36px;
  height: 36px;
  transition-duration: 0.4s;
}
.btn-color:hover::before {
  background-color: #81D1D7;
}
.btn-color::after {
  color: #81D1D7;
  content: "\f077";
  font-family: "Font Awesome 6 Free";
  font-size: 17px;
  font-weight: 600;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-45%) rotate(90deg);
  -webkit-transform: translateY(-45%) rotate(90deg);
  -ms-transform: translateY(-45%) rotate(90deg);
  right: 30px;
  transition-duration: 0.4s;
}
.btn-color:hover::after {
  color: #fff;
}
.btn-color:hover {
  background-color: #fff;
  border: solid 1px #81D1D7;
  color: #81D1D7;
  opacity: 1;
}

.btn-white.pink {
  border: solid 1px #FEA28F;
  color: #FEA28F;
}
.btn-white.pink::before {
  background-color: #FEA28F;
}
.btn-white.pink:hover::before {
  background-color: #fff;
}
.btn-white.pink:hover::after {
  color: #FEA28F;
}
.btn-white.pink:hover {
  background-color: #FEA28F;
  color: #fff;
}

.btn-color.c-pink {
  background-color: #FEA28F;
}
.btn-color.c-pink::before {
  background-color: #fff;
}
.btn-color.c-pink:hover::before {
  background-color: #FEA28F;
}
.btn-color.c-pink::after {
  color: #FEA28F;
}
.btn-color.c-pink:hover::after {
  color: #fff;
}
.btn-color.c-pink:hover {
  background-color: #fff;
  border: solid 1px #FEA28F;
  color: #FEA28F;
}

.btn-white.gr {
  border: solid 1px #81D798;
  color: #81D798;
}
.btn-white.gr::before {
  background-color: #81D798;
}
.btn-white.gr:hover::before {
  background-color: #fff;
}
.btn-white.gr:hover::after {
  color: #81D798;
}
.btn-white.gr:hover {
  background-color: #81D798;
  color: #fff;
}

@media screen and (max-width: 860px) {
  .btn-color,
  .btn-white {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    padding: 14px 0;
    width: 220px;
  }
  .btn-color::before,
  .btn-white::before {
    height: 25px;
    width: 25px;
    right: 13px;
  }
  .btn-color::after,
  .btn-white::after {
    font-size: 0.725rem;
    right: 19px;
  }
}/*# sourceMappingURL=btn.css.map */