/* =========================================================
   PXM SOFTWARE SOLUTIONS
   Section Styles

   File: pxm-sections.css

   Purpose:
   Homepage-specific section treatments and visual rhythm.
   ========================================================= */


/* =========================================================
   Hero Section
   ========================================================= */

.pxm-home-hero {
    position: relative;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    color: #ffffff;
    overflow: hidden;
    background: radial-gradient( circle at 76% 42%, rgba(37, 99, 235, 0.24), transparent 28% ), radial-gradient( circle at 88% 68%, rgba(59, 130, 246, 0.10), transparent 22% ), linear-gradient( 135deg, var(--pxm-navy-deep) 0%, var(--pxm-navy) 56%, #0a2d63 100% );
}


    /* =========================================================
   Hero Navigation
   ========================================================= */

    .pxm-home-hero .pxm-navbar {
        flex-shrink: 0;
    }


    /* =========================================================
   Hero Content Layout

   Important:
   The Bootstrap row inside the hero must occupy the full
   available width. Without this, the columns can collapse
   and cause excessive headline wrapping.
   ========================================================= */

    .pxm-home-hero .pxm-hero-content {
        flex: 1;
        display: flex;
        align-items: flex-start;
        width: 100%;
        padding-top: 2.5rem;
        padding-bottom: 5rem;
    }


        .pxm-home-hero .pxm-hero-content > .row {
            flex: 1 1 100%;
            width: 100%;
        }


    /* =========================================================
   Hero Heading
   ========================================================= */

    .pxm-home-hero .pxm-hero-title {
        max-width: 760px;
        margin-bottom: 1.5rem;
        color: #ffffff;
        font-size: clamp( 3.25rem, 3.8vw, 4.5rem );
        line-height: 1.06;
        letter-spacing: -0.045em;
    }


        .pxm-home-hero .pxm-hero-title span {
            display: block;
            color: var(--pxm-blue-bright);
        }


/* =========================================================
   Hero Decorative Light
   ========================================================= */

.pxm-home-hero-light {
    position: absolute;
    right: -150px;
    top: 120px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient( circle, rgba(37, 99, 235, 0.22), rgba(37, 99, 235, 0.04) 50%, transparent 72% );
    filter: blur(15px);
}


/* =========================================================
   Transformation Section
   Light Blue
   ========================================================= */

.pxm-transformation-section {
    position: relative;
    background: linear-gradient( 180deg, #eef6ff 0%, #e7f2ff 100% );
}


    .pxm-transformation-section::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: min(1200px, 90%);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient( 90deg, transparent, rgba(37, 99, 235, 0.14), transparent );
    }


/* =========================================================
   Services Section
   White
   ========================================================= */

.pxm-services-section {
    position: relative;
    background: var(--pxm-white);
}


.pxm-services-grid {
    margin-top: 1rem;
}


/* =========================================================
   Featured Work Section
   Light Blue
   ========================================================= */

.pxm-featured-section {
    position: relative;
    background: linear-gradient( 180deg, #edf6ff 0%, #e6f1ff 100% );
}


    .pxm-featured-section::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -160px;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        pointer-events: none;
        background: radial-gradient( circle, rgba(37, 99, 235, 0.12), transparent 70% );
    }


/* =========================================================
   Featured Work Content
   ========================================================= */

.pxm-featured-copy {
    position: relative;
    z-index: 2;
}


    .pxm-featured-copy h2 {
        margin-bottom: 1.4rem;
    }


    .pxm-featured-copy p {
        max-width: 560px;
        margin-bottom: 1.75rem;
        font-size: 1rem;
    }


/* =========================================================
   Insights Section
   White
   ========================================================= */

.pxm-insights-section {
    background: var(--pxm-white);
}


.pxm-insights-header {
    margin-bottom: 3rem;
}


    .pxm-insights-header h2 {
        margin-bottom: 1rem;
    }


    .pxm-insights-header p {
        max-width: 650px;
    }


/* =========================================================
   Final CTA Section
   Dark Blue
   ========================================================= */

.pxm-final-cta {
    position: relative;
    color: #ffffff;
    background: radial-gradient( circle at 15% 50%, rgba(37, 99, 235, 0.20), transparent 30% ), radial-gradient( circle at 85% 35%, rgba(59, 130, 246, 0.12), transparent 25% ), linear-gradient( 135deg, #020b1c 0%, #06162f 55%, #0a2d63 100% );
}


    .pxm-final-cta h2 {
        max-width: 650px;
        margin-bottom: 1.5rem;
        color: #ffffff;
    }


        .pxm-final-cta h2 span {
            color: var(--pxm-blue-bright);
        }


    .pxm-final-cta p {
        max-width: 610px;
        color: rgba(226, 236, 250, 0.72);
        font-size: 1rem;
    }

/* =========================================================
   Final CTA
   Light Blue Variant
   ========================================================= */

.pxm-final-cta-light {
    color: var(--pxm-text-primary);
    background: linear-gradient( 180deg, #eef6ff 0%, #e5f1ff 100% );
}


    .pxm-final-cta-light::before {
        opacity: 0.03;
        background-image: linear-gradient( rgba(11, 31, 58, 0.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(11, 31, 58, 0.08) 1px, transparent 1px );
    }


    .pxm-final-cta-light .pxm-eyebrow {
        color: var(--pxm-blue);
    }


    .pxm-final-cta-light h2 {
        color: var(--pxm-text-primary);
    }


        .pxm-final-cta-light h2 span {
            color: var(--pxm-blue);
        }


    .pxm-final-cta-light p {
        color: var(--pxm-text-secondary);
    }

    /* =========================================================
   Final CTA Decorative Grid
   ========================================================= */

    .pxm-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0.04;
        pointer-events: none;
        background-image: linear-gradient( rgba(255, 255, 255, 0.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px );
        background-size: 70px 70px;
    }


/* =========================================================
   Section Transition Treatment

   Gives each section a clean visual break without adding
   decorative separators everywhere.
   ========================================================= */

.pxm-section-transition {
    position: relative;
}


    .pxm-section-transition::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: min(1200px, 90%);
        height: 1px;
        transform: translateX(-50%);
        background: linear-gradient( 90deg, transparent, rgba(11, 31, 58, 0.08), transparent );
    }


/* =========================================================
   Inner Page Content Sections

   These can be reused on About, Services, Case Studies,
   and other internal pages.
   ========================================================= */

.pxm-page-section {
    position: relative;
    padding-top: 6rem;
    padding-bottom: 6rem;
}


.pxm-page-section-white {
    background: var(--pxm-white);
}


.pxm-page-section-light {
    background: var(--pxm-light-blue);
}


/* =========================================================
   Content Intro Section
   ========================================================= */

.pxm-content-intro {
    max-width: 840px;
}


    .pxm-content-intro h2 {
        margin-bottom: 1.5rem;
    }


    .pxm-content-intro p {
        font-size: 1.05rem;
    }


/* =========================================================
   Trust / Experience Band
   ========================================================= */

.pxm-trust-band {
    position: relative;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-top: 1px solid var(--pxm-border);
    border-bottom: 1px solid var(--pxm-border);
    background: #ffffff;
}


.pxm-trust-band-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}


.pxm-trust-item {
    text-align: center;
}


    .pxm-trust-item strong {
        display: block;
        margin-bottom: 0.4rem;
        color: var(--pxm-text-primary);
        font-size: 1rem;
        font-weight: 800;
    }


    .pxm-trust-item span {
        color: var(--pxm-text-muted);
        font-size: 0.82rem;
    }


/* =========================================================
   Content Callout
   ========================================================= */

.pxm-content-callout {
    padding: 2rem;
    border-left: 4px solid var(--pxm-blue);
    border-radius: 0 var(--pxm-radius-md) var(--pxm-radius-md) 0;
    background: var(--pxm-light-blue);
}


    .pxm-content-callout h3 {
        margin-bottom: 0.8rem;
        font-size: 1.15rem;
    }


    .pxm-content-callout p {
        margin-bottom: 0;
    }


/* =========================================================
   Page Closing CTA

   Reusable on internal pages.
   ========================================================= */

.pxm-page-cta {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 5rem;
    color: #ffffff;
    text-align: center;
    background: linear-gradient( 135deg, var(--pxm-navy-deep), var(--pxm-navy-light) );
}


    .pxm-page-cta h2 {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.25rem;
        color: #ffffff;
    }


    .pxm-page-cta p {
        max-width: 660px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
        color: rgba(226, 236, 250, 0.72);
    }

/* =========================================================
   Main Hero
   ========================================================= */

.pxm-hero {
    position: relative;
    min-height: 760px;
    overflow: hidden;
    background: #031226;
}


/* =========================================================
   Hero Background Photograph
   ========================================================= */

.pxm-hero-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 72%;
    background-image: url("/images/pxmss-office.png");
    background-repeat: no-repeat;
    background-position: 58% center;
    background-size: cover;
    z-index: 1;
}


    /* =========================================================
   Left-To-Right Image Fade

   This is what makes the photograph disappear seamlessly
   into the dark hero background.
   ========================================================= */

    .pxm-hero-background::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, #031226 0%, #031226 5%, rgba(3, 18, 38, 0.98) 12%, rgba(3, 18, 38, 0.92) 20%, rgba(3, 18, 38, 0.72) 30%, rgba(3, 18, 38, 0.38) 42%, rgba(3, 18, 38, 0.10) 55%, transparent 68% );
        z-index: 2;
    }


    /* =========================================================
   Subtle Overall Darkening

   Keeps the photograph consistent with the PXM navy hero.
   ========================================================= */

    .pxm-hero-background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 180deg, rgba(2, 12, 27, 0.34) 0%, rgba(2, 12, 27, 0.26) 45%, rgba(2, 12, 27, 0.48) 100% );
        z-index: 3;
        pointer-events: none;
    }


