@media only screen and (max-width : 992px){
    header , section{
        overflow-x: hidden;
    }
header  .navbar-brand{
padding-left: 0;
}

#id{
    width: 50% !important;
}

.wrap {
    position : relative;
    overflow:hidden;
    padding-top:56.25%;
}

.wrap iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.nav{
    border: none;
    padding-bottom: 0;
    padding-top:0 ;
}

header .container .col-md-10{
    padding-top: 0;
}

header .container .col-md-10 h6{
    font-size: 1.4rem;
}

header .container .col-md-10 h1{
    font-size: 1.6rem;
}

.col-md-10 .jumlah{
    width:96%;
    font-size: 1rem;
}

header .container{
    padding-top: 6rem;
}



    .section-1 .row .col-md-6 .panel{
        position: initial;
        width: initial;
        height: initial;
    }

    .section-2 .cover{
        background-position: -25vmin -10vmin ;
    }

    .section-2 .cover h1{
        font-size: 3rem;
    }

    .section-2 .cover p{
        font-size: 0.8rem;
    }

    .card h5{
        font-size: 2rem;
    }

    .card p{
        font-size: 1rem;
    }

    .number .rect {
        width: 10rem;
        height: 8rem;
    }

    .number .rect h1{
        font-size: 2rem;
    }

    .section-3 {
        height: inherit;
        padding:10vmin !important;
    }

    .section-3 .row h1{
        padding:6vmin 4vmin;
        font-size: 2rem;
    }

    .section-3 .row p{
        font-size: 1rem;
    }

    .section-3 .row .col-md-6{
        text-align: center !important;
    }

    .section-3 .desktop{
        font-size: 4vmin;
    }

    .section-4 .carousel-item{
        padding-left: 0.6rem;
    }

    .section-4 .team{
        display: flex;
        flex-direction: column ;
        align-content: center;
    }

    .section-4 .carousel-inner{
        width: 24rem;
    }

    .section-11 .row .col-md-6 .panel{
        position: initial;
        width: initial;
        height: initial;
    }

    .section-22 .covers h1{
        font-size: 2rem;
    }

    .section-22 .covers p{
        font-size: 1rem;
    }

    .programs p{
        font-size: 1rem;
    }

    .numbers .rect{
        position: relative;
        z-index: 1;
        background: white ;
        width: 17rem;
        height: 19rem;
        padding-top: 5vmin;
        margin: 2rem;
        border-radius: 1em;
        box-shadow: 1px 2px 50px 0px rgba(9, 169, 243, 0.3);
        display: flex;
        align-items: flex-end;
        opacity: 1;
    }

    .rect::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2;
        opacity: 0;
        border-radius: 1rem;
        opacity: 1;
    }


.rect .info{
    position: relative;
    z-index: 3;
    color: #fff;
    opacity: 0;
    transition: 0.5s all;
    opacity: 1;
}

.rect img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.rect .info{
    position: relative;
    z-index: 3;
    color: #fff;
    opacity: 1;
    transform: translateY(0px);
}

.rect:hover{
    transform: translateY(0px) ;
}

}