/* Section one: Hero-section */

/* De container die de foto en de tekst bij elkaar houdt */
.hero-container {
    position: relative;
    width: 100vw;
    height: 110vh;
    display: flex;
    justify-content: center;  
    align-items: center;      
    text-align: center;       
    overflow: hidden;
}

/* Zorgt dat de afbeelding achter de tekst blijft staan */
.hero-container .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;        
    object-position: center;  
    z-index: 1;  
}

/* De donkere waas over de foto voor maximale leesbaarheid van de tekst */
.hero-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); 
    z-index: 2; 
}

/* De tekstcontainer zelf - NU GEOPTIMALISEERD VOOR 2 KOLOMMEN */
.header-content {
    position: relative;
    z-index: 3; 
    color: #ffffff;
    width: 100%;
    padding: 0 6%; /* Iets bredere zijmarges voor een luxe uitstraling */
    display: flex;
    justify-content: space-between;
    align-items: center; /* Centreert de twee kolommen verticaal ten opzichte van elkaar */
    gap: 60px; /* Ruime afstand tussen je tekstblok en je contactbox */
}

/* --- VERDELING VAN DE DRIE KOLOMMEN (NU TWEE KOLOMMEN) --- */

.header-col-middle, 
.header-col-right {
    display: flex;
    flex-direction: column;
}

/* --- MIDDELSTE KOLOM (AANGEPASTE ABOUT-TEKST) --- */
.header-col-middle {
    text-align: left; /* Tekst leest prettiger vanaf links nu hij aan de linkerkant van het scherm staat */
    align-items: flex-start;
    background: rgba(10, 10, 10, 0.35); 
    padding: 35px; 
    border-radius: 14px;
    backdrop-filter: blur(8px); 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    
    flex: 1.5; /* Neemt de meeste ruimte in beslag op het scherm */
    max-width: 700px; /* Geeft je lap tekst de perfecte ademruimte in de breedte */

    margin-top: 110px;
}

