@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
	--bs-body-font-family: "Noto Sans", sans-serif;
	--bs-body-font-weight: 400;
	--bs-body-color: #000;
	--bs-primary-rgb: 0, 0, 0;
	--bs-secondary-rgb: 137, 147, 161;
	--bs-secondary-bg-rgb: 240, 240, 240;
	--bs-info-rgb: 0, 0, 0;
	--bs-info-text-emphasis: #0042C3;
	--bs-info-bg-subtle: #0042C3;
	--bs-border-color: #cacaca;
	--bs-light-rgb: 235, 235, 235;
	--bs-dark-rgb: 0, 0, 0;
	--bs-dark-bg-subtle: #404041;
	--c1: #0042C3;
	--c2: #001871;
	--c3: #3C4650;
	--c4: #F9F4F5;

	--c1b: rgb(0, 66, 195);
	--c2b: rgb(0, 24, 113);
	--c3b: rgb(60, 70, 80);
	--c4b: rgb(249, 244, 245);
}

::selection {
	background-color: #1d1d1d;
	color: #fff;
}

[id] {
	scroll-margin-top: 90px !important;
}


/* ------ header ------ */
#logo {
	width: 150px;
}

.searchIcon:hover svg {
	fill: #bcbdc0;
}

@media (max-width:1400px) {
	#logo {
		width: 120px
	}
}


/* ------ navBar ------ */
#wrapMenu {
	z-index: 1050;
}

#navbarNav .nav-link {
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	padding: .9rem 1.5rem;
	position: relative;
}

#navbarNav .nav-link:hover,
#navbarNav .nav-link:focus,
#navbarNav .nav-link.active {
	color: #bcbdc0;
}

#navbarNav .dropdown-menu {
	--offset: calc(50svw - 660px);
}

#navbarNav .dropdown-menu::before {
	background-color: #fff;
	content: "";
	height: 100%;
	left: calc(var(--offset) * -1);
	position: absolute;
	top: 0;
	width: var(--offset);
}

#navbarNav .dropdown-menu::after {
	background-color: #fff;
	content: "";
	height: 100%;
	position: absolute;
	right: calc(var(--offset) * -1);
	top: 0;
	width: var(--offset);
}

[data-bs-theme="dark"] .navbar-toggler-icon {
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 .1rem rgb(255, 255, 255, .7);
}

.dropdown-item:focus,
.dropdown-item:hover {
	background-color: #fff;
	color: #404041;
}

@media (max-width:1400px) {

	#navbarNav .dropdown-menu::before,
	#navbarNav .dropdown-menu::after {
		display: none;
	}

	#navbarNav .nav-link {
		padding: .6rem .5rem;
	}
}


/* ------ backdrop ------ */
.dropdown-backdrop {
	background-color: rgba(0, 0, 0, .7);
	backdrop-filter: blur(1px);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity .2s ease;
	visibility: hidden;
	z-index: 1040;
}

body.dropdown-open .dropdown-backdrop {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.dropdown-menu {
	pointer-events: auto;
	z-index: 1050;
}

@media (max-width:992px) {
	.dropdown-backdrop {
		display: none
	}
}


/* ------ mainBanner ------ */
#mainBanner .gradient {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .7));
	width: 60%;
}

#mainBanner .gradient>div {
	margin-top: -30px;
}

#mainBanner .gradient.v2>div {
	margin-top: 0;
}

#mainBanner .carousel-control-next,
#mainBanner .carousel-control-prev {
	bottom: 20px;
	height: 44px;
	top: initial;
	width: 42px;
}

#mainBanner .carousel-control-prev {
	left: 4.5rem;
}

#mainBanner .carousel-control-next {
	left: 7.6rem;
}

@media (max-width:1200px) {
	#mainBanner .display-5 {
		font-size: calc(1.1rem + 2.1vw)
	}

	#mainBanner .gradient {
		width: 80%
	}

	#mainBanner .carousel-control-prev {
		left: 3rem
	}

	#mainBanner .carousel-control-next {
		left: 6rem
	}
}

@media (max-width:992px) {
	#mainBanner .gradient {
		width: 90%
	}

	#mainBanner .carousel-control-prev {
		left: 2rem
	}

	#mainBanner .carousel-control-next {
		left: 5rem
	}
}

