/* ========================================
   FOOTER SECTION STYLES
======================================== */

.footer {
  position: relative;
  padding-block: min(17.5rem, 17.5vh) min(4.5rem, 4.5vh);
  width: 100%;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  /* min-height: 100vh; */
}

@media screen and (orientation: portrait) {
  .footer {
    padding-block: 6rem 2.5rem;
  }
}

/* ========== MARQUEE ========== */
.footer .marquee-advanced {
  width: 100%;
  position: relative;
  overflow: hidden;
  margin-bottom: min(9.5rem, 7.5vh);
  margin-top: auto;
}

@media screen and (orientation: portrait) {
  .footer .marquee-advanced {
    margin-bottom: 4rem;
  }
}

@media screen and (orientation: landscape) and (max-height: 450px) {
  .footer .marquee-advanced {
    margin-bottom: 4rem;
  }
}

.footer .marquee-advanced::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent 80%, #171717);
}

@media screen and (orientation: portrait) {
}

.footer .marquee-advanced__scroll,
.footer .marquee-advanced__collection {
  will-change: transform;
  display: flex;
  position: relative;
}

.footer .marquee-advanced__collection {
  /* gap: 1.5rem; */
}

@media screen and (orientation: portrait) {
}

.footer .marquee-advanced__item-width {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  margin-left: 6rem;
  color: #fff;
  font-size: min(19.4rem, 19vh);
  line-height: 0.9;
  flex-shrink: 0;
  width: fit-content;
  white-space: nowrap;
  text-align: center;
}

@media screen and (orientation: portrait) {
  .footer .marquee-advanced__item-width {
    margin-left: 3.8rem;
    font-size: 11.5rem;
    gap: 3.8rem;
  }
}

.footer .marquee-advanced__item-width span {
  width: min(10rem, 10vh);
  height: min(10rem, 10vh);
  border: 1.5px solid #009ca8;
}

@media screen and (orientation: portrait) {
  .footer .marquee-advanced__item-width span {
    width: 6rem;
    height: 6rem;
    border: 0.891px solid #009ca8;
  }
}

.footer .marquee-advanced[data-marquee-status="inverted"] span {
  transition: 0.5s var(--ease);
  transform: rotate(-45deg);
}

.footer .marquee-advanced[data-marquee-status="normal"] span {
  transition: 0.5s var(--ease);
  transform: rotate(45deg);
}

/* ========== FOOTER GRID LAYOUT ========== */
.footer-grid {
  padding-inline: 6rem 3.5rem;
  display: grid;
  grid-template-areas:
    "nav contact socials image"
    "nav contact careers image"
    "CTA CTA CTA image"
    "copyright copyright terms terms";
  column-gap: 10rem;
  grid-template-columns: auto auto auto 1fr;
}

@media screen and (orientation: portrait) {
  .footer-grid {
    padding-inline: 0;
    display: grid;
    grid-template-areas:
      "nav contact"
      "socials careers"
      "CTA CTA"
      "image image"
      "terms terms"
      "copyright copyright";
    justify-content: normal;
    column-gap: 0;
  grid-template-columns: 1fr 1fr;

  }
}

/* ========== NAVIGATION ========== */
.footer-navigation {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(1.4rem, 1.4vh);
  margin: min(4.5rem, 4.5vh) 13rem 0 0;
  margin: min(4.5rem, 4.5vh) 0rem 0 0;

  height: fit-content;
  flex-shrink: 0;
}

@media screen and (orientation: portrait) {
  .footer-navigation {
    gap: 1.7rem;
    margin: 0rem 7.4rem 0 3.7rem;
  }
}

.footer-navigation__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: min(1.8rem, 1.8vh);
  cursor: pointer;
  transform: translateX(-3rem);
  transition: 0.5s var(--ease);
  flex-shrink: 0;
}

@media screen and (orientation: portrait) {
  .footer-navigation__link {
    gap: 1.2rem;
    transform: translateX(-2.2rem);
  }
}

.footer-navigation__link-icon {
  width: 1rem;
  height: 1rem;
  transform: rotate(-43.264deg) scale(0);
  flex-shrink: 0;
  aspect-ratio: 1/1;
  background: #009ca8;
  transition: var(--transition);
}

@media screen and (orientation: portrait) {
}

.footer-navigation__link-text {
  color: rgba(255, 255, 255, 0.5);
  font-size: min(2rem, 2vh);
  line-height: 170%;
  text-transform: uppercase;
  white-space: nowrap;
}

