/* Importamos la fuente Poppins para sobrescribir la de Bootstrap */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa; /* Fondo gris muy clarito de Bootstrap */
}

/* ============ HERO BANNER PERSONALIZADO ============ */
.hero-banner {
    /* Mantenemos tu imagen de fondo */
    background-image: linear-gradient(rgba(5, 16, 54, 0.6), rgba(5, 16, 54, 0.6)), url('img/banner.jpg');
    background-size: cover;
    background-position: center;
    height: 70vh; /* Altura */
    min-height: 500px;
}

/* ============ TRUCO DEL BUSCADOR FLOTANTE ============ */
.search-wrapper {
    margin-top: -60px; /* Sube la caja sobre el banner */
    position: relative;
    z-index: 10;
}

.search-card {
    border-radius: 15px; /* Bordes redondeados más suaves */
}

/* ============ EFECTO HOVER EN TARJETAS ============ */
.hover-effect {
    transition: transform 0.3s ease;
}

.hover-effect:hover {
    transform: translateY(-5px); /* Se levanta un poco al pasar el mouse */
}

/* Ajustes de color para sobrescribir el azul por defecto de Bootstrap si quieres */
/* .text-primary { color: #3B71FE !important; } */
/* .btn-primary { background-color: #3B71FE !important; border-color: #3B71FE !important; } */

/* ESTILOS DEL FOOTER */
.hover-white:hover {
    color: #fff !important;
    transition: color 0.3s ease;
}

.social-icons .btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.social-icons .btn:hover {
    background-color: #0d6efd; /* Color azul primario al pasar el mouse */
    border-color: #0d6efd;
    transform: translateY(-3px); /* Efecto de elevación */
}