/* Seguro global contra scroll horizontal por redondeo de sub-píxel (zoom o
escalado de pantalla del SO, ventanas de escritorio angostas, etc.) — mismo
mecanismo que ya existía pero solo aplicaba desde 1920px (pedido explícito
del usuario, 2026-10-15). Investigado a fondo (2026-10-22): medido con
scrollWidth real en 9 páginas x varios anchos, sin encontrar un elemento que
realmente se salga del documento, así que no es un bug de layout puntual —
drift de sub-píxel en un ancho de ventana de escritorio específico (360px)
no es reproducible igual en todos los navegadores/zooms. No tapa ningún
desborde real: si algo necesita scroll horizontal, debe tener su propio
overflow-x:auto local, no depender de que el body haga scroll. */
html, body {
	overflow-x: hidden;
}
@media (max-width: 575.98px) {
	.navbar-nav {
		width: 100% !important;
	} .navbar-nav li {
		width: 100%;
	} .navbar-nav {
		text-align: right !important;
	} .navbar p {
		width: 100% !important;
	} #menu-top .dropdown-menu {
		width: 320px !important;
		height: 350px !important;
		overflow-x: auto;
	} #menu-top .logo img {
		width: 125px !important;
	}
} @media (min-width: 575.98px) and (max-width: 767.98px) {
	.navbar p {
		width: 100% !important;
	} 
} @media (min-width: 767.98px) and (max-width: 991.98px) {
	.navbar p {
		width: 100% !important;
	} 
} @media (min-width: 991.98px) and (max-width: 1199.98px) {
} @media (min-width: 1199.98px) {
}

@font-face {
	font-family: "Mazzard-Bold";
	src: url("/font/TYPE/MazzardH-Bold.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-SemiBold";
	src: url("/font/TYPE/MazzardH-SemiBold.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-Light";
	src: url("/font/TYPE/MazzardH-Light.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-Thin";
	src: url("/font/TYPE/MazzardH-Thin.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-Regular";
	src: url("/font/TYPE/MazzardH-Regular.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-Medium";
	src: url("/font/TYPE/MazzardH-Medium.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-Black";
	src: url("/font/TYPE/MazzardH-Black.otf") format('OpenType');
} @font-face {
	font-family: "Mazzard-LightItalic";
	src: url("/font/TYPE/MazzardH-LightItalic.otf") format('OpenType');
}

.box-column-center {
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex !important;
	flex-direction: column;
	-webkit-flex-direction: column;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
} .box-center {
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex !important;
	justify-content: center;
	-webkit-justify-content: center;
	align-items: center;
	-webkit-align-items: center;
} .box-column-between {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	flex-direction: column;
	justify-content: space-between;
	-webkit-flex-direction: column;
	-webkit-justify-content: space-between;
} .box-start-center {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	justify-content: start;
	-webkit-justify-content: start;
	align-items: center;
	-webkit-align-items: center;
} .box-end-center {
	display: flex !important;
	justify-content: end;
	align-items: center;
} .box-items-center {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	align-items: center;
	-webkit-align-items: center;
} .box-justify-between {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	justify-content: space-between;
	-webkit-justify-content: space-between;
} .box-between-center {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */

	flex-direction: column;
	-webkit-flex-direction: column;

	justify-content: space-between;
	-webkit-justify-content: space-between;
	align-items: center;
	-webkit-align-items: center;
} .box-justify-end {
	display: flex !important;
	display: -webkit-flex !important; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	/*display: -webkit-box !important;*/

	justify-content: end;
	-webkit-justify-content: end;
	-webkit-box-align: end;
	-webkit-align-items: end;

	/*flex-direction: column;
	-webkit-flex-direction: column;*/

	-webkit-box-pack: end !important; /* justify-content */
    -webkit-box-align: end !important; /* align-items */
}

h1 {
	font-family: "Mazzard-Black";
	color: #094eb5;
} h2, h3 {
	font-family: "Mazzard-Bold";
	color: #094eb5;
} h4, h5, h6 {
	font-family: "Mazzard-Medium";
	color: #094eb5;
} p {
	font-family: "Mazzard-Light";
}

/* MENU */
#menu-top {
	font-family: "Mazzard-Medium";
	background-color: #fff;
} #menu-top .navbar-nav  {
	width: 80%;
} #menu-top .blue-menu {
	background-color: #60aeff;
	min-height: 10px;
} #menu-top .nav-link {
	color: #0e4db6;
	font-size: 14px !important;
} #menu-top .logo {
	position: absolute;
	top: 0;
	margin-left: 30px;
} #menu-top .logo img {
	width: 150px;
} #menu-top .activeMenu {
	color: #00a5ff;
} #menu-top .dropdown-menu {
	border: 0px;
	max-height: 500px;
	overflow-y: auto;
} #menu-top .dropdown-item {
	color: #0026ac;
	padding-top: 0px;
	padding-bottom: 2px;
  	font-size: 14px;
} #menu-top .dropdown-item:hover {
	color: #00a5ff;
	background-color: #fff;
}