@media screen and (orientation: portrait) {
  .footer-navigation__link-text {
    font-size: 1.4rem;
    line-height: 100%;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-navigation__link-text {
    font-size: 1.8rem;
  }
}

.footer-navigation__link.--is-active {
  transform: translateX(0rem);
}

.footer-navigation__link.--is-active .footer-navigation__link-icon {
  transform: rotate(-43.264deg) scale(1);
}

.footer-navigation__link.--is-active .footer-navigation__link-text {
  color: #fff;
}

.footer-navigation:hover .footer-navigation__link-icon {
  transform: rotate(0deg) scale(0);
}

.footer-navigation:hover .footer-navigation__link {
  transform: translateX(-3rem);
}

@media screen and (orientation: portrait) {
}

.footer-navigation:hover .footer-navigation__link-text {
  color: rgba(255, 255, 255, 0.5);
}

.footer-navigation:hover .footer-navigation__link:hover {
  transform: translateX(0rem);
}

.footer-navigation:hover .footer-navigation__link:hover .footer-navigation__link-icon {
  transform: rotate(-43.264deg) scale(1);
}

.footer-navigation:hover .footer-navigation__link:hover .footer-navigation__link-text {
  color: #fff;
}

/* ========== CONTACT ========== */
.footer-contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: min(1.6rem, 1.6vh);
  width: 31rem;
  width: fit-content;
  margin-top: min(4.5rem, 4.5vh);
}

