:root {
    color-scheme: light dark;
    --g-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    --g-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --dark-bg: #272829;
    --light-bg: #f0f0f0;
    --dark-text: #eeeeee;
    --light-text: #2c2c2d;
    --link: #75ade8;
    --link-hover: #3c71a8;
    --dark-accent: #61677a;
    --dark-accent-hover: #484d5b;
    --light-accent: #2c2c2d;
    --light-accent-hover: #555555;
    --dark-items: #31363f;
    --light-items: #f5f5f5;
    --white: #eeeeee;
    --paper: #f0f0f0;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --blue: #6495ed;
    --blue-hover: #1e7ed2 !important;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.fade-in {
    opacity: 0;
    animation: fadeIn .8s ease-in-out forwards;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    background-color: #fafafa !important;
}

html {
    scroll-behavior: smooth;
}

.blue {
    color: var(--blue) !important;
}

.blue-link {
    color: var(--blue) !important;
    text-decoration: none !important;
    transition: .4s ease;
}

.blue-link:hover {
    color: var(--blue-hover) !important;
}

.public-logo {
    width: 100px !important;
    color: var(--dark-bg) !important;
    font-family: var(--font) !important;
    font-size: 16px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    font-weight: 600 !important;
}

.navbar-container {
    padding: 12px !important;
    background-color: #fafafa !important;
}

.nav-menu-icon {
    color: #212529 !important;
}

.navbar-toggler {
    border: 0 !important;
}

.navbar-toggler:focus {
    box-shadow: none !important;
}

.offcanvas-collapse {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90vh !important;
    z-index: -1 !important;
    background-color: #fafafa !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
}

.offcanvas-collapse.open {
    transform: translateX(0) !important;
}

.landing-link {
    font-size: 16px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    color: var(--dark-bg) !important;
    text-decoration: none !important;
    padding: 0 18px !important;
}

.landing-link:hover {
    font-weight: 600 !important;
}

.active {
    font-weight: 600 !important;
}

