:root {
    --mini-site-color: rgb(46 110 174 / 1);
}

h1,h2,h3,h4,h5,h6 {
    @media (max-width: 768px) {
        line-height: 1.2 !important;    
        font-size: 30px !important;
        span,strong {
            font-size: 30px !important;
        }
    }
}

.before\:bg-van_yellow_1::before, .hover\:bg-van_yellow_1:hover, .bg-\[\#F6C212\], .bg-van_yellow_1, .breadcrumbs li:not(:last-child):after, section.page-header h1::before, .text-image-left h2 i::before, .text-image-left h2 em::before, .timeline-slider .timeline .timeline-slide .content .label, .contact-form h2 i::before, .contact-form h2 em::before, .title-text .container h2 i::before, .title-text .container h2 em::before, .text ul li::before, .product-information .container .downloads .buttons a{
    background-color: var(--mini-site-color)!important;
}

.product-detail-intro .info-container .info .suptitle {
    color: var(--mini-site-color) !important;
    text-transform: uppercase;
}

.border-van_yellow_1,.border-van_yellow_2, .form-group.has-value, .outline-btn:hover, .outline-btn:focus, .contact-form.with-link-buttons .social-icons li a:hover, .contact-form.with-link-buttons .social-icons li a:focus, .border-van_yellow_1 {
    border-color: var(--mini-site-color) !important;
}

.before\:border-t-van_yellow_1::before {
    border-top-color: var(--mini-site-color) !important;
}

.hover\:before\:border-r-van_yellow_1:hover::before {
    border-right-color: var(--mini-site-color) !important;
}

.hover\:after\:border-l-van_yellow_1:hover::after {
    border-left-color: var(--mini-site-color) !important;
    border-bottom-color: var(--mini-site-color) !important;
}

.nav_yellow_circle_left_apers_hover_footer::before, .before\:content-circleIcon::before, .md\:hover\:after\:content-yellowArrow:hover::after, .contact-form .cta-contact a img {
    filter: var(--mini-site-filter-color);
}

.outline-btn {
    border: 1px solid rgba(20,20,20,.14);

    svg circle {
        fill: var(--mini-site-color);
    }
}

.cta-contact svg path, .cta-contact svg rect {
    stroke: var(--mini-site-color);
}

.cursor-fancy {
     cursor: url("/assets/templates/images/cursor-blue.svg"), auto; 
}

.product-detail-intro .info-container .info .text .read-more::after {
    background-image: url("/assets/templates/images/Capri 2024/blue-cadek.svg");
    background-repeat: no-repeat;
}

.product-detail-intro .info-container .info .usp-slider span::before {
    background-image: url("/assets/templates/images/Capri 2024/blue-check.svg");
    background-repeat: no-repeat;
    filter: var(--mini-site-filter-color);
}

.recent-projects-overview-new:before {
    content: unset;
}

.page-landing .page-header:before, section.page-header::before {
    background-image: unset;
}

