@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-MediumItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-MediumItalic.woff") format("woff");
	font-weight: 500;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-BoldItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-BoldItalic.woff") format("woff");
	font-weight: bold;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-LightItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-LightItalic.woff") format("woff");
	font-weight: 300;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-BlackItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-BlackItalic.woff") format("woff");
	font-weight: 900;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-UltraLightItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-UltraLightItalic.woff") format("woff");
	font-weight: 200;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-HeavyItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-HeavyItalic.woff") format("woff");
	font-weight: 900;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Regular.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Regular.woff") format("woff");
	font-weight: normal;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Bold.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Bold.woff") format("woff");
	font-weight: bold;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Black.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Black.woff") format("woff");
	font-weight: 900;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Heavy.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Heavy.woff") format("woff");
	font-weight: 900;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-SemiBoldItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-SemiBoldItalic.woff") format("woff");
	font-weight: 600;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-SemiBold.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-SemiBold.woff") format("woff");
	font-weight: 600;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Medium.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Medium.woff") format("woff");
	font-weight: 500;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-ExtraBoldItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-ExtraBoldItalic.woff") format("woff");
	font-weight: 800;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-ThinItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-ThinItalic.woff") format("woff");
	font-weight: 100;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-UltraLight.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-UltraLight.woff") format("woff");
	font-weight: 200;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Thin.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Thin.woff") format("woff");
	font-weight: 100;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-ExtraBold.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-ExtraBold.woff") format("woff");
	font-weight: 800;
	font-style : normal;
}

@font-face {
	font-family: "Gilroy-RegularItalic";
	src        : url("/assets/fonts/Gilroy-RegularItalic.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-RegularItalic.woff") format("woff");
	font-weight: normal;
	font-style : italic;
}

@font-face {
	font-family: "Gilroy";
	src        : url("/assets/fonts/Gilroy-Light.woff2") format("woff2"),
		url("/assets/fonts/Gilroy-Light.woff") format("woff");
	font-weight: 300;
	font-style : normal;
}

:root {
	--cyan   : #5bffff;
	--green  : #5bffb8;
	--yellow : #f4ff5b;
	--orange : #f67d3c;
	--blue-bg: #00184f;
	--mint   : #00ffc3;
	--pink   : #f233ac;
}

.bg-orange {
	background-color: var(--orange) !important;
}

.bg-yellow {
	background-color: var(--yellow) !important;
}

.bg-mint {
	background-color: var(--mint) !important;
}

.bg-pink {
	background-color: var(--pink) !important;
}

.bg-cyan {
	background-color: var(--cyan) !important;
}

.bg-blue {
	background-color: var(--blue-bg) !important;
}

.bg-green {
	background-color: var(--green) !important;
}

.text-orange {
	color: var(--orange) !important;
}

.text-yellow {
	color: var(--yellow) !important;
}

.text-mint {
	color: var(--mint) !important;
}

.text-pink {
	color: var(--pink) !important;
}

.text-cyan {
	color: var(--cyan) !important;
}

.text-blue {
	color: var(--blue-bg) !important;
}

.text-green {
	color: var(--green) !important;
}

.btn-arp {
	border-radius   : 36px;
	background-color: rgba(255, 255, 255, 0.5);
}

html,
body {
	overflow-x : hidden;
	font-family: "Gilroy", sans-serif;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
}

section.cover {
	min-height        : 100vh;
	display           : flex;
	overflow          : hidden;
	flex-direction    : column;
	/* justify-content: center; */
}

.brand-icon {
	width     : 80px;
	height    : 80px;
	object-fit: contain;
	margin    : auto;
	opacity   : 0.4;
}

.scrolled {
	background-color: rgba(0, 0, 0, 0.4);
}

/* =========================[HOME]========================= */

#home {
	background-color: var(--blue-bg);
	position        : relative;
}

#home::before {
	content            : "";
	background-image   : url("/assets/bg/grid-bg.png");
	background-size    : cover;
	background-position: top;
	position           : absolute;
	top                : 0;
	left               : 0;
	bottom             : 0;
	right              : 0;
	opacity            : 0.5;
	z-index            : 1;
	mix-blend-mode     : screen;
	background-repeat  : no-repeat;
}

#home::after {
	content            : "";
	background-image   : url("/assets/bg/grid-bg.png");
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	top                : 0;
	left               : 0;
	bottom             : 0;
	right              : 0;
	opacity            : 0.5;
	z-index            : 0;
	mix-blend-mode     : screen;
	background-repeat  : no-repeat;
	transform          : rotate(-90deg) translate(-50%, -80%);
}

#home .container {
	z-index: 2;
}

#home .container .display-1 {
	color      : #fff;
	font-weight: 600;
}

