body {
    margin: 0;
    padding: 0;
    background-color: rgb(0, 0, 0);
    overflow-x: hidden;
}

.no-scroll {
    overflow: hidden;
}

h1 {
    font-size: 7vw;
    text-align: center;
    font-family: boldfont;
    line-height: 7vw;
    color: #ffffff;
}

h2 {

}

h3 {
    font-size: 4.5vw;
    text-align: center;
    font-family: regularfont;
    font-weight: 100;
    line-height: 4.5vw;
    color: #ffffff;
}

p {
    font-size: 4vw;
    font-family: regularfont;
    line-height: 4.5vw;
    text-align: center;
}

/*/////////// HEAD ///////////*/

.head {
    animation: gradient-animation 5s infinite alternate; /* Animação contínua */
    background: linear-gradient(to right, rgb(128, 0, 255), rgb(183, 0, 255));
    background-size: 300% 300%;
    width: 100%;
    height: 15vw;
    display: flex;
    align-items: center;
    position: fixed;
    transition: transform 0.5s ease-in-out, opacity 0.5 ease-in-out;
    z-index: 50;
}

@keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.head.exiting {
    transform: translateY(-150%);
    opacity: 0;
}

.head.entering {
    transform: translateY(0); 
    opacity: 1; 
}

.branding {
    width: 30%;
    margin-left: 4.5vw;
    margin-top: 1VW;
}

/*/////////// FIM HEAD ///////////*/

/*/////////// FIRSTFOLD ///////////*/

.firstfold {
    background-color: #302D33;
    width: 100%;
    height: 170vw;
    display: flex;
    flex-direction: column;
    position: relative;
}

.headlines {
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(0, 0, 0, 0.628), rgba(0, 0, 0, 0.923), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0));    
    position: absolute;
    top: 110vw;
    left: 0;
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.headlines h1 {
    margin-top: 25vw;
    font-size: 6vw;
    line-height: 6vw;
    padding: 0vw 3vw 0vw 3vw;
    color: #c3a3ff;
}

.headlines h3 {
    padding: 5vw 5vw 0vw 5vw;
}

.botao-com-imagem {
    display: flex;
    align-items: center;
    background-color: #150a19;
    border: none;
    color: white;
    width: 27%;
    height: 8vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    font-size: 2.5vw;
    font-family: arial;
    font-weight: 600;
    margin-left: 33.5vw;
    cursor: pointer;
    border-radius: 3vw;
    transition: background-color 0.3s;
}

.botao-com-imagem:hover {
    background-color: #4e2e5c;
}

.botao-com-imagem img {
    width: 4vw;
    margin-right: 2vw;
}

.firstfold h3{
    margin-top: -3vw;
}

/*/////////// FIM FIRSTFOLD ///////////*/

/*/////////// PREVIEWS ///////////*/

.previews {
    width: 100%;
    padding-top: 15vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.gif-floating-container {
    width: 15vw;
    height: 15vw;
    background-color: white;
    border-radius: 50vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* Permite posicionar em qualquer lugar */
    top: 25%; /* Distância do topo em porcentagem ou pixels */
    left: 85%; /* Distância da esquerda em porcentagem ou pixels */
    transform: translate(-50%, -50%); /* Centraliza a div no ponto definido */
    color: white; 
}

.hidden {
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Transição de 1 segundo */
}

.visible {
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Transição de 1 segundo */
}

.gif-floating {
    width: 10vw;
}


.carousel-container {
    width: 100%;
    height: 163vw;
    overflow-x: auto;
    display: flex;
    scroll-behavior: smooth;
}

.previews-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10vw;
}

.carousel {
    display: flex;
    gap: 3vw;
}

.space {
    height: 10vw;
    width: 2vw;
}

.space-fim {
    width: 2.5vw;
}

