/* Deploy CalmCall v2 - live */
/* Font face */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900; /* Ondersteunt gewicht van 100 t/m 900 */
    font-style: normal;
}

/* CSS-variabelen */
:root {
    --third-section-bg: rgba(0, 48, 53, 0.1); /* Achtergrondkleur voor sectie 3 */
}

/* Basis styling voor de body */
body {
    font-family: 'Manrope', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    font-size: 16px;
}

/* Header Styling */
header {
    background-color: #FFFFFF;
    color: #333333;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Ruimte tussen logo en navigatie/button */
    align-items: center; /* Zorg dat alle items verticaal gecentreerd zijn */
    padding: 0 40px; /* Ruimte aan de zijkanten */
    box-sizing: border-box;
    height: 120px; /* Zorg dat de header hoog genoeg is voor alles */
}

/* Logo Styling */
header .logo img {
    width: 340px; /* Breedte volgens ontwerp */
    height: auto; /* Behoud verhoudingen */
}

/* Responsieve aanpassingen voor het logo op smartphones */
@media (max-width: 768px) {
    header .logo img {
        width: 150px; /* Kleiner logo op smartphones */
        height: auto; /* Behoud verhoudingen */
    }
}

/* Navigatie Styling */
header nav {
    display: flex;
    align-items: center; /* Zorg dat de navigatietekst verticaal gecentreerd is */
    gap: 40px; /* Ruimte tussen logo en tekst */
}

header nav ul {
    list-style: none; /* Verwijder standaard opsommingstekens */
    display: flex; /* Flexbox voor horizontale uitlijning */
    gap: 40px; /* Meer ruimte tussen items */
    margin: 0;
    padding: 0;
}

header nav ul li {
    display: inline-block;
}

header nav ul li a {
    text-decoration: none;
    font: normal normal 800 20px/25px 'Manrope', sans-serif; /* Stijl volgens ontwerp */
    letter-spacing: 0.2px; /* Iets meer ruimte tussen letters */
    color: #333333;
    transition: color 0.3s ease; /* Animatie voor kleurverandering bij hover */
}

header nav ul li a:hover {
    color: #55B4B3; /* Hover-kleur */
}

/* Contact Button Styling */
header .contact-btn {
    background-color: #55B4B3;
    color: #FFFFFF;
    padding: 12px 30px;
    font-size: 16px;
    border: none;
    border-radius: 50px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px; /* Extra ruimte aan de rechterkant */
    height: auto;
    line-height: 20px;
    align-self: center; /* Centreer de button met andere elementen */
}

header .contact-btn .subline {
    display: block;
    font-size: 14px; /* Kleinere tekstgrootte voor de subline */
    color: #F0F0F0; /* Lichtere kleur voor de subline */
    margin-top: 5px; /* Ruimte tussen hoofdtekst en subline */
    font-weight: 400; /* Minder vet dan de hoofdtekst */
}

/* Responsieve aanpassingen voor smartphones */
/* CalmCall responsiveness fix v2 */
@media (max-width: 768px) {
    header {
        display: flex;
        flex-direction: row; /* Items naast elkaar */
        justify-content: space-between; /* Logo links, CalmCall button + hamburger rechts */
        align-items: center; /* Verticale uitlijning */
        flex-wrap: wrap; /* Laat elementen mooi doorlopen als nodig */
        padding: 0 20px; /* Iets minder padding op mobiel */
        height: auto;
        position: relative;
        box-sizing: border-box;
    }

    header .contact-btn {
        display: none !important;
    }
}

/* Hover-effect voor CalmCall button */
header .contact-btn:hover {
    background-color: #47a29c; /* Iets donkerder groen bij hover */
    transform: scale(1.05); /* Maak de knop 5% groter bij hover */
    transition: all 0.3s ease; /* Soepele overgang */
}

/* Hero Sectie Styling */
.hero {
    position: relative; /* Zorgt voor normale positionering */
    z-index: 1; /* Lager dan de header */
    width: 100%;
    height: 598px; /* Hoogte zoals opgegeven */
    background: transparent url('../images/hero-banner.jpg') right center no-repeat;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 20px;
    background-color: #0F1821;
}

.hero-content {
    position: relative;
    top: 100px;
    left: 20px;
    max-width: 902px;
}

