.cm_hero_wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: var(--primary);
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    position: relative;
    min-height: 200px;
}
.cm_hero_line{
    position:relative;
}
.cm_hero_line::before,
.cm_hero_wrapper::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: calc(100% + 100px);
    z-index: 1;
    background-color: var(--accent);
}
.cm_hero_triangles_dark{
    position:relative;
}
.cm_hero_triangles_dark::after,
.cm_hero_wrapper::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:60%;
    z-index: 0;
    background-image: linear-gradient(to top, var(--primary), transparent), url(/wp-content/uploads/2025/12/triangle-pattern-light.svg);
}
.cm_hero_wrapper > *{
    position: relative;
    z-index: 1;
}
.cm_hero_wrapper .cm_hero_content_wrapper {
    max-width: var(--body-max-width);
    width: var(--body-width);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 0px;
    gap: 40px;
}


.cm_hero_wrapper .cm_hero_content_wrapper .cm_hero_text .cm_hero_cta_wrapper {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}
.cm_btn_header > a,
.cm_btn,
.cmb_btn,
.cm_hero_cta{
    text-decoration: none;
    padding: 12px 24px!important;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 800!important;
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--secondary);
    color: white!important;
    display: block;
    float: left;
}
.cmb_secondary{
    background-color: white;
    color: var(--primary)!important;    
}

.cm_hero_wrapper .cm_hero_text p 
{}

.cm_hero_wrapper .cm_hero_img_wrapper.niks {
    width: 40vw;
    position: absolute;
    right: 0px;
    top: 0px;
}

.cm_hero_wrapper .cm_hero_img_wrapper.niks .cm_hero_img {}

.cm_hero_text.cm_hero_image {
    padding-right: 36%;
}
.cm_hero_content > *{
    /* opacity: 0.8; */
    color: white;
}

.cm_hero_img_wrapper {
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc(45% - 30px);
    height: 100%;
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
}
.et_pb_text_inner > ul,
.et_pb_text_inner > p,
.et_pb_code_inner > p{
    font-size: 18px;
    font-weight: 400!important;
    color: var(--text)!important;
    line-height: 1.4em;
}


.cm_hero_wrapper.cm_hero_no_image.cm_hero_usps > div.cm_hero_content_wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    padding: 80px 0px!important;
}

.cm_hero_usps_wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.cm_hero_usp {
    border-radius: 4px;
    padding: 20px;
    background-color: white;
    position:relative;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    padding-left: 60px;
}
.cm_hero_usp::after{
    content: "";
    position: absolute;
    top: 0px;
    left: 20px;
    width: 30px;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2052.3%20(67297)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Ejollycons-%5Bcategory%5D%2Ficons%2Fsvg%2Ficon-ui-1-checkmark%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icons---export%22%20transform%3D%22translate(-188.000000%2C%20-58.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22row-1%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon---3%22%20transform%3D%22translate(128.000000%2C%200.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%2325b825%22%20d%3D%22M20.2623934%2C4.35694064%20C20.620373%2C3.92524672%2021.2454187%2C3.87858578%2021.6584721%2C4.25272051%20C22.0715254%2C4.62685523%2022.1161716%2C5.28010841%2021.758192%2C5.71180233%20L10.5017717%2C19.2861187%20C9.78581249%2C20.1495066%208.53572108%2C20.2428284%207.70961435%2C19.494559%20C7.64084239%2C19.4322668%207.57626278%2C19.365092%207.51633515%2C19.2935124%20L2.24488637%2C12.9971213%20C1.88495323%2C12.5672054%201.92663658%2C11.9137384%202.33798875%2C11.537562%20C2.74934091%2C11.1613855%203.37459118%2C11.20495%203.73452432%2C11.6348659%20L9.0059731%2C17.931257%20L20.2623934%2C4.35694064%20Z%22%20id%3D%22checkmark%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22slices%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
}

.cm_hero_wrapper.cm_hero_no_image.cm_hero_small_image_mode{
    min-height: 400px;
}
.cm_hero_wrapper.cm_hero_no_image.cm_hero_small_image_mode > .cm_hero_content_wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 50px 0px!important;
}
.cm_hero_img_wrapper_small {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* Mobile Styles */
/* Mobile Styles */
@media screen and (max-width: 768px) {
    .cm_hero_wrapper {
        min-height: auto;
    }
    
    /* Verklein de accent lijn op mobiel */
    .cm_hero_line::before,
    .cm_hero_wrapper::before {
        width: 10px;
        height: calc(100% + 50px);
    }
    
    .cm_hero_wrapper .cm_hero_content_wrapper {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }
    
    .cm_hero_wrapper.cm_hero_no_image.cm_hero_usps > div.cm_hero_content_wrapper {
        grid-template-columns: 1fr;
        padding: 40px 20px !important;
    }
    
    /* Small image mode ook naar 1 kolom */
    .cm_hero_wrapper.cm_hero_no_image.cm_hero_small_image_mode {
        min-height: auto;
    }
    
    .cm_hero_wrapper.cm_hero_no_image.cm_hero_small_image_mode > .cm_hero_content_wrapper {
        grid-template-columns: 1fr;
        padding: 40px 20px !important;
    }
    
    .cm_hero_img_wrapper_small {
        height: 250px;
        margin-top: 20px;
    }
    
    .cm_hero_img_wrapper {
        position: relative;
        width: 100%;
        height: 300px;
        right: auto;
        top: auto;
    }
    
    /* Fix voor de .niks variant */
    .cm_hero_wrapper .cm_hero_img_wrapper.niks {
        position: relative;
        width: 100%;
        height: 250px;
        right: auto;
        top: auto;
    }
    
    .cm_hero_text.cm_hero_image {
        padding-right: 0;
    }
    
    .cm_hero_wrapper .cm_hero_text p,
    .et_pb_text_inner > ul,
    .et_pb_text_inner > p,
    .et_pb_code_inner > p {
        font-size: 16px;
    }
    
    .cm_btn_header > a,
    .cm_btn,
    .cmb_btn,
    .cm_hero_cta {
        font-size: 16px;
        padding: 10px 20px !important;
        text-align: center;
        float: none; /* Reset float voor betere stacking */
        width: 100%;
    }
    
    .cm_hero_wrapper .cm_hero_content_wrapper .cm_hero_text .cm_hero_cta_wrapper {
        flex-direction: column;
        width: 100%;
    }
    
    .cm_hero_usp {
        padding: 15px;
        padding-left: 50px;
    }
    
    .cm_hero_usp::after {
        width: 25px;
        left: 15px;
    }
    
    /* Triangle pattern kleiner op mobiel */
    .cm_hero_triangles_dark::after,
    .cm_hero_wrapper::after {
        height: 80%;
        background-size: 150px auto;
    }
}