/* Custom Swiper Container */
.custom-swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Custom Swiper Wrapper */
.custom-swiper-wrapper {
  display: flex;
}

/* Custom Swiper Slide */
.custom-swiper-slide {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* Allows items to wrap in the slide */
}

/* Custom Slide Content */
.custom-slide-content {
  position: relative;
  width: 30%; /* Adjust based on your layout, can use flex-basis with flexbox as well */
  margin: 10px;
}

/* Custom Image Container */
.custom-image-container {
  position: relative;
  display: grid;
  grid: 1fr;
}

/* Custom Image */
.custom-image {
  width: 100%;
  display: block;
  grid-row: 1;
  grid-column: 1;
}

/* Custom Overlay */
.custom-overlay {
  grid-row: 1;
  grid-column: 1;
  background: hsla(275, 26%, 29%, 0.7);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Custom Overlay Content */
.custom-overlay-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  color: white;
  height: 100%;
  padding: 2rem;
}

/* Custom Date */
.custom-date {
  margin-bottom: 0.5em;
}

/* Custom Title */
.custom-title {
  margin-bottom: 0.5em;
  font-size: 2.2rem;
}

/* Custom Description */
.custom-description {
  margin-bottom: 1em;
}

/* Custom Read More Link */
.custom-read-more {
  color: white;
  text-decoration: none;
  border: 1px solid white;
  padding: 0.5em 1em;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

/* Hover effect for Overlay */
.custom-image-container:hover .custom-overlay {
  opacity: 1;
}

/* Hover effect for Read More Link */
.custom-read-more:hover {
  background-color: white;
  color: blue;
}

/* Custom Swiper Pagination */
.custom-swiper-pagination {
  text-align: center;
  /* position: absolute;
  bottom: 10px; */
  width: 100%;
}

/* Responsive adjustments */
/* @media (max-width: 768px) {
  .custom-slide-content {
    width: 48%; /* Adjust for smaller screens 
  }
} */

/* @media (max-width: 480px) {
  .custom-slide-content {
    width: 100%; /* One item per row on very small screens 
  }
} */

.swiper-pagination-bullet-active {
  background: var(--clr-accent-200);
}

.hero {
  background-image: url(../assests/img/genr-hero.jpg);
}

#facts .flex {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 46, 86, 0.89),
    rgba(31, 0, 50, 1)
  );
}

.flex-section {
  align-items: flex-start;
}