.text-italic {
  font-style: italic;
}

.lp-15 {
  letter-spacing: 15px !important;
  padding-left: 15px;
}

#overlayMenu.landing,
.pageContent-footer.landing {
  background-image: url('../images/landing/footer-bg.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

#overlayMenu.our-story,
.pageContent-footer.our-story {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url('../images/our-story/footer-bg.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

#overlayMenu.our-services,
.pageContent-footer.our-services {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("../images/our-services/footer-bg-img.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

#overlayMenu .content-text,
.pageContent-footer .content-text {
  font-size: 75px;
  color: #fbf8f2;
  font-family: 'Futura Light';
  /* position: relative; */
  /* display: inline-flex; */
  /* align-items: center; */
  transition: color 0.5s ease;
}

#overlayMenu .content-text .footer-point,
.pageContent-footer .content-text .footer-point {
  height: 30px;
  transition: transform 0.5s ease, opacity 0.5s ease;
  /* Smooth image movement */
}

#overlayMenu .content-text:hover,
.pageContent-footer .content-text:hover {
  color: #f2ae40;
  /* Change text color on hover */
}

#overlayMenu .content-text:hover .footer-point,
.pageContent-footer .content-text:hover .footer-point {
  transform: translateX(50px);
  /* Move image to the right */
  opacity: 0;
  /* Fade out image */
}

#overlayMenu .contact-text,
#overlayMenu .address-text,
.pageContent-footer .contact-text,
.pageContent-footer .address-text {
  font-size: 30px;
  letter-spacing: 2px;
  color: #fbf8f2;
  font-weight: 300;
  font-style: italic;
  font-family: 'Futura Light';
}

#overlayMenu .image-bottom-text,
.pageContent-footer .image-bottom-text {
  font-size: 40px;
  letter-spacing: 3px;
  color: #fbf8f2;
  font-weight: 700;
}

#overlayMenu .footer-logo,
.pageContent-footer .footer-logo {
  width: 50%;
}

#overlayMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  color: #fff;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow-y: auto;
  transition: transform 0.5s ease-in-out;
  transform: translateY(-100%);
  z-index: 999;
  /* Lower z-index to keep menu icon clickable */
}

#overlayMenu.open {
  display: flex;
  animation: slideDown 0.5s forwards ease-in-out;
}

#overlayMenu.closing {
  animation: slideUp 0.5s forwards ease-in-out;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {

  #overlayMenu .content-text,
  .pageContent-footer .content-text {
    font-size: 60px;
  }

  #overlayMenu .contact-text,
  #overlayMenu .address-text,
  .pageContent-footer .contact-text,
  .pageContent-footer .address-text {
    font-size: 25px;
  }

  #overlayMenu .image-bottom-text,
  .pageContent-footer .image-bottom-text {
    font-size: 25px;
  }
}

@media (max-width: 767.98px) {

  #overlayMenu.our-services,
  #overlayMenu.our-story,
  #overlayMenu.landing,
  .pageContent-footer.our-services,
  .pageContent-footer.our-story,
  .pageContent-footer.landing {
    height: 100vh;
  }

  #overlayMenu .content-text .footer-point,
  .pageContent-footer .content-text .footer-point {
    height: 20px;
  }

  #overlayMenu .content-text,
  .pageContent-footer .content-text {
    font-size: 25px;
  }

  #overlayMenu .contact-text,
  #overlayMenu .address-text,
  .pageContent-footer .contact-text,
  .pageContent-footer .address-text {
    font-size: 12.5px;
  }

  #overlayMenu .image-bottom-text,
  .pageContent-footer .image-bottom-text {
    font-size: 15px;
  }

  #overlayMenu .footer-logo,
  .pageContent-footer .footer-logo {
    width: 25%;
  }
}