@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');

* {
	font-family: "Times New Roman", "Tino", sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

:root {
	font-size: 16px;
	font-weight: 100;


	/*
    letter-spacing: 0.025em;
	line-height: 1.25em; */

	/* new colors */
	--page-angle: 0;
	--blue-metallic: linear-gradient(145deg, #3A8EDC 0%, #7BA0C2 33.54%, #255F95 95.83%);
	--line-gradient: linear-gradient(#13305A, rgba(49, 101, 176, 1) 30%);
	--bg-blue: rgb(207, 232, 255);
	
	--primary-blue: #13305A;
	--secondary-blue: #071324;
	--btn-blue: #071324;
	--logo-blue: rgba(49, 101, 176, 1);

	--primary-gradient: linear-gradient(95deg, #ABE264 0%, #3A8EDC 100%);
	--primary-gradient-flipped: linear-gradient(90deg, rgba(68, 104, 211, 1), rgba(39, 211, 80, 1));
	--darker-gradient : linear-gradient(-60deg, rgba(68, 84, 141, 1), rgba(39, 141, 80, 1));
	--charcoal: rgb(75, 75, 75);
	--hero-section-height: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: black;
	-webkit-font-smoothing: antialiased;
}

body {
	background-image: var(--primary-gradient);
	width: 100%;
	z-index: -1;
	overflow: scroll;
}

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1rem;
	justify-content: space-between;
	gap: 0.5rem;
	
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	z-index: 1;
}

#logo img {
	width: 2.5rem;
	height: 2.5rem;
}

nav {
	position: relative;
}

#burger-menu {
	display: static;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
	display: block;
	z-index: 10;
}

#burger-menu > span {
	display: block;
	position: absolute;
	height: 0.2rem;
	width: 100%;
	background-color: white ;
	
	transition-duration: 250ms;
	transition-property: rotate translate opacity;
}

#burger-menu > span.open {
	transition-duration: 250ms;
	transition-property: translate rotate opacity;
}

#burger-menu > span:nth-child(1) {
	top: 10%;
}

#burger-menu > span:nth-child(2) {
	top: 46%;
	opacity: 1;
}

#burger-menu > span:nth-child(3) {
	bottom: 10%;
}

#burger-menu > span:nth-child(1).open {
	background: white;
	rotate: 45deg;
	translate: 0 460%;
}

#burger-menu > span:nth-child(2).open {
	background: white;
	translate: -100% 0;
	opacity: 0;
}

#burger-menu > span:nth-child(3).open {
	background: white;
	rotate: -45deg;
	translate: 0 -460%;
}

.mobile-nav ul {
	display: none;
	position: fixed;
	padding: 4rem 2rem;
	/* top: -0.65rem;
	right: -1rem; */
	right: 0;
	top: 0;
	background-color: rgba(62, 62, 62, 0.7);
	height: 100vh;

	z-index: 1;
	isolation: isolate;
	width: 10rem;

	translate:  0;
	transition-property: translate;
	transition-duration: 2000ms;
}

.mobile-nav ul[style="display: block;"]{
	translate: 0rem 0;
	transition-property: translate;
	transition-duration: 2000ms;
}

/* .mobile-nav ul[style="display: block;"]::before {
	content: "";
	width: 100vw;
	height: 100vh;
	background-color: rgba(60, 60, 60, 0.3);
	position: absolute;
	right: 0vw;
	top: 0;
	z-index: -1;
 } */

.mobile-nav a {
	color:rgb(218, 218, 218);
}

.desktop-nav {
	display: none;
}

