/* Main Styles */
:root {
  /* Color system */
  --primary: #1A365D;
  --primary-light: #2C5282;
  --primary-dark: #153E75;
  
  --secondary: #2B6CB0;
  --secondary-light: #4299E1;
  --secondary-dark: #2C5282;
  
  --accent: #FFCD00;
  --accent-light: #FFD700;
  --accent-dark: #F7B500;
  
  --success: #2F855A;
  --warning: #DD6B20;
  --error: #C53030;
  
  --neutral-100: #F7FAFC;
  --neutral-200: #EDF2F7;
  --neutral-300: #E2E8F0;
  --neutral-400: #CBD5E0;
  --neutral-500: #A0AEC0;
  --neutral-600: #718096;
  --neutral-700: #4A5568;
  --neutral-800: #2D3748;
  --neutral-900: #1A202C;
  
  /* Spacing system (8px) */
  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem;   /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem;   /* 32px */
  --space-5: 2.5rem; /* 40px */
  --space-6: 3rem;   /* 48px */
  
  /* Font families */
  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
}

/* Base Styles */
body {
  font-family: var(--font-body);
  color: var(--neutral-800);
  background-color: var(--neutral-100);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--neutral-900);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-2);
}


/* Hero Section */
.hero-section {
  background-color: var(--primary-light);
  color: white;
  padding: 8rem  0 2rem 0 !important;
  border-bottom: 4px solid var(--accent);
 
  
}


.hero-section h1 {
  color: white;
  margin-bottom: var(--space-1);
}

.hero-section p {
  color: rgba(255, 255, 255, 0.9);
}



.social-links {
  display: flex;
  gap: var(--space-2);
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--neutral-700);
  color: white;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: var(--accent);
  color: var(--neutral-900);
  transform: translateY(-2px);
}




/* Search and Filter */
.search-filter-section {
  background-color: var(--neutral-200);
  border-bottom: 1px solid var(--neutral-300);
}



/* Responsive adjustments */
@media (max-width: 768px) {
  .nav {
    justify-content: flex-start;
    margin-top: var(--space-1);
  }
  
  .hero-section {
    padding: var(--space-3) 0;
  }
  
  .hero-section h1 {
    font-size: 1.75rem;
  }
}