/* ============================================================
   slider.css — TPS
   Sirf Hero Slider + Stats Bar + Side Buttons ka CSS
   Menu.css se koi conflict nahi
   
   LINK KARO: <link href="CSS/slider.css" rel="stylesheet">
   (menu.css ke BAAD link karo)
============================================================ */

/* ============================================================
   LEFT FIXED SIDE BUTTON — "OPPORTUNITIES @ TPS"
   (desktop pe left edge pe vertical, navy blue)
============================================================ */


/* ============================================================
   SLIDER SECTION WRAPPER
============================================================ */
.slider-section {
  position: relative;
  overflow: hidden;
  /* no margin/padding — header floats absolute above it */
}

/* ============================================================
   OWL CAROUSEL — each slide
============================================================ */
.home-page-slider .item {
  position: relative;
  overflow: hidden;
  line-height: 0;           /* removes inline gap below img */
}

/* ── DESKTOP: full viewport height image ── */
.home-page-slider .item img {
  width: 100%;
  height: 100vh;
  max-height: 850px;
  min-height: 400px;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ── MOBILE: shorter proportional height ── */
@media (max-width: 767px) {
  .home-page-slider .item img {
    height: 58vw;
    min-height: 220px;
    max-height: 400px;
  }
}

/* Top dark gradient — logo readable */
.home-page-slider .item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  /*background: linear-gradient(180deg, rgba(0,0,0,.52) 0%, transparent 100%);*/
  background:linear-gradient(180deg, rgb(0 0 0 / 92%) 0%, #00000000 100%);
  z-index: 1;
  pointer-events: none;
}

/* Bottom dark gradient — caption readable */
.home-page-slider .item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* ============================================================
   CAPTION TEXT — inside each slide, above stats bar
============================================================ */
.home-page-slider .caption {
  position: absolute;
  bottom: 90px;           /* sits just above the stats bar */
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100% - 80px));
  text-align: center;
  color: #fff;
  font-size: clamp(1rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.35;
  z-index: 3;
  text-shadow: 0 2px 16px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.5);
  letter-spacing: .2px;
  margin: 0;
  padding: 0;
  display: block;         /* override any .mb-0 flex issues */
}

@media (max-width: 767px) {
  .home-page-slider .caption {
    bottom: 160px;        /* more space — stats move below on mobile */
    font-size: clamp(.9rem, 4vw, 1.1rem);
    width: calc(100% - 28px);
  }
}

/* ============================================================
   OWL DOTS — bottom-left corner like screenshot
============================================================ */
.home-page-slider .owl-dots {
  position: absolute !important;
  bottom: 60px !important;
  left: 48px !important;
  z-index: 10;
  margin: 0 !important;
  line-height: 1;
}

.home-page-slider .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  background: rgba(255,255,255,.45) !important;
  border-radius: 100px !important;
  margin: 0 3px !important;
  transition: all .3s !important;
  border: none !important;
}
.home-page-slider .owl-dot.active span {
  background: #fff !important;
  width: 20px !important;
}
.home-page-slider .owl-dot:hover span {
  background: rgba(255,255,255,.8) !important;
}

/* Hide owl nav arrows (side buttons handle navigation) */
.home-page-slider .owl-nav { display: none !important; }

@media (max-width: 767px) {
  .home-page-slider .owl-dots {
    bottom: 128px !important;
    left: 50% !important;
    transform: translateX(-50%);
  }
}

/* ============================================================
   STATS / BANNER BAR
   Desktop: position:absolute, overlaps bottom of slider
   Mobile:  position:relative, appears BELOW the slider
============================================================ */
.banner-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  background: rgb(255 255 255 / 42%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
/*  border-top: 4px solid #ffcb05; */
    border-bottom: 4px solid #ffcb05;
}

/* On mobile the stats bar comes out from under the slider */
@media (max-width: 767px) {
  .banner-content {
    position: relative;        /* comes below the slider image */
    bottom: auto;
    border-top: 4px solid #ffcb05;
  }
  /* Extra padding at bottom of slider image so caption isn't cut */
  .slider-section {
    display: flex;
    flex-direction: column;
  }
}

/* ── Stats flex row ── */
.stats-wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
}

/* ── Individual stat ── */
.stat-item {
  flex: 1;
  text-align: center;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.stat-item .num {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  color: #11296b;
  line-height: 1;
  margin-bottom: 5px;
  display: block;
}
.stat-item .lbl {
  font-size: clamp(.52rem, 1.1vw, .78rem);
  font-weight: 700;
  color: #343232;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  line-height: 1.2;
  display: block;
}

/* ── Gold vertical divider ── */
.stat-div {
  width: 2px;
  background: #ffcb05;
  border-radius: 2px;
  margin: 10px 0;
  flex-shrink: 0;
  align-self: stretch;
}

/* ── CBSE logo ── */
.stat-cbse {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.stat-cbse img {
  height: 68px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ── MOBILE stats layout — 2×2 grid + CBSE on top ── */
@media (max-width: 767px) {
  .stats-wrap {
    flex-wrap: wrap;
    padding: 12px 12px 16px;
    gap: 0;
  }
  /* CBSE logo full-width on top */
  .stat-cbse {
    order: -1;
    flex: 0 0 100%;
    padding: 10px 0 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 8px;
  }
  .stat-cbse img { height: 56px; }

  /* Hide gold dividers on mobile */
  .stat-div { display: none; }

  /* Each stat takes 50% width — 2 per row */
  .stat-item {
    flex: 0 0 50%;
    padding: 10px 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  /* Remove bottom border on last 2 */
  .stat-item:nth-last-child(-n+2) { border-bottom: none; }

  /* Add right border to left column items */
  .stat-item:nth-child(odd):not(:last-child) {
    border-right: 1px solid #f0f0f0;
  }
}

/* ── Very small phones ── */
@media (max-width: 380px) {
  .stat-item .num { font-size: 1.4rem; }
  .stat-item .lbl { font-size: .55rem; }
  .stat-cbse img { height: 46px; }
}



/* ===============================================
   SLIDER PREV NEXT BUTTON
================================================*/
/*
.home-page-slider .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.45) !important;
    border: none !important;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff !important;
    font-size: 26px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all .3s;
    z-index: 20;
}

.home-page-slider .owl-nav button:hover{
    background:#ffcb05 !important;
    color:#000 !important;
}

.home-page-slider .owl-nav .owl-prev{
    left: 20px;
}

.home-page-slider .owl-nav .owl-next{
    right: 20px;
}

@media (max-width:768px){

.home-page-slider .owl-nav button{
    width:40px;
    height:40px;
    font-size:22px !important;
}

}
*/