/* =========================================================
   WHAT WE DO HERO
   REFINED RESPONSIVE
   PRESERVES DESKTOP COMPOSITION
   1199px AND BELOW
========================================================= */

@media (max-width: 1199px) {

    /* =====================================================
       SECTION
    ===================================================== */

    .featured-products.dw-ready-websites-section {
        position: relative !important;

        padding-top: 74px !important;
        padding-bottom: 76px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 56px) !important;
        max-width: 1120px !important;

        margin: 0 auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN GRID

       Keep the same desktop idea:
       CONTENT | VISUAL
    ===================================================== */

    .dw-portfolio-hero-wrapper {
        display: grid !important;

        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(440px, 1.08fr) !important;

        align-items: center !important;

        column-gap: 42px !important;

        width: 100% !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LEFT CONTENT
    ===================================================== */

    .dw-portfolio-hero-content {
        width: 100% !important;
        max-width: 560px !important;

        min-width: 0 !important;

        margin: 0 !important;

        text-align: left !important;
    }


    /* Eyebrow */
    .dw-portfolio-subtitle {
        justify-content: flex-start !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        text-align: left !important;
    }


    /* Blue line */
    .dw-portfolio-hero-content
    .dw-global-section-title-line {
        margin-left: 0 !important;
        margin-right: auto !important;
    }


    /* =====================================================
       TITLE
    ===================================================== */

    .dw-portfolio-hero-heading {
        width: 100% !important;
        max-width: 560px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: clamp(43px, 4.3vw, 58px) !important;
        line-height: 1.04 !important;

        text-align: left !important;
    }


    .dw-portfolio-hero-heading span {
        display: block !important;
    }


    /* =====================================================
       PARAGRAPH
    ===================================================== */

    .dw-portfolio-hero-content > p {
        width: 100% !important;
        max-width: 540px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 16px !important;
        line-height: 1.7 !important;

        text-align: left !important;
    }


    /* =====================================================
       CTAs
    ===================================================== */

    .dw-portfolio-hero-actions {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

        width: 100% !important;

        margin-top: 28px !important;
    }


    .dw-portfolio-primary-btn,
    .dw-portfolio-secondary-btn {
        width: auto !important;

        min-width: 0 !important;

        padding-left: 22px !important;
        padding-right: 22px !important;

        white-space: nowrap !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       STATS
    ===================================================== */

    .dw-portfolio-stats {
        width: 100% !important;
        max-width: 540px !important;

        margin: 34px 0 0 !important;

        overflow: hidden !important;
    }


    .dw-portfolio-stat-card {
        min-height: 130px !important;

        padding: 20px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       RIGHT VISUAL
       Keep it as ONE designed composition
    ===================================================== */

    .dw-portfolio-hero-visual {
        position: relative !important;

        width: 100% !important;
        max-width: 570px !important;

        height: 520px !important;
        min-height: 520px !important;

        margin: 0 auto !important;

        overflow: visible !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


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

    .dw-device-main {
        position: absolute !important;

        left: 50% !important;
        bottom: 5px !important;

        width: 500px !important;
        max-width: 88% !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;

        z-index: 3 !important;
    }


    .dw-device-main img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }


    /* =====================================================
       ROCKET
    ===================================================== */

    .dw-portfolio-rocket {
        position: absolute !important;

        top: 55px !important;
        right: 0 !important;

        width: 112px !important;
        max-width: 20% !important;

        margin: 0 !important;

        z-index: 5 !important;
    }


    .dw-portfolio-rocket img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }


    /* =====================================================
       FLOATING CARD 01
    ===================================================== */

    .dw-portfolio-floating-card.dw-card-one {
        position: absolute !important;

        top: 62px !important;
        left: 0 !important;

        right: auto !important;
        bottom: auto !important;

        width: auto !important;
        max-width: 190px !important;

        z-index: 6 !important;
    }


    /* =====================================================
       FLOATING CARD 02
    ===================================================== */

    .dw-portfolio-floating-card.dw-card-two {
        position: absolute !important;

        right: 0 !important;
        bottom: 52px !important;

        left: auto !important;
        top: auto !important;

        width: auto !important;
        max-width: 185px !important;

        z-index: 6 !important;
    }


    .dw-portfolio-floating-card {
        padding: 14px 17px !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       ORBIT
    ===================================================== */

    .dw-portfolio-hero-orbit {
        position: absolute !important;

        top: 50% !important;
        left: 50% !important;

        width: 520px !important;
        height: 520px !important;

        max-width: 94% !important;

        transform: translate(-50%, -50%) !important;

        opacity: 0.55 !important;
    }

}


/* =========================================================
   1024px AND BELOW
   Still two columns, but tighter
========================================================= */

@media (max-width: 1024px) {

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 48px) !important;
        max-width: 960px !important;
    }


    .dw-portfolio-hero-wrapper {
        grid-template-columns:
            minmax(0, 0.95fr)
            minmax(400px, 1.05fr) !important;

        column-gap: 30px !important;
    }


    .dw-portfolio-hero-heading {
        font-size: clamp(40px, 4.4vw, 49px) !important;
    }


    .dw-portfolio-hero-content > p {
        font-size: 15px !important;
    }


    .dw-portfolio-primary-btn,
    .dw-portfolio-secondary-btn {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }


    .dw-portfolio-hero-visual {
        max-width: 500px !important;

        height: 470px !important;
        min-height: 470px !important;
    }


    .dw-device-main {
        width: 440px !important;
    }


    .dw-portfolio-rocket {
        width: 96px !important;

        top: 50px !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        top: 50px !important;

        max-width: 165px !important;
    }


    .dw-portfolio-floating-card.dw-card-two {
        bottom: 44px !important;

        max-width: 160px !important;
    }


    .dw-portfolio-hero-orbit {
        width: 460px !important;
        height: 460px !important;
    }

}

/* =========================================================
   WHAT WE DO HERO
   NEW PREMIUM MOBILE/TABLET COMPOSITION
   899px AND BELOW
========================================================= */

@media (max-width: 899px) {

    /* =====================================================
       SECTION
    ===================================================== */

    .featured-products.dw-ready-websites-section {
        position: relative !important;

        padding-top: 68px !important;
        padding-bottom: 74px !important;

        overflow: hidden !important;
    }


    /* =====================================================
       CONTAINER
    ===================================================== */

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 44px) !important;
        max-width: 760px !important;

        margin: 0 auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN STRUCTURE
    ===================================================== */

    .dw-portfolio-hero-wrapper {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0 !important;

        position: relative !important;
    }


    /*
       Allows us to reorder the content pieces without
       changing HTML.
    */

    .dw-portfolio-hero-content {
        display: contents !important;
    }


    /* =====================================================
       01 — EYEBROW
    ===================================================== */

    .dw-portfolio-subtitle {
        order: 1 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: max-content !important;
        max-width: 100% !important;

        margin: 0 auto 12px !important;

        text-align: center !important;
    }


    /* =====================================================
       02 — TITLE LINE
    ===================================================== */

    .dw-portfolio-hero-content
    .dw-global-section-title-line {
        order: 2 !important;

        display: block !important;

        margin: 0 auto 20px !important;
    }


    /* =====================================================
       03 — TITLE
    ===================================================== */

    .dw-portfolio-hero-heading {
        order: 3 !important;

        width: 100% !important;
        max-width: 690px !important;

        margin: 0 auto 20px !important;

        font-size: clamp(40px, 6vw, 52px) !important;
        line-height: 1.05 !important;

        text-align: center !important;
    }


    .dw-portfolio-hero-heading span {
        display: block !important;
    }


    /* =====================================================
       04 — INTRO COPY
    ===================================================== */

    .dw-portfolio-hero-content > p {
        order: 4 !important;

        width: 100% !important;
        max-width: 640px !important;

        margin: 0 auto 34px !important;

        font-size: 16px !important;
        line-height: 1.7 !important;

        text-align: center !important;
    }


    /* =====================================================
       05 — VISUAL SHOWCASE

       The visual becomes part of the hero instead of
       looking like another independent section.
    ===================================================== */

    .dw-portfolio-hero-visual {
        order: 5 !important;

        position: relative !important;

        width: 100% !important;
        max-width: 680px !important;

        height: 410px !important;
        min-height: 410px !important;

        margin: 0 auto 30px !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* subtle inner glow */
    .dw-portfolio-hero-visual::before {
        content: "" !important;

        position: absolute !important;

        left: 50% !important;
        bottom: -150px !important;

        width: 520px !important;
        height: 420px !important;

        transform: translateX(-50%) !important;

        border-radius: 50% !important;

        background:
            radial-gradient(
                circle,
                rgba(45, 128, 183, 0.13),
                transparent 67%
            ) !important;

        pointer-events: none !important;

        z-index: 0 !important;
    }


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

    .dw-device-main {
        position: absolute !important;

        left: 50% !important;
        bottom: -25px !important;

        width: 486px !important;
        max-width: 82% !important;

        margin: 0 !important;

        transform: translateX(-50%) !important;

        z-index: 3 !important;
    }


    .dw-device-main img {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;

        object-fit: contain !important;
    }


    /* =====================================================
       ROCKET
    ===================================================== */

    .dw-portfolio-rocket {
        position: absolute !important;

        top: 42px !important;
        right: 5% !important;

        width: 105px !important;
        max-width: 17% !important;

        margin: 0 !important;

        transform: rotate(3deg) !important;

        z-index: 6 !important;
    }


    .dw-portfolio-rocket img {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        object-fit: contain !important;

        filter:
            drop-shadow(
                0 16px 24px rgba(45, 128, 183, 0.18)
            ) !important;
    }


    /* =====================================================
       FLOATING CARDS
    ===================================================== */

    .dw-portfolio-floating-card {
        position: absolute !important;

        display: flex !important;
        align-items: center !important;

        gap: 10px !important;

        width: auto !important;
        min-width: 0 !important;

        padding: 12px 15px !important;

        border-radius: 15px !important;

        box-sizing: border-box !important;

        z-index: 7 !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        top: 36px !important;
        left: 24px !important;

        right: auto !important;
        bottom: auto !important;

        max-width: 180px !important;
    }


    .dw-portfolio-floating-card.dw-card-two {
        right: 24px !important;
        bottom: 28px !important;

        top: auto !important;
        left: auto !important;

        max-width: 175px !important;
    }


    /* =====================================================
       ORBIT
    ===================================================== */

    .dw-portfolio-hero-orbit {
        position: absolute !important;

        top: 52% !important;
        left: 50% !important;

        width: 480px !important;
        height: 480px !important;

        max-width: 76% !important;

        transform: translate(-50%, -50%) !important;

        opacity: 0.42 !important;

        pointer-events: none !important;
    }


    /* =====================================================
       06 — CTA
       Now directly below the visual.
    ===================================================== */

    .dw-portfolio-hero-actions {
        order: 6 !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 12px !important;

        width: 100% !important;
        max-width: 620px !important;

        margin: 0 auto !important;
    }


    .dw-portfolio-primary-btn,
    .dw-portfolio-secondary-btn {
        width: auto !important;
        min-width: 210px !important;

        justify-content: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       07 — STATS
    ===================================================== */

    .dw-portfolio-stats {
        order: 7 !important;

        width: 100% !important;
        max-width: 650px !important;

        margin: 30px auto 0 !important;

        overflow: hidden !important;
    }


    .dw-portfolio-stat-card {
        min-height: 118px !important;

        padding: 18px !important;

        border-radius: 18px !important;

        box-sizing: border-box !important;
    }

}


/* =========================================================
   767px AND BELOW
========================================================= */

@media (max-width: 767px) {

    .featured-products.dw-ready-websites-section {
        padding-top: 62px !important;
        padding-bottom: 66px !important;
    }


    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 34px) !important;
        max-width: 620px !important;
    }


    .dw-portfolio-hero-heading {
        max-width: 590px !important;

        font-size: clamp(36px, 7.3vw, 46px) !important;
    }


    .dw-portfolio-hero-content > p {
        max-width: 560px !important;

        margin-bottom: 30px !important;
    }


    /* =====================================================
       VISUAL
    ===================================================== */

    .dw-portfolio-hero-visual {
        max-width: 590px !important;

        height: 360px !important;
        min-height: 360px !important;

        margin-bottom: 26px !important;

        border-radius: 27px !important;
    }


    .dw-device-main {
        width: 430px !important;
        max-width: 86% !important;

        bottom: -30px !important;
    }


    .dw-portfolio-rocket {
        width: 88px !important;

        top: 34px !important;
        right: 4% !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        top: 26px !important;
        left: 17px !important;

        max-width: 155px !important;
    }


    .dw-portfolio-floating-card.dw-card-two {
        right: 17px !important;
        bottom: 20px !important;

        max-width: 150px !important;
    }


    .dw-portfolio-hero-orbit {
        width: 400px !important;
        height: 400px !important;
    }

    .dw-webpage-process-section .dw-webpage-main-image {
    left: -74px;
    position: relative;
    z-index: 2;
    width: 82%;
    max-width: 560px;
    margin: 0 auto;
    animation: dwPortfolioFloat 7s ease-in-out infinite;
}

}

