:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--orange: #fd7e14;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

*,
:after,
:before {
	box-sizing: border-box
}

html {
	font-family: 'Raleway', sans-serif;
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	max-width: 100dvw;
	overflow-x: hidden;
}

html::-webkit-scrollbar {
	width: 8px;

	@media only screen and (max-width: 768px) {
		width: 3px;
	}
}

html::-webkit-scrollbar-track {
	background: transparent;
}

html::-webkit-scrollbar-thumb {
	background: #228B6B;
	border-radius: 8px;
}

html::-webkit-scrollbar-thumb:hover {
	background: #228B6B;
}

article,
footer,
header,
main,
nav,
section {
	display: block
}

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-size: 1rem;
	line-height: 1.5;
	color: #fff;
	text-align: left;
	background-color: #03090A
}


h2,
h3 {
	margin-top: 0;
	margin-bottom: .5rem
}

p,
ul {
	margin-top: 0;
	margin-bottom: 1rem
}

ul ul {
	margin-bottom: 0
}

strong {
	font-weight: bolder
}

a {
	text-decoration: none;
	background-color: transparent
}

a:hover {
	text-decoration: underline
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
	color: inherit;
	text-decoration: none
}

img {
	border-style: none
}

img,
svg {
	vertical-align: middle
}

svg {
	overflow: hidden
}

label {
	display: inline-block;
	margin-bottom: .5rem
}

button {
	border-radius: 0
}

button:focus {
	outline: 1px dotted;
	outline: 5px auto -webkit-focus-ring-color
}

button,
input,
textarea {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit
}

button,
input {
	overflow: visible
}

button {
	text-transform: none
}

[type=button],
[type=submit],
button {
	-webkit-appearance: button
}

[type=button]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
	cursor: pointer
}

[type=button]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
	padding: 0;
	border-style: none
}

textarea {
	overflow: auto;
	resize: vertical
}


.h2,
.h3,
h2,
h3 {
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2
}

.h2,
h2 {
	font-size: 2rem
}

.h3,
h3 {
	font-size: 1.75rem
}

.img-fluid {
	max-width: 100%;
	height: auto
}

.container {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto
}

@media (min-width:576px) {
	.container {
		max-width: 540px
	}
}

@media (min-width:768px) {
	.container {
		max-width: 720px
	}
}

@media (min-width:992px) {
	.container {
		max-width: 960px
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1140px
	}
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px
}


.col-12,
.col-lg-4,
.col-md-4 {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px
}

.col-12 {
	flex: 0 0 100%;
	max-width: 100%
}

@media (min-width:768px) {
	.col-md-4 {
		flex: 0 0 33.3333333333%;
		max-width: 33.3333333333%
	}
}

@media (min-width:992px) {

	.col-lg-4 {
		flex: 0 0 33.3333333333%;
		max-width: 33.3333333333%
	}
}

.form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: .25rem;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
	.form-control {
		transition: none
	}
}

.form-control::-ms-expand {
	background-color: transparent;
	border: 0
}

.form-control:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #495057
}

.form-control:focus {
	color: #495057;
	background-color: #fff;
	border-color: #80bdff;
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}

.form-control::-webkit-input-placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control::-moz-placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control:-ms-input-placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control::-ms-input-placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control::placeholder {
	color: #6c757d;
	opacity: 1
}

.form-control:disabled {
	background-color: #e9ecef;
	opacity: 1
}


input[type=time].form-control {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}


textarea.form-control {
	height: auto
}

.form-group {
	margin-bottom: 1rem
}

.btn {
	display: inline-block;
	font-weight: 400;
	color: #212529;
	text-align: center;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

@media (prefers-reduced-motion:reduce) {
	.btn {
		transition: none
	}
}

.btn:hover {
	color: #212529;
	text-decoration: none
}

.btn:focus {
	outline: 0;
	box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25)
}


.btn:disabled {
	opacity: .65
}

.btn:not(:disabled):not(.disabled) {
	cursor: pointer
}

.btn-sm {
	padding: .25rem .5rem;
	font-size: .875rem;
	line-height: 1.5;
	border-radius: .2rem
}