@media (max-width:576px) {
	#mainBanner .display-5 {
		font-size: calc(1.15rem + 2.1vw)
	}

	#mainBanner .gradient {
		background: linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .8));
		width: 100%;
	}

	#mainBanner .carousel-control-prev {
		left: 1.5rem
	}

	#mainBanner .carousel-control-next {
		left: 4.5rem
	}
}


/* ------ mainProducts ------ */
#mainProducts::after {
	background-color: var(--bs-body-color);
	content: "";
	height: 256px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.mpTitle {
	aspect-ratio: 1 / .95;
}

.mpLogo {
	height: 50px;
}

.mpLogo2 {
	height: 34px;
}

.mpLogo3 {
	height: 50px;
}

.mpZoom {
	transition: all 0.3s ease;
}

.mpZoom:hover {
	transform: scale(1.07);
}

.indexImg {
	aspect-ratio: 276 / 262;
}

.indexPrd>div:nth-child(5) {
	margin-left: 25%;
}

@media (max-width:992px) {
	.mpTitle {
		aspect-ratio: initial
	}

	#mainProducts::after {
		height: 310px;
	}

	.indexPrd>div:nth-child(5) {
		margin-left: 0;
	}
}

@media (max-width:576px) {
	.mpLogo {
		height: 40px
	}
}


/* ------ misc ------ */
.fs-6b {
	font-size: 1.05em;
}

.fs-6c {
	font-size: 1.14em;
}

.small2 {
	font-size: .7rem;
}

.lh-sm2 {
	line-height: 1.44 !important;
}

.lh-base2 {
	line-height: 1.65 !important;
}

.embedContainer {
	height: 0;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	padding-bottom: 56.25%;
}

.embedContainer iframe,
.embedContainer object,
.embedContainer embed {
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
}

.mainPad {
	padding-bottom: 5rem;
	padding-top: 5rem;
}

.mainPadB {
	padding-bottom: 5rem;
	padding-top: 0;
}

.textBalance {
	text-wrap: balance;
}

@media (max-width:768px) {
	.mainPad {
		padding-bottom: 2rem;
		padding-top: 2rem;
	}

	.mainPadB {
		padding-bottom: 2rem;
		padding-top: 0;
	}
}

@media (max-width:576px) {
	.fs-6b {
		font-size: 1em;
	}
}


/* ------ links ------ */
.link-primary:hover {
	color: #0052f7;
}


/* ------ btn ------ */
.btn {
	font-weight: 600;
	padding: .5rem 1.4rem;
}

.btn-info {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--c1);
	--bs-btn-border-color: var(--c1);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--c2);
	--bs-btn-hover-border-color: var(--c2);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--c1);
	--bs-btn-active-border-color: var(--c1);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--c1);
	--bs-btn-disabled-border-color: var(--c1);
}

.btn-dark {
	--bs-btn-color: #fff;
	--bs-btn-bg: #404041;
	--bs-btn-border-color: #404041;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #2e2e2f;
	--bs-btn-hover-border-color: #2e2e2f;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #404041;
	--bs-btn-active-border-color: #404041;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: #404041;
	--bs-btn-disabled-border-color: #404041;
}


/* ------ bannerBottom ------ */
#bannerBottom::after {
	background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .2));
	border-radius: .5rem;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

#bBottomText {
	width: 50%;
}

#bannerBottom h5 {
	font-size: 2rem;
}

@media (max-width:1400px) {
	#bannerBottom {
		margin-left: 4.5rem;
		margin-right: 4.5rem;
	}
}

@media (max-width:1200px) {
	#bannerBottom {
		margin-left: 2rem;
		margin-right: 2rem;
	}
}

@media (max-width:992px) {
	#bBottomText {
		width: 60%
	}

	#bannerBottom h5 {
		font-size: 3svw
	}
}

@media (max-width:768px) {
	#bBottomText {
		width: 70%
	}

	#bannerBottom h5 {
		font-size: 1.7rem
	}

	#bannerBottom::after {
		background: linear-gradient(270deg, rgba(1, 14, 61, 0), rgba(1, 14, 61, .7));
	}
}

