footer {
  background-color: rgb(35, 30, 30);
  height: 20rem;
  color: white;
  padding: 3rem 0;
}

footer>div {
  display: flex;
  margin: 0 auto;
  max-width: 75rem;
  gap: 5rem;
  width: 100%;
  height: 100%;
}

footer>div>div {
  width: 33%;
}

.footer-logo {
  height: 9.5rem;
  width: 9.5rem;

  margin: 0 auto;
}

.footer-socials-wrapper {
  margin: auto auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-socials {
  display: flex;
  gap: 1rem;
  margin: 0 auto;
}

.footer-socials>* {
  fill: white;
  width: min-content;

  transition: fill .15s cubic-bezier(.58, .3, .51, .82);
}

.facebook-icon:hover {
  fill: #8b9dc3;
}

.instagram-icon:hover {
  fill: #e1306c;
}

.tripadvisor-icon:hover .left-eye {
  transition: fill .15s cubic-bezier(.58, .3, .51, .82);
  fill: #ee6946;
}

.tripadvisor-icon:hover .right-eye {
  transition: fill .15s cubic-bezier(.58, .3, .51, .82);
  fill: #00af87
}

.tripadvisor-icon .head {
  transition: fill .15s cubic-bezier(.58, .3, .51, .82);
  fill: transparent;
}

.tripadvisor-icon:hover .head {
  fill: #fac415;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 3rem;
}

.footer-contact-title {
  color: #fa9d1c;
  font-family: 'Mogra';
  font-size: 2.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  fill: white;
}

.footer-contact-links svg {
  height: 1.5rem;
  width: 1.5rem;
}

.footer-contact-links>* {
  display: flex;
  align-items: center;
  height: fit-content;
  gap: 1rem;
}

.footer-book-now-button {
  text-align: center;
  cursor: pointer;
  margin-top: 0.5rem;
  background-color: rgb(239, 65, 35);
  text-transform: uppercase;
  padding: 0.75rem 0;
  border-radius: 0.25rem;
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  fill: white;
}

.footer-links {
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links-title {
  color: #fa9d1c;
  font-family: 'Mogra';
  font-size: 1.75rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer-links-links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

@media only screen and (max-width: 768px) {
  footer {
    height: fit-content;
  }

  footer>div {
    flex-direction: column-reverse;
    height: fit-content;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }

  .footer-socials-wrapper,
  .footer-contact,
  .footer-links {
    width: 100%;
    padding: 0;
  }

  .footer-socials-wrapper>*,
  .footer-contact>*,
  .footer-links>* {
    margin: 0 2rem;
  }

  .footer-socials-wrapper {
    justify-content: center;
    align-items: center;
  }

  .footer-book-now-button {
    margin-top: 1rem;
    padding: 1rem 1rem;
  }

  .footer-logo {
    height: 7.5rem;
    width: 7.5rem;
  }
}