body {font-family: "DM Sans", "Anek Malayalam", sans-serif; font-size: clamp(0.95rem, 0.9vw, 1.1rem);}
:root {
      --navy:      #010d27;
      --deep:      #070d44;
      --mid:       #007FFF;
      --blue:      #1e4fa0;
      --baby:      #5ba4d8;
      --sky:       #90c8f0;
      --mist:      #c5e4f8;
      --pale:      #e8f4fd;
      --white:     #ffffff;
      --off-white: #f4f8fd;
      --accent:    #38bdf8;
      --gold:      #f59e0b;
      --text-dark: #0d1f3c;
      --text-mid:  #3a5478;
      --text-lt:   #6a90b8;
    }

    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior:smooth; }
a, a:hover{text-decoration: none;}
.logo{max-height: 50px}
.login{width: 40px; height: 40px; line-height: 27px; text-align: center; padding: 5px; font-size: 22px}
.sm-show {display: none;}
.lg-show {display: block;}
.of-hide{overflow: hidden;}
.bg-light{ background-image:url('bg-light.png'); background-repeat:repeat; background-color: #f5f5f5 !important}
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--navy);
    display: inline-block;
    position: relative;
    margin-bottom: 50px;
    letter-spacing: -0.5px;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -12px;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--baby), var(--accent));
    border-radius: 4px;
}

