@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap');
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
    text-decoration: none;
    /* width: 100vw; */
    background-color: none;
    
    overflow-x: hidden;
    /* background-color: rgb(66, 65, 65); */
   

}
html{
   scroll-behavior: smooth;
}

/* html[theme='dark-mode'] {
    filter: invert(1) hue-rotate(180deg);
} */
/* #up:hover{
    color: #fff;
    
} */
.arrowup {
    position: fixed;
    
    top: 91vh;
    left: 93vw;
    background-color: rgb(64, 194, 24);
    height: 38px;
    width: 39px;
    display:none;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    z-index: 100000;
}
.show{
    display: flex;
}

.arrowup i{
    color: #fff;
    font-size: 30px;
}


.navbar{

    width:100vw;
   
    position: fixed;
   
    z-index:1000;
    padding:8px 0;
  
    transition: 0.3s ease all;


}
 .sticky{
    padding:3.3px 0;
    background-color:crimson;
    box-shadow: 0px 0px 7px 4px  rgb(129, 123, 123);
    box-sizing: border-box;
    
}
/* .menu-btn{
    position:absolute;
    left:91vw;
    display: none;
    
    color: black;
    cursor: pointer;
    font-size: 15px;
}
 .menu-btn:hover{
    color:crimson;
    cursor: pointer;
    font-size: 15px;
}
.sticky .menu-btn:hover{
    color: #fff;
    cursor: pointer;
    font-size: 15px;
} */
.cat{
    position: absolute;
    top: 30vh;
    left:70vw;
    height: 34vh;
    width: 13.5vw;
    -webkit-transition: -webkit-transform 0.7s;
    /* transition: all 100s ease-in-out 0s ; */
}
.cat:hover{
    /* transform:rotate(360deg); */
    -webkit-transform:rotate(360deg) translateZ(0);
}
 .max-width{
    display: flex;
    flex-direction: row;
    align-items:center;
    padding-left: 4vw;
 }
.logo{
    
    width:500px;
    font-size: 35px;
    font-weight:600;
   
    
}

.logo span{
   
    
    color:crimson;
    
}



.logo a{
        
    color:black; 
   

    
}
.sticky .logo a{
     color:black;
}
 .detail{
    display: flex;
    flex-direction:row;
    padding-left:23vw;
    
    
 
}

 .menu{
    display: flex;
    flex-direction:row;
    list-style: none;
    
}
.menu li {
    color:black;
    padding:0px 1.3vw;
}

 .menu li a{
    color:turquoise;
    transition: color 0.3s ease;

}
.menu li a:hover{
    color:crimson;

}
.sticky .menu li a{
    color:rgb(72, 240, 223);

}
.sticky .menu li a:hover{
    color:#ffffff;

}
.menu li div{
    color:turquoise;
    transition: color 0.3s ease;

}
.menu li div:hover{
    color:crimson;

}
.sticky .menu li div{
    color:rgb(72, 240, 223);

}
.sticky .menu li div:hover{
    color:#ffffff;

}
 #btn i{
     /* height: 9vh; */
    display: none;
    position:absolute;
    left:91vw;
    margin-top: -0.7vh;
    color:black;
    transition: color 0.3s ease;

}

i:hover{
    color:crimson;
 

}
.sticky  i:hover{
    color:#fff;

}




.home{
    

    height:100vh;
    background-color: none;
    z-index: -10000;
    /* background:rgba(0, 0 ,0, 0.4)url(jg.jpg); */
    /* background:rgba(0, 0 ,0, 0.4)url(1947484.jpg); */
    /* background-image: url(1338380.jpg); */
   
    
   
   
}
.home .max-width{
    position: absolute;
    top:37vh;
    left: 3vw;
}
#text1{
    
    font-size:29px;
    color: rgb(0, 0, 0);
    /* color:#27c513; */
   
}
#text2{
    
    font-size: 79px;
    font-weight: 600;
    color: black;
    /* color:#27c513; */
   
}
#text3{
    
    font-size: 44px;
    color: black;
    /* color:#27c513; */
   
}
.home-content span{
    font-size: 44px;
   
    color: crimson;
}
.hr{
    margin:auto;

    width:80%;
    color: rgb(187, 187, 202);
}

