/* =========================================================
   FORCENEXA WEBSITE DEVELOPMENT PAGE
   Fully scoped to .fn-website-page
========================================================= */

.fn-website-page {
    --fn-primary: #0d6efd;
    --fn-primary-dark: #0755c9;
    --fn-primary-soft: #eef5ff;
    --fn-dark: #092c59;
    --fn-text: #182b49;
    --fn-muted: #667085;
    --fn-border: #e5eaf1;
    --fn-light: #f7faff;
    --fn-white: #ffffff;
    --fn-success: #198754;
    --fn-shadow: 0 18px 50px rgba(9, 44, 89, 0.10);
    --fn-radius: 22px;
    color: var(--fn-text);
    overflow: hidden;
}

    .fn-website-page a {
        text-decoration: none;
    }

    .fn-website-page p {
        line-height: 1.75;
    }


    /* =========================================================
   HERO
========================================================= */

    .fn-website-page .fn-web-hero {
        position: relative;
        padding: 12px 0 15px;
        background: radial-gradient(circle at 85% 25%, rgba(13, 110, 253, .12), transparent 32%), linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #f3f8ff 100%);
    }

        .fn-website-page .fn-web-hero h1 {
            max-width: 700px;
            margin: 20px 0 25px;
            color: var(--fn-dark);
            font-size: 52px;
            line-height: 1.10;
            font-weight: 800;
            letter-spacing: -1.5px;
        }

            .fn-website-page .fn-web-hero h1 span {
                color: var(--fn-primary);
                display: inline;
            }

    .fn-website-page .fn-web-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 15px;
        border: 1px solid rgba(13, 110, 253, .16);
        border-radius: 999px;
        background: rgba(13, 110, 253, .07);
        color: var(--fn-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .8px;
    }

    .fn-website-page .fn-web-hero-lead {
        max-width: 650px;
        margin-bottom: 17px;
        color: #344054;
        font-size: 19px;
        font-weight: 500;
    }

    .fn-website-page .fn-web-hero-text {
        max-width: 650px;
        margin-bottom: 25px;
        color: var(--fn-muted);
        font-size: 15px;
    }

    .fn-website-page .fn-web-check-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 25px;
        margin-bottom: 30px;
    }

        .fn-website-page .fn-web-check-grid div {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #475467;
            font-size: 13px;
            font-weight: 600;
        }

        .fn-website-page .fn-web-check-grid i {
            color: var(--fn-primary);
            font-size: 15px;
        }

    .fn-website-page .fn-web-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 22px;
    }

    .fn-website-page .fn-web-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 12px 21px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        transition: all .25s ease;
    }

    .fn-website-page .fn-web-btn-primary {
        color: #fff;
        background: var(--fn-primary);
        box-shadow: 0 10px 24px rgba(13, 110, 253, .22);
    }

        .fn-website-page .fn-web-btn-primary:hover {
            color: #fff;
            background: var(--fn-primary-dark);
            transform: translateY(-2px);
        }

    .fn-website-page .fn-web-btn-outline {
        color: var(--fn-primary);
        border: 1px solid rgba(13, 110, 253, .35);
        background: #fff;
    }

        .fn-website-page .fn-web-btn-outline:hover {
            color: #fff;
            background: var(--fn-primary);
            transform: translateY(-2px);
        }

    .fn-website-page .fn-web-btn-light {
        color: var(--fn-primary);
        background: #fff;
    }

    .fn-website-page .fn-web-btn-white {
        color: var(--fn-primary);
        background: #fff;
    }

        .fn-website-page .fn-web-btn-white:hover {
            color: var(--fn-primary-dark);
            transform: translateY(-2px);
        }

    .fn-website-page .fn-web-trust-line {
        color: #667085;
        font-size: 12px;
    }

        .fn-website-page .fn-web-trust-line i {
            margin-right: 7px;
            color: var(--fn-primary);
        }

    .fn-website-page .fn-web-hero-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 440px;
    }

    .fn-website-page .fn-web-visual-glow {
        position: absolute;
        width: 370px;
        height: 370px;
        border-radius: 50%;
        background: rgba(13, 110, 253, .09);
        filter: blur(8px);
    }

    .fn-website-page .fn-web-hero-image {
        position: relative;
        z-index: 1;
        max-width: 100%;
        max-height: 440px;
        object-fit: contain;
        filter: drop-shadow(0 22px 35px rgba(9, 44, 89, .12));
    }


    /* =========================================================
   VALUE STRIP
========================================================= */

    .fn-website-page .fn-web-value-strip {
        border-top: 1px solid var(--fn-border);
        border-bottom: 1px solid var(--fn-border);
        background: #fff;
    }

    .fn-website-page .fn-web-value-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 92px;
        padding: 15px;
        border-right: 1px solid var(--fn-border);
    }

        .fn-website-page .fn-web-value-item strong,
        .fn-website-page .fn-web-value-item small {
            display: block;
        }

        .fn-website-page .fn-web-value-item strong {
            color: var(--fn-dark);
            font-size: 14px;
        }

        .fn-website-page .fn-web-value-item small {
            margin-top: 3px;
            color: var(--fn-muted);
            font-size: 11px;
        }

    .fn-website-page .fn-web-value-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 43px;
        height: 43px;
        flex: 0 0 43px;
        border-radius: 13px;
        color: var(--fn-primary);
        background: var(--fn-primary-soft);
    }


    /* =========================================================
   COMMON SECTIONS
========================================================= */

    .fn-website-page .fn-web-section {
        padding: 15px 0;
    }

    .fn-website-page .fn-web-section-light {
        background: var(--fn-light);
    }

    .fn-website-page .fn-web-section-label {
        display: inline-block;
        margin-bottom: 10px;
        color: var(--fn-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .fn-website-page .fn-web-section h2 {
        max-width: 720px;
        margin-bottom: 22px;
        color: var(--fn-dark);
        font-size: 38px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -.7px;
    }

    .fn-website-page .fn-web-muted {
        max-width: 680px;
        color: var(--fn-muted);
        font-size: 15px;
    }

    .fn-website-page .fn-web-heading-center {
        max-width: 800px;
        margin: 0 auto 48px;
        text-align: center;
    }

        .fn-website-page .fn-web-heading-center h2 {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .fn-website-page .fn-web-heading-center p {
            max-width: 720px;
            margin: 0 auto;
            color: var(--fn-muted);
            font-size: 15px;
        }


    /* =========================================================
   BENEFIT LIST
========================================================= */

    .fn-website-page .fn-web-benefit-list {
        margin-top: 28px;
        margin-bottom: 25px;
    }

    .fn-website-page .fn-web-benefit {
        display: flex;
        gap: 14px;
        margin-bottom: 20px;
    }

        .fn-website-page .fn-web-benefit > i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            flex: 0 0 24px;
            margin-top: 2px;
            border-radius: 50%;
            color: #fff;
            background: var(--fn-success);
            font-size: 11px;
        }

        .fn-website-page .fn-web-benefit strong {
            display: block;
            margin-bottom: 3px;
            color: var(--fn-dark);
            font-size: 14px;
        }

        .fn-website-page .fn-web-benefit p {
            margin: 0;
            color: var(--fn-muted);
            font-size: 13px;
        }


    /* =========================================================
   GROWTH CARD
========================================================= */

    .fn-website-page .fn-web-growth-card {
        padding: 38px;
        border: 1px solid rgba(13, 110, 253, .12);
        border-radius: var(--fn-radius);
        background: #fff;
        box-shadow: var(--fn-shadow);
    }

    .fn-website-page .fn-web-mini-badge {
        display: inline-block;
        margin-bottom: 15px;
        padding: 7px 11px;
        border-radius: 999px;
        color: var(--fn-primary);
        background: var(--fn-primary-soft);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .7px;
    }

    .fn-website-page .fn-web-growth-card h3 {
        margin-bottom: 13px;
        color: var(--fn-dark);
        font-size: 25px;
        line-height: 1.3;
        font-weight: 800;
    }

    .fn-website-page .fn-web-growth-card > p {
        margin-bottom: 25px;
        color: var(--fn-muted);
        font-size: 14px;
    }

    .fn-website-page .fn-web-journey-item {
        display: flex;
        align-items: center;
        gap: 14px;
    }

        .fn-website-page .fn-web-journey-item > span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 39px;
            height: 39px;
            flex: 0 0 39px;
            border-radius: 50%;
            color: #fff;
            background: var(--fn-primary);
            font-size: 11px;
            font-weight: 800;
        }

        .fn-website-page .fn-web-journey-item strong,
        .fn-website-page .fn-web-journey-item small {
            display: block;
        }

        .fn-website-page .fn-web-journey-item strong {
            color: var(--fn-dark);
            font-size: 14px;
        }

        .fn-website-page .fn-web-journey-item small {
            margin-top: 2px;
            color: var(--fn-muted);
            font-size: 11px;
        }

    .fn-website-page .fn-web-journey-line {
        width: 1px;
        height: 18px;
        margin: 5px 0 5px 19px;
        background: #cbd8e8;
    }

    .fn-website-page .fn-web-journey-final > span {
        background: var(--fn-success);
    }


    /* =========================================================
   SOLUTION CARDS
========================================================= */

    .fn-website-page .fn-web-solution-card {
        height: 100%;
        padding: 30px;
        border: 1px solid var(--fn-border);
        border-radius: var(--fn-radius);
        background: #fff;
        box-shadow: 0 8px 28px rgba(9, 44, 89, .05);
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

        .fn-website-page .fn-web-solution-card:hover {
            transform: translateY(-5px);
            border-color: rgba(13, 110, 253, .25);
            box-shadow: var(--fn-shadow);
        }

    .fn-website-page .fn-web-solution-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        margin-bottom: 20px;
        border-radius: 16px;
        color: var(--fn-primary);
        background: var(--fn-primary-soft);
        font-size: 22px;
    }

    .fn-website-page .fn-web-solution-card h3 {
        margin-bottom: 12px;
        color: var(--fn-dark);
        font-size: 19px;
        font-weight: 750;
    }

    .fn-website-page .fn-web-solution-card p {
        min-height: 82px;
        margin-bottom: 18px;
        color: var(--fn-muted);
        font-size: 13px;
    }

    .fn-website-page .fn-web-solution-card a {
        color: var(--fn-primary);
        font-size: 12px;
        font-weight: 750;
    }

        .fn-website-page .fn-web-solution-card a i {
            margin-left: 5px;
            transition: transform .2s ease;
        }

        .fn-website-page .fn-web-solution-card a:hover i {
            transform: translateX(4px);
        }


    /* =========================================================
   FEATURE CARDS
========================================================= */

    .fn-website-page .fn-web-feature-card {
        height: 100%;
        padding: 28px;
        border: 1px solid var(--fn-border);
        border-radius: 18px;
        background: #fff;
        transition: all .25s ease;
    }

        .fn-website-page .fn-web-feature-card:hover {
            transform: translateY(-4px);
            border-color: rgba(13, 110, 253, .25);
            box-shadow: 0 14px 35px rgba(9, 44, 89, .08);
        }

        .fn-website-page .fn-web-feature-card > i {
            margin-bottom: 18px;
            color: var(--fn-primary);
            font-size: 27px;
        }

        .fn-website-page .fn-web-feature-card h3 {
            margin-bottom: 10px;
            color: var(--fn-dark);
            font-size: 17px;
            font-weight: 750;
        }

        .fn-website-page .fn-web-feature-card p {
            margin: 0;
            color: var(--fn-muted);
            font-size: 13px;
        }


    /* =========================================================
   MID CTA
========================================================= */

    .fn-website-page .fn-web-mid-cta {
        padding: 25px 0;
        background: #fff;
    }

    .fn-website-page .fn-web-mid-cta-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 35px;
        padding: 35px 42px;
        border-radius: var(--fn-radius);
        color: #fff;
        background: linear-gradient(135deg, #0d6efd, #0755c9);
        box-shadow: 0 18px 45px rgba(13, 110, 253, .20);
    }

        .fn-website-page .fn-web-mid-cta-box > div:first-child {
            max-width: 700px;
        }

        .fn-website-page .fn-web-mid-cta-box span {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1px;
            opacity: .85;
        }

        .fn-website-page .fn-web-mid-cta-box h2 {
            margin: 8px 0 9px;
            color: #fff;
            font-size: 27px;
            line-height: 1.25;
        }

        .fn-website-page .fn-web-mid-cta-box p {
            margin: 0;
            color: rgba(255, 255, 255, .80);
            font-size: 13px;
        }


    /* =========================================================
   DECISION CARDS
========================================================= */

    .fn-website-page .fn-web-decision-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .fn-website-page .fn-web-decision-card {
        position: relative;
        height: 100%;
        padding: 27px;
        border: 1px solid var(--fn-border);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 25px rgba(9, 44, 89, .04);
    }

        .fn-website-page .fn-web-decision-card > span {
            position: absolute;
            top: 18px;
            right: 20px;
            color: #98a2b3;
            font-size: 10px;
            font-weight: 800;
        }

        .fn-website-page .fn-web-decision-card > i {
            margin-bottom: 16px;
            color: var(--fn-primary);
            font-size: 25px;
        }

        .fn-website-page .fn-web-decision-card h3 {
            margin-bottom: 7px;
            color: var(--fn-dark);
            font-size: 17px;
        }

        .fn-website-page .fn-web-decision-card p {
            margin: 0;
            color: var(--fn-muted);
            font-size: 12px;
        }

    .fn-website-page .fn-web-decision-success {
        border-color: rgba(25, 135, 84, .22);
    }

        .fn-website-page .fn-web-decision-success > i {
            color: var(--fn-success);
        }


    /* =========================================================
   INDUSTRIES
========================================================= */

    .fn-website-page .fn-web-industry-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 10px;
        min-height: 125px;
        padding: 20px;
        border: 1px solid var(--fn-border);
        border-radius: 18px;
        background: #fff;
        text-align: center;
        transition: all .25s ease;
    }

        .fn-website-page .fn-web-industry-card:hover {
            transform: translateY(-3px);
            border-color: rgba(13, 110, 253, .28);
            box-shadow: 0 12px 28px rgba(9, 44, 89, .07);
        }

        .fn-website-page .fn-web-industry-card i {
            color: var(--fn-primary);
            font-size: 24px;
        }

        .fn-website-page .fn-web-industry-card strong {
            color: var(--fn-dark);
            font-size: 12px;
        }


    /* =========================================================
   TECHNOLOGY
========================================================= */

    .fn-website-page .fn-web-tech-card {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 160px;
        padding: 20px;
        border: 1px solid var(--fn-border);
        border-radius: 18px;
        background: #fff;
        text-align: center;
    }

        .fn-website-page .fn-web-tech-card i {
            margin-bottom: 13px;
            color: var(--fn-primary);
            font-size: 40px;
        }

        .fn-website-page .fn-web-tech-card strong {
            color: var(--fn-dark);
            font-size: 15px;
        }

        .fn-website-page .fn-web-tech-card small {
            margin-top: 5px;
            color: var(--fn-muted);
            font-size: 11px;
        }


    /* =========================================================
   PROCESS
========================================================= */

    .fn-website-page .fn-web-process {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 18px;
    }

    .fn-website-page .fn-web-process-item {
        position: relative;
        height: 100%;
        padding: 30px 22px;
        border: 1px solid var(--fn-border);
        border-radius: 18px;
        background: #fff;
        text-align: center;
    }

    .fn-website-page .fn-web-process-number {
        position: absolute;
        top: 12px;
        right: 15px;
        color: #a0aec0;
        font-size: 10px;
        font-weight: 800;
    }

    .fn-website-page .fn-web-process-item > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 52px;
        height: 52px;
        margin: 0 auto 17px;
        border-radius: 15px;
        color: var(--fn-primary);
        background: var(--fn-primary-soft);
        font-size: 21px;
    }

    .fn-website-page .fn-web-process-item h3 {
        margin-bottom: 9px;
        color: var(--fn-dark);
        font-size: 16px;
    }

    .fn-website-page .fn-web-process-item p {
        margin: 0;
        color: var(--fn-muted);
        font-size: 12px;
    }


    /* =========================================================
   WHY FORCENEXA
========================================================= */

    .fn-website-page .fn-web-why-list {
        margin: 25px 0 30px;
    }

        .fn-website-page .fn-web-why-list div {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
            color: #475467;
            font-size: 13px;
            font-weight: 600;
        }

        .fn-website-page .fn-web-why-list i {
            color: var(--fn-success);
        }

    .fn-website-page .fn-web-feature-image {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 25px;
    }

        .fn-website-page .fn-web-feature-image img {
            max-width: 100%;
            max-height: 430px;
            object-fit: contain;
        }


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

    .fn-website-page .fn-web-faq {
        max-width: 850px;
        margin: 0 auto;
    }

        .fn-website-page .fn-web-faq details {
            margin-bottom: 12px;
            border: 1px solid var(--fn-border);
            border-radius: 15px;
            background: #fff;
            overflow: hidden;
        }

        .fn-website-page .fn-web-faq summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            padding: 19px 22px;
            color: var(--fn-dark);
            cursor: pointer;
            list-style: none;
            font-size: 14px;
            font-weight: 700;
        }

            .fn-website-page .fn-web-faq summary::-webkit-details-marker {
                display: none;
            }

            .fn-website-page .fn-web-faq summary i {
                color: var(--fn-primary);
                font-size: 12px;
                transition: transform .2s ease;
            }

        .fn-website-page .fn-web-faq details[open] summary i {
            transform: rotate(45deg);
        }

        .fn-website-page .fn-web-faq details p {
            margin: 0;
            padding: 0 22px 20px;
            color: var(--fn-muted);
            font-size: 13px;
        }


    /* =========================================================
   FINAL CTA
========================================================= */

    .fn-website-page .fn-web-final-cta {
        padding: 7px 0;
        background: #fff;
    }

    .fn-website-page .fn-web-final-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 40px;
        padding: 48px;
        border-radius: 25px;
        color: #fff;
        background: radial-gradient(circle at 90% 20%, rgba(255,255,255,.12), transparent 25%), linear-gradient(135deg, #0d6efd, #063d95);
        box-shadow: 0 25px 60px rgba(9, 44, 89, .18);
    }

    .fn-website-page .fn-web-final-content {
        max-width: 760px;
    }

        .fn-website-page .fn-web-final-content > span {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1px;
            opacity: .8;
        }

        .fn-website-page .fn-web-final-content h2 {
            margin: 10px 0 14px;
            color: #fff;
            font-size: 34px;
            line-height: 1.2;
            font-weight: 800;
        }

        .fn-website-page .fn-web-final-content p {
            margin-bottom: 18px;
            color: rgba(255,255,255,.82);
            font-size: 14px;
        }

    .fn-website-page .fn-web-contact-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 7px;
        color: #fff;
        font-size: 13px;
    }

        .fn-website-page .fn-web-contact-line i {
            margin-right: 3px;
        }

        .fn-website-page .fn-web-contact-line strong {
            font-size: 15px;
        }

    .fn-website-page .fn-web-final-action {
        min-width: 235px;
        text-align: center;
    }

        .fn-website-page .fn-web-final-action .fn-web-btn {
            width: 100%;
        }

        .fn-website-page .fn-web-final-action small {
            display: block;
            margin-top: 9px;
            color: rgba(255,255,255,.7);
            font-size: 10px;
        }


    /* =========================================================
   RELATED SERVICES
========================================================= */

    .fn-website-page .fn-web-related {
        padding: 10px 0;
        border-top: 1px solid var(--fn-border);
        background: var(--fn-light);
    }

    .fn-website-page .fn-web-related-heading {
        margin-bottom: 25px;
        text-align: center;
    }

        .fn-website-page .fn-web-related-heading > span {
            color: var(--fn-primary);
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .fn-website-page .fn-web-related-heading h2 {
            margin: 7px 0;
            color: var(--fn-dark);
            font-size: 24px;
            font-weight: 800;
        }

        .fn-website-page .fn-web-related-heading p {
            margin: 0 auto;
            max-width: 680px;
            color: var(--fn-muted);
            font-size: 12px;
        }

    .fn-website-page .fn-web-related-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 9px;
    }

        .fn-website-page .fn-web-related-links a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            border: 1px solid rgba(13, 110, 253, .25);
            border-radius: 999px;
            color: var(--fn-primary);
            background: #fff;
            font-size: 11px;
            font-weight: 700;
            transition: all .2s ease;
        }

            .fn-website-page .fn-web-related-links a:hover {
                color: #fff;
                border-color: var(--fn-primary);
                background: var(--fn-primary);
            }

        .fn-website-page .fn-web-related-links .fn-web-related-primary {
            color: #fff;
            border-color: var(--fn-primary);
            background: var(--fn-primary);
        }


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .fn-website-page .fn-web-hero h1 {
        font-size: 46px;
    }

    .fn-website-page .fn-web-section h2 {
        font-size: 34px;
    }

    .fn-website-page .fn-web-process {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 991px) {

    .fn-website-page .fn-web-hero {
        padding: 65px 0;
    }

        .fn-website-page .fn-web-hero h1 {
            font-size: 40px;
        }

    .fn-website-page .fn-web-hero-visual {
        min-height: 350px;
    }

    .fn-website-page .fn-web-section {
        padding: 65px 0;
    }

        .fn-website-page .fn-web-section h2 {
            font-size: 31px;
        }

    .fn-website-page .fn-web-mid-cta-box,
    .fn-website-page .fn-web-final-box {
        padding: 35px;
    }

    .fn-website-page .fn-web-final-content h2 {
        font-size: 30px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .fn-website-page .fn-web-hero {
        padding: 48px 0 45px;
    }

    .fn-website-page .fn-web-eyebrow {
        font-size: 9px;
        padding: 7px 11px;
    }

    .fn-website-page .fn-web-hero h1 {
        margin: 16px 0 18px;
        font-size: 31px;
        letter-spacing: -.7px;
    }

    .fn-website-page .fn-web-hero-lead {
        font-size: 16px;
    }

    .fn-website-page .fn-web-hero-text {
        font-size: 13px;
    }

    .fn-website-page .fn-web-check-grid {
        gap: 10px;
    }

        .fn-website-page .fn-web-check-grid div {
            font-size: 11px;
        }

    .fn-website-page .fn-web-hero-actions {
        gap: 8px;
    }

    .fn-website-page .fn-web-btn {
        min-height: 41px;
        padding: 10px 16px;
        font-size: 11px;
    }

    .fn-website-page .fn-web-hero-visual {
        min-height: 270px;
    }

    .fn-website-page .fn-web-visual-glow {
        width: 240px;
        height: 240px;
    }

    .fn-website-page .fn-web-hero-image {
        max-height: 280px;
    }

    .fn-website-page .fn-web-value-item {
        min-height: 80px;
        padding: 10px;
        gap: 8px;
    }

        .fn-website-page .fn-web-value-item strong {
            font-size: 11px;
        }

        .fn-website-page .fn-web-value-item small {
            font-size: 9px;
        }

    .fn-website-page .fn-web-value-icon {
        width: 35px;
        height: 35px;
        flex-basis: 35px;
        font-size: 13px;
    }

    .fn-website-page .fn-web-section {
        padding: 52px 0;
    }

    .fn-website-page .fn-web-section-label {
        font-size: 9px;
    }

    .fn-website-page .fn-web-section h2 {
        margin-bottom: 16px;
        font-size: 25px;
    }

    .fn-website-page .fn-web-muted {
        font-size: 13px;
    }

    .fn-website-page .fn-web-heading-center {
        margin-bottom: 32px;
    }

        .fn-website-page .fn-web-heading-center p {
            font-size: 13px;
        }

    .fn-website-page .fn-web-growth-card {
        padding: 25px;
    }

        .fn-website-page .fn-web-growth-card h3 {
            font-size: 21px;
        }

    .fn-website-page .fn-web-solution-card {
        padding: 24px;
    }

        .fn-website-page .fn-web-solution-card h3 {
            font-size: 17px;
        }

        .fn-website-page .fn-web-solution-card p {
            min-height: auto;
        }

    .fn-website-page .fn-web-feature-card {
        padding: 23px;
    }

    .fn-website-page .fn-web-mid-cta-box {
        align-items: flex-start;
        flex-direction: column;
        padding: 28px;
        gap: 20px;
    }

        .fn-website-page .fn-web-mid-cta-box h2 {
            font-size: 22px;
        }

    .fn-website-page .fn-web-decision-grid {
        gap: 10px;
    }

    .fn-website-page .fn-web-decision-card {
        padding: 21px;
    }

        .fn-website-page .fn-web-decision-card h3 {
            font-size: 15px;
        }

    .fn-website-page .fn-web-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fn-website-page .fn-web-final-cta {
        padding: 45px 0;
    }

    .fn-website-page .fn-web-final-box {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
        gap: 25px;
    }

    .fn-website-page .fn-web-final-content h2 {
        font-size: 25px;
    }

    .fn-website-page .fn-web-final-action {
        width: 100%;
        min-width: 0;
    }

    .fn-website-page .fn-web-related {
        padding: 40px 0;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575px) {

    .fn-website-page .fn-web-hero h1 {
        font-size: 27px;
    }

    .fn-website-page .fn-web-hero-lead {
        font-size: 15px;
    }

    .fn-website-page .fn-web-check-grid {
        grid-template-columns: 1fr;
    }

    .fn-website-page .fn-web-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .fn-website-page .fn-web-btn {
        width: 100%;
    }

    .fn-website-page .fn-web-hero-visual {
        min-height: 220px;
    }

    .fn-website-page .fn-web-section h2 {
        font-size: 22px;
    }

    .fn-website-page .fn-web-growth-card {
        padding: 21px;
    }

    .fn-website-page .fn-web-decision-grid {
        grid-template-columns: 1fr;
    }

    .fn-website-page .fn-web-process {
        grid-template-columns: 1fr;
    }

    .fn-website-page .fn-web-tech-card {
        min-height: 135px;
    }

        .fn-website-page .fn-web-tech-card i {
            font-size: 32px;
        }

    .fn-website-page .fn-web-final-content h2 {
        font-size: 22px;
    }

    .fn-website-page .fn-web-related-heading h2 {
        font-size: 20px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .fn-website-page .fn-web-hero {
        padding-top: 40px;
    }

        .fn-website-page .fn-web-hero h1 {
            font-size: 25px;
        }

    .fn-website-page .fn-web-section h2 {
        font-size: 20px;
    }

    .fn-website-page .fn-web-value-item {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
    }

        .fn-website-page .fn-web-value-item small {
            display: none;
        }

    .fn-website-page .fn-web-final-box {
        padding: 25px 20px;
    }
}