/* --- 1. VISÃO DESKTOP (Efeito de Vazamento e Clip-Path) --- */

/* Seletor principal do container do widget */
.elementor-element.elementor-element-34d5b489 {
    margin-left: -50% !important; 
    margin-bottom: -13vh !important;
    transform: scale(1.5) translateX(30%) translateY(5%) !important; 
    z-index: 10;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Aplicando largura e altura ao widget e imagem */
.elementor-element-34d5b489, 
.elementor-element-34d5b489 .elementor-widget-container,
.elementor-element-34d5b489 img {
    width: 140% !important;
    max-width: none !important;
    min-width: 140% !important;
    height: 75vh !important; 
    min-height: 500px !important; 
    object-fit: cover !important;
    object-position: calc(60% - 1.2rem) center !important;
}

/* Aplicando o corte e sombra na imagem */
.elementor-element-34d5b489 img {
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%) !important;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.5)) !important;
}

/*adjustbottomHeight*/
.elementor-element.elementor-element-1b8e543 {
    min-height: auto !important; /* Remove a altura mínima forçada */
    height: auto !important;     /* Ajusta a altura ao conteúdo real */
    padding-top: 10px !important;  /* Reduz o preenchimento superior */
    padding-bottom: 10px !important; /* Reduz o preenchimento inferior */
}

/* 2. Remove o espaço excessivo no título "Redes Sociais" */
.elementor-element.elementor-element-c9532a3 {
    margin-bottom: 5px !important; /* Aproxima o título dos ícones */
    height: auto !important;
}

/* 3. Garante que os ícones em si não tenham altura fixa */
.elementor-element.elementor-element-05f3fc9 {
    margin-top: 0 !important;
    height: auto !important;
}


