:root{

--primary:#081c36;
--secondary:#102b52;

--accent:#ff9c00;
--accent-hover:#ffbc4a;

--text:#ffffff;
--text-soft:#c8d7f0;

}

html{
scroll-behavior:smooth;
}

body{
background:var(--primary);
color:var(--text);
font-family:'Montserrat',sans-serif;
overflow-x:hidden;f
}

/* ==========================================
   NAVBAR
========================================== */

.custom-navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:95px;

    display:flex;
    align-items:center;

    z-index:9999;

    background:transparent;
    transition:all .35s ease;
}

/* scroll state */

body.scrolled .custom-navbar{
    height:75px;

    background:linear-gradient(
        180deg,
        #163b6d 0%,
        #102c55 45%,
        #0a1f3f 100%
    );

    backdrop-filter:blur(6px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.45),
        0 0 40px rgba(20,80,160,.25);
}

.navbar-inner{

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

    height:100%;
}

.mobile-toggle{

    display:none;

    width:42px;
    height:42px;

    background:none;
    border:none;

    cursor:pointer;

    padding:0;
}

.mobile-toggle span{

    display:block;

    height:3px;

    margin:7px 0;

    border-radius:3px;

    background:#fff;

    transition:.3s;
}

@media(max-width:991px){

    .mobile-toggle{
        display:block;
        z-index:10001;
    }

    .navbar-social{
        display:none;
    }

    .main-nav{

        position:fixed;

        top:80px;
        left:0;

        width:100%;

        background:#0c2344;

        flex-direction:column;

        gap:0;

        padding:20px 0;

        transform:translateY(-120%);

        transition:.35s ease;

        box-shadow:
            0 20px 40px rgba(0,0,0,.35);
    }

    .main-nav.active{
        transform:translateY(0);
    }

    .main-nav li{
        width:100%;
    }

    .main-nav a{

        display:block;

        text-align:center;

        padding:18px 20px;

        font-size:1.1rem;
    }

    .main-nav a::after{
        display:none;
    }

}

.mobile-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(7px,7px);
}

.mobile-toggle.active span:nth-child(2){
    opacity:0;
}

.mobile-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(7px,-7px);
}


/* ==========================================
   LOGO REVEAL
========================================== */

.nav-logo{
    opacity:0;
    transform:translateY(-15px);
    transition:.35s ease;
}

.nav-logo img{
    height:48px;
    width:auto;
}

body.scrolled .nav-logo{
    opacity:1;
    transform:translateY(0);
}

/* ==========================================
   MENU
========================================== */

.main-nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;

    list-style:none;

    margin:0;
    padding:0;
}

.main-nav li{
    margin:0;
    padding:0;
}

.main-nav a{
    position:relative;

    color:#cfe2ff;
    text-decoration:none;

    font-weight:500;
    letter-spacing:.02em;

    transition:.25s;
}

/* underline */

.main-nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:0%;
    height:2px;

    border-radius:2px;

    background:linear-gradient(
        90deg,
        #ff9c00,
        #ffd37a
    );

    transition:.25s ease;
}

.main-nav a:hover{
    color:#ffffff;
    text-shadow:0 0 8px rgba(255,255,255,.25);
}

.main-nav a:hover::after{
    width:100%;
}

/* ==========================================
   SOCIALS
========================================== */

.navbar-social{
    display:flex;
    gap:15px;
}

.navbar-social a{
    width:38px;
    height:38px;

    border-radius:50%;

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

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

    color:#cfe6ff;

    text-decoration:none;

    transition:.25s;
}

.navbar-social a:hover{
    background:#ff9c00;

    color:#fff;

    transform:translateY(-2px);

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

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

@media(max-width:991px){

    .custom-navbar{
        height:80px;
        background:#0c2344;
    }

    .nav-logo{
        opacity:1;
        transform:none;
    }

    .main-nav{
        flex-direction:column;
        gap:20px;

        padding-top:20px;
        padding-bottom:20px;
    }

    .navbar-social{
        justify-content:center;
        margin-top:20px;
    }

}

/* ==========================================
   INTRO
========================================== */

.intro{

    padding:100px 0;

    background:#102a50;

    position:relative;
}

.intro-content{

    max-width:850px;

    margin:0 auto;

    text-align:center;
}

.intro h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;
}

.intro-lead{

    font-size:1.3rem;

    color:#ffffff;

    font-weight:500;

    margin-bottom:25px;
}

.intro p{

    color:#c8d7f0;

    line-height:1.9;

    margin-bottom:30px;
}

.intro .btn-orange{

    display:inline-block;
}

@media(max-width:768px){

    .intro{

        padding:70px 0;
    }

    .intro h2{

        font-size:2.2rem;
    }

    .intro-lead{

        font-size:1.1rem;
    }

}