.about{
    display:flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    margin-top: 6vh;
    background-color:none;
    color: black;
    /* box-sizing: border-box; */
    /* margin: -200px; */
    /* margin-right:-4vw; */
  
  
    
}
.about h1{
    font-family: 'Ubuntu',sans-serif;
    color: black;
}
#h3{
    color: crimson;
}
.about .abouth3{
    margin: 0px auto;
}

#h3:before{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
}
#h3:after{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
}







.max-width-about{
    display:flex;
    flex-direction: row;
    padding: 10vh 0vh;
   
    /* margin-right:-4vw;
   */
}
.about-content{
    display:flex;
    flex-direction: column;
    align-items: left;
    padding: 3vh 2vw;
    overflow:hidden;
}

.photo{
    height: 35vh;
    width:16.7vw;
   margin:0px 2vw;
   margin-top: -2vh;
    transition: all 1s ease ;
    border-radius: 100%;
    
  
}
.photo:hover{
    transform:scale(1.04);
    
}
.about-content .p{
    height: 30vh;
    width:50vw;
    font-weight: 120;

    text-align: left;
    margin-left: 5vw;
    font-size:17px;
    color: black;
    opacity: 1;
}
.about-content .about-me{
    margin-left: 5vw;
    margin-bottom: 3vh;
    font-size: 25px;
    font-weight: 500;
    color: black;
}
.about-content .about-me #memyself{
    color: crimson;
}



button{
    margin-top:-3vh ;
    overflow:hidden;
    border-radius: 7%;
    border-style: none;
    height: 4vh;
    width:8vw;
    margin-top: -10vh;
    margin-left: 5vw;
    color:#fff ;
    background:crimson ;
    box-shadow: 3px 3px 4px   rgb(129, 123, 123) ;

    
}
button a{
    color:#fff ;
}


/* projects don't touch */




.project{
    background-image: url("background.jpeg");
    height: 75vh;
    width: 100vw;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    overflow:hidden;
    cursor: pointer;
   

}
.project-title{
    font-family: 'Ubuntu',sans-serif;
    margin: 0px auto;
    color: #fff;
    margin-top: 1.5vh;
    overflow:hidden;
}
#project-h321{
    
    margin:0px auto;
    margin-bottom: 1vh;
    overflow:hidden;
}
#project-h3{
    color: crimson;
    overflow:hidden;
   
}
#project-h3:before{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
    overflow:hidden;
}
#project-h3:after{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
    overflow:hidden;
}


.project-box{
    display:flex;
    flex-direction: row;
    
    margin:  3vh 6vw;
    overflow:hidden;
    width: 122vw;
    position: relative;
    left:0px;
    transition: 0.1s ease;
}

.project1{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 55vh;
    width:20vw;
    margin:0px 4vw;
    margin-left: 4vw;

    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;

}
.project1:hover{
    transform:scale(1.04);
    overflow:hidden;
}

.project11{
    background-image: url("car.png");
    background-size: 100% 100%;
    height: 20vh;
    margin: 1.5vh 0px;
    overflow:hidden;



}
.project12{
    margin: 2vh;
    overflow:hidden;
}
.project13{
    margin:0px 2vh;
    overflow:hidden;
}
.project14{
    display: flex;
    margin-top: 1.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow:hidden;
}
.project14 div{
    color: rgb(62, 62, 238);
    padding:2px 6px;
    border:solid 1px rgb(62, 62, 238);
    border-radius: 20%;
    overflow:hidden;
}
.project15{
    display: flex;
    margin-top: 3.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow:hidden;
}
.project15 i{
   font-size: 30px; 
   overflow:hidden;
   margin: 0px 2vh;
    
}


.project2{
    margin:0px 4vw;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow:hidden;
    height: 55vh;
    width:20vw;
    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    
    
    

    transition: all 1s ease;

}
.project2:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.project21{
    background-image: url("TTT.png");
    background-size: 100% 100%;
    height: 20vh;
    margin: 1.5vh 0px;
    overflow:hidden;


}

