@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



:root {

    --azul-claro: #9ac8e6;

    --azul-escuro: #1f2037;

}



* {

    padding: 0;

    margin: 0;

    font-family: 'Montserrat', sans-serif;

    scroll-behavior: smooth;

}



*::-webkit-scrollbar {

    width: 10px;

}



*::-webkit-scrollbar-track {

    width: 12px;

    box-shadow: inset 0 0 .3rem #00000050;

    background-color: transparent;

}



*::-webkit-scrollbar-thumb {

    border-radius: 12px;

    background-color: var(--azul-escuro);

}



#inicio {

    position: relative;

    background: url(assets/bg_01.png) no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    padding-bottom: 2rem;

}



.logo {

    display: flex;

    justify-content: center;

}



.logo img {

    transform: scale(0.6);

}



#btn-login {

    position: absolute;

    right: 70px;

    top: 37px;

    font-size: 20px;

    font-weight: 500;

    text-transform: uppercase;

    color: #fff;

    background-color: var(--azul-escuro);

    border: 1px solid var(--azul-claro);

    border-radius: 3rem;

    padding: 0.4rem 1rem;

    transition: all 0.2s ease-in-out;

}



#btn-login:hover {

    background-color: var(--azul-claro);

    color: var(--azul-escuro);

    border: 1px solid var(--azul-escuro);



}



.inicio-description {

    display: flex;

    justify-content: center;

    align-items: center;

}



.box-logo {

    width: 30%;

}



.box-logo img {

    width: 100%;

}



.inicio-text {

    word-break: break-word;

    font-size: 1.8rem;

    margin-left: 1rem;

}



#btn-buy-inicio {

    text-transform: uppercase;

    color: #fff;

    background-color: rgb(89, 193, 89);

    border: none;

    border-radius: 1.3rem;

    padding: 0.3rem 1rem;

    transition: all 0.2s ease-in-out;

}



#btn-buy-inicio:hover {

    transform: translateY(-5px);

    box-shadow: 0px 5px 15px rgba(23, 194, 23, 0.626);

}



#features {

    background: url(assets/bg_02.png)no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    width: 100%;

    padding: 1rem 4rem;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

}



.box-features {

    border: 1px solid var(--azul-claro);

    border-radius: 2rem;

    position: relative;

    margin: 2rem;

    width: fit-content;

    padding: 1rem;

}



.box-features h3 {

    position: absolute;

    top: -1rem;

    left: 1rem;

    background-color: var(--azul-claro);

    color: var(--azul-escuro);

    width: fit-content;

    padding: 0.4rem;

}



.features-list {

    margin-top: 3rem;

    font-size: 2.3rem;

}



li {

    list-style-image: url(assets/lightning-fill.svg);

}



#blogposts {

    text-align: center;

    /* border: 5px solid red; */

}



.carousel-inner {

    /* border: 5px dotted #ffae00; */

    text-align: center;

    margin-right: auto;

    margin-left: auto;

}



.item-slide {

    display: inline-block;

    text-align: center;

    padding: 2rem;

    background-color: #9ac8e6;

    margin: 1rem;

    height: 30rem;

    width: 25%;

    max-width: 33%;

    overflow: hidden;

    /* transform: translateY(-3px); */

    /* box-shadow: 1px 1px 2px rgba(0, 33, 91, 0.529); */

    border: 1px solid #1f20378a;

    border-radius: 10%;

}



.item-slide h4 {

    font-size: medium;

}



.item-slide p {

    max-height: 30%;

    font-size: small;

    display: block;

}



/* .item-slide:hover {

    background-color: #1f2037;

} */





.sld-img {

    max-width: 100%;

    max-height: 40%;

    height: 30%;

    margin-bottom: 0.2rem;

    align-self: center;

    /* overflow: hidden; */

}



.leia-mais {

    text-decoration: none;

    padding: 0.3rem;

    color: #9ac8e6;

    font-weight: bold;

    text-align: end;

    background-color: #1f2037;

}



.leia-mais:hover {

    color: #1f2037;

    background-color: #9ac8e6;

    border: 1px solid #1f2037;

}



.vm-card {

    text-align: center;

    background-color: #9ac8e6;

}

.vm-card:hover {

    background-color: #1f2037;

    cursor: pointer;

    color: #9ac8e6;

}



.spacing {

    display: block;

    height: 50%;

}



.vermais {

    font-size: xx-large;

    color: #9ac8e6;

    background-color: #1f2037;

    text-decoration: none;

    font-weight: bold;

    text-align: center;

    margin: 0.2rem;

    padding: 0.3rem;

}



.vermais:hover {

    color: #1f2037;

    text-decoration: none;

    background-color: #9ac8e6;

/*     border: 2px solid #1f2037; */

}



