/* fonts.google.com Montserrat 200, 300, 400, 500 and 600. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600&display=swap');


/* Main */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	scroll-behavior: smooth;
}


/* Variables */
:root {
	--primary: #26C0F6;
	--secondary: #A5D055;
	--text-dark: #262626;
	--white-green: #E6FFE6;
	--primary-dark: #256DB9;
	--secondary-dark: #3CA05A;
	--mid-grey: #A6A6A6;
	--light-grey: #D9D9D9;
	--white-blue: #E6E6FF;
	--yellow: #ffc733;
	--discord: #7289DA;
}


/* Utilities */
h1 {
	font-size: 2.4rem;
	font-weight: 300;
	padding-bottom: 10px;
	letter-spacing: 4px;
}

h2 {
	font-size: 2.2rem;
	font-weight: 300;
	padding-bottom: 10px;
}

h3 {
	font-size: 1.8rem;
	font-weight: 300;
	padding-bottom: 5px;
}

h4 {
	font-size: 1.6rem;
	font-weight: 200;
	padding-bottom: 5px;
}

a {
	text-decoration: none;
	color: #000;
}

ul {
	list-style: none;
	line-height: 1.6;
	font-weight: 500;
}

ol {
	line-height: 1.6;
	font-weight: 500;
	text-decoration: underline;
}

li {
	padding-bottom: 4px;
	text-align: left;
}

hr {
	border: 1px var(--light-grey) solid;
}

#section-2 ul,
#section-4 ul,
#section-6 ul,
#section-7 ul {
	list-style: circle;
}

.btn {
	display: inline-block;
	cursor: pointer;
	border-radius: 2px;
	border-top: 2px var(--light-grey) solid;
	border-bottom: 2px var(--light-grey) solid;
	padding: 8px 20px;
	font-weight: 600;
	opacity: 0.8;
	transition: all 0.3s;
}

.btn:hover {
	opacity: 1.0;
}

.btn:active {
	animation: btn-click 0.1s;
}

@keyframes btn-click {
	from {opacity: 0.2};
	to {opacity: 1.0}
}

.btn-lg {
	border-top: 4px solid;
	border-bottom: 4px solid;
	border-radius: 4px;
	padding: 10px 30px;
	font-size: 1.2rem;
}

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

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

.btn-secondary {
	border-color: var(--secondary);
	color: var(--secondary);
}

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

.btn-grey {
	border-color: var(--text-dark);
	color: var(--text-dark);
}

.text-primary {
	color: var(--primary);
}

.text-primary-dark {
	color: var(--primary-dark);
}

.text-secondary {
	color: var(--secondary);
}

.text-secondary-dark {
	color: var(--secondary-dark);
}

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

.text-black {
	color: #000;
}

.text-white {
	color: #fff;
}

.text-discord {
	color: var(--discord);
}

.text-bold {
	font-weight: 600;
	padding-bottom: 4px;
}

.text-padding {
	padding: 10px;
}

.text-uppercase {
	text-transform: uppercase;
	font-weight: 500;
}

.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-sm {
	font-size: 0.8rem;
}

.text-currency {
	font-size: 1.0rem;
	vertical-align: super;
}

.margin-1 {
	margin: 40px 20px;
}

.margin-2 {
	margin: 20px 10px;
}

.padding-1 {
	padding: 40px 20px;
}

.padding-2 {
	padding: 20px 10px;
}

.padding-bottom {
	padding-bottom: 20px;
}

.padding-top {
	padding-top: 20px;
}

.border-1 {
	border-top: 1px var(--light-grey) solid;
	border-bottom: 1px var(--light-grey) solid;
}

.header-center {
	width: 60vw;
	padding-bottom: 40px;
}

.header-left {
	width: 60vw;
	padding-bottom: 40px;
	text-align: left;
}

.container {
	width: 100%;
	max-width: 1100px;
	margin: auto;
}

.container-fluid {
	margin: 100px 0;
}

.section-9-break {
	margin-top: 100px;
}

.container-footer {
	max-width: 1200px;
	margin: auto;
}

.perspective-1 {
	perspective: 1600px;
}


/* Main-nav */
.main-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	padding: 10px 0;
	font-size: 1.1rem;
}

#logo {
	width: 140px;
	padding-left: 10px;
	opacity: 1;
	transition: opacity 0.6s;
}

