/* Algemene stijlen */
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Verhindert horizontaal scrollen */
}

body {
    font-family: 'Arial', sans-serif;
    background-color: #2c2c2c;
    color: #fff;
    margin: 0;
    padding: 0;
}

/* Header stijlen */
header {
    display: flex;
    justify-content: space-between; /* Zorg ervoor dat elementen aan de uiteinden staan */
    align-items: center;
    padding: 15px 20px;
    background-color: #1a1a1a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.logo img {
    width: 150px;
}

nav {
    display: flex;
    align-items: center;
}

.menu {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu li {
    margin: 0 15px;
}

.menu a {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    transition: background-color 0.3s, border-radius 0.3s;
}

.menu a:hover {
    background-color: #e63946;
    border-radius: 5px;
}

/* Taalselector */
.language-selector {
    margin: 0 15px;
    position: relative;
}

.language-selector select {
    padding: 10px;
    border: none;
    background-color: #1a1a1a;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.language-selector select:hover {
    background-color: #333;
}

.flag {
    width: 20px;
    height: auto;
    margin-right: 5px;
}

/* Gebruikersacties */
.user-actions {
    display: flex; /* Zorg ervoor dat de knoppen naast elkaar staan */
}

.user-actions .btn {
    background-color: #e63946;
    color: #fff;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-right: 10px; /* Voeg ruimte toe tussen de knoppen */
}

.user-actions .btn:last-child {
    margin-right: 0; /* Verwijder de marge aan de rechterkant van de laatste knop */
}

.user-actions .btn:hover {
    background-color: #d62839;
}

/* Hamburger menu */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
}

/* Media queries */
@media (max-width: 909px) {
    .hamburger {
        display: block; /* Maak de hamburgerknop zichtbaar op kleine schermen */
    }
    
    .menu {
        display: none; /* Verbergt het menu standaard */
        flex-direction: column;
        position: absolute;
        top: 60px; /* Plaats het menu onder de header */
        right: 0; /* Plaats het menu aan de rechterkant */
        background-color: #1a1a1a;
        z-index: 1000;
        padding: 10px 0;
        border-radius: 5px; /* Afgeronde hoeken voor het dropdownmenu */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Schaduw voor diepte */
        width: 90%; /* Breedte van het dropdown-menu */
        max-width: 400px; /* Maximale breedte om het menu niet te breed te maken */
    }
    .menu.show {
        display: flex; /* Toont het menu als de hamburger is geklikt */
    }
}

@media (max-width: 500px) {
    header {
        flex-direction: column; /* Zorg ervoor dat de header-elementen onder elkaar staan */
        align-items: flex-start; /* Zorg ervoor dat de elementen aan de linkerkant zijn uitgelijnd */
        padding: 20px; /* Voeg meer padding toe voor een grotere header */
    }

    nav {
        width: 100%; /* Zorg ervoor dat de nav de volledige breedte gebruikt */
        flex-direction: column; /* Zet de nav-elementen onder elkaar */
        align-items: center; /* Centreer de nav-items */
    }

    .menu {
        flex-direction: column; /* Maak het menu verticaal */
        margin-top: 10px; /* Voeg wat ruimte toe boven het menu */
    }

    .menu li {
        margin: 5px 0; /* Verminder de marge tussen de menu-items */
    }

    .user-actions {
        margin-top: 10px; /* Voeg ruimte toe boven de gebruikersacties */
        width: auto; /* Zorg ervoor dat de gebruikersacties niet de volledige breedte gebruiken */
        display: flex; /* Zorg ervoor dat de knoppen naast elkaar staan */
        justify-content: center; /* Centreer de knoppen */
    }

    .user-actions .btn {
        padding: 5px 10px; /* Verminder de padding voor kleinere knoppen */
        margin: 0 5px; /* Voeg ruimte toe tussen de knoppen */
    }

    .language-selector {
        margin-top: 10px; /* Voeg ruimte toe boven de taalselector */
        width: auto; /* Zorg ervoor dat de taalselector niet de volledige breedte gebruikt */
    }
} 