.landing-container {
    width: 100% !important;
    height: auto !important;
    background: linear-gradient(to right, #16222a, #3a6073) !important;
    border-radius: 48px !important;
}

.landing-label {
    font-family: var(--font) !important;
    color: #212529 !important;
    text-decoration: none !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    width: fit-content !important;
    text-align: left !important;
}

.landing-title {
    font-size: 42px !important;
    font-family: var(--font) !important;
    font-weight: 600 !important;
    color: #f9f9f9 !important;
}

.page-title {
    font-size: 42px !important;
    font-family: var(--font) !important;
    font-weight: 500 !important;
}

.landing-text {
    color: #f9f9f9 !important;
    font-size: 16px !important;
    font-family: var(--font) !important;
    font-weight: 500 !important;
    line-height: 150% !important;
}

.landing-header {
    font-size: 36px !important;
    font-family: var(--font) !important;
    color: #212529 !important;
}

landing-header-sm {
    font-size: 36px !important;
    font-family: var(--font) !important;
    color: #212529 !important;
}

.landing-subtext {
    font-size: 16px !important;
    font-family: var(--font) !important;
    color: #212529 !important;
    line-height: 150% !important;
}

.btn-landing {
    padding: 12px 32px !important;
    border-radius: 30px !important;
    background-color: var(--blue) !important;
    font-size: 16px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    border: 1px solid var(--blue) !important;
    text-decoration: none !important;
    color: #f9f9f9 !important;
    display: grid !important;
    place-items: center !important;
    transition: background-color .2s ease-in, border .2s ease-in !important;
}
.btn-landing:hover,
.btn-landing:focus {
    background-color: #6495eda8 !important;
    border: 1px solid var(--blue) !important;
}
.btn-landing > i {
    font-size: 14px !important;
}
.btn-outline {
    height: 50px;
    width: 50px;
    border-radius: 30px;
    background-color: #f2f2f2;
    font-size: 16px;
    font-family: var(--font);
    font-weight: 400;
    border: 1px solid var(--blue);
    text-decoration: none;
    color: var(--blue);
    display: grid;
    place-items: center;
    transition: background-color .2s ease-in, border .2s ease-in;
}
.btn-outline:hover {
    background-color: #fff !important;
}

.btn-landing-outline {
    padding: 12px 4px !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    font-size: 16px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    border: 0 !important;
    text-decoration: none !important;
    color: #f9f9f9 !important;
    display: grid !important;
    place-items: center !important;
    transition: border-bottom .2s ease-in !important;
    border-bottom: 1px solid transparent !important;
}

.underline {
    display: inline-block !important;
    position: relative !important;
    text-align: center !important;
    cursor: pointer !important;
}

.underline::after {
    content: "" !important;
    display: block !important;
    width: 0% !important;
    height: 1px !important;
    background-color: #f9f9f9 !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -5px !important;
    transform: scaleY(0.5) !important;
    transform-origin: left !important;
    transition: width 0.4s ease-in-out !important;
}

.underline:hover::after,
.underline.active::after {
    width: 100% !important;
}

.landing-input::placeholder {
    color: #a4a4c3 !important;
    opacity: 1 !important;
}

.landing-input {
    height: 60px !important;
    border-radius: 8px !important;
    border: 1px solid #ededed !important;
    padding-left: 24px !important;
    background-color: #f2f2f2 !important;
    color: #212529 !important;
    font-size: 18px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
}

.landing-input:focus,
.landing-input:active,
.landing-input:focus-visible {
    background-color: #fafafa !important;
    color: #212529 !important;
    border: 1px solid var(--blue) !important;
    box-shadow: var(--g-shadow-sm) !important;
    outline: none !important;
}

.grey-card {
    background: linear-gradient(to right, #f0f0f0, #e0e0e0) !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}

.white-card {
    background: linear-gradient(to right, #fff, #f9f9f9) !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}

.signup-card {
    background: linear-gradient(to right, #fff, #f9f9f9) !important;
    border-radius: 24px !important;
    width: 100% !important;
    height: auto !important;
}

.how-text {
    font-size: 20px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    color: light-dark(var(--light-text), var(--dark-text)) !important;
    line-height: 36px !important;
}

.privacy-subtext {
    font-size: 1rem !important;
    color: #212529 !important;
    line-height: 150% !important;
}

.privacy-title {
    font-size: 1.2rem !important;
    color: #212529 !important;
}

.page-container {
    min-height: 100vh !important;
    padding-top: 120px !important;
    position: relative !important;
}

.text {
    font-size: 14px !important;
    font-family: var(--font) !important;
    font-weight: 300 !important;
    color: #212529 !important;
    text-decoration: none !important;
    line-height: 150% !important;
}

.blog-nav {
    border-bottom: .5px solid !important;
    border-color: light-dark(var(--light-accent), var(--dark-accent)) !important;
}

.blog-btn {
    border: 2px solid var(--border) !important;
    height: 260px !important;
    width: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    position: relative !important;
    transition: ease-in-out .2s !important;
    text-decoration: none !important;
}

.dark-glass-overlay {
    position: absolute !important;
    bottom: 0 !important;
    width: 100% !important;
    height: fit-content !important;
    background: rgba(24, 24, 24, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

.dark-overlay-content {
    padding: 8px !important;
    color: white !important;
    text-align: left !important;
    max-width: 400px !important;
}

.blog-container {
    margin-top: 120px !important;
    width: 100% !important;
    overflow-y: auto !important;
    border-radius: 4px !important;
    color: #f9f9f9 !important;
    border: 1px solid light-dark(#ddd, rgba(255, 255, 255, 0.1)) !important;
}

.blog-title {
    font-size: 2rem !important;
    color: #212529 !important;
}

.blog-author {
    font-size: .8rem !important;
    color: #686868 !important;
}

.blog-text {
    font-weight: 300 !important;
    line-height: 28px !important;
    color: #212529 !important;
}

.blog-header {
    font-size: 1.4rem !important;
    color: #212529 !important;
}

.about-title {
    font-family: var(--font) !important;
    text-align: center !important;
    font-size: 48px !important;
    font-weight: 500 !important;
}

.about-subtitle {
    font-size: 18px !important;
    font-family: var(--font) !important;
    text-align: center !important;
}

.accordion-button h2 {
    font-size: 1.3rem !important;
}

.features-faq .accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent !important;
}

.features-faq .accordion-button:not(.collapsed) {
    color: var(--blue) !important;
    background-color: #fff !important;
}

.badge-dark {
    font-family: var(--font) !important;
    font-size: 12px !important;
    letter-spacing: 1px !important;
    background: var(--dark-accent) !important;
}

.badge-blue {
    background-color: rgba(100, 149, 237, 0.1) !important;
    color: var(--blue) !important;
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
}

.btn-footer {
    width: 180px !important;
    height: 48px !important;
    border-radius: 30px !important;
    background-color: var(--blue) !important;
    font-size: 16px !important;
    font-family: var(--font) !important;
    font-weight: 400 !important;
    border: 0 !important;
    text-decoration: none !important;
    color: light-dark(var(--light-bg), var(--light-text)) !important;
    display: grid !important;
    place-items: center !important;
}

.btn-footer:hover,
.btn-footer:focus {
    background-color: var(--blue-hover) !important;
}

.footer-bg {
    background-color: light-dark(var(--light-items), #1c1c1c) !important;
}

.footer-title {
    font-weight: 300 !important;
    color: light-dark(var(--light-text), var(--dark-text)) !important;
}

.footer-subtitle {
    color: light-dark(var(--light-text), var(--dark-text)) !important;
    text-decoration: none !important;
}

.footer-border {
    border-top: 1px solid !important;
    border-color: light-dark(var(--light-accent), var(--dark-accent)) !important;
}

li::marker {
    color: #212529 !important;
}

.phone-img {
    width: 100% !important;
}

.toast-container {
    top: 0 !important;
}

.toast {
    width: fit-content !important;
}

.toast-body {
    display: flex !important;
}

.toast-body > button {
    margin-left: 24px !important;
}

.about-cta {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    background: linear-gradient(to right, #16222a, #3a6073) !important;
    color: #fff !important;
}

@media(min-width:992px) {
    .t-container {
        height: 40vh !important;
        width: 60% !important;
    }
    .landing-title {
        font-size: 50px !important;
    }
    .page-title {
        font-size: 60px !important;
    }
    .landing-container {
        height: 88vh !important;
    }
    .content-row {
        height: 88vh !important;
    }
    .landing-header {
        font-size: 48px !important;
    }
    .page-container {
        padding-top: 130px !important;
    }
    .phone-img {
        width: 60% !important;
    }
}

@media(min-width:1200px) {
    .landing-title {
        font-size: 75px !important;
    }
    .page-title {
        font-size: 66px !important;
    }
}