/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/

/* Mobile */
@media only screen and (min-width: 0em) {
  #footer {
    background: #1C1C1C;
    padding: 5.25rem 0 3.5rem;
    margin-bottom: 0;
    font-size: min(4vw, 1.2em);
  }

  #footer .left-section {
    margin: auto;
    margin-bottom: 3.125rem;
    text-align: center;
  }

  #footer .left-section .logo {
    display: inline-block;
    margin: auto;
    width: auto;
    height: 6em;
    margin-bottom: 1.875em;
    text-align: center;
  }

  #footer .left-section .logo img {
    width: auto;
    height: 6em;
    display: block;
  }

  #footer .left-section p {
    font-size: 0.875rem;
    line-height: 1.92857143;
    color: #fff;
    opacity: .9;
    text-align: center;
    width: 100%;
    width: 21.92857143rem;
    margin: auto;
  }

  #footer .right-section {
    width: 96%;
    max-width: 25.4375rem;
    margin: auto;
  }

  #footer .right-section .lists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 96%;
    max-width: 19.1875rem;
    margin: auto;
    justify-content: center;
    text-align: center;
  }

  #footer .right-section .lists ul {
    padding: 0;
    margin-bottom: 0;
    margin-top: 0;
    width: 100%
  }

  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 3.125rem;
  }

  #footer .right-section .lists ul:nth-of-type(3) li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
  }

  #footer .right-section .lists ul:nth-of-type(3) li h2 {
    width: 100%;
  }

  #footer .right-section .lists ul:nth-of-type(3) li:last-of-type {
    margin-bottom: 0;
  }

  #footer .right-section .lists ul li {
    list-style: none;
    margin-bottom: 0.75rem;
    color: #fff;
    font-size: 1.125rem;
    opacity: .9;
  }

  #footer .right-section .lists ul li a {
    text-decoration: none;
    color: #fff;
    line-height: 1.16666667em;
    transition: color .3s;
  }

  #footer .right-section .lists ul li a:hover {
    color: var(--primary);
  }

  #footer .location-footer-item {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 1rem;
  }

  #footer .location-footer-link {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
    line-height: 1.16666667em;
    transition: color .3s;
  }

  #footer .location-footer-link:hover {
    color: var(--primary);
  }

  #footer .location-footer-link:before {
    display: none;
  }

  #footer .location-footer-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--primary);
    flex-shrink: 0;
    margin-top: 0.125rem;
    transition: stroke 0.3s;
  }

  #footer .location-footer-link:hover .location-footer-icon {
    stroke: var(--primary);
  }

  #footer .phone-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #footer .phone-footer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  #footer .phone-footer-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--primary);
    flex-shrink: 0;
    transition: stroke 0.3s;
  }

  #footer .phone-footer-link:hover .phone-footer-icon {
    stroke: var(--primary);
  }

  #footer .phone-footer-link:hover {
    color: var(--primary);
  }

  #footer .email-footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #footer .email-footer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #fff;
    line-height: 1.16666667em;
    transition: color .3s;
  }

  #footer .email-footer-link:hover {
    color: var(--primary);
  }

  #footer .email-footer-link:before {
    display: none;
  }

  #footer .email-footer-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--primary);
    flex-shrink: 0;
    transition: stroke 0.3s;
  }

  #footer .email-footer-link:hover .email-footer-icon {
    stroke: var(--primary);
  }

  #footer .right-section .lists ul h2 {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.16666667em;
    margin-bottom: 2.3125rem;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
  }

  #footer .right-section .lists ul h2:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 100%;
    background: var(--primary);
    opacity: 1;
    bottom: -1rem;
    left: 0;
  }

  #footer .right-section .buttons {
    display: flex;
    justify-content: center;
  }

  #footer .right-section .button-solid {
    margin: 0;
    height: 3.3125rem;
    padding-top: 0.1875rem;
    width: 15.625rem;
  }

  #footer .credit {
    color: #fff;
    width: 96%;
    margin: auto;
    text-align: center;
    margin-top: 6.25rem;
    margin-bottom: 1.25rem;
    line-height: 2.25rem;
    font-size: 1rem;
  }

  #footer .credit a {
    color: var(--primary);
    text-decoration: none;
    font-size: 1rem;
  }

  #footer .credit a:hover {
    text-decoration: underline;
  }

  #footer .credit .copyright {
    display: block;
    font-size: 1rem;
  }
}

/* Small Desktop */
@media only screen and (min-width: 64em) {
  #footer {
    font-size: min(1.2vw, 1em);
    padding-bottom: 4rem; /* Match banner height on desktop */
  }

  #footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 96%;
    max-width: 82.5rem;
    margin: auto;
    padding: 0;
  }

  #footer .left-section {
    width: 25.5625rem;
    margin: 0;
    text-align: left;
  }

  #footer .left-section .logo {
    text-align: left;
    margin-left: 0;
    height: 8.375rem;
  }

  #footer .left-section p {
    text-align: left;
    margin-left: 0;
  }

  #footer .right-section {
    margin: 0;
    width: 38.0625rem;
    max-width: none;
  }

  #footer .right-section .lists {
    width: 96%;
    max-width: 48.0625rem;
    margin: 0;
    max-width: initial;
    justify-content: space-between;
    text-align: left;
  }

  #footer .right-section .lists ul {
    width: auto;
  }

  #footer .right-section .lists ul:nth-of-type(3) {
    margin-top: 0;
  }

  #footer .right-section .lists ul:nth-of-type(3) li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1rem;
  }

  #footer .right-section .lists ul:nth-of-type(3) li:first-of-type {
    margin-bottom: 0;
  }

  #footer .location-footer-item {
    justify-content: flex-start;
    align-items: flex-start;
  }

  #footer .location-footer-link {
    justify-content: flex-start;
  }

  #footer .email-footer-item {
    justify-content: flex-start;
  }

  #footer .email-footer-link {
    justify-content: flex-start;
  }

  #footer .right-section .lists ul li a {
    position: relative;
  }

  #footer .right-section .lists ul li a:before {
    content: '';
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    bottom: -0.1875rem;
    left: 0;
    transition: width .3s;
  }

  #footer .right-section .lists ul li a:hover:before {
    width: 100%;
  }

  #footer .phone-footer-item {
    justify-content: flex-start;
  }

  #footer .phone-footer-link {
    justify-content: flex-start;
  }

  #footer .right-section .buttons {
    justify-content: flex-start;
  }

  #footer .credit .copyright {
    display: inline-block;
  }
}

/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #footer {
    background: #061623;
  }
}