#main-hero {
    height: 70vh ;
    display: flex ;
    align-items: center ;
    margin-bottom: 80px ;
    background-image: url('../img/background.svg');
    background-size: cover ;
    background-position: center ;
}

#main-hero h1.main-hero-title {
    color: #FFFF  ;
}


#main-hero p.main-hero-subtitle {
    color: #FFFF  ;
}

#dokumentasi {
    margin-bottom: 90px ;
}

.pict-dokumentasi {
    margin-bottom : 30px ;
    position: relative;
    display: flex ;
    align-items: center ;
    width: 300px ;
    justify-content: space-around ;
}

.over-text:hover {
    opacity: 1 ;
}

.over-text {
    transition: 0.5s ;
    width: 250px ;
    height: 250px ;
    position: absolute;
    display: flex ;
    align-items: center ;
    justify-content: space-around ;
    color: #FFFF ;
    background: #0561B7 ;
    opacity: 0 ;
    z-index: 5 ;
    border-radius: 5px ;
}

.pict-dokumentasi img {
    width: 250px ;
    height: 250px ;
    border-radius: 5px ;
    z-index: 1 ;
    object-fit: cover ;
}

@media only screen and (max-width : 1100px ){
    .pict-dokumentasi img,.over-text {
        width: 200px ;
        height: 200px ;
    }
}

@media only screen and (max-width : 1100px ){
    .pict-dokumentasi img,.over-text {
        width: 250px ;
        height: 250px ;
    }
}