:root {
    --azul_claro: #0E457D;
    --azul_maisclaro: #2269AA;
    --azul_fundo: #c1d4e6;
    --azul_contorno: #5d7c99;
    --azul_escuro: #003B4A;
    --azul_opaco: #2268aa82;

    --rosa: #FE4E77;
    --rosa_claro: #f1718f;
    --rosa_texto: #FF2BAA;

    --cinza245: rgb(245, 245, 245);
    --cinza230: rgba(230, 230, 230, 0.767);
    --cinza215: rgb(215, 215, 215);
    --cinza201: rgb(201, 201, 201);
    --cinza158: #9e9e9e;
    --cinza80: rgb(80, 80, 80);
    --cinza: rgb(107, 107, 107);
    --cinza_input: #DFDBDB;
    --cinzaCard: #F5F5F5;
    --preto_back: #393939;
    --cinza_h3: #272727;
    --cinzaFundoAba: rgb(0, 0, 0, 0.4);

    --vermelho: #fd2020;

    --verde: #2E8B57;

    /* Mensagem de feedback */
    --fundoVerde: rgb(245, 245, 240);
    --verdeFeedback: rgb(60, 170, 55);
    --contornoVerde: rgb(172, 210, 140);

    --fundoVermelho: rgb(250, 240, 240);
    --vermelhoFeedback: rgb(105, 5, 5);
    --contornoVermelho: rgb(210, 140, 140);

    /* modo escuro */
    --cinza46: rgb(46, 46, 46);
    --cinza34: rgb(34, 34, 34);
    --cinza147: rgb(147, 147, 147);
    --cinza100: rgb(100, 100, 100);

    --azulME1: rgb(30, 144, 255);
    --azulME2: rgb(35, 165, 240);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    scroll-behavior: smooth;

    transition: background-color 0.5s ease, color 0.5 ease, border-color 0.5 ease;
}

.bttEstatisticas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    margin: 15px auto;
    width: 90%;
    transition: background-color 0.3s ease;
}

.bttEstatisticas svg {
    fill: black;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.bttEstatisticas.aberto svg {
    transform: rotate(90deg);
}

.divEstatisticas {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
    height: 17rem;
}

.divEstatisticas.aberto {
    max-height: 17rem;
    padding: 15px;
}

#graficoDadosOng {
    max-width: 15rem;
    max-height: 15rem;
    margin: 0 auto;
    display: block;
}

a {
    text-decoration: none;
    color: black;
}

.cinzah3 {
    color: var(--cinza_h3) !important;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--cinza230);
    min-height: 100vh;
    margin: 0;
    scroll-behavior: smooth;
}

/* Config Main */

main {
    padding: 0 2rem 2rem 2rem;
}

.maincem {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}

.azul {
    /* cor do texto/título azul */
    color: var(--azul_claro);
}

.azulME {
    color: var(--azulME2);
}

.centro {
    /* alinhar texto ao centro */
    text-align: center;
    margin-bottom: 1rem;
}

.h2P {
    font-size: 16px;
    font-weight: normal;
}

.buttonRosa {
    padding: 1rem;
    background-color: var(--rosa);
    color: white;
    font-weight: 700;
    font-size: 16px;
    border-radius: 1rem;
}



/* ----------------------------- Barra Acessibilidade ----------------------------- */

/* Estilos da Barra de Acessibilidade */
.accessibility-bar {
    position: fixed;
    right: -300px;
    /* Oculto inicialmente fora da tela */
    top: 35vh;
    width: 6rem;
    background-color: var(--cinza215);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 2px 5px var(--cinza158);
    transition: left 0.3s ease;
    z-index: 2000;
    margin-left: 4.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
}

.accessibility-bar.show {
    right: 10px;
    /* Exibe a barra ao passar o mouse ou clicar */
}

.accessibility-icon {
    position: fixed;
    right: 10px;
    top: 27vh;
    cursor: pointer;
    background-color: var(--azul_claro);
    padding: 10px;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.pathbtAcss {
    transition: all 0.2s;
    background-color: transparent;
}

.pathbtAcssClick {
    fill: var(--azul_maisclaro);
}

.pathbtAcss:hover {
    transform: scale(101%);
    fill: var(--azul_maisclaro);
}

/* -----------------------------Gerador de notícias----------------------------- */



.search-bar {
    text-align: center;
    position: relative;
    width: 80%;
}

.search-bar input {
    padding: 0.8rem;
    width: 100%;
    min-width: 18rem;
    font-size: 16px;
    border-radius: 2.6rem;
    border: 1px solid var(--cinza215);
}

.lupaPesquisa img {
    height: 2rem;
    width: 3rem;
    cursor: pointer;
    background-color: white;
}

#searchNoticias {
    position: absolute;
    top: 0;
    right: 0;

    margin-top: 0.4rem;
    margin-right: 0.8rem;
}

.news-item {
    padding: 1rem;
    border: 1px solid var(--cinza215);
    border-radius: 1rem;
    min-height: 10rem;
    background-color: var(--cinza245);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    display: flex;
    gap: 1rem;
}

.fotoNoticia {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 15rem;
    border-radius: 0.8rem;
}

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

.news-item p {
    color: var(--cinza_h3);
    text-align: justify;
}

/* Estilo para o container de notícias */
#news-container {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    background-color: white;
    /* Cor de fundo */
    border-radius: 2rem;
    width: 100%;
    min-width: 18rem;
    margin: auto;
}

/* Efeito de hover nos itens de notícia */
.news-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Estilo para o título da notícia */
.news-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--azul_maisclaro);
    text-decoration: none;
}

/* Efeito de hover no título */
.news-title:hover {
    text-decoration: underline;
    color: var(--azul_maisclaro);
}

/* Estilo para a descrição da notícia */
.news-item p {
    font-size: 16px;
    line-height: 1.5;
    color: var(--cinza_h3);
    margin-top: 0.6rem;
}

/* -----------------------------HEADER----------------------------- */

header {
    display: flex;
    height: 5rem;
    width: 100%;
    background-color: var(--azul_claro);
    align-items: center;
    padding: 0 2rem;
    justify-content: space-between;
}

.headerInst {
    position: fixed;
    z-index: 30;
}

header a {
    text-decoration: none;
    color: white;
    font-weight: 550;
}

/* logo */

.logobranca {
    height: 3.5rem;
    transition: all 0.2s;
}

.logobranca:hover {
    transform: scale(105%);
}

/* nav - links  */

nav {
    display: flex;
    gap: 4rem;
    align-items: center;
}

.linksNav {
    display: flex;
    gap: 2rem;
}

.linksNav>div {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

#setinha {
    height: 1rem;
    transition: all 0.2s;
}

#institucional {
    transition: all 0.2s;
}

#institucional:hover {
    color: var(--rosa);
    transform: scale(102%);
}

#institucional:hover #setinha {
    fill: var(--rosa);
}

.linksNav a {
    transition: all 0.2s;
}

.linksNav a:hover {
    color: var(--rosa);
    transform: scale(102%);
}

.caixaInst {
    display: none;
    flex-direction: column;
    background-color: white;
    position: fixed;
    z-index: 9000;
    top: 3.2rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow: 1px 1px 2px var(--cinza158);
}

.caixaInst>p {
    padding: 0.2rem 0;
}

.caixaInst>p>a {
    color: var(--cinza_h3);
    font-weight: 500;
    transition: all 0.2s;
}

.caixaInst>p>a:hover {
    color: var(--rosa);
}

/* nav - botões  */

.btnsNav {
    display: flex;
    gap: 2rem;
}

.btnsNav a {
    display: flex;
    height: 2.5rem;
    padding: 0 0.6rem;
    border-radius: 0.6rem;
    background-color: var(--rosa);
    align-items: center;
    font-size: 14px;
    transition: all 0.4s;
}

.btnsNav a:hover {
    transform: scale(105%);
}

/* ícones/link nav */

.imglinksHeader {
    display: flex;
    gap: 1rem;
}

.imglinksHeader svg,
button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}

.imglinksHeader svg:hover {
    fill: var(--rosa);
    transform: scale(105%);
}

/* menu hamburguer / expandir menu */

#expandirMenu {
    position: fixed;
    background-color: var(--cinza245);
    display: flex;
    flex-direction: column;
    top: 0;
    right: -100%;
    z-index: 2000;
    padding: 2rem;
    width: 100%;
    height: 100vh;
}