@media screen and (orientation: portrait) {
  .footer-contact {
    grid-area: contact;
    gap: 1.5rem;
    width: 13.4rem;
    margin-top: 0rem;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-contact {
    width: 20.4rem;
  }
}

.footer-contact__title {
  color: #fff;
  font-size: min(2rem, 2vh);
  text-transform: uppercase;
  line-height: normal;
}

@media screen and (orientation: portrait) {
  .footer-contact__title {
    font-size: 1.4rem;
  }
}

.footer-contact__link {
  color: rgba(255, 255, 255, 0.5);
  font-size: min(2rem, 2vh);
  line-height: normal;
  transition: var(--transition);
}

@media screen and (orientation: portrait) {
  .footer-contact__link {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-contact__link {
    font-size: 1.8rem;
  }
}

.footer-contact__link:hover {
  color: #fff;
}

/* ========== SOCIALS ========== */
.footer-socials {
  grid-area: socials;
  width: 37rem;
  width: fit-content;
  margin-top: min(4.5rem, 4.5vh);
}

@media screen and (orientation: portrait) {
  .footer-socials {
    width: 9.7rem;
    margin-top: 2.7rem;
    margin-left: 3.7rem;
  }
}

.footer-socials__title {
  color: #fff;
  font-size: min(2rem, 2vh);
  text-transform: uppercase;
  margin-bottom: min(2rem, 2vh);
  line-height: normal;
}

@media screen and (orientation: portrait) {
  .footer-socials__title {
    font-size: 1.4rem;
    margin-bottom: 1.8rem;
  }
}

.footer-socials__container {
  display: flex;
  align-items: center;
  gap: 3.9rem;
}

@media screen and (orientation: portrait) {
  .footer-socials__container {
    width: 100%;
    justify-content: space-between;
    gap: 0rem;
  }
}

.footer-socials__link {
  width: 2.1rem;
  height: 2.1rem;
  flex-shrink: 0;
}
.footer-socials__link svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.footer-socials__link path {
  transition: var(--transition);
}
.footer-socials__link:hover path {
  fill: #009ca8;
  stroke: #009ca8 !important;
}
.footer-socials__link[aria-label="LinkedIn link"]:hover path {
  stroke: #009ca8 !important;
  fill: transparent !important;
}

@media screen and (orientation: portrait) {
  .footer-socials__link {
    width: 1.6rem;
    height: 1.9rem;
  }
}

/* ========== CAREERS ========== */
.footer-careers {
  grid-area: careers;
  display: flex;
  flex-direction: column;
  gap: min(1.6rem, 1.6vh);
  width: 37rem;
  width: fit-content;
}

@media screen and (orientation: portrait) {
  .footer-careers {
    width: 13.9rem;
    margin-top: 2.7rem;
    word-wrap: break-word;
    white-space: normal;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-careers {
    width: 23.9rem;
  }
}

.footer-careers__title {
  color: #fff;
  font-size: min(2rem, 2vh);
  text-transform: uppercase;
  line-height: normal;
}

@media screen and (orientation: portrait) {
  .footer-careers__title {
    font-size: 1.4rem;
  }
}

.footer-careers__text,
.footer-careers__link {
  color: rgba(255, 255, 255, 0.5);
  font-size: min(2rem, 2vh);
  line-height: normal;
}
.footer-careers__link {
  transition: var(--transition);
}
.footer-careers__link:hover {
  color: #fff;
}

@media screen and (orientation: portrait) {
  .footer-careers__text,
  .footer-careers__link {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-careers__text,
  .footer-careers__link {
    font-size: 1.8rem;
  }
}

/* ========== IMAGE + BACK TO TOP ========== */
.footer .footer-image__wrapper {
  grid-area: image;
  position: relative;
  width: 100%;
  height: min(46.9rem, 46.9vh);
  margin-bottom: min(7.4rem, 7.4vh);
}
.footer .footer-image__wrapper img {
  mask-image: linear-gradient(transparent 0%, black 10%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(transparent 0%, black 10%, black 95%, transparent 100%);
}

@media screen and (orientation: portrait) {
  .footer .footer-image__wrapper {
    width: 100%;
    height: 19.5rem;
    width: calc(100% - 4rem);
    margin-inline: auto;
    margin-bottom: 4.5rem;
  }
}

.footer-back-to-top {
  position: absolute;
  bottom: 1.55rem;
  right: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(14rem, 14vh);
  height: min(14rem, 14vh);
  isolation: isolate;
  cursor: pointer;
}

@media screen and (orientation: portrait) {
  .footer-back-to-top {
    bottom: -1.55rem;
    right: 0rem;
    width: 10.5rem;
    height: 10.5rem;
  }
}

.footer-back-to-top:hover .footer-back-to-top__background {
  transform: rotate(-135deg) scale(0.9);
}

.footer-back-to-top:hover .footer-back-to-top__text {
  transform: scale(0.9);
}

.footer-back-to-top__background {
  position: absolute;
  z-index: -1;
  width: min(14rem, 14vh);
  height: min(14rem, 14vh);
  background: #009ca8;
  transform: rotate(-45deg);
  transition: 0.5s var(--ease);
}

@media screen and (orientation: portrait) {
  .footer-back-to-top__background {
    width: 7.4rem;
    height: 7.4rem;
  }
}

.footer-back-to-top__text {
  color: #fff;
  font-size: min(1.8rem, 1.6vh);
  text-align: center;
  line-height: normal;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  transition: 0.5s var(--ease);
}

@media screen and (orientation: portrait) {
  .footer-back-to-top__text {
    font-size: 1rem;
    letter-spacing: 0.5px;
  }
}

/* ========== CTA BUTTON ========== */
.footer .CTA-btn {
  grid-area: CTA;
}

@media screen and (orientation: portrait) {
  .footer .CTA-btn {
    margin: 4rem 2rem 4.5rem;
    width: calc(100% - 4rem);
  }

  .footer .CTA-btn .CTA-btn__inner {
    padding: 1.4rem 2.5rem;
  }
}

@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer .CTA-btn {
    max-width: 40rem;
    margin-inline: auto;
  }
}

/* ========== COPYRIGHT ========== */
.footer-copyright {
  grid-area: copyright;
  display: flex;
  align-items: center;
  gap: min(1rem, 1vh);
  color: #fff;
  font-size: min(2rem, 2vh);
  line-height: normal;
}

@media screen and (orientation: portrait) {
  .footer-copyright {
    gap: 0.5rem;
    font-size: 1.2rem;
    padding-inline: 1.5rem;
    width: 100%;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-copyright {
    font-size: 1.4rem;
  }
}

.footer-copyright span {
  color: #009ca8;
}

/* ========== TERMS ========== */
.footer-terms {
  grid-area: terms;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 15rem;
}

@media screen and (orientation: portrait) {
  .footer-terms {
    gap: 0.6rem;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
  }
}

.footer-terms a,
.footer-terms span {
  color: #fff;
  font-size: min(2rem, 2vh);
  line-height: normal;
  transition: var(--transition);
}

@media screen and (orientation: portrait) {
  .footer-terms a,
  .footer-terms span {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-terms a,
  .footer-terms span {
    font-size: 1.4rem;
  }
}

.footer-terms a:hover {
  color: #009ca8;
}

/* ========== MDX ========== */
.footer-by-mdx {
  grid-area: terms;
  color: #fff;
  font-size: min(2rem, 2vh);
  line-height: normal;
  justify-self: end;
}

.footer-by-mdx a {
  transition: var(--transition);
}

.footer-by-mdx a:hover {
  opacity: 0.5;
}

@media screen and (orientation: portrait) {
  .footer-by-mdx {
    grid-area: copyright;
    font-size: 1.2rem;
    margin-right: 1.5rem;
  }
}
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  .footer-by-mdx {
    font-size: 1.4rem;
  }
}

/* lines  */
.footer .footer__lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  mask-image: linear-gradient(transparent, black 30%);
}

@media screen and (orientation: portrait) {
  .footer .footer__lines {
    mask-image: linear-gradient(transparent, black 30%);
  }
}