:root {
	--bg-color-dark: #13131A; /*was: #121212*/
	--bg-color-medium: #16161D; /*was #181818*/
	--bg-color-light: #1B1B22; /*was #1e1e1e*/
	--text-color: #e0e0e0;
	--accent-color: #026a81;
	--accent-hover-color: #004b5c;
	--accent-dark-hover: #006e86;
	--accordion-header-bg: var(--accent-dark-hover);
	--accordion-body-bg: var(--accent-hover-color);
}

body {
	background-color: var(--bg-color-dark);
	color: var(--text-color);
	animation: fadeIn 0.5s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	color: var(--text-color);
}

a {
	color: var(--accent-color);
}

a:hover {
	color: var(--accent-hover-color);
}

section#main {
	height: 90vh;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.fixed-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
		url('../images/background.webp') no-repeat center center/cover;
	z-index: -1000;
	filter: blur(5px);
}

section#main .container {
	position: relative;
	z-index: 1;
}

#features div .row>div {
	transition: 0.15s;
}

.bg-darker {
	background-color: var(--bg-color-dark);
}

#features div .row:hover>div:hover {
	background-color: var(--bg-color-light) !important;
	color: var(--bg-color-dark);
}

.logo img {
	height: auto;
	max-height: 64px;
	max-width: 64px;
}

.navbar-dark {
	background-color: var(--bg-color-medium);
}

.navbar-brand img {
	width: 150px;
	height: auto;
	min-height: 50px;
}

.navbar-brand {
	user-select: none;
}

.nav-link {
	color: var(--text-color) !important;
	font-size: 1.25rem;
}

.nav-link:hover {
	color: var(--accent-color) !important;
}

.btn-primary {
	background-color: var(--accent-color);
	border-color: var(--accent-color);
}

.btn-primary:hover {
	background-color: var(--accent-dark-hover);
	border-color: var(--accent-dark-hover);
}

.btn-outline-dark {
	color: var(--accent-color);
	border-color: var(--accent-color);
}

.btn-outline-dark:hover {
	transition: 0.2s;
	background-color: var(--accent-color);
	border-color: var(--accent-color);
	color: var(--bg-color-dark);
}

.btn-outline-dark:hover>i {
	transition: 0.2s;
	color: var(--bg-color-dark);
}

.accordion {
	width: 60vw;
	max-width: 1200px;
	margin: 0 auto;
}

.accordion-button {
	background-color: var(--accent-hover-color);
	color: var(--text-color);
}

.accordion-button:not(.collapsed) {
	background-color: var(--accent-color);
	color: var(--text-color);
}

.accordion-button:hover {
	background-color: var(--accent-color);
	color: var(--text-color);
}

.accordion-button:focus {
	box-shadow: unset;
}

.accordion-body {
	background-color: var(--accent-color);
	color: var(--text-color);
}

.fa-arrow-down,
.fa-apple,
.fa-android,
.fa-cloud,
.fa-mobile,
.fa-rocket {
	color: var(--accent-color);
}

#features div .row {
	width: 75%;
	justify-content: center;
	margin: 0 auto;
	align-items: center;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bounce {

	0%,
	20%,
	50%,
	80%,
	100% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(15px);
	}

	60% {
		transform: translateY(10px);
	}
}

.fadeInUp {
	animation-name: fadeInUp;
}

footer {
	padding: 20px 0;
	background-color: var(--bg-color-light);
}

.background {
	background-color: var(--bg-color-light);
}

#downArrow {
	cursor: pointer;
	margin-top: 200px;
	color: var(--accent-color);
	animation: bounce 2s infinite;
}

.bg-dark,
footer {
	background-color: var(--bg-color-medium) !important;
}

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

@media (min-width: 992px) { 
	.nav-link {
		font-size: 1.5rem;
	}

	.navbar-nav .nav-item:not(:last-child) .nav-link::after {
		content: '|';
		margin-left: 20px;
		margin-right: 10px;
		color: var(--text-color);
	}

	.navbar-nav .nav-item {
		display: flex;
		align-items: center;
	}

	#features div .row {
		width: 100%;
	}

	#features div .row>div {
		width: 30%;
		margin-left: 1%;
		margin-right: 1%;
		transition: 0.15s;
	}

	#testimonials div .row>div {
		width: 30%;
		margin-left: 1%;
		margin-right: 1%;
		transition: 0.15s;
	}
}