/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.6;
    color: #fff;
    background-color: #00020f;

    scrollbar-width: thin;
    scrollbar-color: #333 #111;

    /* user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none; */
}





.container {
    width: 100%;
    max-width: 1350px;
    margin: auto;
}

header {
    color: #fff;
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(16px);
    background: #00020fd1;
    border-bottom: 1.5px solid #4846462b;
}

header .container {
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.LogoSection {
    margin: 0;
    padding-top: 0;
    display: flex;
    align-items: center;
    height: 100%;
    transition: all 0.2s ease;
}

.LogoSection img {
    height: 40px;
    width: auto;
    vertical-align: middle;
}

.LogoSection:hover {
    opacity: 0.75;
}

.NavigationSection {
    display: flex;
    align-items: center;
    gap: 50px;
}

.NavigationSection li {
    list-style: none;
    transition: transform 0.3s ease;
}

.NavigationSection a {
    color: #999999;
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
}

.NavigationSection a.active {
    color: #ffffff;
    font-weight: 600;
}

.NavigationSection li:hover {
    transform: scale(1.2);
    transform-origin: center;
}

.Discord-Link {
    display: inline-flex;
    align-items: center;
}

.Discord-Link svg {
    width: 13px;
    height: 13px;
    fill: #999999;
    margin-left: 8px;
}

.Discord-Link:active {
    transform: none;
}

.LoginSection {
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.LoginSection a {
    background: linear-gradient(135deg, #0088FF 0%, #0055CC 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
    padding: 10px 14px;
    border-radius: 10px;
    color: #fffffff1;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.LoginSection a:hover {
    background: linear-gradient(135deg, rgba(0, 136, 255, 0.75) 0%, rgba(0, 85, 204, 0.75) 100%);
    box-shadow: none;
}

.LoginSection svg {
    fill: #ffffff;
    opacity: 0;
    transition: all 0.3s ease;
    width: 0;
}

.LoginSection:hover svg {
    opacity: 0.8;
    width: 24px;
    height: 24px;
    margin-left: 5px;
}

.LanguageSection {
    position: relative;
    z-index: 1002;
    /* Adicione isso */
}

.NavigationSection-Right {
    display: flex;
    align-items: center;
    gap: 17px;
}

.language-toggle {
    padding: 10px 11px;
    border: 1px solid #ffffff1a;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    position: relative;
    z-index: 1000;
}

.search-container {
    position: sticky;
    top: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffffff1a;
    margin-bottom: 12px;
}

.search-input {
    width: 100%;
    background: #111827;
    padding: 10px 12px;
    border: 1px solid #ffffff26;
    border-radius: 8px;
    /* background: rgba(255, 255, 255, 0.05); */
    color: #f1f5f9;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input:focus {
    border-color: #3b82f6;
}

.search-input::placeholder {
    color: #94a3b8;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    width: 100%;
    border-radius: 8px;
    text-decoration: none;
    color: #cbd5e1;
    transition: all 0.2s ease;
    font-size: 15px;
    position: relative;
}

.language-toggle:hover {
    background: #0d1320;
}

.language-dropdown {
    backdrop-filter: blur(50px);
    display: none;
    position: absolute;
    top: 120%;
    right: 0;
    border: 1px solid #ffffff1a;
    border-radius: 8px;
    box-shadow: 0 0 12px 4px #0a0c10;
    width: 400%;
    z-index: 1001;
    flex-direction: column;
    padding: 18px 12px;
    background: #00020fd9;
}

.language-dropdown.active {
    display: flex;
}

.language-dropdown p {
    color: #b7b9bc;
    font-size: 13px;
    margin-bottom: 13px;
    padding-bottom: 8px;
    border-bottom: 1px solid #232a3d;
}

.language-dropdown a {
    font-size: 15px;
    color: #b5bec9;
    font-weight: normal;
    transition: all 0.2s ease;
}

.language-dropdown img {
    align-items: center;
    justify-content: center;
}

.language-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    width: 100%;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.language-option:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    padding-left: 17px;
    /* 12px normal + 15px extra = 27px */
}

.language-option::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 0;
    width: 3px;
    background: linear-gradient(to bottom, #3b82f6, #1e40af);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease;
}

.language-option:hover::after {
    height: 70%;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 5px 0;
    transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes navbarFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

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



/* .Section-Hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 102vh;
    text-align: center;
    padding: 20px;
    margin-top: -100px;
    overflow: hidden;
} */

.Section-Hero {
    display: flex;
    flex-direction: column;
    height: 92vh;
    overflow: hidden;
}

.Hero-coisa {
    display: flex;
    align-items: center;
}

.Hero-Text {
    flex: 1;
    text-align: left;
    overflow: hidden;
}

.Hero-Image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.Hero-Image img {
    max-width: 80%;
}

.snow-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: block;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.bg-image-1 {
    width: 100%;
    height: 100%;
    top: 100%;
    background: url('../assets/efeito1.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
}

.bg-image-2 {
    width: 100%;
    height: 100%;
    background: url('../assets/efeito2.svg');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
}

.bg-image-3 {
    background-image: url('../assets/efeito3.svg');
    background-size: cover;
    background-position: center;
    width: 50%;
    left: 25%;
    height: 100%;
    opacity: 0.5;
}

.bg-image-4 {
    background-image: url('../assets/efeito3.svg');
    background-size: cover;
    background-position: center;
    top: 75%;
    left: 25%;
    width: 50%;
    height: 100%;
    opacity: 0.5;
}

.Section-Hero h1 {
    font-size: 3rem;
    line-height: 1.3;
    color: #ffffff;
    font-weight: 700;
    background: linear-gradient(90deg, #ffffff, #ababab 50%, #ffffff);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Space Grotesk", sans-serif;
    margin-bottom: 30px;
}

.Section-Hero p {
    font-size: 18px;
    color: #818591;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
}

.Button-Hero-Planos {
    margin-top: 32px;
    background: #0071be36;
    color: #ffffffc2;
    padding: 11px 25px;
    border-radius: 10px;
    text-decoration: none;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    border: 2px solid #0071bed6;
    transition: all 0.5s ease;
    z-index: 2;
}

.Button-Hero-Planos svg {
    width: 0px;
    fill: #ffffffc2;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.Button-Hero-Planos:hover svg {
    opacity: 1;
    width: 13px;
    height: 13px;
    margin-left: 7px;
}

.Button-Hero-Planos:hover {
    background: #074066;
    border: 2px solid #25a4bfd6;
}

.Section-Clients {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #030612;
    text-align: center;
}

.clientesaba {
    overflow: hidden;
    position: relative;
}

.clientesaba h2 {
    font-size: 50px;
    line-height: 1.3;
    color: #ffffff;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
    margin-bottom: 5px;
}

.aaaaaaaaaaa {
    font-size: 18px;
    color: #818591;
    font-family: 'Poppins', sans-serif;
    line-height: 1.4;
    margin-bottom: 50px;
}

.clientesaba h2 span {
    color: #00c3ff;
}

/* 
.logos {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding-top: 10px;
}

.logos::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, #030612, #030612dc, transparent);
    z-index: 2;
    pointer-events: none;
}

.logos::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, #030612, #030612dc, transparent);
    z-index: 2;
    pointer-events: none;
}

.logos-content {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 100px;
    animation: marquee 20s linear infinite;
}

.logos-content.paused {
    animation-play-state: paused;
}

.client-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 20px;
    flex-shrink: 0;
    transition: filter 0.3s ease, transform 0.3s ease;
}

.client-item img {
    border-radius: 9999px;
    border: 4px solid #374151;
    height: 75px;
}

.client-item p {
    margin-top: 13px;
    font-size: .875rem;
    color: #d1d5db;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    margin-bottom: 40px;
}

        .logos-content:hover .client-item {
            filter: grayscale(100%);
        }

        .client-item:hover {
            filter: grayscale(0%) !important;
        }

        .client-item:hover img {
            transform: scale(1.1);
             border: 4px solid #144eac;
        } */

/* .logo-contaainer {
    --gap: 1.5rem;
    --duration: 30s;
}

.logo-contaainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, #030612, #030612dc, transparent);
    z-index: 2;
    pointer-events: none;
}

.logo-contaainer::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to left, #030612, #030612dc, transparent);
    z-index: 2;
    pointer-events: none;
}

.logo {
    display: flex;
    gap: var(--gap);
    animation: marqueeee var(--duration) linear infinite;
    
}

.logo-content {
    display: flex;
    flex-direction: row;
    gap: var(--gap);
    flex-shrink: 0;
    min-width: 100%;
    justify-content: space-around;
    align-items: center;
}

.logo-item img {
    border-radius: 9999px;
    border: 4px solid #374151;
    height: 75px;
    transition: transform 0.3s, border-color 0.3s; 
}

.logo-item p {
    margin-top: 5px;
    font-size: .875rem;
    color: #d1d5db;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
}

.logo-item:hover ~ .logo-item img,
.logo-container:hover .logo-item img {
    filter: grayscale(100%);
}

.logo-item:hover img {
    filter: grayscale(0%);
    transform: scale(1.1);
    border: 4px solid #144eac;
}

@keyframes marqueeee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
} */


/* Keep most of your existing CSS, only showing changes */



.wrapper {
    height: 150px;
    mask-image: linear-gradient(to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0));
}

@keyframes scrollLeft {
    to {
        left: -200px;
    }
}

.item img {
    border-radius: 9999px;
    border: 4px solid #374151;
    height: 75px;
}

.item p {
    margin-top: 13px;
    font-size: .875rem;
    color: #d1d5db;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    margin-bottom: 40px;
}

.logos-content:hover .client-item {
    filter: grayscale(100%);
}

.client-item:hover {
    filter: grayscale(0%) !important;
}

.client-item:hover img {
    transform: scale(1.1);
    border: 4px solid #144eac;
}

.item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    position: absolute;
    left: max(calc(200px * 15), 100%);
    /* Updated for 15 items */
    animation-name: scrollLeft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.wrapper:hover .item {
    animation-play-state: paused; /* Pause animation for all items on wrapper hover */
}

.item1 {
    animation-delay: calc(30s / 30 * (30 - 1) * -1); /* -29s */
}

.item2 {
    animation-delay: calc(30s / 30 * (30 - 2) * -1); /* -28s */
}

.item3 {
    animation-delay: calc(30s / 30 * (30 - 3) * -1); /* -27s */
}

.item4 {
    animation-delay: calc(30s / 30 * (30 - 4) * -1); /* -26s */
}

.item5 {
    animation-delay: calc(30s / 30 * (30 - 5) * -1); /* -25s */
}

.item6 {
    animation-delay: calc(30s / 30 * (30 - 6) * -1); /* -24s */
}

.item7 {
    animation-delay: calc(30s / 30 * (30 - 7) * -1); /* -23s */
}

.item8 {
    animation-delay: calc(30s / 30 * (30 - 8) * -1); /* -22s */
}

.item9 {
    animation-delay: calc(30s / 30 * (30 - 9) * -1); /* -21s */
}

.item10 {
    animation-delay: calc(30s / 30 * (30 - 10) * -1); /* -20s */
}

.item11 {
    animation-delay: calc(30s / 30 * (30 - 11) * -1); /* -19s */
}

.item12 {
    animation-delay: calc(30s / 30 * (30 - 12) * -1); /* -18s */
}

.item13 {
    animation-delay: calc(30s / 30 * (30 - 13) * -1); /* -17s */
}

.item14 {
    animation-delay: calc(30s / 30 * (30 - 14) * -1); /* -16s */
}

.item15 {
    animation-delay: calc(30s / 30 * (30 - 15) * -1); /* -15s */
}

.item16 {
    animation-delay: calc(30s / 30 * (30 - 16) * -1); /* -14s */
}

.item17 {
    animation-delay: calc(30s / 30 * (30 - 17) * -1); /* -13s */
}

.item18 {
    animation-delay: calc(30s / 30 * (30 - 18) * -1); /* -12s */
}

.item19 {
    animation-delay: calc(30s / 30 * (30 - 19) * -1); /* -11s */
}

.item20 {
    animation-delay: calc(30s / 30 * (30 - 20) * -1); /* -10s */
}

.item21 {
    animation-delay: calc(30s / 30 * (30 - 21) * -1); /* -9s */
}

.item22 {
    animation-delay: calc(30s / 30 * (30 - 22) * -1); /* -8s */
}

.item23 {
    animation-delay: calc(30s / 30 * (30 - 23) * -1); /* -7s */
}

.item24 {
    animation-delay: calc(30s / 30 * (30 - 24) * -1); /* -6s */
}

.item25 {
    animation-delay: calc(30s / 30 * (30 - 25) * -1); /* -5s */
}

.item26 {
    animation-delay: calc(30s / 30 * (30 - 26) * -1); /* -4s */
}

.item27 {
    animation-delay: calc(30s / 30 * (30 - 27) * -1); /* -3s */
}

.item28 {
    animation-delay: calc(30s / 30 * (30 - 28) * -1); /* -2s */
}

.item29 {
    animation-delay: calc(30s / 30 * (30 - 29) * -1); /* -1s */
}

.item30 {
    animation-delay: calc(30s / 30 * (30 - 30) * -1); /* 0s */
}

























@keyframes flicker {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.8;
    }
}

.aaaaaaaaaaaaaaaaa {
    padding-top: 75px;
    padding-bottom: 40px;
    position: relative;
    display: flex;
    justify-content: left;
    text-align: left;
}

.aaaaaaaaaaaaaaaaa h1 {
    font-size: 2.25rem;
    color: #ffffff;
    text-align: center;
    font-weight: 700;
}

.titulo h1 {
    font-size: 2.5rem;
    color: #a6a6a6;
    text-align: left;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.3;
    font-weight: 800;
    z-index: 2;
}

.titulo p {
    font-size: 1.125rem;
    color: #b7b9bc;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    max-width: 45%;
}

.Mensagem-Container {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.Mensagem-Item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
}

.Mensagem-Item.reverse {
    flex-direction: row-reverse;
}

.Mensagem {
    flex: 1;
    text-align: left;
    max-width: 560px;
}

.Mensagem h2 {
    font-size: 45px;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    font-weight: 800;
    background: linear-gradient(90deg, #f0f0f0, #b0b0b0 50%, #f0f0f0);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.2;
}

.Mensagem p {
    font-size: 1.125rem;
    color: #b7b9bc;
    line-height: 1.7;
    font-weight: 400;
}

.Imagem-Container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    width: 600px;
    height: 450px;
    clip-path: border-box;
}

.Imagem-Destaque {
    z-index: 3;
    width: 85%;
    height: auto;
    position: relative;
}


/* .Imagem-Destaque {
    z-index: 2;
    background-image: linear-gradient(180deg, #00000000, #00000000), linear-gradient(180deg, #009FE3, #144154);
    -webkit-text-fill-color: inherit;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 1.5px solid #00000000;
    border-radius: 30px;
    width: 100%;
    height: auto;
    position: relative; 
    overflow: hidden;
} */

.imageefeito1 {
    z-index: 3;
    pointer-events: none;
    position: absolute;
    inset: -10% 0% auto;
    object-fit: contain;
    width: 100%;
}

.imageefeito2 {
    z-index: 1;
    pointer-events: none;
    width: 150%;
    position: absolute;
    inset: -133% 0% auto -25%;
}

.particle-canvas {
    z-index: 2;
    aspect-ratio: 1;
    pointer-events: none;
    width: 15%;
    position: absolute;
    top: -46px;
}

.barrinha {
    padding: 8px 16px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 20px;
    z-index: 2;
    position: relative;
    overflow: hidden;
    animation: 4s border-glint linear backwards infinite;
    border: 1.6px solid transparent;
    background-image: linear-gradient(to bottom right, #061242, #0d1b2a), linear-gradient(125deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 53%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100%, 200%;
    background-position: 0px, -250px;
    animation: 4s border-glint linear backwards infinite;
}

.barrinha::after {
    content: ' ';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 52%);
    animation: 4s glint linear backwards infinite;
    animation-delay: 3s;
}

@keyframes glint {
    0% {
        left: -120%;
    }

    8% {
        left: 50%;
    }

    100% {
        left: 50%;
    }
}


@keyframes border-glint {
    0% {
        background-position: 0px, -250px;
    }

    25% {
        background-position: 0px, -200px;
    }

    75% {
        background-position: 0px, 50px;
    }

    100% {
        background-position: 0px, 50px;
    }
}

@keyframes floatingShadow {
    0% {
        box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.15),
            4px 8px 12px rgba(0, 0, 0, 0.1),
            6px 12px 18px rgba(0, 0, 0, 0.05);
        filter: drop-shadow(1px 2px 2px #04384eb0);
    }

    50% {
        box-shadow: 3px 6px 9px rgba(0, 0, 0, 0.18),
            6px 12px 18px rgba(0, 0, 0, 0.12),
            9px 18px 27px rgba(0, 0, 0, 0.06);
        filter: drop-shadow(2px 4px 3px #04384eb0);
    }

    100% {
        box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.2),
            8px 16px 24px rgba(0, 0, 0, 0.14),
            12px 24px 36px rgba(0, 0, 0, 0.08);
        filter: drop-shadow(3px 6px 4px #04384eb0);
    }
}

.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa123131 {
    padding-bottom: 7%;
}














/* .planos-card {
    display: flex;
    background-color: #0f172a;
    border-radius: 30px;
    overflow: hidden;
} */

.planos-card-left::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    background: rgb(66 153 225 / 61%);
    filter: blur(200px);
    z-index: -1;
    opacity: 0.7;
}

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

.mensagemladoesquerdo h2 {
    font-size: 40px;
    color: #ffffff;
    background: linear-gradient(90deg, #f0f0f0, #b0b0b0 50%, #f0f0f0);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* .mensagemladoesquerdo p {
    font-size: 16px;
    color: #babcc4;
    margin-bottom: 20px;
} */

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

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

@keyframes shine {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.buttonmensagemladoesquerdo {
    background-color: #1e293b;
    padding: 11px 25px;
    border-radius: 0.75rem;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    transition: all 0.5s ease;
    border: 2px solid #dbdbdb;
}

.buttonmensagemladoesquerdo a {
    font-weight: 500;
    color: #cccdd1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.buttonmensagemladoesquerdo:hover {
    background-color: #213c6696;
    border: 2px solid #506c95;
    animation: pulse2 2s ease infinite;
}

.buttonmensagemladoesquerdo svg {
    margin-right: 8px;
    fill: #cccdd1;
}

@keyframes pulse2 {
    0% {
        box-shadow: 0 0 0 0 #ffffff4d;
    }

    70% {
        box-shadow: 0 0 0 10px #ffffff00;
    }

    100% {
        box-shadow: 0 0 0 0 #ffffff00;
    }
}

.badge {
    background: #1e40af30;
    font-size: 13px;
    padding: 5px 12px;
    border-radius: 43px;
    margin-bottom: 5px;
    backdrop-filter: blur(8px);
    border: 1px solid #1e40af;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.badge svg {
    width: 15px;
    height: 15px;
}

.button:hover {
    background-color: #2563eb;
}

.planos-card-header {
    display: flex;
    color: #fff;
    margin-bottom: 10px;
    gap: 12px;
}

/* .svg-cart {
    width: auto;
    height: auto;
    background-color: #2563eb;
    padding: 5px 11px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.aa2123 {
    background-color: #2563eb;
    border-radius: 0.75rem;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
}

.svg-cart {
    width: 1.25rem;
    height: 1.25rem;
    color: white;
}


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

.bot-info h1 {
    font-size: 20px;
    margin: 0;
    line-height: 1.2;
    font-family: "Libre Franklin", sans-serif;
    font-weight: 400;
}

.rating {
    color: #fbbf24;
    display: flex;
    align-items: center;
    margin-top: 0.25rem;
}

.rating svg {
    width: 0.75rem;
    height: 0.75rem;
    fill: currentColor;
    transition: all 0.3s ease;
}

.rating svg:hover {
    transform: rotate(15deg) scale(1.2);
}

.planos-card-right p {
    color: #cccdd1;
    font-size: 16px;
    line-height: 1.625;
}

.rating p {
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #a3a5ab;
    margin-left: 8px;
}

.features {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* Colunas mais estreitas */
    gap: 0.8rem;
}

.feature {
    background-color: #1e293b;
    padding: 11px;
    border-radius: 10px;
    color: #cccdd1;
    font-size: 13px;
    line-height: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    transition: background 0.3s ease;
}

.feature:hover {
    background-color: #334155;
}

.icon {
    background-color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 8px;
}

.feature:hover .icon {
    animation: pulse 1s ease;
}

.price-box {
    margin-top: 1.5rem;
    background-color: #102f8733;
    padding: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.price-box p {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1rem;
}

.mes {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.price-box-price {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    transition: all 0.3s ease;
}

.price-box-tempoprice {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-left: 5px;
}

.price-box-mensagem {
    color: #9ca3af;
    text-align: right;
}

.actions {
    display: flex;
    gap: 1rem;
    margin-top: 20px;
    width: 100%;
}

.actionsbotaoplano {
    background-color: #2461e9;
    border-radius: 0.75rem;
    letter-spacing: 0.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    width: 100%;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.actionsbotaoplano:hover {
    background-color: #1e40af;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.actionsbotaoplano a {
    font-weight: 600;
    color: #ffffff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 15px 20px;
    width: 100%;
    justify-content: center;
    transition: color 0.3s ease;
}

.actionsbotaoplano svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 10px;
    transition: transform 0.3s ease;
}


.planos-card-left,
.planos-card-right {
    flex: 1;
    /* Distribui o espaço igualmente */
}


.planosaaaaaaaaaa {
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Container principal */
.planos-card {
    display: flex;
    flex-direction: column;
    background-color: #0f172a;
    border-radius: 30px;
    overflow: hidden;
}

/* Seções */
.planos-card-left,
.planos-card-right {
    order: 2;
    padding: 30px;
    /* Reduzindo o padding */
    width: 100%;
    box-sizing: border-box;
}

/* Seção superior (esquerda) */
.planos-card-left {
    background: #111722;
    position: relative;
    z-index: 1;
    order: 1;
    text-align: center;
}



/* Texto descritivo */
.mensagemladoesquerdo p {
    font-size: 15px;
    margin-bottom: 14px;
    color: #babcc4;
}

/* Botão */
.buttonmensagemladoesquerdo {
    padding: 10px 20px;
    font-size: 14px;
}

/* Seção inferior (direita) */


/* Cabeçalho do card */

/* Título do produto */


/* Features */





.planos-card.ticket .icon {
    background-color: #16a34a;
}

.aa2123.ticket {
    background-color: #16a34a;
}

.planos-card.ticket .buttonmensagemladoesquerdo:hover {
    background-color: #14532d93;
    border: 2px solid #16a34abd;
}

.feature.ticket:hover .icon {
    animation: pulseaaavb 1s ease;
}

.planos-card.ticket .price-box {
    background-color: #16a34a33;
}

.planos-card.ticket .actionsbotaoplano {
    background-color: #1e9e4d;
}

.planos-card.ticket .actionsbotaoplano:hover {
    background-color: #157535;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.planos-card.ticket .planos-card-left::before {
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 200px;
    background: rgba(66, 225, 92, 0.61);
    filter: blur(200px);
    z-index: -1;
    opacity: 0.7;
}

.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00020fde;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    justify-content: center;
    align-items: center;
}

:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --secondary: #10b981;
    --dark: #1e293b;
    --darker: #0f172a;
    --light: #f8fafc;
    --gray: #94a3b8;
    --border: rgba(255, 255, 255, 0.08);
}



.modal-content {
    border-radius: 1rem;
    position: relative;
    border: 1px solid #1e1e1e;
    margin: auto;
    max-width: 900px;
    top: 50%;
    transform: translateY(-50%) scale(1);
    /* Aplicamos as duas transformações juntas */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}


.close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1.5rem;
    transition: color 0.3s ease;
    cursor: pointer;
}

.close:hover {
    color: #f8fafc;
}

.video-container {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    overflow: hidden;
    /* Isso garante que o iframe respeite o border-radius */
}

iframe {
    width: 100%;
    height: 450px;
    border: none;
    display: block;
    /* Remove espaços extras abaixo do iframe */
}

/* Header */
.panel-header {
    padding: 1.5rem;
    background: #030508;
    border-bottom: 1px solid #1e1e1e;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-title {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.panel-title svg {
    width: 24px;
    height: 24px;
    color: #3b82f6;
}

.panel-actions {
    display: flex;
    gap: 1rem;
}






.section-feedback {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 50px;
}

.section-feedback h2 {
    margin-bottom: 5px;
    font-size: 2.5rem;
    color: #ffffff;
    text-align: left;
    font-weight: 800;
    background: linear-gradient(90deg, #f0f0f0, #b0b0b0 50%, #f0f0f0);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-feedback p {
    font-size: 20px;
    color: #b7b9bc;
    text-align: left;
}

.balloons-container {
    margin-top: 3rem;
    display: grid;
    gap: calc(2px * 16);
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}

/* .balloons {
    display: flex;
    gap: 20px;
    justify-content: center;
} */

.balloon {
    width: 100%;
    text-align: left;
    position: relative;
    gap: calc(.25rem * 4);
    padding: 31px;
    border: 1px solid #13243d;
    border-radius: 16px;
}

.balloon:hover {
    animation: pulse 2s infinite;
    border: 1px solid #10428da6;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 #008cff4d;
    }

    70% {
        box-shadow: 0 0 0 10px #0084ff00;
    }

    100% {
        box-shadow: 0 0 0 0 #00a2ff00;
    }
}

@keyframes pulseaaavb {
    0% {
        box-shadow: 0 0 0 0 #16a34a54;
    }

    70% {
        box-shadow: 0 0 0 10px #16a34a07;
    }

    100% {
        box-shadow: 0 0 0 0 #16a34a07;
    }
}

.conteudo h3 {
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: calc(1.75 / 1.125);
    color: #e5e5e5;
}

.conteudo p {
    line-height: 1.625;
    color: #b7b9bc;
    font-size: 17px;
    margin-top: 15px;
}

.icone {
    position: absolute;
    top: -20px;
    left: 28px;
    padding: 4px;
    background: #030514;


    /* display: flex;
    justify-content: center;
    align-items: center;
    margin-top: .25rem;
    width: 43px;
    height: 43px;
    background-color: #143f7f;
    border-radius: 50%;
    padding: 12px 9px;
    box-sizing: border-box;
    box-shadow: 0 0 21px 2px #1f3351; */
}

.balloon svg {
    width: 35px;
    height: 35px;
    fill: #4878da;
    filter: drop-shadow(0 0 10px #4879da8f);
}


.planos-info {
    text-align: left;
    position: relative;
    z-index: 2;
}

.planos-info h3 {
    font-size: 3rem;
    line-height: 1;
    margin-top: 20px;
}

.planos-info svg {
    width: 15px;
    height: 15px;
    fill: #ffffff6b;
    margin-right: 5px;
}

.planos-info p {
    color: #a59e9e;
    font-size: 20px;
}

.planos-infop2 {
    color: #a59e9e;
    font-size: 15px;
    margin-top: 20px;
}

.balloons-info {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.balloon-info {
    background: #0a0e14;
    padding: 30px 20px;
    width: 100%;
    box-shadow: none;
    overflow: hidden;
    text-align: left;
    position: relative;
    border: 1px solid #a59e9e4d;
    border-radius: 15px;
}

.balloon-info:hover {
    animation: pulse 2s infinite;
    border-color: #ffffff6e;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}



.balloon-info h3 {
    color: #fff;
    font-size: 20px;
    margin-top: 15px;
    font-family: 'Poppins', Arial, sans-serif;
}

.balloon-info p {
    color: #ccc6c6ea;
    font-size: 15px;
    margin-top: 15px;
    font-family: 'Poppins', Arial, sans-serif;
}

.balloon-info svg {
    width: 24px;
    height: 24px;
    fill: #ffffff6b;
}

.area-bot-vendas {
    position: relative;
    width: 100%;
    margin-bottom: 230px;
}

.seta {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translateX(-50%);
    animation: flutuar 1.5s infinite ease-in-out;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.seta i {
    font-size: 20px;
    color: #ffffff80;
}

@keyframes flutuar {

    0%,
    100% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 10px);
    }
}

.seta.hidden {
    opacity: 0;
}

.grid-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.030) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.030) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    mask: linear-gradient(to right, transparent 0%, white 40%, white 60%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, white 40%, white 60%, transparent 100%);
    mask-composite: intersect;
}

.botoes-planos-info {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    animation: fadeIn 3s ease-out forwards;
}

.Button-Hero-Planos-info {
    background-color: #b7b9bc;
    color: #000000;
    padding: 8px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

.Button-Hero-Planos-info svg {
    fill: #000000;
    opacity: 0;
    transition: all 0.3s ease;
    width: 0;
}

.Button-Hero-Planos-info:hover svg {
    opacity: 1;
    width: 16px;
    height: 16px;
    margin-left: 8px;
}

.Button-Hero-Planos-info:hover {
    background-color: #b7b9bcd0;
    color: #000000;
}

.Button-Hero-Planos-info:active {
    transform: none;
}

.section-feedbackclientes {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding-bottom: 5%;
}

.text-container {
    position: relative;
    /* Adicionado para o pseudo-elemento */
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10%;
    padding-top: 20%;
}

.text-content {
    display: flex;
    flex-direction: column;

}

.section-feedbackclientes h1 {
    text-align: center;
    font-size: 40px;
    color: #ffffff;
    position: relative;
    font-weight: 600;
    line-height: 1.2;

    background: linear-gradient(90deg, #f0f0f0, #b0b0b0 50%, #f0f0f0);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8%;
}

.gradient-text {
    background: linear-gradient(90deg, #f0f0f0, #b0b0b0 50%, #f0f0f0);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

.gray-text {
    color: #808080;
    white-space: nowrap;
}

.Button-FeedbackCleinte {
    background: #0087ff5e;
    color: #dbdbdb;
    padding: 11px 17px;
    border-radius: 118px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    transition: all 0.5s ease;
}

.Button-FeedbackCleinte svg {
    width: 0px;
    fill: #dbdbdb;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}

.Button-FeedbackCleinte:hover svg {
    opacity: 1;
    width: 14px;
    height: 14px;
    margin-left: 7px;
}

.Button-FeedbackCleinte:hover {
    background: #0088ff7e;
}

.user-satisfaction {
    position: relative;
    height: auto;
}

.content-wrapper {
    justify-content: center;
    display: flex;
    gap: 5rem;
    margin-bottom: 5%;
}

.content-wrapper h2 {
    color: #f2f9fe;
    text-align: left;
    font-size: 47px;
    font-weight: 600;
    line-height: 1.47;

    max-width: 47%;
    word-wrap: break-word;
    white-space: normal;

}

.stats-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.stat-box {
    background: linear-gradient(108deg, rgb(248, 249, 254), #f8f9fe 40%, rgb(200, 211, 227), rgb(200, 211, 227)) 90%;
    padding: 5px 40px;
    border-radius: 20px;
    display: flex;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    place-items: center;
}

.box2 {
    background: #ffffff2b;
    padding: 8px 8px;
    border-radius: 20px;
}

.stat-box .value {

    font-size: 64px;
    font-weight: 500;
    color: #1565f9;
    display: flex;
    align-items: center;
    gap: 5px;
}




.stat-box .value .star {
    width: 100px;
    height: 66px;
}


.stat-box .label {
    text-align: left;
    font-family: 'Manrope', 'Manrope Placeholder', sans-serif;
    font-size: 18px;
    color: #485e79;
    margin-left: 20px;
}


.stats-bottom {
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 30px;
}

.box {
    background: linear-gradient(235deg, rgb(255 255 255 / 11%) 0%, rgb(222 232 246 / 7%) 100%);
    display: flex;
    flex-direction: column;
    padding: 40px 45px;
    border-radius: 16px;
    text-align: left;
}

.box .number {
    font-size: 42px;
    line-height: 1.2em;
    font-weight: 500;
    margin-bottom: 6px;
    background: linear-gradient(110deg, rgb(242, 249, 254), rgb(242, 249, 254) 20%, rgb(212, 237, 255), rgb(212, 237, 255) 45%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.box .desc {
    font-family: "IBM Plex Mono", monospace;
    font-weight: 200;
    font-size: 18px;
    color: rgb(130, 142, 157);
}

.footer-text {
    color: #999;
    font-size: 14px;
    margin-top: 20px;
}

.stats-wrapper {
    margin-bottom: 10%;
}

.principaisrecursos {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
    padding-bottom: 120px;
    padding-top: 75px;
}

.comparison-container {
    position: relative;
    padding: 0px 40px 40px;
    background: radial-gradient(100% 100% at 50% 0%, #00020f80 65.75%, #00041f80);
    border-radius: 40px;
    width: 100%;
}

.comparison-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 40px;
    padding: 1px;
    background: linear-gradient(to bottom, transparent, #0e132f);
    -webkit-mask:
        linear-gradient(#fff, #fff) content-box,
        linear-gradient(#fff, #fff);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


.comparison-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
    /* Space between header elements */
}

.comparison-header h2 {
    font-size: 30px;
    font-family: "Rethink Sans", "Rethink Sans Placeholder", sans-serif;
    text-align: center;
}

.vs-image {
    max-width: 80px;
    /* Constrain vs image size */
    height: auto;
    display: block;
    margin: 0 auto;
}

.namenext {
    height: 35px;
    display: block;
    margin: 0 auto;
}

.comparison-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comparison-card {
    display: flex;
    justify-content: space-between;
    border: 1px solid #0e122e;
    border-radius: 10px;
}

.item {
    flex: 1;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    text-align: left;
    word-wrap: break-word;
    white-space: normal;
    overflow: hidden;
}

.item.left {
    border-top-left-radius: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 10px;
    background-image: url('../assets/download\ \(7\).svg');
    background-size: cover;
    /* ou use contain/repeat dependendo do efeito desejado */
    background-repeat: repeat;
    /* repete o padrão como o original */
    background-position: center;
    color: #c4c8d4;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.item.right {
    border-left: 1px solid #0e132f;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 0;
    background-color: #00041f;
    color: #c4c8d4;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    position: relative;
    overflow: hidden;
}

/* Efeito de luz contido no right */
.item.right::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 185px;
    background: linear-gradient(90deg, #3363ff40, #00020f14);
    filter: blur(10px);
    transform: translateX(-261%);
}

.item.right::after {
    content: '';
    position: absolute;
    top: 25%;
    right: 0;
    bottom: 0;
    width: 1px;
    background: #3362ff;
    left: 0px;
    height: 50%;
}

.comparison-card-img {
    margin-right: 12px;
    /* Adiciona espaço entre a imagem e o texto */
}

.comparison-card svg {
    margin-right: 12px;
    /* Adiciona espaço entre a imagem e o texto */
}

/* .comparison-card-img {
        width: 50%;
    height: 50%;
    margin-right: 12px;
    font-size: 16px;
}

.comparison-card-img {
    width: 50%;
    height: 50%;
    color: #b3b3b3;
} */



.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
    padding: 20px 0;
}

.marquee-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, #0a0c10, #0a0c10dc, #0a0c101a);
    z-index: 2;
    pointer-events: none;
}

.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(to right, transparent 0%, #0a0c10 100%);
    z-index: 2;
    pointer-events: none;
}

.marquee {
    display: flex;
    width: 100%;
    white-space: nowrap;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-content {
    display: flex;
    animation: marquee 50s linear infinite;
    width: max-content;
    z-index: 1;
}

.marquee-content.paused {
    animation-play-state: paused;
}

.cliente-card {
    min-width: 280px;
    min-height: 300px;
    padding: 21px;
    border: 1px solid rgb(28, 33, 38);
    background: linear-gradient(218deg, rgb(116 112 112 / 20%) 0%, rgb(0 29 74 / 20%) 100%);
    margin-right: 20px;
    border-radius: 16px;
    transition: all 0.3s ease;
    text-align: left;
    flex-direction: column;
    justify-content: space-between;
    /* 
    outline: 1px solid rgb(28, 33, 38);
    outline-offset: 3px; */
}

.cliente-card:hover {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transform: scale(1.02);
    border-color: #ffffff;
    outline: none;
}

.cliente-card:hover .card-descricao {
    color: #d9d6d6;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 30px;
}

.card-descricao {
    color: #ced5d9d6;
    word-wrap: break-word;
    white-space: normal;
    flex-grow: 1;
}

.card-header img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.testimonial-author {
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.rating-badge {
    display: inline-block;
}

.rating-content {
    background: #143f7fbf;
    color: #e5e5e5;
    font-size: 12px;
    padding: 0px 5px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.rating-content::before {
    content: "★";
    color: gold;
    font-size: 14px;
    align-items: center;
}

.section-final {
    margin-bottom: 150px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.section-final .container {
    position: relative;
    z-index: 2;
    animation: slideIn 1s ease-out forwards, fadeIn 1s ease-out forwards;
}

.section-final h2 {
    font-size: 45px;
    color: #ffffff93;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    animation: fadeIn 2s ease-out forwards;
}

.section-final p {
    font-size: 20px;
    color: #ccc;
    background: linear-gradient(45deg, #b7b9bc 50%, #466e80d2 100%);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: 'Poppins', sans-serif;
    line-height: 1.5;
    animation: fadeIn 2.5s ease-out forwards;
    margin: 0;
}

.botao-final {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    animation: fadeIn 3s ease-out forwards;
}

.Button-Hero-Planos-final {
    background-color: #b7b9bc;
    color: #000000;
    padding: 8px 20px;
    border-radius: 15px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.Button-Hero-Planos-final i {
    opacity: 0;
    transition: all 0.3s ease;
    font-size: 14px;
}

.Button-Hero-Planos-final:hover i {
    opacity: 1;
}

.Button-Hero-Planos-final:hover {
    background-color: #b7b9bcd0;
    color: #000000;
}

.Button-Hero-Planos-final:active {
    transform: none;
}

.top-line {
    width: 100%;
    height: 1px;
    background: #8888882a;
    margin-bottom: 20px;
}

.section-footer-final {
    margin-bottom: 100px;
}

.section-footer-final .container {
    position: relative;
    z-index: 2;
    animation: slideIn 1s ease-out forwards, fadeIn 1s ease-out forwards;
}

.logo-container {
    margin-top: 50px;
    display: flex;
    align-items: flex-start;
    gap: 90px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.logo-container h1 {
    margin: 0;
    padding: 0;
    text-align: center;
}

.logo-container h1 a img {
    height: 45px;
    width: auto;
}

.platform,
.Empresas,
.Legal .Redes {
    flex-direction: column;
    color: #fff;
}

.platform h2,
.Empresas h2,
.Legal h2,
.Redes h2 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}

.platform a,
.Empresas a,
.Legal a {
    margin-top: 5px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.5s;
    display: flex;
}

.platform a:hover,
.Empresas a:hover,
.Legal a:hover {
    color: #66acca;
    text-decoration: underline;
}

.Redes a:hover svg {
    fill: #66acca;
}

footer {
    position: relative;
    background: none;
}

footer .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #8888889d, transparent);
}

.footer-left {
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.footer-left p,
.footer-left small {
    margin: 0;
    line-height: 1;
    display: inline-block;
}

.footer-left small {
    font-size: 0.85em;
    color: #aaa;
    position: relative;
    top: -1px;
}

.footer-right {
    color: #aaa;
    font-style: italic;
}

.footer-right i {
    font-size: 14px;
    margin-left: 4px;
    color: #66acca;
    transform: skewX(-10deg);
    animation: abcv 1.5s infinite;
}

@keyframes abcv {
    50% {
        transform: skewX(-10deg) scale(1.1);
        color: #88ccee;
    }
}

.Redes a {
    text-decoration: none;
}

.Redes a svg {
    width: 35px;
    height: 35px;
    margin-left: 19px;
    fill: #9ca3af;
}

.planos-infoticket {
    text-align: left;
    position: relative;
    z-index: 2;
}

.planos-infoticket h3 {
    font-size: 3rem;
    line-height: 1;
    margin-top: 20px;
}

.planos-infoticket svg {
    width: 15px;
    height: 15px;
    fill: #ffffff6b;
    margin-right: 5px;
}

.planos-infoticket p {
    color: #a59e9e;
    font-size: 20px;
}

.planos-infop2ticket {
    color: #a59e9e;
    font-size: 15px;
    margin-top: 20px;
}

.balloons-infoticket {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.balloon-infoticket {
    background: #0a0e14;
    padding: 30px 20px;
    width: 100%;
    box-shadow: none;
    overflow: hidden;
    text-align: left;
    position: relative;
    border: 1px solid #a59e9e4d;
    border-radius: 15px;
}

.balloon-infoticket:hover {
    animation: pulse 2s infinite;
    border-color: #ffffff6e;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.balloon-infoticket h3 {
    color: #fff;
    font-size: 20px;
    margin-top: 15px;
    font-family: 'Poppins', Arial, sans-serif;
}

.balloon-infoticket p {
    color: #ccc6c6ea;
    font-size: 15px;
    margin-top: 15px;
    font-family: 'Poppins', Arial, sans-serif;
}

.balloon-infoticket svg {
    width: 24px;
    height: 24px;
    fill: #ffffff6b;
}

.conteudo-com-imagem {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.conteudo-original {
    width: 65%;
}

.imagem-direita {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    position: sticky;
    transform: translateY(15%);
}

.imagem-direita img {
    width: 100%;
    max-width: 350px;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}

.conteudo-com-imagemticket {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.conteudo-originalticket {
    width: 65%;
}

.imagem-direitaticket {
    width: 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    position: sticky;
    transform: translateY(15%);
}

.imagem-direitaticket img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}

/* Mobile Styles */
@media (max-width: 560px) {
    .footer-right {
        display: none;
    }

    .section-feedbackclientes h1 {
        font-size: 1.2rem;
    }

    .Button-Hero {
        display: flex;
        flex-direction: column;
    }

    .Button-Hero-Discord {
        display: block;
    }
}

@media (max-width: 639px) {

    .balloons-info,
    .balloons-infoticket {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .logo-container {
        gap: 30px;
    }

    .logo-container {
        margin-top: 50px;
        display: block;
    }

    .platform h2,
    .Empresas h2,
    .Legal h2,
    .Redes h2 {
        margin-top: 20px;
        flex-direction: column;
        text-align: center;
    }

    .platform a,
    .Empresas a,
    .Legal a {
        display: block;
        text-align: center;
    }

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

}

@media (max-width: 767px) {
    .container {
        width: 90%;
    }

    header {
        backdrop-filter: blur(50px);
        background: #0a0e14e8;
    }

    header .container {
        flex-wrap: wrap;
    }

    header nav {
        display: none;
        width: 100%;
        top: 100%;
        left: 0;
        padding: 20px;
        z-index: 1000;
    }

    header nav.active {
        display: block;
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
    }

    header nav ul li {
        margin: 10px 0;
        width: 100%;
    }

    header nav ul li a {
        font-size: 18px;
        padding: 10px 0;
        display: block;
    }

    .hamburger {
        display: block;
    }

    header nav ul li a.active::after {
        width: 49px;
    }

    .Section-Hero h2 {
        font-size: 2rem;
    }

    .Section-Hero p {
        font-size: 1rem;
    }

    .Button-Hero-Planos {
        display: block;
    }


    .balloons-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 35px;
        width: 100%;
        max-width: 800px;
        margin: 0 auto;
    }

    .balloon {
        background: linear-gradient(130deg, #04384e48 5%, #0000008a 100%);
        padding: 35px;
        box-shadow: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        overflow: hidden;
        text-align: center;
        position: relative;
        border: 0.5px solid #242a41;
        border-radius: 15px;
        width: 80%;
        max-width: 500px;
    }

    .balloons {
        gap: 35px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .section-feedback h2 {
        font-size: 1.5rem;
    }

    .marquee {
        display: block;
        width: 100%;
        white-space: nowrap;
    }

    .review-card {
        width: 100%;
        max-width: 300px;
    }

}

@media (max-width: 950px) {
    .section-final h2 {
        font-size: 2rem;
    }

    .section-final p {
        font-size: 1rem;
    }

    .logo-container {
        gap: 30px;
    }

    .Redes a {
        display: grid;
        grid-auto-flow: column;
        gap: 16px;
    }

    .Redes a svg {
        width: 25px;
        height: 25px;
    }
}

@media (max-width: 1023px) {

    .imagem-direita,
    .imagem-direitaticket {
        display: none;
    }

    .conteudo-original,
    .conteudo-originalticket {
        width: auto;
    }
}