/* News Section Container */
.section-white {
    @apply bg-white;
}

/* Gallery Container */
.gallery-container {
    @apply relative max-w-3xl mx-auto;
}

/* Media Slider */
.media-slider {
    @apply flex transition-transform duration-300 ease-in-out;
    transform: translateX(0);
}

.media-slide {
    @apply w-full flex-shrink-0;
}

/* Navigation Arrows */
.nav-arrow {
    @apply absolute top-1/2 -translate-y-1/2 
           bg-black/50 text-white p-3 rounded-full
           transition-all duration-300
           hover:bg-black/75 z-10;
}

.left-arrow {
    @apply left-4;
}

.right-arrow {
    @apply right-4;
}

/* Pagination Bubbles */
.pagination-bubbles {
    @apply absolute bottom-4 left-1/2 -translate-x-1/2
           flex justify-center gap-2 z-10;
}

.bubble {
    @apply w-2 h-2 rounded-full bg-white/70 
           transition-all duration-300
           hover:bg-white;
}

.bubble.active {
    @apply bg-white w-3 h-3;
}

/* Video Overlay */
.video-overlay {
    @apply absolute inset-0 flex items-center justify-center 
           bg-black/30 transition-all duration-300;
}

.video-overlay i {
    @apply text-white text-4xl;
}

/* Media Items (Video and Images) */
.gallery-item {
    @apply cursor-pointer transition-transform duration-200 
           hover:scale-105;
}

.media-wrapper {
    @apply relative aspect-video rounded-lg overflow-hidden 
           shadow-lg;
}

.thumbnail {
    @apply w-full h-full object-cover;
}

/* Video Container */
.video-container {
    @apply cursor-pointer;
}

.video-wrapper {
    @apply relative aspect-video rounded-lg overflow-hidden shadow-lg;
}

/* Videos */
.video-thumb,
.main-video {
    @apply absolute inset-0 w-full h-full object-cover;
}

/* Play Button */
.play-button {
    @apply absolute inset-0 flex items-center justify-center 
           opacity-0 hover:opacity-100
           transition-opacity duration-200
           z-10;
}

.play-button i {
    @apply text-white text-5xl drop-shadow-lg;
}

/* Video Modal */
.video-modal {
    @apply fixed inset-0 z-50 bg-black/90 
           flex items-center justify-center;
}

.modal-content {
    @apply relative w-full max-w-5xl mx-auto p-4;
}

.video-player {
    @apply relative aspect-video rounded-lg overflow-hidden;
}

.video-player video {
    @apply w-full h-full;
}

/* Close Button */
.close-button {
    @apply absolute -top-12 right-4 
           text-white text-3xl
           hover:text-gray-300;
}

/* Utility */
.hidden {
    @apply hidden;
}

/* Section Title */
.section-title {
    @apply text-3xl font-bold text-center text-gray-900 mb-8;
}

/* Main Display */
.main-media-display {
    @apply relative shadow-lg;
}

/* Thumbnails Scroll */
.thumbnails-container {
    @apply w-full overflow-x-auto mt-4;
    -webkit-overflow-scrolling: touch;
}

.thumbnails-track {
    @apply flex gap-4 justify-center;
}

.thumbnail-item {
    @apply flex-shrink-0 cursor-pointer w-20 transition-all duration-200;
}

.thumbnail-media {
    @apply relative aspect-square rounded-lg overflow-hidden;
}

.thumbnail-content {
    @apply w-full h-full object-cover;
}

.thumbnail-item.active {
    @apply ring-2 ring-blue-600 rounded-lg;
    transform: scale(1.05);
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

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

/* Modal enhancements */
#modalMediaContainer {
    @apply w-full h-full relative;
}

#modalMediaContainer video,
#modalMediaContainer img {
    @apply w-full h-full object-contain;
}

/* Thumbnail video overlay */
.thumbnail-item .video-overlay i {
    @apply text-sm;
}

/* Gallery Grid */
.gallery-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4;
}