p{
    color: #546a8a;
}

.icon-check{
    color: var(--primary);
}

.sessao1{
    background-image: url("/img/processos/fundo-logo.png");
    background-color: rgba(255, 255, 255, 0.91);
    background-position-x: -300px;
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-size: 600px;
}

.sessao1-items{
    justify-content: space-between;
    display: flex;
    padding: 25px 0;
    margin-right: auto;
    margin-left: auto;
    max-width: 1450px;
    width: 100%;
    align-items: center;
}

.img-symbolsndesk{
    width: 40px;
        &{
            img{
                width: 100%;
                opacity: 40%;
            }
        }
}

.sessao1-texts{
    &{

        >button{
            margin-top: 30px;
            cursor: pointer;
        }

        h1{
            font-size: 50px;
            span{
                color: var(--primary);
            }
        }
        p{
            font-size: 18px;
            margin-top: 20px;
            line-height: 28px;
            max-width: 650px;
            width: 100%;
            color: #546a8a;
        }
    }
}

.sessao1-imagem{
    max-width: 500px;
    width: 100%;
    img{
    width: 100%;
    }
}


@keyframes girar {
    from{
        transform: rotate(0deg);
    }
    to{

    }
}




.sessao2{
    background-color: var(--primary);
    display: flex;
    justify-content: center;
}

.sessao2-items{
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 50px 0;
    max-width: 1500px;
    width: 100%;
    align-items: center;
    h2{
        font-size: 35.2px;
    }
}

.nichos1, .nichos2{
    display: flex;
    gap: 20px;
    width: 100%;
    justify-content: space-between;
}

.nicho-item {
    width: 250px;
    border-radius: 5px;
    padding: 30px 30px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    position: relative; /* Para posicionamento do elemento de hover */
    transition: transform 0.15s;
}

.nicho-item:hover {
    transform: scale(1.02);
}

/* Elemento que contém a imagem de hover */
.nicho-item::after {
    content: "";
    position: absolute;
    top: -70px; /* Posiciona a imagem acima da div */
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 250px; /* Largura da imagem de hover */
    height: 150px; /* Altura da imagem de hover */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 10;
}

