@font-face {
	font-family: OutfitRegular;
	src: url(../fonts/Outfit/Outfit-Regular.ttf);
}

@font-face {
	font-family: OutfitMedium;
	src: url(../fonts/Outfit/Outfit-Medium.ttf);
}

@font-face {
	font-family: LexendBold;
	src: url(../fonts/Lexend/Lexend-Bold.ttf);
}

@font-face {
	font-family: LexendExtraBold;
	src: url(../fonts/Lexend/Lexend-ExtraBold.ttf);
}

@font-face {
	font-family: LexendBlack;
	src: url(../fonts/Lexend/Lexend-Black.ttf);
}

:root {
	--primary-color: #ffae00;
	--secondary-color: #121212;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
	text-decoration: none !important;
	list-style: none;
	outline: none;
	font: normal 18px/24px OutfitRegular, "Sans-serif";

	resize: none !important;
	scroll-behavior: smooth;
}

:root {
	--primary-color: #c42626;
	--secondary-color: #ffffff;
	--dark-color: #1a1a1a;
	--light-color: #f8f9fa;
}

body {
	overflow-x: hidden;
}

#mainContainer {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	overflow-x: hidden;
}

/* --------------------------------------------------- */
/* --------------- Bootstrap Reset ------------------- */

a {
	color: #1a1a1a;
}

section {
	scroll-snap-align: start;
	scroll-padding-top: 250px;
	scroll-margin-top: 155px;
}

input,
textarea,
select {
	width: 100%;
	border-color: #ddd !important;
	transition: 300ms ease-in;

	&:focus {
		border-color: red !important;
	}
}

input[type="checkbox"],
input[type="radio"] {
	scale: 1.2;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;

	&:invalid {
		color: gray !important;
	}
}

select::-ms-expand {
	display: none;
}

input[type="date"]:invalid::-webkit-datetime-edit {
	color: gray !important;
}

button {
	&:focus {
		outline: none !important;
		box-shadow: none !important;
	}
}

:is(ul, ol):not(:is(header, footer) :is(ul, ol)) {
	padding: 0 !important;
	margin: 0 !important;

	li {
		margin-bottom: 6px;
	}
}

img,
video,
svg {
	max-width: 100%;
	min-height: 100%;
	object-fit: cover;
}

.btn.btn-primary {
	background: var(--primary-color) !important;
	border-color: transparent !important;
	color: var(--secondary-color) !important;
	position: relative;
	overflow: hidden;
	padding: 10px 20px;
	min-width: 150px !important;
	transition: outline 300ms ease-in;

	&:hover {
		color: var(--light-color) !important;
		background: var(--dark-color) !important;
	}

	&:focus {
		color: var(--light-color) !important;
		background: var(--dark-color) !important;
	}
}

.btn.btn-secondary {
	background: #fff !important;
	border-color: transparent !important;
	color: var(--secondary-color) !important;
	position: relative;
	overflow: hidden;
	padding: 12px 20px;
	min-width: 150px !important;
	outline: 1px solid transparent !important;
	outline-offset: -5px;
	transition: outline 300ms ease-in;

	&:hover {
		color: #fff !important;
		background: var(--secondary-color) !important;
		outline: 1px solid #fff !important;
		outline-offset: -7px;
	}

	&:focus {
		color: #fff !important;
		background: var(--secondary-color) !important;
		outline: 1px solid #fff !important;
		outline-offset: -7px;
	}
}

.accordion-button {
	font: bold 20px/28px MontserratBold, "Sans-serif";

	&::after {
		content: "\f054";
		font-family: "Font Awesome 5 Free" !important;
		transition: content 0.2sease-in-out;
		background: transparent !important;
	}

	&:not(.collapsed) {
		background-color: transparent !important;
		color: var(--primary-color) !important;
		font-weight: bold;
		box-shadow: none !important;

		&::after {
			content: "\f078";
			transform: rotate(0deg);
			background: transparent !important;
		}
	}
}

.accordion-item {
	border-color: var(--primary-color) !important;

	&:last-child {
		border: 0 !important;
	}
}

