@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
	--color-primary: #2d2add;
	--primary-opacity: #2d2add11;
	--color-secondary: #1eea4e;
	--color-violet: #db3cdb;
	--bg-color: #f9f9ff;
	--color-pink: #db7093;
	--pink-opacity: #db709322;
	--box-shadow: 0 0 10px rgb(0 0 0/20%);
	--main-color: #022bfa;
	--red: #fd2424;
	--coral: #f7817f;
	--gradient0: linear-gradient(270deg, #c15ff69a 0%, #3d53ad73 100%);
	--gradient: linear-gradient(90deg, var(--color-secondary), var(--color-pink));
	--gradient2: linear-gradient(to left, var(--color-secondary), var(--color-primary), var(--color-primary), var(--color-secondary));
	--black: #1d2730;
	--white: #fff;
	--light-color: #ccc;
	--light-color2: #919191;
	--light-bg: #eee;
	--border: .1rem solid rgba(0, 0, 0, .2);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	text-decoration: none;
	border: none;
}

*::selection {
	background: var(--main-color);
	color: #fff;
}

*::-webkit-scrollbar {
	height: .5rem;
	width: 1.2rem;
	border-radius: 20px;
}

*::-webkit-scrollbar-track {
	background-color: transparent;
}

*::-webkit-scrollbar-thumb {
	background-color: var(--light-color);
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--light-color2);
}

html {
	font-size: 60%;
	overflow-x: hidden;
}

body {
	background-color: var(--bg-color);
}

.btn {
	background-image: var(--gradient2);
	border-radius: 3rem;
	text-align: center;
	color: var(--white);
	text-transform: capitalize;
	font-size: 2rem;
	cursor: pointer;
	padding: .7rem 2.5rem;
	font-weight: 600;
	letter-spacing: 1px;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.08);
	transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

.btn:hover {
	background-image: var(--gradient);
	transform: scale(1.08) translateY(-2px);
	box-shadow: 0 6px 24px 0 rgba(44, 62, 80, 0.18);
}

.flex-btn {
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: center;
}

.pesan {
	position: sticky;
	top: 0;
	background-color: var(--light-bg);
	padding: 2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
}

.pesan.form {
	max-width: 1200px;
	margin: 0 auto;
	background-color: var(--white);
	top: 2rem;
	border-radius: .5rem;
}

.pesan span {
	font-size: 2rem;
	color: var(--black);
}

.pesan i {
	font-size: 2.5rem;
	color: var(--red);
	cursor: pointer;
	transition: .2s linear;
}

.pesan i:hover {
	transform: rotate(90deg);
}

.empty {
	background-color: var(--primary-opacity);
	border-radius: .5rem;
	padding: 1.5rem;
	text-align: center;
	width: 100%;
	font-size: 2rem;
	color: var(--color-primary);
}

.heading {
	padding-bottom: 2rem;
	margin: 3rem;
	text-align: center;
}

.heading span {
	background-color: var(--primary-opacity);
	color: var(--color-primary);
	padding: .3rem 1.5rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	border-radius: 5px;
}

.heading h1 {
	font-size: 2.5rem;
	margin: 1rem 0;
	text-transform: capitalize;
}

