/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ----- General BEGIN ----- */

.grecaptcha-badge {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.met_desc-ct.elementor-widget-text-editor a,
.sm-ct-desc.elementor-widget-text-editor a {
	color: #8A4096;
	text-decoration: underline;
	transition: .3s;
}

.met_desc-ct.elementor-widget-text-editor a:hover,
.sm-ct-desc.elementor-widget-text-editor a:hover {
	color: #222;
}

.sm-ct-desc.elementor-widget-text-editor :is(ul, ol) {
	padding-left: 20px;
	margin-bottom: 20px;
}

/* FILTERS OP ONS WERK PAGINA - TIJDELIJK UITGEZET */
.filter-tab {
	display: none !important;
}

/* ----- General END ----- */


/* ----- Header BEGIN ----- */

.menu-badge {
	position: absolute;
    top: -9px;
    right: 7px;
    font-size: 12px;
    background-color: #8a4097;
    color: #fff;
    width: 22px;
    height: 22px;
    line-height: 18px;
    border-radius: 20px;
    text-align: center;
    text-indent: 1px;
    font-weight: 700;
    border: 2px solid #fff;
}

/* ----- Header END ----- */


/* ----- Homepage BEGIN ----- */

.animate-type-title h1 {
	min-height: 280px;
}

/* Container & track */
.slider-container {
	overflow: hidden;
	width: calc(50% - 15px);
}
.slider-track {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Slides desktop (verticaal) */
.bnnr_img-slide {
	flex-shrink: 0;
	width: 100%;
	aspect-ratio: 67 / 84;
}
.bnnr_img-slide a{
	height: 100%;
	display: flex;
	overflow: hidden;
	border-radius: 10px;
}
.bnnr_img-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.team_img-hover {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
	transition: .3s;
}

.team_outer-box:hover .team_img-hover,
.team_slide-ct-img:hover > .team_img-hover {
	opacity: 1;
}

.team_slide-ct-img {
	position: relative;
}

/* Vanaf 992px → horizontaal scrollen */
@media (max-width: 991px) {
	.slider-container {
		width: 100%;
		overflow: visible;
	}
	.slider-track {
		flex-direction: row;
		gap: 20px;
	}
	/* 3 slides per view */
	.bnnr_img-slide {
		width: calc((100% - 2 * 30px) / 3);
		aspect-ratio: 311 / 214;
	}
}

/* <576px → 2 slides per view */
@media (max-width: 576px) {
	.bnnr_img-slide {
	width: calc((100% - 1 * 30px) / 2);
	}
}
  

/* ----- Homepage END ----- */


/* ----- Vacature detail BEGIN ----- */

.vacature-list-details .elementor-image-box-content {
	display: flex;
    column-gap: 10px;
}

/* ----- Vacature detail END ----- */


/* ----- Diensten BEGIN ----- */

.onze_werk_projects.related_cases {
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 20px;
}

/* ----- Diensten END ----- */


/* ----- Footer BEGIN ----- */

.footer-whatsapp a {
	width: 46px !important;
    height: 47px;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    color: #222222;
    position: relative;
}

.footer-whatsapp a::before {
	content: '' !important;
    position: absolute;
    width: 46px;
    height: 47px;
    top: 50%;
    left: 50%;
    background-image: url('https://www.purplemedia.nl/wp-content/uploads/2025/06/plectrum-whatsapp.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transform: translate(-50%, -50%);
    transition: 0.3s all;
}
.footer-whatsapp a:hover::before {
	background-image: url('https://www.purplemedia.nl/wp-content/uploads/2025/06/plectrum-whatsapp-hover.svg');
}

.footer-whatsapp a > svg {
	z-index: 1;
	transition: 0.3s all;
}

.footer-whatsapp a:hover > svg path {
	fill: #fff;
}

/* ----- Footer END ----- */


/* ----- Elementor Custom Widgets ----- */

.diensten-lijst-icon {
	width: 28px;
	height: 28px;
}

.diensten-lijst-icon svg {
	width: 100%;
	height: 100%;
}

.pm-afbeeldingen-blok {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

.pm-afbeeldingen-blok img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 10px;
}

.pm-video-embed-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9; /* of gebruik 4 / 3 indien gewenst */
	overflow: hidden;
	border-radius: 10px;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.pm-video-embed-wrapper iframe.pm-video-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.pm-video-poster {
	height: 100%;
}

.pm-video-embed-wrapper {
	position: relative;
}

/* ---------- GLASS BUTTON (50x50) ---------- */
.pm-video-sound-toggle {
    position: absolute;
    left: 12px;
    bottom: 12px;
    width: 50px;
    height: 50px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.28);

    /* Glassmorphism */
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);

    display: flex;
    align-items: flex-end;      /* icoon onder uitlijnen */
    justify-content: flex-start;/* icoon links uitlijnen */
    padding: 10px;              /* ruimte zodat icoon mooi uitlijnt */

    cursor: pointer;
    z-index: 10;

    /* Apple shadow */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 4px 20px rgba(0,0,0,0.25);

    transition:
        background 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

/* Hover effect */
.pm-video-sound-toggle:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.4);
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.33),
        0 6px 24px rgba(0,0,0,0.28);
}

