footer {
  border-top: 1px solid $lightGrey;
  color: $charcoal;

  .main-footer {
    padding: 0 30px;
    .footer-contents {
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
      padding: 100px 0;
      align-items: start;
      justify-content: center;
      gap: 70px;

      .navigation {
        align-items: top;
        gap: 50px;

        .navlinks {
          gap: 10px;

          .header {
            font-size: 16px;
            color: black;
          }

          .navlink {
            width: fit-content;
            position: relative;
            text-decoration: none;
            cursor: pointer;
            color: $charcoal;
            font-size: 13px;

            &::after {
              content: "";
              position: absolute;
              left: 0;
              bottom: -2px;
              width: 0;
              height: 2px;
              background-color: $charcoal;
              transition: width 0.3s ease-in-out;
            }

            &:hover::after {
              width: 100%;
            }
          }
        }
      }

      .address-container {
        max-width: 400px;
        gap: 20px;

        p {
          margin: 0;
        }

        .address {
          &:hover {
            text-decoration: underline;
          }
        }

        a {
          color: $charcoal;
        }
      }

      .newsletter-container {
        width: 400px;
        gap: 30px;

        @include sm-desktop {
          align-items: center;
          justify-self: center;
        }

        @include m-phone {
          align-items: center;
          justify-content: center;
        }

        @include sm-phone {
          align-items: center;
          justify-content: center;
        }

        .newsletter {
          width: 100%;

          @include m-phone {
            align-items: center;
            justify-content: center;
          }

          @include sm-phone {
            align-items: center;
            justify-content: center;
          }

          .email-input {
            width: 100%;
          }
        }

        .logo-container {
          width: 200px;

          img {
            width: 100%;
          }
        }

        .socmed-container {
          align-items: center;

          .icon {
            cursor: pointer;
            transition: 0.2s all;

            &:hover {
              color: $butternut;
            }
          }

          .facebook {
            width: 30px;
            height: 30px;
          }

          .instagram {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    .copyright-container {
      justify-content: center;
      border-top: 1px solid $lightGrey;
      color: $charcoal;
      padding: 20px 0;

      p {
        margin: 0;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}