body{
    background:url('../images/gambar5.jpeg') no-repeat center center fixed;
    background-size:cover;
    min-height:100vh;
    font-family:Segoe UI,sans-serif;
}
/* overlay transparan */
body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255,255,255,0.75);
    z-index:-1;
}
/* HEADER */
.header-kader{
    background:#ff7a00;
    color:white;
    text-align:center;
    padding:25px;
    border-radius:15px;
    margin-bottom:35px;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.logo-kader{
    width:80px;
    margin-bottom:10px;
}

.header-kader h3{
    margin:0;
    font-weight:bold;
}

.header-kader p{
    margin-top:5px;
}

/* CARD KADER */
.card-kader{
    background:white;
    border-radius:15px;
    padding:20px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    transition:0.3s;
    height:100%;
    border-top:5px solid #ff7a00;
}

.card-kader:hover{
    transform:translateY(-5px);
}

.card-kader h5{
    color:#ff7a00;
    font-weight:bold;
    text-align:center;
    margin-bottom:15px;
    border-bottom:2px solid #ffe0c2;
    padding-bottom:10px;
}

.card-kader p{
    margin-bottom:8px;
    font-size:14px;
}

/* KETUA */
.row:first-of-type .card-kader{
    border-top:5px solid #ff5500;
}

/* BUTTON */
.btn-warning{
    background:#ff7a00;
    border:none;
    color:white;
    padding:10px 20px;
    border-radius:8px;
}

.btn-warning:hover{
    background:#ff8f33;
    color:white;
}

/* RESPONSIVE */
@media(max-width:768px){

    .card-kader{
        margin-bottom:15px;
    }

    .logo-kader{
        width:65px;
    }

    .header-kader h3{
        font-size:22px;
    }

}