/* Verplaats de hamburger naar de rechterkant */
.hamburger {
    margin-left: auto; /* Zorg ervoor dat de hamburgerknop naar de rechterkant verschuift */
}

/* Main secties */
main {
    padding: 40px 20px;
}

section {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 20px;
    color: white;
}

#welcome-section {
    background-image: url('../images/background.jpeg');
    height: 50vh;
    margin-bottom: 10px;
}

#info-section {
    background-color: rgb(15, 22, 26);
    margin-bottom: 10px;
}

#point-section {
    background-color: rgb(15, 22, 26);
    margin-bottom: 10px;
}

section::before {
    content: ""; /* Maak een pseudo-element voor de overlay */
    position: absolute; /* Positioneer het overlay-element absoluut */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Zwarte overlay met 50% transparantie */
    z-index: 1; /* Zorg ervoor dat de overlay boven de achtergrondafbeelding ligt */
}

section h2 {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    height: auto;
}

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Algemeen stijlen voor formulieren */
form {
    max-width: 400px; /* Max breedte van het formulier */
    margin: 20px auto; /* Centreer het formulier */
    padding: 20px; /* Padding rondom het formulier */
    background-color: #2c2c2c; /* Achtergrondkleur van het formulier */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Schaduw voor diepte */
    font-family: Arial, sans-serif; /* Lettertype voor het formulier */
}

h1 {
    color: #ffffff; /* Kleur van de titel */
    text-align: center; /* Centreer de titel */
    margin-bottom: 20px; /* Ruimte onder de titel */
}

.form-group {
    margin-bottom: 15px; /* Ruimte tussen de formulierelementen */
}

label {
    color: #ffffff; /* Kleur van de labels */
    display: inline-block; /* Labels op dezelfde regel */
    margin-right: 10px; /* Ruimte tussen de labels en invoervelden */
    margin-bottom: 10px; /* Ruimte onder de labels */
    vertical-align: top; /* Verticale uitlijning van de labels */
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: calc(100% - 20px); /* Volledige breedte minus 20 pixels aan de rechterzijde */
    padding: 10px; /* Padding binnen de invoervelden */
    border: none; /* Geen rand */
    border-radius: 5px; /* Afgeronde hoeken */
    background-color: #3a3a3a; /* Achtergrondkleur van de invoervelden */
    color: #ffffff; /* Kleur van de tekst */
    transition: background-color 0.3s, border 0.3s; /* Animatie voor hover-effect */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    background-color: #555; /* Achtergrondkleur bij focus */
    border: 2px solid #e63946; /* Randkleur bij focus */
}

/* Specifieke stijlen voor de button in dit formulier */
form button {
    background-color: #e63946; /* Achtergrondkleur van de knop */
    color: #ffffff; /* Kleur van de tekst */
    padding: 10px 15px; /* Padding voor de knop */
    border: none; /* Geen rand */
    border-radius: 5px; /* Afgeronde hoeken voor de knop */
    cursor: pointer; /* Cursor verandert naar pointer */
    width: 100%; /* Volledige breedte van de knop */
    font-size: 16px; /* Grotere tekst voor de knop */
    font-weight: bold; /* Vetgedrukte tekst */
    transition: background-color 0.3s, transform 0.2s; /* Animatie voor hover-effect */
}

form button:hover {
    background-color: #d62839; /* Donkerdere kleur bij hover */
    transform: translateY(-2px); /* Kleine opwaartse beweging bij hover */
}

form button:active {
    transform: translateY(0); /* Terug naar originele positie bij klikken */
}

.forgot-password {
    text-align: center; /* Centreer de link */
    margin-top: 10px; /* Ruimte boven de link */
}

.forgot-password a {
    color: #ffffff; /* Kleur van de link */
    text-decoration: none; /* Geen onderstreping */
}

.forgot-password a:hover {
    text-decoration: underline; /* Onderstreping bij hover */
}

