@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Space Grotesk', sans-serif;
    color: white;
}
.hero-sec{
    padding: 2rem 12rem;
    width: 100%;
    background: url(../images/lukebanner.png);
    background-repeat: no-repeat;
    background-color: black;
    background-position:center ;
    background-size: cover;
    
    height: 100vh;
}
nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 10vh;
}
a{
    text-decoration: none;
    color: white;
}
.navlogo{
    font-size: 2.4rem;
    font-weight: 800;
}
.social-icon img{
    color: white;
    padding: 0 0.4rem;
    width: 30px;
    height: 20px;
}
/* HERO CONTENT */
.hero-content{
    margin-top:6rem ;
}
.hero-content h1{
    font-size:5rem;
    padding-bottom: 2.5rem;
}
.hero-content p{
    font-size: 1.2rem;
    /* outline: 1px solid red; */
    width: 55%;
    line-height: 1.6;
    padding-bottom: 4rem;
}
.icon{
    font-size: 1.5rem;
    padding: 0 0.5rem;
    color: white;
}
.icon:hover{
    color: #4ee39f;
   translate: 0% 10%;
   transition: all 0.3s ease-out;
}
span{
    position: relative;
    /* text-decoration: underline #4ee39f ; */
}
span:after{
    position: absolute;
    content: "";
    height: 3px;
    bottom: -3px;
    left: 0;
    width: 20%;
    transform: scaleX(1);
    transform-origin: bottom left;
    transition: 0.25s ease-out;
    background-color: #4ee39f;
}
span:hover:after{
    width: 100%;
}

.contactbtn{
    font-size:1.4rem;
    text-transform: uppercase;
    cursor: pointer;
}
.contactbtn:hover{
    translate: 0% 10%;
    transition: all 0.3s ease-out;
}
hr{
    margin-top:8rem ;
}
/* SKILLS GRID */
.skills-grid{
    display: grid;
    grid-template-areas: 
    "a"
    "b"
    "c"
    "d"
    "e"
    "f"
    "g";
    background-color: black;
    background-image: url(../images/bg-header-desktop.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 2rem 12rem 7rem 12rem;
}
.wordpress{
    grid-area: a;
}
.html{
    grid-area: b;
}
.css{
    grid-area: c;
}
.js{
    grid-area: d;
}
.access{
    grid-area: e;
}
.react{
    grid-area: f;
}
.bootstrap{
    grid-area: g;
}
.bootstrap{
    grid-area: h;
}
.bootstrap{
    grid-area: i;
}

.grid-items h2{
    font-size: 2.7rem;
    text-transform: capitalize;
    padding-top: 5rem;
}
.grid-items p{
    font-size: 1.1rem;
    text-transform: capitalize;
    padding-top: 0.5rem;
}

/* PROJECT SECTION */
.projects{
    padding: 3rem 12rem;
    background-color: black;
}
.project-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-top: 2rem;
    padding-bottom:4rem ;
    /* outline: 1px solid red; */
}
.project-head h2{
    font-size: 4rem;
    text-transform: capitalize;
}
.project-grid{
    display: grid;
    grid-template-areas: 
    "one"
    "two"
    "three"
    "four"
    "five"
    "six";
    width: 100%;
    gap: 2rem;
}
.fintech{
    grid-area: one;
}
.studio{
    grid-area: two;
}
.clipboard{
    grid-area: three;
}
.fylo{
    grid-area: four;
}
.huddle{
    grid-area: five;
}
.fylodark{
    grid-area: six;
}
.project-grid img{
    width: 100%;
}
.project-content{
    padding-top: 1rem;
    padding-bottom: 3rem;
}
.project-content h3{
    font-size: 1.7rem;
    text-transform: uppercase;
}
.project-content span{
    font-size: 1rem;
    text-transform: uppercase;
}

footer{
    width: 100%;
    padding: 2rem 12rem;
    background: url(../images/bg-header-desktop.png);
    background-color:#242424;
    background-size: cover;
}
.copyright{
    text-align: center;
    color: black;
    background-color: white;
    padding: 0.5rem 0;
}
.copyright a{
    color: #4ee39f;
}
.contact{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.Ccontent{
    width: 60%;
    padding-right:12rem;
}
.Ccontent h1{
    font-size: 4.5rem;
    text-transform: capitalize;
}

.Ccontent p{
    font-size: 1.2rem;
    line-height: 1.8;
    padding-top: 3rem;
}
form{
    width: 40%;
}
input, textarea{
    width: 100%;
    padding: 1rem;
    margin-top: 0.5rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.0);
    border: none;
    border-bottom: 2px solid white;
}
.no-outline:focus{
    outline: none;
} 