/* Configura a imagem de hover baseada no atributo data-hover-image */
.nicho-item:hover::after {
    background-image: var(--hover-image);
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Desativa o efeito hover em telas menores para evitar problemas de layout */
@media screen and (max-width: 768px) {
    .nicho-item::after {
        display: none;
    }
}

/* JavaScript vai definir o --hover-image para cada elemento */

.nichos1 .nicho-item:nth-child(1)::after {
    --hover-image: url('/img/processos/financeiro-hover.png');
}
.nichos1 .nicho-item:nth-child(2)::after {
    --hover-image: url('/img/processos/logistica-hover.png');
}

.nichos1 .nicho-item:nth-child(3)::after {
    --hover-image: url('/img/processos/rh-hover.png');
}
.nichos1 .nicho-item:nth-child(4)::after {
    --hover-image: url('/img/processos/comercial-hover.png');
}

.nichos2 .nicho-item:nth-child(1)::after {
    --hover-image: url('/img/processos/marketing-hover.png');
}

.nichos2 .nicho-item:nth-child(2)::after {
    --hover-image: url('/img/processos/compras-hover.png');
}

.nichos2 .nicho-item:nth-child(3)::after {
    --hover-image: url('/img/processos/acesso-hover.png');
}

.nichos2 .nicho-item:nth-child(4)::after {
    --hover-image: url('/img/processos/ti-hover.png');
}

/* E assim por diante para cada nicho */

.nichos1 h3, .nichos2 h3 {
    margin-top: 15px;
    font-weight: 400;
    line-height: 18px;
    font-size: 16px;
    color: #546a8a;
}

.titulo-sessao2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.titulo-sessao2 h2{
    color: white;
}

.titulo-sessao2 > div{
    width: 40px;
}

.titulo-sessao2 > div img{
    width: 100%;
    opacity: 70%;
}

.container-icon{
    width: 50px;
}

.container-icon img{
    width: 100%;
}




.sessao3{
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 100px 0;
    max-width: 1200px;
    width: 100%;
    align-items: center;
}

.rh-container2{
    display: flex;
    flex-direction: column;
}

.resumo-rh{
    max-width: 700px;
    width: 100%;
    border-radius: 20px;
    h2{
        font-size: 35.2px;
        span{
            color: var(--primary);
        }
    }
    h3{
        font-size: 28.8px;
        span{
            color: var(--primary);
        }
    }
    p{
        line-height: 25px;
    }
    >div{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    &{
        .icone-rh{
            width: 40px;
            img{
                width: 100%;
            }
        }
    }
}

.topicos-rh{
    margin-top: 50px;
    max-width: 700px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    > div{
        max-width: 550px;
        width: 100%;
        h4{
            font-size: 18px;
            margin-bottom: 2px;
        }
        span{
            font-weight: 600;
        }
    }
}

.check-img{
    margin-top: 5px;
    img{
        width: 15px;
    }
}

.content-sessao3{
    display: flex;
    gap: 50px;
    margin-top: 70px;
}

.img-sessao3{
    max-width: 700px;
    &{
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
}



.sessao4{
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 100px 0;
    max-width: 1200px;
    width: 100%;
}

.content-sessao4{
    display: flex;
    justify-content: space-between;
}

.compras-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resumo-compras{
    border-radius: 20px;
    h2{
        font-size: 35.2px;
        span{
            color: var(--primary);
        }
    }
    h3{
        font-size: 28.8px;
        line-height: 40px;
        span{
            color: var(--primary);
        }
    }
    p{
        line-height: 25px;
    }
    >div{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    &{
        .icone-compras{
            width: 50px;
            img{
                width: 100%;
            }
        }
    }
}

.topicos-compras{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    > div{
        max-width: 550px;
        width: 100%;
        h4{
            font-size: 18px;
            margin-bottom: 2px;
        }
        span{
            font-weight: 600;
        }
    }
}

.check-img{
    margin-top: 5px;
    img{
        width: 15px;
    }
}

.content-sessao4{
    display: flex;
    gap: 50px;
    margin-top: 70px;
}

.img-sessao4{
    max-width: 500px;
    &{
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
}


.sessao5{
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 100px 0;
    max-width: 1200px;
    width: 100%;
}

.content-sessao5{
    display: flex;
    justify-content: space-between;
}

.logistica-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resumo-logistica{
    border-radius: 20px;
    h2{
        font-size: 35.2px;
        span{
            color: var(--primary);
        }
    }
    h3{
        font-size: 28.8px;
        line-height: 40px;
        span{
            color: var(--primary);
        }
    }
    p{
        line-height: 25px;
    }
    >div{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    &{
        .icone-logistica{
            width: 50px;
            img{
                width: 100%;
            }
        }
    }
}

.topicos-logistica{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    > div{
        max-width: 550px;
        width: 100%;
        h4{
            font-size: 18px;
            margin-bottom: 2px;
        }
        span{
            font-weight: 600;
        }
    }
}

.check-img{
    margin-top: 5px;
    img{
        width: 15px;
    }
}

.content-sessao5{
    display: flex;
    gap: 50px;
    margin-top: 70px;
}

.img-sessao5{
    max-width: 500px;
    &{
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
}



.sessao6{
    margin-right: auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    padding: 30px 0 100px 0;
    max-width: 1200px;
    width: 100%;
}

.content-sessao6{
    display: flex;
    justify-content: space-between;
}

.financeiro-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.resumo-financeiro{
    border-radius: 20px;
    h2{
        font-size: 35.2px;
        span{
            color: var(--primary);
        }
    }
    h3{
        font-size: 28.8px;
        line-height: 40px;
        span{
            color: var(--primary);
        }
    }
    p{
        line-height: 25px;
    }
    >div{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    &{
        .icone-financeiro{
            width: 50px;
            img{
                width: 100%;
            }
        }
    }
}

.topicos-financeiro{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    > div{
        max-width: 550px;
        width: 100%;
        h4{
            font-size: 18px;
            margin-bottom: 2px;
        }
        span{
            font-weight: 600;
        }
    }
}

.check-img{
    margin-top: 5px;
    img{
        width: 15px;
    }
}

.content-sessao6{
    display: flex;
    gap: 50px;
    margin-top: 70px;
}

.img-sessao6{
    max-width: 500px;
    &{
        img{
            width: 100%;
            border-radius: 20px;
        }
    }
}





.sessao7-title{
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    >div{
        width: 50px;
        img{
            width: 100%;
        }
    }
    h2{
        font-size: 35.2px;
    }
}

.sessao7{
    display: flex;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 100px 0 120px 0;
}

.sessao7-items{
    display: flex;
    align-items: center;
    gap: 70px;
}

.sessao7-dir{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    h3{
        margin: 20px 0;
        font-size: 28.8px;
        line-height: 40px;
        span{
            color: var(--primary);
        }
    }
}

.sessao7-esq{
    display: flex;
    flex-direction: column;
    gap: 20px;
    span{
        font-weight: bold;
        line-height: 40px;
    }
}

.cima-esq, .baixo-esq{
    display: flex;
    gap: 30px;
    justify-content: space-between;
    >div{
        padding: 20px;
        width: 300px;
        background-color: #F1F1F1;
        border-radius: 20px;
    }
    >div:hover{
        transform: scale(1.02);
        transition: 0.15s;
    }
}

.icon-div-symbol{
    width: 35px;
    img{
        width: 100%;
    }
}



.sessao8{
    display: flex;
    flex-direction: column;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 150px 0 50px 0;
    text-align: center;
    h2{
        font-size: 35.2px;
        line-height: 45px;
        span{
            color: var(--primary);
        }
    }
}

.sessao8-img{
    margin-top: 20px;
    max-width: 800px;
    width: 100%;
    img{
        width: 100%;
    }
}

.sessao8-textbaixo{
    max-width: 800px;
    width: 100%;
    margin-top: 50px;
    p{
        font-size: 18px;
        margin-bottom: 50px;
    }
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Media queries para resoluções responsivas */
@media screen and (max-width: 768px) {
    .nichos1, .nichos2 {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nicho-item {
        width: 180px;
    }

    .content-sessao3, .content-sessao4, .content-sessao5, .content-sessao6 {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .img-sessao3, .img-sessao4, .img-sessao5, .img-sessao6 {
        max-width: 100%;
    }

    .sessao7-items {
        flex-direction: column;
        gap: 40px;
    }

    .cima-esq, .baixo-esq {
        flex-direction: column;
        align-items: center;
    }
}

@media screen and (max-width: 600px) {
    .nichos1, .nichos2 {
        flex-direction: column;
        align-items: center;
    }

    .nicho-item {
        width: 200px;
    }

    .sessao2-items {
        padding: 30px 10px;
    }

    .sessao1-items {
        flex-direction: column;
        text-align: center;
        padding: 25px 10px;
    }

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

    .sessao1-texts h1 {
        font-size: 36px;
    }

    .sessao1-texts h2 {
        font-size: 30px;
    }

    .resumo-rh, .resumo-compras, .resumo-logistica, .resumo-financeiro {
        text-align: center;
    }

    .resumo-rh h2, .resumo-compras h2, .resumo-logistica h2, .resumo-financeiro h2 {
        font-size: 28px;
    }

    .resumo-rh h3, .resumo-compras h3, .resumo-logistica h3, .resumo-financeiro h3 {
        font-size: 24px;
    }

    .topicos-rh, .topicos-compras, .topicos-logistica, .topicos-financeiro {
        align-items: center;
    }

    .sessao7-dir {
        align-items: center;
        text-align: center;
    }

    .sessao8 h2 {
        font-size: 28px;
    }
}

/* Novo media query para resolver o problema entre 535px e 600px */
@media screen and (max-width: 535px) {
    html, body {
        overflow-x: hidden; /* Previne rolagem horizontal */
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .menu-items,
    .sessao12-items,
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    /* Ajustes para o conteúdo interno */
    .sessao1-items,
    .content-sessao3,
    .content-sessao4,
    .content-sessao5,
    .content-sessao6,
    .sessao7-items,
    .sessao8-textcima,
    .sessao8-img,
    .sessao8-textbaixo {
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    /* Impede imagens de causarem overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Ajuste para o menu mobile */
    .nav-menu {
        width: 65%; /* Ajuste proporcional entre os valores de 600px e 320px */
    }

    /* Ajustes adicionais para telas muito pequenas */
    .sessao1-texts h1 {
        font-size: 30px;
    }

    .sessao1-texts h2 {
        font-size: 24px;
    }

    .sessao2-items h2 {
        font-size: 28px;
    }

    .nicho-item {
        width: 180px;
        margin-bottom: 15px;
    }
}

* {
    box-sizing: border-box;
}