.pm-video-sound-toggle:active {
    transform: scale(0.96);
    background: rgba(255,255,255,0.26);
}

.pm-video-sound-toggle:focus {
	background: rgba(255, 255, 255, 0.16) !important;
}

/* ---------- SVG ICON (25px) ---------- */
.pm-video-sound-svg {
    width: 25px;
    height: 25px;
    stroke: #fff;
}

/* Speaker base */
.pm-video-sound-svg .icon-speaker path {
    fill: #fff;
}

/* Lines (slash + waves) */
.pm-video-sound-svg .icon-slash path,
.pm-video-sound-svg .icon-waves path {
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity 0.25s ease;
}

/* Muted */
.pm-video-sound-toggle.is-muted .icon-slash {
    opacity: 1;
}
.pm-video-sound-toggle.is-muted .icon-waves {
    opacity: 0;
}

/* Unmuted */
.pm-video-sound-toggle.is-unmuted .icon-slash {
    opacity: 0;
}
.pm-video-sound-toggle.is-unmuted .icon-waves {
    opacity: 1;
}

/* Optional: focus ring */
.pm-video-sound-toggle:focus-visible {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: 4px;
    border-radius: 20px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-8  { flex: 0 0 calc(66.666% - 15px); max-width: calc(66.666% - 15px); }
.col-6  { flex: 0 0 calc(50% - 15px); max-width: calc(50% - 15px); }
.col-4  { flex: 0 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); }

/* .pm-afbeelding-item.col-4 {
	aspect-ratio: 1 / 1;
}

.pm-afbeelding-item.col-12 {
	aspect-ratio: 19 / 6;
} */

.pm-afbeeldingen-3 .col-4 {
	flex: 0 0 calc(33.333% - 20px);
	max-width: calc(33.333% - 20px);
}

.pm-faq-cta {
	background: #f9f9f9;
	padding: 40px;
	border-radius: 5px;
	margin-top: 50px;
	margin-bottom: 50px;
}

.pm-faq-title {
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 5px;
}

.pm-faq-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem 0;
}

.pm-faq-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 2px;
	font-size: 18px;
	line-height: 28px;
}

.pm-faq-icon {
	width: 20px;
	height: 20px;
	margin-top: 4px;
}

.pm-faq-cta-button .pm-button {
	display: inline-block;
	padding: 15px 18px 17px;
    font-size: 18px;
    font-weight: 500;
	background-color: #8A4096;
	color: #fff;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
}

/* ----- Responsive BEGIN ----- */

@media only screen and (max-width: 1440px) {
	.animate-type-title h1 {
		min-height: 250px;
	}
}

@media only screen and (max-width: 1200px) {
	.onze_werk_projects.related_cases .onze_slide .onze_inner-ct > img {
		aspect-ratio: 3 / 4;
		height: auto;
	}
	.animate-type-title h1 {
		min-height: 220px;
	}
    .pm-afbeeldingen-blok {
        gap: 20px;
    }
    
    .col-8 { flex: 0 0 calc(66.666% - 10px); max-width: calc(66.666% - 10px); }
    .col-4 { flex: 0 0 calc(33.333% - 10px); max-width: calc(33.333% - 10px); }
    
    .pm-afbeeldingen-3 .col-4 {
		flex: 0 0 calc(33.333% - 15px);
		max-width: calc(33.333% - 15px);
    }
    
    .pm-faq-cta {
        padding: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
    }
    
    .pm-faq-cta-button .pm-button {
        font-size: 16px;
    }
}

