html,
body {
    overflow-x: hidden; /* Mencegah scroll bar horizontal */
    box-sizing: border-box;
}

.z-index-1000{
    z-index: 1000;
}

.bg-upper-navbar {
    background-color: #fafdff;
}

#upperHeadNav {
    padding-left: 100px;
    padding-right: 50px;
}

.navbar-transition-effect {
    transition: top 0.8s ease-in-out;
    -webkit-transition: top 0.8s ease-in-out;
    -moz-transition: top 0.8s ease-in-out;
    -ms-transition: top 0.8s ease-in-out;
    -o-transition: top 0.8s ease-in-out;
}

.navbarPadding {
    padding: 0px 80px;
}
#headerNav {
    display: inline;
}

/*BEGIN Banner Opening */

#gambarOp {
    width: auto;
    height: 500px;
}

#textOp {
    width: 15cm;
    padding-top: 3cm;
}
/*END Banner Opening */

/* BEGIN Custom Container */

.container-py-1 {
    padding: 160px 0;
}

.container-pt-1 {
    padding-top: 160px;
}

/* END Custom Container */

/* BEGIN Custom Carousel */
.img-carousel {
    width: 100%;
    height: auto;
    filter:brightness(0.5);
    -webkit-filter:brightness(0.5);
}
.img-carousel-tk{
    width: 100%;
    height: auto;
}

.carousel-item-custom {
    height: 75vh;
}

.carousel-item-list {
    font-size: larger;
}

/* BEGIN Card Section */
#card-section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#cardContainer {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}
/* END Card Section */

/* BEGIN Button Feedback */
#feedback {
    position: fixed;
    top: 80%;
    right: -4%;
    rotate: -90deg;
    z-index: 10;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

#feedback:hover {
    right: -3%;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}
/* END Button Feedback */

/* #bottomNav {
    display: none;
} */

/* BEGIN Footer */
#madeByWho {
    margin: 0px auto;
    padding-bottom: 2rem;
}

.social-btn {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    color: white;
    font-size: 24px;
    transition: background-color 0.3s;
}
.social-btn:hover {
    /* background-color: #555; */
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.social-email {
    background-color: #1c78fa; /* Warna untuk email */
    transition: transform 0.3s, box-shadow 0.3s;

}
.social-whatsapp{
    background-color: #00cd30; /* Warna untuk Whatsapp */
    transition: transform 0.3s, box-shadow 0.3s;
}
.social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); /* Warna untuk Instagram */
    border: none;
    outline: none;
    transition: transform 0.3s, box-shadow 0.3s;
}
.social-youtube {
    background-color: #d00303; /* Warna untuk YouTube */
    transition: transform 0.3s, box-shadow 0.3s;

}
/* END Footer */

.bg-navbar {
    background-color: #d4e8ff;
}

.nav-url-pad {
    padding: 9px 20px;
}

.nav-url-undecorat {
    text-decoration: none;
    color: black;
}

.nav-url {
    color: #000;
    background-color: none;
}

.nav-url:hover {
    color: #000000;
    background-color: #8fc1ff;
}

.nav-url:active {
    color: #d2d2d2;
    background-color: #a5c9f5;
}

.nav-url-active {
    color: #000000;
    background-color: #a5c9f5;
}

.img-nav {
    width: auto;
    height: 60px;
    margin: auto 10px;
}

.navbar-logo {
    width: 100%;
    height: 50px;
}
#navbarLogo {
    display: none;
}

#bannerOp {
    background: linear-gradient(90deg, rgb(86, 219, 246), rgb(0, 156, 251));
}

/* BEGIN Tentang Kami */

.divTk {
    width: 68%;
}

#navTk {
    margin: 0px auto;
    top: 25%;
    width: 86vw;
}

#containerTargetSpy {
    margin: 0px 100px 50px 100px;
    padding-bottom: 300px;
}

.targetSpy {
    /* margin-top: 100px; */
    padding-top: 145px;
    padding-bottom: 100px;
}
.table-th-custom-width {
    width: 80%;
}

/* END Tentang Kami */

/* BEGIN Detail Berita */
#detailBerita {
    padding-top: 4cm;
    padding-bottom: 3cm;
}

.a-text-undecorat-white {
    text-decoration: underline;
    color: white;
    font-weight: 500;
}

.a-text-undecorat-white:hover {
    color: #e6e6e6;
}

.a-text-undecorat-white:active {
    color: #bababa;
}
/* END Detail Berita */

/* BEGIN Detail Modul */
#detailModul {
    padding-top: 4cm;
    padding-bottom: 3cm;
}

/* END Detail Modul */

/* BEGIN Form Kontak */

#gMapsKontak {
    width: 600px;
    height: 500px;
}
.container-padding {
    padding: 3cm 4cm 2cm 4cm;
}

.vertical-divider {
    border-left: 1px solid #ccc;
    height: 100%;
  }
/* END Form Kontak */

/* BEGIN Layanan */
#sectionLayanan {
    padding: 2cm 3cm 4cm 3cm;
}

.padCarLay {
    padding: 20px 200px;
}

.container-card {
    width: auto;
}

.container-card .card-deck {
    position: relative;
    cursor: pointer;
}

.container-card .card-deck .face {
    width: 300px;
    height: 200px;
    transition: 0.5s;
}

.container-card .card-deck .face.face1 {
    position: relative;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transform: translateY(100px);
}

