.carousel-header {
  height: 450px;
}


@media screen and (max-width: 576px) {
    .text-small {
      font-size: 0.7rem;
      margin-top: 1rem;
    }
  }
  

  @media (min-width: 992px) {
    .carousel-item img {
      max-height: 450px;
      width: auto;
    }
  }

  
  /* Set the carousel height to 500px for medium and larger screens */
  @media screen and (max-width: 576px) {
    .carousel-header {
      height: 185px;
    }
  }

/* we can also set for screens of 768px */
@media (min-width: 577px) {
    .project-card-img {
      height:fit-content;
      min-height: 200px;
    }
  }
  
  @media (max-width: 576px) {
    .project-card-img {
      height: auto;
    }
  }

  
  .reduce-col-padding {
    padding-left: 1px;
    padding-right: 1px;
  }

/* fade about contents in */
.fade-in {
  opacity: 0;
  animation: fade-in 3s ease-in-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in2 {
  opacity: 0;
  animation: fade-in 8s ease-in-out forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}


.striped-text {
  background: repeating-linear-gradient(
    20deg,
    transparent,
    transparent 10px,
    rgb(251, 210, 4) 5px,
    rgb(5, 4, 0) 30px
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animateStripes 10s linear infinite;
}

@keyframes animateStripes {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}

/* Begin fixed max six for carousel and its images */
.carousel-container {
  max-width: 1320px;
  margin: 0 auto; /* Center the carousel horizontally */
}
/* End carousel images with fixed size*/