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

.medium-text-wrapper {
  max-width: 300px;
}

.outer-work-wrapper {
  margin-top: 15rem;
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  max-width: 637px;
  padding-bottom: 5rem;
  flex-wrap: wrap;
}

.image-text-wrapper {
  margin-bottom: 2rem;
}

.heading-work-link {
  font-size: 24px;
  padding: 15px;
}

.image-hover-color {
  filter: grayscale(100%);
  transition: filter 0.5s ease;
}

.image-hover-color:hover {
  filter: grayscale(0%);
  cursor: pointer;
}

.medium-text {
  padding: 20px;
}
.content-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.all-text-wrapper {
  margin-top: 12rem;
}

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

.link-wrapper {
  display: flex;
  justify-content: space-between;
}

.slide-up-title {
  font-size: rem;
  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: 1275px) {
  .all-text-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
    margin: auto;
    align-items: center;
  }
  .content-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
  }

  .page-title,
  .small-text,
  .medium-text {
    text-align: center;
  }

  .outer-work-wrapper {
    margin-top: 5rem;
    padding-left: 0px;
  }
  .page-title {
    padding-top: 5rem;
  }

  .image-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .title-container {
    height: 210px; /* Adjust this height based on your design */
  }
}

@media (max-width: 800px) {
  .all-text-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 5rem;
    margin: auto;
    align-items: center;
  }
  .content-wrapper {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
  }

  .page-title,
  .small-text,
  .medium-text,
  .heading-work-link {
    text-align: center;
  }

  .outer-work-wrapper {
    margin-top: 5rem;
    padding-left: 0px;
  }
  .page-title {
    padding-top: 5rem;
  }

  .image-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .image-hover-color,
  .image-text-wrapper {
    max-width: 450px;
  }
}

@media (max-width: 600px) {
  .page-title {
    font-size: 70px;
  }

  .medium-text {
    font-size: 24px;
  }

  .image-hover-color,
  .image-text-wrapper {
    max-width: 400px;
  }

  .title-container {
    height: 150px; /* Adjust this height based on your design */
  }
}

@media (max-width: 450px) {
  .page-title {
    font-size: 70px;
  }

  .medium-text {
    font-size: 24px;
  }

  .image-hover-color,
  .image-text-wrapper {
    max-width: 340px;
  }
}