/* Footer Styles */
.main-footer {
  background-color: var(--dark-gray);
  padding: var(--spacing-xl) 0;
  border-top: 1px solid var(--dark-gray-lighter);

  .footer-content {
    display: flex;
    justify-content: space-between;

    @media (max-width: var(--breakpoint-md)) {
      flex-direction: column;
      gap: var(--spacing-lg);
    }
  }

  .footer-logo {
    img {
      height: 50px;
      margin-bottom: var(--spacing-md);
    }

    p {
      color: var(--light-gray);
      font-size: 0.875rem;
    }
  }

  .footer-links {
    display: flex;
    gap: var(--spacing-xl);

    @media (max-width: var(--breakpoint-sm)) {
      flex-wrap: wrap;
      gap: var(--spacing-lg);
    }

    .link-group {
      h4 {
        font-size: 1.125rem;
        margin-bottom: var(--spacing-md);
        position: relative;
        padding-bottom: var(--spacing-sm);

        &:after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 30px;
          height: 2px;
          background-color: var(--primary-color);
        }
      }

      ul {
        li {
          margin-bottom: var(--spacing-sm);

          &:last-child {
            margin-bottom: 0;
          }

          a {
            color: var(--light-gray);
            transition: var(--transition-base);

            &:hover {
              color: var(--primary-color);
            }
          }
        }
      }
    }
  }
}