.categories {
    background: linear-gradient(to right, rgb(140, 0, 255), rgb(191, 28, 255));
    background-size: 300% 300%;
    animation: gradientMove 5s infinite alternate;
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
    width: 90%;
    height: 15vw;
    margin-top: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4vw 4vw 0vw 0vw;
    margin-bottom: 3vw;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.boys-container {
    background-color: #ffffff;
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 0vw 0vw 5vw 5vw;
}

.boy {
    width: 100%;
}

.informations-container {
    width: 90%;
}

.boy-information {
    width: 100%;
    height: 7vw;
    display: flex;
    align-items: center;
    margin-top: 5vw;
}

.left {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.name-boy {
    display: flex;
    font-family: boldfont;
    font-size: 5vw;
    margin: 0;
    padding: 0;
}

.right {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}

.update-date {
    font-family: regularfont;
    font-size: 2vw;
    margin-top: 3vw;
}

.boy-reviews {
    width: 100%;
    height: 4vw;
    display: flex;
    align-items: center;
}

.boy-reviews p {
    font-family: regularfont;
    font-size: 2.5vw;
    margin-left: 1vw;
    color: #818181;
    margin-top: 3.8vw;
}

.rating {
    display: flex;
    direction: rtl;
    font-size: 4vw;
    pointer-events: none;
}

.rating input {
    display: none;
}

.yellow {
    color: rgb(255, 196, 0);
}

.gray {
    color: rgb(145, 145, 145);
}

.boy-media {
    display: flex;
    width: 100%;
    height: 15vw;
}

.amount-media {
    background-color: rgb(241, 241, 241);
    width: 39vw;
    height: 8vw;
    border-radius: 5vw;
    display: flex;
    align-items: center;
}

.mediaicons {
    width: 10%;
    margin-left: 3vw;
}

.amount-media p {
    font-family: regularfont;
    font-size: 3vw;
    margin-left: 2vw;
    color: #2e2e2e;
    margin-top: 3.5vw;
}

.watchcontent {
    position: relative;
    display: inline-block;
    width: 90%;
    height: 15vw;
    font-size: 5vw;
    font-weight: bold;
    color: #ffffff;
    background-color: #6206f7;
    border: none;
    border-radius: 5vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-bottom: 5vw;
}

.watchcontent::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    animation: sweep 2s infinite ease-in-out;
}

@keyframes sweep {
    0% {
        left: -100%;
    }
    50% {
        left: 100%;
    }
    100% {
        left: 200%;
    }
}

.morecontentavailable {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.amount {
    margin-top: -3vw;
}

.amount h1{
    color: #8800ff;
    font-size: 25vw;
}

.amount p{
    color: #8800ff;
    font-size: 11vw;
    margin-top: -13vw;
    font-family: boldfont;
}

.txt-info {
    font-size: 3vw;
    padding: 0vw 15vw 0vw 15vw;
    line-height: 3.5vw;
    margin-top: -4vw;
}

.watchcontent2 {
    position: relative;
    display: inline-block;
    width: 80%;
    height: 15vw;
    font-size: 5vw;
    font-weight: bold;
    color: #ffffff;
    background-color: #6206f7;
    border: none;
    border-radius: 5vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-bottom: 5vw;
}

.watchcontent2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    animation: sweep 2s infinite ease-in-out;
}

/*/////////// FIM PREVIEWS ///////////*/

/*/////////// ADVANTAGES ///////////*/

.advantages { 
    width: 100%;
    height: 415vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1e181f;
    position: relative;
}

.advantages h1 {
    margin-top: 18vw;
    font-size: 5vw;
    line-height: 5vw;
    padding: 0vw 3vw 0vw 3vw;
    margin-left: 30vw;
    text-align: left;
    margin-bottom: 10vw;
}

.advantages-container {
    background: linear-gradient(to right, rgb(189, 109, 255), rgb(183, 0, 255));
    width: 90%;
    height: 65vw;
    display: flex;
    flex-direction: column;
    border-radius: 4vw;
    align-items: center;
    justify-content: center;
    margin: 3vw;
}

.advantages-title {
    width: 100%;
    height: 15vw;
    display: flex;
    align-items: center;
}

.advantages-icon {
    width: 8%;
    margin-left: 5vw;
    opacity: 80%;
}

.advantages-title h2 {
    font-size: 5vw;
    margin-left: 3vw;
    color: #fff;
    font-family: boldfont;
}

.advantages-text p {
    text-align: left;
    font-family: regularfont;
    font-size: 4vw;
    line-height: 4.5vw;
    margin-left: 5vw;
    color: #fff;
    padding-right: 5vw;
}

.floating1, .floating2, .floating3, .floating4, .floating5, .floating6, .evil1, .evil2 {
    position: absolute; /* Permite posicionamento livre na tela */
    transition: all 0s ease-in-out;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transform-origin: left center;
}

.floating1 {
    width: 25%;
    animation-name: floating1;
    position: absolute; 
    top: 10vw; 
    left: 5vw; 
    z-index: 5;
}

@keyframes floating1 {
    0% {
        transform: translateY(0) rotate(3deg);
    }
    50%{
        transform: translateY(20%) rotate(10deg);
    }
    100% {
        transform: translateY(0) rotate(3deg);
    }
}

.floating2 {
    width: 15%;
    animation-name: floating2;
    position: absolute; 
    top: 99vw; 
    left: 83vw; 
    z-index: 5;
}

@keyframes floating2 {
    0% {
        transform: translateY(0) rotate(3deg);
    }
    50%{
        transform: translateY(-20%) rotate(-15deg);
    }
    100% {
        transform: translateY(0) rotate(3deg);
    }
}

.floating3 {
    width: 17%;
    animation-name: floating3;
    position: absolute; 
    top: 245vw; 
    left: 80vw; 
    z-index: 5;
}

@keyframes floating3 {
    0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(-55%) rotate(-15deg);
    }
    100% {
        transform: translateY(0);
    }
}

