@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

/* Gaya dasar untuk elemen header */
.headers {
    background-size: cover; /* Menyesuaikan ukuran gambar latar belakang */
    background-position: center; /* Menjaga gambar agar terfokus di tengah */

    background-image: url('../images/library.png');
    color: white;
    padding: 150px;
    text-align: center;
    font-family: 'Exo', sans-serif;
    font-size: 45px;
    font-weight: bold;
}
@keyframes fadeInRight {
    0% {
        opacity: 0; /* Mulai dari transparan */
        transform: translateX(100%); /* Mulai dari posisi di luar layar di sebelah kanan */
    }
    100% {
        opacity: 1; /* Akhirnya menjadi sepenuhnya terlihat */
        transform: translateX(0); /* Pindah ke posisi aslinya */
    }
}
/* Media Queries untuk responsivitas */
@media (max-width: 768px) {
    .headers {
        padding: 30px; /* Menyesuaikan padding untuk layar lebih kecil */
        font-size: 28px; /* Mengurangi ukuran font pada perangkat kecil */
    }
}

@media (max-width: 480px) {
    .headers {
        padding: 20px; /* Padding lebih kecil untuk perangkat mobile */
        font-size: 24px; /* Ukuran font lebih kecil di perangkat dengan layar sangat kecil */
    }
}
     .breadcrumb {
         background-color: #f0f0f0;
         padding: 10px 20px;
     }
     .breadcrumb a {
         color: #000;
         text-decoration: none;
         margin-right: 5px;
     }
     .breadcrumb a:hover {
         text-decoration: underline;
     }
     .breadcrumb span {
         margin-right: 5px;
     }
     .contents {
         padding: 20px;
     }
     .contents h1 {
         font-size: 54px;
         color: #000;
     }
     .contents p {
         font-size: 16px;
         color: #333;
     }
     @media (max-width: 600px) {
         .header {
             padding: 10px;
         }
         .breadcrumb {
             padding: 10px;
             font-size: 14px;
         }
         .contents {
             padding: 10px;
         }
         .contents h1 {
             font-size: 20px;
         }
         .contents p {
             font-size: 14px;
         }
       
     }
     .container-style-3{
     padding: 60px;
     /* Padding untuk keseluruhan container */
     background-color: #ffffff;
     /* Latar belakang putih */
     border-radius: 8px;
     /* Sudut yang lebih lembut */
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     /* Bayangan lebih ringan */
     text-align: justify; 
     animation: fadeInRight 1s ease-in-out;
 }