body {
    font-family: 'Poppins', sans-serif;
}

/* Navbar styles */
.navbar {
    background: linear-gradient(to right, #2575fc, #1ec718);
}

.navbar-brand {
    color: white !important;
}

.navbar-nav .nav-link {
    color: white !important;
}

.navbar-nav .nav-link.active {
    color: white !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.hero-section {
    background: linear-gradient(to right, #1ec718, #2575fc);
    padding: 150px 0;
    background-size: cover;
    background-position: center;
}

.carousel-inner {
    border-radius: 40px;
}

.cta-section {
    padding: 80px 0;
    color: #333333;
}

.features-section .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.features-section .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* News section card styles */
.news-section .card {
    height: 300px !important; /* Gunakan !important untuk menimpa gaya lain */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Mencegah konten meluber */
}

.news-section .card-img-top {
    height: 100px; /* Sesuaikan tinggi gambar agar sesuai dengan kartu 300px */
    object-fit: cover;
    width: 100%;
}

.news-section .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px; /* Tambahkan padding untuk ruang di dalam kartu */
}

.news-section .card-title {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.news-section .card-text {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Kurangi ke 2 baris untuk menyesuaikan tinggi 300px */
    -webkit-box-orient: vertical;
    flex-grow: 1;
}

.news-section .text-muted {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.news-section .btn {
    align-self: flex-start;
    margin-top: auto;
}
.footer-wave .social-icons a {
    transition: color 0.3s ease;
    color: white;
}

.footer-wave .social-icons a:hover {
    color: yellowgreen;
}
.list-unstyled {
    color: white;
}

.footer-wave {
    background: linear-gradient(to right, #2575fc, #1ec718);
    color: white;
}

/* batasan ini untuk halam detail berita */



/* Styling untuk halaman detail berita */
.container {
    max-width: 100%; /* Pastikan container tidak melebihi lebar layar */
    padding: 0 40px; /* Tambahkan padding agar konten tidak terlalu menempel di tepi */
}

.lead {
    max-width: 100%; /* Batasi lebar teks agar sesuai container */
    word-wrap: break-word; /* Pecah kata yang panjang agar tidak meluber */
    overflow-wrap: break-word; /* Alternatif untuk kompatibilitas browser */
    line-height: 1.6; /* Tingkatkan kenyamanan membaca */
    text-align: justify; /* Rapihkan teks dengan rata kanan-kiri */
}

img.img-fluid {
    max-width: 100%; /* Pastikan gambar tidak melebihi lebar container */
    height: auto; /* Menjaga proporsi gambar */
    margin: 0 auto; /* Pusatkan gambar */
    display: block; /* Hapus spasi tambahan di bawah gambar */
}

.text-center {
    text-align: center !important; /* Pastikan teks tetap terpusat */
}

/* Tambahkan media query untuk layar kecil */
@media (max-width: 768px) {
    .container {
        padding: 0 10px; /* Kurangi padding di layar kecil */
    }

    .lead {
        font-size: 0.9rem; /* Kurangi ukuran font di layar kecil */
    }

    img.img-fluid {
        max-width: 100%; /* Pastikan gambar responsif di layar kecil */
    }
}


/* Styling untuk formulir saran */



.saran-form {
    max-width: 800px;
    margin: 0 auto;
}

.saran-form .form-control {
    border-radius: 5px;
    margin-bottom: 10px;
}

.saran-form textarea {
    resize: vertical;
    min-height: 100px;
}

.saran-form .btn-primary {
    background-color: #2575fc;
    border-color: #2575fc;
}

.saran-form .btn-primary:hover {
    background-color: #1ec718;
    border-color: #1ec718;
}

/* Styling untuk daftar saran admin */
.admin-saran {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
}

.admin-saran .list-group-item {
    margin-bottom: 10px;
    border: none;
    border-radius: 5px;
    background-color: #fff;
}

.admin-saran .list-group-item p {
    margin-bottom: 0;
    font-size: 0.9rem;
    color: #666;
}

/* News section card styles (tidak berubah, hanya disertakan untuk konteks) */
.news-section .card {
    height: 300px !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.news-section .card-img-top {
    height: 100px;
    object-fit: cover;
    width: 100%;
}

/* ... (bagian lain tetap sama, hanya tambahkan di atas jika perlu) ... */