.section-blue1{background-color: #e8f4fd}
@media screen and (min-min-width: 768px) {
  .sm-show {display: block;}
  .lg-show {display: none;}
}


.program-text { position: absolute; left: 0; bottom: 0px; color: #fff; width: 100%; cursor: pointer; overflow: hidden; line-height: 2rem; border-radius: 12px; padding: 20px 30px; background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7), rgba(0,0,0,1)); z-index: 3; }
.category{padding: 2px 12px; border-radius: 8px; font-size: 12px}

.custom-event-card { position: relative; background: transparent !important; }
.card-img-top-wrapper { overflow: hidden; border-radius: 0.5rem; }
.card-img-top-wrapper img { transition: transform 0.4s ease; object-fit: cover; height: 200px; width: 100%; }
.custom-card-body { position: relative; z-index: 2; margin-top: -30px; margin-left: 12px; margin-right: 12px; border: 1px solid rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.custom-event-card:hover .custom-card-body { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important; }
.custom-event-card:hover .card-img-top-wrapper img { transform: scale(1.05); }
.read-more-btn i { transition: transform 0.2s ease; }
.read-more-btn:hover i { transform: translateX(3px); }
.view-more-link:hover { color: var(--bs-success) !important; border-color: var(--bs-success) !important; }
.click-card-target { display: block; overflow: hidden; border-radius: 0.5rem; }

.frour-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}
.three-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.two-line {text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

.ratio-9x16 { --bs-aspect-ratio: 177.77%; }

.timeline-scroll-wrapper { overflow-x: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.timeline-scroll-wrapper::-webkit-scrollbar { height: 4px; }
.timeline-scroll-wrapper::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.2); border-radius: 10px; }
.flex-0-0-auto { flex: 0 0 auto; }
.timeline-item { width: 85vw; scroll-snap-align: start; position: relative; }


    /* ══════════════════════════════
       TOP INFO BAR
    ══════════════════════════════ */
    .top-bar {
      background: #003366;
      padding: 8px 0;
      border-bottom: 1px solid rgba(91,164,216,0.2);
    }
    .top-bar-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .top-bar-left {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 12px;
      color: var(--mist);
    }
    .top-bar-left span { display:flex; align-items:center; gap:6px; }
    .top-bar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .social-icon {
      width: 28px; height: 28px;
      background: #0055ab;
      border-radius: 6px;
      display: flex; align-items:center; justify-content:center;
      font-size: 13px;
      cursor: pointer;
      transition: 0.2s;
      color: #fff;
    }
    .social-icon:hover { background: var(--baby); color:#fff; }


 /* ══════════════════════════════
       HERO
    ══════════════════════════════ */
    .hero { padding-top: 36px; background-image:url('bg-light.png'); background-repeat:repeat;  }

    .hero-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 22px;
      align-items: stretch;
    }

    /* ─── NEWS PANEL with images ─── */
    .news-box {
      background: #10397c;
      border-radius: 24px;
      overflow: hidden;
      position: relative;
      min-height: 580px;
      display: flex;
      flex-direction: column;
    }
    .news-box::before {
      content:'';
      position:absolute;
      inset:0;
      background: radial-gradient(ellipse at top right, rgba(91,164,216,0.15), transparent 60%);
      pointer-events:none;
      z-index:0;
    }

    .news-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 24px 18px;
      position: relative;
      z-index: 1;
      border-bottom: 1px solid rgba(91,164,216,0.15);
    }
    .news-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .news-header h3 {
      font-family: 'DM Sans', sans-serif;
      font-size: 20px;
      color: #fff;
      font-weight: 700;
    }
    .news-icon-wrap {
      width: 32px; height: 32px;
      background: linear-gradient(135deg, var(--baby), var(--accent));
      border-radius: 8px;
      display:flex; align-items:center; justify-content:center;
      font-size: 15px;
    }
    .news-count {
      background: var(--accent);
      color: var(--navy);
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      letter-spacing: 0.5px;
    }

    .vertical-news {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .news-scroll {
      position: absolute;
      width: 100%;
      padding: 16px 20px;
      animation: scrollNews 30s linear infinite;
    }

    .news-scroll:has(.news-item:hover) {animation-play-state: paused;}

    /* NEWS ITEM WITH IMAGE */
    .news-item {
      background: linear-gradient(-90deg, var(--mid),  var(--blue), var(--blue));
      border: 1px solid rgba(91,164,216,0.15);
      border-radius: 16px;
      margin-bottom: 14px;
      overflow: hidden;
      transition: 0.3s;
    }
    .news-item:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(10,22,40,0.14);
    }

    .news-item-img {
      width: 100%;
      height: 130px;
      object-fit: cover;
      display: block;
      transition: 0.4s;
    }
    .news-item:hover img { transform:scale(1.06); }
    .news-item-body {
      padding: 14px 16px;
    }
    .news-tag {
      display: inline-block;
      background: var(--mid);
      color: #fff;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 1.5px;
      padding: 3px 8px;
      border-radius: 4px;
      margin-bottom: 7px;
      text-transform: uppercase;
    }
    .news-item h4 { font-size: 14px; color: #fff; font-weight: 600; margin-bottom: 5px; line-height: 1.4; }
    .news-item p  { color: rgba(255,255,255,1); line-height: 1.6; font-size: 12px; }

    @keyframes scrollNews {
      0%   { top: 0; }
      100% { top: -200%; }
    }

    /* ─── SLIDER ─── */
    .slider{
    border-radius:24px;
    overflow:hidden;
    position:relative;
    min-height:580px;
    box-shadow:0 20px 60px rgba(10,22,40,.25);
}

#heroCarousel .slide{
    min-height:600px;
    background-size:cover;
    background-position:center;
    position:relative;
}

#heroCarousel .slide::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(
        130deg,
        rgba(10,22,40,.92) 0%,
        rgba(10,22,40,.35) 55%,
        transparent 100%
    );
}

.slide-content{
    position:absolute;
    left:52px;
    bottom:52px;
    max-width:540px;
    color:#fff;
    z-index:2;
}

.slide-content h2{
    font-family:'Playfair Display', serif;
    font-size:55px;
    font-weight:900;
    line-height:1.05;
    margin-bottom:18px;
}

.slide-content p{
    font-size:15px;
    line-height:1.8;
    color:rgba(255,255,255,.85);
}

.carousel-indicators{
    margin-bottom:25px;
}

.carousel-indicators button{
    width:10px !important;
    height:10px !important;
    border-radius:50%;
}

.carousel-control-prev,
.carousel-control-next{
    width:60px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    width:45px;
    height:45px;
    border-radius:50%;
    background-color:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.5);
    backdrop-filter:blur(12px);
    background-size:18px;
}