.accordion-button:focus {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.form-check-input {
	&:focus {
		box-shadow: none !important;
		border-color: var(--primary-color) !important;
	}

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

	&:checked {
		border-color: var(--primary-color) !important;
		background-color: var(--primary-color) !important;
	}
}

.form-control:focus {
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border-color: var(--primary-color) !important;
	outline: 0;
	box-shadow: none !important;
}

.pagination {
	li {
		margin: 0;

		&.page-item,
		.page-link {
			outline: none !important;
			box-shadow: none !important;
			color: var(--primary-color) !important;
			overflow: hidden;
			transition: 300ms ease-in;

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

/* -------------------------------------------------- */
/* --------------- Base Component ------------------- */
.text-heading {
	font: bold 42px/52px LexendBold, "Sans-serif";
	color: var(--secondary-color);
}

.text-subheading {
	font: normal 28px/28px OutfitRegular, "Sans-serif";
	color: var(--primary-color);
}

#headerArea {

	.topbar {
		a {
			font: normal 14px/20px OutfitRegular, "Sans-serif";
		}

		.navbar-brand {
			display: flex;
			align-items: center;
			gap: 16px;

			h3 {
				transition: 300ms ease-in-out;
				color: var(--primary-color) !important;
				font: normal 32px/32px LexendExtraBold, "Sans-serif";

				span {
					font: normal 32px/32px LexendExtraBold, "Sans-serif";
					color: var(--dark-color);
				}
			}

			img {
				max-width: 60px;
				height: auto;
				border-radius: 5px;
			}
		}
	}

	.social {
		a {
			font-size: 20px;
			color: var(--dark-color);
			transition: color 300ms ease-in-out;

			i {
				font-size: 20px;
			}

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

	.navbar-box {
		border-top: 1px solid var(--dark-color);
		border-bottom: 1px solid var(--dark-color);
	}

	#menu-header-menu {
		li {
			a {
				transition: 300ms ease-in-out;
				padding: 0 10px;
			}

			&.current-menu-item,
			&:hover {
				a {
					/* box-shadow: 0 5px 0 -4px currentColor; */
					color: var(--primary-color) !important;
				}
			}
		}
	}
}

#breadcrumbsArea {
	background: var(--secondary-color) url(../images/container-cargo.jpg) no-repeat center center / cover !important;

	&::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		background: linear-gradient(to bottom,
				rgba(0, 0, 0, 0.25),
				rgba(0, 0, 0, 0.85));
	}

	* {
		color: #fff;
	}

	ul {
		li {
			a {
				font: normal 18px/24px OutfitMedium, "Sans-serif";
				transition: 300ms ease-in-out;

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

			&:not(:last-child) {
				&::after {
					content: "//";
					margin: 0 10px;
					color: #fff;
				}
			}
		}
	}
}

.offcanvas {
	.navbar-brand {
		transition: 300ms ease-in-out;
		color: var(--primary-color) !important;
		font: normal 32px/32px LexendExtraBold, "Sans-serif";

		span {
			font: normal 32px/32px LexendExtraBold, "Sans-serif";
			color: var(--dark-color);
		}

		img {
			max-width: 60px;
			height: auto;
			border-radius: 5px;
		}
	}

	.menu-header-menu-container {
		height: 100%;
		overflow: scroll;
	}

	.footer {
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
	}

	.social {
		padding: 16px 0;

		a {
			font-size: 20px;
			color: var(--dark-color);
			transition: color 300ms ease-in-out;

			i {
				font-size: 20px;
			}

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

	.menu-item {
		margin: 7px 0;
		padding: 10px 15px;
		border-left: 2px solid transparent;
		transition: 300ms ease-in-out;

		&:hover,
		&.current-menu-item {
			border-left: 2px solid var(--primary-color);

			a {
				color: var(--primary-color) !important;
			}
		}
	}
}

#loader {
	background: var(--primary-color);
	z-index: 999;

	.spinner {
		border: 8px solid transparent;
		border-top: 8px solid var(--secondary-color);
		border-radius: 50%;
		width: 60px;
		height: 60px;
		animation: spin 1s linear infinite;
	}
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#footerArea {
	a {
		color: var(--dark-color);
		transition: color 300ms ease-in-out;

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

	.navbar-brand {
		transition: 300ms ease-in-out;
		color: var(--primary-color) !important;
		font: normal 32px/32px LexendExtraBold, "Sans-serif";

		span {
			font: normal 32px/32px LexendExtraBold, "Sans-serif";
			color: var(--dark-color);
		}

		img {
			max-width: 60px;
			height: auto;
			border-radius: 5px;
		}
	}

	input {
		width: 100%;
		border: 1px solid var(--dark-color) !important;
		background: transparent !important;
		color: var(--dark-color) !important;
		padding: 10px 15px;
		font: normal 16px/24px OutfitRegular, "Sans-serif";
	}

	.copyWrite {
		font: normal 14px/24px OutfitRegular, "Sans-serif";
	}

	h3 {
		font: bold 20px/28px LexendBold, "Sans-serif";
		color: var(--primary-color);
		margin-bottom: 20px;
	}
}

.line {
	span {
		width: 120px;
		padding: 0 20px;
		font: bold 20px/32px OutfitRegular, "Sans-serif";
		color: var(--primary-color);
		border-left: 4px solid var(--primary-color);
	}

	a {
		width: 120px;
		padding: 0 0 0 10px;
		color: var(--primary-color);

		&:hover {
			color: var(--dark-color) !important;
		}
	}

	hr {
		width: calc(100% - 240px);
	}

	&:not(:has(a)) {
		span {
			width: 145px;
		}

		hr {
			width: calc(100% - 145px);
		}
	}
}

.LatestNews {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 220px);
	grid-auto-rows: 220px;
	grid-column-gap: 16px;
	grid-row-gap: 16px;

	article {
		&:first-child {
			grid-row: 1 / 3;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 100%);
			}

			.text {
				position: absolute;
				inset: auto 0 0 0;
				padding: 30px !important;
				color: #fff;
				z-index: 2;

				a {
					display: block;
					margin: 10px 0;
					font: normal 34px/40px OutfitMedium, "Sans-serif";
					color: var(--secondary-color);
				}

				.excerpt {
					font: normal 16px/24px OutfitRegular, "Sans-serif";
					margin-bottom: 10px;
				}

				.badge {
					background-color: var(--primary-color);
					letter-spacing: 1px;
				}

				.date {
					font: normal 16px/16px OutfitRegular, "Sans-serif";
				}
			}
		}

		&:not(:first-child) {
			display: flex;
			align-items: center;
			justify-content: start;
			gap: 16px;

			img {
				width: 300px;
				height: 100%;
				object-fit: cover;
			}

			.text {
				width: calc(100% - 300px);

				a {
					display: block;
					margin: 5px 0;
					font: normal 26px/34px OutfitMedium, "Sans-serif";
					color: var(--primary-color);
				}

				.badge {
					background-color: var(--primary-color);
					letter-spacing: 1px;
				}

				.date {
					font: normal 16px/16px OutfitRegular, "Sans-serif";
				}
			}
		}
	}
}

.top-stories {
	.item {
		display: flex;
		flex-direction: column;
		gap: 16px;

		.text {
			padding: 20px;

			a {
				display: block;
				margin: 5px 0 10px 0;
				font: normal 20px/28px OutfitMedium, "Sans-serif";
				color: var(--primary-color);
			}

			.excerpt {
				font: normal 16px/24px OutfitRegular, "Sans-serif";
				margin-bottom: 10px;
			}

			.badge {
				background-color: var(--primary-color);
				letter-spacing: 1px;
				padding: 5px 10px;
			}

			.date {
				font: normal 16px/16px OutfitRegular, "Sans-serif";
			}
		}
	}
}

.TopNews {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 450px auto;
	grid-auto-rows: auto;
	grid-column-gap: 16px;
	grid-row-gap: 16px;

	article {
		&:first-child {
			grid-row: 1 / 1;
			grid-column: 3 / 4;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		&:nth-child(2) {
			grid-row: 1 / 1;
			grid-column: 1 / 3;
			position: relative;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			&::after {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #000;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 100%);
			}

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.text {
				position: absolute;
				inset: auto 0 0 0;
				padding: 30px !important;
				color: #fff;
				z-index: 2;

				a {
					display: block;
					margin: 10px 0;
					font: normal 34px/40px OutfitMedium, "Sans-serif";
					color: var(--secondary-color);
				}

				.badge {
					background-color: var(--primary-color);
					letter-spacing: 1px;
				}

				.date {
					font: normal 16px/16px OutfitRegular, "Sans-serif";
				}
			}
		}

		&:not(:first-child, :nth-child(2)) {
			align-items: center;
			justify-content: start;
			gap: 16px;

			img {
				width: 100%;
				min-height: 235px;
				max-height: 250px;
				object-fit: cover;
			}

			.text {
				a {
					display: block;
					margin: 5px 0;
					font: normal 26px/34px OutfitMedium, "Sans-serif";
					color: var(--primary-color);
				}

				.badge {
					background-color: var(--primary-color);
					letter-spacing: 1px;
				}

				.date {
					font: normal 16px/16px OutfitRegular, "Sans-serif";
				}
			}
		}
	}
}



.sidebar {
	padding: 0 16px;

	.category-list {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;

		li {
			margin-bottom: 0;

			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				padding: 10px 16px;
				background-color: var(--primary-color);
				color: var(--secondary-color);
				font: normal 16px/16px OutfitMedium, "Sans-serif";
				border-radius: 5px;
				text-align: center;
				transition: background-color 300ms ease-in-out;

				&:hover {
					background-color: var(--dark-color);
					color: var(--light-color);
				}
			}
		}
	}

	.recent-posts {
		li {
			margin-bottom: 20px;

			a {
				display: flex;
				align-items: center;
				gap: 16px;
				div {
					h4 {
						font-size: 24px;
						transition: 300ms ease-in;

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

				img {
					min-width: 165px !important;
					object-fit: cover;
					border-radius: 5px;
				}
			}
		}
	}
}

.readnews {
	h1 {
		font-weight: 600;
		margin-bottom: 16px;
	}

	.entry-excerpt {
		font-size: 1rem;
		line-height: 1.2rem;
		margin-bottom: 16px;
	}

	.entry-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-bottom: 16px;

		* {
			font-size: .85rem;
		}
	}

	.post-thumbnail {
		margin-bottom: 18px;
		display: block;
		img {
			max-height: 450px;
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
	}

	.cat-links {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		align-items: center;
		font-weight: bold;

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 16px;
			background-color: var(--primary-color);
			color: var(--secondary-color);
			font: normal 16px/16px OutfitMedium, "Sans-serif";
			border-radius: 5px;
			text-align: center;
			transition: background-color 300ms ease-in-out;

			&:hover {
				background-color: var(--dark-color);
				color: var(--light-color);
			}
		}
	}
}

.page-title {
	font-size: 2rem;
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 2rem;
}

.smallnews {

	.news {
		.imgbox a {
			display: block;
			overflow: hidden;
			height: 100%;
			width: 360px;

			img {
				transition: 300ms ease-in-out;
				height: 240px;
				max-width: 360px;
			}

			&:hover {
				img {
					scale: 1.05;
				}
			}
		}

		.entry-title {
			font-size: 2rem;

			a {
				transition: 300ms ease-in-out;
				font-size: 1.5rem;
				font-weight: 600;
			}

			&:hover a {

				color: var(--primary-color);
			}
		}
	}

	.cat-links {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		align-items: center;
		font-weight: bold;

		a {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 16px;
			background-color: var(--primary-color);
			color: var(--secondary-color);
			font: normal 16px/16px OutfitMedium, "Sans-serif";
			border-radius: 5px;
			text-align: center;
			transition: background-color 300ms ease-in-out;

			&:hover {
				background-color: var(--dark-color);
				color: var(--light-color);
			}
		}
	}

	.entry-excerpt {
		font-size: 1rem;
		line-height: 1.2rem;
		margin-bottom: 16px;
	}

	.entry-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;

		* {
			font-size: .85rem;
		}
	}
}

img.sharing.button {
	min-height: auto !important;
}

#a2a_copy_link_copied,
.a2a_logo_color {
	background-color: var(--primary-color) !important;
}