/*

Theme Name: Varela & Gressler;

Author: Marlei Grolli;

Version: 1.0.0;

Tags: uma coluna , blog, 
/************** GENERAL *****************/

/* Variáveis de Cores */
:root {
    --primary-color: #394665; /* Cor principal para títulos e textos */
    --secondary-color: #B89B5E; /* Cor de destaque/ação */
    --dark-blue: #053a5c; /* Azul escuro */
    --light-grey: #f5f5f5; /* Cinza claro de fundo */
    --medium-grey: #666666; /* Cinza médio para textos */
    --border-color: #DFDFDF; /* Cor da borda */
    --white: #ffffff;
    --black: #000;
    --light-brown: #D3B687;
    --shadow-color: rgba(184,184,184,0.2);
    --shadow-color-hover: rgba(184,184,184,0.19);
    --link-hover-color: #717171;
    --footer-border-color: #5f3c20;
    --text-color-light: #f2f2f2;
    --light-background-grey: #faf6f3;
    --lighter-grey: #EDEDED;
    --text-color: #414141;
    --news-border-color: #9c9c9c;
    --comments-border-color: #ccc;
     --base-font-size: 16px; /* Tamanho base para telas pequenas */


}

/* Variáveis de Fontes */
:root {
    --font-display: "DM Serif Display", Serif;
    --font-body: "Inter", sans-serif;
    --font-montserrat: "Montserrat", sans-serif;
}

@font-face {
    font-family: var(--font-display);
    src: url(./fonts/dm-serif-display-v16-latin-regular.woff2) format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: var(--font-body);
    src: url(./fonts/inter-v19-latin-regular.woff2) format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: var(--font-montserrat);
    src: url(./fonts/montserrat-v30-latin-regular.woff2) format('woff2'); 
    font-weight: 100 900;
    font-display: swap;
}

/* Tipografia */

/* Definição dos tamanhos de fonte relativos ao tamanho base */
h1 { font-size: calc(var(--base-font-size) * 2.5); } 
h2 { font-size: calc(var(--base-font-size) * 2.0); }  
h3 { font-size: calc(var(--base-font-size) * 1.75); } 
h4 { font-size: calc(var(--base-font-size) * 1.5); }  
h5 { font-size: calc(var(--base-font-size) * 1.25); } 
h6 { font-size: calc(var(--base-font-size) * 1); }  
p  { font-size: calc(var(--base-font-size) * 1); }   

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--primary-color);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 20px;
  margin-top: 20px;
  text-align: center;
}
p{
  margin-top: 20px;
  color: var(--text-color);
  line-height: 1.6;
  font-family: var(--font-body);
}
li{
  font-size: var(--base-font-size);
}

html {
    scroll-behavior: smooth;
    margin-top: 0 !important;
    font-size: 16px;
}

body {
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    font-size: 16px;
}

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: var(--white);
    z-index: 99999;
}

.logo {
    margin-left: 5%;
}

section {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}



/* Slideshow container */
.slideshow-container {
    max-width: 100%;
    position: relative;
    margin: auto;
    top: 85px;
    margin-bottom: 100px;
}

