@charset "utf-8";
/* CSS Document */
body{
 background-color:#f6f5f5;
 margin:0px;
 padding:0px;
}
ul{
 list-style:none;
}
a{
 text-decoration:none;
}
section{
 width:100%;
 height:95vh;
 background-image:url("images/bg.png");
 background-size:cover;
 background-repeat:no-repeat;
 position: relative;
}
nav {
 display: flex;
 justify-content: space-between;
 align-items:center;
 height:60px;
 background-color:#ffffff;
 box-shadow:2px 2px 12px rgba(0,0,0,0.2);
 padding:0px 5%;
 
}
nav ul{
 display: flex;
}
 
 
nav ul li a{
 margin:30px;
 font-family:myriad pro regular;
 color:#505050;
 font-size: 15px;
 font-weight:700;
}
.logo{
 font-family:RoadTest;
 color:#000000;
 font-size: 22px;
}
.active{
 color:#2d2a2a;
 font-weight:bold;
}
.model{
 height:530px;
 position:absolute;
 bottom:40px;
 left:75%;
 transform: translateX(-75%);
}
.text-container p:nth-child(1){
 font-family: calibri;
 font-weight:bold;
 color:#6d6d6d;
 font-size:22px;
}
.text-container p:nth-child(2){
 font-family:calibri;
 font-weight:bold;
 letter-spacing:1px;
 color:#1a1a1a;
 font-size:60px;
 
}
.text-container p:nth-child(3){
 font-family: myriad pro regular;
 color: #403e3e;
 font-size:30px;
 line-height:30px;
}
 
.text-container p{
 margin:45px 0px 25px;
 line-height:0px;
}
.text-container button{
 width:130px;
 height:42px;
 border-radius:10px;
 font-family:calibri;
 font-weight:bold;
 font-size: 14px;
 outline:none;
 margin:0px 10px;
 
}
.text-container{
 position: absolute;
 left:13%;
 top:42%;
 transform:translate(-13%,-42%);
}
.hire-btn{
 border:2px solid #373636;
 color:#373636;
 background-color:transparent;
 
}
.down-cv{
 background-color:#0B0B0B;
 color:#fff; 
 border:none;
}
button:active{
 transform:scale(1.1);
}
.about-container{
 width:80%;
 height:330px;
 background:#ffffff;
 border-radius:20px;
 box-shadow:2px 2px 12px rgba(0,0,0,0.2);
 display: flex;
 margin: -7%  auto 20px auto;
 position: relative;
 justify-content:space-evenly;
 align-items: center;
}
.about-container img{
 height:250px;
}
.about-text{
 width:500px;
} 
.about-text p:nth-child(1){
 color:#403e3e;
 font-family: myriad pro;
 font-weight:bold;
 font-size:23px;
 line-height:0px;
}
.about-text p:nth-child(2){
 color:#3e3d3d;
 font-size:13px;
 font-family: myriad pro;
 font-weight:bold;
 line-height:5px;
}
.about-text p:nth-child(3),.about-text p:nth-child(4){
 color:#7e7d7d;
 font-family:calibri;
 font-size:16px;
}
.about-text button{
 width:120px;
 height: 40px;
 color:#ffffff;
 outline:none;
 border:none;
 font-family: calibri;
 background-color:#262525;
}
.services{
 height:600px;
 background-color:#ffffff;
 padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
 font-family: calibri;
 font-weight:bold;
 color:#1d1c1c;
 font-size:30px;
 line-height:0px;
}
.services-text p:nth-child(2){
 font-family:calibri;
 font-weight: bold;
 color:#3e3d3d;
 font-size: 15px;
 line-height: 5px;
}
.services-text p:nth-child(3){font-family:calibri;
color:#7e7d7d;
font-size:30px ;}
.services-text{
 width: 500px;
 margin:50px 500px;
}
.box-container{
 display:flex;
 justify-content:space-between;
}
.box-1,.box-2,.box-3{
 width: 300px;
 height:320px;
 background-repeat: no-repeat;
 background-size: cover;
 box-shadow:2px 2px 18px rgba(0,0,0,0.3);
 align-items: center;
 justify-content: center;
 display: flex;
 flex-direction: column;
 margin: 0px 4px;
 
 
}
 
.box-1{
 background-image:url("images/services-1.png");
}
.box-2{
 background-image:url("images/services-2.png");
}
.box-3{
 background-image: url("images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
 width:40px;
 height:40px;
 border-radius:50%;
 background-color:#ffffff;
 display: flex;
 justify-content: center;
 align-items:center;
 font-family: calibri;
 font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
 color:#FFFFFF;
 font-family: calibri;
 font-size: 23px;
 line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
 font-family: calibri;
 color:#8F8F8F;
 text-align:center;
 width: 230px;
 margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
 width:100px;
 height:30px;
 background-color:#FFFFFF;
 border:none;
 outline: none;
 border-radius:5px;
}
.contact-me{
 width: 100%;
 height:280px;
 background-size:cover;
 background-repeat:no-repeat;
 background-image: url("images/project in your mind.png");
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 margin: 0px 0px 20px 0px;
}
.contact-me p{
 color:#FFFFFF;
 font-size: 30px;
 font-family: calibri;
 font-weight:bold;
 border-bottom:2px solid #ffffff;
}
.contact-me button{
 width:200px;
 height:40px;
 background-color: #FFFFFF;
 border:none;
 outline:none;
 font-size:14px;
 font-weight:bold;
}
footer p{
 font-family: calibri;
}
footer p:nth-child(1){
 font-size: 30px;
 font-weight:bold;
 color:#191919;
 line-height:10px;
}
footer p:nth-child(2){
 font-size: 16px;
 color:#7e7d7d;
 width:600px;
 text-align: center;
}
footer{
 height:300px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 position: relative;
}
.social-icons a{
 width:40px;
 height:40px;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color:#e6e3e3;
 margin:20px 10px;
 border-radius:50%;
}
.social-icons{
 display: flex;
 
}
.social-icons i,.social i{
 color:#000000;
}
.social-icons a:hover{
 background-color:#000000;
 box-shadow:2px 2px 12px rgba(0,0,0,0.2);
 transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
 color:#FFFFFF;
 transition:all ease 0.5s;
}
 
.copyright{
 color:#565555;
 font-size: 12px;
 position: absolute;
 left:50%;
 bottom:10px;
 transform: translateX(-50%);
}
.social{
 position: fixed;
 top:50%;
 right:0px;
 transform:translateY(-50%);
}
.social a{
 display: flex;
 justify-content: center;
 align-items: center;
 width:50px;
 height:50px;
 margin:0px;
 padding: 0px;
 line-height:0px;
 background-color:#FFFFFF;
 border:1px solid #CBCBCB;
 box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}
.social a:hover{
 background-color:#000000;
 transition:all ease 0.5s;
}
.social i{
 font-size:20px;
 color:#2B2B2B;
}