#home .container p {
	margin-top: 0.5rem;
	color     : #fff;
}

#home .container::before {
	content          : "";
	width            : 300px;
	height           : 120px;
	background-image : url("/assets/img/figures/e6.png");
	position         : absolute;
	top              : -70px;
	background-size  : contain;
	background-repeat: no-repeat;
	left             : 40%;
	transform        : translate(-50%, 0%);
}

#home .container::after {
	content          : "";
	width            : 300px;
	height           : 300px;
	background-image : url("/assets/img/figures/e5.png");
	position         : absolute;
	top              : -150px;
	background-size  : contain;
	background-repeat: no-repeat;
	right            : 0;
	transform        : translate(50%, 0%);
}

#home .container>.row:first-child:before {
	content          : "";
	width            : 90px;
	height           : 90px;
	background-image : url("/assets/img/figures/e4.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	top              : 90px;
	right            : 50px;
	z-index          : 0;
	animation        : float 6s ease-in-out infinite;
}

#home .container>.row .col-md-12 {
	z-index: 2;
}

#home .container>.row:first-child:after {
	content          : "";
	width            : 50px;
	height           : 50px;
	background-image : url("/assets/img/figures/e2.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	bottom           : 20px;
	right            : 30px;
}

#home .container>.row:first-child>.col-md-12:before {
	content          : "";
	width            : 20px;
	height           : 20px;
	background-image : url("/assets/img/figures/e2.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	top              : 0px;
	left             : 40px;
	transform        : rotate(-160deg);
}

#home .container>.row:first-child>.col-md-12:after {
	content          : "";
	width            : 35px;
	height           : 35px;
	background-image : url("/assets/img/figures/e1.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	bottom           : -40px;
	left             : 20px;
	transform        : rotate(-160deg);
	animation        : float 6s ease-in-out infinite;
	animation-delay  : 1s;
}

#home .home-intro-text {
	font-size : 3.5rem;
	margin-top: 1rem;
}

/* =========================[ABOUT]========================= */

#about {
	background-color: var(--blue-bg);
	position        : relative;
}

#about::after {
	content            : "";
	background-image   : url("/assets/bg/grid-bg.png");
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	top                : 0;
	left               : 0;
	bottom             : 0;
	right              : 0;
	opacity            : 0.5;
	z-index            : 0;
	mix-blend-mode     : screen;
	background-repeat  : no-repeat;
	transform          : rotate(-90deg) translate(8%, -80%);
}

#about::before {
	content          : "";
	width            : 80px;
	height           : 80px;
	background-image : url("/assets/img/figures/e3.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	top              : 30px;
	right            : 10px;
	transform        : rotate(-160deg);
	animation        : float-down 6s ease-in-out infinite;
	animation-delay  : 3s;
}

#about .container .row {
	z-index: 10;
}

#about .container::before {
	content          : "";
	width            : 840px;
	height           : 230px;
	background-image : url("/assets/img/figures/e6.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	top              : 15%;
	left             : 9%;
	transform        : rotate(-266deg);
}

#about .container::after {
	content          : "";
	width            : 30px;
	height           : 30px;
	background-image : url("/assets/img/figures/e4.png");
	background-size  : contain;
	background-repeat: no-repeat;
	position         : absolute;
	top              : 180px;
	left             : 30px;
	transform        : rotate(-265deg);
	animation        : float-x 6s ease-in-out infinite;
	animation-delay  : 1s;
}

#about .phone-placeholder {
	position: relative;
	height  : 600px;
}

#about .phone-placeholder::before {
	content             : "";
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	/* background-image : url("/assets/img/phone-placeholder.png"); */
	background-size     : cover;
	background-repeat   : no-repeat;
	z-index             : 1;
}

#about .phone-placeholder::after {
	content         : "";
	width           : 110px;
	height          : 110px;
	background-image: url("/assets/img/a-green.png");
	position        : absolute;
	z-index         : 2;
	background-size : contain;
	bottom          : 0px;
	right           : 10px;
}

#about .phone-placeholder #carousel {
	position     : absolute;
	top          : 25px;
	left         : 0px;
	right        : 0px;
	bottom       : 35px;
	overflow     : hidden;
	border-radius: 15px;
}

#about .phone-placeholder #carousel .carousel-indicators {
	position       : absolute;
	right          : 0;
	bottom         : 20px;
	left           : 0;
	z-index        : 15;
	display        : -ms-flexbox;
	display        : flex;
	-ms-flex-pack  : center;
	justify-content: center;
	padding-left   : 0;
	margin-right   : 15%;
	margin-left    : 15%;
	list-style     : none;
}

#about .phone-placeholder #carousel .carousel-indicators li {
	border-radius: 50%;
	border       : 2px solid black;
	opacity      : 1;
	width        : 8px;
	height       : 8px;
}

