/*
Theme Name: QuickOnline Child
Theme URL: https://inbeveiliging.nl/
Description: Child theme voor In Beveiliging
Author: QuickOnline B.V.
Author URL: https://quickonline.nl/
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Standaard (Desktop) */
.text-outline, .text-outline * {
    color: transparent !important;
    -webkit-text-stroke: 3px white !important;
    text-stroke: 3px white !important;
}

/* Tablet (max 1024px) */
@media (max-width: 1024px) {
    .text-outline, .text-outline * {
        -webkit-text-stroke: 2px white !important;
        text-stroke: 2px white !important;
    }
}

/* Mobiel (max 768px) */
@media (max-width: 768px) {
    .text-outline, .text-outline * {
        -webkit-text-stroke: 1px white !important;
        text-stroke: 1px white !important;
    }
}

#cmplz-message-1-optin {
    animation: fadeIn 0.5s ease-in 2s; /* Verschijnt na 2 seconden */
}

.img-container, .img-container>div{
  height: 100%;
}

.img-container img{
	width: 100%;
	height: 100%;
	object-fit: cover; /* Zorgt dat de afbeelding de hele container vult */
	position:absolute;
	top:0;
	left:0;
}


/* Tekstknop styling */
.knop-meer-over-ons .elementor-button {
    padding: 0;
}

.knop-meer-over-ons .elementor-button-icon svg {
    fill: #FCCF30 !important; /* Oranje kleur */
}

.knop-meer-over-ons .elementor-button:hover .elementor-button-icon i,
.knop-meer-over-ons .elementor-button:hover .elementor-button-icon svg {
    transform: translateX(5px); /* Schuift 5px naar rechts */
    transition: all 0.3s ease-in-out;
}

/* Tekstknop */ 
.knop-meer-over-ons .elementor-button {
    padding: 0;
}

.knop-meer-over-ons .elementor-button-icon svg {
    fill: #FCCF30 !important; /* Oranje kleur */
}


.elementor-button:hover .elementor-button-icon i,
.elementor-button:hover .elementor-button-icon svg {
    transform: translateX(5px); /* Schuift 5px naar rechts */
    transition: all 0.3s ease-in-out;
}




/* Accordion styling */
/* Alleen accordeon-items binnen een container met class 'accordion' */
.accordion .e-n-accordion-item {
    border-bottom: 1px solid #FFFFFF;
    margin-bottom: 20px; /* optioneel */
}

/* Verwijder de originele border onder de titel */
.accordion .e-n-accordion-item-title {
    border-bottom: none !important;
}


/* Afbeelding hoek links */
.afbeelding-hoek-links {
    position: relative;
    display: inline-block;
}

/* Gele driehoek */
.afbeelding-hoek-links::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    background-color: #FFC107;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 1;
}

/* Zwarte overlay driehoek */
.afbeelding-hoek-links::after {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    width: 120px;
    height: 120px;
    background-color: #141414;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2;
}

/* Responsieve aanpassing voor mobiele schermen */
@media screen and (max-width: 768px) {
    .afbeelding-hoek-links::before,
    .afbeelding-hoek-links::after {
        width: 60px;
        height: 60px;
    }

    .afbeelding-hoek-links::after {
        top: -2px;
        left: -2px;
    }
}



.afbeelding-hoek-rechts {
    position: relative;
    display: inline-block;
}

.afbeelding-hoek-rechts::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background-color: #FFC107;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 1;
}

.afbeelding-hoek-rechts::after {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 120px;
    height: 120px;
    background-color: #141414;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    z-index: 2;
}

/*  Responsieve aanpassing voor mobiel */
@media screen and (max-width: 768px) {
    .afbeelding-hoek-rechts::before,
    .afbeelding-hoek-rechts::after {
        width: 60px;
        height: 60px;
    }

    .afbeelding-hoek-rechts::after {
        top: -2px;
        right: -2px;
    }
}