.hero-text h1 {
    font: normal normal 800 75px/75px 'Manrope', sans-serif;
    color: #FFFFFF;
    letter-spacing: -0.75px;
    margin: 0;
    padding: 0;
}

.hero-text p {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 36px;
    color: #FFFFFF;
    margin: 20px 0;
}

/* Responsieve aanpassingen voor de hero-sectie */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 42px; /* Pas de grootte van de koptekst aan */
        line-height: 1.2; /* Zorg voor compactere koptekst */
        margin-left: 10px; /* Zorg voor uitlijning links */
    }

    .hero-text p {
        white-space: normal; /* Laat tekst normaal afbreken */
        word-break: normal; /* Voorkom onnodige afbreking */
        overflow-wrap: break-word; /* Breek alleen als woorden te lang zijn */
        max-width: 90%; /* Beperk breedte van de tekst */
        margin: 10px 15px 0; /* Zorg dat de tekst links is uitgelijnd */
        line-height: 1.4; /* Maak de regelhoogte compacter */
        font-size: 24px; /* Pas de tekstgrootte iets aan voor betere weergave */
    }

    .hero-content {
        padding-left: 15px; /* Verminder padding aan de linkerkant */
        padding-right: 15px; /* Zorg voor consistentie */
    }
}

.hero-text .cta-btn {
    display: inline-block; /* Zorg dat de <a> zich als een knop gedraagt */
    margin-top: 20px; /* Zorg voor ruimte boven de knop (pas aan naar jouw gewenste waarde) */
    text-decoration: none; /* Behoud dat de tekst niet onderstreept is */
    background-color: #55B4B3;
    color: #FFFFFF;
    font: normal normal bold 18px/24px 'Manrope', sans-serif; /* Grotere tekst */
    padding: 16px 50px; /* Meer ruimte binnen de button */
    border: none;
    border-radius: 30px; /* Rondere hoeken voor een modern uiterlijk */
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Voeg animatie toe */
    margin-top: 20px;
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.2); /* Schaduw voor meer diepte */
}

.hero-text .cta-btn:hover {
    background-color: #47a29c; /* Aanpasbare hoverkleur */
    transform: scale(1.05); /* Vergroot de button een beetje bij hover */
    text-decoration: none; /* Behoud geen onderstreping bij hover */
}

/* Algemene Footer Styling */
.site-footer {
    display: flex;
    flex-wrap: wrap; /* Zorg dat de inhoud op kleinere schermen wordt gestapeld */
    justify-content: space-between; /* Ruimte tussen de blokken */
    align-items: flex-start;
    padding: 20px 50px;
    background: #003035;
    color: #FFFFFF;
    box-sizing: border-box;
}

.footer-logo img {
    width: 150px; /* Maak het logo iets kleiner */
    height: auto;
    margin-bottom: 20px;
}

.footer-text-block-1,
.footer-text-block-2 {
    flex: 1 1 200px; /* Flexibele blokken met een minimale breedte */
    margin: 10px;
    font: normal normal normal 16px/24px 'Manrope', sans-serif;
    color: #FFFFFF;
}

.footer-text-block-2 ul {
    list-style: none;
    padding: 0;
}

.footer-text-block-2 ul li a {
    color: #FFFFFF;
    text-decoration: none;
}

.footer-text-block-2 ul li a:hover {
    text-decoration: underline;
}

