/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

/* Custom CSS Variables */
:root {
  --primary-blue: #133965;
  --accent-blue: #54abea;
  --button-blue: #54abea;
  --button-blue-hover: #4a9bd1;
  --light-blue: #1e4a73;
  --text-dark: #1f2937;
  --text-light: #6b7280;
}

/* Typography - Headings use Poppins, Body uses Inter */
h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

/* Navigation uses Poppins to match headers */
nav,
nav a,
nav ul,
nav li,
.nav-font {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  letter-spacing: 0.025em;
}

body,
p,
span,
div,
.body-font {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
}

/* Custom utility classes */
.bg-custom-blue {
  background-color: var(--primary-blue);
}

.bg-button-blue {
  background-color: var(--button-blue);
}

.hover\:bg-button-blue-dark:hover {
  background-color: var(--button-blue-hover);
}

.text-custom-blue {
  color: var(--accent-blue);
}

.hover\:text-custom-blue:hover {
  color: var(--accent-blue);
}

.hover\:border-custom-blue:hover {
  border-color: var(--accent-blue);
}

.border-custom-blue {
  border-color: var(--accent-blue);
}

.hover\:bg-custom-blue-light:hover {
  background-color: var(--light-blue);
}

/* Logo hover effect */
.logo-link:hover {
  transform: scale(1.05);
  transition: transform 0.2s ease-in-out;
}

/* Enhanced button styles */
.btn-primary {
  background-color: var(--button-blue);
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  display: inline-block;
}

.btn-primary:hover {
  background-color: var(--button-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(84, 171, 234, 0.3);
}

/* Smooth transitions for all interactive elements */
a,
button,
.transition-element {
  transition: all 0.2s ease-in-out;
}

/* Improved text readability */
.text-readable {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
}

.text-readable-light {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-light);
}