.container{
    width: 1150px;
    margin: 5em auto;
    padding: 2em;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.north-zone-flex{
    display: flex;

}

.box{
    width: 230px;
    height: 200px;
    text-align: center;
    padding-top: 5em;
    text-transform: uppercase; 
}

.box:hover{
    transform: scale(1.2);
    transition: transform 300ms ease-in;
}

.box h2{
    font-size: 19px;
    padding-top: 3em;
    
}

.box .fas{
    font-size: 50px;
}

.box-1{
    background-image: linear-gradient( 135deg, #97ABFF 10%, #123597 100%);
}

.box-2{
    background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
}

.box-3{
    background-image: linear-gradient( 135deg, #FDD819 10%, #E80505 100%);
}

.box-4{
    background-image: linear-gradient( 135deg, #F5CBFF 10%, #C346C2 100%);
}

.box-5{
    background-image: linear-gradient( 135deg, #69FF97 10%, #00E4FF 100%);
}

.box-6{
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
}


@media all and (max-width: 500px){
    .school-name{
        text-align: left;
    }
    .name-border-buttom{
        margin: 0;
        margin-top: 0.5em;
    }
}


/* ==============================media quary=================================== */

@media all and (max-width: 500px){
    .container{
        max-width: 90%;
    }
    .north-zone-flex{
        flex-wrap: wrap;
    }
    .box{
        width: 300px;
        margin: 0 auto;
    }
    .box:hover{
        transform: scale(1);
        transition: transform 300ms ease-in;
    }


}

@media(min-width: 501px) and (max-width: 968px){
    .container{
        max-width: 90%;
    }
    .north-zone-flex{
        flex-wrap: wrap;
    }
    .box{
        width: 300px;
        margin: 0 auto;
    }
    .box:hover{
        transform: scale(1);
        transition: transform 300ms ease-in;
    }

}