/* =========================================================
   QUICKENED FOOTER
========================================================= */

.site-footer {
  width: 100%;
  padding: 18px 18px 20px;

  background: #f5f7fb;

  box-sizing: border-box;

  overflow: visible;
}

/* =========================================================
   FOOTER BOX
========================================================= */

.site-footer-box {
  width: 100%;
  max-width: none;

  padding: 48px 56px 22px;

  box-sizing: border-box;

  background: #03183f;

  border: 1px solid rgba(128, 170, 255, 0.14);

  border-radius: 24px;

  box-shadow: 0 18px 45px rgba(3, 24, 63, 0.12);
}

/* =========================================================
   TOP
========================================================= */

.site-footer-top {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(160px, 1fr)
    minmax(160px, 1fr)
    minmax(160px, 1fr);

  column-gap: 70px;

  align-items: start;
}

/* =========================================================
   BRAND
========================================================= */

.site-footer-brand {
  min-width: 0;
}

.site-footer-logo {
  display: inline-flex;

  align-items: center;

  text-decoration: none;
}

.site-footer-logo img {
  display: block;

  width: 125px;
  height: auto;

  max-width: 100%;
}

.site-footer-description {
  width: 100%;
  max-width: 330px;

  margin: 20px 0 22px;

  color: rgba(255, 255, 255, 0.63);

  font-size: 13px;

  line-height: 1.7;
}

/* =========================================================
   SOCIALS
========================================================= */

.site-footer-socials {
  display: flex;

  align-items: center;

  gap: 9px;
}

.site-footer-socials a {
  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex: 0 0 30px;

  border-radius: 7px;

  background: rgba(255, 255, 255, 0.08);

  color: #ffffff;

  text-decoration: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.site-footer-socials svg {
  display: block;

  width: 15px;
  height: 15px;

  fill: currentColor;
}

.site-footer-socials a:nth-child(2) svg {
  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;
}

.site-footer-socials a:hover {
  background: #dd031b;

  color: #ffffff;

  transform: translateY(-2px);
}

/* =========================================================
   FOOTER COLUMNS
========================================================= */

.site-footer-column {
  min-width: 0;

  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 12px;
}

.site-footer-column h4 {
  margin: 0 0 7px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.3;
}

.site-footer-column h4::after {
  content: "";

  display: block;

  width: 20px;
  height: 2px;

  margin-top: 8px;

  background: #dd031b;

  border-radius: 2px;
}

.site-footer-column a {
  display: block;

  color: rgba(255, 255, 255, 0.62);

  font-size: 13px;

  line-height: 1.4;

  white-space: nowrap;

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.site-footer-column a:hover {
  color: #80aaff;

  transform: translateX(3px);
}

/* =========================================================
   DIVIDER
========================================================= */

.site-footer-divider {
  width: 100%;

  height: 1px;

  margin: 44px 0 20px;

  background: rgba(255, 255, 255, 0.12);
}

/* =========================================================
   BOTTOM
========================================================= */

.site-footer-bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  color: rgba(255, 255, 255, 0.42);

  font-size: 12px;

  line-height: 1.5;
}

.site-footer-copyright {
  display: block;
}

.site-footer-legal {
  display: flex;

  align-items: center;

  gap: 25px;
}

.site-footer-legal a {
  color: rgba(255, 255, 255, 0.52);

  text-decoration: none;

  transition: color 0.25s ease;
}

.site-footer-legal a:hover {
  color: #ffffff;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {
  .site-footer-top {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(130px, 1fr)
      minmax(130px, 1fr);

    column-gap: 45px;
    row-gap: 45px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {
  .site-footer {
    padding: 12px;
  }

  .site-footer-box {
    padding: 34px 24px 22px;

    border-radius: 20px;
  }

  .site-footer-top {
    grid-template-columns: 1fr 1fr;

    column-gap: 24px;
    row-gap: 36px;
  }

  .site-footer-brand {
    grid-column: 1 / -1;
  }

  .site-footer-column a {
    white-space: normal;
  }

  .site-footer-description {
    max-width: 100%;
  }

  .site-footer-divider {
    margin: 35px 0 20px;
  }

  .site-footer-bottom {
    align-items: flex-start;

    flex-direction: column;

    gap: 14px;
  }

  .site-footer-legal {
    gap: 18px;

    flex-wrap: wrap;
  }
}

/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 430px) {
  .site-footer-top {
    grid-template-columns: 1fr;

    row-gap: 30px;
  }

  .site-footer-brand {
    grid-column: auto;
  }

  .site-footer-logo img {
    width: 115px;
  }

  .site-footer-column h4 {
    font-size: 13px;
  }

  .site-footer-column a {
    font-size: 12px;
  }

  .site-footer-bottom {
    font-size: 11px;
  }
}