@import 'utilities.css';

:root{
    --primary:#3DCFD3;
    --dark:#161616;
    --pure:#FFFFFF;
    --ternary:#898989;
    --light:#F2F2F2;

}
body{
    font-fmaily:'Poppins',sans-serif;
}
*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    -webkit-font-smotthing:antialiased:
}
header{
    background: black;
    clip-path:polygon(0 0,100% 0,100% 80%, 65% 92%,0 80%);
}
.container{
    max-width:1152px;
    padding:0 15px;
    margin:0  auto;
}

header nav .left a{
    color:var(--pure);
    text-decoration:none;
    margin-right:2rem;
    text-transform:uppercase;
    transition:all .3s ease;
}
header nav .left a:hover{
    color:var(--primary);
}

header nav {
    padding:2rem 0;
}

header nav .branding {
    margin-right:3rem;
}
.hero{
    padding:3rem 0;
}
.hero .left img{
    width:300px;
}
.hero .right{
    color:var(--pure);
    margin:2rem;
}
.hero .right h5{
    color:var(--primary);
}

.hero .right h1{
    font-size:3rem;
    font-weight:100;
    line-height:1.2;
    margin-bottom:2rem;
}
.hero .right h1 span{
    color:var(--primary);
}
.hero .right p{
    line-height:1.9rem;
    margin-bottom:2rem;
}
.hero .right{
    margin-top:-7rem;
}
section{
    padding:3rem 0;
}
section.about .about-me-img{
    height:450px;
}
section.about h1{
    margin-bottom:1rem;
    font-size:1.6rem;
    font-weight:400;
}
section.about h1 span{
    color:var(--primary);
}
section.about h3{
    font-size:1rem;
    margin-bottom:1rem;
    font-weight:400;
}
section.about p{
    font-family:'Lato', sans-serif;
    color:var(--ternary);
    line-height:1.9;
}
section.about .social{
    display:flex;
    margin:0.5rem;
}
section.about img{
    border-radius:50%;
}
.card{
    box-shadow:10px 10px 10px ;
}
.section-heading{
    color:var(--secondary);
    text-align:center;
    margin-bottom:1rem;
    line-height:0.5;
}
.skills{
     background:#e6e6e6;
}
.section-heading span{
 color:var(--primary);
}
.section-heading + p{
    color:var(--ternary);
    font-family:'Lato', sans-serif;
    margin-bottom:1rem;
    text-align:center;
}
.card:hover{
    background:#8c8c8c;
    transition:all 0.3 ease;
}
section.free{
    color:var(--secondary);
    text-align:center;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
    clip-path:polygon(0 0,100% 0,100% 100%, 67% 70%,0 100%);
}
section.free pre{
    color:white;
    font-family:'Lato', sans-serif;
    word-spacing:2.5px;
    letter-spacing:.5px;
}
section.free span{
  color:var(--primary);
}
section.contact .section-heading{
    padding-bottom: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:0.5rem;
    margin-bottom:2rem;
}
.form-control:focus {
    box-shadow: none;
}
.footer {
    background: #111;
    color: var(--primary);
    text-align: center;
    padding: 2.5em 0;
    font-size:25px;

}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 2em 0 0;
    padding: 0;
}

.social-list__item {
    margin: 0 .5em;
}

.social-list__link {
    padding: .5em;
}
@media screen and (max-width: 576px) {
header nav .left a{
    color:var(--pure);
    text-decoration:none;
    margin-right:5px;
    font-size:10px;
    text-transform:uppercase;
    transition:all .3s ease;
}
header nav .left a:hover{
    color:var(--primary);
}

header nav {
    padding:5px 0;
}
header nav .branding {
    margin-right:5px;
}
header nav .right .btn{
    font-size:10px;
}
.container{
    max-width:600px;
    margin:0  auto;
}
.hero{
    padding:0.5rem 0;
}
.hero .left img{
    width:180px;
}
.hero .right{
    color:var(--pure);
    margin:1rem;
}
.hero .right h5{
    color:var(--primary);
    font-size:14px;
    margin-bottom:0.7rem;
}
.hero .right h1{
    font-size:10px;
    font-weight:100;
    line-height:1px;
    margin-bottom:13px;
}
.hero .right pre{
    font-size:8px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: justify;
}
}
.hero .right .work-btn .btn{
    font-size:10px;
}
section{
    padding:0.5rem 0;
}
section.about .about-me-img{
    height:180px;
}
section.about h1{
    margin-bottom:0.5rem;
    font-size:1.3rem;
    font-weight:400;
}
section.about h1 span{
    color:var(--primary);
}
section.about h3{
    font-size:0.9rem;
    margin-bottom:0.7rem;
    font-weight:400;
}
section.about p{
    font-family:'Lato', sans-serif;
    color:var(--ternary);
    line-height:1.7;
    font-size:13px;
}
section.about .social{
    display:flex;
    margin:0.5rem;
}
section.about img{
    border-radius:50%;
}
.card{
    box-shadow:5px 5px 5px ;
}
.section-heading{
    color:var(--secondary);
    text-align:center;
    margin-bottom:1rem;
    line-height:0.2;
}
.skills{
     background:#e6e6e6;
}
.skills h2{
    margin-top:0.4rem;
    font-size:1.3rem;
    margin-bottom:0.7rem;
    font-weight:400;
}
.skills p{
    font-size:0.9rem;
    margin-bottom:1rem;
}
.section-heading span{
 color:var(--primary);
}
.section-heading + p{
    color:var(--ternary);
    font-family:'Lato', sans-serif;
    margin-bottom:0.3rem;
    text-align:center;
}
.card:hover{
    background:#8c8c8c;
    transition:all 0.3 ease;
}
.row {
   display: flex;
   flex-wrap: wrap;
}

.row > div[class*='col-'] {
  display: flex;
}
section.free{
    color:var(--secondary);
    text-align:center;
    background-image:linear-gradient(rgba(0,0,0,0.7),rgba(0,0,0,0.7));
    clip-path:polygon(0 0,100% 0,100% 100%, 67% 77%,0 100%);
}
section.free h2{
    font-size:1.3rem;
    margin-bottom:0.4rem;
    font-weight:400;
}
section.free pre{
    color:white;
    font-family:'Lato', sans-serif;
    word-spacing:1.2px;
    letter-spacing:0.2px;
    font-size:10px;
}
section.free span{
  color:var(--primary);
}
section.contact .section-heading{
    padding-bottom:1rem;
}
section.contact .input-wrap{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:1rem;
    margin-bottom:1rem;
}
section.contact .input-wrap-2{
    display:flex;
    flex-direction:column;
}
section.contact .input-wrap-2 input{
    margin-bottom:1rem;
}
section.contact .input{
    padding:1rem;
}
section.contact .input-wrap-2 textarea{
    padding:0.5rem;
    margin-bottom:1rem;
}
.form-control:focus {
    box-shadow: none;
}
section.contact .send-btn .btn{
    font-size:14px;
}
.footer {
    background: #111;
    color: var(--primary);
    text-align: center;
    padding: 2em 0;
    font-size:19px;

}

.footer a {
    color: inherit;
    text-decoration: none;
}

.footer__link {
    font-weight: var(--fw-bold);
}

.footer__link:hover,
.social-list__link:hover {
    opacity: .7;
}

.footer__link:hover {
    text-decoration: underline;
}

.social-list {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 1.5em 0 0;
    padding: 0;
}

.social-list__item {
    margin: 0 .5em;
}

.social-list__link {
    padding: .5em;
}
footer p{
    font-size:12px;
}
}