/* @import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap'); */

:root {
	--w: 1200px;
	--dw: 900px;
	--shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
	/* background: rgb(255, 0, 0); */
	--gradient: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(127, 9, 9, 1) 100%);
	--gradient-green: linear-gradient(to top, #069949, #14ab5b);
}

* {
	box-sizing: border-box;
	scroll-behavior: smooth;
	user-select: none;
	-webkit-user-select: none;
	/* Safari */
	-moz-user-select: none;
	/* Firefox */
	-ms-user-select: none;
	/* Internet Explorer/Edge */
}

html,
body {
	min-height: 100vh;
}

body {
	margin: auto;
	background: #EBEBEB;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: auto;
	padding: 0;
}

a {
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

span[class|="icon"] {
	font-family: 'icon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&.icon-calendar2:before {
		content: "\e900";
	}

	&.icon-right-arrow:before {
		content: "\e91d";
	}

	&.icon-cakra:before {
		content: "\e912";
	}

	&.icon-handshake:before {
		content: "\e913";
	}

	&.icon-thumb:before {
		content: "\e914";
	}

	&.icon-person:before {
		content: "\e915";
	}

	&.icon-iso-2018:before {
		content: "\e916";
	}

	&.icon-iso-2015:before {
		content: "\e917";
	}

	&.icon-target:before {
		content: "\e918";
	}

	&.icon-office-bag:before {
		content: "\e919";
	}

	&.icon-flagman:before {
		content: "\e91a";
	}

	&.icon-clipboard:before {
		content: "\e91b";
	}

	&.icon-group:before {
		content: "\e91c";
	}

	&.icon-email:before {
		content: "\e90f";
	}

	&.icon-headphone:before {
		content: "\e910";
	}

	&.icon-office:before {
		content: "\e911";
	}

	&.icon-museum:before {
		content: "\e90b";
	}

	&.icon-user:before {
		content: "\e90c";
	}

	&.icon-verified:before {
		content: "\e90d";
	}

	&.icon-world:before {
		content: "\e90e";
	}

	&.icon-telp:before {
		content: "\e90a";
	}

	&.icon-calendar:before {
		content: "\e901";
	}

	&.icon-facebook:before {
		content: "\e902";
	}

	&.icon-home:before {
		content: "\e903";
	}

	&.icon-instagram:before {
		content: "\e904";
	}

	&.icon-linkedin:before {
		content: "\e905";
	}

	&.icon-location:before {
		content: "\e906";
	}

	&.icon-search:before {
		content: "\e907";
	}

	&.icon-tiktok:before {
		content: "\e908";
	}

	&.icon-whatsapp:before {
		content: "\e909";
	}

	&.icon-youtube:before {
		content: "\e91e";
	}
}

