html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    background: linear-gradient(to right, #14245d, #6a93f1);
}
.navbar {
    background: linear-gradient(to right, #14245d, #6a93f1);
}
.image-wrapper {
    width: 100%;
    overflow: hidden;
    padding-top: 3rem;
}
.image-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Aplicar max-height: 100vh; solo en pantallas grandes */
@media (min-width: 600px) {
    .image-wrapper img {
        max-height: 100vh;
    }
}

/* Restablecer max-height en pantallas pequeñas */
@media (max-width: 599px) {
    .image-wrapper img {
        max-height: none;
    }
}

/* Cambiar el fondo del submenú desplegable */
.navbar-nav .dropdown-menu {
    background-color: #6a93f1;
    border: none; /* Opcional: eliminar el borde */
    box-shadow: none; /* Opcional: eliminar la sombra */
}

/* Cambiar el color del texto de los elementos del submenú */
.navbar-nav .dropdown-menu .dropdown-item {
    color: #ffffff;
    transition: background-color 0.3s, color 0.3s; /* Opcional: transición suave */
}

/* Cambiar el fondo y el color del texto al pasar el mouse o enfocar */
.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #14245d; /* Un color más oscuro para el hover */
    color: #ffffff;
}

/* Cambiar el color del texto del enlace 'Soporte' en la barra de navegación */
.navbar-nav .nav-link.dropdown-toggle {
    color: #ffffff;
}

.navbar-nav .nav-link.dropdown-toggle:hover,
.navbar-nav .nav-link.dropdown-toggle:focus {
    color: #dddddd; /* Color al pasar el mouse */
}

/* Cambiar el color de la flecha del dropdown */
.navbar-nav .dropdown-toggle::after {
    color: #ffffff;
}