/* ===================================== */
/* HERO SECTION */
/* ===================================== */

#hero {
	position: relative;
	padding: 120px 20px;
	background: #ffffff;
	overflow: hidden;
}

/* Wrapper supaya konten di atas animasi */
.hero-wrapper {
	position: relative;
	z-index: 10;
	max-width: 1100px;
	margin: 0 auto;
}

/* ===================================== */
/* FLOATING SHAPES BACKGROUND */
/* ===================================== */

#hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;

	background-image:
		radial-gradient(circle, rgba(0, 118, 182, 0.18) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.15) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.12) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.1) 100%, transparent 100%);

	background-repeat: no-repeat;

	background-position:
		-100px 20%,
		calc(100% + 150px) 90%,
		30% 15%,
		55% 25%;

	background-size:
		200px 200px,
		300px 300px,
		80px 80px,
		70px 70px;

	animation: floatShapes1 20s ease-in-out infinite;
}

#hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;

	background-image:
		radial-gradient(circle, rgba(0, 118, 182, 0.08) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.1) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.12) 100%, transparent 100%),
		radial-gradient(circle, rgba(0, 118, 182, 0.1) 100%, transparent 100%);

	background-repeat: no-repeat;

	background-position:
		40% 50%,
		60% 60%,
		90% 5%,
		5% 95%;

	background-size:
		90px 90px,
		60px 60px,
		50px 50px,
		60px 60px;

	animation: floatShapes2 22s ease-in-out infinite;
}

/* ===================================== */
/* HERO CONTENT */
/* ===================================== */

.hero-content {
	text-align: center;
}

/* Badge Link Atas */
.hero-top-link {
	margin-bottom: 35px;
}

.hero-offer-link {
	display: inline-block;
	padding: 10px 22px;
	background: #f1f3f5;
	border-radius: 50px;
	font-size: 14px;
	color: #333;
	text-decoration: none;
	transition: 0.3s ease;
}

.hero-offer-link:hover {
	background: #e9ecef;
	text-decoration: none;
}

/* ===================================== */
/* HERO TITLE */
/* ===================================== */

.hero-title {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -1px;
	color: #2f2f2f;
	margin-bottom: 30px;
}

/* Baris Kedua */
.hero-title span {
	display: block !important;
	color: #1177b6;
}

/* ===================================== */
/* HERO DESCRIPTION */
/* ===================================== */

.hero-description {
	font-size: 20px;
	color: #6c757d;
	max-width: 750px;
	margin: 0 auto 45px auto;
	line-height: 1.8;
}

/* ===================================== */
/* BUTTON STYLE */
/* ===================================== */

.hero-button-group {
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}

.btn-hero-primary {
	background: #1177b6;
	color: #ffffff;
	padding: 14px 30px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.3s ease;
}

.btn-hero-primary:hover {
	background: #0d5f94;
	color: #ffffff;
}

.btn-hero-outline {
	border: 2px solid #1177b6;
	color: #1177b6;
	padding: 14px 30px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	transition: 0.3s ease;
}

.btn-hero-outline:hover {
	background: #1177b6;
	color: #ffffff;
}

/* ===================================== */
/* ANIMATION */
/* ===================================== */

@keyframes floatShapes1 {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}
	50% {
		transform: translate(-8px, 12px) rotate(2deg);
	}
	100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
}

@keyframes floatShapes2 {
	0% {
		transform: translate(0px, 0px) rotate(0deg);
	}
	50% {
		transform: translate(9px, -14px) rotate(-2deg);
	}
	100% {
		transform: translate(0px, 0px) rotate(0deg);
	}
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media (max-width: 992px) {
	.hero-title {
		font-size: 48px;
	}
}

@media (max-width: 768px) {
	/* Padding section */
	#hero {
		padding: 80px 20px;
	}

	/* Kurangi shape jadi 2 + 2 */
	#hero::before {
		background-image:
			radial-gradient(circle, rgba(0, 118, 182, 0.12) 100%, transparent 100%),
			radial-gradient(circle, rgba(0, 118, 182, 0.1) 100%, transparent 100%);

		background-position:
			50% 8%,
			20% 45%;

		background-size:
			70px 70px,
			60px 60px;
	}

	#hero::after {
		background-image:
			radial-gradient(circle, rgba(0, 118, 182, 0.08) 100%, transparent 100%),
			radial-gradient(circle, rgba(0, 118, 182, 0.1) 100%, transparent 100%);

		background-position:
			80% 55%,
			50% 85%;

		background-size:
			80px 80px,
			55px 55px;
	}

	/* Title */
	.hero-title {
		font-size: 34px;
		line-height: 1.3;
		letter-spacing: -0.5px;
	}

	/* Description */
	.hero-description {
		font-size: 16px;
		line-height: 1.7;
		margin-bottom: 35px;
	}

	/* Button */
	.hero-button-group {
		flex-direction: column;
		gap: 15px;
	}

	.btn-hero-primary,
	.btn-hero-outline {
		width: 100%;
		text-align: center;
		padding: 13px 20px;
	}
}