body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #222; /* Darkened from #777 for better readability */
}

/* Updated Blue: #0041C2 passes 4.5:1 contrast against white */
.caption span.border {
  background-color: #0041C2; 
  color: #ffffff;
  padding: 18px 40px;
  font-size: 5vw;
  white-space: normal;
  display: inline-block;
  border-radius: 4px;
}

.caption {
  position: absolute;
  left: 0;
  top: 45%;
  width: 100%;
  text-align: center;
}

/* WCAG AA Compliant Blue Box */
.caption span.border {
  background-color: #0041C2; 
  color: #ffffff;
  padding: 18px 40px;
  font-size: 5vw;
  display: inline-block;
  border-radius: 4px;
}

/* Language Button Container */
.lang-container {
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Accessible Language Buttons */
.lang-btn {
  background-color: #ffffff;
  color: #1a1a1a; /* Dark text on light background */
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid #949494 !important;
  transition: all 0.2s ease;

  display: inline-block;
}

.lang-btn:hover {
  background-color: #f8f9fa;
  color: #0041C2;
  transform: scale(1.05);
}

/* CRITICAL: Visible Focus State for Keyboard Users */
.lang-btn:focus, .sign-in-link:focus {
  outline: 3px solid #FFBF47; /* Bright gold focus ring */
  outline-offset: 3px;
  transform: scale(1.05);
}

.name_s {
  color: #0041C2; /* Ensure "Sign In" text is readable */
}

@media only screen and (max-device-width: 1024px) {
  .bgimg-1 { background-attachment: scroll; }
}

  
  .bgimg-1, .bgimg-2, .bgimg-3 {
    position: relative;
    opacity: 0.65;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  
  }
  .bgimg-1 {
    background-image: url(/assets/slide04-03371596ed451aff08bd050ae4a4308074414187b572c73df8137b5618b36468.jpg);
    min-height: 100%;
  }
  
  .bgimg-2 {
    background-image: url(/assets/slide03-2b5f30c6e03e83df4dccc88cf7bd437eb020261932553104efea5e470b61f40f.jpg);
    min-height: 400px;
  }
  
  .bgimg-3 {
    background-image: url(/assets/slide02-ddb0ee76cc013fcc9d1b6a9b347613b2b71af648884b3cd1c5048e2351a4be99.jpg);
    min-height: 400px;
  }
  .landimg-1 {
    background-image: url(/assets/IMG_9864-57e620d5c695b67ee940c46c84234b1e4d4986fc96fff8d87cc1d6b3b1a20cf1.jpg);
    min-height: 100%;
  }
  .landimg-2 {
    background-image: url(/assets/IMG_9850-a12561f814682fb0c8d3fe55d1a747b057fd23347bc68be50157df53678b517a.jpg);
    min-height: 100%;
  }
  .landimg-3 {
    background-image: url(/assets/IMG_9844-c787e1802b4d176a177f195aa6b07d8c9ec910e65acfb62938286ce80c78e524.jpg);
    min-height: 100%;
  }

.landimg-4 {
  /* 1. The Image */
  background-image: url(/assets/slide04-03371596ed451aff08bd050ae4a4308074414187b572c73df8137b5618b36468.jpg);
  
  /* 2. Layout & Visibility */
  min-height: 100vh; /* Critical: ensures the div has height to show the image */
  position: relative;
  opacity: 1; /* Keep at 1 for clarity; use a dark overlay if text is hard to read */
  
  /* 3. Background Behavior */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* Fallback color while image loads */
  background-color: #000; 
}

.btn-signin-nav {
  padding: 8px 12px; /* Expands the clickable hit-zone */
  text-decoration: none;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.btn-signin-nav:hover {
  background-color: rgba(0, 0, 0, 0.05); /* Subtle feedback */
  transform: scale(1.05); /* Your preferred hover effect */
}

/* High-contrast focus ring for WCAG AA */
.btn-signin-nav:focus-visible {
  outline: 3px solid #0056b3;
  outline-offset: 4px;
}