.supporting-institution-wrapper .row{
    padding:0px 160px;
}

.accordion-wrapper .row{
    padding:0px 200px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color:transparent;
    color:#B8272D;
    font-family: monsterrat-semi-bold;
}

.nav-link{
    text-align:start;
    font-size: 18px;
    font-weight:600;
    border-bottom: 1px solid gray !important;
    border-radius: 0 !important;
    outline: 0;
    padding:25px 0px;
    color:gray;
    width: 90%;
    font-family: monsterrat-semi-bold;
}

.nav-link:last-child{
    border-bottom: 0 !important;
}

.accordion {
    background-color: white;
    cursor: pointer;
    padding: 16px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    position: relative;
    font-weight: 600;
}

.accordion-wrapper h1{
    font-size:2.8rem;
    font-weight:700;
    margin-bottom: 80px;
}

.accordion-wrapper{
    margin-bottom:120px
}

.name{
    width: 100%;
    color: #B8272D;
    font-size: 18px;
    display: inline-block;
    font-family: monsterrat-semi-bold !important;

}

.role{
    font-size: 18px;
    color: gray;
    white-space: nowrap;

}

.img-accordion{
    width: 180px;
    /* margin: 20px 100px 20px 0px; */
    margin: 20px 0px 20px 0px;

    border-radius: 4px;
    height: 180px;
}

.actived, .accordion:hover {
    background-color: white;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 31px;
    position: absolute;
    top: 0px;
    right: 0px;
}

.actived:after {
    content: "\2212";
    font-size: 31px;
}

.panel {
    padding: 0 18px;
    background-color: #eee;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius:5px;

}

.content-panel{
    display: flex
}

.accordion-content-text{
    display: inline-block;
    margin: 20px 0px 20px 20px;
    color: var(--gray-black);
    font-size: 18px;
    line-height: 32px;
    height:auto;
    text-align: justify;
    font-family:monsterrat !important; 
}

@media (max-width:1707px){
    .accordion-wrapper .row{
        padding:0px 180px;
    }

    .accordion-content-text{
        font-size: 18px;
        text-align: justify;
    }
}

@media (max-width:1590px){
    .img-accordion{
        /* margin:20px 80px 20px 0px */
        margin:20px 0px 20px 0px

    }
    }

@media (max-width:1440px){
    .accordion-wrapper .row{
        padding:0px 80px;
    }

    .nav-link{
        font-size: 16px;
    }

    .name{
        width: 100%;
    color: #B8272D;
    font-size: 16px;
    display: inline-block;
}

.role{
    font-size: 16px;
}

    .img-accordion{
        width: 160px;
        /* margin: 20px 80px 20px 0px; */
        margin: 20px 0px 20px 0px;


        height: 160px;
    }

    .supporting-institution-wrapper .row{
        padding:0px 100px;
    }

    

    
}






/* kalo diminta rata kiri ya width auto di .name */
/* kalo diminta turun kebawah ya width 100% di .name */










@media (max-width:1240px){
    .content-panel{
        display:block;
        text-align:center;
    }

    .name{
        width: 100%;
    }

    .img-accordion{
        width: 200px;
        margin: 20px auto;
        border-radius: 10px;
        height: auto;
    }

     .nav-link{
    
        font-size: 20px;
        font-weight:700;
    
        outline: 0;
        color:gray;
        margin: auto;
        margin-bottom:20px;
        width:220px;
    }

    .accordion {
    background-color: white;
    cursor: pointer;
    padding: 18px 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    transition: 0.4s;
    position: relative;
    font-weight: 700;
}

.nav-link:last-child{
    border-bottom: white !important;
}





.accordion-content-text{
    display: inline-block;
    margin: 20px 0px 20px 20px;
    font-weight: 600;
    font-size: 18px;
    height:auto;
    text-align: justify;
}

.tabs-besar-wrapper .accordion:after {
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 31px;
    position: absolute;
    top: 13px;
    right: 0px;
}

.accordion-wrapper .row{
    padding:0px 70px;
}

.nav-pills .nav-link{
    margin-left: 0;
}

.supporting-institution-wrapper .row{
    padding:0px 80px;
}



}

@media (max-width:991px){
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color:transparent;
    border-bottom: 1px solid #B8272D !important;


}


.accordion:after{
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%)
}

.accordion-wrapper .row{
    padding:0px 20px;
}

    .nav-link{
        text-align:left;
        font-size: 18px;
        font-weight:700;
        outline: 0;
        color:gray;
        margin: auto;
        margin-bottom:20px;
        width: 100%;
    }
    .flex-column{
        flex-direction: row !important;
    }

    .supporting-institution-wrapper .row{
        padding:0px 40px;
    }
}


@media (max-width:768px){
    .supporting-institution-wrapper .institution-content .col-md-4{
        margin-bottom:60px
    }



    .accordion-wrapper .nav-link{
        width:100%
    }

    .role{
        white-space:break-word;
    }

    .name{
        width:100%;
    }

    .accordion-wrapper .row{
        padding:0;
    }
}

.panel.actived:after{
    font-size: 0px;
}