/*
Theme Name: Levelfour
Theme URI: https://beeseen.nl
Author: beeSeen
Author URI: https://beeseen.nl
Description: Levelfour theme with WPBakery, RevSlider, Bootstrap, Font Awesome, Swiper, CPTs, and Inter font.
Version: 1.3.3
License: GPL-2.0-or-later
Text Domain: levelfour
*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    --clr-bg: #ffffff;
    --clr-body: #252525;
    --clr-muted: #f5f5f5;
    --clr-border: #E5E7EB;
    --clr-card: #F7F7F8;
    --clr-dark: #000000;
    --clr-light: #FFFFFF;
    --clr-primary: #f4760c;
    --clr-primary-600: #E26F12;
    --clr-primary-50: #FFF3E8;
    --clr-secondary: #515151;
    --clr-focus: #2563EB;
    --rad-sm: 8px;
    --rad-md: 14px;
    --rad-lg: 22px;
    --rad-theme: 0 20px 0 20px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 20px rgba(17, 17, 17, .08);
    --ff-base: 'Montserrat', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fs-body: 1rem;
    --fs-xsm: 0.85rem;
    --fs-sm: 0.9rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.55rem;
    --fs-xlg: 2rem;
    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 700;
    --fw-black: 700;
    --lh: 1.5;
    --container: 1200px;
    --gutter: 20px;
    --bs-nav-link-font-size: 1.1rem;
}

.txt-primary {
    color: var(--clr-primary);
}

html, body {
    height: 100%
}

body {
    margin: 0;
    background: var(--clr-bg);
    color: var(--clr-body);
    font-family: var(--ff-base);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh)
}

.section {
    padding: 48px 0
}

.section--muted {
    background: var(--clr-card)
}

.lead {
    color: var(--clr-muted)
}

.card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(17, 17, 17, .08);
    overflow: hidden
}

/*.vc_col-has-fill>.vc_column-inner,*/
/*.vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner,*/
/*.vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner,*/
/*.vc_row-has-fill>.vc_column_container>.vc_column-inner {*/
/*    padding-top: 55px!important;*/
/*}*/

.vc_col-has-fill.cta-sector>.vc_column-inner,
.vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container.cta-sector>.vc_column-inner,
.vc_row-has-fill+.vc_row>.vc_column_container.cta-sector>.vc_column-inner,
.vc_row-has-fill>.vc_column_container.cta-sector>.vc_column-inner {
    padding: 0!important;
    padding-top: 0!important;
}

/* Floating contact-bar */
.lf-floating-bar {
    position: fixed;
    bottom: 40%;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    background-color: #e4e4e4;
    border-radius: var(--rad-theme);
}

.lf-floating-bar.lf-right {
    right: 0;
    left: auto;
}

.lf-floating-bar.lf-left {
    left: 0;
    right: auto;
}

.lf-floating-bar .lf-fb-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-body, #1a1a1a);
    padding: 10px 14px;
    text-decoration: none;
    font-weight: 600;
}

.lf-floating-bar .lf-fb-btn .fa-solid,
.lf-floating-bar .lf-fb-btn .fa-brands{
    font-size: 16px;
    line-height: 1;
}

.lf-floating-bar .lf-fb-btn:hover {
    color: var(--clr-primary);
}

@media (max-width: 640px){
    .lf-floating-bar .lf-fb-btn{ padding: 10px 12px; }
}

/* Buttons */
.btn-lf, .btn-lf-btn button, .btn-lf-btn a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    padding: .7rem 1rem!important;
    font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    transition: .2s ease
}

.btn-lf-primary  {
    border-color: var(--clr-primary);
    color: var(--clr-light);
    border-radius: var(--rad-theme);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-sm);
    background-color: var(--clr-primary);
}

.btn-lf-primary:hover  {
    border-color: var(--clr-primary);
    color: var(--clr-light);
    background-color: var(--clr-primary);
}

.btn-lf-secondary  {
    border-color: var(--clr-primary);
    color: var(--clr-light);
    border-radius: var(--rad-theme);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-sm);
    background-color: var(--clr-secondary);
}

.btn-lf-secondary:hover  {
    border-color: var(--clr-primary);
    color: var(--clr-light);
    background-color: var(--clr-secondary);
}

.btn-lf-light  {
    border-color: var(--clr-light);
    color: var(--clr-primary);
    border-radius: var(--rad-theme);
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-sm);
    background-color: var(--clr-light);
}

.btn-lf-light:hover  {
    border-color: var(--clr-light);
    color: var(--clr-light);
    background-color: var(--clr-primary);
}

