/*set up About section in rows*/
.about .row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
/*set up About section in boxs*/
.about .row .box{
    flex:1 1 40rem;
    background-color: var(--primary-bg-color);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:.5rem 1.5rem;
    margin:1.5rem;
}
/*set up About section text*/
.about .row .box .title{
    color:var(--primary-text-color);
    font-size: 2.5rem;
    padding:1rem 0;
}
/*set up About section progress bar*/
.about .row .box .progress{
    padding:1rem 0;
}
/*set up About section in text h3*/
.about .row .box .progress h3{
    font-size: 1.7rem;
    color:var(--secondary-text-color);
    display: flex;
    justify-content: space-between;
}
/*set up About section in progress bar borders*/
.about .row .box .progress .bar{
    height: 2.5rem;
    border-radius: .5rem;
    border:.2rem solid var(--main-color);
    padding:.5rem;
    margin:1rem 0;
}
/*set up About section in create fill full progress bar*/
.about .row .box .progress .bar span{
    height: 100%;
    border-radius: .3rem;
    background-color: var(--main-color);
    display: block;
}

/*set up About section in experience box create line*/
.about .row .box .exp-box{
    padding:0 1.8rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
    border-left: .2rem solid var(--main-color);
    position: relative;
}
/*set up About section in experience box text*/
.about .row .box .exp-box h3{
    color:var(--main-color);
    font-size: 2rem;
}
/*set up About section in experience box text*/
.about .row .box .exp-box p{
    color:var(--secondary-text-color);
    font-size: 1.5rem;
    padding:1rem 0;
}
/*set up About section create the dot of the  timeline*/
.about .row .box .exp-box::before{
    content:'';
    position: absolute;
    top:0; left: -1rem;
    border-radius: 50%;
    height: 2rem;
    width: 2rem;
    background: var(--main-color);
}
/*set up download button*/
.about .download{
    background:var(--primary-bg-color);
    border-radius: .5rem;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    padding:2rem;
    padding-bottom: 3rem;
    margin:1rem;
}

/*set up About section PERCENT VIEW IN BARS*/
.about .row .box:nth-child(1) .progress:nth-child(2) .bar span{
    width: 95%;
}

.about .row .box:nth-child(1) .progress:nth-child(3) .bar span{
    width: 80%;
}

.about .row .box:nth-child(1) .progress:nth-child(4) .bar span{
    width: 65%;
}

.about .row .box:nth-child(1) .progress:nth-child(5) .bar span{
    width: 75%;
}

.about .row .box:nth-child(2) .progress:nth-child(2) .bar span{
    width: 98%;
}

.about .row .box:nth-child(2) .progress:nth-child(3) .bar span{
    width: 67%;
}

.about .row .box:nth-child(2) .progress:nth-child(4) .bar span{
    width: 75%;
}

.about .row .box:nth-child(2) .progress:nth-child(5) .bar span{
    width: 60%;
}