/* Video Background Styles */
.banner-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.banner-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* Banner Video Container */
.banner-video-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 153, 204, 0.1), rgba(0, 51, 51, 0.1));
    border-radius: 15px;
    pointer-events: none;
}

/* About Section Video Background */
.video-bg-section {
    position: relative;
    overflow: hidden;
}

.video-bg-section .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.video-bg-section .video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    opacity: 0.6;
}

.video-bg-section .video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

/* Banner Section Positioning */
.banner-section {
    position: relative;
    overflow: hidden;
}

/* Responsive Video Styles */
@media (max-width: 768px) {
    .banner-video-container {
        height: 300px;
    }
    
    .banner-video-bg video {
        opacity: 0.2; /* Slightly more transparent on mobile */
        object-position: 70% center; /* Show more of the right side */
        transform: scale(1.1); /* Slightly zoom to better fit mobile */
    }
}

@media (max-width: 576px) {
    .banner-video-container {
        height: 250px;
    }
    
    .banner-video-bg video {
        object-position: 75% center; /* Show even more of the right side on small mobile */
        transform: scale(1.2); /* More zoom for better mobile view */
    }
}

/* Banner Text Slider Styles */
.banner-slider-content {
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.slider-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-in-out;
}

.slider-item.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
}

.slider-item h1 {
    margin-bottom: 20px;
}

.slider-item p {
    margin-bottom: 0;
}

/* Smooth fade animation */
@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slider-item.entering {
    animation: fadeInSlide 0.8s ease-in-out;
}

/* Unify overview image sizes across variants (cargo, helicopter, etc.) */
.overview-thumb img[src*="cargo"],
.overview-thumb img[src*="helicopter"],
.overview-thumb img[src*="militray"],
.overview-thumb img[src*="military"],
.overview-thumb img[src*="aviation"],
.overview-thumb img {
    height: 700px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 991px) {
    .overview-thumb img[src*="cargo"],
    .overview-thumb img[src*="helicopter"],
    .overview-thumb img[src*="militray"],
    .overview-thumb img[src*="military"],
    .overview-thumb img[src*="aviation"],
    .overview-thumb img {
        height: 520px;
    }
}

@media (max-width: 575px) {
    .overview-thumb img[src*="cargo"],
    .overview-thumb img[src*="helicopter"],
    .overview-thumb img[src*="militray"],
    .overview-thumb img[src*="military"],
    .overview-thumb img[src*="aviation"],
    .overview-thumb img {
        height: 380px;
    }
}

/* About Section Video Styles */
.video-main {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.about-video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
}

.video-overlay-dark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), rgba(0, 51, 102, 0.3));
    pointer-events: none;
}