@import './utilities.css';
#logo{
    height: 60px;
    width: 150px;
    margin-right: 2rem;
}
body{
    /* height: 8000px; */
}
#man{
    margin-top: 50px;  
    width: 400px;
    height: 500px;
    /* border: solid transparent;
    border-radius: 450px; */
    border: fade;
}
:root{
    --primary:#4475e7;
    --dark: black;
    --pure:#FFFFFF;
    --ternary:#898989;
    --light:#F2F2F2;
    --secondary:#070606;

}
/* body{
    background: black;
} */
header{
    background: var(--dark);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 87%, 0 100%);

    /* height: 600px; */
    /* align-items: stretch; */
}
/* .black1{
    background : var(--dark);
} */
*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}
.container{
    max-width: 1152px;
    padding: 0 15px;
    margin: 0 auto;


}
header{
    background: var(--dark);
}
header nav .left a{
    transition: all .2s;
    color: var(--pure);
    text-decoration: none;
    margin-right: 4rem; 
    text-transform: uppercase;
}
header nav .left a:hover{
    color: var(--primary);
}
header nav{
    margin-top: 2rem;
}
body{
    font-family: 'poppins';
}
.Name{
    color: var(--pure);
    margin-left: 50px;
}
.hero .right span{
    color: var(--primary);
}
.hero .right{
    margin-top: -7rem;
}
.hero{
    padding: 3rem 0;
}
#man-2{
       border-radius: -0.5rem;
    width: 300px;
/* border-radius: 20%; */
box-shadow: 0 30px 40px rgba(0,0,0,.1);
}
#man-2:hover{
    background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)), transparent;
}

section{
    padding: 6rem 0;
    /* border: solid var(--primary);
    box-sizing: border-box; */
    margin-right: 14rem;
}
.logos{
    width: 45px;
    margin-right: 1rem;
    margin-top: 1rem;
    border-radius: 50%;
    padding: .4rem;
}
.logos:hover{
    /* background: grey; */
    color: var(--primary);
    border-radius: 50%;
    transform: scale(1.2);
    transition: .35s ease;
}
.flex-1 span{
    color: var(--primary);
}
.section-heading{
    color: var(--secondary);
    text-align: center;
    margin-bottom: 1rem;
    margin-top: rem;
    line-height: 0.2;
    margin-left: 12rem;
}
.services span{
    color: var(--primary);
}
.section-heading + p{
    color: var(--ternary);
    font-family: 'lato', sans-serif;
    margin-bottom: 8rem;
    text-align: center;
    
}
section.services .card-wrapper{
    margin-left: 14rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 1rem;    
    grid-row-gap: 3rem;    
    
}
section.services{
    background: var(--light);
    width: 100%;

}
section.services .card-wrapper .card{
 background-color: var(--pure);
    padding: 3rem 1rem;
    position: relative;
    padding-top: 4rem;
    border-radius: .5rem;
    text-align: center;
    height: 240px;
    margin-bottom: 4rem; 
    
}
section.services .card-wrapper .card img{
    width: 54px;
    position: absolute;
    top: -1.5rem;
    right: 50%;
    transform: translateX(50%);
    border-radius: 50%;
}
.services .container #headingpara{
    /* margin-left: 12rem; */
    padding-top: 2rem;
    text-align: center  ;
}
section.services .card-wrapper .card h2{
    font-weight: 400;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
section.services .card-wrapper .card p{
    font-family: 'lato' sans-serif;
    /* color: var(--ternary); */
    line-height: 1.6;
}
section.services .card-wrapper .card:hover{
    background: var(--ternary);
    color: var(--light);
    transition: all.3s ease;
    transform: scale(1.07);
    transition: .3s ease;
}
section.freelancer{
        text-align: center;
        background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(./camera.jpg);
        color: var(--light);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 70%80%, 0 100%);
        height: 550px;
        width: 100%;
        padding-top: 7rem;
        padding-bottom: 14rem;
}
.container.section-heading{
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateX(-50%);
}
.freelancer p {
    dev agarwal dev agarwaldevv 
    margin-top: 1rem    ;
    
}
.freelancer .btn{
    margin-top: 2rem    ;

}
section.freelancer h1{ 
    margin-top: 2rem;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
section.freelancer p{
    margin-bottom: 2rem;
    font-family: 'lato' sans-serif;
}
.services.section-heading{
    margin-right: 8rem;
    position: relative;
    top: 1rem;
    right: 2rem;
}
.card-wrapper{
    /*  */
    align-self: center;
    position: relative;
    right: 6rem;
    
}
.card-wrapper .btn1 {
    border: none;
}
.contact .card-wrapper .card img{
    width: 30px;
    /* margin-right: 2rem; */
    /* display: grid; */
    /* grid-template-columns: repeat(3, 1fr); */

}
section.contact .card-wrapper{
        display: flex;
         margin-left: 20rem;
        
        padding: 10px;
        
      }
      .contact .card-wrapper .card{
          width: 250px;
          margin-right: 8rem;
      }
      .contact {
          margin-left: 12rem;
          /* display: gr; */
          /* grid-template-columns: repeat(3 ,1fr); */
          margin-bottom: 3rem;      }
          .contact span{
              color: var(--primary);
          }
          .contact p{
              font-size: 20px;
              margin-bottom: 2rem;
          }

    
section.contact .input-wrap{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 2rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
    

}
.contact.section-heading{
    margin-top: 2rem;
}
.contact .card-wrapper .card .email-link{
    color: black;
    text-decoration: none;
}

section.contact .input-wrap-2{
    display: flex;
    flex-direction: column;

}

section.contact input{
    width: 500px;
    padding: .5rem;
    border: 1px solid var(--ternary);

}   

section.contact .input-wrap-2 input{
    margin-bottom: 2rem;
    border: 1px solid var(--ternary);
    font-size: .8rem;
}

section.contact .input-wrap-2 textarea{
    padding: .5rem;
    border: 1px solid var(--ternary);
    font-size: 0.9rem;
    margin-bottom: 2rem

    /* margin-top: 2rem; */
}
section.contact input:focus{
    outline: none;
}
section.contact .input-wrap-2 textarea:focus{
    outline: none;
    
}
section.contact .btn.btn-primmary button{
    margin-left: 12rem;
    
}
footer{
    background: var(--dark);
    clip-path: polygon(0 0, 70% 20% ,80% 20%, 100% 0, 100% 100%, 0 100%);
    text-align: center;
    padding-top: 5rem ;
    padding-bottom: 3rem;
    color: var(--ternary);
}
footer .branding{
    margin-bottom: 1rem;
    

}
footer .footer-socials a{
    margin-right: 1rem;
    
}
footer .footer-socials {
    margin-bottom: 1rem;
    margin-right: -1.5rem
    
}
footer .copyright{
    margin-top: 1rem;
    font-size: 12px;
    position: relative;
    right: .5rem;
}
footer .copyright{
    margin-top:0;
}
.last_line{
    text-align: center;
}