.social-buttons a {
    display: block; /* Zorg ervoor dat de links als blokken worden weergegeven */
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    text-align: center; /* Centreer de tekst */
    text-decoration: none; /* Geen onderstreping */
    color: white; /* Witte tekstkleur */
    margin: 10px;
}

.social-buttons .google {
    background-color: #db4437; /* Google Red */
    margin: 10px;
}

.social-buttons .facebook {
    background-color: #4267B2; /* Facebook Blue */
    margin: 10px;
}

.social-buttons .apple {
    background-color: #000; /* Apple Black */
    margin: 10px;
}

.card_container {
    display: flex; /* Gebruik flexbox om de kaarten naast elkaar te plaatsen */
    flex-wrap: wrap; /* Zorg ervoor dat kaarten naar de volgende regel verplaatsen als ze niet passen */
    justify-content: space-between; /* Zorg voor ruimte tussen de kaarten */
    gap: 20px; /* Voeg wat ruimte toe tussen de kaarten */
    padding: 20px; /* Voeg padding toe aan de container */
    max-width: 70%; /* Maximaal 70% van de breedte van de viewport */
    margin: 0 auto; /* Centreer de container horizontaal */
}

.card {
    position: relative; /* Zorg ervoor dat de overlay goed wordt gepositioneerd ten opzichte van de kaart */
    background-color:  rgba(0, 0, 0, 0.5); /* Achtergrondkleur van de kaart */
    border-radius: 8px; /* Ronde hoeken */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Schaduw voor diepte */
    width: calc(33.33% - 20px); /* Zorg ervoor dat elke kaart 1/3 van de container breed is, minus de gap */
    padding: 20px; /* Voeg padding toe aan de kaart */
    box-sizing: border-box; /* Zorg ervoor dat padding en marges worden meegenomen in de totale breedte */
    overflow: hidden; /* Zorg ervoor dat de overlay de randen van de kaart niet overschrijdt */
}

.card::before {
    content: ""; /* Maak een pseudo-element voor de overlay */
    position: absolute; /* Positioneer het overlay-element absoluut */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Zwarte overlay met 50% transparantie */
    z-index: 1; /* Zorg ervoor dat de overlay boven de achtergrondafbeeld*/
}

@media (max-width: 768px) {
    .card {
        width: calc(50% - 10px); /* Twee kaarten per rij op kleinere schermen */
    }
}

@media (max-width: 480px) {
    .card {
        width: 100%; /* Eén kaart per rij op mobiele schermen */
    }
}
  
.card img {
    width: 95%;
    height: 95%;
    padding: 2px;
}
  
.card h2 {
    margin-bottom: 10px;
}
  
.card p {
    margin-bottom: 5px;
}
  
.card .red-circle {
    background-color: #ff0000;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    margin: 0 auto 10px;
}

.container_bullet {
    display: flex;
    flex-direction: column; /* Standaard kolomrichting */
    position: relative;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%; /* Gebruik 100% breedte voor responsiviteit */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto 10px;
}

.container_bullet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.left-content, .right-content {
    width: 100%; /* Standaard breedte voor kleinere schermen */
    text-align: center;
    margin: 15px;
}

