/* 
Theme Name:		 WIM Elementor child
Theme URI:		 https://wearewim.nl/
Description:	 WIM Elementor child theme
Author:			 Sjoerd van der Sluis
Author URI:		 https://wearewim.nl/
Template:		 wim-elementor
Version:		 1.0.0
Text Domain:	 wim-elementor-child
*/


.latest-cases-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 70px;
    justify-content: center;
}

.case-item {
    flex-basis: calc(50% - 35px); 
    max-width: calc(50% - 35px);
    padding: 15px;
    box-sizing: border-box;
}

.case-item-2 {
	margin-top: 150px;
}

@media (max-width: 768px) {
    .case-item {
        flex-basis: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }
}

.case-item h2 {
	display: block;
	color: #18464B;
	font-family: "Inter", Sans-serif;
    font-weight: 700;
	margin-top: 70px;
	font-size: 30px;
}

.case-item p {
font-family: "Inter", Sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #000000;
}

.elementor-button {
	    /* Belangrijk voor het Slide-in Effect */
    position: relative!important; /* Container voor de ::before */
    overflow: hidden!important; /* Zorgt dat de slide in de knop blijft */
    z-index: 1!important; /* Zorgt dat de tekst boven de slide-in kleur ligt */
    
    /* Smooth Transition voor de Tekstkleur */
    transition: color 0.4s ease-in-out!important; 
}

/* Het Pseudo-Element voor de Kleur Slide */
.elementor-button::before {
    content: ''!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    
    /* De kleur die naar binnen schuift */
    background-color: #14E6CD!important; 
    
    z-index: -1; /* Achter de tekst */
    border-radius: 22px!important; /* Zelfde afronding als de knop */

    /* Start buiten beeld links */
    transform: translateX(-100%)!important;
    
    /* Transition voor het schuiven */
    transition: transform 0.4s ease-in-out!important; 
}


.elementor-button:hover::before {
    /* Schuif de kleur naar binnen */
    transform: translateX(0)!important; 
}

.case-item a.case-read-more {
    /* Huidige Basisstijlen */
    background-color: white; /* Let op: we maken dit de standaard achtergrond */
    font-family: "Inter", Sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 15px 80px;
    display: block;
    width: fit-content;
    margin: auto;
    margin-top: 30px;
    border-radius: 22px;
    
    /* Belangrijk voor het Slide-in Effect */
    position: relative; /* Container voor de ::before */
    overflow: hidden; /* Zorgt dat de slide in de knop blijft */
    z-index: 1; /* Zorgt dat de tekst boven de slide-in kleur ligt */
    
    /* Smooth Transition voor de Tekstkleur */
    transition: color 0.4s ease-in-out; 
}

/* Het Pseudo-Element voor de Kleur Slide */
.case-item a.case-read-more::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* De kleur die naar binnen schuift */
    background-color: #14E6CD; 
    
    z-index: -1; /* Achter de tekst */
    border-radius: 22px; /* Zelfde afronding als de knop */

    /* Start buiten beeld links */
    transform: translateX(-100%);
    
    /* Transition voor het schuiven */
    transition: transform 0.4s ease-in-out; 
}


.case-item a.case-read-more:hover::before {
    /* Schuif de kleur naar binnen */
    transform: translateX(0); 
}

.davidround::before,
.davidround:before {
  content: "";
  position: absolute;
  left: 125px;
  top: -400px;
  width: 878.89px;
  height: 1059.75px;
  background-image: url("https://wimternet.nl/davidraakt/wp-content/themes/WIM-Elementor-child/images/david.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* of 'cover' als je wilt vullen */
  pointer-events: none;     /* pseudo-element niet klikbaar */
}

.case-item a.case-read-more {
	font-size: 16px!important;
	    padding: 15px 25px 15px 25px!important;
	line-height: 1!important;
}

#stickyheaders{
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-130px); /*adjust this value to the height of your header*/
}