.desktop-nav ul  {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.desktop-nav li {
	list-style: none;
}

.desktop-nav a {
	font-size: 1.3rem;
}

.mobile-nav li {
	list-style-type: none;
	margin-bottom : 1rem;
}

nav a {
	color:rgb(218, 218, 218);
	text-decoration: none;
}

a.active-nav {
	color: rgb(43, 163, 255);
	mix-blend-mode: color-burn;
}

/*-----------------------------------------------------*/
/*----------------------Main---------------------*/

/* body {
	overflow: hidden;
} */

h1, h2, h3, p {
	font-weight: 100;
}

h2 {
	color: var(--primary-blue);
	letter-spacing: 0.05em;
}

p {
	font-size: 1rem;
	line-height: 1.25em;
	letter-spacing: 0.07em;
}

section {
	padding: 0 1rem;
}

mark {
	background-color: rgb(137,224, 110, 0.4);
	color: white;
	animation: highlighter;
	animation-duration: 500ms;
}

/* mark::before {
	
}

mark:nth-of-type(2) {
	animation-duration: 200ms;
}

mark:nth-of-type(3) {
	animation-duration: 400ms;
} */

section[aria-label="hero"] {
	position: relative;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
	background-image: var(--blue-metallic);
	isolation: isolate;
  }

  section[aria-label="hero"]::after {
	content: "";
	width: 102vw;
	height: 10vh;	
	position: absolute;
	transform: rotate(var(--page-angle));
	transform-origin: 0% 0%;
	bottom: 0;
	left: 0;
	background-color: var(--bg-blue);
	box-shadow: -0.25em -0.25em 4em rgba(60, 60, 60, 0.5);
  }

section[aria-label="hero"]::-webkit-scrollbar {
	display: none;
}

#hero-container {
	height: 100vh;
	height: 100svh;
	overflow: scroll;
	position: sticky;
	left: 0;
	top: 0;

	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
}

#hero-container::-webkit-scrollbar {
	display: none;
}

/* #hero-container > * {
	background-color: orange;
	border: 0.1rem dashed black;
} */

#heading-title {
	display: flex;
	justify-content: center;
	align-items: center;
	/* scroll-snap-align: start; */
	height: 100vh;
	height: 100svh;

}

#heading-description {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	height: 100svh;
	/* scroll-snap-align: end; */
}

#hero-container h1 {
	color: #FFF;

	text-align: center;
	font-size: 2.7rem;
	font-weight: 400;
	line-height: normal;
	margin-bottom: 2.5em;
	display: flex;
	flex-direction: column;
}

#hero-container h1 span:nth-child(2) {
	font-style: italic;
	color: white;
	font-weight: 100;
}

#hero-container h1 span:is(:not(:nth-of-type(2))) {
	font-size: 1.4rem;
	color: var(--primary-blue);
	margin: 0.25em 0;
	margin-top: 0.5em;
}

#hero-container h1 span:is(:last-child)::before {
	content: "";
	display: inline-block;
	position: relative;
	top: -0.250rem;
	left: -0.5rem;
	width: 6rem;
	height: 0.125rem;
	background-color: var(--primary-blue);
}

#hero-container h1 span:is(:last-child)::after {
	content: "";
	display: inline-block;
	position: relative;
	width: 6rem;
	top: -0.25rem;
	left: 0.375rem;
	height: 0.125rem;
	background-color: var(--primary-blue);
}

#hero-container p {
	text-align: center;
	width: 23rem;
	line-height: 1.25em;
	font-size: 1.125rem;
    font-weight: 100;
    letter-spacing: 0.025em;
	color: white;

}

#hero-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	position: sticky;
	/* bottom: calc(50vh - 6rem); */
	bottom: calc(50vh - 8em);
	bottom: calc(50svh - 8em);
	height: 0;
}

button {
	padding: 0.8em 2em;
	border: 0.125em solid var(--btn-blue);
	text-align: center;
	font-size: 1rem;
	width: fit-content;
	background-color: transparent;
	font-weight: 100;
    letter-spacing: 0.025em;
	line-height: 1.25em;
}

button#CTA {
	background-color: var(--btn-blue) ;
	font-weight: 600;
	box-shadow: 0.125em 0.5em 1em rgba(0, 0, 0, 0.2)
}

#CTA span {
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	background-image: linear-gradient(90deg, rgb(76, 192, 255), yellowgreen, rgb(76, 192, 255));
	background-position: left;
	background-size: 20em 20em;

	animation:  btn-flow 1600ms linear 1000ms alternate infinite;
}

