/* News scroll section */
.news-scroll-container {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    padding: 1rem 0;
    scroll-behavior: smooth;
    margin-top: -3rem;
}
.news-scroll-container::-webkit-scrollbar { height: 8px; }
.news-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ffc10733;
    border-radius: 1px;
}
.news-card {
    flex: 0 0 auto; 
    width: 220px;
    background-color: transparent;
    border: 0.3px solid rgba(100, 99, 99, 0.2);
    padding: 0.5rem;
    overflow: hidden;
    color: #fff; 
    transition: transform 0.3s, box-shadow 0.3s;
}
.news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.news-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 5px;
}
.news-card h6, .news-card p {
    margin: 0.25rem 0;
    color: #fff; 
}

/* Hero Banner */
.hero-banner { position: relative; border-radius: 0.1rem; overflow: hidden; }
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    color: #fff; text-align: center; padding: 2rem 3rem;
}
.hero-overlay h1 { font-weight: 700; font-size: 2.5rem; }
.hero-overlay p { color: #ccc; max-width: 600px; text-align: left; }

/* Clip Carousel */
#clipCarousel { width: 100%; height: 60vh; position: relative; }
#clipCarousel .carousel-item { height: 100%; }
#clipCarousel iframe {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%; object-fit: cover; border: 0;
}

/* Small images responsive */
.small-news-img { width:100px; height:170px; object-fit: cover; border: 1px solid rgba(0,0,0,0.1); border-radius: 4px; }
.highlight-text { text-transform: uppercase; font-size: 14px; }

/* Responsive */
@media (max-width: 768px) {
    #newsCarousel img { height: 230px !important; object-fit: cover; }
    #newsCarousel .hero-overlay h3 { font-size: 16px !important; }
    #newsCarousel .hero-overlay p { font-size: 13px !important; }
    #newsCarousel .hero-overlay { padding: 15px !important; }

    #movieCarousel .carousel-item .position-relative { height: 230px !important; }
    #movieCarousel img { height: 100% !important; object-fit: cover; }
    #movieCarousel .carousel-caption h1 { font-size: 18px !important; }
    #movieCarousel .carousel-caption p { font-size: 13px !important; }
    #movieCarousel .carousel-caption .btn { font-size: 12px !important; padding: 6px 12px !important; }
    #movieCarousel .carousel-caption { padding-bottom: 1rem !important; }

    #clipCarousel { height: 45vh; }
    .small-news-img { width: 70px; height: 70px; }
}