.heading-container {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.kelas .box-container .box::before,
.detail_alamat .box::before,
.header .flex .profil::before {
	background: linear-gradient(90deg, #9b38d1, #430df4);
	position: absolute;
	content: '';
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
}

.header {
	padding: 0 4%;
	background-image: url(../image/LB3.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--white);
	box-shadow: var(--box-shadow);
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

.header .flex {
	padding: .5rem 2rem;
	position: sticky;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.header .flex .search-form {
	width: 30rem;
	border-radius: .5rem;
	display: flex;
	align-items: center;
	gap: 2.5rem;
	padding: 1rem 2rem;
	background-color: var(--primary-opacity);
}

.header .flex .search-form input {
	width: 100%;
	font-size: 1rem;
	color: var(--color-primary);
	background: none;
}

.header .flex .search-form button {
	font-size: 1rem;
	color: var(--black);
	cursor: pointer;
	background: none;
}

.header .flex .search-form button:hover {
	color: var(--main-color);
}

.header .flex .icons div {
	font-size: 2rem;
	color: var(--white);
	border-radius: .5rem;
	height: 4.5rem;
	width: 4.5rem;
	line-height: 4.4rem;
	cursor: pointer;
	background-image: var(--gradient2);
	text-align: center;
	margin-left: .5rem;
}

.header .flex .icons div:hover {
	background-image: var(--gradient);
}

#search-btn,
#menu-btn {
	display: none;
}

.header .flex .profil {
	position: absolute;
	top: 120%;
	right: 2rem;
	background-color: var(--white);
	border-radius: 2rem;
	padding: 2rem;
	text-align: center;
	width: auto;
	transform: scale(0);
	transform-origin: top right;
	box-shadow: var(--box-shadow);
}

.header .flex .profil.active {
	transform: scale(1.0);
	transition: .2s linear;
}

.header .flex .profil img {
	height: 10rem;
	width: 10rem;
	border-radius: 50%;
	object-fit: cover;
	padding: .5rem;
	background-image: var(--gradient);
	margin-bottom: .5rem;
}

.header .flex .profil h3 {
	font-size: 2rem;
	color: var(--black);
	margin-bottom: .5rem;
	margin-top: 1rem;
	text-transform: capitalize;
}

.header .flex .profil span {
	color: var(--light-color);
	font-size: 1.6rem;
	text-transform: capitalize;
	margin-bottom: 1rem;
}

.header .flex .profil .flex-btn {
	margin-top: 2rem;
	margin-bottom: 10rem;
}

.header .navbar {
	display: flex;
	margin: .5rem 0;
}

.header .navbar a {
	color: var(--color-primary);
	font-size: 1.6rem;
	margin: 0 1.5rem;
	text-transform: capitalize;
}

.header .navbar a:hover {
	color: var(--color-secondary);
}

/* -----tombol Kembali------ */
.back-btn {
	display: inline-flex;
	align-items: center;
	margin-right: 20px;
	padding: 8px 15px;
	background: #f0f0f0;
	color: #333;
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}

.back-btn:hover {
	background: #e0e0e0;
}

.back-btn i {
	margin-right: 5px;
}

/* -----------------footer-------------- */
.berita {
	background-repeat: no-repeat;
	background-color: #2f57ef;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 4% 0;
	color: #fff;
	text-align: center;
	line-height: 1.5;
}

.berita span {
	background-color: #ffffff33;
	text-transform: uppercase;
	border-radius: 15px;
	padding: .5rem 1rem;
}

.berita h1 {
	font-size: 3rem;
	margin: .5rem;
}

.berita .input-field {
	margin: 1rem 0;
}

.berita .input-field input {
	padding: 1rem 0;
	border-radius: 10px;
	width: 30vw;
}

.berita .btn {
	border-radius: 10px;
	border: 1px solid #fff;
	padding: .6rem 2rem;
}

.berita .box-container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.berita .box-container .box {
	background-color: #ffffff21;
	margin: 1rem;
	padding: 2rem;
	border-radius: 10px;
}

.berita .box-counter {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

.berita .box-counter .counter,
.berita .box-counter i {
	font-size: 2.5rem;
}

.berita .box-container h3 {
	font-size: 2.3rem;
}

.berita p {
	font-size: 1.2rem;
}


footer {
	background-image: url(../image/LB3.png);
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	padding: 8% 4%;
	position: relative;
	border-radius: 2rem 2rem 0 0;
	box-shadow: 0 -2px 16px 0 rgba(44, 62, 80, 0.08);
	overflow: hidden;
}

footer .konten_isi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 2rem;
	justify-content: center;
	align-items: flex-start;
	line-height: 1.5;
	color: #000;
}

footer .konten_isi .btn {
	width: 100%;
	max-width: 300px;
	font-size: 1.5rem;
	color: white !important;
}

footer .konten_isi .box {
	border-radius: 1.2rem;
	padding: 2rem 1.5rem;
	margin-bottom: 1.5rem;
	transition: box-shadow 0.2s, transform 0.2s;
}

footer .konten_isi .box:hover {
	box-shadow: 0 6px 24px 0 rgba(44,62,80,0.13);
	transform: translateY(-4px) scale(1.02);
}

footer .konten_isi img {
	width: 90px;
	margin-bottom: 1.5rem;
	margin-block-start: 0;
}

footer .konten_isi h3 {
	font-size: 1.7rem;
	text-transform: capitalize;
	color: var(--color-primary);
	margin-bottom: 1rem;
}

footer .konten_isi .box p,
footer .konten_isi .box a {
	font-size: 1.3rem;
	color: #222;
	margin: .7rem 0;
}

footer .konten_isi a {
	display: flex;
	align-items: center;
	gap: .7rem;
	text-transform: capitalize;
	font-size: 1.2rem;
	margin-top: .5rem;
	color: var(--color-primary);
	transition: color 0.2s;
}

footer .konten_isi a:hover {
	color: var(--color-violet);
}

footer .sosmed-links {
	margin-top: 1.2rem;
	display: flex;
	gap: 1rem;
	justify-content: flex-start;
}

footer .sosmed-links a {
	color: var(--color-primary);
	font-size: 1.7rem;
	background: #fff;
	border-radius: 50%;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px 0 rgba(44,62,80,0.08);
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

footer .sosmed-links a:hover {
	background: var(--gradient);
	color: #fff;
	transform: scale(1.13);
}

.footer-decor {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	pointer-events: none;
}

.footer-decor .decor {
	position: absolute;
	border-radius: 50%;
	opacity: 0.13;
	z-index: 0;
}

.footer-decor .decor1 {
	width: 60px;
	height: 60px;
	background: var(--color-primary);
	left: 2%;
	bottom: 10px;
	animation: floatShape 8s ease-in-out infinite;
}

.footer-decor .decor2 {
	width: 35px;
	height: 35px;
	background: var(--color-pink);
	right: 4%;
	bottom: 30px;
	animation: floatShape2 10s ease-in-out infinite;
}

.footer-decor .decor3 {
	width: 20px;
	height: 20px;
	background: var(--color-secondary);
	left: 45%;
	bottom: 5px;
	animation: floatShape 6s ease-in-out infinite;
}

footer .bottom {
	width: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	border-top: 1px solid #eee;
	padding: 1.2rem 0 0.5rem 0;
	margin-top: 1.5rem;
	font-size: 1.2rem;
	color: #444;
	background: transparent;
}

/* Tambahan untuk mempercantik footer */
footer .konten_isi .box h3 {
	font-size: 2rem;
	text-transform: capitalize;
	color: var(--color-primary);
}

footer .konten_isi .box p {
	font-size: 1.5rem;
	color: black;
	margin: 1rem 0;
}

footer .newsletter {
	margin-top: 2rem;
}

footer .newsletter form {
	display: flex;
	gap: 0.5rem;
}

footer .newsletter input[type="email"] {
	padding: 0.7rem 1rem;
	border-radius: 1.2rem;
	border: 1px solid var(--color-primary);
	font-size: 1rem;
	outline: none;
	flex: 1;
}

footer .newsletter .btn {
	padding: 0.7rem 1.5rem;
	border-radius: 1.2rem;
	font-size: 1rem;
	margin: 0;
}

@media (max-width: 600px) {
	footer {
		padding: 2.5rem 1rem 1.5rem 1rem;
		border-radius: 1.2rem 1.2rem 0 0;
	}

	footer .konten_isi {
		grid-template-columns: 1fr;
		gap: 1.2rem;
	}

	footer .konten_isi .box {
		padding: 1.2rem 0.7rem;
		margin-bottom: 1rem;
	}

	footer .konten_isi img {
		width: 70px;
		margin-bottom: 1rem;
	}

	footer .konten_isi h3 {
		font-size: 1.3rem;
	}

	footer .konten_isi .box p,
	footer .konten_isi .box a {
		font-size: 1.1rem;
	}

	footer .sosmed-links a {
		font-size: 1.3rem;
		width: 2rem;
		height: 2rem;
	}

	.footer-decor .decor1 {
		width: 35px;
		height: 35px;
	}

	.footer-decor .decor2 {
		width: 20px;
		height: 20px;
	}

	.footer-decor .decor3 {
		width: 12px;
		height: 12px;
	}

	footer .bottom {
		font-size: 1rem;
		padding: 0.7rem 0 0.3rem 0;
	}
}

footer .sosmed-links {
	margin-top: 1.5rem;
	display: flex;
	gap: 1.2rem;
	justify-content: flex-start;
}

footer .sosmed-links a {
	color: var(--color-primary);
	font-size: 2rem;
	background: #fff;
	border-radius: 50%;
	width: 2.7rem;
	height: 2.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.08);
	transition: background 0.2s, color 0.2s, transform 0.2s;
}

footer .sosmed-links a:hover {
	background: var(--gradient);
	color: #fff;
	transform: scale(1.15);
}

.hero {
	background: linear-gradient(120deg, #f9f9ff 60%, #e6eaff 100%);
	width: 100%;
	position: relative;
	padding: 6rem 0 8rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 45vh;
	overflow: hidden;
	animation: fadeInUp 0.8s cubic-bezier(.4, 2, .6, 1) 0.1s both;
}

.hero::before {
	content: '';
	position: absolute;
	bottom: -8%;
	left: 0;
	width: 100%;
	height: 145px;
	background-image: url('../image/banner-bg-shape-1.svg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 3;
	opacity: 0.6;
}

.hero .shape1,
.hero .shape2,
.hero .shape3,
.hero .shape4,
.hero .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.23;
	pointer-events: none;
	animation: floatShape 8s ease-in-out infinite;
}

.hero .shape1 {
	top: 10%;
	left: 4%;
	width: 110px;
	height: 110px;
	background: radial-gradient(circle at 30% 30%, #2d2add 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 0s;
}

.hero .shape2 {
	bottom: 18%;
	right: 8%;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #db3cdb 60%, #2d2add 100%);
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
	animation-delay: 2s;
}

.hero .shape3 {
	top: 35%;
	right: 18%;
	width: 60px;
	height: 60px;
	background: linear-gradient(120deg, #1eea4e 60%, #db7093 100%);
	border-radius: 50%;
	animation-delay: 4s;
}

.hero .shape4,
.hero .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.12;
	pointer-events: none;
	animation: floatShape2 10s ease-in-out infinite;
}

.hero .shape4 {
	top: 60%;
	left: 12%;
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #f7817f 60%, #2d2add 100%);
	border-radius: 40% 60% 60% 40%/60% 40% 60% 40%;
	animation-delay: 1.5s;
}

.hero .shape5 {
	bottom: 10%;
	left: 45%;
	width: 40px;
	height: 40px;
	background: linear-gradient(120deg, #db3cdb 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 3.5s;
}

@keyframes floatShape2 {
	0%, 100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(14px) scale(1.12);
	}
}

.hero-img img {
	position: relative;
	margin-bottom: -40px;
	border: 2px #e6eaff;
	z-index: 1;
	background: transparent;
	margin-bottom: -40px;
	clip-path: inset(0 0 26px 0);
	-webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 80%, transparent 100%);
}

.hero .box.hero-content {
	transition: box-shadow 0.3s, transform 0.3s;
}

.hero .box.hero-content:hover {
	transform: translateY(-6px) scale(1.02);
}

.hero-content h1 {
	animation: popIn 1s cubic-bezier(.4, 2, .6, 1) 0.2s both;
}

@keyframes popIn {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}

	80% {
		opacity: 1;
		transform: scale(1.05);
	}

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

.hero-content .btn {
	animation: fadeInUp 1.2s cubic-bezier(.4, 2, .6, 1) 0.5s both;
}

@media (max-width: 600px) {
	.hero .shape4, .hero .shape5 {
		display: none;
	}
}

@keyframes floatShape {
	0%, 100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-18px) scale(1.08);
	}
}

.hero .box-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4rem;
	width: 100%;
	max-width: 1200px;
	z-index: 10;
	position: relative;
}

.hero-img {
	flex: 1 1 45%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hero-img img {
	width: 100%;
	max-width: 420px;
	border-radius: 2.5rem 1rem 2.5rem 1rem;
	transition: transform 0.4s cubic-bezier(.4, 2, .6, 1), box-shadow 0.3s;
}

.hero-img img:hover {
	transform: scale(1.04) rotate(-2deg);
}

.hero-content {
	flex: 1 1 55%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 2rem 0;
}

.hero-content h1 {
	font-size: 3.2rem;
	font-weight: 900;
	letter-spacing: 1px;
	color: var(--color-primary);
	margin-bottom: 1.2rem;
	line-height: 1.2;
	background: linear-gradient(90deg, #2d2add 60%, #db3cdb 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-content p {
	font-size: 1.6rem;
	color: #444;
	margin-bottom: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.5px;
}

.hero-content .btn {
	font-size: 2rem;
	padding: 1rem 3.5rem;
	border-radius: 2.5rem;
	box-shadow: 0 2px 16px 0 rgba(44, 62, 80, 0.10);
	transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
}

.hero-content .btn:hover {
	transform: scale(1.09) translateY(-3px);
	box-shadow: 0 8px 32px 0 rgba(44, 62, 80, 0.18);
}

.kategori .box-container .box {
	padding: 2rem;
	border-radius: .5rem;
	background-color: var(--white);
	margin: 1rem;
	text-align: center;
	cursor: pointer;
	transition: .5s;
	box-shadow: var(--box-shadow);
}

.kategori .box-container .box:hover {
	transform: translateY(-10px);
}

.kategori .box-container .box h3 {
	font-size: 1.5rem;
	text-transform: capitalize;
	color: var(--color-violet);
	margin: 1rem 0;
}

.kategori .box-container .box img {
	width: 120px;
}

.kategori .box-container .box a {
	font-size: 1.7rem;
	text-transform: capitalize;
	color: var(--color-primary);
}

.icon-section {
	position: relative;
	background-image: linear-gradient(270deg, #93652d 0%, #422acd 100%);
	padding: 4% 10%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	align-items: center;
	justify-content: center;
	text-align: center;
	margin-bottom: 2rem;
}

.icon-section .box {
	padding: 2rem;
	border-radius: .5rem;
	background-color: #ffffff21;
	box-shadow: var(--box-shadow);
	margin: 1rem;
	cursor: pointer;
	transition: .5s;
	line-height: 1.5;
	color: var(--white);
}

.icon-section .box:hover {
	background-color: #333e53e3;
	transform: translateY(-10px);
}

.icon-section .box h3 {
	text-transform: capitalize;
	font-size: 1.5rem;
}

.icon-section .box img {
	width: 90px;
}

.kelas {
	padding: 4rem 5vw;
	animation: fadeInUp 0.8s cubic-bezier(.4, 2, .6, 1) 0.1s both;
}

.kelas .shape1,
.kelas .shape2,
.kelas .shape3,
.kelas .shape4,
.kelas .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.13;
	pointer-events: none;
	animation: floatShape 8s ease-in-out infinite;
}

.kelas .shape1 {
	top: 10%;
	left: 4%;
	width: 110px;
	height: 110px;
	background: radial-gradient(circle at 30% 30%, #2d2add 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 0s;
}

.kelas .shape2 {
	bottom: 18%;
	right: 8%;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #db3cdb 60%, #2d2add 100%);
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
	animation-delay: 2s;
}

.kelas .shape3 {
	top: 35%;
	right: 18%;
	width: 60px;
	height: 60px;
	background: linear-gradient(120deg, #1eea4e 60%, #db7093 100%);
	border-radius: 50%;
	animation-delay: 4s;
}

.kelas .shape4,
.kelas .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.12;
	pointer-events: none;
	animation: floatShape2 10s ease-in-out infinite;
}

.kelas .shape4 {
	top: 60%;
	left: 12%;
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #f7817f 60%, #2d2add 100%);
	border-radius: 40% 60% 60% 40%/60% 40% 60% 40%;
	animation-delay: 1.5s;
}

.kelas .shape5 {
	bottom: 10%;
	left: 45%;
	width: 40px;
	height: 40px;
	background: linear-gradient(120deg, #db3cdb 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 3.5s;
}

.kelas .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
	gap: 1.5rem;
	align-items: flex-start;
	justify-content: center;
	margin-top: 3rem;
}

.kelas .box-container .box {
	border-radius: .5rem;
	background-color: var(--white);
	padding: 2rem;
	position: relative;
	box-shadow: 0 4px 24px 0 rgba(44, 62, 80, 0.08), 0 1.5px 4px 0 rgba(44, 62, 80, 0.03);
	margin-bottom: 6rem;
	transition: transform 0.3s cubic-bezier(.4, 2, .6, 1), box-shadow 0.3s;
}

.kelas .box-container .box:hover {
	transform: translateY(-10px) scale(1.03);
	box-shadow: 0 8px 32px 0 rgba(44, 62, 80, 0.16), 0 3px 8px 0 rgba(44, 62, 80, 0.06);
	z-index: 2;
}

.kelas .box-container .box .peran {
	margin-bottom: 2rem;
	display: flex;
	align-items: center;
	gap: 2rem;
	background-color: var(--primary-opacity);
	padding: 1rem;
	border-radius: .5rem;
	margin-top: -6rem;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.06);
}

.kelas .box-container .box .peran img {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: .5rem;
	border: 2px solid var(--color-secondary);
	transition: box-shadow 0.2s;
}

.kelas .box-container .box .peran img:hover {
	box-shadow: 0 0 0 4px var(--color-secondary);
}

.kelas .box-container .box h3 {
	font-size: 1.5rem;
	color: var(--black);
	margin-bottom: .5rem;
	text-transform: capitalize;
}

.kelas .box-container .box span {
	font-size: 1.2rem;
	color: var(--light-color2);
}

.kelas .box-container .box .thumb {
	width: 100%;
	border-radius: 1rem;
	height: 20rem;
	object-fit: cover;
	margin-bottom: 2rem;
	transition: filter 0.3s;
}

.kelas .box-container .box .thumb:hover {
	filter: brightness(0.95) saturate(1.2);
}

.kelas .box-container .box .judul {
	font-size: 1.5rem;
	color: var(--black);
	margin-top: .5rem;
	padding: .5rem 0;
	margin-bottom: 1rem;
	text-transform: capitalize;
}

.kelas .btn {
	margin: 1rem auto;
}

.kelas .more-btn {
	margin-top: 2rem;
	display: flex;
	text-align: center;
}

.manfaat {
	background-image: linear-gradient(270deg, #93652d 0%, #422acd 100%);
	color: var(--white);
	position: relative;
	padding-top: 2rem;
	padding-bottom: 4rem;
	overflow: hidden;
	animation: fadeInUp 0.8s cubic-bezier(.4, 2, .6, 1) 0.1s both;
}

.manfaat .map {
	width: 100%;
	height: 90%;
	opacity: 0.08;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

.manfaat .shape1,
.manfaat .shape2,
.manfaat .shape3,
.manfaat .shape4,
.manfaat .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.23;
	pointer-events: none;
	animation: floatShape 8s ease-in-out infinite;
}

.manfaat .shape1 {
	top: 10%;
	left: 4%;
	width: 110px;
	height: 110px;
	background: radial-gradient(circle at 30% 30%, #2d2add 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 0s;
}

.manfaat .shape2 {
	bottom: 18%;
	right: 8%;
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, #db3cdb 60%, #2d2add 100%);
	border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
	animation-delay: 2s;
}

.manfaat .shape3 {
	top: 35%;
	right: 18%;
	width: 60px;
	height: 60px;
	background: linear-gradient(120deg, #1eea4e 60%, #db7093 100%);
	border-radius: 50%;
	animation-delay: 4s;
}

.manfaat .shape4,
.manfaat .shape5 {
	position: absolute;
	z-index: 2;
	opacity: 0.12;
	pointer-events: none;
	animation: floatShape2 10s ease-in-out infinite;
}

.manfaat .shape4 {
	top: 60%;
	left: 12%;
	width: 70px;
	height: 70px;
	background: linear-gradient(135deg, #f7817f 60%, #2d2add 100%);
	border-radius: 40% 60% 60% 40%/60% 40% 60% 40%;
	animation-delay: 1.5s;
}

.manfaat .shape5 {
	bottom: 10%;
	left: 45%;
	width: 40px;
	height: 40px;
	background: linear-gradient(120deg, #db3cdb 60%, #1eea4e 100%);
	border-radius: 50%;
	animation-delay: 3.5s;
}

.manfaat .detail {
	width: 100%;
	position: relative;
	top: 0;
	text-align: center;
	z-index: 1;
}

.manfaat .detail h1 {
	font-size: 3.5rem;
	padding-bottom: 2rem;
	font-weight: 800;
	letter-spacing: 1px;
}

.manfaat .detail h2 {
	font-size: 2rem;
	padding-bottom: 2rem;
	font-weight: 600;
}

.manfaat .detail p {
	padding-top: 2rem;
	margin: 2.5rem 0;
	font-size: 2.2rem;
	font-weight: 500;
}

.manfaat .detail .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	align-items: center;
	justify-content: center;
	padding: 2rem 8%;
	gap: 2rem;
}

.manfaat .detail .box-container .box {
	margin: 1rem;
	background-color: #ffffff22;
	padding: 1.5rem 1rem;
	border-radius: 16px;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
	transition: background 0.3s, transform 0.2s;
	cursor: pointer;
}

.manfaat .detail .box-container .box:hover {
	background-color: #ffffff44;
	transform: translateY(-6px) scale(1.04);
}

.manfaat .detail .box-container .box img {
	width: 80px;
	height: 80px;
	margin-bottom: 1rem;
	transition: transform 0.2s;
}

.manfaat .detail .box-container .box:hover img {
	transform: scale(1.1) rotate(-6deg);
}

.manfaat .detail .box-container .box p {
	margin: 0;
	line-height: 1.5;
	font-size: 1.3rem;
	font-weight: 600;
	color: #fff;
}

@media (max-width: 991px) {

	#search-btn,
	#menu-btn {
		display: inline-block;
	}

	.header .flex .search-form {
		position: absolute;
		top: 99%;
		width: 100%;
		border-top: var(--border);
		background-color: var(--white);
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		transition: .3s linear;
	}

	.header .flex .search-form.active {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		opacity: 1;
		pointer-events: auto;
	}

	.header .navbar {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--white);
		border-bottom: var(--border);
		padding: 1rem 2rem;
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
		transition: .3s linear;
	}

	.header .navbar.active {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.header .navbar a {
		display: block;
		margin: 1.5rem 0;
		padding: 1rem;
		background-image: var(--gradient);
		text-align: center;
		border-radius: .5rem;
		color: white;
	}

	.header .navbar a:hover {
		color: var(--white);
		background-image: var(--gradient2);
	}

	.kelas .box-container {
		grid-template-columns: 1fr;
	}

	footer .konten_isi {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	html {
		font-size: 52%;
	}

	.kelas .box-container .box {
		padding: 1rem;
	}

	.tentang-kami .box-container img {
		max-width: 90vw;
	}

	footer {
		padding: 4rem 2vw;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}