/* Hero Section */
.hero {
    height: 100vh; /* Setter seksjonen til å fylle hele høyden av vinduet */
    color: white; /* Setter tekstfargen */
    text-align: center; /* Sentrerer teksten horisontalt */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Sentrerer innholdet */
    align-items: center;
    background-position: center; /* Sentrerer eventuelle bakgrunnselementer */
    background-repeat: no-repeat; /* Hindrer bakgrunnselementer i å gjenta seg */
    padding: 20px;
    position: relative; /* Nødvendig for å posisjonere absolutt innhold (som sponsor-slideren) innenfor hero-seksjonen */
}

.hero-text-box {
    background-color: rgba(0, 0, 0, 0.8); /* Svart bakgrunn med 80% gjennomsiktighet */
    padding: 30px 40px; /* Indre mellomrom for bedre lesbarhet */
    border-radius: 10px; /* Myke kanter */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Legger til en subtil skygge */
    text-align: center; /* Sentrerer teksten i boksen */

    /* Midtstill boks */
    position: absolute; /* Gjør at vi kan bruke `top` og `left` */
    top: 40%; /* Flytt til 40% fra toppen */
    left: 50%; /* Flytt til 50% fra venstre */
    transform: translate(-50%, -50%); /* Flytt tilbake halvparten av bredden og høyden for perfekt midtstilling */
}

.hero h1 {
    font-size: 3em;
    margin-bottom: 20px;
}

.hero p {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.cta a {
    display: inline-block;
    padding: 15px 25px;
    font-size: 1.2em;
    font-weight: bold;
    color: white;
    background-color: #702d9e; /* Bakgrunnsfarge for knappen */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta a:hover {
    background-color: #4a2a8f; /* Endrer fargen på hover */
}

/* Sponsor-slideren */
.sponsor-slider {
    width: 100%; /* Fyller hele bredden av hero-seksjonen */
    padding: 10px 0; /* Litt luft rundt logoene */
    position: absolute; /* Lar den flyte over hero-seksjonen */
    top: 800px; /* Plasserer den i toppen av siden */
    z-index: 2; /* Sørger for at den vises over bakgrunnen */
    background: none; /* Ingen bakgrunnsfarge */
}

.slider-wrapper {
    overflow: hidden; /* Skjuler innhold utenfor sliderens ramme */
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-track {
    display: flex;
    animation: scroll 600s linear infinite; /* Lavere hastighet */
}

.sponsor-logo {
    height: 50px; /* Juster høyden på logoene etter behov */
    width: 100px; /* Angi en lik bredde for alle logoer */
    margin: 0 10px;
    object-fit: contain; /* Sørger for at bildet passer innenfor rammen */
    border: 2px solid #ccc; /* Legg til en ramme rundt logoene */
    border-radius: 10px; /* Gjør hjørnene buet */
    padding: 5px; /* Valgfritt, legger avstand mellom logoen og rammen */
    background-color: white; /* Valgfritt, for en jevn bakgrunn */
}


/* Animasjon for sponsor-logoene */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}