#expandirMenu .tema {
    color: var(--cinza);
    padding: 0 2rem;
    margin-top: 2rem;
    justify-content: flex-start;
    gap: 1rem;
}

#expandirMenu .linha {
    background-color: var(--cinza201);
    max-height: 1px;
    min-height: 1px;
}

#expandirMenu div #setinha {
    fill: var(--cinza);
    rotate: 90deg;
}

#expandirMenu a {
    color: var(--cinza);
}

#expandirMenu a:hover {
    color: var(--azul_claro);
}

.linksMenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 2rem;
}

.linksMenu ul {
    display: none;
    flex-direction: column;
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    gap: 0.2rem;
}

.linksMenu ul li {
    list-style-type: none;
}

.linksMenu ul li:before {
    content: "- ";
    color: var(--cinza);
}

#topoMenu {
    display: flex;
    margin-bottom: 2rem;
    justify-content: space-between;
    align-items: flex-start;
}

#topoMenu svg {
    fill: var(--cinza);
}

#topoMenu img {
    height: 3rem;
    transition: all 0.5s;
}

#topoMenu img:hover {
    transform: scale(105%);
}

#hamburguer {
    display: none;
}

#comboInst {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#setaInst {
    background-color: var(--cinza215);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    height: 1rem;
    fill: var(--cinza158);
    transform: rotate(90deg);
}

#setaInst:hover path {
    fill: var(--azul_claro);
}


/* conta pop-up */
.contaPopup {
    position: absolute;
    background-color: var(--cinza215);
    top: 5rem;
    right: 1rem;
    z-index: 200000;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 3px 3px 5px var(--cinza158);
    width: 30rem;
}

.ativo {
    display: flex;
}

.contaPopup.ativo {
    display: flex;
}


/* #suaconta {
    display: none;
} */

.contaPopup #email {
    font-size: 13px;
}

.contaPopup,
.contaPopup a {
    color: var(--cinza_h3);
    font-weight: 400;
    transition: all 0.3s;
}

.contaPopup a:hover {
    color: var(--rosa);
}

.contaPopup .linha {
    background-color: var(--cinza147);
    margin: 0.5rem 0;
}

.contaPopup #usuarioPerfil {
    margin-top: 0;
    gap: 1rem;
}

.contaPopup #usuarioPerfil #fotoUsuario,
#fotoUsuarioconfig {
    height: 7rem;
    width: 7rem;
}

#configPopup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.configFinal {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.configFinal .tema {
    justify-content: flex-end;
    gap: 1rem;
    width: fit-content;
}

.botoesLogin {
    display: flex;
    gap: 1rem;
}

.botoesLogin {
    width: fit-content;
}



.tema {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#sairDaConta {
    margin-top: 1rem;
}

/* entrar ou cadastrar/popup */

#logOn {
    font-size: 20px;
}

#undefinedFoto {
    background-color: var(--cinza201);
    height: 7rem;
    width: 7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#undefinedFoto img {
    height: 80%;
}

#cadastrarPopup {
    display: none;
}

/* From Uiverse.io by Galahhad */
/* switch settings 👇 */

.ui-switch {
    /* switch */
    --switch-bg: rgb(135, 150, 165);
    --switch-width: 48px;
    --switch-height: 20px;
    /* circle */
    --circle-diameter: 32px;
    --circle-bg: rgb(0, 56, 146);
    --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
    display: none;
}

.slid {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: var(--switch-width);
    height: var(--switch-height);
    background: var(--switch-bg);
    border-radius: 999px;
    position: relative;
    cursor: pointer;
}

.slid .circle {
    top: calc(var(--circle-inset) * -1);
    left: 0;
    width: var(--circle-diameter);
    height: var(--circle-diameter);
    position: absolute;
    background: var(--circle-bg);
    border-radius: inherit;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    ;
}

.slid .circle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.75);
    border-radius: inherit;
    -webkit-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
    opacity: 0;
}

/* actions */

.ui-switch input:checked+.slid .circle {
    left: calc(100% - var(--circle-diameter));
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
    -webkit-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    opacity: 1;
    width: 0;
    height: 0;
}

/*       AQUI COMEÇA O CARROSSEL     */
.slider {
    margin: 0 auto;
    width: 100%;
    height: auto;
    background-color: var(--rosa_claro);
    overflow: hidden;
}

.slides {
    height: 80%;
    width: 400%;
    /*Foi posto com 400% para que só uma imagem aparecesse por vez, pelo menos eu entendi isso :)*/
    display: flex;
}

/* "Apaga" os radios para que não fique com dois*/
.slides input {
    display: none;
}


.slide {
    width: 25%;
    /*Como foi colocado em .slides o width sendo como 400%, agora o width do .slide será de 25%, ou seja, 100% do tamanho do .slider*/
    position: relative;
    transition: 2s;
}

.slide img {
    width: 100%;
    height: auto;
}

/*Configurações para a div dos botões/radios*/
.manual_nav {
    position: absolute;
    width: 100%;
    margin-top: -40px;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

/*Configurações da cor, tamanho e tal dos radios(diretamente deles, diferente de .manual_nav que é a div onde os radios estão dentro)*/
.manual_btn {
    border: 2px solid white;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.5s;
}

.manual_btn:hover {
    background-color: white;
}

#radio1:checked~.first {
    margin-left: 0;
}

#radio2:checked~.first {
    margin-left: -25%;
}

#radio3:checked~.first {
    margin-left: -50%;
}

/* ----------------------------- main - index.html ----------------------------- */


.mainIndex {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: var(--rosa_claro);
    gap: 2rem;
    padding: 3rem 2rem;
    flex-wrap: wrap;
}

.quadro {
    display: flex;
    flex-direction: column;
    background-color: var(--cinza230);
    border-radius: 2rem;
    width: 30rem;
    align-items: center;
    padding: 2rem 0;
    min-height: 16rem;
}

.quadro h2 {
    text-align: center;
    width: 80%;
    color: var(--rosa);
    font-weight: 700;
}

.quadro p {
    margin-top: 1rem;
    text-align: justify;
    width: 80%;
    color: black;
}

/* ----------------------------- Cards com foto - index.html (feedbacks)/ institucional.html (Integrantes) ----------------------------- */

.secPerson {
    display: flex;
    flex-direction: column;
    gap: 7rem;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
    bottom: 0;
    left: 0;
    position: relative;
    margin-bottom: 4rem;
}

.cardsPerson {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    gap: 2%;
}

.cardPerson {
    display: flex;
    flex-direction: column;
    background-color: var(--cinza215);
    width: 17rem;
    padding: 6rem 2rem 2rem 2rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 22rem;
    min-width: 272px;
}

.cardPerson p,
.cardPerson h2 {
    text-align: left;
}

.cardPerson h3 {
    text-align: center;
}

.bio {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.fotoCard {
    height: 10rem;
    width: 10rem;
    border-radius: 50%;
    position: absolute;
    top: -5rem;
    background-color: var(--cinza215);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#fotoFeed1 {
    background-image: url(/public/img/fotos/perfil1.jpg);
}

#fotoFeed2 {
    background-image: url(/public/img/fotos/perfil2.jpg);
}

#fotoFeed3 {
    background-image: url(/public/img/fotos/perfil3.jpg);
}

#fotoFeed4 {
    background-image: url(/public/img/fotos/perfil4.jpg);
}

#camilly {
    background-image: url(/public/img/fotos/milly.jpg);
}

#lucas {
    background-image: url(/public/img/fotos/lucas.jpg);
}

#barbara {
    background-image: url(/public/img/fotos/barbara.jpg);
}

#fernanda {
    background-image: url(/public/img/fotos/fernanda.jpg);
}

/* ----------------------------- FOOTER ----------------------------- */

