/* ====== RESET E BASE ====== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  line-height: 1.6;
  background: #fff;
  color: #111;
  font-family: 'Montserrat', sans-serif;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ====== HEADER E LOGO ====== */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 40px;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* Remove a sublinha do link */
}

.logo-wolves img {
  height: 30px;
  margin-right: 1rem;
}

.logo-texto {
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
}

.header2-logo-texto {
  font-size: 0.9rem;
  font-weight: bold;
  color: #fff;
}

/* ====== NAVEGAÇÃO ====== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  background-color: #ffffff;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  padding-right: 30px;
}

nav a {
  text-decoration: none;
  color: #000;
  font-size: 13px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
}

.menu li {
  display: flex;
  align-items: center;
}

.nav-item {
  padding: 3px 6px;
  border-radius: 20px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.nav-item:hover {
  background-color: #000;
  color: #fff;
}

.logo-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 35px;
}

.icon-link {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.icon-link:hover {
  transform: scale(1.1);
  /* leve zoom no hover */
}

.logo-menu img {
  height: 35px;
}

.icon-circle {
  width: 38px;
  padding: 4px;
  background-color: #FC732E;
  /* Laranja */
  border-radius: 50%;
  border: 2px solid white;
  object-fit: contain;
  transition: box-shadow 0.2s ease-in-out;
}

.icon-circle:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  /* brilho suave */
}

.header2-icon-circle {
  width: 38px;
  padding: 4px;
  background-color: #fff;
  /* Laranja */
  border-radius: 50%;
  border: 2px solid white;
  object-fit: contain;
  transition: box-shadow 0.2s ease-in-out;
}

.header2-icon-circle:hover {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  /* brilho suave */
}

.contact_us {
  padding: 8px 20px;
  background-color: #FC732E;
  color: #000;
  font-weight: 500;
  text-decoration: none;
  border-radius: 25px;
  border: 2px solid white;
}

.contact_us:hover,
.our-services:hover {
  background-color: #FC732E;
  /* Laranja mais claro ao passar o mouse */
  box-shadow: 0 0 0 2px #aaa;
}

.header2-contact_us {
  padding: 8px 20px;
  background-color: #000;
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  border-radius: 25px;
  border: 2px solid white;
}

.header2-contact_us:hover {
  background-color: #000;
  /* Laranja mais claro ao passar o mouse */
  box-shadow: 0 0 0 2px #aaa;
}

/* ====== SUBHEADER ====== */
.subheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 2rem;
  flex-wrap: wrap;
  padding-left: 70px;
}

.subheader h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.7rem;
  /* Aumentado (antes 2.5rem) */
  font-weight: 510;
  /* Mais “pesado” para destaque */
  line-height: 0.9;
  letter-spacing: -3px;
  color: #111;
  /* Ou #000 para preto absoluto */
}

.subheader .carpentry {
  display: inline-block;
  color: #000;
}

.social-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 45px;
  padding-right: 30px;
}

.social-icons {
  display: flex;
  gap: 0.5rem;
}

.social-icons img {
  width: 45px;
  height: 45px;
  background: #FC732E;
  padding: 4px;
  border-radius: 50%;
  border: 2px solid white;
}

.our-services {
  padding: 6px 70px;
  background-color: #FC732E;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 550;
  border-radius: 50px;
  border: 1px solid white;
  text-decoration: none;
}

/* ====== SUBHEADER2 ====== */
.subheader2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 2rem;
  flex-wrap: wrap;
  padding-left: 70px;
}

.subheader2 h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.7rem;
  /* Aumentado (antes 2.5rem) */
  font-weight: 510;
  /* Mais “pesado” para destaque */
  line-height: 48px;
  letter-spacing: -3px;
  color: #fff;
  /* Ou #000 para preto absoluto */
}

.subheader2 .carpentry {
  display: inline-block;
  color: #fff;
}

.subheader2 .our-services {
  padding: 6px 70px;
  background-color: #fff;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.3rem;
  font-weight: 550;
  border-radius: 50px;
  border: 1px solid white;
  text-decoration: none;
}

.main-content {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  margin-right: 15px;
  flex-wrap: wrap;

  flex-grow: 1;
}

header,
.subheader,
footer {
  flex-shrink: 0;
}

.side {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 100%;
}

.side.right {
  margin-right: 17px;
}

/* Botões reposicionados abaixo da imagem */
/* REMOVER ESTES BLOCOS DUPLICADOS SE EXISTIREM */
/*
.contact-left,
.contact-right {
  position: static;
  margin-top: 1rem;
}
*/

.cta {
  display: inline-block;
  margin-top: 1rem;
  padding: 10px 24px;
  background-color: #FC732E;
  color: #000;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  border: 1px solid white;
  box-shadow: 0 0 0 1px #ccc;
  /* NOVO: Adiciona z-index para garantir que fique acima das molduras */
  z-index: 3;
}

.contact-left {
  position: absolute;
  margin-top: 20rem;
  left: 1.3rem;

  z-index: 3;
}

.contact-right {
  position: absolute;
  bottom: 0.9rem;
  right: 2.1rem;
  /* NOVO: Garante que o botão direito esteja acima das molduras */
  z-index: 3;
}

.contact-left:hover,
.contact-right:hover {
  background-color: #FC732E;
  /* Laranja mais claro ao passar o mouse */
  box-shadow: 0 0 0 2px #aaa;
}

/* ====== LOCATION BOX ====== */
.location-box {
  position: absolute;
  bottom: 320px;
  /* CORREÇÃO: Ajuste este valor. Era 25.5em, que é muito grande e empurra para fora da tela. */
  /* Tente um valor menor, como 2rem ou 50px, ou centralize com 'left: 50%; transform: translateX(-50%);' */
  right: 65%;
  /* Valor mais razoável para a direita */
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  /* NOVO: Adiciona z-index para garantir que fique acima das molduras */
  z-index: 3;

  position: absolute;
  bottom: 83%;
  /* Ajuste conforme o desejado */
  right: 65%;
}

.location-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0rem;
}

.location-details {
  font-size: 0.6rem;
  line-height: 0.5;
  font-weight: 600;
  white-space: pre-line;
}

.image-wrapper {
  position: relative;
  width: 100%;
  /* ocupa toda a largura do bloco .side */
  max-width: 100%;
  /* não ultrapassa limites */
}

/* Contêiner que define o tamanho principal das imagens e suas molduras */
.main-image-area {
  position: relative;
  width: 100%;
  height: 52%;
  /* REMOVIDO: margin-right: 17px; (estava aqui por engano, devia ser no .side.right) */
  border-radius: 0px;
  overflow: hidden;
  display: block;

  flex-grow: 1;
  height: auto;
  /* IMPORTANTE: substitui o 'height: 52%;' */
  min-height: 300px;
  /* Opcional, para garantir um mínimo */
}

/* A imagem de conteúdo que será exibida e trocada */
.main-image-display {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* A imagem da moldura que ficará sobre a imagem de conteúdo */
.frame-overlay-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 2;
  /* Certifica-se de que a moldura está ACIMA da imagem de conteúdo */
  pointer-events: none;
  /* Permite que os cliques do mouse passem pela moldura */
}


.side.left {
  margin-left: 3rem;
  margin-top: -0.3rem;
}

.side.mobile-ipad,
.side.tablet {
  display: none;
}

.side.left .thumbnail-group {
  position: absolute;
  top: 1px;
  right: 6%;
  display: flex;
  gap: 0;
  z-index: 10;
  /* Garante que as miniaturas fiquem acima da moldura */
}

.thumbnail-group .thumb {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid white;
  object-fit: cover;
  transition: all 0.3s ease-in-out;
  z-index: 2;
}

.thumb-1 {
  margin-left: 0;
  z-index: 3;
}

.thumb-2 {
  margin-left: -15px;
  z-index: 2;
}

.thumb-3 {
  margin-left: -15px;
  z-index: 1;
}

.thumbnail-group:hover .thumb-1 {
  transform: scale(1.1);
}

.thumbnail-group:hover .thumb-2 {
  transform: translateX(20px) scale(1.1);
  z-index: 4;
}

.thumbnail-group:hover .thumb-3 {
  transform: translateX(40px) scale(1.1);
  z-index: 3;
}

.thumbnails-overlap img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  margin-left: -15px;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

.thumbnails-overlap img:first-child {
  margin-left: 0;
}

.carousel-dynamic-section {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  text-align: center;
  flex-grow: 1;
}

.carousel-dynamic {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.carousel-dynamic img {
  transition: all 0.5s ease;
  border-radius: 16px;
  height: 370px;
  object-fit: cover;
  opacity: 1;
}

.carousel-dynamic img.small {
  width: 160px;
  opacity: 0.8;
}

.carousel-dynamic img.medium {
  width: 240px;
  opacity: 0.9;
}

.carousel-dynamic img.large {
  width: 480px;
  opacity: 1;
}

.carousel-dynamic img.hidden {
  width: 0;
  opacity: 0;
  visibility: hidden;
}

.carousel-dynamic video.small {
  width: 160px;
  opacity: 0.8;
  height: 370px;
  object-fit: cover;
  border-radius: 16px;
}

.carousel-dynamic video.medium {
  width: 240px;
  opacity: 0.9;
  height: 370px;
  object-fit: cover;
  border-radius: 16px;
}

.carousel-dynamic video.large {
  width: 480px;
  opacity: 1;
  height: 370px;
  object-fit: cover;
  border-radius: 16px;
}

.carousel-dynamic video.hidden {
  width: 0;
  opacity: 0;
  visibility: hidden;
  height: 370px;
}


.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #f97316;
  border: none;
  color: #fff;
  line-height: 1;
  font-size: 2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  padding-bottom: 7px;
}

