.title-pelajaran-large { 
    font-size: 60px; 
    font-weight: bold; 
    letter-spacing: 3px; 
    color: #2C3E50; 
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3); 
} 

.box-penguasaan, .box-modul { 
    max-width: 700px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px; 
    text-align: center; 
} 

.box-pelajaran, .box-sesi { 
    max-width: 700px; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px; 
    text-align: center; 
} 

.header-penguasaan, .header-modul, .header-pelajaran, .header-sesi { 
    width: 100%; 
    border-radius: 15px 15px 0 0; 
    padding: 15px; 
    font-size: 20px; 
    color: white; 
    font-weight: bold; 
} 

.content-penguasaan, .content-modul, .content-pelajaran { 
    width: 100%; 
    min-height: 200px; 
    border-radius: 0 0 15px 15px; 
    padding: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 20px; 
} 

.content-sesi {
    width: 100%; 
    min-height: 200px; 
    border-radius: 0 0 15px 15px; 
    padding: 15px; 
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; 
    justify-content: center; 
    flex-wrap: wrap;
    gap: 20px; /* Space between items */
}

.item-box, .item-box-pelajaran { 
    background: white; 
    padding: 12px 20px; 
    border-radius: 8px; 
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); 
    min-width: 200px; 
    text-align: center; 
    font-size: 18px; 
    font-weight: 600; 
    transition: all 0.3s ease-in-out; 
} 

.item-box:hover, .item-box-pelajaran:hover { 
    color: #333; 
    transform: scale(1.05); 
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2); 
} 

.content-modul { 
    flex-direction: column; 
    gap: 25px; 
} 

/* Penguasaan 4M */ 
.header-penguasaan { 
    background: linear-gradient(to right, #FF8800, #FF5500); 
} 
.content-penguasaan { 
    background: linear-gradient(135deg, #FFC085, #FFA458); 
} 

/* Modul Yang Digunakan */ 
.header-modul { 
    background: linear-gradient(to right, #6A5ACD, #4682B4); 
}
.content-modul { 
    background: linear-gradient(135deg, #A0C4FF, rgb(203, 180, 247)); 
} 

/* Mata Pelajaran */ 
.header-pelajaran { 
    background: linear-gradient(to right, #20C997, #00B894); 
} 
.content-pelajaran { 
    background: linear-gradient(135deg, #A8E6CF, #81C784); 
} 

/* Sesi Bacaan Awal */ 
.header-sesi { 
    background: linear-gradient(to right, #f267ac, #e1659b); 
} 
.content-sesi { 
    background: linear-gradient(135deg, #e7bde3, #faa7ed); 
} 

/* Responsive Styles */ 
@media (max-width: 1366px) { 
    .title-pelajaran-large { font-size: 55px; 
    } 
    .item-box, .item-box-pelajaran { 
        font-size: 17px; 
        min-width: 180px; 
        width: 100%; /*Pastikan semua item sama lebar */ 
        display: flex; 
        justify-content: center; 
        align-items: center; 
    } 
} 
@media (max-width: 768px) { 
    .title-pelajaran-large { 
        font-size: 50px; 
    } 
    .item-box, .item-box-pelajaran { 
        font-size: 16px; 
        min-width: 150px; 
        width: 100%; /* Pastikan semua item sama lebar */ 
    } 
    .text-modul { 
        font-size: 24px; 
    } 
} 
@media (max-width: 480px) { 
    .title-pelajaran-large { 
        font-size: 45px; 
    } 
    .item-box, .item-box-pelajaran { 
        font-size: 14px; 
        min-width: 120px; 
        width: 100%; /* Pastikan semua item sama lebar */ 
    } .text-modul { 
        font-size: 22px; 
    } 
}