.site-header{

position:fixed;
top:0;
left:0;
width:100%;

z-index:1000;

background:rgba(8,28,54,.85);

backdrop-filter:blur(10px);

}

.navbar-brand img{
height:55px;
}

/* ==========================================
   HERO
========================================== */

.hero{
    position:relative;

    min-height:75vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:140px 20px 80px;

    text-align:center;

    background:url('/theme/img/bg-hero.jpg') center center no-repeat;
    background-size:cover;

    overflow:hidden;
}

/* overlay */

.hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        180deg,
        rgba(8,24,47,.45),
        rgba(8,24,47,.80)
    );

    z-index:1;
}

/* content */

.hero-content{
    position:relative;
    z-index:2;

    max-width:900px;

    padding:0 20px;
}

/* logo */

.hero-logo{
    width:100%;
    width:min(520px,70vw);

    margin-bottom:30px;

    filter:drop-shadow(
        0 10px 25px rgba(0,0,0,.45)
    );
}

/* titel */

.hero h1{
    font-family:'Pacifico',cursive;

    font-size:5rem;

    color:#ff9c00;

    margin-bottom:25px;

    text-shadow:
        0 4px 12px rgba(0,0,0,.5),
        0 0 25px rgba(255,156,0,.35);
}

/* tekst */

.hero-text{
    max-width:800px;

    margin:0 auto 35px;

    color:#e8f2ff;

    font-size:1.15rem;

    line-height:1.9;
}

/* buttons */

.hero-buttons{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:15px;

    flex-wrap:wrap;
}

/* primary button */

.btn-orange{
    background:#ff9c00;
    color:#000;

    border:none;

    padding:14px 28px;

    border-radius:40px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;
}

.btn-orange:hover{
    background:#ffc14d;

    color:#000;

    transform:translateY(-2px);

    box-shadow:
        0 10px 20px rgba(255,156,0,.35);
}

/* secondary button */

.btn-outline-light{
    border:1px solid rgba(255,255,255,.6);

    color:#fff;

    border-radius:40px;

    padding:14px 28px;

    text-decoration:none;

    transition:.25s;
}

.btn-outline-light:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
}

/* lagere laptops */

@media (max-height:850px){

    .hero{
        min-height:auto;
        padding:140px 20px 100px;
    }

    .hero-logo{
        max-width:420px;
    }

    .hero h1{
        font-size:4rem;
    }

}

/* echt lage schermen */



/* ==========================================
   MOBILE
========================================== */

@media(max-width:991px){

    .hero h1{
        font-size:3.5rem;
    }

    .hero-logo{
        max-width:360px;
    }

}

@media(max-width:768px){

    .hero{
        min-height:70vh;
        padding:40px 0;
    }

    .hero-logo{
        max-width:280px;
    }

    .hero h1{
        font-size:2.6rem;
    }

    .hero-text{
        font-size:1rem;
        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .hero-buttons a{
        width:100%;
        max-width:280px;
    }

}
@media (max-height:700px){

    .hero{
        min-height:auto;
        padding:120px 20px 80px;
    }

    .hero-logo{
        max-width:320px;
        margin-bottom:20px;
    }

    .hero h1{
        font-size:3rem;
        margin-bottom:15px;
    }

    .hero-text{
        font-size:1rem;
        margin-bottom:25px;
    }

}
.btn-orange{

background:var(--accent);
color:#000;

border-radius:40px;

padding:14px 28px;

font-weight:600;

}

.btn-orange:hover{

background:var(--accent-hover);

}

.intro{

padding:100px 0;
text-align:center;

}

.features{

padding:80px 0;

}

.feature-card{

background:rgba(255,255,255,.05);

padding:35px;

border-radius:20px;

text-align:center;

height:100%;

}

.feature-card i{

font-size:3rem;
color:var(--accent);

margin-bottom:20px;

}

.site-footer{

padding:50px 0;

background:#061426;

text-align:center;

}

.hero-logo{
    width:min(520px,70vw);

    margin-bottom:30px;

    filter:drop-shadow(
        0 10px 25px rgba(0,0,0,.45)
    );

    animation:
        logoIntro 1.2s cubic-bezier(.22,1,.36,1) forwards,
        logoFloat 4.5s ease-in-out 1.2s infinite;
}

/* Intro animatie */

@keyframes logoIntro{

    0%{
        opacity:0;

        transform:
            translateY(-40px)
            scale(.75);

        filter:
            drop-shadow(0 5px 10px rgba(0,0,0,.2));
    }

    60%{
        opacity:1;

        transform:
            translateY(5px)
            scale(1.08);

        filter:
            drop-shadow(0 15px 35px rgba(0,0,0,.5));
    }

    100%{
        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:
            drop-shadow(0 10px 25px rgba(0,0,0,.45));
    }
}

/* Blijvend zweven */

@keyframes logoFloat{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(0deg);
    }

50%{
    transform:
        translateY(-12px)
        rotate(.5deg);

    filter:
        drop-shadow(0 15px 30px rgba(0,0,0,.5))
        drop-shadow(0 0 20px rgba(255,156,0,.45));
}
}