{
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

nav{
    width:100%;
    background-color:white;
    color:black;
    font-weight:700;
    display:flex;
    align-items:center;
    position:fixed;
    z-index:1000;
}

nav ul{
    display:flex;
    padding:20px 0;
    list-style-type:none;
}

nav #logo h1{
    padding:20px;
}
nav ul li{
    margin: 0 40px;
    cursor:pointer;
}

nav ul li:hover{
    color:gray;
}

nav ul li a{
    text-decoration:none;
    color:black;
}

#feature-section{
    display:flex;
    padding:20vh 0;
    background-color:#1e1e1e;
    color:white;
}



#feature-section > * {
    width:50%;
}

#feature-section .section-image img{
    width:100%;
}

#info{
    display:flex;
    padding:20vh 0;
}

#info .section-image{
    width:40%;
}

#info .section-image img{
    width:100%;
}
.section-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:40px;
}
.section-text h1{
    font-weight:700;
    font-size:3.5rem;
}
.section-text h2{
    font-size:2rem;
}
.section-text button{
    padding:0.7rem 1.2rem;
    border-radius:20px;
    background-color:white;
    color:black;
    margin:40px 0;
    font-size:1rem;
}


section{
    padding:10vh 0;
}
section:nth-child(odd){
    /* background-color:whitesmoke; */
}

#services h1{
    text-align:center;
    font-size:3.5rem;
}

#services-container{
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.service{
    padding:40px;
    text-align:center;
    box-sizing:border-box;
}

.service p {
    font-size:1.2rem;
}
#services i{
    font-size:4rem;
}


#about{
    display:flex;
}

#about > * {
    width:50%;
}

#about .img-container{
    display:flex;
    justify-content:center;
    align-items:center;
}


#about .text-container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:20px;
    transition:all 500ms ease-in-out;
    box-sizing:border-box;
}

#about .text-container h2{
    margin-bottom:4vh;
}
#about .img-container img{
    object-fit:contain;
    width:75%;
}
#portfolio{
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    justify-items:center;
    overflow-x:hidden;
}

.portfolio-item{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:35vw;
    height:35vw;
    cursor:pointer;
    box-sizing:border-box;
}

.portfolio-item .view-website-btn{
    width:100%;
    text-align:center;
    margin-top:2vh;

}
.portfolio-item .view-website-btn a{
    text-decoration:none;
    background-color:#1e1e1e;
    color:white;
    padding:0.9rem 1.2rem;
    cursor:pointer;
    border:none;
    border-radius:25px;
    font-size:1.2rem;
    font-weight:700;
    cursor:pointer;
}


.portfolio-item .view-website-btn a:hover{
    background-color:white;
    color:#1e1e1e;
}

.portfolio-item .img-container {
    width:100%;
    height:90%;
}

.portfolio-item .img-container img{
    width:45vw;
    height:auto;
    object-fit:cover;
}

.portfolio-item .item-name{
    width:100%;
}

.portfolio-item .item-name h2 {
    width:100%;
    text-align:center;
}




nav #toggle{
    display:none;
}

#skills{
    display:flex;
    height:70vh;
}

#skills-container{
    width:50%;
    margin-top:66px;
}

 #text-container{
    width:50%;
}


.skill{
    display:flex;
    align-items:center;
    height:31px;
    width:100%;
    margin-bottom:2vh;
}


.skill .name{
    width:2%;
    margin:0 1vw;

}

.skill .level{
    position:relative;
    margin-left:2vw;
    width:70%;
    height:100%;
    background-color:whitesmoke;
    margin-left:3vw;
}

.skill .level .percent-filled{
    position:absolute;
    top:0;
    left:0;
    width:0%;
    height:100%;
    background-color:#01579b;
    transition:all 1s ease;
    text-align:center;
    font-weight:700;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
}

.not-visible{
    opacity:0;
}

.visible{
    opacity:1;
}

.pop-up{
    display:flex;
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:100;
    width:90vw;
    height:auto;
    background-color:white;
}

.pop-up > * {
    width:50%;
}


.pop-up-img-container img{
    object-fit:contain;
    width:100%;
    height:100%;
}

.pop-up .description{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
}

.pop-up .description h2{
    text-align:center;
    margin-bottom:4vh;
}

.hidden{
    display:none;
}


#testimonials{
    display:flex;
    justify-content:space-evenly;
}

.testimonial{
    width:33.33%;
    padding:40px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.person-img{
    width:300px;
    height:200px;
    border:none;
    background-size:contain;
    background-repeat:no-repeat;
    margin-bottom:0vh;
}

.person-testimonial{
    font-size:1.2rem;
    font-style:italic;
    text-align:center;
}

#contact-me{
    display:flex;
    background-color:black;
}

