footer#main-footer {
  color: var(--color-primary-foreground);
  background-color: var(--color-primary);
}

  footer#main-footer div#footer-grid {
    display: grid;
    margin: 0 auto;
    width: min(92%, 1200px);
    padding-block: calc(var(--space) * 16);
    gap: calc(var(--space) * 12);
  }

    footer#main-footer div#footer-grid #brand-column .footer-logo {
      display: flex;
      align-items: center;
      gap: calc(var(--space) * 2.5);
      margin-bottom: calc(var(--space) * 4);
    }

      footer#main-footer div#footer-grid #brand-column .footer-logo svg {
        color: var(--color-primary-foreground);
        width: calc(var(--space) * 9);
        height: calc(var(--space) * 9);
      }

      footer#main-footer div#footer-grid #brand-column .brand-text-wrapper {
        display: flex;
        flex-direction: column;
      }

        footer#main-footer div#footer-grid #brand-column .brand-text-wrapper .brand-name {
          font-size: 1.125rem;
          font-weight: 600;
          letter-spacing: 0.025rem;
        }

        footer#main-footer div#footer-grid #brand-column .brand-text-wrapper .brand-subtitle {
          color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
          text-transform: uppercase;
          letter-spacing: 0.05rem;
          font-size: 0.625rem;
          font-weight: 500;
        }

      footer#main-footer div#footer-grid #brand-column .footer-desc {
        color: color-mix(in oklab, var(--color-primary-foreground) 75%, transparent);
        line-height: 1.625rem;
        font-size: 0.875rem;
      }

      footer#main-footer div#footer-grid #brand-column .footer-pana-badge {
        display: inline-flex;
        align-items: center;
        margin-top: calc(var(--space) * 5);
        color: var(--color-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        padding: calc(var(--space) * 1.5) calc(var(--space) * 3);
        background-color: color-mix(in oklab, var(--color-secondary) 15%, transparent);
        border-radius: calc(0.5rem - 2px);
        gap: calc(var(--space) * 2);
      }

        footer#main-footer div#footer-grid #brand-column .footer-pana-badge svg {
          width: calc(var(--space) * 3.5);
          height: calc(var(--space) * 3.5);
        }

    footer#main-footer div#footer-grid #nav-column h4 {
      text-transform: uppercase;
      color: var(--color-secondary);
      letter-spacing: 0.05rem;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: calc(var(--space) * 4);
    }

    footer#main-footer div#footer-grid #nav-column ul {
      color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
      font-size: 0.875rem;
      list-style: none;
    }

      footer#main-footer div#footer-grid #nav-column ul li:not(:last-child)  {
        margin-bottom: 0.875rem;
      }

        footer#main-footer div#footer-grid #nav-column ul li a {
          color: inherit;
          text-decoration: inherit;
        }

        footer#main-footer div#footer-grid #nav-column ul li a:hover {
          color: var(--color-secondary);
        }

    footer#main-footer div#footer-grid #contact-column h4 {
      text-transform: uppercase;
      color: var(--color-secondary);
      letter-spacing: 0.05rem;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: calc(var(--space) * 4);
    }

    footer#main-footer div#footer-grid #contact-column ul {
      color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
      font-size: 0.875rem;
      list-style: none;
    }

      footer#main-footer div#footer-grid #contact-column ul li {
        display: flex;
        gap: calc(var(--space) * 2.5);
      }

      footer#main-footer div#footer-grid #contact-column ul li:not(:last-child)  {
        margin-bottom: 0.875rem;
      }

        footer#main-footer div#footer-grid #contact-column ul li svg {
          flex-shrink: 0;
          width: calc(var(--space) * 4);
          height: calc(var(--space) * 4);
          margin-top: calc(var(--space) * .5);
          color: var(--color-secondary);
        }

        footer#main-footer div#footer-grid #contact-column ul li a {
          text-decoration: inherit;
          color: inherit;
        }

        footer#main-footer div#footer-grid #contact-column ul li a:hover {
          color: var(--color-secondary);
        }

    footer#main-footer div#footer-grid #legal-column h4 {
      text-transform: uppercase;
      color: var(--color-secondary);
      letter-spacing: 0.05rem;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: calc(var(--space) * 4);
    }

    footer#main-footer div#footer-grid #legal-column ul {
      color: color-mix(in oklab, var(--color-primary-foreground) 80%, transparent);
      font-size: 0.875rem;
      list-style: none;
    }

      footer#main-footer div#footer-grid #legal-column ul li:not(:last-child)  {
        margin-bottom: 0.875rem;
      }

        footer#main-footer div#footer-grid #legal-column ul li a {
          color: inherit;
          text-decoration: inherit;
        }

        footer#main-footer div#footer-grid #legal-column ul li a:hover {
          color: var(--color-secondary);
        }

  footer#main-footer div#footer-bottom {
    border-top: 1px solid color-mix(in oklab, var(--color-primary-foreground) 10%, transparent);
  }

    footer#main-footer div#footer-bottom .copyright-wrapper {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: space-between;
      width: min(92%, 1200px);
      margin: 0 auto;
      color: color-mix(in oklab, var(--color-primary-foreground) 60%, transparent);
      font-size: 0.75rem;
      gap: calc(var(--space) * 3);
      padding-block: calc(var(--space) * 5);
    }

      footer#main-footer div#footer-bottom .copyright-wrapper2 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        row-gap: calc(var(--space) * 1);
        column-gap: calc(var(--space) * 4);
      }
      
        footer#main-footer div#footer-bottom .copyright-wrapper a {
          color: inherit;
          text-decoration: inherit;
          text-decoration-line: underline;
          text-underline-offset: 2px;
        }
      
        footer#main-footer div#footer-bottom .copyright-wrapper a:hover {
          color: var(--color-secondary);
        }