#logo.hide {
	opacity: 1;
}
/* Becomes 0 in media query: 768px */

#logo-nav {
	display: none;
	width: 100%;
}

.main-nav .links {
	display: flex;
}

.main-nav .links li {
	padding-right: 30px;
}

.main-nav .links li a.nav-link {
	color: var(--primary);
	font-weight: 500;
	border-bottom: 1px rgba(255, 255, 255, 0.95) solid;
	transition: border-bottom 0.5s;
}

.main-nav .links li a.nav-link:hover {
	border-bottom: 2px var(--primary) solid;
}

.main-nav .links li a.nav-link:active {
	opacity: 0.40;
	border-bottom: none;
}

.main-nav .links li a.nav-link-active {
	color: var(--mid-grey);
	opacity: 0.8;
}

.main-nav .links .menu-close {
	display: none;
	text-align: right;
	padding-top: 20px;
}

.main-nav .links .menu-close a {
	color: var(--mid-grey);
	transition: color 0.5s;
}

.main-nav .links .menu-close a:hover {
	color: rgb(250, 0, 0);	
}

.main-nav .menu-toggler {
	display: none;
	padding-right: 20px;
	color: var(--primary);
	cursor: pointer;
	z-index: 5;
	font-size: 25px;
}

.main-nav .menu-toggler:hover {
	opacity: 0.80;
}

.main-nav .menu-toggler:active {
	opacity: 0.40;
}


/* Section C: Carousel */
#section-C {
	padding: 20px 0 40px 0;
	background-color: #fff;
}

#section-C .carousel-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
}

#section-C .carousel-slide {
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

#section-C .carousel-item {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  background-color: #f9f9f9;
}

#section-C blockquote {
  font-size: 1.5em;
  font-style: italic;
  margin: 0 0 20px;
}

#section-C figcaption {
  font-size: 1em;
  color: #555;
}

/* 🔘 Navigation Buttons */
#section-C .prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 24px;
  border-radius: 50%;
  z-index: 10;
  transition: background-color 0.3s ease;
}

#section-C .prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

#section-C .prev {
  left: 10px;
}

#section-C .next {
  right: 10px;
}


/* Section 0: Grid area */
#section-0 {
	padding: 20px 0 40px 0;
	background-color: #fff;
}

#section-0 .grid-area {
	display: grid;
	grid-auto-columns: 33.3%;
	grid-auto-rows: minmax(150px, auto);
	grid-template-areas:
		'grid-box-5 grid-box-5 grid-box-1'
		'grid-box-2 grid-box-2 grid-box-4'
		'grid-box-2 grid-box-2 grid-box-7';
}

#section-0 .grid-area h3 {
	padding: 10px;
	cursor: default;
}

#section-0 .grid-area img {
	width: 100%;
	height: 100%;
}

.grid-box-1 {
	position: relative;
	grid-area: grid-box-1;
	display: flex;
	justify-content: center;
	text-align: center;
	opacity: 0.8;
	transition: all 0.5s;
	background: url('../img/subscription_tier-1.jpg') no-repeat center center/cover;
}

.grid-box-1:hover {
	opacity: 1.0;
	filter: drop-shadow(2px 2px 3px var(--primary));
}

.grid-box-2 {
	grid-area: grid-box-2;
	flex-direction: column;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 3.0rem;
}

.grid-box-2 h3 {
  margin-bottom: 0.5em;
}

.grid-box-4 {
	position: relative;
	grid-area: grid-box-4;
	display: flex;
	justify-content: center;
	text-align: center;
	opacity: 0.8;
	transition: all 0.5s;
	background: url('../img/subscription_tier-2.jpg') no-repeat center center/cover;
}

.grid-box-4:hover {
	opacity: 1.0;
	filter: drop-shadow(2px 2px 3px var(--secondary));
}

.grid-box-5 {
	grid-area: grid-box-5;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	max-width: 50%;
	margin: auto;
}

.grid-box-7 {
	position: relative;
	grid-area: grid-box-7;
	display: flex;
	justify-content: center;
	text-align: center;
	opacity: 0.8;
	transition: all 0.5s;
	background: url('../img/subscription_tier-3.jpg') no-repeat center center/cover;
}

