.text-center {
    text-align: center;
    }
    
    .wrapper-text-blue{
        display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; max-width: 50%;
    }
    
    .h2-blue-large{
        font-size: 40px; margin: 0; color: #024248; font-weight: 600; line-height: 110%;
    }

    .wrapper-text-button{
        display: flex;
        flex-direction: column; 
        justify-content: space-between;
        gap: 20px;
    }

    .wrapper-text-button_card-terciary{
        display: flex;
        flex-direction: column; 
        justify-content: space-between;
        gap: 20px;
        height: 100%;
    }

    body h2, h3, h4, h5, h6 {
        font-family: "Georama", serif;
        font-weight: 700;
        color: #024248;
        line-height: 110%;
        font-weight: 600;
    }

    .citizen-server-block h2, h3, h4, h5, h6 {
        font-family: "Georama", serif;
        font-weight: 700;
        color: white;
        line-height: 110%;
        font-weight: 600;
    }

    .citizen-server-block p {
        font-weight: 400;
        color: white;
        line-height: 150%;
        font-size: 23px;
    }

    p {
        font-weight: 400;
        line-height: 150%;
        font-size: 20px;
        word-wrap: break-word;
    }

    .text-center p {
        color: white;
    }

    a {
        color: #007D7A;
    }
    
    
    .card-horizontal-reverse-container img.card {
        height: 100%;
    }
    
    .img-card {
        width: 100%;
        border-radius: 12px;
        background-image: url("../img/Image.png");
        overflow: hidden;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        height: 200px;
    }
    
    .wrapper-text-card{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
        height: auto;
        align-items: stretch;
    }
    
    .h2-card {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        line-height: 120%;
        color: #434A54;
    }
    
    .p-card{
        font-size: 16px;
        margin: 0;
        display: flex;
        flex-direction: column;
        color: #434A54;
    }  
    
    .wrapper-button{
        display: flex;
        justify-content: right;
        gap: 8px;
    }
    
    .wrapper-button-left {
        display: flex;
        justify-content: left;
        gap: 8px;
        flex-direction: column;
    }
    
    .wrapper-button-right {
        display: flex;
        justify-content: right;
        gap: 8px;
    }
    
    .wrapper-button-center {
        display: flex;
        justify-content: center;
        gap: 8px;
    }

    .card-secondary .wrapper-button-center {
        margin: 0;
    }

    .white{
        color: white;
    }

    .white p{
        color: white;
    }
    
    /*------- tipos de cards --------*/
    
    .card-primary {
    background-color: #ffff;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 16px;
    border-radius: 20px;
    box-shadow: inset 0 0 0 1px #DEE3ED;
    gap: 16px;
    color: #434A54;
    }


    .card-primary p{
        color: #434A54 !important;
        }

        .card-primary .card-icone{
            color: #024248 !important;
            }
    
        .card-primary h2{
            color: #434A54 !important;
            }
    
    
    .card-secondary{
        background-color: #007D7A;
        color: white;
        border-radius: 20px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        justify-content: space-between;
        height: auto;
        text-align: center;
    }
    
    .card-secondary .wrapper-text-card{
        align-items: center;
    }

    .card-secondary h2{
        color: white;
        font-size: 20px;
    }

    .card-secondary p{
        text-align: center;
    }

    .card-terciary h2{
        color: white;
    }
    
    .card-terciary{
        background-color: #024248;
        border-radius: 20px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        color: white;
        justify-content: space-between;
    }

    .card-terciary p{
        color: white;
    }
    
    .hozintal {
        display: flex;
        gap: 16px;
        align-items: center;
    }
    
    .center{
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
    }
    
    
    /* ----------------- card bg imagem */
    
    .card-bgimage {
        background-image: url("../img/Image.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 20px;
        width: 100%;
        height: 100%;
        padding: 16px;
        display: flex;
        align-items: end;
        overflow: hidden;
        display: flex;
        gap: 20px; /* espaçamento entre cards */
        align-items: stretch;
        position: relative;
    }
    
    .wrapper-text-card-bgimage{
        margin-top: 130px;
        background-color: white;
        padding: 16px;
        border-radius: 12px;
        height: auto;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;    
    }

    .wrapper-text-card_bg{
        display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 10px;
    align-items: flex-start;
    }
    
    
    /*------ tipos de cards ------*/
    .cards-gri-1 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .cards-gri-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        align-items: stretch;
        justify-items: stretch;
    }
    
    .cards-gri-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .cards-gri-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .card-horizontal-image-container img{
        height: 100%;
    }
    
    
    /* Horizontal Card Layout */
    .card-horizontal-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        background-color: #ffff;
        padding: 16px;
        border-radius: 20px;
        box-shadow: inset 0 0 0 1px #DEE3ED;
        gap: 16px;
        color: #434A54;
        height: 100%;
        align-items: stretch;
    }
    
    /* Horizontal Card Reverse Layout - NOVO */
    .card-horizontal-reverse-container {
        display: grid;
        grid-template-columns: 70% 30%;
        padding: 16px;
        gap: 16px;
        color: #AFF0ED;
        height: 100%;
        position: relative;
        border-bottom: #006969 0.4px solid;
        padding-bottom: 20px;
        min-height: 300px;
    }

    .card-horizontal-reverse-container p{
        font-size: 18px;
        color: #F5F7FA;
    }

    .card-horizontal-reverse-container h2{
        font-size: 24px;
        color: #AFF0ED;
    }

    .card-horizontal-reverse-container::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%;
        height: 60%;
        width: 2px;
        background-color: #006969;
    }
    
    .card-horizontal-reverse-image-container {
        order: 2;
    }
    
    .wrapper-text-card-horizontal-reverse {
        display: grid;
        grid-template-columns: 1fr 1fr;
        order: 1;
        align-items: center;
    }

    .white {
        color: #D6F9F8;
    }
    
    .img-card-horizontal {
        width: 40%;
        background-size: cover;
        background-position: center;
        min-height: 250px;
    }
    
    .wrapper-text-card-horizontal {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    
    
    
    @media (max-width: 768px){
        .wrapper-text-blue{
            max-width: 85%;
        }
    
        .h2-blue-large{
            font-size: 32px; 
        }
    
        .cards-gri-2 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .cards-gri-3 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .cards-gri-4 {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
        }
    
        .card-horizontal-container {
            grid-template-columns: 1fr;
        }
        
        /* Media query para o novo card horizontal reverse */
        .card-horizontal-reverse-container {
            grid-template-columns: 1fr;
            grid-template-columns: 1fr;
            gap: 16px;
        }
        
        .card-horizontal-reverse-image-container {
            order: 1;
        }
        
        .wrapper-text-card-horizontal-reverse {
            order: 2;
            grid-template-columns: 1fr;
        }
        
        .img-card-horizontal {
            width: 100%;
            min-height: 200px;
        }
        
        .wrapper-text-card-horizontal {
            width: 100%;
        }
    }





/* Aplica texto branco automaticamente para fundos escuros */
.bg-darkgreen p,
.bg-darkgreen h1,
.bg-darkgreen h2,
.bg-darkgreen h3,
.bg-darkgreen h4,
.bg-darkgreen h5,
.bg-darkgreen h6,
.bg-enap-100 p,
.bg-enap-100 h1,
.bg-enap-100 h2,
.bg-enap-100 h3,
.bg-enap-100 h4,
.bg-enap-100 h5,
.bg-enap-100 h6,
.bg-enap-90 p,
.bg-enap-90 h1,
.bg-enap-90 h2,
.bg-enap-90 h3,
.bg-enap-90 h4,
.bg-enap-90 h5,
.bg-enap-90 h6,
.bg-enap-80 p,
.bg-enap-80 h1,
.bg-enap-80 h2,
.bg-enap-80 h3,
.bg-enap-80 h4,
.bg-enap-80 h5,
.bg-enap-80 h6,
.bg-enap-70 p,
.bg-enap-70 h1,
.bg-enap-70 h2,
.bg-enap-70 h3,
.bg-enap-70 h4,
.bg-enap-70 h5,
.bg-enap-70 h6,
.bg-enap-50 p,
.bg-enap-50 h1,
.bg-enap-50 h2,
.bg-enap-50 h3,
.bg-enap-50 h4,
.bg-enap-50 h5,
.bg-enap-50 h6,
.bg-enap-40 p,
.bg-enap-40 h1,
.bg-enap-40 h2,
.bg-enap-40 h3,
.bg-enap-40 h4,
.bg-enap-40 h5,
.bg-enap-40 h6 {
    color: white;
}

/* Versão alternativa mais compacta usando seletor de atributo */
.section-card[class*="bg-darkgreen"] p,
.section-card[class*="bg-darkgreen"] h1,
.section-card[class*="bg-darkgreen"] h2,
.section-card[class*="bg-darkgreen"] h3,
.section-card[class*="bg-darkgreen"] h4,
.section-card[class*="bg-darkgreen"] h5,
.section-card[class*="bg-darkgreen"] h6,
.section-card[class*="bg-enap-100"] p,
.section-card[class*="bg-enap-100"] h1,
.section-card[class*="bg-enap-100"] h2,
.section-card[class*="bg-enap-100"] h3,
.section-card[class*="bg-enap-100"] h4,
.section-card[class*="bg-enap-100"] h5,
.section-card[class*="bg-enap-100"] h6,
.section-card[class*="bg-enap-90"] p,
.section-card[class*="bg-enap-90"] h1,
.section-card[class*="bg-enap-90"] h2,
.section-card[class*="bg-enap-90"] h3,
.section-card[class*="bg-enap-90"] h4,
.section-card[class*="bg-enap-90"] h5,
.section-card[class*="bg-enap-90"] h6,
.section-card[class*="bg-enap-80"] p,
.section-card[class*="bg-enap-80"] h1,
.section-card[class*="bg-enap-80"] h2,
.section-card[class*="bg-enap-80"] h3,
.section-card[class*="bg-enap-80"] h4,
.section-card[class*="bg-enap-80"] h5,
.section-card[class*="bg-enap-80"] h6,
.section-card[class*="bg-enap-70"] p,
.section-card[class*="bg-enap-70"] h1,
.section-card[class*="bg-enap-70"] h2,
.section-card[class*="bg-enap-70"] h3,
.section-card[class*="bg-enap-70"] h4,
.section-card[class*="bg-enap-70"] h5,
.section-card[class*="bg-enap-70"] h6,
.section-card[class*="bg-enap-50"] p,
.section-card[class*="bg-enap-50"] h1,
.section-card[class*="bg-enap-50"] h2,
.section-card[class*="bg-enap-50"] h3,
.section-card[class*="bg-enap-50"] h4,
.section-card[class*="bg-enap-50"] h5,
.section-card[class*="bg-enap-50"] h6,
.section-card[class*="bg-enap-40"] p,
.section-card[class*="bg-enap-40"] h1,
.section-card[class*="bg-enap-40"] h2,
.section-card[class*="bg-enap-40"] h3,
.section-card[class*="bg-enap-40"] h4,
.section-card[class*="bg-enap-40"] h5,
.section-card[class*="bg-enap-40"] h6 {
    color: white;
}

/* Aplica também para outros elementos de texto comuns */
.bg-darkgreen span,
.bg-darkgreen div,
.bg-darkgreen li,
.bg-darkgreen a,
.bg-enap-100 span,
.bg-enap-100 div,
.bg-enap-100 li,
.bg-enap-100 a,
.bg-enap-90 span,
.bg-enap-90 div,
.bg-enap-90 li,
.bg-enap-90 a,
.bg-enap-80 span,
.bg-enap-80 div,
.bg-enap-80 li,
.bg-enap-80 a,
.bg-enap-70 span,
.bg-enap-70 div,
.bg-enap-70 li,
.bg-enap-70 a,
.bg-enap-50 span,
.bg-enap-50 div,
.bg-enap-50 li,
.bg-enap-50 a,
.bg-enap-40 span,
.bg-enap-40 div,
.bg-enap-40 li,
.bg-enap-40 a {
    color: white;
}

/* Para links, mantém a funcionalidade de hover */
.bg-darkgreen a:hover,
.bg-enap-100 a:hover,
.bg-enap-90 a:hover,
.bg-enap-80 a:hover,
.bg-enap-70 a:hover,
.bg-enap-50 a:hover,
.bg-enap-40 a:hover {
    color: #AFF0ED !important; /* Cor mais clara para hover */
    text-decoration: underline;
}

/* Classe utilitária para forçar texto branco quando necessário */
.text-white-force {
    color: white !important;
}

/* Classe utilitária para texto branco em fundos escuros específicos */
.dark-bg-text {
    color: white !important;
}