@keyframes naikTurun {
	0% {
		transform: translateY(0)
	}

	50% {
		transform: translateY(-10px)
	}

	100% {
		transform: translateY(0)
	}
}

main {
	>.header {
		position: relative;

		>div {
			margin: auto;
			position: relative;
			max-width: var(--w);
			height: 400px;
			width: 100%;



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

			>svg {
				margin: auto;
				position: absolute;
				inset: 0;
				width: 600px;
				width: clamp(200px, 70%, 600px);
				z-index: 2;
			}

			&:after {
				content: "";
				margin: auto;
				position: absolute;
				inset: 0;
				background-color: #02190263;
				z-index: 1;
			}

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

	.sparator-1 {
		position: relative;
		text-align: center;
		height: 18px;
		background: #fbcd00;
		box-shadow: 0 4px 6px 4px rgb(0 0 0 / 31%);
		z-index: 2;

		>span {
			position: relative;
			display: inline-block;
			overflow: hidden;
			max-width: 100%;

			>img {
				position: relative;
				width: calc(100% + 26px);
				left: -13px;
				right: -13px;
			}
		}

		/* >span {
			display: inline-block;
			position: absolute;
			height: 18px;
			background: #fbcd00;
			width: 100px;
			top: 0px;
			margin-left: -58px;

		} */


	}

	.box-1 {
		>div {
			position: relative;
			margin: auto;
			position: relative;
			max-width: var(--w);
			height: 330px;

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

			>div {
				flex-direction: row;
				position: absolute;
				inset: 0 0 0 0;

				>span {

					&:first-child {
						position: absolute;
						display: block;
						bottom: 0;
						left: 20px;
						z-index: 1;

						img {
							position: relative;
							bottom: -5px;
							left: -20px;
							max-width: 305px;
							min-width: 180px;
							width: 30vw;
						}
					}

					&:nth-child(2) {

						>p {
							position: relative;
							left: 125px;
							top: 20px;
							color: var(--c4);
							background: var(--c0);
							width: fit-content;
							padding: 10px 50px 10px 100px;
							border-radius: 0 50px 50px 0;

							&:first-child {
								font-family: var(--f1);
								font-size: 28px;
								font-weight: bold;
								text-transform: uppercase;

								@media screen and (max-width:900px) {
									left: 0px;
									font-size: 24px;
									padding-left: 125px;
								}

								@media screen and (max-width:768px) {
									font-size: 20px;
									top: 30px;
									left: 0px;
									padding: 5px 20px 5px 20px;
								}

							}

							&:last-child {
								font-size: 20px;
								width: 760px;
								max-width: 95vw;

								padding-left: 162px;
								background: #edbe00a1;
								color: #000;
								text-transform: capitalize;
								font-weight: normal;

								@media screen and (max-width:900px) {
									left: 0px;
									font-size: 20px;
									width: calc(100% - 5px);
									padding-left: 241px;
								}

								@media screen and (max-width:768px) {
									font-size: 16px;
									top: 30px;
									left: 0px;
									padding: 5px 10px 5px 125px;
								}

								@media screen and (max-width:480px) {
									border-radius: 0;
									max-width: 100%;
									padding-left: 100px;
									font-size: 14px;
								}
							}
						}
					}
				}
			}
		}
	}

	.box-2 {
		position: relative;
		font-family: var(--f1);

		>h4 {
			margin: auto;
			position: absolute;
			inset: -41px 0 auto 0;
			padding: 7px 46px;
			border-radius: 50px 50px 0 0;
			background: var(--c2);
			color: var(--c1);
			width: fit-content;
			height: fit-content;
			font-size: 35px;
			z-index: 1;
		}

		>div {
			width: var(--w);
			max-width: 100%;
			margin: auto;
			background: var(--c2);
			padding: 20px 10px;
			display: grid;
			gap: 10px;
			grid-template-columns: repeat(6, 1fr);

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

			}

			>div {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-transform: uppercase;
				gap: 10px;

				b {
					flex: 1;
					text-align: center;
					align-content: center;
					color: var(--c1);
					font-size: 22px;
					font-weight: 600;


				}

				>span {
					flex: 1;

					img {
						width: 100%;
						border: 2px solid var(--c1);
						flex: 1;
						object-fit: cover;
						aspect-ratio: 1 / 1;
					}
				}
			}
		}
	}

	.box-3 {
		position: relative;
		font-family: var(--f1);

		>h4 {
			margin: auto;
			position: absolute;
			inset: 0 0 auto 0;
			padding-bottom: 10px;
			border-radius: 0 0 50px 50px;
			background: var(--c1);
			color: var(--c2);
			width: fit-content;
			height: fit-content;
			font-size: 24px;
			width: 100%;
			text-align: center;
			max-width: 500px;
			z-index: 1;
		}

		>div {
			margin: auto;
			position: relative;
			display: flex;
			width: var(--w);
			max-width: 100%;
			height: 350px;
			background: #ffffe6;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			align-items: center;

			>span {
				flex: 1;
				text-align: center;

				>img {
					max-width: 100%;
				}
			}
		}
	}



	.box-4 {
		position: relative;
		font-family: var(--f1);
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

		>h4 {
			margin: auto;
			position: absolute;
			inset: -50px 0 auto 0;
			width: fit-content;
			border-radius: 50px;
			display: flex;
			background: var(--c1);
			padding: 8px 60px;
			color: var(--c2);
			font-size: 24px;
			z-index: 1;
		}

		>div {
			margin: auto;
			position: relative;
			width: var(--w);
			max-width: 100%;
			display: flex;
			flex-wrap: nowrap;
			justify-content: space-around;
			font-size: 22px;

			&:after {
				margin: auto;
				content: "";
				position: absolute;
				inset: 60px 0 300px 0;
				width: 6px;
				background: var(--c2);
				opacity: 0.7;
				z-index: -1;
			}

			>div {
				position: relative;
				flex: 1;
				text-align: center;
				padding: 10px 0 150px 0;
				width: 50%;

				&.pelatihan {
					display: flex;

					>div {
						flex: 1;
						width: 50%;

						>strong {
							display: block;
							background: var(--c2);
							color: var(--c0);
							padding: 10px 0;
							border: 3px solid var(--c2);
						}

						>.list {
							display: flex;
							flex-direction: column;
							gap: 10px;
							padding: 10px;

							>div {
								position: relative;
								background: var(--c5);
								padding: 10px;
								border-radius: 5px;
								padding-bottom: 30px;
								font-size: 18px;


								>a {
									position: absolute;
									inset: 0;
									border-radius: 5px;
								}

								>span:nth-child(1) {
									display: block;
									width: 100%;
									height: 150px;


									img {
										width: 100%;
										height: 100%;

										object-fit: cover;
									}
								}

								>span:nth-child(2) {
									display: block;
									margin: auto;
									position: absolute;
									inset: auto 0;
									max-height: 24px;
									padding: 0 10px 10px 10px;
									overflow: hidden;
									background: var(--c5);
									color: var(--c2);
									border-radius: 5px;
									transition: all .4s ease-out;
									z-index: 1;
								}

								&:hover>span:nth-child(2) {
									max-height: 200px;
									box-shadow: inset 0 -2px var(--c2);
								}
							}
						}



						&:first-child {}
					}

				}

				&.jadwal {

					>strong {
						display: block;
						background: var(--c5);
						color: var(--c2);
						padding: 10px 0;
						border: 3px solid var(--c2);
					}

					>.list {
						display: flex;
						flex-wrap: wrap;
						gap: 15px 10px;
						padding: 10px;

						>div {
							position: relative;
							background: var(--c5);
							padding: 10px;
							border-radius: 5px;
							font-size: 18px;
							flex: 1;
							min-width: 30%;
							display: flex;
							flex-direction: column;
							gap: 10px;

							>span {
								display: block;
								font-size: 14px !important;
								text-align: left;

								&:first-child {
									height: 100px;
								}

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

								&:nth-child(2) {
									position: relative;
									height: 34px;
									z-index: 1;

									>b {
										font-weight: bold;
										position: absolute;
										top: 0;
										background: var(--c5);
										max-height: 34px;
										overflow: hidden;
										transition: all .4s ease;
									}
								}
							}

							>a {
								position: absolute;
								inset: 0;
								border-radius: 5px;
							}

							&:hover {
								>span:nth-child(2)>b {
									top: -100px;
									max-height: 300px;
									padding: 5px;
									border-radius: 10px;
									box-shadow: 1px 1px 5px var(--c2);
								}
							}
						}
					}
				}

				>a {
					margin: auto;
					position: absolute;
					inset: auto 0 50px 0;
					width: fit-content;
					display: block;
					background: var(--c5);
					color: var(--c2);
					padding: 10px 30px;
					border-radius: 30px;
					border: 2px solid var(--c2);
					font-weight: bold;

					&:hover {
						background: var(--c2);
						color: var(--c5);
						border: 2px solid var(--c5);
					}
				}
			}

		}

		.bg-over {
			margin: auto;
			width: 100vw;
			position: absolute;
			inset: 0 0 auto 0;
			height: calc(100% + 300px);
			overflow: hidden;
			z-index: -1;

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

	.box-5 {
		position: relative;
		background: linear-gradient(to top, var(--c0) 21%, #0000);

		>h4 {
			margin: auto;
			position: relative;
			inset: 0 0 auto 0;
			width: fit-content;
			font-size: 30px;
			padding: 7px 50px;
			color: var(--c2);

			&:after {
				content: "";
				position: absolute;
				inset: 0 auto 0 50%;
				width: 100%;
				background: linear-gradient(to right, var(--c1), #0000);
				z-index: -1;
			}

			&:before {
				content: "";
				position: absolute;
				inset: 0 50% 0 auto;
				width: 100%;
				background: linear-gradient(to left, var(--c1), #0000);
				z-index: -1;
			}
		}

		.sosmed {
			display: flex;
			gap: 10px;
			justify-content: center;
			align-items: center;
			padding-top: 30px;

			>a {
				display: inline-flex;
				background: var(--c5);
				padding: 5px 20px;
				height: 35px;
				transition: transform 0.5s ease;

				&:hover {
					animation: bounce-scale 0.6s forwards;
				}
			}
		}

		.cp {
			position: relative;
			margin-top: 100px;

			&::before {
				content: "";
				position: absolute;
				inset: 10px 0 auto 0;
				width: 100%;
				height: 40px;
				opacity: 0.7;
				background: var(--c1);
			}



			>div:first-child {
				margin: auto;
				position: absolute;
				inset: -40px 0 auto 0;
				width: 250px;
				height: 150px;
				background: var(--c5);
				padding: 5px;
				border-radius: 5px;

				>div {
					width: 100%;
					height: calc(100% - 20px);
					background: #000;
				}

				>label {
					display: block;
					margin-top: 5px;
					font-weight: bold;
					text-align: center;
					font-weight: bold;
				}

				&::before {
					content: "";
					position: absolute;
					inset: 50px 100% auto auto;
					width: 300px;
					height: 40px;
					background: linear-gradient(to left, var(--c0), #0000);
				}

				&::after {
					content: "";
					position: absolute;
					inset: 50px auto auto 100%;
					width: 300px;
					height: 40px;
					background: linear-gradient(to right, var(--c0), #0000);
				}
			}

			>div:nth-child(2) {
				position: relative;
				margin: auto;
				width: var(--w);
				display: flex;
				justify-content: space-between;

				strong {
					display: block;
					font-size: 30px;
					padding: 10px 0;
					color: var(--c2);
				}

				>div:nth-child(2) {
					text-align: right;
				}
			}
		}

		&:after {
			content: "";
			position: absolute;
			inset: 100% 0 auto 0;
			height: 100px;
			background: var(--c0);
			z-index: -1;
		}
	}
}

@keyframes bounce-scale {
	0% {
		transform: scale(1);
	}

	30% {
		transform: scale(0.9);
	}

	50% {
		transform: scale(1.2);
	}

	70% {
		transform: scale(0.95);
	}

	85% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}