@keyframes btn-flow {
	from {
		background-position: 0 50%;
	}

	25% {
		background-position: 50% 0;
	}

	50% {
		background-position: 100% 50%;
	}

	75% {
		background-position: 50% 100%;
	}
	
	to {
		background-position:0
	}
}

#CTA + button {
	color: var(--btn-blue);
}

#CTA + button, #CTA  {
	font-size: 1rem;
	font-weight: 500;
}

#scroll-indicator {
	position: fixed;
	font-size: 14px;
	bottom: 10px;
	left: 10px;
	color: red;
	z-index: 99;
}



.hero-poly-cutter {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	bottom: 0;
	z-index: -4;
	background-color: white;
}

/*-------------------------------------------------------*/
/*-----------------Main Clients------------------*/
/*-------------------------------------------------------*/

section[aria-label="clients"] {
	flex-direction: column;
	position: relative;
	background-color: var(--bg-blue);
	height: auto;
	isolation: isolate;
}

#page-angle {
	width: 100%;
	height: 10vh;
	position: absolute;
	left: 0vw;
	background: transparent;
	overflow: hidden;
}

#page-angle::after{
	content: "";
	width: 104vw;
	height: 10vh;
	position: absolute;
	transform : rotate(calc(var(--page-angle) - (var(--page-angle) * 2) + 1deg));
	transform-origin: 0 100%;
	left: 0;
	z-index: -1;
	background-color: var(--bg-blue);
}

section[aria-label="clients"] #scroller {
	position: sticky;
	align-self: end;
	bottom: 30vh;
	display:flex;
	align-self: center;
	align-items: center;
	flex-direction: column;
	z-index: 1;
}

section[aria-label="clients"] h2 {
	margin-bottom: 1rem;
	font-size: 3rem;
	margin: 2rem 0;
	color: var(--primary-blue);
	text-align: center;
	
	opacity: 0;
	transform: translate(40px, 0);
	transition-property: opacity transform;
	transition-duration: 500ms;
}

#scroller > h2.visible {
	opacity: 1;
	transform: translate(0);
	transition-property: opacity transform;
	transition-duration: 500ms;
}

section[aria-label="clients"] p {
	font-size: 1rem;
	text-align: center;
	max-width: 460px;
}


section[aria-label="clients"] .lineContainer {
	height: 10rem;
	width: 100%;
	display: flex;
	justify-content: center;
}

#lineContainer2 {
	margin-top: 2rem;
}

.lineContainer .line{
	background-image: var(--line-gradient);
	width: 0.2rem;
	height: 100%;
}

.partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transform: translate(0, 2rem);
	transition-property: opacity transform;
	transition-duration: 500ms;
}

.partner.visible {
	opacity: 1;
	transform: translate(0);
	transition-property: opacity transform;
	transition-duration: 500ms;
}

.partner img {
	max-width: 10em;
	margin: 2rem 0;
}

#beneficiary-tree-container {
	position: relative;
	overflow: hidden;
	height: fit-content;
	margin: 5em 0 2em 0;
	overflow-y: scroll;
	text-align: center;
	/* background-color: cadetblue; */
}

#beneficiary-tree-container img {
	width: 80%;
}

#scroll-over-container {
	width: 100%;
	position: relative;
	overflow-y: scroll;
	height: 600px;
	isolation: none;
}

/* svg#beneficiary-tree {
	width: 15rem;
	position:sticky;
	bottom: 0;
} */

#client-conclusion {
	display: flex;
	justify-content: center;
}

#client-conclusion p {
	max-width: 30em;
	padding-bottom: 5em;
}

#branches path {
	stroke: rgb(68, 84, 160);
	stroke-width: 0.55rem;
	stroke-dasharray: 1000; /* dont forget to change to 1000 to start off emmpty*/
	stroke-dashoffset: 1000;
}

.beneficiary {
	opacity: 1;
}

#triangle-container {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	z-index: -1;
}

section[aria-label='clients'] #triangle-container svg {
	position: absolute;
	width: 20%;
	top: 15%;
	left: 5%;
	transform: rotate(45deg);
	z-index: 0;
	filter: drop-shadow( 0.25em 0.25em 0.3em rgba(101, 101, 101, 0.3));
}

