.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-e561575:#FF622E;--e-global-color-7cd4d52:#006878;--e-global-color-300261d:#E0CE68;--e-global-color-8f244c4:#75C9DA;--e-global-color-8f38a88:#6B415D;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h1{font-family:"DM Sans", Sans-serif;font-size:72px;}.elementor-kit-6 h2{font-family:"DM Sans", Sans-serif;font-size:56px;}.elementor-kit-6 h3{font-family:"DM Sans", Sans-serif;font-size:48px;}.elementor-kit-6 h4{font-family:"DM Sans", Sans-serif;font-size:32px;}.elementor-kit-6 h5{font-family:"DM Sans", Sans-serif;font-size:24px;}.elementor-kit-6 h6{font-family:"DM Sans", Sans-serif;font-size:16px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"DM Sans", Sans-serif;font-size:18px;font-weight:700;text-shadow:0px 0px 10px rgba(0,0,0,0.3);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.project-image-wrap{
position: relative !important;
overflow: hidden;
}

.project-image-wrap .project-cats{
position: absolute !important;
top: 12px;
left: 12px;
z-index: 999;
margin: 0 !important;

/* make sure the widget itself can span the container */
width: calc(100% - 24px) !important;
}

/* hide icon */
.project-image-wrap .project-cats .elementor-icon-list-icon,
.project-image-wrap .project-cats .elementor-post-info__icon{
display: none !important;
}

/* Force the terms list wrapper to always have full width (fixes 2-tag weird wrap) */
.project-image-wrap .project-cats .elementor-post-info__terms-list{
display: flex !important;
flex-wrap: wrap !important;

column-gap: 4px !important;
row-gap: 8px !important;

width: 100% !important;
min-width: 0 !important;

/* keep inside the image area */
max-width: 100% !important;

/* hide literal comma text nodes */
color: transparent !important;
text-shadow: none !important;
}

/* pill styling */
.project-image-wrap .project-cats .elementor-post-info__terms-list-item{
display: inline-flex !important;
align-items: center;

padding: 5px 12px;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 700;

white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
hyphens: none !important;

/* restore text color */
color: #fff !important;

text-decoration: none;
background: rgba(0,0,0,0.55);
}

/* colors by slug */
.project-image-wrap .project-cats a[href*="vakmanschap-en-uitvoering"]{ background:#75C9DA; }

.project-image-wrap .project-cats a[href*="nieuw-interieur-of-werkomgeving"]{ background:#138A58; }

.project-image-wrap .project-cats a[href*="interieurbouw-partner"]{ background:#FF5958; }

.project-image-wrap .project-cats a[href*="doordachte-herinrichtingen"]{ background:#32A3BC; }

.project-image-wrap .project-cats a[href*="het-huisvestingsvraagstuk"]{ background:#214FD1; }





/* ----- Center everything in one row ----- */
.elementor-pagination,
.elementor-pagination nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 22px !important;
    margin-top: 30px;
}

/* Ensure items stay inline */
.elementor-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Page Numbers Styling
   ============================================ */

.elementor-pagination
.page-numbers:not(.prev):not(.next) {
    background: none !important;
    border: none !important;
    padding: 0 !important;

    font-size: 22px;
    font-weight: 500;
    color: #222;
    text-decoration: none !important;

    position: relative;
    transition: color 0.3s ease;
}

/* Active page number */
.elementor-pagination .page-numbers.current {
    color: #ff4a00 !important;
    font-weight: 600;
}

/* Underline effect */
.elementor-pagination
.page-numbers:not(.prev):not(.next)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    background: transparent;
    transition: background 0.3s ease;
}

/* Hover underline */
.elementor-pagination
.page-numbers:not(.prev):not(.next):hover::after {
    background: #ff4a00;
}

/* Active underline */
.elementor-pagination .page-numbers.current::after {
    background: #ff4a00;
}

/* ============================================
   Prev / Next Arrow Styling (Correct Direction)
   ============================================ */

/* Hide the label text ("prev"/"next") */
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next {
    font-size: 0 !important;
    padding: 0 !important;
}

/* --------------------------
   PREVIOUS Arrow (← LEFT)
   -------------------------- */

/* Clickable previous link */
.elementor-pagination a.page-numbers.prev::before {
    content: "←";
    font-size: 26px;
    color: #ff4a00;
    transition: color 0.3s ease;
}

/* Disabled previous arrow (span on page 1) */
.elementor-pagination span.page-numbers.prev::before {
    content: "←";
    font-size: 26px;
    color: #aaa !important;
    opacity: 0.6;
    cursor: default;
}

/* --------------------------
   NEXT Arrow (→ RIGHT)
   -------------------------- */

/* Clickable next link */
.elementor-pagination a.page-numbers.next::before {
    content: "→";
    font-size: 26px;
    color: #ff4a00;
    transition: color 0.3s ease;
}

/* Disabled next arrow (span on last page) */
.elementor-pagination span.page-numbers.next::before {
    content: "→";
    font-size: 26px;
    color: #aaa !important;
    opacity: 0.6;
    cursor: default;
}

/* Hover effect (only clickable arrows) */
.elementor-pagination a.page-numbers.prev:hover::before,
.elementor-pagination a.page-numbers.next:hover::before {
    color: #cc3a00 !important;
}


/* 1. Ensure all buttons have a smooth transition */
.elementor-button {
    transition: all 0.3s ease-in-out !important;
}

/* 2. Target ONLY the orange buttons using their specific color */
/* This looks for buttons that have your orange hex in their inline style */
.elementor-button[style*="background-color: #FF622E"]:hover,
.elementor-button[data-element_type="button"]:hover {

}

.elementor-button:hover {
    transform: rotate(-3deg) !important;
    background-color: #9FE4F7 !important;
}/* End custom CSS */