:root {
	--white: #fff;
	--mediumgrey: #212832;
	--secondaryblack: #080809;
	--pink: #ab0368;
	--mediumblack: #1a1818;
	--darkorange: #d2a40f;
	--darkpurple: #3b107f;
	--turquoise: #34a2bd;
	--darkturquoise: #009491;
	--skyblue: #cedbef;
	--darkblue: #1e1d4c;
	--mediumgreyblue: #5e6282;
	--mediumturquoise: #1ba3a0;
	--darkgrey: #707070;
	--lightgrey: #f6f6f6;
	--black: #000;
	--primaryblue: #4977c6;
	--mediumblue: #517cbb;
	--primaryturquoise: #3dbbb8;
	--translucentturquoise: rgba(61, 187, 184, 0.7);
	--darkroyalblue: #4a6388;
	--shadow: 0px 52px 46px #eaeaea;
}

body {
	color: var(--mediumgreyblue);
	font-family: "Montserrat", sans-serif;

	/* font-family: "Roboto Condensed", sans-serif; */
}

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

.font-cursive {
	font-family: "Satisfy", cursive;
}

.font-condensed {
	font-family: "Roboto Condensed", sans-serif;
}

.navbar {
	background-color: var(--translucentturquoise);
	/* background-image: url(./images/header-image.png); */
	/* background: transparent linear-gradient(90deg, #4977C6 0%, #3DBBB8 50%); */
	/* background: transparent linear-gradient(90deg, #4977c6 0%, #3dbbb8 50%, #3dbbb8 100%); */
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover,
.nav-pills .show > .nav-link {
	color: var(--white);
	background-color: black;
}

.header {
	color: whitesmoke;
	position: relative;
	height: 100dvh;
	background-image: url(../images/header-image.png);
	background-size: cover;
}

.header .component {
	/* font-size: 4vw; */
	font-size: 3.5rem;
	position: absolute;
	top: 30%;
	left: 50px;
	line-height: 3.3rem;
}

@media screen and (max-width: 600px) {
	.header .component {
		font-size: 2rem;
		line-height: 2rem;
		left: 10px;
	}
}

.header .second-txt {
	position: absolute;
	font-size: 2rem;
	top: 60%;
	left: 50px;
}

.header .arrow {
	position: absolute;
	bottom: 50px;
	right: 50px;
}

.header .image-container img {
	width: 15%;
}

.service {
	min-height: 400px;
	/* max-height: 450px; */
	background-image: url(../images/service_wave.svg);
	background-repeat: no-repeat;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 2rem;
}

.service > div {
	line-height: 22px;
	height: 220px;
	width: 300px;
	border-radius: 40px;
	/* border: 1px solid #626262; */
	margin: 3px;
	box-shadow: var(--shadow);
}

.service .box {
	margin: auto;
	width: 80px;
	height: 80px;
	border-radius: 25px 0px 10px 0px;
	background-color: var(--white);
}

.service .box img {
	max-width: 60px;
	max-height: 60px;
	margin: 10px;
}

.service p {
	font-weight: 600;
	margin: 30px 15px 0 15px;
	font-size: 1.2rem;
}

.feature-text {
	margin-top: 1.5rem;
}

.extra-bold {
	font-weight: bolder;
}

.feature {
	min-height: 400px;
	margin-top: 25px;
	margin-bottom: 25px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	overflow: auto;
	flex-direction: row;
	gap: 2rem;
}

.feature div {
	border-radius: 25px;
	box-shadow: var(--shadow);
	width: 250px;
	height: 300px;
	padding: 20px;
	color: var(--mediumgreyblue);
}

.feature h3 {
	margin-top: 1.5rem;
}

.information {
	margin: 50px;
	font-size: small;
}

.information .info-list {
	margin-top: 50px;
}

.information .info-item {
	margin-top: 5px;
	margin-bottom: 5px;
	background-color: red;
}

.information .info-item h6 {
	padding-bottom: 0;
	margin-bottom: 0;
}

.gradient-container {
	padding-bottom: 100px;
	background: rgb(255, 255, 255);
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 1) 0%,
		rgba(225, 225, 225, 1) 40%,
		rgba(225, 225, 225, 1) 100%
	);
}

