:root {
    /* Colors */
    --brand-extra-light: #3bb8ff;
    --brand-light: #039ffc;
    --brand-primary: #0082e3;
    --brand-dark: #004fb7;
    --brand-extra-dark: #2a2c38;
    --text: #334652;
    --text-light: #657388;
    --text-extra-light: #96a0ae;
    --text-placeholder: #b8bfc8;
    --border: #d4d7dd;
    --disabled: #ebedf0;
    --bg-content: #f6f7f9;
    --bg-form: #fbfbfb;
    --warning: #d21e34;
    --co-orange: #f66a4d;
    --co-gold: #f39d04;
    --co-green: #5eb94d;
    --co-lt-blue: #05bff3;

    /* Sizing */
    --nav-height: 60px;
    --blue-bar-height: 4px;
    --header-height: calc(var(--nav-height) + var(--blue-bar-height));

    /* Fonts */
    --font-primary: 'Prompt', sans-serif;
    --font-secondary: 'Open Sans', sans-serif;

    /* Box shadows */
    --box-shadow: 0px 3px 6px 0px rgba(42,44,56,0.2);
}
/* Disable touch highlighting */
.mobile-nav * {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
html {
    margin: 0;
    padding: 0;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-content);
    font-family: var(--font-primary);
    color: var(--text);
}
a {
    color: var(--brand-primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
p, li {
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.875rem;
    font-weight: 400;
}
li {
    margin-bottom: 1rem;
}
p.big-text {
    font-size: 1.375rem;
    line-height: 2.25rem;
}
p.small-text {
    font-size: 0.6875rem;
    line-height: 1rem;
}
h1, h2, h3, h4 {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    font-weight: 600;
    text-align: center;
}
h1 {
    margin: 0 auto 1.875rem;
    font-size: 2.75rem;
    line-height: 3rem;
}
h2 {
    font-size: 2.125rem;
    line-height: 2.25rem;
}
h3 {
    font-size: 1.5rem;
    line-height: 1.875rem;
}
h4 {
    font-size: 1rem;
    line-height: 1.875rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 2.5rem;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 1.125rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
}
.btn-lg {
    padding: .75rem 3rem;
    font-size: 1.375rem;
}
.btn-primary {
    background-image: linear-gradient(60deg, var(--brand-extra-light) 0%, var(--brand-light) 10%, var(--brand-primary) 25%, var(--brand-dark) 50%);
    background-size: 200% 100%;
    border: 0;
    color: #fff !important;
    transition: background .4s ease-in-out !important;
}
.btn-primary:hover {
    background-position: 40% 0;
    transition: background .4s ease-in-out !important;
}
.btn-secondary {
    border: 1px solid var(--brand-primary);
    color: var(--brand-primary) !important;
    transition: background-color .4s ease-in-out !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--brand-primary);
    color: #fff !important;
    transition: background-color .4s ease-in-out !important;
}
.btn-primary.btn-cy {
    background-image: linear-gradient(60deg, #4fce02 0%, #3da800 10%, #329332 25%, #167d00 50%);
}

.white {
    color: #fff;
}
.blue {
    color: var(--brand-primary);
}
.warning {
    color: var(--warning);
}
.success {
    color: var(--co-green);
}
.white-bg {
    background-color: #fff;
}
.box-shadow {
    box-shadow: var(--box-shadow);
}
.rounded {
    border-radius: 6px;
}

/* Nav */
#navbar {
    box-sizing: content-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    background-color: #fff;
    border-bottom: var(--blue-bar-height) solid var(--brand-primary);
    box-shadow: 0px 2px 4px 0px rgba(42,44,56,0.40);
    z-index: 2;
    transition: top 0.2s ease-in;
}
#navbar .content {
    display: flex;
    align-items: center;
    height: var(--nav-height);
}
#navbar  img {
    margin-top: 8px;
    height: calc(var(--nav-height) - 16px);
}
#navbar ul li a {
    font-family: 'Prompt', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    transition: color 0.2s ease-in;
}
#navbar ul li a:hover {
    color: var(--brand-primary);
    transition: color 0.2s ease-in;
    text-decoration: none;
}
#navbar a.btn {
    margin-top: -2px;
    margin-left: 1.25rem;
}
#navbar a.btn-primary {
    padding: 0.3125rem 1.75rem;
}
#navbar a.btn-secondary {
    padding: 0.25rem 1.75rem;
}
.nav {
    margin-top: 20px;
}