#about .phone-placeholder #carousel .carousel-indicators li.active {
	background-color: black;
}

#about .phone-placeholder #carousel .carousel-inner,
#about .phone-placeholder #carousel .carousel-inner .carousel-item {
	height: 100%;
}

#about .data h2 {
	color        : var(--green);
	font-size    : 4rem;
	line-height  : 3rem;
	margin-bottom: 1rem;
}

#about .data p,
#about .data b {
	color: #fff;
}

#about .hover-icon {
	text-align: center;
	margin-top: 2rem;
	z-index   : 300;
}

#about .hover-icon span {
	display         : block;
	position        : relative;
	border-radius   : 3rem;
	margin-top      : 10px;
	color           : #fff;
	background-color: rgba(255, 255, 255, 0.3);
	cursor          : pointer;
}

#about .hover-icon span:hover>.bubble {
	display        : flex;
	width          : 230px;
	align-items    : center;
	justify-content: center;
}

#about .hover-icon span>.bubble {
	position        : absolute;
	top             : calc(100% + 10px);
	display         : none;
	text-align      : center;
	padding         : 0.5rem 0.7rem;
	background-color: #002c92;
	border-radius   : 1.5rem;
	left            : 50%;
	transform       : translate(-50%, 0%);
}

#about .hover-icon span>.bubble p {
	margin: 0;
}

#about .hover-icon i {
	font-size : 2rem;
	background: rgb(0, 73, 255);
	background: -moz-linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	background: -webkit-linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	background: linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	filter                 : progid:DXImageTransform.Microsoft.gradient(startColorstr="#0049ff", endColorstr="#00ff66", GradientType=1);
	-webkit-background-clip: text;
	background-clip        : text;
	-webkit-text-fill-color: transparent;
}

#about .bosses h2 {
	color        : var(--cyan);
	font-size    : 4rem;
	line-height  : 3rem;
	margin-bottom: 1rem;
}

#about .bosses .avatar {
	width           : 90px;
	height          : 90px;
	overflow        : hidden;
	border-radius   : 50%;
	/* margin       : 2rem 0 1rem auto; */
}

/* =========================[whatwedo]========================= */

#whatwedo {
	background-color: var(--blue-bg);
	position        : relative;
}

#whatwedo::before {
	content            : "";
	background-image   : url("/assets/bg/grid-bg.png");
	background-size    : cover;
	background-position: bottom;
	position           : absolute;
	top                : 0px;
	left               : 0;
	bottom             : 0;
	right              : 0;
	opacity            : 0.5;
	z-index            : 0;
	mix-blend-mode     : screen;
	background-repeat  : no-repeat;
	transform          : rotate(90deg) translate(10%, -75%);
}

#whatwedo::after {
	content            : "";
	background-image   : url(/assets/img/watch.png);
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	bottom             : 60px;
	right              : -95px;
	z-index            : 0;
	width              : 200px;
	height             : 200px;
	background-repeat  : no-repeat;
	transform          : rotate(9deg);
}

#whatwedo .container {
	margin-top: auto;
	z-index   : 1;
}

#whatwedo .container .row {
	z-index: 1;
}

#whatwedo .container::before {
	content            : "";
	background-image   : url("/assets/img/figures/e6.png");
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	top                : 50%;
	left               : -140px;
	z-index            : 0;
	width              : 500px;
	height             : 215px;
	background-repeat  : no-repeat;
	transform          : rotate(-85deg) translate(25%, -50%);
}

#whatwedo .container::after {
	content            : "";
	background-image   : url(/assets/img/figures/e8.png);
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	top                : 35px;
	left               : -100px;
	z-index            : 0;
	width              : 240px;
	height             : 515px;
	background-repeat  : no-repeat;
}

#whatwedo .whatwedo h2 {
	color        : var(--yellow);
	font-size    : 4rem;
	line-height  : 4rem;
	margin-bottom: 1rem;
}

#whatwedo .whatwedo .thing {
	position      : relative;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	border-bottom : 1px solid rgba(255, 255, 255, .1);
	z-index       : 999;
}

#whatwedo .whatwedo .thing .hoverable .fa-stack .fas.fa-angle-right {
	color: var(--pink);
}

#whatwedo .whatwedo .thing .icon {
	width          : 60px;
	height         : 60px;
	display        : flex;
	justify-content: center;
	align-items    : center;
	min-width      : 60px;
	min-height     : 60px;
}

#whatwedo .whatwedo .thing .icon i {
	background-color       : var(--mint);
	-webkit-background-clip: text;
	background-clip        : text;
	-webkit-text-fill-color: transparent;
	font-size              : 50px;
}