.nav {
	flex-wrap: wrap;
	margin-bottom: 0
}

.nav {
	display: flex;
	padding-left: 0;
	list-style: none
}

@-webkit-keyframes progress-bar-stripes {
	0% {
		background-position: 1rem 0
	}

	to {
		background-position: 0 0
	}
}

@keyframes progress-bar-stripes {
	0% {
		background-position: 1rem 0
	}

	to {
		background-position: 0 0
	}
}

.media {
	display: flex;
	align-items: flex-start
}

@-webkit-keyframes spinner-border {
	to {
		transform: rotate(1turn)
	}
}

@keyframes spinner-border {
	to {
		transform: rotate(1turn)
	}
}

@-webkit-keyframes spinner-grow {
	0% {
		transform: scale(0)
	}

	50% {
		opacity: 1;
		transform: none
	}
}

@keyframes spinner-grow {
	0% {
		transform: scale(0)
	}

	50% {
		opacity: 1;
		transform: none
	}
}

.d-none {
	display: none !important
}

.d-block {
	display: block !important
}

.d-flex {
	display: flex !important
}

@media (min-width:992px) {
	.d-lg-none {
		display: none !important
	}

	.d-lg-flex {
		display: flex !important
	}
}

.flex-column {
	flex-direction: column !important
}

.justify-content-end {
	justify-content: flex-end !important
}

.justify-content-center {
	justify-content: center !important
}

.justify-content-between {
	justify-content: space-between !important
}

.align-items-center {
	align-items: center !important
}

@media (min-width:992px) {

	.justify-content-lg-center {
		justify-content: center !important
	}

	.align-items-lg-start {
		align-items: flex-start !important
	}
}

.mb-3 {
	margin-bottom: 1rem !important
}

.mb-4 {
	margin-bottom: 1.5rem !important
}


.my-5 {
	margin-top: 3rem !important
}


.my-5 {
	margin-bottom: 3rem !important
}

.pb-0 {
	padding-bottom: 0 !important
}

.text-center {
	text-align: center !important
}

@media print {

	*,
	:after,
	:before {
		text-shadow: none !important;
		box-shadow: none !important
	}

	a:not(.btn) {
		text-decoration: underline
	}

	img {
		page-break-inside: avoid
	}

	h2,
	h3,
	p {
		orphans: 3;
		widows: 3
	}

	h2,
	h3 {
		page-break-after: avoid
	}

	@page {
		size: a3
	}

	.container,
	body {
		min-width: 992px !important
	}
}

#app,
body,
html {
	height: 100%
}

body {
	font-size: 16px;
	font-weight: 400;
	font-family: 'Raleway', sans-serif;
}

a:hover {
	text-decoration: none
}


h2,
h3 {
	color: #fff;
}

h2 {
	font-size: 26px
}

h3 {
	font-size: 20px
}

section {
	width: 100%
}

section .section-wrapper {
	padding: 50px 0;
	text-align: center;

	@media only screen and (max-width: 768px) {
		padding: 20px 30px;
	}
}

section .section-header {
	padding-bottom: 50px
}

section .section-header h2 {
	margin: 0;
	font-weight: 400;
	text-align: center
}

section .section-header h2 {
	line-height: 1.5
}

section .section-header .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center
}

@media (min-width:992px) {
	section .section-wrapper {
		text-align: left
	}
}

.btn {
	background: #31cd9e;
	border-radius: 30px;
	white-space: nowrap;
	line-height: 1;
	border: none
}

.btn,
.btn:hover {
	color: #fff
}

.btn:focus {
	box-shadow: none
}

.btn-sm {
	font-size: 16px;
	height: 35px;
	padding: 0 25px
}

.btn-submit {
	background: transparent;
	color: #31cd9e;
	transition: all 0.15 ease-in-out;
}

.btn-submit::hover svg {
	transform: scale(1.05);
	color: #ffffff;
}

.text-normal {
	font-weight: 400
}

.link {
	cursor: pointer
}

@media (min-width:768px) {

	h2 {
		font-size: 32px
	}

	h3 {
		font-size: 22px
	}

	.btn-sm {
		height: 40px;
		padding: 0 30px
	}
}

