.banner-tentang {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url('/images/bannerfiks.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    height: 270px;
    margin: 80px 20px 0 20px;
    border-radius: 20px;
    text-align: center;
}

.container-tentang {
    padding: 10px 150px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    color: white;
}
/* sectionnya profil container */
.profil-container {
    padding: 50px 150px;
    margin-top: 30px;
    display: flex;
    gap: 50px;
}

.profil-container .profil-container-left{
    width: 50%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.profil-container .profil-container-right{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.profil-container .profil-container-left h1{
    font-weight: 700;
    font-size: 2.5rem;
}
.profil-container .profil-container-left h1 span{
    font-weight: 700;
    font-size: 2.5rem;
    color: #87c51d;
}
.profil-container .profil-container-left img{
    width: 100%;
    height: 40%;
    border-radius: 20px;
}
.profil-container .profil-container-right img{
    width: 100%;
    height: 40%;
    border-radius: 20px;
}

/* sectionnya visi misi */
.visi-container {
    padding: 30px 150px;
    display: flex;
    gap: 30px;
}

.visi-misi-left h2{
    font-weight: 700;
    font-size: 2.5rem;
}
.visi-misi-left h2 span{
    font-weight: 700;
    font-size: 2.5rem;
    color: #87c51d;
}

.visi-misi-left, .visi-misi-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.visi-misi-right .visi-top{
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 20px;
}
.visi-misi-right .visi-top .visi-top-head p {
    font-weight: 700;
    font-size: 1.2rem;
}
.visi-misi-right .visi-top .visi-top-head p span{
    font-weight: 700;
    font-size: 1.2rem;
    color: #87c51d;
}
.visi-misi-right .visi-top .visi-top-body p {
    border-left: 2px solid #87c51d;
    padding: 20px;
}

.visi-misi-right .visi-bottom{
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 20px;
}
.visi-misi-right .visi-bottom .visi-bottom-head p {
    font-weight: 700;
    font-size: 1.2rem;
}
.visi-misi-right .visi-bottom .visi-bottom-head p span{
    font-weight: 700;
    font-size: 1.2rem;
    color: #87c51d;
}
.visi-misi-right .visi-bottom .visi-bottom-body p {
    border-left: 2px solid #87c51d;
    padding: 20px;
}

/* sectionnya strukturnya */
.struktur-container {
    margin-top: 30px;
    padding: 30px 150px;
}

.struktur-container h2{
    font-weight: 700;
    font-size: 2.5rem;
    text-align: center;
    /* margin-bottom: 30px; */
    color: #87c51d;
    
}
.struktur-container h5{
    font-weight: 700;
    /* font-size: 2.5rem; */
    text-align: center;
    margin-bottom: 30px;
}

.struktur-container h5 span{
    color: #87c51d;
}

.struktur-item img {
    width: 100%;
    border-radius: 20px;
}
.struktur-item .judul-struktur-organisasi{
    width: 100%;
}
.struktur-item{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 60px;
    gap: 50px;
}


@media (max-width: 992px) {
    .banner-tentang {
        padding: 65px 0;
        height: 175px;
    }

    .container-tentang {
        padding: 10px 50px;
    }

    .profil-container{
        padding: 30px 30px;
    }

    .profil-container .teks-item {
        padding: 10px 50px;
    }

    .image-item {
        padding: 20px 50px;
        grid-template-columns: repeat(2, 1fr);
    }

    .visi-container {
        padding: 20px 30px;
        flex-direction: column;
    }

    .visi-item, .misi-item {
        width: 100%;
    }

    .struktur-container {
        padding: 20px 50px;
    }
    .struktur-container .struktur-item{
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .banner-tentang {
        padding: 65px 0;    
        height: 175px;
    }}

    .container-tentang {
        padding: 10px 20px;
    }

    .profil-container .teks-item {
        padding: 10px 20px;
    }

    .image-item {
        padding: 10px 20px;
        grid-template-columns: 1fr;
    }

    
    .visi-container .visi-misi-left, .visi-container .visi-misi-right {
        width: 100%;
    }

    .judul-struktur-organisasi{
    padding-right: 20px;
    padding-left:20px ;
}
@media (max-width: 480px) {
    .profil-container{
        flex-direction: column;
    }
    .profil-container .profil-container-left, .profil-container .profil-container-right {
        width: 100%;
    }
    .judul-struktur-organisasi{
    padding-right: 20px;
    padding-left:20px ;
}
    .struktur-item img {
    width: 80%;
    border-radius: 20px;
}
}