@import "../colors/colors.scss";

body {
  footer.footer {
    background-color: $blueDark2;
    overflow: hidden;
    position: relative;
    z-index: 10;
    .footer_top {
      padding: 40px 0 24px;
      border-bottom: solid 3px $blueDark2;
      .logo {
        display: block;
        max-width: max-content;
        img {
          height: auto;
          max-width: 339px;
        }
      }
    }
    .footer_bottom {
      padding: 16px 0;
      .nav {
        gap: 10px;
        .nav-item {
          .nav-link {
            color: $sky;
            font-size: 20px;
            font-weight: 400;
            padding: 0 10px 0 0;
            position: relative;
            &:after {
              content: "";
              background: $sky;
              height: 100%;
              width: 2px;
              position: absolute;
              top: 50%;
              left: 100%;
              transform: translate(0, -50%);
            }
          }
          &:last-child {
            .nav-link {
              padding: 0;
              &:after {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1580px) {
  body {
    footer.footer {
      .footer_bottom {
        p {
          font-size: 16px;
        }
        .nav {
          .nav-item {
            .nav-link {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1380px) {
  body {
    footer.footer {
      .footer_bottom {
        p {
          font-size: 14px;
        }
        .nav {
          gap: 8px;
          .nav-item {
            .nav-link {
              font-size: 14px;
              padding: 0 8px 0 0;
            }
            &:last-child {
              .nav-link {
                padding: 0;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1180px) {
  body {
    footer.footer {
      .footer_top {
        .logo {
          img {
            max-width: 194px;
          }
        }
      }
      .footer_bottom {
        p {
          font-size: 12px;
        }
        .nav {
          .nav-item {
            .nav-link {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
@media (max-width: 767px) {
  body {
    footer.footer {
      .footer_bottom {
        .nav {
          flex-direction: column;
          text-align: center;
          .nav-item {
            .nav-link {
              padding: 0;
              &:after {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 567px) {
  body {
    footer.footer {
      .footer_top {
        padding: 24px 0;
      }
      .footer_bottom {
        p {
          font-size: 14px;
        }
        .nav {
          .nav-item {
            .nav-link {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}