.grid-box-7:hover {
	opacity: 1.0;
	filter: drop-shadow(2px 2px 3px var(--yellow));
}

.grid-box-1 i,
.grid-box-4 i,
.grid-box-7 i {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.6;
}

.grid-box-1 i {
	color: var(--primary);
}

.grid-box-4 i {
	color: var(--secondary);
}

.grid-box-7 i {
	color: var(--yellow);
}

/* section-2: Cards 1 */
#section-2 .cards,
#section-4 .cards,
#section-7 .cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#section-2 .cards,
#section-4 .cards {
	grid-gap: 30px;
}

#section-2 .cards .card,
#section-4 .cards .card,
#section-7 .cards .card  {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
}


/* Section 6: Design Plans */
#section-6 {
	position: relative;
	min-height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-6 .section-6-bg {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	background: url('../img/section-6_BG.jpg') no-repeat center center/cover;
	background-color: #fff;
	width: 100%;
	height: 100%;
	box-shadow: inset 0px 100px 100px #fff,  inset 0px 0px 100px #fff;
}

#section-6 .section-6-bg::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 5;
}

#section-6 .section-6-content {
	position: absolute;
	text-align: center;
	width: 100%;
	padding-bottom: 20px;
	z-index: 10;
}

#section-6 .section-6-content p {
	padding-bottom: 20px;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.3;
}


/* Section 7: Tiers */
#section-7 {
	text-align: center;
}

#section-7 h2 {
	padding: 40px 0;
}

#section-7 h3 {
	padding: 20px 0;
}

#section-7 p {
	border-top: 1px var(--light-grey) solid;
	padding-top: 20px;
	color: #000;
}

#section-7 .cards a {
	margin: 10px;
}

#section-7 .cards .card {
	border: 2px var(--light-grey) solid;
	border-radius: 8px;
	min-height: 280px;
	padding: 5% 15px;
	transition: all 0.5s;
}

#section-7 .cards .card:hover {
	background: var(--white-green);
	border: 2px var(--mid-grey) solid;
}


/* Section 8: Examples */
#section-8 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-image: linear-gradient(var(--primary-dark), rgb(10, 10, 40));
	padding: 40px 40px;
	color: #fff;
}

#section-8 .section-8-inner {
	max-width: 1100px;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .middle-grid {
	grid-column: 2/3;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid img {
	width: 100%;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid a {
	color: #fff;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1,
#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2,
#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3 {
	margin: 20px;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1 {
	transition: transform 0.3s;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1:hover {
	transform: scale(1.03);
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2 {
	transition: transform 0.3s;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2:hover {
	transform: scale(1.03);
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3 {
	transition: transform 0.3s;
}

#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3:hover {
	transform: scale(1.03);
}


/* Section-9: Contact */
#section-9 {
	text-align: center;
}

#section-9 .section-9-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-9 .section-9-content .section-9-content-left {
	width: 50vw;
}

#section-9 .section-9-content img {
	width: 100%;
}

#section-9 .section-9-content .section-9-content-right {
	width: 50vw;
}

#section-9 h2 {
	padding-bottom: 20px;
}


					/* --About Us-- */
.aboutus-style {
	background-color: var(--primary-dark);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.aboutus-style h4 {
	font-size: 1.6rem;
	font-weight: 400;
	padding-bottom: 0;
}

.aboutus-nav {
	position: fixed;
	top: 50%;
	left: 3%;
	transform: translateY(-50%);
	opacity: 1.0;
	transition: all 0.4s ease-out;
}

.aboutus-nav.hidden {
	opacity: 0;
	transform: translate(-100px, -50%);
}

.aboutus-nav-btn {
	content: '';
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	width: 3.0rem;
	height: 3.0rem;
	margin-top: 20px;
	color: var(--primary-dark);
	font-size: 1.6rem;
	border-radius: 100%;
	opacity: 0.4;
	transition: opacity 0.5s;
}

.aboutus-nav-btn.active {
	opacity: 1.0;
}

.return-top {
	position: fixed;
	right: 3%;
	bottom: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #fff;
	border-radius: 100%;
	width: 3.0rem;
	height: 3.0rem;
	color: var(--primary-dark);
	z-index: 15;
	opacity: 0.4;
	transition: all 0.4s;
}

.return-top.hidden-right {
	opacity: 0;
	transform: translateX(100px);
}

.flow-grid-box {
	position: relative;
	width: 16.0rem;
	height: 6.0rem;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--primary-dark);
	background-color: #fff;
	border-radius: 6px;
	padding: 20px 40px;
	cursor: pointer;
}

.flow-grid-box:hover .tooltip {
	opacity: 1.0;
}

.tooltip {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 4px;
	border-radius: 6px;
	font-size: 0.9rem;
	opacity: 0;
	background-color: #fff;
	transition: opacity 0.3s;
}

.number-circle {
	width: 3.0rem;
	height: 3.0rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px #fff solid;
	border-radius: 100%;
}


/* Section-a1 */
#section-a1,
#section-a2,
#section-a3,
#section-a4 {
	width: 80%;
	height: 100vh;
	min-height: 550px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#section-a1 .a1-grid,
#section-a5 .a5-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
}

