/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/


/*
Kleuren

#E7B41A
#CD0E7F
#8D1DA7
#053F89

*/

.fot-big-p p {
	font-size: 18px !important;
	line-height: 2 !important;
}


.img-gradient-bg {
	position: relative;
	z-index: 200;
}

.img-gradient-bg::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 0px;
    bottom: 0px;
    z-index: 0;
	width: 400px;
	animation: animateBg 2s linear infinite;
	background-image: linear-gradient(90deg,#043f87,#e7b419,#8b1da7,#cc107e,#043f87,#e7b419);
	background-size: 500% 100%;
	height: 100%;
    width: 87%;
    border-radius: 4px;
}

@keyframes animateBg {
	0% { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

.img-gradient-bg::before {
	content: '';
	position: absolute;
	width: 400px;
	height: 400px;
	top:-50px;
	left:-50px;
	z-index: 0;
	background-image: url('https://festivaloftech.nl/wp-content/uploads/2025/04/balletjes-blauw.svg');
	background-size: contain;
	display: block;
	background-repeat: no-repeat;
}

/* Gradient border effect */


/* Container met een standaard rand en een achtergrondverloop in de opgegeven kleuren en hoek */
.gradient-border-container span a {
	position: relative;
	display: inline-block;
	border: 4px solid transparent;
	border-radius: 10px;
	background: linear-gradient(326deg, #053F89 0%, #8D1DA7 100%);
	background-clip: padding-box; /* Zorgt dat de achtergrond alleen in het binnenste van de box zit */
	z-index: 1;
}

/* Pseudo-element dat de geanimeerde gradient border aanmaakt */
.gradient-border-container span a::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 8px;
	padding: 4px;
	background: radial-gradient(circle at center, #CD0E7F, #8D1DA7, #E7B41A);
	background-size: 200% 200%;
	-webkit-mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	mask: 
	linear-gradient(#fff 0 0) content-box, 
	linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: -1;
}

/* Bij hover tonen we de border en starten we de animatie */
.gradient-border-container span a:hover::after {
	opacity: 1;
	animation: gradientAnimation 2s ease infinite;
}

/* Keyframes die de achtergrond van de border laten bewegen voor een animatie-effect */
@keyframes gradientAnimation {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}