@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;800;900&family=Poppins:wght@400;500;600;800&family=Raleway:wght@900&family=Red+Hat+Display:wght@400;500&display=swap");

.design-mode,
.design-mode * {
	outline-offset: -1px;
	/* outline: dashed thin var(--colors-grey-mid); */
}

.no-scroll {
	overflow: hidden;
	position: sticky;
}

:root {
	--colors-main: #244ba3;
	--colors-second: #2874d1;
	--colors-third: #6028d1;
	--colors-grey-dark: #484b5b;
	--colors-grey-mid: #b7b6c1;
	--colors-grey-light: #fcfcfc;
	--colors-grey-darker: #2c2c2c;

	--grad-greys-dark: linear-gradient(135deg,
			var(--colors-grey-darker) 0%,
			var(--colors-grey-dark) 100%);
	--grad-greys-light: linear-gradient(135deg,
			#ffffffff 0%,
			#ffffffdd 60%,
			#ffffffff 100%);
	--grad-blue: linear-gradient(135deg,
			var(--colors-main) 0%,
			var(--colors-second) 100%);

	--fonts-RedHat: "Red Hat Display", Helvetica, sans-serif;
	--fonts-NunitoSans: "Nunito Sans", Helvetica, sans-serif;
	--fonts-Poppins: "Poppins", Helvetica, sans-serif;

	--drop-shadow-nav: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.05)) !important;
	--drop-shadow-sm: drop-shadow(0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) !important;
	--drop-shadow-lg: drop-shadow(0 1rem 3rem rgba(0, 0, 0, 0.175)) !important;

	--animate-delay: 0.999s;
}

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-size: clamp(1em, 0.2083vw + 0.9437em, 1.0625em);
	line-height: 1.4em;
	font-style: normal;
	font-weight: 400;
	background-color: var(--colors-grey-darker);
}

body {
	background-color: var(--colors-grey-darker);
	font-family: var(--fonts-RedHat);
}

p {
	margin-bottom: 1.4em;
	max-width: 30em;
	text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
	font-family: var(--fonts-NunitoSans);
	font-weight: 400;
}

h1 {
	font-size: 4em;
}

h2 {
	font-size: 3.1748em;
}

h3 {
	font-size: 2.5198em;
}

h4 {
	font-size: 2em;
}

h5 {
	font-size: 1.5874em;
}

h6 {
	font-size: 1.2599em;
}

small {
	font-size: 0.7937em;
}

strong {
	font-weight: calc(inherit + 100);
}

#main {
	min-height: 100vh;
}

.container {
	max-width: 1360px;
}

/* *start section */

#start_hook {
	background-color: white;
	overflow: hidden;
	max-height: 100vh;
}

#start_hook div.cover_bg {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

#start_hook div.overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	overflow: hidden;
}

#start_hook h3 {
	text-transform: uppercase;
	letter-spacing: -0.02em;
	filter: var(--drop-shadow-lg);
}

#start_hook strong {
	background-image: var(--grad-greys-light);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	font-weight: 900 !important;
}

/* *about section */

#about_hook {
	background-color: white;
}

#about_hook h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	/* color: var(--colors-grey-darker); */
	background-image: var(--grad-greys-dark);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

#about_hook h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
	color: var(--colors-grey-mid);
}

#about_hook p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

/* *product section */

#produ_hook {
	background-color: var(--colors-grey-light);
	transition: all ease-out 200ms !important;
}

#produ_hook h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	/* color: var(--colors-grey-darker); */
	background-image: var(--grad-greys-dark);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

#produ_hook h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
}

#produ_hook p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

.custom-tooltip {
	--bs-tooltip-bg: var(--colors-third);
	--tooltip-padding-x: 20px;
	--tooltip-padding-y: 20px;
}

.custom-tooltip > .tooltip-inner {
	filter: var(--drop-shadow-sm);
}

.custom-tooltip > p {
	padding: 10px;
}

#int_img {
	transition: inherit;
}

#produ_hook li:hover {
	color: var(--colors-third);
	cursor: pointer;
}

#produ_accordion .accordion-item,
.accordion-header,
.accordion-button {
	background-color: transparent !important;
}

.accordion-button::after {
	filter: grayscale();
}

.accordion {
	--bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='square' stroke-linejoin='arcs'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E") !important;
	--bs-accordion-btn-icon-transform: rotate(-45deg);
	--bs-accordion-border-color: none;
}

#produ_accordion ul > li.list-group-item {
	background-color: transparent;
	border-bottom: solid thin #eeeeee;
	text-align: start;
	font-weight: 500;
}

button.accordion-button {
	--bs-accordion-active-color: var(--colors-third);
	color: var(--colors-grey-mid);
}

.accordion-button:not(.collapsed) {
	--bs-accordion-btn-focus-box-shadow: none !important;
}

.accordion-button:focus {
	border-color: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* *brands section */

#brands {
	background-color: var(--colors-grey-light);
}

#brands h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	color: var(--colors-grey-dark);
}

#brands h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
	color: var(--colors-grey-mid);
}

#brands p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

/* * eifs section */

#eifs {
	background-color: white;
}

#eifs h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	/* color: var(--colors-grey-darker); */
	background-image: var(--grad-greys-dark);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

#eifs h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
	color: var(--colors-grey-mid);
}

#eifs p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

/* * clients section */

#clients {
	background-color: var(--grad-blue);
}

#clients h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	color: var(--colors-grey-light);
}

#clients h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
	color: var(--colors-grey-mid);
}

#clients p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

#clients img {
	max-width: 256px;
	max-height: 128px;
}

/* * contact section */

#conta_hook {
	background-color: var(--colors-grey-light);
}

#conta_hook h3,
.modal-body h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	/* color: var(--colors-grey-darker); */
	background-image: var(--grad-greys-dark);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

