/*******************************/
/* GENERAL                     */
/*******************************/
html { font-size: 18px; }

body {
	font-family: 'Gotham-Book', Helvetica, sans-serif;
	letter-spacing: -0.5px;
	color: #000;
	background-color: #F2F5FA;
	height: 100%;
	margin: 0;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-smooth: antialiased;
	text-rendering: optimizeLegibility;
}

a,
button,
.button {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	-webkit-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	-moz-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	-o-transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

a { outline: none; }
a:focus, a:hover { color: #FF00A1; }

hr {
	border: 0;
	height: 1px;
	background: #ccc;
	margin: 0;
}


/*******************************/
/* STRUCTURE                   */
/*******************************/
.grid-container { max-width: 1350px; }

@media ( max-width: 599px ) {
	.grid-container { padding: 60px 20px; }
}
@media ( min-width: 600px ) {
	.grid-container { padding: 120px 40px; }
}

.dark { background-color: #001C46; }
.light { background-color: #fff; }


/*******************************/
/* TYPOGRAPHY                  */
/*******************************/
.text-dark  { color: #0e0e0e; }
.text-light { color: #eeeeee; }
.text-blue  { color: #2762f8; }

strong { font-family: 'Gotham-Bold', Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'Gloock', Times, serif;
	font-weight: normal;
	letter-spacing: 0;
	line-height: 1;
	color: #001C46;
	margin-bottom: 30px;
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.1rem; }

p.lead { font-size: 1.1rem; }

@media (min-width: 600px) {
	h1 { font-size: 3.2rem; }
	h2 { font-size: 2.8rem; }
}

@media (min-width: 768px) {
	h1 { font-size: 4rem; }
	h2 { font-size: 3rem; }
	h3 { font-size: 1.8rem; }
	p.lead { font-size: 1.2rem;}
}

@media (min-width: 1024px) {
	h1 { font-size: 4.2rem; }
	h2 { font-size: 3.2rem; }
	h3 { font-size: 2.8rem; }
}


/*******************************/
/* BUTTONS                     */
/*******************************/
.button,
button {
	font-size: 0.9rem;
	margin: 0;
	width: 100%;
	font-family: 'Gotham-Medium', Helvetica, sans-serif;
	line-height: 1;
	letter-spacing: -0.3;
	text-rendering: geometricPrecision;
	background-color: #0066ff;
	border: 0px transparent;
	color: #fff;
	padding: 12px 20px;

	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	border-radius: 100px;
}
.button:hover,
.button:focus,
button:hover,
button:focus { background-color: #004dc0; }
	@media ( min-width: 480px ) {
		.button,
		button { width: auto; }
	}

.button.huge  {
	font-size: 1rem;
	margin-top: 20px;
	padding: 25px 55px;
}


/*******************************/
/* FXs                         */
/*******************************/
.rounded {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.shadowed {
	-webkit-filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
	filter:         drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.3));
}


/*******************************/
/* TOPBAR                      */
/*******************************/
.floating-nav .grid-container { padding: 0; }
.floating-nav {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: auto;
	z-index: 100;
	padding: 20px;
	background: rgba(0, 28, 70, 0.9);

	-moz-box-shadow:    0px 10px 30px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.2);
	box-shadow:         0px 10px 30px 0px rgba(0, 0, 0, 0.2);

}
@supports ( -webkit-backdrop-filter: none ) or ( backdrop-filter: none ) {
	.floating-nav {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}
.floating-nav p {
	font-size: 0.9rem;
	color: #fff;
	margin: 0;
	line-height: 1.2;
}
.floating-nav p .button { margin-left: 10px; }


/*******************************/
/* HERO                        */
/*******************************/
@media ( max-width: 600px ) {
	.hero .grid-container { padding: 120px 20px 60px 20px; }
}

.hero { position: relative; }
.hero img {
	width: 250px;
	margin-bottom: 20px;
}
.hero h1 { margin-bottom: 30px; }
.hero p { margin-bottom: 60px; }
.hero img.mac { 
	width: 950px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 20px;
}


/*******************************/
/* HOW IT WORKS                */
/*******************************/
.how-it-works { margin-top: 50px; }
@media ( min-width: 600px )  { .how-it-works { margin-top: 150px; } }
@media ( min-width: 768px )  { .how-it-works { margin-top: 180px; } }

.how-it-works h3 {
	margin-top: 200px;
	margin-bottom: 50px;
}
@media ( max-width: 299px )  { .how-it-works h3 { margin-top: 10px; } }
@media ( min-width: 300px )  { .how-it-works h3 { margin-top: 50px; } }
@media ( min-width: 390px )  { .how-it-works h3 { margin-top: 80px; } }
@media ( min-width: 440px )  { .how-it-works h3 { margin-top: 100px; } }
@media ( min-width: 490px )  { .how-it-works h3 { margin-top: 130px; } }
@media ( min-width: 550px )  { .how-it-works h3 { margin-top: 160px; } }
@media ( min-width: 600px )  { .how-it-works h3 { margin-top: 30px; } }
@media ( min-width: 640px )  { .how-it-works h3 { margin-top: 50px; } }
@media ( min-width: 700px )  { .how-it-works h3 { margin-top: 65px; } }
@media ( min-width: 768px )  { .how-it-works h3 { margin-top: 80px; } }
@media ( min-width: 800px )  { .how-it-works h3 { margin-top: 120px; } }
@media ( min-width: 880px )  { .how-it-works h3 { margin-top: 160px; } }
@media ( min-width: 1024px ) { .how-it-works h3 { margin-top: 200px; } }

.how-it-works .video.player { margin-bottom: 40px; }
.how-it-works .plyr__control.plyr__control--overlaid {
	border-radius: 100%;
	padding: 40px;
	background-color: #2762f8;
}
.how-it-works .plyr--video {
	border-radius: 10px;
	margin-bottom: 40px;
}


/*******************************/
/* TESTIMONIAL                 */
/*******************************/
.testimonials {
	margin-top: 60px;
	margin-bottom: 40px;
}
.testimonial {
	background-color: #fff;
	padding: 30px;
}
@media (max-width: 640px) {
	.testimonial {
		margin-bottom: 40px;
	}
}
.testimonial img {
	margin-bottom: 20px;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	object-fit: cover; /* Preserve the image aspect ratio and cover the container */
}
.testimonial h4 {
	color: #777;
	margin-bottom: 20px;
}
.testimonial .stars {
	font-size: 1.5rem;
	color: yellow;
}


/*******************************/
/* WHO                         */
/*******************************/
.who h4 { margin-bottom: 30px; }
.who hr { margin: 30px 0; }


/*******************************/
/* INSIDE                      */
/*******************************/
.inside h2 { margin-bottom: 80px}
.inside p.chapter { color: #2762f8; }
.inside p.desc { color: #bbb; }
.inside hr {
	margin: 40px 0 50px 0;
	background-color: #002e66;
}
.inside .button { margin-top: 80px; }


/*******************************/
/* PREVIEW                     */
/*******************************/
.preview .plyr__control.plyr__control--overlaid {
	border-radius: 100%;
	padding: 20px;
	background-color: #2762f8;
}
.preview .plyr--video {
	border-radius: 10px;
	margin-bottom: 40px;
}
.preview p { margin-bottom: 60px; }


/*******************************/
/* FAQs                        */
/*******************************/
.faq h2 { margin-bottom: 60px; }
.accordion { background-color: transparent; }
.accordion a,
.accordion-item.is-active a {
	font-family: 'Gloock', Times, serif;
	font-size: 1.5rem;
	line-height: 1.2;
	color: #bebebe;
	margin-bottom: 10px;
	background-color: #0D274F;
	border-radius: 10px !important;
	border: 1px solid #263D61;
}
.accordion a:hover,
.accordion a:focus {
	color: #fff;
	background-color: #0D274F;
}
.accordion-title::before {
	position: absolute;
	top: 50%;
	left: 20px;
	margin: 0;
	margin: -20px 0 0;
	content: "+";
	content: url( '../img/chevron-white.png' );
	font-size: 36px;
	color: #FF00A1;
}
.is-active>.accordion-title::before { content: url( '../img/chevron-white-down.png' ); }
.accordion-title {
	padding: 20px 20px 20px 60px;
	border: none;
}
.accordion-content {
	padding: 10px 0 30px 60px;
	border: none;
	background-color: transparent;
	border: none !important;
}
.accordion-content p {
	color: #eee;
	line-height: 1.8;
}

.accordion-item.is-active a { color: #fff; }

:last-child > .accordion-content:last-child,
:last-child:not(.is-active) > .accordion-title { border: 1px solid #263D61; }


/*******************************/
/* LAST CTA                    */
/*******************************/
.last-cta { margin-top: 80px }
.last-cta.cta-list h5 {
	color: #eee;
	position: relative;
	line-height: 1.5;
	padding: 25px 20px 25px 60px;
	margin: 0;
	border-top: 1px solid #002e66;
}
.last-cta.cta-list h5::before {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
	content: url( '../img/bullet-white.png' );
}
.last-cta.cta-list h5.last {
	border-bottom: 1px solid #002e66;
}




.faq-whatsapp {
	font-family: 'Gotham-Book', Helvetica, sans-serif !important;
	font-size: 1rem !important;
	border: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	color: #2762f8 !important;
}


/*******************************/
/* FOOTER                      */
/*******************************/
.footer { background-color: #000520; }
.footer .grid-container {
	padding-top: 40px;
	padding-bottom: 40px;
}
.footer img {
	width: 250px;
	margin-bottom: 20px;
}
.footer p {
	font-size: 0.8rem;
	margin-bottom: 5px;
	color: #777;
}
.footer p a {
	font-size: 1rem;
	color: #2762f8;
}
.footer p a:hover {
	color: #fff;
}