/* ==========================================================================
   Form
   ========================================================================== */

.footer .leads-form {
  padding-block: 1rem;
  text-align: center;
  width: 100%;
}

.footer .leads-form .section-title {
  color: var(--color-gray-800);
}

.footer .leads-form .section-title::after {
  background-color: var(--color-gray-300);
  left: 50%;
  transform: translateX(-50%);
}

.footer .leads-form p {
  font-size: 1.2rem;
}

.footer .leads-form .leads-form-register {
  align-items: stretch;
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1rem;
}

.footer .leads-form .leads-form-register input {
  background-color: var(--color-white);
  border: .1rem solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-gray-800);
  font-size: 1.4rem;
  padding: 1rem;
  width: 100%;
}

.footer .leads-form .leads-form-register input::placeholder {
  color: var(--color-gray-600);
  opacity: 1;
}

.footer .leads-form .leads-form-register input.btn {
  align-self: center;
  background-color: var(--color-gray-700);
  color: var(--color-white);
  cursor: pointer;
  font-size: 1.4rem;
  width: auto;
}

.footer .leads-form .leads-form-register .wpcf7-spinner {
  display: none;
}



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

.footer-brand {
  background-color: var(--color-gray-800);
  filter: grayscale(1);
  padding: 1rem;
  position: relative;
}

.footer-brand::before {
  background-color: var(--color-gray-700);
  border-bottom: .3rem solid var(--color-gray-600);
  border-top: .3rem solid var(--color-gray-600);
  content: "";
  height: 7rem;
  left: 0;
  position: absolute;
  top: calc(50% - 3.5rem);
  width: 100%;
}

.footer-brand .brand {
  display: block;
  inline-size: min(15.3rem, 100%);
  margin-inline: auto;
  position: relative;
  transition: transform var(--transition-normal);
}

.footer-brand .brand:hover {
  transform: scale(1.1);
}

.footer-brand .brand img {
  display: block;
  height: auto;
  width: 100%;
}



/* ==========================================================================
   Footer Social Links
   ========================================================================== */

.footer-social-links {
  align-items: center;
  background-color: var(--color-gray-900);
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 1rem;
}

.footer-social-links a {
  display: inline-flex;
  opacity: .5;
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible {
  opacity: 1;
  transform: scale(1.1);
}



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

.footer-nav {
  background-color: var(--color-gray-800);
  padding: .5rem;
}

.footer-nav .menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  list-style: none;
}

.footer-nav .menu .menu-item a {
  color: var(--color-white);
  font-size: 1rem;
  opacity: .5;
  transition: opacity var(--transition-normal);
}

.footer-nav .menu .menu-item a:hover,
.footer-nav .menu .menu-item a:focus-visible {
  opacity: 1;
}



/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .footer-brand .brand,
  .footer-social-links a {
    transition: none;
  }

  .footer-brand .brand:hover,
  .footer-social-links a:hover {
    transform: none;
  }

}



/* ==========================================================================
   Responsive Desktop
   ========================================================================== */
   
@media (min-width: 1024px) {

  .footer .leads-form p {
    font-size: 1.6rem;
  }

  .footer .leads-form .leads-form-register {
    align-items: center;
    flex-direction: row;
  }

  .footer .leads-form .leads-form-register input {
    flex: 1;
    font-size: 1.6rem;
  }

  .footer .leads-form .leads-form-register button {
    flex: 0 0 auto;
  }

}