portfolio.css

:root{
--primary:#3DCFD3;
--dark:#161616;
--pure:#FFFFFF;
--ternary:#898989;
--light:#F2F2F2;
--secondary:#070606;
}
html{
scroll-behavior:smooth;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-font-smoothing:antialiased;
}
header{
background:#161616;
clip-path:polygon(0 0, 100% 0, 100% 100%, 75% 85%, 0 100%);
}
.container{
max-width:1152px;
padding:0 15px;
margin:0 auto;
}
header nav .left a{
color:#FFFFFF;
text-decoration:none;
margin-right:3rem;
text-transform:uppercase;
transition:all .3s ease;
}
.flex{
display:flex;
align-items:center;
justify-content:space-between;
}
.left{
display:flex;
align-items:center;
}
header nav{
padding:2rem 0;
}
header nav .branding{
margin-right:5rem;
}
header nav .left a:hover{
color:#3DCFD3;
}
.btn-primary{
padding:0.8rem 2rem;
font-size:1rem;
font-weight:600;
border:2px solid transparent;
outline:none;
border-radius:5px;
cursor:pointer;
background:#3DCFD3;
color:black;
text-transform:uppercase;
}
.btn-primary:hover{
background:transparent;
border-color:#3DCFD3;
color:#3DCFD3;
}
.hero{
padding:3rem 0;
display:flex;
align-items:center;
}
.hero .lefth{
flex:1;
display:flex;
justify-content:center;
}
.hero .lefth img{
width:240px;
}
.hero .righth{
flex:1;
color:#FFFFFF;
margin-top:-7rem;
}
.hero .righth h6{
font-size:1.6rem;
color:#3DCFD3;
margin-bottom:0.5rem;
}
.hero .righth h1{
font-size:4rem;
font-weight:100;
line-height:0.9;
margin-bottom:1rem;
}
.designer{
color:#3DCFD3;
}
.hero .righth p{
line-height:1.9;
margin-bottom:1rem;
}
.hero .righth .btn-secondary{
padding:0.8rem 2rem;
font-size:1rem;
font-weight:600;
border:2px solid #3DCFD3;
outline:none;
border-radius:5px;
cursor:pointer;
background:transparent;
color:#3DCFD3;
text-transform:uppercase;
}
.hero .righth .btn-secondary:hover{
background:#3DCFD3;
color:black;
}
section{
padding:6rem 0;
}
img{

}
.container1{
flex:1;
display:flex;
align-items:center;
}
.man2{
flex:1;
text-align:center;
justify-content:center;
}
.aboutme{
flex:1;
}
.imageman2{
height:290px;
}
section .aboutme h1{
margin-bottom:1rem;
font-size:1.6rem;
font-weight:400;
}
section .aboutme h1 span{
color:#3DCFD3;
}
section .aboutme h3{
font-size:1.2rem;
margin-bottom:1rem;
font-weight:400;
}
section .aboutme p{
font-family:'Lato';
color:#898989;
line-height:1.8;
margin-bottom:0.9rem;
}
section .social a{
float:left;
align-items:center;
justify-content:center;
width:50px;
height:25px;
padding:5px;
}


.section-heading{
color:#070606;
text-align:center;
margin-bottom:1rem;
line-height:0.5;
}
.section-heading span{
color:#3DCFD3;
}
.section-heading + p{
color:#898989;
font-family:'Lato';
margin-bottom:6rem;
text-align:center;
}
section.services{
background:#F2F2F2;
}
section.services .card-wrapper{
display:grid;
grid-template-columns:1fr 1fr 1fr;
grid-column-gap:2rem;
grid-row-gap:6rem;
}
section.services .card-wrapper .card{
background:#FFFFFF;
padding:3rem 2rem;
position:relative;
padding-top:6rem;
text-align:center;
}
section.services .card-wrapper .card img{
position: absolute;
top:-3.0rem;
left:35%;
}
section.services .card-wrapper .card h2{
foont-weight:400;
font-size:1.2rem;
margin-bottom:0.5rem;
}
section.services .card-wrapper .card p{
font-familt:'Lato';
color:#898989;
line-height:1.6;
}
section.services .card-wrapper .card:hover{
background:#161616;
}
section.services .card-wrapper .card:hover h2,section.services .card-wrapper .card:hover p{
color:#FFFFFF;
}
section.freelancer{
text-align:center;
background:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7)),url(./images/camera.png);
color:#FFFFFF;
clip-path:polygon(0 0, 100% 0, 100% 100%, 70% 75%, 0 100%);
padding-bottom:8rem;
}
section.freelancer h1{
font-size:2rem;
margin-bottom:2rem
}
section.freelancer p{
margin-bottom:1.5rem;
font-family:Lato;
}
section.freelancer .third-button{
padding:0.8rem 2rem;
font-size:1rem;
font-weight:600;
border:2px solid #3DCFD3;
outline:none;
border-radius:5px;
cursor:pointer;
background:transparent;
color:#3DCFD3;
text-transform:uppercase;
}
section.freelancer .third-button:hover{
background:#3DCFD3;
color:black;
}