footer {
    background-color: var(--azul_claro);
    display: flex;
    width: 100%;
    color: white;
    flex-direction: column;
    padding: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

footer .logobranca {
    height: 8rem;
}

.tituloFooter {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

footer .listasFooter a {
    text-decoration: none;
    color: white;
    transition: all 0.2s;
    margin-bottom: 0.4rem;
}

footer .listasFooter a:hover {
    color: var(--rosa);
}

.linksFooter {
    display: flex;
    width: 100%;
    gap: 4rem;
    justify-content: space-between;
}

.listasFooter {
    display: flex;
    flex-direction: column;
    width: 15rem;
    min-height: 8rem;
    padding: 1rem;
}

.listasFooter div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.divFooter {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.linhaFooter {
    display: flex;
    height: 1px;
    width: 100%;
    background-color: white;
    margin: 1.5rem 0;
}

.fimFooter {
    display: flex;
    justify-content: right;
    width: 100%;
    align-items: center;
}

.fimFooter img {
    height: 4rem;
}

.insta {
    background-color: transparent;
    height: 2.5rem;
    transition: all 0.2s;
}


.instagram {
    height: 2.5rem;
    background-color: var(--azul_claro);
}

.insta:hover .instagram path {
    fill: var(--rosa);
}

.especial {
    position: relative;
}

/* ----------------------------- caminho das páginas ----------------------------- */

.caminho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: 3.5rem;
    position: relative;
}

.caminho a {
    text-decoration: none;
    color: black;
}

.link {
    font-weight: 700;
    transition: all;
}

.link:hover {
    color: var(--rosa_texto);
}

.caminho img {
    height: 2rem;
    border-radius: 50%;
    transition: all;

}

.caminho img:hover {
    border: 2px solid var(--rosa);
}

.caminhoTransparente {
    background-color: transparent;
}

/* ----------------------------- institucional.html ----------------------------- */

.caminhoInst {
    /* height: 8.5rem; */
    display: flex;
    align-items: flex-end;
    min-width: 275px;
}

.caminhoInst>div {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 3.5rem;
    min-width: 275px;
}

/* main */
.mainInst {
    display: flex;
    flex-direction: column;
}

.mainInst .secPerson {
    width: calc(100% + 4rem);
    margin-bottom: 0;
    margin-top: 4rem;
    bottom: -2rem;
    left: -2rem;
}

#barra {
    /* espaço em que o aside ficará */
    width: calc(2% + 15rem);
}

#sections {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.8rem;
}

/* seções */

.gruposecInst {
    display: flex;

}

.sectionInst div {
    background-color: var(--cinza215);
    padding: 1.5rem;
    border-radius: 2rem;
    margin-top: 0.5rem;
    min-width: 275px;
}

.sectionInst h2 {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    text-align: left;
}

.sectionInst p {
    padding: 0 0 1.5rem 0;
}

.sectionInst ul {
    padding: 1rem 0 2rem 3rem;
}

.sectionInst ul li {
    padding: 0 0 1rem 0;
}

.sectionInst img {
    width: 100%;
    border-radius: 2rem;
    min-width: 275px;
}

/* integrantes */

.integrantesInst {
    background-color: var(--rosa_claro);
}

.integrantesInst h2 {
    color: white;
}

/* botão voltar para o topo */

.botaoVoltarTopo {
    position: absolute;
    height: 4rem;
    width: 4rem;
    background-color: var(--azul_maisclaro);
    box-shadow: 1px 1px 2px var(--cinza_h3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2rem;
    bottom: 2rem;
    transition: all 0.5s;
}

.botaoVoltarTopo svg {
    height: 80%;
    fill: white;
    rotate: 270deg;
}

.botaoVoltarTopo:hover {
    transform: scale(110%);
    background-color: var(--azul_claro);
}

/* ----------------------------- ongs.html ----------------------------- */

.mainOng {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.fundoBranco {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    border-radius: 1rem;
    padding: 1rem;
    width: 70%;
    min-width: calc(275px + 2rem);
}

.maincem .fundoBranco {
    width: 80% !important;
}

.gridOng {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border-radius: 2rem;
    width: 100%;
}

.cardOng {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap: 1rem;
    padding: 1rem;
    min-width: 16rem;
    border-radius: 2rem;
    box-shadow: var(--cinza201) 1px 1px 3px;
    color: white;
}

.cardOng:nth-child(odd) {
    background-color: var(--rosa);

}

.cardOng:nth-child(even) {
    background-color: var(--azul_claro);
}

.cardOng img {
    height: 14rem;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 1rem;
    margin-bottom: 0.5rem;
    object-fit: cover;
}

.imgFav {
    display: flex;
    position: relative;
}

#adicionarFav {
    height: 2rem;
    position: absolute;
    z-index: 2;
    top: calc(1rem + 48%);
    left: 81%;
}

.descOng {
    padding-left: 0.8rem;
    transition: all 0.2s;
}

.descOng p {
    font-size: 16px;
    text-align: start;
}

.descOng h2 {
    margin-bottom: 0.3rem;
    text-align: start;
    font-size: 20px;
}

.cidadeOng::before {
    content: "Cidade: ";
    font-weight: 600;
}

.qntdAnimaisOng {
    font-weight: 600;
}

.qntdAnimaisOng::after {
    content: " animais disponíveis.";
}

/* ----------------------------- adotar.html ----------------------------- */

.mainAdotar {
    display: flex;
}

/* Filtro */

.filtro {
    background-color: var(--cinza215);
    width: 15rem;
    min-width: 15rem;
    border-radius: 2rem;
    padding: 2rem;
    height: 80%;
}

#limparFiltros {
    transition: none;
    font-size: 14px;
    display: flex;
    width: 6rem;
    padding: 0.3rem 0;
}

#limparFiltros:hover {
    color: var(--azul_claro);
}

.no-scroll {
    overflow: hidden;
}

.linha {
    flex-shrink: 0;
    flex-grow: 0;

    max-height: 1px;
    height: 1px;
    width: 100%;
    background-color: var(--cinza201);
    margin: 1rem 0;
}

.botFiltro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camadasFiltro {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.camadasFiltro h3 {
    font-size: 16px;
    font-weight: 600;
}

.camadasFiltro div {
    display: flex;
    gap: 0.3rem;
}

/* cards adotar */

.buttonFiltrar {
    display: none;
    margin-left: 3%;
    padding: 0 1rem 1rem 1rem;
    font-size: 16px;
    width: 4rem;
}

.adotarSec {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    flex-wrap: wrap;
    width: 100%;
    gap: 1rem;
    padding-left: 2%;
}

.adotarMiniCard {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    gap: 1rem;
    overflow: hidden;
    opacity: 1;
    backface-visibility: hidden;
    transform-style: preserve-3d;

}

.versoAdotarMiniCard {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0;
    padding: 1rem;
    overflow: auto;
    transform: rotateY(180deg);
    z-index: -1;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    height: 100%;
    justify-content: space-between;
}

.fundoAba {
    height: 100vh;
    width: 100vw;
    position: fixed;
    /* Fixado na tela, independente do scroll */
    z-index: 6;
    top: 0;
    left: 0;
    background-color: var(--cinzaFundoAba);
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.conjOngBotFechar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.iconFechar {
    height: 2rem;
    width: 2rem;
}

.maisInfoPet {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 600px;
    width: 50%;
    height: 34rem;
    position: relative;
    background-color: white;
    border-radius: 1.5rem;
    z-index: 1000;
    padding: 1rem;
}

#sobrePet {
    text-align: justify;
    width: 98%;
}

.compartilharPet:hover {
    transform: scale(105%);
}

.compartilharPet svg {
    fill: var(--cinza100);
    height: 40px;
    width: 40px;
}

.fotoPet {
    border-radius: 1.5rem;
    height: 100%;
    width: 40%;
    background-color: var(--cinza215);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.conjFavoritarCompartilhar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.conjNomeSexo {
    display: flex;
    padding: 0.5rem 0;
}

.conjInfoPetBtt {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.adotarMiniCard>img {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
    border-radius: 2rem;
}

.cardsAnimais {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 275px;
    background-color: white;
    padding: 1rem;
    border-radius: 2rem;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 1px 1px var(--cinza215);
    transition: 0.1s all;
}

.infoBotaoCardPet {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 60%;
    padding: 0 0 0 1rem;
    position: relative;
}

.maisInfoPet #pesoIdade,
.maisInfoPet #especPorte {
    width: 55%;
}

.iconsAdotar {
    display: flex;
    gap: 0.2rem;
    align-items: center;
}

.descMiniAdotar {
    padding: 0 1rem;
    width: 100%;
}

.linkDesc {
    color: var(--rosa);
    text-decoration: none;
    transition: all 0.1s;
}

.linkDesc:hover {
    color: var(--azul_claro);
}

.nomIconAdotar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.nomIconAdotar svg {
    height: 2rem;
    min-height: 2rem;
    fill: var(--cinza158);
}

.adotarMiniCard .bttcard {
    padding: 0 1rem;
}

.bttcard {
    display: flex;
    width: 100%;
    justify-content: space-between;
    transition: all 0.1s;
    background-color: white;
}

.maisInfoPet .bttcard {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 0.3rem 1rem 0.3rem 0;
    border-radius: 0 0 10px 0;
}

.bttcard .buttonRosa:hover {
    transform: scale(105%);
}

.verMais,
.verMenos {
    font-size: 16px;
    font-weight: 700;
    color: var(--cinza_h3);
    transition: all 0.1s;
}

.verMais:hover,
.verMenos:hover {
    color: var(--rosa);
}

.tituloInfoPet {
    font-weight: 600;
    color: var(--cinza_h3);
}

#pesoIdade,
#especPorte {
    display: flex;
    margin-bottom: 0.5rem;
    width: 100%;
    justify-content: space-between;
}

#pesoIdade div,
#especPorte div {
    width: 30%;
}