.carousel-indicators{
    right:30px;
    left:auto;
    bottom:30px;
    margin:0;
    justify-content:flex-end;
    gap:8px;
}

.carousel-indicators [data-bs-target]{
    width:8px;
    height:8px;
    margin:0;
    border:none;
    border-radius:50px;
    opacity:1;
    background:rgba(255,255,255,.35);
    transition:all .4s ease;
}

.carousel-indicators .active{
    width:32px !important;
    height:8px;
    background:linear-gradient(90deg,#00c8ff,#3de1ff);
    box-shadow:0 0 10px rgba(0,200,255,.5);
}

/* ══════════════════════════════
       HEADER / NAVBAR
    ══════════════════════════════ */
    header {

      top: 0;
      z-index: 999;
      /*background-image: linear-gradient(90deg, #073187, #004f9f);*/
      background-image: linear-gradient(90deg, #e9f8ff, #c1ebff);
      box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    }

    .navbar {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      min-height: 70px;
    }
    .logo-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding:  0;
}
    .logo-text h1 {
      font-family: 'DM Sans', serif;
      font-size: 20px;
      color: #114b7d;
      font-weight: 700;
      line-height: 1;
    }
    .logo-text span {
      font-family: 'DM Sans', serif;
      color: #114b7d;
      font-size: 10px;
      text-transform: uppercase;
      line-height: .75;
    }

    /* NAV MENU - pill style */
    nav {
      display: flex;
      align-items: center;
    }
    nav ul {
      display: flex;
      list-style: none;
      height: 100%;
      margin-bottom: 0;
    }
    nav ul li {
      position: relative;
    }
    nav ul li .nav-link {
      display: flex;
      align-items: center;
      height: 100%;
      padding: 10px 10px !important;
      color: rgba(0,0,0,0.75) !important;
      font-size: 15px;
      font-weight: 500 !important;
      letter-spacing: 0.3px;
      transition: 0.25s;
      position: relative;
      text-decoration: none;
      line-height: 50px;
    }
    nav ul li .nav-link::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%; right: 50%;
      height: 3px;
      background: var(--accent);
      border-radius: 3px 3px 0 0;
      transition: 0.3s;
    }
    nav ul li .nav-link:hover {
      color: #fff;
      background: rgba(91,164,216,0.1);
    }
    nav ul li .nav-link:hover::after {
      left: 12px; right: 12px;
    }
    nav ul li.active a {
      color: #fff;
      background: rgba(91,164,216,0.15);
    }
    nav ul li.active a::after {
      left: 16px; right: 16px;
    }

    .dropdown-menu{min-height: 80px}

    /* Live badge */
    .live-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      /*background: linear-gradient(135deg, #ff00d7, #007cff);*/
      color: #fff;
      padding: 8px 18px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      margin: auto 0;
      align-self: center;
    }
    .live-dot {
      width: 7px; height: 7px;
      background: #fff;
      border-radius: 50%;
      animation: pulse 1.4s infinite;
    }
    @keyframes pulse {
      0%,100% { opacity:1; transform:scale(1); }
      50%      { opacity:0.4; transform:scale(1.5); }
    }

    /* BTN */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 26px;
      border-radius: 8px;
      background: linear-gradient(135deg, #007FFF, var(--mid));
      color: #fff;
      font-weight: 600;
      font-size: 14px;
      transition: 0.3s;
      letter-spacing: 0.3px;
      border:none !important;
    }
    .btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 28px rgba(30,79,160,0.4);
    }
    .btn-light {
      background: #fff;
      color: var(--blue);
    }
    .btn-light:hover { box-shadow: 0 10px 28px rgba(255,255,255,0.25); }
    .btn-outline {
      background: transparent;
      border: 2px solid rgba(255,255,255,0.5);
      color: #fff;
    }
    .btn-outline:hover { background:rgba(255,255,255,0.1); box-shadow:none; }
    .btn-accent {
      background: #007FFF;
      color: #fff;
      font-weight: 700;
    }

