/*About Section*/
.about{
    margin: 0 auto;
    display: block;
    position: relative;
    border: none;
}

.about__bg{
    position: absolute;
    width: 100vw;
    height: 150vh;
    background: linear-gradient(180deg, rgba(13,48,68,1) 0%, rgba(0,101,121,1) 100%);
    z-index: -1;
}

.about__photo{
    width: 10%;
    height: auto;
    border-radius: 50%;
    border: 6px solid #fff;
    margin-top:14vh;
}

.about__textcontainer{
    color: white;
    line-height: 1.5;
    padding-top: 40px;
    padding-bottom: 40px;
    width: 50%;
    align-content: center;
    align-items: center;
    margin: 0 auto;
}

.about__textcontainer h1{
    font-family: Gilroy , sans-serif;
    letter-spacing: 0.1rem;
}

.about__textcontainer p{
    font-family: Avenir, sans-serif;
    margin: 0 auto;
    
}


/*Skills Table*/
.skills__columncontainer{
    display: flex;
    background-color: #fff;
    border-radius: 1rem;
    border: 0.5px solid #E2E2E2;
    width: 90vw;
    margin: 0 auto;
    margin-top: 5%;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
     border-radius:10px;
    -moz-box-shadow: 3px 3px 15px rgba(0,0,0,0.2);
    -webkit-box-shadow: 3px 3px 15px rgba(0,0,0,0.2) ;
     box-shadow: 3px 3px 15px rgba(0,0,0,0.2);
}

.skills__column{
    width: 33%;
    padding: 2.5rem;
    color: #666666;
}

.skills__icon{
    width: 30%;
    padding: 1rem;
}

.skills__column h3{
    font-family: Gilroy, sans-serif;
    font-size: 1.7rem;
    letter-spacing: 0.02rem;
}

.skills__column h5{
    font-family: Gilroy-Medium, sans-serif;
    font-size: 1rem;
    letter-spacing: 0.06rem;
    margin:0 auto;
    padding-top: 30px;
    color: #006579;
}

.skills__column p, ul{
    font-family: Avenir, sans-serif;
    font-size: 1rem;
    font-weight: 100;
    line-height: 1.5;
    margin-top: .4rem;
}

.column__design{
    border-right: 0.5px solid #E2E2E2;
}

.column__method{
    border-left: 0.5px solid #E2E2E2;
}

.skills__column h4{
    padding: 0 auto;
    margin: 10px;
}

.skills__list{
    list-style: none;
    padding-left: 0;
    font-family: Helvetica, sans-serif;
    line-height: 1.5;
}


/*Work Experience*/
.Work_Experience{
    padding-top:80px;
    padding-bottom:0px;
    color: #666666;
}

.Work_Experience h1{
    font-family: Gilroy, sans-serif;
    letter-spacing: 0.05rem;
    margin: 10px;
    padding-bottom:0px;
    
}

.experience__grid{
    display:flex;
    margin:0 auto;
    width:90%;
    justify-content: space-around;
    align-items:flex-end;
}

.experience__item{
    width:20%;
    padding:20px;
}

.experience__item h3{
    font-family: Gilroy, sans-serif;
    letter-spacing: 0.05rem;
    padding-bottom:3px;
    margin:0px;
}

.experience__item h4{
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-size:14px;
    padding-bottom:5px;
    margin:0px;
}

.experience__item p{
    font-family: Gilroy,sans-serif;
    font-weight:900;
    letter-spacing:0.07rem;
    padding:0px;
    margin:0px;
    font-size:0.8rem;
    color:#0d3044;
    
}

.experience__image{
    width: 200px;
    padding-top:20px;
}

.image__1{

    padding-left:30px;
    padding-right:30px;
}

.image__2{
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left:30px;
    padding-right:30px;
}

.image__3{
    padding-bottom: 20px;
    padding-left:30px;
    padding-right:30px;
}

.image__4{
    padding-bottom: 20px;
    padding-left:30px;
    padding-right:30px;
}


/*Qualification*/
.education__container{
    padding-top:20px;
    margin-bottom:80px;
    color: #666666;
    width:100vw;
    position: relative;
}

.education__container h1{
    font-family: Gilroy, sans-serif;
    letter-spacing: 0.05rem;
    margin-top: 70px;
}

.education__grid{
    display:flex;
    flex: wrap;
    width:95%;
    margin:0 auto;
    justify-content:space-around;
    align-items:flex-start;
}

.education__item{
    flex-grow: 1 1 10%;
    padding:20px;
}

.education__item h3{
    font-family: Gilroy, sans-serif;
    letter-spacing: 0.05rem;
    padding-bottom:3px;
    margin:0px;
}

.education__item p{
    font-family: Helvetica, sans-serif;
    font-weight: 400;
    font-size:14px;
    padding-bottom:5px;
    margin:0px;
}

.education__image{
    width: 180px;
    padding-top:20px;
    padding-bottom:10px;
}




@media(max-width: 1400px){
    
    .works__grid--container{
        width:90vw;
        grid-template-columns: repeat(2,1fr);
    }
    
    .container__cta{
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
    }
    
    .cta__link{
        width:150px;
    }
        
    .experience__grid{
    display:flex;
    margin:0 auto;
    width:90%;
    justify-content: space-around;
    flex-wrap: wrap;
    }
    
    .experience__item{
        flex: 0 0 20%;
    }
    
    .education__grid{
    display:flex;
    margin:0 auto;
    width:90%;
    justify-content: space-around;
    flex-wrap: wrap;
}
    
    .education__item{
   flex: 0 0 20%;
}
    
}

@media(max-width: 1000px){
    
    .works__grid--container{
        width:90vw;
        grid-template-columns: repeat(2,1fr);
    }
    
    .container__cta{
        display: flex;
        flex-wrap:wrap;
        justify-content: center;
    }
    
    .cta__link{
        width:150px;
    }
        
    .experience__grid{
    display:flex;
    margin:0 auto;
    width:90%;
    justify-content: space-around;
    flex-wrap: wrap;
    }
    
    .experience__item{
        flex: 0 0 35%;
    }
    
    .education__grid{
    display:flex;
    margin:0 auto;
    width:90%;
    justify-content: space-around;
    flex-wrap: wrap;
}
    
    .education__item{
   flex: 0 0 35%;
}
    
}


@media(max-width: 900px){
        

    .skills__columncontainer{
    flex-flow: row wrap;
    width:80vw;
    }
    
    .skills__column{
    flex-basis: 100%;
    }
    
    .column__design{
        border-bottom:0.5px solid #E2E2E2;
        border-right:none; 
    }
    
    .column__method{
        border-top: 0.5px solid #E2E2E2;
        border-left:none; 
    }
    
    .works__grid--container{
        width:90vw;
        grid-template-columns: repeat(2,1fr);
    }
    
    .about__photo{
    width: 20%;
    height: auto;
    }
    
}


@media(max-width: 500px){


    .works__grid--container{
        width:70vw;
        grid-template-columns: repeat(1,1fr);
    }

    
    .container__cta{
        width: 70vw;
    }
    
    .about__photo{
    width: 30%;
    height: auto;
    }
    
    .experience__item{
        flex: 0 0 100%;
    }
    
    .education__item{
        flex: 0 0 100%;
    }
}