/* ===========================
   Garage21 LP — CSS Base
   =========================== */

/* ---------- Tokens / Design System ---------- */
:root{
  /* Cores principais */
  --blue:   #0f2266;
  --yellow: #ffda23;
  --white:  #ffffff;

  /* Cores de apoio */
  --ink:    #0b122c;
  --muted:  #6b7086;
  --gray-0: #fafbf6;
  --gray-1: #f2f4fb;
  --gray-2: #e6e9f5;
  --line:   #e6e9f5;

  /* Tipografia responsiva */
  --step--1: clamp(.88rem, .84rem + .2vw, .98rem);
  --step-0:  clamp(1.00rem, .95rem + .30vw, 1.125rem);
  --step-1:  clamp(1.20rem, 1.08rem + .60vw, 1.45rem);
  --step-2:  clamp(1.50rem, 1.30rem + 1.00vw, 1.90rem);
  --step-3:  clamp(1.90rem, 1.60rem + 1.60vw, 2.60rem);

  /* Layout */
  --container: 1120px;            /* largura máx. do conteúdo */
  --radius: 16px;

  /* Espaçamento (8-based) */
  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;

  --ink-strong: #121733;   /* quase preto, bom em fundo claro */
  --ink-body:   #2a3151;
  --on-blue-strong: #f2f5ff; /* quase branco, bom em fundo azul */
  --on-blue-body:   #dfe6ff;
}

/* ---------- Reset leve ---------- */
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  color: var(--ink);
  background: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--blue); text-decoration: none; }
a:hover{ text-decoration: underline; }
button{ font: inherit; }

/* ---------- Acessibilidade ---------- */
.skiplink{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skiplink:focus{
  position:static; width:auto; height:auto; padding: var(--sp-2);
  background:#000; color:#fff;
}
:focus-visible{ outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}


/* ---------- Tipografia ---------- */
h1,h2,h3,h4{ margin: 0 0 var(--sp-3); line-height: 1.2; }
h1{ font-size: var(--step-3); }
h2{ font-size: var(--step-2); }
h3{ font-size: var(--step-1); }
p{ margin: 0 0 var(--sp-4); font-size: var(--step-0); color: var(--ink); }
.muted{ color: var(--muted); font-size: var(--step--1); }


/* ---------- utilitários horizontais ---------- */
.texto-esquerda   { justify-content: flex-start; text-align: left; }
.texto-centralizado { justify-content: center; text-align: center; }
.texto-direita    { justify-content: flex-end; text-align: right; }

/* ---------- utilitários verticais ---------- */
.texto-topo    { align-items: flex-start; }
.texto-middle  { align-items: center; }
.texto-baixo   { align-items: flex-end; }

/* ===========================
   Utilitários de espaçamento (tipo Bootstrap)
   =========================== */

/* Padding (p = todos, px = eixo x, py = eixo y, pt/pr/pb/pl = individuais) */
.p-0  { padding: 0 !important; }
.p-1  { padding: var(--sp-1) !important; }
.p-2  { padding: var(--sp-2) !important; }
.p-3  { padding: var(--sp-3) !important; }
.p-4  { padding: var(--sp-4) !important; }
.p-5  { padding: var(--sp-5) !important; }
.pt-0  { padding-top: 0 !important; }
.pt-1  { padding-top: var(--sp-1) !important; }
.pt-2  { padding-top: var(--sp-2) !important; }
.pt-3  { padding-top: var(--sp-3) !important; }
.pt-4  { padding-top: var(--sp-4) !important; }
.pt-5  { padding-top: var(--sp-5) !important; }
.pb-0  { padding-bottom: 0 !important; }
.pb-1  { padding-bottom: var(--sp-1) !important; }
.pb-2  { padding-bottom: var(--sp-2) !important; }
.pb-3  { padding-bottom: var(--sp-3) !important; }
.pb-4  { padding-bottom: var(--sp-4) !important; }
.pb-5  { padding-bottom: var(--sp-5) !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--sp-1) !important; }
.pl-2 { padding-left: var(--sp-2) !important; }
.pl-3 { padding-left: var(--sp-3) !important; }
.pl-4 { padding-left: var(--sp-4) !important; }
.pl-5 { padding-left: var(--sp-5) !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--sp-1) !important; }
.pr-2 { padding-right: var(--sp-2) !important; }
.pr-3 { padding-right: var(--sp-3) !important; }
.pr-4 { padding-right: var(--sp-4) !important; }
.pr-5 { padding-right: var(--sp-5) !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

/* Margin (m = todos, mx/my/mx-3/etc.) */
.m-0  { margin: 0 !important; }
.m-1  { margin: var(--sp-1) !important; }
.m-2  { margin: var(--sp-2) !important; }
.m-3  { margin: var(--sp-3) !important; }
.m-4  { margin: var(--sp-4) !important; }
.m-5  { margin: var(--sp-5) !important; }


.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--sp-1) !important; }
.mt-2  { margin-top: var(--sp-2) !important; }
.mt-3  { margin-top: var(--sp-3) !important; }
.mt-4  { margin-top: var(--sp-4) !important; }
.mt-5  { margin-top: var(--sp-5) !important; }

