* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 0.5s;
    border: none;
    outline: none;
    text-decoration: none;
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
}

a {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Topvagas {
    background-color: rgb(255, 0, 170);
    padding: 20px;
    width: 100%;
    box-shadow: 0 0 28px #ff00d0;
    position: absolute;
    top: 0;
}

.h1Topvagas {
    text-align: center;
    letter-spacing: 2px;
    font-size: 32px;
}

.MobileButton {
    z-index: 99;
    position: fixed;
    bottom: 15px;
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    text-shadow: 3px 6px 3px BLACK;
    box-shadow: 0 0 28px #ff00d0;
    margin-top: 20px;
    cursor: pointer;
    animation: ButtonPulse 2s infinite ease-in-out;
}

@keyframes ButtonPulse {
    0% {
        box-shadow: 0 0 18px #ff00d0;
    }

    50% {
        box-shadow: 0 0 38px #ff00d0;
    }

    100% {
        box-shadow: 0 0 18px #ff00d0;
    }
}


.Bpink {
    color: #ff00d0;
    font-size: 55px;
    text-shadow: 0 0 25px;
}

.Bred {
    color: #ff006d;
}

.Section1 {
    min-height: 100vh;
    min-width: 800px;
    background-color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('./imgs/BackgroundSec1.png');
    background-size: cover;
    flex-direction: column;
    padding: 150px 0 80px;
}

.TextsSec1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 60px;
}

.TitleSec1 {
    text-align: center;
    font-size: 36px;
    width: 580px;
    line-height: 50px;
}

.TextSec1 {
    font-weight: 400;
    text-shadow: 0 0 9px #ff00d0;
    font-size: 18px;
    width: 450px;
    text-align: center;
}

.ButtonSec1 {
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    text-shadow: 3px 6px 3px BLACK;
    box-shadow: 0 0 28px #ff00d0;
    margin-top: 85px;
    cursor: pointer;
    animation: ButtonPulse 2s infinite ease-in-out;
}

.ButtonSec1:hover {
    box-shadow: 0 0 65px #ff00d0;
}

.ImagesSec1 {
    display: flex;
    justify-content: center;
    gap: 44px;
    flex-wrap: wrap;
}

.DivExample1 {
    box-shadow: 0 0 40px #ff00d0;
    height: 275px;
    width: 240px;
    border-radius: 8px;
}

.ExampleSec1 {
    width: 100%;
    border: solid 4px #ff00d0;
    border-radius: 8px;
    animation: pulseGlow 2.05s infinite ease-in-out;
    position: relative;
}

.ExampleSec2 {
    width: 100%;
    border: solid 4px #ff00d0;
    border-radius: 8px;
    animation: pulseGlow 2s infinite ease-in-out;
    position: relative;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 20px #ff00d0;
    }

    50% {
        box-shadow: 0 0 50px #ff00d0;
    }

    100% {
        box-shadow: 0 0 20px #ff00d0;
    }
}


/* Section2 */

.Section2 {
    background-image: url(./imgs/BackgroundSec2.png);
    background-size: cover;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 55px;
    padding: 110px 0;
}

.TitlePink {
    background-color: #ff00d0;
    padding: 7px 15px;
    font-size: 27px;
    text-align: center;
}

.BoxSec2 {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    width: 70%;
    justify-content: center;
}

.DivConquest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 12px;
    height: 170px;
    box-shadow: 0 15px 0 #ff00d09c;
    width: 300px;
}