.features {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.features li {
    margin-bottom: 25px;
}

.bullet {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-image: url('../images/img_bullet_star.png');
    background-size: cover;
    margin-right: 10px;
}

.image-container {
    display: flex;
    transition: transform 0.5s ease;
}

.image-container img {
    width: 60%;
    height: auto;
    margin: 0 auto;

}

@media (min-width: 600px) {
    .container_bullet {
        flex-direction: row; /* Wijzig naar rijrichting voor grotere schermen */
    }
    .left-content, .right-content {
        width: 50%; /* 50% breedte voor beide secties */
    }
}

.faq {
    background-color: #3a3a3a; /* Achtergrondkleur van de FAQ-sectie */
    padding: 40px 20px; /* Opvulling rondom de FAQ-sectie */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Schaduw voor diepte */
    max-width: 800px; /* Max breedte van de FAQ-sectie */
    margin: 0 auto; /* Centreer de sectie */
}

.faq h2 {
    text-align: center; /* Centreer de titel */
    color: #fff; /* Kleur van de titel */
    margin-bottom: 20px; /* Onder marge voor de titel */
}

.faq-item {
    background-color: #222222; /* Achtergrondkleur van de FAQ-item */
    border-radius: 5px; /* Afgeronde hoeken voor de FAQ-item */
    margin-bottom: 15px; /* Onder marge tussen FAQ-items */
    padding: 15px; /* Opvulling binnen de FAQ-item */
    transition: background-color 0.3s; /* Voor een hover-effect */
}

.faq-item:hover {
    background-color: #e63946; /* Achtergrondkleur bij hover */
}

.faq-question {
    color: #fff; /* Kleur van de vraag */
    cursor: pointer; /* Verander de cursor naar pointer */
    margin: 0; /* Geen marge voor de vraag */
}

.faq-answer {
    color: #ccc; /* Kleur van het antwoord */
    margin-top: 10px; /* Bovenmarge voor het antwoord */
    display: none; /* Verberg het antwoord standaard */
}

/* Media queries voor responsiviteit */
@media (max-width: 600px) {
    .faq {
        padding: 20px; /* Verminder de opvulling op kleinere schermen */
    }

    .faq-item {
        padding: 10px; /* Verminder de opvulling binnen de FAQ-item */
    }
}

/* Stijl voor het tonen van het antwoord */
.faq-item.active .faq-answer {
    display: block; /* Toon het antwoord als het item actief is */
}

/* Footer styles */
footer {
    background-color: #1a1a1a;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centreer de items horizontaal */
    align-items: flex-start; /* Zorg ervoor dat de items aan de bovenkant zijn uitgelijnd */
    position: relative; /* Voor de copyright sectie */
  }
  
  footer > * {
    flex: 1 1 30%; /* Zorg ervoor dat elk gedeelte minimaal 30% van de breedte in beslag neemt */
    margin: 20px; /* Ruimte tussen de secties */
    min-width: 200px; /* Minimum breedte om te voorkomen dat ze te smal worden */
  }
  
  .signup {
    flex: 1 0 100%; /* Zorg ervoor dat de aanmeldsectie de volledige breedte in beslag neemt */
    text-align: center; /* Centreer de knop */
    margin-bottom: 20px; /* Ruimte onder de knop */
  }
  
  .signup-button {
    background-color: #e63946;
    color: #fff;
    border: none;
    padding: 15px 30px; /* Grotere padding voor een grotere knop */
    cursor: pointer;
    font-size: 18px; /* Grotere tekst */
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .signup-button:hover {
    background-color: #d62839;
  }

  .alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    }

    .alert-info {
        background-color: #2c7a7b;
        color: #fff;
    }

    .alert-warning {
        background-color: #dd6b20;
        color: #fff;
    }

    .alert-error {
        background-color: #c53030;
        color: #fff;
    }

    .alert-success {
        background-color: #38a169;
        color: #fff;
    }

    .alert i {
        margin-right: 10px;
    }
  
  footer h3 {
    margin-bottom: 10px;
    text-align: center; /* Centreer de koppen */
  }
  
  footer ul {
    list-style-type: none;
    padding: 0;
    text-align: center; /* Centreer de lijstitems */
  }
  
  footer ul li {
    margin: 5px 0;
    text-align: center; /* Zorg ervoor dat de tekst in de lijstitems gecentreerd is */
  }
  
  footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  footer a:hover {
    color: #e63946;
  }
  
  /* Copyright section */
  .copyright {
    flex: 1 0 100%; /* Zorg ervoor dat de copyrightsectie de volledige breedte in beslag neemt */
    text-align: center; /* Centreer de copyrighttekst */
    margin-top: 20px; /* Ruimte boven de copyrighttekst */
  }
  
  /* Maak de footer responsief */
  @media (max-width: 768px) {
    footer > * {
      flex: 1 0 100%; /* Zorg ervoor dat elk gedeelte de volledige breedte in beslag neemt op kleinere schermen */
    }
  }