section[aria-label='clients'] #triangle-container svg:nth-of-type(2) {
	position: absolute;
	width: 40%;
	top: 30%;
	left: 60%;
	transform: rotate(-45deg);
}

section[aria-label='clients'] #triangle-container svg:nth-of-type(3) {
	position: absolute;
	width: 20%;
	top: 65%;
	left: 15%;
	transform: rotate(90deg);
}

section[aria-label='clients'] #triangle-container svg:last-of-type {
	position: absolute;
	width: 15%;
	top: 90%;
	left: 7%;
	transform: rotate(20deg);
}

section[aria-label='clients'] #triangle-container svg > polygon {
	fill: rgb(193, 224, 255);
	background-blend-mode: color-burn;
	border: none;
	stroke: none;
	stroke-width: 0;
}

/*------------------- Main advantage ---------------*/ 
/*------------------------------------------------------------*/

section[aria-label="advantages"] {
	display: flex;
	flex-direction: column;
	padding-top: 8rem;
	padding: 10rem 3rem 8rem 3rem; 
	background-image: var(--blue-metallic);
}

/* section[aria-label="advantages"]::after {
	content: "";
	width: 100%;
	height:400%;
	left:0;
	top:0;
	position: absolute;
	background: var(--blue-metallic);
	z-index: -1;
} */


section[aria-label="advantages"] > h2 {
	font-size: 3rem;
	color: var(--secondary-blue);
	margin-bottom: 0.5em;
	text-align: center;
}

section[aria-label="advantages"] > p {
	text-align: center;
}

#card-container {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 1fr 1fr 1fr;
	justify-content: center;
	justify-items: center;
	margin:  4rem 0 2rem 0;
	gap: 2rem;
}

.adv-card {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 16rem;
	height: 22rem;
	padding: 1rem;
	/*box-shadow: 0.3em 0.4em 0.4em 0.1em rgb(200, 200, 200);*/
	background-color: rgba(255,255,255, 0.4);
	
}

@supports (aspect-ratio: 1/1.5) {
	.adv-card {
		width: 16rem;
		aspect-ratio: 1/1.5;
	}
}

 #card-container > div::before {
content: " ";
position: absolute;
top: -0.7%;
left: -1%;
width: 101%;
height: 101%;
z-index: -1;
/* backdrop-filter: blur(1rem); */

/* background-image: var(--primary-gradient); */
/* background-image: linear-gradient(-30deg, rgba(68, 104, 211, 1), rgba(39, 211, 80, 1)); */
box-shadow: -0.5rem -0.5rem 1rem rgb(79 108 41 / 17%), 0.5rem 0.5rem 1rem rgb(26 66 103 / 38%);
}

#card-container > div:first-child::after {
box-shadow: 0.3rem 0.3rem 1rem rgba(60, 60, 60, 0.3);
}

.adv-card h3 {
	font-size: 1.5rem;
	letter-spacing: 0.05em;
	margin-bottom: 0.3em;
	color: rgb(46,63,80);
}

section:nth-child(3) p {
	font-size: 1rem;
	color: rgb(50, 50, 50);
	max-width: 42rem;
	align-self: center;
	text-align: center;
}

.adv-card p {
	font-size: 1rem;
	text-align: center;
	letter-spacing: 0.08em;
	color: rgb(67, 76, 84);
}

section[aria-label="advantages"] svg {
	max-height: 5rem;
	text-align: center;
	margin-bottom: 2rem;
}

@keyframes dollarHover {
	
	from {
		transform: translate(0,0);
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	to {
	
		transform: translate(0,15px);
		opacity: 0.8;
	}
}


#dollar {
	animation-name: dollarHover;
	animation-duration: 2000ms;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.exclamation-svg {
	animation-name: warningPulse;
	animation-duration: 1500ms;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

@keyframes warningPulse {
	from {
		opactiy: 1;
	}
	
	to {
		opacity: 0;
	}

}

#paper {
	stroke-width: 1.3rem;
	stroke : black;
}

#pig {
	stroke-width: 0.2rem;
	stroke : black;
}

#hour-glass {
	stroke-width: 0.4rem;
	stroke : black;
}

