/* Show only first 2 pagination dots */
#storySlider1 .swiper-pagination-bullet {
  display: none;
}

#storySlider1 .swiper-pagination-bullet:nth-child(1),
#storySlider1 .swiper-pagination-bullet:nth-child(2) {
  display: inline-block;
}
/* Mobile: show ALL dots */
@media (max-width: 575px) {
  #storySlider1 .swiper-pagination-bullet {
    display: inline-block;
  }
}

/* Tablet: show ONLY 4 dots */
@media (min-width: 576px) and (max-width: 991px) {
  #storySlider1 .swiper-pagination-bullet {
    display: none;
  }

  #storySlider1 .swiper-pagination-bullet:nth-child(1),
  #storySlider1 .swiper-pagination-bullet:nth-child(2),
  #storySlider1 .swiper-pagination-bullet:nth-child(3),
  #storySlider1 .swiper-pagination-bullet:nth-child(4) {
    display: inline-block;
  }
}

/* Desktop: show ONLY 2 dots */
@media (min-width: 992px) {
  #storySlider1 .swiper-pagination-bullet {
    display: none;
  }

  #storySlider1 .swiper-pagination-bullet:nth-child(1),
  #storySlider1 .swiper-pagination-bullet:nth-child(2) {
    display: inline-block;
  }
}



/* start clander */
/* *{box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif} */
/* body{margin:0;background:#fff;padding:10px} */
/* HEADER */
.header{
  text-align:center;
  padding:20px;
  font-size:36px;
  color:#c00;
  font-weight:bold
}
/* MAIN */
.calendar-wrapper{
  display:flex;
  min-height:500px;
  border: 2px solid red;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}
/* LEFT PANEL */
.left-panel{
  width:60%;
  background:linear-gradient(rgba(1, 5, 7, 0.989),rgb(2, 5, 9)),
  url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1');
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:30px;
  position:relative
}
/* LOGO IMAGE */
.logo img{
  max-width:180px;
  margin-bottom:30px;
}
/* EVENTS */
.events h3{
  border-bottom:1px solid;
  padding-bottom:10px;
  color:#fff;
  text-align: center;
}
.events ul{
  list-style:none;
  padding:0;
  font-size: 24px;
  text-align: center;
}
.events li{
  margin:10px 0;
  padding:12px;
  background:rgba(255,255,255,.15);
  border-radius:5px
}
/* STAR */
.star{
  position:absolute;
  right:-20px;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  color:gold
}
/* RIGHT PANEL */
.right-panel{
  width:40%;
  background:#fff;
  color:#fff;
  padding:30px
}
/* MONTH BAR */
.month-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin-bottom:30px
}
.month-bar button{
  background:none;
  border:none;
  color:#020202;
  font-size:30px;
  cursor:pointer
}
.month-name{
  font-size:48px;
  font-weight:bold;
  letter-spacing:2px;
  color:#000
}
/* CALENDAR */
.weekdays{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  color:red;
  font-weight:bold;
  text-align:center;
  margin-bottom:15px
}
.days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  color:#000
}
.days div{
  padding:12px;
  margin:6px;
  cursor:pointer
}
.event-day{
  background:gold;
  color:#000;
  border-radius:50%;
  font-weight:bold
}
.active-day{
  outline:3px solid #fff
}
/* RESPONSIVE */
@media(max-width:900px){
  .calendar-wrapper{
    flex-direction:column;
    width: 95%;
  }
  .left-panel,.right-panel{width:100%}
  .star{display:none}
  .logo img{max-width:140px}
  .events ul{font-size: 18px}
  .month-name{font-size:36px}
}

@media(max-width:600px){
  .header{font-size:28px;padding:15px}
  .left-panel,.right-panel{padding:20px}
  .events ul{font-size: 16px}
  .month-name{font-size:28px;letter-spacing:1px}
  .month-bar{gap:15px}
  .month-bar button{font-size:24px}
  .days div{padding:8px;margin:3px;font-size:14px}
  .weekdays{font-size:14px}
}

@media(max-width:400px){
  .calendar-wrapper{width: 98%}
  .month-name{font-size:24px}
  .days div{padding:6px;margin:2px;font-size:12px}
  .weekdays{font-size:12px;margin-bottom:10px}
  .events li{font-size:14px;padding:10px}
}

.flip-front.overlay::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  pointer-events: none;
  z-index: 1;
}



@media (max-width: 768px) {
  .new-preview {
    height: 260px;        /* FIXED height */
    max-height: 260px;
    overflow: hidden;
  }

  .new-preview video {
    width: 100%;
    height: 100%;        /* 🔥 KEY FIX */
    object-fit: cover;  /* fills box properly */
    
  }
}

/* All Icons Ranking podcast etc... */
@media (max-width: 767px) {

  /* Remove extra padding */
  .allicon {
    padding: 0 !important;
  }

  /* Icon box spacing */
  .allicon .icon-boxes {
    padding: 25px 0;
    position: relative;
  }

  /* Center icons */
  .allicon .icon-boxes img {
    width: 60px;
    margin: 0 auto;
    display: block;
  }

  /* Text spacing */
  .allicon .icon-boxes a.font-black {
    display: block;
    margin-top: 8px;
  }

  /* Arrow styling */
  .allicon .icon-boxes .fa-arrow-right {
    display: inline-block;
    margin-top: 6px;
    font-size: 18px;
  }

  /* Remove right border */
  .allicon .border-right-yellow {
    border-right: none !important;
  }

  /* Bottom divider */
  .allicon .col-xl-3 {
    border-bottom: 1px solid #e3b04b;
  }

  /* Remove divider from last item */
  .allicon .col-xl-3:last-child {
    border-bottom: none;
  }
}


/* last section  */
@media (max-width: 767px) {
.roots{
padding-top: 35px;
}
}