p {
	margin: 0;
}

.line {
	background: var(--gradient);
	height: 6px;
	width: 200px;
}

.title_line {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		background: var(--gradient);
		height: 4px;
		width: 100%;
	}
}

.content_line {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		bottom: -7px;
		left: 0;
		background: var(--gradient);
		height: 2px;
		width: 100%;
	}
}

.content {
	display: flex;
	flex-direction: column;
	gap: 70px;
	margin: 50px auto 0 auto !important;

	@media screen and (max-width: 1200px) {
		margin: 20px auto 0 auto !important;
	}

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

	&:nth-child(2) {
		margin: 200px auto 50px auto !important;
	}

	ul {
		display: flex;
		flex-direction: column;
		gap: 15px;
		list-style: none;

		li {
			line-height: 1.3;
			position: relative;

			&::before {
				content: "";
				position: absolute;
				left: -25px;
				top: 3px;
				background-image: url("/image/bullet.svg");
				background-repeat: no-repeat;
				display: inline-block;
				height: 15px;
				width: 15px;
				background-size: contain;
				margin-right: 5px;

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

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

	.card_profile_head {
		font-family: "Raleway";
		font-weight: 800;
		font-size: 29px;
		text-align: center;

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

	.card_profile_content {
		display: flex;
		gap: 40px;
		align-items: stretch;

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

		@media screen and (max-width: 768px) {
			flex-wrap: wrap;
			justify-content: center;
			gap: 20px;
		}

		.card_profile_item {
			width: 300px;
			display: flex;
			flex-direction: column;
			background-color: #031f0a;
			height: auto;
			color: #fff;
			font-family: "Raleway";
			font-weight: 500;
			font-size: 20px;
			line-height: 1.5;
			position: relative;
			border: 2px solid #fff;
			border-radius: 10px;
			box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
			overflow: hidden;
			transition: all 0.3s ease-in-out;

			&:hover {
				scale: 1.05;
			}

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

			.profile_head {
				position: relative;

				img {
					width: 100%;
					height: 70px;
					overflow: hidden;
					float: left;
					object-fit: cover;
				}

				.profile_head_content {
					width: 100%;
					position: absolute;
					font-family: "Raleway";
					font-weight: 800;
					font-size: 18px;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 20px;

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

					span {
						font-size: 30px;

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

					p {
						white-space: pre-line;
						line-height: .9;
					}
				}
			}

			.profile_content {
				font-family: "Raleway";
				font-weight: 500;
				font-size: 17px;
				line-height: 1.3;
				padding: 40px;
				text-align: center;

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

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

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

	._video {
		width: fit-content;
		height: 315px;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);

		@media screen and (max-width: 768px) {
			height: 300px;
			width: 95%;

			iframe {
				width: 100% !important;
				height: 100% !important;
			}
		}
	}

	.video_head {
		width: 100%;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 20px;

		h1 {
			font-size: 39px;
			font-family: "Poppins";
			font-weight: 700;

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

		p {
			font-family: "Oak Sans";
			font-weight: 300;
			font-size: 22px;

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

.card_container {
	height: fit-content;
	width: auto;
	font-family: "Poppins";
	display: flex;
	flex-direction: column;
	gap: 20px;

	&:nth-child(1) {
		margin-top: 40px;
	}

	.card_title {
		line-height: 0.8;
		padding: 0 60px;

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

		h2 {
			font-weight: 700;
			font-size: 35px;

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

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

		p {
			font-family: "Oak Sans";
			font-weight: 300;
			font-size: 22px;
			margin: 0;
			margin-top: 20px;

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

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

	}

	.card {
		background-color: #031f0a;
		height: fit-content;
		padding: 20px 60px 20px 110px;
		color: #fff;
		font-family: "Raleway";
		font-weight: 500;
		font-size: 20px;
		line-height: 1.5;
		display: flex;
		position: relative;
		border: 2px solid #fff;
		border-radius: 10px;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.3);
		overflow: hidden;
		transition: all 0.3s ease-in-out;

		&:hover {
			scale: 1.03;
		}

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

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

		&.hero {
			overflow: initial;
			padding: 20px 60px;

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

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

		.card_side {
			width: 90px;
			height: 100%;
			overflow: hidden;
			position: absolute;
			top: 0;
			left: 0;

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

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

			.logo {
				height: 18px;
				width: fit-content;
				position: absolute;
				top: 20px;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			p {
				font-family: "Poppins";
				font-weight: 500;
				font-size: 20px;
				width: 20px;
				text-align: center;
				line-height: 3;
				position: absolute;
				text-wrap: wrap;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

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

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

			img {
				height: 100%;
				width: 100%;
				object-fit: cover;
				overflow: hidden;
				float: left;
			}
		}

		.card_content {
			width: 100%;
			text-align: justify;
			font-size: 16px;
			letter-spacing: 0.5px;

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

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

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

			p {
				margin: 15px;
			}

			&.hero {
				max-width: 70%;

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

		.card_hero {
			width: 25%;
			position: absolute;
			right: 20px;
			height: 100%;
			transition: all 0.3s ease-in-out;

			@media screen and (max-width: 480px) {
				width: 38%;
				top: -65px;
			}

			img {
				height: auto;
				width: calc(100% + 30px);
				position: absolute;
				bottom: 0;
				opacity: 0;
				transition: all 0.3s ease-in-out;

				&.active {
					opacity: 1;
				}
			}
		}
	}
}

.banner {
	width: 100%;
	height: fit-content;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;

	.banner_image {
		width: 100%;
		height: auto;

		@media screen and (max-width: 1200px) {
			height: 300px;
			object-fit: cover;
			object-position: center;
			overflow: hidden;
			width: auto;
		}
	}

	.banner_content {
		font-family: "Gabarito";
		font-weight: 700;
		width: 100%;
		height: fit-content;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

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

		.content_item {
			text-align: center;
			color: #fff;
			display: flex;
			flex-direction: column;
			gap: 10px;

			span {
				font-size: 50px;

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

			h1 {
				font-size: 28px;

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

			p {
				font-family: "Oak Sans";
				font-weight: 300;
				font-style: italic;
				font-size: 16px;
				white-space: pre-line;

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

	}
}