@font-face{
	font-family: "LakersTextured";
	src: url('../fonts/LakersTextured.otf') format("opentype");
}

@font-face {
    font-family: 'RalewayRegular';
    src: 
        url('../fonts/Raleway-Regular.woff2') format('woff2'),
		url('../fonts/Raleway-Regular.ttf') format('ttf');
}
@font-face {
    font-family: 'RalewayBlack';
    src: 
        url('../fonts/Raleway-Black.woff2') format('woff2'),
        url('../fonts/Raleway-Black.ttf') format('ttf');
}

/* Espaciado vertical más cómodo en opciones del navbar */
#navMenu a { padding-top: 0.625rem; padding-bottom: 0.625rem; line-height: 1.6; }
#adminDropdown a { line-height: 1.6; }
/* Asumo que ya tienes algo como --color-primary declarado */
.dropdown-item {
display: block;
padding: 0.5rem 1rem;        /* px-4 py-2 */
font-size: 0.875rem;         /* text-sm */
color: #fff;                 /* text-cwhite */
background-color: transparent;
transition: background-color 0.15s ease-in-out;
}

/* Aquí es donde hacemos “solo un poco” más oscuro/clarito */
#adminDropdown .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.08); /* leve sobre tu fondo primario */
/* si tu primario es oscuro, este efecto se ve muy bien */
}
/* Logo size utility: set --logo-height to override (example: --logo-height: 2.5rem) */
.logo-size {
height: var(--logo-height, 2rem);
width: auto;
display: inline-block;
vertical-align: middle;
}

body {
    font-family: 'RalewayRegular';
}


.primary-color {
    color: rgba(0, 0, 0, 1) !important;
}
.secondary-color {
    color: rgb(255, 145, 0) !important;
}
.primary-background-color {
    background-color: rgba(0, 0, 0, 1);
}
.secondary-background-color {
    background-color: rgb(255, 145, 0);
}
.secondary-overlay-color {
    background-color: rgba(255, 145, 0, 0.35);
}
.gradient-background-color {
    background: linear-gradient(135deg, rgb(255, 145, 0), #000000);
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-white {
    color: white;
}
.color-black {
    color: black;
}
.services .icon {
    font-size: 4em;
    margin-bottom: 20px;
}
.footer {
    background: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}
.center {
	display: flex; /* Flexbox para el contenedor */
	flex-direction: column; /* Alinea los botones en columna */
	align-items: center; /* Centra los botones horizontalmente */
	justify-content: center; /* Centra los botones verticalmente */
	width: 100%; /* Ancho completo para permitir centrado horizontal */
}

.horizontal-scrollmenu {
	max-width: 100%;
	overflow-x: auto;
}

.kemenuqr-btn {
	background-color: rgb(255, 145, 0); /* Color de fondo rosa */
	color: white; /* Color del texto */
	border: none; /* Sin borde visible */
	padding: 10px 20px; /* Espaciado interno */
	font-size: 16px; /* Tamaño de la fuente */
	border-radius: 5px; /* Bordes redondeados */
	transition: background-color 0.3s; /* Efecto suave al cambiar color */
	cursor: pointer; /* Cursor tipo mano */
	display: block; /* Hace que el botón ocupe su propia línea */
	width: 200px; /* Ancho fijo del botón */
    text-decoration: none;
}
.kemenuqr-btn:hover {
	background-color: rgba(0, 0, 0, 1);
    text-decoration: none;
    color: white;
}

.jauservice-log-card {
    min-width:400px;
    max-width:600px;
    border:0px;
    border-radius: 1rem;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.jauservice-card {
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 1rem 1rem;
    /*background-color: white;*/
    text-decoration: none;
    transition:
        box-shadow 0.3s ease,
        transform 0.3s ease, 
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.jauservice-card:hover {
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.jauservice-card-hero {
    background-color: rgba(255, 145, 0, 1);
    background-color: rgb(255, 145, 0);
    width: 100%;
    height: 250px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    border-radius: 0.5rem 0.5rem 0 0;
    
}
.jauservice-card-hero-container {
    align-items: left;
    text-align: left;
    justify-content: left;
    line-height: 0.05rem; /* Espaciado entre líneas */
    
}
.jauservice-card-hero-container label {
    line-height: 0rem; /* Espaciado entre líneas */
    letter-spacing: 0.3rem;
    color: rgba(255, 145, 0, 1);
    font-family: 'RalewayRegular';
}
.jauservice-card-hero-container h1 {
    line-height: 5rem; /* Espaciado entre líneas */
    font-size: 6rem;
    color: rgba(255, 145, 0, 1);
    font-family: 'Hydrogenous';
}

.jauservice-card-hero-container p {
	margin-top : -0.2rem;
    line-height: 0rem; /* Espaciado entre líneas */
    letter-spacing: 0.2rem;
    color: rgba(255, 145, 0, 1);
	position:relative;
    font-family: 'RalewayBlack';
}

.card-primary {
    border: 1px solid rgba(255, 145, 0, 1);
}

.nav-tabs .jauservice-nav-link {
    color: white;
}

.nav-tabs .jauservice-nav-link.active {
    color: black;
}

.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.w-80 {
    width: 80%;
}

.w-100 {
    width: 100%;
}
.show-opacity {
    opacity: 1;
    transform: translateY(0);
}


.pointer-hover:hover {
	cursor: pointer;
}


.main-title {
    line-height: 3.5rem; /* Espaciado entre líneas */
}

/* Definir la fuente responsiva utilizando unidades vw */
.responsive-heading {
    font-size: 5rem;
}

.provider-image{
    border: solid 4px rgba(255, 145, 0, 1) !important;
}

/* Ajustar el tamaño de la fuente para pantallas grandes */
@media (min-width: 768px) {
    .responsive-heading {
        font-size: 8rem;
    }
}

/* Ajustar el tamaño de la fuente para pantallas muy grandes */
@media (min-width: 1200px) {
    .responsive-heading {
        font-size: 10rem;
    }
}

/* Limitar el tamaño máximo de la fuente */
@media (min-width: 1600px) {
    .responsive-heading {
        font-size: 10rem;
    }
}


/* Clase para el fondo animado */
.animated-background {
    /* Definir el gradiente lineal inicial */
    background: linear-gradient(45deg, rgb(255, 145, 0), #000000);
    
    /* Ajustar el tamaño del fondo para permitir el movimiento */
    background-size: 400% 400%;
    
    /* Aplicar la animación */
    animation: gradientMove 15s ease infinite;
    
    /* Asegurar que el fondo cubra toda la altura de la ventana */
    min-height: 90vh;
    
    /* Usar Flexbox para centrar el contenido */
    display: flex;
    /*
    align-items: center;
    justify-content: center;
    */
}

/* Definir las keyframes para la animación del gradiente */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}