body {
    background-color: rgb(100, 100, 100);
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

html{
    scroll-behavior: smooth;
}

/*------Navigatie bar------*/
#header {
    background-color: white; /*kleur achtergrond navigatie balk*/
    padding: 10px 0px; /*wit ruimte boven en onderkand*/
    max-width: 1640px; /*breedte navigatie balk*/
    margin: 0 auto;
    height: 50px; /*hoogte navigatie balk*/
    position: sticky; /*maakt de navbar vast aan de bovenkant*/
    overflow: hidden; /*zorgt dat alles onder de navbar schuift*/
    top: 0; /*zorgt dat de navbar in beeld blijft*/
}

.card-logoA img {
    margin-left: 15px;
}

.container-navbar {
    display: flex; /*elementen vrij positioneren*/
    justify-content: space-between; /* zorgt voor ruimte tussen logo en navigatie*/
    max-width: 1360px; /*breedte navbar zelf*/
}

.navbar ul {
    list-style-type: none; /* haalt de lijn onder de tekst weg*/
    display: flex; /* zorgt voor een horizontale tekst */
    margin: 0;
    padding: 0;
}

.navbar li {
    margin-left: 60px; /* Ruimte tussen de menu-items */
}

.navbar a {
    text-decoration: none; /*haalt de lijn onder de tekst weg*/
    color: black; /*maakt de teskt zwart*/
    font-weight: bold; /*maakt de tekst dik gedrukt*/
    font-size: 40px; /*grootte tekst*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; /*lettertype*/
    transition: color 0.5s ease; /* Voegt een vloeiend hover-effect toe */
}

.navbar a:hover { /*zorgt voor een hover*/
    color: #007acc; /*kleur van de hover*/
}

/*------Hero image------*/
#hero{
    background-color: #62a9f2; /*achtergrond kleur hero*/
    color: white;  /* Tekst wordt wit */
    max-width: 1640px; /*breedte section*/
    height: 480px; /*hoogte section*/
    display: flex; /*elementen vrij positioneren*/
    margin: 0 auto; /*block in het midden van de pagina!!!!*/
    justify-content: center; /*centreren tekst*/
    align-items: center; /* Verticaal centreren */
}

.card-hero{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center; /* Centreer de tekst */
}

.card-hero h1{
    font-size: 15em;  /* Verhoog de grootte van de hoofdtekst */
    margin: 10px; /*grootte h1 tekst*/
    font-weight: bold; /*dikte h1 tekst*/
}

.card-hero h2{
    font-size: 3em;  /* Verhoog de grootte van de subtitel */
    margin: 10px 0; /*ruimte tussen de h1 en h2 tekst*/
}

/*------Over mij------*/
#overMij { 
    max-width: 1640px; /*breedte article*/
    margin: 0 auto;
    height: 435px; /*hoogte article*/
    background-color: #ffffff; /*achtergrond kleur article*/
    scroll-margin-top: 5vh; /*centreert navbar link*/
}

.container-overMij { /*container*/ /*grid article*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
} 

#overMij .card-logo:nth-child(1) { /* card 1 */
    grid-column-start: 2;
    grid-column-end: 5;
    justify-self: center;
}

#overMij .card-overMij:nth-child(2) { /* card 2 */
    grid-column-start: 5;
    grid-column-end: 11;
}

#overMij .card-overMij h2 { 
    font-size: 60px; /*grootte tekst*/
    margin-bottom: 20px; /*ruimte onder h2 tekst*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 30px;
}

#overMij .card-overMij p { 
    font-size: 26px; /*grootte p tekst*/
    line-height: 1.6; /*ruimte tussen regels p tekst*/
    font-family: Arial, Helvetica, sans-serif;
}

#overMij .card-logo img{
    margin-top: 20px;
}

/*------Over mij informatie------*/
#overMijInformatie { 
    max-width: 1640px; /*breedte section*/
    margin: 0 auto;
    height: 800px; /*hoogte section*/
    background-color: #62a9f2; /*achtergrond kleur section*/
}

.container-overMijInformatie { /*container*/ /*over mij informatie grid*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#overMijInformatie .card-opleiding:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 7;
}

#overMijInformatie .card-interesses:nth-child(2){/* card 2 */
    grid-column-start: 8;
    grid-column-end: 12;    
}

#overMijInformatie h2{
    font-size: 45px; /*grootte tekst*/
    text-align: center; /*centreert tekst in het midden van de card*/
    margin-top: 28px; /*ruimte boven tekst*/
    margin-bottom: 25px; /*ruimte onder tekst*/
    color: #ffffff; /*kleur tekst*/
}