.BackIcon {
    padding: 14px;
    border-radius: 500px;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back1 {
    background-color: rgb(192, 250, 255);
}

.back2 {
    background-color: rgb(255, 255, 154);
}

.back3 {
    background-color: rgb(192, 255, 204);

}

.back4 {
    background-color: pink;
}

.back5 {
    background-color: rgb(192, 228, 255);

}

.IconSec2 {
    width: 100%;
}

.DescConquest {
    color: #ff00d0;
    text-align: center;
    font-size: 20px;
    width: 80%;
}



/* Section3 */

.Section3 {
    background-color: #2b2b2b;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 110px 0;

}

.divExamplesSec3 {
    margin-top: 120px;
    display: flex;
    gap: 70px;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
}

@keyframes pulseGlow2 {
    0% {
        box-shadow: 0 0 35px #ff00d0;
    }

    50% {
        box-shadow: 0 0 60px #ff00d0;
    }

    100% {
        box-shadow: 0 0 35px #ff00d0;
    }
}

.ExampleSec31 {
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 45px #ff00d0;
    border-radius: 8px;
    animation: pulseGlow2 2s infinite ease-in-out;
}

.ExampleSec32 {
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 45px #ff00d0;
    border-radius: 8px;
    animation: pulseGlow2 2.05s infinite ease-in-out;
}

.ExampleSec33 {
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 45px #ff00d0;
    border-radius: 8px;
    animation: pulseGlow2 2.02s infinite ease-in-out;
}

.Sec3Example {
    width: 100%;
    border: solid 4px #ff00d0;
    border-radius: 8px;
}

.pSec3 {
    position: absolute;
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    width: 28%;
    text-shadow: 0 0 12px;
}

.h3Sec3 {
    margin: 75px 0 0;
    font-size: 40px;
    width: 70%;
    text-align: center;
    line-height: 45px;
}

.TextSec3 {
    margin-top: 25px;
    font-size: 27px;
    width: 50%;
    text-align: center;
}

.BrightPink {
    color: #ff00d0;
    text-shadow: 0 0 15px;
}

.ButtonSec3 {
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    text-shadow: 3px 6px 3px BLACK;
    box-shadow: 0 0 28px #ff00d0;
    margin-top: 35px;
    cursor: pointer;
    animation: ButtonPulse 2s infinite ease-in-out;

}

.ButtonSec3:hover {
    box-shadow: 0 0 65px #ff00d0;
}



/* Section4 */

.Section4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 110px 0;
    gap: 50px;

}

.SpanSec4 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.TitleSec4 {
    color: black;
    font-size: 37px;
    text-align: center;
    width: 60%;
    line-height: 40px;
}

.TitlePinkSec4 {
    background-color: #ff00d0;
    font-size: 37px;
    text-align: center;
    padding: 2px 16px;
}

.CarrousselSec4 {
    display: flex;
    gap: 30px;
    overflow: hidden;
    width: 100%;
}

.ImageResult {
    width: 700px;
}

.ButtonSec4 {
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    text-shadow: 3px 6px 3px BLACK;
    box-shadow: 0 0 28px #ff00d0;
    margin-top: 35px;
    cursor: pointer;
    animation: ButtonPulse 2s infinite ease-in-out;

}

.ButtonSec4:hover {
    box-shadow: 0 0 65px #ff00d0;
}




/* Section5 */

.Section5 {
    display: flex;
    gap: 50px;
    padding: 110px 0;
    background-image: url('./imgs/BackgroundSec5.png');
    background-size: cover;
    min-height: 100vh;
    justify-content: center;

}

.MainSec5 {
    display: flex;
    gap: 200px;
    padding-left: 100px;
    justify-content: center;
    flex-wrap: wrap;
}

.SpanSec5 {}

.TitleSec5 {
    background-color: #ff0394;
    text-align: center;
    font-size: 32px;
    padding: 5px 25px;
}

.BonusSec5 {
    margin-top: 105px;
}

.BonusText {
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 19px 15px #00000096;
    margin-top: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    gap: 18px;
}

.Checkedicon {
    width: 30px;
}

.ImagesPlat {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
    justify-content: center;
    background-color: #ffffff61;
    border-radius: 20px;
    padding: 35px 0;
}

.ImageSec5 {
    width: 70%;
}




/* Section6 */

.Section6 {
    background-image: url('./imgs/BackgroundSec6.png');
    background-size: cover;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 70px 0;

}

.MainSec6 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.articleSec7 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.TitleSec6 {
    text-align: center;
    font-size: 33px;
}

.TitlePinkSec6 {
    background-color: #ff00d0;
    padding: 7px 15px;
    font-size: 38px;
    text-align: center;
}

.TimeSec6 {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-top: 25px;
}

@keyframes minipulseGlow {
    0% {
        box-shadow: 0 0 25px #ff00d0;
    }

    50% {
        box-shadow: 0 0 30px #ff00d0;
    }

    100% {
        box-shadow: 0 0 25px #ff00d0;
    }
}

.DivTime {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    justify-content: center;

}

.ClockSec6 {
    text-align: center;
    font-size: 30px;
    line-height: 32px;
    width: 54%;
}

.Footertext {
    text-align: center;
    font-size: 30px;
    line-height: 32px;
    width: 54%;
}

.Footertext2 {
    text-align: center;
    font-size: 25px;
    line-height: 32px;
    width: 52%;
    margin-top: 20px;
    text-shadow: 0 0 20px #ff4ae7;
}

