:root {
    --primary-dark: #00385c;
    --white: #ffffff;
    --grey-border: #cdcdcd;
    --grey-text: #9f9f9f;
    --black: #000000;
    --grey-bg: #eaeaea;
  }

  body {
    font-family: 'Inria Sans', sans-serif;
    background-color: var(--white);
    color: var(--black);
    margin: 0;
    padding: 0;
  }

  .page-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    overflow-x: hidden;
    position: relative;
    background-color: var(--white);
  }

  a {
    text-decoration: none;
    color: inherit;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  button {
    cursor: pointer;
    border: none;
    font-family: inherit;
  }

  input,
  textarea {
    font-family: inherit;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  img {
    max-width: 100%;
    height: auto;
    display: block;
  }  

  /* Responsive Styles */
  @media (max-width: 1200px) {
    .header-container,
    .hero-content,
    .footer-container {
      padding-left: 40px;
      padding-right: 40px;
    }
  }

  @media (max-width: 1024px) {
    .main-nav ul {
      gap: 40px;
    }

    .hero-content {
      flex-direction: column;
      text-align: center;
      gap: 20px;
      padding-top: 80px; /* Adjust for absolute header */
    }

    .hero-description-box {
      flex-direction: column;
      gap: 20px;
      align-items: center;
    }

    .footer-top {
      flex-direction: column;
      align-items: center;
      gap: 40px;
    }

    .footer-nav {
      flex-wrap: wrap;
      justify-content: center;
      text-align: center;
    }
    .footer-nav-col:not(:last-child)::after {
        content: none;
    }
  }

  @media (max-width: 768px) {
    .main-header {
      position: static;
    }
    .header-container {
      flex-direction: column;
      gap: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .main-nav ul {
      justify-content: center;
      gap: 20px 30px;
      flex-wrap: wrap;
    }
    .hero-section {
      height: auto;
      padding: 60px 20px;
    }
    .hero-title {
      font-size: 36px;
    }
    .form-section {
      padding: 40px 20px;
    }
    .form-row {
      flex-direction: column;
      gap: 13px;
    }
    .submit-button {
      width: 100%;
    }
    .footer-nav {
      flex-direction: column;
      gap: 30px;
    }
  }
