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

.navbar {
    background: linear-gradient(to right, #007bff, #28a745);
}

.navbar .navbar-brand {
    font-size: 1.5rem; /* Adjust for better mobile readability */
    color: white;
    font-weight: bold;
}

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

.navbar .navbar-nav .nav-link:hover {
    color: #d4d4d4;
}

.content {
    max-height: 50px; /* Tinggi maksimum untuk tampilan awal */
    overflow: hidden; /* Sembunyikan teks yang melebihi tinggi maksimum */
    transition: max-height 3s ease; /* Animasi saat mengubah tinggi */
    margin-bottom: 10px; /* Jarak antar teks */
}
.content.expanded {
    max-height: 10000px; /* Tinggi maksimum saat diperluas */
}
.read-more {
    color: #87CEEB;
    cursor: pointer;
    text-decoration: underline;
    font-weight: bold;
    font-family: 'poppins';
}

.jumbotron {
    padding-top: 6rem;
    margin-bottom: 0;
    background: linear-gradient(to right, #007bff, #28a745);
    text-align: center; /* Center-align for smaller screens */
}

.display-4, .lead {
    color: #fff;
}

section {
    padding: 3rem 0; /* More balanced spacing for mobile */
}

.card {
    background: #A9CAFF;
}

.card img {
    width: 100%; /* Ensure images are fully responsive */
    height: auto;
}

.footer-custom {
    background: linear-gradient(to right, #007bff, #28a745);
    color: white;
    padding: 1.5rem 1rem;
    text-align: center; /* Center-align footer content on mobile */
}

.footer-custom h5 {
    font-weight: 600;
    font-size: 1.2rem; /* Adjust font size for mobile */
}

.footer-custom p, .footer-custom a {
    color: white;
    text-decoration: none; /* Remove underline on links */
    font-weight: 400; /* Maintain font weight */
    font-size: 0.9rem; /* Smaller text for compact view */
}

.footer-logo {
    background-color: #f1f1f1; /* Warna latar belakang footer */
    padding: 20px; /* Jarak dalam footer */
    text-align: right; /* Mengatur teks ke kanan */
}

.logo-container {
    display: flex; /* Menggunakan flexbox untuk tata letak */
    justify-content: flex-end; /* Mengatur logo ke kanan */
}

.logo {
    width: 100px; /* Ukuran logo, sesuaikan sesuai kebutuhan */
    height: auto; /* Mempertahankan rasio aspek */
    margin-left: 10px; /* Jarak antar logo */
}

#contact, #projects, #information,
#tasmi, #muhadhoroh, #visimisi {
    background-color: #e2edff;
    width: 85%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin: 20px auto;
}

#tasmi, #muhadhoroh, #visimisi {
    font-family: 'Poppins', sans-serif; /* Ensure font family is consistent */
}

/* Media queries for smaller screens */
@media (max-width: 768px) {
    .navbar .navbar-brand {
        font-size: 1.2rem;
    }

    .jumbotron {
        padding-top: 4rem;
        padding-bottom: 0;
    }

    .display-4 {
        font-size: 2rem; /* Adjust for smaller screens */
    }

    .lead {
        font-size: 1rem; /* Better readability on mobile */
    }

    .footer-custom h5 {
        font-size: 1rem; /* Compact heading size */
    }

    .footer-custom p, .footer-custom a {
        font-size: 0.8rem; /* Adjust font size for mobile */
    }

    section {
        padding: 2rem 0;
        margin-top: 30px;
    }
}