.floating4 {
    width: 20%;
    animation-name: floating4;
    position: absolute; 
    top: 175vw; 
    left: 3vw; 
    z-index: 5;
}

@keyframes floating4 {
    0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(-25%) rotate(6deg);
    }
    100% {
        transform: translateY(0);
    }
}

.floating5 {
    width: 15%;
    animation-name: floating5;
    position: absolute; 
    top: 383vw; 
    left: 83vw; 
    z-index: 5;
}

@keyframes floating5 {
    0% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(-25%) rotate(6deg);
    }
    100% {
        transform: translateY(0);
    }
}

.floating6 {
    width: 20%;
    animation-name: floating6;
    position: absolute; 
    top: 313vw; 
    left: 3vw; 
    z-index: 5;
}

@keyframes floating6 {
    0% {
        transform: translateY(0) rotate(5deg);
    }
    50%{
        transform: translateY(20%) rotate(15deg);
    }
    100% {
        transform: translateY(0) rotate(5deg);
    }
}

.evil1 {
    width: 12%;
    animation-name: floating6;
    position: absolute; 
    top: 147vw; 
    left: 86vw; 
    z-index: 5;
    display: block;
}

.evil2 {
    width: 10%;
    animation-name: floating4;
    position: absolute; 
    top: 150vw; 
    left: 2vw; 
    z-index: 5;
    display: block;
}

/*/////////// FIM ADVANTAGES ///////////*/

/*/////////// PRICES ///////////*/

.prices {
    background-color: #fff;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headline-price {
    color: #000;
    padding: 20vw 5vw 0vw 5vw;
}

.description-price {
    color: #000;
    padding: 0vw 7vw 0vw 7vw;
    margin-top: -3vw;
}