#section-a1 .a1-grid .a1-box-1 img {
	width: 50%;
}

#section-a1 .a1-grid .a1-box-1,
#section-a1 .a1-grid .a1-box-2,
#section-a5 .a5-grid .a5-box-1,
#section-a5 .a5-grid .a5-box-2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#section-a1 .a1-grid .a1-box-2 h3 {
	padding-bottom: 40px;
}


/* Section-a2 */
#section-a2 .a2-text,
#section-a3 h4,
#section-a4 .a4-text {
	padding: 0px 10% 20px 10%;
}

#section-a2 .a2-flow .flow-grid-area {
	width: 100%;
	display: grid;
	grid-template-areas: 
	'a2-grid-1 a2-grid-2 a2-grid-3 a2-grid-4 a2-grid-5'
	'a2-grid-empty a2-grid-empty a2-grid-empty a2-grid-empty a2-grid-6'
	'a2-grid-11 a2-grid-10 a2-grid-9 a2-grid-8 a2-grid-7';
}

#section-a2 .a2-flow .flow-grid-area > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-a2 .a2-flow .flow-grid-area .a2-grid-1 {
	grid-area: a2-grid-1;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-2 {
	grid-area: a2-grid-2;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-3 {
	grid-area: a2-grid-3;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-4 {
	grid-area: a2-grid-4;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-5 {
	grid-area: a2-grid-5;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-6 {
	grid-area: a2-grid-6;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-7 {
	grid-area: a2-grid-7;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-8 {
	grid-area: a2-grid-8;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-9 {
	grid-area: a2-grid-9;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-10 {
	grid-area: a2-grid-10;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-11 {
	grid-area: a2-grid-11;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-empty {
	grid-area: a2-grid-empty;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-empty2 {
	grid-area: a2-grid-empty2;
}
#section-a2 .a2-flow .flow-grid-area .a2-grid-empty3 {
	grid-area: a2-grid-empty3;
}


/* Section-a3 */
#section-a3 .a3-flow .flow-grid-area {
	display: grid;
	grid-template-areas: 
	'a3-grid-1 a3-grid-2 a3-grid-3 a3-grid-4 a3-grid-5'
	'a3-grid-empty a3-grid-empty a3-grid-empty a3-grid-empty a3-grid-6'
	'a3-grid-11 a3-grid-10 a3-grid-9 a3-grid-8 a3-grid-7';
	padding: 40px;
}

#section-a3 .a3-flow .flow-grid-area > div {
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-1 {
	grid-area: a3-grid-1;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-2 {
	grid-area: a3-grid-2;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-3 {
	grid-area: a3-grid-3;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-4 {
	grid-area: a3-grid-4;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-5 {
	grid-area: a3-grid-5;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-6 {
	grid-area: a3-grid-6;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-7 {
	grid-area: a3-grid-7;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-8 {
	grid-area: a3-grid-8;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-9 {
	grid-area: a3-grid-9;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-10 {
	grid-area: a3-grid-10;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-11 {
	grid-area: a3-grid-11;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-empty {
	grid-area: a3-grid-empty;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-empty2 {
	grid-area: a3-grid-empty2;
}

#section-a3 .a3-flow .flow-grid-area .a3-grid-empty3 {
	grid-area: a3-grid-empty3;
}

#section-a3 .a3-flow i {
	padding: 10px;
}


/* Section-a4 */
#section-a4 .a4-text {
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-a4 .a4-text > div {
	width: 50%;
}

#section-a4 .a4-cards {
	display: grid;
	grid-template-columns: 1fr minmax(32px, 32px) 1fr minmax(32px, 32px) 1fr;
}

#section-a4 .a4-cards .card {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	margin: 10px 0;
	padding: 10px;
}

#section-a4 .a4-cards .card .flow-grid-box {
	margin: 10px 0;
}

#section-a4 .a4-cards .a4-arrow-right {
	width: 100%;
	height: 100%;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#section-a4 a {
	margin-top: 10px;
}


/* Section-a5 */
#section-a5 {
	width: 80%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.accordion-outer {
	width: 80%;
	padding: 40px 0;
}

.accordion {
	font-size: 1.2rem;
	color: #fff;
	background-color: transparent;
	border: 1px solid #fff;
	border-radius: 2px;
	margin-bottom: 15px;
	margin-top: 15px;
	cursor: pointer;
	padding: 10px 20px;
	width: 100%;
	text-align: left;
	outline: none;
	transition: 0.4s;
}

.accordion.active,
.accordion:hover {
	color: var(--secondary);
}
  
@keyframes changeIcon {
	0% {
		content: '\f104';
	}
	50% {
		color: var(--primary-dark);
	}
	100% {
		content: "\f107";
	}
}
  
@keyframes changeIconBack {
	0% {
		content: '\f107';
	}
	50% {
		color: var(--primary-dark);
	}
	100% {
		content: "\f104";
	}
  }
  
.accordion:after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	animation: changeIconBack 0.3s linear;
	content: '\f104';
	font-size: 1.2rem;
	color: #fff;
	float: right;
	margin-left: 10px;
}
  
.accordion.active:after {
	animation: changeIcon 0.3s linear;
	content: '\f107';
}

.panel {
	background-color: transparent;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s;
}

.panel.open {
	max-height: 500px;
}
  
.panel p {
	padding: 5px 20px 30px;
}


					/* Services */
.sub-style {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#section-s1,
#section-s2,
#section-s3,
#section-s4,
#section-s5 {
	width: 100%;
	height: auto;
	padding: 5% 10%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.sub-nav {
	position: fixed;
	top: 50%;
	left: 3%;
	transform: translateY(-50%);
	opacity: 1.0;
	transition: all 0.4s ease-out;
}

.sub-nav.hidden {
	opacity: 0;
	transform: translate(-100px, -50%);
}

.sub-nav-btn {
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	width: 3.4rem;
	height: 3.4rem;
	margin-top: 20px;
	color: #fff;
	opacity: 0.4;
	border: 2px rgba(255, 255, 255, 0) solid;
	transition: all 0.5s;
}

.sub-nav-btn.active {
	opacity: 1.0;
	border: 2px rgba(255, 255, 255, 1) solid;
}

.section-s2-btn {
	background: var(--primary);
	padding-bottom: 0;
}

.section-s3-btn {
	background: var(--secondary);
	padding-bottom: 0;
}

.section-s4-btn {
	background: var(--yellow);
	padding-bottom: 0;
}

.section-s5-btn {
	background: var(--light-grey);
	color: #000;
	padding-bottom: 0;
}

.scroll-down {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: var(--primary);
	border-radius: 100%;
	width: 3.0rem;
	height: 3.0rem;
	color: #fff;
}


/* Section-s1 */
#section-s1 {
	background-color: #fff;
}

#section-s1 .s1-grid {
	display: grid;
	grid-template-columns: 1fr minmax(50px, 50px) 1fr;
}

#section-s1 .s1-grid .s1-grid-left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 10px;
}

.text-currency-lg {
	font-size: 4.0rem;
}

#section-s1 .s1-grid .s1-grid-center {
	display: flex;
	justify-content: center;
	align-items: center;
}

#section-s1 .s1-grid .s1-grid-right {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	margin: 10px;
}

/* Section-s2 */
#section-s2 {
	background-color: rgb(8, 162, 216);
	color: #fff;
}

#section-s2 .cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	margin: 0 40px;
}

#section-s2 .card,
#section-s3 .card,
#section-s4 .card {
	max-width: 400px;
	border: 1px var(--light-grey) solid;
	border-radius: 5px;
}

#section-s2 .card .card-header,
#section-s3 .card .card-header,
#section-s4 .card .card-header {
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--primary);
	background-color: #fff;
	padding: 10px;
	border-radius: 5px 5px 0 0;
}

#section-s2 .card .card-body p,
#section-s3 .card .card-body p,
#section-s4 .card .card-body p {
	font-size: 1.2rem;
	font-weight: 300;
	padding: 10px;
}

#section-s2 .card .card-body i,
#section-s3 .card .card-body i,
#section-s4 .card .card-body i {
	padding: 10px;
}


/* Section-s3 */
#section-s3 {
	background-color: rgb(135, 178, 55);
	color: #fff;
}

#section-s3 .cards,
#section-s4 .cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
	margin: 0 40px;
}

#section-s3 .card:first-child,
#section-s4 .card:first-child {
	grid-column: 1/3;
	max-width: 820px;
}

