.footer {
  &.section {
  }
  &.footer-3 {
    @extend %p-relative;
    z-index: 1;

    &::before {
      z-index: -1;
      @extend %p-absolute;
      inset: 0;
      background-color: rgba($color-1, 0.5);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
  }
  &-newsletter {
    padding-block-start: 85px;

    @include breakpoint(max-md) {
      padding-block-start: 50px;
    }
    &__form {
      @extend %p-relative, %d-flex, %item-center;
      border: 1px solid rgba($color-white, 0.25);
      height: 80px;
      border-radius: 50px;
      overflow: hidden;
      padding-block: 10px;
      padding-inline: 40px 14px;
      gap: 10px;

      @include breakpoint(max-xl) {
        height: 60px;
        padding-block: 5px;
        padding-inline: 30px 5px;
      }
      @include breakpoint(max-sm) {
        flex-direction: column;
        border: none;
        padding: 0;
        overflow: initial;
        height: auto;
      }

      .form-control {
        border: none;
        height: 100%;
        background-color: transparent;
        color: $color-white;
        width: 100%;
        padding: 0;

        &::placeholder {
          color: $color-white;
          opacity: 0.7;
        }
        &:focus,
        &:active {
          box-shadow: none;
          border: none;
        }
        @include breakpoint(max-sm) {
          height: 50px;
          padding-block: 5px;
          padding-inline: 30px 5px;
          border: 1px solid rgba($color-white, 0.25);
          border-radius: 50px;
          -ms-flex-negative: 0;
          flex-shrink: 0;
        }
      }
      .agx-btn {
        @extend %w-content, %d-inline-flex;
        height: 100%;

        @include breakpoint(min-xl) {
          padding-block: 0;
        }
        @include breakpoint(max-sm) {
          width: 100%;
        }
      }
    }
  }
  &-top {
    .container {
      border-bottom: 1px solid rgba($color-5, 0.14);
      padding-bottom: 42px;

      @include breakpoint(max-lg) {
        padding-bottom: 30px;
      }
      @include breakpoint(max-md) {
        padding-bottom: 20px;
      }
    }
    &.v2 {
      .container {
        border-bottom: 1px solid $color-5;
      }
    }
    .footer-widgets {
      .footer-links {
        ul {
          @extend %d-flex, %flex-wrap, %justify-end, %item-center;
          gap: 30px;
          @include breakpoint(max-lg) {
            justify-content: start;
            -ms-flex-pack: start;
            -webkit-box-pack: start;
          }
          @include breakpoint(max-md) {
            gap: 15px;
          }
          li {
            margin-bottom: 0;
            &:not(:last-of-type) {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
  &-main {
    padding: 80px 0 50px;
    &.v2 {
      padding-block: 55px;

      @include breakpoint(max-md) {
        padding-block: 30px;
      }

      .social-icons {
        margin-top: 50px;

        @include breakpoint(max-md) {
          margin-top: 30px;
        }
      }
    }
    .site-info {
      p {
        color: $color-5;
        margin-top: 25px;
        max-width: 520px;
        font-size: 16px;

        @include breakpoint(max-md) {
          margin-top: 20px;
        }
      }
    }
    .social-icons {
      margin-top: 65px;
      @include breakpoint(max-lg) {
        margin-top: 40px;
      }
      @include breakpoint(max-md) {
        margin-top: 30px;
      }
    }
  }
  &-main2 {
    padding-block: 85px;

    @include breakpoint(max-md) {
      padding-block: 50px;
    }
    &__content {
      .site-info {
        h2 {
          line-height: 120%;
          font-weight: 500;

          @include breakpoint(xl) {
            font-size: 50px;
          }
        }
        p {
          margin-top: 10px;
          @include breakpoint(max-md) {
            margin-top: 5px;
          }
        }
      }
      .news-letter {
        margin-top: 40px;
        @include breakpoint(max-md) {
          margin-top: 20px;
        }
        .input-group {
          gap: 10px;

          @include breakpoint(max-sm) {
            flex-direction: column;
          }

          .form-control {
            border-radius: 10px !important;
            border: 1px solid rgba($color-white, 0.14);
            max-width: 410px;
            background-color: transparent;
            height: 60px;
            color: $color-white;

            &::placeholder {
              opacity: 1;
              color: $color-5;
              font-family: $ff-dm-sans;
              font-size: 20px;
              font-weight: 400;
              line-height: 1;
            }
            &:focus,
            &:active {
              box-shadow: none;
              border-color: rgba($color-primary, 0.5);
            }

            @include breakpoint(max-lg) {
              max-width: 100%;
              width: 100%;
            }
            @include breakpoint(max-md) {
              height: 50px;
              max-width: 100%;
              width: auto;
            }
            @include breakpoint(max-sm) {
              max-width: 100%;
              width: 100%;
            }
          }
          button {
            height: 100%;

            @include breakpoint(max-md) {
              height: 50px;
            }
          }
        }
      }
      .social-icons {
        margin-top: 25px;
        @include breakpoint(max-md) {
          margin-top: 15px;
        }
      }
    }
    .footer-widgets {
      .footer-links {
        .title {
          margin-bottom: 15px;
          @include breakpoint(max-md) {
            margin-bottom: 8px;
          }
        }
        &:not(:first-of-type) {
          margin-top: 35px;
          @include breakpoint(max-md) {
            margin-top: 15px;
          }
        }
        ul {
          li {
            i {
              width: auto;
              height: auto;
              color: $color-8;
              border: none;
            }
          }
        }

        &.f-3 {
          ul {
            li {
              i {
                color: $color-primary;
              }
            }
          }
        }
      }
    }
  }
  &-bottom {
    &__content {
      @extend %d-flex, %justify-between, %item-center, %text-regular;
      gap: 20px;
      font-size: $fs-14;
      color: $color-5;
      line-height: 162.5%;
      padding: 33px 0;
      &.has-border-top {
        border-top: 1px solid rgba($color-5, 0.2);
      }

      a {
        color: inherit;

        &:hover {
          color: $color-primary;
        }
      }

      .copyright {
        a {
          @extend %text-semi-bold;
        }
      }
      .footer-menu {
        ul {
          @extend %d-flex, %justify-between, %item-center, %flex-wrap;
          gap: 38px;

          @include breakpoint(max-lg) {
            gap: 15px;
          }
          @include breakpoint(max-sm) {
            flex-direction: column;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            gap: 10px;
          }
        }
      }

      @include breakpoint(max-lg) {
        gap: 10px;
      }
      @include breakpoint(max-md) {
        padding: 20px 0;
        flex-direction: column;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
      }
    }

    &.v2 {
      border-top-color: rgba(#4e4e4e, 0.2);
      .footer-menu {
        ul {
          gap: 40px;
          @include breakpoint(max-lg) {
            flex-direction: column;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            gap: 10px;
          }

          li {
            @extend %p-relative;
            @include breakpoint(lg) {
              &:not(:last-of-type) {
                &::after {
                  position: absolute;
                  content: "";
                  width: 1px;
                  height: 100%;
                  top: 0;
                  right: -20px;
                  background-color: rgba($color-white, 0.7);
                }
              }
            }
          }
        }
      }
    }
  }
}

.social-icons {
  ul {
    @extend %d-flex, %item-center;
    gap: 10px;

    li {
      a {
        @extend %d-grid, %place-center, %shrink-0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        background-color: transparent;
        color: $color-white;
        border: 1px solid $color-primary;
        font-size: $fs-14;

        &:hover {
          background-color: $color-primary;
          color: $color-1;
        }
      }
    }
  }

  &.v2 {
    ul {
      li {
        a {
          border: 1px solid rgba($color-white, 0.1);
          background: rgba($color-primary, 0.14);

          &:hover {
            border-color: $color-primary;
            background: $color-primary;
          }
        }
      }
    }
  }
}

.footer-widgets {
  .footer-title {
    margin-bottom: 25px;

    @include breakpoint(max-md) {
      margin-bottom: 20px;
    }
  }
  .footer-links {
    ul {
      li {
        @extend %d-flex, %justify-start, %item-center;
        gap: 15px;

        i {
          @extend %d-grid, %place-center;
          @include transition($transition);
          width: 40px;
          height: 40px;
          flex-shrink: 0;
          color: $color-5;
          border-radius: 100%;
          border: 1px solid $color-5;
          overflow: hidden;
          font-size: $fs-14;
        }
        p {
          color: $color-5;
          line-height: normal;
        }
        a {
          color: $color-5;
          line-height: normal;

          &:hover {
            color: $color-primary;
          }
        }

        &:not(:last-of-type) {
          margin-bottom: 20px;

          @include breakpoint(max-md) {
            margin-bottom: 10px;
          }
        }

        &:hover {
          i {
            border-color: $color-primary;
            color: $color-primary;
          }
        }
      }
    }
  }
}