#pesoPet::after {
    content: " kg";
}

#idadePet::after {
    content: " anos";
}

#triploInfo div {
    margin-bottom: 0.5rem;
}

.expansaoCard .informPet {
    padding: 0 1rem;
    max-height: none;
}

.informPet {
    width: 100%;
    max-height: 360px;
    overflow: auto;
    box-sizing: border-box;
    scroll-padding-right: 10px;
    scroll-behavior: smooth;
}

/* Estilizando a barra de rolagem */
.informPet::-webkit-scrollbar {
    width: 6px;
    /* Largura da barra de rolagem vertical */
    height: 6px;
    /* Altura da barra de rolagem horizontal */
    margin: 0 3px;
}

/* Estilizando o fundo da barra de rolagem */
.informPet::-webkit-scrollbar-track {
    background: var(--cinza230);
    border-radius: 10px;
}

/* Estilizando a "pegada" da barra de rolagem */
.informPet::-webkit-scrollbar-thumb {
    background: var(--cinza215);
    border-radius: 10px;
}

/* Quando o usuário passa o mouse sobre a barra de rolagem */
.informPet::-webkit-scrollbar-thumb:hover {
    background: var(--cinza158);
}


/* Sexo do pet */
.sexoPet {
    height: 1.8rem;
    width: 1.8rem;
    background-repeat: no-repeat;
    background-size: cover;
}

.femea {
    background-image: url(/public/img/icons/icon_femea.svg);
}

.macho {
    background-image: url(/public/img/icons/icon_macho.svg);
}

/* FAVORITAR / DESFAVORITAR */

.favoritar {
    height: 2rem;
    width: 2rem;
}

.favoritar:hover,
.adotarMiniCard>button:hover {
    transform: scale(105%);
}

.adicionarFav {
    background-image: url(/public/img/icons/adicionar_favorito.svg);
}

.apagarFav {
    background-image: url(/public/img/icons/favorito_adicionado.svg);
    display: none;
}

.cardOng .favoritar {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

/* ----------------------------- parceiro.html ----------------------------- */

#mainParceiro {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#mainParceiro div {
    padding: 1rem;
}

#mainParceiro ol {
    padding-left: 3rem;
}

#mainParceiro p,
ol {
    padding: 0.5rem;
}

#mainParceiro img {
    width: 100%;
    border-radius: 2rem;
    min-width: 275px;
}

#mainParceiro>a {
    display: flex;
    justify-content: center;
    text-decoration: none;
    margin: 1rem 0 3rem 0;
    width: 60%;
    text-align: center;
    font-size: 20px;
}

.campoEspecificar {
    display: none;
    width: 100%;
    height: 100%;
}

#especificar {
    width: 100%;
    height: 7rem !important;
    margin-top: 1rem;
    background-color: var(--cinza245);
    border-radius: 1.5rem;
    border: none;
    resize: none;
    padding: 1rem;
}

/* ----------------------------- configuracoes.html ----------------------------- */

.mainAside {
    display: flex;
    min-height: 60vh;
}

.politicasdoSite {
    display: none;
    flex-direction: column;
    padding-left: 3rem;
    text-align: justify;
    gap: 1rem;
    width: 100%;
}

#listaPoliticas li {
    margin-bottom: 1rem;
}

.abrirOpcoes {
    display: none;
    flex-direction: column;
    align-items: flex-start;
}

.temas {
    font-size: 16px;
    color: var(--cinza34);
    width: 100%;
    padding: 0.4rem 0 0.4rem 0.2rem;
    text-align: left;
}

.temas:hover {
    background-color: var(--cinza215);
}

.bordad {
    border: 1px solid red;
}

.setaOpções {
    gap: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#girarSeta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.asideRow {
    width: 10rem;
    min-width: 10rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mainAside .asideRow {
    gap: 0;
}

.asideRow .linha {
    margin: 0;
}

.alinhando {
    display: flex;
    flex-direction: column;
    margin-left: 0;
}

.titConfig {
    font-size: 16px;
    font-weight: 700;
    color: var(--cinza_h3);
}

.editarPerfil {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.editarPerfil .error-message {
    margin-left: 0;
}

.alterarDadosDiv label {
    display: inline-flex;
    width: 8rem;
}

.botaoSalvarHabilitado {
    background-color: var(--rosa) !important;
    border: none !important;
    cursor: pointer;
}

.alterarDadosDiv input,
.alterarDadosDiv select,
#botaoSalvarAlteracoes {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 0.5rem;
    border: 1px grey solid;
}

#botaoSalvarAlteracoes {
    background-color: grey;
    color: white;
    font-weight: 600;
}

#enderecoUsuarioConfig {
    text-align: left;
}

#enderecoUsuarioConfig,
#botaoSalvarAlteracoes {
    margin-top: 1rem !important;
}

.alterarDadosDiv {
    width: 100%;
    padding: 0.5rem 0;
}

#ladoConfig {
    display: none;
    flex-direction: column;
    gap: 1.2rem;
}

.aviso {
    border: var(--cinza100) 1px solid;
    padding: 1rem;
    border-radius: 10px;
    color: var(--cinza34) !important;
    text-align: center;
}

.altCampos {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.altCampos a {
    background-color: var(--rosa_claro);
    width: fit-content;
    padding: 0.8rem;
    border-radius: 10px;
    color: white;
    font-weight: 500;
}

.buttonConfig {
    width: 100%;
    height: 2.5rem;
    font-size: 16px;
    text-align: left;
    padding-left: 0.5rem;
    transition: 0.2s;
    margin: 0;
    color: var(--cinza46);
}

.buttonConfig:hover {
    background-color: var(--cinza215);
}

.conjuntoOpcoesTema {
    position: relative;
}

#temasSeta {
    display: flex;
    align-items: center;
    position: relative;
}

#setaConfig {
    cursor: pointer;
    transition: all 0.2s;
    width: 0.5rem;
    margin-left: 0.5rem;
    fill: none;
    stroke: var(--cinza46);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


#contaConfigH3,
#politicasSiteH3 {
    cursor: default;
    font-size: 16px;
    font-weight: 700;
    color: var(--cinza_h3);
}

.linhaRow {
    width: 1px;
    background-color: var(--cinza201);
}

.configConta,
#secPetFav {
    padding-left: 3rem;
    width: 50rem;
    display: block;
}

#contaH3 {
    display: none;
}

#usuarioPerfil {
    display: flex;
    margin-top: 1rem;
    gap: 4rem;
    align-items: center;
}

#nomePerfil {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

#fotoUsuario,
#fotoUsuarioconfig {
    height: 10rem;
    width: 10rem;
    background-image: url(/public/img/user_ong/user/cachorro-icon.svg);
    border-radius: 50%;
    background-color: var(--rosa);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}

.fotoDefaultUsuario {
    background-size: 6rem !important;
}

.buttonPerfil {
    font-size: 16px;
    font-weight: 700;
    color: var(--cinza_h3);
    text-align: left;
}

#altFotoUsuario {
    position: relative;
}

#fotoUsuarioconfig {
    background-size: 8rem !important;
}

#altFotoIcon {
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    cursor: pointer;
    position: absolute;
    bottom: 0;
    right: 0;
}