.carousel-btn.left {
  left: 20px;
}

.carousel-btn.right {
  right: 20px;
}

#lightbox-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 90%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.3);
  /* Fundo escuro */
  backdrop-filter: blur(2px);
  /* Efeito de desfoque no fundo */
  padding: 20px;
  border-radius: 20px;
  /* Bordas arredondadas no contêiner geral */
  z-index: 10000;
  justify-content: center;
  align-items: center;
  display: none;
  /* Só aparece quando ativado */
}

#lightbox-overlay #lightbox-content img,
#lightbox-overlay #lightbox-content video {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

#lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  font-weight: bold;
}

.media-filters {
  text-align: center;
  /* Centraliza os botões */
  margin: 6px 0;
  /* Espaçamento acima e abaixo */
  display: flex;
  /* Faz os botões ficarem lado a lado */
  justify-content: right;
  /* Centraliza os botões na linha */
  gap: 3px;
  /* Espaço entre os botões */
  flex-wrap: wrap;
  /* Permite que os botões quebrem a linha em telas menores */
}

.filter-btn {
  background-color: #f0f0f0;
  /* Cor de fundo padrão */
  border: 1px solid #ccc;
  /* Borda sutil */
  padding: 0px 8px;
  /* Preenchimento interno */
  cursor: pointer;
  /* Indica que é clicável */
  border-radius: 50px;
  /* Cantos arredondados */
  font-size: 14px;
  /* Tamanho da fonte */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  /* Transição suave */
  white-space: nowrap;
  /* Evita que o texto do botão quebre a linha */
}

.filter-btn:hover {
  background-color: #e0e0e0;
  /* Fundo mais escuro ao passar o mouse */
}

.filter-btn.active {
  background-color: #FC732E;
  /* Cor primária ativa (exemplo: azul) */
  color: black;
  /* Texto branco para contraste */
  border-color: #FC732E;
  /* Borda da mesma cor do fundo */
  font-weight: bold;
  /* Texto em negrito para destaque */
}

/* Estilo para a mensagem de informação/erro dentro dos contêineres do Instagram */
.info-message,
.loading-message,
.error-message {
  text-align: center;
  padding: 20px;
  color: #6c757d;
  /* Cor de texto padrão para informações */
  font-weight: normal;
}

.error-message {
  color: #dc3545;
  /* Cor de texto para erros */
  font-weight: bold;
}

.whatwedo-main-layout {
  flex-grow: 1;
}

/* ====== ESTILOS ESPECÍFICOS PARA A PÁGINA DE FEEDBACKS ====== */

/* O container principal para o subheader e a seção de feedbacks */
/* Por padrão (desktop first), eles aparecem na ordem do HTML */
.feedbacks-main-layout {
  display: flex;
  flex-direction: column;
  /* subheader em cima, feedbacks abaixo */
  /* Adicione padding, margin ou max-width para o layout de desktop se necessário */
  flex-grow: 1;
}

/* Esconder o bloco mobile-ipad por padrão (desktop) */
.feedbacks-page-body .mobile-ipad-content-block {
  display: none;
}

.feedbacks-page-body .feedbacks-section-mobile {
  display: none;
}

.feedbacks-section {
  position: relative;
  padding: 1rem;
  text-align: center;
}

.feedback-nav-btn {
  position: absolute;
  top: 40%;
  /* Centraliza verticalmente */
  transform: translateY(-50%);
  /* Ajuste para o centro exato */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fundo semi-transparente preto */
  color: white;
  /* Cor do texto/seta */
  border: none;
  padding: 10px 15px;
  font-size: 24px;
  /* Tamanho da seta */
  cursor: pointer;
  z-index: 10;
  /* Garante que os botões fiquem acima dos cards */
  border-radius: 5px;
  /* Cantos levemente arredondados */
  transition: background-color 0.3s ease;
  /* Transição suave no hover */
  -webkit-tap-highlight-color: transparent;
  /* Remove highlight azul no mobile */
}

.feedback-nav-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
  /* Fundo mais opaco no hover */
}

.feedback-nav-btn.left {
  left: 10px;
  /* Posição à esquerda */
}

.feedback-nav-btn.right {
  right: 10px;
  /* Posição à direita */
}

.feedbacks-carousel {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Permite que os cards quebrem linha, mas será um só no mobile */
  gap: 2rem;
  /* Espaçamento entre os cards no desktop */
  overflow: hidden;
  /* Importante para esconder cards que não estão no grupo atual */
}

.feedback-card {
  width: 300px;
  /* Largura padrão para desktop (3 cards) */
  padding: 0rem 1rem 0rem;
  /* color: #fff;  - Este 'color' aqui pode ser um problema se o fundo da imagem for claro.
                     O '.client-name' já está com color: #000, o que é bom.
                     Se houver outro texto direto dentro do card, considere ajustá-lo. */
  font-family: 'Montserrat', sans-serif;
  position: relative;
  display: none;
  /* Controlado pelo JavaScript */
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* Ajustes específicos para as miniaturas do feedback */
.depoimento-img {
  width: 100%;
  max-height: 400px;
  /* Ajuste conforme necessário */
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  bottom: 0px;
  left: 16px;
  border: 3px solid #000;
  display: block;
  /* Visível por padrão no desktop */
}

.client-name {
  position: absolute;
  bottom: 17px;
  left: 80px;
  font-size: 0.7rem;
  font-weight: 500;
  color: #000;
  display: block;
  /* Visível por padrão no desktop */
}

/* NOVO: Esconde a imagem combinada do mobile por padrão (no desktop) */
.depoimento-mobile-img {
  display: none;
}

.feedbacks-bars {
  margin-top: 3.5rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.bar {
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background-color: #ccc;
  display: inline-block;
}

.bar.active {
  background-color: #f97316;
}

/* Elementos que são apenas para mobile (escondidos por padrão no desktop) */
.mobile-contact-image-section,
.form-intro.mobile-only-form-intro {
  display: none;
  /* Escondidos por padrão no desktop */
}

/* Esconde a location-box do formulário de contato no desktop */
.contact-form-location-box {
  display: none;
}


/* ====== HEADER OVERLAY ====== */
.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(50px);
}

/* Ajustar o header para ter fundo transparente quando sobreposto */
.header-overlay header {
  background-color: transparent;
}

.contactus-wrapper {
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  margin-top: 0;
  /* Remove qualquer margem superior */
  padding-top: 0;
  /* Remove qualquer padding superior */
}

.contactus-left {
  position: relative;
  width: 50%;
  background-color: #000;
  height: 100vh;
  /* Garante altura completa */
}

.escada-fundo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.contactus-left .form-intro {
  position: relative;
  z-index: 2;
  padding: 2rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 80%;
  margin: 35% auto 0;
  border-radius: 16px;
}

.form-intro h1 {
  font-size: 2rem;
  margin-bottom: 0.7rem;
}

.form-intro p {
  font-size: 0.7rem;
  line-height: 1.2;
}

.contactus-right {
  width: 50%;
  background-color: #FC732E;
  padding: 2rem;
  display: flex;
  padding-top: 12rem;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  height: 100vh;
  box-sizing: border-box;
}

.contactus-right h2 {
  font-size: 2rem;
  margin-bottom: 0.2rem;
}

.contactus-right p {
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
}

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

.send-button {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-group {
  display: flex;
  gap: 1rem;
}

.form-group input {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
}

#details {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  min-height: 70px;
  /* Altura mínima */
  max-height: 300px;
  /* Altura máxima (opcional) */
  resize: vertical;
  /* Permite redimensionar apenas verticalmente */
  font-family: inherit;
  /* Herda a fonte do elemento pai */
  line-height: 1.4;
  /* Espaçamento entre linhas */
  overflow-wrap: break-word;
  /* Quebra palavras longas */
  white-space: pre-wrap;
  /* Preserva quebras de linha */

  /* Estilo de foco (opcional) */
  transition: box-shadow 0.3s ease;
}

#details:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-button {
  width: fit-content;
  padding: 0.25rem 1.8rem;
  font-size: 1rem;
  font-weight: 700;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* Estilos para upload de arquivos */
.upload-container {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.upload-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 2px dashed #ff4444;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.75rem;
}

.upload-label:hover {
  border-color: #ff6666;
  background-color: rgba(255, 68, 68, 0.1);
}

.upload-icon {
  color: #ff4444;
  margin-bottom: 0.25rem;
}

/* Ícone menor para economizar espaço */
.upload-icon svg {
  width: 30px;
  /* REDUZIDO de 40px para 30px */
  height: 30px;
  /* REDUZIDO de 40px para 30px */
}

.upload-text {
  color: #fff;
  font-size: 0.85rem;
  text-align: center;
}

.file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  border: 2px solid #fff;
  border-radius: 8px;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 0.5rem;
  position: relative;
}

