/* Jumbotron */

.bg-tentang-kami{
    background-image: url('../img/tentang_kami/tentang_kami.png');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 400px;
}

.jumbotron .tranparant-blue{
    z-index: 1;
    position: relative;
}

.jumbotron.transparant-blue::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to top, rgba(0,51,102,2),rgba(0,51,102,2));
    opacity: 0.75;
    position: absolute;
    bottom: 0;
}

.content-jumbotron{
    padding-top: 50px;
}

.judul-jumbotron{
    font-family: 'Montserrat-SemiBold';
    font-size: 40px;
}

.yellow-line{
    background-color: #ffc000;
    width: 200px;
    height: 5px;
}

.sub-judul-jumbotron{
    font-family: 'Montserrat-Regular';
    font-size: 15px;
}

.founder-jumbotron{
    font-family: 'Montserrat-Semibold';
    font-size: 15px;
}

.bg-entre{
    background-color: #003974;
}

.bg-group{
    background-image: url('../img/tentang_kami/background_group.png');
    background-size: cover;
    background-position: center;
    position: relative;
    height: 800px;
}

/* End of jumbotron CSS */

/* Cerita Kami */

.judul-cerita{
    font-family: 'Montserrat-SemiBold';
    font-size: 25px;
}

.isi-cerita{
    font-family: 'Montserrat-Regular';
    font-size: 15px;
    text-align: justify;
}

.img-founder2{
    width: 260px;
    height: 280px;
}

/* End of cerita kami CSS */

/* CEC */

.judul-cec{
    font-family: 'Montserrat-SemiBold';
    font-size: 18px;
}

.isi-cec{
    font-family: 'Montserrat-Regular';
    font-size: 10px;
    text-align: justify;
}

.entre1{
    width: 350px !important;
    height: 150px !important;
}

.entre2{
    width: 350px !important;
    height: 150px !important;
}

/* End of cec CSS */

/* Break Line */

.green-line{
    height: 5px;
    width: 500px;
    background-color: #0d8d27;
}

.yellow-box{
    height: 5px;
    width: 5px;
    background-color: #ffcc00;
}

/* End of breakline CSS */

/* Group */

.judul-group{
    font-family: 'Montserrat-SemiBold';
    font-size: 20px;
}

.isi-group{
    text-align: justify;
    font-size: 10px;
}

/* End of group CSS */

@media (min-width: 576px) { 
    
    .bg-tentang-kami{
        background-image: url('../img/tentang_kami/tentang_kami.png');
        background-size: cover;
        background-position: center;
        position: relative;
        height: 800px;
    }

    .jumbotron .tranparant-blue{
        z-index: 1;
        position: relative;
    }
    
    .jumbotron.transparant-blue::after{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, rgba(0,51,102,2),rgba(0,51,102,2));
        opacity: 0.75;
        position: absolute;
        bottom: 0;
    }

    .content-jumbotron{
        padding-top: 150px;
    }
    
    .judul-jumbotron{
        font-family: 'Montserrat-SemiBold';
        font-size: 70px;
    }
    
    .yellow-line{
        background-color: #ffc000;
        width: 300px;
        height: 10px;
    }
    
    .sub-judul-jumbotron{
        font-family: 'Montserrat-Regular';
        font-size: 30px;
    }
    
    .founder-jumbotron{
        font-family: 'Montserrat-Semibold';
        font-size: 30px;
    }

    .judul-cerita{
        font-family: 'Montserrat-SemiBold';
        font-size: 50px;
    }
    
    .isi-cerita{
        font-family: 'Montserrat-Regular';
        font-size: 25px;
        text-align: justify;
    }

    .img-founder2{
        width: 460px;
        height: 480px;
    }

    .bg-entre{
        background-image: url('../img/tentang_kami/background_entre.png');
        background-size: cover;
        background-position: center;
        position: relative;
        height: 800px;
    }

    .judul-cec{
        font-family: 'Montserrat-SemiBold';
        font-size: 40px;
    }
    
    .isi-cec{
        font-family: 'Montserrat-Regular';
        font-size: 20px;
        text-align: justify;
    }
    
    .entre1{
        width: 700px;
        height: 300px;
    }
    
    .entre2{
        width: 500px;
        height: 300px;
    }

    .green-line{
        height: 10px;
        width: 1100px;
        background-color: #0d8d27;
    }
    
    .yellow-box{
        height: 10px;
        width: 10px;
        background-color: #ffcc00;
    }

    .judul-group{
        font-family: 'Montserrat-SemiBold';
        font-size: 40px;
    }
    
    .isi-group{
        text-align: justify;
        font-size: 20px;
    }
    
}

@media (min-width: 768px) {
    .bg-tentang-kami{
        background-image: url('../img/tentang_kami/tentang_kami.png');
        background-size: cover;
        background-position: center;
        position: relative;
        height: 800px;
    }
    
    .jumbotron .tranparant-blue{
        z-index: 1;
        position: relative;
    }
    
    .jumbotron.transparant-blue::after{
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to top, rgba(0,51,102,2),rgba(0,51,102,2));
        opacity: 0.75;
        position: absolute;
        bottom: 0;
    }

    .content-jumbotron{
        padding-top: 150px;
    }
    
    .judul-jumbotron{
        font-family: 'Montserrat-SemiBold';
        font-size: 70px;
    }
    
    .yellow-line{
        background-color: #ffc000;
        width: 300px;
        height: 10px;
    }
    
    .sub-judul-jumbotron{
        font-family: 'Montserrat-Regular';
        font-size: 30px;
    }
    
    .founder-jumbotron{
        font-family: 'Montserrat-Semibold';
        font-size: 30px;
    }

    .judul-cerita{
        font-family: 'Montserrat-SemiBold';
        font-size: 50px;
    }
    
    .isi-cerita{
        font-family: 'Montserrat-Regular';
        font-size: 25px;
        text-align: justify;
    }

    .img-founder2{
        width: 460px;
        height: 480px;
    }

    .judul-cec{
        font-family: 'Montserrat-SemiBold';
        font-size: 40px;
    }
    
    .isi-cec{
        font-family: 'Montserrat-Regular';
        font-size: 20px;
        text-align: justify;
    }
    
    .entre1{
        width: 700px !important;
        height: 300px !important;
    }
    
    .entre2{
        width: 500px !important;
        height: 300px !important;
    }

    .judul-group{
        font-family: 'Montserrat-SemiBold';
        font-size: 40px;
    }
    
    .isi-group{
        text-align: justify;
        font-size: 20px;
    }
}