html header, .pagelanding .header {
    z-index: 30;
    position: fixed;
    top: 3.5rem;
    width: 100%;
    
    .hidden {
        display: none!important;
    }
    
    .header-menu-sub-menu:hover ul {
        display: grid !important;
    }
    
    .headerBtn {
        background-color: #fff;
        color: var(--mini-site-color);
        font-size: 18px;
        position: relative;
        
        &:hover {
            span:first-of-type {
                opacity: 1;
            }    
        }
        
        span:first-of-type {
            opacity: 0;
            position: absolute;
            left: 20px;
        }
        
        svg circle {
            fill: var(--mini-site-color);
            fill-opacity: 1;
        }
    }
    
    .menu-container {
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 0 12px rgba(0, 0, 0, .05);
        display: flex;
        justify-content: space-between;
        padding: 15px 18px 15px 30px;
        flex-wrap: wrap;
        background-color: var(--mini-site-color) !important;
        filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.05));
        
        > a {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
    
    ul li a {
        color: #fff;
        position: relative;
        
        &:hover:before {
            --tw-translate-y: 0.75rem;
            opacity: 1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
        }
        
        &:before {
            position: absolute;
            top: 0.5rem;
            left: 0px;
            right: 0px;
            z-index: -10;
            margin-left: auto;
            margin-right: auto;
            height: 0.5rem;
            width: 0.5rem;
            --tw-translate-y: 0px;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            --tw-text-opacity: 1;
            color: #fff;
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
            --tw-content: url(/assets/templates/images/headerImages/circleIcon.svg);
            content: var(--tw-content);
            opacity: 0;
            filter: brightness(0) invert(1);

        }
        &.header_arrow_rotate_link::after {
            filter: brightness(0) invert(1) !important;
        }
        
         &.header_arrow_rotate_link:hover:after {
            transform: rotate(180deg);
         }
        
        &.header_arrow_rotate_link + ul {
            flex-direction: column;
        }
    }
    
    ul li:has(ul) a:before {
        content: unset;
    }
    
    .menu-container nav:has(button) {
        display: none;
        
        @media (max-width: 1240px) {
            display: flex;
        }
        
        a:has(+button) {
            background: #fff!important;
            
            img {
                filter: var(--mini-site-filter-color);
            }
        }
    }
    
    .right-side {
        @media (max-width: 1240px) {
            display: none !important;
        }
    }
    
    .arrow-btn {
        height: 55px;
        margin: auto;
        color: #2D6DAD;
        background: #fff;
        font-size: 1.125rem;
        line-height: 1.1666666667;
        font-weight: 700;
        padding: 17px 30px 17px 47px;
        position: relative;
        border-radius: 12px;
        
        &:before {
            content: "";
            position: absolute;
            background-image: url(/assets/templates/images/svg/icon-angle-right-black.svg);
            width: 8px;
            height: 13px;
            opacity: .15;
            top: 21px;
            left: 31px;
        }
    }
    
    .page-header .center-content h1 {
        max-width: [[*landingTitleWidth]];
    }
    
    .right-side {
        display: flex;
        gap: 30px;
        
        ul:not(.hidden) {
            display: flex;
            gap: 48px;
            align-items: center;
            padding-right: 17px;
            
            li a {
                font-size: 1.125rem;
                line-height: 1.1666666667;
                font-weight: 500;
                position: relative;
            }
        }
        
        .header-menu-sub-menu {
            ul {
                gap: 15px;
                li a {
                    position: relative;
                    color: #000;
                    z-index: 10;
                    display: flex;
                    width: 100%;
                    align-items: center;
                    column-gap: 0.5rem;
                    white-space: nowrap;
                    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
                    padding-top: 0.25rem;
                    padding-bottom: 0.25rem;
                    padding-left: 0.125rem;
                    text-align: center;
                    outline: 2px solid transparent;
                    outline-offset: 2px;
                    transition-property: all;
                    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                    transition-duration: 200ms;
                    
                    &:hover {
                        padding-left: 10px;
                    }
                    
                    &:hover:before {
                        opacity: 1;
                        margin-left: -0.25rem;
                        transform: translate(0, 0);
                        
                    }
                    
                    &:before {
                        position: absolute;
                        top: 0.25rem;
                        left: 0;
                        right: 0;
                        z-index: -10;
                        margin-left: auto;
                        margin-right: auto;
                        height: 0.5rem;
                        width: 0.5rem;
                        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
                        color: #fff;
                        transition-property: transform;
                        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                        transition-duration: 300ms;
                        content: url(/assets/templates/images/headerImages/circleIcon.svg);
                        opacity: 0;
                        filter: var(--mini-site-filter-color);
                    }
                }
            }
        }
    }
}

#menu_content2 {
    .headerBtn {
        background-color: var(--mini-site-color);
        color: #fff;
        font-size: 18px;
        position: relative;
        justify-content: center;
        
        &:hover {
            span:first-of-type {
                opacity: 1;
            }    
        }
        
        span:first-of-type {
            opacity: 0;
            position: absolute;
            left: 20px;
        }
        
        svg circle {
            fill: #000;
            fill-opacity: 1;
        }
    }
}

