*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

/*----------------
 re useble codes 
------------------ */
:root{
    --bg-color:darkseagreen;
    --black-color:#000000;
    --white-color:white;
    --heading-color:#252B48;
}
html{font-size: 10px;}

li{list-style: none;}
a{text-decoration: none; color: var(--black-color);}
h1{color: var(--heading-color);}

/* mern stuck color  */
.m{color: green;}
.e{color: orange;}
.r{color: rgb(28, 255, 236);}
.n{color: greenyellow;}

body{
    background-color: var(--bg-color);
}

/* mern stuck color  */

/*-------------------------- 
main code start here 
---------------------------- */
.header-sec{
    background-image: url(./img/programming.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.73);
    height: 80rem;
}
.div-manupu{ 
    height: 7.5rem;
}
.mypic{
    margin: 2.2rem 0;
    height: 12.5rem;
width: 12.5rem;
border-radius: 84% 16% 79% 21% / 0% 87% 13% 100% ;
animation: mypicani 10s infinite ;
}
@keyframes mypicani {
    
0%{
border-radius: 84% 16% 79% 21% / 0% 87% 13% 100% ;
}
50%{
border-radius: 17% 83% 8% 92% / 84% 15% 85% 16%  ;
}
100%{
border-radius: 84% 16% 79% 21% / 0% 87% 13% 100% ;
}



}
.logo-text{
    font-size: 2.5rem;
    color: white !important;
    margin-left: 2rem !important;
}
.nav-item{
    margin: 1rem;
    
}
.nav-link{
  font-size: 2rem;
  color: aliceblue;

    
}

    /* --------------------
    Main Home section 
    ----------------------- */

.main-home{
    margin-top: 40rem;
    width: 100%;
    height: 64rem;
    padding: 5rem;
    animation: home-ani 4s 1 forwards;
}
@keyframes home-ani {
    to{
        margin-top:0 ;
    }
    
}
.home-heading-text{
    font-size: 4.5rem;
}
.home-p{
    font-size: 2rem;
}
.work-btn{
    height: 4rem;
    width: 15rem;
border: .2rem solid black;
border-radius: .7rem;
background-color: yellow;
}
.num-btn{
    height: 4rem;
    width: 15rem;
border: none;
background-color: transparent;
color: white;
font-size: 1.5rem;
}

/* works section start here  */
.main-works-sec{
    padding: 5rem;
    height: 64rem;
}
.work-card{
    height: 30rem;
    width: 100%;
background-color: #79AC78;
text-align: center;
border-radius: .8rem;
border: .2px solid black;
padding: .5rem;
}
.project-img{
    width: 25rem;
    border-radius: .8rem;
}
.project-btn{
    height: 3rem;
    width: 15rem;
    border: .1rem solid black;
    border-radius: .8rem ;
    background-color: yellow;
}
.m-t{
    margin-top: 15rem;
}
.card-heading{
    font-size: 3rem;
}
.card-text{
    font-size: 1.5rem;
}

/*-------------- 
about section 
------------------ */
.main-about-sec{
    padding: 5rem;
}
.about-parent{
    height: 50rem;
    width: 100%;
    border-radius: 1rem;
    padding: 2rem;
}
.main-about{
    height: 19rem;
    width:100% ;
    margin-top: 1rem;
    background-color: #5C8374;
    border-radius: 1rem;
    padding: 1.5rem;
}
/* contact section  */
.contact-main{
    padding: 5rem;
}

.contact-content{
    height: 64rem;
}

.contact-div{
    margin-top: 10rem;
    height: 45rem;
    width: 50rem;
    background-color: #85E6C5;
    border-radius: 1rem;
    padding: 2rem;
}

#name{
    width: 48%;
    margin-right: 1rem;
    border: .1rem solid black;
    border-radius: .5rem;
}
#email{
    width: 48%;
    border: .1rem solid black;
    border-radius: .5rem;
}
#subject{
    margin-top: 1rem;
    margin-left: .1rem;
    width: 99%;
    border: .1rem solid black;
    border-radius: .5rem;
}
#text-area{
    margin-top: 1rem;
    width: 100%;
    height: 20rem;
    resize: none;
    border: .1rem solid black;
    border-radius: .5rem;
}
.social-img{
    height: 5rem;
    width: 5rem;
    margin:.5rem ;
}
.social-img2{
    height: 4rem;
    width: 4rem;
    margin:1rem ;
}
.contact-btn{
    height: 4rem;
    width: 15rem;
    border: .1rem black solid;
    border-radius: 1rem;
    margin: .5rem 0 ;
}
.contact-s-b{
    width: 100%;
}