.project22{
    margin: 2vh;
    overflow:hidden;
}
.project23{
    margin:0px 2vh;
    overflow:hidden;
}
.project24{
    display: flex;
    margin-top: 1.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow:hidden;
}
.project24 div{
    color: rgb(62, 62, 238);
    padding:2px 6px;
    border:solid 1px rgb(62, 62, 238);
    border-radius: 20%;
    overflow:hidden;
}
.project25{
    display: flex;
    margin-top: 3.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow:hidden;
}
.project25 i{
   font-size: 30px; 
   margin: 0px 2vh;
   overflow:hidden;
    
}
.project3{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 55vh;
    width:20vw;
 margin:0px 4vw;
    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;

}
.project3:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.project31{
    background-image: url("chat-app.jpg");
    background-size: 100% 100%;
    height: 20vh;
    margin: 1.5vh 0px;
    overflow:hidden;


}
.project32{
    margin: 2vh;
    overflow:hidden;
}
.project33{
    margin:0px 2vh;
    overflow:hidden;
}
.project34{
    display: flex;
    margin-top: 1.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow:hidden;
}
.project34 div{
    color: rgb(62, 62, 238);
    padding:2px 6px;
    border:solid 1px rgb(62, 62, 238);
    border-radius: 20%;
    overflow:hidden;
}
.project35{
    display: flex;
    margin-top: 3.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow:hidden;
}
.project35 i{
   font-size: 30px; 
   margin: 0px 2vh;
   overflow:hidden;
    
}
.project4{
    display: flex;
    flex-direction: column;
    background-color: #fff;
    height: 55vh;
    width:20vw;
    margin:0px 4vw;
    margin-right: 0vw;
    border-radius: 2%;
    box-shadow: 0px 4px 6px rgb(129, 123, 123);
    margin-bottom: 1vh;
    transition: all 1s ease;
    overflow:hidden;

}
.project4:hover{
    transform:scale(1.04);
    overflow:hidden;
}
.project41{
    background-image: url("portfolio.png");
    background-size: 100% 100%;
    height: 20vh;
    margin: 1.5vh 0px;
    overflow:hidden;


}
.project42{
    margin: 2vh;
    overflow:hidden;
}
.project43{
    margin:0px 2vh;
    overflow:hidden;
}
.project44{
    display: flex;
    margin-top: 1.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    overflow:hidden;
}
.project44 div{
    color: rgb(62, 62, 238);
    padding:2px 6px;
    border:solid 1px rgb(62, 62, 238);
    border-radius: 20%;
    overflow:hidden;
}
.project45{
    display: flex;
    margin-top: 3.5vh;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    overflow:hidden;
}
.project45 i{
   font-size: 30px; 
   margin: 0px 2vh;
   overflow:hidden;
    
}


/* .arrow{
    display: flex;
    flex-direction: row;
    margin: 0px auto;
}
.right,.left{
    overflow: hidden;
}
.arrow i{
    font-size: 30px;
    margin: 0px 4vh;
    overflow: hidden;
} */





/* contact  */



.contact{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 6vh 0px;
    overflow: hidden;
}

.contactme{
    color: black;
    font-family: 'Ubuntu',sans-serif;
    overflow: hidden;
}
.getintouch{
    color: crimson;
    overflow: hidden;

}
.getintouch:before{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
    overflow:hidden;
}
.getintouch:after{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
    overflow:hidden;
}
.contactbox{
    display: flex;
    flex-direction: row;
    margin-top: 3vh;
    height: 60vh;
    width: 100vw;
    
}

.nae{
    display: flex;
    flex-direction: column;
    margin: 7vh;
    width: 40vw;
    color: black;
}
.nae1{
      margin:1.5vh 0px;
}
.nae2{
    margin:1.5vh 0px;
}


