/*
Theme Name: Evermark Agency
Theme URI: https://evermark.nl
Description: Gebouwd door Evermark Agency. Dit child theme vormt de professionele basis van jouw website — lichtgewicht, snel en volledig afgestemd op jouw merk. Vragen of aanpassingen nodig? Neem contact op via evermark.nl.
Author: Evermark Agency
Author URI: https://evermark.nl
Template: hello-elementor
Version: 2.0.0
Text Domain: evermark-agency
*/





/* ------------------------------ */
/* VOORKANS BUTTONS */
/* ------------------------------ */


/* Voorkans button Wit naar Groen */ 

.voorkansbutton1 .elementor-button {
    position: relative; /* Required for pseudo-element positioning */
    overflow: hidden; /* Ensure the sliding effect stays within bounds */
    background-color: #ffff!important; /* Default background color */
}

.voorkansbutton1 .elementor-button::before {
    content: ''; /* Required for pseudo-element to render */
    position: absolute; /* Position pseudo-element relative to button */
    top: 0; /* Align to top edge */
    left: -100%; /* Start outside of the button */
    width: 100%; /* Full width of the button */
    height: 100%; /* Full height of the button */
    background-color: #33cc33; /* Hover background color */
    transition: left 0.3s ease; /* Smooth slide-in effect */
}

.voorkansbutton1 .elementor-button:hover::before {
    left: 0; /* Slide into view on hover */
}

.voorkansbutton1 .elementor-button-text {
    z-index: 100; /* Ensure text appears above pseudo-element */
}


body[data-elementor-device-mode="tablet"]
.voorkansbutton1 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on tablet */
}

body[data-elementor-device-mode="mobile"]
.voorkansbutton1 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on mobile */
}



/* Voorkans button Groen naar donkerblauw */ 
.voorkansbutton2 .elementor-button {
    position: relative; /* Required for pseudo-element positioning */
    overflow: hidden; /* Ensure the sliding effect stays within bounds */
    background-color: #33cc33!important; /* Default background color */
}

.voorkansbutton2 .elementor-button::before {
    content: ''; /* Required for pseudo-element to render */
    position: absolute; /* Position pseudo-element relative to button */
    top: 0; /* Align to top edge */
    left: -100%; /* Start outside of the button */
    width: 100%; /* Full width of the button */
    height: 100%; /* Full height of the button */
    background-color: #001246; /* Hover background color */
    transition: left 0.3s ease; /* Smooth slide-in effect */
}

.voorkansbutton2 .elementor-button:hover::before {
    left: 0; /* Slide into view on hover */
}

.voorkansbutton2 .elementor-button-text {
    z-index: 100; /* Ensure text appears above pseudo-element */
}


body[data-elementor-device-mode="tablet"]
.voorkansbutton2 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on tablet */
}

body[data-elementor-device-mode="mobile"]
.voorkansbutton2 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on mobile */
}



/* Voorkans button Wit naar Donkerblauw */ 

.voorkansbutton3 .elementor-button {
    position: relative; /* Required for pseudo-element positioning */
    overflow: hidden; /* Ensure the sliding effect stays within bounds */
    background-color: #ffff!important; /* Default background color */
}

.voorkansbutton3 .elementor-button::before {
    content: ''; /* Required for pseudo-element to render */
    position: absolute; /* Position pseudo-element relative to button */
    top: 0; /* Align to top edge */
    left: -100%; /* Start outside of the button */
    width: 100%; /* Full width of the button */
    height: 100%; /* Full height of the button */
    background-color: #001246; /* Hover background color */
    transition: left 0.3s ease; /* Smooth slide-in effect */
}

.voorkansbutton3 .elementor-button:hover::before {
    left: 0; /* Slide into view on hover */
}

.voorkansbutton3 .elementor-button-text {
    z-index: 100; /* Ensure text appears above pseudo-element */
}


body[data-elementor-device-mode="tablet"]
.voorkansbutton3 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on tablet */
}

body[data-elementor-device-mode="mobile"]
.voorkansbutton3 .elementor-button::before {
    transition-duration: 0s; /* Disable transition on mobile */
}




.voorkansbutton4 .elementor-button {
    position: relative;
    overflow: hidden;
    background: transparent !important;
    border: 2px solid #ffffff !important;
}

.voorkansbutton4 .elementor-button:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: #33cc33;

    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;

    z-index: 1;
}

/* Hover / klik */
.voorkansbutton4 .elementor-button:hover:before,
.voorkansbutton4 .elementor-button:active:before {
    opacity: 1;
    transform: translateX(0);
}

.voorkansbutton4 .elementor-button:hover,
.voorkansbutton4 .elementor-button:active {
    border-color: #33cc33 !important;
}

/* tekst bovenop */
.voorkansbutton4 .elementor-button * {
    position: relative;
    z-index: 2;
}



/* ------------------------------ */
/* GRADIENT ANIMATIONS */
/* ------------------------------ */


/* animatie */

@keyframes moveGradient{

0%{
background-position:0% 0%;
}

100%{
background-position:200% 0%;
}

}


.hero-gradientvka{
position:relative;
overflow:hidden;
border-radius:1em;


/* gradient */
background:linear-gradient(120deg,#325CED,#20BEFF,#33cc33);
background-size:200% 200%;

animation:gradientMove 16s ease infinite;
}


/* gradient beweging */

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}


/* shapes */

.hero-gradientvka::before,
.hero-gradientvka::after{

content:"";
position:absolute;

width:520px;
height:520px;

background:rgba(255,255,255,0.20);

border-radius:40px;

mix-blend-mode:soft-light;

animation:floatBox 22s ease-in-out infinite;
}


/* shape links */

.hero-gradientvka::before{

top:-120px;
left:-100px;

transform:rotate(25deg);
}


/* shape rechts */

.hero-gradientvka::after{

bottom:-120px;
right:-120px;

transform:rotate(-30deg);

animation-delay:6s;
}


/* beweging shapes */

@keyframes floatBox{

0%{
transform:translate(0px,0px) rotate(20deg);
}

25%{
transform:translate(80px,40px) rotate(35deg);
}

50%{
transform:translate(120px,90px) rotate(60deg);
}

75%{
transform:translate(60px,120px) rotate(35deg);
}

100%{
transform:translate(0px,0px) rotate(20deg);
}

}

/* ------------------------------ */
/* MOBIEL FIX */
/* ------------------------------ */

@media (max-width:768px){

.hero-gradientvka::before,
.hero-gradientvka::after{

width:260px;
height:260px;

/* blendmode uit omdat mobiel dit vaak niet rendert */

mix-blend-mode:normal;

background:rgba(255,255,255,0.12);

}

.hero-gradientvka::before{

top:-80px;
left:-60px;

}

.hero-gradientvka::after{

bottom:-80px;
right:-60px;

}

}






/* ------------------------------ */
/* RONDE CIRKEL MET PIJL */
/* ------------------------------ */

/* In een container */
.vkacard:hover .VKAICONR{
transform:translateX(6px);
}

.VKAICONR{
transition:transform .25s ease;
}


/* Niet in een container */
.VKAICONR{
transition:transform .25s ease;
}

.VKAICONR:hover{
transform:translateX(0.5vw);
}




/* ALLE links binnen Elementor: nooit underline */
.elementor a,
.elementor a:link,
.elementor a:visited,
.elementor a:hover,
.elementor a:active,
.elementor a:focus {
    text-decoration: none !important;

}