/* Layout */
    body {
        font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #0f1f3d;
    }
    nav.navbar {
        background-color: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px);
        position: fixed;
        width: 100%;
        z-index: 100;
        font-size: 0.875rem;
        font-weight: 500;
        top: 0px;
    }
/* /Layout */



/* Basic components */
    h1 {
        font-size: 4.5rem;
        letter-spacing: -.15rem;
    }
    h2 {
        font-size: 2.25rem;
        letter-spacing: -.05rem;
    }


    @media (max-width: 767px) {
        h1 {
            font-size: 3.5rem;
        }
        h2 {
            font-size: 2.0rem;
        }
    }



    .btn.btn-primary {
        background-color: #2f6bff;
    }
    .btn {
        padding-left: 24px;
        padding-right: 24px;
    }
    .btn.btn-lg {
        padding-left: 32px;
        padding-right: 32px;
    }

    .text-primary {
        color: #2f6bff;
    }
    .text-muted { color: #717171 !important; }
    .text-light { color: rgba(255,255,255,0.7)!important; }

    .bg-dark {
        background-color: #172b4d !important;
    }
    
/* /Basic components */


    /* smaller lock icon in section-3 cards */
    .section-3 .card-icon svg,
    .section-3-card .card-icon svg {
        width: 18px;
        height: 18px;
    }

/* Basic classes */
    .py-6 { padding-top: 4.5rem; padding-bottom: 4.5rem; }
/* /Basic classes */



/* Custom component */
    .legend-font-size {
        font-size: 20px;
        max-width: 768px;
    }

    

    /* Multi-Carousel Styles */
        .multi-carousel-container {
            cursor: grab;
            margin: 0 auto;
            max-width: 100%;
            overflow: hidden;
            position: relative;
            padding: 10px 0px;
        }

        .multi-carousel-container.dragging {
            cursor: grabbing;
        }

        .multi-carousel-inner {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .multi-carousel-item,
        .clone {
            box-sizing: border-box;
            flex: 0 0 50%;
            padding: 0 8px;
            position: relative;
        }

        @media (max-width: 767px) {
            .multi-carousel-item,
            .clone {
                flex: 0 0 100%;
            }
        }

        .multi-carousel-control-prev,
        .multi-carousel-control-next {
            align-items: center;
            background: #fff;
            border: 1px solid rgba(15, 31, 61, 0.16);
            border-radius: 50%;
            box-shadow: 0 6px 18px rgba(2, 6, 23, 0.12);
            color: #0f1f3d;
            cursor: pointer;
            display: flex;
            height: 36px;
            justify-content: center;
            position: absolute;
            text-decoration: none;
            top: 50%;
            transform: translateY(-50%);
            transition: background-color 0.3s ease;
            width: 36px;
            z-index: 10;
        }

        .multi-carousel-control-prev:hover,
        .multi-carousel-control-next:hover {
            background: #f5f5f5;
        }

        .multi-carousel-control-prev {
            left: -36px;
        }

        .multi-carousel-control-next {
            right: -36px;
        }

        @media (max-width: 768px) {
        .multi-carousel-control-prev {
                left: 8px;
        }

        .multi-carousel-control-next {
                right: 8px;
        }
        }

        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: transparent;
            background-size: 18px 18px;
            background-repeat: no-repeat;
            background-position: center;
            width: 18px;
            height: 18px;
        }

        .carousel-control-prev-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 3 5 8 11 13'/%3E%3C/svg%3E");
        }

        .carousel-control-next-icon {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f1f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 3 11 8 5 13'/%3E%3C/svg%3E");
        }

        #multiCarousel.dragging {
            user-select: none;
            -webkit-user-select: none;
        }

    /* /Multi-Carousel Styles */

/* /Custom component */

.footer small { color: rgba(255,255,255,0.7); }