/* ==========================================
   INTRO FEATURES
========================================== */

.intro-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:70px;
}

.feature-card{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:35px;

    text-align:center;

    backdrop-filter:blur(8px);

    transition:.3s ease;
}

.feature-card:hover{

    transform:translateY(-6px);

    border-color:rgba(255,156,0,.25);

    box-shadow:
        0 20px 40px rgba(0,0,0,.25);
}

.feature-card i{

    font-size:3rem;

    color:#ff9c00;

    margin-bottom:20px;
}

.feature-card h3{

    color:#fff;

    font-size:1.4rem;

    margin-bottom:15px;
}

.feature-card p{

    color:#c8d7f0;

    margin:0;
}

@media(max-width:992px){

    .intro-features{
        grid-template-columns:1fr;
    }

}

.feature-card i{
    font-size:3rem;
    color:#ff9c00;

    text-shadow:
        0 0 20px rgba(255,156,0,.4);

    margin-bottom:20px;
}

/* ==========================================
   ANGEBOT
========================================== */

.angebot-item {

    position:relative;

    min-height:500px;
	padding: 70px 0;

    display:flex;
    align-items:center;

    background-size:cover;

    overflow:hidden;
}

.angebot-center {

    min-height:300px;
	padding: 70px 0;
    background-size:cover;
	text-align: center;
}

.angebot-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,24,47,.75) 0%,
        rgba(8,24,47,.55) 35%,
        rgba(8,24,47,.20) 75%,
        rgba(8,24,47,0) 100%
    );

    z-index:1;
}
.angebot-overlay-right{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,24,47,0) 0%
        rgba(8,24,47,.20) 35%,
        rgba(8,24,47,.55) 75%,
		rgba(8,24,47,.75) 100%,
    );

    z-index:1;
}

.angebot-content{

    position:relative;

    z-index:2;

    max-width:550px;
}

.angebot-content h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;
}

.angebot-content p{

    color:#e8f2ff;

    line-height:1.9;

    margin-bottom:20px;
}

.angebot-center h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;
}

.angebot-center p{

    color:#e8f2ff;

    line-height:1.9;

    margin-bottom:20px;
}

@media(max-width:768px){

    .angebot-item{

        min-height:auto;

        padding:80px 0;

        background-position:65% center;
    }

    .angebot-overlay{

        background:rgba(8,24,47,.72);
    }

    .angebot-content h2{

        font-size:2.2rem;
    }

}

/* ==========================================
   LADIES NIGHT
========================================== */

.ladies-night{

    position:relative;

    min-height:500px;
	padding: 70px 0;

    display:flex;
    align-items:center;

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

    overflow:hidden;
}

.ladies-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,24,47,.75) 0%,
        rgba(8,24,47,.55) 35%,
        rgba(8,24,47,.20) 75%,
        rgba(8,24,47,0) 100%
    );

    z-index:1;
}

.ladies-content{

    position:relative;

    z-index:2;

    max-width:550px;
}

.ladies-content h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:25px;
}

.ladies-content p{

    color:#e8f2ff;

    line-height:1.9;

    margin-bottom:20px;
}

@media(max-width:768px){

    .ladies-night{

        min-height:auto;

        padding:80px 0;

        background-position:65% center;
    }

    .ladies-overlay{

        background:rgba(8,24,47,.72);
    }

    .ladies-content h2{

        font-size:2.2rem;
    }

}

/* ==========================================
   PRICES & OPENING HOURS
========================================== */

.prices-hours{

    padding:100px 0;

    background:#0f2747;
}

.section-header{

    text-align:center;

    margin-bottom:50px;
}

.section-header h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    margin-bottom:15px;
}

.section-header p{

    color:#c8d7f0;
}

.info-card{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;
	line-height: 1.9;

    padding:35px;

    backdrop-filter:blur(10px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    height:100%;
}

.info-card h3{

    margin-bottom:30px;

    color:#fff;
}

/* prijzen */

.price-row{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.price-row:last-of-type{

    margin-bottom:30px;
}

/* openingstijden */

.hours-row{

    display:flex;

    justify-content:space-between;

    padding:10px 15px;

    border-radius:10px;

    margin-bottom:4px;

    color:#c8d7f0;
}

.hours-row.today{

    background:rgba(255,156,0,.15);

    color:#ff9c00;

    font-weight:600;
}

.info-card hr{

    border:none;

    height:1px;

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

    margin:30px 0;
}

.info-card h3{

    color:#fff;

    margin-bottom:20px;
}

.info-card p{

    color:#c8d7f0;

    line-height:1.9;
}

.today-status{

    margin-top:20px;

    color:#ff9c00;

    font-weight:600;
}

@media(max-width:768px){

    .prices-hours{

        padding:70px 0;
    }

    .section-header h2{

        font-size:2.2rem;
    }

    .price-row,
    .hours-row{

        font-size:.95rem;
    }

}

/* ==========================================
   LOUNGE / DARTS / BILLARD
========================================== */

.lounge-section{

    position:relative;
	padding: 70px 0;
    min-height:520px;

    display:flex;
    align-items:center;

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

    overflow:hidden;
}

.lounge-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,24,47,.78) 0%,
        rgba(8,24,47,.58) 35%,
        rgba(8,24,47,.20) 75%,
        rgba(8,24,47,0) 100%
    );

    z-index:1;
}