/* =========================================================
   Hero Content
   ========================================================= */

.pxm-hero-content {
    position: relative;
    z-index: 5;
    padding-top: 72px;
    padding-bottom: 70px;
}


/* =========================================================
   Hero Copy
   ========================================================= */

.pxm-hero-copy {
    position: relative;
    max-width: 660px;
}


/* =========================================================
   Hero Eyebrow
   ========================================================= */

.pxm-hero .pxm-eyebrow {
    margin-bottom: 22px;
    color: #2f7cff;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}


/* =========================================================
   Hero Heading
   ========================================================= */

.pxm-hero-title {
    margin: 0;
    color: #ffffff;
    font-size: clamp( 3.2rem, 5vw, 5.2rem );
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
}


    .pxm-hero-title span {
        display: block;
        margin-top: 8px;
        color: #2f7cff;
    }


/* =========================================================
   Hero Description
   ========================================================= */

.pxm-hero-description {
    max-width: 620px;
    margin-top: 30px;
    margin-bottom: 0;
    color: rgba( 255, 255, 255, 0.82 );
    font-size: 1.12rem;
    line-height: 1.75;
}


/* =========================================================
   Hero Actions
   ========================================================= */

.pxm-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
}


/* =========================================================
   Hero Proof / Trust Signals
   ========================================================= */

