/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[5]!./src/components/general/footer/index.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
.footer {
  background-color: var(--color-blue-charcoal);
  margin-top: auto;
  position: relative;
}

.footer .backface_logo {
  margin-top: 30px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .footer .backface_logo {
    max-width: 180px;
  }
}
.footer .primary {
  padding: 50px 15px;
}

@media (max-width: 768px) {
  .footer .primary {
    flex-flow: column;
    padding: 30px 15px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .footer .primary {
    padding: 30px 15px;
  }
}
.footer .primary > div:not([class]) {
  min-width: 220px;
}

.footer .primary > div[class] {
  width: 100%;
}

@media (max-width: 768px) {
  .footer .primary > div[class] {
    flex-flow: column;
  }
}
.footer .primary h6 {
  font-family: var(--font-primary);
  font-weight: var(--semi-bold);
  font-size: 16px;
  color: var(--color-amber);
  margin-bottom: 5px;
}

.footer .primary .align__right {
  text-align: right;
}

.footer .primary .cols__x2 ul {
  -moz-column-count: 2;
  column-count: 2;
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .footer .primary .cols__x2 ul {
    -moz-column-count: 1;
    column-count: 1;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}
.footer .primary .cols__x2 li {
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}

.footer .primary ul {
  margin-bottom: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .footer .primary ul {
    -moz-column-count: 2;
    column-count: 2;
    -moz-column-gap: 20px;
    column-gap: 20px;
    padding-right: unset;
  }
}
.footer .primary ul li {
  padding: 3px 0;
}

.footer .primary ul li.spacer {
  margin: 10px 0;
}

.footer .primary ul li svg {
  margin-right: 5px;
}

.footer .primary ul a,
.footer .primary ul i {
  display: inline-block;
  font-style: normal;
  font-size: 14px;
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .footer .primary ul a:hover {
    text-decoration: underline;
  }
}
.footer .primary ul a.highlight {
  background-color: var(--color-midnight);
  border-radius: var(--border-radius-md);
  padding: 5px 10px;
}

.footer .primary ul svg {
  max-width: 14px;
}

.footer .secondary {
  padding: 15px;
}

@media (max-width: 1024px) {
  .footer .secondary {
    flex-flow: column-reverse;
  }
}
.footer .secondary p {
  font-size: 12px;
  color: var(--color-white);
}

@media (max-width: 1024px) {
  .footer .secondary p {
    text-align: center;
  }
}
.footer .secondary a {
  color: rgba(255, 255, 255, 0.6);
}

@media (hover: hover) and (pointer: fine) {
  .footer .secondary a:hover {
    text-decoration: underline;
  }
}
@media (max-width: 1024px) {
  .footer .payment_methods {
    margin: 0 0 15px;
  }
}
.footer .payment_methods li {
  display: inline-block;
  margin: 0 5px;
}

.footer .payment_methods li:first-of-type {
  margin-left: unset;
}

.footer .payment_methods li:last-of-type {
  margin-right: unset;
}

.footer .payment_methods i {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.6);
}

.scroll_top {
  width: 42px;
  aspect-ratio: 1;
  color: var(--color-blue-charcoal);
  text-align: center;
  align-content: center;
  border-radius: 50%;
  background-color: var(--color-amber);
  opacity: 0;
  transform: translate(-15px, -30px) scale(0.5) rotate(-180deg);
  transition: var(--def-transition-300ms);
  will-change: opacity, transform;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

@media (hover: none) and (pointer: coarse) {
  .scroll_top {
    transform: translate(-15px, -80px) scale(0.5) rotate(-180deg);
  }
}
@media (max-width: 1024px) {
  .scroll_top {
    transform: translate(-15px, -80px) scale(0) rotate(-180deg);
  }
}
.scroll_top.visible {
  opacity: 1;
  transform: translate(-15px, -30px) scale(1) rotate(0deg);
}

@media (hover: none) and (pointer: coarse) {
  .scroll_top.visible {
    transform: translate(-15px, -80px) scale(1) rotate(0deg);
  }
}
@media (max-width: 1024px) {
  .scroll_top.visible {
    transform: translate(-15px, -80px) scale(1) rotate(0deg);
  }
}