/*
Theme Name: QuickOnline Child
Theme URL: https://jouwslimmetuin.nl/
Description: Child theme voor Jouw Slimme Tuin
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 */
}

/* Afbeelding auto uitvullen */
.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;
}

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

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

/* Knop animatie icoon */
.elementor-button-content-wrapper {
  display: inline-flex;  /* Zorgt ervoor dat tekst en icoon netjes uitgelijnd blijven */
  align-items: center;   /* Centreert de items verticaal */
  gap: 5px; /* Zorgt voor wat ruimte tussen tekst en icoon */
}

.elementor-button-icon {
  display: flex; /* Zorgt ervoor dat het icoon zich correct gedraagt */
  align-items: center; /* Centreert het icoon binnen zijn container */
  justify-content: center;
}

.elementor-button-icon svg {
  position: relative;
  top: -1px; /* Pas dit aan om het icoon exact goed uit te lijnen */
}

/* Overzicht foto carrousel */

/* Standaard desktopwaarde */
.blog-img,
.blog-img img {
    max-height: 240px;
}

/* Voor tablets (tot 1024px breed) */
@media (max-width: 1024px) {
    .blog-img,
    .blog-img img {
        max-height: 200px;
    }
}

/* Voor mobiele schermen (tot 767px breed) */
@media (max-width: 767px) {
    .blog-img,
    .blog-img img {
        max-height: 160px;
    }
}

/* Portfolio Hover Effect */
.wrapper-hover-effect {
    position: relative;
    overflow: hidden;
}

.wrapper-hover-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease-in-out;
    z-index: 2; /* Zorgt ervoor dat de overlay boven de afbeelding komt */
}

.wrapper-hover-effect:hover::before {
    background: rgba(0, 0, 0, 0.5);
}

.wrapper-hover-effect .hover-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    z-index: 3; /* Zorgt ervoor dat de knop boven de overlay komt */
}

.wrapper-hover-effect:hover .hover-button {
    opacity: 1;
}

.wrapper-hover-effect img {
    position: relative;
    z-index: 1; /* Zorgt ervoor dat de afbeelding ONDER de overlay blijft */
}

/* Rode lijn boven titels */
 .headline-with-line {
    position: relative;
    display: inline-block;
    padding-top: 20px; /* ruimte voor de lijn */
}

.headline-with-line::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    width: 32px;
    height: 4px;
    background-color: #C7022B; /* rood - pas aan naar je stijl */
    border-radius: 100px 0 100px 0; /* alleen links rond */

}

/* Tekstknop */ 
.tekstknop .elementor-button {
    padding: 0;
}

.tekstknop .elementor-button-icon svg {
    fill: #C7022B !important; /* Oranje kleur */
}


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

/* Wijzig kleur van de submenu-indicator (SVG pijl) */
.elementor-nav-menu .sub-arrow svg {
  fill: #C10430 !important; /* Vervang met je gewenste kleur */
}