/* tablet */
@media only screen and (max-width: 991px) {
    .upcoming .content{
        top: 15px;
    }

    .overview .side-menu{
        padding: 15px 0;
        margin-top: 30px;
    }

    .overview .side-menu ul{
        display: flex;
        justify-content: space-around;
        padding-left: 0;
        position: relative;
        top: 10px;
    }

    .overview .side-menu li.active{
        background: #575756;
        border-radius: 100rem;
    }

    .overview .side-menu li::before,.overview .side-menu li.active::before{
        content:""
    }

    .overview .side-menu li{
        padding: 5px 15px;
    }

    .gallery-card{
        width: auto; 
    }
    .alumni-card{
        margin: auto;
    }

    .modal .alumni-card{
        margin: initial;
    }

    .modal-dialog{
        max-width: 80%;
    }
    #alumniModal .modal-body{
        padding: 30px;
    }

    .form-box{
        width: 100%;
    }

    #navigation .content{
        width: 100% !important;
    }

    #trainer-modal .close{
        background: transparent;
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 3rem;
    color: #fff;
    width: 30px;
    height: 30px;
    display: grid;
    line-height: 0;
    place-items: center;
      }

      #trainer-modal .detail{
          position: relative;
          top: -5rem;
          margin: 15px;
          overflow-wrap: break-word;
      }

      #trainer-modal .close-btn{
          position: relative;
          top: -3rem;
      }

      .main-trainer .trainer-card .view-detail{
        opacity: 0;
    }
}

/* mobile */
@media only screen and (max-width: 767px) {
    .form-button{
        display: flex;
        justify-content: center;
      }
    .form-group label span{
        display: inline-block;
    }
    .step .circle{
        width: 50px;
        height: 50px;
    }

    .step .head{
        display: none;
    }

    .step .circle .number{
        font-size: 24px;
    }

    .step .detail{
        display: none;
    }

    .step .circle::before{
        top: 45%;
    }

    .form-box .title{
        text-align: center;
        font-size: 20px;
        text-decoration: underline;
        position: relative;
        top: -15px;
    }

    .form-box .tab.overview .title{ 
        font-size: 16px;
        text-align: left;
        text-decoration: none;
        top: 0;
    }

    .form-box .tab.overview .title:first-child::before{ 
        content: "OVERVIEW";
        text-align: center;
        font-size: 20px;
        text-decoration: underline;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
    }

    .banner .carousel-indicators{
        width: 30%;
    }

    section{
        font-size: 14px;
    }

    section.about .title{
        font-size: 20px;
    }

    section.about .divide{
        margin: 30px 0;
    }

    section.upcoming{
        overflow: hidden;
    }

    section.upcoming .background{
        max-width: 800px;
        left: -30px;
    }

    .upcoming span{
        font-size: 18px;
    }

    .footer .menu span{
        display: block;
    }

    .footer .contact{
        font-size: 12px;
    }

    .gallery-card .view:hover{
        opacity: 0;
    }

    .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    background: rgba(0,0,0,0.3) !important;
    width: 50px !important;
    }

    button.owl-next{
        position: relative !important;
        right: -15px !important;
        border-radius: 30px 0 0 30px;
    }

    button.owl-prev{
        position: relative !important;
        left: -15px !important;
        border-radius: 0 30px 30px 0;
    }

    .navbar-brand{
        max-width: 170px !important;
    }

    .navbar{
        height: auto !important;
    }

    .side-menu-mobile{
        display: flex;
        justify-content: center;
        padding: 36px 0 0;
    }

    #overview-side-menu-button{
        width: 70% !important;
        border-color: var(--orage-color);
        color: var(--orage-color);
        font-size: 16px;
    }

     #overview-side-menu-menu.ui-widget.ui-widget-content{
        color: var(--orage-color);
        font-size: 16px;
        padding-top: 30px;
    }

    .modal-dialog{
        max-width: 100%;
    }

    .alumni .head .sort, .gallery .head .sort{
        padding-left: 0;
    }
   

    

}