/* index.html*/
/* Algemene opmaak */
/*De standaart styling zorgt voor consistentie met marges, padding, en een prettige regelhoogte.*/
body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* Top-div met logo en navigatie */
/*Hier zorgt dat het logo en de navigatie naast elkaar worden uitgelijnd houdt de header zichtbaar aan de bovenkant bij scrollen.*/
.top-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #444;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-div .logo h1 {
    margin: 0;
    font-size: 24px;
}

/*Toont de lijstitems horizontaal.*/
.nav-list {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-list a:hover {
    color: #ffcc00;
}

/* Introsectie */
.intro {
    text-align: center;
    padding: 50px 20px;
    color: black;
}

.intro h2 {
    font-size: 36px;
    margin-bottom: 10px;
}
/*De tekstuitlijning staat centraal met een maximale breedte van 800px.*/
.intro p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
}

/* Bestemmingen sectie */
/*De bestemmingen worden georganiseerd in een responsief raster en elk artikel heeft een zachte schaduw, afgeronde hoeken, en beweegt licht omhoog bij hover.*/
.bestemmingen {
    padding: 20px;
    background-color: #fff;
}

.bestemmingen h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 28px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

.grid article {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.grid article:hover {
    transform: translateY(-5px);
}

.grid h4 {
    margin-top: 0;
    font-size: 20px;
}

.grid p {
    font-size: 16px;
    color: #555;
}

.grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px;
    background-color: #444;
    color: #fff;
}




/* Specifieke stijlen voor de Onze Reizen-pagina */
/* Algemene stijlen voor grids */

/*Zorgt voor een responsief raster die zich automatisch aanpast aan het schermformaat.*/
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

/*Elk artikel in het grid heeft een achtergrondkleur, afgeronde hoeken, schaduw, en beweegt iets omhoog bij hover.*/
.grid article {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    text-align: center;
}

.grid article:hover {
    transform: translateY(-5px);
}

.grid img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.grid h4 {
    margin-top: 0;
    font-size: 20px;
}

.grid p {
    font-size: 16px;
    color: #555;
}

/* Specifieke stijlen voor Hoogtepunten sectie */
/* Het opmaak heeft een witte achtergrond, padding van 20px, en een gecentreerde titel met een donkere kleur*/
.reis-lijst {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
}

.reis-lijst h3 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

/* Specifieke stijlen voor Meer Bestemmingen sectie */
/*het opmaak heeft een lichtgrijze achtergrond (#f4f4f4) met kleinere titeltekst en een minder contrasterende kleur (#666)*/
.extra-reizen {
    background-color: #f4f4f4;
    padding: 20px;
}

.extra-reizen h3 {
    text-align: center;
    font-size: 24px;
    color: #666;
}


/* Algemene opmaak */
body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
}

/* Top-div met logo en navigatie */
.top-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #444;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-div .logo h1 {
    margin: 0;
    font-size: 24px;
}

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

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.nav-list a:hover {
    color: #ffcc00;
}

/* Fotogalerij sectie */
/*Centraal uitgelijnde titels en tekst, met een witte achtergrond en gecentreerde paragrafen.*/
.fotogalerij {
    padding: 20px;
    background-color: #fff;
}

.fotogalerij h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
}

.fotogalerij p {
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}

/* Bestemmingen */
/*Grids met artikelen die gerelateerd zijn aan specifieke bestemmingen.*/
.destination {
    margin-bottom: 40px;
}

.destination h3 {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
    color: #222;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 10px;
}

.gallery-grid article {
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s;
    text-align: center;
}

.gallery-grid article:hover {
    transform: translateY(-5px);
}

.gallery-grid h4 {
    font-size: 18px;
    margin: 10px 0;
    color: #333;
}

.gallery-grid img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.gallery-grid p {
    padding: 10px;
    font-size: 14px;
    color: #666;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px 20px;
    background-color: #444;
    color: #fff;
    font-size: 14px;
}




/*Fotogalerij*/
/* Algemene stijl */

