/* Color Palette */
    :root {
      --black: #000000;
      --red: #F00000;
      --white: #FFFFFF;
      --blue: #00a8f0;
      --off-white: #eaebeb;
    }

    /* Fonts */
    @font-face {
      font-family: 'Neue Haas Grotesk Display Pro 75 Bold';
      src: url('./fonts/NeueHaasGroteskDisplayPro-75-Bold.woff');
    }

    @font-face {
      font-family: 'Neue Haas Grotesk Display Pro 45 Light';
      src: url('./fonts/NeueHaasGroteskDisplayPro-45-Light.woff');
    }

    @font-face {
      font-family: 'Neue Haas Grotesk Display Pro 36 Thin Italic';
      src: url('./fonts/NeueHaasGroteskDisplayPro-36-ThinItalic.woff');
    }

    /* General Styles */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    h1 {
      font-family: 'Neue Haas Grotesk Display Pro 75 Bold';
      font-size: clamp(2rem, calc(2rem + ((1vw - 0.48rem) * 4.1667)), 5rem);
      min-height: 0vw;
      min-height: 0vw;
    }

    /* Header Styles */
    header {
      background-color: var(--black);
      color: var(--white);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header h1 {
      font-size: clamp(20px, calc(1.25rem + ((1vw - 7.68px) * 1.7361)), 40px);
      text-decoration: none;
      color: inherit;
    }

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

    .menu {
      display: flex;
    }

    .menu-item {
      margin-left: 20px;
      color: var(--white);
      font-family: 'Neue Haas Grotesk Display Pro 45 Light';
      font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 0.3472)), 20px);
      min-height: 0vw;
      text-decoration: none;
    }

    /* Main Body Styles */
    main {
      padding: 0;
    }

    section {
      padding: 20px;
      margin-bottom: 0;
    }

    .main-section {
      padding: 2% 10% 2% 10%;
    }

    .main-section h2 {
      color: var(--red);
    }

    .red-section {
      background-color: var(--red);
      color: var(--off-white);
      text-align: center;
    }

    .red-section mark {
      color: var(--off-white);
      background-color: transparent;
      text-decoration: underline;
    }

    .red-section .column {
      margin-bottom: 10px;
    }

    .red-section .column h1 {
      margin: 0;
    }

    .red-section .column h2 {
      font-family: 'Neue Haas Grotesk Display Pro 36 Thin Italic';
      margin-bottom: 10px;
    }

    .blue-section {
      background-color: var(--blue);
      padding: 20px;
      text-align: center;
    }

    .blue-section h2 {
      margin: 0;
      font-family: 'Neue Haas Grotesk Display Pro 45 Light', Arial, sans-serif;
      font-size: clamp(20px, calc(1.25rem + ((1vw - 7.68px) * 0.6944)), 28px);
      color: var(--white);
    }

    .footer {
      background-color: var(--black);
      color: var(--white);
      padding: 20px;
      display: flex;
      flex-wrap: wrap-reverse;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .footer-column {
      flex: 1;
      padding: 10px;
      margin-bottom: 0;
      font-family: 'Neue Haas Grotesk Display Pro 45 Light', Arial, sans-serif;
      font-size: clamp(16px, calc(1rem + ((1vw - 7.68px) * 0.1736)), 18px);
      min-height: 0vw;
    }

    .sub-footer {
      background-color: var(--off-white);
      color: var(--black);
      padding: 20px;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Neue Haas Grotesk Display Pro 45 Light', Arial, sans-serif;
      font-size: clamp(14px, calc(0.875rem + ((1vw - 7.68px) * 0.1736)), 16px);
    }

    .sub-footer a {
      margin-right: 10px;
      color: var(--black);
      text-decoration: none;
    }

    @media {
      .red-section,
      .blue-section {
        padding-top: 5%;
        padding-bottom: 5%;

        padding-left: 9%;
        padding-right: 9%;
        
      }
      header,
      .footer {
        padding-top: 2.5%;
        padding-bottom: 2.5%;

        padding-left: 7%;
        padding-right: 7%;
      }
    }

    /* Footer Columns Styling */
    .footer-column img {
      width: clamp(150px, calc(9.375rem + ((1vw - 7.68px) * 13.0208)), 300px);
      height: auto;
    }

    /* Responsive Footer Columns */
    @media (max-width: 601px) {
      .footer-column {
        flex-basis: 100%;
      }
    }