/* Nav dropdowns */
#navbar ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
#navbar ul li {
    position: relative;
}
#navbar ul li a {
    display: block;
    padding: .3125rem 1.25rem;
    text-decoration: none;
    color: var(--text-light);
    transition: all 0.3s ease-out;
}
#navbar ul li a:hover {
    color: var(--brand-primary);
    transition: all 0.3s ease-in;
}
#navbar ul li:hover .dropdown-menu {
    visibility: visible;
    max-height: 500px;
    transition: all 0.3s ease-in;
}
.dropdown-menu {
    visibility: hidden;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: fit-content;
    max-height: 0;
    padding: 10px 0;
    background-color: rgba(255, 255, 255, 0.96);
    border-radius: 0 0 6px 6px;
    box-shadow: var(--box-shadow);
    white-space: nowrap;
    transition: all 0.1s ease-out;
    overflow: hidden;
}
.dropdown-menu a {
    display: block;
    padding: .5rem 1.25rem;
    color: var(--text-light);
    text-decoration: none;
    transition: all 0.3s ease-out;
}
.dropdown-menu a:hover {
    background-color: rgba(212, 215, 221, 0.65);
    color: var(--brand-primary);
    transition: all 0.3s ease-in;
}

/* Mobile nav */
.mobile-nav {
    position: fixed;
    overflow: hidden;
    z-index: 3;
}
.mobile-nav input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.mobile-nav-logo {
    position: fixed;
    display: none;
    top: 8px;
    height: calc(var(--nav-height) - 16px);
    z-index: 3;
}
#mobile_nav_btn {
    position: fixed;
    top: 0;
    right: 0;
    height: var(--nav-height);
    padding: 16px 1.24rem 0 0;
    cursor: pointer;
    transition: top .2s ease-in
}
#mobile_nav_btn::before {
    content: "\f0c9";
    display: block;
    position: fixed;
    right: 1.25rem;
    font-family: 'Font Awesome 5 Pro';
    font-size: 1.625rem;
    color: var(--brand-extra-dark);
}
.mobile-menu {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.875rem;
    background: var(--brand-extra-dark);
    z-index: 2;
    opacity: 0;
    transition: opacity 1s ease-in;
    overflow-y: auto;
}
.mobile-menu a:not(.btn) {
    line-height: 2.375rem;
    color: #fff;
    transition: color .2s ease-in;
}
.mobile-menu a:not(.btn):hover {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color .2s ease-in;
}
.mobile-menu a i {
    display: inline-block;
    padding-right: 10px;
    color: var(--brand-primary);
}
.mobile-nav input:checked ~ nav{
    top: 0 !important
}
.mobile-nav input:checked ~ #mobile_nav_btn {
    left: 0;
    background: var(--brand-extra-dark);
}
.mobile-nav input:checked ~ a.mobile-nav-logo {
    display: block !important;
}
.mobile-nav input:checked ~ #mobile_nav_btn::before {
    content: "\2b";
    margin: -14px -2px 0 0;
    font-size: 3rem;
    color: #fff;
    transform: rotate(45deg);
}
.mobile-menu-logo {
    position: fixed;
    display: none;
    top: 9px;
    left: 1.25rem;
    min-width: 200px;
    height: calc(var(--nav-height) - 16px);
    z-index: 2;
}
.mobile-menu-logo img {
    height: 100%;
}
.mobile-nav input:checked ~ .mobile-menu-logo {
    display: block;
}
.mobile-nav input:checked ~ .mobile-menu {
    display: block;
    opacity: 1;
    transition: opacity 1s ease-in;
}
.mobile-menu ul {
    margin-top: 0;
    list-style: none;
}
.mobile-menu ul li {
    position: relative;
    margin-bottom: 0;
    padding-left: 1rem;
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
}
.mobile-menu ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 6px;
    border-color: transparent transparent transparent var(--brand-primary);
}
.mobile-menu .btn {
    width: 100%;
    max-width: 200px;
    margin: 1.25rem 0 0 0;
}

.main {
    min-height: calc(100vh - var(--header-height) - 275px);
    padding-top: var(--header-height);
}
.content {
    width: calc(100% - 2.5rem);
    max-width: 1200px;
    min-width: 280px;
    margin: auto;
}
.section {
    padding: 5rem 0 6.25rem 0;
}