/* Ajuste da imagem de preview para caber no espaço menor */
.file-preview img {
  max-width: 100%;
  max-height: 70px !important;
  /* REDUZIDO de 100px para 70px */
  border-radius: 4px;
  object-fit: cover;
  /* Garante que a imagem se ajuste bem */
}

.remove-file {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff4444;
  color: white;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.remove-file:hover {
  background: #ff6666;
}

/* Campo Pinterest */
#pinterest_link {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #f9f9f9;
}

#pinterest_link:focus {
  outline: none;
  border-color: #ff4444;
  box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);
}


/* Barras de Progresso Discretas para Formulário de Contato */
.contact-progress-bars {
  margin-top: 0rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-bar {
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  display: inline-block;
  transition: background-color 0.3s ease;
}

.contact-bar.active {
  background-color: #000;
  /* Cor vermelha para combinar com o tema */
}

.success-message {
  font-size: 0.8rem;
  /* Reduz fonte em cerca de 20% */
  line-height: 1.3;
  /* Espaçamento de linha mais justo */
  padding: 0.2rem;
  /* Reduz padding */
  margin-top: 0rem;
  /* Diminui margem superior */
}

.success-message h2 {
  font-size: 1.4rem;
  /* Reduz título */
}

.success-message p {
  font-size: 0.75rem;
  /* Reduz os parágrafos */
  margin-bottom: 0.2rem;
}

.success-message ul {
  padding-left: 1rem;
  font-size: 0.7rem;
}

.success-message li {
  margin-bottom: 0.2rem;
}

.founded-image {
  width: 93%;
  max-width: 1500px;
  /* ajuste conforme necessário */
  height: 90%;
  display: block;
  margin: 0 auto;
  /* centraliza horizontalmente */
}

/* Variáveis CSS para facilitar a mudança de cores */
:root {
  --primary-color: #FFA500;
  /* Laranja */
  --secondary-color: #333;
  /* Preto para texto principal */
  --inactive-color: #818181;
  /* Cinza claro para elementos inativos */
  --bg-watermark: #F0F0F0;
  /* Cinza muito claro para a marca d'água */
  --white-color: #FFF;
}

/* body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--white-color);
    color: var(--secondary-color);
} */

.timeline-container.desktop-only-timeline {
  display: block;
  /* Visível por padrão no desktop */
}

/* Esconde o acordeão por padrão em telas maiores */
.timeline-accordion-mobile {
  display: none;
  padding: 1rem;
  /* Adicione padding para não colar nas bordas da tela */
  margin-top: 1rem;
  /* Espaçamento superior */
  max-width: 95%;
  /* Limite a largura para ficar agradável */
  margin-left: auto;
  /* Centraliza */
  margin-right: auto;
  /* Centraliza */
}

/* Estilo para cada item do acordeão */
.accordion-item {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  /* Importante para transição de altura */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  /* Sombra suave */
}

/* Estilo para o cabeçalho (título) do item do acordeão */
.accordion-header {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
}

.accordion-header:hover {
  background-color: #f0f0f0;
}

/* Ícone de expandir/colapsar */
.accordion-header::after {
  content: '+';
  /* Ícone padrão (fechado) */
  font-size: 1.5em;
  font-weight: normal;
  transition: transform 0.3s ease;
}

.accordion-header.active::after {
  content: '-';
  /* Ícone (aberto) */
  transform: rotate(0deg);
  /* Garante que o '-' não rotacione */
}

/* Estilo para o conteúdo (descrição) do item do acordeão */
.accordion-content {
  padding: 0 20px;
  /* Padding vertical 0 para que a transição de max-height funcione */
  max-height: 0;
  /* Esconde o conteúdo por padrão */
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease-out;
  /* Transição suave */
  color: #666;
  line-height: 1.6;
}

/* Estado ativo do conteúdo do acordeão (quando expandido) */
.accordion-content.active {
  max-height: 300px;
  /* Um valor grande o suficiente para a maioria das descrições */
  padding: 15px 20px;
  /* Adiciona o padding vertical quando expandido */
}

.timeline-container {
  width: 90%;
  max-width: 1200px;
  margin: 12px auto;
  padding: 15px;
  background-color: var(--white-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  /* Para posicionar a marca d'água */
  overflow: hidden;
  /* Para garantir que a marca d'água não vaze */
}

.timeline-main-title {
  text-align: center;
  font-size: 1.5em;
  color: var(--secondary-color);
  margin-bottom: 40px;
  text-transform: uppercase;
}

.timeline-watermark {
  position: absolute;
  top: 57%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12em;
  /* Tamanho grande para a marca d'água */
  font-weight: bold;
  color: var(--bg-watermark);
  z-index: 0;
  /* Coloca atrás de outros elementos */
  opacity: 0.8;
  /* Levemente transparente */
  user-select: none;
  /* Impede a seleção do texto */
  pointer-events: none;
  /* Impede que ele interaja com o mouse */
  white-space: nowrap;
  /* Impede que quebre a linha */
}

.feedback-watermark{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12em;
  /* Tamanho grande para a marca d'água */
  font-weight: bold;
  color: var(--bg-watermark);
  z-index: 0;
  /* Coloca atrás de outros elementos */
  opacity: 0.8;
  /* Levemente transparente */
  user-select: none;
  /* Impede a seleção do texto */
  pointer-events: none;
  /* Impede que ele interaja com o mouse */
  white-space: nowrap;
  /* Impede que quebre a linha */
}

.timeline-content-display {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* Espaço entre o conteúdo e a linha do tempo */
  position: relative;
  z-index: 1;
  /* Garante que o conteúdo fique acima da marca d'água */
  min-height: 150px;
  /* Garante que a área de conteúdo tenha uma altura mínima */
}

.timeline-icon {
  width: 80px;
  height: 80px;
  border: 2px solid var(--secondary-color);
  border-radius: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  /* Alinha as bolinhas verticalmente no centro */
  margin-right: 20px;
  flex-shrink: 0;
  /* Impede que o ícone diminua */
}

.timeline-icon .dot {
  width: 8px;
  height: 8px;
  background-color: var(--secondary-color);
  border-radius: 50%;
  margin: 4px;
  /* Espaçamento entre as bolinhas */
}

.timeline-details {
  flex-grow: 1;
}

.timeline-date-title {
  font-size: 2em;
  font-weight: bold;
  color: var(--secondary-color);
  margin: 0 0 10px 0;
}

.timeline-description {
  font-size: 1.1em;
  color: var(--secondary-color);
  line-height: 1.5;
  margin: 0;
}

/* NOVO: Wrapper para as linhas da timeline */
.timeline-lines-wrapper {
  display: flex;
  flex-direction: column;
  /* Organiza as linhas verticalmente */
  align-items: center;
  /* Centraliza as linhas na horizontal */
  padding: 0 20px;
  /* Padding para as bordas do container */
}

.timeline-nav {
  display: flex;
  justify-content: space-between;
  /* Distribui os marcadores igualmente */
  align-items: flex-end;
  /* Alinha os marcadores na parte inferior */
  position: relative;
  padding-top: 10x;
  /* Espaço para o dot ficar acima da linha */
  z-index: 1;
  width: 100%;
  /* Ocupa toda a largura disponível */
}

/* A "linha" base da timeline */
.timeline-track {
  position: absolute;
  bottom: 10px;
  /* Posição da linha horizontal */
  left: 0;
  width: 100%;
  height: 4px;
  /* Espessura da linha */
  background-color: var(--inactive-color);
  border-radius: 2px;
}

/* O preenchimento da linha da timeline */
.timeline-progress-fill {
  height: 100%;
  width: 0%;
  /* Começa com 0 e é preenchido via JS */
  background-color: var(--primary-color);
  /* Cor de preenchimento */
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
  /* Transição suave */
}

.timeline-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  /* Impede que os marcadores encolham */
  padding: 0 10px;
  /* Pequeno espaçamento entre os marcadores */
  /* Usar flex-basis ou width fixo pode ser necessário dependendo do número de itens por linha */
}

.timeline-marker .marker-date {
  font-size: 0.7em;
  color: var(--inactive-color);
  margin-bottom: 19px;
  /* Espaço entre a data e o dot */
  transition: color 0.3s ease-in-out;
  white-space: nowrap;
  /* Impede que a data quebre a linha */
}

.timeline-marker .marker-dot {
  width: 16px;
  height: 16px;
  background-color: var(--inactive-color);
  border-radius: 50%;
  position: absolute;
  bottom: 3px;
  /* Alinha o dot com a linha */
  left: 50%;
  transform: translateX(-50%);
  transition: background-color 0.3s ease-in-out;
}

/* Estado Ativo */
.timeline-marker.active .marker-date {
  color: var(--primary-color);
  font-weight: bold;
}

.timeline-marker.active .marker-dot {
  background-color: var(--primary-color);
  box-shadow: 0 0 0 4px rgba(255, 165, 0, 0.3);
  /* Um brilho sutil */
}

/* NOVO: Conector vertical entre as linhas */
.timeline-line-connector {
  width: 0px;
  /* Espessura do conector */
  height: 0px;
  /* Altura do conector */
  background-color: var(--inactive-color);
  /* Cor inativa */
  margin: 0px auto;
  /* Espaçamento acima e abaixo, centralizado */
  border-radius: 2px;
  transition: background-color 0.3s ease-in-out;
}

.timeline-line-connector.active {
  background-color: var(--primary-color);
  /* Cor ativa */
}

/* ====== FOOTER ====== */
footer {
  text-align: center;
  padding: 0.4rem;
  background: #222;
  color: #fff;
}

/* ====== CONTROLE DE ORIENTAÇÃO MOBILE ====== */

/* Overlay que aparece apenas no modo paisagem em dispositivos móveis */
.landscape-warning {
  display: none;
  /* Escondido por padrão */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  color: white;
  z-index: 9999;
  /* Acima de tudo */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  font-family: 'Montserrat', sans-serif;
}

.landscape-warning h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #FC732E;
  /* Cor do seu tema */
}