.btn-lf-primary-outline, .btn-el-lf-primary-outline a  {
    border-color: var(--clr-primary)!important;
    color: var(--clr-primary)!important;
    border-radius: var(--rad-theme)!important;
    border-width: 2px!important;
    font-weight: var(--fw-semi-bold)!important;
    font-size: var(--fs-sm)!important;
}

.btn-lf-primary-outline:hover, .btn-el-lf-primary-outline a:hover {
    color: var(--clr-light)!important;
    background-color: var(--clr-primary)!important;
    border-color: var(--clr-primary)!important;
}

.btn-secondary-outline a {
    padding: 10px 25px!important;
}

.btn-lf-secondary-outline, .btn-secondary-outline a {
    border-color: var(--clr-secondary)!important;
    color: var(--clr-secondary)!important;
    border-radius: var(--rad-theme)!important;
    border-width: 2px!important;
    font-weight: var(--fw-semi-bold)!important;
    font-size: var(--fs-sm)!important;
    background-color: var(--clr-light)!important;
}

.btn-lf-secondary-outline:hover, .btn-secondary-outline a:hover {
    color: var(--clr-light)!important;
    background-color: var(--clr-secondary)!important;
    border-color: var(--clr-secondary)!important;
    background-image: none!important;
}

.btn-lf-light-outline, .btn-lf-light-outline button, .btn-lf-light-outline a {
    border-color: var(--clr-light)!important;
    color: var(--clr-light)!important;
    border-radius: var(--rad-theme)!important;
    border-width: 2px!important;
    font-weight: var(--fw-semi-bold)!important;
    font-size: var(--fs-sm) !important;
    background-image: none!important;
    background-color: transparent !important;
    padding-top:10px!important;
    padding-bottom:10px!important;
}

.btn-lf-light-outline:hover, .btn-lf-light-outline-btn button:hover, .btn-lf-light-outline-btn a:hover {
    color: var(--clr-primary);
    background-color: var(--clr-light);
}

.btn-lf-ghost {
    background: transparent;
    border-color: var(--clr-border);
    border-radius: var(--rad-theme);
}

.btn-lf-chip {
    background: var(--clr-primary);
    color: #fff;
    padding: .55rem .85rem;
    font-size: .9rem
}

.all-btn button, .sector-btn a {
    border-color: var(--clr-primary) !important;
    color: var(--clr-light) !important;
    border-radius: var(--rad-theme) !important;
    font-weight: var(--fw-semi-bold);
    font-size: var(--fs-md) !important;
    background-color: var(--clr-primary) !important;
    background-image: none !important;
}

.all-btn button {
    padding: 10px 48px 10px 20px !important;

}

.sector-btn a {
    position: absolute !important;
    right: 0;
    margin-top: 20px;
    font-size: var(--fs-xsm) !important;
    padding: 10px 48px 10px 20px !important;
}

/* Top bar (sectors) */
.tabs {
    display: flex;
    background: var(--clr-dark);
    color: #fff;
    border-radius: 0 0 0 20px;
    height: 40px;
    margin: 0;
    padding-right: 0;
}

.top-bar .nav-link {
    color: #fff;
    font-size: var(--fs-body);
    font-weight: var(--fw-semi-bold);
}

.top-bar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--clr-primary);
}

.top-bar .nav-link.active {
    color: var(--clr-primary);
    background-color: transparent;
}

.nav-pills .nav-item.ev .nav-link {
    background: #f4760c;
    border-radius: 0 0 0 20px;
}

.nav-pills .nav-item.ev .nav-link:hover {
    color: var(--clr-dark);
}

/* Header + nav */
.site-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 30
}

.navbar-brand img {
    max-width: 100%;
    height: 50px;
    width: auto;
}

