/* CSS Personalizado */

.hero-section,
.about-section {
    position: relative;
    overflow: hidden; /* importante pra não vazar o blur */
    color: white;
}

.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/GettyImages-172672886.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(4px);
    z-index: -1;
}

.about-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../img/court.jpg');
    background-size: cover;
    background-position: center;
    filter: blur(4px);
    z-index: -1;
}

.hero-overlay {
    /* 4. Cria a sobreposição escura */
    background-color: rgba(0, 0, 0, 0.8); /* Ajuste a opacidade (0.7) conforme desejar */

    /* 5. Usa 100% da altura da tela (viewport height) */
    min-height: 75vh;

    /* 6. Usa Flexbox para centralizar o conteúdo verticalmente */
    display: flex;
    align-items: center;
}

#servicos .card {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.7s ease forwards;
}

#servicos .card:nth-child(1) { animation-delay: .1s; }
#servicos .card:nth-child(2) { animation-delay: .25s; }
#servicos .card:nth-child(3) { animation-delay: .4s; }
#servicos .card:nth-child(4) { animation-delay: .55s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 7. Estilo personalizado para o botão */
.btn-primary {
    background-color: #2136a1; /* Cor dourada/bege (extraída da imagem) */
    color: #fff; /* Cor do texto escura */
    border: none;
    font-weight: 600;
    padding: 0.75rem 1.5rem; /* Tamanho do padding */
}

.btn-golden:hover {
    background-color: #b8956f; /* Cor um pouco mais escura no hover */
    color: #212529;
}

.navbar-opacity {
  position: sticky; /* mantém a navbar fixa no topo */
  top: 0;
  z-index: 1000; /* garante que fique acima do conteúdo da página */
  background: transparent;
}

.navbar-opacity::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #E3DFD8; /* cor do fundo */
  opacity: 0.85; /* transparência apenas no fundo */
  z-index: -1; /* fica atrás do conteúdo */
  pointer-events: none; /* não interfere nos cliques */
}

.navbar-opacity .container-fluid {
  position: relative; /* para o pseudo-elemento se alinhar corretamente */
}

.diamond {
    width: 80px;
    height: 80px;
    background-color: #0d47a1; /* azul */
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* opcional, para bordas suaves */
}
.contact-diamond {
    width: 50px;
    height: 50px;
    background-color: #0d47a1; /* azul */
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px; /* opcional, para bordas suaves */
}
.diamond i {
    transform: rotate(-45deg); /* corrige rotação do ícone */
    font-size: 2rem;
    color: white;
}

.contact-diamond i {
    transform: rotate(-45deg); /* corrige rotação do ícone */
    font-size: 1.5rem;
    color: white;
}

.contact-col h5,
.contact-col p {
  color: #212529;
}

.contact-col a {
    transition: all .25s ease;
}

.contact-col .contact-diamond {
    transition: transform .25s ease;
}

.contact-col a > div:nth-child(2) {
    transition: transform .25s ease;
}

/* HOVER */
.contact-col a:hover .contact-diamond {
    transform: rotate(45deg) scale(1.15);
}

.contact-col a:hover > div:nth-child(2) {
    transform: translateX(6px);
}

.fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeInAnimation 1s ease-in forwards;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}