.landscape-warning p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  max-width: 300px;
}

.landscape-warning .rotate-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: rotate 2s infinite linear;
}

.founded-section-tablet {
  display: none;
}

/* Estilos para mensagens de carregamento, erro e informação */
.loading-message,
.error-message,
.info-message {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: #666;
  /* Cor padrão para mensagens de carregamento/info */
  margin: 30px auto;
  /* Centraliza a mensagem */
  padding: 15px;
  background-color: #f8f8f8;
  /* Fundo suave */
  border-radius: 8px;
  border: 1px solid #ddd;
  max-width: 300px;
  text-align: center;
}

.error-message {
  color: #dc3545;
  /* Vermelho para mensagens de erro */
  background-color: #f8d7da;
  /* Fundo mais claro para erro */
  border-color: #f5c6cb;
}

/* Animação de rotação para o ícone */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Detecta dispositivos móveis em modo paisagem */
@media screen and (max-width: 767px) and (orientation: landscape) {

  /* Mostra o aviso de orientação */
  .landscape-warning {
    display: flex !important;
  }

  /* Esconde o conteúdo principal quando em paisagem */
  body>*:not(.landscape-warning) {
    display: none !important;
  }
}

/* Para dispositivos muito pequenos em paisagem (como iPhone em paisagem) */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .landscape-warning {
    display: flex !important;
  }

  body>*:not(.landscape-warning) {
    display: none !important;
  }
}

/* NOVO: Detecta tablets em modo retrato */
/* Aplicável para larguras de 768px a 1024px, na orientação retrato */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* Mostra o aviso de orientação para tablets em retrato */
  .portrait-warning-tablet {
    display: flex !important;
  }

  /* Esconde o conteúdo principal quando em retrato tablet */
  body>*:not(.portrait-warning-tablet) {
    display: none !important;
  }
}

/* Estilos base para o NOVO aviso de orientação para tablets em retrato */
.portrait-warning-tablet {
  display: none;
  /* Escondido por padrão */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  /* Fundo semi-transparente escuro */
  color: white;
  z-index: 9999;
  /* Garante que apareça acima de todo o conteúdo */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  font-family: 'Montserrat', sans-serif;
}

.portrait-warning-tablet h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #FC732E;
  /* Cor laranja do seu tema */
}

.portrait-warning-tablet p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 2rem;
  max-width: 300px;
}

/* Opcional: Reutiliza a animação de rotação para o novo ícone */
.portrait-warning-tablet .rotate-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  animation: rotate 2s infinite linear;
  /* Reutiliza a animação existente */
}

.main-image-area {
  height: 375px;
  /* Ajuste conforme o necessário */
}



/* ========== RESPONSIVIDADE ========== */

/* Ajustes específicos para iPhone 12 Pro (largura de 390px) e telas muito estreitas */
@media screen and (max-width: 390px) {

  /* Header */
  .logo-wolves img {
    height: 25px;
  }

  .logo-texto {
    font-size: 0.75rem;
  }

  nav a,
  .nav-item {
    font-size: 13px;
    padding: 6px 10px;
  }

  .icon-circle {
    width: 32px;
    height: 32px;
  }

  .contact_us {
    font-size: 12px;
    padding: 6px 15px;
  }

  /* Subheader */
  .subheader h1 {
    font-size: 2rem;
    letter-spacing: -1px;
  }

  .social-icons img {
    width: 35px;
    height: 35px;
  }

  .our-services,
  .cta {
    font-size: 1rem;
    padding: 10px 0;
  }

  /* Main Content */
  .thumbnail-group .thumb {
    width: 50px;
    height: 50px;
  }
}