.price-container {
    background: linear-gradient(to top, rgb(147, 15, 255), rgb(193, 99, 255));
    width: 85vw;
    border-radius: 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bestoption {
    background-color: #000;
    color: #ff5100;
    width: 35%;
    height: 6vw;
    border-radius: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5vw;
}

.bestoption p {
    font-size: 3vw;
    margin-left: 2vw;
    margin-top: 3.5vw;
}

.bestoption-icon {
    width: 10%;
}

.accesstime {
    font-size: 7vw;
    font-family: boldfont;
    color: #ffffff;
}

.amount-payable {
    width: 100%;
    height: 45vw;
    display: flex;
    justify-content: center;
}

.criphate {
    color: white;
    font-size: 15vw;
    margin-top: 26.5vw;
    font-family: boldfont;
}

.value {
    color: white;
    font-size: 40vw;
    margin-top: 20vw;
    font-family: boldfont;
}

.benefitsmakeplan {
    background-color: #000;
    width: 90%;
    height: 12vw;
    margin: 0.5vw;
    border-radius: 4vw;
    display: flex;
    align-items: center;
}

.makeplan {
    width: 8%;
    margin-left: 3vw;
    margin-right: 2vw;
}

.benefitsmakeplan p {
    color: white;
    font-size: 3vw;
    margin-top: 3.5vw;
}

.tosign {
    position: relative;
    display: inline-block;
    width: 90%;
    height: 15vw;
    font-size: 5vw;
    font-weight: bold;
    color: #1d1620;
    background-color: #ffffff;
    border: none;
    border-radius: 5vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-bottom: 5vw;
    margin-top: 5vw;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 rgb(234, 180, 255);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.carousel-container-price {
    width: 100%;
    height: 160vw;
    overflow-x: auto;
    display: flex;
    scroll-behavior: smooth;
    margin-top: 10vw;
}

.carousel-price {
    display: flex;
    gap: 3vw;
}

.security {
    margin-top: 5vw;
    width: 70%;
    display: flex;
}

.security p {
    font-size: 3vw;
    margin-left: 1vw;
}

.security-icon {
    width: 20%;
}

.scroll-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    background-color: #ac54ff; /* Exemplo de cor de fundo, pode alterar conforme necessidade */
    color: #fff; /* Exemplo de cor do texto, pode alterar conforme necessidade */
    height: 15vw;
    margin-top: 10vw;
}
  
.scrolling-text {
    font-size: 17vw;
    font-family: boldfont;
    color: #fff;
    display: inline-block;
    margin-top: -4vw;
    padding-left: 100%; /* Espaço para iniciar a animação fora da tela */
    animation: scroll-text 10s linear infinite; /* Definindo a animação */
}

@keyframes scroll-text {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
}

.left2 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: start;
}

.right2 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: end;
}
/*/////////// FIM PRICES ///////////*/

/*/////////// HOWTOACCESS ///////////*/

.howtoaccess {
    background-color: rgb(231, 231, 231);
    width: 100%;
    display: flex;
    flex-direction: column;
}

.howtoaccess h1 {
    color: #000;
    font-size: 6vw;
    text-align: left;
    margin-left: 4vw;
    padding: 10vw 6vw 0vw 2vw;
}

.howtoaccess-text {
    text-align: left;
    padding: 0vw 6vw 0vw 6vw;
    margin-top: -3vw;
}

.instructions-container {
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instructions-img {
    width: 90%;
}

.card-number {
    width: 15vw;
    height: 15vw;
    background: linear-gradient(to top, rgb(147, 15, 255), rgb(193, 99, 255));
    border-radius: 10vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -4vw;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.5);
}
.card-number p {
    color: #fff;
    font-family: boldfont;
    font-size: 8vw;
    margin-top: 9vw;
}

.instructions-container p{
    padding: 0vw 12vw 0vw 12vw;
}

.carousel-container-instructions {
    width: 100%;
    height: 163vw;
    overflow-x: auto;
    display: flex;
    scroll-behavior: smooth;
    margin-top: 5vw;
    margin-bottom: 10vw;
}

.carousel-instructions {
    display: flex;
    gap: 3vw;
}

/*/////////// FIM HOWTOACCESS ///////////*/

/*/////////// TESTIMONIALS ///////////*/