#altFotoIcon svg {
    height: 2.7rem;
    background-color: var(--cinza201);
    padding: 0.3rem;
    border-radius: 50%;
}

.vermelho {
    color: var(--vermelho);
}

.verde {
    color: var(--verde);
}

#emailSenhaTel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem 0;
}

#emailPerfil,
#senhaPerfil,
#telefonePerfil {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.escondido-responsavel {
    display: none !important;
}

#nomePerfil .buttonPerfil,
#emailPerfil .buttonPerfil,
#senhaPerfil .buttonPerfil,
#telefonePerfil .buttonPerfil {
    width: 7.5rem;
}

.before {
    font-weight: 600;
    color: var(--preto_back);
}

.negrito {
    font-weight: bold;
}



/* ----------------------------- login.html ----------------------------- */

#mainLogin {
    background-image: url(/public/img/fotos/back_login.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
    height: calc(100vh - 5rem);
}

#mainLogin>div {
    display: flex;
    justify-content: center;
}

.loginCard {
    display: flex;
    flex-direction: column;
    width: 25%;
    min-width: 18rem;
    background-color: white;
    /* height: 20rem; */
    align-items: center;
    padding: 2rem;
    border-radius: 3rem;
    gap: 1rem;
    box-shadow: 1px 1px 2px var(--cinza158);
    overflow: hidden;
}

.loginCard form {
    display: flex;
    flex-direction: column;
    width: 95%;
    /* gap: 1rem; */
}

.loginCard form>input[type="text"],
.loginCard form>input[type="password"],
.passwordContainer {
    padding: 0.9rem;
    border-radius: 2.6rem;
    border: none;
    background-color: var(--cinza230);
    box-shadow: 1px 1px 1px var(--azul_claro);
    margin-top: 1rem;
    height: 2.5rem;
}

.passwordContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.passwordContainer input[type="password"],
.passwordContainer input[type="text"] {
    border: none;
    width: 90%;
    outline: none;
    background-color: transparent;

}

.passwordContainer input:-webkit-autofill,
.passwordContainer input:-webkit-autofill:focus,
.passwordContainer input:-webkit-autofill:hover,
.passwordContainer input:-webkit-autofill:active {
    transition: background-color 9999s ease-in-out 0s;
    -webkit-text-fill-color: #000 !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
}


.loginCard form>input[type="text"]::-webkit-input-placeholder,
.loginCard form>input[type="password"]::-webkit-input-placeholder,
.passwordContainer input::-webkit-input-placeholder {
    font-weight: 700;
    color: var(--cinza158);
}

#entrarCard {
    display: flex;
}

#cadastroCard {
    display: none;
    padding: 3rem;
}

.botLogin {
    background-color: var(--azul_maisclaro);
    padding: 0.7rem;
    border-radius: 2.6rem;
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: 700;
    width: 80%;
    margin-top: 1rem;
}

.loginCard .botLogin {
    width: 100%;
}

.linkFalso {
    color: var(--azul_opaco);
    font-weight: 700;
    margin-top: 1rem;
}

#erro1,
#erro2 {
    color: var(--vermelho);
    margin-left: 0.5rem;
}

#olho {
    cursor: pointer;
    width: 1.5rem;
}

.eye-icon {
    display: flex;
    align-items: center;
}


/* ----------------------------- cadastroadotante.html cadastroong.html ----------------------------- */

.mainForms {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
}

.fundoBranco>div {
    display: flex;
    justify-content: center;
    width: 100%;
}

.alinharErro {
    display: flex;
    flex-direction: column;
    width: 50%;
    gap: 0.3rem !important;
}

.alinharErro p,
.error-message {
    margin-left: 1rem;
}

#formDocs {
    display: none;
}

.mainForms h2 {
    width: 100%;
    color: var(--cinza_h3);
    margin-top: 1rem;
}

.formCadastro>div {
    width: 100%;
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.formCadastro div fieldset {
    border: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.formCadastro div h2 {
    display: flex;
    justify-content: flex-start;
}

.formCadastro>div>div {
    display: flex;
    gap: 0.3rem;
    width: 100%;
}

.formCadastro div fieldset>div {
    display: flex;
    gap: 1rem;
    width: 100%;
}

form .aviso {
    padding: 1rem;
}

.etapasCad {
    display: flex;
    justify-content: space-between !important;
    flex-direction: row !important;
    width: 100%;
    align-items: center !important;
}

.etapasCad h2 {
    width: fit-content;
}

.bolinhasEtapas {
    display: flex;
    gap: 1rem;
    width: fit-content !important;
    align-items: center;
    justify-content: center;
}

.bolinha {
    height: 1.5rem;
    width: 1.5rem;
    background-color: var(--rosa);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

#cadastroUsuario {
    width: 100%;
}

.inputCadastro {
    padding: 0.9rem 1.5rem;
    display: flex;
    border-radius: 1.5rem;
    border: none;
    color: black;
    background-color: var(--cinza_input);
    width: 100%;
    resize: none;
    font-size: 16px;
    /* align-items: center; */
}

#alinhar {
    align-items: center;
}

.inputCadastro input[type="checkbox"] {
    margin-right: 8px;
    /* Espaço entre o checkbox e o texto */
}

.inputCadastro::placeholder {
    color: var(--cinza_h3);
}

.buttonRosaForm {
    background-color: var(--rosa);
    color: white;
    font-weight: 700;
    font-size: 20px;
    padding: 0.6rem;
    border-radius: 2.4rem;
    width: 50%;
    min-width: 9rem;
}

#formParceiro1 {
    display: flex;
}

#formParceiro2 {
    display: block;
}


#formParceiro2>div {
    display: flex;
    flex-direction: column;
    padding: 0 5%;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

#formParceiro2>div textarea {
    height: 8rem;
}

.inputArquivo {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 1rem;
}

.inputArquivo p {
    margin: 0;
}

.inputArquivo>button,
.container>label {
    font-size: 16px;
    font-weight: 600;
}

.arquivo input {
    border: none;
}

.container {
    display: flex;
}

textarea {
    font-size: 16px;
}

#contarCaracteres {
    display: flex;
    justify-content: end;
    width: 100%;
    margin-right: 1rem;
}

#numPets {
    width: 3rem;
    height: 2rem;
    background-color: transparent;
    border: none;
    border-bottom: 1px var(--cinza_h3) solid;
    text-align: center;
    font-size: 1.1rem;
}

#infoAdocao {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

#infoAdocao>div {
    display: flex;
    gap: 0.3rem;
    flex-direction: column;
    width: 50%;
}

/* #infoAdocao>div>div {
    display: flex;
    gap: 0.3rem;
    align-items: center;
} */

#especificarPet {
    display: none;
}

.uploadButton {
    display: none;
    height: 1.3rem;
    width: 1.3rem;
    min-height: 1.3rem;
    min-width: 1.3rem;
}

.error-message {
    color: red;
    font-size: 0.9em;
    display: none;
    text-align: left;
}

/* ----------------------------- favoritos.html ----------------------------- */

.asideFav {
    width: 5rem;
    min-width: 5rem;
    display: flex;
    flex-direction: column;
}

.favoritado .apagarFav {
    display: flex;
}


#ladoPoliticas {
    display: none;
}

.mainAside .gridOng {
    gap: 1rem;
    padding: 0 1rem;
}

#ongLadoFavoritos {
    display: none;
}

.whiteText {
    color: white !important
}

.whiteText::before {
    color: white;
}

/* ----------------------------- planos.html ----------------------------- */


.mainPlanos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.fundoBrancoplanos {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    background-color: white;
    border-radius: 1rem;
    padding: 30px;
    justify-content: center;
    align-items: center;
    width: 90%;
    min-width: calc(275px + 2rem);
}

.containerplano {
    background-color: #F5F5F5;
    border-radius: 8px;
    padding: 20px;
    width: 300px;
    height: 30rem;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.containerplano:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.03);
}

.precoPlano {
    font-size: 24px;
    font-weight: bold;
    margin: 10px 0;
}