.discover {
	background-color: white;
	/* margin: 50px; */
	margin-left: 50px;
	margin-right: 50px;
	padding: 50px;
	border-radius: 40px;
	box-shadow: var(--shadow);
}

.discover h1,
h5 {
	color: var(--primaryturquoise);
}

.discover h1 {
	padding-top: 1rem;
	font-weight: 700;
}

.side-img {
	height: 400px;
	animation: float 6s ease-in-out infinite;
}

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

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

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

.end {
	background-color: var(--primaryturquoise);
}

.footer {
	padding: 25px 50px;
	display: flex;
	justify-content: center;
	gap: 2rem;
	font-size: x-small;

	background-color: var(--primaryturquoise);
	/* justify-content: space-between; */
	color: white;
	flex-wrap: wrap;
}

.footer-child p {
	min-width: 200px;
	line-height: 0%;
}

.footer .row {
	padding: 25px;
}

/* .footer p {
	margin-bottom: 0.5rem;
} */

.footer-waves-top {
	width: 100%;
	height: 170px;
	background-image: url(../images/footer_wave_border.png);
	background-position-y: -100px;
	background-color: #dee2e6;
	position: cover;
}

.copyright {
	font-size: smaller;
	height: 50px;
	padding-top: 1rem;
	background-color: var(--primaryblue);
	color: white;
}

/* toggle */
.toggle {
	--width: 40px;
	--height: calc(var(--width) / 1);

	position: relative;
	display: inline-block;
	width: var(--width);
	height: var(--height);
	//box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.toggle input {
	display: none;
}

.toggle .labels {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 1rem;
	font-family: sans-serif;
	transition: all 0.4s ease-in-out;
	overflow: hidden;
	border-radius: 4px;
}

.toggle .labels::after {
	content: attr(data-off);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	color: #fff;
	background-color: var(--darkblue);
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	transition: all 0.4s ease-in-out;
}

.toggle .labels::before {
	content: attr(data-on);
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: calc(var(--width) * -1);
	height: 100%;
	width: 100%;
	color: white;
	background-color: var(--primaryblue);
	text-align: center;
	text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
	transition: all 0.4s ease-in-out;
}

.toggle input:checked ~ .labels::after {
	transform: translateX(var(--width));
}

.toggle input:checked ~ .labels::before {
	transform: translateX(var(--width));
}

/* end toggle */

.header-waves {
	width: 100%;
	height: 10%;
	z-index: 5;
	position: absolute;
	bottom: 0px;
}

.wave1 use {
	-webkit-animation: move-forever1 10s linear infinite;
	animation: move-forever1 10s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.wave2 use {
	-webkit-animation: move-forever2 8s linear infinite;
	animation: move-forever2 8s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

.wave3 use {
	-webkit-animation: move-forever3 6s linear infinite;
	animation: move-forever3 6s linear infinite;
	-webkit-animation-delay: -2s;
	animation-delay: -2s;
}

@-webkit-keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}

	100% {
		transform: translate(-90px, 0%);
	}
}

@keyframes move-forever1 {
	0% {
		transform: translate(85px, 0%);
	}

	100% {
		transform: translate(-90px, 0%);
	}
}

@-webkit-keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}

	100% {
		transform: translate(85px, 0%);
	}
}

@keyframes move-forever2 {
	0% {
		transform: translate(-90px, 0%);
	}

	100% {
		transform: translate(85px, 0%);
	}
}

@-webkit-keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}

	100% {
		transform: translate(85px, 0%);
	}
}

@keyframes move-forever3 {
	0% {
		transform: translate(-90px, 0%);
	}

	100% {
		transform: translate(85px, 0%);
	}
}