#section-s3 .card .card-header {
	color: var(--secondary);
}


/* Section-s4 */
#section-s4 {
	background-color: rgb(225, 169, 21);
	color: #fff;
}

#section-s4 .card .card-header {
	color: var(--yellow);
}


/* Section-s5 */
#section-s5 {
	background-color: #fff;
}

#section-s5 #s5-table {
	border-spacing: 0.8rem;
	font-size: 1.2rem;
}

#section-s5 #s5-table td {
	padding: 0 8px;
}


					/* Terms */
.terms-style {
	width: 80%;
	min-height: 500px;
	margin: auto;
	text-align: center;
	line-height: 1.4;
}

.terms-style .terms-body {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: left;
	-webkit-user-select:none;
	-moz-user-select:none;
	-o-user-select:none;
	-user-select:none;
	margin-bottom: 20px;
}

.terms-style .terms-body p {
	padding-bottom: 8px;
}

.terms-style .terms-body .terms-nav {
	display: block;
	float: left;
	padding: 10px 20px;
}

.terms-style .terms-body .terms-nav a {
	color: var(--primary);
}

.terms-style .terms-body .terms-nav a:hover {
	color: var(--primary-dark);
}

.terms-style .terms-body .terms-text {
	padding: 0 20px;
}


/* Footer */
#footer {
	background-color: var(--primary-dark);
	color: var(--white-green);
	padding: 30px 20px;
}