section.reviews .container2{
color:#070606;
text-align:center;
margin-bottom:2rem;
line-height:1.6;
}
section.reviews .container2 h1 span{
color:#3DCFD3;
}
section.reviews .slider .slide img{
margin-bottom:1.2rem;
}
section.reviews .slider .slide{
text-align:center;
display:flex;
align-items:center;
flex-direction:column;
padding:0 8rem;
}
section.reviews .slider .slide p{
font-family:'Lato';
color:#898989;
margin-bottom:1rem;
}
section.reviews .slider .slide span{
font-size:0.9rem;
}
section.reviews .slider-dots .dots{
list-style-type:none;
display:flex;
justify-content:center;
}
section.reviews .slider-dots{
margin-top:1.2rem;
}
section.reviews .slider-dots button{
font-size:0;
width:8px;
height:8px;
margin-right:0.3rem;
border:none;
outline:none;
background:#898989;
border-radius:50px;
cursor:pointer;
}
section.reviews .dots li.slick-active button{
background:#3DCFD3;
}

section.work{
background:#F2F2F2;
}
section.work .container4{
color:#070606;
text-align:center;
margin-bottom:2rem;
line-height:2;
}
section.work .container4 p{
margin-bottom:2rem;
}
section.work span{
color:#3DCFD3;
}
section.work .card-wrapper1{
padding:35px;
display:grid;
grid-template-columns:repeat(3,0.5fr);
grid-gap:0.5rem;
}
section.work .card-wrapper1 .card{
position:relative;
}
section.work .card-wrapper1 .card .overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(61,207,211,0.9);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
color:#F2F2F2;
opacity:0;
}
section.work .card-wrapper1 .card:hover .overlay{
opacity:1;
}
section.work .card-wrapper1 .card .overlay a{
color:#070606;
text-decoration:none;
}
section.work .card-wrapper1 .card img{
height:100%;
width:100%;
}
section.blog{
background:#161616;
clip-path:polygon(0 0, 100% 0, 100% 100%, 75% 90%, 0 100%);
}
section.blog .man5{
color:#FFFFFF;
text-align:center;
margin-bottom:1rem;
}
section.blog span{
color:#3DCFD3;
}
section.blog .white{
color:#FFFFFF;
}
section.blog p{
text-align:center;
margin-bottom:2rem;
}
section.blog .card-wrapper2{
display:grid;
grid-template-columns:repeat(3,1fr);
grid-gap:3rem;
}
section.blog .card-wrapper2 .card{
background:#FFFFFF;
}
section.blog .card-wrapper2 .card .img-wrapper img{
width:100%;
height:100%;
object-fit:cover;
}
section.blog .card-wrapper2 .card .card-content{
padding:2rem;
}
section.blog .card-wrapper2 .card .card-content h1{
font-size:1rem;
font-weight:600;
}
section.blog .card-wrapper2 .card .card-content a{
color:#070606;
text-decoration:none;
}

section.contact .contact1{
text-align:center;
}
section.contact span{
color:#3DCFD3;
}
section.contact p{
text-align:center;
}
section.contact .card-wrapper{
display:grid;
grid-template-columns:repeat(3,1fr);
margin-bottom:3rem;
}
section.contact .card-wrapper .card{
text-align:center;
}
section.contact .card-wrapper .card img{
margin-bottom:1.2rem;
}

section.contact .input-wrap{
display:grid;
grid-template-columns:repeat(2,1fr);
grid-gap:2rem;
margin-bottom:2rem;
}
section.contact .input-wrap-2{
display:flex;
flex-direction:column;
}
section.contact .input-wrap-2 input{
margin-bottom:2rem;
}
section.contact input{
padding:1rem;
}
section.contact .input-wrap-2 textarea{
padding:1rem;
}
section.contact .btnmes{
padding:0.8rem 2rem;
font-size:1rem;
font-weight:600;
border:2px solid transparent;
outline:none;
border-radius:5px;
cursor:pointer;
background:#3DCFD3;
color:black;
text-transform:uppercase;
}
section.contact .btn-wrapper{
text-align:center;
margin-top:2rem;
}
footer{
background:#161616;
text-align:center;
padding:5rem 0;
}
footer .footer-logo{
margin-bottom:2rem;
}
footer .copyright{
color:white;
}