@media (max-width:576px) {
	#bannerBottom {
		margin-left: 1.2rem;
		margin-right: 1.2rem;
	}

	#bannerBottom h5 {
		font-size: 1.4rem
	}

	#bBottomText {
		width: 90%
	}
}


/* ------ footer ------ */
footer {
	margin-top: -130px;
}

footer .container-xxl {
	padding-top: 130px;
}

footer.v2 {
	margin-top: 0;
}

footer.v2 .container-xxl {
	padding-top: 0;
}

#ojo {
	width: 150px;
}

@media (max-width:1460px) {
	.novaqLink {
		margin-right: 6.5rem;
	}
}


/* ------ whatsapp ------ */
#waBtn {
	background: rgb(37, 211, 102) none repeat scroll 0% 0% !important;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .95);
	bottom: 20px;
	height: 50px;
	padding: 5px;
	right: 20px;
	transition: all 0.5s ease 0s;
	width: 50px;
	z-index: 200;
}

@media (max-width:768px) {
	#waBtn {
		bottom: 12px;
		height: 42px;
		right: 12px;
		width: 42px;
	}
}


/* ------ btTop ------ */
.btTop {
	background-color: rgba(20, 20, 20, .4);
	backdrop-filter: blur(5px);
	border: none;
	border-radius: .4rem;
	bottom: 27px;
	color: #fff;
	display: none;
	font-size: 1rem;
	height: 36px;
	line-height: 35px;
	outline: none;
	position: fixed;
	right: 83px;
	text-align: center;
	transition: all 0.3s ease;
	width: 36px;
	z-index: 1040;
}

.btTop:hover {
	background-color: var(--bs-body-color);
	color: #fff;
}

@media (max-width:768px) {
	.btTop {
		bottom: 17px;
		height: 32px;
		line-height: 31px;
		right: 66px;
		width: 32px;
	}
}


/* ------ eyeExp ------ */
#eyeExp {
	text-shadow: 2px 2px 8px rgba(0, 0, 0, .6),
		1px 1px 20px rgba(0, 0, 0, .7);
	padding: 5rem 0 0 6rem;
}

#eyeExp2 {
	padding: 23rem 6rem 5rem 6rem;
}

.max33 {
	max-width: 33.33%;
}

@media (max-width:992px) {
	#eyeExp {
		padding: 3rem 0 0 3rem;
	}

	#eyeExp2 {
		padding: 20rem 3rem 3rem 3rem;
	}
}

@media (max-width:768px) {
	#eyeExp {
		padding: 2rem 0 0 2rem;
	}

	#eyeExp2 {
		padding: 10rem 2rem 2rem 2rem;
	}

	.max33 {
		max-width: initial
	}
}

@media (max-width:576px) {
	#eyeExp {
		padding: 2rem 0 0 1.8rem;
	}

	#eyeExp2 {
		padding: 5rem 1.8rem 2rem 1.8rem;
	}
}


