/* memberikan margin dan padding 0 pada semua element di index.php */

* {
    margin: 0;
    padding: 0;
}


/* memberikan efek pada id nav */

#nav {
    /* sticky memungkinkan elemen nav selalu diatas elemen lain*/
    position: sticky;
    top: 0;
    z-index: 1001;
}


/* memberikan background gradien pada class navbar */

.navbar {
    background-image: linear-gradient(to right, #ec1e4b, #fb2c48);
}


/* memberikan font bold warna putih pada teks navbar-brand span */

.navbar-brand span {
    font-weight: bolder;
    color: #fff;
}


/* setting posisi elemen top & bottom 0px , right & left 10px*/

.navbar-nav li {
    padding: 0 10px;
}


/* setting elemen di navbar menjadi warna putih cetak tebal dan huruf kapital*/

.navbar-nav li a {
    color: #fff !important;
    font-weight: bold;
    text-transform: uppercase;
}


/* memberikan efek pada id banner */

#banner {
    position: relative;
    background-image: linear-gradient(to right, #ec1e4b, #fb2c48);
    color: #fff;
    padding-top: 5%;
}


/* setting elemen class title */

.title {
    font-weight: bolder;
    margin-top: 80px;
}


/* setting elemen class ban-img */

.ban-img {
    position: relative;
    z-index: 1000;
}

.wave {
    position: absolute;
    bottom: -10%;
    left: 0;
}


/* memberikan efek pada id dan class progkal */

#progkal {
    padding: 80px 0;
}

.progkal {
    padding: 20px;
}

.progkal img {
    width: 80px;
    height: 80px;
    margin-top: 10px;
}

.progkal h4 {
    padding: 5px;
    margin-top: 25px;
    text-transform: uppercase;
}


/* memberikan efek pada id visimisi */

#visimisi {
    /* top & bottom 80px, right & left 0 */
    padding: 80px 0;
    background: #fff7f5;
}

#visimisi h4 {
    margin-top: 15%;
}

#visimisi ol li {
    margin-top: 10px;
}


/* memberikan efek pada id dan class contact */

#contact {
    padding: 80px 0;
}

.contact {
    margin-top: 5%;
}

.contact .btn {
    border-radius: 10px;
}


/* memberikan efek pada footer */

#footer {
    padding: 20px 0;
    background-image: linear-gradient(to right, #ec1e4b, #fb2c48);
    color: #fff;
}