@media(max-width : 1100px){
    html{
        font-size: 60%;
    }
    .home{
        padding: 5rem 8% 2rem;
    }
}
@media(max-width : 880px){
    section{
        padding: 9rem 5% 3rem;
    }
    #menu-icon{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 3%;
        background: var(--bg-color);
        border-top: 0.1rem solid rgba(0,0,0,0.2);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
        display: none;
    }
    .navbar.active{
        display: block;
    }
    .navbar a{
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }
    .home{
        flex-direction: column;
    }
    .home-content h3{
        font-size: 1.8rem;
    }
    .home-content h1{
        font-size: 2.5rem;
    }
    .about{
        flex-direction: column-reverse;
    }
    .project-content{
        grid-template-columns: repeat(2,1fr);
    }
    .contact{
        min-height: auto;
    }
}

@media(max-width : 450px){
    html{
        font-size: 50%;
    }
    .header .logo span{
        display: none;
    }
    .home-img img{
        width: 100%;
    }
    .about-img img{
        width: 100%;
    }
    .exp-card{
        flex-direction: column;
    }
    .exp-card-left-content{
        margin: auto;
    }
    .exp-card-right-content{
        margin: auto;
    }
    .project-content{
        grid-template-columns: 1fr;
    }
    .contact form .input-box input{
        width: 100%;
    }
    
}