.detalhesPlano1 {
    margin-top: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detalhesPlano2 {
    margin-top: 20px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.listaPlanos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.iconcertinho {
    padding-left: 25px;
    background-image: url('/public/img/icons/certinho.svg');
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 18px;
}

.iconX {
    padding-left: 25px;
    background-image: url('/public/img/icons/icone X.svg');
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 18px;
}

.botaoassinarplano1 {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #e97cb1;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.botaoassinarplano1:hover {
    background-color: #ed5ca2;
}

.botaoassinarplano2 {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #60a8f0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.botaoassinarplano2:hover {
    background-color: #2f81d2;
}

/* ----------------------------- ongPage.html ----------------------------- */

.perfilOng {
    padding: 0;
}

.caminhoBanner {
    position: relative;
}

.caminhoBanner .caminho,
.caminhoBanner .caminho a {
    z-index: 3;
    color: white;
}

.espacoBanner,
.bannerPerfilOng {
    aspect-ratio: 4/1;
}

.espacoBanner {
    width: 100%;
}

.bannerPerfilOng {
    position: absolute;
    top: 0;
    background-image: url(/public/img/user_ong/banners/Banner_misto_rosa_ONG.svg);
    width: 100%;
    z-index: 1;
    object-fit: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.bannerPerfilOng::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4.5rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
    z-index: 2;
}


.perfilOng .adotarSec {
    padding: 0 2rem 2rem 0;
    grid-template-columns: repeat(3, 1fr);
}

.divPetOngPerfil {
    display: grid;
    grid-template-columns: 22rem 1fr;
    gap: 1rem;
    /* espaço entre colunas */
}

.ongPerfilInfo,
.espacoPerfilOng {
    /* margin: 0 2rem; */
    width: 100%;
}

.ongPerfilInfo {
    width: 100%;
    position: relative;
    top: -5rem;
    padding: 0 0 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ongPerfilInfo .fotoCard {
    background-image: url(/public/img/user_ong/user/gato_user_ONG.svg);
    background-size: 80%;
    background-color: #f47193;
    /* position: absolute; */
    height: 12rem;
    width: 12rem;
    z-index: 4;
    /* permite que o after ultrapasse */
    border: solid 5px var(--cinza215);
}


.cardPerfilOng {
    position: relative;
    z-index: 2;
    padding-top: 7rem;
    display: flex;
    width: 100%;
    min-width: 275px;
    flex-direction: column;
    background-color: var(--cinza215);
    padding: 8rem 2rem 2rem 2rem;
    border-radius: 2rem;
    justify-content: center;
    align-items: center;
}

.infoCardOngPerfil {
    width: 100%;
}

.endereco::before,
.petsDisponiveis::before,
.redesOng {
    font-weight: 700;
    color: var(--cinza80);
}

.endereco::before {
    content: "Endereço: ";
}

.petsDisponiveis::before {
    content: "Pets disponíveis: ";
}

.redes {
    display: flex;
    flex-direction: column;
}

.redesOng {
    padding-bottom: 0.5rem;
}

.redes .bttRedes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.redes .bttRedes a {
    display: flex;
    background-color: var(--rosa);
    padding: 0.5rem;
    display: inline-flex;
    align-items: center;
    border-radius: 0.8rem;
    color: white;
    gap: 0.5rem;
    width: fit-content;
    transition: all 0.4s;
}

.redes a:hover {
    transform: scale(105%);
    background-color: var(--rosa_claro);
}

.redes a img {
    height: 1.5rem;
}

.maisSobreOng {
    padding: 0 2rem;
}

.maisSobreOng h2,
.maisSobreOng p {
    padding-bottom: 1rem;
}

.adicionarBttOngAdm {
    display: flex;
    flex-direction: column;
}

.adicionarBttOngAdm .buttonRosa {
    background-color: var(--rosa_texto);
}

.fundoModal {
    height: 100vh;
    width: 100vw;
    position: fixed;
    /* Fixado na tela, independente do scroll */
    z-index: 12;
    top: 0;
    left: 0;
    background-color: var(--cinzaFundoAba);
    display: flex;
    align-items: center;
    justify-content: center;
    display: flex;
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: center;

}

.caixaEscolha {
    width: 30%;
}

.modal {
    position: fixed;
    background-color: white;
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 275px;
    margin: 2rem;
}

.modal form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem;
}

.modal form input[type=button] {
    border: none;
}

.modal form input[type=text] {
    width: 100%;
}

#modalCadOng, #modalCadOngPOngs {
    position: fixed;
}

#modalCadOng>div, #modalCadOngPOngs>div {
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    gap: 1rem;
    text-align: center;
}

#modalCadOng h2, #modalCadOngPOngs h2 {
    margin-bottom: 2rem;
    color: var(--azul_claro);
}

#modalCadOng div a, #modalCadOngPOngs div a {
    font-weight: 700;
    color: var(--rosa);
    font-size: 20px;
    text-decoration: underline;
}

.redireciona {
    display: flex;
    margin-top: 1rem;
    gap: 0.5rem;
    flex-direction: column;
}

.redireciona p {
    color: var(--cinza80);
    font-size: 1rem;
}

.alinharDoisInput {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
}

.alinharDoisInput input {
    width: 20rem;
}

#adicionarFuncionario {
    width: 25%;
}

.modal h3 {
    width: 100%;
    text-align: center;
}

.modal .buttonRosa {
    background-color: var(--rosa_texto);
}

.buttonsAdicionar {
    display: flex;
    justify-content: center;
    padding: 0 1rem;
    gap: 1rem;
    padding-top: 1rem;
    flex-wrap: wrap;
    width: 100%;
}

.buttonsAdicionar button {
    width: 8rem;
    background-color: var(--rosa_texto);
}

#adicionarPet {
    width: 40%;
}

/* #nomeOng {
    text-align: center;
} */

.bttEditarImg {
    position: absolute;
    z-index: 100;
    bottom: 0;
    right: 0;
    background-color: white;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    overflow: hidden;
}

.bannerPerfilOng .bttEditarImg {
    bottom: 1rem;
    right: 1rem;
}

.custom-file-upload {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bttEditarImg svg {
    fill: #5f6368;
    pointer-events: none;
}

.bttEditarImg:hover {
    background-color: #f0f0f0;
}

.h1NomeOng {
    text-align: center;
}

#mensagem {
    height: 10rem;
}

.feedback {
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: space-between;
    top: 7rem;
    right: 2rem;
    z-index: 10000;
    padding: 1.2rem;
    border-radius: 1.5rem;
    font-weight: 700;
    min-width: 15rem;
    max-width: 15rem;
    box-shadow: 3px 3px 3px rgba(100, 100, 100, 0.3);
}

.iconeFeedback {
    border-radius: 50%;
    padding: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.5rem;
    width: 1.5rem;
    background-size: cover;
    min-height: 1.5rem;
    min-width: 1.5rem;
}

.feedbackSucess {
    background-color: var(--fundoVerde);
    border: 3px var(--verdeFeedback) solid;
    color: var(--verdeFeedback);
}

.feedbackSucess .iconeFeedback {
    background-color: var(--contornoVerde);
    background-image: url(/public/img/icons/feedback-sucess.png);
}

.feedbackAlert {
    background-color: var(--azul_fundo);
    border: 3px var(--azul_claro) solid;
    color: var(--azul_claro);
}

.feedbackAlert .iconeFeedback {
    background-color: var(--azul_contorno);
    background-image: url(/public/img/icons/alter_icon.svg);
}

.feedbackError {
    background-color: var(--fundoVermelho);
    border: 3px var(--vermelhoFeedback) solid;
    color: var(--vermelhoFeedback);
}

.feedbackError .iconeFeedback {
    background-color: var(--contornoVermelho);
    background-image: url(/public/img/icons/feedback-error.png);
}

.escondido {
    display: none !important;
}

.no-scroll {
    overflow: hidden !important;
}


/* -------- MODO ESCURO ------------------------------------------------------------------------------------------------------- */

.bodyME {
    background-color: var(--cinza46);
}

.bodyME .azul {
    color: var(--azul_maisclaro);
}

/* Notícias */
.bodyME .container {
    background-color: var(--cinza34);
}

.bodyME .container label {
    background-color: var(--cinza147);
}

.bodyME .lupaPesquisa img {
    background-color: var(--cinza147);
}

.bodyME #search-input {
    background-color: var(--cinza147);
    border: 1px solid black !important;
}

.bodyME #search-input::placeholder {
    color: var(--cinza201);
}

.bodyME .news-item {
    background-color: var(--cinza100) !important;
    border: 1px solid var(--cinza100) !important;
}