.DeskClock {
    text-align: center;
    font-family: math;
    font-size: 20px;
}

@keyframes pulseGlow3 {
    0% {
        box-shadow: 0 0 25px #ff00d0;
    }

    50% {
        box-shadow: 0 0 60px #ff00d0;
    }

    100% {
        box-shadow: 0 0 25px #ff00d0;
    }
}


.ProdutcContainer {
    background-color: #1d1d1d;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 33px 0;
    border: solid #ff00d0;
    box-shadow: 0 0 45px #ff00d0;
    margin-top: 65px;
    margin-bottom: 65px;
    gap: 8px;
    width: 390px;
    animation: pulseGlow3 3s infinite ease-in-out;
}

.bGray {
    color: #a7a7a7;
    text-decoration: line-through;
}

.bYellow {
    color: #ffd400;
}

.Text1Buy {
    font-size: 20px;
    line-height: 10px;
}

.Text2Buy {
    font-size: 20px;
    color: #ff00d0;
    text-shadow: 0 0 15px;
}

.Text3Buy {
    font-size: 20px;
}

.Text4Buy {
    color: #ff00d0;
    font-size: 37px;
    text-shadow: 0 0 20px;
    text-align: center;
}

.ButtonSec6 {
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    box-shadow: 0 0 28px #ff00d0;
    cursor: pointer;
    margin-top: 20px;
    animation: ButtonPulse 2s infinite ease-in-out;

}

.ButtonSec6:hover {
    box-shadow: 0 0 65px #ff00d0;
}

.ImageDispositives {
    width: 76%;
    margin-top: 26px;
}




/* Section7 */

.Section7 {
    min-height: 115vh;
    display: flex;
    flex-direction: column;
    padding: 110px 15px;
    background-color: #ffe1fe;
    align-items: center;
    gap: 80px;
}

.MainSec7 {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.BoxQuestion {
    background-color: white;
    border-radius: 8px;
    padding: 15px 0;
    width: 900px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    position: relative;
    box-shadow: 0 15px 15px #0000004f;
}

.ArrowButton {
    position: absolute;
    left: 40px;
    cursor: pointer;
}

.PQuestion {
    text-align: center;
    color: black;
    font-size: 23px;
}

.PReposta {
    color: black;
    text-align: center;
    font-size: 20px;
    display: none;
}

.BoxQuestion.open .PReposta {
    display: block;
    animation: fadeIn 0.3s ease;
}

.BoxQuestion.open .PQuestion {
    color: #ff00d0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.BoxQuestion .ArrowButton {
    transition: top 0s ease;
    top: 50%;
    transform: translateY(-50%);
}

.BoxQuestion.open .ArrowButton {
    top: 15px;
    transform: none;
    transform: rotate(90deg);
}





/* Section8 */

.Section8 {
    background-color: #2e2e2e;
    padding: 100px 15px;
    display: flex;
    min-width: 390px;
    align-items: center;
    justify-content: center;
}

.MainSec8 {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
}

.ImageNutri {
    width: 43%;
}

.spanSec8 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 472px;
}

.NutriName {
    width: 160px;
}

.bSec8 {
    display: block;
    font-size: 20px;
}

.TextSec8 {
    font-weight: 400;
    font-size: 18px;
    padding-left: 8px;
    text-shadow: 0 0 10px #ffffff4f;
}

@keyframes ButtonPulse2 {
    0% {
        box-shadow: 0 0 8px #ff00d0;
    }

    50% {
        box-shadow: 0 0 28px #ff00d0;
    }

    100% {
        box-shadow: 0 0 8px #ff00d0;
    }
}

.ButtonSec8 {
    background: linear-gradient(122deg, rgba(247, 0, 255, 1) 36%, rgba(150, 0, 143, 1) 100%);
    padding: 14px 8px;
    width: 375px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
    animation: ButtonPulse2 2s infinite ease-in-out;

}

.ButtonSec8:hover {
    box-shadow: 0 0 25px #ff00d0;
}