.navbar-nav .nav-link {
    color: var(--clr-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.navbar-nav .nav-link:hover {
    color: var(--clr-primary);
}

.navbar-nav .nav-link.active {
    color: var(--clr-primary)
}

/* Grids */
.container-narrow {
    max-width: var(--container);
    margin: auto;
    padding: 0 var(--gutter)
}

/* Sector cards */
.sector .vc_grid-item .vc_grid-item-mini .vc_gitem-zone {
    border-radius: 0 20px 0 0;
}

.sector .vc_grid-item .vc_grid-item-mini .vc_gitem-animated-block .vc_gitem-zone {
    border-radius: 0 0 0 20px;
    overflow: visible;
}

.sector .vc_custom_heading {
    margin-bottom: 0;
}

.sector h4 {
    color: var(--clr-light);
    font-size: var(--fs-body);
    padding-left: 15px;
    margin-bottom: 0;
}
.label {
    position: absolute;
    left: 12px;
    top: 12px;
    background: #111;
    color: #fff;
    padding: .4rem .6rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: .9rem
}

.sector__cta {
    position: absolute;
    left: 12px;
    bottom: 12px
}

.sector:hover .sector__media img {
    transform: scale(1.03)
}

/* USP tiles */
/* Todo: check mobile reaction */
.usp-item:not(:first-child) {
    margin-left: -8px;
}

.usp-item .vc_column-inner> .wpb_wrapper {
    border-radius: var(--rad-theme);
    background-color: #fff;
    padding: 25px;
    margin-right: -15px;
}

.usp .wpb_single_image {
    margin-bottom: 18px;
}

.usp .wpb_text_column  {
    margin-bottom: 0;
}

.usp img {
    max-height: 100px;
}

.usp h3 {
    color: var(--clr-dark);
    font-size: 1.3rem;
}

/* Packages */
.package-image .vc_grid-item-mini {
    border-radius: var(--rad-theme);
}

.package-price {
    color: var(--clr-primary);
    font-size: 1.5rem;
    font-weight: var(--fw-semi-bold);
}

/* Brands */
.brands .vc_item {
    display: flex;
    align-items: center;
}

.brands .vc_item .vc_inner {
    margin: 0 auto!important;
    padding:0 20px;
}

.brands .vc_item .vc_inner img {
    max-height: 50px;
    width: auto;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.brands .vc_item .vc_inner img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* Banner */
.banner-txt h4{
    color: var(--clr-light);
}

/* Footer */
footer h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}

footer .nav-link {
    padding: 0;
    font-size: var(--fs-md);
    color: var(--clr-secondary);
    font-weight: var(--fw-light);
}

footer .nav-link:hover {
    color: var(--clr-primary);
}

.site-footer {
    padding: 32px 0;
    background: #ffffff;
    color: var(--clr-body)
}

.site-footer a {
    color: var(--clr-primary);
    opacity: .95
}

.site-footer a:hover {
    opacity: 1
}

.footer-logo img {
    height: 75px;
    width: auto;
    max-width: 100%;
}

body, p, li {
    color: var(--clr-body)
}

h1 {
    color: var(--clr-light)
}

h2 {
    color: var(--clr-primary);
    font-size: var(--fs-lg);
    font-weight: var(--fw-light);
}

h3, h4, h5, h6 {
    color: var(--clr-secondary)
}

h4 {
    font-weight: var(--fw-semi-bold);
}

a {
    color: var(--clr-body);
    text-decoration: none
}

a:hover, a:focus {
    color: var(--clr-primary)
}

/* Services */
.service-usp .vc_icon_element {
    margin: 0;
    padding: 30px;
    border-radius: 0 20px 0 0;
}
.service-usp .wpb_text_column h3 {
    font-size: var(--fs-md);
    margin-bottom:0;
    color: var(--clr-light);
}

.service-usp .wpb_text_column p {
    color: #c3c3c3;
    font-size: var(--fs-xsm);
    font-weight: 300;
}

.service-usp .wpb_text_column {
    color: var(--clr-light);
    border-radius: var(--rad-theme);
    padding: 20px;
}

.service-usp-list {
    border-radius: var(--rad-theme);
}

.service-usp-list li {
    color: var(--clr-light);
    margin-bottom: 5px;
}

.service-usp-list ul {
    list-style-type: none;
    padding: 25px
}

.post-main h1 {
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 600;
}

article h2 {
    color: var(--clr-body);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.4;
}

article p {
    font-size: 1.1rem;
    font-weight: 300;
    margin-top: 1.5rem;
    margin-bottom: 0;
}

.post-meta {
    font-size: var(--fs-xsm);
}

.post-meta a {
    text-transform: uppercase;
    font-weight: var(--fw-light);
}

.post-hero-image img {
    max-height: 250px;
    width: auto;
    border-radius: var(--rad-theme);
}

.lf-radius {
    border-radius: var(--rad-theme);
    border: 0;
    box-shadow: none;
}

/* CTA onder berichten */
.lf-cta-row {
    height: 275px;
    border-radius: var(--rad-theme);
    overflow: hidden;
    background-color: var(--clr-primary);
}

.lf-cta-row h3 {
    font-weight: var(--fw-regular);
    font-size: var(--fs-lg);
}

.lf-cta-row .btn-lf {
    font-weight: var(--fw-medium);
    font-size: var(--fs-body);
}

.lf-cta-left {
    color: var(--clr-light);
}

.lf-cta-left .text-white-75 {
    color: rgba(255,255,255,.9);
}

.lf-cta-right {
    max-height: 275px;
}

.lf-cta-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
}

/* Footer sliders spacing */
.lf-footer-vc, .lf-footer-revslider {
    margin-top: 2.5rem;
    argin-bottom: 2.5rem;
}

blockquote {
    position: relative;
    background-color: var(--clr-muted);
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    margin-top: 1.5rem;
    border-radius: var(--rad-theme);
    text-align: center;
}

blockquote p {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi-bold);
    margin:0;
}

