/* ================= VARIABLES ================= */
:root {
  --dutch-red: #e01122;    /* Knalrood */
  --dutch-blue: #0047ab;   /* Kobaltblauw */
  --dutch-white: #ffffff;  /* */
  --dark-bg: #0a0a0a;      /* */
  /* Transparanter gemaakt (0.40) zodat de zee zichtbaar is */
  --glass-bg: rgba(0, 0, 0, 0.40); 
}

/* ================= BASE ================= */
html, body {
  margin: 0;               /* */
  padding: 0;              /* */
  width: 100%;             /* */
}

body {
  font-family: 'Montserrat', sans-serif; /* */
  color: #fff;             /* */
  background-color: #000;  /* */
}

/* ================= BACKGROUND ================= */
.video-bg-container {
  position: fixed;         /* */
  top: 0;                  /* */
  left: 0;                 /* */
  width: 100%;             /* */
  height: 100%;            /* */
  z-index: -1;             /* */
  background: #000;        /* */
}

#bg-video {
  width: 100%;             /* */
  height: 100%;            /* */
  object-fit: cover;       /* */
  filter: brightness(45%); /* Iets lichter gemaakt voor betere zichtbaarheid van de zee */
}

/* ================= NAVBAR ================= */
.led-navbar {
    background-color: rgba(0, 0, 0, 0.85) !important; /* Ook navbar iets transparanter */
    border-bottom: 3px solid var(--dutch-red);        /* */
    box-shadow: 0 0 20px rgba(224, 17, 34, 0.6);      /* */
}

.navbar-collapse { justify-content: center; }         /* */

.led-link {
    font-family: 'Orbitron', sans-serif;              /* */
    color: #fff !important;                           /* */
    font-size: 0.8rem;                                /* */
    letter-spacing: 1px;                              /* */
    margin: 0 10px;                                   /* */
    transition: 0.3s;                                 /* */
    text-decoration: none;                            /* */
}

.led-link:hover, .led-link.active { 
    color: var(--dutch-blue) !important;              /* */
    text-shadow: 0 0 10px var(--dutch-blue);          /* */
}

/* ================= CONTENT WRAPPER ================= */
.content-wrapper {
  max-width: 1100px;                                  /* */
  margin: 0 auto;                                     /* */
  padding: 110px 20px 40px;                           /* */
  text-align: center;                                 /* */
}

/* ================= HEADER & LOGO ================= */
.header-main {
  margin-bottom: 60px;                                /* */
}

h1 {
  font-size: clamp(2.5rem, 8vw, 5rem);                /* */
  text-shadow: 0 0 10px var(--dutch-red), 0 0 20px var(--dutch-red); /* */
  text-transform: uppercase;                          /* */
  font-weight: 900;                                   /* */
  margin: 0;                                          /* */
  font-family: 'Bebas Neue', sans-serif;              /* */
  color: var(--dutch-white);                          /* */
}

/* CSS Logo met Rood-Wit-Blauw verloop */
.dutch-divas-text-logo {
    font-family: 'Orbitron', sans-serif;              /* */
    font-size: 4rem;                                  /* */
    font-weight: 900;                                 /* */
    text-transform: uppercase;                         /* */
    background: linear-gradient(
        to bottom, 
        #e01122 0%, #e01122 33%, 
        #ffffff 33%, #ffffff 66%, 
        #0047ab 66%, #0047ab 100%
    );                                                /* */
    -webkit-background-clip: text;                    /* */
    -webkit-text-fill-color: transparent;             /* */
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); /* */
    display: inline-block;                            /* */
}

/* ================= SECTIONS ================= */
section {
  background: var(--glass-bg);                        /* */
  border: 1px solid rgba(255, 255, 255, 0.2);         /* */
  border-radius: 25px;                                /* */
  padding: 45px;                                      /* */
  margin-bottom: 50px;                                /* */
  backdrop-filter: blur(10px);                        /* Frosted glass effect op de zee */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);            /* */
}

h3 {
  color: var(--dutch-red);                            /* */
  text-transform: uppercase;                          /* */
  text-shadow: 0 0 5px var(--dutch-red);              /* */
  margin-top: 0;                                      /* */
  margin-bottom: 25px;                                /* */
  font-size: 1.8rem;                                  /* */
  font-family: 'Orbitron', sans-serif;                /* */
}

/* ================= INFO SECTION ================= */
.info-section {
    border-left: 5px solid var(--dutch-blue);         /* */
    text-align: left;                                 /* */
}

.info-section p {
    line-height: 1.8;                                 /* */
}

.info-section .video-box img {
    border: 3px solid var(--dutch-white);             /* */
    border-radius: 15px;                              /* */
    box-shadow: 0 0 20px rgba(9, 112, 255, 0.6);      /* */
}

/* ================= FORMS & CARDS ================= */
.form-card {
  background: rgba(0, 0, 0, 0.35);                    /* Transparanter gemaakt */
  border-radius: 22px;                                /* */
  padding: 30px;                                      /* */
  border: 2px solid rgba(255, 255, 255, 0.1);         /* */
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.5);            /* */
  text-align: left;                                   /* */
  height: 100%;                                       /* */
  backdrop-filter: blur(5px);                         /* */
}

.form-card.neon-pink { 
    border-color: var(--dutch-red);                   /* */
}

.form-card.neon-blue { 
    border-color: var(--dutch-blue);                  /* */
}

.neon-control {
  border-radius: 12px !important;                     /* */
  background: rgba(255, 255, 255, 0.1) !important;    /* Invoervelden ook licht transparant */
  color: #fff !important;                             /* */
  border: 1px solid rgba(255, 255, 255, 0.2) !important; /* */
  padding: 12px !important;                           /* */
}

.neon-control:focus {
  border-color: var(--dutch-blue) !important;         /* */
  box-shadow: 0 0 12px var(--dutch-blue) !important;  /* */
}

.cta-btn {
  background: var(--dutch-red);                       /* */
  color: #fff;                                        /* */
  border: none;                                       /* */
  padding: 15px 30px;                                 /* */
  border-radius: 50px;                                /* */
  font-family: 'Orbitron', sans-serif;                /* */
  text-decoration: none;                              /* */
  letter-spacing: 2px;                                /* */
  text-transform: uppercase;                          /* */
  transition: .4s;                                    /* */
  box-shadow: 0 5px 15px rgba(224, 17, 34, 0.5);      /* */
  cursor: pointer;                                    /* */
}

.cta-btn:hover {
  background: var(--dutch-white);                     /* */
  color: var(--dutch-red);                            /* */
  box-shadow: 0 0 25px var(--dutch-white);            /* */
}

/* ================= RESPONSIVE ================= */
@media (max-width: 768px) {
  .content-wrapper { padding: 100px 15px 30px; }      /* */
  h1 { font-size: 2.8rem; }                           /* */
  .dutch-divas-text-logo { font-size: 2.5rem; }       /* Logo schaalt mee op mobiel */
}