.first-section{
    background-image: url("../images/Header-Background.png");
    width: 100%;
    min-height: 31rem;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.first-section h1{
    font-family: Luckiest Guy;
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: white;
    max-width: 19rem;
}

.first-section p{
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: white;
    margin-bottom: 1.5rem;
    max-width: 49rem;
    line-height: 1.4rem;
    margin: 1.5rem 1rem 1.5rem;
    animation: ShowTextFromBottom 1.5s ease-in-out;
}

.first-section-buttoms{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 0 1rem 0;
}

.first-section button{
    border-radius: 11rem;
    padding: 1rem 1.2rem;
    border: 0;
    font-family: Open Sans;
    font-weight: 600;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 1rem;
    transition: 0.3s ease-in-out;
}

.first-buttom {
    margin-right: 1rem;
    color: rgba(35, 39, 42, 1);
    background: rgb(255 255 255);
    cursor: pointer;
}

.first-buttom:hover{
    color: white;
    background: rgba(35, 39, 42, 1);
    filter: drop-shadow(0px 0px 1.2rem #ffdb9e); 
}

.second-buttom {
    color: white;
    background: rgba(35, 39, 42, 1);
    cursor: pointer;
}

.second-buttom:hover {
    color: rgba(35, 39, 42, 1);
    background: rgb(255 255 255);
    filter: drop-shadow(0px 0px 1.2rem white); 
}

.second-buttom {
    color: white;
    background: rgba(35, 39, 42, 1);
}

.second-buttom:hover {
    color: rgba(35, 39, 42, 1);
    background: rgb(255 255 255);
    filter: drop-shadow(0px 0px 1.2rem white); 
}

.second-section, .fourth-section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: white;
    margin: 2.5rem 1rem;
    background-color: white;
    color: rgba(35, 39, 42, 1);
}

.second-section h3{
    font-family: Open Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

.fourth-section h3{
    font-family: Open Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

.second-section, .fourth-section p{
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 1.5rem;
}

.second-section-text, .fourth-section-text{
    max-width: 21rem;
    margin-left: 1.5rem;
}

.second-section-text p{
    animation: ShowTextFromLeft 2s ease-in-out;
}
.fourth-section-text p{
    animation: ShowTextFromLeft 2s ease-in-out;
}

.second-section img{
    filter: drop-shadow(-17px 9px 1.2rem #5533f2);
    animation: ShowImageFromright 2s, floatingLeft 2s ease-in-out infinite;
}

.fourth-section img{
    filter: drop-shadow(-3px 19px 1.2rem #5533f2);
    animation: ShowImageFromright 2s, floatingLeft 2s ease-in-out infinite;
}

@keyframes floatingLeft {
     0% {
       transform: translateY(0);
       filter: drop-shadow(-3px 19px 1.2rem #5533f2);
     }
     50% {
       transform: translateY(-2px);
       filter: drop-shadow(-3px 19px 1.5rem #5533f2);
     }
     100% {
       transform: translateY(0);
       filter: drop-shadow(-3px 19px 1.2rem #5533f2);
     }
}

.third-section{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 2.5rem 1rem;
    background: rgba(246, 246, 246, 1);
    color: rgba(35, 39, 42, 1);
}

.third-section h3{
    font-family: Open Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

.third-section p{
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 1.5rem;
}

.third-section-text{
    max-width: 21rem;
    margin-left: 1.5rem;
    visibility: collapse;
}

#third-section-img{
    visibility: collapse;
}

.third-section img{
    filter: drop-shadow(17px 9px 1.2rem #5533f2);
    animation: ShowImageFromLeft 2s, floatingRight 2s ease-in-out infinite;
}

.last-section{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 2.5rem 1rem;
    background: rgba(246, 246, 246, 1);
    color: rgba(35, 39, 42, 1);
}

.last-section h3{
    font-family: Open Sans;
    font-weight: 800;
    font-style: ExtraBold;
    font-size: 2.5rem;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 3rem;
    margin-bottom: 1.5rem;
    max-width: 47rem;
}

.last-section p{
    font-family: Open Sans;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    line-height: 1.5rem;
    max-width: 51rem;
}

.last-section-text{
    text-align: center;
    text-align: -webkit-center;
    margin-top: 1.5rem;
    margin-left: 1.5rem;
    visibility: collapse;
}

.last-section-img{
    visibility: collapse;
}

.last-section img{
    filter: drop-shadow(17px 9px 1.2rem #5533f2);
    visibility: collapse;
}

/* ---------------------------------------- */
.moving-dots{
    background-color: white;
    border: 1px solid red;
    margin-left: 0.5rem;
    border-radius: 50%;
    padding: 0.4rem;
    font-size: 5px;
    animation: dotsMoviment 12s ease-in-out infinite;
}

.div-moving-title-dots{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-end;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0 6rem 1.5rem;
    animation: ShowTextFromTop 1.5s ease-in-out;
}

.second-section-img{
    visibility: collapse;
    transition: 1s ease-in-out;
}

.second-section-text{
    visibility: collapse;
    transition: 1s ease-in-out;
}

.third-section-text-p{
    visibility: collapse;
}

.ShowTextFromLeft{
    visibility: visible!important;
    animation: ShowTextFromLeft 1s ease-in-out;
}

.ShowTextFromRigh{
    visibility: visible!important;
    animation: ShowTextFromRight 1s ease-in-out;
}

.ShowImageFromLeft{
    visibility: visible!important;
    animation: ShowImageFromLeft 1s ease-in-out;
}

.ShowImageFromRigh{
    visibility: visible!important;
    animation: ShowImageFromright 1s ease-in-out;
}

.ShowTextFromBottom{
    visibility: visible!important;
    animation: ShowTextFromBottom 1s ease-in-out;
}

.ShowImageFromBottom{
    visibility: visible!important;
    animation: ShowTextFromBottom 1s ease-in-out;
}

#fourth-section-text{
    visibility: collapse;
}

#fourth-section-img{
    visibility: collapse;
}

/* -------------------- */

.first-section-buttoms button:nth-child(1){
    animation: ShowButtomsTop 1.9s ease-in-out;
}

.first-section-buttoms button:nth-child(2){
    animation: ShowButtomsTop 2.5s ease-in-out;
}

@keyframes ShowButtomsTop {
    0%{
        opacity: 0;
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes ShowTextFromTop {
    0%{
        opacity: 0;
        transform:translateY(-150px);
    }

    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes ShowTextFromBottom {
    0%{
        opacity: 0;
        transform:translateY(150px);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes ShowTextFromLeft{
    0%{
        opacity: 0;
        transform:translateX(150px);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes ShowTextFromRight{
    0%{
        opacity: 0;
        transform:translateX(-150px);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes ShowImageFromLeft{
    0%{
        opacity: 0;
        transform:translateX(150px);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes ShowImageFromright{
    0%{
        opacity: 0;
        transform:translateX(-150px);
    }
    70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes floatingRight {
     0% {
       transform: translateY(0);
       filter: drop-shadow(17px 9px 1.2rem #5533f2);
     }
     50% {
       transform: translateY(-2px);
       filter: drop-shadow(17px 9px 1.5rem #5533f2);
     }
     100% {
       transform: translateY(0);
       filter: drop-shadow(17px 9px 1.2rem #5533f2);
     }
}

@media screen and (max-width: 1024px) {
    .first-section{
        background-position: bottom;
    }
}

@media screen and (max-width: 998px) {
    .second-section-text, .fourth-section-text, .last-section {
        max-width: 100%;
        margin: 0;
        padding: 0 1.5rem 1.5rem;
    }
    .fourth-section-img, .fourth-section img{
        margin: 0;
        padding: 1.5rem;
    }
    .third-section{
        padding: 1.5rem 1.5rem 1.5rem;
    }
    .third-section-text, .fourth-section{
        margin: 0;
    }

    .second-section img{
        width: 100%;
        max-width: 80%;
        padding: 1.5rem;
    }
    #second-section{
        margin: 0!important;
    }

    .fourth-section img{
        width: 100%;
        max-width: 80%;
    }

    .third-section-text {
        max-width: 41rem;
        padding-bottom: 1.7rem;
    }

    .last-section-text {
        max-width: 28rem;
        padding: 1.5rem 0;
        margin: 0;
    }

    .third-section img{
        width: 100%;
        max-width: 80%;
    }
    .last-section img{
        width: 100%;
        max-width: 80%;
    }
}

@media screen and (max-width: 481px){
    .div-moving-title-dots{
        margin-top: 1.5rem;
    }
}