@media (max-width: 592px) {

.dw-webpage-process-section .dw-webpage-main-image {
    left: -67px;
    position: relative;
    z-index: 2;
    width: 82%;
    max-width: 560px;
    margin: 0 auto;
    animation: dwPortfolioFloat 7s ease-in-out infinite;
}

}
/* =========================================================
   575px AND BELOW
========================================================= */

@media (max-width: 575px) {

        .dw-webpage-float-plan {
        top: 267px;
        right: 0;
    }

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 28px) !important;
    }


    .dw-portfolio-hero-heading {
        font-size: clamp(32px, 8.4vw, 40px) !important;
    }


    .dw-portfolio-hero-content > p {
        font-size: 15px !important;
    }


    /* =====================================================
       VISUAL
    ===================================================== */

    .dw-portfolio-hero-visual {
        height: 310px !important;
        min-height: 310px !important;

        border-radius: 23px !important;
    }


    .dw-device-main {
        width: 360px !important;
        max-width: 91% !important;

        bottom: -22px !important;
    }


    .dw-portfolio-rocket {
        width: 72px !important;

        top: 27px !important;
        right: 3% !important;
    }


    .dw-portfolio-floating-card {
        padding: 9px 11px !important;

        gap: 7px !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        top: 18px !important;
        left: 12px !important;

        max-width: 140px !important;
    }


    .dw-portfolio-floating-card.dw-card-two {
        right: 12px !important;
        bottom: 15px !important;

        max-width: 138px !important;
    }


    /* =====================================================
       CTAs STACK
    ===================================================== */

    .dw-portfolio-hero-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        max-width: 390px !important;

        gap: 10px !important;
    }


    .dw-portfolio-primary-btn,
    .dw-portfolio-secondary-btn {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        justify-content: center !important;
    }


    .dw-portfolio-stats {
        margin-top: 24px !important;
    }

}


