html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
    height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0; 
}

header {
    flex-shrink: 0;
}


.main-content {
    flex: 1 0 auto;
}

footer {
    flex-shrink: 0;
    margin-top: auto;
}


.btn-custom {
    background-color: #FE8100;
    border-color: #FE8100;
    color:white;
}

.btn-custom-primary {
    background-color: #005F8B;
    border-color: #005F8B;
    color: white;
}

    .btn-custom-primary:hover {
        color: #fff;
        background-color: #0b5ed7;
        border-color: #0a58ca;
    }

    .btn-check:focus + .btn-custom-primary, .btn-custom-primary:focus {
        color: #fff;
        background-color: #0b5ed7;
        border-color: #0a58ca;
        box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
    }

    .btn-check:checked + .btn-custom-primary, .btn-check:active + .btn-custom-primary, .btn-custom-primary:active, .btn-custom-primary.active, .show > .btn-custom-primary.dropdown-toggle {
        color: #fff;
        background-color: #0a58ca;
        border-color: #0a53be;
    }

        .btn-check:checked + btn-custom-primary:focus, .btn-check:active + .btn-custom-primary:focus, .btn-custom-primary:active:focus, .btn-custom-primary.active:focus, .show > .btn-custom-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
        }

    .btn-custom-primary:disabled, .btn-custom-primary.disabled {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }


/* Clases de Bootstrap personalizadas para los colores */
.bg-custom-dark-orange {
    background-color: #FE8100 !important; /* !important para asegurar que sobreescriba */
}

.text-custom-orange {
    color: #FFF !important; /* !important para asegurar que sobreescriba */
}

.border-custom-orange-50 {
    border-color: rgba(254, 129, 0, 0.5) !important; /* Color naranja con 50% de opacidad */
}

.btn-social-icon {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    border-radius: .25rem;
    /* ESTADOS NORMALES: Fondo naranja, icono azul oscuro (o blanco si prefieres) */
    background-color: #FE8100; /* Fondo NARANJA */
    color: #005F8B; /* Color del icono AZUL OSCURO (o #FFFFFF si quieres blanco) */
    border: 1px solid #005F8B; /* Borde azul oscuro para contrastar */
    transition: all 0.3s ease; /* Añade una transición suave para el efecto hover */
}

    .btn-social-icon:hover {
        /* ESTADOS HOVER: Fondo azul oscuro, icono naranja */
        background-color: #005F8B; /* Fondo AZUL OSCURO */
        color: #FE8100; /* Color del icono NARANJA */
        border: 1px solid #FE8100; /* Borde naranja */
    }


/* Altura de los banners */
.carousel-item img {
    max-height: 300px; /* Ajusta este valor a la altura deseada */
    object-fit: cover; /* Esto asegura que la imagen cubra el área sin distorsionarse */
}

/* Color de las flechas de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000; /* Color de fondo de la flecha (negro, puedes cambiarlo) */
    border-radius: 50%; /* Opcional: para hacer el fondo circular */
    padding: 10px; /* Opcional: para darle un poco de espacio al icono */
}

    /* Color de los iconos de las flechas (el icono en sí, que es un SVG) */
    .carousel-control-prev-icon::before,
    .carousel-control-next-icon::before {
        filter: invert(100%); /* Invierte el color del SVG. Si las flechas son oscuras, las hará claras. */
        /* Otra opción: background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e"); */
        /* Si quieres un color específico, puedes generar un SVG con el fill deseado y usarlo aquí */
    }

/* Opcional: Ajustar el tamaño de los iconos de las flechas si es necesario */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    height: 3rem; /* Altura del contenedor del icono */
    width: 3rem; /* Ancho del contenedor del icono */
}


 .carousel-item img {
    max-height: 500px; /* Ajusta este valor a la altura deseada */
    object-fit: cover;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: #000;
    border-radius: 50%;
    padding: 10px;
}

    .carousel-control-prev-icon::before,
    .carousel-control-next-icon::before {
        filter: invert(100%);
    }