/** Shopify CDN: Minification failed

Line 33:0 All "@import" rules must come first

**/
/* Import Tailwind CSS */
@import url('https://cdn.tailwindcss.com');

/* Custom styles */
.container {
  max-width: 1200px;
}

/* Scrolling banner animation */
.scrolling-banner-inner {
  animation: scroll 30s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Font families */
body {
  font-family: 'Inter', sans-serif;
}

.font-logo {
  font-family: 'Kalam', cursive;
}

@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&display=swap');

h1,h2,h3 {
  font-family: "BBH Sans Hegarty", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Custom utilities */
.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

/* Button styles */
.btn-primary {
  @apply bg-cyan-500 hover:bg-cyan-600 text-white font-semibold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-700 hover:bg-gray-600 text-white font-semibold py-2 px-4 rounded;
}

/* Form styles */
.form-input {
  @apply bg-gray-700/50 border border-gray-600 rounded py-2 px-4 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-cyan-500;
}

/* Card styles */
.card {
  @apply bg-white/5 backdrop-blur-sm border border-white/10 rounded-lg p-6;
}

/* Responsive utilities */
@media (max-width: 768px) {
  .container {
    @apply px-4;
  }
}

.lg\:grid-cols-1 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.lg\:grid-cols-2 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.lg\:grid-cols-3 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.lg\:grid-cols-4 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.lg\:grid-cols-5 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.lg\:grid-cols-6 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.lg\:grid-cols-7 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
.lg\:grid-cols-8 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
.lg\:grid-cols-9 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
.lg\:grid-cols-10 {
  @media (width >= 64rem) {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}