@media (min-width: 1240px) {
    header .header-menu-sub-menu ul {
        top: 40px !important;
    }
}

header + #menu_content2 {
    padding-top: 5rem;
    
    ul ul{
        column-count: 2;
    }
    
    ul ul li a {
        position: relative;
        color: #fff;
        z-index: 10;
        display: flex;
        width: 100%;
        align-items: center;
        column-gap: 0.5rem;
        white-space: nowrap;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        padding-left: 0.125rem;
        text-align: center;
        outline: 2px solid transparent;
        outline-offset: 2px;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 200ms;
        
        &:hover {
            padding-left: 10px;
        }
        
        &:hover:before {
            opacity: 1;
            margin-left: -0.25rem;
            transform: translate(0, 0);
            
        }
        
        &:before {
            position: absolute;
            top: 0.25rem;
            left: 0;
            right: 0;
            z-index: -10;
            margin-left: auto;
            margin-right: auto;
            height: 0.5rem;
            width: 0.5rem;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
            color: #fff;
            transition-property: transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 300ms;
            content: url(/assets/templates/images/headerImages/circleIcon.svg);
            opacity: 0;
            filter: var(--mini-site-filter-color);
        }
    }
    
    #dropdown-trigger2:has(+ :not(#dropdown-content2.max-h-0)) span img {
        transform: rotate(180deg);
    }
}

.home-product-overview .group {
    @media (min-width: 1120px) {
        width: 512px;
    }
    
    @media (min-width: 565px) and (max-width: 767px) {
        width: 512px;
    }
}

.cta-contact address {
    padding-left: 0;
}

#herosectionSecond h2 {
    max-width: 80%;
    width: 100%;
    
    span {
        font-size: 55px;
    }
}

.product-overview + .contact-form {
    padding-top: 0;
}

.news-overview.episodes {
    .overview .overview-item .image .label {
        background: var(--mini-site-color);
    }
    
    .overview .overview-item .image .arrow-icon {
        /* background: url("/assets/templates/images/Capri 2024/blue-bg-white-arrow.svg"); */
        background: unset;
        
        svg rect {
            fill: var(--mini-site-color);
        }
    }
}

.news-header.episodes .filter-options ul li {
    label:has(input:checked), label.active {
        background-color: var(--mini-site-color);
        border-color: var(--mini-site-color);
    }
}

.afspraak-maken-form.offerte-aanvragen {
    .contact-form.with-link-buttons {
        padding: 0;
    }
    
    .link-buttons {
        width: 80%;
    }
    
    .link-buttons a, .social-icons li a {
        color: #fff;
        border-color: var(--mini-site-color);
    }
    
    .social-icons li a {
        &:hover {
            border-color: var(--mini-site-color);
        }
        img {
            border-radius: 0;
        }
    }

    .step-1 img {
        border-radius: 15px;
    }
}

.group:hover .group-hover\:block {
    display: block!important;
}

footer {
    a.group {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    section.page-header .image-container {
        min-height: 460px;
    }
    
    .page-landing .bottom-content {
        justify-content: end!important;
    }
    
    header.header, .page-landing .header {
        top: 1.5rem;
    }
    
    #herosectionSecond a {
        width: 100%;
    }
    
    #fifthSection {
        padding-bottom: 0;
        
        > div {
            padding-top: 50px;
        }
    }
    
    footer .grid.place-items-center.px-5 > a{
        background: var(--mini-site-color);
        color: #fff;
        opacity: 1;
        width: 100%;
        justify-content: center;
    }
}


.news-overview .overview .overview-item .image .label {
    position: relative;
    top: 0;
    left: 0;
}
.news-overview .overview .overview-item .image .label-wrap {
    position: absolute;
    top: 24px;
    left: 21px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
section.image-slider .cursor {
    background: var(--mini-site-color);
    padding: 2.2rem 1rem;
    border-radius: 20px;
    
    span {
        color: #fff;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 1.2rem;
    }
}