.ppdb-page {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
}

.ppdb-page h1 {
    color: #048149;
    margin-bottom: 20px;
}
.pendaftaran-header {
    text-align: center;
    padding: 50px 20px;
    margin-bottom: 10px; /* Mengurangi jarak bawah pada header */
}
.hero {
    height: 430px;
    background:
        
        url("/images/pendaftaran/utama.png") center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.pendaftaran-header h1 {
    font-size: 36px;
    color: #048149;
    margin-bottom: 10px;  /* Mengurangi jarak bawah header */
}

.pendaftaran-header h3 {
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px; /* Mengurangi jarak bawah */
    color: #ffffff;
}

/* Gambar pada header pendaftaran */
.pendaftaran-header img {
    width: 100%;
    max-width: 1200px;
    height: auto;
    margin-top: 50px;
    margin-bottom: 20px; /* Mengurangi jarak bawah gambar */
    border-radius: 10px;
}

/* Content Section (Left & Right) */
.content-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: 30px; /* Mengurangi jarak antar kolom */
    margin-top: 30px; /* Mengurangi jarak atas */
    padding: 0 20px;
}

.content-left, .content-right {
    text-align: center;
}

.content-left h3, .content-right h3 {
    font-size: 20px;
    color: #f6faf8;
    margin-bottom: 20px; /* Mengurangi jarak bawah */
}

.content-left img, .content-right img {
    width: 100%;
    max-width: 600px;
    height: auto;
    border-radius: 10px;
    margin-top: 30px;
    margin-bottom: 15px; /* Mengurangi jarak bawah gambar */
}
.berwarna {
    background-color: #f2be15; /* Warna latar belakang (hijau seperti pada gambar) */
    color: white; /* Warna teks (putih) */
    padding: 5px 10px; /* Padding agar teks tidak terlalu mepet dengan latar belakang */
    border-radius: 15px; /* Border radius agar sudut latar belakang membulat */
    display: inline-block; /* Agar lebar latar belakang menyesuaikan dengan teks */
}
.berwarna:hover {
    
     transform: translateY(-6px); /* Membuat elemen bergerak naik 3 pixel */
    transition: transform 0.3s ease; /* Efek transisi agar pergerakan lebih halus */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Menambahkan sedikit bayangan */
}
.pendaftaran-header img:hover,
.content-left img:hover,
.content-right img:hover {
    transform: scale(1.1); /* Memperbesar gambar menjadi 110% dari ukuran aslinya */
    transition: transform 0.3s ease; /* Efek transisi agar pergerakan lebih halus */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Menambahkan sedikit bayangan */
}

/* Adjustments for mobile */
@media (max-width: 768px) {
    .content-section {
        grid-template-columns: 1fr; /* stack on top for mobile */
    }

    .content-left, .content-right {
        text-align: center;
    }

    .content-left img, .content-right img {
        max-width: 100%; /* full width on mobile */
    }
}
.biaya-administrasi {
    max-width: 900px;  /* Maksimal lebar konten */
    margin: 0 auto;  /* Pusatkan konten */
    padding: 20px;
    background-color: #f9f9f9; /* Latar belakang halaman */
    border-radius: 10px; /* Sudut membulat */
    margin-top: 30px;
}

.biaya-administrasi h3 {
    font-size: 16px;
    color: #fafbfb;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3px; /* Jarak bawah dari judul */
}

/* Desain tabel yang lebih modern */
.table-biaya {
    width: 100%;
    max-width: 700px;  /* Lebar maksimal tabel */
    margin-top: 20px;
    margin-left: 40px;
    border-collapse: collapse;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);  /* Efek bayangan yang lebih halus */
    border-radius: 12px;  /* Sudut membulat lebih halus */
    background-color: #ffffff; /* Warna latar belakang tabel */
}

/* Desain header tabel */
.table-biaya th,
.table-biaya td {
    padding: 4px 14px;  /* Padding lebih nyaman dan sedikit lebih besar */
    text-align: left;
    color: #333;  /* Warna teks */
    font-size: 14px; /* Ukuran font yang lebih besar */
}

/* Desain header tabel */
.table-biaya th {
    background: #c5e42d; /* Warna latar belakang header tabel */
    color: white; /* Warna teks putih untuk header */
    font-weight: bold;
    border-collapse: collapse;
    overflow: hidden;
    border

}

.table-biaya th:first-child {
    border-top-left-radius: 12px; /* Sudut membulat di kiri atas pada kolom pertama */
}

.table-biaya th:last-child {
    border-top-right-radius: 12px; /* Sudut membulat di kanan atas pada kolom terakhir */
}
.table-biaya tfoot th {
    border-bottom-left-radius: 12px; /* Sudut membulat di kiri atas pada kolom pertama */
}

.table-biaya tfoot th {
    border-bottom-right-radius: 12px; /* Sudut membulat di kanan atas pada kolom terakhir */
}

/* Desain baris genap */
.table-biaya tr:nth-child(even) {
    background-color: #f2f2f2;  /* Warna latar belakang baris genap */
}

/* Efek hover */
.table-biaya tr:hover {
    background-color: #e0e0e0;  /* Efek hover dengan perubahan latar belakang */
    transform: scale(1.02);  /* Sedikit pembesaran efek saat hover */
    transition: all 0.2s ease; /* Transisi halus */
}

/* Border bawah untuk setiap cell */
.table-biaya td, .table-biaya th {
    border-bottom: 2px solid #ddd; /* Menambahkan garis bawah yang lebih halus */
}

/* Responsif */
@media (max-width: 768px) {
    .table-biaya {
        width: 100%; /* Tabel full width pada perangkat mobile */
        margin-left: 0; /* Menghilangkan margin kiri */
    }
}

.biaya-administrasi {
   background: linear-gradient(
        145deg,
        #0d7535,
        #92c619
    ); /* Warna latar belakang (hijau seperti pada gambar) */
    color: white; /* Warna teks (putih) */
    padding: 5px 30px; /* Padding agar teks tidak terlalu mepet dengan latar belakang */
    border-radius: 30px; /* Border radius agar sudut latar belakang membulat */
    display: inline-block; /* Agar lebar latar belakang menyesuaikan dengan teks */
    margin-left: 40px;
    margin-top: 40px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.2); /* Bayangan hitam dengan sedikit transparansi */   
}
.biaya-administrasi:hover {
    
     transform: translateX(6px); /* Membuat elemen bergerak naik 3 pixel */
    transition: transform 0.3s ease; /* Efek transisi agar pergerakan lebih halus */
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.1); /* Menambahkan sedikit bayangan */
}


/* Responsif */
@media (max-width: 768px) {
    .biaya-administrasi-container {
        max-width: 95%; /* Lebar container di layar kecil */
        padding: 20px;
    }

    .table-modern thead th,
    .table-modern tbody td,
    .table-modern tfoot td {
        padding: 12px;
        font-size: 14px;
    }
}