/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  overflow: hidden;
}

/* ---- Decorative Ellipses ---- */

.footer__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.footer__ellipse {
  position: absolute;
  border-radius: 50%;
}

.footer__ellipse--1 {
  width: 1653px;
  height: 539px;
  top: -109px;
  left: 280px;
  background: radial-gradient(ellipse, rgba(0, 40, 76, 0.4) 0%, transparent 70%);
}

.footer__ellipse--2 {
  width: 1735px;
  height: 653px;
  top: 25px;
  left: -658px;
  background: radial-gradient(ellipse, rgba(0, 40, 76, 0.3) 0%, transparent 70%);
  transform: rotate(180deg);
}

/* ---- Content ---- */

.footer__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xl);
  padding-top: var(--gap-3xl);
  padding-bottom: var(--gap-xl);
}

/* ---- Columns ---- */

.footer__columns {
  display: flex;
  gap: var(--gap-md);
}

.footer__col--contacts {
  width: 365px;
  flex-shrink: 0;
}

.footer__col--sitemap {
  width: 237px;
  flex-shrink: 0;
}

.footer__col--services {
  width: 493px;
  flex-shrink: 0;
}

.footer__label {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  font-style: italic;
  line-height: var(--lh-body);
  opacity: 0.6;
  margin-bottom: var(--gap-md);
}

.footer__label--inline {
  margin-bottom: 0;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

/* ---- Nav Lists ---- */

.footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}

.footer__nav-list a {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.footer__nav-list a:hover {
  opacity: 0.7;
}

.footer__services-grid {
  display: flex;
  gap: var(--gap-md);
}

.footer__services-grid nav {
  width: 237px;
}

/* ---- Meta ---- */

.footer__meta {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
}

.footer__socials {
  display: flex;
  gap: var(--gap-sm);
  width: 365px;
  flex-shrink: 0;
}

.footer__social {
  display: block;
  width: 40px;
  height: 40px;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.footer__social:hover {
  opacity: 0.7;
}

.footer__meta-info {
  display: flex;
  gap: var(--gap-md);
  width: 622px;
}

.footer__meta-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 40px;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
}

.footer__copyright {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  font-style: italic;
  line-height: var(--lh-body);
  opacity: 0.6;
  text-align: right;
}

/* ---- Legal ---- */

.footer__legal {
  display: flex;
  justify-content: space-between;
  padding-top: var(--gap-lg);
  border-top: 1px solid var(--color-white);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  font-style: italic;
  line-height: var(--lh-body);
}

.footer__legal a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.footer__legal a:hover {
  opacity: 0.7;
}

/* ---- Tablet ---- */

@media (max-width: 1199px) {
  .footer__col--contacts {
    width: auto;
    flex: 1;
  }

  .footer__col--sitemap {
    width: auto;
    flex: 1;
  }

  .footer__col--services {
    width: auto;
    flex: 2;
  }

  .footer__meta {
    flex-wrap: wrap;
  }

  .footer__socials {
    width: auto;
  }

  .footer__meta-info {
    width: auto;
    flex: 1;
  }
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
  .footer__content {
    gap: var(--gap-xl);
    padding-top: var(--gap-xl);
  }

  .footer__columns {
    flex-direction: column;
    gap: var(--gap-xl);
  }

  .footer__col--contacts,
  .footer__col--sitemap,
  .footer__col--services {
    width: 100%;
  }

  .footer__services-grid {
    flex-direction: column;
  }

  .footer__services-grid nav {
    width: 100%;
  }

  .footer__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-xl);
  }

  .footer__socials {
    width: auto;
  }

  .footer__meta-info {
    flex-direction: column;
    width: 100%;
    gap: var(--gap-md);
  }

  .footer__meta-item {
    height: auto;
    gap: 4px;
  }

  .footer__copyright {
    align-items: flex-start;
    margin-left: 0;
    text-align: left;
  }

  .footer__legal {
    flex-direction: column;
    gap: var(--gap-sm);
  }

  .footer__ellipse--1,
  .footer__ellipse--2 {
    display: none;
  }
}