blockquote::before,
blockquote::after {
    content: "“";
    font-family: Georgia, serif;
    font-size: 6rem;
    color: var(--clr-primary);
    position: absolute;
}

blockquote::before {
    content: "“";
    top: -1rem;
    left: 1rem;
}

blockquote::after {
    content: "”";
    bottom: -4rem;
    right: 1rem;
}
.owl-height, .klantverhaal {
    height: 525px !important;
}

@media (max-width: 576px) {
    .owl-height, .klantverhaal {
        height: 1500px !important;
    }
}

.klantverhaal-img {
    min-height: 525px!important;
    border-bottom-left-radius: 20px;
}

.klantverhaal .vc_gitem-col:last-child {
    min-height: 525px!important;
    border-top-right-radius: 20px;
    color: var(--clr-light);
}

.kv-subtitle {
    font-size: 1.3rem;
    line-height: 1.1;
    font-weight: var(--fw-extra-light);
    margin-bottom: 25px;
}

.kv-excerpt {
    font-size: var(--fs-body);
    margin-bottom: 25px;
    font-weight: var(--fw-extra-light);
}

.kv-title div::before {
    content: "- ";
}

.kv-title div::after {
    content: " -";
}

.kv-title {
    color: var(--clr-primary);
    font-size: var(--fs-md);
    font-style: italic;
    font-weight: var(--fw-extra-light);
    margin-bottom: 40px!important;
}

.kv-btn button, .kv-btn a {
    border-radius: var(--rad-theme)!important;
    border: 1px solid var(--clr-light)!important;
    color: var(--clr-light)!important;
    background-color: transparent!important;
    padding: 10px 48px 10px 25px!important;
    background-image: none!important;
}

.vc_grid-owl-dots.vc_grid-radio_dots.vc_grid-owl-dots-color-grey.disabled {
    margin-top: 30px;
}

.vc_grid.vc_grid-owl-theme .vc_grid-owl-dots.vc_grid-radio_dots.vc_grid-owl-dots-color-grey .vc_grid-owl-dot.active span {
    background-color: var(--clr-primary)!important;
    border-color: var(--clr-primary)!important;
    height: 15px;
    width: 15px;
    border-radius: 100%;
}

.cta-sector .vc_column-inner {
    border-radius: 0 20px 0 20px;
}

.text-white p {
    color: var(--clr-light);
}

.vacature-img {
    border-top-right-radius: 20px;
}

.vacature-element {
    border-bottom-left-radius: 20px;
}

.vacature-title h3 {
    color: var(--clr-primary);
    font-size: 1.3rem;
    font-weight: 700;
}

.vacature-excerpt p{
    font-size: 0.9rem;
    margin-bottom: 30px;
}

.more-info .vc_column-inner {
    justify-content: end;
    display: flex;
}

.more-info .wpb_text_column {
    border-radius: 0 20px 0 20px;
}

.more-info-icons {
    width: 200px;
    border-radius: 0 20px 0 20px;
    height: 40px;
}

.more-info-icons .vc_col-sm-4 {
    margin-top: -9px;
}

.lf-border-rounded {
    border-radius: var(--rad-theme);
    border: 2px solid #515151;
}

.btn-check input[type="radio"]:checked+.btn {
    border-radius: 0 20px 0 20px;
    background-color: #f4760c;
    border: 1px solid #f4760c;
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1030px;
    }
}

/* form label floating */
.form-floating {
    position: relative;
}

.form-floating > label {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    transition: all 0.15s ease;
    pointer-events: none;
    opacity: 0.7;
}

.form-floating.is-filled > label,
.form-floating:focus-within > label {
    top: 0.3rem;
    transform: none;
    font-size: 0.75rem;
    opacity: 0.9;
}

.form-floating textarea.wpcf7-form-control,
.form-floating textarea.form-control {
    padding-top: 1.75rem;
    min-height: 100px;
}