.loading-box {
	background: linear-gradient(90deg,
			#e0e0e0 25%,
			#f0f0f0 50%,
			#e0e0e0 75%);
	background-size: 400% 100%;
	animation: shimmer 2.5s infinite;
	border-radius: 8px;
}

@keyframes shimmer {
	0% {
		background-position: 150% 0;
	}

	100% {
		background-position: -150% 0;
	}
}

/* HEADER */
header {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 20px;
	height: 100px;
	position: sticky;
	top: -20px;
	z-index: 9;

	@media screen and (max-width: 1200px) {
		padding: 0;
		top: 0;
	}

	@media screen and (max-width: 481px) {
		height: 150px;
		top: -105px;
	}

	.hidden_nav {
		height: 60px;
		padding: 10px;
		display: none;
		justify-content: space-between;
		background-color: #fff;
		width: 100%;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
		overflow: hidden;

		@media screen and (max-width: 481px) {
			display: flex;
		}

		.humburger_link {
			position: relative;
			height: 20px;
			width: 60px;

			&.show {
				a {
					left: 20px;
				}

				.humburger {
					left: calc(50% + 20px);
				}
			}

			a {
				height: 35px;
				width: 35px;
				position: absolute;
				top: 50%;
				left: -30px;
				transition: all 0.5s ease-in-out;
				transform: translate(-50%, -50%);

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

		.humburger {
			width: 20px;
			height: 20px;
			cursor: pointer;
			position: relative;

			.humburger_line {
				width: 100%;
				height: 2px;
				background-color: #000;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);

				&:after {
					content: "";
					width: 70%;
					height: 2px;
					background-color: #000;
					position: absolute;
					left: 0;
					top: 6px;
				}

				&:before {
					content: "";
					width: 100%;
					height: 2px;
					background-color: #000;
					position: absolute;
					left: 0;
					top: -6px;
				}
			}
		}

		.sosmed_link {
			position: relative;
			overflow: hidden;
			width: 180px;

			&.show {
				.link_container {
					right: 30px;
				}

				.search_mobile {
					right: 0;
				}
			}

			.link_container {
				display: flex;
				gap: 10px;
				position: absolute;
				right: 0;

				a {
					color: #000;
					font-size: 20px;

					&:hover {
						color: #c90d0d;
					}
				}
			}


			.search_mobile {
				color: #008f3d;
				position: absolute;
				top: 50%;
				right: -30px;
				transform: translateY(-50%);
				transition: all 0.5s ease-in-out;
				cursor: pointer;
			}
		}
	}

	>div:not(.hidden_nav) {
		width: var(--w);
		background: #fff;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px 10px;
		gap: 10px;
		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
		position: relative;



		@media screen and (max-width: 1200px) {
			width: 100%;
			border-radius: 0;
			height: 100%;
			align-items: flex-start;
			justify-content: space-between;
			padding: 15px 20px;
		}

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

			.search_container.show {
				position: fixed;
				width: 100vw;
				height: 100vh;
				left: 0;
				top: 0;
				background-color: #0000009e;
				backdrop-filter: blur(5px);
				z-index: 9;
				transition: cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s;
				display: flex;
				justify-content: center;
				padding: 100px 20px;

				.search {
					display: block !important;
					width: 100%;

					input {
						&:focus {
							width: 100%;
						}
					}
				}
			}

			& .search,
			& .registrasi {
				display: none !important;
			}

			& .search_mobile {
				display: flex !important;
				font-family: "Poppins";
				font-size: 14px;
				gap: 10px;
				align-items: center;
				cursor: pointer;

				span {
					color: #008f3d;
				}
			}
		}


		.logo {
			width: 100px;

			@media screen and (max-width: 480px) {
				width: 130px;
			}
		}

		>div {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;

			@media screen and (max-width: 1200px) {
				height: fit-content;
			}

			&:nth-child(2) {
				width: 100%;


				@media screen and (max-width: 1200px) {
					position: absolute;
					bottom: 10px;
					left: 0;
					justify-content: space-evenly;
				}

				@media screen and (max-width: 480px) {
					top: 160px;
					width: 60%;
					min-width: 225px;
					/* height: calc(100vh - 160px); */
					height: 100vh;
					z-index: 999;
					flex-direction: column;
					background-color: #fff;
					justify-content: unset;
					padding: 10px 20px;
					align-items: flex-start;
					transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
					left: -300px;

					&.show {
						left: 0;
					}

					.menu {
						width: 100%;
					}

					.menu:not(:last-child)::after {
						content: "";
						position: absolute;
						bottom: -6px;
						left: 0;
						width: 100%;
						height: 1px;
						background-color: #4242422e;
					}

					.header_nav {
						display: flex !important;
						width: 100%;
						height: 70px;
						align-items: center;
						position: relative;

						.close_nav {
							height: 20px;
							width: 20px;
							position: absolute;
							top: 0;
							right: -10px;
							cursor: pointer;

							&::after {
								content: "";
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%) rotate(45deg);
								width: 15px;
								height: 2px;
								background-color: #000;
							}

							&::before {
								content: "";
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%) rotate(-45deg);
								width: 15px;
								height: 2px;
								background-color: #000;
							}
						}

						a {
							img {
								width: 100px;
							}
						}
					}
				}

			}

			>.menu {
				position: relative;
				font-family: 'Poppins';
				font-weight: 300;
				color: #000;
				font-size: 18px;
				cursor: pointer;

				span {
					display: flex;
					width: 100%;
					padding: 2px 5px;
					border-radius: 5px;

					a {
						color: #000;
					}
				}

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

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

				>div.sub-menu {
					position: absolute;
					top: 80px;
					background: #fff;
					display: flex;
					box-shadow: 1px 1px 5px #000;
					padding: 10px;
					border-radius: 10px;
					gap: 10px;
					z-index: 9;
					visibility: hidden;
					opacity: 0;
					transition: all 0.2s ease-out;

					@media screen and (max-width: 480px) {
						font-size: 16px;
						visibility: visible;
						opacity: 1;
						position: static;
						box-shadow: none;
						padding: 0;
						height: 0;
						overflow: hidden;
						transition: none;

						.arrow {
							top: 10px;
							right: 10px;
							position: absolute;
							display: flex !important;
							align-items: center;
							justify-content: center;
							transform: rotate(90deg);
							height: 10px;
							width: 10px;
							background-color: unset !important;
							color: #000 !important;
							transition: all 0.2s ease-out;

							&:hover {
								transform: rotate(270deg);
							}
						}

						>div {
							span {
								display: none !important;
							}
						}
					}

					img {
						border-radius: 10px;

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

					>div {
						width: 200px;
						display: flex;
						flex-direction: column;
						gap: 10px;

						a {
							color: #000;

							span {
								display: inline-flex;
								font-size: 16px;
								background: #b41f1c;
								color: #fff;
								border-radius: 7px;
								width: 30px;
								height: 30px;
								align-items: center;
								justify-content: center;
							}

							&:hover {
								color: #b41F1c;
							}
						}
					}

					&:before {
						content: "";
						position: absolute;
						left: 0;
						top: -20px;
						width: 100%;
						height: 20px;
					}
				}

				&:hover {
					>div.sub-menu {
						top: 50px;
						visibility: visible;
						opacity: 1;
					}
				}

				&:not(:nth-child(1)):not(:nth-child(2)) {
					&:hover {
						color: #b41F1c;
					}

					@media screen and (max-width: 480px) {}

					&:active span,
					&:active span a,
					&.active span,
					&.active span a {
						background: #b41F1c;
						color: #fff;
					}

					&:active .arrow,
					&.active .arrow {
						color: #fff !important;
					}
				}

				&:nth-child(2):active,
				&:nth-child(2).active {
					color: #b41F1c;
				}


			}

			>a:nth-child(1) {
				font-size: 22px;

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

			.search {
				position: relative;
				border-radius: 3px;
				width: 150px;
				/* background: #ff0; */
				height: 35px;

				input {
					margin: auto;
					position: absolute;
					inset: 0 0 0 auto;
					border-radius: 5px;
					border: 2px solid #0EA554;
					width: 100%;
					padding: 5px;
					outline: none;
					transition: all 0.5s ease;

					&:focus {
						width: 200%;
					}

				}

				>button {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					margin: auto;
					position: absolute;
					inset: 0 0 0 auto;
					border-radius: 3px 0 0 3px;
					background: #0EA554;
					width: 50px;
					color: #fff;
					border: none;
					border-radius: 5px;

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

			a.registrasi,
			.upload {
				font-family: "Poppins";
				background: #0EA554;
				border-radius: 5px;
				color: #fff;
				height: 35px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				padding: 0 10px;

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

			.upload {
				cursor: pointer;

				@media screen and (max-width: 481px) {
					position: fixed;
					bottom: 20px;
					right: 20px;
					font-size: 16px;
					padding: 10px 30px;
				}
			}
		}
	}
}

/* MAIN */
main {
	flex: 1;
	position: relative;
	background: url("../image/bg-all.svg");
	background-position: center 300px;

	/* &:after {
		content: "";
		margin: auto;
		position: absolute;
		inset: 0;
		width: var(--w);
		height: 100%;
		background: url("../image/bg-all.svg");
		background-position: center 300px;
		z-index: -1;
	} */

	h3 {
		position: relative;
		margin: 0;
		width: fit-content;
		height: 30px;

		&:after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 0;
			width: 65px;
			height: 4px;
			background: linear-gradient(to right, #ea0000, #7e0909);
			border-radius: 2px
		}
	}
}

/* FOOTER */
footer {
	font-family: 'Rethink Sans';
	border-bottom: 10px solid #c90d0d;
	/* margin-top: 20px; */
	background-color: #fff;
	padding-top: 20px;

	@media screen and (max-width: 481px) {
		/* border-bottom: 160px solid #c90d0d; */
		position: relative;
	}

	.scroll_to_up {
		display: none;

		@media screen and (max-width: 481px) {
			display: block;
			background-color: #0ea353;
			color: #fff;
			font-size: 18px;
			width: 50px;
			height: 50px;
			border-radius: 50px;
			border: none;
			position: absolute;
			right: 10px;
			top: -20px;
			cursor: pointer;
		}
	}

	.footer_container {
		background: url("../image/bg-footer.svg"), #FFF;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		width: var(--w);
		margin: auto;

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

		.footer_content {
			display: flex;
			align-items: stretch;
			justify-content: space-between;
			gap: 50px;
			text-align: center;

			@media screen and (max-width: 768px) {
				flex-direction: column;
				align-items: center;
				gap: 10px;
			}

			&:last-child {
				border-top: 1px solid #505050;
				padding: 20px 0;

				@media screen and (max-width: 1200px) {
					flex-direction: column;
					align-items: center;
					gap: 10px;
					padding: 7px 0;
				}
			}

			span b a {
				color: #000;
			}

			.footer_content_item {
				flex: 1;
				display: flex;
				flex-direction: column;
				gap: 10px;
				padding: 10px 0;
				align-items: flex-end;

				@media screen and (max-width: 768px) {
					justify-content: center;
					align-items: center !important;
					text-align: center !important;
					padding: 0 !important;
				}

				&:first-child {
					align-items: flex-start;
					flex: 2;
				}

				&:last-child {
					text-align: right;
					min-width: 390px;
				}

				.logo {
					display: flex;

					img {
						height: 80px;
					}
				}

				.footer_description {
					text-align: justify;
					line-height: 1;

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

				.footer_navigation {
					display: flex;
					gap: 10px;
					padding-top: 30px;

					@media screen and (max-width: 481px) {
						flex-wrap: wrap;
					}
				}

				.footer_logo {
					display: flex;
					gap: 10px;
					width: fit-content;
					font-size: 14px;

					.footer_logo_item {
						display: flex;
						flex-direction: column;
						gap: 20px;

						img {
							width: fit-content;
							height: 50px;
						}
					}

				}

				.footer_navigation {
					padding-bottom: 30px;

					a {
						color: #969696;
						font-weight: 600;

						&:hover {
							color: #c90d0d;
						}
					}
				}
			}

			.link_container {
				display: flex;
				gap: 10px;
				font-size: 20px;

				a {
					color: #000;

					&:hover {
						color: #c90d0d;
					}
				}

				@media screen and (max-width: 481px) {
					font-size: 30px;
					padding: 10px 0;
					gap: 15px;
				}

				&:nth-child(2) {
					gap: 50px;
					font-size: 15px;

					a {
						display: flex;
						align-items: center;
						gap: 10px;

						span {
							color: #c90d0d;
							font-size: 18px;
						}

					}
				}
			}
		}

		>.footer_description_mobile {
			position: relative;
			line-height: 1;
			font-size: 14px;
			background-color: #c90d0d;
			width: calc(100% + 30px);
			left: -15px;
			bottom: -30px;
			padding: 10px;
			display: none;
			color: #fff;
			text-align: justify;

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


.wa_container {
	background-color: #fff;
	height: fit-content;
	border-radius: 10px;
	overflow: hidden;
	position: relative;

	.wa_close {
		position: absolute;
		right: 10px;
		top: 10px;
		cursor: pointer;
		width: 15px;
		height: 15px;

		div {
			width: 100%;
			height: 2px;
			background-color: #ffffff;
			transform: translate(-50%, -50%) rotate(45deg);
			position: absolute;
			top: 50%;
			left: 50%;

			&::after {
				content: "";
				width: 100%;
				height: 2px;
				background-color: #ffffff;
				transform: translate(-50%, -50%) rotate(-90deg);
				position: absolute;
				top: 50%;
				left: 50%;
			}
		}
	}

	.form_line {
		width: 100%;
		height: 2px;
		background-color: #ebebeb;
	}

	button {
		border: none;
		font-family: "Oak Sans";
		font-weight: 600;
		padding: 10px 20px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: linear-gradient(to top, #069949, #14ab5b);
		color: #fff;
		cursor: pointer;
		width: calc(100% - 30px);
		margin: 10px auto;
	}

	.wa_header {
		background-color: #1db868;
		font-family: "Oak Sans";
		color: #fff;
		padding: 10px 25px;

		h2 {
			font-weight: 800;
			font-size: 22px;
		}

		p {
			font-weight: 5s00;
		}
	}

	.wa_form_container {
		padding: 15px;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;

		input {
			width: 100%;
		}

		textarea {
			resize: none;
			text-wrap: wrap;
			field-sizing: content;
		}

		input,
		textarea {
			font-family: 'Raleway';
			font-weight: 500;
			font-size: 16px;
			padding: 5px;
			border-radius: 5px;
			border: 2px #545454 solid;
			outline: none;
			background-color: #ebebeb;
		}
	}
}

aside {
	font-family: "Oak Sans";
	position: relative;
	background: #FFF;
	width: 350px;
	padding: 10px;
	height: fit-content;

	&:after {
		margin: auto;
		content: "";
		position: absolute;
		inset: -200px 0 auto 0;
		height: 200px;
		background: #fff;
		z-index: -1;
	}

	.slide-banner {
		overflow: hidden;


		.img {
			display: flex;
			width: 100%;
			transition: transform 0.5s linear;

			img {
				width: 100%;
				flex-shrink: 0;

			}
		}

		.button {
			padding: 10px 0;
			text-align: center;

			a {
				display: inline-block;
				border: 1px solid #999;
				border-radius: 5px;
				padding: 5px 10px;
				color: #b41f1c;
				font-weight: bold;
				font-size: 22px;
				margin: 0 5px;

				&:hover {
					background: #b41f1c;
					color: #fff;
				}

				&:first-child:after {
					content: "<"
				}

				&:last-child:after {
					content: ">"
				}
			}
		}
	}

	.jadwal-training {
		font-family: "Raleway";
		margin-top: 20px;
		display: flex;
		gap: 30px;
		flex-direction: column;


		>div {
			position: relative;
			display: flex;
			gap: 10px;

			&:after {
				content: "";
				margin: auto;
				position: absolute;
				inset: -15px 0 auto 0;
				height: 2px;
				width: 100%;
				background-color: #e4e4e4;
			}

			&:hover {
				b {
					position: absolute;
					font-size: 14px;
					-webkit-line-clamp: 10 !important;
					-webkit-box-orient: vertical !important;
					color: #A10000;
				}

				p {
					display: none;
				}
			}

			>div {
				&:first-child {
					width: 30%;

					>div {
						border-radius: 5px;
						overflow: hidden;
						line-height: 0;

						img {
							width: 100%;
							height: 100%;
							object-fit: cover;
							object-position: center;
							aspect-ratio: 1 / 1;
						}
					}
				}

				&:last-child {
					width: 70%;

					>b {
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						background: #fff;

					}

					>p {
						margin: 5px 0;
						font-size: 14px;
						color: #636363;

						>span {
							color: #c3080D;
							margin-right: 7px;
						}
					}

					>a {
						margin: auto;
						position: absolute;
						inset: 0;

					}
				}
			}
		}
	}
}

.contactme {
	position: sticky;
	bottom: 20px;
	left: 100vw;
	height: fit-content;
	width: fit-content;
	padding-right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 10px;
	z-index: 8;

	&:hover {
		/* >.wa_container {
			bottom: 60px;
			visibility: visible;
			opacity: 1;
		} */

		>.button_contact {
			left: -10px;
		}
	}

	@media screen and (max-width: 480px) {
		padding-right: 0;
		left: 0;
	}

	span:not(.button_text) {
		font-size: 20px;
	}

	.wa_container {
		width: 300px;
		border-radius: 0;
		position: absolute;
		bottom: 100px;
		z-index: 1;
		overflow: unset;
		visibility: hidden;
		opacity: 0;
		transition: all 0.5s ease-in-out;

		&.show {
			visibility: visible;
			opacity: 1;
			bottom: 60px;
		}

		@media screen and (max-width: 480px) {
			left: 10px;

			&:after {
				left: 20px;
			}
		}

		.wa_header {
			h2 {
				font-size: 16px;
			}

			p {
				font-size: 13px;
			}
		}

		input,
		textarea {
			font-size: 14px;
		}

		button {
			width: 150px;
		}

		&::after {
			content: "";
			position: absolute;
			height: 20px;
			width: 20px;
			bottom: -10px;
			right: 30px;
			transform: rotate(45deg);
			background: #fff;
			z-index: 999;
		}
	}

	button {
		border: none;
		font-family: "Oak Sans";
		font-weight: 600;
		padding: 10px 20px;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		background: linear-gradient(to top, #069949, #14ab5b);
		color: #fff;
		cursor: pointer;
		/* margin-top: 15px; */

		@media screen and (max-width: 481px) {
			&:not(.wa_form button) {
				position: absolute;
				padding-left: 50px;
				padding-right: 15px;
				left: -40px;
				transition: all 0.5s ease-in-out;
			}

			span.button_text {
				display: none;
			}
		}
	}
}

span.bold {
	font-weight: 700;
}

.contact {
	width: 100%;
	height: fit-content;
	/* margin-top: 50px; */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 90px;
	flex-direction: column;
	gap: 60px;

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

	@media screen and (max-width: 480px) {
		gap: 15px;
	}

	.contact_item {
		font-family: "Oak Sans";
		font-weight: 900;
		font-size: 40px;
		color: #009141;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
		justify-content: space-between;
		gap: 20px;

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

		@media screen and (max-width: 480px) {
			font-size: 16px;
			gap: 5px;

			span {
				text-wrap: nowrap;
			}
		}

		.item {
			span {
				font-size: 40px;
				color: #24c271;

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

			&:nth-child(3) {
				span {
					font-size: 30px;

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

			@media screen and (max-width: 1200px) {

				p {
					font-size: 18px;
				}
			}

			@media screen and (max-width: 480px) {

				p {
					font-size: 14px;
				}
			}
		}

		a {
			background-color: #24c271;
			padding: 10px 30px;
			border-radius: 10px;
			border: none;
			color: #fff;
			font-family: "Oak Sans";
			font-size: 18px;
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 15px;

			@media screen and (max-width: 480px) {
				font-size: 13px;
				padding: 10px 20px;
			}

			span:nth-child(2) {
				font-size: 10px;
			}

			&:hover {
				background-color: #19864e;
			}
		}

		.item {
			font-family: "Oak Sans";
			font-weight: 500;
			color: #000;
			display: flex;
			align-items: center;
			gap: 20px;
			font-size: 20px;

			a {
				font-family: "Montserrat";
				text-decoration: none;
				color: #b50909;
				background-color: transparent;
				padding: 0;
				font-size: 18px;
				font-weight: 600;

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

.contact_me {
	height: fit-content;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	text-align: center;
	font-family: "Raleway";
	font-size: 19px;

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

	.contact_content {
		width: 100%;
		height: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

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

		span {
			font-weight: 900;
		}

		a {
			text-decoration: none;
			color: #b50909;
			font-weight: 900;
			font-family: "Montserrat";
		}

		&.horizontal {
			flex-direction: row;
			gap: 10px;

			a {
				font-family: "Oak Sans";
				font-weight: 600;
				background-color: #b50909;
				color: #fff;
				padding: 7px 30px;
				border-radius: 7px;

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

				&:nth-child(2) {
					background-color: #24c271;
				}
			}
		}
	}
}

.loader {
	width: 50px;
	height: 50px;
	/* aspect-ratio: 1; */
	border-radius: 50%;
	border: 3px solid;
	border-color: #000 #0000;
	animation: l1 1s infinite;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1000;
}

@keyframes l1 {
	from {
		transform: translate(-50%, -50%) rotate(0turn)
	}

	to {
		transform: translate(-50%, -50%) rotate(.5turn)
	}
}