/* lite-yt-embed */
lite-youtube {
background-color: #000;
position: relative;
display: block;
contain: content;
background-position: center center;
background-size: cover;
cursor: pointer;
max-width: 720px;
}
/* gradient */
lite-youtube::before {
content: '';
display: block;
position: absolute;
top: 0;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
background-position: top;
background-repeat: repeat-x;
height: 60px;
padding-bottom: 50px;
width: 100%;
transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}
/* responsive iframe with a 16:9 aspect ratio
thanks https://css-tricks.com/responsive-iframes/
*/
lite-youtube::after {
content: "";
display: block;
padding-bottom: calc(100% / (16 / 9));
}
lite-youtube > iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border: 0;
}
/* play button */
lite-youtube > .lty-playbtn {
display: block;
width: 68px;
height: 48px;
position: absolute;
cursor: pointer;
transform: translate3d(-50%, -50%, 0);
top: 50%;
left: 50%;
z-index: 1;
background-color: transparent;
/* YT's actual play button svg */
background-image: url('data:image/svg+xml;utf8,');
filter: grayscale(100%);
transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
border: none;
}
lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
filter: none;
}
/* Post-click styles */
lite-youtube.lyt-activated {
cursor: unset;
}
lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
opacity: 0;
pointer-events: none;
}
.lyt-visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* swiper-css */
/**
* Swiper 11.2.10
* Trimmed to the modules this theme uses: core, navigation, free-mode, fade, a11y.
* Most modern mobile touch slider and framework with hardware accelerated transitions
* https://swiperjs.com
*
* Copyright 2014-2025 Vladimir Kharlampidi
*
* Released under the MIT License
*
* Released on: June 28, 2025
*/
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}
/* theme-style */
/*
Theme Name: Software Shaker
Author: Softwareshaker
Description: Custom theme for softwareshaker.com. Page, block and shared styles live in /css/ and load only where needed (see inc/enqueue.php).
Version: 1.0
*/
@font-face{font-family:'metropolisbold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-bold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolismedium';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-medium-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolisregular';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-regular-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
@font-face{font-family:'metropolissemi_bold';src:url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff2') format('woff2'),url('https://softwareshaker.com/wp-content/themes/software-shaker/fonts/metropolis-semibold-webfont.woff') format('woff');font-weight:normal;font-style:normal;font-display:swap;}
:root {
--textColor: #353535;
--textColortwo: #848484;
--backgrondColorGray : #f2f2f2;
--backgrondColorRed : #D32020; /* Orginal #FB4545 */
--backgrondColorRedlight : #F38989;
--backgrondColorPink : #FEEFEE;
--backgrondColorBlack : #353535;
--backgroundBody : #fff;
--bodyFont : 16px;
--tableBorder : #E8E8E8;
/* Font roles. css/global/font-inter.css redefines these when Theme Setting > Lettertype is Inter. */
--font-regular : 'metropolisregular';
--font-medium : 'metropolismedium';
--font-semibold : 'metropolissemi_bold';
--font-bold : 'metropolisbold';
--font-weight-regular : normal;
--font-weight-medium : normal;
--font-weight-semibold : normal;
--font-weight-bold : normal;
}
/* ---------- Base ---------- */
* {margin: 0;padding: 0;box-sizing: border-box;}
img {max-width: 100%;height: auto;}
body {background: var(--backgroundBody);font-size:var(--bodyFont);color: var(--textColor);font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
p{margin-bottom: 25px;}
p, li {line-height: 25px;font-size: 16px;}
p:last-child{margin-bottom: 0;}
p a{color:inherit;transition:color .3s ease;}
p a:hover{color:var(--backgrondColorRed);}
a {color: inherit;}
ul, ol {padding-left: 19px;margin-bottom: 25px;}
ul li::marker{color: var(--backgrondColorRed);font-size: 14px;}
html{scroll-behavior: smooth;scroll-padding-top:100px;}
a:focus, .btn:focus, button:focus{outline: none;box-shadow: none;}
input:focus, textarea:focus, select:focus {outline: none;}
input, button, label, textarea, select {font-family: var(--font-regular); font-weight: var(--font-weight-regular);}
/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .h4, .h5, .h6 {margin-bottom: 25px;line-height: 1;font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
h1{font-size:50px;}
h2{font-size:38px;}
h3{font-size:30px;}
h4, .h4{font-size:24px;}
h5, .h5{font-size:20px; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
h6, .h6{font-size:12px;margin-bottom: 0;}
.small_p p{font-size: 13px;line-height: 20px;}
strong{font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
/* Label: pink pill with red text, white on red/dark backgrounds */
.sub_h6 h6, .sub_h6 .h6{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(211,32,32,.1);color:var(--backgrondColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px;}
.hero_section .sub_h6 h6, .hero_section .sub_h6 .h6{background:rgba(255,255,255,.14);color:#fff;}
/* Red line under block titles, centered when the title is centered */
.block_title::after{content:"";display:block;width:56px;height:3px;margin-top:20px;border-radius:2px;background:var(--backgrondColorRed);}
.short_intro_box .block_title::after, .top_title .block_title::after, .intro_section .block_title::after, .cta_section:not(.cta_panel_section) .block_title::after, .video_intro_head .block_title::after, .text-center-all .block_title::after{margin-left:auto;margin-right:auto;}
/* ---------- Layout and Utilities ---------- */
.layout{overflow: clip;}
.wrapper{max-width: 1280px;margin: 0 auto;width: 100%;padding: 0 40px;}
.flex_center{display: flex;justify-content: center;gap: 14px;flex-wrap: wrap;}
.mb-0{margin-bottom: 0 !important;}
.mb-20{margin-bottom: 20px !important;}
.mb-30{margin-bottom: 30px !important;}
.mb-40{margin-bottom: 40px !important;}
.mb-50{margin-bottom: 50px !important;}
.mb-60{margin-bottom: 60px !important;}
.mb-70{margin-bottom: 70px !important;}
.mb-80{margin-bottom: 80px !important;}
.mb-90{margin-bottom: 90px !important;}
.mb-100{margin-bottom: 100px !important;}
.mb-110{margin-bottom: 110px !important;}
.mb-120{margin-bottom: 120px !important;}
.mb-130{margin-bottom: 130px !important;}
.mb-140{margin-bottom: 140px !important;}
.mb-160{margin-bottom: 160px !important;}
.mb-170{margin-bottom: 170px !important;}
.mb-180{margin-bottom: 180px !important;}
.mb-190{margin-bottom: 190px !important;}
.mb-200{margin-bottom: 200px !important;}
/* ---------- Block spacing ----------
Every flexible content block (partial/content-*.php) gets the same vertical
padding and no margin, so two blocks are always 2 x --block-space apart. */
:root{--block-space: 80px;}
.ss_block{padding-top: var(--block-space) !important;padding-bottom: var(--block-space) !important;margin-top: 0 !important;margin-bottom: 0 !important;}
@media only screen and (max-width:1023px){:root{--block-space: 64px;}}
@media only screen and (max-width:600px){:root{--block-space: 48px;}}
/* ---------- Buttons ---------- */
.btn_one{overflow: hidden; text-decoration: none; color: #FFF;font-size: 15px;line-height: 1; font-family: var(--font-medium); font-weight: var(--font-weight-medium);display: inline-flex;cursor: pointer;height: 48px;padding: 0px 24px;border-radius: 5px;border: 1px solid #FFF;}
span.link-effect{position: relative;line-height: inherit;transition: transform .3s;display: flex;align-items: center;}
span.link-effect::before {content: attr(data-hover);height: 100%;position: absolute;top: 100%;width: 100%;font-size: inherit;color: inherit;display: flex;align-items: center;}
.btn_one:hover span.link-effect{-webkit-transform: translateY(-100%);transform: translateY(-100%);}
.btn_one.red{background: var(--backgrondColorRed);border-color: var(--backgrondColorRed);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
.btn_one.black{background: var(--backgrondColorBlack);border-color: var(--backgrondColorBlack);font-family: var(--font-bold);font-weight: var(--font-weight-bold);}
span.arrow {display: inline-block; margin-left: 8px; width: 13px;height: 13px;background: url("data:image/svg+xml;utf8,") no-repeat center center;background-size: contain;position: relative;top: 50%;transform: translateY(-50%);}
button.btn_one{position: relative;}
/* ---------- Header ---------- */
.navigation > ul{opacity:1;transition:opacity .2s ease;}
/* ---------- Hero ---------- */
.hero_section{padding:200px 0 280px;display:flex;align-items:flex-end;min-height:100vh;max-height:900px;background:#000;position:relative;overflow:hidden;}
.hero_section .wrapper{height:100%;display:flex;align-items:flex-end;}
.banner_img{position:absolute!important;left:0;top:0;width:100%;height:100%;opacity:.6;}
.banner_img .swiper-wrapper{height:100%;}
.banner_img .swiper-slide{height:100%;}
.banner_img img{display:block;width:100%;height:100%;object-fit:cover;}
.hero_section .inner_part{position:relative;z-index:2;width:100%;}
.hero_section .sqr_image{content:"";position:absolute;left:-23px;top:-8px;width:33px;height:32px;background:url("data:image/svg+xml;utf8,") no-repeat center center;background-size:contain;}
.hero_section h1, .hero_section p, .hero_section h6, .hero_section .h6{color:#fff;}
.hero_section h6, .hero_section .h6{text-transform:uppercase;}
.hero_section h6 a, .hero_section .h6 a{text-decoration:none;position:relative;}
.hero_section h6 a:hover, .hero_section .h6 a:hover{text-decoration:none;}
.hero_section h6 a::after, .hero_section .h6 a::after{content:"";width:5px;margin:0 8px;display:inline-block;height:10px;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml;utf8,");}
.hero_section .text_wrap{max-width:628px;}
.hero_section p{margin:20px 0 35px;font-size:18px;max-width:491px;}
.hero_section .right_arrow{position:absolute;right:0;bottom:56px;animation:animate 1s;}
.hero_section::after{pointer-events:none;position:absolute;content:"";right:-555px;bottom:-380px;width:1403px;height:1242px;opacity:.84;background:radial-gradient(52.63% 45.31% at 68% 58.21%,var(--backgrondColorRed) 0%,rgba(251,69,69,0) 100%);z-index:1;}
.hero_section .right_arrow svg{width:100%;height:100%;}
.hero_section h1{width:100%;margin:0;}
.hero_section .bottom_icon{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:1;}
.hero_section .bottom_icon svg path{fill:#fff;}
.hero_section .bottom_icon svg{height:45px;width:100%;}
.hero_section.common{height:450px;min-height:450px;max-height:unset;padding:190px 0 120px;}
.hero_section.common .right_arrow{width:430px;bottom:-160px;right:-46px;}
.hero_section.common::after{width:1440px;height:900px;}
.hero_section.common .wrapper{justify-content:center;}
.hero_section.common .text_wrap{margin:0 auto;text-align:center;max-width:1200px;}
/* ---------- Sliders and Cards ---------- */
.short_intro_box{text-align: center;}
.short_intro_box .wrap{max-width: 800px;margin: 0 auto;}
.slider_section{padding: 60px 0 60px;background: var(--backgrondColorGray);position: relative;}
.slider_section .bottom_link{margin-top: 20px;}
.short_intro_box p{line-height: 18px;}
.short_intro_box h2:last-child{margin-bottom: 40px;}
.slider_section .short_intro_box .wrap{max-width: 800px;}
.slider_section .wrapper{position: relative;}
.arrow-right{position: absolute;right: 25px;top: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-left{position: absolute;left: 25px;bottom: 0;width: 507px;height: auto;pointer-events: none;}
.arrow-right img, .arrow-left img {display: block;}
.aos-animate.arrow-right{animation: animate 1s;}
.aos-animate.arrow-left{animation: animateOpp 1s;}
.right_part .arrow-right{z-index:20;}
.bottom_link{display:flex;justify-content:center}
.bottom_link .btn_one{width:auto!important;max-width:max-content;display:inline-flex}
/* ---------- Image and Media ---------- */
.wrapper::before, .wrapper::after, .outer_part::before, .outer_part::after, .arrow-right, .arrow-right *{pointer-events:none!important;}
/* Playing video keeps the 16:9 frame (a fixed height gave a tall black frame on mobile) */
lite-youtube.lyt-activated {
background-image:none !important;
background: inherit;
height:auto;
aspect-ratio:16/9;
}
/* ---------- Benefits ---------- */
.top_title *:last-child{margin-bottom: 0;}
/* ---------- Reviews ---------- */
/* ---------- Pricing ---------- */
.check_list ul{list-style: none;padding-left: 0;}
.check_list li{position: relative;padding-left: 28px;}
.check_list li::before{content: "";position: absolute;left: 0;top: 0;width: 20px;height: 20px;background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.9998 4.8125C19.9998 5.40234 19.7654 5.97266 19.3474 6.39062L8.97632 16.7617C8.10523 17.6328 6.69117 17.6328 5.82007 16.7617L0.652106 11.5977C-0.19555 10.7031 -0.160394 9.29297 0.734137 8.44531C1.59742 7.625 2.94898 7.62891 3.80836 8.44531L7.3982 12.0352L16.1912 3.23828C17.0623 2.36719 18.4763 2.36719 19.3474 3.23828C19.7654 3.65625 19.9998 4.22266 19.9998 4.8125Z' fill='%23FB4545'/%3E%3C/svg%3E");background-repeat: no-repeat;background-size: contain;}
.home h2 + p + ol{list-style:decimal;padding-left:20px;}
.home h2 + p + ol > li{padding-left:0;}
.home h2 + p + ol > li::before{display:none;}
.prijzen {background-color: var(--backgrondColorPink); padding: 80px 0 120px 0;}
/* ---------- Contact ---------- */
.arrow-right.ani_opp{right: unset;left: -40px;top: unset;bottom: 0;}
/* ---------- Functionalities ---------- */
.video-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999999;padding:90px 20px 20px}
.video-popup-inner{position:relative;flex:0 0 auto;width:min(1200px,calc(100vw - 40px),calc((100vh - 130px) * 16 / 9));aspect-ratio:16/9;background:#000;border-radius:8px;overflow:hidden}
.video-popup-inner iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.video-popup-close{position:absolute;top:26px;right:30px;width:56px;height:56px;padding:0;border:0;background:transparent;cursor:pointer;z-index:10;transition:transform .25s ease}
.video-popup-close::before,.video-popup-close::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:3px;background:#fff;border-radius:3px;pointer-events:none;transition:background .25s ease}
.video-popup-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.video-popup-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.video-popup-close:hover{transform:rotate(90deg)}
.video-popup-close:hover::before,.video-popup-close:hover::after{background:var(--backgrondColorRed)}
@media(max-width:767px){.video-popup-overlay{padding:70px 14px 14px}.video-popup-close{top:14px;right:14px;width:42px;height:42px}}
/* ---------- Tabs and Interaction ---------- */
/* ---------- Alignment Utilities ---------- */
.text-center-all{text-align:center;}
.text-center-all *{text-align:inherit;}
.text-center-all .btn_one{margin-left:auto;margin-right:auto;display:inline-block;}
.text-center-all ul, .text-center-all ol {list-style-position:inside;}
.text-center-all ul, .text-center-all ol {padding-left:0;margin:0 auto;display:table;}
.text-center-all li{text-align:left;}
/* ---------- Demo Popup ---------- */
body.popup_open{overflow:hidden;}
/* ---------- Cookie Banner ---------- */
#cookiescript_injected {
position:fixed!important;
bottom:0;
left:0;
width:100%;
z-index:999999;
}
#cookiescript_injected #cookiescript_accept {background-color: #D32020 !important;color: #FFFFFF !important;}
#cookiescript_injected #cookiescript_readmore,#cookiescript_injected a {color: #D32020 !important;}
#cookiescript_injected #cookiescript_link {color: #D32020 !important;}
#cookiescript_injected a#cookiescript_link,#cookiescript_injected a#cookiescript_link span {color: #D32020 !important;}
/* ---------- Compare Table ---------- */
.tabel_scroll {overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 25px;}
.vergelijk_tabel {width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; color: var(--textColor);}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 15px 20px; text-align: left; vertical-align: middle; line-height: 22px; border-bottom: 1px solid var(--tableBorder);}
.vergelijk_tabel thead th {font-family: var(--font-bold); font-weight: var(--font-weight-bold); font-size: 16px; padding-bottom: 13px; border-bottom: 2px solid var(--tableBorder);}
.vergelijk_tabel th:first-child, .vergelijk_tabel td:first-child {width: 32%; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
.vergelijk_tabel td:nth-child(2) {color: var(--textColortwo);}
.vergelijk_tabel th:last-child, .vergelijk_tabel td:last-child {background: var(--backgrondColorPink);}
.vergelijk_tabel thead th:last-child {color: var(--backgrondColorRed); border-bottom-color: var(--backgrondColorPink); border-top-left-radius: 8px; border-top-right-radius: 8px;}
.vergelijk_tabel tbody tr:last-child td {border-bottom: 0;}
.vergelijk_tabel tbody tr:last-child td:last-child {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
/* ---------- Animations ---------- */
@keyframes animate{0%{transform:translateX(100%);}100%{transform:translateX(0);}}
@keyframes animateOpp{0%{transform:translateX(-100%);}100%{transform:translateX(0);}}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* (min-width:1024px) */
@media (min-width:1024px){
.menu-item-has-children>a:hover{color:var(--backgrondColorRed)!important;}
.menu-item-has-children.active>a{background-color:var(--backgroundBody)!important;color:var(--textColor)!important;border-radius:8px 8px 0 0;}
.menu-item-has-children.active>a:hover{color:var(--backgrondColorRed)!important;}
}
/* only screen and (max-width:1279px) */
@media only screen and (max-width:1279px){
.hero_section .right_arrow{max-width: 44vw;}
}
/* only screen and (max-width:1023px) */
@media only screen and (max-width:1023px){
h1{font-size: 40px;}
h2{font-size: 30px;}
h3{font-size: 22px;}
h4, .h4{font-size: 20px;}
h5, .h5{font-size: 16px;line-height: 1.2;}
.wrapper{max-width: 827px;padding: 0 30px;}
.hero_section .text_wrap{max-width: 510px;}
.hero_section {padding: 140px 0 80px;}
.hero_section p{font-size: 16px;}
.hero_section .right_arrow{bottom: 0;}
.hero_section.common::after {width: 1230px;height: 768px;}
.slider_section .arrow-right{max-width: 35vw;}
.arrow-right.ani_opp{max-width: 40vw;}
.slider_section .arrow-left{max-width: 35vw;}
.mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 120px !important;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.scroll_stop{overflow: hidden;}
}
/* (max-width:768px) */
@media (max-width:768px){
.pricing_page { padding-top:0; }
#cookiescript_injected {max-height: 90dvh !important;height: auto !important;overflow-y: auto !important;}
}
/* (max-width:767px) */
@media (max-width:767px){
.vergelijk_tabel {font-size: 14px;}
.vergelijk_tabel th, .vergelijk_tabel td {padding: 12px 14px; line-height: 20px;}
}
/* only screen and (max-width:767px) */
@media only screen and (max-width:767px){
h1{font-size: 30px;}
h2{font-size: 25px;}
.hero_section::after {width: 614px;height: 543px;right: -130px;bottom: -250px;}
.hero_section h1{width: 100%;}
.hero_section.common::after {width: 693px;height: 630px;}
.hero_section.common .text_wrap{max-width: 470px;}
.mb-120, .mb-110, .mb-130, .mb-140, .mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 90px !important;}
}
/* only screen and (max-width:600px) */
@media only screen and (max-width:600px){
h2{font-size: 24px;}
.sub_h6 h6, .sub_h6 .h6{font-size: 10px;}
.block_title::after{width:44px;margin-top:14px;}
.hero_section h1{margin-bottom:0;}
.hero_section h1{width: 100%;overflow-wrap: break-word;word-wrap: break-word;}
.hero_section .text_wrap{max-width: 100%;}
.hero_section p{line-height: 20px;margin-bottom: 28px;}
.btn_one{font-size: 14px;height: 46px;padding: 0px 20px;}
.hero_section .sqr_image{width: 26px;height: 26px;}
span.arrow{width: 11px;height: 11px;margin-left: 5px;}
.hero_section .right_arrow { max-width: 60vw;}
.hero_section.mb-130{margin-bottom: 65px !important;}
p, li {line-height: 20px;font-size: 14px;}
body{font-size: 14px;}
.mb-90, .mb-100, .mb-110, .mb-120, .mb-130, .mb-140 {margin-bottom: 65px !important;}
.mb-160, .mb-170, .mb-180, .mb-190, .mb-200 {margin-bottom: 80px !important;}
.slider_section .bottom_link{margin-top: 45px;}
.slider_section .arrow-right{right: -80px;max-width: 300px;}
.slider_section .arrow-left{left: -80px;max-width: 300px;}
.slider_section{padding: 50px 0 70px;}
h1, h2, h3, h4, h5, h6, p, .h4, .h5, .h6 {margin-bottom: 20px;}
.short_intro_box p br{display: none;}
.small_p p{font-size: 12px;}
.hero_section.common h1{margin-bottom: 20px;}
.hero_section.common::after { width: 504px;height: 546px;}
.short_intro_box.mb-100{margin-bottom: 50px !important;}
.hero_section h6, .hero_section .h6{font-size: 11px;}
.hero_section.common .right_arrow{max-width: 280px;}
.short_intro_box.mb-80{margin-bottom: 50px !important;}
.check_list li::before {width: 15px;height: 15px;}
.hero_section.common h1 br{display: none;}
.hero_section.common .right_arrow {bottom: -95px;right: -93px;}
.hero_section .bottom_icon{width: 45px;z-index: 2;}
.hero_section.common{min-height: calc(100vh - 80px);}
.hero_section.common{min-height: calc(100svh - 80px);align-items: center;}
.hero_section{min-height: calc(100vh - 100px);}
.hero_section{min-height: calc(100svh - 100px);}
.hero_section.common{min-height: 547px;}
}
/* only screen and (max-width:400px) */
@media only screen and (max-width:400px){
h1 {
font-size: 28px;
}
}
/* last */
.desktop_hidden{display: none;}
/* sectoren slider start */
.slider_section .bottom_link{margin-top:45px;}
.slider_section .short_intro_box p{max-width:700px;margin-left:auto;margin-right:auto;}
@media only screen and (max-width:600px){
.slider_section .bottom_link{margin-top:35px;}
}
/* sectoren slider end */
/* ---------- Block background (ACF "Achtergrondkleur" on every block except Select Testimonials) ----------
Standaard keeps the block's own background; Wit / Grijs / Rood override it (software_shaker_block_classes()
adds "ss_bg ss_bg--white|grey|red"). Rood is the light pink of the Voordelen block (--backgrondColorPink).
The extra .ss_bg keeps these rules above the block stylesheets. */
.ss_block.ss_bg.ss_bg--white {background:#fff !important;}
.ss_block.ss_bg.ss_bg--grey {background:var(--backgrondColorGray) !important;}
.ss_block.ss_bg.ss_bg--red {background:var(--backgrondColorPink) !important;}
/* Slider edges fade into the block background */
.ss_block.ss_bg--white .wrapper_large::before {background:linear-gradient(88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--white .wrapper_large::after {background:linear-gradient(-88deg,#fff 28.6%,rgba(255,255,255,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--grey .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorGray) 28.6%,rgba(242,242,242,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::before {background:linear-gradient(88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
.ss_block.ss_bg--red .wrapper_large::after {background:linear-gradient(-88deg,var(--backgrondColorPink) 28.6%,rgba(254,239,238,0) 98.21%);}
/* Rood: the label pill gets a little more contrast on the pink */
.ss_block.ss_bg.ss_bg--red .sub_h6 h6, .ss_block.ss_bg.ss_bg--red .sub_h6 .h6 {background:rgba(211,32,32,.14);}
/* theme-shared-video-wrapper */
/* =============================================================================
shared/video-wrapper.css
Extracted from style.css. Loaded only on: block software_grid, block text_and_image
============================================================================= */
.video_wrapper_full {border-radius: 5px;}
.video_wrapper_full video, .video_wrapper_full iframe {aspect-ratio: 600/380;position: absolute;left: 0;top: 0;width: 100%;height: auto;object-fit: cover;z-index: -1;opacity: 0;visibility: hidden;pointer-events: none;}
.video_wrapper_full.videoWrapperActive video, .video_wrapper_full.videoWrapperActive iframe {z-index: 1;opacity: 1;visibility: visible;pointer-events: all;}
.video_wrapper_full, .video_wrapper_full * {pointer-events:auto;}
.video_wrapper_full {position:relative;z-index:6;}
.video_wrapper_full iframe {border-radius:5px!important;}
.two_card_grid .video_wrapper_full video, .two_card_grid .video_wrapper_full iframe {aspect-ratio: 590/346;}
/* theme-pages-front-page */
/* =============================================================================
pages/front-page.css
Extracted from style.css. Loaded only on: front-page.php
============================================================================= */
.btn_flex {display: flex;flex-wrap: wrap;gap: 13px;}
.heroSlider:not(.swiper-initialized) .swiper-slide:not(:first-child) {display:none;}
.hero_heading__subtitle-row {color:#fff;}
.hero_heading {width:100%;}
.hero_heading__title {position:relative;margin:0;}
.hero_heading__subtitle-row {display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:0;margin:0;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:50px;line-height:1;}
.hero_heading__subtitle {display:block;width:100%;min-height:1em;color:inherit;font-family:inherit;font-size:inherit;line-height:1;}
.hero_heading__subtitle-row .swiper_nav {position:relative;display:block;width:100%;height:1.08em;min-height:1.08em;margin:0;overflow:hidden;}
.hero_heading__subtitle-row .swiper_nav .swiper-wrapper {height:100%!important;}
.hero_heading__subtitle-row .swiper_nav .swiper-slide {display:flex;align-items:flex-start;width:100%;height:100%!important;color:inherit;font-family:inherit;font-size:inherit;line-height:1;}
.hero_heading__subtitle-row .swiper_nav i {display:block;padding-right:5px;color:inherit;font-family:inherit;font-size:inherit;line-height:1;font-style:italic;white-space:nowrap;}
.hero_heading__subtitle-row .swiper_nav:not(.swiper-initialized) .swiper-slide {display:none;}
.hero_heading__subtitle-row .swiper_nav:not(.swiper-initialized) .swiper-slide:first-child {display:flex;}
.hero_bottom {width:100%;margin-top:56px;}
.hero_section .hero_bottom p {margin-bottom:2px;font-size:12px;}
.hero_bottom .images_box {display:flex;align-items:center;flex-wrap:wrap;gap:20px;}
.hero_section.common .btn_flex {justify-content:center;}
@media (min-width:1024px) {
.hero_heading {width:calc(100% + 250px);}
}
@media only screen and (max-width:1023px) {
.hero_heading__subtitle-row {font-size:40px;}
}
/* Tablet and desktop: two lines, the title and "Onder andere voor" + the rotating word next to it.
The widest line ("Onder andere voor betonboring & zagen") is about 21em in Inter bold, so the
heading scales down to fit. */
@media (min-width:601px) {
.hero_heading__title {white-space:nowrap;}
.hero_heading__title, .hero_heading__subtitle-row {font-size:min(40px, calc((100vw - 60px) / 21.5));}
.hero_heading {width:max-content;max-width:none;} /* as wide as its lines (was a fixed width, which cut off the word) */
.hero_heading__subtitle-row {flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:0 .25em;width:auto;}
.hero_heading__subtitle {flex:none;width:auto;}
.hero_heading__subtitle-row .swiper_nav {flex:none;width:max-content;min-width:0;} /* width of the longest word */
}
@media (min-width:1024px) {
.hero_heading__title, .hero_heading__subtitle-row {font-size:min(50px, calc((100vw - 80px) / 21.5));}
}
@media only screen and (max-width:600px) {
/* The rotating word does not wrap: the heading scales with the screen so the longest one
("betonboring & zagen", about 11em wide in Inter bold italic) always fits; 30px from ~405px wide */
.hero_heading__title, .hero_heading__subtitle-row {font-size:min(30px, calc((100vw - 60px) / 11.5));}
.hero_heading__subtitle-row {flex-wrap:wrap;gap:0 .2em;}
.hero_section .hero_bottom p {text-align: center;line-height: 25px;margin-bottom: 15px;}
.btn_flex {gap: 10px;}
}
/* theme-header */
/* =============================================================================
Global: global/header.css
Extracted from style.css. Loaded on every page.
============================================================================= */
.menubar {display: none;}
.header {padding:30px 0;position:fixed;left:0;top:0;width:100%;z-index:10;background:transparent;transition:.4s;}
.header.sticky {background:radial-gradient(45% 220% at 100% 0%, #430e0d 0%, rgba(67,14,13,0) 100%), linear-gradient(180deg, #290b09 0%, #1f0706 100%);box-shadow:0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25);padding:10px 0;transform:none;transition:.4s;} /* same dark red as the footer */
.header ul {padding-left:0;margin-bottom:0;list-style:none;}
.header .wrapper {max-width:1440px;position:relative;}
.header .header_inner {display:flex;justify-content:space-between;gap:20px;align-items:center;}
.header .logo {width:210px;}
.header .right_part {width:calc(100% - 230px);display:flex;justify-content:flex-end;flex-wrap:nowrap;align-items:center;} /* menu and buttons always on one line (see the breakpoints below) */
.header .navigation {margin:0 auto;}
.header .navigation>ul {display:flex;flex-wrap:nowrap;}
.header .navigation>ul>li {display:inline-block;}
.header .navigation a {text-decoration:none;font-size:13px;font-family:var(--font-medium);font-weight:var(--font-weight-medium);}
.header .navigation>ul>li>a {text-transform:uppercase;color:#fff;padding:14px 16px;position:relative;z-index:1;}
.header .navigation>ul>li:has(ul):hover>a, .header .navigation>ul>li.active:has(ul)>a {background:#fff;color:var(--textColor);border-top-left-radius:8px;border-top-right-radius:8px;}
.header .navigation>ul>li:has(ul):hover>a::after, .header .navigation>ul>li.active:has(ul)>a::after {content:"";position:absolute;left:0;right:0;top:calc(100% - 1px);height:12px;background:#fff;} /* white bridge from the tab to the panel: no strip in between, and the menu stays open while moving down. .active: js/global.js keeps a menu open after the mouse leaves */
/* Caret after menu items with a dropdown, turned up while it is open. All top-level links are
inline-flex so the items with and without a caret stay on one line; ::after is the white bridge,
so the caret is ::before with order:2 (after the text). */
.header .navigation>ul>li>a {display:inline-flex;align-items:center;}
.header .navigation>ul>li.menu-item-has-children>a {gap:6px;}
.header .navigation>ul>li.menu-item-has-children>a::before {content:"";order:2;flex:none;width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu-item-has-children:hover>a::before, .header .navigation>ul>li.menu-item-has-children.active>a::before {transform:rotate(180deg);}
.header .navigation>ul>li:not(:has(ul)):hover>a {color:var(--backgrondColorRed);}
.header .btn_box {flex:none;margin-left:20px;display:flex;align-items:center;gap:8px;}
.header .navigation>ul>li:not(.mega-menu) {position:relative;}
.header .navigation li:not(.mega-menu) .sub-menu {position:absolute;left:50%;top:100%;background:#fff;display:block;padding:18px;border-radius:5px;transform:translateX(-50%);opacity:0;visibility:hidden;pointer-events:none;min-width:max-content;}
.header .navigation li:not(.mega-menu):hover .sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation .sub-menu li {display:block;line-height:1;}
.header .navigation li:not(.mega-menu) .sub-menu a, .header .navigation li.mega-menu li ul li a {font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li:not(.mega-menu) .sub-menu a:hover {color:var(--backgrondColorRed);}
.header .navigation li:not(.mega-menu) .sub-menu li:not(:last-child) {margin-bottom:5px;}
.header .navigation li.mega-menu .sub-menu {opacity:0;visibility:hidden;pointer-events:none;position:absolute;left:50%;transform:translateX(-50%);top:48px;width:max-content;max-width:1200px;background:#fff;border-radius:5px;display:block;padding:29px 24px;filter:drop-shadow(0 0 4.2px rgba(0,0,0,.25));}
.header .navigation li.mega-menu:hover>.sub-menu, .header .navigation li.mega-menu.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.mega-menu .sub-menu .sub-menu {opacity:1!important;visibility:visible!important;display:block!important;filter:none;}
.header .navigation li.mega-menu li ul {position:relative!important;left:unset!important;top:unset!important;transform:unset!important;padding:0!important;}
.header .navigation li.mega-menu li ul li {display:block;width:100%;}
.header .navigation li.mega-menu .sub-menu a {color:var(--textColor);}
.header .navigation li.mega-menu>ul {display:grid!important;grid-template-columns:repeat(auto-fit,250px);gap:45px;justify-content:start;width:max-content;}
.header .navigation li.mega-menu>ul>ul {display:contents;}
.header .navigation li.mega-menu li .menu-icon {max-width:28px;max-height:24px;}
.header .navigation li.mega-menu>ul>li>a+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li>a[href="#"], .header .navigation li>a[href=""], .header .navigation li>a:not([href]) {pointer-events:none;cursor:default;}
.header .navigation li.mega-menu>ul>li>a[href="#"], .header .navigation li.mega-menu>ul>li>a[href=""], .header .navigation li.mega-menu>ul>li>a:not([href]) {background-image:none!important;border-bottom:none;padding-bottom:0;}
.header .navigation>ul>li.menu-item-has-children>.sub-menu {opacity:0;visibility:hidden;pointer-events:none;}
.header .navigation>ul>li.menu-item-has-children.active>.sub-menu {opacity:1;visibility:visible;pointer-events:all;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width):not([class*="menu-button"])>a:first-of-type {position:relative;display:block;font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);padding-bottom:9px;margin-bottom:14px;border-bottom:1px solid var(--backgrondColorGray);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type+.menu-item-description {display:block;font-size:11px;color:var(--textColor);margin-top:6px;line-height:1.5;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""])::after {content:"Lees meer >";position:absolute;right:0;top:1px;font-size:12px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:var(--textColor);white-space:nowrap;}
.header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:not([href="#"]):not([href=""]):hover, .header .navigation li.menu_leesmeer>ul>li:not(.full_width)>a:first-of-type[href]:not([href="#"]):not([href=""]):hover::after {color:var(--backgrondColorRed);}
/* Software menu (menu item class "menu_products"): compact panel right under the tab, in 2 columns;
every product has a dot, a bold title and a short description, and is clickable as a whole with a
grey background on hover. Menu item class "dot-dark" gives a dark dot (other brand). */
.header .navigation>ul>li.menu_products>.sub-menu {left:auto;top:48px;transform:none;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation li.menu_products>ul {grid-template-columns:repeat(2,minmax(0,250px));gap:4px;}
.header .navigation li.menu_products>ul>li {position:relative;padding:12px 16px 12px 36px;border-radius:10px;transition:background-color .2s ease;}
.header .navigation li.menu_products>ul>li::before {content:"";position:absolute;left:16px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--backgrondColorRed);}
.header .navigation li.menu_products>ul>li.dot-dark::before {background:var(--textColor);}
.header .navigation li.menu_products>ul>li:hover {background:var(--backgrondColorGray);}
.header .navigation li.menu_products>ul>li>a:first-of-type {display:block;font-size:14px;line-height:1.3;font-family:var(--font-bold);font-weight:var(--font-weight-bold);color:var(--textColor);}
.header .navigation li.menu_products>ul>li>a:first-of-type::after {content:"";position:absolute;inset:0;border-radius:10px;}
.header .navigation li.menu_products>ul>li>a+.menu-item-description {display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:#6b6b6b;font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2, .header .navigation li.mega-menu>ul>li.menu-button-pos3, .header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-row:3;justify-self:left;width:max-content;border-top:none;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2 {grid-column:2;}
.header .navigation li.mega-menu>ul>li.menu-button-pos3 {grid-column:3;}
.header .navigation li.mega-menu>ul>li.menu-button-pos4 {grid-column:1/-1;}
.header .navigation li.mega-menu>ul>li.menu-button-pos2>a, .header .navigation li.mega-menu>ul>li.menu-button-pos3>a, .header .navigation li.mega-menu>ul>li.menu-button-pos4>a {display:inline-flex;width:max-content;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a {color:var(--textColor);padding:12px 20px 12px 0;border-radius:8px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);text-decoration:none;background-repeat:no-repeat;background-size:11px;background-position:right center;}
.header .navigation li.mega-menu>.sub-menu>li[class*="menu-button"]>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {font-size:14px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--backgrondColorGray);margin-bottom:14px;background-repeat:no-repeat;background-size:11px;background-position:right calc(50% - 3px);}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width {width:100%;display:flex;justify-content:center;border-top:1px solid var(--backgrondColorGray);padding-top:20px;align-items:center;}
.header .navigation li.mega-menu>ul>li.full_width>a {display:inline-flex;align-items:center;gap:10px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);}
.header .navigation li.mega-menu>ul>li.full_width>a:hover {color:var(--backgrondColorRed);}
.header .navigation li.mega-menu>ul>li.full_width li {display:inline-block;width:auto;margin-bottom:0!important;}
.header .navigation li.mega-menu>ul>li.full_width ul {width:auto;}
.header .navigation li.mega-menu>ul>li.full_width ul li a {position:relative;margin-left:32px;}
.header .navigation li.mega-menu>ul>li.full_width ul li a::before {content:"";width:1px;height:26px;position:absolute;left:-16px;top:50%;transform:translateY(-50%);background:var(--backgrondColorGray);}
/* Functies menu (menu item class "menu_arrow"): groups in 4 columns, every function a link with the
same grey hover as the Software menu; under a line the two "Bekijk alle ..." links next to each
other with a small divider. After the general mega-menu rules above, so these win. */
.header .navigation li.menu_arrow>.sub-menu {width:min(1120px, calc(100vw - 48px));max-width:none;padding:24px 28px 14px;border-radius:14px;}
.header .navigation li.menu_arrow>ul {grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 36px;}
.header .navigation li.menu_arrow>ul>li:not(.full_width):not([class*="menu-button"])>a {padding-bottom:8px;margin-bottom:6px;border-bottom-color:#EEEEEE;}
.header .navigation li.menu_arrow .sub-menu .sub-menu li:not(:last-child) {margin-bottom:0;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a {display:block;margin:0 -10px;padding:3px 10px;border-radius:7px;font-size:13px;line-height:1.35;color:#4a4a4a;transition:background-color .2s ease,color .2s ease;}
.header .navigation li.menu_arrow .sub-menu .sub-menu a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>ul::after {content:"";grid-row:3;grid-column:1/-1;align-self:start;border-top:1px solid #EEEEEE;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2, .header .navigation li.menu_arrow>ul>li.menu-button-pos3 {grid-row:3;width:max-content;padding-top:10px;border-top:none;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos2 {grid-column:1/3;justify-self:end;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3 {position:relative;grid-column:3/5;justify-self:start;}
.header .navigation li.menu_arrow>ul>li.menu-button-pos3::before {content:"";position:absolute;left:-18px;top:calc(10px + 50% - 14px);width:1px;height:18px;background:#E5E5E5;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a {display:inline-flex;align-items:center;gap:8px;margin:0 -10px;padding:6px 10px;border-radius:7px;font-size:13px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);background-image:none;transition:background-color .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation li.menu_arrow>.sub-menu>li[class*="menu-button"]>a:hover::after {transform:translateX(3px);}
/* Sectoren menu (menu item class "menu_sectors"): 2 columns right under the tab, grey hover like the
other menus, and "Alle sectoren" (menu item class "menu_all") under a line. */
.header .navigation>ul>li.menu_sectors>.sub-menu {display:grid;grid-template-columns:repeat(2,220px);gap:2px 6px;left:auto;top:48px;transform:none;width:max-content;min-width:0;padding:12px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a {display:block;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;transition:background-color .2s ease,color .2s ease;} /* same font as the Functies links */
.header .navigation>ul>li.menu_sectors>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all {grid-column:1/-1;margin-top:6px!important;padding-top:6px;border-top:1px solid #EEEEEE;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a {display:inline-flex;align-items:center;gap:8px;padding:6px 12px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);} /* like "Bekijk alle functionaliteiten" */
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a::after {content:"";flex:none;width:12px;height:12px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover {color:var(--textColor);}
.header .navigation>ul>li.menu_sectors>.sub-menu>li.menu_all>a:hover::after {transform:translateX(3px);}
/* Overig menu (menu item class "menu_more"): one column, same font and grey hover as Sectoren;
menu item class "menu_external" adds the ↗ icon (a link to another site, opens in a new tab). */
.header .navigation>ul>li.menu_more>.sub-menu {display:grid;grid-template-columns:minmax(240px,max-content);gap:2px;width:max-content;min-width:0;padding:10px;border-radius:0 14px 14px 14px;}
.header .navigation>ul>li.menu_more>.sub-menu>li {margin:0!important;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:7px 12px;border-radius:8px;font-size:13px;line-height:1.35;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:#4a4a4a;white-space:nowrap;transition:background-color .2s ease,color .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li>a:hover {background:var(--backgrondColorGray);color:var(--textColor);}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a::after {content:"";flex:none;width:11px;height:11px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .2s ease;}
.header .navigation>ul>li.menu_more>.sub-menu>li.menu_external>a:hover::after {transform:translate(2px,-2px);}
/* Every dropdown opens at the same height as the mega menus (48px / 41px from the top of the header
row, the tab's white bridge covers the gap). left:auto keeps a panel at the left edge of its own tab. */
.header .navigation>ul>li:not(.mega-menu) {position:static;}
.header .navigation>ul>li:not(.mega-menu):not(.menu_sectors):not(.menu_more)>.sub-menu {left:auto;top:48px;transform:none;border-radius:0 10px 10px 10px;}
.header .navigation>ul>li.menu_more>.sub-menu {left:auto;top:48px;transform:none;}
@media only screen and (max-width:1279px) {
.header .navigation>ul>li:not(.mega-menu)>.sub-menu, .header .navigation>ul>li.menu_products>.sub-menu {top:41px;}
}
/* Inloggen dropdown in the header (replaces the School button, markup in header.php). Its links come
from the menu item with class "menu_login". Opens on hover, keyboard focus and tap (js/global.js). */
.header .navigation li.menu_login {display:none;} /* shown as the Inloggen button next to Demo aanvragen; the mobile menu keeps it */
.header .login_menu {position:relative;}
.header .login_menu__toggle {align-items:center;gap:8px;background:transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;}
.header .login_menu__chevron {display:block;flex:none;transition:transform .2s ease;}
.header .login_menu:hover .login_menu__toggle, .header .login_menu:focus-within .login_menu__toggle, .header .login_menu.open .login_menu__toggle {background:#fff;border-color:#fff;color:var(--backgrondColorRed);}
.header .login_menu:hover .login_menu__chevron, .header .login_menu:focus-within .login_menu__chevron, .header .login_menu.open .login_menu__chevron {transform:rotate(180deg);}
.header .login_menu__list {position:absolute;top:calc(100% + 8px);left:50%;z-index:20;min-width:220px;margin:0;padding:8px;list-style:none;background:#fff;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease,visibility .2s;}
.header .login_menu__list::before {content:"";position:absolute;left:0;right:0;top:-8px;height:8px;} /* keeps the hover while moving down to the list */
.header .login_menu:hover .login_menu__list, .header .login_menu:focus-within .login_menu__list, .header .login_menu.open .login_menu__list {opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);}
.header .login_menu__list li {display:block;margin:0;}
.header .login_menu__list a {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.3;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);color:var(--textColor);text-decoration:none;white-space:nowrap;transition:background-color .2s ease;}
.header .login_menu__list a svg {display:block;flex:none;color:var(--textColor);transition:transform .2s ease,color .2s ease;}
.header .login_menu__list a:hover, .header .login_menu__list a:focus-visible {background:var(--backgrondColorGray);outline:none;}
.header .login_menu__list a:hover svg {color:var(--backgrondColorRed);transform:translate(2px,-2px);}
.mobile_menu_slide {display:none;}
#menu .menu-item-description {pointer-events:auto!important;cursor:pointer!important;position:relative;z-index:9999}
/* 1200-1399: menu + Inloggen + Demo aanvragen don't fit at full size, so a bit more compact */
@media only screen and (max-width:1399px) {
.header .logo {width:170px;}
.header .right_part {width:calc(100% - 190px);}
.header .navigation>ul>li>a {padding:14px 10px;white-space:nowrap;}
.header .navigation a {font-size:12px;}
.header .btn_box {margin-left:12px;}
.header .btn_one {font-size:13px;padding:0 14px;height:44px;}
}
@media only screen and (max-width:1279px) {
.header {padding: 25px 0;}
.header .logo {width: 140px;}
.header .right_part {width: calc(100% - 140px);}
.header .wrapper {padding: 0 20px;}
.header .navigation > ul > li > a {padding: 12px 10px;}
.header .btn_box {margin-left: 0;}
.header .btn_one {font-size: 13px;padding: 0 14px;height: 44px;}
.header .navigation a {font-size: 12px;}
.header .navigation li.mega-menu .sub-menu {top: 41px;max-width: 1000px;}
}
/* Hamburger menu (mobile_menu_slide) below 1200: the full menu doesn't fit next to the buttons */
@media only screen and (max-width:1199px) {
.header .wrapper {max-width: 100%;padding: 0 20px;}
.header .navigation {display: none;}
.header .logo {width: 180px;}
.header .right_part {width: calc(100% - 180px);}
.menubar {width: 40px;height: 40px;border-radius: 4px;background: var(--backgrondColorRed);padding: 12px 10px;display: flex;justify-content: center;flex-direction: column;gap: 5px;}
.menubar span {display: block;width: 100%;height: 1px;background: #fff;}
.header .header_inner {gap: 8px;}
.mobile_menu_slide {overflow: auto; color: #fff; opacity:0;visibility:hidden;pointer-events:none;transition:0.4s;padding:30px 0 50px;z-index:11;position:fixed;left:0;top:0;width:100%;height:100%;display:block;background:var(--backgrondColorRed)}
.mobile_menu_slide.show {opacity: 1;visibility: visible;pointer-events: all;}
.mobile_menu_slide ul {margin-bottom:0;padding-left:0;list-style:none;display:unset}
.mobile_menu_slide .outer_part>ul>li>a {padding:15px 0;display:block;font-size: 20px;font-family: var(--font-medium);font-weight: var(--font-weight-medium);text-transform: uppercase;}
.mobile_menu_slide svg path {fill: #fff;}
.mobile_menu_slide .menu-track-trace svg path {fill: transparent;stroke: #fff;}
.mobile_menu_slide a {text-decoration: none;}
.mobile_menu_slide .outer_part>ul>li {border-bottom:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li:first-child {border-top:1px solid rgba(255, 255, 255, 0.3);}
.mobile_menu_slide .outer_part>ul>li.mega-menu>ul {padding-top: 15px;}
.mobile_menu_slide .outer_part>ul>li>ul {padding-left: 22px;display: block;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a:not(.menu-item-description) {display:flex;align-items:center;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);gap:8px;margin-bottom:12px;font-size:18px;}
.mobile_menu_slide .outer_part>ul>li>ul>li>a {display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:14px;}
.mobile_menu_slide .menu-item-description {font-family:var(--font-regular)!important;font-weight:var(--font-weight-regular)!important;font-size:16px;line-height:1.6;display:block;margin-top:-6px;}
.mobile_menu_slide .outer_part .menu-icon {height: 24px;}
.mobile_menu_slide .outer_part li li li a {font-size: 16px;line-height: 32px;}
.mobile_menu_slide .outer_part li li ul {margin-bottom: 20px;display: block;}
.mobile_menu_slide .outer_part li li.full_width {margin-left: -22px;width: calc(100% + 22px);}
.mobile_menu_slide li {position:relative}
.mobile_menu_slide li .arrow {background:url('data:image/svg+xml;utf8,') no-repeat center center;width:50px;height:55px;position:absolute;right:0;top:0;transform:rotate(0);transition:0.4s;cursor:pointer;background-size: 16px;}
.mobile_menu_slide .outer_part li li .arrow {display: none !important;}
.mobile_menu_slide .outer_part li li ul {display: block !important;}
.mobile_menu_slide .cross_icon {width: 100%;text-align: right;margin-bottom: 40px;cursor: pointer;position: sticky;top: 0;z-index: 2;}
.mobile_menu_slide .wrapper {max-width: 100%;padding: 0 20px;}
.menubar {cursor: pointer;}
.mobile_menu_slide li .arrow.open {transform: rotate(180deg);}
}
@media (max-width:767px) {
.mobile_menu_slide .menu-item-description {display:block;padding-bottom:24px;}
}
@media only screen and (max-width:600px) {
.header .right_part {display: none;}
.header .logo {width: 175px;}
.header {padding: 20px 0;}
}
/* content-text-and-image */
/* =============================================================================
Block: text_and_image (partial/content-text_and_image.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.text_image_section .outer_part {display: flex;flex-wrap: wrap;align-items: flex-start;justify-content: space-around;}
.text_image_section .outer_part.flex_center {align-items: center;}
.text_image_section .left_part {width: 50%;padding-right: 20px;max-width: 570px;position: relative;z-index: 1;}
.text_image_section .left_part p {margin-bottom: 22px;}
.text_image_section .right_part {width: 50%;position: sticky;top: 20px;transition: 0.4s !important;}
.scroll_top .text_image_section .right_part {top: 90px;}
.text_image_section .right_part img {display: block;border-radius: 5px;}
.text_image_section h6, .text_image_section .h6 {margin-bottom: 8px;}
.text_image_section h2 {margin-bottom: 22px;}
.text_image_section + div {position: relative;z-index: 2;}
.text_image_section.opposite .left_part {order: 2;padding-right: 0;padding-left: 20px;margin-left: auto;}
.text_image_section .flex_center {gap: 0;}
.text_image_section .laptop_icon {position: absolute;right: 0;bottom: -35px;width: 50%;max-width: 329px;z-index: 1;}
.videoWrapperActive .laptop_icon, .videoWrapperActive .mobile_icon {opacity: 0;pointer-events: none;visibility: hidden;}
.text_image_section .mobile_icon {position: absolute;right: 30px;bottom: -12%;width: 25%;max-width: 145px;z-index: 1;}
.media_image {width:100%;height:100%;display:block;z-index:1;}
.media_video {position:relative;height:100%;z-index:7;}
.media_video iframe, .media_video video {height:400px;display:block;position:relative;z-index:8;pointer-events:auto;}
.video_wrapper_full .media_video video {width:100%;height:100%;object-fit:cover;border-radius:10px;z-index:5;}
.video_wrapper_full .media_video, .video_wrapper_full .media_video video, .video_wrapper_full .media_video iframe {opacity:1!important;visibility:visible!important;pointer-events:auto!important;}
.right_part.video_wrapper_full .image_box {z-index:15;}
.right_part .media_video iframe {opacity:1!important;visibility:visible!important;}
.text_image_section::before, .text_image_section::after, .mobile_icon, .mobile_icon * {pointer-events:none!important;}
.media_video iframe, .media_video video {width:100%;height:100%;}
.right_part .image_box {height:unset;}
.media_video {width:100%;}
.media_video lite-youtube {display:block;
width:100%;
aspect-ratio:16/9;
position:relative;}
.media_video lite-youtube iframe {width:100%;
height:100%;
border:0;}
.image_box {display:flex;justify-content:center;align-items:center;}
.media_image {text-align:center;}
.media_image img {display:block;margin:0 auto;}
.text_image_section h3 {font-size: 18px; margin-bottom: 8px;}
.gif-centered {display:block;margin-left:auto;margin-right:auto}
/* Image (or video) with a light red block behind the bottom corner on the text side */
.text_image_section .media_frame {position:relative;isolation:isolate;display:block;width:fit-content;max-width:100%;margin:0 auto;}
.text_image_section .right_part .media_frame > img {margin:0;border-radius:14px;}
.text_image_section .media_frame::before, .text_image_section .media_video::before {content:"";position:absolute;z-index:-1;left:-20px;bottom:-20px;width:calc(60% + 20px);height:calc(60% + 20px);border-radius:16px;background:#F9DFDF;pointer-events:none;}
.text_image_section.opposite .media_frame::before, .text_image_section.opposite .media_video::before {left:auto;right:-20px;}
.text_image_section .media_video lite-youtube, .text_image_section .media_video video {overflow:hidden;border-radius:14px;}
@media (min-width:1024px) {
.video_wrapper_full .image_box {padding-top:0;}
.text_image_section .video_wrapper_full .image_box {position:relative;width:100%;min-height:0px;}
.text_image_section .right_part.video_wrapper_full {position:sticky;top:120px;align-self:flex-start;}
}
@media only screen and (max-width:1279px) {
.text_image_section .left_part {padding-right: 20px;}
.text_image_section.opposite .left_part {padding-left: 20px;}
}
@media (max-width:1024px) {
.text_image_section .video_wrapper_full .image_box {position:relative;width:100%;min-height:0px;}
}
@media only screen and (max-width:1023px) {
.text_image_section .left_part {width: 100%;padding-right: 0;max-width: 100%;order: 2;}
.text_image_section .right_part {width: 100% ; padding-left: 0;margin-bottom: 40px;}
.text_image_section .right_part {position: relative;top: 0 !important;}
.text_image_section .right_part img {max-height: 400px;}
.text_image_section .right_part .media_image img {width: auto;}
.text_image_section.opposite .left_part {padding-left: 0;}
.text_image_section.mobile_opp .right_part {order: 2 !important;margin-bottom: 0;margin-top: 40px;}
.text_image_section.mobile_opp .left_part {order: 1 !important;}
}
@media only screen and (max-width:767px) {
.text_image_section .laptop_icon {max-width: 250px;}
.text_image_section .left_part {order:1 !important;}
.text_image_section .right_part {order:2 !important;margin-top:40px;margin-bottom:0;}
}
@media only screen and (max-width:600px) {
.text_image_section .right_part {margin-bottom: 26px;}
.text_image_section.mobile_opp .right_part {margin-top: 40px;}
.text_image_section .laptop_icon {width: 50%;}
.text_image_section .laptop_icon {bottom: -16px;}
.text_image_section .media_frame::before, .text_image_section .media_video::before {left:-12px;bottom:-12px;width:calc(60% + 12px);height:calc(60% + 12px);border-radius:12px;}
.text_image_section.opposite .media_frame::before, .text_image_section.opposite .media_video::before {left:auto;right:-12px;}
}
/* Desktop: two equal columns with a fixed gap; image and text start at the same height */
@media(min-width:1024px) {
.text_image_section .outer_part {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;align-items:start;}
.text_image_section .outer_part.flex_center {align-items:center;}
.text_image_section .left_part, .text_image_section.opposite .left_part {width:auto;max-width:none;margin:0;padding:0;}
.text_image_section .right_part {width:auto;}
.text_image_section .outer_part .right_part {margin-top:var(--image-offset, 0px);margin-bottom:var(--image-offset, 0px);} /* same space above and below, also where the sticky image stops (with "centreren" on too) */
}
@media (min-width:1024px) and (max-width:1279px) {
.text_image_section .outer_part {column-gap:64px;}
}
/* =============================================================================
Text + image with accordion items: cards (partial/text-image-cards.php)
Intro on top (title left, text right), then the first item as a large card
(dark head + block image/video) with the other items as small cards next to it.
============================================================================= */
/* Eyebrow above the title; the intro text starts on the same line as the title */
.text_image_cards .ti_cards_head {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:96px;align-items:start;margin-bottom:48px;}
.text_image_cards .ti_cards_head_title {display:contents;}
.text_image_cards .ti_cards_head h6, .text_image_cards .ti_cards_head .h6 {grid-column:1;grid-row:1;justify-self:start;margin-bottom:14px;}
.text_image_cards .ti_cards_head h2 {grid-column:1;grid-row:2;margin-bottom:0;}
.text_image_cards .ti_cards_head_text {grid-column:2;grid-row:2;}
.text_image_cards .ti_cards_head_text {font-size:16px;line-height:1.65;color:#5f5f5f;}
.text_image_cards .ti_cards_head_text p {margin:0 0 16px;}
.text_image_cards .ti_cards_head_text > :last-child {margin-bottom:0;}
.text_image_cards .ti_cards_head_text .btn_one {margin-top:8px;}
.text_image_cards .ti_cards_head--solo {grid-template-columns:minmax(0,1fr);} /* no text next to the title: the title may run wider */
.text_image_cards .ti_cards_head--solo h2 {max-width:860px;}
.text_image_cards .ti_cards {--small:3;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-auto-rows:1fr;gap:16px;}
.text_image_cards .ti_card {position:relative;display:flex;align-items:flex-start;gap:16px;min-width:0;padding:24px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:box-shadow .3s ease,transform .3s ease;}
.text_image_cards .ti_card--link:hover {box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px);}
.text_image_cards .ti_card--link:has(.ti_card_title a:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.text_image_cards .ti_card_body {flex:1;min-width:0;}
.text_image_cards h3.ti_card_title {margin:0 0 8px;font-size:17px;line-height:1.3;color:var(--textColor);transition:color .3s ease;}
.text_image_cards .ti_card_title a {color:inherit;text-decoration:none;}
.text_image_cards .ti_card_title a:focus-visible {outline:none;}
.text_image_cards .ti_card_title a::after {content:"";position:absolute;inset:0;z-index:0;border-radius:14px;}
.text_image_cards .ti_card--link:hover .ti_card_title {color:var(--backgrondColorRed);}
.text_image_cards .ti_card_text p {margin:0;font-size:14px;line-height:1.6;color:#5f5f5f;}
.text_image_cards .ti_card_text p + p {margin-top:8px;}
.text_image_cards .ti_card_text a {position:relative;z-index:1;color:var(--backgrondColorRed);}
.text_image_cards .ti_card_arrow {display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:#FBE9E9;color:var(--backgrondColorRed);transition:background-color .25s ease,color .25s ease,transform .25s ease;}
.text_image_cards .ti_card_arrow svg, .text_image_cards .ti_card_link svg {display:block;flex:none;}
.text_image_cards .ti_card--link:hover .ti_card_arrow {background:var(--backgrondColorRed);color:#fff;transform:translateX(2px);}
/* "Bekijk video": opens the video popup (js/global.js) */
.text_image_cards .ti_card_video {position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1;color:var(--backgrondColorRed);}
.text_image_cards .ti_card_video svg {display:block;flex:none;}
.text_image_cards .ti_card_video .arrow {transition:transform .2s ease;}
.text_image_cards .ti_card_video:hover .arrow {transform:translateX(3px);}
/* Large card: spans the rows of the small cards */
.text_image_cards .ti_card--main {grid-row:1 / span var(--small);flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;border-color:transparent;background:radial-gradient(circle at 110% 0%,rgba(211,32,32,.55) 0%,rgba(211,32,32,.14) 36%,rgba(211,32,32,0) 64%),linear-gradient(115deg,#281513 0%,#421415 60%,#641116 100%);color:#fff;}
.text_image_cards .ti_card--solo {grid-column:1 / -1;}
.text_image_cards .ti_card_head {padding:34px 36px 28px;}
.text_image_cards .ti_card--main h3.ti_card_title {margin-bottom:12px;font-size:28px;line-height:1.15;color:#fff;}
.text_image_cards .ti_card--main .ti_card_text p {font-size:15px;line-height:1.65;color:rgba(255,255,255,.8);}
.text_image_cards .ti_card--main .ti_card_text a {color:#fff;}
.text_image_cards .ti_card_actions {display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px;}
.text_image_cards .ti_card_link {display:inline-flex;align-items:center;gap:8px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:14px;line-height:1;color:#fff;text-decoration:none;}
.text_image_cards .ti_card_link svg {transition:transform .2s ease;}
.text_image_cards .ti_card_link:hover {color:#fff;}
.text_image_cards .ti_card_link:hover svg {transform:translateX(3px);}
.text_image_cards .ti_card--main .ti_card_video {margin-top:0;color:rgba(255,255,255,.8);}
.text_image_cards .ti_card--main .ti_card_video:hover {color:#fff;}
.text_image_cards .ti_card_media {flex:1;display:flex;align-items:center;justify-content:center;padding:0 36px 36px;}
.text_image_cards .ti_card_media img {display:block;width:auto;max-width:100%;height:auto;max-height:420px;margin:0 auto;border-radius:0;}
.text_image_cards .ti_card_media lite-youtube, .text_image_cards .ti_card_media video {display:block;width:100%;max-width:none;overflow:hidden;border-radius:10px;box-shadow:0 14px 34px rgba(0,0,0,.28);}
/* Large card with a link: clickable as a whole (the video stays playable), arrow top right */
.text_image_cards .ti_card--main .ti_card_arrow {position:absolute;top:30px;right:30px;width:32px;height:32px;margin:0;background:rgba(255,255,255,.14);color:#fff;}
.text_image_cards .ti_card--main.ti_card--link .ti_card_title {padding-right:48px;}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_title {color:#fff;}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_arrow {background:#fff;color:var(--backgrondColorRed);}
.text_image_cards .ti_card--main.ti_card--link:hover .ti_card_link svg {transform:translateX(3px);}
.text_image_cards .ti_card--main .ti_card_link::after {content:"";position:absolute;inset:0;z-index:1;border-radius:14px;}
.text_image_cards .ti_card--main .ti_card_link:focus-visible {outline:none;}
.text_image_cards .ti_card--link:has(.ti_card_link:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.text_image_cards .ti_card--main .ti_card_media, .text_image_cards .ti_card--main .ti_card_video {position:relative;z-index:2;}
@media only screen and (max-width:1279px) {
.text_image_cards .ti_cards_head {column-gap:64px;}
}
@media only screen and (max-width:1023px) {
.text_image_cards .ti_cards_head {grid-template-columns:minmax(0,1fr);margin-bottom:36px;}
.text_image_cards .ti_cards_head h6, .text_image_cards .ti_cards_head h2, .text_image_cards .ti_cards_head_text, .text_image_cards .ti_cards_head .h6 {grid-column:1;grid-row:auto;}
.text_image_cards .ti_cards_head h2 {margin-bottom:22px;}
.text_image_cards .ti_cards {grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;}
.text_image_cards .ti_card--main {grid-row:auto;}
}
@media only screen and (max-width:600px) {
.text_image_cards .ti_card {padding:20px;}
.text_image_cards .ti_card--main {padding:0;}
.text_image_cards .ti_card_head {padding:26px 22px 24px;}
.text_image_cards .ti_card--main h3.ti_card_title {font-size:24px;}
.text_image_cards .ti_card_media {padding:0 22px 22px;}
.text_image_cards .ti_card--main .ti_card_arrow {top:22px;right:22px;}
}
/* "Functies in dit onderdeel": chips to function pages (field text_option > functies) */
.text_image_section .ti_functions {margin:26px 0 30px;}
.text_image_section .ti_functions:last-child {margin-bottom:0;}
.text_image_section .ti_functions_label {margin-bottom:10px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:#6b6b6b;}
.text_image_section .check_list .ti_functions_list, .text_image_section .ti_functions_list {display:flex;flex-wrap:wrap;gap:8px;max-height:76px;margin:0;padding:0;overflow:hidden;list-style:none;} /* never more than 2 rows: 2 x 34px chips + 8px gap, a 3rd row stays hidden */
.text_image_section .check_list .ti_functions_list li {display:flex;margin:0;padding:0;line-height:1;} /* flex: the row is exactly as tall as the chip */
.text_image_section .check_list .ti_functions_list li::before {display:none;}
.text_image_section .ti_function {display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 11px;background:#fff;border:1px solid #E3E3E3;border-radius:999px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.2;color:var(--textColor);text-decoration:none;transition:border-color .2s ease, background-color .2s ease, color .2s ease;}
.text_image_section .ti_function .ss_function_icon {flex:none;width:15px;height:15px;color:var(--backgrondColorRed);}
.text_image_section .ti_function:hover {border-color:rgba(211,32,32,.4);background:#FDF3F3;color:var(--textColor);text-decoration:none;}
.text_image_section .ti_functions + .btn_one {margin-top:0;}
@media only screen and (max-width:600px) {
.text_image_section .ti_functions_list {max-height:72px;}
.text_image_section .ti_function {height:32px;padding:0 11px 0 10px;font-size:12px;}
}
/* Check lists in the text: a bit of air between the points, one size smaller */
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li {margin-bottom:12px;padding-left:26px;font-size:15px;line-height:1.55;}
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li:last-child {margin-bottom:0;}
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li::before {top:3px;width:16px;height:16px;background-size:contain;}
@media only screen and (max-width:600px) {
.text_image_section .left_part.check_list ul:not(.ti_functions_list) li {margin-bottom:10px;font-size:14px;}
}
/* theme-shared-accordion */
/* =============================================================================
shared/accordion.css
Extracted from style.css. Loaded only on: block select_faq, block text_and_image, page-template/template-faq.php
============================================================================= */
.accordian {margin-bottom: 40px;}
.accordian .acc-items {border-bottom: 1px solid var(--backgrondColorGray);padding-left: 18px;}
.accordian .acc-items:first-child {border-top: 1px solid var(--backgrondColorGray)}
.accordian .acc-title {padding: 15px 0;position: relative;cursor: pointer;padding-right: 20px;}
.accordian:not(.not) .acc-title::before {content: "";position: absolute;left: -18px;top: 18px;width: 13px;height: 13px;background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0781 5.8445L7.35755 1.1239C7.13549 0.901843 6.77472 0.901455 6.55314 1.12304C6.33156 1.34462 6.33194 1.70539 6.554 1.92744L10.301 5.6744L0.805302 5.66541C0.490852 5.66507 0.236397 5.91953 0.236735 6.23398C0.237073 6.54842 0.492076 6.80343 0.806525 6.80377L10.3022 6.81276L6.56328 10.5517C6.34169 10.7732 6.34208 11.134 6.56414 11.3561C6.7862 11.5781 7.14696 11.5785 7.36855 11.3569L12.0778 6.64769C12.3006 6.42733 12.3002 6.06656 12.0781 5.8445Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center center; background-size: contain;}
.accordian:not(.not) .acc-title::after {content: "";position: absolute;right: 14px;top: 18px; transform: rotate(0);transition: 0.4s; width: 15px; height: 10px;background: url("data:image/svg+xml,%3Csvg width='15' height='10' viewBox='0 0 15 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 1.97559L7.5 9.47559L0 1.97559L1.38281 0.592773L7.5 6.70898L13.6162 0.592773L15 1.97559Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center;background-size: contain;display: inline-block;}
.accordian .acc-title.active::after {transform: rotate(180deg);}
.accordian .acc-title h4, .accordian .acc-title .h4 {margin-bottom: 0;font-size: 18px; font-family: var(--font-semibold); font-weight: var(--font-weight-semibold);}
.accordian .acc-content {display: none; margin-bottom:20px;}
.accordian .acc-content p a {color: var(--backgrondColorRed); font-family: var(--font-bold); font-weight: var(--font-weight-bold);text-decoration: underline;}
.accordian .acc-content p a:hover {text-decoration: none;}
.accordian .acc-content p {margin-bottom: 16px;}
.accordian .acc-content ul, .accordian .acc-content li {font-size: 13px;}
@media only screen and (max-width:1023px) {
.accordian .acc-title h4, .accordian .acc-title .h4 {font-size: 16px;}
}
@media only screen and (max-width:600px) {
.accordian:not(.not) .acc-title::before {width: 9px;height: 9px;}
.accordian:not(.not) .acc-title::after {width: 13px;height: 7px;right: 11px;}
.accordian {margin-bottom: 30px;}
.accordian .acc-title h4, .accordian .acc-title .h4 {font-size: 14px;line-height: 20px;}
.accordian .acc-content p, .accordian .acc-content ul, .accordian .acc-content li {font-size: 12px !important;line-height: 1.6;}
}
/* content-klanten */
/* =============================================================================
Block: klanten (partial/content-klanten.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.our_partner_section .our_partner_text {margin-bottom: 20px;}
.our_partner_section .btn_group {display:flex;flex-wrap:wrap;align-items:center;gap:13px;}
.our_partner_section .btn_group.desktop_hidden {display:none;}
@media (max-width:767px) {
.our_partner_section .left_text .btn_group {display:none;}
.our_partner_section .btn_group.desktop_hidden {display:flex;margin-top:30px;}
}
/* ---------- Block layout: text left, square logo grid (5 x 3, max 15) right, on gray ----------
.klanten_block keeps this apart from the klanten templates, which share
shared/our-partners.css (loaded after this file, hence the longer selectors). */
.our_partner_section.klanten_block {background-color:var(--backgrondColorGray);}
.our_partner_section.klanten_block .outer_part {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;align-items:center;}
.our_partner_section.klanten_block .left_text {width:auto;padding-right:0;margin-bottom:0;}
.our_partner_section.klanten_block .left_text h3 {font-size:38px;line-height:1.12;}
.our_partner_section.klanten_block .our_partner_text {margin-bottom:28px;}
.our_partner_section.klanten_block .our_partner_text p {font-size:16px;line-height:1.7;color:var(--textColor);}
.our_partner_section.klanten_block .our_partner_text p:last-child {margin-bottom:0;}
.our_partner_section.klanten_block .btn_group {gap:12px;}
.our_partner_section.klanten_block .btn_one.black {background:transparent;border-color:var(--textColor);color:var(--textColor);transition:background-color .2s ease,color .2s ease;}
.our_partner_section.klanten_block .btn_one.black .arrow {filter:brightness(0);opacity:.8;}
.our_partner_section.klanten_block .btn_one.black:hover {background:var(--textColor);color:#fff;}
.our_partner_section.klanten_block .btn_one.black:hover .arrow {filter:none;opacity:1;}
.our_partner_section.klanten_block .right_logos {width:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
.our_partner_section.klanten_block .right_logos .logo_card {width:auto;display:flex;align-items:center;justify-content:center;aspect-ratio:1 / 1;padding:10px;background:#fff;border:1px solid #EEEEEE;border-radius:14px;box-shadow:0 10px 30px rgba(53,53,53,.06);transition:box-shadow .25s ease,transform .25s ease;}
.our_partner_section.klanten_block .right_logos .logo_card img {display:block;width:100%;height:100%;object-fit:contain;} /* the logo files are square with space around the logo */
.our_partner_section.klanten_block .right_logos a.logo_card:hover {transform:translateY(-2px);box-shadow:0 14px 34px rgba(53,53,53,.1);}
@media only screen and (max-width:1279px) {
.our_partner_section.klanten_block .outer_part {column-gap:40px;}
.our_partner_section.klanten_block .right_logos {gap:10px;}
.our_partner_section.klanten_block .right_logos .logo_card {padding:8px;}
}
/* Tablet and mobile: text, logos, then the buttons */
@media only screen and (max-width:1023px) {
.our_partner_section.klanten_block .outer_part {grid-template-columns:minmax(0,1fr);row-gap:36px;}
.our_partner_section.klanten_block .left_text h3 {font-size:30px;}
.our_partner_section.klanten_block .left_text .btn_group {display:none;}
.our_partner_section.klanten_block .btn_group.desktop_hidden {display:flex;margin-top:0;}
}
@media only screen and (max-width:767px) {
.our_partner_section.klanten_block .left_text h3 {font-size:25px;}
.our_partner_section.klanten_block .right_logos {gap:8px;}
.our_partner_section.klanten_block .right_logos .logo_card {padding:4px;border-radius:12px;}
}
@media only screen and (max-width:600px) {
.our_partner_section.klanten_block .left_text h3 {font-size:24px;}
.our_partner_section.klanten_block .our_partner_text p {font-size:15px;}
}
/* theme-shared-two-columns */
/* =============================================================================
shared/two-columns.css
Extracted from style.css. Loaded only on: block two_col_text, page-template/template-faq.php, page-template/template-klanten.php, taxonomy-klanten_category.php
============================================================================= */
.two_col_section .outer_part {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;}
.two_col_section .left_text {width: 49%;}
.two_col_section .left_text .wrap {max-width: 480px;}
.two_col_section .left_text h2 {line-height: 1.15;}
.two_col_section .right_text h3 {font-size: 18px; margin-bottom: 8px;}
.two_col_section .right_text {width: 49%;}
.two_col_section .right_text .wrap {max-width: 566px;margin-left: auto;padding-left: 34px;border-left: 2px solid var(--backgrondColorGray);}
.two_col_section .right_text .wrap p:first-child {font-size: 18px;line-height: 1.6;}
@media (min-width:1024px) {
.two_col_section .left_text {position: -webkit-sticky; position: sticky; top: 110px; align-self: flex-start;}
}
@media (max-width:767px) {
.two_col_section .right_text .wrap {padding-left: 20px;}
.two_col_section .right_text .wrap p:first-child {font-size: 16px;}
}
@media (max-width: 1023px) {
.two_col_section {padding: 50px 0 0 0;}
.two_col_section .left_text,
.two_col_section .right_text {width: 100%;}
.two_col_section .left_text {margin-bottom: 30px;}
.two_col_section .left_text .wrap {max-width: 100%;}
.two_col_section .right_text .wrap {max-width: 100%; margin-left: 0;}
}
/* theme-shared-sliders */
/* =============================================================================
shared/sliders.css
Extracted from style.css. Loaded only on: block select_category_functionaliteiten, block select_functionaliteiten, block select_review
============================================================================= */
span.arrow_black {display: inline-block; margin-left: 8px; width: 13px;height: 13px;background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0784 5.84475L7.35779 1.12415C7.13573 0.902087 6.77497 0.9017 6.55338 1.12328C6.3318 1.34487 6.33219 1.70563 6.55425 1.92769L10.3012 5.67464L0.805546 5.66565C0.491096 5.66531 0.236641 5.91977 0.236979 6.23422C0.237318 6.54867 0.49232 6.80367 0.80677 6.80401L10.3024 6.813L6.56352 10.5519C6.34194 10.7735 6.34232 11.1343 6.56438 11.3563C6.78644 11.5784 7.14721 11.5788 7.36879 11.3572L12.078 6.64793C12.3008 6.42757 12.3004 6.06681 12.0784 5.84475Z' fill='%23353535'/%3E%3C/svg%3E") no-repeat center center;background-size: contain;}
.wrapper_large {max-width: 1440px;padding: 0;position: relative;margin: 0 auto;overflow: hidden;}
.wrapper_large::before {pointer-events: none; content: "";position: absolute;left: 0;top: 0;width: 421px;background: linear-gradient(88deg, var(--backgrondColorGray) 28.6%, rgba(229, 227, 220, 0.00) 98.21%);z-index: 2;height: 100%;}
.wrapper_large::after {pointer-events: none;content: "";position: absolute;right: 0;top: 0;width: 421px;background: linear-gradient(-88deg, var(--backgrondColorGray) 28.6%, rgba(229, 227, 220, 0.00) 98.21%);z-index: 2;height: 100%;}
.swiperPrev {position: absolute;left: 70px;top: 50%;transform: translateY(-50%);z-index: 3;cursor: pointer;}
.swiperNext {position: absolute;right: 70px;top: 50%;transform: translateY(-50%);z-index: 3;cursor: pointer;}
.swiperPrev:hover svg rect {fill: var(--backgrondColorRed);stroke: var(--backgrondColorRed);}
.swiperNext:hover svg rect {fill: var(--backgrondColorRed);stroke: var(--backgrondColorRed);}
.card_box_item:hover span.arrow_black {background: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.0784 5.84475L7.35779 1.12415C7.13573 0.902087 6.77497 0.9017 6.55338 1.12328C6.3318 1.34487 6.33219 1.70563 6.55425 1.92769L10.3012 5.67464L0.805546 5.66565C0.491096 5.66531 0.236641 5.91977 0.236979 6.23422C0.237318 6.54867 0.49232 6.80367 0.80677 6.80401L10.3024 6.813L6.56352 10.5519C6.34194 10.7735 6.34232 11.1343 6.56438 11.3563C6.78644 11.5784 7.14721 11.5788 7.36879 11.3572L12.078 6.64793C12.3008 6.42757 12.3004 6.06681 12.0784 5.84475Z' fill='%23fb4545'/%3E%3C/svg%3E") no-repeat center center;background-size: contain;}
.single-functionaliteiten .slider_section.layout_three .card_box_item h5 .arrow_black, .single-functionaliteiten .slider_section.layout_three .card_box_item .h5 .arrow_black {display: none;}
@media only screen and (max-width:1279px) {
.swiperPrev {left: 30px;}
.swiperNext {right: 30px;}
.wrapper_large::before, .wrapper_large::after {width: 240px;}
}
@media only screen and (max-width:1023px) {
.swiperPrev {left: 20px;}
.swiperNext {right: 20px;}
.wrapper_large::before, .wrapper_large::after {width: 170px;}
}
@media only screen and (max-width:600px) {
.wrapper_large::before, .wrapper_large::after {width: 148px;}
.wrapper_large::before {left: -40px;}
.wrapper_large::after {right: -40px;}
.swiperPrev svg, .swiperNext svg {width: 30px;height: 30px;}
.swiperPrev {left: 15px;}
.swiperNext {right: 15px;}
span.arrow_black {width: 13px;height: 11px;margin-right: 5px;background-size: 13px;min-width: 13px;}
}
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:300px;}
@media only screen and (max-width:1023px) {
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:140px;}
}
@media only screen and (max-width:600px) {
.slider_section .wrapper_large::before,.slider_section .wrapper_large::after {width:50px;}
}
/* theme-shared-our-partners */
/* =============================================================================
shared/our-partners.css
Extracted from style.css. Loaded only on: block klanten, page-template/template-klanten.php, taxonomy-klanten_category.php
============================================================================= */
.our_partner_section .outer_part {display: flex;flex-wrap: wrap;position: relative;}
.our_partner_section .left_text {width: 406px;padding-right: 56px;}
.our_partner_section .right_logos {width: calc(100% - 406px);display: flex;flex-wrap: wrap;gap: 0 28px;}
.our_partner_section .right_logos .logo_card {display: grid; width: calc(20% - 23px);text-align: center; justify-content: center; align-items: center;}
.our_partner_section .right_logos.full {width: 100%;gap: 0 55px;}
.our_partner_section .right_logos.full .logo_card {width: calc(20% - 44px); display: flex;align-items: center;justify-content: center;}
.our_partner_section .right_logos.full .logo_card img {max-width: 100%;max-height: 100%;object-fit: contain;}
@media only screen and (max-width:1023px) {
.our_partner_section .right_logos .logo_card {width: calc(25% - 21px);}
.our_partner_section .right_logos.full .logo_card {width: calc(25% - 42px);}
.our_partner_section .left_text {width: 360px;padding-right: 30px;}
.our_partner_section .right_logos {width: calc(100% - 360px);}
}
@media only screen and (max-width:767px) {
.our_partner_section .left_text {width: 100%;padding-right: 0;margin-bottom: 40px;}
.our_partner_section .right_logos {width: 100%;}
.our_partner_section .left_text .btn_one {display: none;}
.our_partner_section .btn_one.desktop_hidden {display: inline-flex;margin-top: 30px;}
}
@media only screen and (max-width:600px) {
.our_partner_section .right_logos {gap: 0 16px;}
.our_partner_section .right_logos .logo_card {width: calc(25% - 12px);}
.our_partner_section .left_text {margin-bottom: 10px;}
.our_partner_section .right_logos.full {gap: 0 20px;}
.our_partner_section .right_logos.full .logo_card {width: calc(33.33% - 14px);}
}
/* content-select-functionaliteiten */
/* =============================================================================
Block: select_functionaliteiten (partial/content-select_functionaliteiten.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.slider_section.layout_four .bottom_link {margin-top: 90px;}
.slider_section.layout_four {padding: 100px 0 85px;}
.painters_section .card {width: 564px;border-radius: 5px;background: #FFF;overflow: hidden;text-decoration: none;height: auto;}
.painters_section .card .image img {display: block;border-radius: 5px;}
.painters_section .card .image {position: relative;}
.painters_section .card .image::after {pointer-events: none; content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 100%;border-radius: 5px;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 35.09%, #FFF 70.17%);}
.painters_section .card .text {text-align: center;margin-top: -40px;position: relative;padding: 0 50px 30px;}
.painters_section .card h4, .painters_section .card .h4 {font-size: 20px;margin-bottom: 20px;}
.painters_section .card p {line-height: 20px;}
.painters_section .card .bottom {display: flex;justify-content: space-between;gap: 10px;align-items: center;padding: 30px 25px 30px;}
@media only screen and (max-width:767px) {
.painters_section .card {width: 400px;}
.painters_section .card .text {padding: 0 20px 20px;}
.slider_section.layout_four .bottom_link {margin-top: 60px;}
}
@media only screen and (max-width:600px) {
.painters_section .card {width: 238px;}
.painters_section .card h4, .painters_section .card .h4 {font-size: 16px;margin-bottom: 12px;}
.painters_section .card .text {padding: 25px 0px 5px 10px;}
.painters_section .card p {font-size: 12px;line-height: 16px;}
.painters_section .card .bottom .icon {width: 20px;}
.painters_section .card .bottom {padding: 20px 10px 10px;}
.slider_section.layout_four {padding: 50px 0 60px;}
.slider_section.layout_four .wrapper_large::before, .slider_section.layout_four .wrapper_large::after {width: 70px;}
.slider_section.layout_four .wrapper_large::before {left: 0;}
.slider_section.layout_four .wrapper_large::after {right: 0;}
}
/* The grid layout (tiles) and the left-aligned intro: see shared/tiles.css */
/* content-teams */
/* =============================================================================
Block: teams (partial/content-teams.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.team_cards {display: flex;flex-wrap: wrap;gap: 20px;}
.team_cards .card {width: calc(25% - 15px);}
.team_cards .card img {border-radius: 5px;}
.team_cards .card .image {margin-bottom: 23px;}
.team_cards .text {text-align: center;}
.team_cards .text p {margin-bottom: 0;line-height: 1.1;font-size: 14px;}
.team_cards .text p.name {font-family: var(--font-bold);font-weight: var(--font-weight-bold);font-size: 16px;}
.team_cards .text p.position {margin-bottom: 18px;}
@media only screen and (max-width:1023px) {
.team_cards .card {width: calc(50% - 10px);}
.team_cards .card .image img {width: 100%;display: block;}
}
@media only screen and (max-width:600px) {
.team_cards .card {width: 100%;display: flex;flex-wrap: wrap;align-items: center;}
.team_cards .card .image {width: 108px;margin-bottom: 0;}
.team_cards .text {width: calc(100% - 108px);padding-left: 12px;text-align: left;}
.team_cards .text p.name {font-size: 14px;}
.team_cards .text p.position {margin-bottom: 10px;}
}
/* theme-shared-function-cards */
/* =============================================================================
shared/function-cards.css
Extracted from style.css. Loaded only on: block prijzen, block select_category_functionaliteiten, block select_functionaliteiten, block three_grid_layout, page-template/template-functionaliteiten.php
============================================================================= */
.slider_section.layout_three {padding: 80px 0;}
.card_slider_box.flex_center .card_box_item {width: calc(33.33% - 10px);}
.card_box_item {border: 1px solid var(--backgrondColorBlack);border-radius: 5px;padding: 28px 22px;padding-right: 5px;text-decoration: none;}
.card_box_item:not(.not):hover h5, .card_box_item:not(.not):hover .h5 {color: var(--backgrondColorRed);}
.card_box_item h5, .card_box_item .h5 {font-size: 18px;font-family: var(--font-semibold);font-weight: var(--font-weight-semibold);display: flex;align-items: center;margin-bottom: 13px;}
.card_box_item h5 img, .card_box_item .h5 img {margin-right: 12px;}
.card_box_item p {font-size: 14px;line-height: 18px;}
.single-functionaliteiten .slider_section.layout_three .card_box_item h5 img, .single-functionaliteiten .slider_section.layout_three .card_box_item .h5 img {display: none;}
.card_box_item {display:flex;flex-direction:column;position:relative}
.card_box_item:hover .title_arrow {color:var(--backgrondColorRed)}
.card_video_text:hover {color:var(--backgrondColorRed);transform:scale(1.02);transition:transform .25s ease}
.card_video_text:hover~*, .card_video_text:hover+* {color:inherit!important}
.play_icon {width:18px;height:14px;display:inline-block;margin-left:6px;background:no-repeat center/contain;background-image:url("data:image/svg+xml;utf8,");background-color:transparent;clip-path:none;transition:transform .25s ease}
.card_box_item:hover .card_video_text {color:var(--textColor)}
.card_box_item .card_video_text:hover {color:var(--backgrondColorRed)!important}
.card_video_text {margin-top:16px;font-size:14px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);color:var(--textColor);background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-align:left;width:max-content;text-decoration:underline}
@media only screen and (max-width:1023px) {
.card_slider_box.flex_center .card_box_item {width: calc(50% - 7px);}
}
@media only screen and (max-width:767px) {
.card_slider_box.flex_center .card_box_item {width: 100%;}
}
@media only screen and (max-width:600px) {
.card_box_item h5 img, .card_box_item .h5 img {width: 18px;margin-right: 8px;}
.card_box_item h5, .card_box_item .h5 {font-size: 12px;margin-bottom: 12px;line-height: 1;}
.card_box_item p {font-size: 12px;line-height: 16px;}
.card_box_item {padding: 18px 14px;}
.slider_section.layout_three {padding: 60px 0;}
.slider_section.layout_three .card_box_item h5, .slider_section.layout_three .card_box_item .h5 {font-size: 14px;}
.title_arrow {display: inline-flex;}
}
/* theme-shared-pricing */
/* =============================================================================
shared/pricing.css
Extracted from style.css. Loaded only on: block prijzen, block prijzen_blocks
============================================================================= */
/* Cards sit in a grid and use subgrid rows, so title, price, text, list and
button start on the same line across every card in a row */
.pricing_cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,288px));justify-content:center;column-gap:16px;}
.pricing_cards .items {position:relative;display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:28px;padding:26px 22px 24px;border:1px solid #E5E5E5;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(53,53,53,.06);}
.pricing_cards .items.active {border-color:var(--backgrondColorRed);box-shadow:0 0 0 1px var(--backgrondColorRed),0 18px 44px rgba(211,32,32,.14);}
.pricing_cards .description {display:contents;}
.pricing_cards h4, .pricing_cards .h4 {margin-bottom:0;color:var(--textColor);font-size:18px;line-height:1.3;}
.pricing_cards .price {margin-top:12px;color:var(--backgrondColorRed);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:24px;line-height:1.2;}
.pricing_cards .description p {margin:10px 0 20px;font-size:13px;line-height:19px;color:var(--textColortwo);}
.pricing_cards .description ul {margin-bottom:0;padding-left:0;list-style:none;}
.pricing_cards .description li {position:relative;padding-left:28px;font-size:14px;line-height:20px;color:var(--textColor);}
.pricing_cards .description li:not(:last-child) {margin-bottom:10px;}
.pricing_cards .description li::before {content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:rgba(211,32,32,.1) url("data:image/svg+xml;utf8,") center / 10px no-repeat;}
/* "Meest gekozen": label centered on the top edge of the card */
.pricing_cards .active-highlight {position:absolute;left:50%;top:0;z-index:1;transform:translate(-50%,-50%);padding:5px 13px;border:1px solid var(--backgrondColorRed);border-radius:999px;background:var(--backgrondColorRed);color:#fff;box-shadow:0 6px 16px rgba(211,32,32,.28);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;}
/* Tip on a card ("Goed in combinatie met Robaws"): same spot as "Meest gekozen", but quieter */
.pricing_cards .pricing_tip {position:absolute;left:50%;top:0;z-index:1;display:inline-flex;align-items:center;gap:6px;transform:translate(-50%,-50%);padding:4px 11px;border:1px solid #E5E5E5;border-radius:999px;background:#fff;color:#5f5f5f;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:11px;line-height:14px;white-space:nowrap;}
.pricing_cards .pricing_tip svg {display:block;flex:none;color:var(--backgrondColorRed);}
/* Card button: red on the highlighted card, outline on the others */
.pricing_cards .btn_box {align-self:end;text-align:center;}
.pricing_cards .btn_box:has(.btn_one) {padding-top:24px;}
.pricing_cards .btn_box .btn_one {max-width:100%;}
.pricing_cards .items:not(.active) .btn_box .btn_one {background:transparent;border-color:var(--textColor);color:var(--textColor);transition:background-color .2s ease,color .2s ease;}
.pricing_cards .items:not(.active) .btn_box .btn_one .arrow {filter:brightness(0);opacity:.8;}
.pricing_cards .items:not(.active) .btn_box .btn_one:hover {background:var(--textColor);color:#fff;}
.pricing_cards .items:not(.active) .btn_box .btn_one:hover .arrow {filter:none;opacity:1;}
.pricing_vat_note {margin:0;text-align:center;font-size:13px;line-height:19px;color:var(--textColortwo);}
/* Tab / filter switching */
.js-tab-item {opacity:1;transition:opacity .25s}
.js-tab-item.is-hidden {opacity:0;pointer-events:none}
.js-tab-container {position:relative}
@media only screen and (min-width:1024px) and (max-width:1199px) {
.pricing_cards {grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
}
@media only screen and (max-width:600px) {
.pricing_cards {grid-template-columns:minmax(0,420px);}
.pricing_cards .items {margin-bottom:24px;padding:24px 20px 22px;}
.pricing_cards h4, .pricing_cards .h4 {font-size:17px;}
.pricing_cards .price {font-size:22px;}
.pricing_cards .description li {font-size:13px;line-height:19px;}
.pricing_cards .btn_box .btn_one {width:100%;justify-content:center;}
}
/* content-prijzen */
/* =============================================================================
Block: prijzen (partial/content-prijzen.php)
Extracted from style.css. Enqueued only when this block is used on the page.
The cards themselves are styled in shared/pricing.css (shared with prijzen_blocks).
============================================================================= */
.slider_section.prijzen_section {background-color:var(--backgrondColorGray);}
/* Tabs: pill-shaped switch centered under the title */
.prijzen_section .wrapper_btn {display:flex;justify-content:center;}
.prijzen_section .tab_buttons_under_title {position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-bottom:36px;padding:4px;border:1px solid #E5E5E5;border-radius:999px;background:#fff;box-shadow:0 6px 18px rgba(53,53,53,.05);}
.prijzen_section .btn_two.js-tab-btn {position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:var(--textColor);font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .3s ease,color .3s ease;}
.prijzen_section .btn_two.js-tab-btn:hover {color:var(--backgrondColorRed);}
.prijzen_section .btn_two.js-tab-btn.active {background:var(--backgrondColorRed);color:#fff;}
/* Two tabs: the red block slides to the active tab */
.prijzen_section .tab_buttons_under_title:has(.js-tab-btn + .js-tab-btn)::before {content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 12px) / 2);border-radius:999px;background:var(--backgrondColorRed);box-shadow:0 4px 12px rgba(211,32,32,.25);transition:transform .35s cubic-bezier(.65,0,.35,1);}
.prijzen_section .tab_buttons_under_title:has(.js-tab-btn + .js-tab-btn):has(.js-tab-btn[data-tab="2"].active)::before {transform:translateX(calc(100% + 4px));}
.prijzen_section .tab_buttons_under_title:has(.js-tab-btn + .js-tab-btn) .js-tab-btn.active {background:transparent;}
@media (prefers-reduced-motion:reduce) {
.prijzen_section .tab_buttons_under_title::before, .prijzen_section .btn_two.js-tab-btn {transition:none;}
}
@media (max-width:767px) {
.prijzen_section .tab_buttons_under_title {margin-bottom:28px;}
}
@media only screen and (max-width:600px) {
.prijzen_section .tab_buttons_under_title {width:100%;max-width:420px;}
.prijzen_section .btn_two.js-tab-btn {height:auto;min-height:36px;padding:6px 10px;font-size:13px;line-height:1.2;white-space:normal;text-align:center;}
}
/* content-video-intro */
/* =============================================================================
Block: video_intro (partial/content-video_intro.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.video_intro_section {position:relative;padding:30px 0px;}
.video_intro_section .wrapper {max-width:960px;}
.video_intro_head {text-align:center;max-width:900px;margin:0 auto 40px;}
.video_intro_head h2 {margin-bottom:0;}
.video_intro_embed {position:relative;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:2px 6px 20px -6px rgba(0,0,0,0.35);background:var(--backgrondColorGray);}
.video_intro_embed iframe,.video_intro_embed video {position:absolute;inset:0;width:100%;height:100%;border:0;}
.video_intro_embed lite-youtube {width:100%;height:100%;max-width:none;border-radius:12px;background-size:cover;background-position:center;}
/* Light red block behind the bottom left corner of the video, like the image accent in text + image */
.video_intro_frame {position:relative;isolation:isolate;}
.video_intro_frame::before {content:"";position:absolute;z-index:-1;left:-20px;bottom:-20px;width:calc(60% + 20px);height:calc(60% + 20px);border-radius:16px;background:#F9DFDF;pointer-events:none;}
@media (max-width:767px) {
.video_intro_head {margin-bottom:24px;}
.video_intro_embed {border-radius:8px;}
}
@media (max-width:600px) {
.video_intro_frame::before {left:-12px;bottom:-12px;width:calc(60% + 12px);height:calc(60% + 12px);border-radius:12px;}
}
/* content-sectoren-slider */
/* =============================================================================
Block: sectoren_slider (partial/content-sectoren_slider.php)
Grid of sector cards (photo, name + arrow) on the grey background with the half arrows.
Enqueued only when this block is used on the page.
============================================================================= */
.slider_section.sector_cards_section .short_intro_box {text-align:left;margin-bottom:36px;}
.slider_section.sector_cards_section .short_intro_box .wrap {max-width:640px;margin:0;}
.slider_section.sector_cards_section .short_intro_box .block_title::after {margin-left:0;margin-right:0;}
.slider_section.sector_cards_section .short_intro_box p {margin-left:0;margin-right:0;}
.slider_section.sector_cards_section .short_intro_box h2:last-child {margin-bottom:0;}
/* Intro text to the right of the title, starting above the 4th card (3fr/2fr with a 24px gap = card grid 5 x 16px gap), top-aligned with the title */
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) {display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);column-gap:24px;max-width:none;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) > :not(p) {grid-column:1;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) .h6 {justify-self:start;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) h2 {max-width:480px;margin-bottom:0;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) > p {grid-column:2;grid-row:2;align-self:start;margin:0;padding-top:4px;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:17px;line-height:1.45;}
.sector_cards {position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
.sector_card {display:flex;flex-direction:column;background:#fff;border:1px solid #E6E6E6;border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06);color:var(--textColor);text-decoration:none;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
.sector_card_image {display:block;aspect-ratio:4/3;overflow:hidden;background:#EDEDED;}
.sector_card_image img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.sector_card_body {flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 14px 16px;min-height:62px;}
.sector_card .sector_card_title {margin:0;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:14px;line-height:1.3;color:var(--textColor);}
.sector_card_arrow {flex:none;width:14px;height:14px;background:var(--backgrondColorRed);-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;transition:transform .25s ease;}
a.sector_card:hover {transform:translateY(-3px);border-color:#DADADA;box-shadow:0 14px 30px rgba(0,0,0,.10);}
a.sector_card:hover .sector_card_image img {transform:scale(1.04);}
a.sector_card:hover .sector_card_arrow {transform:translateX(3px);}
a.sector_card:focus-visible {outline:2px solid var(--backgrondColorRed);outline-offset:2px;}
.slider_section.sector_cards_section .bottom_link {position:relative;z-index:1;margin-top:36px;}
@media only screen and (max-width:1023px) {
.sector_cards {grid-template-columns:repeat(4,minmax(0,1fr));}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) {display:block;max-width:640px;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) h2 {margin-bottom:18px;}
.slider_section.sector_cards_section .short_intro_box .wrap:has(> p) > p {font-size:16px;}
}
@media only screen and (max-width:767px) {
.sector_cards {grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.slider_section.sector_cards_section .short_intro_box {margin-bottom:28px;}
}
@media only screen and (max-width:600px) {
.sector_cards {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.sector_card_body {padding:10px 10px 10px 12px;min-height:52px;gap:6px;}
.sector_card .sector_card_title {font-size:13px;}
.sector_card_arrow {width:12px;height:12px;}
.slider_section.sector_cards_section .bottom_link {margin-top:28px;}
}
/* content-key-features */
/* =============================================================================
Block: key_features (partial/content-key_features.php)
Extracted from style.css. Enqueued only when this block is used on the page.
============================================================================= */
.benefits_section {position:relative;background-color:var(--backgrondColorPink);}
.benefits_section .outer_card {position:relative;z-index:1;} /* vertical space: block spacing (.ss_block) */
/* Title + intro */
.benefits_section .top_title {margin-bottom:40px;}
.benefits_section .top_title .wrap {max-width:800px;text-align:center;}
.benefits_section h4, .benefits_section .h4 {font-size:38px;}
.benefits_section .top_title .intro_text p {font-size:16px;line-height:25px;}
.benefits_section .top_title .intro_text p:not(:last-child) {margin-bottom:15px;}
/* Cards: 5 per row, a smaller number stays the same width and is centered */
.benefits_part {display:flex;flex-wrap:wrap;justify-content:center;gap:16px;}
.benefits_part .benefits_card {flex:0 0 calc((100% - 64px) / 5);min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;align-content:start;padding:22px 22px 26px;background-color:#fff;border:1px solid rgba(211,32,32,.15);border-radius:12px;box-shadow:0 10px 30px rgba(211,32,32,.06);text-align:left;}
.benefits_part .benefits_card .icon {grid-column:1;grid-row:1;width:32px;height:32px;min-width:32px;margin-bottom:0;border-radius:8px;background-color:var(--backgrondColorRed);background-position:center;background-repeat:no-repeat;background-size:15px;background-image:url("data:image/svg+xml;utf8,");}
/* Title next to the icon, text below it across the full card width */
.benefits_part .benefits_card .text {display:contents;}
.benefits_part .benefits_card p {text-align:left;font-size:13px;line-height:19px;color:var(--textColor);}
.benefits_part .benefits_card p:first-child {grid-column:2;grid-row:1;margin-bottom:0;}
.benefits_part .benefits_card p:not(:first-child) {grid-column:1 / -1;margin-top:14px;}
.benefits_part .benefits_card p:last-child {margin-bottom:0;}
.benefits_part .benefits_card p strong {font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:16px;line-height:1.3;color:var(--textColor);}
/* CTA */
.benefits_section .benefits_cta {margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.benefits_section .benefits_cta .btn_one {max-width:max-content;}
.benefits_section .benefits_cta .button_note {max-width:520px;margin-bottom:0;font-size:13px;line-height:20px;color:var(--textColortwo);}
@media only screen and (max-width:1279px) {
.benefits_section h4, .benefits_section .h4 {font-size:30px;}
.benefits_part .benefits_card {padding:20px 18px 22px;}
.benefits_part .benefits_card p strong {font-size:15px;}
}
/* Below 1200px 5 cards get too narrow for a title next to the icon: 3 per row, 4 cards stay 4 per row */
@media only screen and (max-width:1199px) {
.benefits_part .benefits_card {flex-basis:calc((100% - 32px) / 3);}
}
@media only screen and (min-width:1024px) and (max-width:1199px) {
.benefits_part:has(.benefits_card:nth-child(4)):not(:has(.benefits_card:nth-child(5))) .benefits_card {flex-basis:calc((100% - 48px) / 4);}
}
@media only screen and (max-width:1023px) {
.benefits_section h4, .benefits_section .h4 {font-size:24px;}
}
/* 4 cards: 2 x 2 instead of 3 + 1 */
@media only screen and (min-width:768px) and (max-width:1023px) {
.benefits_part:has(.benefits_card:nth-child(4)):not(:has(.benefits_card:nth-child(5))) .benefits_card {flex-basis:calc((100% - 16px) / 2);}
}
@media only screen and (max-width:767px) {
.benefits_part .benefits_card {flex-basis:calc((100% - 16px) / 2);}
}
@media only screen and (max-width:600px) {
.benefits_section .top_title {margin-bottom:30px;}
.benefits_section .top_title .intro_text p {font-size:14px;line-height:20px;}
.benefits_part {gap:12px;}
.benefits_part .benefits_card {flex-basis:100%;padding:18px;}
.benefits_part .benefits_card p:not(:first-child) {margin-top:12px;}
.benefits_part .benefits_card p strong {font-size:15px;}
.benefits_section .benefits_cta {margin-top:30px;gap:12px;}
.benefits_section .benefits_cta .button_note {font-size:12px;line-height:18px;}
}
/* Weergave "numbered": title left, numbered cards in two columns right (still on the pink background) */
.benefits_numbered {display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);column-gap:64px;align-items:start;}
.benefits_numbered_intro h2 {margin-bottom:0;line-height:1.12;}
.benefits_numbered_intro .intro_text {margin-top:24px;}
.benefits_numbered_intro .intro_text p {font-size:15px;line-height:1.65;}
.benefits_numbered_intro .btn_one {margin-top:28px;}
.benefits_numbered_intro .button_note {margin-top:10px;font-size:13px;color:var(--textColortwo);}
.benefits_numbered_list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;}
.benefits_numbered_card {margin:0;padding:24px 24px 26px;background:#fff;border:1px solid rgba(211,32,32,.15);border-radius:14px;box-shadow:0 10px 30px rgba(211,32,32,.06);color:var(--textColor);transition:transform .25s ease, box-shadow .25s ease;}
.benefits_numbered_card:hover {transform:translateY(-2px);box-shadow:0 14px 34px rgba(211,32,32,.1);}
.benefits_numbered_number {display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin-bottom:16px;border-radius:5px;background:var(--backgrondColorRed);color:#fff;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:1;}
.benefits_numbered_card .benefits_numbered_title {margin:0 0 8px;font-size:15px;line-height:1.3;}
.benefits_numbered_card p {margin:0;font-size:13px;line-height:1.6;color:var(--textColor);}
@media only screen and (max-width:1023px) {
.benefits_numbered {grid-template-columns:minmax(0,1fr);row-gap:32px;}
}
@media only screen and (max-width:600px) {
.benefits_numbered_list {grid-template-columns:minmax(0,1fr);gap:12px;}
.benefits_numbered_card {padding:20px 18px 22px;}
}
/* theme-shared-tiles */
/* =============================================================================
shared/tiles.css
White tiles, 4 per row, under a left-aligned intro. Loaded only with the
select_functionaliteiten and three_grid_layout blocks (.tiles_section).
A tile with a link is clickable as a whole and shows an arrow next to its title.
============================================================================= */
/* Intro (subtitle, title, text) aligned left with the tiles */
.slider_section.tiles_section .short_intro_box {text-align:left;}
.slider_section.tiles_section .short_intro_box .wrap {margin:0;}
.slider_section.tiles_section .short_intro_box p {margin-left:0;margin-right:0;}
.slider_section.tiles_section .short_intro_box .block_title::after {margin-left:0;margin-right:0;}
.functionality_tiles {display:flex;flex-wrap:wrap;justify-content:center;gap:24px;}
.functionality_tile {position:relative;display:flex;flex-direction:column;width:calc((100% - 72px) / 4);padding:26px 24px 24px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:box-shadow .3s ease,transform .3s ease;}
.functionality_tile:has(.functionality_tile_link):hover {box-shadow:0 14px 34px rgba(0,0,0,.09);transform:translateY(-2px);}
.functionality_tile:has(.functionality_tile_link:focus-visible) {outline:2px solid var(--backgrondColorRed);outline-offset:3px;}
.functionality_tile_link, .functionality_tile_body {display:block;flex:1;color:inherit;text-decoration:none;}
.functionality_tile_link:focus-visible {outline:none;}
.functionality_tile_link::after {content:"";position:absolute;inset:0;z-index:0;border-radius:14px;}
.functionality_tile_title {display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:17px;line-height:1.3;color:var(--textColor);transition:color .3s ease;}
.functionality_tile_arrow {display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;margin-top:-3px;border-radius:50%;background:#FBE9E9;color:var(--backgrondColorRed);transition:background-color .25s ease,color .25s ease,transform .25s ease;}
.functionality_tile_arrow svg {display:block;}
.functionality_tile:has(.functionality_tile_link):hover .functionality_tile_title {color:var(--backgrondColorRed);}
.functionality_tile:has(.functionality_tile_link):hover .functionality_tile_arrow {background:var(--backgrondColorRed);color:#fff;transform:translateX(2px);}
.functionality_tile_text p {margin:0;font-size:14px;line-height:1.65;color:#5f5f5f;}
.functionality_tile_text p + p {margin-top:10px;}
.functionality_tile_video {position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:28px;padding:0;border:0;background:none;cursor:pointer;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1;color:var(--backgrondColorRed);}
.functionality_tile_video svg {display:block;flex:none;}
.functionality_tile_video .arrow {transition:transform .2s ease;}
.functionality_tile_video:hover .arrow {transform:translateX(3px);}
/* Function tiles (select_functionaliteiten): red icon square above the title instead of the arrow */
.functionality_tile_icon {display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:18px;border-radius:9px;background:var(--backgrondColorRed);color:#fff;}
.functionality_tile_icon .ss_function_icon {display:block;width:20px;height:20px;}
.functionality_tile--icon .functionality_tile_arrow {display:none;}
.functionality_tiles--5 .functionality_tile {width:calc((100% - 96px) / 5);padding:22px 20px 20px;}
.functionality_tiles--5 .functionality_tile_title {font-size:15px;}
.functionality_tiles--5 .functionality_tile_text p {font-size:13px;line-height:1.6;}
.functionality_tiles--5 .functionality_tile_video {margin-top:22px;}
@media only screen and (max-width:1279px) {
.functionality_tiles--5 .functionality_tile {width:calc((100% - 72px) / 4);}
}
@media only screen and (max-width:1023px) {
.functionality_tile, .functionality_tiles--5 .functionality_tile {width:calc((100% - 24px) / 2);}
}
@media only screen and (max-width:600px) {
.functionality_tiles {gap:16px;}
.functionality_tile, .functionality_tiles--5 .functionality_tile {width:100%;padding:22px 20px 20px;}
}
/* content-cta */
/* ---------- Call to Action ---------- */
.cta_section{text-align:center;}
.cta_section:not(.cta_panel_section) h2{margin-bottom:40px;line-height:1.1;}
.cta_section:not(.cta_panel_section) .outer_part{max-width:900px;margin:0 auto;text-align:center;}
.cta_panel_section{text-align:left;}
.cta_panel{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.65fr);gap:70px;align-items:center;overflow:hidden;padding:52px 64px;border-radius:24px;background:radial-gradient(circle at 122% 50%,rgba(211,32,32,.5) 0%,rgba(211,32,32,.14) 34%,rgba(211,32,32,0) 62%),linear-gradient(115deg,#281513 0%,#421415 60%,#641116 100%);box-shadow:0 18px 45px rgba(53,53,53,.12);color:#fff;}
.cta_panel::before{content:"";position:absolute;right:-260px;bottom:-260px;width:580px;height:580px;border-radius:50%;background:radial-gradient(circle,rgba(255,70,70,.2) 0%,rgba(255,70,70,0) 70%);pointer-events:none;}
.cta_panel_content{position:relative;z-index:1;max-width:700px;}
.cta_panel_label{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px;}
.cta_panel h2{margin:0 0 18px;color:#fff;font-size:38px;line-height:1.08;letter-spacing:-.025em;}
.cta_panel_text{max-width:670px;color:rgba(255,255,255,.84);}
.cta_panel_text p{margin:0;color:inherit;font-size:16px;line-height:1.75;}
.cta_panel_note{margin-top:16px;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:13px;line-height:1.5;}
.cta_panel_actions{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:12px;}
.cta_panel_button{min-width:230px;justify-content:center;}
.cta_panel_button .link-effect{justify-content:center;}
.cta_panel_button--secondary{background:transparent;border-color:rgba(255,255,255,.7);}
.cta_panel_button--secondary:hover{border-color:#fff;background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
@media(max-width:900px){
.cta_panel{grid-template-columns:1fr;gap:32px;padding:46px 44px;background:radial-gradient(circle at 122% 80%,rgba(211,32,32,.42) 0%,rgba(211,32,32,.1) 38%,rgba(211,32,32,0) 65%),linear-gradient(115deg,#281513 0%,#421415 62%,#641116 100%);}
.cta_panel_actions{flex-direction:row;flex-wrap:wrap;}
}
@media(max-width:600px){
.cta_section:not(.cta_panel_section) h2{margin-bottom:20px;}
.cta_section:not(.cta_panel_section) h2 br{display:none;}
.cta_panel{gap:28px;padding:34px 26px;border-radius:18px;}
.cta_panel_label{font-size:10px;}
.cta_panel h2{font-size:26px;line-height:1.12;}
.cta_panel_text p{font-size:14px;line-height:1.6;}
.cta_panel_note{font-size:12px;}
.cta_panel_actions{flex-direction:column;align-items:stretch;width:100%;}
.cta_panel_button{width:100%;min-width:0;}
}
/* Optional phone line under the buttons */
.cta_panel_phone {margin:4px 0 0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.8);}
.cta_panel_phone a {color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.cta_panel_phone a:hover {color:#fff;text-decoration:none;}
/* content-two-col-text */
/* =============================================================================
Block: two_col_text (partial/content-two_col_text.php)
Eyebrow + title on the left, text behind a red rule on the right, on gray, and an optional
comparison table below (first column 36%, the other two share the rest).
Base two_col_section styles live in shared/two-columns.css (also used by the
FAQ and klanten templates); everything here is scoped to .two_col_block.
============================================================================= */
.two_col_section.two_col_block {background-color:var(--backgrondColorGray);}
.two_col_block .outer_part {display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:80px;align-items:start;}
.two_col_block .left_text, .two_col_block .right_text {width:auto;}
.two_col_block .left_text .wrap {max-width:520px;}
.two_col_block .left_text h2 {line-height:1.12;}
.two_col_block .right_text .wrap {max-width:none;margin-left:0;padding-left:26px;border-left:3px solid var(--backgrondColorRed);}
.two_col_block .right_text .wrap p {margin-bottom:18px;font-size:16px;line-height:1.7;color:var(--textColor);}
.two_col_block .right_text .wrap p:first-child {font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:17px;line-height:1.65;}
.two_col_block .right_text .wrap > :last-child {margin-bottom:0;}
.two_col_block .two_col_link {display:inline-flex;align-items:center;gap:8px;margin:28px 0 0 29px;color:var(--backgrondColorRed);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:15px;line-height:1.3;text-decoration:none;}
.two_col_block .two_col_link svg {display:block;flex:none;transition:transform .2s ease;}
.two_col_block .two_col_link:hover {text-decoration:underline;}
.two_col_block .two_col_link:hover svg {transform:translateX(3px);}
.two_col_compare {margin-top:56px;}
.two_col_block .two_col_compare_title {margin-bottom:18px;font-size:18px;line-height:1.3;}
.two_col_compare_scroll {overflow-x:auto;background:#fff;border:1px solid #E6E6E6;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.04);}
.two_col_compare_table {width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--textColor);}
.two_col_compare_table th, .two_col_compare_table td {padding:14px 20px;text-align:left;vertical-align:middle;border-bottom:1px solid #EEEEEE;}
.two_col_compare_table thead th {padding-top:16px;padding-bottom:16px;background:#F7F7F7;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:13px;}
.two_col_compare_table tbody th {font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);}
.two_col_compare_table tbody tr:nth-child(even) > * {background:#FAFAFA;}
.two_col_compare_table tbody tr:last-child > * {border-bottom:0;}
.two_col_compare_table tbody > tr > * {transition:background-color .2s ease, box-shadow .2s ease;}
.two_col_compare_table tbody tr:hover > * {background:#FDF3F3;}
.two_col_compare_table tbody tr:hover > th {box-shadow:inset 3px 0 0 var(--backgrondColorRed);} /* red marker on the left of the row */
.two_col_compare_table tr > :first-child {width:36%;}
@media (max-width:1023px) {
.two_col_compare {margin-top:40px;}
.two_col_compare_table tr > :first-child {width:30%;}
}
@media (max-width:767px) {
.two_col_compare_table {min-width:620px;font-size:13px;}
.two_col_compare_table th, .two_col_compare_table td {padding:12px 14px;}
}
@media (max-width:1023px) {
.two_col_block .outer_part {grid-template-columns:minmax(0,1fr);row-gap:32px;}
.two_col_block .left_text {margin-bottom:0;}
.two_col_block .left_text .wrap {max-width:100%;}
}
@media (max-width:767px) {
.two_col_block .right_text .wrap {padding-left:20px;}
.two_col_block .right_text .wrap p:first-child {font-size:16px;}
.two_col_block .two_col_link {margin-left:23px;}
}
/* content-select-testimonials */
/* ---------- Select Testimonials ---------- */
.testimonials_section{position:relative;overflow:hidden;padding:82px 0 82px;background:radial-gradient(circle at 89% 20%,rgba(151,9,16,.72) 0%,rgba(151,9,16,.25) 28%,rgba(151,9,16,0) 58%),linear-gradient(115deg,#251615 0%,#3a1918 42%,#5b1116 100%);color:#fff;}
.testimonials_section::before{content:"";position:absolute;left:-220px;bottom:-360px;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(185,47,38,.18) 0%,rgba(185,47,38,0) 70%);pointer-events:none;}
.testimonials_section::after{content:"";position:absolute;right:-200px;top:-280px;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(214,32,32,.18) 0%,rgba(214,32,32,0) 70%);pointer-events:none;}
.testimonials_section .wrapper{position:relative;z-index:2;max-width:1280px;}
.testimonials_header{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,465px);gap:60px;align-items:end;margin-bottom:18px;}
.testimonials_heading{min-width:0;}
.testimonials_label{display:inline-block;padding:5px 12px;border-radius:999px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:11px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.14);color:#fff;margin-bottom:14px;}
.testimonials_heading h2{margin:0 0 14px;color:#fff;font-size:38px;line-height:1.05;letter-spacing:-.025em;}
.testimonials_intro{max-width:700px;color:rgba(255,255,255,.76);}
.testimonials_intro p{margin:0;color:inherit;font-size:16px;line-height:1.55;}
.google_reviews_summary{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:center;width:100%;min-height:112px;padding:21px 26px;border:1px solid rgba(255,255,255,.18);border-radius:17px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.025);color:#fff;text-decoration:none;transition:border-color .25s ease,background .25s ease,transform .25s ease;}
a.google_reviews_summary:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.055);text-decoration:none;}
.google_reviews_logo{display:flex;width:46px;height:46px;align-items:center;justify-content:center;flex:none;}
.google_reviews_logo svg{display:block;width:42px;height:42px;}
.google_reviews_content{display:flex;min-width:0;flex-direction:column;gap:11px;}
.google_reviews_top{display:flex;align-items:center;gap:12px;min-width:0;}
.google_star_rating{position:relative;width:137px;height:25px;overflow:hidden;flex:none;font-family:Arial,sans-serif;font-size:25px;line-height:25px;letter-spacing:2px;white-space:nowrap;}
.google_star_rating_background{position:absolute;inset:0;color:rgba(255,193,7,.22);}
.google_star_rating_fill{position:absolute;left:0;top:0;height:100%;overflow:hidden;color:#ffc400;white-space:nowrap;}
.google_reviews_score{flex:none;color:#fff;font-family:var(--font-bold);font-size:23px;font-weight:var(--font-weight-bold);line-height:1;}
.google_reviews_divider{display:block;width:1px;height:28px;margin:0 7px;background:rgba(255,255,255,.24);}
.google_reviews_count{flex:none;color:rgba(255,255,255,.76);font-size:14px;line-height:1;}
.google_reviews_bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;color:rgba(255,255,255,.65);font-size:11px;line-height:1.4;}
.google_reviews_bottom strong{display:inline-flex;align-items:center;gap:8px;flex:none;color:#fff;font-family:var(--font-regular);font-size:11px;font-weight:var(--font-weight-regular);}
.google_reviews_arrow{font-size:15px;line-height:1;transition:transform .2s ease;}
a.google_reviews_summary:hover .google_reviews_arrow{transform:translateX(4px);}
.testimonials_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;}
.testimonial_card{position:relative;display:flex;min-width:0;min-height:202px;flex-direction:column;padding:23px 23px 20px;border:1px solid rgba(255,255,255,.2);border-radius:17px;background:rgba(255,255,255,.035);color:#fff;text-decoration:none;overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease;}
.testimonial_card::after{content:"";position:absolute;right:-75px;bottom:-105px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(211,32,32,.11),rgba(211,32,32,0) 69%);pointer-events:none;}
.testimonial_card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.055);text-decoration:none;}
.testimonial_quote_icon{position:relative;z-index:1;width:28px;height:27px;margin-bottom:18px;color:#f32f33;}
.testimonial_quote_icon svg{display:block;width:100%;height:100%;}
.testimonial_quote{position:relative;z-index:1;margin:0 0 24px;color:#fff;font-family:var(--font-medium);font-weight:var(--font-weight-medium);font-size:16px;line-height:1.55;}
.testimonial_company{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin-top:auto;color:#fff;font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:12px;line-height:1.35;}
.testimonial_company_arrow{position:relative;top:-1px;font-family:Arial,sans-serif;font-size:20px;font-weight:normal;line-height:1;transition:transform .2s ease;}
.testimonial_card:hover .testimonial_company_arrow{transform:translateX(4px);}
.testimonials_footer{display:flex;justify-content:center;margin-top:25px;}
/* Secondary button of the CTA block (.cta_panel_button--secondary), with the border of the testimonial cards */
.testimonials_all{min-width:230px;justify-content:center;background:transparent;border-color:rgba(255,255,255,.2);}
.testimonials_all .link-effect{justify-content:center;}
.testimonials_all:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.06);color:#fff;text-decoration:none;}
@media(max-width:1100px){
.testimonials_header{grid-template-columns:minmax(0,1fr) 410px;gap:35px;}
.testimonials_heading h2{font-size:34px;}
.google_reviews_summary{padding:20px;}
.google_star_rating{width:117px;font-size:22px;line-height:25px;letter-spacing:1px;}
.google_reviews_top{gap:9px;}
.google_reviews_score{font-size:21px;}
.google_reviews_divider{margin:0 3px;}
.google_reviews_count{font-size:12px;}
.testimonial_quote{font-size:15px;}
}
@media(max-width:900px){
.testimonials_section{padding:60px 0 45px;}
.testimonials_header{grid-template-columns:1fr;gap:26px;margin-bottom:25px;}
.google_reviews_summary{max-width:520px;}
.testimonials_grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:767px){
.testimonials_section{padding:50px 0 40px;}
.testimonials_header{margin-bottom:22px;}
.testimonials_heading h2{margin-bottom:12px;font-size:29px;line-height:1.1;}
.testimonials_intro p{font-size:14px;line-height:1.55;}
.google_reviews_summary{grid-template-columns:40px minmax(0,1fr);gap:14px;min-height:0;padding:18px;border-radius:14px;}
.google_reviews_logo{width:40px;height:40px;}
.google_reviews_logo svg{width:36px;height:36px;}
.google_reviews_top{flex-wrap:wrap;gap:8px;}
.google_star_rating{width:107px;height:21px;font-size:20px;line-height:21px;}
.google_reviews_score{font-size:19px;}
.google_reviews_divider{height:22px;margin:0 2px;}
.google_reviews_count{font-size:11px;}
.google_reviews_bottom{align-items:flex-start;flex-direction:column;gap:5px;}
.testimonials_grid{grid-template-columns:1fr;gap:12px;}
.testimonial_card:nth-child(n+4){display:none;} /* mobile: only the first 3 reviews, the button links to all */
.testimonial_card{min-height:185px;padding:22px 20px 19px;border-radius:14px;}
.testimonial_quote_icon{width:25px;height:24px;margin-bottom:16px;}
.testimonial_quote{margin-bottom:22px;font-size:15px;line-height:1.5;}
.testimonial_company{font-size:12px;}
.testimonials_footer{margin-top:22px;}
}
@media(max-width:600px){
.testimonials_label{font-size:10px;}
}
@media(max-width:480px){
.testimonials_heading h2{font-size:26px;}
.google_reviews_summary{grid-template-columns:1fr;}
.google_reviews_logo{display:none;}
.google_reviews_content{gap:10px;}
.google_reviews_top{flex-wrap:nowrap;}
.google_star_rating{width:101px;font-size:19px;}
.google_reviews_score{font-size:18px;}
.google_reviews_count{font-size:10px;}
.google_reviews_bottom{flex-direction:row;align-items:center;}
.testimonial_card{min-height:175px;}
}
/* theme-font-inter */
/* =============================================================================
Global: global/font-inter.css
Loaded only when Theme Setting > Lettertype is set to Inter (see inc/fonts.php).
Inter is self-hosted (SIL Open Font License), one variable file per subset.
============================================================================= */
/* latin-ext */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
/* latin */
@font-face {font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://softwareshaker.com/wp-content/themes/software-shaker/css/global/../../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root {
--font-sans : "Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-regular : var(--font-sans);
--font-medium : var(--font-sans);
--font-semibold : var(--font-sans);
--font-bold : var(--font-sans);
--font-weight-regular : 400;
--font-weight-medium : 500;
--font-weight-semibold : 600;
--font-weight-bold : 700;
}