/* YA COLLECTS - Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,700;0,800;0,900;1,700;1,800;1,900&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --hw-red: #E32636;
  --hw-blue: #0033A0;
  --hw-yellow: #FFD100;
  --hw-dark: #111111;
}

body {
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Montserrat', sans-serif;
}

.gradient-text {
  background: linear-gradient(to right, #E32636, #FFD100);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.btn-gradient {
  background: linear-gradient(135deg, #E32636 0%, #a81c28 100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(227, 38, 54, 0.4);
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

@keyframes floatAnim {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: floatAnim 3s ease-in-out infinite;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Modal styling */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
}