@import url('https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300..900&family=Outfit:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,800');

body {
  font-family: "Darker Grotesque", sans-serif;
  font-style: normal;
}


:root {
  --black: #041a2f;
  --white: #ffffff;
  --primary: #8935DE;
  /* Pink */
  --secondary: #310489;
  /* Blue */
}


.ms-slider {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: middle;
}

.ms-slider__words {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: slideWords 8s infinite ease-in-out;
}

.ms-slider__word {
  height: 1.2em;
  line-height: 36px;
  text-align: left;
}

@keyframes slideWords {

  0%,
  8% {
    transform: translateY(0%);
  }

  16%,
  24% {
    transform: translateY(-20%);
  }

  32%,
  40% {
    transform: translateY(-40%);
  }

  48%,
  56% {
    transform: translateY(-60%);
  }

  64%,
  72% {
    transform: translateY(-80%);
  }

  100% {
    transform: translateY(0%);
  }
}

.custom-card-hover:hover h3 {
  color: #FAF5FF;
}

.custom-card-hover:hover p {
  color: #FAF5FF;
}


.go_top {
  position: fixed;
  right: 38px;
  bottom: 105px;
  cursor: pointer;
  transition: .4s all;
  opacity: 0;
  border-radius: 50%;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  z-index: 1;
}

.button-custom {
  position: relative;
  z-index: 1;
  min-width: 15rem;
  padding: .7rem 5rem;
  font-size: 0.875rem;
  font-weight: 700;
  font-size: 22px;
  cursor: pointer;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 9999px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 3px solid #310489;
}

@keyframes bounceSS {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(-6px);
  }

  50% {
    transform: translateX(3px);
  }

  70% {
    transform: translateX(-2px);
  }

  100% {
    transform: translateX(0);
  }
}

.button-custom.triple:hover {
    box-shadow:
    6px 6px 0 var(--primary),
    12px 12px 0 var(--secondary);
    animation: bounceSS 1s cubic-bezier(0.22, 1, 0.36, 1);
     transform: translateX(0);
}

@media(max-width: 1300px) {

  .button-custom {

    min-width: 12rem;
    padding: .6rem 3.4rem;
    font-weight: 700;
    font-size: 20px;
    border: 3px solid #310489;
  }
}

@media(max-width: 1026px) {

  .button-custom {

    min-width: 12rem;
    padding: .5rem 3rem;
    font-weight: 700;
    font-size: 18px;
    border: 2px solid #310489;
  }
}

@media(max-width: 768px) {

  .button-custom {

    min-width: 12rem;
    padding: .4rem 2.2rem;
    font-weight: 700;
    font-size: 18px;
    border: 2px solid #310489;
  }
}

@media(max-width: 641px) {

  .button-custom {
   
    min-width: 11rem;
    padding: .4rem 0.7rem;
    font-weight: 700;
    font-size: 16px;
    border: 1px solid #310489;
  }
}