.logo {
    width: 450px;
    height: auto;
}

@media (min-width:0px) and (max-width: 768px) {
    .logo {
        width: 230px;
    }
}


.video-container {
    position: relative;
    display: inline-block;
}

.video-container video {
    width: 100%;
    height: auto;
    border-radius: -20px;
}

.video-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Ensures that the overlay does not block video interactions */
}

.video-container .overlay img {
    max-width: 100%;
    max-height: 100%;
    opacity: 1.0; /* Adjust the opacity for a semi-transparent effect */
}