#top-header{
    background-color: rgb(248, 241, 229);
    padding: 5px;
    display: flex;
    text-align: end;
}

#top-header .header-time{
    background-color: rgb(66, 110, 134);
    color: rgb(248, 241, 229);
    text-shadow: 0 0 1px rgb(0, 0, 0);
    padding: 3px;
    border-radius: 3px;
}

.btn-nav-drp.coll{
    padding: 3px 0 5px 0 !important;
    margin: 15px 10px 0 0;
    font-size: large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(47, 49, 49);
    transition: 0.3s;
}

.btn-nav-drp{
    padding: 3px 0 5px 0 !important;
    margin: 15px 10px 0 0;
    font-size: large;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(249, 186, 50);
    transition: 0.3s;
}

.btn-nav-drp:hover{
    color: rgb(249, 186, 50);
    transition: 0.3s;
}

.dftn-sch .dftn-logo{
    width: 50px;
    margin: 0 10px 0 0;
}

.dftn-logo-title{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0 10px 0;
}

.dftn-logo-title h6{
    font-size: larger;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0 0 0 0;
}

.dftn-logo-title span{
    font-weight: bold ;
    color: rgb(249, 186, 50);
}

.dftn-dsch p{
    text-align: justify;
    font-size: medium;
}

.header{
    background-color: rgb(66, 110, 134);
    position: fixed;
    width: 100%;
    max-width: 100%;
    top: 0;
    z-index: 1000;
    padding: 0px;
}

.header .container{
    overflow-x: hidden;
}

.nil{
    width: 30px;
    color: rgb(249, 186, 50);
    font-weight: bold;
    padding: 0 0 0 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
}

.nav-item-list{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 30px;
    color: rgb(249, 186, 50);
    font-weight: bold;
}

.card-hover-profil {
    display: none;
    position: absolute;
    top: 105px;
    right: 10vh;
    width: 1130px;
    margin: 0px 10px 0 0;
    padding: 20px;
    background-color: rgb(248, 241, 229);
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.card-hover-info {
    display: none;
    position: absolute;
    top: 105px;
    right: 25vh;
    width: 200px;
    margin: 0px 10px 0 0;
    padding: 20px;
    background-color: rgb(248, 241, 229);
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.card-hover-gallery {
    display: none;
    position: absolute;
    top: 105px;
    right: 20vh;
    width: 100px;
    margin: 0px 10px 0 0;
    padding: 20px;
    background-color: rgb(248, 241, 229);
    border-radius: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.card-dropdown .info-sch{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.card-dropdown .info-sch a{
    margin: 10px 0 0 10px !important;
}

.card-dropdown h5{
    margin: 0 0 0 0;
    font-weight: bold;
    font-size: larger;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(66, 110, 134);
}

.card-dropdown .abt-sch{
    border-right: 1px solid rgb(249, 186, 50);
    padding: 0px 35px 0 0;
    margin: 0 15px 0 0;
}

.card-dropdown .pgrm-sch{
    border-right: 1px solid rgb(249, 186, 50);
    padding: 0px 50px 10px 10px;
    margin: 0 15px 0 0;
}

.card-dropdown .dftn-sch{
    display: flex;
    width: 270px;
    padding: 0px 0px 0px 10px;
    margin: 0 0px 0 0;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
}

.hover-btn:hover + .card,
.card:hover {
    display: block;
    transition: 0.3s;
}

.card-dropdown{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.abt-sch-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

.pgrm-sch-item{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

.header-responsive-title{
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px 0 0 0;
}

.header-responsive-title h5{
    color: rgb(249, 186, 50);
    font-weight: bold;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0 0 0 0;
}

.nav-items-responsive{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 3px 0 0 0;
}

.header-responsive {
    position: fixed;
    top: 0;
    right: -300px; /* Awalnya tersembunyi di sebelah kanan */
    width: 280px; /* Lebar header-responsive */
    height: 100%;
    background-color: #333;
    padding: 5px 0 0 15px;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    transition: right 0.3s ease; /* Animasi untuk transisi */
}

.header-responsive.show {
    right: 0; /* Menampilkan header */
}

button#toggleButton {
    position: fixed;
    background-color: rgba(0, 0, 0, 0);
    color: rgb(249, 186, 50);
    z-index: 1001; /* Di depan elemen lainnya */
}

.nav-items-responsive .btn-nav-drop.collapsed{
    font-size: large;
    color: rgb(248, 241, 229);
    font-weight: bold;
    transition: 0.5s;
    border-bottom: none;
    text-decoration: none;
}

.nav-items-responsive .btn-nav-drop{
    color: rgb(249, 186, 50);
    font-size: large;
    font-weight: bold;
    text-decoration: none;
    transition: 0.5s;
    border-bottom: 3px solid rgb(249, 186, 50);
}

.nav-items-responsive span{
    margin: 10px 0 0 0;
}

.profil-item-responsive{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 0 10px;
}

.profil-item-responsive h6{
    margin: 3px 0 0 0;
    color: rgb(248, 241, 229);
    font-size: medium;
}

.profil-item-responsive span{
    margin: 3px 0 0 10px;
}

.profil-item-responsive .btn-nav-item.not-act{
    text-decoration: none;
    font-size: small;
    color: rgb(66, 110, 134);
}

.profil-item-responsive .btn-nav-item{
    text-decoration: none;
    font-size: small;
    color: rgb(249, 186, 50);
}

@media (min-width: 775px) {
    #header .nav-item-list{
        display: none;
    }

    .header-responsive{
        display: none;
    }

    .toggle-header #main,
    .toggle-header #footer {
      margin-left: 0;
    }

    .toggle-header .header {
      left: -300px;
    }
}

@media (max-width: 774px) {
    #header .nav-items{
        display: none;
    }

    .toggle-header .header {
        left: 0;
      }
}

.main{
    margin-top: 0px;
}

* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#header{
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

#header .logoImage{
    width: 55px;
    margin-right: 15px;
    -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
}

#header h2{
    margin-bottom: 0px;
}

