/* -------------------------------------] */
/* -----------------------------[ FONTS ] */
/* -------------------------------------] */

@font-face {
	font-family: 'outfit-black';
	src: url("./fonts/outfit-black.ttf") format("truetype");
}

.font-outfit-black {
	font-family: 'outfit-black' !important;
}

/* -------------------------------------] */
/* -----------------------[ FONTS SIZES ] */
/* -------------------------------------] */

.font-size-1 {
	font-size: .5rem;
	line-height: 1;
}

.font-size-2 {
	font-size: 1rem;
	line-height: 1;
}

.font-size-3 {
	font-size: 1.5em !important;
	line-height: 1.1em !important;
}

.font-size-4 {
	font-size: 3em !important;
	line-height: 1.1em !important;
}

/* -------------------------------------] */
/* ------------------------[ BACKGROUND ] */
/* -------------------------------------] */

.bg-color-custom-pri {
	background-color: var(--color-custom-pri);
}

.bg-color-custom-duo {
	background-color: var(--color-custom-duo);
}

.bg-color-custom-tri {
	background-color: var(--color-custom-tri);
}

.bg-color-custom-tet {
	background-color: var(--color-custom-tet);
}

/* -------------------------------------] */
/* -----------------------[ TEXT COLORS ] */
/* -------------------------------------] */

.text-color-custom-pri {
	color: var(--color-custom-pri);
}

.text-color-custom-duo {
	color: var(--color-custom-duo);
}

.text-color-custom-tri {
	color: var(--color-custom-tri);
}

.text-color-custom-tet {
	color: var(--color-custom-tet);
}

/* -------------------------------------] */
/* ---------------------------[ LOADING ] */
/* -------------------------------------] */

#loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: Arial, sans-serif;
	font-size: 24px;
	z-index: 1021;
}

/* -------------------------------------] */
/* -------------------------------[ AUX ] */
/* -------------------------------------] */

.cursor-pointer {
	cursor: pointer !important;
}

.text-justify {
	text-align: justify !important;
}

/* -------------------------------------] */
/* -----------------------------[ TOAST ] */
/* -------------------------------------] */

.toast-body {
	background-color: var(--bs-body-bg);
	border-bottom-left-radius: var(--bs-border-radius);
	border-bottom-right-radius: var(--bs-border-radius);
}

.toast-header {
	border-bottom: 0px !important;
}

/* -------------------------------------] */
/* ----------------------------[ SEARCH ] */
/* -------------------------------------] */

.search-drowpdown {
	background-color: var(--bs-body-bg);
	border-radius: var(--bs-border-radius);
	border: 1px solid var(--bs-border-color);
	position: absolute;
	z-index: 9;
	display: none;
	max-height: 768px;
	left: 0;
	right: 0;
	margin-right: calc(var(--bs-gutter-x)* .5);
	margin-left: calc(var(--bs-gutter-x)* .5);
}

.search-options {
	line-height: var(--bs-body-line-height);
}

.search-options:hover {
	font-weight: bold;
}

.search-options span {
	opacity: 0.6;
	position: absolute;
	right: 20px;
}

.search-options:first-child {
	margin-top: 0px !important;
}

.search-options:last-child {
	margin-bottom: 0px !important;
}

.search-button {
	background-color: var(--color-custom-duo);
	border-color: var(--color-custom-duo);
	color: var(--bs-white);
}

.search-button:hover {
	background-color: var(--bs-white);
	border-color: var(--color-custom-duo);
	color: var(--color-custom-duo);
}

/* -------------------------------------] */
/* -----------------------------[ SHARE ] */
/* -------------------------------------] */