/* Section 1 */
    .video-wrapper {
        max-width: 894px;
        margin: 0 auto;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(2, 6, 23, 0.12);
        border: none
    }


    .video-wrapper .ratio { 
        overflow: hidden;
        position: relative;
    }
    .wistia-player-container {
        z-index: 10;
    }
    .wistia-player-container wistia-player {
        width: 100%;
        height: 100%;
    }
    .video-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: rgb(130 168 225 / 30%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0.5px solid rgba(0, 0, 0,0.06);
        box-shadow: 0 6px 18px rgba(2, 6, 23, 0.2);
        color: #2f6bff;
        transition: transform 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms ease;
    }
    .video-play svg { display: block; width:32px; height:32px; }
    .video-wrapper:hover .video-play,
    .video-wrapper:focus-within .video-play,
    .video-play:hover,
    .video-play:focus {
        transform: translate(-50%, -50%) scale(1.2);
    }
    .video-wrapper video { width: 100%; height: 100%; display: block; }

/* /Section 1 */

/* Section 1.5 */
    .section-1b .container {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .no-action-panel {
        background: linear-gradient(135deg, #172b4d 0%, #172b4d 100%);
        /* box-shadow: 0 16px 40px rgba(2, 6, 23, 0.28); */
    }

    .no-action-content {
        margin: 0 auto;
        max-width: 820px;
        text-align: center;
    }

    .no-action-content h2 {
        font-size: clamp(2.4rem, 4.2vw, 4rem);
        letter-spacing: -0.08rem;
    }

    .no-action-lead {
        color: rgba(255, 255, 255, 0.78);
        font-size: 1.55rem;
        line-height: 1.65;
    }

    .no-action-pill-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin-top: 34px;
    }

    .no-action-pill {
        align-items: center;
        background: rgba(203, 222, 255, 0.1);
        border: 1px solid rgba(203, 222, 255, 0.22);
        border-radius: 999px;
        color: #ffffff;
        display: inline-flex;
        font-size: 1rem;
        font-weight: 600;
        gap: 10px;
        padding: 10px 20px 10px 14px;
    }

    .no-action-pill-icon {
        align-items: center;
        background: rgba(67, 113, 225, 0.55);
        border-radius: 50%;
        color: #e9efff;
        display: inline-flex;
        flex-shrink: 0;
        font-size: 1rem;
        font-weight: 700;
        height: 24px;
        justify-content: center;
        width: 24px;
    }

    @media (max-width: 991px) {

        .no-action-lead {
            font-size: 1.2rem;
            line-height: 1.7;
        }
    }

    @media (max-width: 575px) {
        .section-1b .container {
            padding-top: 56px;
            padding-bottom: 56px;
        }

        .no-action-pill {
            justify-content: center;
            width: 100%;
        }
    }

/* /Section 1.5 */

/* Section 2 */
    .section .container {
        margin: 0 auto;
        padding: 120px 12px;
    }
    @media (min-width: 1200px) {
        .section .container:not(.security-page .section-4 .container) {
            max-width: 1088px;
        }
    }
    .section-2 .card {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(2, 6, 23, 0.08);
        border: 1px solid #e5e7eb;
        padding: 24px;
        transition: all 0.3s ease;
        background: #ffffff;
    }

    .section-2 .card:hover {
        box-shadow: 0 4px 4px rgba(2, 6, 4, 0.12);
        border-color: #d1d5db;
        transform: translateY(-4px);
    }

    .section-2 .card h5 {
        color: #0f1f3d;
        font-size: 1.125rem;
        margin-bottom: 8px;
    }

    .section-2 .card p {
        font-size: 15px;
        margin-bottom: 16px;
    }

    .section-2 .card img {
        border-radius: 8px;
        width: 100%;
        display: block;
    }

    .section-2 .card .bg-light.border.border-primary {
        border-color: var(--bs-border-color) !important;
        border-left-color: var(--bs-primary) !important;
        border-left-width: 4px !important;
    }

    .example-card {

    }

    .badge.exampe-badge {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: #EAF0FF;
        color: #2F6BFF;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
    }
/* /Section 2 */

/* Section 3 */
    .dashboard-page .section-3, .security-page .section-4 {
        background: linear-gradient(135deg, #172b4d 0%, #172b4d 100%);
    }
    .section-3-card, .security-card {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(8px);
        transition: all 280ms ease;
        padding: 32px;
    }

    .section-3 .card {
        border-radius: 12px;
        box-shadow: 4px 4px 20px rgba(2, 6, 23, 0.12);
        border: unset
    }

    .step-team-card {
        background: #f8fafc;
    }

    .step-team-card .feature-img {
        width: 100%;
        max-width: 580px;
        margin: 0 auto;
    }

    .section-3-card .card-icon {
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        padding: 3px 8px 8px 8px;
    }
    .section-3-card:hover, .security-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }
/* /Section 3 */

/* Section 3.5 */
    .section-3-5 {
        background: #ffffff;
        text-align: center;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }
/* /Section 3.5 */

/* Quote banner */
    .quote-banner-section, .section.section-6-5 {
        background: linear-gradient(135deg, #172b4d 0%, #172b4d 100%);
    }

    .quote-banner-section .container {
        padding-top: 88px;
        padding-bottom: 88px;
    }

    .quote-banner {
        color: #ffffff;
        font-size: clamp(1.5rem, 2.2vw, 2rem);
        font-style: italic;
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.7;
        max-width: 920px;
    }

    @media (max-width: 575px) {
        .quote-banner-section .container {
            padding-top: 64px;
            padding-bottom: 64px;
        }

        .quote-banner {
            line-height: 1.6;
        }
    }

/* /Quote banner */

    .section-5 img {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(2, 6, 23, 0.12);
    }
    .section-5 img {
        max-width: 894px;
        width: 80%;
        margin: 0 auto;
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(2, 6, 23, 0.12);
    }

/* Section 6: Substantiation */
   .section-6 img {
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(2, 6, 23, 0.12);
    }
   
    .section-6-5 ul li {
        padding: 10px 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
        font-size: 16px;
        color: #E6ECFA;
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    .section-6-5 ul li:last-child {
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .section-6-5 ul li .tick {
        color: #7FA3FF;
        font-weight: 700;
    }

    .construction-card {
        border-radius: 12px;
        background-color: rgba(0, 0, 0, 0.04);
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
    }

    .section-8 p {
        color:#dbeafe;
    }

    .section-9 h1 {
        font-size: 48px;
    }

/* Footer Styles */
    .footer {
        border-top: 1px solid #e5e7eb;
    }
    .footer .footer-brand {
        max-width: 350px;
    }
    .footer a {
        transition: color 0.2s ease;
    }

    .footer a:hover {
        color: #2f6bff !important;
    }




/* Security Page */

.security-page .section-hero {
    background: linear-gradient(135deg, #172b4d 0%, #172b4d 100%);
    margin-top: 62px;
}

.security-page .section-1, .about-page .section-1, .faq-page .section-1, .privacy-policy-page .section-1 {
    padding-top: 100px;
}


.protect-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 105, 227, 0.1);
    border-radius: 8px;
    border-radius: 8px;
}


.security-card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.security-card h3 {
    color: white;
    font-size: 1.25rem;
    line-height: 1.5;
}

.security-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.security-card ul li {
    font-size: 0.875rem;
    line-height: 1.6;
}


/* About page */
@media (min-width: 1200px) {
    .about-page .section.section-1 .container{
        max-width: 768px!important;
    }
}

.about-page .section-1 blockquote {
    border-left: 4px solid rgb(130 168 225 / 30%)!important;
}


.security-page h1, .about-page h1, .faq-page h1 {
    font-size: 3.5rem;
    letter-spacing: -.1rem;
}


.privacy-policy-page .section-1 .container {
    max-width: 736px!important;
    margin: 0 auto;
}