@import url(style.css);

@media (max-width: 1200px){
    html{

        font-size: 55%;
    }
}

@media (max-width: 1011px){
   .header {
    padding: 2rem 3%;
   }
   /* .services {
    margin-bottom: 2rem;
   } */
   section{
    padding: 10rem 3% 2rem;
   }

   .footer{
    padding: 2rem 3%;
   }
   
}
@media (max-width: 886px){
    #menu-icon{
        display: block;
    }

    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 1rem 2%;
        /* background: var(--bg2-color); */
        box-shadow: 0 .5rem 1rem rgb(181, 241, 181);
        display: none;
        transition: .5s ease;

    }

    .navbar.active{
        display: block;
        background: var(--bg2-color);

    }
    .navbar a{
        display: block;
        font-size: 2rem;
        margin: 3rem 0;
    }

    .home {
        flex-direction: column;
    }
    .home h1{
        font-size: 2rem;
    }

    .home h3{
        font-size: 4rem;
    }
    .home-img img{
        width: 80vw;
        margin-top: 4rem;
    }
    .contact{
        min-height: auto;
    }
    .about{
        flex-direction: column-reverse;
        margin-top: 4rem;
    }
    .about img{
        width: 80vw;
    }

    .portfolio h3{
        margin-bottom: 3rem;
    }
    .portfolio-container {
        grid-template-columns: repeat(2,1fr);
    }
   .header{
    padding: 2rem 3%;
   }

   section{
    padding: 10rem 2% 2rem;
   }

   .footer{
    padding: 2rem 3%;
   }
   
}

@media (max-width:625px){
    .home{
        min-height: auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .services{
        min-height: auto;
        margin-bottom: 4rem;
    }
    .portfolio-container{
        grid-template-columns: 1fr;
        padding: 2rem;
    }
}

@media (max-width:400px){
    html{
        font-size: 50%;
    }
}

@media (max-width:335px){
    html{
        font-size: 25%;
    }
    .footer{
        padding: 2rem;
    }
}