

.video-container {
    position: relative;
    width: 100%;
   height: 100vh; /* Fyll skärmhöjd */
    max-height: 600px; /* Men aldrig högre än så */
    overflow: hidden;
}

.video-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
    z-index: 1;
}

/*text*/


.video-text {
    font-family: 'Poppins', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 10; /* Viktigt: ovanför video även på mobil */
    opacity: 0;
    transition: opacity 1s ease-in-out;
    padding: 0 1rem;
    max-width: 90%;
	pointer-events: auto; /* Låter knappen vara klickbar */


    /*pointer-events: none; /* Förhindrar klick-blockering på mobil */
}


.video-text.visible {
    opacity: 1; /* När vi vill visa den */
}


#text1, #text2 {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
#text1.visible, #text2.visible {
  opacity: 1;
}

.video-text h1 {
    font-size: 4rem; /* Prova större än 2.5rem */
    margin-bottom: 10px;
    color: white;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}


.video-text p {
    font-size: 3.2rem;
    margin-bottom: 20px;
	color: white;
}

.cta-button {
    display: inline-block;
    background-color: #7d9984;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.cta-button {
    position: relative;
    z-index: 11;
}

.cta-button:hover {
    background-color: #d071bf;
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.cta-button {
    transition: all 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}


/*ny

@media (max-width: 768px) {
    .video-banner {
        object-fit: contain; /* Låter hela videon synas */
        width: 100%;
        height: auto; /* Gör höjden flexibel */
        max-height: 400px;
    }
}



@media (max-width: 768px) {
    .video-banner {
        object-fit: contain;
    }
}


@media (max-width: 768px) {
    .video-container {
        height: auto;
        max-height: unset; /* Tar bort maxhöjd */
        min-height: 50vh; /* Säkerställer att det finns lite höjd */
    }
}








@media (max-width: 768px) {
    .video-text h1 {
        font-size: 2rem; /* Minska från 2.5rem */
    }

    .video-text p {
        font-size: 1.4rem; /* Justera från 1.8rem */
    }

    .video-text {
        max-width: 85%; /* Lite kompaktare */
        padding: 1rem; /* Mindre padding */
    }
}





/* Mobilanpassning */
@media (max-width: 768px) {
   

    .cta-button {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}