@media (max-width: 426px) {
.dw-webpage-process-section .dw-webpage-main-image {
    left: -40px;
    position: relative;
    z-index: 2;
    width: 82%;
    max-width: 560px;
    margin: 0 auto;
    animation: dwPortfolioFloat 7s ease-in-out infinite;
}
}
/* =========================================================
   420px AND BELOW
========================================================= */

@media (max-width: 420px) {

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 22px) !important;
    }


    .dw-portfolio-hero-heading {
        font-size: clamp(30px, 9vw, 37px) !important;
    }


    .dw-portfolio-hero-visual {
        height: 275px !important;
        min-height: 275px !important;

        border-radius: 20px !important;
    }


    .dw-device-main {
        width: 340px !important;
        max-width: 94% !important;

        bottom: -16px !important;
    }


    .dw-portfolio-rocket {
        width: 61px !important;

        top: 23px !important;
        right: 3% !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        top: 14px !important;
        left: 9px !important;

        max-width: 128px !important;
    }


    /*
       At this width the second floating card creates
       unnecessary visual noise.
    */

    .dw-portfolio-floating-card.dw-card-two {
        display: none !important;
    }


    .dw-portfolio-hero-orbit {
        width: 300px !important;
        height: 300px !important;

        opacity: 0.30 !important;
    }

}