#conta_hook h6,
.modal-body h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
	color: var(--colors-grey-mid);
}

#conta_hook p,
.modal-body p {
	font-weight: 500;
	color: var(--colors-grey-dark);
}

#conta_hook img,
.modal-body img {
	width: 4em;
	filter: grayscale(100%);
	transition: all ease-out;
}

#conta_hook img:hover,
.modal-body img:hover {
	width: 4em;
	filter: grayscale(0%);
}

.modal-content {
	box-shadow: var(--drop-shadow-lg) !important;
}

/* * footer */

#footer {
	background-color: var(--colors-grey-darker);
	color: white !important;
}

#footer h6 {
	font-size: 0.8em;
	text-align: start;
}

#footer a {
	text-decoration: none;
}

#footer p {
	max-width: 100%;
	font-size: 1em;
}

#footer img {
	max-height: 40px;
}

#footer div.clear-border {
	border-color: var(--colors-grey-dark) !important;
}

.btn {
	--bs-btn-color: var(--colors-grey-mid) !important;
	--bs-btn-bg: none !important;
	--bs-btn-border-color: var(--colors-grey-mid) !important;

	--bs-btn-hover-color: var(--colors-grey-light) !important;
	--bs-btn-hover-bg: none !important;
	--bs-btn-hover-border-color: var(--colors-grey-light) !important;

	--bs-btn-active-color: var(--colors-grey-light) !important;
	--bs-btn-active-bg: none !important;
	--bs-btn-active-border-color: var(--colors-grey-light) !important;
	--bs-btn-active-shadow: none !important;

	--bs-btn-disabled-color: var(--colors-grey-dark) !important;
	--bs-btn-disabled-bg: var(--colors-grey-dark) !important;
	--bs-btn-disabled-border-color: var(--colors-grey-dark) !important;
	font-weight: 400;
	font-family: var(--fonts-Poppins) !important;
	transition: all ease-out 200ms !important;
}

/* *navigation */

#nav {
	font-family: var(--fonts-NunitoSans);
	font-weight: 600;
	height: 80px;
	transition: all ease-out 200ms;
	box-shadow: none;
}

/* #nav > * * {
	outline: solid thin red;
	outline-offset: -1px;
} */

#nav.glass {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	background-color: #ffffff11;
	filter: var(--drop-shadow-nav);
}

#nav.solid {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background-color: #ffffff;
	filter: var(--drop-shadow-nav);
}

#nav .container {
	max-width: 1360px;
}

#nav > .container {
	padding-top: 19px;
	padding-bottom: 19px;
}

#nav nav {
	max-width: 768px;
}

#nav #logo {
	margin-top: 4px;
	height: 36px;
	min-width: 168px;
	background: url("../img/logo.svg") no-repeat;
	background-position: bottom left;
	background-size: contain;
	background-color: transparent;
	transition: all 200ms;
	filter: grayscale(100%) brightness(500%) var(--drop-shadow-sm);
	cursor: pointer;
}

#nav #logo.blue {
	filter: grayscale(0%) brightness(100%);
}

.nav-link {
	cursor: pointer !important;
	height: 38px;
	padding: 6px;
	color: var(--colors-grey-light);
	background-color: transparent !important;
	transition: all ease-in-out 200ms;
	text-decoration-color: #ffffff00;
	filter: var(--drop-shadow-sm);
}

.nav-link:hover {
	color: white;
	text-decoration: overline;
	text-decoration-thickness: 2px;
	text-decoration-color: #ffffffff;
}

.nav-link.blue {
	color: var(--colors-grey-dark) !important;
	filter: none;
}

.nav-link.blue:hover {
	color: var(--colors-second) !important;
	text-decoration-color: var(--colors-second) !important;
}

/* * cover */
#cover {
	opacity: 1;
	z-index: 1090;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
	color: white;
	cursor: pointer;
}

#cover > .container-fluid {
	max-width: 375px;
	height: 90vh;
}

#cover h6 {
	background-image: var(--grad-greys-light);
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

/* ! Prototype */

#showcase_1 .underlay {
	background: url("/img/covers/0.jpeg") no-repeat center/cover;
}

#showcase_2 .underlay {
	background: url("/img/covers/1.jpeg") no-repeat center/cover;
}

#showcase_3 .underlay {
	background: url("/img/covers/2.jpeg") no-repeat center/cover;
}

#showcase_4 .underlay {
	background: url("/img/covers/3.jpeg") no-repeat center/cover;
}

.prototype {
	position: relative;
	max-height: calc(100vh - 82px);
	overflow: hidden;
}

.prototype > .underlay {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.prototype > .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	background-color: transparent;
	overflow: hidden;
}

.prototype h3 {
	font-family: var(--fonts-Poppins);
	font-weight: 600;
	color: var(--colors-grey-light);
}

.prototype h6 {
	font-family: var(--fonts-Poppins);
	font-weight: 500;
}

.prototype p {
	font-weight: 500;
	color: var(--colors-grey-light);
}

.blur-in {
	filter: blur(1.5rem);
	opacity: 0;
}

.blur-out {
	transition: all 300ms ease-out;
	transition-delay: 300ms;
}

.privacypolicy {
	color: white;
}

.whatsapp {
	cursor: pointer;
	position: fixed;
	margin: 2.5em 1.5em;
	bottom: 0px;
	right: 0px;
	height: 3em;
	width: 3em;
	background-color: transparent;
	z-index: 1040;
	background: url("../img/icons/whatsg.png") no-repeat center/contain;
	transition: all ease-out 200ms;
	filter: brightness(90%) opacity(50%);
}

.whatsapp:hover {
	filter: brightness(100%) opacity(100%) drop-shadow(0 0 1em #00000011);
}