.about-lead {
    font-size: 17px; 
    line-height: 1.7; 
    color: #f5f5f5;
    margin: 0 0 18px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Highlights in de bovenste paragraaf */
.lead-highlight {
    color: #ffffff;
    font-weight: 600;
    border-bottom: 2px solid #0dffd7; 
    padding-bottom: 1px;
    border-bottom: none;
}

/* De unieke tussenlijn */
.about-divider {
    border: 0;
    height: 2px; /* Verhoogd van 1px naar 2px voor een strakkere, dikkere lijn */
    background: #ffffff4d; /* Iets witter gemaakt voor een premium tech-uitstraling */
    width: 100%; /* Verlengd van 30% naar 65px voor een mooiere, stabiele lengte tussen de grote lappen tekst */
    margin: 0 0 18px 0; /* Behoudt de strakke uitlijning naar links */
}

.about-pricing {
    font-size: 16px;
    line-height: 1.7; 
    color: #ffffff99;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Prijs highlight */
.price-highlight {
    color: #0dffd7; 
    font-weight: 700;
}

/* --- RECHTERKOLOM (CONTACT) --- */
.header-col-right {
    text-align: center;
    align-items: center;
    flex: 1; /* Compactere kolom voor de knoppen */
    margin-left: 100px;

    margin-top: 110px;
}

.contact-box {
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
}

.contact-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Alleen wanneer de website op Engels staat (lang="en"), wordt SPECIFIEK de telefoontitel verkleind */
html[lang="nl"] [data-i18n="contactPhone"] {
    font-size: 20px !important;    /* Verlaagd van 22px naar 18px */
    font-weight: 700;              /* Behoudt de dikke tech-uitstraling */
}


/* Alleen wanneer de website op Engels staat (lang="en"), wordt SPECIFIEK de telefoontitel verkleind */
html[lang="en"] [data-i18n="contactPhone"] {
    font-size: 18px !important;    /* Verlaagd van 22px naar 18px */
    font-weight: 700;              /* Behoudt de dikke tech-uitstraling */
}

/* De knoppen voor E-mail & Telefoon */
.btn-contact {
    display: inline-block;
    background-color: #007bff; 
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 22px;
    border-radius: 20px; 
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
    margin-bottom: 5px;
}

.btn-contact:hover {
    background-color: #0056b3; 
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.5);
}

.btn-phoneNumber {
    font-size: 18px !important;    /* Iets grotere tekst voor het telefoonnummer */
    padding: 7px 60px !important;   /* Verhoogd van 22px naar 40px voor een langere horizontale lengte */
    letter-spacing: 0.5px;          /* Zorgt dat het nummer strak en leesbaar blijft */
    display: inline-block;
    white-space: nowrap;            /* Voorkomt dat het nummer per ongeluk afbreekt naar twee regels */
}

.contact-divider {
    border: 0;
    height: 2px; /* Verhoogd van 1px naar 2px voor een strakkere, dikkere lijn */
    background: #ffffff99; /* Verhoogd van 0.2 naar 0.6 voor een veel wittere en duidelijkere lijn */
    width: 40%; /* Een vaste, strakke breedte in pixels werkt vaak mooier voor een dikke lijn */
    margin: 35px auto 15px auto; 
}

.contact-note {
    font-size: 19px;
    margin-top: 40px;
    color: #ffffff; /* Geforceerd naar puur wit */
    opacity: 1.0; /* Volledig dekkend wit gemaakt (was 0.8) */
    font-weight: 500; /* Iets dikker aangezet zodat het wit er echt uitspringt */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}



/* --- MEDIA QUERY VOOR MOBIEL --- */
@media (max-width: 768px) {

    /* Maakt de complete achtergrond/sectie verticaal een klein beetje langer */
    .hero-container {
        height: auto !important;       /* Heft de vaste desktophoogte op */
        min-height: 110vh !important;  /* Maakt de totale lengte 10% langer zodat alles comfortabel past */
        padding-bottom: 30px;          /* Zorgt voor een gegarandeerde veilige afstand tot de volgende sectie */
    }
    
    /* 1. Dwing de hoofdcontainer om alles netjes ONDER elkaar te zetten */
    .header-content {
        flex-direction: column;
        align-items: center;      /* Centreert de kaders horizontaal op de pagina */
        justify-content: center;
        width: 100%;
        padding: 0 5%;            /* Zorgt voor perfect gelijke, strakke afstanden tot de linker- en rechterrand */
        padding-top: 170px;       /* Geeft genoeg ademruimte onder de gecentreerde taal-switcher */
        gap: 50px;                /* Ruimte tussen de tekstkaders en de contactbalk daaronder */
    }

    /* 2. Zet de twee tekstkaders (Yasir en Over Mij) strak onder elkaar */
    .header-text-row {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 20px;                /* Ruimte tussen kader 1 en kader 2 */
    }
    
    /* Zorg dat de kaders de volledige beschikbare breedte benutten (binnen de 5% padding) */
    .header-col-left, 
    .header-col-middle {
        max-width: 100%;
        width: 100%;
        text-align: center;       /* Tekst netjes centreren voor mobiele balans */
    }
    
    /* 3. Maak de titels en teksten compacter zodat het binnen het scherm past */
    .header-col-left h1 {
        font-size: 34px !important; 
        letter-spacing: 2px;
        margin-bottom: 8px !important;
        text-align: center;
        top: 0 !important;        /* Verwijdert eventuele desktop verschuivingen */
    }
    
    .header-col-left p {
        font-size: 14px;          /* Compacte, goed leesbare tekst op smartphones */
        line-height: 1.5;
        text-align: center;
    }
    
    .header-col-middle .about-lead {
        font-size: 15.5px !important;
        line-height: 1.5;
        margin-bottom: 5px;
    }

    .header-col-middle {
        margin-top: 0 !important;      
        width: 97% !important;
        max-width: 97% !important;
        margin-left: auto !important;     
        margin-right: auto !important;    
        
        padding: 28MASKYWebsite_36850px 20px !important; /* Comfortabele mobiele binnenruimte */
        text-align: center !important; 
    }

    .hero-name {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .header-col-middle .about-pricing {
        font-size: 14.5px !important;
        line-height: 1.5;
        margin-bottom: 0 !important;
    }

    .about-divider {
        margin: 8px auto;
        width: 100%;
    }
    
    /* 4. ONDERSTE RIJ: De contactbalk netjes gecentreerd onder de kaders */
    .header-contact-row {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .contact-box {
        flex-direction: column;   /* Zet e-mail en telefoon onder elkaar op mobiel */
        border-radius: 15px;
        padding: 12px 20px;
        width: 100%;              /* Sluit mooi aan bij de breedte van de tekstkaders */
        max-width: 340px;         /* Voorkomt dat de contactbalk te breed uitsmeert op grotere telefoons */
        gap: 10px;
        margin-top: 30px;
    }

    /* --- RECHTERKOLOM (CONTACT) OP MOBIEL --- */
    .header-col-right {
        margin-left: 0 !important; /* Forceert de marge terug naar 0 zodat hij weer perfect gecentreerd staat op mobiel! */
        margin-top: 30px !important;
        width: 100%;
        max-width: 100%;
        text-align: center;
        align-items: center;
    }
    
    .contact-item {
        flex-direction: column;   /* Zet het label boven de knop */
        gap: 4px;
        width: 100%;
        align-items: center;
    }

    /* NIEUW: Schuift de Telefoon + knop + note omhoog richting de divider */
    .contact-box .contact-item:last-of-type {
        margin-top: -70px; /* Verander dit naar -10px of -20px als je het minder of meer wilt laten stijgen */
    }
    
    .contact-title {
        font-size: 20px;
        margin-bottom: 0;
    }
    
    /* Slanke mobiele knoppen */
    .btn-contact {
        font-size: 13px;
        padding: 6px 16px;
        border-radius: 12px;
        width: auto;              /* Knoppen behouden hun eigen compacte vorm */
    }

    /* NIEUW: Alleen de Email-knop krijgt hier extra grootte */
    .btn-email {
        font-size: 16.5px;          /* Grotere tekst */
        padding: 9px 20px;        /* Meer opvulling rondom de tekst voor een grotere knop */
    }

    /* NIEUW: Alleen de Email-knop krijgt hier extra grootte */
    .btn-phoneNumber {
        font-size: 16px;          /* Grotere tekst */
        padding: 8px 20px;        /* Meer opvulling rondom de tekst voor een grotere knop */
    }
    
    /* De divider wordt een liggend streepje tussen de e-mail en telefoon */
    .contact-divider {
        width: 70%;
        height: 1.5px;
        margin: 10px auto;
        margin-top: 10px; /* Behoudt de perfecte afstand tot het e-mailgedeelte */
        margin-bottom: -7px; /* VERANDERD: Een negatieve waarde hier trekt Telefoon, de knop en de note direct krachtig omhoog! */
    }
    
    .contact-note {
        font-size: 18px;
        margin-left: 0;
        margin-top: 40px;
        text-align: center;
    }
}