/* 1. Force the HTML and Body to never exceed the screen width */
html, body {
    width: 100vw;
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative; 
}

/* 2. Lock down the Porto template's main wrapper */
.body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* 3. Ensure any section with edge-decorations hides the overflow */
.section {
    overflow-x: hidden;
}

/* Default Poster Image (Desktop & Tablet) */
.custom-video-poster {
    background-image: url('../video/lagonissi-poster.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Mobile Poster Image (Screens smaller than 768px) */
@media (max-width: 767px) {
    .custom-video-poster {
        /* Make sure you create and upload a mobile-friendly version of your poster! */
        background-image: url('../video/lagonissi-poster-mobile.jpg'); 
    }
}

/* Custom slider fades */
.fade-out-after-3 {
    animation: fadeOutSequence 1s forwards;
    animation-delay: 3.1s; /* 1.1s (initial delay) + 3s (visible time) */
}

@keyframes fadeOutSequence {
    from { opacity: 1; }
    to { opacity: 0; visibility: hidden; }
}

@keyframes stayThenFade {
    0% { opacity: 1; }
    90% { opacity: 1; } 
    100% { opacity: 0; visibility: hidden; }
}



@keyframes smoothExit {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.95); visibility: hidden; }
}

.fade-out-fast.animated {
    /* Starts fading out at 1.5s, finishes by 2.2s */
    animation: smoothExit 0.7s ease-in forwards !important;
    animation-delay: 1.5s !important; 
}

/* Force the bars to be visible during the Porto entrance phase */
.fade-out-fast span img {
    visibility: visible !important;
    opacity: 1 !important;
}