@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Base styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
 * Gradient animation keyframes
 *
 * This animation shifts the gradient background across its horizontal axis
 * to create a subtle, continuous colour transition. The start and end
 * positions mirror one another so the loop appears seamless.
 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*
 * Light grey gradient animation for the page background
 *
 * This animation moves a gentle gradient of whites and greys across
 * the body element. The subtle motion provides a dynamic feel to the
 * entire site without being distracting.
 */
@keyframes lightGradientShift {
  0% {
    background-position: 50% 0%;
  }
  50% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}

body {
  font-family: 'Inter', sans-serif;
  color: #0f2347;
  line-height: 1.6;
  /* Animate a subtle white‑to‑grey gradient across the page.  We remove
     ivory to keep the palette neutral, blending pure white with soft greys
     for a professional yet understated motion. */
  /* Revise the body gradient to include stronger contrast: pure white
     transitions through very light grey and mid grey before returning
     to white. This ensures the animation reaches a clearly visible
     white point. */
  /* Use a vertical gradient so the top and bottom of the page always reach
     pure white while the mid section cycles through soft greys. This ensures
     the animation visibly touches #FFFFFF at both extremes. */
  background: linear-gradient(to bottom,
    #ffffff,
    #f6f6f6,
    #e5e5e5,
    #f6f6f6,
    #ffffff
  );
  /* Reduce the background size so the gradient travels through its
     colour stops more visibly across the viewport */
  background-size: 300% 300%;
  /* Increase the animation speed for more perceptible motion */
  animation: lightGradientShift 8s ease infinite;
  /* Ensure the gradient spans the full document height and stays fixed */
  background-attachment: fixed;
}

/* Container */
.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
header {
  background: #ffffff;
  padding: 1rem 0;
  border-bottom: 1px solid #eaeaea;
  position: sticky;
  top: 0;
  z-index: 1000;
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: #0a1931;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}
nav a {
  text-decoration: none;
  color: #0f2347;
  font-weight: 500;
  transition: color 0.3s ease;
}
nav a:hover {
  color: #394a88;
}

/* Buttons */
.btn {
  /* Slightly smaller padding and lighter weight for a more refined feel */
  padding: 0.6rem 1.2rem;
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-primary {
  background: #0a1931;
  color: #ffffff;
}
.btn-primary:hover {
  background: #092050;
}
.btn-secondary {
  background: #ffffff;
  color: #0a1931;
  border: 2px solid #0a1931;
}
.btn-secondary:hover {
  background: #f0f2f5;
}

/* Hero Section */
.hero {
  position: relative;
  color: #ffffff;
  height: 70vh;
  background-image: url('hero-bg.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Animated gradient overlay for the hero section
     We blend our core palette (dark blue, mid‑blue, teal and dark cyan) in a
     shifting linear gradient. The background-size and animation settings
     below create a smooth colour transition without requiring JavaScript. The
     opacity value ensures that the underlying hero image remains visible
     enough to showcase the swirling lines while tinting the scene. */
  /* Animated gradient overlay for the hero section
     Incorporate pure black along with our existing palette (dark blue, mid‑blue,
     teal and dark cyan). The animation speed has been increased by roughly 20 % to
     add a bit more dynamism. */
  /* Enrich the hero overlay with an additional dark teal tone (#003450).
     This palette now cycles through black, dark blue, deep cyan,
     dark teal and back to black, producing a richer sense of depth. */
  background: linear-gradient(135deg,
    #000000,
    #0a1931,
    #004c63,
    #003450,
    #000000
  );
  /* Expand the gradient to cover more area horizontally and vertically,
     accentuating the motion */
  background-size: 600% 600%;
  /* Increase the animation speed slightly for more movement */
  animation: gradientShift 8s ease infinite;
  opacity: 0.7;
}
.hero-content {
  position: relative;
  max-width: 700px;
}
.hero h1 {
  /* Slightly smaller headline for a more professional look */
  font-size: 2.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
}
.hero p {
  /* Reduce paragraph text size in the hero section */
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #e5e9f2;
}
.hero-buttons {
  display: flex;
  gap: 1rem;
}

/* Solutions Section */
.solutions {
  /* Inherit the page's animated gradient for a seamless flow */
  padding: 4rem 0;
  text-align: center;
}
.solutions h2 {
  /* Slightly smaller section heading */
  font-size: 1.8rem;
  margin-bottom: 2rem;
  color: #0a1931;
}
.solution-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.card {
  background: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  flex: 1 1 300px;
  max-width: 400px;
  text-align: left;
}
.card .icon {
  font-size: 2.5rem;
  color: #0a1931;
  margin-bottom: 1rem;
}
.card h3 {
  /* Reduce heading size for card titles */
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: #0a1931;
}
.card ul {
  list-style: disc inside;
  color: #3f486b;
  line-height: 1.6;
}
.card li {
  margin-bottom: 0.5rem;
}

/* About Section */
.about {
  padding: 4rem 0;
  /* Inherit the page's animated gradient */
}
.about h2 {
  /* Slightly smaller section heading */
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #0a1931;
}
.about p {
  margin-bottom: 1.5rem;
  color: #3f486b;
  /* Slightly reduce body text size */
  font-size: 1rem;
}

/* Center the content within the about section and limit width for readability */
.about .container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.about p {
  margin-left: auto;
  margin-right: auto;
}

/* Contact Section */
.contact {
  padding: 4rem 0;
  /* Inherit the page's animated gradient */
  text-align: center;
}
.contact h2 {
  /* Slightly smaller section heading */
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #0a1931;
}
.contact p {
  margin-bottom: 1.5rem;
  color: #3f486b;
  /* Slightly reduce body text size */
  font-size: 1rem;
}

/* Center the content within the contact section */
.contact .container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.contact p {
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
footer {
  background: #0a1931;
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
}

/* Responsive adjustments merged into the mobile navigation styles below */

/* ===================== */
/* Mobile navigation styles */
/* ===================== */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}

.menu-toggle span {
  height: 3px;
  width: 100%;
  background: #0a1931;
  border-radius: 2px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  /* Allow header container to wrap when menu and logo are on the same line */
  header .container {
    flex-wrap: wrap;
  }
  /* Hide navigation list by default on mobile */
  nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #ffffff;
    position: absolute;
    top: 60px;
    left: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    z-index: 1000;
  }
  /* Display navigation when the menu is toggled open */
  nav ul.open {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* Show the hamburger icon on mobile */
  .menu-toggle {
    display: flex;
    margin-left: auto;
  }
  /* Style the links in the mobile menu */
  nav a {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #eee;
    text-align: left;
  }
  /* Adjust hero section for mobile */
  .hero {
    padding: 4rem 1rem;
    height: auto;
    text-align: center;
  }
  /* Stack hero buttons vertically on mobile */
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }
  .hero-buttons .btn {
    width: 80%;
    margin: 0 auto;
    /* Reduce padding and font size for mobile buttons */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }

  /* Reduce hero heading size on smaller screens */
  .hero h1 {
    font-size: 2rem;
  }

  /* Stack solution cards vertically on mobile */
  .solution-cards {
    flex-direction: column;
  }
}