#outro {
	display: flex;
	flex-direction: column;
	justify-self: center;
	justify-content: center;
	align-items: center;
	align-self: center;

	margin-top: 1rem;
	gap: 1rem;
}

#outro p {
	color: var(--bg-blue);
	font-style: italic
}

#outro button {
	margin: 0;
	text-align: center;
	padding: 1rem 2rem;
	width: auto;
	text-wrap: none;
	text-align: center;
	letter-spacing: 0.1em;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	height: auto;
}
/* -------------------------- */
/* ---Background triangles--- */
/* -------------------------- */



/* ------------------------ */
/* ---other pages bh triangle--- */
/* ------------------------ */

.other-page  #bg-triangles{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.triangle-container {
	position: relative;
	max-width: 1024px;
}
.other-page .triangle {
	/* fill: rgb(147, 255, 133); */
	fill: rgb(250, 250, 250);
	filter: none;
	/* filter: drop-shadow(0.125em 0.125em 0.125em rgb(197, 197, 197));
	-webkit-filter: drop-shadow(0.125em 0.125em 0.125em rgb(197, 197, 197)); */
}

.other-page .triangle-container {
	position: relative;
	height: 100%;
	width: 100%;
}

.other-page .triangle-container svg:first-child {
	width: 10%;
	top: 0%;
	left: 30%;
	transform: rotate(120deg);
}

.other-page .triangle-container svg:nth-child(2) {
	width: 50%;
	top: 10%;
	left: 0%;
	transform: rotate(45deg);
}

.other-page .triangle-container svg:nth-child(3) {
	width: 40%;
	top: 0;
	left: 70%;
	transform: rotate(-100deg);
}

.other-page .triangle-container svg:nth-child(4) {
	width: 70%;
	top: 20%;
	left: 60%;
	transform: rotate(-45deg);
}

.other-page .triangle-container svg:nth-child(5) {
	width: 30%;
	top: 40%;
	left: 0%;
	transform: rotate(-201deg);
}

.other-page .triangle-container svg:nth-child(6) {
	width: 50%;
	top: 60%;
	left: -10%;
	transform: rotate(45deg);
}

.other-page .triangle-container svg:nth-child(7) {
	width:	20%;
	top: 60%;
	left: 70%;
	transform: rotate(-37deg);
}

.other-page .triangle-container svg:nth-child(8) {
	width: 30%;
	top: 80%;
	left: 80%;
	transform: rotate(-77deg);
}

.other-page .triangle-container svg:last-child{
	width: 90%;
	top: 87%;
	left: -20%;
	transform: rotate(45deg);
}

/* ------------------------ */
/* ---		Footer		--- */
/* ------------------------ */


footer {
	display: flex;
	flex-direction: column;
	gap: 1rem;

	background-color: var(--secondary-blue);
	position: relative;
	color: white;
	padding : 0 2rem 2rem 2rem;
	isolation: isolate;
}

footer::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 10em;
	top: -1em;
	left: 0;
	background-color: var(--secondary-blue);
	transform: skewY(4deg) translateY(-3rem);
	z-index: -1;
	isolation: isolate;
}

.other-page footer {
	margin: 0;
}


footer li {
	list-style-type: none;
	color: rgb(106, 147, 158);
}

#copyright {
	align-self: start;
}

#copyright div {
	font-size: 0.825rem;
	color: rgb(106, 107, 107)
}


/* ------------------------------- */
/* -- 		Services page	 	-- */
/* ------------------------------- */
body.other-page {
	background-image: var(--blue-metallic)
}

.other-page header {
	background: var(--blue-metallic);
	position: relative;
	align-items: start;
	height: 10em;
	z-index: 1;
	overflow: hidden;
}

.other-page header::after {
	content: "";
	width: 103vw;
	height: 10vh;
	left: 0;
	bottom: -10vh;
	transform: rotate(calc(var(--page-angle) - (var(--page-angle) * 2) + 0.5deg));
	transform-origin: top left;
	background-color: var(--bg-blue);
	position: absolute;
	z-index: -1;
}