@media (max-width: 374px) {
    .dw-webpage-float-plan {
        top: 237px;
        right: 0;
    }
}

/* =========================================================
   337px AND BELOW
========================================================= */

@media (max-width: 337px) {

    .featured-products.dw-ready-websites-section > .auto-container {
        width: calc(100% - 18px) !important;
    }


    .dw-portfolio-hero-heading {
        font-size: clamp(28px, 9.4vw, 34px) !important;
    }


    .dw-portfolio-hero-visual {
        height: 245px !important;
        min-height: 245px !important;
    }


    .dw-device-main {
        width: 300px !important;
        max-width: 96% !important;
    }


    .dw-portfolio-rocket {
        width: 53px !important;
    }


    .dw-portfolio-floating-card.dw-card-one {
        max-width: 116px !important;

        padding: 7px 9px !important;
    }

}

/* =========================================================
   HOW WE START SECTION
   RESPONSIVE ORDER FIX
   990px AND BELOW
========================================================= */

@media (max-width: 991px) {

    /* =====================================================
       MAIN SECTION
    ===================================================== */

    .dw-portfolio-direction-section {
        position: relative !important;
        overflow: hidden !important;
    }


    .dw-portfolio-direction-section > .auto-container {
        width: calc(100% - 44px) !important;
        max-width: 900px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MAIN ORDER

       1. What We Look At First
       2. Rocket
       3. The Plan
    ===================================================== */

    .dw-portfolio-direction-wrapper {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 42px !important;
    }


    .dw-portfolio-direction-left {
        order: 1 !important;
    }


    .dw-portfolio-direction-image {
        order: 2 !important;
    }


    .dw-portfolio-direction-right {
        order: 3 !important;
    }


    /* =====================================================
       LEFT BLOCK

       Kicker + line MUST stay above the three cards.
    ===================================================== */

    .dw-portfolio-direction-left {
        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        align-items: stretch !important;

        column-gap: 16px !important;
        row-gap: 16px !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       01 — WHAT WE LOOK AT FIRST
    ===================================================== */

    .dw-portfolio-direction-left > .dw-direction-kicker {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;

        order: 1 !important;

        display: inline-flex !important;
        align-items: center !important;

        width: max-content !important;
        max-width: 100% !important;

        margin: 0 0 8px !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
    }


    /* =====================================================
       02 — BLUE LINE
    ===================================================== */

    .dw-portfolio-direction-left >
    .dw-global-section-title-line {
        grid-column: 1 / -1 !important;

        order: 2 !important;

        display: block !important;

        margin:
            0
            auto
            12px
            0 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;
    }


    /* =====================================================
       03 — SERVICES / MARKET / PROOF
    ===================================================== */

    .dw-portfolio-direction-left >
    .dw-direction-mini-card {
        order: 3 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 100% !important;
        min-height: 190px !important;

        margin: 0 !important;

        padding: 24px 20px !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    .dw-direction-mini-card p {
        margin-bottom: 0 !important;
    }


    /* =====================================================
       ROCKET VISUAL
    ===================================================== */

    .dw-portfolio-direction-image {
        width: 100% !important;
        max-width: 680px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .dw-direction-rocket-stage {
        position: relative !important;

        width: 100% !important;
        max-width: 620px !important;

        min-height: 420px !important;

        margin: 0 auto !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       THE PLAN
    ===================================================== */

    .dw-portfolio-direction-right {
        width: 100% !important;
        max-width: 720px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .dw-portfolio-direction-right
    .dw-direction-subtitle {
        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .dw-portfolio-direction-right >
    .dw-global-section-title-line {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .dw-portfolio-direction-right h3 {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .dw-portfolio-direction-right > p {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    .dw-direction-output {
        width: 100% !important;
        max-width: 600px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* =========================================================
   767px AND BELOW
   STACK THE 3 MINI CARDS
========================================================= */

@media (max-width: 767px) {

    .dw-portfolio-direction-section > .auto-container {
        width: calc(100% - 34px) !important;
        max-width: 620px !important;
    }


    .dw-portfolio-direction-wrapper {
        gap: 34px !important;
    }


    /* ---------------------------------------------
       Kicker remains FIRST
    --------------------------------------------- */

    .dw-portfolio-direction-left {
        grid-template-columns: 1fr !important;

        gap: 14px !important;
    }


    .dw-portfolio-direction-left >
    .dw-direction-kicker,
    .dw-portfolio-direction-left >
    .dw-global-section-title-line {
        grid-column: 1 !important;
    }


    /* ---------------------------------------------
       Cards
    --------------------------------------------- */

    .dw-portfolio-direction-left >
    .dw-direction-mini-card {
        width: 100% !important;
        max-width: 560px !important;

        min-height: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding: 22px 20px !important;
    }


    /* ---------------------------------------------
       Rocket
    --------------------------------------------- */

    .dw-portfolio-direction-image {
        max-width: 560px !important;
    }


    .dw-direction-rocket-stage {
        max-width: 520px !important;

        min-height: 370px !important;
    }

}


/* =========================================================
   575px AND BELOW
========================================================= */

@media (max-width: 575px) {

    .dw-portfolio-direction-section > .auto-container {
        width: calc(100% - 28px) !important;
    }


    .dw-portfolio-direction-wrapper {
        gap: 30px !important;
    }


    .dw-portfolio-direction-left >
    .dw-direction-mini-card {
        padding: 20px 18px !important;

        border-radius: 20px !important;
    }


    .dw-direction-rocket-stage {
        min-height: 330px !important;
    }

}


/* =========================================================
   420px AND BELOW
========================================================= */

@media (max-width: 420px) {

    .dw-portfolio-direction-section > .auto-container {
        width: calc(100% - 22px) !important;
    }


    .dw-portfolio-direction-left >
    .dw-direction-mini-card {
        padding: 18px 16px !important;
    }


    .dw-direction-rocket-stage {
        min-height: 290px !important;
    }

}