* CSS untuk menu mobile (hamburger) */ .mobile-menu {
	transition: transform 0.3s ease-in-out;
}

.hero-overlay::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(to top, rgba(26, 35, 126, 0.7), rgba(0, 0, 0, 0.3));
	z-index: 1;
}
.hero-content {
	position: relative;
	z-index: 2;
}
.card-hover {
	transition:
		transform 0.3s ease-in-out,
		box-shadow 0.3s ease-in-out;
}
.card-hover:hover {
	transform: translateY(-8px);
	box-shadow:
		0 20px 25px -5px rgb(0 0 0 / 0.1),
		0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Style untuk teks dengan shadow */
.text-shadow {
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

/* Style untuk meniru desain tombol 'Live Demo' */
.live-demo-btn {
	background-color: #00c853; /* Warna hijau cerah */
	color: white;
	padding: 8px 16px;
	border-radius: 9999px; /* Rounded pill shape */
	font-weight: 600;
	font-size: 14px;
	transition: background-color 0.3s;
}
.live-demo-btn:hover {
	background-color: #00b048; /* Warna hijau lebih gelap saat hover */
}
/* Custom styles untuk galeri video */
.thumbnail-item {
	cursor: pointer;
	transition:
		transform 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
	border-radius: 0.75rem; /* rounded-xl */
}
.thumbnail-item:hover {
	transform: scale(1.05);
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.thumbnail-item .play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 48px;
	height: 48px;
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}
.thumbnail-item:hover .play-icon {
	opacity: 1;
}
/* CSS untuk menyembunyikan scrollbar */
.scrollbar-hide::-webkit-scrollbar {
	display: none;
}
.scrollbar-hide {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}
/* CSS untuk fungsionalitas drag-to-scroll */
.draggable {
	cursor: grab;
	user-select: none; /* Mencegah seleksi teks saat drag */
}
.draggable.active {
	cursor: grabbing;
}

/* This style ensures the mobile menu has a smooth slide-in/out animation. */
.mobile-menu {
	transition: transform 0.3s ease-in-out;
}
/* This style ensures the overlay fades in and out smoothly. */
#overlay {
	transition: opacity 0.3s ease-in-out;
}