.container{
    overflow: hidden;
}
@media (max-width:1400px){
    .nav-right{
    margin-right: 20px;
    }
    ul{
        margin-left: 10px !important;
        padding-left: 0px;
    }
    nav{
        padding-left: 0px;
        justify-content: space-between;
    }
    h1{
        font-size: 35px; 
        margin-bottom: 2px;
    }
    .name{
        text-align: center;
        font-size: 45px; 

    }
    h2{
        font-size: 40px; 
    }
    
    .workPlaces{
        max-width: 400px;
    }
    .work{
        flex-direction: column;
        overflow: hidden;
    }
    .work_piece1{
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: 70px;
    }
    img[src="./images/workpic.png"]{
        height: 200px ;
        margin: 0px;
        margin-left: 40px;
    }
    h6{
        font-size: 50px;
        width: auto;
    }
    .work_examples{
        justify-content: center;
        flex-wrap: wrap;
    }
    
}




@media (max-width:1100px){
    nav > a > p{
        font-size: 15px;
    }
    ul > a > li{
        margin: 0px 9px !important;
    }
    .main-txt{
        margin-bottom: 130px;
    }
    h2{
        font-size: 35px;
    }
    .name{
        font-size: 39px;
        line-height: 45px;
    }
}
@media (max-width:1040px){
    
    .fix-1, .fix-2{
        margin-bottom: 00px;
    }
    .parsi{
        flex-direction: column-reverse;
        
    }
    .about-txt{
        text-align: center;
        width: auto;
        padding: 30px 100px;
    }
    .kgs{
        flex-direction: column-reverse;
        margin-top: 70px;
    }
    .scroller{
        margin-top: 750px;
    }
    .about{
        margin-top: 100px !important;
    }
    h3{
        margin-bottom: 50px;
    }

  
}
@media (max-width:900px){
    nav{
        visibility: hidden;
    }
    h2{
        font-size: 30px;
    }
    .name{
        font-size: 34px;
        line-height: 45px;
    }
    h1{
        font-size: 33px;
        margin-bottom: 10px;
        font-size: 27px;
    }
    .main-txt{
       margin-bottom: 160px;

    }
    .work_piece1{
        left: 20px;
    }



    nav{
        visibility: hidden;
    }
    .landing-text > p{
        font-size: 1.5rem;
        margin: 10px 0px;
        text-align: center;
        line-height: 40px;
    }
    .menu-icon{
        visibility: visible;
        position: absolute;
        top: 10px;
        right: 10px;
    }
    .close{
        color: black;
        text-align: right;
        padding: 20px 20px;
        font-size: 20px;
    }





}
@media (max-width:800px){
    .about{
        /* height: auto; */
        /* display: inline-block; */
        margin-top: 200px;
    }

    .main{
        margin-top: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
    }
    .main-pic{
        display: block;
    }
    img[src="./images/edit-1.png"]{
        display: block;
        /* margin: 90px 0px; */
        position: static;
        /* margin-bottom: 20px; */
        
    }
    .main-txt{
        text-align: center;
        position: static;
        /* margin: 25px 0px; */
        margin-top: 30px;
    }
    .main-items{
        width: 80%;
    }
    h1{
        font-size: 1.8em;
    
    }
    h2{
        font-size: 2em;
        
    
    }
    .name{
        font-size: 1.8em;
        line-height: 60px;
        padding: 10px auto 20px auto ;
    }
    .about-txt{
        padding: 20px;
    }
    h5{
        font-size: 2em;
    }
    .work_piece1{
        position: static;
        font-size: 10px;
        margin-bottom: 50px;
    }
    img[src="./images/workpic.png"]{
        width: 100px;
        height: auto;
    }
    h6{
        font-size: 40px;
    }
}

@media (max-width:600px){
    .grades{
        display: flex ;
        flex-direction: row !important;
        margin: 20px 0px;
        position: static;
    }
    .fix-1{
        flex-direction: column-reverse;
        max-width: 100% !important;
    }
    .fix-2{
        flex-direction: column-reverse !important;
        max-width: 100% !important;
    }
    .grades > p{
        margin: 0px 3px;
    }
    img[src="./images/smcs.jpeg"]{
        margin: 0;
    }
    img[src="./images/kgs.jpeg"]{
        margin: 0;
    }
    h3{
        font-size: 3.2em;
        margin-bottom: 35px;
    }
    .scroller{
        margin-top: 1050px;
    }
    .int_icons > img{
        width: 150px;
        height: auto;
        margin: 0px 30px;
    }
}


@media (max-width:450px){
    h1{
        font-size: 1.6em;
        padding: 0px 0px;
        /* transform: scale(0.9); */
    
    }
    h2{
        font-size: 1.8em;
        
        padding: 0px 0px;
        /* transform: scale(0.9); */
    
    }
    .name{
        font-size: 1.4em;
        line-height: 50px;
        padding: 0px 0px;
        /* transform: scale(0.9); */
    }
    .about-txt{
        font-size: 0.9em;

    }
    h4{
        font-size: 1.8em;
    }
    .levels{
        font-size: 1.2em;
    }
    .scroller{
        margin-top: 1100px;
    }

    .int_icons > img{
        width: 120px;
        height: auto;
        margin: 0px 20px;
    }
    .intn_list{
        height: 160px !important;
    }
    h6{
        font-size: 30px;
    }


}
@media (max-width:500px){
    footer > ol{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    footer > ol > a> li{
        margin: 12px 0px;
    }
    .credits{
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        position: relative;
        bottom: 16px;
    }
footer{
    height: 500px;
}
}

@media (max-width:430px){
.work_piece1{
    flex-direction: column;
}
img[src="./images/workpic.png"]{
        margin: 0px;
    }
    h6{
        font-size: 30px;
    }

.workPlaces{
    width: 340px;
    height: 265px;
}
.w_group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h7{
    font-size: 22px;
}
.fix-3{
    display: inline-block;
}

}
@media (max-width:380px){
    img[src="./images/edit-1.png"]{
        transform: scale(1.2);
    }
    img[src="./images/edit-1.png"]:hover{
        transform: scale(1.3);
    }
    .fix-1,.fix-2{
        transform: scale(0.8);
        position: relative;
        top: 30px;
    }


    h3{
        font-size: 2.5em;
        margin-bottom: 0px;
    }
    .hidden-menu{
        width: 180px !important;
    }

}
@media (max-width:350px){
   
.workPlaces{
    transform: scale(0.9);
    margin-top: 0px;
    margin-bottom: 0px;
    width: 340px;
}
}