/*Lora wordt gebruikt voor een elegante, serieuze uitstraling en het lichtgrijs achtergrond zorgt voor een rustige visuele basis.*/
body {
    font-family: 'Lora', serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
    line-height: 1.6;
}

/* Top-div met logo en navigatie */
/* De flexbox indeling zorgt dat het logo en de navigatie naast elkaar staan en de header blijft bovenaan zichtbaar bij scrollen.*/
.top-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #444;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-div .logo h1 {
    margin: 0;
    font-size: 24px;
}

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

.nav-list li {
    margin: 0 15px;
}

.nav-list a {
    text-decoration: none;
    color: #fff;
    transition: color 0.3s;
}

.nav-list a:hover {
    color: #ffcc00;
}



/* Reistips sectie */
/*Witte achtergrond (#fff) laat de tekst en inhoud opvallen en de padding zorgt voor ruimte binnen de sectie.*/
.reistips {
    padding: 20px;
    background-color: #fff;
}

.reistips h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
}

.reistips p {
    text-align: center;
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
}

/* Bestemming reistips grid */
/*Elk item heeft een minimale breedte van 300px, en past zich aan het schermformaat aan.*/
.destination-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px;
}

.destination-tips article {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.destination-tips article:hover {
    transform: translateY(-5px);
}

.destination-tips h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.destination-tips ul {
    list-style: disc;
    padding-left: 20px;
    font-size: 14px;
    color: #666;
}

.destination-tips ul li {
    margin-bottom: 5px;
}

/* Footer */
footer {
    text-align: center;
    padding: 10px 20px;
    background-color: #444;
    color: #fff;
    font-size: 14px;
}





/* Contact sectie algemene opmaak */
/* De padding zorgt voor ruimte binnen de sectie (40px boven/onder, 20px links/rechts) en de tijkstuitlijning wordt centraal uitgelijnd voor algemene inhoud zoals kopteksten.*/
.contact {
    padding: 40px 20px;
    background-color: #fff;
    text-align: center; /* Alleen globale centrering */
}

.contact h2 {
    font-size: 32px;
    margin-bottom: 10px;
    color: #333;
}

.contact h3 {
    font-size: 20px;
    margin-bottom: 30px;
    color: #555;
}

/* Contact grid */
/*De gridlayout maakt een flexibele rasterindeling met kolommen van minimaal 300px breed, auto-fit past het aantal kolommen aan het schermformaat aanzodat het responsief is.*/
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left; /* Contact grid wordt links uitgelijnd */
}

/* Contactformulier */
.contact-form {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.contact-form h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #444;
}

.contact-form label {
    display: block;
    font-size: 14px;
    margin: 10px 0 5px;
    color: #666;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 15px;
}

.contact-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #444;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.contact-form button:hover {
    background-color: #ffcc00;
}

/* Contactinformatie */
.contact-info {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #444;
}

.contact-info p {
    font-size: 16px;
    color: #555;
    margin: 5px 0;
}

/* Social media lijst */
.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 15px 0 0;
}

.contact-info ul li {
    margin: 10px 0;
}

.contact-info ul li a {
    text-decoration: none;
    color: #444;
    font-size: 16px;
    transition: color 0.3s;
}

.contact-info ul li a:hover {
    color: #ffcc00;
}

/* Responsiviteit */
/*Bij schermen kleiner dan 768px wordt de grid-layout aangepast naar één enkele kolom.*/
@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}







/* Bedankt pagina */
/*De padding zorgt voor ruimte binnen de sectie (40px boven/onder, 20px links/rechts), Alle inhoud (tekst en knoppen) wordt gecentreerd weergegeven*/
.confirmation {
    padding: 40px 20px;
    text-align: center;
    background-color: #fff;
}

.confirmation h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #333;
}

.confirmation p {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

/*De inline block zorgt ervoor dat de knop als een blokje wordt weergegeven, met padding en de padding zorgt voor comfortabele klikbare ruimte.*/
.confirmation .button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #444;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
}

/*Bij hover verandert de achtergrondkleur naar goudgeel (#ffcc00) voor visuele feedback en een aantrekkelijk interactief effect.*/
.confirmation .button:hover {
    background-color: #ffcc00;
}