:root {
  --color-brand-primary: #c3a775;
  --color-brand-secondary: #24326b;
  --color-brand-tertiary: #fcb547;
  --color-primary: #1860ff;
  --color-secondary: #0ba4e5;
}

body {
  font-family: 'aktiv-grotesk', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-bold {
  font-family: 'aktiv-grotesk', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.font-hair {
  font-family: 'aktiv-grotesk', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 200;
  font-style: normal;
}

.gradient-text {
   background: linear-gradient(to right, var(--color-secondary), var(--color-primary));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
  /* color: var(--color-primary); */
}

.move-up {
  display: inline-block;
  overflow: hidden;
}

.move-up--item {
  display: block;
  transform: translateY(115%);
  /* animation: moveUp 3s cubic-bezier(0.19, 1, 0.22, 1) forwards; */
  animation: moveUp 1.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
  /* animation-delay: 0.75s;  */
}
@keyframes moveUp {
  to {
    transform: translateY(0);
    opacity: 1; /* Animate opacity to make it visible */
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2.25s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: 0.95s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.background-image-container {
  background-image: url('./img/waves.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  min-height: 600px;
  background-position: top;
  display: none;
}

.icon {
  width: 50px;
  height: 50px;
}

.icon--color {
  fill: var(--color-brand-tertiary);
}

.color--primary {
  color: var(--color-brand-tertiary);
}

.color--secondary {
  color: var(--color-secondary);
}

.bg-color--primary {
  background-color: var(--color-primary);
}

.bg-color--brand-secondary {
  background-color: var(--color-brand-secondary);
}

.bg-color--footer {
  background-color: var(--color-brand-secondary);
}