.pxm-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 650px;
    margin-top: 58px;
}


.pxm-proof-item {
    position: relative;
    padding-right: 24px;
}


    .pxm-proof-item + .pxm-proof-item {
        padding-left: 24px;
        border-left: 1px solid rgba( 255, 255, 255, 0.16 );
    }


    .pxm-proof-item strong {
        display: block;
        margin-bottom: 7px;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
    }


    .pxm-proof-item span {
        display: block;
        max-width: 150px;
        color: rgba( 255, 255, 255, 0.58 );
        font-size: 0.78rem;
        line-height: 1.45;
    }


/* =========================================================
   Services Showcase
   ========================================================= */

.pxm-services-showcase {
    position: relative;
    padding: 7rem 0;
    overflow: hidden;
    background: #f7f9fc;
}


/* =========================================================
   Services Header
   ========================================================= */

.pxm-services-header {
    max-width: 820px;
    margin-bottom: 3.5rem;
}


    .pxm-services-header p {
        max-width: 760px;
        margin-bottom: 0;
        color: var(--pxm-text-secondary);
        line-height: 1.8;
    }


/* =========================================================
   Service Panel
   ========================================================= */

.pxm-service-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    overflow: hidden;
    padding: 2.75rem;
    border-radius: 24px;
    border: 1px solid rgba(15, 45, 85, 0.08);
    isolation: isolate;
    transition: transform var(--pxm-transition), box-shadow var(--pxm-transition), border-color var(--pxm-transition);
}


    .pxm-service-panel:hover {
        transform: translateY(-5px);
        box-shadow: 0 26px 60px rgba(15, 45, 85, 0.12);
    }


