main {
	flex-direction: column;
}

.content {
	width: 100%;
	height: fit-content;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	padding: 30px 0;
	font-family: "Poppins";

	.content_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: -1;
		overflow: hidden;

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

	.content_home_wrap {
		width: var(--maxwidth);
		height: fit-content;
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 40px;

		@media screen and (max-width: 1200px) {
			width: 100%;
			padding: 0 20px;
			padding-right: 40px;
		}

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

		.home_desc {
			display: flex;
			flex-direction: column;
			gap: 10px;
			width: 100%;
			height: fit-content;

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

			.home_desc_title {
				font-size: 28px;
				font-weight: 700;
				color: #003092;
				/* line-height: 1.2; */

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

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

				span {
					padding: 0 5px;
					background-color: #ffcf50;
				}
			}

			.home_desc_body {
				text-align: justify;
				line-height: 1.5;

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

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

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

			.home_desc_bottom {
				height: fit-content;
				width: 100%;
				margin-top: 10px;

				a {
					width: fit-content;
					text-decoration: none;
					color: #fff;
					font-weight: 600;
					font-size: 16px;
					display: flex;
					align-items: center;
					gap: 10px;
					padding: 5px 7px;
					padding-right: 20px;
					background-color: #75a3ff;
					border-radius: 50px;

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

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

					@media screen and (max-width: 550px) {
						text-align: center;
						margin: auto;
					}

					span {
						font-size: 13px;
						background-color: #fff;
						color: #75a3ff;
						padding: 7px;
						border-radius: 50%;
					}
				}
			}
		}

		.home_gallery {
			height: 290px;
			width: 520px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 1px 1px 10px #0000004a;
			position: relative;

			.nav {
				position: absolute;
				top: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				transform: translateY(-50%);
				height: 20px;
				width: 20px;
				cursor: pointer;
				color: #b3b3b3;

				&:hover {
					color: #000;
				}

				&.prev {
					left: -20px;

					span {
						transform: rotate(180deg);
					}
				}

				&.next {
					right: -20px;
				}
			}

			.gallery_container {
				width: 100%;
				height: 100%;
				overflow: hidden;
				display: flex;
				gap: 10px;
				scroll-behavior: smooth;
				transition: all 1s ease-in-out;
				border-radius: 10px;

				.gallery_slide {
					display: flex;
					height: 100%;
					width: 100%;
					position: relative;
					left: -500px;

					.gallery_item {
						max-width: 600px;
						width: fit-content;
						height: 100%;
						transition: all cubic-bezier(0.215, 0.610, 0.355, 1) 0.5s;
						cursor: pointer;

						img {
							min-width: 500px;
							height: 270px;
							object-fit: cover;
							object-position: center;
							float: left;
							overflow: hidden;
						}
					}
				}
			}

			@media screen and (max-width: 1200px) {
				width: 420px;
				height: 238px;

				.gallery_container .gallery_slide {
					left: -401px;

					.gallery_item {
						max-width: 500px;

						img {
							min-width: 400px;
							height: 218px;
						}
					}
				}
			}

			@media screen and (max-width: 768px) {
				width: 320px;
				height: 185px;

				.gallery_container .gallery_slide {
					left: -305px;

					.gallery_item {
						max-width: 400px;

						img {
							min-width: 300px;
							height: 165px;
						}
					}
				}
			}

			@media screen and (max-width: 370px) {
				width: 300px;
				height: 190px;

				.gallery_container .gallery_slide {
					left: -320px;

					.gallery_item {

						img {
							min-width: 20px;
							height: 170px;
						}
					}
				}
			}
		}
	}

	&.services {
		background-color: #75a3ff;
		border-top: 10px solid #ffcf50;
	}

	&.hero {
		background-color: #ffcf50;
		padding: 0;
		border-bottom: 10px solid #ef8200;
	}

	&.jadwal {
		padding: 20px 0;
	}

	.content_wrap {
		width: var(--maxContent);
		height: fit-content;

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

		.services {
			width: 100%;
			height: fit-content;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;

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

			.service_title {
				font-weight: 600;
				font-size: 19px;
				color: #fff;
				position: relative;

				&::after {
					content: "";
					position: absolute;
					bottom: -2px;
					height: 3px;
					width: 30px;
					background-color: #ffcf50;
					left: 0;
				}
			}

			.services_list {
				display: flex;
				justify-content: space-between;
				gap: 30px;

				@media screen and (max-width: 900px) {
					width: 100%;
					padding: 0 20px;
					flex-wrap: wrap;
					justify-content: center;
				}

				.service {
					width: 80px;
					min-width: 80px;
					height: 80px;
					border: 2px solid #fff;
					padding: 10px;
					border-radius: 10px;
					position: relative;
					transition: cubic-bezier(0.47, 0, 0.745, 0.715) .3s;

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

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

					p {
						text-align: center;
						font-size: 11px;
						font-weight: 400;
						color: #fff;
						text-wrap: nowrap;
						position: absolute;
						bottom: -20px;
						left: 50%;
						transform: translateX(-50%)
					}
				}
			}

			>a {
				width: fit-content;
				text-decoration: none;
				color: #000;
				font-weight: 600;
				font-size: 12px;
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 5px 10px;
				background-color: #ffcf50;
				border-radius: 50px;

				@media screen and (max-width: 900px) {
					margin: 20px;
				}
			}
		}

		.hero_container {
			width: 100%;
			height: 270px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 40px;

			@media screen and (max-width: 768px) {
				flex-direction: column;
				gap: 20px;
				padding: 20px 0;
				height: fit-content;
			}

			.hero_desc {
				width: 100%;
				height: fit-content;
				display: flex;
				flex-direction: column;
				gap: 10px;

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

				.hero_desc_title {
					font-size: 42px;
					font-weight: 600;
					line-height: 1;
					position: relative;


					&::after {
						content: "";
						height: 4px;
						width: 40px;
						position: absolute;
						left: 0;
						bottom: -2px;
						background-color: #fff;
					}

					@media screen and (max-width: 550px) {
						font-size: 30px;
						text-align: center;

						&::after {
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}

				.hero_desc_body {
					font-size: 15px;
					line-height: 1.4;

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

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

				.hero_desc_bottom {
					display: flex;
					gap: 10px;

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

					.hero_desc_bottom_item {
						width: 160px;
						font-size: 9px;
						font-weight: 500;
						text-align: center;
						line-height: 1;
						color: #fff;
						background-color: #ef8200;
						border: 2px solid #fff;
						border-radius: 50px;
						padding: 5px 0;

						span {
							font-size: 14px;
							font-weight: 700;
						}
					}
				}
			}

			.hero_image {
				min-width: 300px;
				height: fit-content;
				position: relative;
				height: 100%;

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

				img {
					width: 280px;
					height: fit-content;
					position: absolute;
					bottom: 0;
					right: 0;

					@media screen and (max-width: 768px) {
						bottom: -20px;
					}
				}
			}
		}

		.partner_container {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 20px;
			position: relative;

			.tagline {
				position: absolute;
				top: -31px;
				left: 50%;
				font-size: 14px;
				font-weight: 600;
				color: #fff;
				transform: translateX(-50%);
				background-color: #ef8200;
				padding: 5px 20px;
				border-radius: 0 0 10px 10px;

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

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

			img {
				width: fit-content;
				height: 80px;

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

				@media screen and (max-width: 550px) {
					height: 40px;
				}
			}
		}

		.jadwal_container {
			width: 100%;
			height: fit-content;
			display: flex;
			gap: 20px;
			flex-direction: column;
			align-items: center;

			.jadwal_title {
				font-size: 25px;
				font-weight: 700;
				color: #003092;
				position: relative;

				&::after {
					content: "";
					height: 4px;
					width: 40px;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: -2px;
					background-color: #003092;
				}
			}

			.jadwal_list {
				display: flex;
				gap: 5px;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;
				padding: 0 20px;

				.jadwal_item {
					min-width: 46%;
					max-width: 46%;

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

					.jadwal_item_title {
						padding: 4px 10px;
						padding-right: 30px;
						background-color: #ef8200;
						border-radius: 7px;
						color: #fff;
						font-weight: 600;
						position: relative;
						z-index: 1;

						.title {
							text-decoration: none;
							color: #fff;

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

						>a:not(.title) {
							text-decoration: none;
							color: #000;
							font-weight: 600;
							font-size: 25px;
							display: flex;
							align-items: center;
							gap: 10px;
							justify-content: center;
							padding: 5px 10px;
							background-color: #ffcf50;
							border-radius: 50px;
							width: 40px;
							height: 40px;
							position: absolute;
							bottom: -20px;
							right: -10px;
							transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);

							&:hover {
								transform: scale(1.1);

								&::after {
									background-color: #ffcf50;
								}
							}

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

							&::after {
								content: "";
								height: 120%;
								width: 120%;
								position: absolute;
								border-radius: 50%;
								background-color: #e6e6e6;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								z-index: -2;
								transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
							}

						}
					}

					.jadwal_item_date {
						padding: 4px 10px;
						padding-top: 23px;
						background-color: #003092;
						color: #fff;
						border-radius: 7px;
						width: 250px;
						height: 50px;
						position: relative;
						z-index: -1;
						top: -20px;
						font-size: 15px;
						font-weight: 500;

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

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

				>a {
					text-decoration: none;
					padding: 4px 15px;
					background-color: #fefefe;
					border: 2px solid #003092;
					color: #003092;
					font-weight: 600;
					border-radius: 30px;

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