/* =========================
   Variables
   ========================= */

:root {
    --signature-color: #FF8A33;

    --top-bar-bg: var(--primary-btn-hover-bg-light);
    --top-bar-color: #333;

    --navbar-active-color: var(--signature-color);
    --navbar-hover-color: var(--signature-color);

    --primary-btn-bg: #001F40;
    --primary-btn-text-color: #fff;
    --primary-btn-hover-bg: #75BAFF;
    --primary-btn-hover-bg-light: rgba(117, 186, 255, 0.18);

    --primary-btn-outline-hover-bg: #001F40;
    --primary-btn-outline-hover-color: #fff;

    --primary-info-text-bg: #EBFCFF;

    --link-color: #001F40;
    --link-hover-color: #75BAFF;

    --footer-bg: #424242;
    --footer-secondary-bg: #333;
    --footer-text-color: #fff;

    --focus-color: var(--signature-color);
}


/* =========================
   Base
   ========================= */

body {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

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

.bg-dark {
    background-color: var(--primary-btn-bg) !important;
}

/* =========================
   Accessibility
   ========================= */

:focus-visible {
    outline: 4px solid color-mix(in srgb, var(--focus-color) 60%, transparent);
    outline-offset: 2px;
}


/* =========================
   Top Bar
   ========================= */

.top-bar-bg-container {
    background: var(--top-bar-bg);
    color: var(--top-bar-color);
}

.top-bar-bg-container .btn:hover {
    background-color: var(--bs-secondary);
    color: var(--bs-light);
}


/* =========================
   Header / Navigation
   ========================= */

.navbar-nav {
    font-weight: 400;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: var(--navbar-active-color);
}

.offcanvas-header {
    background: var(--primary-btn-bg);
    color: var(--primary-info-text-bg);
}

.navbar-brand img {
    height: 3rem;
}


/* =========================
   Buttons
   ========================= */

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

a.btn-outline-primary:hover,
a.btn-outline-primary:active,
a.btn-outline-primary:focus {
    color: var(--primary-btn-outline-hover-color);
    background-color: var(--primary-btn-outline-hover-bg);
    text-decoration: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--primary-btn-bg);
    border-color: var(--primary-btn-bg);
    color: #fff;
}

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

.header .btn-outline-primary:hover,
.header .btn-outline-primary:focus,
.header .btn-outline-primary:active {
    color: #fff;
    background-color: var(--primary-btn-bg);
    border-color: var(--primary-btn-bg);
}

/* =========================
   Home Page
   ========================= */

.page-content .index-header-bg {
    background: #F2F2F2;
    background: linear-gradient(
            0deg,
            rgba(242, 242, 242, 0.95) 0%,
            rgba(255, 255, 255, 1) 100%
    );
}

.page-content .accordion-button:not(.collapsed) {
    background: #EBFCFF;
}

.page-content #closing-cta .rounded {
    background-color: var(--primary-btn-hover-bg-light);
}

.page-content i {
    color: var(--primary-btn-bg);
}

.page-content .bg-light {
    background: #EBFCFF;
    background: radial-gradient(
            circle,
            rgb(221, 243, 246) 0%,
            rgba(248, 249, 250, 1) 60%
    );
}

.page-content .image-frame-offset {
    position: relative;
    display: inline-block;
}

.page-content .image-frame-offset::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 0;
}


/* =========================
   Products
   ========================= */

#products .nav {
    width: 100%;
}

#products .nav-link {
    text-decoration: none;
    border: none;
    transition: all 0.3s ease-in-out, color 0.15s;
    color: #000;
}

#products .nav-link:hover {
    color: var(--primary-btn-outline-hover-bg);
}

#products .nav-link.active {
    --b: 2px;
    --c: var(--primary-btn-outline-hover-bg);
    --w: 15px;

    color: var(--primary-btn-outline-hover-bg);

    --_g: #0000 90deg, var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;

    background:
            conic-gradient(
                    from 90deg at top var(--b) left var(--b),
                    var(--_g)
            ) 0 0 / var(--_p),
            conic-gradient(
                    from 180deg at top var(--b) right var(--b),
                    var(--_g)
            ) 100% 0 / var(--_p),
            conic-gradient(
                    from 0deg at bottom var(--b) left var(--b),
                    var(--_g)
            ) 0 100% / var(--_p),
            conic-gradient(
                    from -90deg at bottom var(--b) right var(--b),
                    var(--_g)
            ) 100% 100% / var(--_p);
}

#products .nav-link.active:hover {
    color: var(--primary-btn-outline-hover-bg);
}


/* =========================
   How To / Swiper
   ========================= */

#howto .swiper-tab {
    top: 0;
    left: 0;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#howto .swiper-tab.active {
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#howto .swiper-tab {
    transition: opacity .3s ease-in-out;
}

#howto img {
    max-height: 500px;
}


/* =========================
   Trust
   ========================= */

@media screen and (max-width: 991px) {
    #trust .border-end {
        border-right: none !important;
    }
}

/* =========================
   Store Buttons
   ========================= */

.store-buttons img {
    height: 48px;
    width: auto;
}

.download-cta {
    background: var(--primary-btn-hover-bg-light);
}

/* =========================
   FAQ
   ========================= */

.page-content .accordion-button:not(.collapsed) {
    background-color: var(--primary-btn-hover-bg-light);
}


/* =========================
   Footer
   ========================= */

.footer-main {
    color: var(--footer-text-color);
    background: var(--footer-bg);
}

.footer-main a {
    color: var(--footer-text-color);
    text-decoration: none;
}

.footer-main a:hover {
    color: var(--navbar-hover-color);
    text-decoration: underline;
}

.footer-main .footer-contact {
    background: var(--footer-secondary-bg);
}

.footer-main .footer-contact img {
    height: 3rem;
}