/* =========================================================
   Panel Variants
   ========================================================= */

.pxm-service-panel-light {
    color: var(--pxm-text-primary);
    background: linear-gradient( 145deg, #ffffff 0%, #eef5ff 100% );
}


.pxm-service-panel-dark {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient( 145deg, #06162f 0%, #0d2e5f 100% );
}


.pxm-service-panel-blue {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.10);
    background: linear-gradient( 145deg, #164fa8 0%, #2d6ee8 100% );
}


/* =========================================================
   Text Color Overrides
   ========================================================= */

.pxm-service-panel h3,
.pxm-service-panel h4,
.pxm-service-panel p,
.pxm-service-panel-link,
.pxm-service-number,
.pxm-service-panel-icon {
    position: relative;
    z-index: 3;
}


.pxm-service-panel-light h3,
.pxm-service-panel-light h4 {
    color: var(--pxm-text-primary);
}


.pxm-service-panel-light p {
    color: var(--pxm-text-secondary);
}


.pxm-service-panel-dark h3,
.pxm-service-panel-dark h4,
.pxm-service-panel-blue h3,
.pxm-service-panel-blue h4 {
    color: #ffffff;
}


.pxm-service-panel-dark p,
.pxm-service-panel-blue p {
    color: rgba(255, 255, 255, 0.82);
}


/* =========================================================
   Service Number
   ========================================================= */

.pxm-service-number {
    position: absolute;
    top: 2rem;
    right: 2rem;
    color: rgba(15, 45, 85, 0.30);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}


.pxm-service-panel-dark
.pxm-service-number,
.pxm-service-panel-blue
.pxm-service-number {
    color: rgba(255, 255, 255, 0.55);
}


/* =========================================================
   Service Icon
   ========================================================= */

.pxm-service-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 2.25rem;
    border-radius: 16px;
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: var(--pxm-blue);
    background: rgba(37, 99, 235, 0.08);
    font-size: 1.25rem;
}


.pxm-service-panel-dark
.pxm-service-panel-icon,
.pxm-service-panel-blue
.pxm-service-panel-icon {
    border-color: rgba(255, 255, 255, 0.20);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
}


/* =========================================================
   Service Panel Typography
   ========================================================= */

.pxm-service-panel h3 {
    margin-bottom: 0.8rem;
    font-size: clamp( 1.5rem, 2vw, 2rem );
    font-weight: 800;
    letter-spacing: -0.025em;
}


.pxm-service-panel h4 {
    max-width: 500px;
    margin-bottom: 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
}


.pxm-service-panel p {
    max-width: 520px;
    margin-bottom: 2rem;
    font-size: 0.92rem;
    line-height: 1.75;
}


/* =========================================================
   Service Link
   ========================================================= */

.pxm-service-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: flex-start;
    margin-top: auto;
    color: var(--pxm-blue);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}


.pxm-service-panel-dark
.pxm-service-panel-link,
.pxm-service-panel-blue
.pxm-service-panel-link {
    color: #ffffff;
}


.pxm-service-panel-link span {
    transition: transform var(--pxm-transition-fast);
}


.pxm-service-panel-link:hover span {
    transform: translateX(5px);
}


/* =========================================================
   Decorative Background Layer
   ========================================================= */

.pxm-service-panel::before,
.pxm-service-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 1;
}


/* =========================================================
   Light Panels
   Large Orbital Rings
   ========================================================= */

