.header,
.header-blue,
.header-white{
    background: transparent;
    z-index: 2;
}

.header .title-logo,
.header-blue .title-logo,
.header-white .title-logo{
    display: none;
}

.header .button-burguer,
.header-blue .button-burguer,
.header-white .button-burguer{
    margin-left: auto;
}

.navbar,
.navbar-change,
.navbar-blue,
.navbar-change-blue,
.navbar-white,
.navbar-change-white{
    top: 0;
}

.introduction{
    margin: 0 auto;
    display: grid;
    width: 52rem;
    grid-template: 14.4rem 5rem 8.7rem/24.8rem 27.2rem;
    grid-template-areas:"introduction-tittle-label image-container"
                        "introduction-links image-container"
                        " . available-to-work";
}

.introduction .introduction-tittle-label{
    grid-area: introduction-tittle-label;
}

.first-greeting,
.first-greeting-blue,
.first-greeting-white{
    font-size: 2rem;
    font-weight: 500;
}

.introduction .name-developer{
    font-size: 2.4rem;
}    

.introduction .image-container{
    grid-area: image-container;
    width: 22rem;
    height: 15.6rem;
    margin: 0;
    justify-self: center;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.introduction-links{
    grid-area: introduction-links;
    display: flex;
    align-items: center;
}


.cv-downloader,
.cv-downloader-blue,
.cv-downloader-white{
    margin: 0;
}

.introduction .social-media{
    margin: 0;
    margin-left: 2rem;
}

.available-to-work,
.available-to-work-blue,
.available-to-work-white{
    grid-area: available-to-work;
    margin: 0;
    justify-self: center;
}

.cv-downloader-blue,
.cv-downloader-white{
    margin-top: 0;
}


/*about me*/

.about-me-title,
.about-me-title-blue,
.about-me-title-white{
    padding-top: 1.6rem;
}

/*projects*/
.projects .projects-container{
    width: 52rem;
}

.projects-title,
.projects-title-blue,
.projects-title-white{
    padding-top: 1.6rem;
}

.projects .projects-container-card{
    width: 52.1rem;
    height: 21.5rem;
}

.projects .projects-container-card-delay-first{
    width: 400%;
    height: 21.5rem;
}

.projects .project-card-performance-hidden{
    position: absolute;
    top: 0;
    background: var(--main-second-background);
    height: 100%;
    width: 100%;
    padding: 1.6rem;
    transition: all .4s ease-in-out;
    opacity: 0;
}


.projects .project-card-performance{
    position: absolute;
    top: 0;
    background: var(--main-second-background);
    height: 100%;
    width: 100%;
    padding: 1.6rem;
    transition: all .4s ease-in-out;
    opacity: 1;
}

.projects .project-performance-logo{
    margin-top: 0;
}

/*abput-me*/
.about-me{
    margin-top: 0;
}


/*stack*/
.stack .stack-container-delay,
.stack-blue .stack-container-delay,
.stack-white .stack-container-delay{
    width: 100%;
}

/*services*/
.services .service-target-container{
    width: 40rem;
    height: 20rem;
}

.service-target,
.service-target-blue,
.service-target-white{
    width: 36rem;
    height: 20rem;
    padding: 1rem 1.6rem;
}

.service-target-grid-first,
.service-target-grid-second{
    margin-top: 0;
    width: 210%;
}

.services-skill-title,
.services-skill-title-blue,
.services-skill-title-white{
    width: 100%;
    margin-top: .8rem;
    font-size: 2rem;
}

.services-skill-title +  p,
.services-skill-title-blue + p,
.services-skill-title-white + p{
    margin-top: .4rem;
}

/*footer*/

.footer-section-links ul{
    padding: 0;
    display: grid;
    grid-template: repeat(2,1fr)/repeat(2,1fr);
    height: 12.8rem;
}

.footer-section-links ul li:not(:first-child){
    margin-top: 0;
}


.footer-main-form input[type="tel"],
.footer-main-form-blue input[type="tel"],
.footer-main-form-white input[type="tel"]{
    width: 50%;
    text-align: center;
    padding: 0 1.6rem; 
}