/* Styling for bølgeeffekten */

/* Container for bølgene */
.wave-background {
    position: fixed; /* Changed to fixed to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Ensure it covers the full viewport height */
    overflow: hidden;
    z-index: -1; /* Plasserer bølgene i bakgrunnen */
}

/* Felles styling for bølgene */
.wave {
    width: 200%; /* Dobbel bredde for å tillate horisontal animasjon */
    height: 150%; /* Increase height to extend beyond the bottom edge */
    position: absolute;
    bottom: -50%; /* Push the waves down to overlap the bottom edge, removing the straight line */
}

/* Første bølge */
.wave-1 {
    animation: waveMove1 15s ease-in-out infinite;
    fill-opacity: 0.5;
}

/* Andre bølge */
.wave-2 {
    animation: waveMove2 20s ease-in-out infinite;
    fill-opacity: 0.3;
    bottom: -40%; /* Adjusted to overlap more */
}

/* Tredje bølge */
.wave-3 {
    animation: waveMove3 25s ease-in-out infinite;
    fill-opacity: 0.2;
    bottom: -30%; /* Adjusted to overlap more */
}

/* Animasjoner for bølgene */
@keyframes waveMove1 {
    0% {
        transform: translateX(0);
        opacity: 0.5;
    }
    50% {
        transform: translateX(-50%);
        opacity: 0.7;
    }
    100% {
        transform: translateX(0); /* Går tilbake til startposisjon */
        opacity: 0.5;
    }
}

@keyframes waveMove2 {
    0% {
        transform: translateX(-50%);
        opacity: 0.3;
    }
    50% {
        transform: translateX(0);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-50%); /* Går tilbake til startposisjon */
        opacity: 0.3;
    }
}

@keyframes waveMove3 {
    0% {
        transform: translateX(0);
        opacity: 0.2;
    }
    50% {
        transform: translateX(-50%);
        opacity: 0.4;
    }
    100% {
        transform: translateX(0); /* Går tilbake til startposisjon */
        opacity: 0.2;
    }
}