/* Mobile (até 767px) - Ajustes gerais para dispositivos móveis */
@media screen and (max-width: 767px) {

  body.page-background {
    /* As propriedades de background são definidas no CSS inline gerado pelo PHP */
    font-size: 14px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
  }

  /* Header e Navegação */
  header {
    flex-direction: row;
    /* Empilhar logo e navegação verticalmente */
    padding: 0rem 0.5rem;
    /* Reduzir preenchimento */
    align-items: center;
  }

  .logo-container {
    padding-left: 0;
    /* Remover preenchimento esquerdo para centralização */
    margin-bottom: 0px;
    /* Espaço entre logo e navegação */
  }

  .logo-wolves img {
    height: 40px;
    /* Logo um pouco menor */
    margin-right: 0rem;
    /* Ajustar margem */
  }

  .logo-texto {
    display: none;
  }

  nav ul {
    flex-direction: row;
    /* Empilhar itens de navegação verticalmente */
    gap: 0rem;
    /* Aumentar espaçamento entre itens empilhados */
    padding-right: 0;
    /* Remover preenchimento direito */
    width: 100%;
    /* Ocupar largura total */
    align-items: center;
    /* Centralizar itens de navegação */
  }

  nav a {
    text-decoration: none;
    color: #000;
    font-size: 12px;
    /* Ajustar tamanho da fonte */
    padding: 0px 0px;
    /* Aumentar área de toque */
  }

  .nav-item {
    padding: 4px 6px;
    /* Preenchimento consistente para itens de navegação */
    border-radius: 8px;
    /* Ajustar raio da borda */
  }

  .logo-menu {
    margin-left: 0;
    /* Remover margem esquerda */
    flex-direction: row;
    /* Manter ícones em linha */
    gap: 0.3rem;
    /* Espaço entre ícones */
    margin-top: 10px;
    /* Espaço dos itens de navegação de texto */
    justify-content: center;
    /* Centralizar ícones */
    width: 100%;
    /* Garantir que ocupe largura total para centralização */
  }

  .icon-circle {
    width: 36px;
    /* Ícones um pouco menores */
    height: 36px;
    padding: 3px;
    border-width: 1px;
    /* Borda mais fina */
  }

  .contact_us {
    display: none;
  }

  /* Subheader */
  .subheader {
    margin-top: 28rem;
    flex-direction: column;
    /* Empilhar título e grupo social */
    padding: 1.5rem 1rem;
    /* Ajustar preenchimento */
    align-items: center;
    /* Centralizar conteúdo */
    text-align: center;
    /* Centralizar texto */
    padding-left: 1rem;
    /* Ajustar para corresponder ao preenchimento geral */
  }

  .subheader h1 {
    display: none;
  }

  .social-group {
    flex-direction: row;
    /* Empilhar ícones sociais e botão "Our Services" */
    padding-top: 0;
    /* Remover preenchimento superior, pois está empilhado */
    padding-right: 0;
    /* Remover preenchimento direito */
    width: 100%;
    align-items: center;
    /* Centralizar conteúdo */
    gap: 0px;
    /* Espaço entre ícones sociais e botão */
  }

  .social-icons {
    gap: 0.2rem;
    /* Espaço entre ícones sociais */
    justify-content: center;
    width: 100%;
    /* Garantir centralização correta */
  }

  .social-icons img {
    width: 40px;
    /* Ícones sociais um pouco menores */
    height: 40px;
    border-width: 1px;
    /* Borda mais fina */
  }

  .our-services {
    width: 90%;
    /* Tornar botão mais largo */
    max-width: 300px;
    /* Limitar largura máxima */
    padding: 8px 0;
    /* Ajustar preenchimento vertical */
    font-size: 1.2rem;
    /* Ajustar tamanho da fonte */
    text-align: center;
    margin-top: 0;
    /* Remover margem superior se o gap gerencia o espaçamento */
  }

  /* Main Content */
  .main-content,
  .carousel-dynamic-section,
  .feedbacks-section {
    flex-direction: column;
    /* Empilhar lados esquerdo e direito */
    padding: 1.8rem 1rem;
    /* Ajustar preenchimento */
    gap: 3rem;
    /* Mais espaço entre seções empilhadas */
  }

  /* Reordenar side.right (imagem da cozinha) para aparecer primeiro em main-content */
  .side.right,
  .side.left {
    display: none;
  }

  .side.mobile-ipad {
    display: flex;
    flex-direction: column;
    margin-top: -2rem;
    /* Empilhar conteúdo verticalmente */
    align-content: center;
    justify-content: center;
  }

  /* CTA Buttons (Contact Us) - estes estão dentro de divs .side */
  .cta {
    display: none;
  }

  .founded-section {
    display: none;
  }

  .carousel-btn {
    display: none;
  }

  .carousel-dynamic {
    display: none;
  }

  /* Altera a ordem visual dos elementos APENAS na página de feedbacks */
  .feedbacks-page-body .feedbacks-main-layout {
    flex-direction: column;
    /* Mantém a direção da coluna */
  }

  /* Move a seção de feedbacks para a primeira posição visual */
  .feedbacks-page-body .feedbacks-section {
    order: 1;
  }

  /* Move o subheader para a segunda posição visual */
  .feedbacks-page-body .feedbacks-subheader-wrapper {
    order: 2;
    margin-top: 0rem;
  }

  /* NOVO: Mostrar e posicionar o bloco mobile-ipad no mobile */
  .feedbacks-page-body .mobile-ipad-content-block {
    display: flex;
    /* Ou 'block', 'grid', dependendo do layout interno desejado */
    order: 3;
    /* Posição após o subheader (que é order:2 no mobile) */
    margin-top: 0rem;
    /* Espaço acima do novo bloco */
    align-self: center;
    /* Centraliza o bloco dentro do layout flexível */
  }

  /* Ajustes para o próprio container .subheader dentro da página de feedbacks no mobile */
  .feedbacks-page-body .subheader {
    padding-left: 0;
    /* Remove o padding esquerdo grande do desktop se existir */
    padding-right: 0;
    justify-content: center;
    /* Centraliza o conteúdo (ex: social-group se estiver lá) */
    text-align: center;
    /* Centraliza texto */
  }

  /* --- Ajustes específicos para o conteúdo mobile-ipad --- */
  /* Replicar alguns dos estilos que você já tinha para .side.mobile-ipad em index.php */
  .feedbacks-page-body .side.mobile-ipad {
    flex-direction: column;
    /* Garante que os thumbs e location-box fiquem empilhados */
    margin-top: 0;
    /* Ajustado para 0 pois o container principal já tem margin-top */
    align-items: center;
    /* Centraliza horizontalmente o conteúdo */
    width: 100%;
    /* Ocupa a largura total disponível */
    padding: 0 1rem;
    /* Adiciona padding lateral para não colar nas bordas */
  }

  .feedbacks-page-body .side.mobile-ipad .location-box {
    position: static;
    margin-top: 4rem;
    width: 100%;
    text-align: center;
  }

  .feedbacks-carousel {
    gap: 0;
    /* Remove o espaçamento entre os cards quando há apenas 1 por grupo */
    /* Remove a necessidade de flex-wrap, pois sempre será 1 item por "linha" */
  }

  .feedback-card {
    width: 90%;
    /* Aumenta a largura do card para preencher mais a tela */
    max-width: 350px;
    /* Limita a largura máxima para não ficar grande demais em tablets pequenos */
    margin: 0 auto;
    /* Centraliza o card */
    padding: 0rem 0.5rem 0rem;
    /* Ajusta o padding para mobile */
  }

  .feedback-nav-btn.left {
    left: 0px;
    /* Posição à esquerda */
  }

  .feedback-nav-btn.right {
    right: 0px;
    /* Posição à direita */
  }

  .feedback-nav-btn {
    padding: 4px 10px;
  }

  /* NOVO: Esconde os elementos separados (desktop) no mobile */
  .depoimento-img {
    display: none;
  }

  .author-avatar {
    display: none;
  }

  .client-name {
    display: none;
  }

  /* NOVO: Mostra a imagem combinada do mobile no mobile */
  .depoimento-mobile-img {
    display: block;
    /* Torna a imagem visível no mobile */
    width: 100%;
    /* Ajuste max-height conforme a proporção das suas imagens combinadas */
    max-height: 470px;
    object-fit: contain;
    /* Ou 'cover' se preferir que ela preencha a área, mas pode cortar */
    border-radius: 8px;
    /* Mantenha a borda arredondada se desejar */
  }

  .whatwedo-subheader-wrapper .subheader {
    margin-top: 0rem;
  }

  .subheader {
    margin-top: 20rem;
  }

  .page-about .subheader {
    margin-top: 18rem;
  }

  .contact-form-wizard .subheader {
    margin-top: 0rem;
  }

  .feedbacks-main-layout .subheader {
    margin-top: 0rem;
  }

  .feedbacks-main-layout .thumbnail-group {
    right: 120px;
  }

  .thumbnail-group {
    right: 100px;
  }

  .thumbnail-group:hover .thumb-1 {
    transform: translateX(-30px) scale(1.1);
  }

  .thumbnail-group:hover .thumb-2 {
    transform: translateX(0px) scale(1.1);
    z-index: 4;
  }

  .thumbnail-group:hover .thumb-3 {
    transform: translateX(30px) scale(1.1);
    z-index: 3;
  }

  /* Location Box */
  .location-box {
    position: static;
    /* Remover posicionamento absoluto */
    margin-top: 80px;
    /* Espaço do conteúdo acima (ex: imagem) */
    right: auto;
    bottom: auto;
    text-align: center;
    width: 100%;
    padding: 0 10px;
    /* Garantir que o conteúdo não seja muito largo */
    line-height: 1.5;
    color: #000;
  }

  .feedbacks-main-layout .location-title {
    font-size: 0.95rem;
    margin-top: 10px;
    margin-bottom: 5px;
    /* Espaço entre título e detalhes */
  }

  .location-title {
    font-size: 0.95rem;
    margin-bottom: 5px;
    /* Espaço entre título e detalhes */
  }

  .location-details {
    font-size: 0.75rem;
    line-height: 0.9;
    /* Melhor legibilidade */
    white-space: normal;
    /* Permitir que o texto quebre naturalmente */
  }

  .feedbacks-main-layout .location-details {
    margin-bottom: 5px;
  }

  /* Footer */
  footer {
    padding: 0.2rem 0.2rem;
    font-size: 0.75rem;
  }

  /* Esconde elementos apenas para desktop */
  .contactus-left.desktop-only {
    display: none;
  }

  /* Garante que o .form-intro desktop seja escondido se não tiver a classe mobile-only */
  .contactus-left .form-intro {
    display: none;
  }

  .contact-form-wizard .header-overlay {
    display: none;
  }

  /* Ajusta o header-overlay (que inclui header.php e subheader.php) */
  /* Remove o posicionamento fixo para evitar problemas com teclado virtual */
  .header-overlay-mobile {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .header-overlay header {
    background-color: #ffffff;
    /* Garante fundo branco para o header */
  }

  /* Exibe e estiliza a seção da imagem para mobile */
  .mobile-contact-image-section {
    display: block;
    /* Exibe a imagem no mobile */
    width: 100%;
    /* Altura da imagem, cerca de metade da tela, ou o suficiente para a imagem */
    height: 50vh;
    /* 40% da altura da viewport */
    overflow: hidden;
    /* Garante que a imagem não transborde */
    /* Remove qualquer margin/padding que possa vir de .main-content se aplicado */
    margin: 0;
    padding: 0;
    position: relative;
    /* <--- MUITO IMPORTANTE: Define o contexto de posicionamento para os filhos absolutos */

    /* PROPRIEDADES DE BACKGROUND DA IMAGEM */
    background-image: url('../images/escada.png');
    /* Define a imagem de fundo */
    background-size: cover;
    /* Ajusta a imagem para cobrir toda a área sem distorcer */
    background-position: center center;
    /* Centraliza a imagem no contêiner */
    background-repeat: no-repeat;
    /* Evita que a imagem se repita */
    background-attachment: scroll;
    /* A imagem rola com o conteúdo */
    height: 50vh;
  }

  /* .escada-mobile-img {
    display: block;
    width: 100%;
    height: 100%; /
    object-fit: cover; 
    object-position: center; 
  } */

  /* Exibe e estiliza a introdução do formulário para mobile */
  .form-intro.mobile-only-form-intro {
    display: block;
    /* Exibe a introdução no mobile */
    width: 85%;
    height: 60%;
    /* <--- MUITO IMPORTANTE: Faz com que a div ocupe 100% da altura do pai (mobile-contact-image-section) */
    padding: 1rem;
    /* Ajusta o padding para mobile */
    margin: 0;
    /* Remove margens automáticas */
    background: rgba(0, 0, 0, 0.6);
    /* <--- Fundo preto (RGB 0,0,0) com 60% de opacidade (ajuste 0.6 para mais/menos transparência) */
    color: #fff;
    border-radius: 15px;
    box-sizing: border-box;
    /* Garante que padding e borda sejam incluídos na largura */
    position: absolute;
    /* <--- MUITO IMPORTANTE: Posiciona a div em relação ao pai (mobile-contact-image-section) */
    top: 40%;
    /* <--- Posiciona no topo do pai */
    left: 7.5%;
    /* <--- Posiciona à esquerda do pai */
    /* text-align: center; */
    /* Centraliza o texto */
    /* Adiciona Flexbox para centralizar o conteúdo (h1 e p) vertical e horizontalmente dentro da div */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centraliza verticalmente */
    align-items: center;
    /* Centraliza horizontalmente */
    text-align: center;
    /* Mantém o alinhamento de texto dentro de cada elemento */
  }

  .form-intro.mobile-only-form-intro h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .form-intro.mobile-only-form-intro p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  /* Ajusta o contêiner principal para empilhar os elementos */
  .contactus-wrapper {
    flex-direction: column;
    /* Empilha os lados esquerdo e direito verticalmente */
    height: auto;
    /* A altura se ajusta ao conteúdo */
    overflow: visible;
    /* Permite rolagem do conteúdo */
  }

  /* Ajusta o contêiner do formulário (que era o lado direito) */
  .contactus-right {
    width: 100%;
    /* Ocupa a largura total */
    padding: 1.5rem;
    /* Ajusta o padding para mobile */
    padding-top: 1rem;
    /* Menos padding no topo para mobile */
    height: auto;
    /* Altura dinâmica */
    justify-content: flex-start;
    /* Alinha o conteúdo ao topo */
  }

  .contactus-right h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }

  .contactus-right p {
    font-size: 0.8rem;
    margin-bottom: 1rem;
  }

  /* Ajustes dos campos do formulário */
  .form-contact {
    gap: 0.8rem;
    /* Reduz o espaçamento entre elementos do formulário */
  }

  .form-group {
    flex-direction: column;
    /* Empilha os campos de input verticalmente */
    gap: 0.8rem;
    /* Espaçamento entre campos empilhados */
  }

  .form-group input,
  .form-group textarea,
  .form-group select {
    width: 100%;
    /* Campos de input ocupam 100% da largura */
    box-sizing: border-box;
    /* Inclui padding e borda na largura total */
  }

  .upload-container {
    flex-direction: column;
    /* Empilha as caixas de upload */
    gap: 0.8rem;
  }

  .upload-box {
    min-width: unset;
    /* Remove min-width para permitir largura total */
  }

  /* Ajustes dos botões de navegação */
  .send-button {
    flex-direction: row;
    /* Mantém os botões lado a lado se houver espaço */
    flex-wrap: wrap;
    /* Permite que os botões quebrem linha se não couberem */
    justify-content: space-between;
    width: 100%;
    margin-top: 1.5rem;
  }

  .send-button .form-button {
    flex-grow: 1;
    /* Permite que os botões cresçam para preencher o espaço */
    min-width: 48%;
    /* Garante que os botões não fiquem muito pequenos se quebrarem linha */
    box-sizing: border-box;
    margin-bottom: 0.5rem;
    /* Espaço entre botões quebrados */
  }

  .send-button .form-button:first-child {
    margin-right: 0.5rem;
    /* Espaço entre o botão "Previous" e "Next" */
  }

  /* Exibe e estiliza a Location Box para mobile, dentro do formulário */
  .contact-form-location-box {
    display: block;
    /* Exibe no mobile */
    position: static;
    /* Remove o posicionamento absoluto */
    margin-top: 2rem;
    /* Adiciona espaço acima */
    width: 100%;
    text-align: center;
    color: #fff;
    /* Garante que o texto seja visível no fundo */
  }

  .contact-form-location-box .location-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .contact-form-location-box .location-details {
    font-size: 0.8rem;
    line-height: 1.4;
  }



  body.page-projects .subheader {
    margin-top: -1rem;
  }

  body.page-projects .location-box {
    margin-top: 2rem;
  }

  #instagram-feed-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1rem;
  }

  /* .linha-mobile img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
  } */

  /* .linha-2 {
    display: flex;
    gap: 8px;
  } */

  /* .img-mobile-esquerda,
  .img-mobile-direita {
    flex: 1;
  } */

  /* .img-mobile-esquerda img,
  .img-mobile-direita img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
  } */

  #instagram-feed-mobile {
    display: flex;
    flex-direction: column;
    /* Para empilhar as postagens verticalmente */
    gap: 15px;
    /* Espaçamento entre cada postagem */
    padding: 1rem;
    align-items: center;
    /* Centraliza as postagens dentro do contêiner */
    width: 100%;
    /* Garante que o contêiner ocupe toda a largura disponível */
    margin-top: 1rem;
    /* Um pouco de espaço superior */
  }

  .instagram-post-mobile-item {
    width: 100%;
    /* Cada postagem individual ocupa a largura total */
    max-width: 400px;
    /* Limite a largura máxima para que não fiquem muito grandes em telas maiores de mobile */
    border-radius: 12px;
    overflow: hidden;
    /* Garante que qualquer conteúdo que transborde seja cortado, mantendo o border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra suave para dar destaque a cada postagem */
    display: flex;
    justify-content: center;
    /* Centraliza a mídia dentro do item */
    background-color: #fff;
    /* Fundo branco para cada card de postagem */
  }

  .instagram-post-mobile-item img,
  .instagram-post-mobile-item video {
    width: 100%;
    /* A mídia ocupa 100% da largura do seu contêiner pai */
    height: auto;
    /* Mantém a proporção da mídia */
    display: block;
    /* Remove espaços extras comuns em imagens inline */
    border-radius: 12px;
    /* Arredonda as bordas da mídia */
    object-fit: cover;
    /* Garante que a mídia cubra o espaço sem distorcer (cortando se necessário) */
  }

  /* Garante que os contêineres de feed tenham altura mínima para a mensagem de carregamento */
  #instagram-feed-mobile {
    min-height: 100px;
    /* Ou o suficiente para sua mensagem de carregamento */
    display: flex;
    /* Para centralizar a mensagem de loading */
    align-items: center;
    justify-content: center;
  }

  .timeline-container.desktop-only-timeline {
    display: none;
  }

  .timeline-accordion-mobile {
    display: block;
    /* Agora sim, o acordeão será exibido! */
  }

  /* Ajustes para a seção principal da página What We Do no mobile */
  .whatwedo-section {
    padding: 1rem;
    /* Ajuste o padding geral da seção para mobile */
  }

  /* Seu código existente para .timeline-container no mobile (se houver) pode ser removido ou ajustado,
     pois agora estamos escondendo-o completamente. Por exemplo, estas regras não seriam mais necessárias
     se você as tivesse diretamente para .timeline-container: */
  .timeline-container {
    width: 95%;
    /* Esta regra não será aplicada se display: none; */
    padding: 15px;
    /* Esta regra não será aplicada se display: none; */
    margin: 20px auto;
    /* Esta regra não será aplicada se display: none; */
  }

  /* Específicos para os títulos e descrições do acordeão no mobile */
  .accordion-header {
    font-size: 0.95rem;
    /* Ajuste o tamanho da fonte do título do acordeão */
    padding: 12px 15px;
  }

  .accordion-content p {
    font-size: 0.9rem;
    /* Ajuste o tamanho da fonte da descrição do acordeão */
    line-height: 1.5;
  }

  /* Ocultar a marca d'água "Wolves Pro" da timeline existente no mobile, se ainda estiver visível */
  .timeline-watermark {
    display: none;
  }

  .timeline-container {
    width: 95%;
    padding: 15px;
    margin: 20px auto;
  }

  .timeline-main-title {
    font-size: 1.2em;
    margin-bottom: 20px;
  }

  .timeline-watermark {
    font-size: 6em;
  }

  .timeline-content-display {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
    min-height: auto;
  }

  .timeline-icon {
    width: 60px;
    height: 60px;
    margin: 0 0 15px 0;
  }

  .timeline-icon .dot {
    width: 6px;
    height: 6px;
    margin: 3px;
  }

  .timeline-date-title {
    font-size: 1.5em;
  }

  .timeline-description {
    font-size: 1em;
  }

  .timeline-nav {
    /* Permite rolagem horizontal se necessário em telas muito pequenas para o número de marcadores,
           mas a intenção é que os marcadores se distribuam bem */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Alinha à esquerda em vez de space-between */
    padding-bottom: 10px;
    /* Espaço para a barra de rolagem (que vamos tentar ocultar visualmente) */
  }

  /* Esconde a barra de rolagem nativa para um visual mais limpo */
  .timeline-nav::-webkit-scrollbar {
    height: 0px;
    /* Chrome, Safari, Opera */
  }

  .timeline-nav {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .timeline-marker {
    padding: 0 15px;
    /* Ajusta o espaçamento para mobile */
  }

  .timeline-track {
    bottom: 5px;
  }

  .timeline-marker .marker-dot {
    bottom: 0px;
  }

  .timeline-line-connector {
    height: 30px;
    margin: 5px auto;
  }

}

