.footer {
  padding: 5rem 0 3rem 3rem;
  background: linear-gradient(0deg, #ffffff, #fee9f7);

  @media (max-width: 1024px) {
    padding: 0 0 1rem;
  }

  .container {
    display: flex;
    width: 90%;
    margin: 0 auto;

    @media (max-width: 1024px) {
      flex-direction: column-reverse;
      align-items: center;
      gap: 1.5rem;
    }

    .profile {
      width: 100%;
      display: flex;
      gap: 2rem;

      @media (max-width: 1024px) {
        flex-direction: column;
      }

      .nav_wrapper {
        @media (max-width: 1024px) {
          padding: 2rem;
          border: 2px solid #3d3d3d;
          border-radius: 1rem;
        }

        .nav_title {
          font-family: $font-f-title;
          font-weight: $font-w-700;
          text-transform: uppercase;
          font-size: 1.4rem;
          margin-bottom: 0.5rem;
          margin-bottom: 1.5rem;
        }

        .nav {
          line-height: 1.5;
          display: flex;
          flex-direction: column;
          gap: 1rem;

          a {
            font-family: $font-f-secondary;
            font-weight: $font-w-700;
            letter-spacing: $ls-secondary;
            font-size: 1.2rem;
            display: inline-block;
            position: relative;
            font-size: 1.3rem;
          }

          a::after {
            content: "";
            position: absolute;
            width: 100%;
            transform: scaleX(0);
            height: 2px;
            bottom: 0rem;
            left: 0rem;
            background-color: #000;
            transform-origin: bottom right;
            transition: transform 0.25s ease-out;
          }

          a:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
          }
        }

        .subTitle {
          font-family: $font-f-title;
          font-weight: $font-w-700;
          font-size: 12px;
          margin-top: 1.5rem;
          margin-bottom: 1.5rems;
        }
      }
    }

    .socials_wrapper {
      width: 100%;

      .socials {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-self: auto;
        padding-top: 1.5rem;
        margin-bottom: 5rem;
        font-size: 2rem;

        @media (max-width: 1024px) {
          border-top: $border-modal;
          padding-top: 1.5rem;
        }

        a {
          color: #3d3d3d;
          display: flex;
          align-items: center;
          padding: 0.5rem;
          border-radius: 0.4rem;

          -moz-transition: all 0.1s ease-in;
          -o-transition: all 0.1s ease-in;
          -webkit-transition: all 0.1s ease-in;
          transition: all 0.1s ease-in;

          &:hover {
            background: $back-c-highlight;
          }
        }
      }
    }

    .sitemap {
      @extend .profile;
      justify-content: end;
      margin-top: 20px;
      @media (min-width: 1024px) {
        margin-top: 0;
      }
    }
  }
}
