body {
    font-family: 'Times New Roman', Times, serif;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    display: none;
}

body {
    scrollbar-width: none;
}

/* BIT Project */
.tittle {
    margin-bottom: 1rem;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(30, 30, 30, 0.7);
    transition: transform 0.3s ease;
    padding-bottom: 1%;
}
.card:hover {
    transform: translateY(-5px);
}
.card2 {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(34, 34, 34, 0.7);
    transition: transform 0.3s ease;
}
.card2:hover{
    transform: translateY(-5px);
    border: 1px solid rgb(140, 96, 0)
}
.view-more-btn {
    transition: all 0.3s ease;
}
.view-more-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.learning-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 2100px;
    margin: 0 auto;
}
.card-learning {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(30, 30, 30, 0.7);
    transition: transform 0.3s ease;
    padding-bottom: 2rem;
}

.card-learning:hover {
    border: 1px solid rgb(140, 96, 0)
}

.card2-learning {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: rgba(34, 34, 34, 0.7);
    transition: transform 0.3s ease;
}

.card2-learning-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 2000px;
    margin: 0 auto;
}

/* style.css */

@media (max-width: 900px) {
    .card {
        flex-direction: column; /* Mengubah arah flex menjadi kolom pada layar kecil */
    }

    .px-24 {
        padding-left: 1rem; /* Mengurangi padding horizontal */
        padding-right: 1rem;
    }

    .text-lg {
        font-size: 1rem; /* Mengurangi ukuran font untuk teks besar */
    }

    .md\:text-5xl {
        font-size: 1.5rem; /* Ukuran font untuk layar besar */
    }

    .md\:text-4xl {
        font-size: 1.2rem; /* Ukuran font untuk layar besar */
    }

    .image-journey {
        max-width: 100%;
        height: 8rem;
    }
}

@media (max-width: 800px) {
    .card {
        flex-direction: column; /* Mengubah arah flex menjadi kolom pada layar kecil */
    }

    .description-index {
        padding-bottom: 1.8rem;
    }

    .tittle-index {
        padding-top: 1rem;
    }

    .tittle {
        margin-bottom: 0;
    }

    .bit-button {
        padding-top: 2rem;
    }

    .text-phone {
        display: none;
    }

    .padding-timeline {
        margin: 0;
        padding: 2rem;
    }

    .larning-section {
        padding-left: 0;
        padding-right: 0;
    }

    .learning-container {
        padding: 0 1.2rem;
    }

    .footer-icon {
        padding-top: 0;
    }
}