/* Tablet (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1399px) and (orientation: landscape) and (pointer: coarse) and (hover: none) {

  .side.mobile-ipad,
  .side.left,
  .side.right,
  .founded-section {
    display: none;
  }

  .subheader h1 {
    display: none;
  }

  body.feedbacks-page-body .subheader {
    display: flex;
    flex-direction: row;
  }

  body.feedbacks-page-body .subheader h1 {
    display: flex;
    margin-top: 2rem;
    margin-left: 2rem;
  }

  body.feedbacks-page-body .feedbacks-section {
    margin-top: 2rem;
  }

  body.page-about .social-group {
    display: none;
  }

  body.page-projects .social-group {
    display: none;
  }

  body.about-page.tablet-background .header-overlay {
    top: 150px;
    /* Ajuste conforme o quanto você quer descer */
  }

  nav a {
    text-decoration: none;
    color: #000;
    font-size: 20px;
    /* Ajustar tamanho da fonte */
    padding: 0px 0px;
    /* Aumentar área de toque */
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 40px;
  }

  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    /* Remove a sublinha do link */
  }

  .logo-wolves img {
    height: 50px;
    margin-right: 1rem;
  }

  .logo-texto {
    font-size: 1rem;
    font-weight: bold;
    color: #000;
  }

  .page-background .subheader {
    margin-top: 26rem;
    flex-direction: column;
    /* Empilhar título e grupo social */
    padding: 0rem 0rem;
    /* Ajustar preenchimento */
    align-items: center;
    /* Centralizar conteúdo */
    text-align: center;
    /* Centralizar texto */
    padding-left: 1rem;
    /* Ajustar para corresponder ao preenchimento geral */
  }

  .whatwedo-main-layout .subheader {
    margin-top: 3rem;
    flex-direction: column;
    /* Empilhar título e grupo social */
    padding: 0rem 0rem;
    /* Ajustar preenchimento */
    align-items: center;
    /* Centralizar conteúdo */
    text-align: center;
    /* Centralizar texto */
    padding-left: 1rem;
    /* Ajustar para corresponder ao preenchimento geral */
  }

  .whatwedo-section {
    flex-direction: column;
    align-items: center;
    padding: 4rem 0rem;
    /* Ajustar preenchimento */
  }

  body.page-about .subheader {
    margin-top: 0rem;
  }

  body.page-projects .subheader {
    margin-top: 0rem;
  }

  body.feedbacks-page-body .subheader {
    margin-top: -1rem;
  }

  body.feedbacks-page-body .feedbacks-section {
    margin-top: 4rem;
    margin-bottom: 2rem;
  }

  .side.tablet {
    display: flex;
    flex-direction: column;
    margin-top: 0rem;
    /* Empilhar conteúdo verticalmente */
    align-content: center;
    justify-content: center;
  }

  .thumbnail-group .thumb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid white;
    object-fit: cover;
    transition: all 0.3s ease-in-out;
    z-index: 2;
  }

  .thumbnail-group {
    right: 35%;
  }

  .thumbnail-group:hover .thumb-1 {
    transform: translateX(-30px) scale(1.1);
  }

  .thumbnail-group:hover .thumb-2 {
    transform: translateX(0px) scale(1.1);
    z-index: 4;
  }

  .thumbnail-group:hover .thumb-3 {
    transform: translateX(30px) scale(1.1);
    z-index: 3;
  }

  /* Location Box */
  .location-box {
    position: static;
    /* Remover posicionamento absoluto */
    margin-top: 100px;
    /* Espaço do conteúdo acima (ex: imagem) */
    right: auto;
    bottom: auto;
    text-align: center;
    width: 100%;
    padding: 0 10px;
    /* Garantir que o conteúdo não seja muito largo */
    line-height: 1.5;
    color: #000;
  }

  .location-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0rem;
  }

  .location-details {
    font-size: 1rem;
    line-height: 0.5;
    font-weight: 600;
    white-space: pre-line;
  }

  .social-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 65px;
    padding-right: 30px;
  }

  .social-icons {
    display: flex;
    gap: 0.5rem;
  }

  .social-icons img {
    width: 70px;
    height: 70px;
    background: #FC732E;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid white;
  }

  .our-services {
    padding: 8px 40px;
    background-color: #FC732E;
    color: #000;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 550;
    border-radius: 50px;
    border: 1px solid white;
    text-decoration: none;
  }

  .logo-menu img {
    height: 60px;
  }

  body.contact-form-wizard .logo-menu img {
    height: 35px;
  }

  .icon-circle {
    width: 60px;
    padding: 4px;
    background-color: #FC732E;
    /* Laranja */
    border-radius: 50%;
    border: 2px solid white;
    object-fit: contain;
    transition: box-shadow 0.2s ease-in-out;
  }

  .founded-image {
    width: 100%;
    /* ajuste conforme necessário */
    height: 100%;
    display: block;
    /* centraliza horizontalmente */
    padding-top: 0em;
    padding-bottom: 0em;
  }

  .contact_us {
    padding: 10px 17px;
    background-color: #FC732E;
    color: #000;
    font-weight: 800;
    font-size: 23px;
    text-decoration: none;
    border-radius: 25px;
    border: 2px solid white;
  }

  .founded-section-tablet {
    display: flex;
  }

  body.contact-form-wizard .form-intro {
    margin-top: 23rem;
  }

  body.page-about .side.tablet {
    display: flex;
    flex-direction: row;
    margin-top: 0rem;
    /* Empilhar conteúdo verticalmente */
    align-content: center;
    justify-content: center;
    margin-bottom: 3rem;
  }

  body.page-projects .side.tablet {
    display: flex;
    flex-direction: row;
    margin-top: 3rem;
    /* Empilhar conteúdo verticalmente */
    align-content: center;
    justify-content: center;
    margin-bottom: 4rem;
  }

  body.page-about .location-box,
  body.page-projects .location-box {
    margin-top: -2rem;
    margin-right: 2rem;
  }

  body.page-about .social-icons,
  body.page-projects .social-icons {
    gap: 0.2rem;
    /* Espaço entre ícones sociais */
    width: 100%;
    /* Garantir centralização correta */
    margin-left: 2rem;
  }

  body.page-about .our-services {
    width: 90%;
    /* Tornar botão mais largo */
    max-width: 240px;
    /* Limitar largura máxima */
    padding: 7px 0;
    /* Ajustar preenchimento vertical */
    font-size: 1.7rem;
    /* Ajustar tamanho da fonte */
    text-align: center;
    margin-top: 0rem;
    margin-right: 2rem;
    margin-bottom: 0rem
      /* Remover margem superior se o gap gerencia o espaçamento */
  }

  body.page-projects .our-services {
    width: 90%;
    /* Tornar botão mais largo */
    max-width: 240px;
    /* Limitar largura máxima */
    padding: 7px 0;
    /* Ajustar preenchimento vertical */
    font-size: 1.7rem;
    /* Ajustar tamanho da fonte */
    text-align: center;
    margin-top: 0rem;
    margin-right: 2rem;
    margin-bottom: 0rem
      /* Remover margem superior se o gap gerencia o espaçamento */
  }

  body.page-projects .carousel-dynamic {
    margin-top: 1rem;
  }

  body.page-projects .carousel-btn.left {
    margin-top: -5rem;
    left: 5px;
  }

  body.page-projects .carousel-btn.right {
    margin-top: -5rem;
    right: 5px;
  }

}

