.home-background{
    height: 100vh;
    background:url('../assets/images/back-home.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.home-presentation{
    width: 90%;
    height: 100%;
    display: flex;
    max-width: 1500px;
    margin: auto;
    flex-direction: column;
    justify-content: center;
}

.home-presentation-list{
    width: 70%;
    color: #ffffff;
}

.home-presentation-list h3{
    font-size: 5vw;
}

.home-presentation-list p{
    margin: 0 2rem 2rem 0;
    line-height: 40px;
}

@media(max-width: 810px){
    .home-presentation-list{
        width: 100%;
        text-align: center;
    }
    .home-presentation-list h3{
        font-size: 6vw;
    }
    .home-presentation-buttons{
        display: flex;
        justify-content: center;
    }
}

@media(max-width: 550px){
    .home-presentation-list{
        margin-left: 0;
        text-align: left;
    }
    .home-presentation-buttons{
       justify-content: start;
    }
    .home-presentation-buttons .button-transparent{
        display: none;
    }

    .home-presentation-list h3{
        margin-right: 0;
    }

    .home-presentation-list p{
        margin-right: 0;
    }
}

@media(max-width: 400px){
    .home-presentation-list span{
        display: none;
    }
}

/* HOME PROJECT PRESENTATION */

.home-projects{
    margin: 2rem auto;
    width: 80%;
    text-align: center;
}

.home-projects h3{
    margin: 2rem 1rem 0 1rem;
    letter-spacing: 5px;
    color: #232b6f;
    font-size: 3vw;
    text-transform: uppercase;
    text-align: center;
}

.home-projects h3 span{
    padding-bottom: 10px;
    border-bottom: 4px solid #2BCEA7;;
    border-radius: 2px;
}

.home-projects-list{
    display: flex;
    justify-content: space-evenly;
    max-width: 1500px;
    margin: 4rem auto;
    position: relative;
    flex-wrap: wrap;
}

.home-project-item{
    margin: 2rem 1rem;

}

.home-project-item-middle{
    position: relative;
    bottom: 40px;
}

.home-project-item img{
    height: 350px;
    width: auto;
    border-radius: 50%;
}

.home-project-item h4{
    font-size: 1.5rem;
    margin: 10px 0;
    font-weight: 900;
    color: #232b6f;
}

.home-project-item p{
    margin: 10px 0;
    color: rgb(128, 128, 128);
}

.home-project-item a{
    color: #232b6f;
    font-size: 1.2rem;
    cursor: pointer;
    border-bottom: 2px solid #2BCEA7;
    padding: 5px 0;
    text-decoration: none;
}

@media(max-width: 1450px){
    .home-projects{
        width: 90%;
    }
}

@media(max-width: 1295px){
    .home-project-item-middle{
        bottom: 0;
    }
}


@media(max-width: 900px){
    
    .home-project-item img{
        border-radius: 0;
    }

    .home-project-item{
        width: 100%;
    }
    .home-project-item img{
        width: 100%;
        height: auto;
    }
    
    .home-projects-list{
        margin: 2rem auto;
    }
}

@media(max-width: 600px){
    .home-projects h3{
        font-size: 5vw;
    }

    .home-project-item{
        margin: 1rem 1rem;
    }
}


/* HOME ABOUT */

.home-about{
    width: 90%;
    margin: 8rem auto;
    max-width: 1300px;
}

.home-about-img-text{
    position: relative;
    display: flex;
}


.home-about-img img{
    width: 70%;
    height: auto;
    -webkit-box-shadow: 5px 2px 101px -29px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 2px 101px -29px rgba(0,0,0,0.75);
    box-shadow: 5px 2px 101px -29px rgba(0,0,0,0.75);
}

.home-about-text{
    position: absolute;
    left: 600px;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-about-text h3{
    margin: 10px 10px 10px 0;
    color: #232b6f;
    font-size: 1.5rem;
    text-transform: capitalize;
}

.home-about-text p{
    line-height: 30px;
    margin: 0 10px 10px 0;
    color: rgb(65, 65, 65);
}

@media(max-width: 1100px){
    .home-about-text{
        left: 400px;
    }
}

@media(max-width: 900px){
    .home-about-img img{
        width: 100%;
    }
    .home-about-text{
        left: 0;
    }
}

@media(max-width: 650px){

    .home-about{
        margin: 2rem auto;
    }
    .home-about-img-text{
        flex-direction: column;
    }
    .home-about-text{
        top: 20px;
        position: static;
    }

}

@media(max-width: 400px){
    .home-about-text h3{
        font-size: 1.2rem;
    }

    .home-about-text p{
        font-size: 0.9rem;
    }
}

/* HOME SHORT COURSE PRESENTATION */

.home-short-course{
    width: 90%;
    margin: 6rem auto;
    text-align: center;
}

.home-short-course h3{
    font-size: 3vw;
}

.home-short-course-price{
    margin: 1rem 1rem;
    display: flex;
    justify-content: center;
}

.home-short-course-price span,
.home-short-course-price p{
    font-size: 1.2rem;
}

.home-short-course-price span{
    color: #232b6f;
    font-weight: bold;
}

.home-short-corse-description > p{
    margin: 20px 3rem;
    font-size: 1rem;
    line-height: 30px;
}

.home-short-corse-description p:nth-child(2){
    font-size: 0.7rem;
}

.home-short-road{
    display: flex;
    width: 90%;
    margin: 3rem auto;
    justify-content: center;
    color: #232b6f;
}

.home-short-road span{
    font-size: 5vw;
}

.home-short-road span{
    margin: 0 50px;
}

.arrow-down{
    display: none;
}

.home-short-road-item p{
    margin: 10px 10px;
    color: #000000;
    font-weight: bold;
    text-transform: uppercase;
}

@media(max-width: 800px){
    .home-short-course{
        margin: 4rem auto;
    }
    .home-short-course h3{
        font-size: 4vw;
    }
    .home-short-corse-description > p{
        margin: 20px 10px;
    }
    .home-short-road span{
        margin: 0 20px;
    }
}

@media(max-width: 600px){
    .home-short-course h3{
        font-size: 6vw;
    }
    .home-short-road{
        flex-direction: column;
        margin: 1rem auto;
    }

    .home-short-road span{
        margin: 10px 0;
    }

    .home-short-road-item p{
        margin: 0;
    }

    .home-short-road span{
        font-size: 10vw;
    }

    .home-short-corse-description > p{
        font-size: 14px;
    }

    .arrow-down{
        display: block;
    }

    .arrow-up{
        display: none;
    }
}


.home-salary{
    margin: 1rem;
}

.home-salary h3{
    color: #232b6f;
    text-align: center;
    margin: 2rem;
    font-size: 3vw; 
}

.home-salary-list{
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    max-width: 1500px;
}

.home-salary-skills{
    flex: 40%;
    margin: 1rem;
    text-align: center;
}

.home-salary-skills h5{
    font-size: 1.5rem;
    color: #232b6f;
    margin: 1rem;
}

.home-salary-skills p{
    line-height: 30px;
    margin: 0 10px;
}

.popular-frameworks{
    width: 100%;
}

@media(max-width: 900px){
    .home-salary h3{
        font-size: 5vw;
    }

    .home-salary-list{
        width: 100%;
    }

    .home-salary-skills{
        margin: 20px 10px;
    }
}

@media(max-width: 700px){
    .home-salary-list{
        flex-direction: column;
    }

    .popular-frameworks{
        width: auto;
    }
    
    .home-salary-skills{
      margin: 20px auto;
    }
}

@media(max-width: 400px){
    .home-salary h3{
        font-size: 6vw;
    }
}

.home-last{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: 3rem auto;
    text-align: center;
}

.home-last h3{
    font-size: 3vw;
    color: #232b6f;
    margin: 10px 0;
}

.home-last h3 span{
    border-bottom: 3px solid #2BCEA7;
    padding: 5px 0;
}

.home-last p{
    margin: 20px 0;
    font-size: 1.1rem;
}

@media(max-width: 780px){
    .home-last h3{
        font-size: 5vw;
    }
}

@media(max-width: 550px){
    .home-last h3{
        font-size: 6vw;
    }

    .home-last p{
        font-size: 0.8rem;
    }
}