/* ===================================
   BASE STYLES - GLOBAL CSS
   Variables, Reset, Typography
   
   CSS STRUCTURE:
   ==============
   GLOBAL CSS (used across all pages):
   - base.css: Variables, reset, typography, utilities
   - header.css: Navigation and header styles
   - cta-footer.css: Footer and CTA section styles
   
   SHARED COMPONENT CSS (reusable components):
   - hero.css: Hero section base styles
   - animations.css: Animation utilities
   - about-vision.css: About and Vision section styles
   - mission-services.css: Mission and Services section styles
   
   PAGE SPECIFIC CSS (unique to each page):
   - index.css: Homepage specific styles
   - about-us.css: About Us page specific styles
   =================================== */

:root {
  /* Color Palette - Navy Blue Theme */
  --primary-navy: #0a1f44;
  --secondary-navy: #143a6f;
  --accent-blue: #2e5c9a;
  --light-blue: #4a7bb8;
  --white: #ffffff;
  --light-gray: #f5f7fa;
  --text-dark: #1a1a1a;
  --text-gray: #5a5a5a;

  /* Typography */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-secondary: 'Lato', sans-serif;

  /* Spacing */
  --section-padding: 80px 0;
  --container-max-width: 1180px;
}

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

body {
  font-family: var(--font-primary);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-40 {
  margin-top: 40px;
}

section {
  scroll-margin-top: 67px;
}

/* ===================================
   CTA BUTTON STYLES
   Apply gradient to all CTA buttons except in hero section and cta-box
   =================================== */

/* Apply gradient to all btn-primary buttons (will be overridden by hero.css for hero sections) */
.btn-primary {
  background: linear-gradient(135deg, #2c5282 0%, #1e3a5f 100%);
  color: white;
  transition: all 0.3s ease;
}

/* Hover state for btn-primary - reverse gradient */
.btn-primary:hover {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Apply gradient to all btn-primary-large buttons */
.btn-primary-large {
  background: linear-gradient(135deg, #2c5282 0%, #1e3a5f 100%);
  color: white;
  transition: all 0.3s ease;
}

/* Hover state for btn-primary-large - reverse gradient */
.btn-primary-large:hover {
  background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}