/* media queries  */
 @media (max-width:1200px){
    .header{
        padding: 2rem;
    }
    .header.active{
        padding: 2rem;
    }
    .home h1{
        font-size: 5rem;
    }
}
@media (max-width:991px){
    html{
        font-size: 90%;
    }
    #banner-icon{
        margin-block: 1rem;
    }
    #banner-icon i{
        font-size: 25px;
        padding-inline: 10px;
        color: var(--lightwhite);
    }
    .featured-student-wrapper #fsw{
        display: flex;
        flex-wrap: wrap;
    }
    #was{
        display: flex;
        flex-wrap: wrap;
    }

    .courses{
        display: grid;
        justify-content: center;
        align-items: center;
    }
    #course-card-contant h3{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #DB4D2F;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese2{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #1DA1F2;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese3{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: var(--darkblue);
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese4{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #F2B825;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese5{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #D9D9D9;
        color: var(--darkblue);
        padding-block: 10px;
    }
}

@media (max-width:450px){
    html{
        font-size: 70%;
    }
    body{
        overflow-x: hidden;
    }
    .header-content{
        height: 60vh;
        background: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.4)),url(/img/banner.jpg) no-repeat;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: cover;
        background-attachment: fixed;
    
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-flow: column;
        color: var(--lightwhite);
    }
    .info-header{
        display: none;
    }
    #banner-icon{
        margin-block: 1rem;
    }
    #banner-icon i{
        font-size: 21px;
        padding-inline: 10px;
        color: var(--lightwhite);
    }
    .header-content-wrapper h3{
        font-size: 19px;
        margin:auto 10px;
    }
    .header-content-wrapper h5{
        margin-top: 2rem;
        font-size: 14px;
    }
    .header-content-wrapper h4 i{
        font-size:8px ;
        color: #e1b12c;
    }
    .featured-student-wrapper #fsw{
        display: flex;
        flex-wrap: wrap;
    }
    #was{
        display: flex;
        flex-wrap: wrap;
    }
    .form{
        display: flex;
        flex-wrap: wrap;
    }
    #footer h5{
        font-size: 10px;
    }
    .courses{
        display: grid;
        justify-content: center;
        align-items: center;
    }
    #course-card{
        width: 25rem;
        border: 2px solid var(--darkblue);
        color: var(--black);
        padding-block: 1rem;
        padding-inline: 1rem;
    }
    #course-card-contant h3{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #DB4D2F;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese2{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #1DA1F2;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese3{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: var(--darkblue);
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese4{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #F2B825;
        color: var(--white);
        padding-block: 10px;
    }
    #course-card-contant #courese5{
        font-size: 14px;
        margin-top: 20px;
        text-align: center;
        background: #D9D9D9;
        color: var(--darkblue);
        padding-block: 10px;
    }
}