@media only screen and (max-width: 991px) {
	.animate-type-title h1 {
		min-height: 100px;
	}
    .pm-faq-title {
        font-size: 18px;
        line-height: 28px;
    }
    .pm-faq-item {
        font-size: 16px;
        line-height: 26px;
    }
    .pm-faq-list {
        margin: 0 0 25px 0;
    }
	.menu-badge {
		border: unset;
		width: 20px;
		height: 20px;
		line-height: 20px;
		text-indent: 0;
		top: -10px;
    	right: -15px;
	}
	.pop_menu-widget li.menu-item > a {
		display: inline-flex;
	}
}

@media only screen and (max-width: 767px) {
	.slider-track {
		gap: 10px;
	}
	.related-cases-section {
		margin-right: -20px;
		margin-left: -20px;
		width: calc(100% + 40px);
	}
	.related-cases-section .sm-title-box {
		padding: 0 20px;
	}
	.onze_werk_projects.related_cases {
		display: flex;
		flex-wrap: nowrap;
		padding: 0px 20px 20px 20px;
		overflow-x: scroll;
	}

	.onze_werk_projects.related_cases::-webkit-scrollbar {
        height: 8px;
    }
	.onze_werk_projects.related_cases::-webkit-scrollbar-track {
        background: #EDEDED;
        border-radius: 20px;
		margin: 0 20px;
    }
	.onze_werk_projects.related_cases::-webkit-scrollbar-thumb {
        background: #8A4096;
        border-radius: 20px;
		border: 2px solid transparent;
        background-clip: content-box;
    }
	.onze_werk_projects.related_cases .onze_slide {
		min-width: 300px;
	}
	.onze_werk_projects.related_cases .onze_slide .onze_inner-ct > img { 
		aspect-ratio: 16 / 13;
	}
	.sm-ct-desc.elementor-widget-text-editor ul {
		margin-bottom: 10px;
	}
    .pm-afbeeldingen-blok {
        gap: 10px;
    }
    
    /* .col-8 { flex: 0 0 calc(63% - 5px); max-width: calc(63% - 5px); }
    .col-4 { flex: 0 0 calc(37% - 5px); max-width: calc(37% - 5px); } */
    
    .pm-afbeeldingen-3 .col-4 {
		flex: 0 0 calc(33.333% - 7px);
		max-width: calc(33.333% - 7px);
    }
    
    /* .pm-afbeelding-item.col-12 {
        aspect-ratio: 19 / 7;
    } */
    
    .bekijk-onze-btn.neem_contact-btn-op a.elementor-button {
        padding: 9px 15px 11px 15px;
    }
    
    .pm-faq-cta {
        width: calc(100% + 40px);
        margin: 30px 0 30px -20px;
    }
}

@media only screen and (max-width: 700px) {
	.animate-type-title h1 {
		min-height: 185px;
	}
}

@media only screen and (max-width: 480px) {
	.animate-type-title h1 {
		font-size: 9.8vw !important;
		line-height: 1.1 !important;
		min-height: 45vw;
	}
    .pm-afbeeldingen-3 .col-4 {
    	flex: 0 0 calc(50% - 5px);
    	max-width: calc(50% - 5px);
    }
    .pm-afbeeldingen-3 .col-4:last-child {
        flex: 0 0 100%;
    	max-width: 100%;
    	aspect-ratio: 35 / 17;
    }
	.pm-faq-title {
		margin-bottom: 20px;
		line-height: 20px;
	}
	.pm-faq-item {
		margin-bottom: 10px;
		line-height: 20px;
	}
	.pm-faq-icon {
		margin-top: 2px;
	}
	.pm-faq-cta-button .pm-button {
		width: 100%;
		line-height: 20px;
	}
	.pm-faq-list {
		margin: 0 0 30px 0;
	}
	.pm-faq-cta {
		padding: 30px 20px;
	}
	.vacature-list-details .elementor-image-box-content .elementor-image-box-description {
		align-content: center;
	}
}

@media only screen and (max-width: 375px) {
	.animate-type-title.pm_bnnr-title h1 {
		font-size: 9.4vw !important;
		line-height: 1.1 !important;
		min-height: 42vw;
	}
}

/* ----- Responsive END ----- */