:root {
	--yellow: #ffd400;
	--black: #0a0203;
}

.container {
	width: 100%;
	max-width: 1240px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
}

.elementor .elementor-button {
	padding: 17px 24px;
	border-radius: 60px;
	background-color: var(--yellow);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--black);
}

.elementor-button .elementor-button-content-wrapper {
	display: flex;
	align-items: center;
	gap: 24px;
	position: relative;
}

.elementor-button .elementor-button-content-wrapper::before {
	content: url('../media/arrow-right.svg');
	position: absolute;
	right: 0;
	transform: translateX(-100%);
	opacity: 0;
}

.elementor-button:hover .elementor-button-content-wrapper::before {
	transform: translateX(0);
	opacity: 1;
	transition: all .3s ease;
}

.elementor-button .elementor-button-content-wrapper::after {
	content: url('../media/arrow-right.svg');
	line-height: 1px;
}

.elementor-button:hover .elementor-button-content-wrapper::after {
	transform: translateX(100%);
	opacity: 0;
	transition: all .3s ease;
}

.label {
	padding: 8px 16px;
	border-radius: 100px;
	background-color: var(--yellow);

	font-size: .875rem;
	font-weight: 700;
}

/*
 * Header
 */
.header-top {
	height: 85px;
	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .2);
}

.header-top::before {
	content: '';
	display: block;
	height: 6px;
	width: 70%;
	background-color: var(--yellow);
}

.header-top .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	padding: 16px;
}

.header-nav .menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.header-nav .menu a {
	color: var(--black);
}

.header-nav .menu .menu-item-has-children > a {
	display: flex;
	gap: 8px;
	align-items: center;
}

.header-nav .menu .menu-item-has-children > a::after {
	content: url('../media/chevron.svg');
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: linear-gradient(258.12deg, rgba(255, 255, 255, 0.5) -61.54%, rgba(204, 212, 187, 0.5) 110.84%);
}

.header-nav .menu .sub-menu {
	display: none;
	/* display: flex; */
	flex-direction: column;
	gap: 8px;

	position: absolute;
	margin-top: 23px;
	padding: 16px 24px;
	border: 1px solid #f7f7ff;
	background-color: #fff;

	list-style-type: none;

	z-index: 9;
}

.header-nav .menu .sub-menu::before {
	content: '';
	position: absolute;
	left: -1px;
	top: -4px;
    height: 3px;
    width: 60%;
    background-color: var(--yellow);
}

.header-cta .elementor-button {
	padding: 11px 17px;
	font-size: .875rem;
}

.header-breadcrumbs {
	padding: 24px 0;
	background: linear-gradient(90deg, #CCD4BB -38%, #FFFFFF 104%);
}

.header-breadcrumbs p {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 1rem;
}

.header-breadcrumbs p a {
	color: var(--black);
}

.header-breadcrumbs p a:first-child {
	font-weight: 700;
}

.header-breadcrumbs .separator {
	content: url('../media/separator.svg');
}

/*
 * Brandbox
 */
.brandbox {
	background-color: var(--yellow);
}

.brandbox-container {
	display: flex;
	width: 100%;
	max-width: 1920px;
	margin: auto;
	margin-bottom: 60px;
}

.brandbox-image {
	position: relative;
	width: 50%;
	margin-bottom: -60px;
	z-index: 1;
}

.brandbox .brandbox-image img {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.brandbox-content {
	width: 50%;
	padding: 64px;
	padding-right: calc( ( ( 100% - 1240px ) / 2 ) + 16px );
	/* padding-right: calc( ( ( 100vw - 1240px ) / 2 ) + 16px ); // 100VW is 30px groter dan window size, dunno why? */ 
}

.brandbox h1 {
	font-size: 3rem;
	font-weight: 700;
	font-family: 'DM Sans', sans-serif;
}

.brandbox p {
	font-size: 1.125rem;
	font-family: 'DM Sans', sans-serif;
}
	
@media ( max-width: 1240px ) {
	.brandbox-content {
		padding-right: 16px;
	}
}

@media ( max-width: 767px ) {
	.brandbox-container {
		flex-direction: column;
		margin-bottom: 0;
	}

	.brandbox-image {
		width: 100%;
		min-height: 280px;
		margin-bottom: 0;
	}

	.brandbox .brandbox-image img {
		padding-right: 32px;
	}

	.brandbox-content {
		width: 100%;
		padding: 32px;
	}
	
	.brandbox h1 {
		font-size: 2.5rem;
	}
}

/*
 * Team single
 */
.team-single-image {
	position: relative;
}

.team-single-image::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 85%);
}

