/* SECTION HERO */
	.hero {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8f9ff, #eef3ff);
	}

	/* TEXT */
	.hero h1 {
	font-size: 42px;
	}

	.hero-desc {
	font-size: 18px;
	margin: 20px 0;
	color: #555;
	}

	/* BUTTON */
	.btn-hero {
	background: #4f46e5;
	color: #fff;
	padding: 12px 24px;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: 0.3s;
	}

	.btn-hero:hover {
	background: #3730a3;
	transform: translateY(-2px);
	}

	/* IMAGE AREA */
	.hero-img-wrapper {
	position: relative;
	}

	/* IMAGE STYLE */
	.hero-img {
	border-radius: 20px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.2);
	transform: rotate(-2deg);
	position: relative;
	z-index: 2;
	transition: 0.3s;
	}

	.hero-img:hover {
	transform: rotate(0deg) scale(1.03);
	}

	/* BACKGROUND BLOB */
	.hero-blob {
	position: absolute;
	width: 350px;
	height: 350px;
	background: linear-gradient(135deg, #6366f1, #ec4899);
	border-radius: 50%;
	top: 50px;
	left: 50px;
	z-index: 1;
	filter: blur(80px);
	opacity: 0.4;
	}

	/* BADGE */
	.hero-badge {
	position: absolute;
	bottom: -10px;
	right: 20px;
	background: white;
	padding: 10px 16px;
	border-radius: 30px;
	font-size: 14px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	z-index: 3;
	}

	.about {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8f9ff, #eef2ff);
	}

	
	
	/* SECTION RATING*/
	.portfolio {
	padding: 80px 0;
	background: linear-gradient(135deg, #eef2ff, #f8f9ff);
	position: relative;
	}

	/* BLOB */
	.rating-blob {
	position: absolute;
	width: 350px;
	height: 350px;
	background: linear-gradient(135deg, #6366f1, #ec4899);
	border-radius: 50%;
	top: -100px;
	right: -100px;
	filter: blur(100px);
	opacity: 0.3;
	}

	/* CARD */
	.rating-card {
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(15px);
	border-radius: 25px;
	padding: 30px;
	box-shadow: 0 25px 60px rgba(0,0,0,0.2);
	position: relative;
	overflow: hidden;
	}

	/* LEFT (SUMMARY) */
	.rating-number {
	font-size: 60px;
	font-weight: bold;
	color: #4f46e5;
	}

	.rating-stars i {
	color: #facc15;
	font-size: 20px;
	}

	.rating-total {
	color: #666;
	}

	/* PROGRESS */
	.progress {
	background: #e5e7eb;
	height: 10px;
	border-radius: 20px;
	overflow: hidden;
	}

	.progress div {
	height: 100%;
	width: 0%;
	border-radius: 20px;
	background: linear-gradient(90deg, #282ce6, #e71f1f);
	transition: width 0.8s ease;
	}

	/* ITEM */
	.rating-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	}

	.rating-item span {
	width: 40px;
	}

	.rating-item .progress {
	flex: 1; /* 🔥 INI YANG BIKIN BAR MUNCUL */
	}

	.rating-item small {
	min-width: 50px;
	text-align: right;
	}

	/* BUTTON */
	.btn-rating {
	background: linear-gradient(135deg, #4f46e5, #ec0f34);
	color: white;
	padding: 12px 20px;
	border-radius: 50px;
	border: none;
	transition: 0.3s;
	}

	.btn-rating:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
	}

	/* STAR HOVER */
	.star-wrapper i {
	font-size: 24px;
	cursor: pointer;
	color: #ddd;
	transition: 0.2s;
	}

	.star-wrapper i:hover,
	.star-wrapper i.active {
	color: #facc15;
	transform: scale(1.2);
	}

	/* =========================
   	REVIEW LIST
	========================= */

	#review_content{
		display:flex;
		gap:16px;

		overflow-x:auto;
		overflow-y:hidden;

		padding:10px 5px 15px;

		scroll-behavior:smooth;
	}

	/* CARD ITEM */
	.review-item{
		flex:0 0 calc((100% - 48px) / 4);
		min-width:260px;
	}

	/* CARD */
	.review-item .card{
		height:100%;

		border:none;
		border-radius:22px;

		background:#fff;

		overflow:hidden;

		box-shadow:
			0 10px 30px rgba(0,0,0,.08);

		transition:.3s;
	}

	.review-item .card:hover{
		transform:translateY(-5px);
		box-shadow:
			0 15px 35px rgba(99,102,241,.18);
	}

	/* BODY */
	.review-item .card-body{
		padding:18px;
	}

	/* NAMA */
	.review-name{
		font-size:16px;
		font-weight:700;
		color:#1e293b;

		margin-bottom:8px;

		line-height:1.4;
	}

	/* STAR */
	.review-stars{
		margin-bottom:10px;
	}

	.review-stars i{
		font-size:13px;
		margin-right:2px;
	}

	/* REVIEW */
	.review-text{
		font-size:14px;
		color:#475569;

		line-height:1.7;

		min-height:35px;
	}

	/* DATE */
	.review-date{
		font-size:12px;
		color:#94a3b8;
	}

	/* SCROLLBAR */
	#review_content::-webkit-scrollbar{
		height:7px;
	}

	#review_content::-webkit-scrollbar-thumb{
		background:linear-gradient(to right,#6366f1,#8b5cf6);
		border-radius:20px;
	}

	/* TABLET */
	@media(max-width:992px){

		.review-item{
			flex:0 0 calc(50% - 10px);
			min-width:280px;
		}

	}

	/* MOBILE */
	@media(max-width:576px){

		#review_content{
			gap:14px;
		}

		.review-item{
			flex:0 0 88%;
			min-width:88%;
		}

	}


	/* SECTION VIDEO WRAPPER */
	.about-video-wrapper {
	position: relative;
	text-align: center;
	}

	/* CARD */
	.video-card {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0,0,0,0.25);
	transform: rotate(-2deg);
	transition: 0.3s;
	z-index: 2;
	}

	.video-card:hover {
	transform: rotate(0deg) scale(1.03);
	}

	/* VIDEO */
	.video-element {
	width: 100%;
	display: block;
	cursor: pointer;
	}

	/* PLAY BUTTON */
	.video-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #ef4444;
	color: white;
	border: none;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	font-size: 26px;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
	transition: 0.3s;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.video-play-btn:hover {
	transform: translate(-50%, -50%) scale(1.1);
	}

	/* BLOB */
	.about-blob {
	position: absolute;
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, #6366f1, #ec4899);
	border-radius: 50%;
	top: 40px;
	left: 30px;
	filter: blur(80px);
	opacity: 0.4;
	z-index: 1;
	}

	/* BADGE */
	.video-badge {
	position: absolute;
	bottom: -15px;
	right: 30px;
	background: white;
	padding: 10px 16px;
	border-radius: 30px;
	font-size: 14px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	z-index: 3;
	}

	/* TEXT */
	.about-sub {
	color: #6366f1;
	font-weight: 600;
	}

	.about-title {
	font-size: 32px;
	margin: 10px 0;
	}

	.about-desc {
	color: #555;
	margin-bottom: 20px;
	}

	/* BUTTON */
	.btn-about {
	background: #4f46e5;
	color: white;
	padding: 12px 24px;
	border-radius: 50px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: 0.3s;
	}

	.btn-about:hover {
	background: #3730a3;
	transform: translateY(-2px);
	}

	.video-play-btn {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
	70% { box-shadow: 0 0 0 20px rgba(239,68,68,0); }
	100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
	}


	/* =========================
	COUNTS MODERN SECTION
	========================= */

	.counts{
		position: relative;
		padding: 70px 0;
		overflow: hidden;
	}

	/* background glow */
	.counts::before{
		content:'';
		position:absolute;
		width:500px;
		height:500px;
		background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
		top:-200px;
		left:-150px;
		z-index:0;
	}

	.counts::after{
		content:'';
		position:absolute;
		width:400px;
		height:400px;
		background: radial-gradient(circle, rgba(236,72,153,.10), transparent 70%);
		bottom:-180px;
		right:-120px;
		z-index:0;
	}

	.count-box{
		position: relative;
		z-index:2;

		display:flex;
		align-items:center;
		gap:18px;

		background: rgba(255,255,255,0.85);
		backdrop-filter: blur(12px);

		border-radius:28px;
		padding:28px 24px;

		border:1px solid rgba(255,255,255,0.7);

		box-shadow:
			0 10px 30px rgba(124,58,237,.08),
			0 2px 10px rgba(0,0,0,.04);

		transition: all .35s ease;

		overflow:hidden;
	}

	.count-box::before{
		content:'';
		position:absolute;
		width:120px;
		height:120px;
		border-radius:50%;
		background: rgba(124,58,237,.06);
		top:-50px;
		right:-40px;
	}

	.count-box:hover{
		transform: translateY(-10px);
		box-shadow:
			0 20px 45px rgba(124,58,237,.18),
			0 5px 15px rgba(0,0,0,.05);
	}

	/* ICON */
	.count-icon{
		min-width:72px;
		width:72px;
		height:72px;

		border-radius:22px;

		display:flex;
		align-items:center;
		justify-content:center;

		font-size:30px;
		color:#fff;

		position:relative;
		z-index:2;
	}

	.icon-student{
		background: linear-gradient(135deg,#ec4899,#be185d);
	}

	.icon-teacher{
		background: linear-gradient(135deg,#f97316,#ea580c);
	}

	.icon-subject{
		background: linear-gradient(135deg,#22c55e,#15803d);
	}

	.icon-alumni{
		background: linear-gradient(135deg,#7c3aed,#4f46e5);
	}

	/* CONTENT */
	.counter-content{
		position:relative;
		z-index:2;
	}

	.number-wrapper{
		display:flex;
		align-items:flex-start;

		font-size:42px;
		font-weight:800;
		line-height:1;

		color:#1e293b;

		margin-bottom:8px;
	}

	.plus-sign{
		font-size:24px;
		margin-left:4px;
		color:#7c3aed;
		margin-top:4px;
	}

	.counter-content p{
		margin:0;
		font-size:15px;
		font-weight:600;
		color:#64748b;
		letter-spacing:.3px;
	}

	/* MOBILE */
	@media (max-width: 768px){

		.counts{
			padding:50px 0;
		}

		.count-box{
			padding:22px 18px;
			border-radius:24px;
		}

		.count-icon{
			width:62px;
			height:62px;
			min-width:62px;
			font-size:24px;
			border-radius:18px;
		}

		.number-wrapper{
			font-size:34px;
		}

		.counter-content p{
			font-size:14px;
		}
	}


	/* SECTION BROSUR */
	.testimonials {
	padding: 80px 0;
	background: linear-gradient(135deg, #f8f9ff, #eef2ff);
	position: relative;
	}

	/* BLOB */
	.brosur-blob {
	position: absolute;
	width: 320px;
	height: 320px;
	background: linear-gradient(135deg, #6366f1, #ec4899);
	border-radius: 50%;
	top: -100px;
	left: -100px;
	filter: blur(100px);
	opacity: 0.3;
	}

	/* SINGLE */
	.brosur-single {
	display: flex;
	justify-content: center;
	}

	/* CARD */
	.brosur-card {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 25px 60px rgba(0,0,0,0.25);
	transition: 0.4s;
	cursor: pointer;
	margin: 0 10px;
	}

	.brosur-card img {
	width: 100%;
	display: block;
	transition: 0.5s;
	}

	/* HOVER EFFECT */
	.brosur-card:hover img {
	transform: scale(1.1);
	}

	/* OVERLAY */
	.brosur-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
	color: white;
	transform: translateY(100%);
	transition: 0.4s;
	}

	.brosur-card:hover .brosur-overlay {
	transform: translateY(0);
	}

	/* TITLE */
	.brosur-overlay h4 {
	margin: 0;
	font-size: 18px;
	}

	/* SWIPER SPACING */
	.swiper-slide {
	padding: 10px;
		opacity: 0.5;
	transform: scale(0.9);
	transition: 0.3s;
	}

	.swiper-slide-active {
	opacity: 1;
	transform: scale(1);
	}

	/* PAGINATION */
	.swiper-pagination-bullet {
	background: #6366f1;
	opacity: 0.5;
	}

	.swiper-pagination-bullet-active {
	opacity: 1;
	}


	/* SECTION GALERI FOTO */
	#data-galeri {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
	}

	/* CARD */
	.thumb {
	position: relative;
	border-radius: 15px;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	box-shadow: 0 15px 40px rgba(0,0,0,0.1);
	transition: 0.3s;
	}

	.thumb:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 25px 60px rgba(0,0,0,0.2);
	}

	/* IMAGE */
	.thumb img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	transition: 0.5s;
	}

	.thumb:hover img {
	transform: scale(1.1);
	}

	/* OVERLAY */
	.thumb::after {
	content: "Lihat Foto";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
	opacity: 0;
	transition: 0.3s;
	}

	.thumb:hover::after {
	opacity: 1;
	}

	/* FILTER BUTTON */
	#filter-galeri button {
	margin: 5px;
	border-radius: 50px;
	transition: 0.3s;
	}

	#filter-galeri button.active {
	background: linear-gradient(135deg, #4f46e5, #f10707);
	color: #fff;
	border: none;
	}

	/* MOBILE */
	@media (max-width: 768px) {
	#data-galeri {
		grid-template-columns: repeat(2, 1fr);
	}
	}


	/* =========================================
	KEGIATAN MODERN STYLE
	========================================= */

	.kegiatan-modern {
		padding: 70px 0;
		background: #f6f7fb;
		position: relative;
	}

	/* MINI TITLE */
	.section-mini-title {
		display: inline-flex;
		align-items: center;
		gap: 10px;

		padding: 14px 22px;

		background: #f1ebff;

		border-radius: 999px;

		color: #6d28d9;
		font-weight: 700;
		font-size: 18px;

		margin-bottom: 35px;
	}

	.section-mini-title i {
		font-size: 18px;
	}

	/* CARD */
	.modern-post-card {
		background: #fff;

		border-radius: 26px;

		overflow: hidden;

		box-shadow:
			0 10px 35px rgba(0,0,0,0.06);

		transition: all .35s ease;

		height: 100%;
	}

	.modern-post-card:hover {
		transform: translateY(-10px);

		box-shadow:
			0 20px 45px rgba(109,40,217,0.14);
	}

	/* IMAGE */
	.modern-post-image {
		position: relative;
		padding: 16px 16px 0 16px;
	}

	.modern-post-image img {
		width: 100%;
		height: 250px;

		object-fit: cover;

		border-radius: 22px;

		transition: .5s ease;
	}

	.modern-post-card:hover .modern-post-image img {
		transform: scale(1.04);
	}

	/* DATE BADGE */
	.post-date-badge {
		position: absolute;

		top: 28px;
		left: 28px;

		background:
			linear-gradient(135deg,#ed3a3a,#f65c5c);

		color: white;

		padding: 10px 16px;

		border-radius: 14px;

		font-size: 14px;
		font-weight: 600;

		display: flex;
		align-items: center;
		gap: 8px;

		box-shadow:
			0 10px 25px rgba(124,58,237,.35);
	}

	/* CONTENT */
	.modern-post-content {
		padding: 24px;
	}

	/* META */
	.modern-post-meta {
		display: flex;
		align-items: center;
		gap: 12px;

		margin-bottom: 18px;

		color: #271bc9;
		font-size: 15px;
		font-weight: 500;
	}

	.meta-item {
		display: flex;
		align-items: center;
		gap: 6px;
	}

	.dot {
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #c4b5fd;
	}

	/* TITLE */
	.modern-post-title {
		font-size: 22px;
		font-weight: 800;

		line-height: 1.4;

		color: #1e1b4b;

		margin-bottom: 14px;

		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* DESC */
	.modern-post-desc {
		font-size: 16px;
		line-height: 1.8;

		color: #6b7280;

		margin-bottom: 24px;

		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* BUTTON */
	.modern-readmore {
		display: inline-flex;
		align-items: center;
		gap: 10px;

		color: #5d39ff !important;

		font-weight: 700;
		font-size: 17px;

		text-decoration: none;

		transition: .3s ease;
	}

	.modern-readmore i {
		transition: .3s ease;
	}

	.modern-readmore:hover {
		color: #271bc9 !important;
	}

	.modern-readmore:hover i {
		transform: translateX(6px);
	}

	/* MOBILE */
	@media (max-width: 768px) {

		.kegiatan-modern {
			padding: 50px 0;
		}

		.modern-post-image img {
			height: 220px;
		}

		.modern-post-content {
			padding: 20px;
		}

		.modern-post-title {
			font-size: 20px;
		}

		.modern-post-desc {
			font-size: 15px;
		}

		.section-mini-title {
			font-size: 15px;
			padding: 12px 18px;
		}

	}


	/* SECTION KONTAK */
	.contact {
	padding: 80px 0;
	background: linear-gradient(135deg, #eef2ff, #f8f9ff);
	position: relative;
	}

	/* BLOB BACKGROUND */
	.contact::before {
	content: "";
	position: absolute;
	width: 350px;
	height: 350px;
	background: linear-gradient(135deg, #4f46e5, #ee1212);
	border-radius: 50%;
	top: -100px;
	left: -100px;
	filter: blur(100px);
	opacity: 0.3;
	}

	/* INFO CARD */
	.info-box {
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(12px);
	border-radius: 15px;
	padding: 25px;
	text-align: center;
	height: 100%;
	box-shadow: 0 20px 50px rgba(0,0,0,0.15);
	transition: 0.3s;
	position: relative;
	overflow: hidden;
	}

	.info-box:hover {
	transform: translateY(-8px) scale(1.03);
	box-shadow: 0 30px 70px rgba(0,0,0,0.25);
	}

	/* ICON */
	.info-box i {
	font-size: 30px;
	width: 60px;
	height: 60px;
	margin-bottom: 5px;
	border-radius: 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	}

	/* ICON COLORS */
	.info-box:nth-child(1) i { background: linear-gradient(135deg,#ec4899,#be185d); }
	.info-box:nth-child(2) i { background: linear-gradient(135deg,#f97316,#ea580c); }
	.info-box:nth-child(3) i { background: linear-gradient(135deg,#22c55e,#15803d); }
	.info-box:nth-child(4) i { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }

	/* TEXT */
	.info-box h3 {
	font-size: 18px;
	margin-bottom: 5px;
	}

	.info-box p {
	font-size: 14px;
	color: #555;
	}

	/* GLOW EFFECT */
	.info-box::before {
	content: "";
	position: absolute;
	width: 120%;
	height: 120%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
	top: -10%;
	left: -10%;
	transform: rotate(25deg);
	opacity: 0;
	transition: 0.5s;
	}

	.info-box:hover::before {
	opacity: 1;
	left: 120%;
	}

	/* MAP */
	.map-wrapper {
	background: rgba(255,255,255,0.7);
	backdrop-filter: blur(12px);
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.15);
	overflow: hidden;
	}

	.map-wrapper iframe {
	width: 100%;
	height: 100%;
	border-radius: 15px;
	min-height: 450px;
	}

	/* RESPONSIVE */
	@media (max-width: 768px) {
	.map-wrapper iframe {
		min-height: 300px;
	}
	}