.lounge-content{

    position:relative;
    z-index:2;

    max-width:560px;
}

.lounge-content h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:20px;
}

.lounge-content .lead{

    color:#ff9c00;

    font-size:1.3rem;

    font-weight:600;

    margin-bottom:25px;
}

.lounge-content p{

    color:#e8f2ff;

    line-height:1.9;

    margin-bottom:20px;
}

@media(max-width:768px){

    .lounge-section{

        min-height:auto;

        padding:80px 0;

        background-position:70% center;
    }

    .lounge-overlay{

        background:rgba(8,24,47,.75);
    }

    .lounge-content h2{

        font-size:2.2rem;
    }

    .lounge-content .lead{

        font-size:1.1rem;
    }

}

/* ==========================================
   FOOD & DRINKS
========================================== */

.food-section{

    position:relative;

    min-height:550px;

    display:flex;
    align-items:center;

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

    overflow:hidden;
}

.food-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        270deg,
        rgba(8,24,47,.78) 0%,
        rgba(8,24,47,.55) 35%,
        rgba(8,24,47,.20) 75%,
        rgba(8,24,47,0) 100%
    );

    z-index:1;
}

.food-content{

    position:relative;
    z-index:2;

    max-width:560px;

    margin-left:auto;

    text-align:left;
}

.food-content h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    color:#fff;

    margin-bottom:20px;
}

.food-content .lead{

    color:#ff9c00;

    font-size:1.3rem;

    font-weight:600;

    margin-bottom:25px;
}

.food-content p{

    color:#e8f2ff;

    line-height:1.9;

    margin-bottom:20px;
}

@media(max-width:768px){

    .food-section{

        min-height:auto;

        padding:80px 0;

        background-position:35% center;
    }

    .food-overlay{

        background:rgba(8,24,47,.75);
    }

    .food-content{

        text-align:left;
    }

    .food-content h2{

        font-size:2.2rem;
    }

    .food-content .lead{

        font-size:1.1rem;
    }

}

/* ==========================================
   PARTNERS
========================================== */

.partners{

    padding:90px 0;

    background:#081c36;

    border-top:1px solid rgba(255,255,255,.05);
}

.partners-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 60px;
}

.partners-header h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    margin-bottom:20px;
}

.partners-header p{

    color:#c8d7f0;
}

.partners-grid{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:30px;

    align-items:center;
}

.partner-item{

    display:flex;

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

    min-height:120px;

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

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    transition:.3s ease;

    text-decoration:none;
}

.partner-item:hover{

    transform:translateY(-4px);

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

    border-color:rgba(255,156,0,.25);

    box-shadow:
        0 12px 30px rgba(0,0,0,.25);
}

.partner-item img{

    max-width:80%;

    max-height:60px;

    object-fit:contain;

    opacity:.7;

    filter:grayscale(100%);

    transition:.3s ease;
}

.partner-item:hover img{

    opacity:1;

    filter:grayscale(0%);
}

@media(max-width:992px){

    .partners-grid{

        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:576px){

    .partners{

        padding:70px 0;
    }

    .partners-header h2{

        font-size:2.2rem;
    }

    .partners-grid{

        grid-template-columns:repeat(2,1fr);

        gap:20px;
    }

    .partner-item{

        min-height:90px;
    }

}

/* ==========================================
   FOOTER
========================================== */

.site-footer{

    background:#061426;

    padding:80px 0 40px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.05);
}

/* logo */

.footer-logo{

    margin-bottom:25px;
}

.footer-logo img{

    max-width:220px;

    width:100%;
}

/* tagline */

.footer-tagline{

    max-width:600px;

    margin:0 auto 30px;

    color:#9fb6df;

    line-height:1.8;
}

/* socials */

.footer-social{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:35px;
}

.footer-social a{

    width:42px;
    height:42px;

    display:flex;

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

    border-radius:50%;

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

    color:#cfe6ff;

    text-decoration:none;

    transition:.25s;
}

