/* Font Importing */
@font-face {
    font-family: regularFont;
    src: url("../font/Gilroy-Regular.31ff7c1a62a3.ttf");
}
@font-face {
    font-family: mediumFont;
    src: url("../font/Gilroy-Medium.c83281ae1ca7.ttf");
}
@font-face {
    font-family: semiBoldFont;
    src: url("../font/Gilroy-SemiBold.a5cf732b1507.ttf");
}
@font-face {
    font-family: boldFont;
    src: url("../font/Gilroy-Bold.b381c2abd297.ttf");
}

/* Poppins (English/Latin) + Noto Sans Devanagari (Marathi/Hindi) for the
   entire project — Poppins has no Devanagari glyphs, so Devanagari text
   always renders in the next font in this stack regardless of which Latin
   font is listed first; Noto Sans Devanagari is named explicitly so that
   fallback is a deliberate, visually-matching choice. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

/* CSS Reset */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
}

/* Base text elements */
p, div, li, span, a, input, textarea {
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
}

/* Headings and buttons */
h1,
h2,
h3,
h4,
h5,
h6,
button {
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif !important;
}

/* Font utility classes (kept for backwards compatibility, now all Poppins) */
.inter {
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif !important;
}

.playfair {
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif !important;
}

body,
html {
  width: 100%;
  min-height: 100%;
  scrollbar-width: thin;
}

#audioScroll {
  scrollbar-width: thin;
}

/* Hide scrollbar for WebKit (Chrome, Safari) */
#audioScroll::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for Firefox */
#audioScroll {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}


#audioSection {
  transition: transform 0.4s ease;
  display: flex;
  /* gap: 10px; Adjust gap as necessary */
}

#yatraSection {
  transition: transform 0.4s ease;
  display: flex;
  /* gap: 10px; Adjust gap as necessary */
}

/*   
.hideScrollBar::-webkit-scrollbar{
   
    display: none;
} */



/* Splide */
.splide {
  padding: 20px 0;
}

/* // Generic Slide */
.splide__slide {
  img {
    display: block;
    width: 100%;
    border-radius: 8px;
    transition: transform 400ms;
    transform: scale(.9);
    transform-origin: center center;
  }
}

/* // Active Slide */
.splide__slide.is-active {
  img {
    transform: scale(1);
  }
}

/* // Arrow Tweaks for Accessibility */
.splide .splide__arrow {
  top: 0;
  bottom: 0;
  height: 100%;
  transform: none;
  border-radius: unset;
  width: 50px;
  opacity: .9;

  svg {
    filter: invert(1);
    width: 24px;
    height: 24px;
  }
}

.splide__arrow.splide__arrow--prev {
  left: 0;
  background: linear-gradient(90deg, #E4FFB1 0%, #E4FFB1 100%);
}

.splide__arrow.splide__arrow--next {
  right: 0;
  background: linear-gradient(270deg, #E4FFB1 0%, #E4FFB1 100%);
}


/* body {
    margin: 0;
    background-color: black;
    color: #fff;
    text-align: center;
    font-family: Arial;
  }
  a {
    color: #fff;
    padding: 4px 8px;
  }
  section {
    max-width: 700px;
    margin: 0 auto;
  } */
.left {
  text-align: left;
}

.plyr--video {
  border-radius: 10px;
}

.footer {
  /* background-image: linear-gradient(to right top, #1d417d, #493c7d,
   #6a3376, #832868, #961f55); */
  background-image: url("../img/fb.7e1c085b5eb0.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;

}


.topic-title {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
}

.topic-paragrapgh {
  -webkit-line-clamp: 4;
}

.trending_para {
  -webkit-line-clamp: 2;
}


/* Header - Swiper */

/* .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  } */

/* .autoplay-progress {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
  }

  .autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--swiper-theme-color);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
  } */

.swiper-button-nextt:after,
.swiper-rtl .swiper-button-prevv:after {
  display: none !important;
}

.swiper-button-prevv:after,
.swiper-rtl .swiper-button-nextt:after {
  display: none !important;
}


.swiper-pagination-bullet {
  background-color: #d1d5db !important;
  /* Tailwind slate-300 */
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  background-color: #910600 !important;
  /* Tailwind blue-500 */
}

/* Custom grid layout helpers for big cards to prevent them from landing in the middle of rows */
@media (min-width: 768px) {
  .big-card-left {
    grid-column-start: 1 !important;
  }
  .big-card-right {
    grid-column-end: -1 !important;
  }
}
/* ── Card category chip ───────────────────────────────────────────────
   Sits over a card's image well (see templates/partials/category_badge.html).
   Written as real CSS on purpose: this site ships a *compiled* Tailwind build
   (static/css/tailwind.css), so utilities not already used elsewhere — the
   opacity variants, arbitrary sizes — simply aren't in it and silently do
   nothing. Anything visual here has to stand on its own. */
.yl-cat-chip {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 20;
  max-width: calc(100% - 20px);
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .015em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: rgba(22, 18, 16, .38);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 1px 6px rgba(0, 0, 0, .16);
  pointer-events: none;
}

/* Without backdrop-filter the chip would sit on bare translucency and lose
   contrast against a busy photo — lean on a darker fill instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .yl-cat-chip { background: rgba(22, 18, 16, .68); }
}

/* Align Flaticon (fi) icons properly with text across the site */
.fi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}