.formbtn{
    float: right;
    border: none;
    font-size: 1.4rem;
    color: white;
    background: none;
    text-transform: uppercase;
    padding-top: 1rem;
    font-weight: 400;
    cursor: pointer;
}
.formbtn:hover{
    translate: 0% 10%;
    transition: all 0.3s ease-out;
}
.nav-ft{
    padding-top: 3rem;
    padding-bottom: 2rem;
}


@media (min-width:800px) {
    .skills-grid{
        grid-template-areas: 
        "a b c"
        "d e f"
        "g h i";
    }
    .project-grid{
        grid-template-areas: 
        "one two"
        "three four"
        "five six";
    }
}

@media (max-width:1200px) and (min-width:500px) {
    .hero-sec{
        padding: 2rem 3rem;
        background: url(../images/lukebanner.png);
        background-repeat: no-repeat;
        background-color: black;
        background-position:center ;
        background-size: cover;
        width: 100%;
        height: 90vh;
    }
    .hero-content h1{
        font-size: 4.5rem;
    }
    .hero-content p{
        width: 80%;
    }
    .skills-grid{
        padding: 2rem 3rem 7rem 3rem;
    }
    .projects{
        padding: 3rem;
    }
    .project-head h2{
        font-size: 3rem;
    }
    .project-content h3{
        font-size: 1.3rem;
    }

    footer{
        padding: 2rem 3rem;
    }
    .contact{
        display:flex;
        flex-direction: column;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 0 5rem;
    }
    .Ccontent{
        text-align: center;
        width: 100%;
        padding-right: 0;
    }
    .Ccontent p{
        padding-bottom: 3rem;
    }
    form{
        margin: 0 auto;
        width: 80%;
    }
    .formbtn{
        font-size:1.2rem ;
    }

}

@media (max-width:500px) {

    .hero-sec{
        padding:1rem 1rem 5rem 1rem ;
        background-image: url(../images/lukemobile.png);
        background-position: top;
        background-repeat: no-repeat;
        height: 90vh;
        background-size: cover;
    }
    .hero-content {
        margin-top: 24rem;
        text-align: center;
        width: 100%;
    }
    .hero-content h1{
        font-size: 2.3rem;
    }
    .hero-content p{
        width: 100%;
        line-height: 1.8;
        font-size: 1rem;
        padding-bottom: 1rem;
    }
    .hero-cta{
        text-align: center;
        /* width: 100%; */
        margin: 0 auto;
        padding-top: 2rem;
    }
    nav{
        display: block;
        text-align: center;
        /* height: 5vh; */
    }
    .navlogo{
        font-size: 2.2rem;
        margin-bottom: 3rem;
    }
    .social-icon{
        padding-top: 1rem;
    }
    .social-icon img{
        margin: 0 0.5rem;
    }

    .skills-grid{
        grid-template-areas: 
        "a"
        "b"
        "c"
        "d"
        "e"
        "f"
        "g"
        "h"
        "i";
        padding: 2rem ;
        padding-top: 10rem;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }
    .grid-items h2{
        font-size: 2rem;
    }
    .grid-items p{
        font-size: 1.1rem;
    }
    .project-grid{
        grid-template-areas: 
        "one"
        "two"
        "three"
        "four"
        "five"
        "six";
    }
    .projects{
        padding: 4rem 1rem;
    }
    .project-head h2{
        font-size: 2.5rem;
    }
    .project-head a{
        font-size: 1.2rem;
    }
    .project-content h3{
        font-size: 1.4rem;
    }
    footer{
        padding: 2rem 1rem;
    }
    .contact{
        display: block;
        text-align: center;
    }
    .Ccontent, form {
        width: 100%;
        padding: 0;
    }
    form{
        padding-top: 3rem;
    }
    .Ccontent h1{
        font-size: 3.5rem;
        padding-bottom: 0;
    }
    .Ccontent p{
        font-size: 1rem;
        padding-top: 1rem;
    }
    .formbtn{
        font-size: 1rem;
    }
    .nav-ft{
        padding-bottom: 5rem;
    }

    span:after{
        width: 100%;
    }
    .icon:hover{
        color: #4ee39f;
       translate: 0% 10%;
       transition: all 0.3s ease-out;
    }
}