.pxm-service-panel-light::before {
    width: 420px;
    height: 420px;
    right: -120px;
    bottom: -190px;
    border: 2px solid rgba(37, 99, 235, 0.11);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(37, 99, 235, 0.045), 0 0 0 105px rgba(37, 99, 235, 0.025);
}


.pxm-service-panel-light::after {
    width: 165px;
    height: 165px;
    right: 55px;
    bottom: 55px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    border-radius: 28px;
    transform: rotate(30deg);
    background: rgba(37, 99, 235, 0.025);
}


/* =========================================================
   Dark Panels
   Technical Grid
   ========================================================= */

.pxm-service-panel-dark::before {
    width: 430px;
    height: 330px;
    right: -90px;
    bottom: -90px;
    opacity: 0.42;
    background-image: linear-gradient( rgba(96, 153, 255, 0.24) 1px, transparent 1px ), linear-gradient( 90deg, rgba(96, 153, 255, 0.24) 1px, transparent 1px );
    background-size: 38px 38px;
    transform: rotate(-10deg);
}


.pxm-service-panel-dark::after {
    width: 280px;
    height: 280px;
    right: 20px;
    bottom: 5px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(41, 113, 255, 0.34) 0%, rgba(41, 113, 255, 0.11) 45%, transparent 72% );
}


/* =========================================================
   Blue Panels
   Concentric Rings
   ========================================================= */

.pxm-service-panel-blue::before {
    width: 420px;
    height: 420px;
    right: -110px;
    bottom: -170px;
    border: 2px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    box-shadow: 0 0 0 48px rgba(255, 255, 255, 0.055), 0 0 0 105px rgba(255, 255, 255, 0.028);
}


.pxm-service-panel-blue::after {
    width: 210px;
    height: 210px;
    right: 45px;
    bottom: 40px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 255, 255, 0.07) 0%, transparent 70% );
}


/* =========================================================
   Business Automation
   Stronger Flow Pattern
   ========================================================= */

.pxm-service-panel-automation::after {
    width: 300px;
    height: 220px;
    right: 35px;
    bottom: 45px;
    border-radius: 0;
    background: radial-gradient( circle at 12% 50%, rgba(85, 153, 255, 0.85) 0 5px, transparent 6px ), radial-gradient( circle at 48% 25%, rgba(85, 153, 255, 0.72) 0 5px, transparent 6px ), radial-gradient( circle at 80% 55%, rgba(85, 153, 255, 0.70) 0 5px, transparent 6px ), linear-gradient( 25deg, transparent 46%, rgba(85, 153, 255, 0.28) 47%, rgba(85, 153, 255, 0.28) 48%, transparent 49% );
    opacity: 0.75;
}


/* =========================================================
   AI Integration
   Stronger Orbital Graphic
   ========================================================= */

.pxm-service-panel-ai::after {
    width: 280px;
    height: 280px;
    right: 45px;
    bottom: 25px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    box-shadow: inset 0 0 50px rgba(255, 255, 255, 0.045), 0 0 0 45px rgba(255, 255, 255, 0.035);
}


/* =========================================================
   Website Design
   Browser Frame
   ========================================================= */

.pxm-service-panel-web::after {
    width: 275px;
    height: 175px;
    right: 40px;
    bottom: 42px;
    border: 2px solid rgba(37, 99, 235, 0.13);
    border-radius: 20px;
    transform: rotate(12deg);
    background: linear-gradient( 180deg, rgba(37, 99, 235, 0.09) 0 32px, rgba(255, 255, 255, 0.16) 32px 100% );
}


/* =========================================================
   Software Maintenance
   Gear / Ring Effect
   ========================================================= */

.pxm-service-panel-maintenance::after {
    width: 250px;
    height: 250px;
    right: 45px;
    bottom: 20px;
    border: 24px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 30px rgba(255, 255, 255, 0.025);
}


/* =========================================================
   Consulting
   Node Network
   ========================================================= */