.testimonials {
    width: 100%;
    height: 206vw;
    display: flex;
    flex-direction: column;
    background-color: white;
}

.testimonials h1 {
    color: #000;
    font-size: 6vw;
    text-align: left;
    margin-left: 4vw;
    padding: 10vw 6vw 0vw 2vw;
}

.testimonials-text {
    text-align: left;
    padding: 0vw 6vw 0vw 6vw;
    margin-top: -3vw;
    color: #494949;
}

.testimonials-text2 {
    text-align: left;
    padding: 0vw 6vw 0vw 6vw;
    margin-top: 5vw;
    color: #494949;
}

.ratings-container {
    width: 64%;
    height: 10vw;
    background-color: rgb(241, 241, 241);
    border-radius: 3vw;
    display: flex;
    align-items: center;
    margin-left: 5.5vw;
    margin-bottom: 5vw;
}

.ratings-container p {
    font-size: 3vw;
    margin-top: 4.5vw;
    margin-left: 2vw;
}

.rating-2 {
    display: flex;
    direction: rtl;
    font-size: 4vw;
    margin-left: 3vw;
    pointer-events: none;
}

.rating-2 input {
    display: none;
}

.yellow {
    color: rgb(255, 196, 0);
}

.gray {
    color: rgb(145, 145, 145);
}

.half {
    background: linear-gradient(90deg, rgb(255, 196, 0) 50%, rgb(145, 145, 145) 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.container-testimonials {
    background-color: rgb(241, 241, 241);
    width: 85vw;
    height: 45vw;
    border-radius: 4vw;
    margin-left: 2vw;
}

.testimonials-information {
    width: 95%;
    height: 15vw;
    margin-top: 3vw;
    display: flex;
    align-items: center;
}

.testimonials-img {
    width: 8vw;
    margin-left: 5vw;
    margin-right: 2vw;
}

.whatifound {
    text-align: left;   
    padding-left: 5vw;
    padding-right: 5vw;
    font-size: 3vw;
    line-height: 4vw;
}

.carousel-container-testimonials {
    width: 100%;
    height: 50vw;
    overflow-x: auto;
    display: flex;
    scroll-behavior: smooth;
    margin-top: 5vw;
}

.carousel-testimonials {
    display: flex;
    gap: 2vw;
}

.your-evaluation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.evaluation {
    background-color: rgb(255, 255, 255);
    width: 87%;
    height: 35vw;
    border-radius: 4vw;
    border: 1px solid #d8d8d8;
}

.whatdowedeserve {
    width: 100%;
    background-color: rgb(241, 241, 241);
    height: 13vw;
    border-radius: 4vw 4vw 0vw 0vw;
    border-bottom: 1px solid #d8d8d8;
    display: flex;
    align-items: center;
}

.whatdowedeserve p {
    font-size: 3vw;
    margin-left: 5vw;
    margin-top: 4.5vw;
    color: #2b2b2b;
}

.star-rating {
    direction: rtl;
    unicode-bidi: bidi-override;
    display: inline-flex;
    font-size: 5.5vw;
    margin-left: 10vw;
    margin-top: 0vw;
}
.star-rating input {
    display: none;
}
.star-rating label {
    color: #585656;
    cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc700;
}

.writehere {
    padding: 2vw;
    width: 100%;
    margin-top: 0vw;
}

.writehere textarea {
    width: 92.5%;
    height: 17vw;
    border: none;
    resize: vertical;
}

.assessment {
    position: relative;
    display: inline-block;
    width: 90%;
    height: 15vw;
    font-size: 5vw;
    font-weight: bold;
    color: #ffffff;
    background-color: #6206f7;
    border: none;
    border-radius: 5vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-bottom: 5vw;
    margin-top: 5vw;
}

.assessment::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    animation: sweep 2s infinite ease-in-out;
}

/*/////////// FIM TESTIMONIALS ///////////*/

/*/////////// GUARANTEE ///////////*/

.guarantee {
    width: 100%;
    height: 190vw;
    display: flex;
    flex-direction: column;
    background-color: #f7f1fd;
}

.guarantee h2 {
    font-size: 6vw;
    font-family: boldfont;
    line-height: 7vw;
    padding: 0vw 5vw 0vw 5vw;
    margin-top: 15vw;
    color: #7300ff;
}

.guarantee p {
    text-align: left;
    font-size: 3vw;
    font-family: regularfont;
    line-height: 3.5vw;
    padding: 0vw 8vw 0vw 5vw;
    color: #27163c;
}

.garantuee-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-icon {
    width: 90%;
}

/*/////////// FIM GUARANTEE ///////////*/

/*/////////// SUPPORT ///////////*/

.support {
    background-color: #17111a;
    width: 100%;
    height: 125vw;
    display: flex;
    flex-direction: column;
}

.support h1 {
    color: #ffffff;
    font-size: 6vw;
    text-align: left;
    margin-left: 4vw;
    padding: 10vw 6vw 0vw 2vw;
    padding-top: 15vw;
}

.support-text {
    text-align: left;
    padding: 0vw 6vw 0vw 6vw;
    margin-top: -3vw;
    color: #cecece;
}

.contacts {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.contacts-container {
    width: 87%;
    height: 15vw;
    border: 1px solid #ffffff;
    border-radius: 4vw;
    margin-top: 3vw;
    display: flex;
    text-decoration: none;
    align-items: center;
}

.contacts-container p {
    color: #fff;
    margin-left: 5vw;
    margin-top: 5vw;
}

.whatsapp {
    background-color: white;
    width: 16vw;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius:  3.8vw 0vw 0vw 3.8vw;
}

.whatsapp-icone {
    width: 12vw;
}

#whatsappopup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    display: none; 
    align-items: center;
    justify-content: center;
    z-index: 1000; 
}

.popup-contentwpp {
    background: #fff; 
    border-radius: 5vw;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    text-align: center;
    max-width: 100vw;
    width: 90%;
}

.popup-contentwpp p {
    font-size: 4vw;
    color: #333; 
    line-height: 4vw;
    padding: 5vw 10vw 0vw 10vw;
}

.popup-contentwpp button {
    margin-bottom: 5vw;
    padding: 3vw 10vw;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 4vw;
}

#whatsapp-confirm-redirect {
    background-color: #25d366;
    color: #fff;
    transition: background-color 0.3s ease;
}

