/* Anda dapat menempatkan file ini di folder 'assets/css' di root CI Anda */

/* Custom Styles */
:root {
	/* Menimpa warna default Bootstrap jika diperlukan */
	--primary: #004d73;
	--info: #2a9d8f;
}

/* Penyesuaian Heroes Section */
.heroes-section {
	/* Minimal tinggi layar penuh */
	min-height: 100vh;
	/* Pastikan gambar atau warna latar belakang terlihat bagus */
	background-color: var(--primary) !important;
	padding-top: 70px;
	/* Jarak dari fixed navbar */
	display: flex;
	align-items: center;
	/* Memposisikan konten di tengah vertikal */
}

.navbar {
	background-color: rgb(47, 108, 238);
}

.heroes-section .display-3 {
	font-weight: 700;
}

/* Penyesuaian Navbar */
.navbar-brand {
	font-weight: bold;
	padding: 10px 0;
}

.navbar-brand img {
	height: 50px;
	transition: all 0.3s ease;
}

.navbar-nav .nav-link {
	color: white !important;
	margin-right: 20px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.dropdown .nav-link:hover {
	color: white !important;
	border-bottom: 2px solid yellow;
}

.navbar-nav .nav-item .nav-link.active {
	color: white !important;
	border-bottom: 2px solid yellow;
}



/* Custom background untuk section tertentu */
#about {
	background-color: white;
}

#info {
	background-color: white;
	/* bg-light dari bootstrap sudah cukup, tapi bisa di custom */
}

/* Custom shadow untuk cards lomba */
.card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Pastikan semua tautan mengarah ke anchor yang benar */
html {
	scroll-behavior: smooth;
}

#registerpage {
	display: none;
}

/* Penyesuaian Heroes Section untuk Mobile */
@media (max-width: 768px) {
	/* Untuk HP dan Tablet kecil */

	.heroes-section {
		/* Kurangi padding atas di mobile agar konten segera terlihat */
		padding-top: 100px;
		/* Jangan terlalu tinggi di mobile */
		min-height: 80vh;
	}

	.heroes-content .display-3 {
		/* Ukuran font lebih kecil di mobile */
		font-size: 2.5em;
	}

	/* Memastikan card lomba menjadi tumpukan di bawah 768px */
	.row>.col-md-4 {
		/* Bootstrap sudah menangani ini, tapi ini memastikan */
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Penyesuaian Login Section */
	#login-section .card {
		margin: 0 15px;
		/* Tambahkan sedikit margin di sisi kiri/kanan HP */
	}
}

/* Memastikan elemen navbar dropdown berwarna gelap di mobile agar mudah dibaca */
.navbar-dark .navbar-nav .dropdown-menu {
	background-color: #f8f9fa;
	/* Latar belakang terang untuk dropdown di mobile */
	border: none;
}

.navbar-dark .navbar-nav .dropdown-item {
	color: #333;
	/* Warna teks gelap */
}

.navbar-dark .navbar-nav .dropdown-item:hover {
	background-color: #e9ecef;
}