.announcement-container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  overflow-x: auto;
}

.announZcement-slider {
  display: flex;
  flex-wrap: nowrap;

  margin-bottom: 5%;
  padding: 10px;

  
  overflow-y: hidden;
}

.announZcement-slider::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}


/* for desktop */
@media (min-width: 767px) {
    .announcement-container {
        margin-left: 7%;
        margin-right: 7%;
    }
  }

/* for mobile */
@media (max-width: 767px) {
  .announZcement-slider {
    transform: none;
    margin-bottom: 15%;
  }
}

.announXcement {
  flex: 0 0 auto;
  margin-right: 20px;
  border: 1px solid #ddd;
  border-radius: 20px;
  width: 100%; /* Make the cards occupy the full width of the slider */
  max-width: 400px; /* Limit the maximum card width to 400px */
  padding-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 2px 10px rgba(0, 0, 0, 0.1);
  scroll-snap-align: center; /* Ensure cards snap to center during scrolling */
  overflow: hidden;
}

.announXcement:hover {
  animation: gradientAnimationCard 2s infinite;
}

@keyframes gradientAnimationCard {
  0% {
    box-shadow: 0 0 10px rgba(231, 60, 126, 0.8);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
  }
  100% {
    box-shadow: 0 0 10px rgba(238, 119, 82, 0.8);
  }
}

.announXcement img {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
  transition: transform 0.3s;
}

.announXcement:hover img {
  transform: scale(1.1); /* Zoom in effect on hover */
  position: relative;
  z-index: 1;
}

.announXcement h3 {
  margin-bottom: 10px;
  font-size: 20px;
  /* text-transform: uppercase; */
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}

.announXcement p {
  font-size: 16px;
  line-height: 1.5;
  text-align: justify;
  color: grey;
  margin-left: 10%;
  margin-right: 10%;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Maximum number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.announXcement a {
  display: block;
  font-weight: bold;
  color: #ffc107;
  text-align: center;
  transition: font-size 0.3s;
  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* Compatibility for older WebKit browsers */
}

.announXcement:hover a {
  background-image: linear-gradient(45deg, #ffc107, #ffc107, #e73c7e, #ee7752, #ffc107, #ffc107);
  background-size: 200% 200%;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* Standard property */
  -webkit-background-clip: text; /* Compatibility for older WebKit browsers */
  animation: gradient-animation 3s linear infinite;
  font-size: 14pt;
  font-weight: bold;
  text-transform: uppercase;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.announXcement p + a {
  margin-top: 10px;
}