/* Import DM Sans from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');


/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'DM Sans', sans-serif;
  line-height: 1.6;
}

/* Custom styles to complement Tailwind CSS */
.font-acfw-sans {
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.text-acfw-teal {
  color: #38909c;
}

.border-gold {
  border-color: #c3a265;
}

.bg-acfw-teal {
  background-color: #38909c;
}

.header-link:hover {
  color: #38909c;
}

.tickets:hover {
  background-color: #38909c;
}

.text-65xl {
  font-size: 4.25rem;
  line-height: 4.38rem;
}

.text-55xl {
  font-size: 3.25rem;
  line-height: 3.38rem;
}

.bg-acfw-teal-gradient {
  background: linear-gradient(0deg, #39909c 0%, #84a29a 100%);
}

.bg-acfw-teal-center-gradient {
  background-image: radial-gradient(circle at top,  #39909c 20%, #84a29a 80%);
}

.bg-acfw-yellow {
  background: #f4ca7e;
}

/* ANIMATIONS */
.button-pop {
  animation: buttonPop 0.5s ease forwards 0.4s;
  max-height: 4.5rem;
  color: rgba(56, 144, 156, 0);
}

@keyframes buttonPop {
  from {
    width: 10%;
    color: rgba(56, 144, 156, 0);
  }

  to {
    width: 80%;
    color: rgba(255, 255, 255, 1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  opacity: 0;
  animation: fadeInUp 0.5s ease forwards;
}

.animate-fade-up-slow {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.delay-1 {
  animation-delay: 0.1s;
}

.delay-2 {
  animation-delay: 0.3s;
}

.delay-3 {
  animation-delay: 0.5s;
}

.delay-4 {
  animation-delay: 0.7s;
}

.delay-5 {
  animation-delay: 1.5s;
}

/* Rotate Gradient */

@property --gradient-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.animate-rotate-gradient {
  --gradient-angle: 0deg;
  background: linear-gradient(0deg, #39909c 0%, #84a29a 100%);
  background: linear-gradient(var(--gradient-angle, 0deg), #39909c 0%, #84a29a 100%);
  animation: rotate-gradient 6s linear infinite;
  animation-delay: 1.2s;
}

@keyframes rotate-gradient {
  from {
    --gradient-angle: 0deg;
  }
  to {
    --gradient-angle: 360deg;
  }
}