.bodyME .news-item a {
    color: var(--azulME1);
}

.bodyME,
.bodyME .news-item p,
.bodyME #search-input,
.bodyME .caminho p a,
.bodyME .news-item,
.bodyME #expandirMenu .tema,
.bodyME #expandirMenu a,
.bodyME .contaPopup p,
.bodyME .contaPopup a,
.bodyME .titConfig,
.bodyME .filtro .botFiltro div button,
.bodyME .botfiltros,
.bodyME .buttonFiltrar,
.bodyME #limparFiltros,
.bodyME .botFiltro,
.bodyME .linkDesc:hover,
.bodyME .tituloInfoPet,
.bodyME .maisInfoPet .tituloInfoPet,
.bodyME .maisInfoPet .informPet .tituloInfoPet,
.bodyME .verMais,
.bodyME .verMenos,
.bodyME .temas,
.bodyME .linkFalso,
.bodyME .inputCadastro::placeholder,
.bodyME .buttonPerfil,
.bodyME .before,
.bodyME .buttonConfig,
.bodyME .inputConfig,
.bodyME .inputConfig::placeholder,
.bodyME .fundoBranco div h2,
.bodyME .mainForms h2,
.bodyME .formCadastro h2,
.bodyME .inputCadastro,
.bodyME .inputArquivo p,
.bodyME #infoAdocao div label,
.bodyME .endereco::before,
.bodyME .petsDisponiveis::before,
.bodyME .redesOng,
.bodyME .h1NomeOng,
.bodyME .aviso {
    color: white !important;
}

.bodyME #news-container {
    background-color: var(--cinza34) !important;
}

.bodyME #news-container .news-title {
    color: var(--azulME2);
}

.bodyME #news-container .news-title:hover {
    color: var(--azulME1);
}

.bodyME .news-item a:hover {
    text-decoration: underline;
    color: var(--azul_maisclaro);
}

/* Header */
.bodyME #expandirMenu {
    background-color: var(--cinza34) !important;
}

.bodyME #expandirMenu .linha {
    background-color: var(--cinza100) !important;
}

.bodyME #expandirMenu #setaInst {
    fill: white !important;
    background-color: black;
}

.bodyME #expandirMenu #setaInst {
    background-color: var(--cinza100) !important;
}

.bodyME .contaPopup {
    background-color: var(--cinza100);
    box-shadow: 3px 3px 5px var(--cinza_h3);
}

.bodyME .contaPopup a:hover {
    color: var(--azul_claro) !important;
}

/* index.html */
.bodyME .cardPerson {
    /* modo escuro do cardPerson */
    background-color: var(--cinza34);
}

/* Institucional */
.bodyME .mainInst .cardPerson {
    background-color: var(--cinza230);
    color: black;
}

.bodyME .sectionInst div {
    background-color: var(--cinza34);
}

/* ONGs */
.bodyME .cardOng {
    box-shadow: black 1px 1px 3px;
}

/* Adote-me */

.bodyME .filtro {
    background-color: var(--cinza147);
}

.bodyME #limparFiltros:hover {
    color: var(--azul_escuro) !important;
}

.bodyME .botFiltro svg path {
    fill: white;
}

.bodyME .botFiltro:hover,
.bodyME h1,
.bodyME #sections h2 {
    color: var(--azul_maisclaro) !important;
}

.bodyME .cardsAnimais {
    background-color: var(--cinza34);
    box-shadow: 1px 1px 1px black;
}

.bodyME .linkDesc {
    transition: all 0.1s;
}

.bodyME .adotarMiniCard .bttcard {
    background-color: var(--cinza34);
}

.bodyME .maisInfoPet {
    background-color: var(--cinza34) !important;
}

.bodyME .maisInfoPet .iconFechar {
    fill: white;
}

.bodyME .femea {
    background-image: url(/public/img/icons/icon_femea_white.svg);
}

.bodyME .macho {
    background-image: url(/public/img/icons/icon_macho_white.svg);
}

/* Configurações */
.bodyME .abrirOpcoes {
    background-color: var(--cinza46) !important;
    box-shadow: 3px 3px 5px var(--cinza34) !important;
}

.bodyME .temas:hover {
    background-color: var(--cinza100) !important;
}

.bodyME .buttonConfig:hover {
    background-color: var(--cinza100) !important;
}

.bodyME .buttonConfig #setaConfig {
    stroke: white;
}

.bodyME .inputConfig {
    background-color: var(--cinza147);
}

.bodyME .linhaRow,
.bodyME .linha {
    background-color: var(--cinza100);
}

/* Login */
.bodyME .loginCard {
    background-color: var(--cinza34);
    box-shadow: 1px 1px 2px black;
}

/* Cadastros */
.bodyME .fundoBranco {
    background-color: var(--cinza34);
}

.bodyME .inputCadastro {
    background-color: var(--cinza147);
}

.bodyME .inputCadastro option {
    color: var(--cinza215);
}

.bodyME.inputCadastro::placeholder {
    color: var(--cinza215);
}

/* Página de Perfil das ONGs */

.bodyME .ongPerfilInfo .fotoCard {
    border: solid 5px var(--cinza100);
}

.bodyME .cardPerfilOng {
    background-color: var(--cinza100);
}

.bodyME .ongPerfilInfo .linha {
    background-color: var(--cinza80);
}

.bodyME .modal {
    background-color: var(--cinza80);
}

.bodyME .fechar-modal svg,
.bodyME .uploadButton svg {
    fill: white;
}

.bodyME .bttEstatisticas {
    color: white;
    background-color: var(--cinza100);
}

.bodyME .bttEstatisticas svg {
    fill: white;
}

.bodyME .bttEstatisticas:hover {
    background-color: var(--cinza147);
}

@media screen and (max-width: 1650px) {
    .nomIconAdotar h2 {
        font-size: 18px;
    }
}

@media screen and (max-width: 1550px) {
    .adotarSec {
        grid-template-columns: repeat(3, 1fr);
    }
}


@media screen and (max-width: 1340px) {


    .nomIconAdotar h2 {
        font-size: 18px;
    }

    .perfilOng .adotarSec {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1220px) {
    .especial1 {
        margin-top: 7rem;
    }
}

@media screen and (max-width: 1250px) {

    .gridOng {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        border-radius: 2rem;
        width: 100%;
    }

    .adotarSec {
        grid-template-columns: repeat(2, 1fr);
    }

    #adicionarPet {
        width: 70%;
    }


}

@media screen and (max-width: 1050px) {


    .buttonFiltrar {
        display: flex;
    }

    .filtro {
        display: none;
    }

    .filtro {
        width: 100%;
        border-radius: 0;
        padding: 2rem 2rem 10rem 2rem;
        min-height: 100vh;
        position: fixed;
        z-index: 100;
        flex-direction: column;
        margin: 0;
        top: 0;
        left: 0;
        overflow-y: auto;
    }

    .botFiltro h3 {
        font-size: 28px;
        font-weight: 700;
        align-items: center;
        display: flex;
        color: var(--azul_claro);
    }

    #fecharFiltros {
        display: flex;
        height: 2rem;
        width: 2rem;
        fill: var(--cinza158);
    }

    .botFiltro>div {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2rem;
        width: 30%;
    }


    .mainAdotar {
        flex-direction: column;
    }

    .fotoOng {
        width: 70%;
    }

    .perfilOng .adotarSec {
        grid-template-columns: repeat(1, 1fr);
    }


    .alinharDoisInput input {
        width: 100% !important;
    }

}

/* responsividade em dispositivos até 950px de largura  */
@media screen and (max-width: 950px) {

    .imglinksHeader {
        display: none;
    }

    #hamburguer {
        display: flex;
    }

    .btnsNav {
        gap: 1rem;
    }

    .linksNav {
        gap: 1rem;
    }

    nav {
        gap: 2rem;
    }

    h1 {
        font-size: calc(32px - 10%);
    }

    h2 {
        font-size: calc(26px - 10%);
    }

    #barra {
        display: none;
    }

    .asideInst {
        display: none;
    }

    #sections {
        width: 100%;
    }


    /* p, li{
        font-size: 18px;
    } */

    #mainParceiro p {
        font-size: 18px;
    }

    .gridOng {
        grid-template-columns: repeat(2, 1fr);
    }

    .linksFooter {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }

    .divFooter {
        justify-content: center;
    }
}