.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--sp-1) !important; }
.mb-2  { margin-bottom: var(--sp-2) !important; }
.mb-3  { margin-bottom: var(--sp-3) !important; }
.mb-4  { margin-bottom: var(--sp-4) !important; }
.mb-5  { margin-bottom: var(--sp-5) !important; }

.ml-0  { margin-left: 0 !important; }
.ml-1  { margin-left: var(--sp-1) !important; }
.ml-2  { margin-left: var(--sp-2) !important; }
.ml-3  { margin-left: var(--sp-3) !important; }
.ml-4  { margin-left: var(--sp-4) !important; }
.ml-5  { margin-left: var(--sp-5) !important; }

.mr-0  { margin-right: 0 !important; }
.mr-1  { margin-right: var(--sp-1) !important; }
.mr-2  { margin-right: var(--sp-2) !important; }
.mr-3  { margin-right: var(--sp-3) !important; }
.mr-4  { margin-right: var(--sp-4) !important; }
.mr-5  { margin-right: var(--sp-5) !important; }


.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.mx-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
.mx-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
.my-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mt-auto { margin-top: auto !important; }
.mb-auto { margin-bottom: auto !important; }


/* ---------- Layout ---------- */
.page{ min-height: 100dvh; display:block; }
.wrap{
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}
.section{ padding: 0; margin: 0; }

/* “Zebrado” de fundo */
.section--white{ background: var(--white); }
.section--gray { background: var(--gray-0); }
.section--blue { background: var(--blue); color: var(--white); }
.section--blue a{ color: var(--yellow); text-decoration: none;} /* links seções azuis */

/* ---------- Grid utilitário ---------- */
.grid{ display: grid; gap: clamp(16px, 2rem, 24px); }
.grid-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 992px){
  .grid-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 768px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---------- Cards / superfícies ---------- */
.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: 0 8px 26px rgba(15,34,102,.06);
}
.card--soft{ border-color: transparent; box-shadow: 0 10px 28px rgba(0,0,0,.04); }

/* ---------- Botões (links) ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 16px; border-radius: 12px;
  font-weight: 700; border: 1px solid transparent; cursor: pointer;
}
.btn--primary{ background: var(--blue); color: var(--white); }
.btn--primary:hover{ filter: brightness(1.05); text-decoration: none; }
.btn--ghost{ background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--ghost:hover{ background: rgba(15,34,102,.06); text-decoration: none; }
.btn--accent{ background: var(--yellow); color: #1b1b1b; }

.section--blue .btn--primary { background: var(--yellow); color: #1b1b1b; border-color: transparent; }
.section--blue .btn--ghost   { color: var(--on-blue-strong); border-color: rgba(255,255,255,.4); }
.section--blue .btn--ghost:hover   { background-color: #243471; }

/* ---------- Mídia / figuras ---------- */
.figure{ border-radius: 14px; overflow: hidden; border:1px solid var(--line); }
.figcap{ font-size: var(--step--1); color: var(--muted); margin-top: var(--sp-2); }

/* ---------- Listas ---------- */
.ul{ padding-left: 1.1rem; margin: 0 0 var(--sp-4); }
.ul li{ margin: .35rem 0; }

/* ---------- Breadcrumbs (opcional) ---------- */
.breadcrumbs{
  font-size: var(--step--1); color: var(--muted); margin-bottom: var(--sp-3);
}
.breadcrumbs a{ color: inherit; }
.breadcrumbs .sep{ margin: 0 .5rem; opacity: .5; }

/* ---------- Footer mínimo ---------- */
.footer_bar{
  border-top: 1px solid var(--line);
  padding: var(--sp-2);
  text-align: center;
  font-size: var(--step--3);
  color: var(--muted);
  background: var(--gray-1);
}

/* opção A: conter overflow do container */
.wrap { overflow: hidden; }



/* ===========================
   Banner sem texto
   =========================== */

/* zera só nesse bloco, sem afetar outras sections */
.banner-sem-texto { 
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #000; /* fallback opcional */
}
.banner-sem-texto__img {
  width: 100%;
  height: auto;     /* a imagem manda na altura */
  display: block;   /* remove o espaço por ser inline (baseline gap) */
}

