.footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-13);
  background-color: var(--color-footer-background);
  width: 100%;
  border-radius: clamp(var(--space-4), 3vw, var(--space-8));
  position: relative;
  padding-bottom: var(--space-17);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: clamp(var(--space-5), 3vw, var(--space-9));
  margin-left: clamp(var(--space-5), 3vw, var(--space-9));
}

.idea-block {
  display: flex;
  flex-direction: row;
  gap: var(--space-7);
  align-items: center;
}

.idea-title {
  font-size: clamp(var(--fs-2xl), 4.21vw, var(--fs-5xxl));
  color: var(--color-dark-gray);
  line-height: var(--lh-01l);
  margin: 0;
}

.footer-contact-us-btn {
  width: 7rem;
  height: 2.6rem;
  border-radius: var(--space-4);
}

.contact-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.footer-nav-header {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.footer-nav-title {
  color: var(--color-dark-gray);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2-1xl));
  letter-spacing: -0.1012rem;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  gap: clamp(var(--space-2), 2vw, var(--space-5));
}

.footer-nav-item a {
  text-decoration: none;
  color: var(--color-light-gray);
  font-size: clamp(var(--fs-sm), 3vw, var(--fs-xl));
  transition: transform 0.2s cubic-bezier(.22, 1.61, .36, 1), color 0.2s;
  display: inline-block;
  backface-visibility: hidden;
  will-change: transform;
}

.footer-bottom {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 3.7rem;
  max-width: 80.5rem;
  margin: 0 auto;
  bottom: var(--space-1);
  left: var(--space-1);
  right: var(--space-1);
  background: var(--color-dark-gray);
  border-radius: clamp(var(--space-4), 3vw, var(--space-5));
  box-sizing: border-box;
  padding-right: var(--space-4);
  padding-left: clamp(var(--space-5), 3vw, var(--space-8));
}

.slogan {
  color: white;
  width: fit-content;
  font-size: clamp(var(--fs-sm), 3vw, var(--fs-xl));

}

.to-top-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: var(--space-2);
  background-color: var(--color-blue);
  cursor: pointer;
  transition: all 0.1s ease;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: var(--space-2);
  backface-visibility: hidden;
  will-change: transform;
}

.arrow-icon {
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  color: black;
}

.to-top-button-text {
  display: none;
  font-size: var(--fs-base);
  font-weight: 700;
  font-family: 'Aeonik';
  color: white;
  white-space: nowrap;
}

.footer-main-container {
  margin-bottom: var(--space-3);
}

@media (hover: hover) and (pointer: fine) {
  .to-top-button:hover {
    transform: scale(1.08);
  }

  .to-top-button:active {
    transform: scale(1);
  }

  .footer-nav-item a:hover {
    transform: scale(1.15);
    color: var(--color-dark-gray);
  }

  .footer-nav-item a:active {
    transform: scale(1);
    color: var(--color-blue);
  }
}

@media(min-width: 768px) {
  .footer-container {
    flex-direction: row;
    gap: clamp(var(--space-8), 5.7vw, var(--space-20l));
    margin-bottom: var(--space-5);
  }

  .footer-main-container {
    padding: 0 var(--space-2);

  }

  .footer-bottom {
    bottom: var(--space-5);
    padding-right: var(--space-1l);
  }

  .idea-title {
    letter-spacing: -0.14rem;
    line-height: var(--lh-1l);
  }

  .idea-block {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  .footer-contact-us-btn {
    width: 7.6rem;
    height: 2.8rem;

    font-size: var(--fs-base);
    font-weight: 700;
  }

  .footer-contact-card {
    align-self: flex-start;
  }

  .to-top-button {
    width: 7.2rem;
    height: 2.8rem;
    gap: var(--space-5);
    border-radius: var(--space-4);
  }

  .arrow-icon {
    display: none;
  }

  .to-top-button-text {
    display: inline;
  }
}

@media(min-width: 1024px) {
  .contact-card-wrapper {
    flex-direction: row;
    gap: clamp(var(--space-3), 3.5vw, var(--space-11xl));
  }


}