@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;
}

.banner {
	display: contents;
	align-items: center;
	width: 100%;
	min-height: 60vh;
	background: var(--gradient0);
	border-radius: 2rem;
	box-shadow: 0 4px 24px 0 rgba(44, 62, 80, 0.10);
	padding: 2rem 4vw;
	position: relative;
	overflow: hidden;
}

.banner img {
	width: 100%;
	max-width: 400px;
	border-radius: 2rem;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
	margin: 0 auto;
}

.banner-shapes {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.banner .shape {
	position: absolute;
	border-radius: 50%;
	opacity: 0.18;
	animation: floatShape 7s ease-in-out infinite alternate;
}

.banner .shape1 {
	width: 120px;
	height: 120px;
	background: var(--color-secondary);
	top: 10%;
	left: 5%;
	animation-delay: 0s;
}

.banner .shape2 {
	width: 80px;
	height: 80px;
	background: var(--color-pink);
	top: 60%;
	left: 10%;
	animation-delay: 1.5s;
}

.banner .shape3 {
	width: 60px;
	height: 60px;
	background: var(--color-primary);
	top: 20%;
	right: 10%;
	animation-delay: 2.5s;
}

.banner .shape4 {
	width: 100px;
	height: 100px;
	background: var(--color-violet);
	bottom: 10%;
	right: 5%;
	animation-delay: 3.5s;
}

.banner .shape5 {
	width: 40px;
	height: 40px;
	background: var(--coral);
	bottom: 20%;
	left: 40%;
	animation-delay: 2s;
}

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

	100% {
		transform: translateY(-30px) scale(1.1);
	}
}

.banner-image {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner .detail {
	z-index: 2;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 1.5rem;
	padding: 2rem 2.5rem;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.08);
	backdrop-filter: blur(2px);
	margin: 1rem 0;
	transition: box-shadow 0.2s;
}

.banner .detail:hover {
	box-shadow: 0 6px 24px 0 rgba(44, 62, 80, 0.16);
}

.banner .judul {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.5rem;
}

.banner .judul a {
	color: var(--color-pink);
	font-size: 1.2rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	transition: color 0.2s;
}

.banner .judul a:hover {
	color: var(--color-secondary);
}

.banner .judul span {
	color: var(--color-primary);
	font-size: 1rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.banner .detail h1 {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
	text-transform: capitalize;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--color-primary);
	display: flex;
	align-items: center;
	gap: 0.6rem;
	letter-spacing: 1px;
}

.banner .detail p {
	color: var(--black);
	font-size: 1.5rem;
	margin-bottom: 1.2rem;
	line-height: 1.5;
	font-weight: 500;
}

.banner .flex-btn {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
	justify-content: flex-start;
}