#header .nav-items{
    display: flex;
    align-items: center;
}

#header .nav-items a{
    text-decoration: none;
    padding: 2px;
    margin-left: 30px;
}

#header .btn-nav-link.collapsed{
    font-size: larger;
    color: rgb(47, 49, 49);
    font-weight: bold;
    transition: 0.5s;
    border-bottom: none;
}

#header .btn-nav-link{
    color: rgb(249, 186, 50);
    font-size: larger;
    font-weight: bold;
    transition: 0.5s;
    border-bottom: 5px solid rgb(249, 186, 50);
}

#header .btn-nav-link:hover{
    border-bottom: 5px solid rgb(47, 49, 49);
    color: rgb(249, 186, 50);
    transition: 0.5s;

}

.header-email-timer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.head-email svg{
    width: 20px;
}

.header-email{
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: rgb(66, 110, 134);
    flex-wrap: wrap;
    align-items: center;
}

.header-email h6{
    margin-left: 5px;
    margin-bottom: 0px;
    font-weight: bold;
}

.header-email-timer a:hover{
    color: rgb(249, 186, 50);
}

.header-time{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#clock{
    margin-left: 5px;
}

.bg-footer{
    background-color: rgb(47, 49, 49);
}

#footer {
    padding-top: 20px;
    padding-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    color: white;
    justify-content: center;
}

#footer h5{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: xx-large;
    font-weight: bold;
    padding: 10px 0 5px 0;
    color: rgb(249, 186, 50);
    border-bottom: 3px solid rgb(249, 186, 50);
    margin: 0px 0 30px 0;
}

.footer-item{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.footer-header{
    margin-right: 90px;
}

.sch-address{
    display: flex;
    margin: 0 90px 50px 0;
    flex-direction: column;
    width: 350px;
    flex-wrap: wrap;
    justify-content: center;
}

.address-header{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0 20px 0;
}


.footer-address{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    font-weight: bold;
    color: rgb(66, 110, 134);
}

.footer-address a:hover{
    color: rgb(249, 186, 50) !important;
}


.sch-address img{
    width: 50px;
    margin: 0 10px 0 0;
}

.sch-address h5{
    border-bottom: none !important;
    margin: 0 0 0 0 !important;
}

.footer-loc iframe{
    width: 400px;
    height: 200px;
}

#main .news-berita{
    padding-top: 122px;
}

#news-header{
    background-color: rgb(249, 186, 50);
}

@media (max-width: 774px) {
    #header .nav-items{
        display: none;
    }

    .header-email{
        display: none;
    }

    .header-email-timer{
        justify-content: flex-end;
    }

    .sch-address{
        margin-right: 0px;
    }

    .footer-loc iframe{
        width: 330px;
        height: 200px;
    }

    #footer{
        display: flex;
        justify-content: flex-start;
        padding-bottom: 20px;
    }

    #footer h5{
        padding: 0px;
    }

    #footer .footer-header{
        margin-bottom: 40px;
    }
}

#footer a{
    color: white;
    display: flex;
    text-decoration: none;
    padding-top: 10px;
    transition: 0.3s;
}

#footer a:hover{
    transform: scale(1.2);
    transition: 0.3s;
}


.address-header a{
    padding: 0px !important;
    color: rgb(249, 186, 50) !important;
    transition: 0.3s;
}

.address-header a:hover{
    transform: scale(1.05) !important;
    transition: 0.3s;
}

.footer-down{
    background-color: rgb(70, 70, 70);
    color: white;
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    padding-bottom: 20px;
}

@media (max-width: 774px) {
    .address-header a{
        padding: 0px !important;
        color: rgb(249, 186, 50) !important;
        transition: 0.3s;
        font-size:smaller !important;
    }
    
    .footer-down{
        font-size:smaller !important;
    }
}