@media screen and (max-width:740px) {
    
    /* global CSS  */
    
    


    /* -------------------------- */

    .nav-box{
        display: none;
        position: absolute;
        inset: 0;
        flex: 100% ;
        transition: all .3s ease;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        background-color: goldenrod;
        min-height: 7vh;
        max-height: fit-content;
        top: 15vh;
        padding-left: 4%;
        padding-bottom: 4%;
    }
    .nav-items{
        width: 100%;
        padding: 0 !important;
        padding-right: 6px !important;
    }

    .nav-items a{
        width: 75% !important;

    }

    .top-bar p{
        display: none;
    }

    .menu-btn, .close-btn{
        width: fit-content;
        display: flex;
        justify-content: flex-end;
        padding-right: 1rem;
        cursor: pointer;
    }
    .close-btn{
        position: absolute;
        top: 0;
        right: 1vw;
        color: #000000;
    }
    
    .top-bar p{
        display: none;
    }
    .top-bar{
        flex: 20%;
        justify-content: flex-end;
    } 
    
    .contact-section {
        flex-wrap: wrap-reverse;
    }

    .header-banner{
        flex-direction: column;
    }

    .logo-img {
        width: 90px;
        height: 88px;
    }




    .content_box {
        flex-direction: column;
    }

    .content_img,
    .content_data {
        width: 100%;
        min-height: 100%;
    }

    .content_data {
        min-height: 50vh;
        border-bottom: 2px solid #1212;
    }

    .content_box:nth-child(even) {
        flex-direction: column;
    }


}



@media screen and (max-width:560px) {
    .student_result form{
        flex-wrap: wrap;
    }
    
    
}

@media screen and (max-width:380px) {
    
    .top-header{
        height: 8vh;
    }
}