/* loader effect */
@media screen and (max-width: 480px){
    .loader-content span{
        height: 35px;
        width: 10px;
        margin: 0 4px;
    }
}

/* for home section---------------------------------------------------- */
@media screen and (max-width: 1135px){
    div.floating-contact{
       display: flex;
    }
}
@media screen and (max-width: 1046px){
    .hero img{
        width: 350px;
    }
    .hero, header{
        height: auto;
    }
    .hero{
        margin-top: 5rem;
    }
}
@media screen and (max-width: 1024px){
    .hero{
        padding-top: 18%;
     }
     header{
        position: fixed;
     }
     #aside-nav{
        display: none;
     }
}
@media screen and (max-width: 980px){
    header{
        height: auto;
        justify-content: space-between;
        padding: 15px 30px;
    }
    header nav ul {
        display: none;
    }
    header nav > img{
        display: inline;
    }
    .hero img{
        width: 300px;
    }
    
}
@media screen and (max-width: 920px){
    .hero .content01 div:first-child h3{
        font-size: 30px;
    }
    .hero .content01 div:first-child{
        width: 400px;
    }
}
@media screen and (max-width: 767px){
    .hero .content01{
        flex-direction: column-reverse;
        justify-content: center;
    }
    .hero .content01 div:first-child{
        width: 90%;
    }
}
@media screen and (max-width: 540px){
    .hero img{
        width: 60%;
    }
    .hero .content01 div:last-child{
        display: flex;
        justify-content: center;
    }
}
@media screen and (max-width: 480px){
    .hero .content01 div:first-child h2{
        font-size: 30px;
    }
    .hero .content01 div:first-child h3{
        font-size: 20px;
    }
    header p{
        font-size: 2.5rem;
    }
    .floating-contact span{
        width: 30px;
        height: 30px;
    }
    div.floating-contact{
        width: 100%;
        border-radius: 0;
    }

}
@media screen and (max-width: 330px){
    header p{
        font-size: 1.5rem;
    }
    header nav > img{
        width: 30px;
    }
}


/* for about section---------------------------------------------------- */
@media screen and (max-width: 897px){
    .think div:last-child{
        width: 100%;
    }
    .think{
        padding: 0;
        width: 97%;
    }
}
@media screen and (max-width: 767px){
    .other-skills{
        width: 100%;
        border-radius: 0;
    }
}
@media screen and (max-width: 628px){
    .skills-item{
        width: 100%;
    }
    .other-skills-item p{
        font-size: 17px;
    }
}
@media screen and (max-width: 450px){
    .other-skills{
        flex-direction: column;
        height: auto;
        padding: 15px;
    }
}
@media screen and (max-width: 300px){
    .think div:first-child{
        text-align: center;
    }
}


/* for services section---------------------------------------------------- */
@media screen and (max-width: 767px){
    .services-content{
        flex-direction: column;
        margin: 15px auto;
        gap: 15px;
    }
    .services-content div{
        margin: 0;
        /* gap: 0; */
    }
    .services-content section{
        margin: 0;
        gap: 15px;
    }
    .services-content .big, .services-content .neutral{
        width: 95%;
        height: 150px;
    }
    .services-content section{
        width: 95%;
    }
    .services-content .small{
        width: 100%;
        height: 150px;
    }
    .services-container .services-content:nth-child(3){
        flex-direction: column-reverse;
    }
    #neutral-container{
        display: none;
    }
    #see-more-services{
        display: block;
    }
}


/* for portfolio section---------------------------------------------------- */
 @media screen and (max-width: 767px){
    .zapp-mobile{
        margin-top: -7rem;
    }
    .web-portfolio-content div{
        margin-bottom: 20px;
    }
    .web-portfolio{
        width: 100%;
    }
    .web-portfolio-content .big-img{
        border-radius: 0;
    }
} 


/* for portfolio section---------------------------------------------------- */
@media screen and (max-width: 900px){
    .contact-row1{
        flex-direction: column-reverse;
    }
    .contact-row1 > p{
        text-align: center;
    }
}
@media screen and (max-width: 500px){
    .contact-row1 .contact-me{
        width: 100%;
        border-radius: 0;
    }
    .contact-container{
        width: 100%;
    }
}


/* for side-canvas section---------------------------------------------------- */
@media screen and (max-width: 400px){
    .canvas{
        width: 100%;
    }
    @keyframes slideCanvas{
        0%{
            transform: translateX(105%);
        }
        100%{
            transform: translateX(0);
        }
    }
}