/* ===========================
   Banner com título
   =========================== */

.banner-com-titulo {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #000;
}

.banner-com-titulo__img {
  width: 100%;
  height: auto;
  display: block;
}

.h1 {
  font-size: clamp(1.6rem, 4.8vw, 3.6rem) !important;
}

/* O texto fica por cima da imagem */
.titulo-banner {
  position: absolute;
  inset: 0;               /* ocupa toda a section */
  display: flex;          /* controla alinhamento */
  margin: 0;
  padding: 1rem;
  font-family: "Poppins", sans-serif;
  font-size: clamp(1.6rem, 5.6vw, 2.6rem); /* tamanho fixo controlado */
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.45);
  pointer-events: none;   /* evita clique sobre o texto */
}

/* ---------- variação de cor (caso precise) ---------- */
.titulo-banner--escuro { color: var(--ink); text-shadow: none; }


/* ===========================
   Bloco de texto (título + parágrafo)
   =========================== */

/* Wrapper do bloco */
.bloco-texto { padding: 0; }               /* usa o padding da .section */
.bloco-texto .wrap { max-width: 840px; }   /* copy width confortável */

/* Título “independente da tag” */
.titulo-section{
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); /* tamanho fixo controlado */
  line-height: 1.2;
}

/* Parágrafos */
.texto-section{
  margin: 0 0 var(--sp-4);
  font-size: var(--step-0);
  line-height: 1.65;
}

/* --------- Cores por contexto de fundo ---------- */
.section--white .titulo-section,
.section--gray  .titulo-section{ color: var(--ink-strong); }
.section--white .texto-section,
.section--gray  .texto-section{ color: var(--ink-body); }

.section--blue .titulo-section{ color: var(--on-blue-strong); }
.section--blue .texto-section { color: var(--on-blue-body); }

/* opcional: espaçamento menor em mobile */
@media (max-width: 576px){
  .bloco-texto .wrap{ max-width: 92ch; }
}

/* ===========================
   Lista de serviços (strong + descrição)
   =========================== */

.lista-servicos {
  list-style: disc;
  padding-left: 2.2rem;
  padding-right: 1.8rem;
  margin: var(--sp-4) 0;
  font-size: var(--step-0);
  color: var(--ink-body);
}

.lista-servicos li {
  margin-bottom: var(--sp-3);
  line-height: 1.6;
}

.lista-servicos strong {
  display: inline;
  font-weight: 700;
  color: var(--ink-strong);
}

.section--blue .lista-servicos {
  color: var(--on-blue-body);
}

.section--blue .lista-servicos strong {
  color: var(--on-blue-strong);
}

/* ===========================
   Bloco: imagem + texto (lado a lado)
   =========================== */

.bloco-imagem-texto { padding: 0; } /* usa padding da .section */
.bloco-imagem-texto .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2rem, 32px);
  align-items: center; /* alinha verticalmente */
}

/* Conteúdo de texto */
.imagem-texto__titulo{
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.2vw, 2rem); /* tamanho consistente */
  line-height: 1.2;
  color: var(--ink-strong);
}
.imagem-texto__texto{
  margin: 0 0 var(--sp-4);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-body);
}

/* Ajuste automático de cores em fundo azul */
.section--blue .imagem-texto__titulo{ color: var(--on-blue-strong); }
.section--blue .imagem-texto__texto { color: var(--on-blue-body); }

/* Mídia com proporção e corte elegante */
.imagem-texto__midia{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
/* escolha a proporção com classe utilitária */
.ratio-16x9 { aspect-ratio: 16/9; }
.ratio-11x9 { aspect-ratio: 11/9; }
.ratio-4x3  { aspect-ratio: 4/3; }
.ratio-3x2  { aspect-ratio: 3/2; }

/* imagem preenche o espaço */
.imagem-texto__midia > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Variante: imagem à direita (só no desktop) */
@media (min-width: 992px){
  .imagem-direita .imagem-texto__midia { order: 2; }
  .imagem-direita .imagem-texto__conteudo { order: 1; }
}

/* Responsivo: empilha em 1 coluna */
@media (max-width: 991.98px){
  .bloco-imagem-texto .wrap{ grid-template-columns: 1fr; }
  .imagem-texto__midia{ order: 1; }
  .imagem-texto__conteudo{ order: 2; }
}


/* ===========================
   Mapa (Google Maps Iframe)
   =========================== */
.mapa-embed .wrap { max-width: 960px; }         /* opcional: um pouco mais estreito p/ leitura */
.mapa-embed__frame {
  position: relative;
  max-height: 320px;
  width: 100%;
  aspect-ratio: 16/9;                           /* ajustável: 4/3, 3/2, etc. */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.mapa-embed__frame iframe {
  position: absolute;
  inset: 0;
  max-height: 320px;
  height: 100%;
  width: 100%;
  border: 0; display: block;
}

/* Mapa em largura total (fora da wrap visualmente) */
.mapa-embed--fullbleed { position: relative; }
.mapa-embed--fullbleed .wrap { width: 100%; max-width: none; padding: 0; }
.mapa-embed--fullbleed .mapa-embed__frame { border-radius: 0; }


/* ===========================
   Cards (versão geral + 2 colunas + hover)
   =========================== */

/* grid padrão 3 colunas (mantém compatibilidade) */
.cards-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2rem, 32px);
  align-items: stretch;
}