#whatsapp-confirm-redirect:hover {
    background-color: #20b954; 
}

#whatsapp-cancel-redirect {
    background-color: #e0e0e0; 
    color: #333; 
    transition: background-color 0.3s ease;
}

#whatsapp-cancel-redirect:hover {
    background-color: #c6c6c6; 
}

/*/////////// FIM SUPPORT ///////////*/

/*/////////// ASKED QUESTION ///////////*/

.askedquestions-container {
    width: 100%;
    max-height: 600vw;
    position: relative;
    display: flex;
    background-color: #050203;
    flex-direction: column;
    align-items: center;
}

.askedquestions-container h1 {
    color: #ffffff;
    font-size: 6vw;
    text-align: left;
    margin-left: 4vw;
    padding: 10vw 6vw 0vw 2vw;
    padding-top: 15vw;
}

.askedquestions-container-text {
    text-align: left;
    padding: 0vw 6vw 0vw 6vw;
    margin-top: -3vw;
    color: #cecece;
}

.question-item {
    margin-bottom: 2vw;
}

.question {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 88vw;
    height: 13vw;
    border-radius: 4vw;
    background-color: #0f0a11;
    border: solid 1px #9f06f7;
    transition: background-color 0.3s ease;
    color: #fff;
    font-family: boldfont;
    z-index: 4;
    position: relative;
}

.question p {
    font-size: 3.5vw;
    margin-left: 10vw;
    margin-top: 4.4vw;
}

.edge5 {
    width: 100%;
    transform: scaleY(-1); 
    margin-top: -3vw;
}

