:root {
  --text-color: #667085;
  --title-color: #752aff;
  --border-color: #EAECF0;
  --font-family: "Metropolis", sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal; 
}

body {
  font-family: var(--font-family);
  background-color: var(--border-color);
  font-weight: normal; 
}

body, h1, p {
  font-family: 'Metropolis', sans-serif;
  margin-bottom: 10px;
}

.inicio-image img {
  width: 100%;
  height: auto;
}

.logo {
  width: 150px;
  height: auto;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0em;
  background-color: var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.menu-item a {
  text-decoration: none;
}

.entrar-button {
  background-image: linear-gradient(to right, #008BC3, #57518E);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
}

nav ul {
  display: flex;
  gap: 2rem;
  list-style-type: none;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Página Principal */
.full-screen-image img {
  width: 100%;
  height: 60vh;
  object-fit: contain;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  padding-top: 70px;
}

[id]:target::before {
  content: "";
  display: block;
  height: 200px;  /* altura da sua barra de navegação */
  margin: -70px 0 0;  /* deslocamento negativo da altura da sua barra de navegação */
  visibility: hidden;
  pointer-events: none; /* isso garante que o pseudo-elemento não interfira nos cliques */
}

/* Adicione este código ao seu arquivo CSS */
.flip-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.flip-card {
  flex: 0 0 calc(50% - 20px); 
  margin: 10px;  
}

.flip-card {
  width: 100px;  /* Largura fixa */
  height: 150px; /* Altura fixa */
  perspective: 1000px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease-in-out;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg) scale(0.9);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  height: 40%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.flip-card-front {
  background-color: var(--border-color); /* Mesma cor de fundo que seu cartão de oferta */
}

.flip-card-back {
  background-color: var(--border-color); 
  transform: rotateY(180deg) scale(0.9);
}

header#sobre-nos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 30px 0;
  font-size: 1rem; 
  background-color: #c9c9c9; 
}

/* Existing CSS */
header#servicos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 100px 0;
  font-size: 1rem; 
}

.method a {
  text-decoration: none;
  color: inherit; /* Isso manterá a cor do texto inalterada */
}

header#contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 50px 0;
  font-size: 1rem; 
  background-color: #c9c9c9;
}

/* Updated CSS */
.contato-titulo {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #0a0a0a;
}

.contact-info {
  text-align: center;
  padding: 20px;
  background-color: var(--border-color);
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.contact-info p {
  margin-bottom: 4rem;
}

.contact-methods {
  display: flex;
  justify-content: space-around;
  gap: 2rem;
  width: 100%;
}

.method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.method img {
  width: 24px;
  height: 24px;
}

/* Nossas Ofertas */
.ofertas-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.oferta-item {
  width: 400px;
  margin: 50px;
  text-align: center;
  background-color: var(--border-color);
}

.oferta-item img {
  width: 25%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.oferta-item:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
}

h3 {
  font-size: 1rem; 
}

header#sobre-nos h1 {
  font-size: 1.5rem;
}

header#servicos h1 {
  font-size: 1.5rem;
}

.contact-info {
  padding: 0px 40px; 
  background-color: #c9c9c9; 
  border-radius: 10px;
}

.about-text {
  padding: 20px 40px;
  background-color: #c9c9c9;
  border-radius: 10px; 
  margin: 20px 0;
  text-align: justify;
}

.contact-item {
  width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  border-radius: 30px;
  background-color: #F9FAFB;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}

.contact-cards-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; 
  flex-wrap: wrap; 
}

/* Rodapé */
footer {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #c9c9c9;
  padding: 0;  
}

.servico-card {
  flex-basis: calc(33.333% - 1rem); 
  margin: 0.5rem;
  box-sizing: border-box;
  text-align: center;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Ajustes específicos para a imagem do produto */
.produto-img.ajustada {
  width: 50%; /* Define a largura da imagem como 50% do contêiner */
  height: auto;
  display: block;
  margin: 20px auto;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.produto-img.ajustada:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Estilização do contêiner de serviços */
header#servicos {
  padding: 20px;
  text-align: center;
  background-color: var(--border-color);
}

/* Ajustes para responsividade */
@media (max-width: 768px) {
  .produto-img.ajustada {
      width: 70%; /* Ajusta a largura da imagem para 70% em dispositivos móveis */
  }
}


/* Media Queries */
@media only screen and (max-width: 768px) {
  .contato-titulo {
      width: 100%;
      text-align: center;
      font-size: 2rem; 
  }

  /* Ofertas */
  .oferta-item {
      width: 90%;
      margin: 15px;
  }

  #servicos h1 {
      position: relative;
      top: -60px; 
      font-weight: normal; 
      font-size: 1.5rem;
  }

  .full-screen-image img {
      height: auto;
  }

  .telefone, .email {
      margin: 0;
  }

  .contact-info {
      padding: 0px;  /* Removed padding */
      text-align: center;
      background-color: var(--border-color);
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: justify;
  }

  .contact-item {
      width: 100%;
      padding: 15px;
  }

  nav {
      flex-direction: column;
      align-items: center;
  }

  .menu-item {
      margin: 5px 10px;  /* Adiciona margens ao redor de cada item do menu */
  }

  .entrar-button {
      font-size: 0.8rem;  /* Reduz o tamanho da fonte do botão */
      padding: 8px 16px;  /* Reduz o preenchimento do botão */
  }

  .oferta-item img {
      width: 100%;
  }

  .front-card {
      font-size: 16px;
      text-align: center;
  }

  header#servicos .service-item {
      flex: 0 0 100%;
      margin: 10px 0;
  }

  .flip-card {
      margin-bottom: 80px; /* Ajuste o valor conforme necessário */
  }

  header, footer {
      padding-left: 20px;
      padding-right: 20px;
  }

  .about-text {
      padding: 20px 40px;
      background-color: #c9c9c9;
      text-align: justify;
  }

  .method {
      display: flex;
      align-items: center;
      justify-content: center; /* Isso centralizará horizontalmente */
      flex-direction: column;  /* Isso garantirá que a imagem e o texto estejam um acima do outro */
      text-align: center; /* Isso centralizará o texto horizontalmente */
  }

  .method p {
      margin-top: 10px; /* Ajuste conforme necessário */
      margin-bottom: 10px; /* Ajuste conforme necessário */
  }

  .about-texto {
      padding: 20px 40px;
      background-color: #c9c9c9;
      text-align: justify;
  }

  .paginas ul {
      flex-direction: row;
      flex-wrap: wrap; 
      justify-content: center; 
      align-items: center;  
  }

  h3 {
      font-size: 0.9rem;
  }

  .contact-info {
      background-color: #c9c9c9;
      text-align: justify;
  }

  footer form .email-capture {
      flex-direction: column;
      align-items: center;
  }

  footer {
      height: auto;
      padding: 0px;
      background-color: #c9c9c9;
  }
}