.secretarios-container {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

.pesquisa-secretarios {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Align items horizontally in the center */
    gap: 12px;
    /* Gap between search box and button */
}

.destaque-governo {
    width: 100%;
    /* Take full width of parent */
    max-width: 1047px;
    /* But don't exceed this width */
    margin-left: auto;
    /* Center the element */
    margin-right: auto;
    /* Center the element */
    margin-top: 10px;
    height: auto;
    opacity: 1;
    border-radius: 16px;
    border: 1px solid #C5C5C5;
    padding: 24px;
    background: #FEFEFE;
    display: flex;
    /* To arrange perfil-redes-sociais and governo-bio side-by-side */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
}


.destaque-governo .perfil-redes-sociais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.destaque-governo .governo-foto {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

.destaque-governo .governo-nome {
    font-family: Kanit, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
    color: #26323F;
    text-align: left;
    margin-top: 8px;
}

.destaque-governo .governo-redes-sociais {
    display: flex;
    gap: 8px;
}

.social-icon-container {
    width: 49px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.destaque-governo .governo-redes-sociais img {
    width: 29px;
    height: 29px;
}

.destaque-governo .governo-redes-sociais img.social-instagram {
    width: 35px;
    height: 35px;
}

.destaque-governo .governo-redes-sociais img.social-twitter {
    width: 29px;
    height: 29px;
}

.destaque-governo .governo-redes-sociais .social-email-icon {
    width: 35px;
    height: 35px;
    color: #1B7727 !important;
    stroke: #1B7727 !important;
}

.destaque-governo .governo-bio {
    flex-grow: 1;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #4F4F4F;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.destaque-governo .governo-orgao {
    /* width: 91px; */
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #1B7727;
    color: #FEFEFE;
    font-family: Kanit;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    display: inline-flex;
    /* Changed to inline-flex to shrink-wrap content */
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Show ellipsis for truncated text */
    align-self: flex-start;
    /* Make it shrink-wrap within its flex parent */
}

.destaque-vice-governo {
    height: auto;
    opacity: 1;
    border-radius: 16px;
    border: 1px solid #C5C5C5;
    padding: 24px;
    background: #FEFEFE;
    display: flex;
    /* To arrange perfil-redes-sociais and vice-governo-bio side-by-side */
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
}

.destaque-vice-governo .perfil-redes-sociais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 250px;
    height: 394px;
}

.destaque-vice-governo .vice-governo-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.destaque-vice-governo .vice-governo-nome {
    font-family: Kanit, sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.2;
    color: #26323F;
    text-align: left;
}

.destaque-vice-governo .vice-governo-redes-sociais {
    display: flex;
    gap: 8px;
}

.destaque-vice-governo .vice-governo-redes-sociais img {
    width: 24px;
    height: 24px;
}

.destaque-vice-governo .vice-governo-bio {
    flex-grow: 1;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #4F4F4F;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.div-listagem-cards-secretarios {
    display: flex;
    overflow: visible;
    /* Gap between the cards grid and the scrollbar div */
    align-items: flex-start;
    /* Align items to the top */
    justify-content: center;
    /* Center cards horizontally */
}

.div-listagem-cards-secretarios {
    display: flex;
    width: 100%;
    justify-content: center;
    /* Center cards horizontally */
}

.secretarios-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* Default to one column for mobile */
    gap: 12px;
    margin-top: 2rem;
    padding-right: 12px;
    /* Space between cards and scrollbar */
    flex-grow: 1;
    overflow-y: auto;
    /* Scrollbar enabled in all breakpoints */
    overflow-x: hidden;
    /* Hide horizontal scrollbar */
    max-height: 647px;
    /* Height limit in all breakpoints */
    justify-items: center;
    /* Center cards horizontally in mobile */
    align-items: start;
    /* Align items to the top of their grid area */
}

/* Hide native scrollbar for WebKit browsers */
.secretarios-grid::-webkit-scrollbar {
    /* display: none; */
    width: 9px;
    /* Largura da barra de rolagem */
}

.secretarios-grid::-webkit-scrollbar-track {
    background: #E3E3E3;
    /* Cor da trilha */
    border-radius: 10px;
}

.secretarios-grid::-webkit-scrollbar-thumb {
    background: #C5C5C5;
    /* Cor do "polegar" */
    border-radius: 10px;
}

.secretarios-grid::-webkit-scrollbar-thumb:hover {
    background: #C5C5C5;
    /* Cor do "polegar" ao passar o mouse */
}

.div-custom-scrollbar {
    width: 9.5px;
    height: 623px;
    background-color: #E3E3E3;
    /* Track color */
    position: relative;
    /* Needed for absolute positioning of the thumb */
}







/* Base styles for secretario-card (applies to all screen sizes) */
.secretario-card {
    background: #FEFEFE;
    border: 1px solid #C5C5C5;
    border-radius: 16px;
    padding: 16px 24px 16px 16px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 25px;
    width: 100%;
    /* Ensure it takes full width of its grid column */
    height: auto;
    /* Height adjusts to content */
}

/* Desktop styles for secretario-card */
@media (min-width: 1025px) {
    .secretario-card {
        max-width: 518px;
        min-height: 190px;
        flex-direction: row;
        /* Ensure horizontal layout on desktop */
        aspect-ratio: 518 / 192;
        /* Maintain aspect ratio */
    }

    /* Hide mobile-specific divs on desktop */
    .secretario-top-informacoes-mobile,
    .secretario-contato-redes-mobile {
        display: none !important;
    }

    /* Show desktop-specific info div */
    .secretario-perfil {
        display: block;
        /* Ensure profile image is visible */
        width: 160px;
        height: 160px;
    }

    .secretario-informacoes {
        display: block;
        /* Ensure desktop info is visible */
        text-align: left;
        width: 100%;
        max-width: 286px;
        min-height: 151px;
        height: auto;
    }

    .secretarios-grid {
        grid-template-columns: repeat(2, 1fr);
        /* Two columns for desktop */
        gap: 8px;
        max-height: 647px;
        overflow-y: auto;
        /* Enable scrollbar only on desktop */
    }

    .caixa-de-pesquisa-secretarios {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        /* Gap between input and button */
    }

    .input-pesquisa-secretarios {
        width: 100%;
        max-width: 871px;
        height: 56px;
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #C5C5C5;
        background: #FEFEFE;
        opacity: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        flex: 1;
        /* Added for potential absolute positioning of input */
    }

    .input-pesquisa-secretarios .material-symbols-outlined {
        color: #929292;
    }

    .input-pesquisa-secretarios input.placeholder-texto-pesquisa {
        color: #757575;
        font-family: Kanit;
        font-weight: 300;
        font-size: 14px;
        line-height: 100%;
    }

    .container-botao-buscar {
        flex-shrink: 0;
    }

    .container-botao-buscar .botao-buscar {
        background: #1B7727;
        border-radius: 8px;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #FEFEFE;
        font-family: Kanit;
        font-weight: 400;
        font-size: 20px;
        line-height: 100%;
        padding: 8px 53px;
        width: 167px;
        height: 56px;
    }

    .container-botao-buscar .botao-buscar .icone-buscar {
        display: none;
    }

}

.input-pesquisa-secretarios input[type="text"] {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    /* Fill available space */
    height: 100%;
    /* Fill available space */
    padding: 0;
    /* Remove default input padding */
    margin: 0;
    /* Remove default input margin */
    font-family: inherit;
    /* Inherit font from parent */
    font-size: inherit;
    /* Inherit font size from parent */
    color: inherit;
    /* Inherit color from parent */
}

.input-pesquisa-secretarios input[type="text"]::placeholder {
    color: #757575;
    /* Apply placeholder color */
    font-family: Kanit;
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
}

/* Tablet styles for iPad Air and similar devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .secretario-card {
        max-width: 100%;
        min-height: auto;
        aspect-ratio: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px;
    }

    .secretarios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        max-height: 647px;
        overflow-y: auto;
    }

    .secretario-card>.secretario-perfil {
        display: none !important;
    }

    .secretario-informacoes {
        display: none !important;
    }

    .secretario-top-informacoes-mobile {
        display: flex !important;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    .secretario-top-informacoes-mobile .secretario-perfil {
        display: block !important;
        width: 80px;
        height: 80px;
        flex-shrink: 0;
    }

    .secretario-contato-redes-mobile {
        display: flex !important;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
}

/* Tablet styles for iPad Air and similar devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .caixa-de-pesquisa-secretarios {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 90%;
        margin: 0 auto;
    }

    .input-pesquisa-secretarios {
        width: 100%;
        max-width: 600px;
        height: 50px;
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #C5C5C5;
        background: #FEFEFE;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .container-botao-buscar .botao-buscar {
        width: auto;
        padding: 8px 24px;
        height: 50px;
    }

    .container-botao-buscar .botao-buscar .texto-buscar {
        display: inline;
    }
}

/* Mobile styles for secretario-card and its internal structure */
@media (max-width: 767px) {
    .div-custom-scrollbar {
        display: none !important;
    }

    .div-listagem-cards-secretarios {
        justify-content: center;
        /* Center cards on mobile */
    }

    .destaque-governo {
        width: 394px;
        height: auto;
        gap: 32px;
        opacity: 1;
        border-radius: 16px;
        border: 1px solid #C5C5C5;
        padding: 24px;
        flex-direction: column;
        /* Stack elements vertically on mobile */
    }

    .destaque-vice-governo {
        width: 394px;
        height: 1114.3333740234375px;
        gap: 32px;
        opacity: 1;
        border-radius: 16px;
        border: 1px solid #C5C5C5;
        padding: 24px;
    }

    .secretario-card {
        flex-direction: column;
        align-items: flex-start;
        /* Align items to the start when stacked */
        padding: 16px;
        /* Adjust padding for smaller screens */
        gap: 16px;
        /* Add gap between child elements */
        max-width: 394px;
        /* Specific width for smaller screens */
        min-height: 194px;
        /* Specific height for smaller screens */
        aspect-ratio: 394 / 194;
        /* Maintain aspect ratio */
    }

    .secretarios-grid {
        max-height: 647px;
        overflow-y: auto;
    }

    .secretarios-grid::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar on mobile */
    }

    .caixa-de-pesquisa-secretarios {
        display: flex;
        align-items: center;
        gap: 8px;
        /* Gap between input and button */
    }

    .input-pesquisa-secretarios {
        width: 303px;
        height: 56px;
        padding: 12px 16px;
        border-radius: 8px;
        border: 1px solid #C5C5C5;
        background: #FEFEFE;
        opacity: 1;
        display: flex;
        align-items: center;
        gap: 8px;
        position: relative;
        /* Added for potential absolute positioning of input */
    }

    .input-pesquisa-secretarios .material-symbols-outlined {
        color: #929292;
    }

    .input-pesquisa-secretarios input.placeholder-texto-pesquisa {
        color: #757575;
        font-family: Kanit;
        font-weight: 300;
        font-size: 14px;
        line-height: 100%;
    }

    .container-botao-buscar {
        flex-shrink: 0;
    }

    .container-botao-buscar .botao-buscar {
        width: 59px;
        height: 56px;
        padding: 8px 32px;
        gap: 8px;
        border-radius: 8px;
        background: #1B7727;
        opacity: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FEFEFE;
    }

    .container-botao-buscar .botao-buscar .texto-buscar {
        display: none;
    }



    /* Hide desktop-specific info div on mobile */
    .secretario-card>.secretario-perfil,
    .secretario-informacoes {
        display: none !important;
    }

    /* Show mobile-specific divs on mobile */
    .secretario-top-informacoes-mobile {
        display: flex !important;
        align-items: center;
        gap: 16px;
        /* Adjust gap as needed */
        width: 100%;
        /* Fill available width */
        max-width: 354px;
        /* Specific width for this section */
        min-height: 65px;
        /* Specific height for this section */
    }

    .secretario-top-informacoes-mobile .secretario-perfil {
        width: 65px;
        height: 65px;
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    .secretario-nome-orgao-mobile {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        width: 100%;
        /* Fill available width */
        max-width: 257px;
        /* Specific width for this section */
        min-height: 62px;
        /* Specific height for this section */
    }

    .secretario-orgao {
        font-family: Kanit, sans-serif;
        font-weight: 500;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        color: #FEFEFE;
        background: #1B7727;
        padding: 0 8px;
        border-radius: 8px;
        height: 24px;
        margin-bottom: 8px;
        align-self: flex-start;
        /* Shrink-wrap content horizontally */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .secretario-contato-redes-mobile {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        width: 100%;
        /* Fill available width */
        max-width: 354px;
        /* Specific width for this section */
        min-height: 81px;
        /* Specific height for this section */
    }

    .email-secretario a {
        font-size: 14px;
    }

}

/* Styles that apply to both desktop and mobile, or are independent of the new structure */
.secretario-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    /* Resetar se houver algum padrão */
    margin: 0;
    display: block;
}

.secretario-nome {
    font-family: Kanit, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1em;
    color: #26323F;
    margin: 0 0 0.25rem 0;
}

.secretario-cargo {
    color: #555;
    margin: 0 0 1rem 0;
    font-size: 0.9rem;
}

.secretario-contato a,
.secretario-redes-sociais a {
    display: inline-block;
    margin: 0 0.5rem;
    color: #0073aa;
    text-decoration: none;
}

.secretario-redes-sociais {
    width: auto;
    height: 50px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.secretario-redes-sociais img.social-twitter {
    width: 24px;
    height: 24px;
}

.secretario-redes-sociais img.social-instagram {
    width: 30px;
    height: 30px;
}

.secretario-redes-sociais .secretario-social-email {
    width: 29px;
    height: 29px;
    color: #1B7727 !important;
    stroke: #1B7727 !important;
}

.secretario-orgao {
    display: inline-block;
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #1B7727;
    color: #FEFEFE;
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 24px;
    text-align: left;
    /* Changed to left for better alignment with full text */
    white-space: nowrap;
    /* Prevent text from wrapping */
    overflow: hidden;
    /* Hide overflowing content */
    text-overflow: ellipsis;
    /* Show ellipsis for truncated text */
    margin-bottom: 8px;
    /* Adiciona um espaço abaixo da tag */
    align-self: flex-start;
    /* Make it shrink-wrap within its flex parent */
}

.email-secretario {
    display: flex;
    align-items: center;
    height: auto;
    margin-top: 8px;
    overflow: hidden;
    white-space: nowrap;
    /* Espaço abaixo do nome */
}

/* Mobile: overflow auto mas scrollbar invisível */
@media (max-width: 767px) {
    .email-secretario {
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .email-secretario::-webkit-scrollbar {
        display: none;
    }
}

.email-secretario .material-symbols-outlined {
    font-size: 24px;
    color: #1B7727;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.email-secretario a {
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 132%;
    text-decoration: underline;
    color: #1B7727;
}

/* Base styles for Governor Bio Paragraphs */
.destaque-governo .governo-bio-texto p {
    font-family: Kanit, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 175%;
    letter-spacing: 0;
    color: #465564;
    margin-bottom: 1.75em;
    /* One line space between paragraphs */
}

.destaque-governo .governo-bio-texto p strong {
    font-weight: 500;
}

/* Styles for Vice-Governor Card (to match Governor) */
.destaque-vice-governo {
    height: auto;
    opacity: 1;
    border-radius: 16px;
    border: 1px solid #C5C5C5;
    padding: 24px;
    background: #FEFEFE;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    margin-top: 20px;
    /* Space between governor and vice-governor */
}

.destaque-vice-governo .perfil-redes-sociais {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.destaque-vice-governo .vice-governo-foto {
    width: 300px;
    height: 400px;
    object-fit: cover;
    border-radius: 4px;
}

.destaque-vice-governo .vice-governo-nome {
    font-family: Kanit, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    line-height: 100%;
    letter-spacing: 0;
    color: #26323F;
    text-align: left;
    margin-top: 8px;
}

.destaque-vice-governo .vice-governo-redes-sociais {
    display: flex;
    gap: 8px;
}

.destaque-vice-governo .vice-governo-redes-sociais img {
    width: 29px;
    height: 29px;
}

.destaque-vice-governo .vice-governo-bio {
    flex-grow: 1;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #4F4F4F;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.destaque-vice-governo .vice-governo-orgao {
    width: auto;
    /* Adjust width to content */
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #1B7727;
    color: #FEFEFE;
    font-family: Kanit;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.destaque-vice-governo .vice-governo-bio-texto p {
    font-family: Kanit, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 175%;
    letter-spacing: 0;
    color: #465564;
    margin-bottom: 1.75em;
}

.destaque-vice-governo .vice-governo-bio-texto p strong {
    font-weight: 500;
}

/* Mobile styles for Vice-Governor */
@media (max-width: 767px) {
    .destaque-vice-governo {
        flex-direction: column;
        height: auto;
        /* Adjust height for mobile */
    }
}

/* Alternating layout for highlighted cards */
.destaque-governo.layout-alternating .perfil-redes-sociais {
    order: 1;
    /* Move the photo/social block to the right */
}

.destaque-governo.layout-alternating .governo-orgao {
    align-self: flex-end;
    /* Align the agency name to the right in alternating layout */
}

.destaque-governo.layout-alternating .governo-nome {
    text-align: right;
    /* Align the name to the right in alternating layout */
}

/* Title for Secretarios section */
.secretarios-title {
    font-family: Kanit, sans-serif;
    font-weight: 400;
    font-style: normal;
    /* Regular */
    font-size: 32px;
    letter-spacing: 0%;
    color: #26323F;
    text-align: left;
    /* Aligned to the left */
}

.pre-destaque-wrapper {
    width: 100%;
    max-width: 1047px;
    height: 116px;
    gap: 20px;
    /* This property won't do anything on its own, but I'll include it as requested */
    padding-bottom: 24px;
    margin: auto;
    /* To center it */
    box-sizing: border-box;
}

.secretarios-title-wrapper {
    width: 1071px;
    height: 48px;
    opacity: 1;
    transform: rotate(0deg);
    margin: 0 auto;
    /* para centralizar caso necessário */

}

@media (max-width: 767px) {
    .secretarios-title-wrapper {
        width: 394px;
        height: 48px;
        opacity: 1;
        transform: rotate(0deg);
        margin: 0 auto;
    }
}


.governo-title {
    font-family: Kanit, sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #465564;
    width: 100%;
    max-width: 1071px;
    height: 60px;
    margin: 0;
    /* Reset default margin */
}

.ver-mais-wrapper {
    width: 100%;
    max-width: 1047px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 0px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Tablet styles for iPad Air and similar devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .ver-mais-wrapper {
        max-width: 95%;
        height: auto;
        gap: 16px;
        padding: 20px 16px;
    }

    .ver-mais-card {
        width: 100%;
        max-width: none;
        height: auto;
        padding: 16px;
    }

    .ver-mais-cards-container {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .ver-mais-wrapper {
        height: auto;
        max-width: 100%;
        padding: 16px;
        gap: 12px;
        margin: 0 auto;
    }

    .ver-mais-card {
        max-width: 100%;
        width: 394px;
        height: 88px;
        padding: 12px;
        box-sizing: border-box;
    }

    .ver-mais-cards-container {
        flex-direction: column;
        gap: 12px;
    }
}

.Titulo-area {
    font-family: Kanit, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #465564;
}

.ver-mais-card {
    width: 517.5px;
    height: 88px;
    border-radius: 16px;
    border: 1px solid #C5C5C5;
    background: #FEFEFE;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
}

.ver-mais-card:hover {
    background: #FAFFFA;
}

.ver-mais-card:active {
    background: linear-gradient(90deg, #EEEEEE 14.54%, #D9F2EF 99.65%);
}

.ver-mais-card:focus {
    outline: 2px solid #545FFF;
    outline-offset: 2px;
}

.ver-mais-cards-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    /* Spacing between cards */
}

/* Tablet styles for iPad Air and similar devices (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .ver-mais-cards-container {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .ver-mais-cards-container {
        flex-direction: column;
        gap: 12px;
    }
}

.ver-mais-icon-left,
.ver-mais-icon-right {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    /* Default icon size */
    color: #465564;
    /* Default icon color */
}

.ver-mais-description {
    flex-grow: 1;
    /* Allow description to take available space */
    font-family: Kanit, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: #4F4F4F;
}

/* Custom styles for the first 'ver-mais-card' icon */
.ver-mais-cards-container .ver-mais-card:first-child .ver-mais-icon-left .material-symbols-outlined {
    font-size: 26.67px;
    color: #1B7727;
}

@media (max-width: 767px) {
    .destaque-governo.layout-alternating .perfil-redes-sociais {
        order: 0;
        /* Reset to default order */
    }

    .destaque-governo.layout-alternating .governo-orgao {
        align-self: flex-start;
        /* Reset to default alignment */
    }

    .destaque-governo.layout-alternating .governo-nome {
        text-align: left;
        /* Reset to default text alignment */
    }

    .ver-mais-cards-container {
        flex-direction: column;
        /* Stack cards vertically on mobile */
    }

    .ver-mais-card {
        max-width: 100%;
        max-width: 100%;
        width: 394px;
        height: 88px;
        padding: 12px;
        box-sizing: border-box;

    }
}