/************************************
	Base style
************************************/


@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;900&display=swap');


html { min-height: 100%; height: 100%; overflow-x: hidden; }
body { font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin: 0; padding: 0; overflow-x: hidden; background-color: var(--background); }
.page-body { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-height: 100%; }
.page-flex { flex: 1; overflow-x: hidden; margin-top: 90px; }
.no-text-highlight { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
img { display: block; }

/*****************************
  Colours
*****************************/

:root {

    --brand: #5368e2;

    --brand-light: #baedff;
    --brand-dark: #004037;

    /*** Main ***/

    --white: #fff;
    --black: #000;

    --background: #0c1220;
    --background-02: #131b29;
    --background-03: #1f1f1f;


    --background-form-fields: #40455d;

    --border: #393f4b;
    --border-02: #363636;
    --icon: #b1b1b1;

    /*** Typography ***/

    --text-default: #ffffff;
    --text-sub: #9d9fa6;
    --text-sub-01: #b1b1b1;
    --text-sub-02: #080808;

    
    --text-alt: #000000;
    --text-alt-sub: #000000;

    /*** Colours ***/

    --red-alert: #ff5252;
    --green-success: #36B37E;

    /*** Backgrounds & box-shadows ***/

    --feature-background-01: linear-gradient(179.86deg,hsl(234, 28.6%, 13.7%) .12%,hsl(231.4, 28%, 9.8%) 99.88%);
    --box-shadow-01: -27.1px 62.5px 125px -25px rgba(17, 17, 36, 0.5), -16.2px 37.5px 75px -37.5px rgba(0,0,0,.6);

    --box-shadow-main: 0 0.5rem 1rem 0 rgba(0,0,0,0.0705882353);

}
/*****************************
	Typography
*****************************/

h1,h2,h3,h4,h5,h6, p, li, select { color: var(--text-default); margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-family: 'Cal Sans', sans-serif; letter-spacing: 0.05em; }
h1 { font-size: 4rem; line-height: 1.2;  font-weight: 800; }
h2 { font-size: 2.3rem; line-height: 1.3; }
h3 { font-size: 1.5rem; line-height: 1.4; }
h4 { font-size: 1.25rem; padding: 5px 0 7px; line-height: 1.4; }
h5 { font-size: 1.2rem; line-height: 1.4; }
h6 { font-size: 1rem; line-height: 1.4; }
p, a { font-size: 1.02rem; line-height: 1.7; letter-spacing: normal; }
p { color: var(--text-sub); } 
a { text-decoration: none; cursor: pointer; transition: 0.4s; color: var(--text-sub); }
li, button, label, input, textarea, select, option { font-size: 0.74rem; }
ul, ol { margin: 0; }
ul li { font-size: .98rem; line-height: 1.8; letter-spacing: normal; color: var(--text-sub); padding: 0 0 10px;  }
ol li { font-size: .98rem; line-height: 1.8; letter-spacing: normal; color: var(--text-sub); padding: 0 0 10px; }
.header-sml { color: var(--text-sub); text-transform: uppercase; font-size: .8rem; letter-spacing: .5px; line-height: 1; }
.header-main { font-size: 2.4rem; line-height: 1.3; }





@media screen and (max-width: 1050px) {

h2 { font-size: 2.1rem; } }

@media screen and (max-width: 950px) {

h1 { font-size: 3.4rem; }
.header-main { font-size: 2.2rem; } }

@media screen and (max-width: 700px) {

h1 { font-size: 3rem; } }

@media screen and (max-width: 560px) {

h2 { font-size: 2rem; } }

@media screen and (max-width: 350px) {

h1 { font-size: 2.4rem; } }

/************************************
	Container
************************************/

.page-container-xl { max-width: 1640px; margin: 0 auto; padding: 0 30px; }
.page-container-lg { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.page-container-md { max-width: 940px; margin: 0 auto; padding: 0 20px; }

.page-container-mdx { max-width: 750px; margin: 0 auto; padding: 0 20px; }

.page-container-sml { max-width: 640px; margin: auto; padding: 0 20px; }

/*****************************
  Backgrounds & Borders
*****************************/


.background-01 { background-color: var(--background-01); }



.background-02 { background-color: var(--background-02); }
.background-02-inner { margin: 0 60px; border-left: solid 1px var(--border-02); border-right: solid 1px var(--border-02); }




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


@media screen and (max-width: 950px) {

.background-01-inner { margin: 0; border-left: none; border-right: none; }
.background-02-inner { margin: 0; border-left: none; border-right: none; }
}





/*** Margins ***/

.margin-lg { margin-top: 80px; }
.margin-xlg { margin-top: 125px; }

@media screen and (max-width: 650px) {

.margin-lg { margin-top: 50px; }
.margin-xlg { margin-top: 70px; } }

/*** Borders ***/

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

/*** Padding ***/

.padding-lg { padding-top: 80px; }
.padding-md { padding-top: 50px; }
.padding-smlx { padding-top: 20px; }
.padding-sml { padding-top: 10px; }

/*** Text ***/
.text-contact { font-size: .93rem; }
.text-contact a { font-size: .93rem; color: var(--text-sub); font-weight: bold; text-decoration: underline; }

/*****************************
  Buttons
*****************************/

.btn-base { display: inline-block; border-radius: 4px; font-size: 1rem; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 15px 17px; transition: all 0.5s; letter-spacing: .5px; border-bottom: none !important; }

/*** Primary btn-base ***/

.main-btn-base { background-color: var(--brand); }
.main-btn-base p { color: var(--white) !important; font-size: 1rem !important; font-weight: 600; padding: 0 !important; line-height: 1 !important; }
.main-btn-base .svg-inline--fa { padding: 0 0 0 5px; }

/*****************************
  Navigation
*****************************/

nav { background-color: var(--background); border-bottom: solid 1px var(--border); position: fixed; width: 100%; z-index: 10000000; }
.nav-container-outer { height: 100%; }
.nav-container { height: 90px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.nav-sml { display: none;  }

/*** Nav logo ***/

.nav-logo img { height: 18px; }

/*** Nav items ***/

.nav-items { margin: 0 0 0 auto; height: 100%; display: flex; flex-direction: row; align-items: center; }
.nav-item { margin: 0 15px; }
.nav-item a { color: var(--text-sub) !important; white-space: nowrap; font-size: .9rem !important; border-bottom: none; transition: 0.5s; font-weight: bold; }
.nav-item:hover a,.nav-item:hover p { color: var(--text-default) !important; }
.nav-item p { font-weight: bold; color: var(--text-sub) !important; white-space: nowrap; font-size: .93rem !important; }
.nav-btn-base { padding: 12px !important; }
.nav-btn-base p { font-size: .93rem !important; }
.nav-right { margin-left: 20px; }

/*** Nav dropdown ***/

.nav-dropdown-container { height: 100%; display: flex; justify-content: center; align-items: center; }  
.nav-dropdown { height: 100%; display: flex; justify-content: center; align-items: center; }
.nav-dropdown:hover .nav-dropdown-inner { display: block !important; }
.nav-dropdown-inner { z-index: 9999; display: none; position: absolute; top: 78px; border-radius: 10px; box-shadow: var(--box-shadow-main); background-color: var(--background); border: solid 1px var(--border); }
.nav-dropdown-inner-container { min-width: 180px; padding: 20px 10px; }
.nav-dropdown-inner-container-padding { padding: 30px; }
.nav-dropdown-inner-container .nav-item { display: flex; margin-bottom: 15px; transition: all 0.5s; }
.nav-dropdown-inner-container .nav-item:last-child { margin-bottom: 0; }
.nav-dropdown-inner-container .nav-item:hover { text-decoration: underline; }


/*** Small screen nav menu ***/


@media screen and (max-width: 900px) {

.nav-logo { height: 14px; }
.nav-item { display: none; } }


/*****************************
  Footer
*****************************/

footer { background-color: var(--background); padding: 100px 0 80px; }
.footer-container { padding-top: 80px; display: flex; justify-content: center; flex-direction: column; }
.footer-top-container { display: flex; flex-direction: column; align-items: center; }
.footer-links a { padding: 0 10px; color: var(--text-sub); transition: 0.4s; font-weight: 600; font-size: 0.88rem !important; }
.footer-links a:hover { color: var(--text-default); }
.footer-about { border-top: solid 1px var(--border); margin: 60px 0 0; padding: 50px 0 0; max-width: 350px; text-align: center; }
.footer-about p { opacity: 0.7; color: var(--text-sub); font-size: .8rem !important; }
.footer-about a { color: var(--text-sub); text-decoration: underline; font-size: .8rem !important; }

@media screen and (max-width: 600px) {
footer { padding: 50px 0; }
.footer-container { padding-top: 50px; }
.footer-top-container { align-items: flex-start; }
.footer-links { display: flex; flex-direction: column; }
.footer-links a { padding: 10px 0; }
.footer-about { margin: 30px 0 0; padding: 30px 0 0; text-align: left; } }
 
/*****************************
  Error page
*****************************/

.error-page { text-align: center; max-width: 650px; margin: 180px auto; }
.error-page .svg-inline--fa { font-size: 5rem; color: var(--icon); margin-bottom: 20px; }
.error-page-text { max-width: 550px; margin: 10px auto 0; }
.error-page a { margin: 20px auto 0; }
.error-page .btn-base { max-width: 200px; }

@media screen and (max-width: 950px) {

.error-page { margin: 140px auto; } }


/*****************************
  Basic Page
*****************************/

.basic-page { max-width: 750px; margin: 0 auto; }
.basic-page h1 { padding-bottom: 15px; }
.basic-page p { padding-bottom: 10px; }
.basic-header-centered { text-align: center; padding: 80px 20px; }
.basic-page-section { margin-top: 20px; }
.basic-page-section h2 { padding-bottom: 10px; }

/*****************************
  Hero
*****************************/

.hero { padding: 125px 0 125px; display: flex; flex-direction: column; align-items: center;}
.hero-text { max-width: 800px; width: 100%; text-align: center; margin: 0 auto; }
.hero-text h1 { font-size: 4rem; line-height: 1.3; padding: 0 0 10px 0; }
.hero-text p { max-width: 605px; margin: 0 auto; }
.hero-text a { margin: 35px auto 15px; }
.hero-image { width: 100%; max-width: 1040px; margin: 50px 0 0; }
.hero-image img { width: 100%; display: block; border-radius: 10px; }

@media screen and (max-width: 1150px) {

.hero { padding: 80px 0; max-width: 750px; margin: 0 auto; }
.hero-text { width: 100%; text-align: center; }
.hero-text h1 { font-size: 3.9rem; padding: 15px 0 5px; }
.hero-text p { max-width: 500px; margin: 0 auto; }
.hero-image { width: 100%; margin: 30px 0 0; } }

@media screen and (max-width: 650px) {
    
.hero { padding: 60px 0; }
.hero-text { text-align: left; }
.hero-text h1 { font-size: 2.6rem; }
.hero-text p { margin: 0; } }

/*****************************
  Feature Bullet List
*****************************/

.feature-bullet-list { max-width: 600px; margin: 50px auto 0; }
.feature-bullet-list h2 { padding: 0 0 20px; font-size: 1.8rem; line-height: 1.5; }
.feature-bullet-list ul { padding: 0 0 0 15px!important; }
.feature-bullet-list p { padding-bottom: 15px; }
.feature-bullet-list a { text-decoration: underline; font-weight: bold; }
.feature-bullet-list a:hover { color: var(--white); }

@media screen and (max-width: 650px) {

.feature-bullet-list:first-child { margin-top: 0; } }

/*****************************
  Block items
*****************************/

.block-items { margin: 50px 0 0; }
.block-items-row { display: flex; flex-direction: row; flex-wrap: wrap; }
.block-item { background: var(--background); border: solid 1px var(--border); padding: 30px 25px; display: flex; flex-direction: column; width: calc(33.33% - 72px); transition: all 0.4s ease 0s; text-align: left; margin: 15px; border-radius: 10px; }
.block-item-icon { margin: 0px 0px 15px; }
.block-item-icon .svg-inline--fa { color: var(--icon); font-size: 1.8rem; }
.block-items-row .block-item:first-child { margin-left: 0; }
.block-items-row .block-item:nth-child(3n) { margin-right: 0; }
.block-items-row .block-item:nth-child(3n+1) { margin-left: 0; }
.block-item h4 { padding: 5px 0 10px; }

@media screen and (max-width: 950px) {

.block-items-row { max-width: 550px; margin: 0 auto; display: flex; flex-direction: column; }
.block-item { padding: 20px; width: calc(100% - 42px); margin: 15px auto; align-items: center; text-align: center; }
.block-item:first-child { margin: 0 auto 15px; } 
.block-item:last-child { margin: 15px auto 0; } }

/*****************************
  Sections
*****************************/

.section-header { margin: 0 auto 80px; text-align: center; max-width: 635px; }
.section-header h2 { padding: 0 !important; }

@media screen and (max-width: 950px) {

.section-header { margin: 0 auto 50px; } }


/*****************************
  Call to action
*****************************/

.cta { display: flex; flex-direction: column; align-items: center; text-align: center; background-color: var(--background-02); border: solid 1px var(--border); border-radius: 10px; padding: 80px 50px; }
.cta-text { padding: 10px 0 30px; max-width: 550px; margin: 0 auto; }

@media screen and (max-width: 600px) {

.cta { text-align: left; align-items: flex-start; } }

@media screen and (max-width: 450px) {
.cta { padding: 60px 40px; } }

/************************************
	Feature 01
************************************/

.features-01-item { display: flex; flex-direction: row; align-items: center; margin: 80px 0; }
.features-01-item-copy { width: calc(50% - 50px); margin-right: 50px; }
.features-01-item-media { width: 50%; }
.features-01-item-media img { width: 100%; display: block; border-radius: 10px; }
.features-01-item:nth-child(even) { flex-direction: row-reverse;  }
.features-01-item:nth-child(even) .features-01-item-copy { margin: 0 0 0 50px; }
.features-01-item p { padding-bottom: 25px; }

@media screen and (max-width: 1040px) {

.features-01 { margin: 0 auto; max-width: 650px; }
.features-01-item { flex-direction: column-reverse; margin: 0 0 70px; }
.features-01-item:nth-child(even) { flex-direction: column-reverse;  }
.features-01-item:nth-child(even) .features-01-item-copy { margin: 30px 0 0; }
.features-01-item-copy { width: 100%; margin: 0; text-align: center; }
.features-01-item-media { width: 100%; transform: none !important; margin: 0 0 30px; }
.features-01-item:nth-child(even) .features-01-item-media { transform: none !important; } }

/************************************
	Feature 02
************************************/

.features-02-container { width: 100%; display: flex; flex-direction: row; align-items: center; }
.features-02-items { display: flex; flex-direction: column; }
.features-02-side { width: 50%; }
.features-02-side:first-child { margin-right: 40px; }
.features-02-side:last-child { margin-left: 40px; }
.features-02-item { margin-bottom: 40px; }
.features-02-item:last-child { margin-bottom: 0; }
.features-02-img img { border-radius: 10px; width: 100%; height: auto; }

@media screen and (max-width: 1040px) {

.features-02-container { flex-direction: column-reverse; max-width: 450px; margin: 0 auto; } 
.features-02-side { width: 100%; }
.features-02-side:first-child { margin-right: 0; }
.features-02-side:last-child { margin-left: 0; }
.features-02-item { text-align: center; margin-bottom: 40px; }
.features-02-item .svg-inline--fa { display: none; }
.features-02-img { margin-bottom: 60px; } 
.features-02-img img { transform: none; } }

/************************************
	Features 03
************************************/

.features-03-items { display: flex; flex-direction: column; }
.features-03-item { display: flex; flex-direction: row; align-items: center; max-width: 600px; margin: 0 auto; padding: 0 0 70px; }
.features-03-item-tag { margin-bottom: 15px; border-radius: 100%; display: flex; flex-direction: row; align-items: center; }
.features-03-item-tag-inner { background-color: var(--background); border: solid 1px var(--border-02); border-radius: 30px; }
.features-03-item p { padding-bottom: 25px !important; }
.features-03-item-tag-inner p { color: var(--text-default) !important; font-weight: bold; padding: 2px 10px !important; text-transform: uppercase; font-size: .72rem; letter-spacing: .08rem; }

@media screen and (max-width: 750px) {

.features-03-items { flex-direction: column; max-width: 400px; margin: 80px auto 0; }
.features-03-item { width: 100%; padding-bottom: 70px; text-align: center; }
.features-03-item-tag-inner { margin: 0 auto; }
.features-03-item:last-child { margin-bottom: 0 !important; } }

/*****************************
  Basic Content Section
*****************************/

.basic-content-section { text-align: center; max-width: 750px; margin: 0 auto; }
.basic-content-section h2 { padding-bottom: 10px; }
.basic-content-section p { padding-bottom: 10px; }

/*****************************
  FAQs
*****************************/

.faqs { max-width: 650px; margin: 0 auto; }
.faqs-header { text-align: center; margin-bottom: 40px; }
.faq-container { border-radius: 10px; background-color: var(--background); border: solid 1px var(--border); }
.faq { transition: all 0.4s; padding: 25px 0; margin: 0 25px; cursor: pointer; border-bottom: solid 1px var(--border); }
.faq:last-child { border-bottom: none !important; }
.faq:hover h2 { text-decoration: underline; }
.faq-top { display: flex; flex-direction: row; align-items: center; }
.faq-top .svg-inline--fa { margin-left: auto; padding-left: 20px; color: var(--icon); font-size: .7rem; }
.faq h2 { font-size: 1.2rem; padding: 0 !important; }
.faq p { padding-top: 10px; }

/*****************************
  Testimonials
*****************************/

.testimonial { padding: 80px 0 0; margin: auto; border-top: solid 1px var(--border); }
.testimonial-inner { max-width: 800px; margin: 0 auto; }
.testimonial-content { padding-bottom: 15px; font-size: 1.6rem; line-height: 1.7; font-weight: 600; color: var(--text-default) !important; }
.testimonial-row { display: flex; flex-direction: row; align-items: center; margin-top: 10px; }
.testimonial-avatar { margin-right: 10px; height: 60px; width: 60px; }
.testimonial-avatar img { border-radius: 50%; height: 100%; width: 100%; }
.testimonial-details p { margin: 0; font-weight: 600; font-size: .94rem; padding: 0 !important; }
.testimonial-name { font-weight: 800; }
.testimonial-company { color: var(--text-sub) !important; }
.testimonial-logo { margin-left: auto; }
.testimonial-logo img { max-width: 115px!important; height: auto; }
.testimonial-logo-sml img { max-width: 120px!important; }

@media screen and (max-width: 500px) {

.testimonial { padding: 50px 0 0; }
.testimonial-logo img { display: none; } }

/*****************************
  Social Proof Logos
*****************************/

.social-proof-logos { margin-top: 15px; max-width: 1150px; margin: 0 auto; }
.social-proof-logos-items { max-width: 950px; margin: 0 auto; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; margin-top: 10px; }
.social-proof-logos-header p { margin: 0 !important; text-align: center; font-size: .97rem; }
.social-proof-logos-item { margin: 20px 10px; }
.social-proof-logos-item img { border: 0; max-width: 90px!important; height: auto; }

/*****************************
  Feature Bullet List
*****************************/

.feature { display: flex; flex-direction: row; align-items: center; }
.feature-text { width: 50%; }
.feature-text h2 { font-size: 1.8rem; line-height: 1.5; padding: 0 0 20px; }
.feature-img { width: calc(50% - 50px); margin-left: 50px; }
.feature-img img { width: 100%; display: block; }

@media screen and (max-width: 1050px) {
.feature { flex-direction: column-reverse; max-width: 750px; margin: 0 auto; }
.feature-text { width: 100%; }
.feature-img { max-width: 400px; width: 100%; margin: 0 auto 25px; } }

/*****************************
  Other
*****************************/

.toggle-content { display: none; }