.share-buttons {
	display: flex;
	gap: 10px;
	margin-top: 20px;

	.share-button {
		padding: 10px 15px;
		border: 1px solid var(--color-custom-duo);
		border-radius: 5px;
		color: var(--bs-white);
		cursor: pointer;
		font-size: 14px;
		display: flex;
		align-items: center;
		gap: 5px;
		text-decoration: none;
		background: var(--color-custom-duo); 
	}

	.share-button:hover {
		background-color: var(--bs-white) !important;
		color: var(--color-custom-duo) !important; 
	}

	.share-button.facebook {
		background-color: var(--color-custom-duo); 
	}

	.share-button.twitter {
		background-color: var(--color-custom-duo); 
	}

	.share-button.linkedin {
		background-color: var(--color-custom-duo); 
	}

	.share-button.whatsapp {
		background-color: var(--color-custom-duo); 
	}
}

/* -------------------------------------] */
/* ---------------------------[ BANNERS ] */
/* -------------------------------------] */

.section-banner {
	.owl-banner-custom-controls {
		position: absolute;
		max-width: 100%;
		display: flex;
		flex-direction: row;
		align-content: center;
		justify-content: flex-start;
		align-items: center;
		bottom: 0;
		z-index: 9999;
		padding-bottom: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
	}

	.owl-banner-custom-dots {
		display: flex;
		gap: 10px;
		margin-left: 25px;
	}

	.owl-banner-custom-dots .dot {
		width: 12px;
		height: 12px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 50%;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.owl-banner-custom-dots .dot.active {
		background: #fff; 
	}

	.owl-banner-prev, .owl-banner-next {
		border: 2px solid var(--bs-white);
		background-color: transparent;
		color: var(--bs-white);
		border-radius: 100%;
		width: 40px;
		height: 40px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.owl-banner-prev:hover, .owl-banner-next:hover {
		border: 2px solid var(--bs-white);
		background-color: var(--bs-white);
		color: var(--bs-black);
	}
}

.section-banner-mini {
	.owl-item div img {
		border-radius: var(--bs-border-radius) !important;
	}
}

/* -------------------------------------] */
/* --------------------------[ WHATSAPP ] */
/* -------------------------------------] */

#wrapper-whatsapp {
	--wp-color-a: #25d366;
	--wp-color-b: #075E54;
	--wp-color-c: #128c7e;
	--bs-gutter-x: 4rem;

	z-index: 9;
	position: fixed;
	bottom: calc(var(--bs-gutter-x)* .5);
	right: calc(var(--bs-gutter-x)* .5);

	.btn-whatsapp::before,
	.btn-whatsapp::after {
		display: none !important;
	}

	.btn-whatsapp {
		background-color: var(--wp-color-a);
		color: var(--bs-white);
		border-radius: 50%;
		height: 72px;
		width: 72px;
		font-size: 28px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-whatsapp.show,
	.btn-whatsapp:hover {
		color: var(--bs-white);
		background-color: var(--wp-color-b);
		border: 1px solid var(--wp-color-b);
	}

	ul {
		border: 1px solid var(--wp-color-b);
	}

	li.li-header {
		background: var(--wp-color-b);
		border: 1px solid var(--wp-color-b);
	}

	li.li-header a {
		color: var(--bs-white);
		background: var(--wp-color-b);
		border: 1px solid var(--wp-color-b);
	}

	li a {
		border: 1px solid var(--bs-white);
	}

	li:not(.li-header) a:hover {
		color: var(--bs-white);
		background-color: var(--wp-color-c);
	}

	li.mb-2:last-child {
		margin-bottom: 0px !important;
	}
}

/* -------------------------------------] */
/* -----------------------------[ MODAL ] */
/* -------------------------------------] */

#modalVideo {
	.modal-header {
		border-bottom: 0;
	}

	.modal-content {
		background: rgb(255 255 255 / 18%);
		box-shadow: 0 8px 32px 0 rgb(255 255 255 / 21%);
		backdrop-filter: blur(7.5px);
		-webkit-backdrop-filter: blur(7.5px);
		border-radius: 10px;
		border: 1px solid rgba(255, 255, 255, 0.18);
	}

	.btn-close {
		background: unset;
		color: var(--bs-white);

		.bi::before, 
		[class*=" bi-"]::before, 
		[class^=bi-]::before {
			vertical-align: 0;
		}
	}
}

/* -------------------------------------] */
/* ------------------------------[ FORM ] */
/* -------------------------------------] */

.form {
	:-webkit-autofill, 
	:-webkit-autofill:hover, 
	:-webkit-autofill:focus, 
	:-webkit-autofill:active {
		-webkit-text-fill-color: white !important;
		-webkit-box-shadow: 0 0 0px 1000px #000 inset !important;
		transition: background-color 5000s ease-in-out 0s;
		border: none !important;
		border-bottom: 1px solid white !important;
	}

	input::placeholder,
	textarea::placeholder {
		color: #ffffff !important;
		opacity: .4 !important;
	}

	option[disabled][hidden][selected] {
		opacity: .4 !important;
	}

	input:focus::placeholder, 
	textarea:focus::placeholder {
		color: transparent !important;
	}

	.form-control,
	.form-select {
		background: black;
		border: 0px;
		border-bottom: 1px solid white;
		border-radius: 0px !important;
		color: white;
	}

	.input-group.is-invalid .input-group-text, 
	.input-group.is-invalid .form-floating input, 
	.input-group.is-invalid .tox,
	.input-group.is-invalid .form-control,
	.input-group.is-invalid select,
	.input-group.is-invalid .CodeMirror {
		border-bottom: 1px solid var(--bs-danger) !important;
	}

	.pretty .state label:before {
		border-color: #bdc3c7;
		transition: border-color 0.3s ease;
	}

	.pretty.invalid-checkbox .state label:before {
		border-color: #dc3545 !important;
	}

	.input-group label {
		color: white;
	}

	.input-group>.form-control:focus {
		background: transparent;
		box-shadow: none;
		border-bottom: 1px solid gray;
		color: white;
	}

	.input-group>.form-select:focus {
		background: black;
		box-shadow: none;
		border-bottom: 1px solid gray;
		color: white;
	}

	.btn-submit {
		background-color: var(--bs-white);
		color: var(--bs-black);
		border-radius: 50px;
		width: 150px;
		font-family: 'outfit-regular';
		border: 1px solid var(--bs-white);
	}

	.btn-submit:hover {
		background-color: var(--bs-black);
		color: var(--bs-white);
	}
}

.selected-option {
	pointer-events: none;
	padding-left: 6px;
}

/* -------------------------------------] */
/* ----------------------------[ CUSTOM ] */
/* -------------------------------------] */

.input-category {
	max-height: 198px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-custom-duo) var(--color-custom-tet);
}

