.video-container {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 1080px;
    overflow: hidden;
}

/* Pełna szerokość ekranu */
.video-container-full-width {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
}

#video1, #video2 {
    position: absolute;
    width: 100%;
    height: 100%;     
    object-fit: cover; 
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}


.text-overlay {
    font-size: 20px;
    text-align: center;
    opacity: 0;
    color: white;
}


/*phone*/
@media (max-width: 768px) {
    .video-container video {
        height: auto;
        min-height: 430px;
    }    
    .video-container video{
        height: auto;
        min-height: 430px;
    }

}

.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease-in-out, visibility 0s 0s;
}

.deactive {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 0s 1s; /* Ukrycie po animacji */
}

/* Mobile Image Styles */
.mobile-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.mobile-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    z-index: -10 !important;
}

/* Media Query dla urządzeń mobilnych */
@media (max-width: 768px) {
    .mobile-image {
        display: block !important;
    }
    
    #video1, #video2 {
        display: none;
    }
}

/* Opcjonalnie: można dodać breakpoint dla tabletów */
@media (max-width: 1024px) {
    .mobile-image {
        display: block !important;
    }
    
    #video1, #video2 {
        display: none;
    }
}

/* Responsywne ustawienia dla pełnej szerokości */
@media (max-width: 768px) {
    .video-container-full-width {
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
    }
}

@media (max-width: 480px) {
    .video-container-full-width {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
    }
}



.custom-wrapper-container{
    z-index: 10 !important;
}