/* @import url(utilities.css); */
    
    @import 'utilities.css';
    @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
    /* create var root */
    
     :root {
        --primary: #3dcfde;
        --dark: #161616;
        --pure: #ffffff;
        --ternary: #898989;
        --light: #f2f2f2;
        --secondary: #070606;
    }
    
    body {
        font-family: 'Poppins', sans-serif;
    }
    
    html{
        scroll-behavior: smooth;
    }

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        -webkit-font-smoothiing: antialiased;
    }
    
    header {
        background: var(--dark);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 87%, 0% 100%);
        /* height: 750px; */
    }
    
    .container {
        max-width: 1152px;
        padding: 0 10px;
        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;
    }
    
    header nav .branding {
        font-family: 'Varela Round', sans-serif;
        letter-spacing: 10px;
        font: bolder;
        font-size: 1.6rem;
        /* font-weight: 10000; */
        background: var(--light);
        margin-right: 3rem;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin-right: 5rem;
    }
    
    header nav h1 {
        color: var(--primary);
    }
    
    header nav h1 span {
        color: var(--dark);
    }
    
    .hero {
        padding: 2rem 0;
        /* padding-bottom: 50rem; */
    }
    
    .hero .left img {
        width: 425px;
        /* height: 550px */
        margin-top: -2rem;
        margin-bottom: -1.6rem;
    }
    
    .hero .right {
        color: var(--pure);
        margin-top: -5rem;
    }
    
    .hero .right h6 {
        font-size: 1.6rem;
        color: var(--primary);
        text-transform: uppercase;
        margin-bottom: 0.5rem;
    }
    
    .hero .right h1 {
        font-size: 3.7rem;
        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;
    }
    
    section {
        padding: 4rem 0;
    }
    
    section.about .about-me-img {
        height: 450px;
        padding-right: 4rem;
        padding-left: 4rem;
    }
    
    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;
        text-transform: uppercase;
    }
    
    section.about p {
        font-family: 'Lato', sans-serif;
        color: var(--ternary);
        line-height: 1.8;
        margin-bottom: 2rem;
    }
    
    section.about .social {
        display: flex;
    }
    
    section.about .social a {
        background: var(--pure);
        display: flex;
        /* align-items: center; */
        justify-content: center;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin-right: 0.6rem;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
    }
    
    section.about .social a:hover {
        background: var(--primary);
        /* color: red; */
        
    }
    
    section.about .social .a2 {
        width: 38px;
    }
    
    section.about .social .a3 {
        width: 40px;
    }


    .section-heading {
        color: var(--secondary);
        text-align: center;
        margin-bottom: 1rem;
        line-height: 0.5px;
    }
    
    .section-heading span {
        color: var(--primary);
    }
    
    .section-heading+p {
        color: var(--ternary);
        font-family: 'Lato', sans-serif;
        margin-bottom: 4rem;
        text-align: center;
    }
    
    section.skills {
        background: var(--light);
    }
    
    section.skills .card img {
        width: 50px;
        height: 50px;
    }
    
    section.skills .card-img {
        background: var(--primary);
        padding: 8px;
        padding-left: 10px;
        padding-right: 10px;
        /* margin: ; */
        position: absolute;
        top: -30px;
        left: 80px;
        transform: translateX(70%);
        border-radius: 5%;
    }
    
    section.skills .card-wrapper .card {
        background: var(--pure);
        padding: 3rem 2rem;
        margin: 1.5rem;
        position: relative;
        padding-top: 5rem;
        text-align: center;
        transition: all .3s ease;
    }
    
    section.skills .card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* grid-template-columns: 1fr 1fr 1fr; */
        grid-column-gap: 1rem;
        grid-row-gap: 2rem;
    }

    section.skills .card h2 {
        font-weight: 400;
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }
    
    section.skills .card p {
        font-family: 'Lato', sans-serif;
        color: var(--ternary);
        line-height: 1.6rem;
    }
    
    section.skills .card:hover {
        background: var(--dark);
    }
    
    section.skills .card:hover h2,
    section.skills .card:hover p {
        color: var(--pure);
    }
    
    section.freelancer {
        text-align: center;
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/camera.png');
        /* oposity */
        color: var(--pure);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 66% 82%, 0% 100%);
        padding-bottom: 13rem;
    }
    
    section.freelancer h1 {
        font: 2rem;
        margin-bottom: 2rem;
    }
    
    section.freelancer p {
        margin-bottom: 2rem;
        font-family: 'Lato', sans-serif;
    }
    
    .certificate-heading span {
        color: var(--primary);
    }
    
    .certificate-heading {
        color: var(--secondary);
        text-align: center;
        line-height: 0.5;
    }
    
    .certificate-heading+p {
        color: var(--ternary);
        font-family: 'Lato', sans-serif;
        margin-top: 1rem;
        margin-bottom: 3rem;
        text-align: center;
    }
    
    .reviews .slider .slide img {
        width: 550px;
        height: 450px;
        border-radius: 50;
        object-fit: cover;
        border: 1px solid var(--dark);
    }
    
    .reviews .slide {
        text-align: center;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    .slide-2 {
        width: 560px;
        height: 460px;
        background: var(--primary);
        padding-left: 3.5px;
        padding-top: 0.2rem;
        border-radius: 5px;
        box-shadow: 10px 10px var(--ternary);
        border: 2px solid var(--dark);
    }
    
    .slide-2+p {
        padding-top: 1rem;
    }
    
    .reviews .slider .slide p {
        font-family: 'Lato', sans-serif;
        color: var(--ternary);
        margin-bottom: 0.2rem;
    }
    
    .reviews .slider .slide span {
        font-size: 0.8rem;
    }
    
    .reviews .slider-dots .dots {
        list-style-type: none;
        display: flex! important;
        justify-content: center;
    }
    
    .reviews .slider-dots {
        margin-top: 0.5rem;
    }
    
    .reviews .slider-dots button {
        border: 2px solid red;
        font-size: 0;
        width: 8px;
        height: 5px;
        margin-right: 0.3rem;
        border: none;
        outline: none;
        background: var(--ternary);
        border-radius: 100%;
        cursor: pointer;
        height: 6px;
    }
    
    .reviews .dots li.slick-active button {
        background: var(--primary);
        width: 20px;
        height: 6px;
    }
    
    section.work {
        background: var(--light);
    }
    
    section.work .card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 2rem;
    }
    
    section.work .card-wrapper .card {
        position: relative;
        height: 250px;
    }
    
    section.work .card-wrapper .card .overlay {
        padding: 5rem;
        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: var(--light);
        opacity: 0;
    }
    
    section.work .card-wrapper .card:hover .overlay {
        opacity: 1;
        transition: all .3s ease;
    }
    
    section.work .card-wrapper .card .overlay a {
        color: var(--secondary);
        text-decoration: none;
        text-align: center;
    }
    
    section.work .card-wrapper .card img {
        height: 100%;
        width: 100%;
    }
    
    section.contact .card-wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 3rem;
    }
    
    section.contact .card-wrapper .card {
        text-align: center;
    }
    
    section.contact .card-wrapper .card img {
        margin-bottom: 3rem;
    }
    
    section.contact .card-wrapper .card h1 {
        font-weight: 400;
        margin-bottom: 1rem;
    }
    
    section.contact .card-wrapper .card h6 {
        font-size: 1rem;
        color: var(--ternar);
        font-weight: 400;
        margin-bottom: 4rem;
    }
    
    section.contact .input-wrap {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        font-weight: 400;
        grid-gap: 2rem;
        margin-bottom: 1.7rem;
    }
    
    section.contact .input-wrap-2 {
        display: flex;
        flex-direction: column;
    }
    
    section.contact .input-wrap input {
        border: 3px solid var(--light);
        padding: 0.5rem;
        font-size: 0.8 rem;
    }
    
    section.contact .input-wrap-2 input {
        border: 3px solid var(--light);
        padding: 0.5rem;
        font-size: 0.8 rem;
    }
    
    section.contact .input-wrap-2 textarea {
        padding: 0.5rem;
        border: 3px solid var(--light);
        font-size: 0.8 rem;
        margin-top: 1.7rem;
    }
    
    section.contact .input-wrap-2 input:focus {
        outline: none;
    }
    
    section.contact .input-wrap-2 textarea:focus,
    section.contact .input-wrap input:focus {
        outline: none;
    }
    
    section.contact .btn-wrapper {
        align-items: center;
        text-align: center;
        margin-top: 2rem;
    }
    
    footer {
        background-color: var(--dark);
        text-align: center;
        padding: 1rem; 
    } 
    
    footer h1{
        color: var(--primary);
        padding-bottom: 6rem;
        margin-top: 0%;
        text-transform: uppercase;
    }

    .footer-logo{
        padding-bottom: 2rem;
    }

      footer .footer-social a{
        color: var(--light);
        /* text-decoration: none; */
        height:40px;
        width: 40px;
        background-color: var(--secondary);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin-right: 0.6rem;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
      }

      /*footer .footer-social img{
        /* color: var(--light); */
        /* text-decoration: none; */
       /* height:40px;
        width: 40px;
        background-color: var(--secondary);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin-right: 0.6rem;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
      } */

      .fa {
        padding: 20px;
        font-size: 25px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        margin: 5px 2px;
        padding-top: 8px;
        padding-left: 11px;
      }
      footer .footer-social a:hover{
        color:var(--primary);
        height: 40.2px;
        width: 40.2px;
        /* width: 100px; */
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        margin-right: 0.6rem;
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
      }

    
    
   
    footer .copyright {
        margin-top: 3rem;
        color: var(--ternary);
    }
    footer .span{
        color:var(--ternary)
    }
    

    /* blink {
        animation: blinker 0.6s linear infinite;
        color: var(--primary);
    } */

    blink {
        animation: blinker 1s linear infinite;
        color: var(--primary);
       }
      @keyframes blinker {  
        50% { opacity: 0; }
       }
       .blink-one {
         animation: blinker-one 1s linear infinite;
       }
       @keyframes blinker-one {  
         0% { opacity: 0; }
       }
       .blink-two {
         animation: blinker-two 4s linear infinite;
       }
       @keyframes blinker-two {  
         100% { opacity: 0; }
       }