/* =========================================
   1. RESET & GLOBAL
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; }
body { background-color: #141414; color: white; overflow-x: hidden; }

/* NAVBAR HIDDEN */
.navbar { display: none; }

/* =========================================
   3. SECTIONS & BACKGROUNDS
   ========================================= */
.parallax-section {
    position: relative; 
    min-height: 100vh; 
    width: 100%;
    display: flex; 
    align-items: center;
    justify-content: center;
    padding: 50px 60px;
    overflow: hidden; 
    z-index: auto; 
}

.parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 125%; z-index: -2; background: transparent; }
.bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute; top: 0; left: 0; }
.video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%); }
.gradient-bg { background: linear-gradient(90deg, #87CEEB 0%, #FFFFFF 100%); }
.mobile-bg { display: none; } 

/* --- ADAPTIVE BLEND GRADIENTS --- */
.section-blend-home-to-stats {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to bottom, transparent, #87CEEB); 
    pointer-events: none; z-index: 10;
}

.section-blend-gradient-to-black {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to bottom, transparent, #111111);
    pointer-events: none; z-index: 10;
}

/* REELS OVERLAY (Softer Fade) */
.section-blend-black-to-overlay {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 150px; /* Height matching waterfall style */
    /* Gradient: Transparent to Black */
    background: linear-gradient(to bottom, transparent, #111111); 
    pointer-events: none; 
    z-index: 10;
}

.section-blend-gradient-to-blue {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 200px;
    background: linear-gradient(to bottom, transparent 0%, #87CEEB 100%);
    pointer-events: none; z-index: 10;
}

/* REELS OVERLAY (Softer Fade) */
.section-blend-blue-to-overlay {
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 150px; /* Height matching waterfall style */
    /* Gradient: Transparent to Blue */
    background: linear-gradient(to bottom, transparent 0%, #87CEEB 100%);
    pointer-events: none; 
    z-index: 10;
}
/* =========================================
   4. TYPOGRAPHY & BUTTONS
   ========================================= */
h1, h2, h3, h4, .main-title, .section-heading { font-weight: 800; }

.content-wrapper { max-width: 800px; z-index: 10; margin-top: 50px; }
.main-title { font-size: 5rem; font-weight: 900; line-height: 0.9; margin-top: 20%; margin-bottom: 15px; color: white; text-transform: uppercase; }
.synopsis { font-size: 1.2rem; margin-bottom: 25px; text-shadow: 1px 1px 3px black; line-height: 1.4; }

/* Home Button Specifics */
.home-content { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; margin-top: 0; }
#home { position: relative; background-image: url("assets/home.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center 40%; }
#home .parallax-bg, #home .bg-img { display: none !important; }

.centered-btn { position: absolute; top: 70%; left: 48%; transform: translate(-50%, -100%); z-index: 20; }
.centered-btn .btn { border: none !important; outline: none !important; box-shadow: 0 8px 25px rgba(0,0,0,0.25); padding: 14px 34px; font-size: 1.1rem; font-weight: 700; border-radius: 50px; }

.btn-watch-video { padding: 16px 50px; font-size: 1.2rem; font-weight: 700; border-radius: 8px !important; transition: 0.3s; }
.btn-watch-video:hover { box-shadow: 0 0 30px rgba(0, 123, 255, 0.8); transform: scale(1.05) translateY(-2px); }

/* --- DESKTOP / LAPTOP BUTTONS (Side-by-Side) --- */
.action-buttons { 
    display: flex !important; 
    flex-direction: row !important; /* Forces Left and Right layout */
    gap: 20px;                      /* Space between buttons */
    justify-content: center;        /* Centers them in the middle of the screen */
    align-items: center;
    width: 100%;
    margin-top: 30px;
}

/* Watch Video Button Style */
.btn-watch-video {
    padding: 16px 50px; 
    font-size: 1.2rem; 
    font-weight: 700; 
    border-radius: 8px !important; /* Rectangle */
    transition: 0.3s;
}
.btn-watch-video:hover {
    box-shadow: 0 0 30px rgba(0, 123, 255, 0.8); 
    transform: scale(1.05) translateY(-2px);
}
.btn:hover { transform: scale(1.05); }
.btn-white { background: white; color: black; }

.dashboard-wrapper { width: 90%; max-width: 1100px; margin: 0 auto; }
.section-heading { font-size: 2.5rem; margin-top: 20px; margin-bottom: 20px; font-weight: 700; color: #1a1a1a; border-left: 5px solid #007BFF; padding-left: 15px; overflow: hidden; }
.heading-text { display: block; transform: translateX(-100%); opacity: 0; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out; }
.section-heading.slide-in .heading-text { transform: translateX(0); opacity: 1; }

.intro-box { background: rgba(255, 255, 255, 0.9); border-left: 5px solid #007BFF; padding: 25px; border-radius: 12px; margin-bottom: 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.05); max-width: 1200px; }
.intro-box h3 { color: #000000; font-size: 1.8rem; font-weight: 800; margin-bottom: 10px; }
.intro-box p { color: #1a1a1a; font-size: 1.1rem; font-weight: 500; line-height: 1.5; }

.text-box-unified { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); padding: 30px; border-radius: 15px; margin-bottom: 40px; max-width: 900px; }
.intro-box-dark { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); border-left: 5px solid #007BFF; padding: 30px; border-radius: 15px; margin-bottom: 40px; margin-left: 80px; max-width: 900px; }
.intro-box-dark p { font-size: 1.2rem; }

/* =========================================
   5. STATS PAGE UI
   ========================================= */
.platform-block { background: rgba(255, 255, 255, 0.9); border-radius: 20px; padding: 25px; margin-bottom: 30px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 15px 35px rgba(0,0,0,0.05); transition: transform 0.3s; }
.platform-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; } 
.platform-header h3 { font-size: 1.8rem; font-weight: 700; color: #1a1a1a; letter-spacing: -0.5px; }
.stats-row { display: flex; gap: 30px; align-items: flex-start; justify-content: space-between; }
.stats-content-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.stats-desc { font-size: 1.0rem; color: #444; line-height: 1.5; max-width: 100%; }
.stats-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; }
.stat-card-light { background: white; padding: 15px; border-radius: 12px; text-align: left; border: 2px solid transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden; min-height: 100px; display: flex; flex-direction: column; justify-content: center; }
.stat-val { font-size: 1.4rem; font-weight: 800; color: #1a1a1a; margin: 0; line-height: 1.1; }
.stat-detail { font-size: 0.7rem; color: #555; margin-top: 4px; display: block; line-height: 1.2; }
.yt-block .stat-card-light:hover { transform: translateY(-5px); border-color: #007BFF; box-shadow: 0 15px 30px rgba(0, 123, 255, 0.15); }
.bs-block .stat-card-light:hover { transform: translateY(-5px); border-color: #0056b3; box-shadow: 0 15px 30px rgba(0, 86, 179, 0.15); }
.stat-card-light h3 { font-size: 0.7rem; color: #888; text-transform: uppercase; margin-bottom: 5px; letter-spacing: 0.5px; font-weight: 700; }
.phone-box { flex: 0 0 auto; display: flex; justify-content: center; align-items: flex-start; margin-top: -40px; }

/* =========================================
   6. REGIONAL & DEMAND SECTION
   ========================================= */
.regional-layout { display: flex; gap: 40px; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.regional-content { flex: 1; display: flex; flex-direction: column; gap: 25px; }
.telugu-white-card { background: white; border-radius: 12px; padding: 30px; color: #1a1a1a; height: 250px;margin-top: -70px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.telugu-white-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
.t-desc { border-left: 5px solid #007BFF; display: block; font-size: 1.2rem; line-height: 1.6; font-weight: 500; }
.t-desc h3{margin-top: 0px;} .t-desc p {margin-top: 20px;}
.t-stat { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.t-stat h4 { color: #888; text-transform: uppercase; font-size: 0.9rem; margin-bottom: 5px; }
.t-stat .big-num { color: #007BFF; font-size: 2.5rem; font-weight: 900; }
.t-stat .sub { color: #555; font-size: 0.8rem; }
.static-top-img { width: 100%; position: absolute; top: 0; left: 0; z-index: 5; height: auto; max-height: 40%; }
.comments-scroller { width: 100%; position: absolute; top: 0; left: 0; z-index: 3; display: flex; flex-direction: column; padding-top: 40%; animation: scrollVertical 40s linear infinite; transform: translate3d(0, 0, 0); will-change: transform; }
.demand-container { display: flex; flex-direction: column; gap: 30px; }
.demand-text-full p { background: white; padding: 25px; border-radius: 12px; font-size: 1rem; line-height: 1.6; color: #333; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border-left: 5px solid #007BFF; }
.waterfall-wrapper { display: flex; justify-content: center; gap: 40px; height: 520px; overflow: visible; position: relative; mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent); }



/* Ensure the container positions the overlay correctly */
.demand-container {
    position: relative; 
}
.waterfall-col { width: 300px; height: 100%; position: relative; overflow: visible; }
.waterfall-track { display: flex; flex-direction: column; gap: 28px; animation: waterfallMove 18s linear infinite; will-change: transform; }
.slow-scroll, .fast-scroll { animation-duration: 18s; }
.waterfall-item { width: 100%; border-radius: 14px; background: #000; box-shadow: 0 12px 30px rgba(0,0,0,0.25); transition: transform 0.35s ease, box-shadow 0.35s ease; position: relative; z-index: 1; }
.waterfall-item:hover { transform: scale(1.25); z-index: 1000; box-shadow: 0 30px 70px rgba(0,0,0,0.55); }
.waterfall-col.reverse .waterfall-track { animation-direction: reverse; }
.waterfall-col:hover .waterfall-track { animation-play-state: paused; }
@keyframes waterfallMove { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.sub-heading { font-size: 2.5rem; font-weight: 700; color: #1a1a1a; margin-top: -50px; margin-bottom: 20px; padding-left: 0; border-left: none; text-align: left; }

/* =========================================
   7. DIGITAL / SOCIALS PAGE
   ========================================= */
.digital-card-box { position: relative; border-radius: 20px; overflow: hidden; margin: 40px auto; width: 90%; max-width: 1200px; height: 600px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.digital-card-scroll-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: flex; flex-direction: column; background: #000; }
.scroll-row { flex: 1; width: 100%; overflow: hidden; position: relative; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
.scroll-track { display: flex; gap: 0; height: 100%; width: max-content; will-change: transform; }
.scroll-track img { height: 100%; width: auto; object-fit: cover; opacity: 0.5; display: block; }
.scroll-row.left .scroll-track { animation: scrollLeft 40s linear infinite; }
.scroll-row.right .scroll-track { animation: scrollRight 45s linear infinite; }
@keyframes scrollLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
.digital-content-layer { position: relative; z-index: 2; padding: 40px; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.fanpage-row { display: flex; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.compact-fp-card { background: white; padding: 20px; border-radius: 12px; text-align: center; border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; width: 160px; height: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.compact-fp-card:hover { transform: translateY(-10px); border-color: #007BFF; box-shadow: 0 10px 25px rgba(0, 123, 255, 0.4); }
.fp-img-ring { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #007BFF; margin-bottom: 15px; background-size: cover; background-position: center; padding: 3px; }
.fp-handle { font-size: 0.75rem; font-weight: 700; margin-bottom: 5px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fp-subs { font-size: 0.8rem; color: #666; margin-bottom: 0; }
.fp-stat-card-white { background: white; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; transition: all 0.3s ease; width: 160px; height: 240px; cursor: pointer; border: 2px solid transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.fp-stat-card-white:hover { transform: scale(1.05); box-shadow: 0 15px 30px rgba(0,0,0,0.3); border-color: #007BFF; }

/* REELS SECTION */
#reels { min-height: 130vh; } 
.masonry-bg-container { position: absolute; top: -10%; left: 0; width: 100%; height: 120%; display: flex; justify-content: space-between; gap: 20px; z-index: 0; opacity: 0.4; transform: rotate(5deg) scale(1.1); }
.masonry-col { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 180px; }
.reel-img { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.scroll-up-slow { animation: scrollUp 40s linear infinite; transform: translate3d(0,0,0); will-change: transform; }
.scroll-down-fast { animation: scrollDown 30s linear infinite; transform: translate3d(0,0,0); will-change: transform; }
@keyframes scrollUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes scrollDown { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }

/* SHARED MOBILE FRAME */
.mobile-frame { width: 220px; height: 420px; background: #000; border: 6px solid #111; border-radius: 25px; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.2); flex-shrink: 0; }
.notch { width: 80px; height: 18px; background: #111; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 10; }
.screen-content { width: 100%; height: 100%; background: #1a1a1a; overflow: hidden; position: relative; }
.feed-scroller { display: flex; flex-direction: column; gap: 0; animation: scrollVertical 25s linear infinite; transform: translate3d(0, 0, 0); will-change: transform; }
#scroll-yt { animation-duration: 45s; }
.feed-post { width: 100%; height: auto; display: block; margin: 0; border-bottom: 2px solid #000; }
@keyframes scrollVertical { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }

/* BIG SCREEN STATS BOX */
#bigscreen .content-wrapper { margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
.bigscreen-stats-box { display: flex; gap: 40px; margin: 40px 0; justify-content: center; width: 100%; }
.bs-stat { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(246, 244, 244, 0.2); padding: 40px 50px; border-radius: 15px; text-align: center; color: rgb(255, 255, 255); min-width: 250px; }
.bs-stat:hover { background: rgba(255, 255, 255, 0.2); box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); transform: translateY(-5px); }
.bs-stat .icon { font-size: 2.5rem; display: block; margin-bottom: 15px; } 
.bs-stat h4 { font-size: 2rem; font-weight: 800; color: #f8f9f9; margin-bottom: 10px; } 
.bs-stat p { font-size: 1.2rem; color: #ccc; }

/* REMOVE underline / line from Instagram FP card links */
.fp-card-link,
.fp-card-link:hover,
.fp-card-link:focus,
.fp-card-link:active {
    text-decoration: none !important;
    color: inherit !important;
    outline: none !important;
}


/* =========================================
   SCROLL DOWN ANIMATION
   ========================================= */
.scroll-indicator {
    position: absolute;
    bottom: 170px; /* MOVED UP (Was 40px) */
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.9;
    pointer-events: none; /* Prevents interference with clicks */
}

/* Text Style */
.scroll-text {
    font-size: 0.8rem;
    color: #000;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Mouse Shape */
.mouse {
    width: 26px; /* Slightly smaller for elegance */
    height: 42px;
    border: 2px solid #000;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* Wheel Animation */
.wheel {
    width: 4px;
    height: 8px;
    background: #000;
    border-radius: 2px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

/* Arrows below text */
.arrow-scroll span {
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    margin: -4px auto;
    animation: scrollArrow 2s infinite;
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}

.arrow-scroll span:nth-child(2) { animation-delay: -0.2s; }
.arrow-scroll span:nth-child(3) { animation-delay: -0.4s; }

/* Animations */
@keyframes scrollWheel {
    0% { top: 8px; opacity: 1; }
    100% { top: 24px; opacity: 0; }
}

@keyframes scrollArrow {
    0% { opacity: 0; transform: rotate(45deg) translate(-5px, -5px); }
    50% { opacity: 1; }
    100% { opacity: 0; transform: rotate(45deg) translate(5px, 5px); }
}



/* =========================================
   8. MEDIA QUERIES (MOBILE FIXES)
   ========================================= */
@media screen and (max-width: 768px) {
    /* --- TYPOGRAPHY --- */
    .main-title { font-size: 3rem; margin-top: 30%; }
    .synopsis { display: block; } 
    .section-heading { font-size: 1.8rem; margin-top: 30px; }
    
    /* --- GENERAL LAYOUT --- */
    .parallax-section { padding: 50px 20px 80px 20px; flex-direction: column; justify-content: center; text-align: center; min-height: auto; }
    .content-wrapper { margin-top: 20px; width: 100%; }
    .home-content { height: 100vh; padding-top: 0; }
    .centered-btn { margin-top: 0; }
    
    /* --- STATS & REGIONAL RESTORATION --- */
    .stats-grid-2 { grid-template-columns: 1fr; }
    .platform-block { padding: 20px; }
    .desktop-bg { display: none; }
    .mobile-bg { display: block; width: 100%; height: 100%; object-fit: cover; }
    
    /* FIX: Force Mobile BG for Home */
    #home { 
        background-image: url("assets/home-banner-mobile.jpg") !important; 
        background-position: center; 
        background-size: cover; 
        background-repeat: no-repeat; 
        width: 100%;
        height: auto;
    }
    
    /* Fix Phone Box stacking */
    .stats-row { flex-direction: column; }
    .phone-box { width: 100%; margin-top: 30px; }
    
    /* Cross Regional Fix */
    .regional-layout { flex-direction: column; }
    .telugu-white-card { height: auto; margin-top: 0; }
    .sub-heading { font-size: 1.8rem; text-align: center; margin-top: 30px; margin-bottom: 15px; }
    
    /* --- ONE COLUMN WATERFALL FIX --- */
    .waterfall-wrapper { 
        flex-direction: column; 
        align-items: center; 
        height: 480px; 
        gap: 0; 
        overflow: hidden; 
    }
    .waterfall-col { display: none; }
    /* Show ONLY the first column and center it */
    .waterfall-col:first-child { 
        display: block; 
        width: 100%; 
        max-width: 320px; 
        height: 100%; 
        overflow: visible; 
        margin: 0 auto; 
    }
    .waterfall-track { gap: 22px; animation: waterfallMoveMobile 14s linear infinite; }
    .waterfall-item { width: 100%; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
    
    /* --- DIGITAL PRESENCE MOBILE FIX --- */
    .digital-card-box { width: 100%; margin: 20px auto; height: auto; min-height: 100vh; display: block; }
    .digital-content-layer { padding: 40px 20px; }
    
    .text-box-unified { margin: 0 auto 30px auto; width: 100%; padding: 25px; }
    
    /*.fanpage-row { gap: 15px; justify-content: center; margin-top: 0; }
    .compact-fp-card, .fp-stat-card-white { width: 45%; height: 220px; min-width: 140px; }
*/

    .fanpage-row {
        display: flex;
        flex-direction: column;     /* stack cards */
        align-items: center;        /* center horizontally */
        gap: 20px;
    }

    .fp-card-link {
        width: 100%;
        max-width: 260px;           /* clean centered width */
    }

    .compact-fp-card {
        width: 100%;
        height: auto;
        min-height: 220px;
    }

}
    
    /* Change height to 20% (100% / 5 rows = 20%) */
    .scroll-row { 
        height: 20%; 
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Optional: thin line between rows */
    } 
    
    .scroll-track img { 
        opacity: 0.5; 
        height: 100%; 
        width: auto; 
    }

    /* --- REELS & BIGSCREEN FIX --- */
    #reels { min-height: auto; padding-bottom: 50px; }
    .intro-box-dark { margin: 0 auto 40px auto; width: 100%; padding: 25px; }
    .masonry-bg-container { opacity: 0.3; }
    
    .bigscreen-stats-box { flex-direction: column; gap: 20px; margin: 30px 0; }
    .bs-stat { padding: 30px; min-width: 100%; width: 100%; }
    .btn-watch-video { margin-left: 0; width: 100%; justify-content: center; }
    
    /* FIX: Bigscreen Background Fitting */
    #bigscreen .mobile-bg {
        object-fit: contain !important; /* Forces full image to show */
        height: 100%;


        
    }

    /* --- MOBILE BUTTONS (Stacked One Below Another) --- */
    .action-buttons { 
        flex-direction: column !important; /* Forces Top and Bottom layout */
        gap: 15px; 
    }
    
    .btn-watch-video { 
        margin-left: 0 !important; 
        width: 100% !important; /* Full width on mobile */
        justify-content: center; 
    }

@media screen and (max-width: 480px) { .main-title { font-size: 2.5rem; } }
@keyframes waterfallMoveMobile { 0% { transform: translateY(0); } 100% { transform: translateY(-60%); } }