#footer a {
	color: var(--white-green);
}

#footer a:hover {
	color: var(--secondary);
}

#footer .container-footer .footer-links {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	line-height: 1.4;
}

#footer .container-footer .footer-links ul {
	padding: 10px 0;
}

#footer .container-footer .footer-links ul li {
	text-align: center;
}

#footer .container-footer p {
	padding-top: 20px;
	text-align: center;
}


/* 1100px */
@media(max-width: 1100px) {

	.container-fluid {
		margin: 80px 40px;
	}

	.section-9-break {
		margin-top: 80px;
	}
	
	.container-inner {
		margin: 20px 20px;
	}

	#section-6 .section-6-bg {
		border-radius: 0;
	}

	#section-8 {
		padding: 40px 20px;
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1:hover {
		transform: scale(1.1);
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2:hover {
		transform: scale(1.05);
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3:hover {
		transform: scale(1.1);
	}


					/* --About Us 1100px-- */
	#section-a1,
	#section-a2,
	#section-a3,
	#section-a4,
	#section-a5 {
		height: 100%;
		margin: 80px 0;
	}
	
	#section-a2 .a2-flow .flow-grid-area {
		grid-template-areas: 
		'a2-grid-1 a2-grid-2 a2-grid-3'
		'a2-grid-empty a2-grid-empty a2-grid-4'
		'a2-grid-11 a2-grid-empty2 a2-grid-5'
		'a2-grid-8 a2-grid-empty3 a2-grid-6'
		'a2-grid-9 a2-grid-10 a2-grid-7';
	}

	#section-a2 .a2-flow .flow-grid-area .a2-grid-4 {
		transform: rotateZ(90deg);
	}

	#section-a2 .a2-flow .flow-grid-area .a2-grid-8 {
		transform: rotateZ(90deg);
	}

	#section-a3 .a3-flow .flow-grid-area {
		grid-template-areas: 
		'a3-grid-1 a3-grid-2 a3-grid-3'
		'a3-grid-empty a3-grid-empty a3-grid-4'
		'a3-grid-11 a3-grid-empty2 a3-grid-5'
		'a3-grid-8 a3-grid-empty3 a3-grid-6'
		'a3-grid-9 a3-grid-10 a3-grid-7';
	}

	#section-a3 .a3-flow .flow-grid-area .a3-grid-4 {
		transform: rotateZ(90deg);
	}

	#section-a3 .a3-flow .flow-grid-area .a3-grid-8 {
		transform: rotateZ(90deg);
	}

	#section-a4 .a4-cards {
		grid-template-columns: 1fr;
		margin: 0 100px;
	}

	#section-a4 .a4-cards .a4-arrow-right {
		transform: rotateZ(90deg);
	}


					/* --Services 1100px-- */
	#section-s2 .cards {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20px;
		margin: 0 20px;
	}

}


