@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css');
@import url('https://unpkg.com/aos@2.3.1/dist/aos.css');

/* Global Styles for AutoSolo - Super Stylish with Animations & Transitions */
:root {
  --clr-primary: #1E3A8A;
  --clr-secondary: #F3F4F6;
  --clr-accent: #4B5563;
  --clr-bg: #FFFFFF;
  --font-logo: 'Pacifico', cursive;
  --font-base: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  background: linear-gradient(45deg, #1E3A8A, #4B5563, #6B7280, #3B4252);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--clr-accent);
  line-height: 1.6;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-logo);
  color: var(--clr-primary);
  margin-bottom: 0.5rem;
}

/* Links & Buttons */
a {
  color: var(--clr-primary);
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease;
}
a:hover {
  color: var(--clr-accent);
  transform: translateY(-2px);
}

button, .btn, .submit-btn, .card a {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--clr-primary) !important;
  color: #fff !important;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
button:hover, .btn:hover, .submit-btn:hover, .card a:hover {
  background: var(--clr-accent) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Containers & Cards */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}
.card, .bg-white {
  background: var(--clr-bg) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover, .bg-white:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
}

/* Sections & Footer */
.section, #featured, .bg-gray-50, .bg-primary, .bg-gradient-to-r {
  padding: 4rem 0 !important;
}
footer {
  background: var(--clr-primary) !important;
  color: #fff !important;
  text-align: center;
  padding: 1rem;
}

/* Animation Utilities */
.fade-in {
  animation: fadeIn 1s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.slide-up {
  animation: slideUp 1s ease both;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.pulse-on-hover:hover {
  animation: pulse 0.6s ease both;
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}