.footer-social a:hover{

    background:#ff9c00;

    color:#fff;

    transform:translateY(-3px);

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

/* nav */

.footer-nav{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

    margin-bottom:35px;
}

.footer-nav a{

    color:#8fa7cf;

    text-decoration:none;

    transition:.25s;
}

.footer-nav a:hover{

    color:#fff;
}

/* copyright */

.footer-bottom{

    color:#6f88b4;

    font-size:.9rem;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.05);
}

.footer-bottom a { color:#6f88b4;}

@media(max-width:768px){

    .site-footer{

        padding:60px 0 30px;
    }

    .footer-nav{

        flex-direction:column;

        gap:12px;
    }

}

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

.page-hero{
    min-height:40vh !important;
}

.page-hero h1{
    font-family:'Pacifico',cursive;
    font-size:4rem;
    color:#ff9c00;
    margin-bottom:20px;
}

.page-hero .hero-text{
    max-width:700px;
    margin:0 auto 30px;
}

/* ==========================================
   PRICE LIST
========================================== */

.price-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    color:#c8d7f0;
}

.price-row:last-child{
    border-bottom:none;
}

/* ==========================================
   KINDERGEBURTSTAGE
========================================== */

.birthday-section{
    background:url('/theme/img/bg-birthday.jpg') center center no-repeat;
    background-size:cover;
}

/* ==========================================
   ACTIVITIES
========================================== */

.activities{
    padding:100px 0;
    background:#102a50;
}

.activities .info-card{
    text-align:center;
}

.activities .price{
    margin-top:20px;

    font-size:1.3rem;
    font-weight:600;

    color:#ff9c00;
}

/* ==========================================
   GIFTS
========================================== */

.gifts{

    padding:100px 0;

    background:#081c36;

    text-align:center;
}

.gift-values{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:20px;

    margin-top:40px;
}

.gift-values span{

    width:110px;
    height:110px;

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

    border-radius:50%;

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

    border:1px solid rgba(255,255,255,.08);

    font-size:1.5rem;
    font-weight:700;

    color:#ff9c00;

    transition:.3s;
}

.gift-values span:hover{

    transform:translateY(-5px);

    border-color:#ff9c00;

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

/* ==========================================
   FINAL CTA
========================================== */

.final-cta{

    padding:120px 0;

    text-align:center;

    background:linear-gradient(
        180deg,
        #102a50,
        #081c36
    );
}

.final-cta h2{

    font-family:'Pacifico',cursive;

    font-size:3rem;

    margin-bottom:20px;
}

.final-cta p{

    max-width:700px;

    margin:0 auto 35px;

    color:#c8d7f0;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media(max-width:768px){

    .page-hero h1{
        font-size:2.8rem;
    }

    .activities,
    .gifts,
    .final-cta{
        padding:70px 0;
    }

    .gift-values{
        gap:15px;
    }

    .gift-values span{
        width:80px;
        height:80px;
        font-size:1.1rem;
    }

    .final-cta h2{
        font-size:2.2rem;
    }

    .price-row{
        font-size:.95rem;
    }

}

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

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

/* ==========================================
   EVENT SECTIONS
========================================== */

.event-section{

    position:relative;

    min-height:500px;

    display:flex;
    align-items:center;

    overflow:hidden;

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;	
}


.event-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,24,47,.78),
        rgba(8,24,47,.45),
        rgba(8,24,47,0)
    );
}

.event-content{

    position:relative;
    z-index:2;
	line-height: 30px;
    max-width:750px;
}

.event-content.right{
    margin-left:auto;
}

/* ==========================================
   ADVANTAGES
========================================== */

.advantages{

    padding:100px 0;

    background:#102a50;
}

.advantages-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;
}

.advantage-card{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:35px;

    text-align:center;
}

.advantage-card h3{
    margin-bottom:15px;
}

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

@media(max-width:992px){

    .advantages-grid{
        grid-template-columns:1fr;
    }

    .event-section{
        min-height:auto;
        padding:80px 0;
    }

    .event-content.right{
        margin-left:0;
    }

}

/* ==========================================
   CONTACT
========================================== */

.contact-section{
    padding:100px 0;
    background:#102a50;
}

.contact-info{
    max-width:450px;
}

.contact-item{
    margin-top:25px;
}

.contact-form{

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    padding:35px;
}

.contact-form input,
.contact-form textarea{

    width:100%;

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

    border:1px solid rgba(255,255,255,.08);

    border-radius:12px;

    padding:15px;

    color:#fff;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
    color:#aabbd8;
}

/* ==========================================
   MAP
========================================== */

.map-section iframe{

    width:100%;

    height:500px;

    border:none;
}

/* ==========================================
   FAQ
========================================== */

.faq-section{

    padding:100px 0;

    background:#081c36;
}

.faq-item{

    margin-bottom:35px;

    padding-bottom:35px;

    border-bottom:1px solid rgba(255,255,255,.08);
}