/* Estilos customizados para a landing page */

:root{
    --primary: #17233bff;
    --secondary: #dab662ff;
    --white: #fefcffff;
}

body {
    font-family: Arial, sans-serif;
}

.bg-primary{
    background-color: var(--primary) !important;
}

.bg-secondary{
    background-color: var(--secondary) !important;
}

.text-blue {
    color: var(--primary);
}

.text-gold {
    color: var(--secondary);
}   

.btn-primary{
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.btn-secondary{
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.hero-section {
    padding: 100px 0;
    background: url('../img/familly_banner_3.png') no-repeat; /* Placeholder para fundo */
    background-position: right bottom;
    background-size: cover;
    height: 100dvh;
}

#beneficios .col-md-4 {
    margin-bottom: 30px;
}

#como-funciona .col-md-4 {
    text-align: center;
    margin-bottom: 30px;
}

footer {
    background-color: #343a40;
}

.btn-whatsapp {
    position: fixed;
    bottom: 10px;
    right: 10px;
}

.image-box {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.image-box img {
  display: block;
  width: 100%;
  height: auto;
}

/* Overlay */
.image-box::before {
  content: "Selecionar";
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  
  /* background: rgba(0, 0, 0, 0.6); */
  background: rgb(23, 35, 59, 0.7);
  color: white;
  font-weight: bold;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transition: opacity 0.3s ease;

  border-radius: 8px; /* opcional */
}

/* Hover ativa overlay */
.image-box:hover::before {
  opacity: 1;
}

@media only screen and (max-width: 500px) {
    .mobile-hide{ display: none !important; }
}

@media only screen and (max-width: 500px) {
    .mobile{ display: inline !important; }
}

@media only screen and (min-width: 500px) {
    .mobile{ display: none !important; }
}