/* NOVO: grid com 2 colunas */
.cards-grid-2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2rem, 32px);
  align-items: stretch;
}

.cards-grid-2 li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* responsividade */
@media (max-width: 768px){
  .cards-grid, .cards-grid-2{ grid-template-columns: 1fr; }
}

/* item de lista */
.cards-grid > li, .cards-grid-2 > li {
  list-style: none;
}

/* card base */
.card-eq{
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #f3f4f8 0%, #e9ebf4 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: var(--sp-5);
  transition: all .25s ease;
}

/* texto interno */
.card-eq__title{
  font-weight: 800;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.25;
  margin: 0 0 var(--sp-3);
  color: var(--ink-strong);
}
.card-eq__desc{
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-body);
  margin: 0;
  flex: 1 1 auto;
}

/* CTA opcional dentro do card */
.card-eq__cta{
  margin-top: var(--sp-4);
  font-weight: 700;
  color: var(--blue);
}

/* link que envolve o card */
.card-eq--link{
  text-decoration: none !important;
  color: inherit;
  display: block;
  height: 100%;
}

/* -------- HOVER: mesmo efeito em <a> ou card puro -------- */
.card-eq--link:hover .card-eq,
.card-eq:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* remove sublinhado em todos os textos dentro dos cards */
.card-eq a{ text-decoration: none !important; }

/* -------- Variações para fundo azul -------- */
.section--blue .card-eq{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.section--blue .card-eq__title{ color: var(--on-blue-strong); }
.section--blue .card-eq__desc { color: var(--on-blue-body); }
.section--blue .card-eq__cta  { color: var(--yellow); }
.section--blue .card-eq--link:hover .card-eq,
.section--blue .card-eq:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.4);
}

.lista-numerada {
  margin: 2rem 0;
  padding-left: 2.4rem;
  list-style: decimal; /* ou decimal-leading-zero, upper-roman, lower-alpha... */
}

.lista-numerada li {
  padding-left: 0.4rem;
  margin: 0.8rem auto 1.4rem auto;
  color: var(--texto-principal);
}

/* ===== Lista de contato ===== */


.section--blue .contact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: clamp(12px, 1.8vw, 20px) clamp(32px, 4vw, 60px);
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.contact-list .contact-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 820px) {
  .section--blue .contact-list {
    grid-template-columns: 1fr;
    gap: 10px 24px;
  }
}

/* Cada item */
.section--blue .contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.5;
  transition: color 0.25s ease;
}

/* Ícones */
.section--blue .contact-item i {
  font-size: 20px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease, color 0.25s ease;
}

/* Texto */
.section--blue .contact-item span,
.section--blue .contact-item div {
  display: inline-block;
  color: inherit;
}

/* Hover suave: sem fundo, só anima ícone e cor */
.section--blue .contact-item:hover i {
  transform: scale(1.4);
  color: #fff;
}

.section--blue .contact-item:hover {
  color: #fff;
}

@media (max-width: 600px) {
  .section--blue .contact-item span br,
  .section--blue .contact-item div br {
    display: inline;
  }
}

/* Cores específicas para ícones (opcional) */
.section--blue .contact-item .fa-envelope { color: #c7d9ff; }
.section--blue .contact-item .fa-phone { color: #9ec8ff; }
.section--blue .contact-item .fa-map-location-dot { color: #aad2ff; }
.section--blue .contact-item .fa-calendar-week { color: #d3e2ff; }
.section--blue .contact-item .fa-whatsapp { color: #25d366; }

.br-xs {
  display: none;
}
.none-xs {
  display: block;
}

@media (max-width: 575.98px) {
  .br-xs {
    display: block;
  }
  .none-xs {
    display: none;
  }
}