/* Estilos personalizados para el botón de contacto en el header */

/* Asegurar que el botón sea visible sobre fondos claros y oscuros */
.header .btn-main {
    background-color: #fff !important;
    color: hsl(207, 82%, 30%) !important;
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.header .btn-main:hover {
    background-color: hsl(207, 82%, 30%) !important;
    color: #fff !important;
    border-color: #fff;
}

/* Cuando el header tiene fondo (fixed-header) */
.header.fixed-header .btn-main {
    background-color: #fff !important;
    color: hsl(207, 82%, 30%) !important;
}

.header.fixed-header .btn-main:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Asegurar que el ícono sea visible */
.header .btn-main i {
    color: inherit;
}

/* Estilos para el botón blanco en el banner */
.banner-five .btn-white {
    background-color: #fff !important;
    color: hsl(207, 82%, 30%) !important;
    border: 2px solid #fff;
    transition: all 0.3s ease;
}

.banner-five .btn-white:hover {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff;
}

.banner-five .btn-white i {
    color: inherit;
}