/*Jika Perlu*/
.awall {
    margin-top: 120px;
    margin-bottom: 5px;
    
}

.JudulBesar {
    display:flex;
    text-align: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: normal;
    word-spacing: normal;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Styling Per kata - Start */

.highlight {
    font-weight: bold;
}
.italic {
    font-style: italic;
}

.Judul {
    display:flex;
    text-align: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: normal;
    word-spacing: normal;
    padding-top: 5px;
    padding-bottom: 5px;
}

.biru {
    color:#0763fa;
    display: inline-block;
}

.spaceL {
    margin-left: 10px;
}

.spaceLm {
    margin-left: 1px;
}

/* Styling Per kata - End */


/* penambahan style untuk Intro */
.intro-text {
    padding: 30px;
    text-align: justify;
}

/* style untuk Profil */
.Iprofil {
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
}

/* style untuk Gambar (lumayan besar) */
.GambarHome {
   height: 400px;
   max-width: auto;
   border-radius: 10%;
   padding: 20px;
}

/* style untuk kotak text (menggabung Judul dan text) */
.KotakText {
    max-width: 800px;
    margin: auto;
    Padding: 20px;
}

h2 {
    font-size: 24px;
    font-weight: bold;
}

/* styling untuk text deskripsi standar untuk semua halaman */
.TextHome {
    font-size: 16px;
    text-align: justify;
    padding-top: 10px;
}

/* style untuk Program-progam index.html */
.Programs-p {
    display: grid;
    text-align:center;
    justify-content: center;
    font-size: 18px;
    color: grey;
    padding: 20px;
}

.Programs-list-index {    
    margin-bottom: 70px;
}

.Programs-ul{
    display: flex;
}

.Programs-li {
    background-color:#213edf;
    color: white;
    padding:25px;
    height: 200px;
    width: 220px;
    margin: 20px 20px 0px 20px;
    list-style-type: none;
    border-radius: 20px;
    display: grid;
    align-items: center;
}

.Programs-icon {
    height: 50px;
    border-radius: 10px;
}

.Jurusan {
    display: inline-block;
    margin:20px 0px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

.P-Jurursan {
    font-size: 9px;
    text-decoration: underline;
    color: white;
    background-color: #213edf;
    cursor:pointer;
}

.P-Jurursan:hover {
    font-weight: bold;
    color:yellow;
}

.Programs-li:hover {
    height: 210px;
    width: 233px;
    background-color:#0763fa;
    color:yellow;
    font-weight: bold;
    .Programs-icon {
        height:60px;
    }
    .P-Jurursan{
        background-color:#0763fa;
        color:yellow;
    }
}

/* style untuk Footer */
.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px;
    background: rgb(5, 70, 182);
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    box-shadow: 10px 4px 8px rgba(0, 0, 0, 0.1);
    color:aliceblue;
}

.ft1 {
    display: grid;
    max-width: 50%;
}

.fp1 {
    font-size: 20px;
    font-weight: bold;
}

.fp2 {
    font-size: 13px;
    font-style: italic;
}

.ft2 {
    display: flex;
}

.Fotban {
    display:grid;
    align-items: center;
    padding: 10px;
    font-size: 11px;
}

.Fgambar {
    max-width: 60px;
    border-radius: 5px;
    padding:5px;
}

  
  /* halaman Tentang Kami */
  .AboutUs {
    display: grid;
    padding: 20px 10%;
  }

  .PointJ {
    font-weight: bold;
    padding-top: 12 px;
  }

  .tableNB {
    padding : 5px 10px;
  }

  .TestiBox {
    Padding:20px;
    display: flex;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 4%;
    background-color:#e1eaf9;
    margin: 5px;
  }

  .Quote {
    list-style-type: none;
    font-weight: bold;
    font-style: italic;
    padding-top:10px;
    margin-right: 3%;
    width: 20%;
  }

  .Testimoni {
    list-style-type: none;
    width: 80%;
  }

  .TextName {
    padding-top: 10px;
    font-weight: bold;
    font-style: italic;
  }
  .TextJob {
    font-style: italic;
  }

  /* Halaman Khusus Program */

  .Programs-List {
    display: none;
  }

  .Programs-List.active {
    display: block;
    margin-bottom: 100px;
  }
  
  .Programs-liD {
    display: flex;
    background-color:#213edf;
    color: white;
    padding:25px;
    height: auto;;
    margin: 20px 20px 0px 20px;
    list-style-type: none;
    border-radius: 20px;
}

.Programs-icon2 {
    height: 100px;
    border-radius: 10px;
    margin-right:5%;
}

.Jurusan1 {
    display: grid;
    align-items: center;
    margin: 5px 0px;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
}

/* Isi dari Program secara detail */
.Detail {
    display: none;
}

.Detail.active {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 30px;
    gap: 50px;
    border-radius: 25px;
}

.TUraian {
    width: 100%;
    border-collapse: collapse;
}

.TUraian td {
    padding: 8px;
    vertical-align: top; /* Membuat teks tetap rata atas */
  }
  
.TUraian td:first-child {
    white-space: nowrap; /* Mencegah kategori terpotong menjadi dua baris */
    width: 30%;
  }

.DeProg {
    width: 30%;
    height: 30%;
    border-radius: 20px;
    margin-top: 5%;
    
}

.isip {
    width: 70%;
}

/* Nav Program Opsi 2 */

.Programs-ulN {
    display: flex;
    align-items: center;
    justify-content: center;
    width:auto;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;
    padding-top: 5px;
    gap: 10px;
}

.Programs-liN {
    background-color:#213edf;
    color: white;
    padding:20px;
    height: 80px;
    width: 170px;
    list-style-type: none;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.Programs-liN:hover {
    background-color:#0763fa;
    padding:20px;
    height: 80px;
    width: 170px;
    list-style-type: none;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.Programs-liN.active {
    background-color:#0763fa;
    color: yellow;
    padding:20px;
    height: 80px;
    width: 170px;
    list-style-type: none;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.Jurusan2 {
    display: grid;
    align-items: center;
    height: 80px;
    font-size: 10px;
    font-weight: bold;
    text-decoration: underline;
}

.CshowAll {
    width: 100%;;
    height: auto;
    display:flex;
    align-items: center;
    justify-content: center;
}
.showAll {
    background-color: #213edf;
    color: white;
    height: 50px;
    width: 890px;
    border-radius: 20px;
    display:grid;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
}

.showAll:hover {
    background-color:#0763fa;
}

/*Page Khusus*/
.unik {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 0px;
}

.coming-soon {
    font-size: 20vh;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

.kembali {
    max-width: 20%;
    color:#e1eaf9;
    background-color: #213edf;
    border-radius: 20px;
    padding:10px;
    margin-top: 20px;
}

.kembali:hover {
    background-color: #0763fa;
    color: yellow;
}

/* Responsif */
@media (max-width: 910px) {
    .coming-soon {
        font-size: 16vh;
    }
}
@media (max-width: 770px) {
    /*Responsive Judul*/
    .Judul {
        display: flex;
        flex-direction: column;
    }

    /*Responsive profil*/
    .Iprofil {
        flex-direction: column;
    }

    /*Responsive Gambar Utama*/
    .GambarHome {
        max-width: 100%;
        height: auto;
        padding: none;
      }
    
      /*Responsive Program*/
    .Programs-ul {
      flex-direction: column;
      align-items: center;
    }

    .Programs-li {
        justify-items: center;
    }

    .Jurusan {        
        text-align: center;
    }

    .P-Jurursan {
        font-size: 12px;
    }

    /* Responsive footer*/
    .footer {
        padding: 0px 20px;
    }
    .Fotban {
        padding: 5px;
        font-size: 10px;
    }

    /*Responsive Halaman Tentang*/
    
    /* Judul Utama */
    .awall {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .ubah {
        color:#0763fa;
    }

    /*Kolom Quotes*/
    .table {
        display:flex;
        flex-direction: column;
    }

    .TestiBox {
        flex-direction: column;
        align-items: center;

    }

    .Quote {
        width: 100%;
        text-align: center;
    }

    /*Responsive Halaman Programs*/
    .JudulBesar {
        flex-direction: column;
    }
    
    .Programs-liD {
        margin: none;
        flex-direction: column;
        align-items: center;
    }

    .Programs-icon2 {
        height: 60%;
        width: 60%;
        margin-bottom: 10px;
    }

    .Detail.active {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .DeProg {
        height: 95%;
        width:95%;
    }


    .TUraian td {
        padding:1px;
    }

    .Programs-ulN {
        display:grid;
    }

    .showAll {
        width: 170px;
        font-size: 10px;
    }

    .unik {
        padding: 200px 50px;
    }
    
    .coming-soon {
        font-size: 300%;
    }
  }