/*  
  -------------------------------------------
  -----      CSS for the font used      -----
  -------------------------------------------
*/

@font-face {
    font-family: 'Inter var';
    src: url('../../../../drillit.cntmx.lat/assets/css/fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}

body {
    font-family: 'Inter var', sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

.header-text {
        text-align: center;
        font-weight: bold;
		font-size: 44px;
        color: #1D6082;
        margin-bottom: 20px;
		letter-spacing: 5px; /* Espaciado entre letras para hacerlas más anchas */
    }

.line {
    width: 100%;
    border-top: 2px solid #1D6082; /* Añade una línea blanca debajo del logo */
    margin-bottom: 8px; /* Añade espacio entre la línea y el contenido */
	margin-top: 15px; /* Espacio arriba de la línea; opcional, ajusta el valor según sea necesario */
}

.d-flex {
    display: flex;
    position: relative; /* Establece el contenedor como relativo para que los elementos absolutos se posicionen en relación con él */
}

.align-items-center {
    align-items: center; /* Centra verticalmente el contenido dentro del contenedor flex */
}

.logo-link {
    position: absolute; /* Posiciona el logo en relación con el contenedor */
    top: 0; /* Ajusta la distancia desde la parte superior del contenedor */
    left: 0; /* Ajusta la distancia desde la parte izquierda del contenedor */
    margin: 0; /* Elimina márgenes innecesarios */
}

       .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            padding: 20px;
        }

        .translucent-box {
            background-color: rgba(30, 30, 30, 0.8);
            padding: 20px;
            border-radius: 8px;
            max-width: 100%;
            box-sizing: border-box;
			text-align: center; /* Centra el contenido horizontalmente */
			
        }
		
		.logo {
    display: block;
    margin: 0 auto 20px; /* Centra el logo y agrega espacio abajo */
	text-align: center; /* Centra el contenido horizontalmente */
}

.data-item {
    margin-bottom: 10px;
}

.data-item:last-child {
    margin-bottom: 0;
}

}

.label {
    font-weight: bold;
    margin-right: 2px; /* Espacio entre la etiqueta y el valor */
    white-space: nowrap; /* Evita que el texto de la etiqueta se ajuste a una nueva línea */
    
	}

.value {
   margin-right: 5px; /* Espacio entre el valor y el value2 */
	font-weight: bold;
   
  
}

		.value2 {
     flex: 1; /* Hace que value2 ocupe el espacio restante */
    text-align: center; /* Centra el texto dentro de value2 */
    white-space: nowrap; /* Evita que el texto del value2 se ajuste a una nueva línea */
    color: #0FAC89; /* Color del texto de value2 */
	font-weight: bold;
  
}

	
    
		.button {
    background-color:#1D6082; /* Color verde limón */
    color: #000; /* Texto blanco */ 
    border: none; /* Sin borde */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px 20px; /* Espaciado interno */
    font-size: 16px; /* Tamaño del texto */
    cursor: pointer; /* Cursor tipo mano */
    display: inline-block; /* Asegura que el botón se ajuste al contenido */
    text-decoration: none; /* Sin subrayado */
    margin-top: 20px; /* Espacio arriba del botón */
	font-family: 'Inter', sans-serif; /* Fuente Inter */
	font-weight: bold; /* Texto en negrita */
}

.button:hover {
    background-color:#0FAC89; /* Color verde limón más oscuro al pasar el ratón */
	
	
}