.footer {
  background-color: #efefef;
  padding: 30px 0 30px;
  &-top {
    .logo {
      @include mq("tablet", max) {
        text-align: center;
      }
    }
    .phone {
      margin-left: 10px;
      @include mq("tablet", max) {
        margin-left: -20px;
        display: flex;
        justify-content: center;
      }
      i {
        margin-right: 10px;
        position: relative;
        z-index: 2;
        color: white;

        &::after {
          content: "";
          position: absolute;
          border-radius: 50%;
          @extend %c-c;
          width: 26px;
          height: 26px;
          background-color: #5b5b5b;
          z-index: -2;
          @extend %tr02;
        }
      }

      &:hover {
        span {
          text-decoration: underline;
        }
        i::after {
          background-color: $my-orange;
        }
      }

      font-size: 16px;
      font-weight: 600;
      color: rgb(1, 1, 1);
      line-height: 1.2;
    }
    .nav {
      display: flex;
      flex-direction: column;

      &-item {
        font-size: 16px;
        font-weight: 600;
        color: rgb(0, 0, 0);
        line-height: 1.2;
        text-align: left;
        opacity: 1;
        padding: 0;
        // &:first-of-type {
        //   margin-bottom: 20px;

        //   @include mq("tablet", max) {
        //     margin-top: 20px;
        //     margin-bottom: 10px;
        //     font-size: 18px;
        //   }
        // }
      }

      &-link {
        margin: 0;
        margin-bottom: 10px;
        padding: 0;
        font-size: 14px;
        opacity: 1;
        font-weight: 600;
        color: rgb(0, 0, 0);
        line-height: 1.2;
        text-align: left;
        display: block;
        &:hover {
          text-decoration: underline;
          color: $my-orange;
        }

        @include mq("tablet", max) {
          text-align: center;
        }
      }
    }

    .socials {
      display: flex;
      // flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      @include mq("tablet-wide", max) {
        flex-direction: row;
        justify-content: center;
      }

      a {
        display: block;
        margin-bottom: 10px;
        &:not(:last-of-type) {
          // @include mq("tablet-wide", max) {
          margin-right: 25px;
          // }
        }
        i {
          font-size: 14px;
          position: relative;
          z-index: 2;
          color: white;

          &::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            @extend %c-c;
            width: 26px;
            height: 26px;
            background-color: #5b5b5b;
            z-index: -2;
            @extend %tr02;
          }
        }

        &:hover {
          span {
            text-decoration: underline;
          }
          i::after {
            background-color: $my-orange;
          }
        }
      }
    }
  }

  .copyright,
  .software-company {
    font-size: 14px;
    font-weight: normal;
    color: rgb(0, 0, 0);

    a {
      &:hover {
        color: $my-orange;
        text-decoration: underline;
      }
    }

    @include mq("tablet", max) {
      text-align: center;
    }
  }

  // &-bottom {
  //   margin-top: 20px;
  //   @include mq("tablet", max) {
  //     margin-top: 0;
  //   }
  //   .container {
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;

  //     @include mq("tablet", max) {
  //       flex-direction: column;
  //       text-align: center;
  //     }
  //   }

  //   padding: 15px 0;
  //   border-top: 1px solid rgba(0, 0, 0, 0.102);

  // }

  .payments {
    p {
      font-size: 14px;
      font-weight: 600;
      color: rgb(0, 0, 0);
      text-align: left;
      line-height: 1;
      padding: 0;
      margin: 0;
      margin-bottom: 15px;

      @include mq("tablet-wide", max) {
        margin-bottom: 25px;
      }
      @include mq("tablet", max) {
        margin-bottom: 0;
        margin-top: 15px;
      }
    }
    &-item {
      height: 50px;
      width: 100px;
    }
    & > div {
      margin-top: -20px;

      img {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
      }

      @include mq("tablet-wide", max) {
        margin-top: -40px;
      }
      @include mq("tablet", max) {
        margin-top: 0;
      }
    }
  }
}