/* Global reset and base styles */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
}

/* Navbar */
.navbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#004080; /* same dark blue as footer */
  width:100%; /* full width */
  padding:10px 20px;
  color:#fff;
}

.nav-links {
  display:flex;
  gap:16px;
  align-items:center;
}

.nav-links a {
  color:#fff;
  text-decoration:none;
  padding:6px 10px;
}

.nav-links a:hover {
  background:rgba(255,255,255,0.2);
  border-radius:4px;
}

.menu-toggle {
  display:none;
  font-size:1.5rem;
  background:none;
  border:none;
  color:#fff;
}

/* Staff Email button */
.staff-email-link {
  background:#28a745;
  color:#fff;
  padding:6px 12px;
  border-radius:4px;
  text-decoration:none;
  margin-left:16px;
}
.staff-email-link:hover { background:#218838; }

/* Fullscreen Hero Slider */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* full viewport height */
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.slide.active { opacity: 1; }

/* Gradient overlay for text readability */
.hero::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.1));
  z-index:1;
}

/* Hero text overlay */
.hero-text {
  position: absolute;
  bottom: 15%;
  left: 10%;
  right: 10%;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  max-width: 700px;
  font-size: 1.2rem;
  line-height: 1.4;
  z-index:2;
}

@media (max-width: 768px) {
  .hero-text {
    bottom: 10%;
    font-size: 1rem;
    max-width: 90%;
    text-align: center;
  }
}

/* Slider dots */
.slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index:2;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background 0.3s ease;
}
.dot.active { background: #004080; }
.dot:hover { background: #0070ff; }

/* Container */
.container { max-width:1100px; margin:20px auto; padding:0 20px; }
.section-title { margin-bottom:10px; font-size:1.5rem; color:#004080; }

/* Cards */
.card-grid, .about-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.card, .about-card {
  padding:16px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  transition:transform 0.2s ease;
}
.card:hover, .about-card:hover { transform:translateY(-4px); }

/* Pastel backgrounds rotating */
.card:nth-child(1), .about-card:nth-child(1) { background:#f9f9ff; }
.card:nth-child(2), .about-card:nth-child(2) { background:#f0fff9; }
.card:nth-child(3), .about-card:nth-child(3) { background:#fff9f0; }
.card:nth-child(4), .about-card:nth-child(4) { background:#f9f0ff; }
.card:nth-child(5) { background:#f0f9ff; }
.card:nth-child(6) { background:#fff0f9; }
.card:nth-child(7) { background:#f9fff0; }

/* Values list */
.values-list {
  list-style-type: disc;
  padding-left: 20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px 40px;
}
.values-list li { margin-bottom:6px; }

/* Contact form */
.contact-form {
  background:#f9f9ff;
  border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.08);
  padding:24px;
  transition:box-shadow 0.3s ease;
}
.contact-form:hover {
  box-shadow:0 6px 14px rgba(0,0,0,0.12);
}

.row.three-cols {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-bottom:16px;
}

.field label {
  font-weight:bold;
  margin-bottom:6px;
  display:block;
  color:#004080;
}

.field input, .field textarea {
  width:100%;
  padding:10px;
  border:1px solid #ccc;
  border-radius:6px;
  font-size:0.95rem;
  transition:border-color 0.2s ease;
}
.field input:focus, .field textarea:focus {
  border-color:#004080;
  outline:none;
}

.form-actions {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.home-btn {
  background:#004080;
  color:#fff;
  border:none;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  font-weight:bold;
  transition:background 0.2s ease;
}
.home-btn:hover { background:#003060; }

#formStatus {
  font-size:0.9rem;
  color:#555;
}

.contact-details {
  margin-top:18px;
  text-align:center;
  font-size:0.95rem;
  color:#333;
  border-top:1px solid #ddd;
  padding-top:12px;
}

/* Footer */
footer {
  background:#004080; /* unified dark blue */
  color:#fff;
  text-align:center;
  padding:12px;
  margin-top:20px;
}