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

html,body{
    height: 100%;
    width: 100%;
    font-family: 'Poppins',sans-serif;
    color: rgb(56, 40, 0);
}
.navbar{
    padding: .8rem;
}
.navbar-nav li{
    padding-right: 20px;
}
.nav-link{
    font-size: 1.1rem !important;
    padding-top: .7rem;
}

/*header*/
.bg-blue{
    /* background-color: #00234b; --warna bg lama*/
    /* background-color: #0f4ed8; */
    background-color: #1877f2; /*--warna bg facebook */
    /*background-color: #005cab; bg bca*/
}

/* Existing dropdown styles - submenu */
.dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #1877f2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown:hover .dropdown-content {
    display: block;
  }
  
  /* New submenu styles */
  .dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    background-color: #1877f2;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-submenu:hover .dropdown-submenu-content {
    display: block;
  }
  
  /* Add a caret to indicate submenu */
  .dropdown-submenu > a:after {
    content: " ▸";
  }
  /* Existing dropdown styles - endof submenu */

@font-face {
    font-family: primanadi-font;
    src: url('/fonts/Prima-Nadi-v.1.ttf');
}
.font-primanadi{
    font-family: primanadi-font;
}

.logo-img img{
    width: 12rem;
    height: 3.1rem;
}

/* end: header */

/*netrance effect - when scrolled to the content so that they appear smoothly */
.entrance-effect {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.animate {
    opacity: 1;
}
/*---------------------------------------------------*/


/* smooth scroll up */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
    z-index: 10;
    /* background-color: #b08912; */
    background-color: #ebc302; /* emas */
    /*color: #005cab; bg bca*/
    color: #1877f2; /*--warna bg facebook */
}
.back-to-top:hover{
    /*background-color: #005cab; bg bca*/
    background-color: #1877f2; /*--warna bg facebook */
    color: #ebc302; /* emas */
}
/*end: smooth scroll up */

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    /* background-color: #f1f1f1;  */
    /*background-color: #005cab; bg bca*/
    background-color: #1877f2; /*--warna bg facebook */
    min-width: 190px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    /* color: black; */
    color: #ebc302; /* emas */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
  
