/* Seção Institucional com Formas Geométricas */
.about {
    position: relative;
    padding: 60px 0;
    background-color: var(--color-background);
    text-align: left;
    overflow: hidden;
    height: 130%; /* Aumenta a altura da seção em 30% */
}

.about .container {
    position: relative;
    z-index: 2;
}

.about-text {
    position: relative;
    z-index: 2;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    min-height: 400px;
    display: flex;
    margin-top: 200px;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 150px; /* Ajuste a margem esquerda para alinhar com a linha */
}

.about-text p {
    max-width: 500px;
    font-size: 28px;
    margin-bottom: 20px; /* Espaço entre o texto e a seta */
}




.shape-left,
.shape-right {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: var(--color-primary);
}

.shape-left {
    left: 0;
    width: 200px;
    border-bottom-right-radius: 120px; /* Arredondamento do canto inferior direito */
}

.shape-right {
    right: 0;
    width: 200px;
    height: 50%; /* Ocupa 50% da altura */
    background-color: var(--color-tertiary);
    border-top-left-radius: 120px; /* Arredondamento do canto superior esquerdo */
    bottom: 0; /* Alinha na parte inferior */
    top: auto; /* Remove o alinhamento superior */
}

@media (max-width: 1400px) {
    .shape-left,
    .shape-right {
        display: none;
    }

    .about-text {
        margin-left: 0;
        padding-left: 0;
        min-height: 300px;
        margin-top:  50px;
    }


    .about-text p {
        font-size: 18px;
    }


}

/* Estilo da linha dentro do shape-left */
.inner-line {
    position: absolute;
    top: 150px; /* Espaço do topo */
    bottom: 150px; /* Espaço do bottom */
    right: 50px; /* Ajuste a distância da margem conforme necessário */
    width: 1px;
    background-color: white; /* Ajuste a cor da linha conforme necessário */
}

/* Estilo da seta */
.arrow-container {
    position: relative;
    display: inline-block;
    margin-top: 20px; /* Espaço acima da seta */
}

.arrow-container .fas {
    font-size: 24px;
    color: #b3b3b3; /* Texto cinza mais claro */
    transition: transform 0.3s, color 0.3s; /* Transição suave para cor e movimento */
}

.arrow-container:hover .fas {
    transform: translateX(5px); /* Move a seta 5px para a direita no hover */
    color: #999999; /* Muda a cor da seta no hover */
}

.read-more-button {
    display: inline-flex; /* Alinha texto e ícone lado a lado */
    align-items: center;
    gap: 10px; /* Espaço entre o texto e a seta */
    border: #b3b3b3 solid 2px; /* Cinza claro */
    background-color: transparent; /* Fundo transparente */
    color: #b3b3b3; /* Texto cinza mais claro */
    text-transform: uppercase; /* Caixa alta */
    padding: 10px 30px; /* Espaçamento interno */
    border-radius: 50px; /* Bordas arredondadas */
    text-decoration: none; /* Remove sublinhado */
    font-size: 16px; /* Tamanho do texto */
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Transições suaves */
}

.read-more-button i {
    font-size: 18px; /* Tamanho da seta */
    transition: transform 0.3s ease; /* Movimento da seta no hover */
}

.read-more-button:hover {
    border-color: #dcdcdc; /* Tom mais escuro de cinza no hover */
    color: #999999; /* Texto um pouco mais escuro no hover */
/*     transform: scale(1.05); /* Leve zoom no botão */ */
}

.read-more-button:hover i {
    transform: translateX(5px); /* Move a seta 5px para frente no hover */
}