.container-card .card-deck.active .face.face1 {
    background: #00e5ff;
    transform: translateY(0);
}

.container-card .card-deck .face.face1 .content {
    transition: 0.5s;
}

.container-card .card-deck.active .face.face1 .content h3 {
    color: #fff;
}

.container-card .card-deck .face.face1 .content img {
    max-width: 100px;
}

.container-card .card-deck .face.face1 .content h3 {
    margin: 10px 0 0;
    padding: 0;
    color: #00e5ff;
    text-align: center;
    font-size: 1.5em;
}

.container-card .card-deck .face.face2 {
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    transform: translateY(-100px);
    max-height: 0;
    overflow: hidden;
}

.container-card .card-deck.active .face.face2 {
    transform: translateY(0);
    max-height: 200px; /* Sesuaikan dengan tinggi konten */
}

.container-card .card-deck .face.face2 .content p {
    margin: 0;
    padding: 0;
}

.container-card .card-deck .face.face2 .content a {
    margin: 15px 0 0;
    display: inline-block;
    text-decoration: none;
    font-weight: 900;
    color: #333;
    padding: 5px;
    border: 1px solid #333;
}

.container-card .card-deck .face.face2 .content a:hover {
    background: #333;
    color: #fff;
}
/* END Layanan */

/* BEGIN Berita */
#inputSearchBerita {
    padding: 0px 70px;
}

#inputSearchBerita button {
    padding: 0px 40px;
}
/* END Berita */

/* BEGIN Modul */
#inputSearchModul {
    padding: 0px 70px;
}

#inputSearchModul button {
    padding: 0px 40px;
}
/* END Modul */

/* BEGIN Layout Konten */
.sectionKonten {
    padding-top: 3cm;
    padding-bottom: 5cm;
}
/* END Layout Konten */

@media screen and (max-width: 1023px) {
    #upperHeadNav {
        padding-left: 10px;
        padding-right: 10px;
    }

    #panduanOrtu {
        display: none;
    }
    .navbarPadding {
        padding: 0px 20px;
    }
    #navbarLogo {
        display: inline;
    }
    /* BEGIN Custom Container */

    .container-py-1 {
        padding: 50px 0;
    }

    .container-pt-1 {
        padding-top: 100px;
    }

    /* END Custom Container */

    /* BEGIN Custom Carousel */
    /* .img-carousel {
        width: 100vw;
        height: 100vh;
    } */

    .carousel-item-custom {
        height: 100vh;
    }
    .carousel-item-list {
        font-size: small;
    }
    /* END Custom Carousel */
    /*BEGIN Banner Opening */

    #gambarOp {
        width: auto;
        height: 400px;
    }

    #textOp {
        width: 8cm;
        padding-top: 1cm;
    }
    /*END Banner Opening */

    /* BEGIN Card Section */
    #card-section {
        height: 100%;
        justify-content: baseline;
    }
    /* END Card Section */

    /* BEGIN Button Feedback */
    #feedback {
        top: 70%;
        right: -13%;
    }

    #feedback:hover {
        right: -10%;
    }
    /* END Button Feedback */

    /* #bottomNav {
        position: fixed;
        top: 90%;
        z-index: 10;
        width: 100vw;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 30px;
        padding-left: 2px;
        padding-right: 2px;
        padding-bottom: 65px;

        height: 70px;
    } */

    /* #bottomNav a {
        padding-top: 2px;
        padding-bottom: 2px;
    } */

    /* BEGIN Footer */
    #madeByWho {
        padding-bottom: 8rem;
    }
    /* END Footer */

    /* BEGIN Tentang Kami */
    .divTk {
        width: auto;
    }
    #navTk {
        /* margin: 0px 30px; */
        top: 26%;
        width: 85vw;
    }

    #containerTargetSpy {
        margin: 20px 30px 20px 30px;
    }

    .targetSpy {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    .table-th-custom-width {
        width: 60%;
    }

    /* END Tentang Kami */

    /* BEGIN Detail Berita */
    #detailBerita {
        padding-top: 2cm;
    }
    /* END Detail Berita */

    /* BEGIN Detail Modul */
    #detailModul {
        padding-top: 2cm;
    }
    /* END Detail Modul */

    /* BEGIN Form Kontak */
    .container-padding {
        padding: 2cm 1cm 3cm 1cm;
    }
    #gMapsKontak {
        width: 350px;
        height: 500px;
    }
    

      .vertical-divider {
        border-top: 1px solid #ccc;
        width: 100%;
        margin-top: 1rem;
        margin-bottom: 1rem;
      }
    /* END Form Kontak */

    /* BEGIN Layanan */
    #sectionLayanan {
        padding: 1.5cm 1cm 3cm 1cm;
    }
    .padCarLay {
        padding: 10px 50px;
    }
    /* END Layanan */

    /* BEGIN Berita */
    #inputSearchBerita {
        padding: 0px 35px;
    }

    #inputSearchBerita button {
        padding: 0px 20px;
    }
    /* END Berita */

    /* BEGIN Modul */
    #inputSearchModul {
        padding: 0px 35px;
    }

    #inputSearchModul button {
        padding: 0px 20px;
    }
    /* END Modul */

    /* BEGIN Layout Konten */
    .sectionKonten {
        padding-top: 2cm;
        padding-bottom: 2cm;
    }
    /* END Layout Konten */
}