/* ==========================================================================
   LioCo homepage fix - Synmar/Petronas merkblok leesbaar maken
   Probleem (vorige bouwer): op desktop (>1200px) heeft .contentmerken geen
   witte panel-achtergrond, waardoor de zwarte tekst wegvalt op het donkere
   Synmar-vlak en de eerste woorden onleesbaar/afgesneden lijken.
   Oplossing: geef de tekstkolom op desktop een nette witte, afgeronde panel,
   net als in de bestaande mobiele weergave.
   ========================================================================== */

@media screen and (min-width: 1201px) {

    /* Witte, afgeronde panel achter de merktekst zodat deze altijd leesbaar is */
    #merken .contentmerken {
        background: #ffffff;
        border-radius: 40px;
        padding: 60px 64px;
        box-sizing: border-box;
        /* iets breder zodat de tekst niet tegen de rand plakt */
        width: 46%;
    }

    /* Tekst links uitlijnen binnen het panel leest prettiger dan rechts */
    #merken .synmar .contentmerken,
    #merken .petronas .contentmerken {
        text-align: left;
        justify-content: flex-start;
    }

    /* Zorg dat het panel boven het achtergrondbeeld en de curve ligt */
    #merken .contentmerken {
        position: relative;
        z-index: 5;
    }

    /* Logo netjes boven de tekst, niet half achter de rand */
    #merken .contentmerken img {
        margin-bottom: 18px;
    }

    /* Tekstkleur borgen (stond op zwart; blijft leesbaar op wit panel) */
    #merken .contentmerken p {
        color: #1c2b3a;
    }
}

/* Extra veiligheid: op zeer brede schermen het panel niet te smal laten worden */
@media screen and (min-width: 1600px) {
    #merken .contentmerken {
        width: 42%;
    }
}

/* ==========================================================================
   Overlap fix: onderkant #blocks (PRO-TEC blokken) overlapt de schuine
   bovenrand van #content (Over LioCo). Extra ruimte tussen de secties zodat
   de blokkentekst de curve niet meer raakt.
   ========================================================================== */
@media screen and (min-width: 1201px) {
    #blocks {
        padding-bottom: 110px;
    }
}

/* ==========================================================================
   Over LioCo sectie (#content) volledig opnieuw opgemaakt.
   Overschrijft de oude, fragiele layout (schuine curve + achtergrondfoto die
   tekst afsneed) met een strakke tweekoloms opzet: tekst links op wit,
   foto rechts in een net afgerond kader. Huisstijl #183a67 + wit.
   ========================================================================== */
#content.oc-section{
    background: #ffffff !important;
    background-image: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 80px 0 !important;
    display: block !important;
    position: relative;
}
#content.oc-section .container{
    width: 1400px;
    max-width: 90%;
    margin: 0 auto;
    overflow: visible !important;
}
#content.oc-section .oc-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
#content.oc-section .oc-eyebrow{
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #183a67;
    opacity: .65;
    margin-bottom: 14px;
}
#content.oc-section .oc-title{
    color: #183a67 !important;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    font-weight: 800;
    margin: 0 0 22px;
}
#content.oc-section .oc-body{
    color: #3f4a59;
    font-size: 17px;
    line-height: 1.75;
}
#content.oc-section .oc-body p{ margin: 0 0 1em; color: #3f4a59; }
#content.oc-section .oc-body h2{
    color: #183a67 !important;
    font-size: 20px;
    margin: 0 0 .6em;
    font-weight: 700;
}
#content.oc-section .oc-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    background: #183a67;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 999px;
    transition: transform .18s ease, box-shadow .18s ease;
}
#content.oc-section .oc-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(24,58,103,.25);
    color: #fff !important;
}
#content.oc-section .oc-btn i{ font-size: 13px; }
#content.oc-section .oc-media{
    margin: 0;
    border-radius: 24px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 20px 50px rgba(24,58,103,.18);
}
#content.oc-section .oc-media img{
    width: 100%;
    height: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

@media screen and (max-width: 1024px){
    #content.oc-section{ padding: 56px 0 !important; }
    #content.oc-section .oc-grid{
        grid-template-columns: 1fr;
        gap: 32px;
    }
    #content.oc-section .oc-media{ order: -1; }
}

/* Decoratieve vorm onder #blocks uitschakelen (botst met nieuwe Over LioCo sectie) */
#blocks:before{
    display: none !important;
}