.askedp {
    font-size: 4vw;
    font-family: regularfont;
    text-align: center;
    color: white;
    margin-bottom: 15vw;
}

.icon {
    width: 4vw;
    height: 4vw;
    margin-left: 5vw;
    margin-right: -7vw;
}

.answer {
    width: 85vw;
    max-height: 150vw;
    display: none;
    color: #ffffff;
    margin-top: 3vw;
    
    font-size: 1vw;
    line-height: 3.5vw;
    margin-bottom: 15vw;
}

.answer p {
    padding: 0;
    margin: 5vw;
    text-align: left;
    font-family: Barlow Condensed;
    font-weight: 15 0;
    color: #afafaf;
}

.askedh1 {
    text-align: center;
    font-family: boldfont;
    color: #f7aa06;
    font-size: 8vw;
    line-height: 8vw;
    position: relative; 
    z-index: 4;
    padding-top: 20vw;
}

.space1 {
    height: 10vw;
}

.space2 {
    height: 15vw;
}

/*/////////// FIM ASKED QUESTION ///////////*/

/*/////////// BASEBOARD ///////////*/

.baseboard {
    background-color: rgb(20, 20, 20);
    width: 100%;

}

.last-note {
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 5vw;
}

.last-note p {
    text-align: left;
    font-size: 3vw;
    line-height: 3vw;
    color: #fff;
    margin-left: 6vw;
}

.lastcta {
    position: relative;
    display: inline-block;
    width: 60%;
    height: 10vw;
    font-size: 2.5vw;
    font-weight: bold;
    color: #ffffff;
    background-color: #6206f7;
    border: none;
    border-radius: 3vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-left: 4vw;
    margin-right: 6vw;
}

.lastcta::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.4);
    transform: skewX(-25deg);
    animation: sweep 2s infinite ease-in-out;
}

.button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10vw;
}

.custom-button {
    width: 90%;
    height: 9vw;
    text-align: left;
    border-radius: 2vw;
    margin-top: 1vw;
    font-size: 3vw;
    color: #95859b;
    border: 1px solid #53465d;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.custom-button:hover {
    background-color: #ddd;
    color: #333;
}

.popup {
    background-color: #1d1322a4;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

.top {
    width: 100%;
    height: 20vw;
    background-color: #23132d;
    border-radius: 5vw 5vw 0vw 0vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    background-color: #fff;
    width: 90%;
    height: 150vw;
    border-radius: 5vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.scrollable-container {
    width: 95%; 
    height: 110vw; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    border-radius: 2vw; 
    background-color: #f9f9f9; 
    font-size: 14px;
    line-height: 1.6; 
    text-align: left;
}

.scrollable-container h2 {
    font-family: Arial, sans-serif; 
    font-size: 5vw;
    line-height: 5vw;
    margin-left: 3vw;
    margin-top: 10vw;
}

.scrollable-container h3 {
    text-align: left;
    font-family: Arial, sans-serif; 
    font-size: 5vw;
    color: #000;
    line-height: 5vw;
    margin-left: 3vw;
    margin-top: 10vw;
    padding-right: 5vw;
}

.scrollable-container p {
    text-align: left;
    font-family: Arial, sans-serif; 
    font-size: 3vw;
    line-height: 3.5vw;
    margin-left: 3vw;
    padding-right: 5vw;
}

ul {
    text-align: left;
    font-family: Arial, sans-serif; 
    font-size: 3vw;
    line-height: 3.5vw;
    margin-left: 3vw;
    margin-top: 3vw;
    padding-right: 5vw;
}

.close23 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95%;
    height: 10vw;
    color: #fff;
    font-family: boldfont;
    background-color: rgb(255, 0, 128);
    border-radius: 3vw;
    margin-top: 5vw;
}

.brandingpop {
    width: 40%;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 20px;
    cursor: pointer;
}

.last-txt {
    font-size: 2.5vw;
    text-align: left;
    margin-left: 5vw;
    margin-right: 5vw;
    line-height: 3vw;
    margin-top: 15vw;
    color: #665c6f;
}

.remove {
    position: relative;
    display: inline-block;
    width: 45%;
    height: 7vw;
    font-size: 2.5vw;
    font-weight: regular;
    color: #cba4ed;
    background-color: #16082e;
    border: 0.2vw solid #842dc6;
    border-radius: 3vw;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
    outline: none;
    z-index: 5;
    margin-left: 5vw;
    margin-right: 6vw;
}

.endedge {
    background-color: #000;
    width: 100%;
    height: 20vw;
    display: flex;
    margin-top: 10vw;
    align-items: center;
}

.branding3 {
    width: 30vw;
    margin-left: 6vw;
}

.endedge p {
    color: rgb(194, 194, 194);
    font-size: 2vw;
    margin-left: 28vw;
    font-family: regularfont;
    margin-top: 3vw;
}
.removee {
    width: 100%;
    height: 110vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-self: center;
}

#removepopup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 110vw;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 5vw;
    z-index: 1000;
}