#contact-me > * {
    width:50%;
    box-sizing:border-box;
    padding:40px;
}

#contact-me .text-container{
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:1.4rem;
    text-align:center;
}


.form-container form{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:20px;
}


.form-container form input, .form-container form label, .form-container form textarea {
    padding:5px;
    width:90%;
    margin:1vh 0;
    margin-right:auto;
}

.form-container form input[type=submit]{
    width:40%;
    padding:4px 11px;
    background-color:#01579b;
    color:white;
    cursor:pointer;
    box-sizing:border-box;
    border:none;
    font-size:1.2rem;
    font-weight:700;
}


#articles{
    margin-top:50vh;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    row-gap:50px;
}

.article{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.article .article-img-container{
    width:90%;

}

.article .article-img-container img{
    width:100%;
    object-fit:contain;
}


.article .article-author-container, .article .article-date-container{
    margin-right:auto;
    font-size:1.2rem;
    padding:5px;
}

#contact-form-container{
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%);
    max-width:100vw;
    width:750px;
    height:500px;
    background-color:black;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:40px;
    box-sizing:border-box;
    border-radius:15px;
    transition:all 1s ease-in-out;
    z-index:-100;
}

#close-window-container{
    position:fixed;
    top:0;
    right:0;
    padding:20px;
    font-size:2rem;
    font-weight:700;
    cursor:pointer;
}

#close-window-container:hover{
    color:black;
}

#contact-form-container h2{
    text-align:center;
    color:white;
    font-weight:700;
    margin-bottom:7vh;
    font-size:2rem;

}

form{
    width:90%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}

form input,form textarea{
    width:100%;
    margin:2vh 0;
    padding:15px;
    box-sizing:border-box;
}

form textarea::placeholder{
    font-family:sans-serif;
}

form input[type=submit]{
    cursor:pointer;
    padding:.9rem 1.2rem;
    border:none;
    background-color:white;
    font-weight:700;
    color:black;
    font-size:1.2rem;
    width:100%;
    box-sizing:border-box;
}

form input[type=submit]:hover{
    background-color:black;
    color:white;
    border:2px solid white;
}

.contact-form-hide{
    opacity:0;
}


#areas{
    display:flex;
    justify-content:space-evenly;
}

.area{
    padding:40px;
    box-sizing:border-box;
    border:2px dotted black;
    display:flex;
    justify-content:center;
    align-items:center;
}



 


#calendly-meeting{
    height:1000px;
}

@media screen and (max-width:612px){
    
    #articles{
        grid-template-columns:100%;
        margin-top:75vh;
    }
    
    .portfolio-item{
        margin:10vh 0;
    }
    
     .view-website-btn a{ 
         
         margin-top:2.5vh;
}
    
    
    .section-text h1{
    font-weight:700;
    font-size:3rem;
}
    
    #contact-form-container{
        z-index:-100!important;
    }
    
    #skills{
        
        min-height:85vh;
    }
    
#calendly-meeting{
    height:1000px;
    margin-top:4vh;
    position:relative;
    z-index:100;
}
    nav{
        background-color:white;
        height:10vh;
    }
    nav #logo{
        display:none;
    }

    nav #toggle{
        display:block;
        padding:20px;
    }

    nav #toggle i {
        font-size:2rem;
    }
    nav ul{
        position:absolute;
        top:0;
        transform:translateY(-400px);
        left:0;
        flex-direction:column;
        width:30vw;
        height:auto;
        background-color:white;
        padding:20px;
        transition:transform 1s ease-in-out;
    }


    .show-ul{
        transform:translateY(80px);
    }
    
     .portfolio-item .img-container img{
        width:100%;
        box-sizing:border-box;
        padding:0 10px;
    }

    nav ul li{
        margin:2vh 0;
    }
    #feature-section{
        flex-direction:column;
    }
    #feature-section > *  {
        width:100%;
    }

    #feature-section .section-text{
        padding:0;
    }

    #services-container,#portfolio{
        display:flex;
        flex-direction:column;
    }

    #services-container > * ,#portfolio > * {
        width:100%;
    }

    .articles-container{
        grid-template-columns:repeat(1,1fr);
    }

    #contact h1{
        font-size:2rem;
        text-align:center;
    }

    #portfolio{
        height:auto;
    }

    #about{
        flex-direction:column;
    }

    #about > * {
        width:100%;
        padding:0 20px;
        font-size:1.2rem;
        box-sizing:border-box;
    }

    .portfolio-item .img-container {
        width:100%;
    }

    #skills{
        flex-direction:column;
    }

    #skills > * {
        width:100%;
    }
    
    .skill .level{
        margin-left:11vw;
        width:92%;
    }

}