/* Change color of dropdown links on hover */
/* .dropdown-content a:hover {background-color: #ddd;} */
.dropdown-content a:hover{
    background-color: #ebc302;  /*emas*/ 
    /*color: #005cab; bg bca*/
    color: #1877f2; /*--warna bg facebook */
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
/* .dropdown:hover .dropbtn {background-color: transparent;} */
.dropdown:hover .dropbtn{
    background-color: #ebc302;
}
.carousel-inner img{
    width: 100%;
    height: 100%;
}
.carousel-caption{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-caption h1{
    font-size: 350%;
    text-transform: uppercase;
    text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3{
    font-size: 150%;
    font-weight: 500;
    text-shadow: 1px 1px 10px #000;
    padding-bottom: 1rem;
}
.btn-primary{
    background-color: #1877f2;
    border: 1px solid #1877f2;
}
.btn-primary:hover{
    background-color: #ebc302;
    border: 1px solid #ebc302;
}
.jumbotron{
    padding: 1rem;
    border-radius: 0;
}
.jumbotron-caption p{
    color: rgb(56, 40, 0);
}
.padding{
     padding-bottom: 2rem;
}

/* seputar_padding Section */
.seputar_padding{
    padding-left: 6rem;
    padding-right: 6rem;
}

.seputar_padding img{
     height: 101px;
    width: 392px; 
    /*height: 16rem;
    width: 16rem;*/
    /* padding-top: 4.5rem; */
}

/* .seputar_padding .tengah{
    align: center;
} */

.front-img img{
    height: 35rem;
    width: 100%;
}

/*-- Welcome Section --*/
.welcome{
    padding-right: 6rem;
    padding-left: 6rem;
    padding-top: 3rem;
    margin: 0 auto;
}
.welcome hr{
    border-top: 2px solid rgb(56, 40, 0);
    width: 95%;
    margin-top: .3rem;
    margin-bottom: 1rem;
}
.table-content td{
    margin-left: 8%;
    background-color: #aaa700;
}
.welcome .display-4{
    /* color: #013775; */
    color: #1877f2;
}

/*--- table suku bunga ----*/
.table_ket{
    font-size: 11px;
    padding-left: 1rem;
}
.text_ket_table{
    padding-top: .1%;
}
.selfstyle{
    /* background-color: #013775; */
    background-color: #1877f2;
    color: #ffffff;
}
.tablebody tr{
    text-align:left;
}

/*--- end: table suku bunga ----*/

/* <!-- Fixed Background --> */
.wrapper {
    height: 100%;
    font-family: 'Quicksand', sans-serif;
    line-height: 1.5;
    word-spacing: 4px;
    letter-spacing: 1px;
}
.fixed-bg {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 40rem;
    width: 100%;
    color: white;
    text-align: center;
    display: table;
}
.bg-1 {
    background-image: url('/img/bg-index-blur.png');
}
.fixed-bg h1 {
    padding-top: 1.5rem;
    display: table-cell;
    vertical-align: top;
}
.fixed-bg hr{
    border-top: 2px solid white;
    width: 65%;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}
.fixed-bg img{
    margin-top: .5rem;
    margin-bottom: 1rem;
    width: 40rem;
    height: 30rem;
}
.fixed-bg a{
    display: table-cell;
    vertical-align: top;
}
.video-fluid video{
    margin-top: .5rem;
    margin-bottom: 1rem;
    width: 40rem;
    height: 30rem;
}
/* <!-- end : Fixed Background --> */

/* <!-- Info Terupdate --> */
.info-padding{
    padding-left: 8rem;
    padding-right: 8rem;
}
.info-padding img{
    /* width: 40rem;
    height: 15rem; */
    width: 25rem;
    height: 19rem;
}
.bg-prima{
    background-color: #ebc302;
    color: #1877f2;
}
.vid-size{
    width: 30rem;
    height: 25rem;
}
/* <!-- end: Info Terupdate --> */

/* <!-- Cards --> */
.hr-sect-info {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 0px 0px;
    padding-top:1rem;
    padding-bottom: 1rem;
}
.hr-sect-info:before,
.hr-sect-info:after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 0px;
}
.padding-card{
    padding-left: 8rem;
    padding-right: 8rem; 
    padding-bottom: 1.5rem;
}
.padding-card .card{
    padding: .2rem;
}
.no-gutters {
    text-align: left;
 }
 .card-body h4{
    color:#1877f2;
    font-size: 17px;
}
.card-body font{
    color:#ebc302;
    font-size: 17px;
}
.card-img img{
    /* width: 20rem;
    height: 19rem; */
    width: 100%;
    height: 19rem;
}
/* <!-- end: Cards --> */

/*-- Bootstrap Padding Fix --*/
[class*="col-"]{
    padding: 1rem;
}

/*-- Firefox Bug Fix --*/
.carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

/* -- card bertia --*/
.card-sl {
    max-width: 20rem;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-image img {
    /* max-height: 100%;
    max-width: 100%;
    border-radius: 8px 8px 0px 0; */
    height: 8rem; /* Set the height to 8rem */
    width: 100%; /* Take the full width of the container */
    object-fit: cover; /* Maintain aspect ratio while covering the container */
    border-radius: 8px 8px 0 0; /* Keep the border-radius as you wanted */
}

.card-action {
    position: relative;
    float: right;
    margin-top: -25px;
    margin-right: 20px;
    z-index: 2;
    color: #ebc302;
    background: #fff;
    border-radius: 100%;
    padding: 15px;
    font-size: 15px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.19);
}

.card-action:hover {
    color: #fff;
    background: #ebc302;
    animation: pulse 1.5s infinite; /* Use the unprefixed version */
}


.card-heading {
    font-size: 18px;
    font-weight: bold;
    background: #fff;
    padding: 10px 15px;
}

.card-text {
    padding: 10px 15px;
    background: #fff;
    font-size: 14px;
    color: #636262;
}

.card-button {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    background-color: #1877f2;
    color: #fff;
    border-radius: 0 0 8px 8px;
}

.card-button:hover {
    text-decoration: none;
    background-color: #ebc302;
    color: #fff;

}

.small-icon-card-berita {
    width: 20px; /* Adjust as needed */
    height: 20px; /* Adjust as needed */
}

@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
    }
}


/*--- end ----*/