/* 768px */
@media(max-width: 768px) {

	h1 {
		font-size: 2.2rem;
		font-weight: 300;
		padding-bottom: 8px;
		letter-spacing: 4px;
	}

	h2 {
		font-size: 2.0rem;
		font-weight: 300;
		padding-bottom: 8px;
	}

	h3 {
		font-size: 1.6rem;
		font-weight: 300;
		padding-bottom: 4px;
	}

	h4 {
		font-size: 1.4rem;
		font-weight: 200;
		padding-bottom: 4px;
	}

	.aboutus-style h4 {
		font-size: 1.4rem;
		font-weight: 200;
		padding-bottom: 0;
	}

	.main-nav .menu-toggler {
		display: block;
	}

	.main-nav .links .menu-close {
		display: block;
	}

	#logo.hide {
		opacity: 0;
	}

	#logo-nav {
		display: block;
	}

	.main-nav .links {
		display: block;
		position: absolute;
		top: 0;
		left: -390px;
		background-color: rgba(255, 255, 255, 0.95);
		width: 50%;
		height: 100%;
		min-height: 400px;
		border-right: 1px var(--light-grey) solid;
		border-bottom: 1px var(--light-grey) solid;
		padding: 3px 30px 30px 30px;
		transition: transform 0.5s ease-in-out;
		z-index: 10;
	}

	.main-nav .links li {
		padding: 10px;
	}

	#logo-nav {
		padding: 5px 20px 0 0;
	}

	.main-nav .links.show {
		transform: translateX(390px);
	}

	.main-nav .links li a.nav-link {
		border-bottom: 2px rgba(255, 255, 255, 0) solid;
	}

	#section-0 h2 {
		font-size: 1.8rem;
	}

	.grid-box-5 {
		max-width: 80%;
	}

	#section-0 .grid-area {
		display: grid;
		grid-auto-rows: minmax(120px, auto);
		grid-auto-columns: 50%;
		grid-template-areas:
			'grid-box-5 grid-box-1'
			'grid-box-4 grid-box-7'
			'grid-box-2 grid-box-2';
	}

	#section-2 .cards,
	#section-4 .cards,
	#section-7 .cards {
		grid-template-columns: 1fr;
		margin: 0 20px;
	}
	
	#section-2 .cards .card,
	#section-4 .cards .card {
		padding: 20px 10px;
	}

	#section-7 h2 {
		padding-bottom: 20px;
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .middle-grid {
		grid-column: initial;
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3 {
		padding: 10px 60px;
		transform:  rotateY(0deg);
		transition: transform 0.5s;
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1:hover,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2:hover,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3:hover {
		transform: scale(1.04);
	}

	#section-9 .section-9-content .section-9-content-left,
	#section-9 .section-9-content .section-9-content-right {
		width: 80vw;
	}

	#section-9 .section-9-content {
		flex-direction: column;
	}

	#footer .container-footer .footer-links {
		grid-template-columns: repeat(2, 1fr);
	}

					/* --About Us 768px-- */
	.aboutus-style h4 {
		font-weight: 400;
		padding-bottom: 0;
	}
	
	#section-a1 .a1-grid,
	#section-a5 .a5-grid {
		grid-template-columns: 1fr;
	}

	#section-a2 .a2-flow .flow-grid-area {
		grid-template-areas: 
		'a2-grid-1'
		'a2-grid-2'
		'a2-grid-3'
		'a2-grid-4'
		'a2-grid-5'
		'a2-grid-6'
		'a2-grid-7'
		'a2-grid-8'
		'a2-grid-9'
		'a2-grid-10'
		'a2-grid-11';
	}

	#section-a2 .a2-flow .flow-grid-area .a2-grid-2 {
		transform: rotateZ(90deg);
	}

	#section-a2 .a2-flow .flow-grid-area .a2-grid-8 {
		transform: rotateZ(270deg);
	}

	#section-a2 .a2-flow .flow-grid-area .a2-grid-10 {
		transform: rotateZ(-90deg);
	}

	.flow-grid-box:active .tooltip {
		opacity: 1.0;
	}

	#section-a3 .a3-flow .flow-grid-area {
		grid-template-areas: 
		'a3-grid-1'
		'a3-grid-2'
		'a3-grid-3'
		'a3-grid-4'
		'a3-grid-5'
		'a3-grid-6'
		'a3-grid-7'
		'a3-grid-8'
		'a3-grid-9'
		'a3-grid-10'
		'a3-grid-11';
	}

	#section-a3 .a3-flow .flow-grid-area .a3-grid-2 {
		transform: rotateZ(90deg);
	}

	#section-a3 .a3-flow .flow-grid-area .a3-grid-8 {
		transform: rotateZ(270deg);
	}

	#section-a3 .a3-flow .flow-grid-area .a3-grid-10 {
		transform: rotateZ(-90deg);
	}

	#section-a4 .a4-text {
		flex-direction: column;
	}

	#section-a4 .a4-text > div {
		width: 100%;
	}

	#section-a4 .a4-text > div:last-child h3 {
		padding-top: 40px;
	}


						/* --Services 768px-- */
	#section-s1 .s1-grid {
		grid-template-columns: 1fr;
	}

	#section-s1 .s1-grid .s1-grid-center .fa-arrow-right {
		rotate: 90deg;
	}

	#section-s2 .cards,
	#section-s3 .cards,
	#section-s4 .cards {
		grid-template-columns: 1fr;
		grid-gap: 20px;
		margin: 0 20px;
	}

	#section-s3 .card:first-child,
	#section-s4 .card:first-child {
		grid-column: initial;
		max-width: 400px;
	}

	#section-s5 #s5-table {
		border-spacing: 0.4rem;
		font-size: 0.9rem;
	}


						/* --terms 768px-- */
	.terms-style {
		width: 90%;
	}

						/* --footer 768px-- */

	#footer .container-footer .footer-links {
		grid-template-columns: 1fr;
	}

}


