:root {
  --domus-dark-blue: #001f45; 
  --domus-light-blue: #007bff;
  --domus-dark-gray: #343a40; 
  --domus-accent: #6610f2;
  --domus-light-gray: #ececec;
}
.text-primary {
  color: var(--domus-dark-blue)!important;
}
.bg-cinza {
  background-color: var(--domus-light-gray)!important;
}
body {
  font-family: 'Inter', sans-serif;
  color: #212529;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  color: var(--domus-dark-blue);
  font-weight: 600;
}

.hero {
  position: relative;
  height: 100vh;
  background: linear-gradient(to bottom, var(--domus-dark-blue), #003366);
  overflow: hidden;
  padding-top: 60px;
}

.logo-img {
  max-width: 80%;
  z-index: 2;
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.6));
}

.scroll-down {
  position: absolute;
  bottom: 20px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}

/* Bolhas */
.circle-container {
  position: absolute;
  bottom: -20px;
  width: var(--circle-size);
  height: var(--circle-size);
  left: var(--circle-left);
  animation: floatUp var(--float-duration) linear infinite;
  animation-delay: var(--float-delay);
  z-index: 1;
}

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(hsl(180, 100%, 80%), hsl(180, 100%, 80%) 10%, hsla(180, 100%, 80%, 0) 56%);
  mix-blend-mode: screen;
  animation: fade-frames 2s ease-in-out infinite, scale-frames var(--scale-duration) ease-in-out infinite;
  animation-delay: var(--scale-delay), var(--scale-delay);
  filter: blur(1px);
}

@keyframes floatUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

@keyframes fade-frames {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes scale-frames {
  0%, 100% { transform: scale3d(0.5, 0.5, 1); }
  50% { transform: scale3d(1.8, 1.8, 1); }
}

#inicio {
  background-color: #fff;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

#inicio p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

#inicio i {
  color: var(--domus-dark-blue);
}

#marketing-digital {
  padding-top:4rem;
  padding-bottom: 3rem;
}
@media (max-width: 768px) {
  #marketing-digital {
    padding-top: 0rem;
    padding-bottom: 5rem;
    text-align: center;
  }
}
#servicos .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#servicos .card:hover {
  border-bottom: 1px solid var(--domus-dark-blue);
  border-top: 1px solid var(--domus-dark-blue);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* sombra mais intensa */
  transform: translateY(-5px);
}

/* Efeito suave no hover */
.grayscale-hover {
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.grayscale-hover:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Estilos para a Seção Cases de Sucesso */
#cases-de-sucesso {
  padding-top: 4rem;
  padding-bottom: 4rem;
  /* border-top: 1px solid var(--domus-light-gray); */ /* Opcional: Adicionar borda superior */
  /* border-bottom: 1px solid var(--domus-light-gray); */ /* Opcional: Adicionar borda inferior */
}

/* Estilo para o card de case de sucesso */
.custom-case-card {
  border-radius: 0.75rem; /* Bordas mais arredondadas */
  overflow: hidden; /* Garante que a imagem arredondada se encaixe */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-case-card:hover {
  transform: translateY(-8px); /* Eleva o card no hover */
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important; /* Sombra mais pronunciada */
}

.custom-case-card img {
  border-radius: 0.75rem 0 0 0.75rem; /* Arredonda apenas os cantos da imagem no card */
}

.custom-case-card .card-body {
  padding: 2rem;
}

/* Ajustes para telas menores */
@media (max-width: 767.98px) {
  .custom-case-card img {
    border-radius: 0.75rem 0.75rem 0 0; /* Arredonda os cantos superiores da imagem em mobile */
    height: 250px; /* Altura fixa para a imagem em mobile */
  }
}

/* Cor dos ícones de check na lista */
.custom-case-card .bi-check-circle-fill {
  color: var(--domus-dark-blue); /* Usa a cor primária da Domus */
}
#parceiros {
  background-color: var(--domus-light-gray);
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;

  border-bottom: 1px solid  #e2e3e4;
  border-top: 1px solid  #e2e3e4;
}

#contato {
  background-color: var(--domus-light-gray);
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}
.fs-7 {
  font-size: 0.875rem;
}
footer h5 {
  font-size: 1rem;
  color: var(--domus-light-gray)!important;
  font-weight: 600;
}

footer p {
  color: var(--domus-light-gray)!important;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
  }
  
  /* Links rápidos */
  .link-footer {
    color: var(--domus-light-gray)!important;
    font-size: 0.8rem; /* Aumenta o tamanho da fonte */
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease, padding-left 0.3s ease;
  }

  .link-footer:hover {
    color: var(--domus-light-blue)!important; /* Cor de destaque ao passar o mouse */
    padding-left: 10px; /* Adiciona um efeito de deslocamento ao passar o mouse */
  }

  /* Redes sociais */
  .link-social {
    color: var(--domus-light-gray)!important;
    font-size: 20px; /* Aumenta o tamanho dos ícones */
    transition: color 0.3s ease, transform 0.3s ease;
  }

  .link-social:hover {
    color: var(--domus-light-blue)!important; /* Cor de destaque ao passar o mouse */
    transform: scale(1.2); /* Aumenta o ícone ao passar o mouse */
  }