{# Spinner #}
.events-spinner-container{
  display: flex;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: 30px;
}
.events-spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 9px solid;
  border-color: #6bbdab;
  border-right-color: #fdc300;
  animation: spinner-d3wgkg 0.6s infinite linear;
}

@keyframes spinner-d3wgkg {
  to {
    transform: rotate(1turn);
  }
}
{# filter #}

.events-filter{
  display:flex;
}
.events-filter select{
  max-width:300px;
}
.events-filter ul{
  padding: 0;
  padding-left:30px;
  display: flex;
  list-style: none;
  margin: 0;  
  justify-content: space-between;
  width: 100%;
}

.month-span{  
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;  
  cursor:pointer;
}

.month-span.active{
  background-color: var(--primary-color);
  border-radius: 100%;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

{# End Filter #}

.events-listing{
  display:flex;
}
.events-listing .events-slider-container{  
  max-width:45%;
  padding: 3% 3% 3% 0;
}
.featured-event{
  max-width:55%;
  padding: 3% 0 3% 3%;
}

.events-listing article{
  display:flex;  
  margin-bottom:30px;
  cursor:pointer;
}
.events-listing article:hover img, .events-listing article.active img{  
  filter: brightness(1);
}

.events-listing article:hover .title, .events-listing article.active .title{
  color:var(--primary-color);
}

.events-slider-image img{
  width:200px;
  height:120px;
  object-fit:cover;
  border-radius:6px;
  filter: brightness(0.7);
  transition: .3s;
}

.events-slider-data{
  padding-left:14px;
}
.events-slider-data .title{
  font-weight:bold;
  transition: .3s;
}



.events-listing .featured-event img{
  width:100%;
  max-height:380px;
  object-fit:cover;
  border-radius:6px;
}

.events-listing .swiper-pagination-bullet{
  height:12px;
  width:12px;
}
.events-listing .swiper-pagination-bullets {
  display: flex;
  order: 2;
  width: -moz-fit-content;
  width: fit-content;
  margin: 2rem auto 1rem;
}

.events-listing .swiper-pagination-bullet-active{
  background:var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.events-listing .swiper-pagination {  
  position: relative;
}

.events-listing .swiper-pagination-bullet-active:before {
  background-color: rgba(45, 178, 160, .25);
  border-radius: 50px;
  content: "";
  display: block;
  height: 20px;
  position: absolute;
  width: 20px;
}

{# featured #}

.featured-event__description p{
  margin-top: 25px;
}
.featured-event__cta{
  padding: 15px 3px 25px;
}

.featured-event__image {
  position: relative;
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}

#featured-event-image {
  display: block; /* Ensures there are no gaps below the image */
  width: 100%; /* Makes the image responsive */
  height: auto; /* Maintains the aspect ratio */
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient(180deg, transparent, rgb(0 0 0 / 90%));
  padding: 30px 20px;
  color: #fff;
  text-align: left;
}

#featured-event-title {
  text-transform:capitalize;
  color:#fff;
  display: block;
  font-weight: 400;
}


@media (max-width: 992px) {  
  .events-listing {
    flex-direction: column;
  }
  .events-listing .events-slider-container {
    max-width: 100%;
    padding: 0;
  }
  .featured-event{
    display:none;
  }
  .events-listing article {
    flex-direction: column;
  }
  .events-listing  img {
    width: 100%;
  }
  .events-slider-data {
    padding-left: 0;
  }
}

{# Post #}
.events-post {
  display: flex;
  gap:30px;
}
.events-post__image,
.events-post__content {
  width:50%;
}
.events-post__image img {
  width:100%;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 10px -3px rgba(0, 0, 0, .2);
}
.events-post__table {
  margin-top: 20px;
}
.events-post__table thead td {
  border: none;
  font-weight: bold;
}
.events-post__table tbody tr {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5;
}
.events-post__table tbody tr td {
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}
.events-post__buttom {
  margin-top: 30px;
}
@media(max-width:768px){
  .events-post {
    flex-direction: column-reverse;
  }
  .events-post__image,
  .events-post__content {
    width:100%;
  }
}