/*opleiding*/
.card-opleiding p {
    font-size: 30px; /*grootte tekst*/
    color: #ffffff; /*kleur tekst*/
    margin: 10px 0; /*ruimte tussen de p elementen*/
    font-family: Arial, Helvetica, sans-serif;
    flex: 1; /* Tekst neemt de resterende ruimte in */
}

.card-opleiding .timeline {
    display: flex; /* Zet de stippen en lijnen onder elkaar */
    flex-direction: column; /* Zorg dat de tijdlijn verticaal blijft */
    align-items: center; /*centeert de lijn in het midden van de card*/
}

.card-opleiding .timeline .dot {
    width: 15px; /* Breedte tijdlijn stip */
    height: 15px; /* Hoogte tijdlijn stip */
    background-color: #ffffff; /* Kleur stip */
    border-radius: 50%; /* Scherpe rand stip */
}

.card-opleiding .timeline .line {
    height: 60px; /*hoogte tijdlijn lijn*/
    width: 2px; /*breedte tijdlijn lijn*/
    background-color: #ffffff; /*kleur lijn */
    z-index: 1; /*scherpte rand lijn*/
}

/*intresses*/
.card-interesses span {
    display: inline-block; /*blokjes om de teskt heen*/
    color: #ffffff; /*kleur tekst*/
    border: 3px solid #ffffff; /*kleur blokjes*/
    background-color: #528cc6c0; /*kleur IN blokjes*/
    padding: 20px; /*ruimte tussen de tekst en het blokjes aan de binnenkant*/
    border-radius: 28px; /*scherpte hoek blokjes*/
    margin: 5px; /*ruimte tussen blokjes*/
    font-size: 35px; /*grootte tekst*/
    font-family: Arial, Helvetica, sans-serif;
}

/* 2 gedeelte informatie overmij*/
.container-overMijInformatie2 { /*container*/ /*over mij informatie grid*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
}

#overMijInformatie .card-skills:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 7;
}

#overMijInformatie .card-sterktes:nth-child(2){/* card 2 */
    grid-column-start: 8;
    grid-column-end: 12;    
}

/*skills*/
.card-skills span {
    display: inline-block; /*blokjes om de teskt heen*/
    color: #ffffff; /*kleur tekst*/
    border: 3px solid #ffffff; /*kleur blokjes*/
    background-color: #528cc6c0; /*kleur IN blokjes*/
    padding: 20px; /*ruimte tussen de tekst en het blokjes aan de binnenkant*/
    border-radius: 28px; /*scherpte hoek blokjes*/
    margin: 5px; /*ruimte tussen blokjes*/
    font-size: 35px; /*grootte tekst*/
    font-family: Arial, Helvetica, sans-serif;
    display: table;/*positioneerd het in het*/
    margin: 0 auto;
    margin-bottom: 10px;
}

/*sterktes*/
.card-sterktes span {
    display: inline-block; /*blokjes om de teskt heen*/
    color: #ffffff; /*kleur tekst*/
    border: 3px solid #ffffff; /*kleur blokjes*/
    background-color: #528cc6c0; /*kleur IN blokjes*/
    padding: 20px; /*ruimte tussen de tekst en het blokjes aan de binnenkant*/
    border-radius: 28px; /*scherpte hoek blokjes*/
    margin: 5px; /*ruimte tussen blokjes*/
    font-size: 35px; /*grootte tekst*/
    font-family: Arial, Helvetica, sans-serif;
}

/*------mijn werk------*/
#mijnWerk{
    max-width: 1640px; /*breedte section*/
    margin: 0 auto;
    height: 960px; /*hoogte section*/
    background-color: #ffffff; /*achtergrond kleur section*/
    scroll-margin-top: 5vh; /*centreert navbar link*/
}

.container-mijnWerk { /*container*/ /*Mijn werk grid*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
    place-items: center; /* Centreert de inhoud zowel horizontaal als verticaal */
}

#mijnWerk .card-school:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 7;
}

#mijnWerk .card-vrijeTijd:nth-child(2){/* card 2 */
    grid-column-start: 7;
    grid-column-end: 13;    
}

#mijnWerk .card-links:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 7;
}

#mijnWerk .card-rechts:nth-child(2){/* card 2 */
    grid-column-start: 7;
    grid-column-end: 13;    
}

#mijnWerk h2 {
    font-size: 60px; /* grootte h2 tekst*/
    text-align: center; /*centreren h2 tekst*/
    margin-bottom: 20px; /*ruimte h2 tekst onderkant*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding-top: 20px; /* Optioneel: extra padding boven de titel */
}

#mijnWerk .container-mijnWerk img {
    border-radius: 10px; /*scherpte hoek foto*/
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /*schaduw rondom foto*/
}