.Section9 {
    padding: 90px 0;
    background-color: rgb(31, 31, 31);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.TextsSec9 {
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    width: 85%;
    margin-top: 125px;
}

.divDescSec9 {}

.Desc9Title {
    font-weight: 800;
    font-size: 30px;
    width: 50%;
    margin-left: 90px;
}

.bSec9 {
    background-color: #ff00d0;
    padding: 3px;
}

.tpink {
    color: #ff00d0;
    font-weight: 500;
}

.DescText9 {
    font-weight: 500;
    font-size: 23px;
    margin-top: 30px;
    width: 95%;
}

.IllustrationSec9 {
    width: 36%;
}



/* FooterPage */

.FooterPage {
    background-color: #1b1b1b;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 3px;
}

.LogoChallenge {
    width: 10%;
}

.License {
    font-weight: 400;
    text-align: center;
}

.Divfooter9 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-top: 110px;
}

.FooterSec9 {
    text-align: center;
    background-color: #ff00d0;
    padding: 8px;
    font-size: 27px;
    font-weight: bold;
}

.TextSec9 {
    text-align: center;
    width: 60%;
    font-weight: bold;
    font-size: 25px;
}

.MainSec9 {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 90px;
    align-items: center;
}

.h1Sec9 {
    font-size: 32px;
    width: 60%;
    text-align: center;
}

.h3Sec6 {
    font-size: 25px;
    width: 75%;
    text-align: center;
}

.bFooterSec9 {
    color: #ff00d0;
    font-size: 40px;
}

.ButtonSec9 {
    border-radius: 12px;
    width: 315px;
    height: 85px;
    background-color: #ff00d0;
    font-size: 26px;
    line-height: 30px;
    text-shadow: 3px 6px 3px BLACK;
    box-shadow: 0 0 28px #ff00d0;
    margin-top: 50px;
    cursor: pointer;
    animation: ButtonPulse 2s infinite ease-in-out;
}


@media screen and (max-width: 1000px) {

    .Topvagas {
        min-width: 390px;
    }

    .h1Topvagas {
        text-align: center;
        letter-spacing: 2px;
        font-size: 25px;
        line-height: 20px;
    }

    .Section1 {
        min-width: 390px;
        padding-top: 130px;
        padding-bottom: 40px;
        min-width: 390px;
    }

    .TitleSec1 {
        font-size: 30px;
        line-height: 38px;
        width: 95%;
    }

    .TextSec1 {
        width: 390px;
    }

    /* Section2 */

    .Section2 {
        min-width: 390px;
    }



    .Section3 {
        min-width: 390px;
    }

    .pSec3 {
        width: 50%;
    }

    .h3Sec3 {
        font-size: 26px;
        line-height: 25px;
    }

    .TextSec3 {
        width: 95%;
        font-size: 17px;
    }



    .Section4 {
        min-width: 390px;
    }



    .ImageResult {
        width: 390px;
    }




    .Section5 {
        min-width: 390px;
    }

    .MainSec5 {
        padding-left: 0;
    }

    .BonusSec5 {
        padding: 0 10px;
    }

    .ImagesPlat {
        width: 95%;
    }



    .Section6 {
        min-width: 390px;
    }

    .TitleSec6 {
        line-height: 32px;
        font-size: 30px;
    }

    .ClockSec6 {
        width: 90%;
        font-size: 28px;
    }

    .ProdutcContainer {
        width: 95%;
    }


    .Footertext {
        font-size: 25px;
        line-height: 32px;
        width: 90%;
    }

    .Footertext2 {
        font-size: 20px;
        line-height: 27px;
        width: 90%;
        margin-top: 20px;
    }


    .Section7 {
        padding: 80px 0;
        min-height: 85vh;
        min-width: 390px;
    }

    .BoxQuestion {
        width: 360px;
    }

    .PQuestion {
        font-size: 13px;
    }

    .PReposta {
        font-size: 13px;
    }

    .ArrowButton {
        left: 15px;
        width: 18px;
    }





    .spanSec8 {
        width: 375px;
    }



    .Section9 {
        min-width: 390px;
    }

    .TextsSec9 {
        flex-direction: column;
    }

    .Desc9Title {
        margin: 0;
        width: 90%;
        font-size: 20px;
    }

    .DescText9 {
        font-size: 20px;
        width: 100%;
    }

    .IllustrationSec9 {
        width: 90%;
    }

    .TextSec9 {
        font-size: 20px;
        width: 95%;
    }

    .h1Sec9 {
        width: 100%;
        font-size: 24px;
    }

    .bFooterSec9 {
        font-size: 30px;
    }

    .h3Sec6 {
        font-size: 20px;
    }

    .FooterPage {
        min-width: 390px;
    }
}

@media screen and (width: 390px) {
    .MobileButton {
        display: flex;
    }
}