/* Iphone 14 e 15 Pro Max (430 x 932px) */
@media only screen and (device-width: 430px) and (device-height: 932px) and (orientation: portrait) {
  .social-group {
    flex-direction: row;
    /* Empilhar ícones sociais e botão "Our Services" */
    padding-top: 0;
    /* Remover preenchimento superior, pois está empilhado */
    padding-right: 0;
    /* Remover preenchimento direito */
    width: 100%;
    align-items: center;
    /* Centralizar conteúdo */
    gap: 0px;
    /* Espaço entre ícones sociais e botão */
    margin-top: 1em;
  }

  .location-box {
    position: static;
    /* Remover posicionamento absoluto */
    margin-top: 0.5em;
    /* Espaço do conteúdo acima (ex: imagem) */
    right: auto;
    bottom: auto;
    text-align: center;
    width: 100%;
    padding: 0 5px;
    /* Garantir que o conteúdo não seja muito largo */
    line-height: 1.5;
    color: #000;
  }

  .page-projects .social-group {
    margin-top: 0em;
  }

  .subheader {
    margin-top: 33rem;
  }

  .whatwedo-page-body .subheader {
    margin-top: 2rem;
  }

  .page-about .subheader {
    margin-top: 0rem;
  }

  .page-about .side.mobile-ipad {
    margin-top: 29rem;
  }

  .main-content,
  .carousel-dynamic-section,
  .feedbacks-section {
    padding: 2.8rem 1rem;
  }
}

/* Ipad Pro 12.9" (1366 x 1024px) em modo paisagem */
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (orientation: landscape) {
  .social-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 45px;
    padding-right: 30px;
    margin-top: 0em;
  }

  .thumbnail-group {
    right: 40%;
  }

  body.page-about .location-box,
  body.page-projects .location-box {
    margin-top: -2rem;
    margin-right: 10em;
  }

  .founded-image {
    width: 100%;
    /* ajuste conforme necessário */
    height: 100%;
    display: block;
    /* centraliza horizontalmente */
    padding-top: 3em;
    padding-bottom: 4em;
  }

  .carousel-dynamic {
    padding-top: 9em;
    padding-bottom: 8em;
  }

  body.feedbacks-page-body .social-group {
    margin-top: 2em;
  }

  body.feedbacks-page-body .feedbacks-section {
    margin-top: 8rem;
    margin-bottom: 12rem;
  }

}