/* 560px */
@media(max-width: 560px) {

	h1 {
		font-size: 2.0rem;
		font-weight: 300;
		padding-bottom: 8px;
		letter-spacing: 4px;
	}

	h2 {
		font-size: 1.8rem;
		font-weight: 300;
		padding-bottom: 8px;
	}

	h3 {
		font-size: 1.6rem;
		font-weight: 300;
		padding-bottom: 4px;
	}

	h4 {
		font-size: 1.4rem;
		font-weight: 200;
		padding-bottom: 4px;
	}

	.container-fluid {
		margin: 40px 20px;
	}

	.section-9-break {
		margin-top: 40px;
	}

	.main-nav .links {
		padding: 3px 12px 10px 12px;	
	}

	#section-0 h2 {
		font-size: 1.4rem;
	}

	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-1,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-2,
	#section-8 .section-8-inner .perspective-1 .section-8-grid .section-8-grid-3 {
		padding: 8px 20px;
	}


					/* --About Us 560px-- */
	#section-a1,
	#section-a2,
	#section-a3,
	#section-a4,
	#section-a5 {
		width: 80%;
	}

	.aboutus-style h4 {
		font-size: 1.4rem;
		font-weight: 400;
		padding-bottom: 0;
	}

	#section-a2 .a2-text,
	#section-a3 h4,
	#section-a4 .a4-text {
		padding: 0px 0px 40px 0px;
	}


					/* --Services 560px-- */
	.sub-nav,
	.aboutus-nav {
		top: unset;
		bottom: 3%;
		transform: translateY(0);
	}

	.sub-nav-btn,
	.aboutus-nav-btn {
		margin-top: 10px;
	}

	.sub-nav.hidden,
	.aboutus-nav.hidden {
		transform: translateX(-100px);
	}

	#section-s2 .s2-flow {
		padding: 0 20px;
	}

}