/* Limit the height of Card 2 */
.card-2 {
  height: 610px; /* Set the height for Card 2 630 */
  overflow: hidden; /* Prevent content from overflowing */
  display: flex;
  flex-direction: column;
} 


/* Ensure the list group inside Card 2 is scrollable */
.card-2 .card-body {
  overflow-y: auto; /* Enable vertical scrolling */
}


.borderless td, .borderless th {
    border : none;
}


.duyuru-img {
    height: auto; /* Allow the height to adjust dynamically */
    max-height: 150px; /* Limit the maximum height */
    width: 100%; /* Ensure the image spans the full width of the container */
    object-fit: cover; /* Fit the entire image within the container */
}


/* Override Default Carousel Arrows  */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  background-image: none;
}


.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: dimgray;
}


.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: dimgray;
}


/* Limit Carousel Images */
.carousel-item img {
    max-height: 240px; /* Set the maximum height */
    max-width: 100%; /* Ensure the image does not exceed the container's width */
    object-fit: contain; /* Ensures the entire image fits within the specified dimensions */
    margin: auto; /* Centers the image horizontally */
    display: block; /* Prevents Flexbox from affecting the image layout */
}


/* Fix Carousel Height */
#id_carousel {
    height: 300px; /* Set the fixed height for the carousel */
}


/* Adds space at the top of each carousel item */
#id_carousel .carousel-item > div {
    padding-top: 20px; 
}


/* for the spacer between announcements and carousel */
/* this overloads flex-grow-1 so you can change fillspace bg pattern also */
.flex-grow-1 {
  flex-grow: 1;
  /*background-color: #84878a; /* Optional background */ 
  display: flex;
  justify-content: center;
  align-items: center;
}


.card-announcement .card-body {
  background: #eff2f5; 
  border-radius: 0.5rem; /* Rounded corners */
  padding: 1rem; /* Add padding for better spacing */
}


.card-announcement:hover .card-body {
  transform: translateY(-5px); /* Slightly lift the card */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Add a shadow */
  transition: all 0.3s ease; /* Smooth transition */
  /*color: #0d6efd; /* Change to Bootstrap's primary color on hover */
}