#whatwedo .whatwedo .thing .hoverable {
	color          : #fff;
	position       : absolute;
	bottom         : -15px;
	left           : 50%;
	transform      : translate(-50%, 0%);
	width          : 30px;
	height         : 30px;
	display        : flex;
	align-items    : center;
	justify-content: center;

}

#whatwedo .whatwedo .thing .hoverable::after {
	content         : "";
	border-radius   : 50%;
	background-color: #fff;
	position        : absolute;
	top             : 0px;
	width           : 30px;
	height          : 30px;
	left            : 0px;
}

#whatwedo .whatwedo .thing .hoverable i {
	transition   : transform 400ms ease;
	color        : var(--pink);
	z-index      : 1;
	font-size    : 25px;
	/* transform : rotate(90deg); */
}

#whatwedo .whatwedo .thing .icon {
	width          : 60px;
	height         : 60px;
	display        : flex;
	justify-content: center;
	align-items    : center;
	min-width      : 60px;
	min-height     : 60px;
}

#whatwedo-list {
	margin-top: auto;
}

#toContact {
	display: block;
}

.at_icon i {
	background: rgb(47, 213, 179);
	background: -moz-linear-gradient(203deg,
			rgba(47, 213, 179, 1) 0%,
			rgba(18, 249, 65, 1) 100%);
	background: -webkit-linear-gradient(203deg,
			rgba(47, 213, 179, 1) 0%,
			rgba(18, 249, 65, 1) 100%);
	background: linear-gradient(203deg,
			rgba(47, 213, 179, 1) 0%,
			rgba(18, 249, 65, 1) 100%);
	filter                 : progid:DXImageTransform.Microsoft.gradient(startColorstr="#2fd5b3", endColorstr="#12f941", GradientType=1);
	-webkit-background-clip: text;
	background-clip        : text;
	-webkit-text-fill-color: transparent;
	font-size              : 65px;
}

#contact {
	background-color: var(--blue-bg);
	position        : relative;
}

#contact::after {
	content            : "";
	background-image   : url("/assets/bg/grid-bg.png");
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	top                : 0;
	left               : 0;
	bottom             : 0;
	right              : 0;
	opacity            : 0.5;
	z-index            : 0;
	mix-blend-mode     : screen;
	background-repeat  : no-repeat;
	transform          : rotate(90deg) translate(8%, -60%);
}

#contact::before {
	content            : "";
	background-image   : url("/assets/img/drone.png");
	background-size    : contain;
	background-position: bottom;
	position           : absolute;
	bottom             : 50%;
	right              : 0;
	z-index            : 0;
	width              : 200px;
	height             : 420px;
	transform          : translate(0%, 80%);
	background-repeat  : no-repeat;
}

#contact #copy {
	background-color: rgba(0, 0, 0, 0.3);
}

/*==========================elements===============================*/
.grid-icon {
	margin-top: 20px;
}

.grid-icon i {
	background: rgb(0, 73, 255);
	background: -moz-linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	background: -webkit-linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	background: linear-gradient(39deg,
			rgba(0, 73, 255, 1) 0%,
			rgba(0, 94, 236, 1) 20%,
			rgba(0, 163, 179, 1) 48%,
			rgba(0, 212, 137, 1) 73%,
			rgba(0, 255, 102, 1) 88%,
			rgba(0, 255, 102, 1) 100%);
	filter                 : progid:DXImageTransform.Microsoft.gradient(startColorstr="#0049ff", endColorstr="#00ff66", GradientType=1);
	-webkit-background-clip: text;
	background-clip        : text;
	-webkit-text-fill-color: transparent;
	font-size              : 65px;
}

.grid-icon p {
	color: #fff;
}

.e16by9 {
	position: relative;
	display : block;
	width   : 100%;
	padding : 0;
	overflow: hidden;
}

.e16by9::before {
	display    : block;
	content    : "";
	padding-top: 56.25%;
}

.e16by9 .item {
	position: absolute;
	top     : 0;
	bottom  : 0;
	left    : 0;
	width   : 100%;
	height  : 100%;
	border  : 0;
}

.e16by9 .item img {
	position  : absolute;
	top       : 0;
	bottom    : 0;
	left      : 0;
	right     : 0;
	object-fit: cover;
	width     : 100%;
	height    : 100%;
}


/* ==========[animations]========== */

@keyframes float-down {
	0% {
		transform: translatey(0px);
	}

	50% {
		transform: translatey(20px);
	}

	100% {
		transform: translatey(0px);
	}
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}

	50% {
		transform: translatey(-20px);
	}

	100% {
		transform: translatey(0px);
	}
}

@keyframes float-x {
	0% {
		transform: translatex(0px);
	}

	50% {
		transform: translatex(-20px);
	}

	100% {
		transform: translatex(0px);
	}
}