.carousel-item {

    /* border: 5px solid greenyellow; */

    text-align: center;

    overflow: hidden;

}



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

    .carousel-inner{

        width: 100%;

        display: flex;

        flex-flow: column wrap;

    }

    .item-slide {

        width: 100%;

        max-width: 80%;

        flex-wrap: wrap;

        max-height: fit-content;

    }

    .item-slide h4 {

        font-size: small;

    }

    .item-slide p {

        font-size: smaller;

        max-height: 30%;

        overflow: hidden;

    }

    .vermais {

        font-size: medium;

    }

    .leia-mais {

        font-size: small;

    }

}



/* @media only screen and (max-width: 290px) {

    #blogposts {

        display: none;

    }

} */



#blogposts {

    background: url(assets/bg_01.png) no-repeat center center fixed;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

}



/* 

.card {

    --bs-card-border-color: none;

    background-image: url(assets/card_depoimento.png);

    background-size: contain;

    background-repeat: no-repeat;

    width: 29rem;

    height: 40rem;

    margin: auto;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}



.card-content {

    min-width: 20rem;

    position: absolute;

    top: 4rem;

    text-align: center;

    transform: scale(0.9);



}



.card-content p {

    font-size: 1.6rem;

}



.card-content h2,

.card-content small {

    color: #fff;

} */



#prices {

    position: relative;

    background-color: var(--azul-escuro);

    width: 100%;

    padding: 2rem;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    flex-wrap: wrap;

}



.descount {

    color: #fff;

    display: flex;

    flex-direction: column;

    padding-right: 4rem;

}



.descount span {

    text-transform: uppercase;

    font-size: 2rem;

    text-align: center;

}



.descount p {

    text-align: center;

    font-weight: 300;

    font-size: 1.9rem;

}



.division-old-price {

    height: 100%;

    min-width: 25%;

    margin: 1rem 2rem;

}



.old-price {

    position: relative;

    background-color: var(--azul-claro);

    color: var(--azul-escuro);

    font-size: 6rem;

    font-weight: bold;

    border-radius: 1.5rem;

    text-align: center;

    width: fit-content;

    padding: 0 1rem;

}



.old-price small {

    font-weight: 500;

    font-size: 2rem;

}



.old-price span {

    background-color: #fff;

    position: absolute;

    top: -1rem;

    font-size: 1.6rem;

}



.redline {

    position: absolute;

    top: -7rem;

    left: 9rem;

    transform: rotate(70deg);

    width: 7px;

    height: 23rem;

    background-color: red;

}



.division-new-price {

    flex-direction: column;

    display: flex;

    align-items: center;

    justify-content: center;

}



.new-price {

    position: relative;

    background-color: var(--azul-claro);

    color: var(--azul-escuro);

    font-weight: bold;

    width: 100%;

    height: 10rem;

    padding: 0 2.5rem;

    border-radius: 1.5rem;

    display: flex;

    flex-direction: column;

}



.new-price span {

    background-color: #fff;

    position: absolute;

    top: -1rem;

    font-size: 1.9rem;

}



.new-price small {

    position: absolute;

    top: 2rem;

    font-size: 1rem;

}



.box-newprice {

    display: flex;

    font-size: 7rem;

    align-items: center;

    position: relative;

    bottom: -2rem;

}



.box-newprice h1 {

    font-size: 5rem;

    font-weight: bold;

}



.box-newprice p {

    font-size: 3.5rem;

    font-weight: 500;

}





.box-newprice small {

    font-weight: 500;

    font-size: 2rem;

    position: absolute;

    right: 0;

    bottom: 0;

}



.parcelamento {

    position: absolute;

    bottom: -1rem;

    font-weight: 400;

}



#btn-buy-prices {

    text-transform: uppercase;

    color: #fff;

    background-color: rgb(89, 193, 89);

    border: none;

    border-radius: 1.3rem;

    padding: 0.3rem 1rem;

    margin-top: 2rem;

    font-size: 3rem;

    font-weight: 500;

    width: fit-content;

    transition: all 0.2s ease-in-out;

}



#btn-buy-prices:hover {

    transform: translateY(-3px);

    box-shadow: 0px 5px 15px rgba(0, 253, 0, 0.358);

}



#faq {

    background: url(./assets/bg-rodapé.png) no-repeat center center;

    -webkit-background-size: cover;

    -moz-background-size: cover;

    -o-background-size: cover;

    background-size: cover;

    display: flex;

    justify-content: space-evenly;

    align-items: center;

    padding-bottom: 2rem;

    overflow-x: hidden;

}



.faq-text span {

    word-break: break-word;

    font-size: 2.8rem;

    line-height: 1.2;

    font-weight: 500;

}



.link-faq {

    display: flex;

    flex-direction: column;

}



.link-faq img {

    transform: scale(0.4);

}