/* ============================================================
   Ajustes Tizato - Mobile (< 768px)
   ============================================================ */

   @media (max-width: 767px) {
    /* Exemplo com um dos seus IDs detectados */
    /* .elementor-element-2bd130e {
        padding: 20px 15px !important;
    } */

    /* TIZATO: Ajuste de tamanho de texto agressivo no mobile */
    /* 1. Vertically center the objects in the middle */
    .elementor-element-b9267fd {
        display: flex !important;
        align-items: center !important; /* Centers elements vertically */
        justify-content: center !important; /* Centers elements horizontally */
        gap: 5px; /* Optional spacing between the two */
        width: 100% !important;
    }

    /* 2. Style the first child (Thin text) */
    .elementor-element-246d92d {
        font-size: 28px !important; /* Slightly smaller than 30px */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 3. Style the second child (Bold text) - make smaller to compensate */
    .elementor-element-2231dae {
        font-size: 26px !important; /* Smaller size to offset the weight */
        font-weight: 500 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Note: Ensure the internal widget containers don't override the alignment */
    .elementor-element-246d92d .elementor-widget-container,
    .elementor-element-2231dae .elementor-widget-container {
        height: auto !important;
        line-height: 1.2 !important; /* Valor padrão para consistência */
    }

    .elementor-element-b9267fd {
    display: flex !important;
    align-items: center !important;
    /* flex-direction: row !important;
    flex-wrap: nowrap !important; */
    /* gap: 20px; Optional space between the elements */
    }

    /* Ensure children take equal space if needed */
    .elementor-element-246d92d, .elementor-element-2231dae {
        flex: 1;
    }

    /* 2. Fazer com que os widgets ocupem apenas o espaço necessário do texto */
    .elementor-element-246d92d, 
    .elementor-element-2231dae {
        width: auto !important;           /* Remove a largura fixa de 191px */
        max-width: fit-content !important;
        flex-basis: auto !important;
        margin: 0 !important;             /* Garante que não haja margens empurrando */
    }

    /* 3. Garantir alinhamento de texto interno */
    .elementor-element-246d92d .elementor-widget-container,
    .elementor-element-2231dae .elementor-widget-container {
        text-align: center !important;
    }

    .elementor-10 .elementor-element.elementor-element-1dc8e4d.elementor-element {
        --align-self: center;
        background-color: #172849 !important;
    }
    .elementor-element-1dc8e4d .elementor-icon-list-text {
    color: rgb(240, 238, 237) !important;
    }
    .elementor-icon-list-icon i,
    .elementor-icon-list-icon svg {
        color: #ffffff !important;
        fill: #ffffff !important;   /* CRÍTICO: SVGs usam 'fill' para a cor do preenchimento */
        stroke: #ffffff !important; /* Caso haja contorno no SVG */
        font-size: 1.4rem;
    }

    /* 2. Altera o container do ícone (caso herde cores) */
    .elementor-icon-list-icon {
        color: #ffffff !important;
    }

    #areas {
        gap: 2rem !important; /* Espaço ainda menor no mobile */
        flex-direction: column !important; /* Garante que fiquem um embaixo do outro se necessário */
        min-height: 200px !important; /* Altura menor no celular */
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .elementor-element-76fefa5 p {
        font-size: 1.2rem !important; /* Tamanho intermediário */
    }
    .elementor-element.elementor-element-9852459.e-con-full.e-flex.e-con.e-parent.e-lazyloaded{
        display:none;
    }
    /*Menu Fix*/
    /* 1. Faz com que o container do menu (dropdown) saia do fluxo do widget pai */
    .elementor-element-d73c468 .elementor-nav-menu__container {
        position: fixed !important; /* Fixa em relação à tela */
        top: 60px !important;       /* Ajuste conforme a altura do seu header */
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;    /* Ocupa 100% da largura da tela */
        z-index: 9999 !important;   /* Fica por cima de tudo */
        background-color: #ffffff !important; /* Cor de fundo do menu aberto */
    }

    /* 2. Garante que o container pai não limite o menu */
    .elementor-element-d73c468 {
        position: static !important; /* Permite que o filho (menu) use a tela como referência */
    }

    /* 3. Estiliza os itens do menu para ficarem centralizados ou em lista */
    .elementor-element-d73c468 .elementor-nav-menu--dropdown a {
        width: 100% !important;
        text-align: center !important;
        padding: 15px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
    }
    /*Close Button*/
    /* 1. Altera a cor do ícone de fechar (X) para azul quando o menu está aberto */
    .elementor-menu-toggle.elementor-active i,
    .elementor-menu-toggle.elementor-active svg {
        color: #172849 !important; /* Cor azul intensa (ajuste o HEX se necessário) */
        fill: #172849 !important;
        stroke: #172849 !important;
    }

    /* 2. Caso o Elementor não esteja trocando o ícone automaticamente para um X */
    /* Este CSS força o ícone de hambúrguer a virar um X */
    .elementor-menu-toggle.elementor-active i::before {
        content: "\e870" !important; /* Código do ícone 'X' na biblioteca eicons */
        font-family: eicons !important;
    }

    /* 3. Se estiver usando ícones SVG personalizados, este ajuste centraliza e destaca o X */
    .elementor-menu-toggle.elementor-active {
        background-color: transparent !important; /* Limpa o fundo para destacar o X */
        padding: 10px !important;
    }

    /*Close Button*/
    /* 1. Esconde o ícone de hambúrguer quando o menu está aberto */
    .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
        display: none !important;
    }

    /* 2. Exibe o ícone de 'X' (fechar) e define a cor azul */
    .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
        display: block !important; /* Força a exibição do X */
        fill: #fff !important;   /* Define a cor azul no preenchimento do SVG */
        width: 25px !important;    /* Ajusta o tamanho se necessário */
        height: 25px !important;
    }

    /* 3. Garante que o botão em si seja visível e clicável */
    .elementor-menu-toggle.elementor-active {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10000 !important; /* Garante que fique acima do menu aberto */
    }

    /*Pagina Escritorio SobreNos section top padding*/

    .elementor-1645 .elementor-element.elementor-element-2640b299{
        padding-top: 4rem !important;
    }

    /*empresa threeSlides*/
    .elementor-element.elementor-element-34d5b489 {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 20px !important;
        transform: none !important;
        display: flex !important;
        justify-content: center !important;
    }

    .elementor-element-34d5b489, 
    .elementor-element-34d5b489 .elementor-widget-container,
    .elementor-element-34d5b489 img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .elementor-element-34d5b489 img {
        width: 45% !important;      /* Imagem fina centralizada */
        max-width: 45% !important;
        height: 320px !important;
        margin: 0 auto !important;
        object-fit: cover !important;
        clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%) !important;
    }
    /* 1. Alvo: O container externo */
    .elementor-element.elementor-element-634ab4af {
        /* Reduz a altura mínima para 20% da altura da tela (ajuste conforme necessário) */
        min-height: 20vh !important; 
        height: 20vh !important;
        
        /* Garante que o conteúdo não 'vaze' ou seja cortado de forma estranha */
        overflow: hidden !important; 
        
        /* Se houver padding forçando altura, nós o zeramos */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. Caso você queira que a altura seja baseada no conteúdo, mas limitada */
    
    .elementor-element.elementor-element-634ab4af {
        height: auto !important;
        min-height: 150px !important; 
    }

    /*Switch Order of Mobile columm */
    /* 1. Garante que o container pai esteja em modo Flex Column */
    .elementor-element-634ab4af .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Reposiciona o elemento do meio (originalmente o index 1) */
    .elementor-element-450abf28 {
        order: 1 !important; /* SERÁ O PRIMEIRO */
    }

    /* 3. Reposiciona o primeiro elemento original (index 0) para ser o segundo */
    .elementor-element-6da8924d {
        order: 2 !important; /* SERÁ O SEGUNDO */
    }

    /* 4. Reposiciona o último elemento original (index 2) para ser o terceiro */
    .elementor-element-48d018c2 {
        order: 3 !important; /* SERÁ O TERCEIRO */
    }

    /*MenuHoverBackground*/
    .elementor-nav-menu--dropdown .elementor-item.elementor-item-active, .elementor-nav-menu--dropdown .elementor-item.highlighted, .elementor-nav-menu--dropdown .elementor-item:focus, .elementor-nav-menu--dropdown .elementor-item:hover, .elementor-sub-item.elementor-item-active, .elementor-sub-item.highlighted, .elementor-sub-item:focus, .elementor-sub-item:hover{
        background-color: #b6bec9;
    }

    /*threeItemnsLastPadding*/
    .elementor-element.elementor-element-a9526c5 {
        padding: 2rem !important;
    }

    /*Footer height*/
        .elementor-element.elementor-element-1b8e543 {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

     /* 1. Ocultar o primeiro elemento solicitado */
    .elementor-element.elementor-element-736b529 {
        display: none !important;
    }

    /* 2. Aplicar margem superior negativa no segundo elemento */
    .elementor-element.elementor-element-c867490 {
        margin-top: -30% !important; /* Desloca o elemento para cima */
        z-index: 50 !important;      /* Garante que ele fique por cima do objeto anterior */
        position: relative !important; /* Necessário para que o z-index funcione */
    }

    /* 3. Opcional: Garantir que o container pai permita o vazamento (overflow) */
    .elementor-element.elementor-element-01f6044 {
        overflow: visible !important;
    }

     /* 1. Alvo: O container pai azul */
    .elementor-element.elementor-element-01f6044 {
        /* Reduz a altura mínima em 20% do valor anterior (ex: de 90vh para 70vh) */
        min-height: 70vh !important; 
        height: auto !important;
        
        /* Ajusta o padding inferior para fechar o espaço sobrando */
        padding-bottom: 50px !important;
        
        /* Garante que o container não force um espaço vazio */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /*CardsTeam*/
    /* 1. Ajuste do Card Base (Item do Loop) */
    .elementor-element-ffaf698 .e-loop-item {
        padding: 50px 0 !important;
        overflow: visible !important;
        height: 520px !important; /* Altura total do card */
        background: transparent !important;
    }

    /* 2. Container Pai Interno (Onde estão a foto e o texto) */
    .elementor-element-8366e06 {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 3. Estilo do Bloco de Conteúdo (Azul) */
    .elementor-element-8f89e1d {
        position: absolute !important;
        bottom: 0 !important;
        width: 85% !important;   /* Deixa espaço para a foto vazar */
        height: 380px !important; /* Altura do bloco azul */
        background-color: #172849 !important; /* Azul escuro */
        z-index: 5 !important;
        padding: 30px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* Alternância do Bloco Azul */
    .e-loop-item:nth-child(odd) .elementor-element-8f89e1d {
        right: 0 !important; /* Azul na direita para Maísa/Samara */
    }
    .e-loop-item:nth-child(even) .elementor-element-8f89e1d {
        left: 0 !important; /* Azul na esquerda para Charles */
    }

    /* 4. Estilo da Foto (Vazamento Superior e Lateral) */
    .elementor-element-285da63 {
        position: absolute !important;
        top: 0 !important;       /* Foto começa no topo do card */
        width: 65% !important;   /* Foto ocupa 65% da largura total */
        z-index: 10 !important;  /* Foto sempre à frente */
    }

    /* Alternância da Foto (Sempre oposta ao azul) */
    .e-loop-item:nth-child(odd) .elementor-element-285da63 {
        left: 0 !important; /* Foto na esquerda */
    }
    .e-loop-item:nth-child(even) .elementor-element-285da63 {
        right: 0 !important; /* Foto na direita */
    }

    /* Ajuste da imagem dentro do container */
    .elementor-element-285da63 img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* 5. Alinhamento de Textos e Ícones */
    .elementor-element-8f89e1d * {
        color: #ffffff !important;
    }

    /* Texto na direita para ímpares */
    .e-loop-item:nth-child(odd) .elementor-element-8f89e1d * {
        text-align: right !important;
        align-self: flex-end !important;
    }
    /* Texto na esquerda para pares */
    .e-loop-item:nth-child(even) .elementor-element-8f89e1d * {
        text-align: left !important;
        align-self: flex-start !important;
    }

    /* Ícones brancos */
    .elementor-element-414aa89 .elementor-icon-list-icon i,
    .elementor-element-414aa89 .elementor-icon-list-icon svg {
        fill: #ffffff !important;
        color: #ffffff !important;
    }



}

/* ============================================================
   Ajustes Tizato - Tablet (768px - 1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    /* .elementor-element-2bd130e {
        padding: 40px !important;
    } */

    /* TIZATO: Tamanho de texto equilibrado no tablet */
    .elementor-element-574c761 .elementor-heading-title, 
    .elementor-element-574c761 {
        font-size: 20px !important;
    }
    
    
}