.pxm-service-panel-consulting::after {
    width: 300px;
    height: 220px;
    right: 35px;
    bottom: 35px;
    border: 0;
    border-radius: 0;
    background: radial-gradient( circle at 10% 70%, rgba(255, 255, 255, 0.72) 0 5px, transparent 6px ), radial-gradient( circle at 36% 28%, rgba(255, 255, 255, 0.55) 0 5px, transparent 6px ), radial-gradient( circle at 64% 58%, rgba(255, 255, 255, 0.58) 0 5px, transparent 6px ), radial-gradient( circle at 90% 20%, rgba(255, 255, 255, 0.52) 0 5px, transparent 6px ), linear-gradient( 25deg, transparent 46%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.16) 48%, transparent 49% );
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 991.98px) {

    .pxm-services-showcase {
        padding: 5rem 0;
    }


    .pxm-service-panel {
        min-height: 390px;
        padding: 2.25rem;
    }
}


@media (max-width: 575.98px) {

    .pxm-service-panel {
        min-height: 360px;
        padding: 2rem;
    }


    .pxm-service-number {
        top: 1.5rem;
        right: 1.5rem;
    }


    .pxm-service-panel::before,
    .pxm-service-panel::after {
        opacity: 0.65;
    }
}

/* =========================================================
   Large Desktop
   ========================================================= */

@media (min-width: 1400px) {

    .pxm-hero {
        min-height: 790px;
    }


    .pxm-hero-background {
        width: 73%;
    }


    .pxm-hero-content {
        padding-top: 86px;
        padding-bottom: 80px;
    }
}


/* =========================================================
   Medium Desktop
   ========================================================= */

@media (max-width: 1199.98px) {

    .pxm-hero-background {
        width: 68%;
        background-position: 58% center;
    }


        .pxm-hero-background::before {
            background: linear-gradient( 90deg, #031226 0%, rgba(3, 18, 38, 0.98) 15%, rgba(3, 18, 38, 0.82) 30%, rgba(3, 18, 38, 0.42) 50%, transparent 70% );
        }
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .pxm-hero {
        min-height: auto;
    }


    .pxm-hero-background {
        width: 100%;
        opacity: 0.38;
        background-position: 65% center;
    }


        .pxm-hero-background::before {
            background: linear-gradient( 90deg, rgba(3, 18, 38, 0.98) 0%, rgba(3, 18, 38, 0.88) 45%, rgba(3, 18, 38, 0.55) 100% );
        }


    .pxm-hero-content {
        padding-top: 70px;
        padding-bottom: 70px;
    }


    .pxm-hero-copy {
        max-width: 680px;
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    .pxm-hero-background {
        opacity: 0.25;
        background-position: 62% center;
    }


    .pxm-hero-content {
        padding-top: 55px;
        padding-bottom: 55px;
    }


    .pxm-hero-title {
        font-size: clamp( 2.65rem, 12vw, 4rem );
    }


    .pxm-hero-description {
        font-size: 1rem;
        line-height: 1.65;
    }


    .pxm-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }


        .pxm-hero-actions .btn {
            width: 100%;
        }


    .pxm-hero-proof {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 42px;
    }


    .pxm-proof-item {
        padding-right: 0;
    }


        .pxm-proof-item + .pxm-proof-item {
            padding-top: 22px;
            padding-left: 0;
            border-top: 1px solid rgba( 255, 255, 255, 0.14 );
            border-left: 0;
        }


        .pxm-proof-item span {
            max-width: none;
        }
}

/* =========================================================
   Large Desktop Hero Refinements
   ========================================================= */

@media (min-width: 1400px) {

    .pxm-home-hero .pxm-hero-title {
        font-size: 4.5rem;
    }
}


/* =========================================================
   Tablet Hero Refinements
   ========================================================= */

@media (max-width: 991.98px) {

    .pxm-home-hero .pxm-hero-content {
        align-items: flex-start;
    }


    .pxm-home-hero .pxm-hero-title {
        max-width: 780px;
        font-size: clamp( 3rem, 7vw, 4.25rem );
    }
}


/* =========================================================
   Mobile Hero Refinements
   ========================================================= */

@media (max-width: 767.98px) {

    .pxm-home-hero .pxm-hero-title {
        font-size: clamp( 2.65rem, 11vw, 3.5rem );
        line-height: 1.08;
    }
}