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

/* profile */

.profile{
width: 40%;
float: right;
}


.profile img{
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom: 8px solid rgb(89, 192, 89);
}

.profile-info h1{
margin: 50px;
text-align: center;
color: blue;
}

.about{

margin: 50px;
padding: 10px;
color: darkcyan;
border: 6px double silver;
border-radius: 10px;

}




.profile-info{
width: 60%;
height: 100vh;
overflow: scroll;
overflow-x: hidden;
float: left;
}

.profile-info::-webkit-scrollbar{
    width: 0;
}


.social{
margin-left: 35px;

   
}


.social img{
width: 30px;
margin-left: 5px;
}

.services{
width: 28%;
display: inline-block;
box-shadow: 0 0 15px rgba(37, 73, 214, 0.18);
text-align: center;
margin: 4px;
margin-left: 36px;
border: 8px double silver;
border-radius: 10px;
transition: 2s ease;

}
.services:hover{
background-color: rgba(255, 127, 80, 0.473);
scale: 1.1;

}


.services img{
border-radius: 3px;
width: 100%;
margin-bottom: 10px;
cursor: pointer;
}

.services small{
display: block;
margin-top: 10px;
padding: 10px;
}

.profile-info h2{
margin: 50px;
color: darkcyan;

}


.profile-info h3{
color: deeppink;
margin: 50px;

}

.my-projects-works{
margin-left: 2%;
  
}

.my-projects-works img{
width: 31%;
margin: 5px;
border-radius: 10px ;
border: double 4px silver;
cursor: pointer;
}


/* form box  */

.form-box{
text-align: center;
margin-left: 5%;
}

.input-group input{
background-color: silver;
padding: 10px;
width: 45%;
outline: none;
border: 0;
margin: 2%;
display: inline-block;
border-radius: 4px;


}


.text-area textarea{

width: 95%;
outline: none;
border: 0;
margin: 2%;
border-radius: 4px;
background-color: silver;
padding: 10px;

}


.sub{

color: rgb(255, 255, 255);
outline: none;
border: 0;
margin: 2%;
border-radius: 4px;
background-color: rgba(4, 86, 209, 0.685);
padding: 10px;
cursor: pointer;

}


.profile-info h4{
margin: 50px;
color: rgb(243, 91, 3);
font-size: xx-large;
text-align: center;
}


.cont{
text-align: center;
margin-top: 20px;
margin-bottom: 30px;
}

.cont img{
width: 20px;
margin: -5px 10px;

}

.cont span{
color: rgb(4, 88, 243);
}

.copy{
text-align: center;
margin-bottom: 10ox;
color: rgb(117, 115, 115);

}


/* @media only screen and (max-width:900px){
 .profile{width: 100%;} 
  .profile-info{width: 95%;}  
.services{width: 95%; margin: 5%;}
.my-projects-works{width: 95%;text-align: center;}
.form-box{}


} */

@media screen  and (max-width:600px){
body{background-color: rgb(243, 239, 11);}
.profile{width: 100%;}
.profile-info{width: 95%;}
.services{width: 95%; margin: 5%;}
.my-projects-works{width: 95%;text-align: center;}

}


@media screen  and (min-width:601px) and (max-width:800px){
body{background-color: rgb(243, 11, 11);}
.profile{width: 100%;}
.profile-info{width: 95%;}
.services{width: 95%; margin: 5%;}
.my-projects-works{width: 95%;text-align: center;}

}




@media screen  and (min-width:801px) and (max-width:1100px){
body{background-color: rgb(38, 243, 11);}
.profile{width: 100%;}
.profile-info{width: 95%;}
.services{width: 29%; margin: 2%; }
.my-projects-works{width: 95%;text-align: center;}

}