/* ====== AJUSTES PARA TELAS ULTRA-LARGAS (ACIMA DE 1920px) ====== */
@media screen and (min-width: 1799px) {

  /* Aqui virão todos os novos estilos para telas grandes */
  html {
    font-size: 18px;
    /* Aumente a base para 18px (ou 20px, experimente!) */
    /* Isso fará com que 1rem = 18px, escalando todas as unidades 'rem' */
  }

  /* Ajustes específicos para fontes em PX ou que precisam de maior destaque */
  /* Exemplo: Se 'nav a' ainda parecer pequeno, ou 'logo-texto' */
  nav a {
    font-size: 1.1rem;
    /* Converta para rem para escalar com a base */
  }

  .logo-texto {
    font-size: 1.2rem;
    /* Aumenta a logo um pouco mais */
  }

  /* Para títulos principais (h1, h2, etc.), podemos usar clamp() para fluidez */
  .subheader h1 {
    /* clamp(tamanho-minimo, tamanho-ideal-baseado-na-viewport, tamanho-maximo) */
    font-size: clamp(2.7rem, 4vw, 5rem);
    /* Explicação:
       - 2.7rem: Tamanho mínimo, para não ficar menor que o design original.
       - 4vw: Tamanho ideal, 4% da largura da viewport (escalará com a tela).
       - 5rem: Tamanho máximo, para não ficar excessivamente grande em telas gigantes.
    */
  }

  .subheader2 h1 {
    font-size: clamp(2.7rem, 4vw, 5rem);
  }

  .location-title {
    font-size: 1.2rem;
    /* Aumenta o título da localização */
  }

  .location-details {
    font-size: 1rem;
    /* Aumenta os detalhes da localização */
  }

  /* Outros elementos de texto que precisam ser maiores */
  .contact_us {
    font-size: 1.5rem;
    /* Aumenta o texto dos botões de contato */
    padding: 0.8rem 1.8rem;
    /* Ajusta o padding para o novo tamanho da fonte */
  }

  .our-services {
    font-size: 1.8rem;
    padding: 0.8rem 6rem;
  }

  /* Ícones sociais e outros elementos baseados em PX */
  .social-icons img {
    width: 60px;
    /* Aumenta o tamanho dos ícones sociais */
    height: 60px;
  }

  .icon-circle {
    width: 55px;
    /* Aumenta o tamanho dos ícones do menu */
    height: 55px;
    padding: 6px;
  }

  .logo-menu img {
    height: 53px;
    /* Aumenta o logo do menu */
  }

  .logo-wolves img {
    height: 50px;
    /* Aumenta o logo da cabeça */
  }

  .subheader {
    margin-top: 3rem;
    /* Aumenta o espaçamento superior do subheader */
  }

  /* 3.1. Controlar a Largura Máxima do Conteúdo Principal */
  /* Isso evita que os 'side' elementos se estiquem infinitamente */
  .main-content {
    max-width: 2200px;
    /* Defina uma largura máxima razoável para o conteúdo principal */
    margin: 6rem auto;
    /* Centraliza o conteúdo */
    padding: 2rem 1rem;
    /* Ajusta o padding */
  }

  /* 3.2. Manter a Proporção das Áreas de Imagem */
  /* Usaremos 'aspect-ratio' para o .main-image-area. É a forma mais moderna. */
  .main-image-area {
    /* Define uma proporção de 16:9 (largura para altura) para as imagens. */
    /* Ajuste para 4/3, 1/1 ou o que melhor se adequar ao seu design. */
    aspect-ratio: 16 / 9;
    /* Remove a altura fixa/mínima que estava causando achatamento */
    height: auto;
    /* Deixa o aspect-ratio controlar a altura */
    min-height: unset;
    /* Remove o min-height que estava limitando */
  }

  /* Se 'aspect-ratio' precisar de suporte para navegadores mais antigos:
     Você pode usar o "padding-bottom hack" como fallback ou alternativa:
     .main-image-area {
       position: relative;
       width: 100%;
       padding-bottom: 56.25%; // (9 / 16) * 100% para uma proporção 16:9
       height: 0; // Importante para o hack funcionar
       overflow: hidden;
     }
     .main-image-display, .frame-overlay-img {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
     }
  */

  /* 3.3. Ajuste Fino do Posicionamento e Tamanho dos '.side' */
  .side {
    /* Garante que os lados preencham o espaço de forma mais controlada */
    flex: 1;
    /* Mantém a flexibilidade */
    /* Você pode adicionar um min-width para cada lado se quiser garantir que não encolham demais */
    /* min-width: 800px; */
  }

  /* 3.4. Reajuste da 'location-box' */
  /* Como a altura do '.side right' pode ter mudado, o 'bottom' fixo em 'px'
     pode não ser ideal. Vamos ajustá-lo para uma porcentagem ou valor maior. */
  .location-box {
    bottom: 82%;
    /* Ajuste a porcentagem conforme a necessidade */
    right: 65%;
    /* Ajuste a posição direita */
    /* O font-size já foi ajustado na Etapa 2 */
  }

  /* 3.5. Ajustar o 'thumbnail-group' no 'side left' */
  /* Se o 'side left' ficar muito alto, os thumbnails podem parecer muito no topo */
  .side.left .thumbnail-group {
    top: 2%;
    /* Ajuste a porcentagem para descer os thumbnails */
    right: 7%;
    /* Ou ajuste a posição direita */
  }

  /* Aumentar o tamanho das miniaturas para telas grandes */
  .thumbnail-group .thumb {
    width: 80px;
    height: 80px;
  }

  /* Ajustar o espaçamento do hover para as miniaturas maiores */
  .thumbnail-group:hover .thumb-2 {
    transform: translateX(25px) scale(1.1);
    /* Aumenta o deslocamento */
  }

  .thumbnail-group:hover .thumb-3 {
    transform: translateX(50px) scale(1.1);
    /* Aumenta o deslocamento */
  }

  /* Ajustar o contact us em tablet para telas grandes */
  .contact_us {
    padding: 10px 17px;
    font-size: 20px;
  }

  .carousel-dynamic-section {
    padding: 8rem;
  }

  .contact-left {
    margin-top: 22.4rem;
    left: 2.3rem
  }

  .carousel-btn {
    top: 38%;
  }

  .timeline-container {
    width: 100%;
    padding: 2rem;
    max-width: 1700px;
    height: 550px;
    margin: 4rem auto;
    font-size: 1.2rem;
  }

  .feedbacks-section {
    margin-top: 7rem;
    margin-bottom: 12rem;
  }

  .depoimento-img {
    width: 130%;
  }

  .feedbacks-carousel {
    padding: 0 2rem;
    gap: 9rem;
    /* Ajusta o padding para o carrossel de depoimentos */
  }

  .author-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    left: 0rem;
  }

  .client-name {
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
    left: 4rem;
  }

  .header2-icon-circle {
    width: 50px;
  }

  .contactus-left .form-intro {
    padding: 4rem;
    width: 90%;
    margin: 50% auto 0;
    /* Esconde a introdução do formulário no desktop */
  }

  .form-intro h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
  }

  .form-intro p {
    font-size: 1.2rem;
  }

  .timeline-watermark {
    font-size: 8em;
  }

  .media-filters {
    gap: 10px;
    /* Espaço entre os botões */
  }

  .filter-btn {
    padding: 7px 13px;
    /* Preenchimento interno */
    font-size: 23px;
  }

  .media-filters {
    margin: 20px 0;
  }

}

@media screen and (min-width: 2559px) {

  /* Aqui virão todos os novos estilos para telas grandes */
  html {
    font-size: 26px;
    /* Aumente a base para 18px (ou 20px, experimente!) */
    /* Isso fará com que 1rem = 18px, escalando todas as unidades 'rem' */
  }

  .location-details {
    font-size: 0.8rem;
  }

  .timeline-container {
    width: 100%;
    padding: 2rem;
    height: 830px;
    max-width: 22390px;
    margin: 3rem auto;
    font-size: 1.2rem;
  }

  .timeline-watermark {
    font-size: 10em;
  }

  .timeline-content-display {
    margin-top: 4rem;
  }

  .feedbacks-section {
    margin-top: 7rem;
    margin-bottom: 10rem;
  }

  .depoimento-img {
    width: 145%;
  }

  .feedbacks-carousel {
    padding: 0 2rem;
    gap: 9rem;
    /* Ajusta o padding para o carrossel de depoimentos */
  }

  .author-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    left: 0rem;
  }

  .client-name {
    font-size: 0.5rem;
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.2rem;
    left: 3rem;
  }

  .media-filters {
    gap: 10px;
    /* Espaço entre os botões */
  }

  .filter-btn {
    padding: 10px 25px;
    /* Preenchimento interno */
    font-size: 30px;
  }

  .media-filters {
    margin: 30px 0;
  }
}

@media screen and (min-width: 768px) {

  /* Garante que a linha do tempo do desktop esteja visível */
  .timeline-container.desktop-only-timeline {
    display: block;
  }

  /* Garante que o acordeão móvel esteja escondido no desktop */
  .timeline-accordion-mobile {
    display: none;
  }
}