/*
Theme Name: AfRSO
Theme URI: https://afrso.com
Author: Djura Simic
Author URI: http://midradus.com
Description: African Road Safety Observatory
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: afrso
*/

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* CSS Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

/*  Layout */

:root {
	--container-width: 1680px;
}

/*  Colors */

:root {
	--color-primary: rgba(0, 0, 0, 1);
	--color-secondary: rgba(255, 255, 255, 1);
	--color-tertiary: rgba(153, 38, 57, 1);
	--color-bg: rgba(255, 255, 255, 1);
	--color-text: rgba(0, 0, 0, 1);
	--color-bg-body: rgba(24, 36, 29, 1);
	--color-text-emphasis: rgba(0, 117, 73, 1);
	--color-bg-footer: rgba(65, 19, 51, 1);
	--color-bg-light: rgba(248, 224, 184, 1);
	--color-bg-filter: rgba(241, 241, 242, 1);
	--color-error: rgba(255, 0, 0, 1);
}

/*  Typography */

:root {
	--font-family: "Poppins", sans-serif;
	--font-size: 16px;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
}


/* Main Styles */

body {
	position: relative;
	margin: 0;
	font-family: var(--font-family);
	font-size: var(--font-size);
	font-weight: var(--font-weight-regular);
	color: var(--color-text);
	scrollbar-gutter: stable;

	&:has(.search-container.visible) {
		overflow: hidden;
	}

	.search-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		background-color: rgba(0, 0, 0, .9);
		padding-inline: 5%;
		padding-block: 1rem;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: all ease-in-out .3s;
		z-index: 1000;

		&.visible {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}

		#search-form {
			position: relative;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 1rem;

			@media screen and (max-width: 560px) {
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			input {
				position: relative;
				display: block;
				width: 100%;
				max-width: 30rem;
				padding: 1.15rem;
				border: none;
				border-radius: 10px;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				color: var(--color-text);
				outline: none;
				background-color: var(--color-bg);
				transition: all ease-in-out .2s;

				&:focus {
					outline: none;
					box-shadow: inset 1px 1px 5px 2px rgba(0, 0, 0, .2);
				}
			}

			button[type="submit"] {
				position: relative;
				background-color: var(--color-text-emphasis);
				color: var(--color-secondary);
				font-size: calc(var(--font-size) * 1.25);
				padding: 1rem 2rem;
				border-radius: 10px;
				border: none;
				outline: none;
				cursor: pointer;
				transition: all .3s ease-in-out;

				@media screen and (max-width: 560px) {
					margin-left: auto;
				}

				&:hover {
					opacity: .8;
				}
			}
		}

		.btn-close {
			position: absolute;
			top: 1rem;
			right: 1rem;
			padding-inline: .5rem;
			font-size: calc(var(--font-size) + 1rem);
			font-weight: var(--font-weight-bold);
			color: var(--color-secondary);
			text-decoration: none;
			transition: all ease-in-out .2s;

			&:hover {
				color: var(--color-text-emphasis);
			}
		}
	}

	.search-highlight {
		background-color: var(--color-text-emphasis);
		color: var(--color-secondary);
		padding-inline: .5rem;
		padding-block: 0;
		border-radius: 5px;
	}

	.search-results__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		text-align: center;
		padding-block-end: 20vh;

		.search-results__content {
			position: relative;
			width: 100%;
			max-width: 960px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			gap: 2rem;

			h2 {
				font-size: calc(var(--font-size) * 2.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;

				span {
					color: var(--color-text-emphasis);
				}
			}

			.search-results__item {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				gap: 1rem;
				text-align: left;

				.search-result__title {
					font-size: calc(var(--font-size) * 1.25);
					font-weight: var(--font-weight-medium);
					color: var(--color-text);
					line-height: 1.2;

					a {
						color: var(--color-text-emphasis);
						text-decoration: none;
						transition: all .3s ease-in-out;

						&:hover {
							color: var(--color-primary);
						}
					}
				}
			}
		}
	}

	header {
		position: fixed;
		top: 0;
		width: 100%;
		text-align: center;
		padding-inline: 1rem;
		padding-block-start: 1rem;
		padding-block-end: 1rem;
		background-color: rgba(255, 255, 255, .75);
		backdrop-filter: blur(10px);
		box-shadow: 0 2px 5px rgba(0, 0, 0, .15);
		z-index: 100;

		.header__container {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			display: grid;
			grid-template-columns: auto 1fr auto;
			align-items: center;
			gap: 10%;
			margin: 0 auto;

			@media screen and (max-width: 1600px) {
				gap: 1rem;
			}

			@media screen and (max-width: 1200px) {
				grid-template-columns: 1fr;
				justify-content: center;
				text-align: center;
			}

			.btn-menu {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 2rem;
				height: auto;
				display: none;

				img {
					position: relative;
					width: 100%;
					height: auto;
				}

				@media screen and (max-width: 1200px) {
					display: block;
				}
			}

			.logo-main {
				position: relative;
				display: block;
				height: 4rem;
				width: fit-content;

				img {
					position: relative;
					height: 100%;
					width: auto;
				}

				@media screen and (max-width: 1200px) {
					height: 3rem;
					margin-inline: auto;
				}
			}

			nav.site-nav {
				position: relative;
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: center;
				gap: 10%;

				@media screen and (max-width: 1600px) {
					gap: 1rem;
				}

				&>ul {
					position: relative;
					display: flex;
					justify-content: space-between;
					gap: 1rem;
					list-style-type: none;

					&>li {
						position: relative;
						display: block;
						font-weight: var(--font-weight-medium);
						font-size: calc(var(--font-size) + .25rem);
						transition: all ease-in-out .3s;

						&.menu-item-has-children {
							&::before {
								position: absolute;
								top: 50%;
								right: -1rem;
								content: '';
								width: .5rem;
								height: .5rem;
								border-right: 2px solid var(--color-text-emphasis);
								border-bottom: 2px solid var(--color-text-emphasis);
								transform: translateY(-65%) rotate(45deg);
							}
						}

						&>a {
							position: relative;
							display: block;
							color: var(--color-text-emphasis);
							text-decoration: none;
							text-transform: initial;

							&::after {
								content: "";
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 2px;
								background-color: var(--color-text-emphasis);
								transform: scaleX(0);
								transform-origin: right;
								transition: transform .3s ease-in-out;
							}

						}

						&:hover>a::after {
							transform: scaleX(1);
							transform-origin: left;
						}

						ul {
							position: absolute;
							white-space: nowrap;
							width: calc(100% + 20px);
							top: calc(1.75rem + 1px);
							left: 0;
							display: flex;
							flex-direction: column;
							list-style-type: none;
							font-size: var(--font-size);
							font-weight: var(--font-weight-regular);
							text-align: left;
							margin: 0;
							border: 1px solid var(--color-text-emphasis);
							background-color: var(--color-bg);
							border-bottom-right-radius: .5rem;
							box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
							overflow: hidden;
							opacity: 0;
							visibility: hidden;
							transition: all ease-in-out .3s;
							pointer-events: none;

							li {
								transition: all ease-in-out .3s;

								a {
									display: block;
									padding-block: 0.75rem;
									padding-inline-start: 1rem;
									padding-inline-end: 2rem;
									line-height: 1.2;
									text-decoration: none;
									color: var(--color-text);
									transition: all ease-in-out .3s;

								}

								&:hover {
									background-color: var(--color-text-emphasis);

									a {
										color: var(--color-secondary);
									}
								}
							}
						}

						&:hover {

							ul {
								opacity: .975;
								visibility: visible;
								pointer-events: all;
							}
						}
					}
				}

				@media screen and (max-width: 1200px) {
					display: none;
				}

			}

			.site-nav-mobile {
				display: none;
				margin-left: -300px;

				.btn-close {
					display: block;
					margin-block-start: .5rem;
					margin-block-end: 1rem;
					width: 2rem;
					height: 2rem;

					img {
						position: relative;
						width: 100%;
						height: auto;
					}
				}

				ul {
					list-style-type: none;

					li {

						a {
							font-weight: var(--font-weight-medium);
							font-size: calc(var(--font-size) + .1rem);
							color: var(--color-text);
							text-decoration: none;
							line-height: 2;
						}

						ul {
							margin-left: 1rem;
						}

						&:nth-of-type(1) {
							ul {
								display: none;
							}
						}
					}
				}

				@media screen and (max-width: 1200px) {
					position: fixed;
					top: 0;
					left: 0;
					width: 100%;
					max-width: 300px;
					height: 100vh;
					background-color: var(--color-bg);
					padding: 1rem;
					display: block;
					text-align: left;
				}
			}

			.btn-search {
				position: relative;
				display: inline-block;
				height: 1.25rem;
				width: 1.25rem;
				margin-left: auto;
				transition: all ease-in-out .3s;

				&:hover {
					transform: scale(1.25);
				}

				img {
					position: relative;
					height: 100%;
					width: auto;
				}

				@media screen and (max-width: 1200px) {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-.625rem);

					&:hover {
						transform: scale(1);
						transform: translateY(-.625rem);
					}
				}
			}
		}
	}

	.page-hero__container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 500px;
		background-color: var(--color-text-emphasis);
		background-size: cover;
		background-position: center;
		border-bottom-right-radius: 8rem;
		box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
		padding-top: 100px;

		@media screen and (max-width: 768px) {
			height: auto;
			max-height: 500px;
		}

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-image: linear-gradient(to right, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
			border-bottom-right-radius: 8rem;
		}

		.page-hero__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			color: var(--color-secondary);
			padding-inline: 1rem;
			padding-block: 1rem;

			h1 {
				position: relative;
				max-width: 960px;
				font-size: 3rem;
				font-weight: var(--font-weight-medium);

				@media screen and (max-width: 768px) {
					font-size: 2rem;
					line-height: 1.2;
				}
			}

			h3 {
				position: relative;
				max-width: 960px;
				font-size: 1.5rem;
				font-weight: var(--font-weight-regular);

				@media screen and (max-width: 768px) {
					font-size: 1rem;
				}
			}
		}

		&.page-hero__container-home {
			background-image: url("./assets/images/img-hero-homepage.jpg");
		}

		&.page-hero__container-centered {
			border-bottom-right-radius: 0;

			&::before {
				display: none;
			}

			.page-hero__content {
				align-items: center;
				text-align: center;

				h1 {
					background-color: rgba(0, 0, 0, .35);
					padding-inline: 1rem;
					border-radius: 10px;
				}

				h3 {
					display: inline;
					background: rgba(0, 0, 0, 0.35);
					padding-block: .5rem;
					padding-inline: 1rem;
					box-decoration-break: clone;
					line-height: 1.5;
					border-radius: 10px;
				}
			}
		}

		&.page-hero__container--what-is-arso {
			background-image: url("./assets/images/img-hero-what-is-arso.jpg");
		}

		&.page-hero__container--news-events {
			background-image: url("./assets/images/img-hero-news-events.jpg");
		}

		&.page-hero__container--news {
			background-image: url("./assets/images/img-hero-news.jpg");
		}

		&.page-hero__container--events {
			background-image: url("./assets/images/img-hero-events.jpg");
		}

		&.page-hero__container--road-safety {
			background-image: url("./assets/images/img-hero-road-safety.jpg");
		}

		&.page-hero__container--contact {
			background-image: url("./assets/images/img-hero-contact.jpg");
		}

		&.page-hero__container--library-access {
			background-image: url("./assets/images/img-hero-library-access.jpg");
		}

		&.page-hero__container-general-page {
			background-image: url("./assets/images/img-hero-page.jpg");
		}
	}

	.page-intro__container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10vh;
		width: 100%;
		padding-block: 50px;
		overflow: hidden;

		@media screen and (max-width: 1600px) {
			gap: 4rem;
		}

		@media screen and (max-width: 1200px) {
			gap: 3rem;
		}

		@media screen and (max-width: 768px) {
			gap: 2rem;
		}

		&::before {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -22.5%;
			left: -35%;
			width: 60vw;
			height: auto;
			opacity: .1;
			z-index: -1;
		}

		&::after {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			bottom: -22.5%;
			right: -20%;
			width: 60vw;
			height: auto;
			opacity: .1;
			z-index: -1;
		}

		.page-intro__top {
			position: relative;
			display: flex;
			flex-direction: column;
			gap: 5rem;
			width: 100%;
			max-width: calc(var(--container-width) * .875);
			color: var(--color-text);
			padding-inline: 1rem;
			padding-block: 1rem;
			text-align: center;

			@media screen and (max-width: 1200px) {
				gap: 3rem;
			}

			@media screen and (max-width: 768px) {
				gap: 2rem;
				padding-block: 0;
			}

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text-emphasis);
				line-height: 1.2;
			}

			&>p {
				font-size: calc(var(--font-size) * 1.25);
				line-height: 1.5;
				width: 100%;
				max-width: 768px;
				margin-inline: auto;
			}

			.page-intro__top-sections {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				justify-content: center;
				align-items: top;
				gap: 1rem;

				.page-intro__top-section {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					border: 2px solid var(--color-text-emphasis);
					padding: 1rem;
					border-radius: 10px;

					h3 {
						font-size: calc(var(--font-size) * 1.25);
						font-weight: var(--font-weight-bold);
						color: var(--color-text);
						line-height: 1.2;
						text-align: left;
					}

					p {
						font-size: calc(var(--font-size) * 1.15);
						line-height: 1.5;
						text-align: left;
					}
				}
			}
		}

		.page-intro__section-text {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-block-end: 2.5vw;

			@media screen and (max-width: 1200px) {
				gap: 2rem;
			}

			&.page-intro__section-1-text {
				text-align: left;

				.btn-more {
					align-self: flex-start;
				}
			}

			&.page-intro__section-2-text {
				text-align: right;

				@media screen and (max-width: 600px) {
					text-align: left;
					order: 2;
				}

				.btn-more {
					align-self: flex-end;

					@media screen and (max-width: 600px) {
						align-self: flex-start;
					}
				}
			}


			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text-emphasis);
				line-height: 1.2;

				@media screen and (max-width: 600px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: calc(var(--font-size) * 1.25);
				line-height: 1.5;

				@media screen and (max-width: 600px) {
					font-size: calc(var(--font-size) * 1.125);
				}
			}

			.btn-more {
				position: relative;
				background-color: var(--color-text-emphasis);
				color: var(--color-secondary);
				font-size: calc(var(--font-size) * 1.25);
				text-decoration: none;
				padding: 1rem 2rem;
				border-radius: 10px;
				transition: all .3s ease-in-out;

				&:hover {
					transform: scale(1.05);
				}
			}
		}

		.page-intro__section-1 {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			display: grid;
			grid-template-columns: 1.05fr 1fr;
			padding-inline: 1rem;
			gap: 4rem;

			@media screen and (max-width: 1024px) {
				gap: 2rem;
			}

			@media screen and (max-width: 600px) {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.page-intro__section-1-img {
				position: relative;
				padding-inline-start: 5vw;
				padding-block-end: 2.5vw;

				@media screen and (max-width: 1024px) {
					padding-inline-start: 0;
				}

				img {

					border-radius: 1.5rem;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, .25);

					&:nth-child(1) {
						width: 100%;
						height: auto;
					}

					&:nth-child(2) {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 55%;
						height: auto;

						@media screen and (max-width: 1024px) {
							display: none;
						}
					}
				}
			}
		}

		.page-intro__section-2 {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			display: grid;
			grid-template-columns: 1fr 1.05fr;
			padding-inline: 1rem;
			gap: 4rem;

			@media screen and (max-width: 1024px) {
				gap: 2rem;
			}

			@media screen and (max-width: 600px) {
				grid-template-columns: 1fr;
			}

			.page-intro__section-2-img {
				position: relative;
				padding-inline-end: 5vw;
				padding-block-end: 2.5vw;

				@media screen and (max-width: 1024px) {
					padding-inline-end: 0;
				}

				img {

					border-radius: 1.5rem;
					box-shadow: 5px 5px 5px rgba(0, 0, 0, .25);

					&:nth-child(1) {
						width: 100%;
						height: auto;
					}

					&:nth-child(2) {
						position: absolute;
						bottom: 0;
						right: 0;
						width: 55%;
						height: auto;

						@media screen and (max-width: 1024px) {
							display: none;
						}
					}
				}
			}
		}
	}

	.latest-news__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-image: url("./assets/images/img-border.png"), url("./assets/images/img-border.png"), url("./assets/images/img-bg-news.jpg");
		background-size: auto 50px, auto 50px, cover;
		background-position: top -22px left, bottom -22px left, center;
		background-repeat: repeat-x, repeat-x, no-repeat;
		border-top: 2px solid var(--color-primary);
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 1600px) {
			padding-block: 5vh;
		}

		.latest-news__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			display: grid;
			grid-auto-rows: auto;
			gap: 10vh;

			@media screen and (max-width: 1600px) {
				gap: 4rem;
			}

			@media screen and (max-width: 1200px) {
				gap: 3rem;
			}

			@media screen and (max-width: 768px) {
				gap: 2rem;
			}

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-bold);
				color: var(--color-tertiary);
				line-height: 1.2;
				text-transform: uppercase;
			}

			.latest-news__items {
				position: relative;
				display: grid;
				grid-template-columns: repeat(4, minmax(250px, 1fr));
				gap: 2.5vw;

				@media screen and (max-width: 1600px) {
					gap: 2rem;
				}

				@media screen and (max-width: 1200px) {
					gap: 1.5rem;
					grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				}

				.latest-news__item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 1.5rem;
					color: var(--color-tertiary);

					img {
						position: relative;
						width: 100%;
						height: auto;
						border-radius: 20px;
						transition: all .3s ease-in-out;
					}

					h3 {
						font-size: calc(var(--font-size) * 1.5);
						font-weight: var(--font-weight-bold);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					span {
						text-align: left;
						margin-block-start: -1rem;
					}

					p {
						font-size: var(--font-size);
						font-weight: var(--font-weight-medium);
						line-height: 1.5;
						text-align: left;
					}

					&:has(.btn-more-secondary:hover) {

						img {
							filter: contrast(120%) saturate(120%) brightness(120%);
							box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
						}
					}

					.btn-more-secondary {
						position: relative;
						align-self: flex-start;
						background-color: var(--color-tertiary);
						color: var(--color-secondary);
						font-size: calc(var(--font-size) * 1.25);
						text-decoration: none;
						padding: 1rem 2rem;
						border-radius: 10px;
						transition: all .3s ease-in-out;

						&:hover {
							transform: scale(1.05);
						}
					}
				}
			}
		}
	}

	.section-anchor {
		position: absolute;
		top: -2rem;
		left: 0;
	}

	.mission__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-image: url("./assets/images/img-border.png"), url("./assets/images/img-bg-news.jpg");
		background-size: auto 50px, cover;
		background-position: bottom -22px left, center;
		background-repeat: repeat-x, no-repeat;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 1200px) {
			padding-block: 3rem;
		}

		.mission__content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 1200px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: var(--font-size);
				font-weight: var(--font-weight-medium);
				line-height: 1.5;
				text-align: justify;
				text-align-last: center;
			}

			.mission__content-sections {
				position: relative;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 5vw;
				align-items: start;

				@media screen and (max-width: 600px) {
					grid-template-columns: repeat(2, 1fr);
				}

				@media screen and (max-width: 420px) {
					grid-template-columns: repeat(1, 1fr);
				}

				.mission__content-section {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 1.5rem;
					color: var(--color-text);

					img {
						position: relative;
						height: 100px;
						width: auto;
					}

					h4 {
						font-size: calc(var(--font-size) * 1.15);
						font-weight: var(--font-weight-medium);
						line-height: 1.2;
						text-align: center;
					}

					p {
						font-size: calc(var(--font-size) * .9);
						line-height: 1.5;
						text-align: center;
					}
				}
			}
		}
	}

	.vision__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-color: var(--color-bg-light);
		background-image: url("./assets/images/img-border.png");
		background-size: auto 50px;
		background-position: bottom -22px left;
		background-repeat: repeat-x;
		overflow: hidden;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 1200px) {
			padding-block: 3rem;
		}

		&::before {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -20%;
			left: -30%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: 1;
		}

		&::after {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -20%;
			right: -30%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: 1;
		}

		.vision__content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 1200px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: var(--font-size);
				font-weight: var(--font-weight-medium);
				line-height: 1.5;
				text-align: justify;
				text-align-last: center;
			}
		}
	}

	.news__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-color: var(--color-secondary);
		background-image: url("./assets/images/img-border.png");
		background-size: auto 50px;
		background-position: bottom -22px left;
		background-repeat: repeat-x;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 768px) {
			padding-block: 4rem;
		}

		.news__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			h2 {
				font-size: calc(var(--font-size) * 2.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;

				@media screen and (max-width: 1200px) {
					font-size: calc(var(--font-size) * 2);
				}
			}

			&>p {
				position: relative;
				width: 100%;
				max-width: 960px;
				font-size: calc(var(--font-size) * 1.25);
				font-weight: var(--font-weight-medium);
				line-height: 1.5;
				text-align: justify;
				text-align-last: center;

				@media screen and (max-width: 1200px) {
					font-size: var(--font-size);
				}
			}

			.news__content-items {
				position: relative;
				width: 100%;
				display: grid;
				/*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
				grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
				justify-content: center;
				gap: 2.5vw;

				@media screen and (max-width: 768px) {
					gap: 2rem;
				}

				.news__content-item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					gap: 1.5rem;
					color: var(--color-tertiary);

					img {
						position: relative;
						width: 100%;
						height: auto;
						border-radius: 20px;
						transition: all .3s ease-in-out;
					}

					h3 {
						font-size: calc(var(--font-size) * 1.5);
						font-weight: var(--font-weight-bold);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					span {
						position: relative;
						display: block;
						margin-block: -.5rem;
						font-size: calc(var(--font-size) * .8);
						font-weight: var(--font-weight-regular);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					p {
						font-size: var(--font-size);
						font-weight: var(--font-weight-regular);
						line-height: 1.5;
						text-align: left;
					}

					&:has(.btn-more-secondary:hover) {
						img {
							filter: contrast(120%) saturate(120%) brightness(120%);
							box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
						}
					}

					.btn-more-secondary {
						position: relative;
						align-self: flex-start;
						margin-top: auto;
						background-color: var(--color-tertiary);
						color: var(--color-secondary);
						font-size: calc(var(--font-size) * 1.25);
						text-decoration: none;
						padding: 1rem 2rem;
						border-radius: 10px;
						transition: all .3s ease-in-out;

						&:hover {
							transform: scale(1.05);
						}
					}
				}
			}
		}
	}

	.news-item__container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-color: var(--color-secondary);
		background-image: url("./assets/images/img-border.png");
		background-size: auto 50px;
		background-position: bottom -22px left;
		background-repeat: repeat-x;
		border-bottom: 2px solid var(--color-primary);

		.news-item__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			text-align: left;

			h2 {
				font-size: calc(var(--font-size) * 2.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: .5rem;
			}

			h3 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: 1.5rem;
			}

			h4 {
				font-size: calc(var(--font-size) * 1.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: 1.5rem;
			}

			.news-item__date {
				position: relative;
				display: block;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.2;
				text-align: left;
				margin-bottom: 2rem;
			}

			p {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
			}

			ul {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
				list-style-type: square;
				list-style-position: inside;
			}

			ol {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
				list-style-type: decimal;
				list-style-position: inside;
			}

			a {
				position: relative;
				color: var(--color-text-emphasis);
				font-weight: var(--font-weight-medium);
				text-decoration: none;

				&::after {
					content: "";
					position: absolute;
					bottom: -1px;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: var(--color-text-emphasis);
					transform: scaleX(1);
					transform-origin: left;
					transition: transform .3s ease-in-out;
				}

				&:hover::after {
					transform: scaleX(0);
					transform-origin: right;
				}
			}

			img.alignleft {
				float: left;
				max-width: 33%;
				margin-right: 2rem;
				margin-bottom: 2rem;
				border-radius: 10px;
			}

			img.alignright {
				float: right;
				max-width: 33%;
				margin-left: 2rem;
				margin-bottom: 2rem;
				border-radius: 10px;
			}
		}
	}

	.road-safety__section-1-container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-image: url("./assets/images/img-border.png"), url("./assets/images/img-bg-news.jpg");
		background-size: auto 50px, cover;
		background-position: bottom -22px left, center;
		background-repeat: repeat-x, no-repeat;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 768px) {
			padding-block: 5rem;
		}

		.road-safety__section-1-content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 768px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: justify;
				text-align-last: left;
			}

			&.improving-road-safety__section-1-content {

				p {
					width: 100%;
					text-align: left;
				}
			}
		}
	}

	.road-safety__section-2-container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-color: var(--color-bg-light);
		background-image: url("./assets/images/img-border.png");
		background-size: auto 50px;
		background-position: bottom -22px left;
		background-repeat: repeat-x;
		overflow: hidden;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 768px) {
			padding-block: 5rem;
		}

		&::before {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -20%;
			left: -30%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: 1;
		}

		&::after {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -5%;
			right: -25%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: 1;
		}

		.road-safety__section-2-content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 768px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: justify;
				text-align-last: left;
			}
		}
	}

	.contact__section-1-container {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		text-align: center;
		background-image: url("./assets/images/img-border.png");
		background-size: auto 50px;
		background-position: bottom -22px left;
		background-repeat: repeat-x;
		overflow: hidden;
		border-bottom: 2px solid var(--color-primary);

		@media screen and (max-width: 768px) {
			padding-top: 3rem !important;
		}

		&::before {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -20%;
			left: -30%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: -1;
		}

		&::after {
			content: url("./assets/images/africa-bg.svg");
			position: absolute;
			top: -5%;
			right: -25%;
			width: 50%;
			height: auto;
			opacity: .1;
			z-index: -1;
		}

		.contact__section-1-content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10vh;

			@media screen and (max-width: 1200px) {
				gap: 4rem;
			}

			@media screen and (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: 2rem;
			}

			.contact__section-1-info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				gap: 1rem;

				h2 {
					font-size: calc(var(--font-size) * 2);
					font-weight: var(--font-weight-medium);
					color: var(--color-text);
					line-height: 1.2;
				}

				h3 {
					font-size: calc(var(--font-size) * 1.5);
					font-weight: var(--font-weight-medium);
					color: var(--color-text);
					line-height: 1.2;
					margin-block-start: 1rem;
				}

				p {
					font-size: var(--font-size);
					font-weight: var(--font-weight-regular);
					line-height: 1.5;
					text-align: justify;
					text-align-last: left;
				}

				a {
					position: relative;
					color: var(--color-text-emphasis);
					font-weight: var(--font-weight-bold);
					text-decoration: none;

					&::after {
						content: "";
						position: absolute;
						bottom: -1px;
						left: 0;
						width: 100%;
						height: 2px;
						background-color: var(--color-text-emphasis);
						transform: scaleX(0);
						transform-origin: right;
						transition: transform .3s ease-in-out;
					}

					&:hover::after {
						transform: scaleX(1);
						transform-origin: left;
					}
				}
			}

			.contact__section-1-form {
				position: relative;
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				gap: 1rem;
				background-color: rgba(242, 211, 152, .75);
				padding: 2rem;
				border-radius: 20px;

				@media screen and (max-width: 1200px) {
					justify-content: flex-start;
				}

				@media screen and (max-width: 600px) {
					padding: 1rem;
				}

				h3 {
					font-size: calc(var(--font-size) * 1.75);
					font-weight: var(--font-weight-medium);
					color: var(--color-text);
					line-height: 1.2;

					@media screen and (max-width: 1200px) {
						font-size: calc(var(--font-size) * 1.5);
					}
				}

				form {
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					gap: 1rem;

					.contact__section-1-form-line {
						position: relative;
						width: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;
						gap: .5rem;
						text-align: left;

						label {
							font-size: calc(var(--font-size) * 1.1);
							font-weight: var(--font-weight-regular);
							color: var(--color-text);
							line-height: 1.2;
						}

						input {
							position: relative;
							width: 100%;
							font-size: var(--font-size);
							font-weight: var(--font-weight-regular);
							color: var(--color-text);
							line-height: 1.2;
							padding-inline: 1rem;
							padding-block: .75rem;
							border-radius: 5px;
							border: 1px solid var(--color-primary);
							outline: none;
							transition: all .2s ease-in-out;

							&:focus {
								border-color: var(--color-primary);
								outline: none;
								box-shadow: inset 0px 0px 3px 2px rgba(0, 0, 0, .2);

								&:invalid {
									border-color: var(--color-error);
								}
							}
						}

						textarea {
							position: relative;
							width: 100%;
							font-size: var(--font-size);
							font-weight: var(--font-weight-regular);
							color: var(--color-text);
							line-height: 1.2;
							padding-inline: 1rem;
							padding-block: .75rem;
							border-radius: 5px;
							border: 1px solid var(--color-primary);
							outline: none;
							resize: none;
							transition: all .2s ease-in-out;

							&:focus {
								border-color: var(--color-primary);
								outline: none;
								box-shadow: inset 0px 0px 3px 2px rgba(0, 0, 0, .2);
							}
						}
					}

					&>p {
						display: flex;
						flex-direction: column;
						width: 100%;
						margin-bottom: 0;
					}

					.wpcf7-response-output {
						width: 100%;
						margin: 0;
						border: none;
						padding: 1rem;
						background-color: var(--color-primary);
						color: var(--color-secondary);
						border-radius: 5px;
					}

					input[type="submit"] {
						position: relative;
						display: block;
						align-self: flex-end;
						background-color: var(--color-text-emphasis);
						color: var(--color-secondary);
						font-size: calc(var(--font-size) * 1.25);
						text-decoration: none;
						padding-block: 1rem;
						padding-inline: 4rem;
						border: none;
						border-radius: 10px;
						cursor: pointer;
						transition: all .3s ease-in-out;

						@media screen and (max-width: 1200px) {
							align-self: center;
							padding-inline: 2rem;
							font-size: var(--font-size);
							width: 100%;
							text-align: center;
						}

						@media screen and (max-width: 600px) {
							padding-inline: 1.5rem;
						}

						&:hover {
							transform: scale(1.05);
						}
					}
				}
			}
		}
	}

	.page-bottom {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		padding-block-end: 40vh;
		background-color: var(--color-secondary);
		background-image: url("./assets/images/img-bg-scenery.png");
		background-position: bottom center;
		background-size: 100% auto;
		background-repeat: no-repeat;

		@media screen and (max-width: 1600px) {
			padding-block-start: 4rem;
			padding-block-end: 10rem;
		}

		@media screen and (max-width: 1200px) {
			padding-block-end: 8rem;
		}

		@media screen and (max-width: 768px) {
			padding-block-end: 6rem;
		}

		&.page-bottom--events {
			background-color: var(--color-bg-light);
		}

		&.page-bottom--news {
			background-color: var(--color-bg-light);
		}

		&::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50px;
			background: linear-gradient(to bottom, rgba(153, 38, 57, 0), rgba(65, 19, 51, 1));
		}

		.page-content__content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			text-align: left;
			padding-block-end: 250px;

			h2 {
				font-size: calc(var(--font-size) * 2.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: 1.5rem;
			}

			h3 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: 1.5rem;
			}

			h4 {
				font-size: calc(var(--font-size) * 1.5);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				margin-bottom: 1.5rem;
			}

			.news-item__date {
				position: relative;
				display: block;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.2;
				text-align: left;
				margin-bottom: 2rem;
			}

			p {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
			}

			ul {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
				list-style-type: square;
				list-style-position: inside;
			}

			ol {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: left;
				margin-bottom: 1.5rem;
				list-style-type: decimal;
				list-style-position: inside;
			}

			a {
				position: relative;
				color: var(--color-text-emphasis);
				font-weight: var(--font-weight-medium);
				text-decoration: none;

				&::after {
					content: "";
					position: absolute;
					bottom: -1px;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: var(--color-text-emphasis);
					transform: scaleX(1);
					transform-origin: left;
					transition: transform .3s ease-in-out;
				}

				&:hover::after {
					transform: scaleX(0);
					transform-origin: right;
				}
			}

			img.alignleft {
				float: left;
				max-width: 33%;
				margin-right: 2rem;
				margin-bottom: 2rem;
				border-radius: 10px;
			}

			img.alignright {
				float: right;
				max-width: 33%;
				margin-left: 2rem;
				margin-bottom: 2rem;
				border-radius: 10px;
			}
		}

		.not-found__content {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			text-align: center;
			padding-block-start: 100px;
			padding-block-end: 150px;

			h1 {
				font-size: calc(var(--font-size) * 15);
				font-weight: var(--font-weight-bold);
				color: var(--color-tertiary);
				line-height: 1.2;

				@media screen and (max-width: 768px) {
					font-size: calc(var(--font-size) * 10);
				}

				@media screen and (max-width: 460px) {
					font-size: calc(var(--font-size) * 5);
				}
			}

			p {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: center;
				margin-bottom: 1.5rem;

				@media screen and (max-width: 768px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			a {
				position: relative;
				display: inline-block;
				background-color: var(--color-text-emphasis);
				color: var(--color-secondary);
				font-size: calc(var(--font-size) * 1.25);
				text-decoration: none;
				text-decoration-thickness: auto;
				padding: 1rem 2rem;
				border-radius: 10px;
				transition: all .3s ease-in-out;

				&:hover {
					transform: scale(1.05);
				}
			}
		}

		.latest-events__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			display: grid;
			grid-auto-rows: auto;
			gap: 10vh;
			margin-block-end: 15vh;

			@media screen and (max-width: 1600px) {
				gap: 4rem;
				margin-block-end: 10rem;
			}

			@media screen and (max-width: 1200px) {
				gap: 3rem;
				margin-block-end: 8rem;
			}

			@media screen and (max-width: 768px) {
				gap: 2rem;
				margin-block-end: 6rem;
			}

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-bold);
				color: var(--color-tertiary);
				line-height: 1.2;
				text-transform: uppercase;
				text-align: center;
			}

			.latest-events__items {
				position: relative;
				display: grid;
				grid-template-columns: repeat(3, minmax(350px, 1fr));
				gap: 2.5vw;

				@media screen and (max-width: 1200px) {
					gap: 1.5rem;
					grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
				}

				.latest-events__item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 1.5rem;
					color: var(--color-tertiary);
					text-decoration: none;

					&:hover {
						img {
							filter: contrast(120%) saturate(120%) brightness(120%);
							box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
						}
					}

					img {
						position: relative;
						width: 100%;
						height: auto;
						border-radius: 20px;
						transition: all .3s ease-in-out;
					}

					h3 {
						font-size: calc(var(--font-size) * 1.5);
						font-weight: var(--font-weight-bold);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					span {
						position: relative;
						text-align: left;
						margin-top: -1rem;
					}

					p {
						font-size: var(--font-size);
						font-weight: var(--font-weight-medium);
						line-height: 1.5;
						text-align: left;
					}
				}
			}
		}

		.latest-news-events__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			display: grid;
			grid-auto-rows: auto;
			gap: 10vh;
			margin-inline: auto;
			margin-block-start: 0;
			margin-block-end: 10vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-bold);
				color: var(--color-tertiary);
				line-height: 1.2;
				text-transform: uppercase;
				text-align: center;
			}

			.latest-news-events__content-items {
				position: relative;
				display: grid;
				/*grid-template-columns: repeat(4, 1fr);*/
				grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
				justify-content: center;
				gap: 2.5vw;

				.latest-news-events__content-item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					gap: 1.5rem;
					color: var(--color-tertiary);

					img {
						position: relative;
						width: 100%;
						height: auto;
						border-radius: 20px;
						transition: all .3s ease-in-out;
					}

					h3 {
						font-size: calc(var(--font-size) * 1.5);
						font-weight: var(--font-weight-bold);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					span {
						position: relative;
						display: block;
						margin-block: -.5rem;
						font-size: calc(var(--font-size) * .8);
						font-weight: var(--font-weight-medium);
						line-height: 1.2;
						text-align: left;
						text-transform: uppercase;
					}

					p {
						font-size: var(--font-size);
						font-weight: var(--font-weight-regular);
						line-height: 1.5;
						text-align: left;
					}

					&:has(.btn-more-secondary:hover) {
						img {
							filter: contrast(120%) saturate(120%) brightness(120%);
							box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
						}
					}

					.btn-more-secondary {
						position: relative;
						align-self: flex-start;
						margin-top: auto;
						background-color: var(--color-tertiary);
						color: var(--color-secondary);
						font-size: calc(var(--font-size) * 1.25);
						text-decoration: none;
						padding: 1rem 2rem;
						border-radius: 10px;
						transition: all .3s ease-in-out;

						&:hover {
							transform: scale(1.05);
						}
					}
				}
			}
		}

		.our-approach__content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;
			margin-bottom: 7.5vh;

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 1200px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				font-size: var(--font-size);
				font-weight: var(--font-weight-medium);
				line-height: 1.5;
				text-align: justify;
				text-align-last: center;
			}
		}

		.our-approach__steps-container {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr .33fr 1fr .33fr 1fr .33fr 1fr;
			align-items: start;
			gap: 2.5vw;
			margin-bottom: 10vh;

			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(1, 1fr);
			}


			.our-approach__step {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: start;
				justify-content: center;
				gap: 1rem;

				@media screen and (max-width: 768px) {
					align-items: center;
				}

				&:nth-child(odd) {

					img {
						border-radius: 20px;
						box-shadow: 0 4px 5px rgba(0, 0, 0, .3);

						@media screen and (max-width: 768px) {
							width: 100%;
							max-width: 360px;
						}
					}

					h4 {
						position: relative;
						width: 100%;
						text-align: center;
					}

					p {
						text-align: center;
					}
				}

				&:nth-child(even) {
					top: 15%;

					@media screen and (max-width: 768px) {
						top: 0;
						transform: rotate(90deg);
						max-width: 75px;
						margin-inline: auto;
					}
				}

				&:nth-of-type(4) {
					img {
						opacity: .75;
					}
				}

				&:nth-of-type(6) {
					img {
						opacity: .5;
					}
				}
			}
		}

		.events__container {
			position: relative;
			width: 100%;
			text-align: center;
			padding-block-end: 10vh;

			.events__content {
				position: relative;
				width: 100%;
				max-width: var(--container-width);
				margin: 0 auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				gap: 5vh;

				h2 {
					font-size: calc(var(--font-size) * 2.5);
					font-weight: var(--font-weight-medium);
					color: var(--color-text);
					line-height: 1.2;

					@media screen and (max-width: 1200px) {
						font-size: calc(var(--font-size) * 2);
					}
				}

				&>p {
					position: relative;
					width: 100%;
					max-width: 960px;
					font-size: calc(var(--font-size) * 1.25);
					font-weight: var(--font-weight-medium);
					line-height: 1.5;
					text-align: justify;
					text-align-last: center;

					@media screen and (max-width: 1200px) {
						font-size: var(--font-size);
					}
				}

				.events__content-items {
					position: relative;
					width: 100%;
					display: grid;
					grid-template-columns: repeat(auto-fit, minmax(250px, 320px));
					justify-content: center;
					gap: 2.5vw;

					@media screen and (max-width: 768px) {
						gap: 2rem;
					}

					.events__content-item {
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						align-items: flex-start;
						gap: 1.5rem;
						color: var(--color-tertiary);

						img {
							position: relative;
							width: 100%;
							height: auto;
							border-radius: 20px;
							transition: all .3s ease-in-out;
						}

						h3 {
							font-size: calc(var(--font-size) * 1.5);
							font-weight: var(--font-weight-bold);
							line-height: 1.2;
							text-align: left;
							text-transform: uppercase;
						}

						span {
							position: relative;
							display: block;
							margin-block: -.5rem;
							font-size: calc(var(--font-size) * .8);
							font-weight: var(--font-weight-regular);
							line-height: 1.2;
							text-align: left;
							text-transform: uppercase;
						}

						p {
							font-size: var(--font-size);
							font-weight: var(--font-weight-regular);
							line-height: 1.5;
							text-align: left;
						}

						&:has(.btn-more-secondary:hover) {
							img {
								filter: contrast(120%) saturate(120%) brightness(120%);
								box-shadow: 0 4px 5px rgba(0, 0, 0, .3);
							}
						}

						.btn-more-secondary {
							position: relative;
							align-self: flex-start;
							margin-top: auto;
							background-color: var(--color-tertiary);
							color: var(--color-secondary);
							font-size: calc(var(--font-size) * 1.25);
							text-decoration: none;
							padding: 1rem 2rem;
							border-radius: 10px;
							transition: all .3s ease-in-out;

							&:hover {
								transform: scale(1.05);
							}
						}
					}
				}
			}
		}

		.road-safety__section-3-content {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			margin-inline: auto;
			margin-block-start: 0;
			margin-block-end: 250px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 5vh;

			@media screen and (max-width: 768px) {
				margin-block-end: 150px;
			}

			h2 {
				font-size: calc(var(--font-size) * 2);
				font-weight: var(--font-weight-medium);
				color: var(--color-text);
				line-height: 1.2;
				text-transform: uppercase;

				@media screen and (max-width: 768px) {
					font-size: calc(var(--font-size) * 1.5);
				}
			}

			p {
				position: relative;
				width: 100%;
				font-size: var(--font-size);
				font-weight: var(--font-weight-regular);
				line-height: 1.5;
				text-align: justify;
				text-align-last: left;
			}
		}

		.contact__section-2-container {
			position: relative;
			width: 100%;
			-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
			mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
		}

		&:has(.contact__section-2-container) {
			padding-block-start: 0;
			padding-block-end: 50vh;
			padding-inline: 0;
		}

		.library-access__container {
			position: relative;
			width: 100%;
			max-width: calc(var(--container-width) * .8);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: flex-start;
			gap: 4rem;
			margin-inline: auto;
			margin-block: 2rem 250px;

			@media screen and (max-width: 768px) {
				margin-block-end: 150px;
				gap: 2rem;
			}

			.library-access__filters-container {
				position: relative;
				width: 100%;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding: 2rem;
				border-radius: 10px;
				border: 1px solid var(--color-primary);
				background-color: var(--color-bg-filter);

				@media screen and (max-width: 600px) {
					padding: 1rem;
				}

				.library-access__search {
					input {
						position: relative;
						width: 100%;
						font-size: var(--font-size);
						font-weight: var(--font-weight-regular);
						line-height: 1.5;
						text-align: left;
						padding: .5rem;
						border-radius: 5px;
						border: 1px solid var(--color-primary);
						background-color: var(--color-secondary);
						color: var(--color-text);
						transition: all .3s ease-in-out;

						&:focus {
							outline: none;
						}
					}
				}

				.library-access__filters {
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					gap: 2rem;

					@media screen and (max-width: 1200px) {
						grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
					}
				}

				.library-access__filter-section {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					gap: .5rem;

					label {
						font-size: var(--font-size);
						font-weight: var(--font-weight-regular);
						line-height: 1.5;
						text-align: left;
					}

					select {
						position: relative;
						width: 100%;
						font-size: var(--font-size);
						font-weight: var(--font-weight-regular);
						line-height: 1.5;
						text-align: left;
						padding: .5rem;
						border-radius: 5px;
						border: 1px solid var(--color-primary);
						background-color: var(--color-secondary);
						color: var(--color-text);
						transition: all .3s ease-in-out;
					}

					&:last-of-type {
						display: flex;
						flex-direction: row;
						align-items: flex-end;
						gap: 1rem;
						justify-content: space-between;

						@media screen and (max-width: 420px) {
							flex-direction: column;
						}
					}

					a.library-access__clear-btn {
						font-size: calc(var(--font-size) * 1.15);
						font-weight: var(--font-weight-medium);
						color: var(--color-primary);

						&:hover {
							text-decoration: none;
						}
					}

					button {
						align-self: flex-end;
						margin-top: auto;
						position: relative;
						background-color: var(--color-tertiary);
						color: var(--color-secondary);
						font-size: var(--font-size);
						border: none;
						outline: none;
						padding: .55rem 2rem;
						border-radius: 10px;
						transition: all .3s ease-in-out;
						cursor: pointer;

						&:hover {
							transform: scale(1.05);
						}
					}
				}
			}

			.library-access__content {
				position: relative;
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 2rem;

				@media screen and (max-width: 1200px) {
					grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
					gap: 1rem;
				}

				.library-access__content-item {
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: 1rem;
					padding: 1rem;
					border-radius: 10px;
					border: 1px solid var(--color-primary);
					background-color: var(--color-secondary);
					transition: all .3s ease-in-out;

					.library-access__content-item-top {
						position: relative;
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 1rem;
						font-weight: var(--font-weight-medium);
						background-color: var(--color-primary);
						color: var(--color-secondary);
						padding: .5rem;
						border-radius: 5px;

						h3 {
							text-align: left;
							font-size: var(--font-size);
							line-height: 1.5;
						}
					}

					.library-access__content-item-row {
						position: relative;
						width: 100%;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						gap: 1rem;
						font-weight: var(--font-weight-medium);

						h4 {
							text-align: left;
							font-size: var(--font-size);
							line-height: 1.5;
						}
					}

					p {
						margin-bottom: auto;
					}

					.library-access__download-btn {
						position: relative;
						width: 100%;
						border: none;
						text-align: center;
						text-decoration: none;
						background-color: var(--color-text-emphasis);
						color: var(--color-secondary);
						font-size: var(--font-size);
						padding: .5rem;
						border-radius: 10px;
						transition: all .3s ease-in-out;
						cursor: pointer;
						margin-top: auto;
					}

					&:has(.library-access__download-btn:hover) {
						box-shadow: 4px 4px 5px rgba(0, 0, 0, .2);
					}
				}
			}
		}
	}

	footer {
		position: relative;
		width: 100%;
		padding-inline: 1rem;
		padding-block: 10vh;
		background-color: var(--color-bg-footer);

		@media screen and (max-width: 768px) {
			padding-block: 2.5rem;
		}

		.footer__content {
			position: relative;
			width: 100%;
			max-width: var(--container-width);
			margin: 0 auto;
			color: var(--color-secondary);

			.footer__top {
				position: relative;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 5vw;
				border-bottom: 1px solid var(--color-secondary);
				padding-bottom: 5vh;

				@media screen and (max-width: 768px) {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
				}

				.footer__top-logo-container {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					gap: 2rem;

					@media screen and (max-width: 768px) {
						flex-basis: 100%;
					}

					a {
						display: block;
						transition: all .3s ease-in-out;
						text-align: center;

						img {
							position: relative;
							margin: 0 auto;
							height: 9rem;
						}

						&:hover {
							transform: scale(1.1);
						}
					}

					p {
						font-size: calc(var(--font-size) * .75);
						text-align: justify;
						text-align-last: center;
					}

					.footer__top-social-container {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						gap: 1rem;

						a {
							display: block;
							transition: all .3s ease-in-out;

							&:hover {
								transform: scale(1.1);
							}

							img {
								width: 40px;
								height: auto;
							}
						}
					}
				}

				ul {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					gap: 1rem;
					list-style-type: none;

					@media screen and (max-width: 768px) {
						width: 100%;
						max-width: 250px;
					}

					@media screen and (max-width: 560px) {
						width: 100%;
						max-width: 100%;
					}

					li {
						&:first-child {
							font-weight: var(--font-weight-medium);
							text-transform: uppercase;
						}

						a {
							position: relative;
							display: inline-block;
							color: var(--color-secondary);
							text-decoration: none;
							line-height: 1.5;
							transition: all .3s ease-in-out;

							&::after {
								content: "";
								position: absolute;
								bottom: 0;
								left: 0;
								width: 100%;
								height: 1px;
								background-color: var(--color-secondary);
								transform: scaleX(0);
								transform-origin: right;
								transition: transform .3s ease-in-out;
							}

							&:hover::after {
								transform: scaleX(1);
								transform-origin: left;
							}
						}
					}

					&:last-of-type {
						font-weight: var(--font-weight-medium);
						text-transform: uppercase;
					}
				}
			}

			.footer__bottom {
				position: relative;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				gap: 2rem;
				padding-top: 5vh;

				@media screen and (max-width: 768px) {
					padding-top: 3rem;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 1rem;
				}

				p {
					font-size: var(--font-size);
					font-weight: var(--font-weight-regular);
					line-height: 1.5;
					text-align: left;
				}

				.footer__bottom-links {
					position: relative;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					gap: 2rem;

					a {
						position: relative;
						display: inline-block;
						color: var(--color-secondary);
						text-decoration: none;
						line-height: 1.5;
						transition: all .3s ease-in-out;

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 1px;
							background-color: var(--color-secondary);
							transform: scaleX(0);
							transform-origin: right;
							transition: transform .3s ease-in-out;
						}

						&:hover::after {
							transform: scaleX(1);
							transform-origin: left;
						}
					}
				}
			}
		}
	}
}