.nae3{
    display: flex;
    flex-direction:row;
    margin:1.5vh 0px;
}
.nae31{
    color: crimson;
    margin-top: 0.8vh;
}
.nae32{
    display: flex;
    flex-direction: column;
    margin-left: 1vw ;
}
.nae4{
    display: flex;
    flex-direction:row;
    margin:1.5vh 0px;
}
.nae41{
    color: crimson;
    margin-top: 0.8vh;
}
.nae42{
    display: flex;
    flex-direction: column;
    margin-left: 1vw ;
}
.nae5{
    display: flex;
    flex-direction:row;
    margin:1.5vh 0px;
}
.nae51{
    color: crimson;
    margin-top: 0.8vh;
}
.nae52{
    display: flex;
    flex-direction: column;
    margin-left: 1vw ;
}


.message{
    display: flex;
    flex-direction: column;
    margin: 7vh;
    margin-left: 9vw;
    width: 40vw;
    color: black;
    
}
.mess1{
    margin:1.5vh 0px;

}
.mess2{
    display: flex;
    flex-direction: row;
    margin:1.5vh 0px;
    
   
}
.mess21 input{
    height: 3.5vh;
    width: 13vw;
  
}
.mess22 input{
    height: 3.5vh;
    width: 13vw;
    margin-left: 2vw;
  
}
.mess3{
    margin:1.5vh 0px;
    height: 3.5vh;
    width: 13vw;

}
.mess3 input{
    
    height: 3.5vh;
    width: 13vw;

}
.mess4{
    margin:1.5vh 0px;
}
.mess5{
    margin:1.5vh -5vw;
    border-radius: 10%;
}
.mess5 button{
    padding-top: 0.4vh;
   
    
}
input[type=text]:focus,textarea:focus,input[type=email]:focus{
  outline: none;
    border: 2px solid crimson;     /* oranges! yey */
  }

.footer{
    /* background-color:rgb(120, 120, 173); */
    background-color:rgb(158, 157, 157);
    width: 100vw;
    height: 17vh;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sm{
    margin: 3vh 0px;
    overflow: hidden;
}
.sm i{
    font-size: 35px;
    color: #fff;
    margin: 0px 2vw;
    overflow: hidden;
}

.cut{
    width: 100%;
    overflow: hidden;

   
}
.love{
    display: flex;
    flex-direction: row;
    margin-top: 1.5vh;
    color: #fff;
    overflow: hidden;
}
.love .icon{
   padding-top:0.4vh;
   overflow: hidden;
}
.love .icon i{
 
    overflow: hidden;
 }







#up:hover{
    color: #fff;
    overflow: hidden;
    
}










@media only screen and (max-width:500px)
{
    .menu{
        background-color:rgb(119, 197, 189);
        position:absolute;
        left:101vw;
        top:0vh;
        height: 50vh;
        width:55vw;
        /* z-index: 10; */
        
        display: flex;
        flex-direction:column;
        list-style: none;
        padding: 6vh 0;
        transition: left 0.5s ease;



        
        
    }
    
    .menu li {
        margin:2vh auto;
       


    }
    .menu li a{
        margin:auto;
        color:gray;
        transition: color 0.3s ease;


    }
    .active{
        left:45vw;
        box-shadow: 0px 0px 7px 4px  rgb(129, 123, 123);
    }

     #btn i{
        display: block;
        position:absolute;
        padding-top: -1vh;
        left:91vw;
        color:black;
        transition: color 0.3s ease;

    
    }
   .cross i::before{
        content:"\f00d";
    }
    /* .menu-btn{
        position:absolute;
        left:91vw;
        top:3vh;
        display: inline-block;
        
        color: black;
        cursor: pointer;
        font-size: 15px;
    } */
    .cat{
        position: absolute;
        top: 60.5vh;
    left: 28vw;
    height: 32vh;
    width: 46vw;
        -webkit-transition: -webkit-transform 0.7s;
        /* transition: all 100s ease-in-out 0s ; */
    }
    #text1{
    
        font-size:22px;
        color: rgb(0, 0, 0);
        /* color:#27c513; */
       
    }
    #text2{
        
        font-size: 50px;
        font-weight: 600;
        color: black;
        /* color:#27c513; */
       
    }
    #text3{
        
        font-size: 33px;
        color: black;
        /* color:#27c513; */
       
    }


/* ------------------------------------------------new----------------------------------------------------- */