/*
 * Team loop
 */
.team-loop-image {
	overflow: hidden;
}

.team-loop-image::before {
	content: '';
	position: relative;
	position: absolute;
	left: -50%;
	top: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
		0deg, 
		transparent, 
		transparent 30%, 
		rgba(255,255,255,.3)
		/* rgba(255, 212, 0, .3) */
	);
	transform: rotate(-45deg);
	transition: all .5s ease;
	opacity: 0;
	z-index: 9;
	pointer-events: none
}

.team-loop-image:hover::before {
	opacity: 1;
	transform: rotate(-45deg) translateY(100%);
}

.team-loop-image img {
	transition: transform .4s;
}

.team-loop-image:hover img {
	transform: scale(1.05) rotate(1deg);
}

.team-loop-title h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
}

.team-loop-title h3::before {
	position: absolute;
	right: 0;
	content: url('../media/arrow-right.svg');
	line-height: 1px;
	transform: translateX(-100%);
	opacity: 0;
}

/* .team-loop-title a:hover::before { */
.team-loop .e-loop-item:hover .team-loop-title h3::before {
	transform: translateX(0);
	opacity: 1;
	transition: all .3s ease;
	transition-delay: .1s;
}

.team-loop-title h3::after {
	position: absolute;
	right: 0;
	content: url('../media/arrow-right.svg');
	line-height: 1px;
	opacity: 1;
}

/* .team-loop-title a:hover::after { */
.team-loop .e-loop-item:hover .team-loop-title h3::after {
	transform: translateX(100%);
	opacity: 0;
	transition: all .3s ease;
}

.team-loop-title a {
	position: relative;
}

.team-loop-title a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0%;
	height: 2px;
	background-color: var(--black);
	transition: all .3s ease;
}

.team-loop .e-loop-item:hover .team-loop-title a::after {
	width: 100%;
}


/*
 * Team content
 */
.team-content {
	font-family: 'DM Sans', sans-serif;	
}

.team-content h4,
.team-content h1 {
	font-weight: 700;
}

.team-content hr {
	display: block;
	margin-bottom: 16px !important;
	border-color: #F2F2F2;
	border-style: solid;
}

.team-content tr {
	background: transparent;
}

.team-content td {
	padding: 2px 0;
	border: 0;
	background: transparent !important;
}

.team-content tr td:first-child {
	padding-right: 8px;
}


/*
 * Team contact
 */
.team-contact {
	font-family: 'DM Sans', sans-serif;
	padding: 32px;
	background: linear-gradient(258deg, #FFFFFF -40%, #CCD4BB 75%);
}

.team-contact ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.team-contact ul li {
	display: flex;
	align-items: center;
	gap: 24px;
}

.team-contact ul li::before {
	content: '';
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #fff; 
	line-height: 1px;
}

.team-contact ul li.phone::before {
	content: url('../media/phone.svg');
}

.team-contact ul li.email::before {
	content: url('../media/mail.svg');
}

.team-contact ul li.linkedin::before {
	content: url('../media/linkedin.svg');
}

.team-contact ul li a {
	position: relative;
	color: var(--black);
}

.team-contact ul li a::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	height: 1px;
	width: 0%;
	background-color: var(--black);
	transition: width .3s;
}

.team-contact ul li a:hover::before {
	width: 100%;
}