body{
        margin-top: 120px; /* Sesuaikan dengan tinggi header Anda */
        background-image    : url("/img/contoh2.png");
        background-size     : cover;
        background-attachment   : fixed;
    }
    
    .h-100 img {
        width           : 100%;
        height          : 350px;
    }

    .dropdown-menu li:hover .sub-menu {
        visibility      : visible;
    }      
    .dropdown:hover .dropdown-menu {
        display         : block;
    }
    
    .dropdown-toggle::after{ 
        display         : none; 
    }

    .welcome{
        animation : slideAnimation 1.5s;
    }

/* Feature */
    #feature{
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
        transition      : transform 0.5s;
        /* overflow        : hidden; */
        position        : relative;
        animation       : slideAnimation 1.5s;
    }
    
    #feature .fe-box{
        background-color: rgba(0, 0, 0, 0.1);
        width           : 300px;
        height          : 350px;
        color           : rgb(104, 93, 93);
        text-align      : center;
        padding-bottom  : 3px;
        padding         : 25px 15px;
        box-shadow      : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border          : 1px solid #058f1a;
        border-radius   : 65px;
        margin          : 15px 0;
        animation       : slideAnimation 1.5s;
    }

    #feature .fe-box i{
        font-size       : 100px;
        padding-bottom  : 4px;
        animation       : slideAnimation 1.5s;
    }

    #feature .fe-box:hover{
        box-shadow      : 10px 10px 54px rgba(191, 235, 162, 0.781);
        animation       : slideAnimation 1.5s;
        transform: scale(1.1);
        transition: transform 0.3s ease-in-out;
    }

    #feature .fe-box img{
        width           : 100%;
        margin-bottom   : 10px;
        animation       : slideAnimation 1.5s;

    }

    #feature .fe-box h6{
        padding         : 9px 8px 6px 8px;
        line-height     : 1;
        border-radius   : 4px;
        font-size       : 25px;
        margin-top      : 3px;
        color           : black;
        display         : inline-block;
        animation       : slideAnimation 1.5s;
    }

    /* Feature */
    #berita {
        display         : flex;
        flex-wrap       : wrap;
        justify-content : space-around;
        transition      : transform 0.5s;
        position        : relative;
        animation       : slideAnimation 1.5s;
    }

    #berita .fe-box {
        background-color: rgba(0, 0, 0, 0.1);
        width           : 340px;
        height          : 400px;
        color           : rgb(104, 93, 93);
        text-align      : center;
        padding-bottom  : 3px;
        padding         : 25px 15px;
        box-shadow      : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border          : 1px solid #058f1a;
        border-radius   : 15px;
        margin          : 15px;
        animation       : slideAnimation 1.5s;
    }

    #berita .fe-box .judul {
        font-size       : 18px;
        text-align      : justify;
        letter-spacing  : 0.8px;
        line-height     : 1;
    }
    #berita .fe-box .judul hr{
        height          : 3px;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */
        margin-top      : -1px;
    }
    #berita .fe-box .author {
    margin-top          : -10px;
    text-align          : justify;
    }

    #berita .fe-box i {
        font-size: 100px;
        padding-bottom: 4px;
        animation: slideAnimation 1.5s;
    }

    #berita .fe-box:hover {
        box-shadow: 10px 10px 54px rgba(191, 235, 162, 0.781);
        animation: slideAnimation 1.5s;
    }

    #berita .fe-box img {
        width: 100%;
        height:80%;
        border-radius: 15px;
        margin-bottom: 5px;
        animation: slideAnimation 1.5s;
    }

    #berita .fe-box h6 {
        padding: 9px 8px 6px 8px;
        line-height: 1;
        border-radius: 4px;
        font-size: 25px;
        margin-top: 3px;
        color: black;
        display: inline-block;
        animation: slideAnimation 1.5s;
    }


    .percobaan{
        background-color: rgba(0, 0, 0, 0.1);
        width: 1500px;
        height: 430px;
        color: rgb(104, 93, 93);
        text-align: center;
        padding-bottom: 3px;
        padding: 25px 15px;
        box-shadow: 10px 10px 54px rgba(28, 31, 27, 0.781);
        border: 1px solid #058f1a;
        border-radius: 15px;
        margin: 15px;
        animation: slideAnimation 1.5s;
    }
    /* Layanan */

    #layanan{
        text-align      : center;
    }

    #layanan .pro-container{
        display         : flex;
        justify-content : space-between;
        padding-top     : 20px;
    }

    #layanan .pro{
        position        : relative;
        width           : 23%;
        min-width       : 250px;
        padding         : 10px 12px;
        border          : 1px #cce7d0;
        border-radius   : 20px;
        cursor          : pointer;
        box-shadow      : 20px 20px 30px rgba(0, 0, 0 ,0.06) ; /* Box Shadow Untuk Menu */
        margin          : 15px 0 ;
        transition      : 0.2 ease;
    }

    #layanan .pro:hover{
        box-shadow      : 20px 20px 30px rgba(10, 175, 37, 0.03);        
    }

    #layanan .pro img{
        width           : 100%;
    }

    #layanan .pro .des{
        text-align      : start;
        padding         : 10px 0;
    }

    #layanan .pro .des .span{
        color           : #606063;
        font-size       : 12px;
    }

    #layanan .pro .des h5{
        padding-top     : 7px;
        color           : #1a1a1a;
        font-size       : 14px;
    }

    #layanan .pro .des i{
        font-size       : 12px;
        color           : gold;
    }

    #layanan .pro .des h4{
        padding-top     : 7px;
        font-size       : 15px;
        font-weight     : 700;
        color           : #088178;

    }

    /* Untuk Banner */
    #banner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: url("/img/canva.png");
        width: 100%;
        height: 40vh;
        background-size: cover;
        background-position: center;
    }

    /* Untuk Banner */
    #banner{
        display         : flex;
        flex-direction  : column;
        justify-content : center;
        align-items     : center;
        text-align      : center;
        background-image: url("/img/canva.png");
        width           : 100%;
        height          : 40vh;
        background-size : cover;
        background-position: center;
    }

    #banner h4{
        color           : #fff;
        font-size       : 30px;
        padding         : 10px 0;
    }

    #banner h2{
        color           : #fff;
        font-size       : 30px;
        padding         : 10px 0;
    }

    #banner h2 span{
        color           : red;
    }

    /* Section */
    .section-p1{
        padding         : 40px 80px;
    }
    .section-p2{
        padding         : 60px 100px;
    }

    .section-m1{
        margin          : 20px 0;
    }

    .section-detail{
        margin          : 20px 0;
    }

    .arouselExampleControls .carrousel-inner{
        width           :100%;
        height          : 230px;
    }

    #detail{
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
        /* background-color: rgb(238, 234, 211); */
    }

    #detail .fe-box{
        width           : 900px;
        color           : rgb(104, 93, 93);
        background-color: white;
        text-align      : center;
        padding-bottom  : 3px;
        padding         : 25px 15px;
        /* box-shadow      : 20px 20px 34px rgba(0, 0, 0 ,0.03); */
        /* border          : 1px solid #058f1a; */
        border-radius   : 4px;
        margin          : 15px 0;
        text-align      : center;

    }

    #detail .fe-box i{
        font-size       : 100px;
        padding-bottom  : 4px;
    }

    #detail .fe-box .header{
        text-align : left;
        width: 100%; /* Lebar container 80% dari lebar parent */
        padding: 5px; /* Ruang dalam (padding) sebesar 20 piksel */
        /* border-radius: 8px; Sudut sudut elemen */
    }

    #detail .fe-box .header img {
        width: 25%;
        height: 25%;
    }

    #detail .fe-box .sosial hr{
        border          : none;
        height          : 3px;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */
    }

    #detail .fe-box .judul{
        padding-top:10px;
        font-size:10px;
        text-align      : justify;
        padding-bottom  : 10px;
        font-style      : italic;
        letter-spacing: 0.2px;
        line-height:0.2;
        color:black;
    }

    #detail .fe-box .judul hr{
        border          : none;
        height          : 3px;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */
    }

    #detail .fe-box:hover {
        box-shadow: 10px 10px 54px rgba(154, 42, 127, 0.781); /* Ganti dengan warna #9A2A7F */
    }
    
    #detail .fe-box .halo img{      
        width: 65%; /* Lebar container 80% dari lebar parent */
        margin: 0 auto; /* Pusatkan container di tengah */
        padding: 20px; /* Ruang dalam (padding) sebesar 20 piksel */
        background-color: #f0f0f0; /* Warna latar belakang */
        border-radius: 8px; /* Sudut sudut elemen */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Bayangan (shadow) dengan opasitas 0.1 */
    }

    #detail .fe-box .body p{
        font-size: 20px;
        text-align : justify;
        line-height: 1.3;
    }

    #detail .fe-box .sosial i{
        color:gold;
    }

    #detail .fe-box h6{
        padding         : 9px 8px 6px 8px;
        line-height     : 1;
        border-radius   : 4px;
        color           : aqua;
        background-color: rgb(228, 196, 15);
        display         : inline-block;
    }

    #detail .fe-box h6:nth-child(2){
        background-color: darkblue;
        color           : white;
        
    }

    #detail .fe-box h6:nth-child(3){
        background-color: rgb(4, 14, 14);
        color           : white;
    }

    #detail .section-p1 .fe-box .body{
        color           :red;
    }

    /* Feature Untuk visi Misi */
    #feature-visi-misi{
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
        background-color: rgb(146, 145, 139);
    }

    /* Detail Lengkap */
    #lengkap{
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
    }

    #lengkap .fe-box{
        width           : 700px;
        color           : rgb(104, 93, 93);
        background-color: whitesmoke;
        text-align      : justify;
        padding-bottom  : 3px;
        padding         : 75px 55px;
        box-shadow      : 20px 20px 34px rgba(0, 0, 0 ,0.03);
        border          : 1px solid ;
        border-radius   : 4px;
        margin          : 15px 0;
    }

    #lengkap .fe-box i{
        font-size       : 100px;
        padding-bottom  : 4px;
    }

    #lengkap .fe-box:hover{
        box-shadow      : 10px 10px 54px rgba(23, 241, 77, 0.781);
    }

    #lengkap .fe-box img{
        width           : 100%;
        margin-bottom   : 10px;
    }

    #lengkap .fe-box h6{
        padding         : 9px 8px 6px 8px;
        line-height     : 1;
        border-radius   : 4px;
        color           : aqua;
        background-color: rgb(228, 196, 15);
        display         : inline-block;
    }

    #lengkap .fe-box h6:nth-child(2){
        background-color: darkblue;
        color           : white;
        
    }

    #lengkap .fe-box h6:nth-child(3){
        background-color: rgb(4, 14, 14);
        color           : white;
    }

    .sejarah {
        font-family     : 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size       : 20px;
        padding-left    : 20px;
        padding-right   : 20px;
        margin-bottom   : 12px;
    }

    .sejarah hr{
        border          : none;
        height          : 3px;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */
    }
    .sejarah .body-sejarah{
        text-align      : justify;
        margin-top      : 10px;
        padding-top     : 5px;
    }

    .sejarah h1{
        font-size       : 50px;
        font-style      : italic;
    }

    .kelembagaan {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 20px;
        padding-left: 20px;
        padding-right: 20px;
        text-align: justify;
        margin-bottom: 12px;
    }

    .kelembagaan hr{
        border: none;
        height: 3px;
        color: #333; /* old IE */
        background-color: #333; /* Modern Browsers */
    }

   
    .slide-caption{
        color           : red;
    }

    @media (max-height:800px){
        footer { position       : static; }
        header { padding-top    : 40px; }
    }

    .footer-bprs{
        background-image: linear-gradient(to left, rgba(255,0,0,0), rgb(225, 55, 171));
        box-sizing      : border-box;
        width           : 100%;
        text-align      : left;
        font            : bold 20px sans-serif;
        padding         : 50px 50px 6px 50px;
        padding-bottom  : 40px;
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
        animation       : slideAnimation 1.5s;
    }

    .footer-bprs .kiri,
    .footer-bprs .tengah,
    .footer-bprs .kanan{
        display         : inline-block;
        flex-wrap       : wrap;
        vertical-align  : top;
    }

    /* Ini Kiri Footer */
    .footer-bprs .kiri{
        width           : 30%;
    }

    .footer-bprs h3{
        color           : #0a0707;
        margin          : 0;
    }

    /* The company logo */
    .footer-bprs .kiri img{
        margin-bottom   : 5px;    
    }

    .footer-bprs h3 span{
        color           : #000000;
    }

    /* Footer link */
    .footer-bprs .footer-link{
        color           : #000000;
        margin          : 20px 0 12px;
    }

    .footer-bprs .footer-link a{
        display         : inline-block;
        line-height     : 1.8;
        text-decoration : none;
        color           : inherit;
    }

    .footer-bprs .footer-bprs-bawah{
        color:  #8f9296;
    }

    .footer-bprs .kiri i{
        color           : black;
        font-size       : 25px;
        line-height     : 42px;
        margin          : 10px 15px;
        vertical-align  : middle;
    }

    /* Footer Center */
    .footer-bprs .tengah{
        width           : 25%;
    }

    .footer-bprs .tengah .web{
        flex-direction  : column;
    }

    .footer .web hr{
        border          : none;
        height          : 7px;
        display         : ruby-base;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */   
    }

    .footer-bprs .tengah hr{
        border          : none;
        height          : 7px;
        display         : ruby-base;
        color           : #333; /* old IE */
        background-color: #333; /* Modern Browsers */   
    }

    .footer-bprs .tengah h4{
        font-size       : 35px;
    }

    .footer-bprs .tengah a{
        color           : black;
        text-decoration : none;
    }

    .footer-bprs .tengah a:hover{
    color               : rgb(236, 222, 222); 
    font-size           : 22px;
    }

    .footer-bprs .tengah i.fa-envelope{
        font-size       : 17px;
        line-height     : 38px;
    }

    .footer-bprs .tengah p{
        display         : inline-block;
        color           : #ffffff;
        vertical-align  : middle;
        margin          : 0;
    }

    .footer-bprs .tengah p span{
        display         : block;
        font-weight     : normal;
        font-size       : 14px;
        line-height     : 2;
    }

    .footer-bprs .tengah p a{
        color           : #e0ac1c;
        text-decoration : none;;
    }

    .footer-bprs .sosial-media{
        display         : flex;
        align-items     : center;
        justify-content : center;
        justify-content : space-around   ;
        flex-wrap       : wrap;
    }

    .footer-bprs .sosial-media .yt{
        font-size       : 50px;
        text-align      : center;
    }

    .footer-bprs .sosial-media .yt i{
        font-size       : 50px;
        color           : #c4302b;
    }

    .footer-bprs .sosial-media .ig{
        text-align      : center;
    }
    
    .footer-bprs .sosial-media .ig i{
        font-size       : 50px;
        color           : linear-gradient (90deg, #feda75 rgb(254,218,117) , #fa7e1e  rgb(250,126,30), #d62976 rgb(214,41,118) , #962fbf rgb(150,47,191), #4f5bd5 rgb(79,91,213));
    }

    .footer-bprs .sosial-media .wa i{
        font-size       : 50px;
        color           : green;
        cursor          : pointer;
        text-decoration : none;
        border-radius   : 20px;
        text-align      : center;
        line-height     : 35px;
        margin-right    : 3px;
        margin-bottom   : 5px;
    }

    .footer-bprs .sosial-media .fb i{
        font-size       : 50px;
        color           : #3b5998;
    }

    .footer-bprs .fb i:hover{
        color           : black;
        font-size       : 25px;
    }

    .footer-bprs .ig i:hover{
        color           : black;
        font-size       : 25px;
    }

    .footer-bprs .wa i:hover{
        color               : black;
        font-size           : 25px;
    }

    .footer-bprs .yt i:hover{
        color               : black;
        font-size           : 25px;
    }

    .footer-bprs .sosial-media .ig i{
        color               : #e40c91;
    }

    /* Footer Kanan */

    .footer-bprs .kanan{
        width               : 44%;
        padding             : top 100px;
        flex-direction      : column;
        padding-bottom      : 40px;  /*Biar Sejajar */
    }
    
    .footer-bprs .kanan h4{
        font-size           : 35px;
    }

    .footer-bprs .header-footer-kanan h4{
        font-size           : 40px;
        text-align          : center;
    }

    .footer-bprs .header-footer-kanan hr{
        border              : none;
        height              : 7px;
        display             : ruby-base;
        color               : #333; 
        background-color    : #333;
    }

    .footer-bprs .sosial-media a{
        cursor              : pointer;
        text-decoration     : none;
        font-size           : 60%;
        border-radius       : 20px;
        font-size           : 20px;
        text-align          : center;
        line-height         : 35px;
        margin-right        : 3px;
        margin-bottom       : 5px;
    }

    .footer-bprs .google-maps hr{
        border              : none;
        height              : 7px;
        display             : ruby-base;
        color               : #333; /* old IE */
        background-color    : #333; /* Modern Browsers */   
    }

    .footer-bprs .hubungi-kami{
        font-size           : 35px;
        text-align          : center;
    }

    .footer-bprs .hubungi-kami h1{
        font-size           : 20px;
    }

    .footer-bprs .footer-company-about{
        line-height         : 20px;
        color               :  #92999f;
        font-size           : 13px;
        font-weight         : normal;
        margin              : 0;
    }

    .footer-bprs .footer-company-about span{
        display             : block;
        color               : black;
        font-size           : 18px;
        font-weight         : bold;
        margin-bottom       : 20px;
    }

    /* Sudah FIX. Footer Yang Sudah Responsive. Nanti Ini Saja Dikembangkan */
    @media (max-width: 880px) {
        .footer-bprs .kiri,
        .footer-bprs .tengah,
        .footer-bprs .kanan{
            width           : 100%;
            height          : auto;
            margin-bottom   : 10px;
            text-align      : justify;
        }

        .footer-bprs .tengah i{
            margin-left     : 0;
        }
    }

    /*CSS PETA RESPONSIVE */
    .peta-responsive {
        position: relative;
        width: 100%;
        max-width: 600px; /* Sesuaikan lebar maksimum jika diperlukan */
        margin: 0 auto; /* Menengahkan peta */
        text-align: center; /* Menengahkan konten */
    }
    
    .peta-responsive iframe {
        width: 80%; /* Mengurangi lebar iframe menjadi setengah dari parentnya */
        max-width: 300px; /* Lebar maksimum jika diperlukan */
        height: auto; /* Tinggi disesuaikan secara otomatis agar rasio aspek tetap */
        display: block; /* Memastikan iframe ditampilkan sebagai blok */
        margin: 0 auto; /* Menengahkan iframe */
    }


    #tabungan {
        justify-content     : center;
    }

    #tabungan h4{
        text-align          : center;
        font-family         : 'Times New Roman', Times, serif;
        font-size           : 50px;
    }

    #deposito {
        justify-content     : center;
    }

    #deposito h4{
        text-align          : center;
        font-family         : 'Times New Roman', Times, serif;
        font-size           : 50px;
    }

    #pembiayaan {
        justify-content     : center;
        background-color    : rgb(124, 124, 120);
    }

    #pembiayaan h4{
        text-align          : center;
        font-family         : 'Times New Roman', Times, serif;
        font-size           : 50px;
    }

    .social-icons{
        display             : flex;
        justify-content     : center;
        list-style          : none;
    }
    .sosial-icons li{
        margin              : 0 50px;
    }
    .social-icons li a{
        margin-left         : 50px;
        margin-right        : 50px;
        font-size           : 100px;
        height              : 120px;
        width               : 70px;
        border-radius       : 50%;
        display             : flex;
        align-items         : center;
        justify-content     : space-around   ;
        text-decoration     : none;
        color               : white;
        position            : relative;
        transition          : 0.5s ease;
    }

    .social-icons li a:hover{
        background-image: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
        background-clip     : text;
        color               : transparent;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        font-size           : 70px;    
    }
    .social-icons li a::before{
        content             : "";
        position            : absolute;
        z-index             : -5;
        height              : 150px;
        width               : 150px;
        border-radius       : 50%;
        background          : linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
        transform           : scale(1);
        transition          : 0.5s ease-in-out;
    }

    .social-icons li a:hover::before{
        transform       : scale(0);
    }

    .hubungi-kami{
        font-size           : 15px;
        padding-bottom      : 12px;
        color               : rgb(20, 20, 18);
    }

    .pembiayaan{
        width               : 100%;
    }
    .pembiayaan .kerja{
        text-align          : justify;
    }

    .pembiayaan .kerja h1{
        font-size           : 25px;
        font-weight         : bold;
        text-align          : start;
    }

    .pembiayaan .kerja h2{
        font-size           : 25px;
        font-weight         : bold;
    }


    .pembiayaan .big-judul{
        font-size           : 35px;
        font-weight         : bold;
        font-style          : italic;
        text-align          : center;
    }

    .pembiayaan .col-visi{
        color               : gold;
    }

    .pembiayaan .col-misi{
        color               : red;
    }

    .lay-deposito{
        align-content       : center;
        padding-left        : 10px;
        padding-right       : 10px;
        padding-bottom      : 10px;
    }

    .lay-deposito .big-judul{
        font-size           : 20px;
        font-weight         : bold;
        font-style          : italic;
        text-align          : center;
    }

    .lay-deposito h1{
        font-size           : 25px;
        font-weight         : bold;
        padding-bottom      : 15px;
    }

    .lay-deposito p{
        text-align          : justify;
        font-size           : 16px;
    }

    .lay-tabungan{
        align-content       : center;
        padding-left        : 10px;
        padding-right       : 10px;
        padding-bottom      : 10px;
    }

    .lay-tabungan .big-judul{
        font-size           : 40px;
        font-weight         : bold;
        font-style          : italic;
        text-align          : center;
    }

    .lay-tabungan h1{
        font-size           : 25px;
        font-weight         : bold;
        padding-bottom      : 15px;
    }

    .lay-tabungan p{
        text-align          : justify;
        font-size           : 25px;
    }

    .lay-tabungan{
        align-content       : center;
        padding-left        : 10px;
        padding-right       : 10px;
        padding-bottom      : 10px;
    }

    .lay-tabungan .big-judul{
        font-size           : 40px;
        font-weight         : bold;
        font-style          : italic;
        text-align          : center;
    }

    .pembiayaan .big-judul judul p{
        font-size           : 20px;
        font-style          : normal;
        font-weight         : normal;
    }

    .penjelasan-layanan{
        text-align          : justify;
        font-size           : 25px;
    }

    .lay-tabungan h1{
        font-size           : 25px;
        font-weight         : bold;
        padding-bottom      : 15px;
    }

    .lay-tabungan p{
        text-align          : justify;
        font-size           : 25px;
    }

    /* Jaringan Pusat */
    #jaringan-pusat{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        background-color    : rgb(247, 242, 215);
    }

    #jaringan-pusat h1{
        font-size           : 20px;
    }

    #jaringan-pusat .fe-box{
        width               : auto;
        color               : rgb(104, 93, 93);
        background-color    : whitesmoke;
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border              : 1px solid #058f1a;
        border-radius       : 65px;
        margin              : 15px 0;
    }

    #jaringan-pusat .fe-box i{
        font-size           : 80px;
        padding-bottom      : 4px;
    }


    #jaringan-pusat .fe-box:hover{
        box-shadow          : 10px 10px 54px rgba(191, 235, 162, 0.781);
    }

    #jaringan-pusat .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
    }

    #jaringan-pusat .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;
        border-radius       : 4px;
        font-size           : 25px;
        font-style          : bold;
        margin-top          : 3px;
        color               : black;
        display             : inline-block;
    }

    /* Jaringan Cabang */
    #jaringan-cabang{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
        background-color    : rgb(247, 242, 215);
    }

    #jaringan-cabang .fe-box{
        width               : 19%;
        color               : rgb(104, 93, 93);
        background-color    : whitesmoke;
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border              : 1px solid #058f1a;
        border-radius       : 65px;
        margin              : 15px 0;
    }

    #jaringan-cabang .fe-box h1{
        font-size           : 15px;
    }

    #jaringan-cabang .fe-box i{
        font-siz            : 100px;
        padding-bottom      : 4px;
    }

    #jaringan-cabang .fe-box:hover{
        box-shadow          : 10px 10px 54px rgba(191, 235, 162, 0.781);
    }

    #jaringan-cabang .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
    }

    #jaringan-cabang .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;
        border-radius       : 4px;
        font-size           : 25px;
        font-style          : bold;
        margin-top          : 3px;
        color               : black;
        display             : inline-block;
    }

    #detail-lokasi h1{
        text-align          : center;
        margin-bottom       : 20px;
    }

    .list-layanan ul{
        list-style          : none;
    }

    .list-layanan h1{
        list-style          : none;
    }

    .list-layanan a{
        text-decoration     : none;
        font-size           : 14px;
        color               : black;
    }

    .list-layanan a:hover{
        color               : rgb(151, 135, 147);
    }

    .lainnya{
        color               : red;
        display             : flex;
        justify-content     : center;
        justify-content     : space-around;
        font-size           : 30px;
    }

    .lainnya a{
        text-decoration     : none;
        color               : rgb(0, 0, 0);}

    .lainnya p{
        display             : flex;
    }

    #lembaga .pengawas{
        color               : black;
    }

    #lembaga .pengawas img{
        height              : auto;
        width               : 160px;
        text-align          : center;
    }

    #lembaga .pengawas h1{
        font-size           : 20px;
        
    }
    
    
    #struktur-organisasi .buttonketengah{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
    }

    #struktur-organisasi .buttonketengah .btn{
        border              : none;
        color               : white;
        width               : 260px;
        padding             : 10px 20px;
        text-align          : center;
        text-decoration     : none;
        display             : inline-block;
        font-size           : 13px;
        margin              : 4px 2px;
        transition-duration : 0.4s;
        cursor              : pointer;

    }

    #struktur-organisasi .buttonketengah .button{
        background-color    : white;
        color               : black;
        border              : 2px solid #4CAF50;
    }

    #struktur-organisasi .buttonketengah .button:hover {
        background-color    : #4CAF50;
        color               : white;
        border              : 2px solid #c40c80 ;
      }
    
    /*contoh 1*/
    .embed-responsive {
        position            : relative;
        display             : block;
        height              : 0;
        padding             : 0;
        overflow            : hidden;
    }
    
    .custom1 {
        width               : 1000px;
        height              : 1000px;
    }
    .custom2 {
        height              : 1000px;
        width               : 1000px;
    }
    .custom2 iframe {
        width               : 1000px;
        height              : 1000px;

    }
    #tutorial-pdf-responsive {
        max-width           : 900px;
        max-height          : 700px;
        overflow            : hidden;
    }

    @keyframes slideAnimation {
        from {
            opacity         : 0;
            margin-left     : -80%;
        }
        to {
            opacity         : 1;
            margin-left     : 0;
        }
    }
    
    .carousel-slide {
        animation           : slideAnimation 1.5s;
    }

    /* Artikel */
    #artikel{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
        transform           : scale(0.8);
        transition          : transform 0.5s;
        cursor              : pointer;
        overflow            : hidden;
        position            : relative;
        animation           : slideAnimation 1.5s;
    }
    

    #artikel .fe-box{
        background-color: rgba(0, 0, 0, 0.1);
        width               : 400px;
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border              : 1px solid #058f1a;
        border-radius       : 10px;
        margin              : 15px 0;
        animation           : slideAnimation 1.5s;

    }

    #artikel .fe-box i{
        font-size           : 100px;
        padding-bottom      : 4px;
        animation           : slideAnimation 1.5s;
    }

    #artikel .fe-box:hover{
        box-shadow          : 100px 100px 54px rgba(191, 235, 162, 0.781);
        animation           : slideAnimation 1.5s;

    }

    #artikel .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
        animation           : slideAnimation 1.5s;

    }

    #artikel .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;
        border-radius       : 4px;
        font-size           : 25px;
        margin-top          : 3px;
        color               : black;
        display             : inline-block;
        animation           : slideAnimation 1.5s;
    }

    /* Feature */
    #features{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
        transition          : transform 0.5s;
        cursor              : pointer;
        overflow            : hidden;
        position            : relative;
        animation           : slideAnimation 1.5s;
    }
    
    #features .fe-box{
        background-color    : rgba(0, 0, 0, 0.1);
        width               : 300px;
        color               : rgb(104, 93, 93);
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border              : 1px solid #058f1a;
        border-radius       : 45px;
        margin              : 15px 0;
        animation           : slideAnimation 1.5s;
    }

    #features .fe-box i{
        font-size           : 100px;
        padding-bottom      : 4px;
        animation           : slideAnimation 1.5s;
    }


    #features .fe-box:hover{
        box-shadow          : 10px 10px 54px rgba(191, 235, 162, 0.781);
        transform           : scale(1.1); /* Menyusun elemen saat di-hover */
        transition          : transform 0.5s ease; /* Menambahkan transisi pada transformasi */

    }

    #features .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
        animation           : slideAnimation 1.5s;
        transition          : transform 0.5s ease; /* Menambahkan transisi pada transformasi */
    }

    #features .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;
        border-radius       : 4px;
        font-size           : 25px;
        margin-top          : 3px;
        color               : black;
        display             : inline-block;
        animation           : slideAnimation 1.5s;
    }
    
     .card-footer{
        color               : gold;
        font-size           : 20px;
    }

   /* produk */
    #produk {
        width               :fixed;
        height              :fixed;
        align-items         :center;
        transition          :transform 0.5s;
        animation           :slideAnimation 1.5s;
        overflow            :hidden;
        position            :relative;
    }

    .containerproduk {
        border              : 1px solid #058f1a;
        background-color    : rgba(0, 0, 0, 0.1);
        display             : flex;
        align-items         : center;
        justify-content     : center;
        max-width           : 1800px; /* Atur sesuai kebutuhan */
        background-size     : cover;
        background-attachment   : fixed;
    }

    .image-container {
        margin-top          : 10px;
        margin-bottom       : 10px;
        margin-left         : 10px;
        flex                : 1;
        text-align          : center;
        animation           : fadeInLeft 1s ease-out;
    }

    .text-container {
        margin              : 10px; /* Tambahkan margin untuk memberi jarak dengan gambar */
        flex                : 1;
        animation           : fadeInRight 1s ease-out;
        font-size           : 26px; /* Ukuran font 16 piksel */
        align-self          : flex-start; /* Teks rata ke atas */
    }
    .text-container .judul {
        font-weight         : bold; /* Membuat teks menjadi tebal (bold) */
        margin-bottom       : 5px; /* Menambahkan jarak bawah antara judul dan elemen <hr> */
        color               : gold;
        font-style          : italic;
        font-size           : 55px;
    }

    .text-container .judul hr {
        border              : 8px solid #008F40; /* Ketebalan 2 piksel dan warna garis hitam (#333) */
        margin-top          : 5px; /* Menambahkan jarak atas antara elemen <hr> dan paragraf */
    }
    .text-container .persyaratan{
        margin-left         :20px;
        padding-top         : 8px;
        font-size           :20px;
        align-self          : flex-start; /* Teks rata ke atas */
        text-align          : justify;
        text-indent         : 20px; /* Menambahkan tab pada awal paragraf sejauh 20 piksel */
    }

    .text-container .deskripsi{
        text-indent         : 20px;
        font-size           :25px;
        text-align          : justify;
    }

    .text-container  p{
        font-size           :20px;
        align-self          : flex-start; /* Teks rata ke atas */
        text-align          : justify;
        text-indent         : 20px; /* Menambahkan tab pada awal paragraf sejauh 20 piksel */
    }

    .text-container hr{
        border              : 2px solid #333; /* Ketebalan 2 piksel dan warna garis hitam (#333) */
    }

    .image-container img {
        max-width           : 100%;
        height              : 75%;
        border-radius       : 10px;
    }

    .text-container .persyaratan ol {
        list-style-type     : decimal; /* Set the list style type for ordered lists */
        margin-left         : 20px; /* Adjust the left margin as needed */
        padding-left        : 0; /* Remove default padding */
    }


    .text-container .persyaratan li {
        margin-bottom       : 10px; /* Add spacing between list items */
    }
    
    @media only screen and (max-width: 768px) {
     /* Untuk Banner */
     #banner{
        display             : flex;
        flex-direction      : column;
        justify-content     : center;
        align-items         : center;
        text-align          : center;
        background-image    : url("/img/canva.png");
        width               : 100%;
        height              : 55vh;
        background-size     : cover;
        background-position : center;
    }
    #detail .fe-box .body p{
        font-size           : 15px;
        text-align          : justify;
        line-height         : 1.3;
    }
    .text-container .persyaratan{
        font-size           : 12px;
        align-self          : flex-start; /* Teks rata ke atas */
        text-align          : justify;
    }
    .text-container .persyaratan ol {
        font-size:12px;
        list-style-type     : decimal; /* Set the list style type for ordered lists */
        margin-left         : 20px; /* Adjust the left margin as needed */
        padding-left        : 0; /* Remove default padding */
    }
    
    .text-container .persyaratan li {
        font-size           : 12px;
        margin-bottom       : 10px; /* Add spacing between list items */    
    }

    .container {
        flex-direction      : column;
    }
    .image-container,
    .text-container {
        order               : 0;
        width               : 100%;
    }
    #feature-visi-misi{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
        /* background-color:gold; */
        background-color    : rgb(146, 145, 139);
    }

    #feature-visi-misi .fe-box{
        width               : 370px;
        color               : rgb(104, 93, 93);
        background-color    : whitesmoke;
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 20px 20px 34px rgba(0, 0, 0 ,0.03);
        border              : 1px solid #058f1a;
        border-radius       : 100px;
        margin              : 15px 0;
    }

    #feature-visi-misi .fe-box i{
        font-size           : 100px;
        padding-bottom      : 4px;
    }


    #feature-visi-misi .fe-box:hover{
        box-shadow          : 10px 10px 54px rgba(99, 248, 0, 0.781);
    }

    #feature-visi-misi .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
    }

    #feature-visi-misi .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;    
        border-radius       : 4px;
        color               : aqua;
        background-color    : rgb(228, 196, 15);
        display             : inline-block;
    }

    #feature-visi-misi .fe-box h6:nth-child(2){
        background-color    : darkblue;
        color               : white;
    }

    #feature-visi-misi .fe-box h6:nth-child(3){
        background-color    : rgb(4, 14, 14);
        color               : white;
    }}
    
    .image-container {
        margin-top          :10px;
        margin-bottom       :10px;
        margin-left         :10px;
        flex                : 1;
        text-align          : center;
        animation           : fadeInLeft 1s ease-out;
    }

    .text-container {
        margin: 10px; /* Tambahkan margin untuk memberi jarak dengan gambar */
        flex                : 1;
        animation           : fadeInRight 1s ease-out;
        font-size           : 10px; /* Ukuran font 16 piksel */
        align-self          : flex-start; /* Teks rata ke atas */
    }

    .text-container .judul {
        font-weight         : bold; /* Membuat teks menjadi tebal (bold) */
        margin-bottom       : 5px; /* Menambahkan jarak bawah antara judul dan elemen <hr> */
        color               : #9B2980;
        font-style          : italic;
        font-size           : 30px;
    }

    .text-container .judul hr {
        border              : 8px solid #008F40; /* Ketebalan 2 piksel dan warna garis hitam (#333) */
        margin-top          : 5px; /* Menambahkan jarak atas antara elemen <hr> dan paragraf */
    }
    .text-container .persyaratan{
        font-size           : 20px;
        align-self          : flex-start; /* Teks rata ke atas */
        text-align          : justify;
        text-indent         : 20px; /* Menambahkan tab pada awal paragraf sejauh 20 piksel */
    }

    .text-container  p{
        font-size           :20px;
        align-self          : flex-start; /* Teks rata ke atas */
        text-align          : justify;
        text-indent         : 20px; /* Menambahkan tab pada awal paragraf sejauh 20 piksel */
    }

    .text-container hr{
        border              : 2px solid #333; /* Ketebalan 2 piksel dan warna garis hitam (#333) */
    }

    .image-container img {
        max-width           : 100%;
        height              : 75%;
        border-radius       : 10px;
    }

    .text-container .persyaratan ol {
        list-style-type     : decimal; /* Set the list style type for ordered lists */
        margin-left         : 20px; /* Adjust the left margin as needed */
        padding-left        : 0; /* Remove default padding */
    }

    .text-container .persyaratan li {
        margin-bottom       : 10px; /* Add spacing between list items */    
    }

    /* publish */
    #publish{
        display             : flex;
        align-items         : center;
        justify-content     : center;
        justify-content     : space-around   ;
        flex-wrap           : wrap;
        transition          : transform 0.5s;
        position            : relative;
        animation           : slideAnimation 1.5s;
    }

    #publish .fe-box{
        background-color    : rgba(0, 0, 0, 0.1);
        width               : 250px;
        height              : 220px;
        color               : rgb(104, 93, 93);
        text-align          : center;
        padding-bottom      : 3px;
        padding             : 25px 15px;
        box-shadow          : 10px 10px 54px rgba(28, 31, 27, 0.781);
        border              : 1px solid #058f1a;
        border-radius       : 15px;
        margin              : 15px 0;
        animation           : slideAnimation 1.5s;
    }

    #publish .fe-box i{
        font-size           : 100px;
        padding-bottom      : 4px;
        animation           : slideAnimation 1.5s;
    }


    #publish .fe-box:hover{
        box-shadow          : 10px 10px 54px rgba(191, 235, 162, 0.781);
        animation           : slideAnimation 1.5s;
        transform           : scale(0.9);
        transition          : transform 0.3s ease-in-out;
    }

    #publish .fe-box img{
        width               : 100%;
        margin-bottom       : 10px;
        animation           : slideAnimation 1.5s;
    }

    #publish .fe-box h6{
        padding             : 9px 8px 6px 8px;
        line-height         : 1;
        border-radius       : 4px;
        font-size           : 25px;
        margin-top          : 3px;
        color               : black;
        display             : inline-block;
        animation           : slideAnimation 1.5s;
    }