#nav-container {
	background: transparent;
	transition: background .25s ease;
	position: absolute;
	padding: 45px 0;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 1000;
	transition: all 0.3s ease-in-out;
}

#nav-container.fill {
	background-color: rgb(4, 50, 51, 0.7);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}

#nav-container .logo {
	padding-right: 20px
}

#nav-container .btn-login {
	background-color: #fff;
	color: #08514F !important;
}

#nav-container ul {
	list-style: none;
	margin: 0;
	padding: 0
}

#nav-container .nav-item {
	text-decoration: none;
	color: #fff;
	display: inline-block;
}


#nav-container .nav-item:hover {
	color: #31cd9e
}

#nav-container .nav .left-side {
	flex: 1
}

#nav-container .nav .nav-item {
	margin-right: 25px;
	position: relative;
	display: block
}

#nav-container .nav .nav-item:after {
	content: "";
	height: 1px;
	width: 100%;
	display: none;
	background: #31cd9e;
	position: absolute;
	margin-top: 5px
}

#nav-container .nav .nav-item:hover:after {
	display: block
}

#nav-container .nav .burger {
	margin-right: 20px;
	cursor: pointer
}

#nav-container .nav .burger>div {
	background-color: #31cd9e;
	margin-bottom: 2px;
	width: 26px;
	height: 4px
}

#nav-container .mobile-nav {
	opacity: 0;
	position: fixed;
	flex-direction: column;
	align-items: center;
	left: -50%;
	top: 149px;
	width: 50%;
	background-color: #fff;
	z-index: 9;
	padding: 30px 0;
	transition: transform .3s ease, opacity .3s ease;
	box-shadow: 0 0 10px #ccc;
	text-transform: uppercase
}

#nav-container .mobile-nav li {
	margin-bottom: 15px
}

#nav-container.home {
	background: transparent
}

#nav-container.home:not(.scrolled) .burger>div {
	background-color: #fff
}

#nav-container.home:not(.scrolled) .btn-login {
	color: #31cd9e;
	background: #fff
}

#nav-container.home:not(.scrolled) .nav .nav-item {
	color: #fff
}

#nav-container.home:not(.scrolled) .nav .nav-item:hover:after {
	background: #fff
}

.header.home {
	background-size: cover
}

.header.page {
	height: 149px
}

@-webkit-keyframes scroll-animation {
	0% {
		transform: translate(0);
		opacity: 0
	}

	40% {
		opacity: 1
	}

	80% {
		transform: translateY(20px);
		opacity: 0
	}

	to {
		opacity: 0
	}
}

@keyframes scroll-animation {
	0% {
		transform: translate(0);
		opacity: 0
	}

	40% {
		opacity: 1
	}

	80% {
		transform: translateY(20px);
		opacity: 0
	}

	to {
		opacity: 0
	}
}

input[type].form-control,
textarea.form-control {
	border-radius: 0;
	border: 1px solid #ced4da
}

input[type].form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
	opacity: .5
}

input[type].form-control::-moz-placeholder,
textarea.form-control::-moz-placeholder {
	opacity: .5
}

input[type].form-control:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {
	opacity: .5
}

input[type].form-control::-ms-input-placeholder,
textarea.form-control::-ms-input-placeholder {
	opacity: .5
}

input[type].form-control::placeholder,
textarea.form-control::placeholder {
	opacity: .5
}

input[type].form-control:focus,
textarea.form-control:focus {
	box-shadow: none;
	outline: transparent
}

input[type].form-control {
	height: 60px
}

#contact .contact-form {
	background-size: cover;
	padding: 70px 0 0 0;
}

#contact .contact-form input[type],
#contact .contact-form textarea {
	border: none
}

#services h3 a {
	font-size: 20px;
	color: #fff;
	text-transform: capitalize;
}

#services .section-content img {
	max-height: 200px
}

#services .section-content .service {
	padding: 32px 0
}

.service {
	padding: 30px !important;
	transition: all 0.2s ease-out;
	border: 2px solid transparent;
}

