@font-face {
    font-family: 'Hydrogenous';
    src: 
		url('../fonts/Hydrogenous.woff') format('woff'),
		url('../fonts/Hydrogenous.woff2') format('woff2'),
		url('../fonts/Hydrogenous.ttf') format('ttf');
}
@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');
}

body {
    font-family: 'RalewayRegular';
}

.text-hydrogenous {
    font-family: 'Hydrogenous';
}
.text-raleway-regular {
    font-family: 'RalewayRegular';
}
.text-raleway-black {
    font-family: 'RalewayBlack';
}

.navbar-moka-main-link {
    font-size: 2rem;
    font-family: 'Hydrogenous';
    color: #e52421 !important;
    text-decoration: none;
}

.navbar-moka-main-link:hover {
    color: #ffffff !important;
    text-decoration: none;
}

.navbar-moka-link {
    font-size: 1rem;
    color: #e52421 !important;
    text-decoration: none;
    padding: 0.5rem 1rem;
}

.navbar-moka-link:hover {
    color: #ffffff !important;
    text-decoration: none;
}

.primary-color {
    color: #e52421 !important;
    /*color: rgba(229, 36, 33, 1) !important;*/
}
.secondary-color {
    color: #f7c0d0 !important;
}
.primary-background-color {
    background-color: #e52421;
}
.secondary-background-color {
    background-color: #f7c0d0;
}
.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;
}

.moka-btn {
	background-color: #f7c0d0; /* 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;
}
.moka-btn:hover {
	background-color: #f391ac;
    text-decoration: none;
    color: white;
}

.moka-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;
}

.moka-card:hover {
    box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.3);
    transform: translateY(-10px);
}
.moka-card-hero {
    background-color: #f7c0d0;
    width: 100%;
    height: 250px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    border-radius: 0.5rem 0.5rem 0 0;
    
}

.moka-card-hero-container {
    align-items: left;
    text-align: left;
    justify-content: left;
    line-height: 0.05rem; /* Espaciado entre líneas */ 
}

.moka-card-hero-container label {
    line-height: 0rem; /* Espaciado entre líneas */
    letter-spacing: 0.3rem;
    color: #e52421;
    font-family: 'RalewayRegular';
}
.moka-card-hero-container h1 {
    line-height: 5rem; /* Espaciado entre líneas */
    font-size: 2rem;
    color: #e52421;
    font-family: 'Hydrogenous';
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

.moka-card-hero-container p {
	margin-top : 0;
    font-size: 1rem;
    line-height: 0rem; /* Espaciado entre líneas */
    letter-spacing: 0.2rem;
    color: #e52421;
	position:relative;
    font-family: 'RalewayBlack';
}

.card-primary {
    border: 1px solid #e52421;
}

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

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


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

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

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

.original-price {
    position: relative;
    display: inline-block;
    /*color: rgba(169, 169, 169, 1); /* Color gris para el precio original */
    color: #f7c0d0; /* Color gris para el precio original */
    font-weight: normal;
}

.original-price::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px; /* Ajusta el grosor aquí */
    background-color: #e52421; /* Color del tachado */
    transform: translateY(-50%);
}


.discounted-price {
    color: #e52421; /* Rojo brillante para resaltar el descuento */
    font-weight: bold;
    font-size: 1.5em; /* Aumenta el tamaño del texto para llamar la atención */
}

/* Ajustar el tamaño de la fuente para pantallas grandes */
@media (max-width: 300px) {
    .responsive-heading {
        font-size: 5rem !important;
    }
    .moka-card-hero-container h1 {
        font-size: 3.5rem;
    }
    .moka-card-hero-container p {
        font-size: 0.8rem;
    }
}
@media (min-width: 300px) {
    .responsive-heading {
        font-size: 5rem !important;
    }
    .moka-card-hero {
        height: 200px;
    }
    .moka-card-hero-container h1 {
        font-size: 3.5rem;
    }
    .moka-card-hero-container p {
        font-size: 0.8rem;
    }
}
@media (min-width: 600px) {
    .responsive-heading {
        font-size: 5rem !important;
    }
    .moka-card-hero-container h1 {
        font-size: 3.5rem;
    }
    .moka-card-hero-container p {
        font-size: 0.8rem;
    }
}

@media (min-width: 768px) {
    .responsive-heading {
        font-size: 6rem !important;
    }
    .moka-card-hero {
        height: 250px;
    }
    .moka-card-hero-container h1 {
        font-size: 3.8rem;
    }
    .moka-card-hero-container p {
        font-size: 0.8rem;
    }
}

/* Ajustar el tamaño de la fuente para pantallas muy grandes */
@media (min-width: 1200px) {
    .responsive-heading {
        font-size: 8rem !important;
    }
    .moka-card-hero-container h1 {
        font-size: 6rem;
    }
    .moka-card-hero-container p {
        font-size: 0.9rem;
    }
}

/* Limitar el tamaño máximo de la fuente */
@media (min-width: 1600px) {
    .responsive-heading {
        font-size: 10rem !important;
    }
    .moka-card-hero-container h1 {
        font-size: 6rem;
    }
    .moka-card-hero-container p {
        font-size: 1rem;
    }
}