.elementor-3458 .elementor-element.elementor-element-87c77de{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:-16px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3458 .elementor-element.elementor-element-b2ea6f5{--display:flex;--min-height:850px;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3458 .elementor-element.elementor-element-b2ea6f5:not(.elementor-motion-effects-element-type-background), .elementor-3458 .elementor-element.elementor-element-b2ea6f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vortex.security/wp-content/uploads/2025/09/Slice-13.webp");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-3458 .elementor-element.elementor-element-dfdc85e{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;}.elementor-3458 .elementor-element.elementor-element-dfdc85e .elementor-image-box-wrapper{text-align:start;}.elementor-3458 .elementor-element.elementor-element-dfdc85e .elementor-image-box-title{font-family:"Rubik", Sans-serif;font-size:57px;font-weight:600;text-transform:uppercase;color:var( --e-global-color-text );}.elementor-3458 .elementor-element.elementor-element-dfdc85e .elementor-image-box-description{font-family:"Rubik", Sans-serif;font-size:24px;color:#FFFFFF;}.elementor-3458 .elementor-element.elementor-element-9901af9{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-swiper-slides-gap:10px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:320px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-prev-top-position:0px;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:320px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;}.elementor-3458 .elementor-element.elementor-element-47c0fef{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:080px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-3458 .elementor-element.elementor-element-2133ef1{font-family:"Rubik", Sans-serif;font-size:16px;font-weight:400;color:var( --e-global-color-text );}.elementor-3458 .elementor-element.elementor-element-2133ef1 a{color:var( --e-global-color-text );}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-3458 .elementor-element.elementor-element-9901af9{--e-n-carousel-swiper-slides-to-display:2;}}@media(max-width:767px){.elementor-3458 .elementor-element.elementor-element-87c77de{--width:100%;}.elementor-3458 .elementor-element.elementor-element-b2ea6f5:not(.elementor-motion-effects-element-type-background), .elementor-3458 .elementor-element.elementor-element-b2ea6f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://vortex.security/wp-content/uploads/2025/11/Banner-Mobile-Politica-de-Privacidade-1.webp");background-position:bottom center;}.elementor-3458 .elementor-element.elementor-element-b2ea6f5{--content-width:92%;--min-height:700px;--justify-content:flex-start;--padding-top:120px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3458 .elementor-element.elementor-element-dfdc85e{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-3458 .elementor-element.elementor-element-dfdc85e .elementor-image-box-title{font-size:28px;}.elementor-3458 .elementor-element.elementor-element-dfdc85e .elementor-image-box-description{font-size:18px;}.elementor-3458 .elementor-element.elementor-element-9901af9{--e-n-carousel-swiper-slides-to-display:1;}.elementor-3458 .elementor-element.elementor-element-47c0fef{--content-width:92%;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for image-box, class: .elementor-element-dfdc85e *//* Ajusta a largura da descrição dentro da Caixa de Imagem */
.caixa-texto-ciberseguranca .elementor-image-box-description {
    max-width: 78%; /* Ajuste este valor conforme a necessidade */
    margin-left: 0; /* Garante que comece do lado esquerdo */
    margin-right: auto; /* Empurra para a esquerda (se o container estiver em flex ou block) */
}

/* Garante que o texto se alinha ao restante do conteúdo, se a Caixa de Imagem for o único elemento */
.caixa-texto-ciberseguranca .elementor-image-box-content {
    text-align: left; /* Alinha o conteúdo da caixa de imagem à esquerda */
}


/* --- AJUSTES PARA MOBILE --- */
@media (max-width: 767px) {
    
    /* 1. Centraliza TODO o texto (título e descrição) */
    .caixa-texto-ciberseguranca .elementor-image-box-content {
        text-align: center;
    }

    /* 2. Remove margens e faz a descrição ocupar a largura total */
    .caixa-texto-ciberseguranca .elementor-image-box-description {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}/* End custom CSS */
/* Start custom CSS for image-box, class: .elementor-element-dfdc85e *//* Ajusta a largura da descrição dentro da Caixa de Imagem */
.caixa-texto-ciberseguranca .elementor-image-box-description {
    max-width: 78%; /* Ajuste este valor conforme a necessidade */
    margin-left: 0; /* Garante que comece do lado esquerdo */
    margin-right: auto; /* Empurra para a esquerda (se o container estiver em flex ou block) */
}

/* Garante que o texto se alinha ao restante do conteúdo, se a Caixa de Imagem for o único elemento */
.caixa-texto-ciberseguranca .elementor-image-box-content {
    text-align: left; /* Alinha o conteúdo da caixa de imagem à esquerda */
}


/* --- AJUSTES PARA MOBILE --- */
@media (max-width: 767px) {
    
    /* 1. Centraliza TODO o texto (título e descrição) */
    .caixa-texto-ciberseguranca .elementor-image-box-content {
        text-align: center;
    }

    /* 2. Remove margens e faz a descrição ocupar a largura total */
    .caixa-texto-ciberseguranca .elementor-image-box-description {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
}/* End custom CSS */
/* Start custom CSS for nested-carousel, class: .elementor-element-9901af9 *//* --- Posicionamento da Paginação --- */

/* Garante que o container do slider seja a referência para a posição */
.slider-paginacao-personalizada .swiper-container {
    position: relative;
}

/* Posiciona a área de paginação DENTRO do slide */
.slider-paginacao-personalizada .swiper-pagination {
    position: absolute;  /* <-- A MUDANÇA MAIS IMPORTANTE! */
    bottom: 30px;      /* Distância da borda inferior do slide. Ajuste se precisar. */
    left: 80em;         /* Move o início da paginação para o meio do slide */
    transform: translateX(-50%); /* Centraliza a paginação perfeitamente */
    width: auto;       /* Garante que a largura seja baseada no conteúdo (as barras) */
    top: 90%;
}


/* --- Estilização das Barras (como antes) --- */

/* Estilo base para cada item da paginação (as barras inativas) */
.slider-paginacao-personalizada .swiper-pagination-bullet {
    width: 46px;
    height: 4px;
    border-radius: 2px;
    background-color: #D7F7FF;
    opacity: 0.5; /* Deixei as barras inativas um pouco transparentes para dar mais destaque à ativa */
    margin: 0 8px !important;
    transition: all 0.3s ease; /* Adiciona uma transição suave */
}

/* Estilo do item ATIVO da paginação (a barra com brilho) */
.slider-paginacao-personalizada .swiper-pagination-bullet-active {
    opacity: 1; /* Garante que a barra ativa esteja 100% visível */
    box-shadow: 0 0 8px 0 #57C3E8, 
                0 0 15px 0 #57C3E8, 
                0 0 53px 0 #57C3E8;
}/* End custom CSS */
/* Start custom CSS */azul{
    color: #57C3E8;
}

azul1{
    color: #57C3E8;
}

/* ============================================================
   GRADIENTE VORTEX + PARTÍCULAS — CSS unificado para Elementor
   Cole tudo na seção principal em: Avançado > CSS Customizado

   - Fundo: preto → azul (glow central) → preto
   - Partículas: estrelas azuis somente na parte de baixo,
     lado direito, próximas ao rodapé (como no Figma)
   ============================================================ */

/* ---------- FUNDO ---------- */
body.elementor-page-3458 {
    position: relative;
    z-index: 0;          /* isola o empilhamento: nada daqui passa por cima do header */
    overflow: hidden;
    background-color: #000000;
    background-image:
        radial-gradient(
            ellipse 70% 35% at 50% 62%,
            rgba(13, 66, 105, 0.85) 0%,
            rgba(7, 51, 86, 0.5) 45%,
            rgba(3, 34, 60, 0) 75%
        ),
        linear-gradient(
            180deg,
            #000000 0%,
            #000000 22%,     /* preto desce mais p/ cobrir o fim do banner */
            #010910 32%,
            #02192B 42%,
            #03223C 54%,
            #03223C 72%,     /* miolo azul */
            #02192B 84%,
            #010910 92%,
            #000000 98%,
            #000000 100%
        );
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---------- PARTÍCULAS (só na faixa inferior da seção) ---------- */
body.elementor-page-3458::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;          /* faixa onde as partículas aparecem — ajuste aqui */
    pointer-events: none;
    z-index: -1;          /* atrás do conteúdo, mas acima do fundo da seção */

    /* Cada radial-gradient é um ponto: centro claro + halo azul */
    background-image:
        /* --- pontos maiores / mais brilhantes --- */
        radial-gradient(circle, #cfe9ff 0 1.5px, rgba(120,190,255,.5) 3px, transparent 5px),
        radial-gradient(circle, #bfe0ff 0 1.5px, rgba(110,180,255,.45) 3px, transparent 5px),
        radial-gradient(circle, #cfe9ff 0 2px,   rgba(120,190,255,.5) 4px, transparent 6px),
        radial-gradient(circle, #bfe0ff 0 1.5px, rgba(110,180,255,.45) 3px, transparent 5px),
        radial-gradient(circle, #cfe9ff 0 1.5px, rgba(120,190,255,.5) 3px, transparent 5px),
        radial-gradient(circle, #bfe0ff 0 2px,   rgba(110,180,255,.45) 4px, transparent 6px),
        /* --- pontos médios --- */
        radial-gradient(circle, rgba(170,215,255,.9) 0 1px, rgba(100,170,255,.35) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.85) 0 1px, rgba(100,170,255,.3) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.9) 0 1px, rgba(100,170,255,.35) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.85) 0 1px, rgba(100,170,255,.3) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.9) 0 1px, rgba(100,170,255,.35) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.85) 0 1px, rgba(100,170,255,.3) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.9) 0 1px, rgba(100,170,255,.35) 2px, transparent 4px),
        radial-gradient(circle, rgba(170,215,255,.85) 0 1px, rgba(100,170,255,.3) 2px, transparent 4px),
        /* --- pontos pequenos / fracos --- */
        radial-gradient(circle, rgba(150,200,255,.6) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.5) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.55) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.5) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.6) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.5) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.55) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.5) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.6) 0 1px, transparent 2.5px),
        radial-gradient(circle, rgba(150,200,255,.5) 0 1px, transparent 2.5px);

    background-repeat: no-repeat;

    background-size:
        10px 10px, 10px 10px, 12px 12px, 10px 10px, 10px 10px, 12px 12px,
        8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px, 8px 8px,
        5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px, 5px 5px;

    /* Posições (x% y%) dentro da faixa inferior — concentradas à direita.
       1º valor = horizontal, 2º = vertical (dentro da faixa de 30%).    */
    background-position:
        /* maiores */
        88% 12%,  75% 30%,  93% 42%,  71% 58%,  85% 68%,  79% 86%,
        /* médios */
        70% 8%,   82% 22%,  95% 28%,  73% 45%,  90% 52%,  68% 72%,  87% 80%,  94% 64%,
        /* pequenos */
        66% 18%,  78% 15%,  92% 20%,  69% 38%,  84% 40%,  97% 48%,  74% 55%,  81% 62%,  89% 75%,  72% 90%;
}

body.elementor-page-3458::after {
    animation: vortex-twinkle 4s ease-in-out infinite;
}
@keyframes vortex-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}/* End custom CSS */