/* Brand Colors */
:root {
  --main-blue: #024873;
  --lightest-blue: #88DFF2;
  --lighter-blue: #59B5D9;
  --light-blue: #0A8CBF;
  --dark-blue: #021D40;
  --greenish: #A8BFB7;
  --gray: #EBF2F0; /* Use as light background */
  --lighter-red: #FF7676;
  --darker-red: #FF605C; /* Accent for CTA */

  --text-dark: #333333; /* A slightly softer black for body text */
  --white: #FFFFFF;
}

body {
  margin: 0;
  /* Common modern font stack */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Set the main blue as the solid base background */
  background-color: var(--main-blue);

  /* Layer multiple gradients for a more complex, irregular texture */
  /* Format: linear-gradient(angle, color-stop1, color-stop2, ...) */
  /* We use RGBA colors for transparency to allow layers to blend */
  background-image:
      /* Layer 1: Thin, sparse, faded lightest blue lines */
      linear-gradient(
          135deg, /* Angle */
          transparent 49.2%, /* Mostly transparent */
          rgba(136, 223, 242, 0.25) 49.5%, /* Faded Lightest Blue starts thin */
          rgba(136, 223, 242, 0.25) 50.5%, /* Faded Lightest Blue ends thin */
          transparent 50.8% /* Mostly transparent */
      ),
      /* Layer 2: Medium width, faded lighter blue lines at a different angle */
      linear-gradient(
          65deg,
          transparent 48.5%,
          rgba(89, 181, 217, 0.3) 49.5%, /* Faded Lighter Blue */
          rgba(89, 181, 217, 0.3) 51.5%,
          transparent 52.5%
      ),
      /* Layer 3: Wider, subtle dark blue bands/waves */
      linear-gradient(
          -20deg,
          transparent 45%,
          rgba(2, 29, 64, 0.35) 48%, /* Faded Dark Blue */
          rgba(2, 29, 64, 0.35) 53%,
          transparent 56%
      ),
       /* Layer 4: Another set of thin light blue lines, different angle/spacing */
       linear-gradient(
          190deg,
          transparent 49.6%,
          rgba(10, 140, 191, 0.2) 49.8%, /* Very Faded Light Blue */
          rgba(10, 140, 191, 0.2) 50.2%,
          transparent 50.4%
       );

  /* Optional: Adjust the scale of each pattern layer independently */
  /* Uncomment and experiment with sizes if needed */
  /* background-size: 80px 80px, 100px 100px, 120px 120px, 60px 60px; */

  color: var(--text-dark); /* Default text color */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.container {
  background-color: var(--white); /* White card for content */
  padding: 40px 50px; /* More horizontal padding */
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* Slightly softer shadow */
  max-width: 700px; /* Slightly wider container */
  width: 100%; /* Responsive width */
  box-sizing: border-box;
}

.logo {
  max-width: 220px; /* Adjust size as needed */
  height: auto;
  margin-bottom: 35px;
}

.message-box {
  /* Removed background/border - inherit from container */
  color: var(--main-blue); /* Use main blue for the message */
  padding: 0; /* Remove padding, rely on margin */
  margin: 30px 0;
  font-size: 1.2em; /* Slightly larger message text */
  line-height: 1.7;
  font-weight: 500; /* Slightly bolder */
}

.contact-info {
  margin-top: 35px;
  margin-bottom: 25px; /* Add margin below text */
  font-size: 1.0em;
  line-height: 1.6;
  color: var(--text-dark); /* Standard text color */
}

.contact-button {
  display: inline-block;
  /* Removed top margin, handled by .contact-info margin-bottom */
  padding: 14px 30px; /* Slightly larger button padding */
  background-color: var(--darker-red); /* Red accent CTA */
  color: var(--white);
  text-decoration: none;
  border-radius: 6px; /* Slightly less rounded */
  font-weight: bold;
  font-size: 1.0em;
  transition: background-color 0.2s ease-in-out, transform 0.1s ease;
  border: none; /* Ensure no default border */
  cursor: pointer;
  margin-top: 30px;
}

.contact-button:hover,
.contact-button:focus {
  background-color: var(--lighter-red); /* Lighter red on hover/focus */
  transform: translateY(-2px); /* Subtle lift effect */
  outline: none; /* Remove default focus outline */
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .container {
      padding: 30px 25px; /* Adjust padding for smaller screens */
  }
  .logo {
      max-width: 180px;
      margin-bottom: 25px;
  }
  .message-box {
      font-size: 1.1em;
      margin: 25px 0;
  }
  .contact-info {
       margin-top: 25px;
       margin-bottom: 20px;
  }
  .contact-button {
      padding: 12px 25px;
  }
}