.slideshow-container img {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Hide the images by default */
.mySlides {
    display: none;
    margin-left: auto;
    margin-right: auto;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: var(--white);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

#next-prev-topo .next {
    top: 25%;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

#next-prev-topo .prev {
    top: 25%;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: var(--secondary-color);
}

/* Caption text */
.text {
    color: var(--text-color-light);
    font-size: 2.25em;
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    left: 5%;
    max-width: 40%;
    text-align: center;
}

.text-menor {
    font-size: 2.5em;
    color: var(--text-color-light);
    position: absolute;
    top: 50%;
    transform: translateY(-65%);
    left: 5%;
    max-width: 40%;
    text-align: center;
}

/* Button */
.mySlides button {
    background-color: var(--secondary-color);
    color: var(--white);
    border-radius: 5px;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    border: none;
    margin-top: 20px;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: var(--bbb); /* Defina esta variável se for uma cor específica */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.ativa,
.dot:hover {
    background-color: var(--dark-grey);
}

/* Fading animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

.desktop {
    display: none;
}

/* topo */
.topo {
    background-image: url(./assets/images/mobile-topo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 950px;
    display: none; /* Inicia oculto e é exibido via media query */
}

.topo-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 5%;
    top: 0;
}

.topo h1 {
    color: var(--white);
    font-weight: 400;
    font-size: 40px;
    line-height: 53.3px;
}

.topo h1 span {
    font-size: 30px;
}

.topo button {
    background-color: var(--secondary-color);
    padding: 15px;
    border: none;
    border-radius: 5px;
    color: var(--white);
    width: 250px;
    margin-left: auto;
    margin-right: auto;
}

/* Menu */
.desktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 5%;
}

.menu-principal-container ul li {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 20px;
    font-weight: 300;
    margin-right: 10px;
}

.menu-principal-container ul li a {
    text-decoration: none;
    color: var(--primary-color);
}

.menu-principal-container ul li a:hover {
    color: var(--secondary-color);
}

.menu-principal-container ul li:active {
    color: var(--secondary-color);
}

/* menu mobile */
.mobile {
    display: none;
}

.menu-icones {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.menu-mobile-container ul li {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
}

.menu-mobile-container ul {
    overflow: hidden;
    position: relative;
    background-color: var(--light-grey);
    text-align: right;
    padding-bottom: 10px;
}

.icons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-right: 15px;
}

.mobile .menu-icone img {
    height: 40px;
}

.menu-mobile-container li {
    line-height: 2;
    margin-right: 20px;
}

.menu-mobile-container a {
    text-decoration: none;
    color: var(--primary-color);
}

/* When the 'aberto' class is added, show the menu */
.menu-mobile-container.aberto {
    display: block;
    animation: slideDown 0.3s ease-in-out;
}

/* Example animation for sliding down the menu */
@keyframes slideDown {
    from {
        transform: translateY(-50%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* apresentação */
.apresentacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}

.apresentacao h1,
.apresentacao h2 {
    text-align: center;
}

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

.content-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

.tablet {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
}

/* apresentação*/

.apresentacao{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 100%;
}
.apresentacao h1{
    display: none;;
}

.centro{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.content-row{
    display: flex;
    flex-direction: row;
   justify-content: center;
   gap: 30px;
}

.tablet{
    display: flex;
    flex-direction: row;
    align-items: center;
   max-width: 100%;
   
}

.porque{
    max-width: 100%;
   display: flex;
   justify-content: center;
   margin-top: 50px;
    
    
}

.quadro{
    display: flex;
    flex-direction: row;
    border: 4px solid #b69d74;
    padding: 20px;
    align-items: center;
    
}
.quadro-text{
    display: inline-block;
    margin-left: -15px;
    background-color:white;
    
}

.quadro img{
    color: #374468;
    height: 69px;
    padding: 10px;
   
}

.quadro-text h2{
    line-height: 20px;
    font-weight: 600;
    font-size: 24px;
}
.quadro-text p{
   font-family: "inter", sans-serif;
   font-size: 18px;
   line-height: 10px;
   font-weight: 400;
  
}

.numeros{
    display: flex;
    flex-direction: row;
    gap: 30px;
   margin: 50px 0;
}

.numeros h3{
    font-size: 32px;
    line-height: 0;
    text-align: center;
    font-weight: 600;
}

.numeros h4{
    font-family: "Inter",sans-serif;
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 01.2;
    text-align: center;
}


/* o que */
.traco {
    padding-left: 20px;
    padding-right: 20px;
    border-right: 2px solid var(--light-brown);
    border-left: 2px solid var(--b09c78); /* Defina esta variável se for uma cor específica */
}

.oque {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-image: url(./assets/icons/balanca.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.intro {
    font-family: var(--font-body);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    line-height: 16px;
    color: var(--light-brown);
    letter-spacing: 0.1em; /* Usar 'em' ou 'rem' para letter-spacing */
}

.traco-embaixo {
    background-image: linear-gradient(to right, var(--white), var(--light-brown), var(--white));
    height: 2px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.accordion-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.accordion-col {
    width: 50%;
}

.accordion-r {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.accordion-r h2 {
    margin: 0;
    line-height: 1.2;
    margin-left: 10px;
    margin-right: 10px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
}

.accordion-r p {
    margin: 0;
    text-align: center;
    font-size: 12px;
}

.accordion-margin {
    margin-left: 20%;
    margin-right: 20%;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    background-color: var(--white);
    color: var(--accordion-text-color); /* Defina esta variável se for uma cor específica */
    border: 1px solid var(--border-color);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    transition: 0.4s;
    margin-bottom: 10px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
    border-color: var(--comments-border-color);
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    padding: 0 18px;
    background-color: var(--lighter-grey);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel p {
    font-size: 15.61px;
    line-height: 26.34px;
    color: var(--medium-grey);
}

/* add icons */
.accordion-r:after {
    content: url(./assets/icons/arrow_right_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg);
    color: var(--arrow-color); /* Defina esta variável se for uma cor específica */
    float: right;
    margin-left: 10px;
}

.active > .accordion-r:after {
    content: url(./assets/icons/arrow_drop_down_24dp_5F6368_FILL0_wght400_GRAD0_opsz24.svg);
    float: right;
}

/* historia */
.historia {
    padding-top: 5%;
}

.historia .intro {
    text-align: left;
    margin-top: 50px;
}

.historia h1 {
    text-align: left;
}


.historia img {
    display: flex;
    max-width: 50%;
    height: auto;
}

.traco-embaixo2 {
    background-image: linear-gradient(to right, var(--light-brown), var(--white));
    height: 2px;
    width: 150px;
}

.historia .row {
    display: flex;
    align-items: center;
    background-color: var(--light-grey);
}

.historia-text {
    margin-left: 40px;
    margin-right: 10%;
}

/* equipe */
.equipe {
    display: flex;
}

.quadro-azul {
    margin-top: 0;
    background-color: var(--dark-blue);
    width: 100%;
    height: auto;
}

.quadro-azul .row {
    margin-bottom: -350px;
}

.intro {
    color: var(--secondary-color);
}

.branco {
    color: var(--white);
}

.traco-embaixo1 {
    background-image: linear-gradient(to right, var(--dark-blue), var(--light-brown), var(--dark-blue));
    height: 2px;
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.equipe-intro {
    margin-top: 5%;
}

.equipe .row {
    justify-content: center;
    gap: 20px;
    margin-left: 15%;
    margin-right: 15%;
    flex-direction: row;
    display: flex;
}

.equipe .col {
    background-color: var(--light-grey);
    width: 33%;
}

.equipe img {
    object-fit: contain;
    width: 100%;
}

.equipe h2 {
    margin-top: 6%;
    margin-left: 6%;
    margin-bottom: 0;
    font-size: 32px;
    font-weight: 400;
    color: var(--medium-grey);
}

.equipe h3 {
    margin-bottom: 0;
    margin-top: 0;
    margin-left: 6%;
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--medium-grey);
}

.equipe h4 {
    margin-top: 0;
    margin-left: 6%;
    font-family: var(--font-body);
    font-weight: 400;
    text-transform: uppercase;
    font-size: 12px;
    color: var(--medium-grey);
}

hr {
    border-top: 1px solid var(--d9d9d9); /* Defina esta variável se for uma cor específica */
    width: 90%;
}

.equipe p {
    margin: 6%;
    
   font-size: 14px;
    font-family: var(--font-body);
    color: var(--medium-grey);
}

.equipe p span {
    font-style: italic;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    color: var(--dark-blue-text-link); /* Defina esta variável se for uma cor específica */
}

.instagram {
    margin-top: 400px;
}

/* News */
/* =Blog-Navigation - Pagination */
/*--- Paginacao numerada --- */
.home .news {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 20px;
    
    margin-left: 10%;
    margin-right: 10%;
}

.news article {
    display: flex;
    flex-direction: column;
    width: 33%;
    margin-bottom: 5%;
}

.posts-show {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: 1px solid var(--news-border-color);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
}

.home .news .format-image h2,
.home .news .format-video h2,
.home .news .format-standard h2 {
    background: transparent;
    display: inline-block;
    text-align: left;
    margin-left: 10px;
}

.home .news .meta-info p {
    font-weight: bold;
    margin-bottom: 0;
}

.home .news span,
.news span a {
    color: var(--news-border-color);
    font-weight: normal;
    margin: 0 2px 0 0;
}

article button {
    border: none;
    color: var(--primary-color);
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 50px;
}

article button:hover {
    color: var(--white);
    background-color: var(--primary-color);
}

.format-video .thumbnail img {
    max-width: 100%;
    object-fit: contain;
}

.format-image .wp-post-image img {
    max-width: 33%;
    object-fit: contain;
}

.format-standard .thumbnail img {
    width: 100%;
    object-fit: contain;
    height: auto;
}

.pagination {
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 50px auto;
    position: relative;
}

.pagination .page-numbers {
    padding: 5px 10px;
    background: var(--dark-blue);
    color: var(--white);
    text-decoration: none;
}

.pagination .page-numbers:hover {
    background: var(--link-hover-color);
}

.pagination .current {
    background: var(--dark-grey);
}

/* conteúdo da página single do blog */
.container {
    margin-left: 5%;
    margin-right: 5%;
}

/* Rodape */
.quadro-cinza {
    height: 50px;
    background-color: var(--light-background-grey);
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

footer {
    background: url(./assets/images/rodape.jpg);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.rodape {
    background-color: var(--light-background-grey);
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}

.rodape h1 {
    text-align: center;
    line-height: 1;
}

.rodape h2 {
    color: var(--dark-blue);
    text-align: center;
}

/* formulario de contato */
.contact-form {
    padding: 5%;
}

.form-row {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: left;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    width: 100%;
    border: none;
    background-color: var(--white);
    line-height: 3.0;
    box-shadow: 0 5px 8px 0 var(--shadow-color), 0 6px 8px 0 var(--shadow-color-hover);
}

.wpcf7 textarea {
    line-height: 1.2;
    padding: 10px;
}

input::placeholder {
    margin-left: 20px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
    cursor: pointer;
    padding-left: 10px;
}

.wpcf7 input[type="submit"] {
    background: var(--secondary-color);
    border: 0;
    color: var(--white);
    text-transform: uppercase;
    padding: 15px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    border-radius: 5%;
    box-shadow: 0 8px 16px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-color-hover);
}

.wpcf7-validation-errors {
    color: var(--white);
}

.rodape-info {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
}

.rodape-info h1 {
    color: var(--white);
    font-size: 24px;
    line-height: 36px;
}
#logo-rodape{
    height: 200px;
    width: auto;
}

.rodape-info img {
    max-width: 100%;
    height: auto;
    display: flex;
}

.rodape-info ul li {
    color: var(--light-brown);
}

.rodape-info p {
    color: var(--white);
    margin-left: 10px;
    font-size: 14px;
    line-height: 1.2;
    margin: 2.5px;
    margin-left: 10px;
}

.escritorio .row {
    display: flex;
    flex-direction: row;
    margin: 0;
    align-items: center;
}

.escritorio .row img {
    margin: 7.59px;
}

.rodape-info ul li {
    list-style-image: url(./assets/icons/right-arrow.svg);
    margin: 8px;
}

/* Rodape social */
.rodape-social {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    color: var(--light-brown);
    border-top: 1px solid var(--footer-border-color);
    margin-left: 30px;
    margin-right: 90px;
}

.rodape-social p{
    color: var(--light-brown);
}

.mapa {
    width: 300px;
    height: auto;
}

iframe {
    max-width: 300px;
    height: 200px;
}

.menu-footer-container a {
    color: var(--light-brown);
}

/* Blog */
.blog-page {
    display: flex;
    flex-direction: row;
    margin-top: 10%;
    justify-content: center;
    padding: 5%;
    padding-bottom: 0;
    padding-top: 0;
}

.blog-news {
    display: flex;
    flex-direction: column;
    margin-right: 50px;
    justify-content: center;
}

.blog-news article a {
    text-decoration: none;
}

.blog-news article img {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
}

.blog .meta-info p {
    line-height: 1em;
    font-weight: bold;
}

.blog .meta-info p>a {
    color: var(--meta-info-link-color); /* Defina esta variável se for uma cor específica */
    font-weight: normal;
    text-decoration: none;
}

aside {
    background: var(--light-background-grey);
    padding: 35px;
    margin: 0 0 30px;
    max-width: 25%;
    padding-top: 15%;
}

article hr {
    width: 90%;
}

/* comments area */
.comments-area {
    display: flex;
    flex-direction: column;
}

.comments-area label[for="comment"] {
    display: none;
}

.comments-area .submit {
    background: var(--secondary-color);
    border: 0;
    color: var(--white);
    text-transform: uppercase;
    padding: 15px;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    border-radius: 5%;
    box-shadow: 0 8px 16px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-color-hover);
}

.comments-area input[type="text"],
.comments-area input[type="email"] {
    cursor: pointer;
    padding-left: 10px;
    padding: 10px;
}

.accord-content {
    display: flex;
    flex-direction: row;
    margin-left: 30px;
    margin-right: 30px;
}

.accord-content article .meta-info {
    display: none;
}

.accord-content article hr {
    display: none;
}

.accord-content article a {
    text-decoration: none;
}

.accord-content article h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
}

#slideshow-equipe-mobile {
    display: none;
}

@media (max-width: 1200px) {
    .historia-text {
        margin-right: 5%;
        margin-top: 5%;
    }

    .accordion-margin {
        margin-left: 10%;
        margin-right: 10%;
    }

    .news {
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media screen and (max-width: 1024px) {
    .equipe .row {
        margin-left: 5%;
        margin-right: 5%;
    }

    .rodape-info {
        flex-direction: column;
        align-items: center;
    }

    .topo {
        display: flex;
    }

    #slideshow-topo {
        display: none;
    }
}

@media (max-width: 768px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 45px;
    }

    .menu-mobile-container {
        display: none;
    }

    #slideshow-equipe {
        display: none;
    }

    #slideshow-equipe-mobile {
        display: block;
    }

    #next-prev-topo {
        display: none;
    }

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

    .accordion-row {
        flex-wrap: wrap;
        justify-content: center;
    }

    .accordion-col {
        width: 100%;
    }

    .news article {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .equipe .row {
        flex-direction: column;
    }

    .equipe .col {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    h1 {
        font-size: 40px;
    }

    .accord-content article h2 {
        font-size: 40px;
    }

    .content-row {
        flex-direction: column;
        margin-left: 20px;
        margin-right: auto;
    }

    .tablet {
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .quadro-text {
        margin-right: 20px;
    }

    .numeros {
        flex-direction: column;
    }

    .traco {
        border: none;
    }

    .tela-menor::after {
        content: "";
        border-bottom: 2px solid var(--light-brown);
        width: 150px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        padding-bottom: 10px;
    }

    .historia .row {
        flex-direction: column;
        flex-flow: column-reverse;
    }

    .historia img {
        max-width: 100%;
    }

    .historia-text h1,
    .historia-text .intro {
        text-align: center;
    }

    .traco-embaixo2 {
        margin-left: auto;
        margin-right: auto;
        background-image: linear-gradient(to right, var(--white), var(--light-brown), var(--white));
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 32px;
        line-height: 1.25;
        margin-left: 5%;
        margin-right: 5%;
    }

    .home .news {
        margin-left: 5%;
        margin-right: 5%;
    }

    .accord-content article h2 {
        font-size: 32px;
        line-height: 1.25;
    }

    .equipe .branco {
        font-size: 32px;
        line-height: 1.25;
    }

    .rodape {
        max-width: 90%;
        margin-right: auto;
        margin-left: auto;
    }

    .accord-content {
        margin-left: 0;
        margin-right: 0;
        align-items: center;
    }

    .accordion-article {
        margin-left: 5%;
        margin-right: 5%;
    }

    .quadro-cinza {
        width: 90%;
    }

    .wpcf7 p {
        flex-direction: column;
    }

    .wpcf7 form {
        margin-right: 5%;
    }

    .blog-page {
        padding-top: 50px;
        align-items: center;
    }

    .blog-page .blog-news article {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .blog-page .blog-news article img {
        width: 100%;
    }

    #primary {
        padding-top: 80px;
    }

    #comment {
        max-width: 100%;
        padding: 5%;
    }

    .comment-form {
        max-width: 100%;
        padding: 5%;
    }
}

@media (max-width: 320px) {
    h1 {
        font-size: 32px;
    }

    .topo-content h1 {
        font-size: 26px;
        margin-top: 30px;
    }

    .quadro {
        padding: 30px;
    }

    .quadro-text p {
        line-height: 1;
        margin-top: 0;
        margin-bottom: 5px;
    }

    .quadro-text h3 {
        line-height: 1;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .accord-content article h2 {
        font-size: 32px;
        line-height: 1.25;
    }

    .equipe .branco {
        font-size: 32px;
        line-height: 1.25;
    }

    .accordion-margin {
        margin-left: 5%;
        margin-right: 5%;
    }

    .accordion-r {
        gap: 30px;
    }
}