.scroll-wrapper { width: 100%; overflow: hidden; position: relative; }
.scroll-track { display: flex; gap: 1rem; animation: scrollLoop 20s linear infinite; }
.scroll-item { flex: 0 0 auto; width: 25%;}
@keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.scroll-track:has(.scroll-item:hover) {animation-play-state: paused;}
.scroll-item a { z-index: 1; }
.scroll-item a img { transition: transform 0.4s ease; width:100%;}
.scroll-item a:hover img { transform: scale(1.08); }



/* ══════════════════════════════
       CARDS
    ══════════════════════════════ */
    .section-alt { background: var(--pale); }

    .grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

    .card {
      background: var(--white);
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(10,22,40,0.07);
      border: 1px solid rgba(30,79,160,0.07);
      transition: 0.4s cubic-bezier(0.25,0.8,0.25,1);
    }
    .card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 50px rgba(10,22,40,0.14);
    }
    .card-img-wrap { position:relative; overflow:hidden; }
    .card img { height:210px; object-fit:cover; transition:0.5s; }
    .card:hover img { transform:scale(1.06); }
    .card-tag {
      position:absolute; top:12px; left:12px;
      background: linear-gradient(135deg, var(--blue), var(--mid));
      color:#fff;
      font-size:9.5px; font-weight:700;
      letter-spacing:1.5px;
      padding:4px 10px; border-radius:5px;
      text-transform:uppercase;
    }
    .card-content { padding:22px; }
    .card-content h3 {
      font-family:'DM Sans', "Anek Malayalam", sans-serif;
      margin-bottom:10px;
      font-size:20px;
      color:var(--navy);
      font-weight: 500;
      line-height:1.25;
    }
    .card-content p { line-height:1.25; color:var(--text-mid); font-size:16px; }