.removee h3 {
    color: #000;
    font-family: boldfont;
    margin-top: 10vw;
}

#removepopup input, #removepopup textarea {
    width: 85%;
    margin-bottom: 1vw;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
#removepopup button {
    display: flex;
    width: 90%;
    height: 10vw;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 3vw;
    cursor: pointer;
    margin: 1vw;
    align-items: center;
}
.env {
    background-color: #120d0e;
}

.cancel {
    background-color: #ff0048;
}

#removepopup button:hover {
    background-color: #000000;
}
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/*/////////// FIM BASEBOARD ///////////*/

/*/////////// LOGIN POPUP ///////////*/

.popup-overlay-login-main {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
}

.form-main {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

form {
        align-items: center;
        display: flex;
        flex-direction: column;
        width: 100%;
}

#popupForgotPasswordMain {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
}

.popup-login-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 85vw;
        height: 115vw;
        border-radius: 5vw;
        border: 1px solid #4c2563;
        box-shadow: 0 5vw 15vw rgba(8, 7, 10, 0.3);
}

.popup-login-main input[type="text"],
.popup-login-main input[type="password"] {
        width: 80%;
        padding: 3vw;
        margin: 1vw 0;
        border: 1px solid #ccc;
        border-radius: 3vw;
}

.popup-header-login-main {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 5vw;
        margin-top: 1vw;
}

.branding-login-main {
        width: 37vw;
}

.entrar-btn-main {
        width: 88%;
        padding: 4vw;
        margin-top: 1vw;
        background-color: #6a00ff;
        border: none;
        color: #fff;
        border-radius: 3vw;
        cursor: pointer;
        font-size: 5vw;
        font-family: boldfont;
}

.voltar-main {
        width: 87%;
        padding: 3vw;
        margin-top: 5vw;
        background-color: #6b5886;
        border: none;
        color: #fff;
        border-radius: 3vw;
        cursor: pointer;
        font-size: 3vw;
        font-family: boldfont;
}

.btn-conta-main {
        width: 87%;
        padding: 2vw;
        margin-top: -2vw;
        background-color: #b700ff;
        border: none;
        color: #fff;
        border-radius: 3vw;
        cursor: pointer;
        font-size: 4vw;
        font-family: boldfont;
}

.senha-txt-main {
        color: white;
        font-size: 3vw;
        font-family: regularfont;
}

.nova-conta-main {
        color: white;
        font-size: 4vw;
        font-family: regularfont;
        margin-top: 10vw;
}

.popup-login-main button:hover {
        background-color: #d16eff;
}

.close-popup-login-main,
.close-popup-forgot-main {
        text-align: right;
        cursor: pointer;
        font-size: 8vw;
        margin-top: 4vw;
        color: #fff;
        margin-left: 67vw;
}

/*/////////// FIM LOGIN POPUP ///////////*/