/* Slide in animation */
.slide-up {
    opacity: 0;
    transform: translateY(150px);
    animation: slide-up 1s ease forwards;
}
.slide-left {
    opacity: 0;
    transform: translateX(400px);
    animation: slide-left 1s ease forwards;
}
.slide-right {
    opacity: 0;
    transform: translateX(-400px);
    animation: slide-right 1.5s ease forwards;
}

@keyframes slide-up {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes slide-left {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slide-right {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* FAQ */
.faqs {
    max-width: 800px;
    margin: auto;
    overflow: hidden;
}
.faq {
    background: var(--bg-form);
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
    font-family: var(--font-secondary);
    color: var(--brand-secondary);
    overflow: hidden;
}
.faq:hover {
    background-color: #fff;
}
.faq input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.faq-label {
    position: relative;
    max-width: calc(100% - 2rem);
    padding: 1.25rem 1.875rem 1.4rem 3.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .3s;
    float: left;
}
.faq-label::before {
    content: '\2b';
    display: block;
    position: absolute;
    left: 1.5rem;
    width: 3rem;
    font-family: 'Font Awesome 5 Pro';
    font-size: 2.5rem;
    line-height: 1.125rem;
}
.faq-content {
    max-height: 0;
    padding: 0 1.875rem;
    background: #fff;
    color: var(--brand-secondary);
    transition: padding .35s ease-out;
    clear: both;
}
.faq-content p:first-child {
    margin-top: 0;
}
.faq-content p:last-child {
    margin-bottom: 0;
}
.faq-label:hover,
.faq:has(input:checked) {
    background: #fff;
    border-color: var(--brand-primary);
}
.faq-label:hover,
input:checked + .faq-label {
    color: var(--brand-primary);
    transition: color .3s ;
}
input:checked + .faq-label::before {
    content: '\f068';
    font-size: 1.5rem;
    line-height: 1.375rem;
    margin-left: 0.125rem;
}
input:checked ~ .faq-content {
    max-height: 100vh;
    padding: 0 1.875rem 1.875rem 1.875rem;
}

.spotlight {
    background: radial-gradient(circle at center 200%, var(--text-light), var(--brand-extra-dark));
    color: #fff;
}

/* Cloudie */
.cloudie-btn {
    position: fixed;
    top: calc(100vh - 5px);
    right: 0;
    width: 5px;
    height: 5px;
    z-index: 999;
}
.cloudie {
    position: fixed;
    top: calc(100vh - 297px);
    right: 20px;
    width: 320px;
    opacity: 0;
    z-index: 998;
    transform: translateY(300px);
    transition: all 1s ease-out;
}
.cloudie img {
    width: 100%;
}
.cloudie-btn:hover + .cloudie {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s ease-out;
}

/* Footer */
.footer {
    min-height: 100%;
    padding: 2.5rem 1.25rem 0 1.25rem;
    background: var(--brand-extra-dark);
    background: linear-gradient(0deg, var(--brand-extra-dark) 0, var(--brand-extra-dark) 96%, #000 104%);
    line-height: 2.25rem;
    color: var(--text-extra-light);
}
.footer .flex-col {
    min-width: 300px;
    padding-bottom: 1.875rem;
}
.footer h3 {
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-extra-light);
    text-align: left;
}
.footer a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease-in;
}
.footer a:hover {
    color: var(--brand-light);
    text-decoration: none;
    transition: color 0.2s ease-in;
}
.footer-nav-link {
    display: block;
}
.footer-info {
    padding-top: 1.875rem;
    border-top: 1px solid #4b4f5c;
    font-size: 0.75rem;
    line-height: 1.5rem;
}
.footer .flex-col.footer-terms {
    min-width: 500px;
    text-align: center;
}
.footer-terms .desktop {
    display: inline-block;
}
.footer a.footer-social-link {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: -4px 0 0 0.625rem;
    background-color: #fff;
    border-radius: 50%;
    font-size: 16px;
    line-height: 28px;
    color: var(--brand-extra-dark);
    text-align: center;
    transition: background-color 0.2s ease-in;
}
.footer a.footer-social-link:hover {
    background-color: var(--brand-light);
    transition: background-color 0.2s ease-in;
}

@media screen and (max-width: 900px) {
    .footer .flex-col,
    .footer .flex-col.footer-terms {
        min-width: 100%;
        text-align: left;
    }
}
@media screen and (max-width: 640px) {
    .section {
        padding: 3.75rem 0;
    }
}
@media screen and (max-width: 480px) {
    .section {
        padding: 3.125rem 0 4rem 0;
    }
}