@font-face {
    font-family: 'Avenir Next';
    src: url('./fonts/Avenir Next.ttc') format('ttc');
    font-style: normal;
    font-weight: normal;
  }

#mainMenu{
    background-color: #F08318 !important;
    font-family: 'Avenir Next' !important;
    font-size: 16pt;
}

.nav-link{
    /*font-family: 'Avenir Next';*/
    color:#FFFFFF !important;
    font-weight: 500 !important;
}

/*
body{
    font-family: 'Avenir Next';
}
*/
main{
    font-weight: 400;
    font-size: 24pt;
    color: #FFFFFF;  
}

footer{
    font-size: 7pt;
    /*font-family: 'Avenir Next';*/
    color: #474747;
}

.main-content-index { 
    background-image: url('../images/inicio-background.jpg'); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.mainModelo3d{
    min-height: 43vh;
    background-image: url("../images/modelo/fondo.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tituloModal{
    /*font-family: 'Avenir Next';*/
    font-size: 26pt;
    color: #474747;
}

.textoModal{
    /*font-family: 'Avenir Next';*/
    font-size: 14pt;
    color: #474747;
}

.textoMedicamento{
    /*font-family: 'Avenir Next';*/
    font-size: 26pt;
    color: #FFFFFF;
}

.parrafoMedicamento{
    /*font-family: 'Avenir Next';*/
    font-size: 16pt;
    color: #FFFFFF;
}

.main-content-medicamento { 
    background-image: url('../images/piascledine-background.jpg'); 
    background-size: cover; 
    background-position: center; 
    height: 100vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}


/* Estilo para pantallas pequeñas (celulares) */ 
@media (max-width: 575.98px) 
{ .main-content-medicamento 
    { 
        height: 200vh;  
    } 
}

.videoMedicamento{
    height: 76%;
}

.content-container { 
    display: flex; 
    width: 80%; 
    padding: 2rem; 
    border-radius: 10px;
}

.text-content { 
    flex: 1; 
    margin-right: 2rem; 
} 

.image-content { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.image-content img { 
    max-width: 100%; 
    height: auto;
    border-radius: 10px; 
}
.btn-white { 
    font-size: 18pt;
    background-color: #FFFFFF; 
    color: #474747; /* Color del texto azul */ 
    border: 1px solid #FFFFFF; /* Borde azul */ 
} 

.btn-white:hover { 
    font-size: 18pt;
    background-color: #f8f9fa; /* Color de fondo gris claro al pasar el ratón */ 
    color: #474747; /* Color del texto azul oscuro al pasar el ratón */ 
    border: 1px solid #f8f9fa; /* Borde azul oscuro al pasar el ratón */ 
}

.header-image { 
    background-image: url('../images/modelos 3d-banner.jpg'); 
    background-size: cover; 
    background-position: center; 
    min-height: 30vh; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.textHeader{
    /*font-family: 'Avenir Next';*/
    font-size: 40pt;
}

.canvas3D { 
    display: block; 
    width: 100%; 
    height: 400px; 
}

.canvas-container {
    background: transparent !important;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 400px;
}

.arrow-image {
    position: absolute;
    top: 35%;
    width: 50px;  /* Tamaño ajustable */
    height: auto;
    transform: translateY(-50%);
    opacity: 1; /* Para que no sean demasiado invasivas */
}

.arrow-left {
    left: 10px; /* Posición a la izquierda */
}

.arrow-right {
    right: 10px; /* Posición a la derecha */
}

.arrow-image:hover {
    opacity: 1; /* Se vuelven más visibles al pasar el mouse */
}


/* Asegurar que el navbar tenga una altura fija */
#mainMenu {
    height: 80px; /* Ajusta este valor según la altura real del navbar */
    display: flex;
    align-items: center;
}

/* Asegurar que los elementos de la lista ocupen toda la altura */
.navbar-nav {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Hacer que los elementos del menú ocupen toda la altura del navbar */
.navbar-nav .nav-item {
    height: 80px;
    display: flex;
    align-items: center;
}

/* Hacer que los enlaces ocupen toda la altura del navbar */
.navbar-nav .nav-link {
    height: 100%;
    display: flex;
    align-items: center; /* Centra el texto verticalmente */
    justify-content: center;
    padding: 0 20px; /* Ajuste horizontal */
    font-weight: bold;
}

#ultimoItem{
    margin-right: -12px;
}

/* Estilo para la opción "MODELOS 3D" */
.modelos3D-link {
    background-color: #FFFFFF !important; /* Fondo blanco */
    color: #273374 !important; /* Texto azul */
    height: 100%;
    width: 100%; /* Se expande completamente */
    border-radius: 0px !important; /* Bordes cuadrados */
}

/* Estilo para la opción "PIASCLEDINE 300" */
.medicamento-link {
    background-color: #273374 !important; /* Fondo azul */
    color: #FFFFFF !important; /* Texto blanco */
    height: 100%;
    width: 100%;
    border-radius: 0px !important; /* Bordes cuadrados */
}

.oa-link {
    /*background-color: #FFFFFF !important; *//* Fondo blanco */
    color: #273374 !important; /* Texto azul */
    height: 100%;
    width: 100%; /* Se expande completamente */
    border-radius: 0px !important; /* Bordes cuadrados */
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1320px;
        margin-top: 50px;
    }
}

/* Evitar que el navbar cambie en responsive */
@media (max-width: 991px) {
    .navbar-nav {
        flex-direction: column; /* Para que en móviles los botones se mantengan alineados */
    }
    #ultimoItem{
        margin-right: 0px;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-link {
        width: 100%;
        padding: 15px 10px;
        text-align: center;
    }

    .navbar-collapse {
        border: 1px solid #ccc; /* Color gris */
        
    }
    .oa-link {
        background-color: #273374 !important;
        color: #FFFFFF!important; 
        height: 100%;
        width: 100%; 
        border-radius: 0px !important; 
    }
}

video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
/*video::-webkit-media-controls-fullscreen-button, video::-webkit-media-controls-play-button, video::-webkit-media-controls-pausebutton {*/
    /*display: none;*/
    /*download: none;*/
/*}*/