#text1{
    
    font-size:20px;
    color: rgb(0, 0, 0);
    /* color:#27c513; */
   
}
#text2{
    
    font-size: 43px;
    font-weight: 600;
    color: black;
    /* color:#27c513; */
   
}
#text3{
    
    font-size: 32px;
    color: black;
    /* color:#27c513; */
   
}
.home-content span{
    font-size: 32px;
   
    color: crimson;
}

.about{
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    width: 100vw;
    margin-top: 6vh;
    background-color:none;
    color: black;
    /* box-sizing: border-box; */
    /* margin: -200px; */
    /* margin-right:-4vw; */
  
  
    
}
.about h1{
    font-family: 'Ubuntu',sans-serif;
    margin: 0px auto;
    color: black;
}
 .abouth3{
    margin: 0px auto;
}
#h3{
    color: crimson;
    margin: 0px auto;
}

#h3:before{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
}
#h3:after{
    content:"";
    position:relative;
    display:inline-block;
    left:0px;
    top:-4px;
    background: crimson;
    height: 2px;
    width:39px;
    overflow:hidden;
}



.max-width-about{
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    width: 100vw;
    padding: 10vh 0vh;
   
    /* margin-right:-4vw;
   */
}
.photo{
    height: 28vh;
    width: 59.7vw;
    margin: 0px auto;
    margin-top: -6vh;
    transition: all 1s ease;
    border-radius: 100%;
    
  
}
.about-content{
    display:flex;
    flex-direction: column;
    align-items:flex-start;
    padding: 3vh 2vw;
    overflow:hidden;
    row-gap: 2vh;
}


.about-content .about-me{
    margin-left: 5vw;
    margin-bottom: 3vh;
    font-size: 19px;
    font-weight: 500;
    color: black;
}
.about-content .about-me #memyself{
    color: crimson;
}
.about .max-width-about .about-content .p{
    height: 37vh;
    width: 88vw;
    font-weight:10;
    text-align: left;
    margin-left: 5vw;
    font-size: 15px;
    color: rgb(53, 52, 52);
    
   
}



button{
    margin-top:-6vh ;
    overflow:hidden;
    border-radius: 7%;
    border-style: none;
    height: 4vh;
    width:19vw;
    /* margin-top: -4vw; */
    margin-left: 5vw;
    color:#fff ;
    background:crimson ;
    box-shadow: 3px 3px 4px   rgb(129, 123, 123) ;

    
}
button a{
    color:#fff ;
}
}



/* -----------------------------------------------------------------new-------------------------------------------------------- */



@media only screen and (min-width:500px)and (max-width:1100px)
{

    .project{
        background-image: url("background.jpeg");
        height: 65vh;
        width: 100vw;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        overflow:hidden;
        cursor: pointer;
       
    
    }
    .project1{
        display: flex;
        flex-direction: column;
        background-color: #fff;
        height: 44vh;
        width: 31vw;
        margin:0px 4vw;
        margin-left: 4vw;
    
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        transition: all 1s ease;
        overflow:hidden;
    
    }
    .project2{
        margin:0px 4vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow:hidden;
        height: 44vh;
        width: 31vw;
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        
        
        
    
        transition: all 1s ease;
    
    }
    .project3{
        margin:0px 4vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow:hidden;
        height: 44vh;
        width: 31vw;
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        
        
        
    
        transition: all 1s ease;
    
    }
    .project4{
        margin:0px 4vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow:hidden;
        height: 44vh;
        width: 31vw;
        border-radius: 2%;
        box-shadow: 0px 4px 6px rgb(129, 123, 123);
        margin-bottom: 1vh;
        
        
        
    
        transition: all 1s ease;
    
    }
    .photo{
        height: 23vh;
    width: 28.7vw;
    margin: 0px 2vw;
    margin-top: 2vh;
        transition: all 1s ease ;
        border-radius: 100%;
        
      
    }
    .detail{
        display: flex;
        flex-direction:row;
        padding-left:6vw;
        
        
     
    }
    .project-box{
        display:flex;
        flex-direction: row;
        
        margin:  3vh 6vw;
        overflow:hidden;
        width: 157vw;
        position: relative;
        left:0px;
        transition: 0.1s ease;
    }

}