@media screen and (max-width: 914px) {
    .especial2 {
        margin-top: 7rem;
    }
}

@media screen and (max-width:850px) {
    .divPetOngPerfil {
        display: flex;
        flex-direction: column;
    }

    .perfilOng .adotarSec {
        padding: 0 2rem 2rem 2rem;
    }

    .ongPerfilInfo {
        padding: 0 2rem 0 2rem;
    }

    .bannerPerfilOng .bttEditarImg {
        right: 1rem;
        bottom: 2rem;
    }
}

/* responsividade em dispositivos até 800px de largura  */
@media screen and (max-width: 800px) {

    .accessibility-bar {
        top: 30vh;
    }

    .accessibility-icon {
        top: 30vh;
    }

    .linksNav {
        display: none;
    }

    .imglinksHeader {
        display: none;
    }

    #hamburguer {
        display: flex;
    }

    .manual_nav {
        margin-top: -35px;
    }


    .nomIconAdotar h2 {
        font-size: calc(20px - 10%);
    }

    .mainAside {
        flex-direction: column;
    }

    .configConta {
        padding-left: 0;
        width: 100%;
        padding-top: 2rem;
    }

    .asideRow,
    .asideFav div {
        width: 100%;
        display: flex;
        gap: 2rem;
        flex-direction: row;
    }

    #contaConfig {
        display: none;
    }

    #contaConfigH3,
    #politicasSite {
        display: none;
    }


    #contaH3 {
        display: flex;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        color: var(--cinza_h3);
    }

    .linhaRow {
        width: 100%;
        height: 1px;
        margin-bottom: 1rem;
    }

    .asideRow .linha {
        display: none;
    }

    .mainAside .asideRow {
        gap: 0.5rem;
        justify-content: center;
    }

    .buttonConfig {
        text-align: center;
        padding: 0 0.5rem;
        width: auto;
    }

    .abrirOpcoes {
        box-shadow: 3px 3px 5px var(--cinza158);
        position: absolute;
        top: 3rem;
        right: 0.5rem;
        width: 10rem;
        background-color: rgb(236, 236, 236);
    }

    .mainAside .gridOng {
        padding: 0;
    }

    #usuarioPerfil {
        flex-direction: column;
        margin-top: 2rem;
        gap: 3rem;
    }

    .titConfig {
        text-align: center;
    }

    .politicasdoSite {
        padding-left: 0;
        padding-top: 2rem;
    }

    .uploadButton {
        display: flex;
    }

    .arquivoButton {
        display: none;
    }

    .botaoVoltarTopo {
        height: 3rem;
        width: 3rem;
    }


    .news-item {
        flex-direction: column;
    }

    .mainAside .adotarSec {
        padding: 0;
    }

    .fotoOng {
        width: 100%;
    }

    .container label {
        display: none;
    }

    .fundoBrancoplanos {
        flex-direction: column;
    }
}

/* responsividade em dispositivos até 650px de largura  */
@media screen and (max-width: 650px) {
    .linksNav {
        display: none;
    }

    .imglinksHeader {
        display: none;
    }

    #hamburguer {
        display: flex;
    }

    .btnsNav a,
    button {
        gap: 1rem;
        font-size: 12px;
    }

    #temasSeta {
        gap: 0;
    }

    .manual_nav {
        margin-top: -30px;
    }

    .mainIndex {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3rem;
    }

    .quadro {
        width: 25rem;
        align-items: center;
        padding: 2rem 0;
    }

    h1 {
        font-size: calc(32px - 20%);
    }

    h2 {
        font-size: calc(26px - 15%);
    }

    p,
    li {
        font-size: 16px;
    }

    #mainParceiro p {
        font-size: 16px;
    }

    .mainOng {
        padding: 0 5%;
    }

    .gridOng {
        grid-template-columns: repeat(1, 1fr);
    }

    #adicionarFav {
        left: 85%;
    }

    .descOng h2 {
        font-size: calc(20px - 20%);
    }

    .descOng p {
        font-size: calc(16px - 10%);
    }

    .adotarSec {
        gap: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1rem;
        align-items: flex-start;
    }

    .buttonFiltrar {
        padding: 0 10% 1rem 10%;
    }

    .formCadastro div>div {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .fundoBranco {
        align-items: center;
    }

    .formCadastro div fieldset div,
    .formCadastro div div {
        flex-direction: column;
        display: flex;
    }

    .alinharErro {
        width: 100%;
    }


    .alinharDoisInput {
        flex-direction: column;
    }

    .etapasCad {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .bolinhasEtapas {
        gap: 0.5rem !important;
        flex-direction: row !important;
    }

    .fundoBranco,
    .blocosCad {
        width: 100% !important;
    }

    #formOng {
        width: 100%;
    }
}

@media screen and (max-width: 619px) {
    .especial3 {
        margin-top: 7rem;
    }

    .maincem .fundoBranco {
        width: 100% !important;
    }


    .espacoBanner,
    .bannerPerfilOng {
        aspect-ratio: 7/3;
    }

}

@media screen and (max-width: 550px) {
    .linksFooter .logobranca {
        height: 6rem;
    }

    .search-bar {
        width: 100%;
    }

    /* Estilo para o container de notícias */
    #news-container {
        width: 100%;
    }

}

/* responsividade em dispositivos até 500px de largura  */
@media screen and (max-width: 500px) {

    main {
        padding: 0 1rem 2rem 1rem;
    }

    .mainInst .secPerson {
        width: calc(100% + 3rem);
    }

    .mainInst .secPerson .cardsPerson {
        position: relative;
        left: 0.5rem;
    }

    .caminho {
        padding: 0 1rem;
    }

    .linksNav {
        display: none;
    }

    .imglinksHeader {
        display: none;
    }

    #hamburguer {
        display: flex;
    }

    .btnsNav {
        display: none;
    }

    .manual_nav {
        margin-top: -20px;
    }


    .manual_btn {
        padding: 4px;
    }

    .sectionInst img {
        border-radius: 1.5rem;
    }

    #nomePerfil {
        display: block;
    }

    #emailPerfil,
    #senhaPerfil,
    #telefonePerfil {
        display: block;
    }

    #email,
    #telefone,
    #senha,
    #nomeUsuario {
        margin-bottom: 0.6rem;
        overflow: hidden;
        width: 100%;
    }

    #adicionarPet {
        width: 90%;
    }

    .asideRow {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 0.5rem !important;
        width: 100%;
    }

    .asideRow button {
        width: 100%;
    }

    .conjuntoOpcoesTema {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #temasSeta {
        justify-content: center;
    }

    .abrirOpcoes {
        position: absolute;
        top: 3rem;
        right: 0 !important;
    }

}

@media screen and (max-width: 450px) {

    h1 {
        font-size: calc(32px - 30%);
    }


    #adicionarFav {
        left: 80%;
    }

    #usuarioPerfil {
        flex-direction: column;
        margin-top: 2rem;
        gap: 2rem;
    }

    .quadro {
        width: 20rem;
        height: 20rem;
    }

    .botaoVoltarTopo {
        right: 0.5rem;
        bottom: 0.2rem;
    }

    .mainAside .asideRow {
        gap: 1rem;
    }

    .linksFooter .logobranca {
        height: 4rem;
    }

    .bolinhasEtapas {
        gap: 0.2rem !important;
    }
}

@media screen and (max-width: 375px) {

    .search-bar input::placeholder {
        color: transparent;
    }

    .quadro {
        width: 15rem;
        height: 24rem;
    }

    .mainAside .asideRow {
        gap: 0;
    }

}

@media screen and (max-width: 330px) {

    #adicionarFav {
        left: 75%;
    }

    h1 {
        font-size: calc(32px - 40%);
    }

}

/* responsividade em dispositivos até 400px de largura  */
@media screen and (max-width: 400px) {
    .linksNav {
        display: none;
    }

    .imglinksHeader {
        display: none;
    }

    #hamburguer {
        display: flex;
    }

    .btnsNav {
        display: none;
    }

    .linksFooter {
        flex-wrap: wrap;
    }

    .ongPerfilInfo {
        top: -2rem;
    }

    .perfilOng .adotarSec {
        padding: 0 1rem 2rem 1rem;
    }
}