.card-label {
	background-color: var(--color-custom-duo);
	border-color: var(--color-custom-duo);
	color: var(--bs-white);
	max-width: 98px;
}

.card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	line-height: 1.4 !important;
	max-height: 2.8em;
	min-height: 2.8em;
}

iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--bs-border-radius);
	box-shadow: var(--bs-box-shadow);
	height: auto;
}

.gallery {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-evenly;

}

.gallery img {
	width: 250px;
	height: 250px;
	object-fit: cover;
	object-position: center center;
}

.btn-custom-pri {
	color: var(--bs-white);
	background-color: var(--color-custom-pri);
	border: 1px solid var(--color-custom-pri);
}

.btn-custom-pri:hover {
	color: var(--color-custom-pri);
	background-color: var(--bs-white);
	border: 1px solid var(--color-custom-pri);
}

.btn-custom-duo {
	color: var(--bs-white);
	background-color: var(--color-custom-duo);
	border: 1px solid var(--color-custom-duo);
}

.btn-custom-duo:hover {
	color: var(--color-custom-duo);
	background-color: var(--bs-white);
	border: 1px solid var(--color-custom-duo);
}

.page-item:last-child .page-link {
	color: var(--color-custom-duo);
	background-color: var(--bs-white);
	border: 1px solid var(--color-custom-duo);
}

.active>.page-link, .page-link.active {
	color: var(--bs-white);
	background-color: var(--color-custom-duo);
	border: 1px solid var(--color-custom-duo);
}

/* -------------------------------------] */
/* --------------------------[ FILE END ] */
/* -------------------------------------] */