/* -- Media Queries --*/ 
@media (max-width: 992px){
    .social a{
        font-size: 4em;
        padding: 2rem;
    }
}
@media (max-width: 768px){
    /* seputar_padding Section */
    .seputar_padding{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .seputar_padding .justify-content-center img{
        height: 8rem;
        width: 8rem;
    }
    /* .seputar_padding .tengah{
        align: center;
    } */
    /* end - seputar_padding Section */
    .carousel-caption{
        top: 45%;
    }
    .carousel-caption h1{
        font-size: 250%;
    }
    .carousel-caption h3, .jumbotron-caption p{
        font-size: 90%;
        font-weight: 400;
        padding-bottom: .2rem;
    }
    .carousel-caption .btn, .jumbotron-caption .btn{
        font-size: 95%;
        padding: 8px 14px;
    }
    .social a{
        font-size: 2.5em;
        padding: 1.5rem;
    }
    /*-- footer --*/
    .awasifoot img{
        width: 7rem;
    }
}
@media (max-width: 576px){ 
    /* seputar_padding Section */
    .seputar_padding{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .seputar_padding .justify-content-center img{
        /* height: 5rem;
        width: 5rem; */
        height: 62px;
        width: 240px;
    }
    /* .seputar_padding .tengah{
        align: center;
    } */
    /* end - seputar_padding Section */
    /* <!-- Fixed Background --> */
    .fixed-bg, .front-img img {
        height: 70%;
        width: 100%;
    }
    .fixed-bg img{
        margin-top: .5rem;
        margin-bottom: 1rem;
        width: 90%;
        height: 50%;
    }
    /* <!-- end : Fixed Background --> */
    /* <!-- Info Terupdate --> */
    .info-padding{
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .info-padding .row img{
        width: 25rem;
        height: 15rem;
    }
    /* <!-- end: Info Terupdate --> */

    /* <!-- Cards --> */
    .padding-card{
        padding-left: 2rem;
        padding-right: 2rem; 
    }
    .padding-card .card{
        padding: .2rem;
    }
    .padding-card2{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* <!-- Cards --> */
    /* Welcome Section */
    .welcome{
        padding-right: .5rem;
        padding-left: .5rem;
        padding-top: 1.5rem;
        margin: 0 auto;
    }
    /* end - Welcome Section */
    .carousel-caption{
        top: 40%;
    }
    .carousel-caption h1{
        font-size: 120%;
    }
    .carousel-caption h3, .jumbotron-caption p{
        font-size: 55%;
    }
    .carousel-caption .btn, .jumbotron-caption .btn{
        font-size: 75%;
        padding: 4px 8px;
    }
    .carousel-indicators{
        display: none;
    }
    .display-4{
        font-size: 160%;
    }
    .social a{
        font-size: 2em;
        padding: .7rem;
    }
    .container-fluid img{
        width: 14rem;
        height: 2.5rem
    }
    /*-- footer --*/
    .awasifoot img{
        width: 5rem;
    }
}

/*-- footer -- */
footer{
    /* background-color: #00234b; --warna bg lama */
    /* background-color: #0f4ed8; */
    background-color: #1877f2; /*--warna bg facebook */
    /*background-color: #005cab; bg bca*/
    color: #d5d5d5;
    padding-top: 2rem;
}
.ffont, .ffont a{
    color: #ebc302;
}
.paddingtext{
    margin-left: 2.5%;
    margin-right: 2.5%;
}
.title_text{
    font-weight: bold;
    font-size: larger;
}
hr.light{
    /* border-top: 1px solid #d5d5d5; */
    border-top: 1px solid #ebc302; /* emas */
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}
footer a{
    color: #d5d5d5;
}
.fa-code{
    color: #e54d26;
}
.fa-bold{
    color: #563d7c;
}
.fa-css3{
    color: #2163af;
}
.fa-code, .fa-bold, .fa-css3{
    font-size: 4em;
    margin: 1rem;
}
.fun{
    width: 100%;
    margin-bottom: 2rem;
}
.gif{
    max-width: 100%;
}
.social a{
    font-size: 4.5rem;
    padding: 3rem;
}
.fa-facebook:hover{
    color: #3b5998;
}
.fa-twitter:hover{
    color: #00aced;
}
.fa-instagram:hover{
    color: #517fa4;
}
.fa-youtube:hover{
    color: #bb0000;
}
.fa-facebook,
.fa-twitter,
.fa-instagram,
.fa-youtube{
    /* color: #d5d5d5; */
    color: #ebc302; /* emas */
}
a.facebook_s:hover{
    text-decoration: none;
    color: #3b5998;
}
a.twitter_s:hover{
    text-decoration: none;
    color: #00aced;
}
a.instagram_s:hover{
    text-decoration: none;
    color: #517fa4;
}
a.youtube_s:hover{
    text-decoration: none;
    color: #bb0000;
}
p.footlinkspace{
    margin-bottom: .4rem;
}
hr.light-100{
    /* border-top: 1px solid #d5d5d5; */
    border-top: 1px solid #ebc302; /* emas */
    width: 100%;
    margin-top: .8rem;
    margin-bottom: 1rem;
}
h5.cpright{
    font-size: 11px;
    font-weight: bold;
    font-style: italic;
    margin-bottom: .1rem;
    padding-bottom: .1rem;
}
p.footojk{
    margin-top: 2rem;
}
img.img-awasi{
    max-width: 6rem;
    margin-top: 2.5%;
    margin-bottom: 3.5%;
    margin-right: 5%;
}

/*----- start - news big image container ------------*/
.image-containerx {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Adjust this as needed */
}
.fixed-size-imgx {
    width: 27rem;
    height: 27rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fixed-size-imgx:hover {
    transform: scale(1.1); /* Slightly enlarge the image on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}
/*----- end - news big image container ------------*/