:root {
	--xdc-events-primary-color: var(--primary-color, #3D6BE7);
	--xdc-events-secondary-color: var(--secondary-color, #262626);
	--xdc-events-tertiary-color: var(--tertiary-color, #f0f0f0);
	--xdc-events-light-color: var(--light-color, #ffffff);
	--xdc-events-dark-color: var(--dark-color, #000000);
}

.xdc-event-archive-header {
	background-image: linear-gradient(var(--xdc-events-secondary-color), var(--xdc-events-dark-color));
	color: var(--xdc-events-light-color);
	padding: 20px;
	text-align: center;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.xdx-event-archive-header__title {
	font-size: 2.5rem;
	margin: 0;
	text-align: center;
	color: var(--xdc-events-light-color);
	font-weight: bolder;
	text-transform: uppercase;
}

.xdc-event-archive-header__description {
	font-size: 1.2rem;
	margin: 0;
	text-align: center;
	color: var(--xdc-events-light-color);
}

.xdc-event-archive__button {
	display: block;
	width: fit-content;
	margin: auto;
	margin-top: 20px;
	background-color: var(--xdc-events-primary-color) !important;
	color: var(--xdc-events-light-color) !important;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	text-decoration: none;
	transition: background-color 0.3s ease;
	font-weight: bolder;
	text-transform: uppercase;
}

.xdc-event-archive__button:hover {
	background-color: var(--xdc-events-light-color) !important;
	color: var(--xdc-events-primary-color) !important;
}