*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
header{
    position:sticky;
    width: 100%;
    top:0;
    left:0;
    padding:  5px;
    background-color:white;
    /* border-radius: 15%; */
    z-index: 2;
}
.nav{
    height: 8vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.nav_logo{
    font-size:1.25rem;
    color: black;
}
.active_link{
    color:blue;
}
.active_link::after{
    width:25%
}

.nav_close,.bar{
    display:flex;
    font-size: 1.25rem;
    color: grey;
    cursor: pointer;
}
 /* mobile application */
 @media screen and (max-width:1023px ) {
    .nav_links{
        position: fixed;
        top:0;
        right: -100%;
        padding: 6rem 3rem;
        transition:  right .4s;
        width: 80%;
        height: 100%;
        box-shadow:-1px 0 16px hsla(0,0%,0%,.1);
        
        background-color: white;
    
        
    }
   
   
}
    .nav_list{
        display: flex;
        flex-direction: column;
        row-gap:2.5rem;
    }
    
    .nav_item{
        color: grey;
        font-family:'Courier New', Courier, monospace
    }
 
 .nav_close{
    position: absolute;
    top:1.125rem;
    right: 1.5rem;

 }
 .show_menu{
    right: 0;
 }

 a{
    text-decoration: none;
    
 }
 li{
    list-style: none;
 }
   /* home */
.home_container{
position: relative;
padding: 12px;

}
.title{
    font-size: 2rem;
    margin-bottom: .5rem;
}

.container{
    max-width: 1120px;
    margin-inline: 1.5rem;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
}
.home_description{
    font-size:1.15rem;
    margin-bottom: 2rem;
    color: grey;
}
.home_button{
    display: inline-block;
    background-color: white;
    box-shadow: 0 8px 32px hsla(0,0%,0%,.1);
    padding: 1rem 4rem;
    border-radius: 4rem;
    font-weight: 100;
    font-size: 1.25rem;
    color: black;
    width: 50vw;
    margin: 1rem 6rem;


    
}
.home_button:hover{
    box-shadow: 0 8px 32px hsla(0,0%,0%,.15);
}
  
  /* Break Point */
  /* for small device */
  @media  screen and (max-width:320px) {
   
    .container{
        margin-inline:1rem;
    }
    .title{
        font-size: 1rem;
    }
}
    /* for medium device */
    @media screen and (min-width:576px){
        .nav_links{
            width: 60%;
        }
        .home_container{
            grid-template-columns: 350px;
            justify-content: center;

        }
        .home_data{
            text-align: center;
        }
        .project_content{
            display: row;
        }
    }
    
  /* for large device */
  @media screen and (min-width:1023px){
    header{
        margin: 2rem;
    }
    .nav{
        width: 100%;
        height: 3vh;

    }
    .font{
        display: none;
    }
    .nav_links{
        width: initial;
    }
    .nav_list{
        flex-direction: row;
        column-gap: 4rem;
    }
   
    .home_container{
        height: 100vh;
        display: flex;
        flex-direction: row;
        place-items: center;
        column-gap: 2rem;
        width: 100vw;
        margin-top: -120px;

    }
    .home_data{
        text-align: center;
    }
    .title{
        font-size: 3rem;
    }
    img{
        width:100vw;
        height: 40vh;
     }
     a{
        font-size: 1.25rem;
     }
     .nav_logo{
        font-size: 2rem;
     }

  }
  /* social */
  .social{
    text-align: center;
  }
  .socila_list{
    display: flex;
    justify-content: center;
  }
  .social_link{
    padding: 23px;
    font-size: 1.75rem;


  }
  i{
    color: gray;
  }

  section{
    padding-top: 4rem;
  }
  /* about */
  .about_container{
    height:100%;
    width: 80%;
    border: 2px solid black;
    border-radius: 12px;
    margin: 2rem 4rem;
    padding: 2rem;

  }

  /* services */
  .services_container{
    grid-template-columns: 250px;
    justify-content: center;
    row-gap:2rem;
    padding-top: 1 rem;
    margin: 2rem 4rem;

  }
  .title{
    text-align: center;
  }
  .services_card{
    position: relative;
  }
  .services_content{
    height: 100%;

    box-shadow:3px 0 16px hsla(0,0%,0%,.16);
    padding: 1rem 3rem;
    margin: 2rem;
    text-align: center;
  }
  .services_title{
    font-size: 1.25rem;
  }
  .servoces_description{
    color: grey;
    font-size: 1rem;
  }
  /* project */
  .project_container{
    height: 100%;
    box-shadow: 4px 0 17px hsla(0,0%,0%,.16);
    width: 100vw;
  }
  .project_content{
    padding:3rem;
    border:1px  solid black;
    margin:2rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
  }
p{
    color: gray;
}
.form{
    box-shadow: 4px 0 17px hsla(0,0%,0%,.16);
    text-align: center;
     
}
input{
    width:70%;
    height: 5vh;
    border-radius: 12px;
    text-align: center;
}
button{
 width:20vw;
 height: 4vh;
 background-color: rgb(145, 145, 176);
 margin-top: 1rem;
 border-radius: 12px;
 font-size: 22px;
 color: white;
}
footer{
    background-color: black;
    color:white;
    margin-top: 3rem;
    
}
.fot_links{
    display: flex;
    justify-content: center;
    column-gap: 2rem;
    

}

.footer_link{
    color: white;
    
}
.name{
    color: white;
}
.copy{
    text-align: center;
}