/* Fonts Page */
   @import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

   /* =================GLOBAL=================*/
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }

   body {
     background: #0f1014;
     font-family: Arial, Helvetica, sans-serif;
     color: #fff;
   }

   img {
     max-width: 100%;
     display: block;
   }

   a {
     text-decoration: none;
     color: inherit;
   }

   h2 {
     font-size: 20px;
     color: #ccc;
     letter-spacing: .25px;
   }

   h2 a {
     color: #ccc;

   }

   h2 a:hover {
     color: #e70909;
   }

   main {
     /* font */
     font-family: "Rubik", sans-serif;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
   }

   /* <!-- ================= HEADER ================= --> */
   .navbar {
     width: 100%;
     background: #000000;
     padding: 12px 4%;
     position: sticky;
     top: 0;
     z-index: 1000;

   }

   /* container keeps everything on one row; allow shrink for search */
   .nav-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     width: 100%;
     /* do NOT allow wrapping so links don't drop below */
     flex-wrap: nowrap;
   }

   /* logo fixed-size */
   .logo {
     font-size: 25px;
     font-weight: 700;
     color: #fff;
     flex: 0 0 auto;
     /* never shrink to zero */
     white-space: nowrap;
   }

   .logo span {
     color: #e50914;
   }

   /* NAV LINKS: do not wrap, enable horizontal scroll when needed */
   .nav-links {
     list-style: none;
     display: flex;
     gap: 16px;
     align-items: center;
     flex: 0 0 auto;
     /* keep natural width; don't stretch */
     white-space: nowrap;
     /* keep items in one line */
     overflow-x: auto;
     /* allow horizontal scroll if not enough space */
     -webkit-overflow-scrolling: touch;
     padding-bottom: 6px;
     /* small padding so scroll doesn't cut text */
   }

   /* hide native scrollbar but keep scrollable */
   .nav-links::-webkit-scrollbar {
     height: 6px;
     display: none;
   }

   .nav-links {
     scrollbar-width: none;
     -ms-overflow-style: none;
   }

   /* individual links */
   .nav-links a {
     display: inline-block;
     color: #fff;
     font-size: 15px;
     padding: 6px 4px;
     text-decoration: none;

     /* font */
     font-family: "Rubik", sans-serif;
     font-optical-sizing: auto;
     font-weight: 500;
     font-style: normal;
   }

   .nav-links a:hover {
     color: #0c70ce;
     transform: scale(1.1);

   }

   /* make sure the hamburger/icon (if present) is shown at end */
   .nav-links li img {
     display: block;
     height: 20px;
     width: auto;
   }

   /* Sidebar Setup */
   .sidebar {
     position: fixed;
     top: 0;
     right: -280px;
     /* Shuru mein screen se bahar */
     width: 260px;
     height: 100vh;
     background: #0a0a0a;
     z-index: 10000;
     transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     flex-direction: column;
     box-shadow: -10px 0 20px rgba(0, 0, 0, 0.8);
   }

   .sidebar.active {
     right: 0;
     /* Click par andar aayega */
   }

   .sidebar-header {
     padding: 25px 20px;
     background: #e50914;
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: #fff;
     font-size: 1.2rem;
     font-weight: bold;
   }

   #closeMenu {
     background: none;
     border: none;
     color: #fff;
     font-size: 2rem;
     cursor: pointer;
   }

   .sidebar-content {
     display: flex;
     flex-direction: column;
     /* Sab ek ke niche ek */
     padding: 20px 0;
   }

   .sidebar-content a {
     color: #eee;
     padding: 15px 25px;
     text-decoration: none;
     font-size: 1.1rem;
     border-bottom: 1px solid #1a1a1a;
     transition: 0.3s;
   }

   .sidebar-content a:hover {
     background: #1a1a1a;
     color: #e50914;
     padding-left: 35px;
   }

   /* Background Overlay */
   .menu-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 9999;
     display: none;
     backdrop-filter: blur(3px);
   }

   .menu-overlay.active {
     display: block;
   }

   /* ================= RESPONSIVE ADJUSTMENTS ================= */
   /* tablet-ish: shrink search, smaller gaps */
   @media (max-width:900px) {

     .nav-links {
       gap: 12px;
     }

     .nav-links a {
       font-size: 14px;
       padding: 6px 6px;
     }

     .logo {
       font-size: 20px;
     }
   }

   /* mobile narrow: make search tiny but present, ensure links remain visible (scrollable) */
   @media (max-width:480px) {

     .navbar {
       height: 61px;
     }

     .nav-links {
       gap: 10px;
     }

     .nav-links a {
       font-size: 15px;
       padding: 4px 1px;
       margin: 1px 0px;
     }

     .logo {
       font-size: 23px;
       margin: 1px -4px;
     }

     ul .op {
       display: none;
     }
   }

   /* extra safety: force show nav-links if something else hides them */
   @media (max-width:900px) {
     .nav-links {
       display: flex !important;
     }
   }

   /* ================= HERO SLIDER ================= */
   .doots {
     width: 100%;
     position: relative;
   }

   /* SLIDER FRAME */
   .slider {
     position: relative;
     width: 100%;
     /* Mobile ke liye jo height tune rakhi hai wahi rehne do */
     height: 190px;
     overflow: hidden;
     background: #000;
   }

   /* SLIDES */
   .slides {
     display: flex;
     height: 100%;
     transition: transform 0.6s ease-in-out;
     touch-action: pan-y;
     /* 🔥 allow horizontal swipe */
     -webkit-user-select: none;
     user-select: none;
     backface-visibility: hidden;
     /* Glitch rokne ke liye */
     will-change: transform;
   }

   .slides a {
     flex: 0 0 100%;
     height: 100%;
   }

   /* IMAGES FITTING */
   .slides img {
     width: 100%;
     height: 100%;

     /* 🔥 Ye hai asli rubber property: 
       Isse image kategi nahi, balki khinch kar poore frame ko bhar degi */
     object-fit: fill;

     display: block;
   }

   /* GRADIENT */
   .slider::after {
     content: "";
     position: absolute;
     pointer-events: none;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background: linear-gradient(to top, #000000, transparent);
   }

   /* BUTTONS */
   .prev,
   .next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0);
     color: #fff;
     border: none;
     width: 50px;
     height: 50px;
     font-size: 26px;
     border-radius: 50%;
     cursor: pointer;
     z-index: 10;

     /* 🔥 Hidden by default */
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease, transform 0.3s ease;
   }

   .slider:hover .prev,
   .slider:hover .next {
     opacity: 1;
     visibility: visible;
   }

   .prev {
     left: 1px;
   }

   .next {
     right: 1px;
   }

   .slider:hover .prev {
     transform: translateY(-50%) translateX(0);
   }

   .slider:hover .next {
     transform: translateY(-50%) translateX(0);
   }

   /* DOTS */
   .dots {
     margin-top: 15px;
     display: flex;
     justify-content: center;
     gap: 8px;
   }

   .dots span {
     height: 10px;
     width: 10px;
     background: rgba(255, 255, 255, 0.4);
     border-radius: 50px;
     cursor: pointer;
     transition: 0.3s;
   }

   .dots span.active {
     width: 26px;
     background: #fff;
   }

   /* ================= RESPONSIVE ================= */
   /* Large Desktop / TV */
   @media (min-width:1600px) {
     .slider {
       height: 75vh;
     }
   }

   /* Laptop */
   @media (max-width:1599px) {
     .slider {
       height: 77vh;
     }
   }

   /* ================= TABLET ================= */
   @media (max-width:1024px) {
     .slider {
       height: 400px;
       min-height: auto;
       /* 🔥 reset */
     }
   }

   /* ================= MOBILE ================= */
   @media (max-width:768px) {
     .slider {
       height: 355px;
       min-height: auto;
       /* 🔥 reset */
     }

     .prev,
     .next {
       display: none !important;
     }

     .slider::after {
       display: none !important;
     }
   }

   /* ================= SMALL MOBILE ================= */
   @media (max-width:480px) {
     .slider {
       height: 190px;
       min-height: auto;
     }

     /* 🔥 Smaller Dots */
     .dots span {
       width: 5px;
       height: 5px;
     }

     .dots span.active {
       width: 12px;
     }
   }

   /* <!-- =========== Movies Cards ================ --> */

   /* Section spacing */
   .latest-section,
   .movies-section,
   .shows-section,
   .animes-section,
   .blockbuster-section {
     position: relative;
     padding: 40px 4%;
     overflow: hidden;
   }

   /* Horizontal Scroll Container */
   .lcard,
   .mcard,
   .scard,
   .acard,
   .bcard {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     padding: 1% 0% 1% 0%;
   }

   /* Hide scrollbar */
   .lcard::-webkit-scrollbar,
   .mcard::-webkit-scrollbar,
   .scard::-webkit-scrollbar,
   .acard::-webkit-scrollbar,
   .bcard::-webkit-scrollbar {
     display: none;
   }

   .lcard,
   .mcard,
   .scard,
   .acard,
   .bcard {
     scrollbar-width: none;
   }

   /* Individual Card */
   .lcard div,
   .mcard div,
   .scard div,
   .acard div,
   .bcard div {
     overflow: hidden;
     position: relative;
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     will-change: transform;
     backface-visibility: hidden;
     transform: translateZ(0);
   }

   /* Image */
   .lcard img,
   .mcard img,
   .scard img,
   .acard img,
   .bcard img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
     display: block;
   }

   /* ================= BOTTONS STYLE ARROWS ================= */

   /* Section relative hona zaroori */
   .latest-section,
   .movies-section,
   .shows-section,
   .animes-section,
   .blockbuster-section {
     position: relative;
   }

   /* Common Arrow Style */
   .l-prev,
   .l-next,
   .m-prev,
   .m-next,
   .s-prev,
   .s-next,
   .a-prev,
   .a-next,
   .b-prev,
   .b-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 45px;
     height: 100px;
     background: transparent;
     border: none;
     color: #fff;
     font-size: 28px;
     cursor: pointer;
     z-index: 50;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
   }

   .latest-section:hover .l-prev,
   .latest-section:hover .l-next,
   .movies-section:hover .m-prev,
   .movies-section:hover .m-next,
   .shows-section:hover .s-prev,
   .shows-section:hover .s-next,
   .animes-section:hover .a-prev,
   .animes-section:hover .a-next,
   .blockbuster-section:hover .b-prev,
   .blockbuster-section:hover .b-next {
     opacity: 1;
     pointer-events: auto;
   }

   .l-prev,
   .l-next,
   .m-prev,
   .m-next,
   .s-prev,
   .s-next,
   .a-prev,
   .a-next,
   .b-prev,
   .b-next {
     pointer-events: none;
     /* ADD THIS */
   }

   /* Left Buttons */
   .l-prev,
   .m-prev,
   .s-prev,
   .a-prev,
   .b-prev {
     left: 0;
     border-radius: 0 8px 8px 0;
   }

   /* Right Buttons */
   .l-next,
   .m-next,
   .s-next,
   .a-next,
   .b-next {
     right: 0;
     border-radius: 8px 0 0 8px;
   }

   /* Hide arrows on mobile */
   @media (max-width:768px) {

     .l-prev,
     .l-next,
     .m-prev,
     .m-next,
     .s-prev,
     .s-next,
     .a-prev,
     .a-next,
     .b-prev,
     .b-next {
       display: none;
     }
   }

   .latest-section,
   .movies-section,
   .shows-section,
   .animes-section,
   .blockbuster-section {
     padding: 1% 0% 0% 2%;
     margin: 0;
   }

   /* ===== FULL CARD HOVER FIX ===== */

   .lcard div,
   .mcard div,
   .scard div,
   .acard div,
   .bcard div {
     overflow: visible;
     transition: transform 0.6s ease, border 0.1s ease;
     position: relative;
   }



   /* ================= RESPONSIVE CARD SYSTEM ================= */

   .lcard div,
   .mcard div,
   .scard div,
   .acard div,
   .bcard div {
     flex: 0 0 auto;
     width: 18vw;
     /* Desktop responsive */
     height: 27vw;
     /* Maintain ratio */
   }

   /* Large Desktop */
   @media (min-width:1400px) {

     .lcard div,
     .mcard div,
     .scard div,
     .acard div,
     .bcard div {
       width: 270px;
       height: 370px;
     }

   }

   /* LepTop */
   @media (min-width:1280px) {

     .lcard div:hover,
     .mcard div:hover,
     .scard div:hover,
     .acard div:hover,
     .bcard div:hover {
       transform: scale(1.08);
       z-index: 10;
       border: 3px solid #fff;
       border-radius: 10px;
     }

   }

   /* Tablet */
   @media (max-width:1024px) {

     .lcard div,
     .mcard div,
     .scard div,
     .acard div,
     .bcard div {
       width: 22vw;
       height: 32vw;
     }

     .lcard,
     .mcard,
     .scard,
     .acard,
     .bcard {
       padding: 0px 3% 0px 0px;
     }

   }

   /* Mobile */
   @media (max-width:768px) {

     .lcard div,
     .mcard div,
     .scard div,
     .acard div,
     .bcard div {
       width: 140px;
       height: 200px;
     }

     .lcard,
     .mcard,
     .scard,
     .acard,
     .bcard {
       padding: 0px 3% 0px 0px;
     }
   }

   /* Small Mobile */
   @media (max-width:480px) {

     .lcard div,
     .mcard div,
     .scard div,
     .acard div,
     .bcard div {
       width: 130px;
       height: 180px;
     }

     .lcard img,
     .mcard img,
     .scard img,
     .acard img,
     .bcard img {
       height: 180px;
     }

     h2 {
       font-size: 18px;
       padding: 3px;

     }

     #continue-section span {
       color: #e70909;
     }

     .blockbuster-section span {
       color: #e70909;
     }


     h2 a {
       color: #e70909;
     }

     .latest-section,
     .movies-section,
     .shows-section,
     .animes-section,
     .blockbuster-section {
       padding: 1% 0% 0% 3%;
       margin: 0;
     }

     .lcard,
     .mcard,
     .scard,
     .acard,
     .bcard {
       padding: 0px 3% 0px 0px;
     }
   }


   /* ================= CATEGORIES SECTION ================= */

   .categories-section {
     position: relative;
     padding: 1% 0% 2% 2%;
     overflow: hidden;
   }

   .categories-section h2 {
     margin-bottom: -4px;
   }

   /* Horizontal Scroll Container */
   .gcards {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     padding: 1% 0;

     perspective: 1000px;
     /* smoother scaling */
   }

   /* Hide Scrollbar */
   .gcards::-webkit-scrollbar {
     display: none;
   }

   .gcards {
     scrollbar-width: none;
   }

   /* Individual Card */
   .gcards div {
     flex: 0 0 auto;
     width: 403px;
     height: 232px;
     /* ✅ fixed */
     scroll-snap-align: start;
     border-radius: 12px;
     overflow: hidden;
     position: relative;

     transition: transform 0.5s ease, box-shadow 0.4s ease;
     will-change: transform;
   }

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

   /* ================= ARROWS ================= */

   .g-prev,
   .g-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 45px;
     height: 90px;
     background: rgba(0, 0, 0, 0);
     border: none;
     color: #fff;
     font-size: 26px;
     cursor: pointer;
     z-index: 20;

     opacity: 0;
     transition: 0.3s ease;
   }

   /* Left */
   .g-prev {
     left: 0;
     border-radius: 0 8px 8px 0;
   }

   /* Right */
   .g-next {
     right: 0;
     border-radius: 8px 0 0 8px;
   }

   /* Show arrows on hover */
   .categories-section:hover .c-prev,
   .categories-section:hover .c-next {
     opacity: 1;
   }

   /* Hover effect */
   .g-prev:hover,
   .g-next:hover {
     background: rgba(0, 0, 0, 0);
   }

   /* ================= RESPONSIVE ================= */

   @media (min-width:1400px) {
     .gcards div:hover {
       transform: scale(1.08);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Tablet */
   @media (max-width:1024px) {
     .gcards div {
       width: 280px;
       height: 190px;
     }

     .gcards div:hover {
       transform: scale(1.08);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Mobile */
   @media (max-width:768px) {
     .gcards div {
       width: 140px;
       height: 90px;
     }

     .g-prev,
     .g-next {
       display: none;
     }

     .gcards div:hover {
       transform: scale(1.08);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Small Mobile */
   @media (max-width:480px) {
     .gcards div {
       width: 135px;
       height: 75px;
     }

     .gcards {
       gap: 10px;
       padding: 8px 3% 10px 0%;
       position: relative;
       left: 5px;
     }

     .categories-section h2 {
       position: relative;
       left: 4px;

     }
   }

   /* ================= PERFECT ALIGNED FOOTER ================= */

   footer {
     background: linear-gradient(to bottom, #0f1014, #2f0b0b);
     color: #fff;
     padding: 70px 6% 0;
     position: relative;
     overflow: hidden;
   }

   /* Main Grid */
   .footer-details {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 80px;
     max-width: 1200px;
     margin: auto;
     /* padding-bottom: 50px; */
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   }

   /* Headings */
   .footer-details h4 {
     color: #ffffff;
     font-size: 18px;
     margin-bottom: 20px;
     letter-spacing: 1px;
   }

   /* Lists */
   .footer-details ul {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .footer-details ul li {
     margin-bottom: 12px;
     font-size: 14px;
     color: #ccc;
     transition: 0.3s ease;
   }

   /* Hover */
   .footer-details ul li:hover {
     color: #fc0000;
     transform: translateX(5px);
   }

   /* Icons */
   .ac {
     width: 18px;
     height: 18px;
   }

   /* Logo */
   .imglogo img {
     width: 150px;
     margin-bottom: 20px;
   }

   /* Copyright */
   .copyright {
     text-align: center;
     padding: 20px 0;
     font-size: 13px;
     color: #aaa;
   }



   @keyframes glowMove {
     from {
       opacity: 0.5;
     }

     to {
       opacity: 0.9;
     }
   }

   .icon {
     width: 18px;
     height: 18px;
     fill: #ccc;
     transition: 0.3s ease;
   }

   .footer-details a {
     display: flex;
     align-items: center;
     gap: 8px;
     text-decoration: none;
     color: #ccc;
     transition: 0.3s ease;
   }

   .footer-details a:hover {
     color: #ff3c3c;
   }

   .footer-details a:hover .icon {
     fill: #ff3c3c;
     transform: scale(1.1);
   }

   /* ================= RESPONSIVE SYSTEM ================= */

   /* 📱 Small Mobile (320px – 480px) */
   @media (max-width:480px) {

     footer {
       padding: 20px 8% 0;
     }

     .footer-details {
       grid-template-columns: 1fr;
       gap: 0px;
       text-align: center;
       display: flex;
       height: 80px;
       position: relative;
       top: -0px;

     }

     .footer-details h4 {
       font-size: 10px;
     }

     .footer-details ul li {
       font-size: 8px;
       height: 5px;
       position: relative;
       top: -18px;
     }

     .footer-details a {
       justify-content: center;
     }

     .copyright {
       font-size: 12px;
     }

     .footer-box {
       display: none;
     }

     .footer-box22 ul {
       display: flex;
       gap: 12px;
     }

     .footer-box1 {
       position: relative;
       left: -20px;
     }

   }


   /* 📲 Large Mobile / Small Tablet (481px – 768px) */
   @media (min-width:481px) and (max-width:768px) {

     .footer-details {
       grid-template-columns: repeat(2, 1fr);
       gap: 40px;
     }

     footer {
       padding: 60px 6% 0;
     }
   }


   /* 💻 Tablet / Small Laptop (769px – 1024px) */
   @media (min-width:769px) and (max-width:1024px) {

     .footer-details {
       grid-template-columns: repeat(3, 1fr);
       gap: 50px;
     }
   }


   /* 🖥 Large Desktop (1400px+) */
   @media (min-width:1400px) {

     .footer-details {
       max-width: 1600px;
       gap: 100px;
     }

     .footer-details h4 {
       font-size: 20px;
     }

     .footer-details ul li {
       font-size: 15px;
     }
   }


   /* 📺 TV Screens (1800px+) */
   @media (min-width:1800px) {

     footer {
       padding: 100px 8% 0;
     }

     .footer-details {
       max-width: 1800px;
       gap: 140px;
     }

     .footer-details h4 {
       font-size: 22px;
     }

     .footer-details ul li {
       font-size: 17px;
     }

     .copyright {
       font-size: 17px;
       padding: 30px 0;
     }
   }


   /* 1. Intro Overlay (Black Background) */
   .intro {
     position: fixed;
     inset: 0;
     background: #000;
     display: flex !important;
     /* Shuru mein hamesha dikhega */
     opacity: 1;
     visibility: visible;
     justify-content: center;
     align-items: center;
     z-index: 10000;
     overflow: hidden;
     pointer-events: none;
     /* User click na kar sake loading ke waqt */

     /* Pure Overlay ka fade out thoda late hoga */
     animation: introFadeOut 0.5s ease-in forwards;
     animation-delay: 2.8s;
   }

   /* 2. LTV Text (The Zooming Element) */
   .intro-text {
     font-family: 'Poppins', sans-serif;
     font-size: clamp(4rem, 15vw, 8rem);
     font-weight: 900;
     color: #ff0000;
     text-transform: uppercase;
     letter-spacing: 10px;

     /* Hardware Acceleration (Taaki atke nahi) */
     will-change: transform, opacity;

     /* Animation: 0s se 3s tak ka total safar */
     animation: ultraZoom 3s cubic-bezier(0.7, 0, 0.3, 1) forwards;
   }

   /* 🔥 THE ZOOM LOGIC */
   @keyframes ultraZoom {
     0% {
       opacity: 0;
       transform: scale(0.8);
       filter: blur(5px);
     }

     20% {
       opacity: 1;
       filter: blur(0);
       transform: scale(1);
     }

     75% {
       opacity: 1;
       transform: scale(1.1);
       /* Yahan tak dhire dhire zoom hoga */
     }

     100% {
       opacity: 0;
       transform: scale(25);
       /* Ek dum se aankhon ke paas aakar zoom-through */
       filter: blur(10px);
     }
   }

   /* Intro Background Hide */
   @keyframes introFadeOut {
     to {
       opacity: 0;
       visibility: hidden;
     }
   }

   /* 📱 Mobile Specific Tweaks */
   @media (max-width: 768px) {
     .intro-text {
       font-size: 100px;
       letter-spacing: 0.1em;
       /* Mobile par letters thode paas honge */
       animation: ultraZoom 4.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
     }

     @keyframes ultraZoom {
       0% {
         opacity: 0;
         transform: scale(0.8);
       }

       20% {
         opacity: 1;
         transform: scale(1);
       }

       100% {
         opacity: 0;
         transform: scale(7);
         filter: blur(10px);
       }

       /* Mobile ke liye thoda kam scale bhi kaafi hai */
     }
   }


   /* ============ Continew Section =========== */

   .continue-card {
     width: 200px;
     flex-shrink: 0;
     position: relative;
   }

   .continue-card .img-box {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     aspect-ratio: 16 / 9;
     /* Ye sabse zaroori hai landscape ke liye */
     background: #222;
     /* Loading ke waqt black dikhega */
   }

   .continue-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Isse image box ke andar fill ho jayegi */
     display: block;
   }

   .progress-bar-bg {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
   }

   .progress-line {
     height: 100%;
     background: #e50914;
     /* Netflix Red */
   }

   .play-mini {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(0, 0, 0, 0.5);
     border-radius: 50%;
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: 0.3s;
   }

   .continue-card:hover .play-mini {
     opacity: 1;
   }

   /* Episode card chamkane ke liye */
   .ep-card.resume-highlight {
     border: 2px solid #e50914 !important;
     /* Netflix Red */
     background: rgba(229, 9, 20, 0.2) !important;
     box-shadow: 0 0 15px rgba(229, 9, 20, 0.6);
     transform: scale(1.03);
     z-index: 5;
   }

   /* Optional: Ek chota sa label dikhane ke liye */
   .ep-card.resume-highlight::after {
     content: "LAST WATCHED";
     position: absolute;
     top: 5px;
     right: 5px;
     background: #e50914;
     color: white;
     font-size: 10px;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: bold;
   }

   .ccards {
     display: flex;
     gap: 16px;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-behavior: smooth;
     scroll-snap-type: x mandatory;
     padding: 1% 0;

     perspective: 1000px;
     /* smoother scaling */
   }

   .ccards::-webkit-scrollbar {
     display: none;
   }

   .ccards {
     scrollbar-width: none;
   }

   /* Individual Card */
   .ccards div {
     flex: 0 0 auto;
     width: 403px;
     height: 232px;
     /* ✅ fixed */
     scroll-snap-align: start;
     border-radius: 12px;
     overflow: hidden;
     position: relative;

     transition: transform 0.5s ease, box-shadow 0.4s ease;
     will-change: transform;
   }

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

   /* ================= RESPONSIVE ================= */

   @media (min-width:1400px) {
     .ccards div:hover {
       transform: scale(1.04);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Tablet */
   @media (max-width:1024px) {
     .ccards div {
       width: 280px;
       height: 190px;
     }

     .ccards div:hover {
       transform: scale(1.08);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Mobile */
   @media (max-width:768px) {
     .ccards div {
       width: 140px;
       height: 90px;
     }


     .ccards div:hover {
       transform: scale(1.08);
       z-index: 10;
       box-shadow: 0 10px 25px rgba(0, 0, 0, 0);
       border: 2px solid #fff;
     }
   }

   /* Small Mobile */
   @media (max-width:480px) {
     .ccards div {
       width: 135px;
       height: 75px;
     }

     .ccards {
       gap: 10px;
       padding: 8px 3% 10px 0%;
       position: relative;
       left: 5px;
     }


   }

   .slider-wrapper {
     position: relative;
     display: flex;
     align-items: center;
   }

   .c-nav-btn {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(0, 0, 0, 0);
     color: white;
     border: none;
     padding: 15px 10px;
     cursor: pointer;
     z-index: 10;
     font-size: 28px;
     transition: 0.3s;
     border-radius: 4px;
     opacity: 0;
     /* Shuru mein chhupa do */
   }

   .slider-wrapper:hover .c-nav-btn {
     opacity: 1;
     /* Jab user section pe jaye tab dikhe */
   }

   .c-l-prev {
     left: 5px;
   }

   .c-l-next {
     right: 5px;
   }

   /* .c-nav-btn:hover {
     background: rgba(229, 9, 20, 0.8);
   } */

   /* Mobile par arrows chhupa sakte ho kyunki wahan touch kaam karta hai */
   @media (max-width: 768px) {
     .c-nav-btn {
       display: none;
     }
   }