.banner .btn {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
	padding: 0.7rem 1.5rem;
	border-radius: 2rem;
	font-size: 1.5rem;
	font-weight: 600;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
	transition: background 0.2s, color 0.2s, box-shadow 0.2s;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.banner .btn:hover {
	background: var(--color-primary);
	color: #fff;
	box-shadow: 0 4px 16px 0 rgba(44, 62, 80, 0.18);
}


/* --- Responsive Banner Header --- */
.banner-header {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	justify-content: center;
	align-items: center;
	width: 100%;
	min-height: 10px;
	background-image: url(../image/LB3.png);
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	border-radius: 2rem 2rem 0 0;
	box-shadow: 0 4px 24px 0 rgba(44, 62, 80, 0.10);
	padding: 1rem 4vw;
}

.banner-header img {
	width: 100%;
	max-width: 400px;
	border-radius: 2rem;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
	margin: 0 auto;
}

.banner-header .detail {
	line-height: 1.5;
	padding: 1rem 2rem;
}

.banner-header .judul {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
}

.banner-header .judul a {
	color: var(--color-pink);
	font-size: 1.5rem;
	transition: color 0.2s;
}

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

/* --- Tentang Kami Section Modernization --- */
.tentang-kami .box-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	align-items: center;
	gap: 3rem;
	padding: 4rem 5vw;
	background-image: linear-gradient(270deg, #93652d 0%, #422acd 100%);
	border-radius: 2rem;
	box-shadow: 0 4px 24px 0 rgba(44, 62, 80, 0.10);
	animation: fadeInUp 0.8s cubic-bezier(.4, 2, .6, 1) 0.1s both;
}

.tentang-kami .box-container img {
	width: 100%;
	max-width: 400px;
	border-radius: 2rem;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
	margin: 0 auto;
	animation: bounce 5s ease-in-out infinite;
}

.tentang-kami .box-container .heading {
	text-align: left;
}

.tentang-kami .box-container span {
	background-color: #ffffff21;
	color: var(--white);
	padding: .3rem 1.5rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	border-radius: 5px;
}

.tentang-kami .box-container h1 {
	font-size: 2.5rem;
	margin: 1rem 0;
	text-transform: capitalize;
	color: #fff;
	font-weight: 700;
}

.tentang-kami .box-container p {
	font-size: 1.3rem;
	color: #f5e9ff;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}

@keyframes bounce {

	0%,
	100% {
		transform: translateY(-50px);
	}

	50% {
		transform: translateY(50px);
	}
}

/* --- Testimoni Modernization --- */

.heading h1 {
    font-size: 2.5rem;
    margin: 1rem 0;
    text-transform: capitalize;
}
.heading span {
	padding: .3rem 1.5rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	border-radius: 5px;
}
.heading p {
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
	line-height: 1.6;
}
.testimoni-container {
	padding: 6% 0;
}

.testimoni-container .container {
	position: relative;
	perspective: 1000px;
	padding-top: 2rem;
}

.testimoni-container .container .testimoni-item {
	border-radius: 16px;
	box-shadow: 0 4px 24px 0 rgba(44, 62, 80, 0.10);
	color: #444;
	width: 90vw;
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	display: none;
	padding: 2rem 1rem;
	transform-style: preserve-3d;
	animation: slide .5s linear;
	outline: 0.1rem solid #ccc;
	outline-offset: -.5rem;
	background: #fff;
}

.testimoni-container .container .testimoni-item.active {
	display: block;
}

.testimoni-container .container .testimoni-item h1 {
	color: var(--color-pink);
	font-size: 1.3rem;
	text-transform: capitalize;
	margin: 1rem 0;
}

.testimoni-container .container .testimoni-item img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	padding: .5rem;
	z-index: 100;
	background-image: var(--gradient2);
	margin-bottom: 1rem;
}

.testimoni-container .container .left-arrow,
.testimoni-container .container .right-arrow {
	position: absolute;
	top: 40%;
	transform: translateY(-50%);
	font-size: 1.5rem;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--color-pink);
	background-color: var(--pink-opacity);
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px 0 rgba(44, 62, 80, 0.10);
}

.testimoni-container .container .left-arrow:hover,
.testimoni-container .container .right-arrow:hover {
	background-color: var(--color-pink);
	color: #fff;
}

.testimoni-container .container .left-arrow {
	left: 1rem;
}

.testimoni-container .container .right-arrow {
	right: 1rem;
}

@keyframes slide {
	0% {
		transform: rotateX(180deg);
	}
}

#quote {
	position: absolute;
	top: -10%;
	right: 2%;
	font-size: 5rem;
	color: #c6ede5;
}

.testimoni-container .container .testimoni-item>* {
	animation: slideContent .2s linear .4s backwards;
}

@keyframes slideContent {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
}

/* --- Responsive Improvements --- */
@media (max-width: 991px) {
	.banner,
	.banner-header,
	.tentang-kami .box-container {
		padding: 2rem 2vw;
	}

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

	.banner .detail h1,
	.tentang-kami .box-container h1 {
		font-size: 2rem;
	}

	.banner .detail {
		padding: 1.5rem 1rem;
	}

	.banner-main-img {
		max-width: 90vw;
	}
}

@media (max-width: 600px) {
	.banner .judul{
		font-size: 1.5rem;
	}
	.banner .detail h1,
	.tentang-kami .box-container h1 {
		font-size: 1.7rem;
	}

	.banner .detail p,
	.tentang-kami .box-container p {
		font-size: 1.5rem;
	}

	.testimoni-container .container .testimoni-item {
		padding: 1rem 0.5rem;
	}

	.banner .detail {
		padding: 1rem 0.5rem;
	}

	.banner-main-img {
		max-width: 98vw;
	}
}

/* --- Add subtle animation for section appearance --- */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

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

.banner,
.banner-header,
.tentang-kami,
.testimoni-container {
	animation: fadeInUp 0.8s cubic-bezier(.4, 2, .6, 1) 0.1s both;
}