/* ------ inside ------ */
.bigNumber {
	background-clip: text;
	background: linear-gradient(180deg, #dee0e3 -25%, #5a6675 139.5%);
	font-size: 10rem;
	line-height: 1em;
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

.bgDark {
	background-color: var(--bs-body-color);
}

@media (max-width:1400px) {
	.bigNumber {
		font-size: 9rem
	}
}

@media (max-width:992px) {
	.bigNumber {
		font-size: 8rem
	}
}

@media (max-width:576px) {
	.bigNumber {
		font-size: 7rem
	}
}


/* ------ form-control ------ */
.form-control {
	font-size: 1.1rem;
	padding: .6rem 1.1rem;
}

.form-select {
	font-size: 1.1rem;
	padding: .6rem 2.25rem .6rem 1.1rem;
}

.form-label {
	font-weight: 500;
	margin-bottom: .3rem;
	padding-left: .3rem;
}

.form-control:focus,
.form-select:focus {
	border-color: #404041;
	box-shadow: 0 0 0 .25rem rgba(64, 64, 65, .22);
}

.form-select option {
	background-color: #fff;
	color: #404041;
}


/* ------ mainText ------ */
.mainText {
	font-size: 1.1rem;
}

.mainText p+h2,
.mainText p+h3,
.mainText p+h4,
.mainText ul+h2,
.mainText table+h2 {
	margin-top: 2rem;
}

.mainText p:last-child {
	margin-bottom: 0;
}

.mainText figure {
	width: 100%;
}

.mainText figure img {
	border-radius: .5rem;
	height: auto;
	width: 100%;
}

.mainText figcaption {
	font-size: .875em;
	font-style: italic;
	margin-top: .3rem;
}

.mainText .embed-container {
	margin-bottom: 1rem;
}

.mainText .embed-container+h2,
.mainText .embed-container+h3,
.mainText .embed-container+h4 {
	margin-top: 2rem;
}

.mainText a {
	color: var(--c1);
	font-weight: 500;
}

.mainText a:hover {
	color: var(--c2);
}

.mainText ul {
	list-style: none;
	margin: 0 0 1.5rem 0;
	padding: 0 0 0 .5rem;
}

.mainText>ul:last-child {
	margin: 0;
}

.mainText ul li {
	padding: 2px 0 2px 20px;
	position: relative;
}

.mainText ul li::before {
	content: "\f111";
	color: var(--c1);
	font: var(--fa-font-solid);
	font-size: .5rem;
	left: 0;
	position: absolute;
	top: 12px;
}

.mainText .list-group li::before {
	top: 18px;
}

.mainText .text-right {
	text-align: right;
}

.mainText figure.table {
	overflow-x: auto;
}

.mainText .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--c2);
}

.mainText table {
	margin-bottom: 1.9rem;
	width: 100%;
}

.mainText table th,
.mainText table td {
	border-bottom: 1px solid #bcbcc9 !important;
	font-size: 1.05rem;
	line-height: 1.3rem;
	padding: .6rem .5rem;
}

.mainText table th p,
.mainText table td p {
	margin-bottom: 0;
}

.mainText table th {
	border-bottom: 2px solid var(--c3) !important;
	color: var(--c3);
	font-weight: 500;
}

@media (max-width:768px) {
	.mainText {
		font-size: 1.05rem;
	}

	.mainText ul {
		margin: 0 0 .8rem 0;
	}

	.mainText .w-50 {
		width: 100% !important;
	}
}


/* ------ accordion ------ */
.accordion {
	--bs-accordion-active-color: var(--bs-body-color);
	--bs-accordion-active-bg: #f0f0f0;
	--bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(194, 194, 194, 0.18);
	--bs-accordion-border-radius: .5rem;
	--bs-accordion-inner-border-radius: .5rem;
}

.accordion-button::after {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23404041'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23404041'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}


/* ------ pagination ------ */
.page-link {
	border: 1px solid #ddd;
	color: var(--bs-body-color);
	min-width: 36px !important;
}

.active>.page-link,
.page-link.active {
	background-color: var(--bs-body-color);
	border-color: var(--bs-body-color);
	color: #fff;
	font-weight: 500;
	text-align: center;
}

.page-link:focus {
	box-shadow: var(--bs-pagination-focus-box-shadow);
	box-shadow: 0 0 0 .25rem rgba(186, 186, 186, .2);
}


/* ------ catProducts ------ */
#catProducts {
	width: 256px;
}

#catProducts a {
	border-radius: .5rem;
	color: var(--bs-body-color);
	display: block;
	padding: .5rem .85rem;
	text-decoration: none;
}

#catProducts a:hover {
	text-decoration: underline;
}

#catProducts a.active {
	background-color: #f0f0f0;
}

@media (max-width:992px) {
	#catProducts {
		width: initial
	}
}

@media (max-width:600px) {
	#catProducts {
		flex-wrap: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		width: calc(100% + 1.5rem);
	}

	#catProducts a {
		white-space: nowrap;
	}
}


/* ----------- google -----------*/
#google_translate_element .goog-te-combo {
	background-color: #fff;
	border: 1px solid #acacac;
	border-radius: 4px;
	font-size: 1rem;
	padding: .7rem 1rem;
	text-transform: capitalize;
	width: 100%;
}

.frm-btn {
	color: #fff !important;
	transition: background-color 0.3s ease;
}

.frm-btn:hover {
	background-color: var(--c2) !important;
}