/* some vars */
:root {
  font-family: 'Fira Sans', sans-serif;
  --slate: #333333;
  --dim: #aaaaaa;
  --link-active: #005690;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  line-height: 1.6;
  color: #1e293b;
  background-color: #ffffff;
}

/* Accessibility and ARIA Support */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0.25rem 0.5rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Skip Link for Accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-weight: 600;
  border-radius: 0 0 4px 0;
}

.skip-link:focus {
  top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

/* Navigation */
.navbar {
  background-color: #1e293b;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo h1 {
  color: #ffffff;
  font-size: 1.8rem;
  letter-spacing: 2px;
  font-weight: 700;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: #cbd5e1;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size: 1rem;
}

.nav-links a:hover,
.nav-links a.active {
  color: #3b82f6;
}

/* Messages */
.message {
  padding: 1rem 2rem;
  border-radius: 6px;
  margin: 1rem 0;
  font-weight: 600;
}

.message-error {
  color: #b91c1c;
}

/*
  Create a simple spinner using an inline SVG image and CSS animation.
  To use, apply the class "simple-spinner" to a span element.
  <span class='simple-spinner'></span>
  It defaults to 14px by 14px, but you can adjust the width and height using inline CSS as needed.

  optionally add the 'back-spin' class for a more dynamic spin
  <span class='simple-spinner back-spin'></span>

  You can put anything you want in the span, the spinner will replace the contents
  so you can use the content for screen readers or testing or in case the css fails
  for some reason.
  <span class='simple-spinner'>loading...</span>
*/
.simple-spinner {
  width: 14px;
  height: 14px;
  cursor: wait;
  animation: spinner-spin 2s linear infinite;
  content: url("data:image/svg+xml,<svg width='100' height='100' viewBox='-15 -15 30 30' xmlns='http://www.w3.org/2000/svg'><path d='M 13 0 A 13 13 0 0 1 6.5 11.25 M -6.5 11.25 A 13 13 0 0 1 -13 0 M -6.5 -11.25 A 13 13 0 0 1 6.5 -11.25' fill='currentColor' stroke='currentColor' stroke-width='1'/></svg>");
}

@keyframes spinner-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes back-spin {
  0% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(1080deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

.simple-spinner.back-spin {
  animation: back-spin 6s linear infinite;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 80px 0;
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-content h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 14px 32px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background-color: #ffffff;
  color: #667eea;
}

.btn-primary:hover {
  background-color: #f0f4f8;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
  background-color: #3b82f6;
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-full {
  width: 100%;
}

/* Features Section */
.features {
  padding: 80px 0;
  background-color: #f8fafc;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #1e293b;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  margin-bottom: 1.5rem;
}

.feature-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.feature-card p {
  color: #64748b;
  line-height: 1.7;
}

/* CTA Section */
.cta {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.cta h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
  opacity: 0.95;
}


.instructions {
  color: var(--dim);
  font-style: italic;
  margin-bottom: 1rem;
}

/* Footer */
footer {
  background-color: #1e293b;
  color: #cbd5e1;
  padding: 2rem 0;
  text-align: center;
}

footer p {
  margin: 0.5rem 0;
}

/* Page Header */
.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 60px 0;
  text-align: center;
}

.page-header h2 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.page-header p {
  font-size: 1.25rem;
  opacity: 0.95;
}

/* Content Section */
.content-section {
  padding: 80px 0;
}

.content-box {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 0 auto;
}

.content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.content-text h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.content-text p {
  color: #64748b;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.content-image svg {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Portal Section */
.portal-box {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 0 auto;
}

.portal-box fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.portal-box div.element-group {
  margin: 5px 0;
}


.portal-box label {
  display: block;
  font-family: 'Aleo';
  padding-bottom: 4px;
  font-size: 1.25em;
}

.portal-box input:not([type="checkbox"]) {
  border-radius: 2px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1.25em;
  font-family: 'Aleo';
  width: 500px;
  padding: 8px;
}

.portal-box button {
  height: 50px;
  background: green;
  color: white;
  border: 2px solid darkgreen;
  font-size: 1.25em;
  font-family: 'Aleo';
  border-radius: 4px;
  cursor: pointer;
}

.portal-box button:hover {
  border: 2px solid black;
}

.portal-box #terms-and-conditions {
  font-size: small;
}

/* Mission Section */
.mission-section {
  background-color: #f8fafc;
  padding: 80px 0;
}

.mission-box {
  background: white;
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.mission-box h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #1e293b;
}

.mission-statement {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #475569;
}

/* Values Section */
.values-section {
  padding: 80px 0;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.value-card {
  text-align: center;
  padding: 2rem;
}

.value-icon {
  margin-bottom: 1rem;
}

.value-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.value-card p {
  color: #64748b;
  line-height: 1.7;
}

/* services Section */
.services-section {
  background-color: #f8fafc;
  padding: 80px 0;
}

.services-box h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  color: #1e293b;
  text-align: center;
}

.services-box h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 1.2rem;
  color: #1e293b;
  text-align: center;
}

.services-box ul {
  list-style: none;
  padding-left: 0;
}

.services-box ul li ul {
  padding-left: 1.5rem;
  list-style: disc;
}

.services-box ul li ul li {
  padding-top: 10px;
}

/* Contact Section */
.contact-section {
  padding: 80px 0;
  background-color: #f8fafc;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #1e293b;
}

.contact-info>p {
  color: #64748b;
  margin-bottom: 2rem;
  line-height: 1.8;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1rem;
}

.contact-icon {
  flex-shrink: 0;
}

.contact-item h4 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #1e293b;
}

.contact-item p {
  color: #64748b;
  line-height: 1.7;
}

/* Contact Form */
.contact-form-box {
  background: white;
  padding: 2.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-form-box h3 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #1e293b;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: #475569;
  font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  font-size: 1.2rem;
  font-family: inherit;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid #1d4ed8;
  outline-offset: 1px;
  border-color: #3b82f6;
}

.form-group textarea {
  resize: vertical;
}

/* Map Section */
.map-section {
  padding: 60px 0;
}

.map-placeholder {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {

  .hero .container,
  .content-grid,
  .contact-grid,
  .services-box {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .hero-content h2 {
    font-size: 2rem;
  }

  .section-title,
  .page-header h2 {
    font-size: 2rem;
  }

  .nav-links {
    gap: 1rem;
  }

  .feature-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 40px 0;
  }

  .features,
  .content-section,
  .mission-section,
  .values-section,
  .contact-section {
    padding: 40px 0;
  }

  .cta {
    padding: 40px 0;
  }

  .cta h2 {
    font-size: 1.75rem;
  }
}