/* ---------------------------------------------------
   HERO SEKTIONS LAYOUT
   Centrering af indhold på siden
--------------------------------------------------- */

.hero-content{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

/* ---------------------------------------------------
   OVERLAY BOKS
   Mørk glas-effekt boks med indhold
--------------------------------------------------- */

.overlay-box{
    background:rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(4px);    /* Til Safari */
    backdrop-filter:blur(4px);    /* Til alle andre moderne browsere */
    padding:40px;
    border-radius:16px;
    max-width:760px;
    width:100%;
    text-align:center;
}

/* ---------------------------------------------------
   OVERSKRIFT
--------------------------------------------------- */

.overlay-box h1{
    font-size:2.3rem;
    margin-bottom:18px;
}

/* ---------------------------------------------------
   TEKST
--------------------------------------------------- */

.overlay-box p{
    font-size:1.1rem;
    line-height:1.7;
    margin-bottom:14px;
}

/* Fjern ekstra luft efter sidste afsnit */

.overlay-box p:last-of-type{
    margin-bottom:0;
}

/* ---------------------------------------------------
   KNAPOMRÅDE
--------------------------------------------------- */

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
    margin-top:24px;
}

/* Knapper i hero-sektionen */

.hero-buttons .btn{
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.25);
    box-shadow:none;
}

/* Hover og fokus */

.hero-buttons .btn:hover,
.hero-buttons .btn:focus-visible{
    background:rgba(255,255,255,0.26);
    opacity:1;
}

/* Sekundær knap */

.hero-buttons .btn.secondary{
    background:rgba(0,0,0,0.25);
}

/* ---------------------------------------------------
   INFOBOKS
   Bruges hvis siden udvides med mere tekst
--------------------------------------------------- */

.info-box{
    max-width:820px;
}


/* Tablet */
@media (min-width: 601px) and (max-width: 1024px){
}

@media (min-width: 0px) and (max-width: 600px){
        .overlay-box{
        padding:24px;
    }

    .overlay-box h1{
        font-size:1.6rem;
        margin-bottom:24px;
    }
}