.footer-linkedin {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.footer-linkedin img {
    width: 40px; /* Maak het LinkedIn-logo kleiner */
    height: auto;
}

/* Onderste footer sectie */
.footer-bottom {
    text-align: center;
    padding: 10px;
    background-color: #0F1821;
    color: #FFFFFF;
    font: normal normal medium 14px/20px 'Manrope', sans-serif;
}

.footer-bottom a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Responsive Footer Styling */
@media (max-width: 768px) {
    .site-footer {
        flex-direction: column; /* Stapel alle blokken verticaal */
        align-items: center;
        text-align: center; /* Centreer tekst voor kleinere schermen */
    }

    .footer-logo img {
        margin-bottom: 10px;
    }

    .footer-text-block-1,
    .footer-text-block-2 {
        flex: 1 1 100%; /* Laat blokken de volledige breedte innemen */
        margin-bottom: 20px;
    }

    .footer-linkedin {
        margin-top: 10px;
    }

    .footer-bottom {
        padding: 10px 20px; /* Geef extra padding aan de smalle sectie */
        text-align: center; /* Centreer tekst en links */
        font-size: 12px; /* Maak tekst iets kleiner op mobiele apparaten */
    }

    .footer-bottom a {
        margin: 0 5px; /* Minder ruimte tussen links */
    }
}

/* Hamburger Menu Styles */
.hamburger-menu {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 25px;
    display: none; /* Verberg standaard */
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    z-index: 1000;
}

.hamburger-menu div {
    width: 100%;
    height: 4px;
    background-color: #333;
    border-radius: 2px;
}

.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100%;
    width: 70%;
    max-width: 300px;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nav-menu ul {
    padding: 20px;
}

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

.nav-menu li a {
    font-size: 18px;
    color: #333;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-menu li a:hover {
    background-color: #f4f4f4;
    color: #55B4B3;
}

.nav-menu.active {
    right: 0;
}

/* Responsive Header Rules */
@media (max-width: 768px) {
    nav {
        display: none !important; /* Forceer verbergen van regulier menu */
    }

    .hamburger-menu {
        display: flex !important; /* Forceer tonen van hamburger menu */
    }
}

@media (min-width: 769px) {
    nav {
        display: flex !important; /* Forceer tonen van regulier menu */
    }

    .hamburger-menu {
        display: none !important; /* Forceer verbergen van hamburger menu */
    }
}
/* ========================= */
/* Homepage Specific Sections */
/* ========================= */

/* Rechthoekige sectie onder de hero */
.custom-section {
    position: relative;
    width: 100%; /* Vul de volledige breedte van de pagina */
    height: 326px; /* Hoogte van de sectie op grotere schermen */
    background: #F4F4F4; /* Achtergrondkleur zoals opgegeven */
    box-sizing: border-box; /* Houd padding binnen de breedte/hoogte */
    margin-top: 20px; /* Voeg wat ruimte toe boven de sectie */
}

/* Responsieve styling voor smartphones */
@media (max-width: 768px) {
    .custom-section {
        height: auto; /* Pas de hoogte aan naar de content */
        margin-top: 10px; /* Minder verticale marge */
        padding: 20px; /* Extra padding voor de sectie */
    }
}

/* Sectie voor de informatieblokken */
.info-blocks {
    position: absolute; /* Maak de sectie absoluut gepositioneerd */
    top: 660px; /* Pas de hoogte aan zodat de blokken over de hero-sectie vallen */
    left: 0;
    right: 0;
    display: flex; /* Zet de blokken naast elkaar */
    justify-content: center; /* Centreer de blokken binnen de sectie */
    gap: 24px; /* Tussenruimte van exact 24px tussen de blokken */
    align-items: flex-start; /* Zorg dat de blokken aan de bovenkant uitlijnen */
    width: 100%; /* Volledige breedte */
    z-index: 10; /* Zorg dat de blokken boven de hero-sectie verschijnen */
    flex-wrap: nowrap; /* Voorkom wrapping op grotere schermen */
}

/* Stijlen voor elk individueel blok */
.info-block {
    position: relative; /* Zorg dat alles binnen het blok relatief gepositioneerd kan worden */
    background: #FFFFFF; /* Witte achtergrond */
    width: 390px; /* Exacte breedte van de blokken */
    height: 300px; /* Exacte hoogte van de blokken */
    padding: 20px; /* Ruimte binnen elk blok */
    box-sizing: border-box; /* Inclusief padding */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw */
    text-align: left;
    display: flex; /* Gebruik flexbox voor positionering */
    flex-direction: column; /* Stapel de elementen in kolommen */
    justify-content: space-between; /* Verdeel de ruimte netjes */
}

/* Titeltekst in de blokken */
.info-block h3 {
    text-align: left; /* Uitlijning links */
    font: normal normal bold 24px/28px 'Manrope', sans-serif; /* Schrijfstijl en grootte */
    letter-spacing: 0px; /* Geen extra spatiëring tussen letters */
    color: #333333; /* Donkergrijze kleur */
    margin: 0 0 15px 0; /* Ruimte onder de titel */
}

/* Container voor icoon en tekst */
.info-block-content {
    display: flex; /* Zet icoon en tekst naast elkaar */
    align-items: center; /* Lijn items verticaal uit */
    gap: 15px; /* Ruimte tussen icoon en tekst */
}

/* Iconen in de blokken */
.info-icon {
    flex-shrink: 0; /* Zorg dat het icoon niet krimpt */
    width: 60px; /* Breedte van het icoon */
    height: 60px; /* Hoogte van het icoon */
    background-size: contain; /* Zorg dat het icoon netjes binnen de container past */
    background-repeat: no-repeat; /* Herhaal het icoon niet */
    background-position: center; /* Centreer het icoon binnen de container */
}

/* Paragraaftekst naast het icoon */
.info-block-content p {
    text-align: left; /* Uitlijning links */
    font: normal normal medium 17px/24px 'Manrope', sans-serif; /* Schrijfstijl en grootte */
    letter-spacing: 0px; /* Geen extra spatiëring tussen letters */
    color: #7C7C7C; /* Lichtgrijze kleur */
    margin: 0; /* Geen extra marge */
    line-height: 24px; /* Regelhoogte voor betere leesbaarheid */
}

/* Link onderaan in het blok */
.info-link {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    color:#000000; /* Zwarte kleur */;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px; /* Ruimte boven de link */
    margin-left: 75px; /* Zorg ervoor dat de link uitlijnt met de paragraaftekst */
}

.info-link:hover {
    text-decoration: underline; /* Voeg een underline toe bij hover */
}

/* Icon voor het eerste blok */
.info-block:nth-child(1) .info-icon {
    background-image: url('{% static "images/icons8-pencil.svg" %}'); /* Icoon voor blok 1 */
}

/* Icon voor het tweede blok */
.info-block:nth-child(2) .info-icon {
    background-image: url('{% static "images/icons8-sync.svg" %}'); /* Icoon voor blok 2 */
}

/* Icon voor het derde blok */
.info-block:nth-child(3) .info-icon {
    background-image: url('{% static "images/icons8-choice.svg" %}'); /* Icoon voor blok 3 */
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .custom-section {
        height: auto; /* Laat de hoogte zich aanpassen aan de inhoud */
        padding: 20px 20px; /* Zorg voor gelijke padding boven en onder */
        margin-top: 0; /* Verwijder eventuele ongewenste marge boven de sectie */
        margin-bottom: 30px; /* Ruimte onder de sectie */
    }

    .info-blocks {
        position: static; /* Zorg dat de blokken natuurlijk in sectie 2 staan */
        flex-direction: column; /* Stapel de blokken onder elkaar */
        align-items: center; /* Centreer de blokken in de sectie */
        gap: 16px; /* Minder ruimte tussen blokken */
        margin-top: 0; /* Verwijder extra ruimte boven het eerste blok */
    }

    .info-block {
        width: 90%; /* Laat de blokken bijna de volledige breedte nemen */
        height: auto; /* Automatische hoogte op kleine schermen */
        margin-bottom: 20px; /* Consistente marge onder elk blok */
    }

    .info-block:first-child {
        margin-top: 0; /* Verwijder eventuele extra ruimte boven het eerste blok */
    }

    .info-block:last-child {
        margin-bottom: 0; /* Verwijder extra ruimte onder het laatste blok */
    }
}
/* Sectie 3: Jouw voordelen */
.third-section {
    position: relative;
    width: 100%; /* Vul de volledige breedte van de pagina */
    padding: 40px 20px; /* Voeg ruimte rondom de sectie toe */
    background: #E6F0F0; /* Lichtgrijze achtergrondkleur */
    box-sizing: border-box; /* Inclusief padding in breedteberekening */
    margin-top: 20px; /* Ruimte boven sectie 3 */
    display: flex;
    flex-direction: column; /* Layout voor mobiele schermen */
    align-items: center; /* Centreer inhoud */
    border-radius: 8px; /* Subtiele afgeronde hoeken */
    box-shadow: none; /* Verwijder extra schaduw */
}

/* Container voor de tekstblokken */
.third-section .text-blocks {
    display: flex; /* Plaats de tekstblokken naast elkaar */
    justify-content: space-between; /* Ruimte tussen de blokken */
    gap: 20px; /* Ruimte tussen de blokken */
    width: 100%; /* Volledige breedte van de container */
    max-width: 1200px; /* Beperk de breedte van de blokken */
    box-sizing: border-box; /* Inclusief padding in breedteberekening */
}

/* Tekstblokken */
.text-block {
    flex: 1; /* Beide blokken nemen evenveel ruimte in */
    background: #E6F0F0; /* Lichtgrijze achtergrondkleur */
    padding: 20px; /* Voeg interne ruimte toe */
    box-sizing: border-box; /* Inclusief padding in breedteberekening */
    border-radius: 8px; /* Afgeronde hoeken */
    box-shadow: none; /* Geen schaduw */
    border: none; /* Geen rand */
    text-align: left;
    display: flex; /* Flexbox voor verticale uitlijning */
    flex-direction: column; /* Stapel de inhoud verticaal */
    justify-content: space-between; /* Plaats inhoud aan boven- en onderkant */
}

/* Specifieke styling voor de tekst onderaan in het linker tekstblok */
.text-block.left .cta-text {
    margin-top: auto; /* Zorg dat deze tekst onderaan komt */
    font-size: 18px; /* Maak de tekst groter indien nodig */
    line-height: 26px; /* Pas de regelhoogte aan */
    font-weight: normal; /* Gebruik standaard letterdikte */
}


/* Titels in de tekstblokken */
.text-block h3 {
    font: normal bold 22px/28px 'Manrope', sans-serif;
    color: #333333; /* Donkergrijze kleur voor titels */
    margin-bottom: 15px; /* Ruimte onder de titel */
}

/* Specifieke styling voor de titel in het linker tekstblok */
.text-block.left h3 {
    font-size: 42px; /* Minimaal 42px voor de titel */
    line-height: 48px; /* Zorg voor een goede regelhoogte */
}

/* Paragraaftekst in het linker tekstblok */
.text-block.left p:first-of-type {
    font-weight: bold; /* Maak de tekst vetgedrukt */
    font-size: 20px; /* Maak de tekst 20px groot */
    line-height: 28px; /* Pas de regelhoogte aan */
}

/* Titels in het rechter tekstblok */
.text-block.right h3 {
    font-weight: bold; /* Maak de titels vetgedrukt */
    font-size: 22px; /* Maak de titels 22px groot */
    line-height: 28px; /* Pas de regelhoogte aan */
    margin-bottom: 8px; /* Verminder de afstand onder de titels */
}

/* Specifieke styling voor titels in het rechter tekstblok */
.text-block.right h3 {
    margin-bottom: 8px; /* Verminder de afstand onder de titels in het rechter tekstblok */
}

/* Paragraaftekst in het rechter tekstblok */
.text-block.right p {
    font-size: 16px; /* Maak de paragrafen 16px groot */
    line-height: 22px; /* Pas de regelhoogte aan */
    margin-bottom: 10px; /* Ruimte onder de paragrafen */
}

/* CTA-knop */
.cta-button a {
    display: inline-block; /* Zorg voor een blokstijl */
    background: #55B4B3; /* Groene knopkleur */
    color: #ffffff; /* Witte tekstkleur */
    padding: 15px 30px; /* Voeg interne ruimte toe */
    font: normal bold 18px/26px 'Manrope', sans-serif;
    border-radius: 30px; /* Afgeronde hoeken */
    text-decoration: none; /* Verwijder onderstreping */
    transition: background-color 0.3s ease; /* Vloeiende hover-transitie */
}

.cta-button a:hover {
    background: #47A29C; /* Hoverkleur */
}

/* Responsieve styling voor kleinere schermen */
@media (max-width: 768px) {
    .third-section .text-blocks {
        flex-direction: column; /* Plaats de blokken onder elkaar */
        gap: 20px; /* Ruimte tussen de blokken */
    }

    .text-block {
        max-width: 100%; /* Laat de blokken de volledige breedte innemen */
        text-align: center; /* Centreer inhoud op mobiele schermen */
    }

    .cta-button a {
        width: 90%; /* Maak de knop breder op mobiele schermen */
        margin: 0 auto; /* Centreer de knop */
    }
}
/* Sectie 4: Voor Professionals */
.fourth-section {
    position: relative;
    width: 100%; /* Vul de volledige breedte van de pagina */
    padding: 0; /* Verwijder interne ruimte */
    background: #f9f9f9; /* Lichte achtergrondkleur */
    box-sizing: border-box;
    margin-top: 0; /* Verwijder ruimte tussen sectie 3 en sectie 4 */
    display: flex;
    justify-content: center;
    align-items: stretch; /* Laat de blokken de volledige hoogte vullen */
}

/* Container voor de blokken */
.fourth-section .content-blocks {
    display: flex;
    justify-content: space-between; /* Ruimte tussen de blokken */
    align-items: stretch; /* Laat de blokken de volledige hoogte vullen */
    gap: 0; /* Geen ruimte tussen linker- en rechterblok */
    width: 100%; /* Vul de volledige breedte */
    max-width: 1200px; /* Beperk de maximale breedte */
    box-sizing: border-box;
}

/* Linkerblok: Afbeelding */
.content-block.left {
    flex: 1; /* Laat het linkerblok evenveel ruimte innemen als het rechterblok */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; /* Vul de volledige hoogte van de sectie */
}

.content-block.left img {
    width: 100%; /* Laat de afbeelding de volledige breedte vullen */
    height: 100%; /* Laat de afbeelding de volledige hoogte vullen */
    object-fit: cover; /* Zorg dat de afbeelding proportioneel blijft */
    border-radius: 0; /* Geen afgeronde hoeken voor een strakke aansluiting */
}

/* Rechterblok: Tekst */
.content-block.right {
    flex: 1; /* Laat het rechterblok evenveel ruimte innemen als het linkerblok */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px; /* Ruimte binnen het rechterblok */
    box-sizing: border-box;
    height: 100%; /* Vul de volledige hoogte van de sectie */
}

/* Subtitle */
.content-block.right .subtitle {
    font-size: 16px;
    font-weight: 600; /* Semi-bold */
    color: #555555; /* Neutrale grijze kleur */
    margin-bottom: 10px;
}

/* Titel */
.content-block.right h2 {
    font-size: 42px;
    font-weight: 800; /* Extra bold */
    color: #333333; /* Donkergrijze kleur */
    margin-bottom: 15px;
    line-height: 48px; /* Regelhoogte voor leesbaarheid */
}

/* Paragraaftekst */
.content-block.right .description {
    font-size: 16px;
    font-weight: 400; /* Normale tekstdikte */
    color: #777777; /* Subtiele grijze kleur */
    line-height: 24px;
    margin-bottom: 20px; /* Ruimte onder de paragraaftekst */
}

/* CTA-knop */
.content-block.right .cta-button a {
    display: inline-block;
    background: #55B4B3; /* Groene achtergrondkleur */
    color: #ffffff; /* Witte tekstkleur */
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 30px; /* Ruimte binnen de knop */
    border-radius: 30px; /* Afgeronde hoeken */
    transition: background-color 0.3s ease; /* Hovertransitie */
    text-align: center;
}

.content-block.right .cta-button a:hover {
    background: #47A29C; /* Donkerdere kleur bij hover */
}

/* Responsieve styling voor kleinere schermen */
@media (max-width: 768px) {
    .fourth-section {
        flex-direction: column; /* Plaats de blokken onder elkaar */
        padding: 20px 0; /* Voeg verticale ruimte toe */
    }

    .fourth-section .content-blocks {
        flex-direction: column; /* Plaats de blokken onder elkaar */
        gap: 20px; /* Voeg ruimte tussen de blokken toe */
    }

    .content-block.left {
        height: auto; /* Laat de hoogte automatisch aanpassen */
    }

    .content-block.left img {
        height: auto; /* Laat de afbeelding proportioneel blijven */
        max-height: 300px; /* Beperk de maximale hoogte van de afbeelding */
    }

    .content-block.right {
        padding: 20px; /* Zorg voor voldoende ruimte binnen het rechterblok */
        height: auto; /* Laat de hoogte automatisch aanpassen */
        text-align: center; /* Centreer de tekst voor kleinere schermen */
    }

    .content-block.right .subtitle {
        font-size: 14px; /* Maak de subtitel iets kleiner op mobiele schermen */
    }

    .content-block.right h2 {
        font-size: 32px; /* Maak de titel kleiner voor kleinere schermen */
        line-height: 38px; /* Pas de regelhoogte aan */
    }

    .content-block.right .description {
        font-size: 14px; /* Maak de paragraaftekst iets kleiner */
        line-height: 20px; /* Pas de regelhoogte aan */
    }

    .content-block.right .cta-button a {
        width: 90%; /* Laat de knop bijna de volledige breedte innemen */
        margin: 0 auto; /* Centreer de knop */
    }
}

/* Sectie 5: Klantervaringen */
.fifth-section {
    position: relative;
    width: 100%; /* Vul de volledige breedte van de pagina */
    padding: 40px 20px; /* Ruimte rondom de sectie */
    background: #f4f4f4; /* Lichte achtergrondkleur */
    box-sizing: border-box;
    margin-top: 0; /* Verwijder ruimte tussen sectie 4 en sectie 5 */
    display: flex;
    justify-content: center; /* Centreer de inhoud horizontaal */
    align-items: center; /* Centreer de inhoud verticaal */
    min-height: 300px; /* Minimale hoogte van de sectie */
}

/* Container voor de inhoud */
.fifth-section .content-container {
    width: 100%;
    max-width: 1200px; /* Beperk de maximale breedte */
    text-align: center; /* Centreer tekstinhoud */
}

/* Placeholdertekst */
.fifth-section .placeholder-text {
    font-size: 18px;
    color: #777777; /* Subtiele grijze kleur */
    font-weight: 400;
    line-height: 28px;
    margin: 0;
    padding: 0;

}

/* Einde van eerdere stijlen */

/* Algemene container-styling */
.container {
    max-width: 1200px; /* Beperk de breedte */
    width: 100%;
    margin: 0 auto; /* Centreer horizontaal */
    padding: 0 20px; /* Voeg wat padding toe aan de zijkanten */
    box-sizing: border-box; /* Houd padding binnen de breedte */
}

/* Eventuele extra opmerkingen of stijlen */

@media screen and (min-width: 700px) and (max-width: 1600px) {
    .hero-content {
      top: 40px !important;
    }
  
    .info-blocks {
      top: 720px !important;
    }
  }
  
 /* Verberg CalmCall-knop op smartphones via unieke ID */
@media (max-width: 768px) {
  #calmcall-button {
    display: none !important;
  }
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .hero {
    overflow-x: hidden; /* voorkomt horizontaal scrollen */
  }

  .hero-content {
    position: static; /* verwijder absolute positionering op mobiel */
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-text {
    max-width: 100%;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
}

/* Verwijder bullets en geef nette opmaak aan het hamburger menu */
.nav-menu ul {
  list-style: none; /* Verwijder de bolletjes */
  padding: 0;
  margin: 0;
}

.nav-menu li {
  margin: 20px 0; /* Meer ruimte tussen menu-items */
  text-align: left; /* Uitlijning van tekst */
}

.nav-menu li a {
  font-size: 20px;
  font-weight: 600;
  color: #003035;
  text-decoration: none;
  display: block;
  padding: 12px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-menu li a:hover {
  background-color: #E6F0F0;
  color: #55B4B3;
}

/* Transparante donkere overlay op de hero afbeelding - alleen smartphone */
@media (max-width: 768px) {
  .hero {
    position: relative; /* Maak .hero relatief gepositioneerd */
  }

  .hero::after {
    content: '';
    position: absolute; /* Overlay wordt absoluut gepositioneerd binnen .hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 40% donkere transparante overlay */
    z-index: 1; /* Zorg dat overlay tussen afbeelding en tekst ligt */
  }

  .hero-content {
    position: relative;
    z-index: 2; /* Zorg dat de tekst bovenop de overlay verschijnt */
  }
}

/* Optimalisatie van hero padding op smartphone */
@media (max-width: 768px) {
  .hero-content, .hero-text {
    padding-left: 10px !important;   /* kleiner links = tekst schuift naar links */
    padding-right: 20px !important;  /* rechts blijft gelijk voor extra ruimte */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-text h1, .hero-text p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
  }
}