/* CALL TO ACTION (botón "Get started", compartido en about/blog/brands/
contact/products/projects/services/ourbrands) — esta regla existía en
styles.css (legado, nunca enlazado por el layout) pero NUNCA se portó a
styles.php (el que sí se carga), así que el botón quedaba sin ninguna
restricción de ancho y se renderizaba a su tamaño natural de imagen
(~382px). En cualquier viewport donde la columna del botón fuera más
angosta que eso (ej. .col-lg-4 entre 992-1199px, o pantallas chicas) el
botón se salía de su columna y causaba scroll horizontal en toda la
página. max-width (no width fijo) + height:auto para que además escale
hacia abajo en pantallas angostas en vez de solo recortarse.
Corrige scroll horizontal, 2026-10-22. */
#calltoaction img {
	max-width: 250px;
	width: 100%;
	height: auto;
}

/* FOOTER */
#footer {
	background-color: #0a4db6;
	padding: 40px 0px;
} #footer p, #footer a {
	color: #fff;
	text-decoration: none;
} #footer p, #footer a {
	font-family: "Mazzard-Bold";
} #footer span {
	font-family: "Mazzard-Light";
} #footer p {
	font-size: 14px;
} #footer span {
	font-size: 13px;
} #footer small {
	color: #7099d9;
} #footer a:hover {
	color: #00a5ff;
} #footer #facebook img, #footer #twitter img, #footer #linkedin img {
	min-height: 19px !important;
	max-height: 19px !important;
}

.modal-body {
	background-color: #eef0f3;
} #contacto-modal input, #contacto-modal select, #contacto-modal textarea {
	border: 1px solid #c7c7c7;
	border-radius: 5px;
	padding: 5px 0px 5px 10px;
	color: #7f7f7f;
} #contacto-modal input::placeholder, #contacto-modal select::placeholder, #contacto-modal textarea::placeholder {
	color: #7f7f7f;
} #contacto-modal button {
	background-color: transparent !important;
	border-bottom: none !important;
	border: 0px;
} #contacto-modal select {
	-webkit-appearance: none;
	-moz-appearance: none;
	text-indent: 1px;
	text-overflow: '';
	background-image: url("/img/contactus/AMEWAT-FLECHAS_SELECT.webp");
	background-repeat: no-repeat;
	background-position: 96% 50%;
  background-size: 10px;
}

.gray-line {
	min-height: 2px;
	background-color: #e0e7ee;
	margin-bottom: 60px;
}

.modal input {
	min-height: 38px;
	padding-left: 10px;
	border: 0px;
	border-top: 1px solid #c6c6c6;
	border-left: 1px solid #c6c6c6;
	border-bottom: 1px solid #c6c6c6;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	font-family: "Mazzard-LightItalic";
	color: #a1a1a1;
} .modal button {
	max-height: 38px;
	min-height: 38px;
	border-radius: 0px;
	border-top: 1px solid #c6c6c6;
	border-right: 1px solid #c6c6c6;
	border-bottom: 1px solid #c6c6c6;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #00a5ff;
	color: #fff;
	font-family: "Mazzard-Medium";
} .modal button:hover {
	color: #fff;
}

/* Pantallas >1500px de ancho — pedido explícito del usuario (2026-10-15).
Bootstrap fija su tipografía en `rem`, todos atados al font-size del html
(16px por defecto del navegador) — ese tamaño nunca escala con el ancho de
pantalla. Fijar el font-size raíz en 26px escala TODO lo que esté en
rem/em (h1-h6, párrafos, botones) de una sola vez. */
@media (min-width: 1920px) {
	html {
		font-size: 26px;
	}
	/* El menú y los textos del footer usan tamaños fijos en px (no rem), así
	que no escalan solos con el font-size raíz de arriba — hay que subirlos
	a mano. 20px→40px y 20/19px→40/38px son segundas vueltas (+100%) sobre
	el primer ajuste. */
	#menu-top .nav-link {
		font-size: 30px !important;
	}
	/* CAUSA DEL SCROLL HORIZONTAL (pedido explícito del usuario, 2026-10-15,
	investigado y corregido acá): #menu-top .navbar-nav mide 80% de ancho
	(ver regla base más arriba), y Bootstrap pone ese <ul> en flex-direction:
	row SIN wrap a partir de .navbar-expand-lg. Con el nav-link ya en 30px,
	los 8 ítems (About us/Projects/Products/Services/Brands/Blog/Contact +
	buscador) no entran en ese 80% y se desbordaban hacia la derecha sin que
	nada los recorte, empujando todo el documento más allá del viewport. */
	#menu-top .navbar-nav {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
	#footer p {
		font-size: 24px;
	}
	#footer span {
		font-size: 24px;
	}
	/* Logo del menú — +50% sobre los 150px actuales (pedido explícito del
	usuario, 2026-10-15). */
	#menu-top .logo img {
		width: 220px;
	}
	/* .container (Bootstrap) topa en 1140px desde 1200px en adelante y
	nunca lo vuelve a ensanchar, así que en un monitor ancho el contenido
	(texto, tarjetas, botones) queda angosto y perdido en medio de mucho
	espacio vacío a los costados. */
	.container {
		max-width: 1300px;
	}
	#menu-top .dropdown-item {
		font-size: 32px;
	}
}
@media (min-width: 1800px) {
	.container {
		max-width: 1500px;
	}
}
@media (min-width: 2400px) {
	.container {
		max-width: 1800px;
	}
}
@media (min-width: 3000px) {
	.container {
		max-width: 2100px;
	}
}
@media (min-width: 3600px) {
	.container {
		max-width: 2400px;
	}
}

*:focus {
    outline: none;
}

/**/
html {
	scroll-behavior: smooth;

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
/**/