@import url("/css/common.css");

.contact-links {
  color: #000;
}

img {
  max-width: 15rem;
}

.title-container {
  position: relative;
  height: 180px; /* Adjust this height based on your design */
  overflow: hidden; /* Hides the title before it slides in */
}

.slide-up-title {
  font-size: 10rem;
  opacity: 1;
  transform: translateY(100%); /* Positioned below the container */
  transition: transform 1.5s ease-out; /* Duration of animation */
}

/* The class that triggers the animation */
.slide-up {
  opacity: 1;
  transform: translateY(0); /* Moves it to its final position */
}

/* ---------------------MEDIA------------------------- */

@media (max-width: 570px) {
  .page-title {
    font-size: 100px;
  }
  .title-container {
    height: 120px; /* Adjust this height based on your design */
  }

  .small-text {
    text-align: center;
  }
}