/* ══════════════════════════════
       TEAM
    ══════════════════════════════ */
    .team-card {
      text-align: center;
      background-image: linear-gradient(to bottom, #ffffff 60%, #1e4fa0 40%);
      padding: 36px 22px 26px;
      border-radius: 24px;
      box-shadow: 0 6px 28px rgba(10,22,40,0.07);
      transition: 0.35s;
      position: relative;
      overflow: hidden;
    }
    .team-card::before {
      content:'';
      position:absolute;
      top:20px; left:0; right:0;
      height:10px;
      width: 20%;
      margin: auto;
      border-radius: 10px;
      background: #1e4fa0;
    }
    .team-card::after {
      content:'';
      position:absolute;
      bottom:0; left:0; right:0;
      height:5px;
      background: linear-gradient(90deg, var(--baby), var(--accent));
    }
    .team-card:hover { transform:translateY(-8px); box-shadow:0 20px 50px rgba(10,22,40,0.12); }
   
    .team-card h3 {
      font-family:'Playfair Display',serif;
      margin-bottom:6px;
      color:#fff;
      font-size:20px;
    }
    .team-card p { font-size:11px; color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; }
    .team-card .emblem{max-height: 100px}

.testimonial-content{font-size: 18px}
.testimonial-quote{font-size: 60px; color: #3cbaf5; position: absolute; bottom: -50px; left: 15px; -webkit-text-stroke: 2px white;}
.testimonial-pic{width: 50px; height: 50px; border-radius:50%; float: left; margin-right: .75rem;}
.quote-from{line-height: 1.1rem}


 /* ══════════════════════════════
       STATS STRIP
    ══════════════════════════════ */
    .stats-strip { background: linear-gradient(135deg, #007cff, #7245ed, #7245ed); padding:0; }
    .stats-inner { display:grid; grid-template-columns:repeat(4,1fr); }
    .stat-block {
      padding: 36px 24px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,0.1);
    }
    .stat-block:last-child { border-right:none; }
    .stat-number {
      font-family: 'DM Sans', sans-serif;
      font-size: 46px;
      font-weight: 900;
      color: #fff;
      line-height: 1;
      margin-bottom: 7px;
    }
    .stat-label { font-size:12.5px; color:#fff; font-weight:500; letter-spacing:0.5px; }

    .bg-map{background-color: #f2faff}

    

/* ══════════════════════════════
       FOOTER
    ══════════════════════════════ */
    footer {
      background: var(--navy);
      color: #fff;
      padding: 0 0 28px;
    }
    footer a{text-decoration: none;}
    .footer-top {
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--accent), var(--baby));
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1.4fr;
      gap: 40px;
      margin-bottom: 48px;
      padding-top: 56px;
    }
    .footer-logo {
      font-family: 'DM Sans', sans-serif;
      font-size: 22px;
      color: #fff;
      margin-bottom: 14px;
    }
    .footer-logo span { color: var(--sky); }
    .footer-desc { color:rgba(197,228,248,0.6); line-height:1.85; font-size:13.5px; margin-bottom:22px; }
    .footer-socials { display:flex; gap:10px; }
    .f-social {
      width:48px; height:48px;
      background:#007FFF;
      border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      font-size:24px; transition:0.3s; cursor:pointer;
    }
    .f-social:hover { background:var(--baby); }
    .footer-contact{font-size: 16px}
    .footer-box h3 {
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:2.5px;
      color:var(--sky);
      margin-bottom:20px;
    }
    .footer-box ul { list-style:none; }
    .footer-box li {
      color:rgba(197,228,248,0.6);
      font-size:13.5px;
      padding:7px 0;
      border-bottom:1px solid rgba(255,255,255,0.05);
      transition:0.2s; cursor:pointer;
    }
    .footer-box li:hover { color:var(--accent); padding-left:6px; }
    .f-contact-item {
      display:flex; gap:10px; align-items:flex-start;
      color:rgba(197,228,248,0.65);
      font-size:13.5px; margin-bottom:13px;
    }
    .f-contact-item .ic {
      width:28px; height:28px;
      background:rgba(91,164,216,0.12);
      border-radius:7px;
      display:flex; align-items:center; justify-content:center;
      font-size:13px; flex-shrink:0;
    }
    .footer-form input,
    .footer-form textarea {
      width:100%; padding:12px 15px; margin-bottom:10px;
      border:1px solid rgba(91,164,216,0.15);
      border-radius:10px;
      background:rgba(255,255,255,0.05);
      color:#fff !important;
      font-family:'DM Sans',sans-serif; font-size:13.5px;
      outline:none; transition:0.25s;
    }
    .footer-form input::placeholder,
    .footer-form textarea::placeholder { color:rgba(255,255,255,0.5); }
    .footer-form input:focus,
    .footer-form textarea:focus {
      border-color:rgba(91,164,216,0.5);
      background:rgba(91,164,216,0.07);
    }
    .copyright {
      text-align:center;
      border-top:1px solid rgba(255,255,255,0.06);
      padding-top:26px;
      color:rgba(197,228,248,0.35);
      font-size:12.5px;
    }
    .copyright span { color:var(--sky); }

.logo2 {
    max-height: 50px;
    border-top-left-radius: 8px;
}
.logo3{max-height: 25px;}

.foot-live {
        font-size: 48px !important; width:72px; height: 72px; line-height: 30px; text-align: center; padding: 12px
    }


.fb{background: #2a6afb !important;}
.yt{background: #ee3b69 !important;}
.ig{background: linear-gradient(135deg, #ff00d7, #007cff) !important;}
.sf{background: #3bee7e !important; color: #000}


.past-show { opacity: 1; }
.timeline-card { transition: transform 0.2s ease, box-shadow 0.2s ease; background-color: #01144e; border:1px solid #14389a; }
.timeline-item:hover .timeline-card { transform: translateY(-2px); }
.bg-time{background: linear-gradient(135deg, #7e34e8, #007cff); text-align: center; font-size: 11px; font-weight: 500; line-height: 1rem; width: 70px; min-width: 70px; display: inline-block;}
.pulse-dot { width: 8px; height: 8px; background-color: var(--bs-warning); border-radius: 50%; display: inline-block; animation: timelinePulse 1.5s infinite ease-in-out; }
@keyframes timelinePulse { 0% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(0.8); opacity: 0.5; } }
.bg-airing { background-image: url('bg-airing.jpg'); background-size: cover; background-position: right top; }
:root { --insta-gradient: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d); }
.bg-gradient-insta { background: var(--insta-gradient) !important; background-origin: border-box !important; }
.text-gradient-insta { background: linear-gradient(45deg, #ff007f, #ff5e00, #e1ff00); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600 !important; letter-spacing: 0.5px; }
.border-gradient-insta { border-width: 3px !important; border-style: solid !important; border-color: transparent !important; background-image: linear-gradient(#071b4d, #071b4d), var(--insta-gradient) !important; background-origin: border-box !important; background-clip: padding-box, border-box !important; box-shadow: 0 0 20px rgba(225, 48, 108, 0.4) !important; }
.pulse-insta { width: 8px; height: 8px; background: var(--insta-gradient) !important; border-radius: 50%; display: inline-block; animation: timelinePulseInsta 1.5s infinite ease-in-out; }
@keyframes timelinePulseInsta { 0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0px #833ab444; } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 0 6px #fd1d1d00; } 100% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0px #fd1d1d00; } }

@media (min-width: 320px) and (max-width: 690px) {
  .sm-hide{display: none !important;}
  .logo2{max-height: 30px}
  .hero{padding-top: 15px !important}
  .navbar-collapse{padding: 30px 20px !important; min-height: 90vh}
  .foot-live {
        font-size: 36px !important; width:55px; height: 55px; line-height: 30px; text-align: center; padding: 10px
    }
.bg-airing { background-image: url('bg-airing.jpg'); background-size: cover; background-position: center top; }
    .logo-text h1 {font-size: 18px;}

    nav ul li a {
      line-height: 30px !important;
    }
    nav ul .active a{border-radius: 12px}
}


@media screen and (max-width: 600px) {
  .scroll-item { flex: 0 0 auto; width: 85%; }
  @keyframes scrollLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-250%); }
}
}

  /* ══════════════════════════════
       PGM
    ══════════════════════════════ */

  .swiper {
    visibility: hidden;
}

.swiper.swiper-initialized {
    visibility: visible;
}

.mySwiper .swiper-slide{
    height:auto;
    overflow: hidden;
}
.mySwiper .card{
  background: transparent !important;
  }
  .mySwiper .card:hover{
  box-shadow: none;
  }
.mySwiper .card img{
  height: auto;
  width:100%;
  
  }

.swiper-prev,
.swiper-next{
    width:42px !important;
    max-width: 42px !important;
    height:42px;
    padding: 8px;
    background:#0d6efd;
    color:#fff;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
}

.swiper-prev:hover,
.swiper-next:hover{
    opacity:.9;
}

@media (max-width: 767.98px) {

    .shorts-scroll {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 10px;
    }

    .shorts-scroll::-webkit-scrollbar {
        display: none;
    }

    .shorts-scroll > div {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

  /* ══════════════════════════════
       RESPONSIVE
    ══════════════════════════════ */
    @media(max-width:1200px){
      .grid-4,.shorts-grid,.stats-inner,.schedule-box { grid-template-columns:repeat(2,1fr); }
      .grid-3 { grid-template-columns:repeat(3,1fr); }
      .footer-grid { grid-template-columns:repeat(2,1fr); }
      .hero-grid,.about-grid { grid-template-columns:1fr; }
      .youtube-grid { grid-template-columns:1fr; }
    }

    @media(max-width:768px){
      .sm-hide{display: none !important;}
      nav,.live-badge,.top-bar { display:none; }
      .grid-4,.grid-3,.shorts-grid,.schedule-box,.youtube-grid,.footer-grid{ grid-template-columns:1fr; }
      .stat-block:nth-child(1), .stat-block:nth-child(2) {border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
      .stat-block:nth-child(even) {border-right:none;}
      

      .slide-content { left:24px; right:24px; bottom:30px; }
      .slide-content h2 { font-size:34px; }
      .section-title { font-size:30px; }
      .about-badge { display:none; }
    }

@media (min-width: 576px) { .timeline-item { width: 280px; } }
@media (min-width: 1200px) { .timeline-item { width: 320px; } }

@media (min-width: 2000px) { .card img { height:500px; object-fit:cover; transition:0.5s; } }