.service:hover {
	background-color: #0B1F20;
	border: 2px solid transparent;
	border-radius: 16px;
	background-clip: padding-box;
	padding: 10px;
	box-sizing: border-box;
}

.service img {
	scale: 1;
	position: relative;
	left: 0;
	top: 0;
	transition: all 0.2s ease-in-out;
}

.service:hover img {
	scale: 2;
	left: calc(50% - 40px);
	top: -40px;
}

.service .read-more {
	float: right;
	color: inherit !important;
	opacity: 0;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
}

.service:hover .read-more {
	opacity: 1;
}

.service:hover::after {
	position: absolute;
	top: -2px;
	bottom: -2px;
	left: -2px;
	right: -2px;
	background: linear-gradient(#375b5d, #0B1F20);
	content: '';
	z-index: -1;
	border-radius: 16px;
}

.service p {
	color: #999;
	font-size: 16px;
}

#footer .info {
	padding-bottom: 60px
}

#footer .info-header {
	margin-bottom: 30px;
	height: 60px
}

#footer .info-content {
	color: #fff
}

#footer .info-content .text-item {
	padding-bottom: 10px
}

#footer .info-content .text-item:hover a {
	color: #31cd9e
}

#footer .info .wrapper {
	margin-bottom: 15px
}

#footer .footer {
	padding-bottom: 50px
}

#footer .footer .links {
	padding-bottom: 15px;
}

#footer .footer .links a:first-child {
	padding-right: 15px
}

#footer .footer .links a {
	color: #fff !important;
}

@media (min-width:576px) {
	#footer .footer .links {
		padding-bottom: 0
	}

	#footer .footer .links a:first-child {
		padding-right: 50px
	}
}

#bg {
	height: 550px;
	width: 100vw;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

#hero {
	height: 450px;
	margin-top: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

#hero::before {
	content: " ";
	display: block;
	position: absolute;
	height: 100px;
	bottom: 0;
	left: 0;
	right: 0;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(3, 9, 10, 0)), to(rgba(3, 9, 10, 1)));
}

.logo a {
	color: #fff;
	font-size: 24px;
	font-weight: 600;
}

.hero-cta {
	height: 80px;
	width: 240px;
	font-size: 18px;
	border-radius: 20px;
	cursor: pointer;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(49, 205, 158);
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
		rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
		rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset,
		rgba(0, 0, 0, 0.06) 0px 2px 1px,
		rgba(0, 0, 0, 0.09) 0px 4px 2px,
		rgba(0, 0, 0, 0.09) 0px 8px 4px,
		rgba(0, 0, 0, 0.09) 0px 16px 8px,
		rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.hero-text {
	margin: 20px auto;
	font-size: 18px;
	max-width: 620px;
	text-align: center;
	width: 100%;
}

.hero-cta:hover {
	transition: scale 0.2s ease-in-out;
	scale: 1.015;
}

.hero-cta span {
	margin-left: 10px;
	display: inline-block;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: black;
}

.hero-title {
	font-weight: 600 !important;
	font-size: 42px;
}

form {
	min-width: 25rem;
}

form .form-control {
	background-color: transparent;
	border: 2px solid #ffffff !important;
	border-radius: 20px !important;
	border: none;
}

form .form-control.thick {
	height: 3.3rem;
	padding: 20px;
}

form .form-control:focus {
	border: none;
	background-color: transparent !important;
}

form .message .form-control {
	padding: 20px;
}

form ::placeholder {
	font-size: 18px;
	color: #fff !important;
	font-weight: 500;
	position: relative;
	left: 0;
}

form input,
form textarea {
	color: #212529;
}


/* PRELOADER */
.preloader {
    background-color: #043233;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.preloader.hidden {
    animation: hide 1s ease-in-out;
}

.loader-circle,
.loader-line-mask {
    transition: all .3s;
}

.loader-circle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    margin-left: -70px;
    margin-top: -70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-line-mask {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 140px;
    margin-left: -70px;
    margin-top: -70px;
    overflow: hidden;
    transform-origin: 70px 70px;
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    animation: rotate 1.2s infinite linear;

    .loader-line {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}