.secondary-section {
	position: relative;
	background-color: var(--bg-blue);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 4rem;
	padding-bottom: 12rem;
	gap: 1.2rem;
	isolation: isolate;
}

.other-page h1 {
	color: var(--primary-blue);
	/* color: rgb(122, 158, 51); */
	font-size: 3.5rem;
}

#service p {
	font-size: 1.2rem;
	max-width: 50rem;
	align-self: center;
	text-decoration: none;
	color: var(--charcoal);
}

.secondary-section :is(p, h1, h2) {
	text-align: center;
}

#service-container {
	display: flex;
	flex-direction: column;
	align-self: center;
	justify-items: center;
	margin: 3rem;
	margin-top: 2rem;
	gap: 4.5rem 0;
}

.service-info {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 18rem;
}

#service h2 {
	font-size: 1.3rem;
	position: relative;
}

#service h2::after {
	margin: 1rem 0 2.2rem;
	content: "";
	display: block;
	width: 100%;
	height: 7px;
	background-image: var(--primary-gradient);
	border: none;
}

#service ul {
	padding-left: 1rem;
}

#service li {
	font-size: 0.8rem;
}

#service .button-container {
	flex: 1 1 0;
	display: flex;
	justify-content: center;
	align-items: end;
	margin-top: 1.5rem;
}

#service button {
	position: relative;
	justify-self: end;
	align-self: center;
	margin: 0;
	text-align: center;
	padding: 0.9em 2.2em;
	width: auto;
	text-wrap: none;
	text-align: center;
	letter-spacing: 0.1em;
	border: 0.125em solid var(--btn-blue);
	color: var(--btn-blue);
	background-color: transparent;
	height: auto;
}

#service button:hover {
	color: white;
	border: none;
	background-color: var(--btn-blue);
}


#service .button-container > button {
	align-self: flex-end;
}
/* ------------------------------- */
/* -- 		About Page	 	-- */
/* ------------------------------- */

section[aria-label='about'] {
	align-items: center;
}

section[aria-label="about"] > * {
	text-align: center;
}

section[aria-label="about"] h2 {
	max-width: 38rem;
	font-size: 1.25rem;
	color:rgb(60, 60, 60)
}

section[aria-label="about"] h3 {
	margin-top: 2rem;
	width: 20rem;
	font-size: 1rem;
	text-decoration: underline;
}

section[aria-label="about"] p {
	font-size: 0.875rem;
	max-width: 30rem;
	position: relative;
}

section[aria-label="about"] p::before {
	content: "1";
	position: absolute;
	left: -10%;
	top: 30%;
	font-size: 4rem;
	color: rgba(197, 197, 197, 0.556);
}

section[aria-label="about"] p:last-of-type::before {
	content: "2";
	left: -10%;
	top: 40%;
}

.about-line {
	background-image: var(--primary-gradient);
	width: 0.225rem;
	height: 2rem;
}

/* ------------------------------- */
/* -- 		Contact Page	 	-- */
/* ------------------------------- */

section[aria-label="contact"] {
	justify-content: center;
	align-items: center;
}

section[aria-label="contact"] p {
	max-width: 28rem;
	margin: 0 2rem;
	color: rgb(41, 41, 41);
}

form {
	margin-top: 1.25rem;
}

form input {
	border: none;
	width: 12rem;
	border-bottom: 0.1em solid rgb(172, 172, 172);
	background-color: transparent;
	font-size: 1rem;
	padding-left: 0.25rem;
	padding-bottom: 0.125rem;
}

:focus:is(input, textarea, select) {
	border: none;
	outline: 2px solid green;
}

fieldset {
	display: none;
	border: none;
}

fieldset.active {
	display: block;
}

fieldset#fs2.active {
	display: flex;
}

fieldset:first-child {
	text-align: center;
}

fieldset:nth-child(2) {
	margin-top: 1rem;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 1rem;

}

legend {
	margin-bottom:0.5rem;
	color: rgb(73, 73, 73);
	font-size: 1rem;
	font-weight: 100;
}

select {
	width: 12rem;
	border: none;
	border: 1px solid grey;
}