.link-faq span {

    margin-top: -4rem;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.link-faq h1 {

    font-weight: bold;

}



.btn-faq {

    color: #fff;

    background-color: rgb(89, 193, 89);

    border: none;

    border-radius: 1.3rem;

    padding: 0.3rem 1rem;

    font-size: 2rem;

    font-weight: 500;

    width: fit-content;

    transition: all 0.2s ease-in-out;

}



.btn-faq:hover {

    transform: translateY(-3px);

    box-shadow: 0px 5px 15px rgba(0, 253, 0, 0.358);

}



footer {

    display: flex;

    justify-content: center;

    overflow: hidden;

}



.copyright {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 50vw;

}



.copyright span {

    font-weight: 500;

    line-height: 1.2;

}



.copyright img {

    transform: scale(0.6);

}



.developed {

    width: 50vw;

    display: flex;

    align-items: center;

    justify-content: center;

}



.developed span {

    font-weight: 500;

    line-height: 1.2;

}



.developed img {

    transform: scale(0.6);

}

@media (max-width: 768px) {
    footer {
        flex-direction: column;
    }

    .copyright, .developed {
        width: 100%; /* Ocupar a largura total */
        transform: scale(0.8);
    }
}



/* Animação */



[data-anime] {

    opacity: 0;

    transition: 1s;

}



[data-anime="down"] {

    transform: translate3d(0, -100px, 0);

}



[data-anime="up"] {

    transform: translate3d(0, 100px, 0);

}



[data-anime="left"] {

    transform: translate3d(-100%, 0, 0);

}



[data-anime="right"] {

    transform: translate3d(100%, 0, 0);

}



[data-anime].animate {

    opacity: 1;

    transform: translate3d(0, 0, 0);

}



@media (max-width: 500px) {



    #btn-login {

        top: 1rem;

        right: 1rem;

        font-size: 0.7rem;

        padding: 0.5rem 0.7rem;

    }



    .logo {

        transform: scale(0.8);

    }



    .inicio-text {

        word-break: break-word;

        font-size: 0.9rem;

    }



    #btn-buy-inicio {

        border-radius: 12px;

    }



    #features {

        padding: 2rem 1rem;

    }



    .box-features {

        margin: 0;

    }



    .box-features h3 {

        font-size: 16px;

    }



    .features-list li {

        font-size: 1rem;

        line-height: 1.2;

    }



    #blogposts {

        background: url(assets/bg_01.png) no-repeat center center fixed;

        -webkit-background-size: cover;

        -moz-background-size: cover;

        -o-background-size: cover;

        background-size: cover;

    }



    /* .carousel-inner img {

        display: none;

    } */



    .redline {

        height: 230px;

        left: 90px;

        top: -80px;

    }



    .old-price {

        width: 12rem;

        border-radius: 12px;

        min-width: 1rem;

        font-size: 3rem;

    }



    .descount {

        display: none;

    }



    .old-price span {

        font-size: 1rem;

    }



    .new-price {

        width: 16rem;

        border-radius: 12px;

        min-width: 1rem;

        font-size: 3rem;

        padding: 0 1rem;

        margin-top: 1rem;

    }



    .new-price span {

        font-size: 1.4rem;

    }



    .new-price small {

        top: 1.3rem;

    }



    .box-newprice h1 {

        font-size: 4rem;

    }



    .box-newprice p {

        font-size: 3rem;

    }



    #btn-buy-prices {

        font-size: 2rem;

    }



    .faq-text span {

        font-size: 1rem;

    }



    .link-faq {

        position: relative;

    }



    .link-faq h1 {

        font-size: 1rem;

    }



    .link-faq img {

        transform: scale(0.5);

        margin-bottom: 1.6rem;

    }



    .btn-faq {

        font-size: 1rem;

    }



    .copyright {

        justify-content: center;

    }



    .copyright img {

        transform: scale(0.6);

    }



    .copyright span {

        font-size: 1rem;

        margin-left: 2rem;

    }



    .developed {

        padding-bottom: 1rem;

    }

    .bresultsimg {
        max-width: 50%;
        
    }

    .developed a {
        width: 50%;
    }

    .developed img {
        margin-left: -30px;
        transform: scale(0.5);
        object-fit: contain;

    }



    .developed span {

        text-align: center;

        font-size: 1rem;

        margin-top: 1rem;

    }



    footer {

        flex-wrap: wrap;

        justify-content: center;

    }



}



@media (min-width: 550px) and (max-width: 768px) {

    .descount {

        display: none;

    }



    .faq-text span {

        font-size: 2rem;

    }



    .link-faq h1 {

        text-align: center;

    }



    .btn-faq {

        font-size: 1rem;

    }



    .copyright {

        justify-content: center;

    }



    .copyright span {

        font-size: 1rem;

    }



    .developed {

        position: relative;

    }



    .developed span {

        position: absolute;

        font-size: 1rem;

        top: 0;

    }



    .developed img {

        transform: scale(0.5);

    }

}



@media (width: 1024px) {

    .descount {

        display: none;

    }





    .developed {

        position: relative;

    }



    .developed span {

        position: absolute;

        font-size: 1.4rem;

        top: 0;

    }



    .developed img {

        transform: scale(0.8);

    }

}