.site-footer {
  background-color: #212121;

  .navigation-wrp {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;


    @media (max-width: 992px) {
      display: none;
    }

    .navigation {
      .nav-item {
        padding: 14px 40px;
        text-decoration: none;
        font-size: 14px;
        color: #fff;
        position: relative;

        @media (max-width: 1400px) {
          padding: 14px 20px;
        }

        &::after {
          content: '';
          display: block;
          width: 0%;
          height: 2px;
          position: absolute;
          bottom: 4px;
          transform: translateX(-50%);
          left: 50%;
          border-radius: 999px;
          background-color: #fff;
          transition: all 0.3s ease;
        }

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

      .nav-item.nav-item-active {
        background-color: #fff;
        color: #212121;
      }
    }
  }

  .footer-top-wrp {
    padding: 40px 0;

    .footer-menus {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      row-gap: 32px;

      @media (max-width: 1200px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (max-width: 768px) {
        grid-template-columns: repeat(1, 1fr);
      }

      .menu-content-wrp {
        color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;


        @media (max-width: 540px) {
          flex-direction: column;
          gap: 8px;
        }

        .menu-title {
          font-size: 16px;
          font-weight: 600;
          flex: 1;

          @media (max-width: 768px) {
            text-align: end;
          }

          @media (max-width: 540px) {
            text-align: center;
          }
        }

        .menu-content {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 16px;


          @media (max-width: 540px) {
            align-items: center;
            gap: 6px;
          }

          .menu-item {
            font-size: 16px;
            color: #fff;
            text-decoration: none;
            display: block;
            position: relative;
            width: fit-content;

            &::after {
              content: '';
              display: block;
              width: 0%;
              height: 1px;
              position: absolute;
              border-radius: 999px;
              background-color: #fff;
              transition: all 0.3s ease;
            }

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

  .footer-bottom-wrp {
    padding: 14px 0;
    border-top: 1px solid #fff;
    /* border-bottom: 1px solid #fff; */

    .bottom-content {
      text-align: center;
      color: #ffffff;
      font-size: 14px;

      .all-rights-logo {
        height: 24px;
        margin-bottom: 8px;
      }

      p {
        margin: 0;
        line-height: 1.6;
      }
    }
  }
}