textarea {
	column-span: 2;
	width: 12rem;
	height: 75px;
	resize: none;
	padding: 0.375rem;
	color: green;
	background-color: rgba(255, 255, 255, 0.5);
}


form + div {
	background-color: var(--primary-blue);
	box-shadow: 1px 2px 5px rgb(136, 136, 136);
	width: fit-content;
	font-size: 0.875rem;
	padding: 1.2em 2.4em;
	border: none;
	color: white;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.0em;
}

form + div::before {
	content: "";
	background-color: orange;
}

#contact-info {
	margin-top: 2rem;
}

#contact-days {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

#contact-info h3 {
	line-height: 2rem;
	text-align: center;
}

#contact-info a {
	color: rgb(81, 81, 81);
}

#contact-info li{
	list-style-type: none;
	margin: 0.25rem 0;
	font-size: 0.8rem;
}

#contact-info a, img {
	font-size: 0.8rem;
}

#contact-info ul {
	align-self: end;
	justify-self: end;
}

#contact-details {
	display: flex;
	flex-direction: row;
	gap: 0.125rem;
	justify-content: center;
}

#contact-details > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#contact-details ul {
	box-sizing: border-box;
}

#contact-details li:first-child {
	list-style-image: url(content/img/icons/Phone.svg);
	text-align: center;
}

#contact-details li:last-child {
	list-style-image: url(content/img/icons/email.svg);
	text-align: center;
}

#contact-info > h3:nth-of-type(2)  {
	margin-top: 1rem;
}

@media (min-width: 768px) {

	:root {
		font-size: 16px;
	}

	header {
		align-items: center;
		justify-content: space-between;
	}

	#desktop-nav-container {
		display: flex;
		justify-content: center;
		gap: 3em;
	}

	#logoName {
		color: white;
		letter-spacing: 0.125em;
		font-size: 1.125rem;
	}

	#contactCTA {
		color: white;
		font-size: 1.125rem;

	}

	#contactCTA, #logoName {
		padding-top: 0.8em;
	}

	.desktop-nav li {
		position: relative;
	}

	.desktop-nav a[class="active-nav"]::after {
		content: "";
		width: 100%;
		height: 0.1rem;
		background-color: rgb(43, 163, 255);
		position: absolute;
		bottom: -0.5rem;
		left: 0;
	}

	.desktop-nav ul {
		gap: 3em;
	}

	.mobile-nav {
		display: none;
	}

	nav.desktop-nav, header > .desktop-nav {
		display: flex;
	}

	main #hero-intro h1 span:not(:nth-of-type(2)) {
		font-size: 2.5rem;
	} 

	main #hero-intro h1 span:nth-of-type(2) {
		font-size: 5rem;
	}

	#hero-btns {
		flex-direction: row;
	}

	#hero-intro h1 {
		font-size: 3rem;
	}

	aside {
		max-width: 33vw;
		height: 80vh;
		top: 10vh;
		right: -1px;
		position: absolute;
		background-color: transparent;
		z-index: -1;
		display: flex;
		border: none ;
		align-items: center;
	}

	aside img {
		height: 60%;
	}

	#client-conclusion {
		padding-bottom: 5em;
		z-index: 1;
	}


	#card-container {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}

	#card-container > div:last-child{
		grid-column: 1/3;
		grid-row: 2/3;
	}
}

@media (min-width: 1024px) {
	:root {
	font-size: 21px;
	}

	#hero-intro h1 {
		font-size: 4rem;
	}

	#service-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-self: center;
		justify-items: center;
		width: 100%;
		min-width: 1024px;
		max-width: 1440px;
		margin: 3rem;
		margin-top: 5rem;
		gap: 4.5rem 0;
	}
}

@media (min-width: 1440px) {

	:root {
		font-size: 24px;
	}

	header {
		padding: 1rem 5vw;
	}

	div#hero-container p {
		width: 30rem;
	}

	aside img {
		height: 80%;
	}

	#card-container {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;
	}

	#card-container > div:last-child{
		justify-self: start;
		grid-column: 3/4;
		grid-row: 1/2;
	}

	#card-container > div:first-child {
		justify-self: end;
	}
}