*
{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: all 0.3s ease;
}

body
{
  font-family: SWH Tight;
  background-color: #888e93;
}

img
{
  display: block;
}

section
{
  width: 100%;
}

section > div:first-child
{
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
}

.flex
{
  display: flex;
}

.flex-col
{
  flex-direction: column;
}

.flex-wrap
{
  flex-wrap: wrap;
}

.items-center
{
  align-items: center;
}

.buttonlink
{
  display: inline-block;
  position: relative;
  font-size: 1.1rem;
  line-height: 1.4rem;
  text-align: center;
  background-color: #c39cd8;
  color: #3d2e51;
  border-radius: 60px;
  padding: 10px 20px;
  text-decoration: none;
}

.buttonlink::before
{
  content: "";
  position: absolute;
  inset: 0;
  padding: 4px;
  border-radius: inherit;
  background: linear-gradient(to right, #966cb5, #231c2d);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.buttonlink2
{
  display: inline-block;
  line-height: 1.4rem;
  text-align: center;
  color: inherit;
  border: 4px solid #8b64aa;
  border-radius: 60px;
  padding: 6px 0;
  text-decoration: none;
  background: linear-gradient(135deg, #f2eafa 0%, #e9d6f4 50%, #f2eafa 100%);
}

.buttonlink3
{
  display: inline-block;
  line-height: 1.4rem;
  text-align: center;
  color: inherit;
  border: 4px solid #8b64aa;
  border-radius: 60px;
  padding: 6px 0;
  text-decoration: none;
  background: linear-gradient(135deg, #c4a2d9 0%, #ae82c5 50%, #c4a2d9 100%);
}

.buttonlink4
{
  display: inline-block;
  line-height: 1.4rem;
  text-align: center;
  color: inherit;
  border: 4px solid #f2e8fa;
  border-radius: 60px;
  padding: 6px 0;
  text-decoration: none;
  background: linear-gradient(135deg, #8e65ad 0%, #684c80 50%, #8e65ad 100%);
}

.buttonlink:hover
{
  background-color: #ebd0f4;
  color: #fff;
}

.buttonlink:hover::before
{
  background: #e1c3ed;
}

.rising
{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rising.is-visible
{
  opacity: 1;
  transform: translateY(0);
}

.rising:nth-child(2) { transition-delay: 0.5s; }
.rising:nth-child(3) { transition-delay: 1.0s; }
.rising:nth-child(4) { transition-delay: 1.5s; }
.rising:nth-child(5) { transition-delay: 2.0s; }

nav
{
  background-color: #fff;
  padding: 1rem 0;
  width: 100%;
}

nav ul
{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 4rem;
  max-width: 1200px;
  margin: 0 auto;
  list-style: none;
}

nav li
{
  text-transform: uppercase;
  text-align: center;
}

nav a
{
  font-size: 1.2rem;
  color: #3d2e51;
  text-decoration: none;
}

nav a:hover
{
  color: #1abc9c;
}

.swiper-slide img
{
    width: 100%;
    object-fit: cover;
}

.swiper-slide:hover img
{
    transform: scale(1.08);
}

.blog-tile
{
  width: 18rem;
  height: 18rem;
  border: 4px solid #f7f1fe;
  border-radius: 10px;
  background-color: #ebd0f4;
}

footer
{
  font-size: 1.2rem;
}

footer a, footer p
{
  color: #f8f7f9;
  display: block;
  text-decoration: none;
}

.footer-tiles
{
  margin: 1.4rem 0;
  justify-content: center;
  gap: 0.6rem;
}

.footer-tiles img
{
  width: 30%;
}

.custom-swiper-button
{
  width: 8rem;
  height: 8rem;
  margin-left: 1rem;
  background: #ebd0f4;

  mask-image: url("paths/arrow.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;

  -webkit-mask-image: url("paths/arrow.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.custom-swiper-button-prev
{
  transform: scaleX(-1);
}

.beginner-tile
{
  position: absolute;
  width: 27%;
  border: 3px solid #bd97d2;
  border-radius: 20px;
  background: linear-gradient(135deg, #e1cfec 0%, #d9bee8 50%, #e1cfec 100%);
  box-shadow: 0 0 50px #d9bee8;
  aspect-ratio: 14 / 9;
  justify-content: center;
  align-items: center;
}

.manifestation-tile div
{
  background-color: #ebd0f4;
  border: 4px solid #a9adcf;
  border-radius: 30px;
  width: 54%;
  margin: 1rem auto;
}

.manifestation-tile p
{
  font-size: 1.03rem;
  color: #3d2e51;
  margin: 1.5rem 2rem 2.5rem 3rem;
}