#mijnWerk .card-school h3 {
    font-size: 50px; /* grootte tekst links*/
    margin-top: 30px; /*ruimte boven tekst*/
    text-align: center; /*centreert tekst in het midden*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#mijnWerk .card-vrijeTijd h3 {
    font-size: 50px; /* grootte tekst links*/
    margin-top: 30px; /*ruimte boven tekst*/
    text-align: center; /*centreert tekst in het midden*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

/*------Datapunten------*/
#datapunten {
    max-width: 1640px; /*breedte section*/
    margin: 0 auto;
    height: 300px; /*hoogte section*/
    background-color: #62a9f2; /*achtergrond kleur section*/
}

.card-title-datapunten h2 {
    font-size: 60px; /* grootte h2 tekst*/
    text-align: center; /*centreren h2 tekst*/
    margin-bottom: 20px; /*ruimte h2 tekst onderkant*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color: #ffffff;
    padding-top: 20px; /* Optioneel: extra padding boven de titel */
}

.container-datapunten { /*container*/ /*Mijn werk grid*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
    place-items: center; /* Centreert de inhoud zowel horizontaal als verticaal */
}

#datapunten .card-cursus3:nth-child(1){/* card 1 */
    grid-column-start: 1;
    grid-column-end: 7;
}

#datapunten .card-cursus4:nth-child(2){/* card 2 */
    grid-column-start: 7;
    grid-column-end: 13;    
}

.card-cursus3 h3{
    color: #ffffff;
    font-size: 40px; /* grootte h2 tekst*/
    text-align: center; /*centreren h2 tekst*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.card-cursus3 span {
    display: inline-block; /*blokjes om de teskt heen*/
    color: #ffffff; /*kleur tekst*/
    border: 3px solid #ffffff; /*kleur blokjes*/
    background-color: #528cc6c0; /*kleur IN blokjes*/
    padding: 20px; /*ruimte tussen de tekst en het blokjes aan de binnenkant*/
    border-radius: 28px; /*scherpte hoek blokjes*/
    margin: 5px; /*ruimte tussen blokjes*/
    font-size: 35px; /*grootte tekst*/
    font-family: Arial, Helvetica, sans-serif;
}

.card-cursus3 span a {
    color: inherit; /* Neemt de kleur over van de ouder (de <span>) */
    text-decoration: none; /* Verwijdert de onderstreping */
}

.card-cursus4 h3{
    color: #ffffff;
    font-size: 40px; /* grootte h2 tekst*/
    text-align: center; /*centreren h2 tekst*/
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.card-cursus4 span {
    display: inline-block; /*blokjes om de teskt heen*/
    color: #ffffff; /*kleur tekst*/
    border: 3px solid #ffffff; /*kleur blokjes*/
    background-color: #528cc6c0; /*kleur IN blokjes*/
    padding: 20px; /*ruimte tussen de tekst en het blokjes aan de binnenkant*/
    border-radius: 28px; /*scherpte hoek blokjes*/
    margin: 5px; /*ruimte tussen blokjes*/
    font-size: 35px; /*grootte tekst*/
    font-family: Arial, Helvetica, sans-serif;
}

.card-cursus4 span a {
    color: inherit; /* Neemt de kleur over van de ouder (de <span>) */
    text-decoration: none; /* Verwijdert de onderstreping */
}

/*------Footer------*/
#footer {
    max-width: 1640px; /*breedte section*/
    margin: 0 auto;
    height: 100px; /*hoogte section*/
    background-color: #ffffff; /*achtergrond kleur section*/
    padding-top: 20px;
}

.container-footer { /*container*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 1rem;
    align-items: center;
}

#footer .card-logo:nth-child(1){ /* card 1 */
    grid-column-start: 5;
    grid-column-end: 7;
    justify-content: middle;
}

#footer .card-tekst:nth-child(2){ /* card 2 */
    grid-column-start: 7;
    grid-column-end: 13;
    justify-content: middle;
}

#footer .card-tekst {
    grid-column-start: 4;
    grid-column-end: 13; 
    font-size: 25px; /*tekstgrootte*/
    line-height: 1.5; /*ruimte tussen de regels*/
    flex-direction: column; /*stapelt de tekst onder elkaar*/
    justify-content: center; /*centreert de tekst verticaal*/
    font-family: Arial, Helvetica, sans-serif;
}

.card-tekst a {
    color: rgb(0, 0, 0); /*kleur van de link*/
    text-decoration: none; /*verwijdert de onderstreping*/
    font-weight: bold; /*maakt de email dik gedrukt*/
    transition: color 0.5s ease; /*voegt een vloeiend hover-effect toe*/
    font-family: Arial, Helvetica, sans-serif;
}

.card-tekst a:hover {
    color: #62a9f2; /*witte kleur bij hover*/
}