.elementor-17 .elementor-element.elementor-element-973f9fc{--display:flex;}.elementor-17 .elementor-element.elementor-element-30aa744{margin:-78px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-17 .elementor-element.elementor-element-1147d99{--display:flex;}.elementor-17 .elementor-element.elementor-element-1d42910{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-17 .elementor-element.elementor-element-1cdf6e3{--display:flex;}.elementor-17 .elementor-element.elementor-element-779958d{margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-17 .elementor-element.elementor-element-d07d881{--display:flex;}.elementor-17 .elementor-element.elementor-element-7b01c17{margin:-50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-30aa744 *//* =========================================================
   SUDHIRADSPRO
   PREMIUM PERFORMANCE / PORTFOLIO SECTION
   ========================================================= */


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

.sr-performance-section {
    width: 100%;
    padding: 85px 30px;
    background: #ffffff;
    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #111111;
}

.sr-performance-section *,
.sr-performance-section *::before,
.sr-performance-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.sr-performance-wrapper {

    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(470px, 0.92fr)
        minmax(650px, 1.08fr);

    gap: 65px;

    align-items: center;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.sr-performance-left {
    width: 100%;
    max-width: 570px;
}


/* =========================================================
   LABEL
   ========================================================= */

.sr-section-label {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color: #a57f1d;

    font-size: 14px;
    font-weight: 900;

    letter-spacing: 2px;
}

.sr-section-label span {

    width: 55px;
    height: 2px;

    background: #d4af37;

    display: block;
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.sr-performance-title {

    margin: 0;

    font-size: clamp(50px, 4.2vw, 70px);

    line-height: 0.99;

    letter-spacing: -2.8px;

    font-weight: 900;

    color: #111111;
}

.sr-performance-title em {

    font-style: normal;

    color: #d4af37;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.sr-performance-description {

    max-width: 510px;

    margin: 28px 0 34px;

    color: #454545;

    font-size: 17px;

    line-height: 1.65;

    font-weight: 600;
}


/* =========================================================
   METRICS
   ========================================================= */

.sr-metrics-grid {

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}


/* =========================================================
   METRIC
   ========================================================= */

.sr-metric-box {

    min-width: 0;

    padding: 22px 12px 20px;

    text-align: center;

    border-right: 1px solid #dcdcdc;
}

.sr-metric-box:first-child {
    padding-left: 0;
}

.sr-metric-box:last-child {
    padding-right: 0;
    border-right: none;
}


/* =========================================================
   METRIC ICON
   ========================================================= */

.sr-metric-icon {

    width: 29px;
    height: 29px;

    margin: 0 auto 11px;

    color: #d4af37;
}

.sr-metric-icon svg {

    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   METRIC NUMBER
   ========================================================= */

.sr-metric-box strong {

    display: block;

    margin-bottom: 6px;

    font-size: 28px;

    line-height: 1;

    font-weight: 900;

    color: #111111;
}


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

.sr-metric-box b {

    display: block;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 900;

    color: #222222;
}


/* =========================================================
   METRIC SUBTITLE
   ========================================================= */

.sr-metric-box small {

    display: block;

    margin-top: 4px;

    font-size: 9px;

    line-height: 1.3;

    font-weight: 600;

    color: #777777;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.sr-performance-dashboard {

    width: 100%;

    max-width: 720px;

    justify-self: end;

    display: grid;

    grid-template-columns: 58px minmax(0, 1fr);

    background: #ffffff;

    border: 1px solid #d7d7d7;

    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   DASHBOARD SIDEBAR
   ========================================================= */

.sr-dashboard-sidebar {

    background: #111111;

    min-height: 570px;
}


/* =========================================================
   LOGO
   ========================================================= */

.sr-dashboard-logo {

    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #d4af37;

    font-family: Georgia, serif;

    font-size: 21px;

    font-weight: 700;

    border-bottom: 1px solid #292929;
}

.sr-dashboard-logo span:first-child {
    margin-right: -2px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.sr-dashboard-navigation {

    padding-top: 13px;
}

.sr-nav-item {

    width: 100%;
    height: 54px;

    display: flex;

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

    color: #bcbcbc;

    border-left: 3px solid transparent;
}

.sr-nav-item svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.sr-nav-active {

    background: #d4af37;

    color: #111111;

    border-left-color: #ffffff;
}


/* =========================================================
   DASHBOARD CONTENT
   ========================================================= */

.sr-dashboard-content {

    min-width: 0;

    padding: 22px 22px 20px;

    background: #ffffff;
}


/* =========================================================
   DASHBOARD HEADER
   ========================================================= */

.sr-dashboard-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 19px;
}

.sr-dashboard-heading > span {

    display: block;

    margin-bottom: 5px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.2px;

    color: #a27d1e;
}

.sr-dashboard-heading h3 {

    margin: 0;

    font-size: 21px;

    line-height: 1.1;

    font-weight: 900;

    color: #111111;
}


/* =========================================================
   HEADER BUTTONS
   ========================================================= */

.sr-dashboard-actions {

    display: flex;

    gap: 6px;

    justify-content: flex-end;

    flex-wrap: wrap;
}

.sr-dashboard-actions button {

    height: 31px;

    padding: 0 9px;

    border: 1px solid #dedede;

    border-radius: 4px;

    background: #ffffff;

    color: #333333;

    font-family: inherit;

    font-size: 8px;

    font-weight: 800;

    white-space: nowrap;
}

.sr-dashboard-actions button span {

    margin-left: 6px;

    color: #777777;
}

.sr-dashboard-actions .sr-export-button {

    display: flex;

    align-items: center;

    gap: 5px;
}

.sr-export-button svg {

    width: 12px;
    height: 12px;

    fill: none;

    stroke: #b18a24;

    stroke-width: 1.8;
}


/* =========================================================
   KPI
   ========================================================= */

.sr-kpi-container {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top: 1px solid #dedede;

    border-bottom: 1px solid #dedede;

    margin-bottom: 14px;
}

.sr-kpi {

    padding: 13px 12px;

    border-right: 1px solid #dedede;
}

.sr-kpi:last-child {
    border-right: none;
}

.sr-kpi span {

    display: block;

    margin-bottom: 6px;

    color: #6f6f6f;

    font-size: 8px;

    font-weight: 800;
}

.sr-kpi strong {

    display: block;

    margin-bottom: 5px;

    color: #111111;

    font-size: 18px;

    line-height: 1;

    font-weight: 900;
}

.sr-kpi small {

    color: #4d7939;

    font-size: 8px;

    font-weight: 900;
}

.sr-kpi small.sr-negative {
    color: #a64a4a;
}


/* =========================================================
   DASHBOARD GRID
   ========================================================= */

.sr-dashboard-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(205px, 0.75fr);

    gap: 12px;
}


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

.sr-dashboard-card {

    min-width: 0;

    background: #ffffff;

    border: 1px solid #dedede;

    border-radius: 6px;

    overflow: hidden;
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.sr-card-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding: 13px 14px 9px;
}

.sr-card-title-row h4 {

    margin: 0 0 4px;

    color: #111111;

    font-size: 11px;

    font-weight: 900;
}

.sr-card-title-row span {

    color: #777777;

    font-size: 8px;

    font-weight: 700;
}


/* =========================================================
   SMALL BUTTON
   ========================================================= */

.sr-small-button {

    padding: 5px 7px;

    border: 1px solid #dedede;

    border-radius: 3px;

    background: #ffffff;

    color: #444444;

    font-size: 8px;

    font-weight: 800;
}

.sr-small-button span {
    margin-left: 5px;
}


/* =========================================================
   CONVERSION CHART
   ========================================================= */

.sr-conversion-card {

    min-height: 248px;
}

.sr-line-chart {

    display: flex;

    padding: 6px 12px 14px;
}

.sr-chart-y-axis {

    width: 27px;

    height: 155px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #858585;

    font-size: 7px;

    font-weight: 700;
}

.sr-chart-main {

    flex: 1;

    min-width: 0;
}

.sr-chart-main svg {

    width: 100%;

    height: 155px;

    display: block;
}

.sr-chart-main svg line {

    stroke: #eeeeee;

    stroke-width: 1;
}

.sr-chart-main svg polyline {

    fill: none;

    stroke: #d4af37;

    stroke-width: 3.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}

.sr-chart-x-axis {

    display: flex;

    justify-content: space-between;

    padding-top: 6px;

    color: #858585;

    font-size: 7px;

    font-weight: 700;
}


/* =========================================================
   CHANNELS
   ========================================================= */

.sr-channel-card {

    min-height: 248px;
}

.sr-channel-content {

    min-height: 185px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding: 4px 12px 15px;
}


/* =========================================================
   DONUT
   ========================================================= */

.sr-donut-chart {

    width: 105px;

    height: 105px;

    flex: 0 0 105px;

    position: relative;

    border-radius: 50%;

    background:
        conic-gradient(
            #4285f4 0deg 162deg,
            #2875a5 162deg 270deg,
            #d4af37 270deg 324deg,
            #777777 324deg 360deg
        );
}

.sr-donut-chart::after {

    content: "";

    position: absolute;

    width: 67%;
    height: 67%;

    top: 16.5%;
    left: 16.5%;

    border-radius: 50%;

    background: #ffffff;
}

.sr-donut-inner {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

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

    flex-direction: column;
}

.sr-donut-inner strong {

    font-size: 13px;

    font-weight: 900;

    color: #111111;
}

.sr-donut-inner span {

    margin-top: 3px;

    font-size: 7px;

    font-weight: 700;

    color: #777777;
}


/* =========================================================
   CHANNEL LIST
   ========================================================= */

.sr-channel-list {

    min-width: 95px;

    display: flex;

    flex-direction: column;

    gap: 10px;
}

.sr-channel-list div {

    display: grid;

    grid-template-columns: 7px 1fr auto;

    align-items: center;

    gap: 5px;
}

.sr-channel-list span {

    font-size: 8px;

    font-weight: 800;

    color: #555555;
}

.sr-channel-list b {

    font-size: 8px;

    font-weight: 900;

    color: #222222;
}

.sr-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    display: block;
}

.sr-dot-google {
    background: #4285f4;
}

.sr-dot-meta {
    background: #2875a5;
}

.sr-dot-organic {
    background: #d4af37;
}

.sr-dot-other {
    background: #777777;
}


/* =========================================================
   TABLE
   ========================================================= */

.sr-campaign-card {

    min-width: 0;
}

.sr-table-container {

    width: 100%;

    overflow-x: auto;
}

.sr-table-container table {

    width: 100%;

    min-width: 410px;

    border-collapse: collapse;
}

.sr-table-container th {

    padding: 8px 10px;

    background: #fafafa;

    border-top: 1px solid #eeeeee;

    border-bottom: 1px solid #eeeeee;

    text-align: left;

    color: #777777;

    font-size: 7px;

    font-weight: 900;

    text-transform: uppercase;
}

.sr-table-container td {

    padding: 9px 10px;

    border-bottom: 1px solid #eeeeee;

    color: #444444;

    font-size: 8px;

    font-weight: 700;
}

.sr-table-container tbody tr:last-child td {
    border-bottom: none;
}

.sr-table-container td:first-child {

    color: #222222;

    font-weight: 900;
}

.sr-google {

    color: #4285f4 !important;

    font-weight: 900 !important;
}

.sr-meta {

    color: #2875a5 !important;

    font-weight: 900 !important;
}

.sr-roas {

    color: #9a771d !important;

    font-weight: 900 !important;
}


/* =========================================================
   DEVICE
   ========================================================= */

.sr-device-card {

    min-height: 210px;
}

.sr-device-list {

    padding: 9px 14px 16px;
}

.sr-device-item {

    margin-bottom: 14px;
}

.sr-device-item:last-child {
    margin-bottom: 0;
}

.sr-device-item > div:first-child {

    display: flex;

    justify-content: space-between;

    margin-bottom: 6px;
}

.sr-device-item span {

    color: #555555;

    font-size: 8px;

    font-weight: 800;
}

.sr-device-item b {

    color: #222222;

    font-size: 8px;

    font-weight: 900;
}

.sr-device-progress {

    width: 100%;

    height: 7px;

    background: #eeeeee;

    border-radius: 2px;

    overflow: hidden;
}

.sr-device-progress span {

    display: block;

    height: 100%;

    background: #d4af37;

    border-radius: 2px;
}


/* =========================================================
   NO ANIMATION
   ========================================================= */

.sr-performance-section *,
.sr-performance-section *::before,
.sr-performance-section *::after {

    animation: none !important;

    transition: none !important;
}


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

@media (max-width: 1200px) {

    .sr-performance-wrapper {

        grid-template-columns: 1fr;

        max-width: 950px;

        gap: 50px;
    }

    .sr-performance-left {

        max-width: 760px;

        margin: 0 auto;

        text-align: center;
    }

    .sr-section-label {

        justify-content: center;
    }

    .sr-performance-description {

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

    .sr-performance-dashboard {

        justify-self: center;

        max-width: 760px;
    }
}


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

@media (max-width: 850px) {

    .sr-performance-section {

        padding: 65px 20px;
    }

    .sr-performance-wrapper {

        gap: 40px;
    }

    .sr-performance-title {

        font-size: 55px;
    }

    .sr-performance-dashboard {

        grid-template-columns: 52px minmax(0, 1fr);

        max-width: 720px;
    }

    .sr-dashboard-content {

        padding: 18px;
    }

    .sr-dashboard-header {

        flex-direction: column;
    }

    .sr-dashboard-actions {

        justify-content: flex-start;
    }

    .sr-kpi-container {

        grid-template-columns: repeat(2, 1fr);
    }

    .sr-kpi:nth-child(2) {

        border-right: none;
    }

    .sr-kpi:nth-child(-n+2) {

        border-bottom: 1px solid #dedede;
    }

    .sr-dashboard-grid {

        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 600px) {

    .sr-performance-section {

        padding: 50px 15px;
    }

    .sr-performance-title {

        font-size: 43px;

        letter-spacing: -1.7px;
    }

    .sr-performance-description {

        font-size: 15px;

        line-height: 1.6;
    }

    .sr-metrics-grid {

        grid-template-columns: repeat(2, 1fr);
    }

    .sr-metric-box {

        padding: 18px 8px;
    }

    .sr-metric-box:nth-child(2) {

        border-right: none;
    }

    .sr-metric-box:nth-child(-n+2) {

        border-bottom: 1px solid #dcdcdc;
    }

    .sr-metric-box strong {

        font-size: 25px;
    }

    .sr-metric-box b {

        font-size: 11px;
    }

    .sr-metric-box small {

        font-size: 8px;
    }

    .sr-performance-dashboard {

        grid-template-columns: 1fr;

        max-width: 100%;

        border-radius: 10px;
    }

    .sr-dashboard-sidebar {

        min-height: auto;

        height: 54px;

        display: flex;

        flex-direction: row;
    }

    .sr-dashboard-logo {

        width: 58px;

        height: 54px;

        flex: 0 0 58px;

        border-right: 1px solid #292929;

        border-bottom: none;
    }

    .sr-dashboard-navigation {

        flex: 1;

        height: 54px;

        padding: 0;

        display: flex;
    }

    .sr-nav-item {

        height: 54px;

        flex: 1;

        border-left: none;

        border-bottom: 3px solid transparent;
    }

    .sr-nav-active {

        border-left: none;

        border-bottom-color: #ffffff;
    }

    .sr-nav-item:nth-child(n+5) {

        display: none;
    }

    .sr-dashboard-content {

        padding: 16px 12px;
    }

    .sr-dashboard-actions {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .sr-dashboard-actions button {

        width: 100%;
    }

    .sr-dashboard-actions .sr-export-button {

        grid-column: 1 / -1;

        justify-content: center;
    }

    .sr-kpi strong {

        font-size: 17px;
    }

    .sr-kpi span {

        font-size: 8px;
    }

    .sr-channel-content {

        justify-content: flex-start;
    }
}


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

@media (max-width: 400px) {

    .sr-performance-title {

        font-size: 37px;
    }

    .sr-performance-description {

        font-size: 14px;
    }

    .sr-metric-box strong {

        font-size: 23px;
    }

    .sr-metric-box b {

        font-size: 10px;
    }

    .sr-metric-box small {

        font-size: 7px;
    }

    .sr-dashboard-heading h3 {

        font-size: 19px;
    }

    .sr-kpi strong {

        font-size: 15px;
    }

    .sr-kpi {

        padding: 12px 8px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1d42910 *//* ================================================================
   SUDHIRADSPRO
   PREMIUM CASE STUDIES / PORTFOLIO
   HTML + CSS ONLY
   ================================================================ */


/* ================================================================
   FONT
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@500;600;700;800;900&display=swap');


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

.sap-case-studies {

    --sap-black: #080808;
    --sap-black-2: #0d0d0d;

    --sap-white: #ffffff;
    --sap-heading: #ffffff;

    --sap-text: #eeeeee;
    --sap-body: #b7b7b7;
    --sap-muted: #929292;

    --sap-gold: #d4af37;
    --sap-gold-light: #f3d77b;
    --sap-gold-bright: #ffe9a1;

    --sap-border: rgba(212,175,55,0.27);

    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    padding:
        100px 32px 105px;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(212,175,55,0.075),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 22%,
            rgba(212,175,55,0.055),
            transparent 27%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(212,175,55,0.035),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #080808 0%,
            #0b0b0b 50%,
            #080808 100%
        );

    color: var(--sap-white);

    font-family: "Inter", sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}


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

.sap-case-container {

    position: relative;

    z-index: 5;

    width: min(100%, 1780px);

    margin: 0 auto;

}


/* ================================================================
   AMBIENT ORBS
   ================================================================ */

.sap-bg-orb {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    z-index: -4;

    opacity: 0.30;

}


.sap-bg-orb--one {

    width: 420px;
    height: 420px;

    top: 10%;
    left: -220px;

    background:
        rgba(212,175,55,0.11);

    animation:
        sapOrbFloatOne 13s ease-in-out infinite alternate;

}


.sap-bg-orb--two {

    width: 500px;
    height: 500px;

    right: -270px;
    top: 38%;

    background:
        rgba(255,198,66,0.065);

    animation:
        sapOrbFloatTwo 16s ease-in-out infinite alternate;

}


.sap-bg-orb--three {

    width: 360px;
    height: 360px;

    bottom: -180px;
    left: 48%;

    background:
        rgba(212,175,55,0.045);

    animation:
        sapOrbFloatThree 18s ease-in-out infinite alternate;

}


/* ================================================================
   PARTICLES
   ================================================================ */

.sap-particle-field {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -2;

}


.sap-particle-field span {

    position: absolute;

    display: block;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        rgba(243,215,123,0.65);

    box-shadow:
        0 0 8px rgba(212,175,55,0.65),
        0 0 16px rgba(212,175,55,0.2);

    animation:
        sapParticleFloat 9s linear infinite;

}


.sap-particle-field span:nth-child(1) {
    left: 8%;
    top: 19%;
    animation-delay: -2s;
}

.sap-particle-field span:nth-child(2) {
    left: 16%;
    top: 70%;
    animation-delay: -5s;
}

.sap-particle-field span:nth-child(3) {
    left: 27%;
    top: 33%;
    animation-delay: -7s;
}

.sap-particle-field span:nth-child(4) {
    left: 39%;
    top: 82%;
    animation-delay: -1s;
}

.sap-particle-field span:nth-child(5) {
    left: 48%;
    top: 15%;
    animation-delay: -4s;
}

.sap-particle-field span:nth-child(6) {
    left: 59%;
    top: 64%;
    animation-delay: -8s;
}

.sap-particle-field span:nth-child(7) {
    left: 68%;
    top: 27%;
    animation-delay: -3s;
}

.sap-particle-field span:nth-child(8) {
    left: 76%;
    top: 76%;
    animation-delay: -6s;
}

.sap-particle-field span:nth-child(9) {
    left: 84%;
    top: 14%;
    animation-delay: -1.5s;
}

.sap-particle-field span:nth-child(10) {
    left: 92%;
    top: 55%;
    animation-delay: -5.5s;
}

.sap-particle-field span:nth-child(11) {
    left: 34%;
    top: 52%;
    animation-delay: -7.5s;
}

.sap-particle-field span:nth-child(12) {
    left: 72%;
    top: 91%;
    animation-delay: -4.5s;
}


/* ================================================================
   FILTER ROW
   ================================================================ */

.sap-filter-nav {

    display: flex;

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

    flex-wrap: wrap;

    gap: 9px;

    width: 100%;

    margin:
        0 auto 55px;

    padding: 9px;

    border:
        1px solid rgba(255,255,255,0.10);

    border-radius: 999px;

    background:
        rgba(255,255,255,0.035);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 20px 70px rgba(0,0,0,0.30);

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    animation:
        sapFilterReveal 0.8s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* ================================================================
   FILTER BUTTON
   ================================================================ */

.sap-filter {

    position: relative;

    display: inline-flex;

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

    min-height: 45px;

    padding:
        0 21px;

    border:
        1px solid transparent;

    border-radius: 999px;

    color: #bdbdbd;

    text-decoration: none;

    font-family: "Inter", sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.015em;

    white-space: nowrap;

    text-rendering: geometricPrecision;

    transition:
        color 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;

}


.sap-filter::after {

    content: "";

    position: absolute;

    left: 18%;
    right: 18%;

    bottom: 3px;

    height: 1px;

    transform:
        scaleX(0);

    transform-origin: center;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--sap-gold),
            transparent
        );

    transition:
        transform 0.35s ease;

}


.sap-filter:hover {

    color: #ffffff;

    border-color:
        rgba(212,175,55,0.22);

    background:
        rgba(212,175,55,0.055);

    transform:
        translateY(-2px);

}


.sap-filter:hover::after {

    transform:
        scaleX(1);

}


.sap-filter--active {

    color: #080808;

    background:
        linear-gradient(
            135deg,
            #f3d77b,
            #c49a2c
        );

    border-color:
        rgba(255,231,145,0.65);

    box-shadow:
        0 8px 28px rgba(212,175,55,0.20),
        inset 0 1px 0 rgba(255,255,255,0.65);

}


.sap-filter--active::after {

    display: none;

}


.sap-filter--active:hover {

    color: #080808;

    background:
        linear-gradient(
            135deg,
            #ffe59a,
            #d1a938
        );

    box-shadow:
        0 12px 34px rgba(212,175,55,0.28);

}


/* ================================================================
   PROJECT GRID
   ================================================================ */

.sap-project-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 25px;

    align-items: stretch;

}


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

.sap-project-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid rgba(255,255,255,0.10);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.045);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transform:
        translate3d(0,0,0);

    transition:
        transform 0.55s cubic-bezier(.16,1,.3,1),
        border-color 0.45s ease,
        box-shadow 0.55s ease;

    animation:
        sapCardReveal 0.85s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* Stagger */

.sap-project-card:nth-child(1) {
    animation-delay: .10s;
}

.sap-project-card:nth-child(2) {
    animation-delay: .18s;
}

.sap-project-card:nth-child(3) {
    animation-delay: .26s;
}

.sap-project-card:nth-child(4) {
    animation-delay: .34s;
}

.sap-project-card:nth-child(5) {
    animation-delay: .42s;
}

.sap-project-card:nth-child(6) {
    animation-delay: .50s;
}

.sap-project-card:nth-child(7) {
    animation-delay: .58s;
}

.sap-project-card:nth-child(8) {
    animation-delay: .66s;
}


/* ================================================================
   CARD GOLD TOP EDGE
   ================================================================ */

.sap-project-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 8%;

    width: 84%;
    height: 1px;

    z-index: 30;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,0.78),
            transparent
        );

    opacity: .50;

    transition:
        opacity .45s ease,
        transform .45s ease;

}


.sap-project-card:hover::before {

    opacity: 1;

    transform:
        scaleX(1.08);

}


/* ================================================================
   CARD LIGHT SWEEP
   ================================================================ */

.sap-project-card::after {

    content: "";

    position: absolute;

    top: -120%;
    left: -60%;

    width: 45%;
    height: 340%;

    z-index: 25;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.045),
            rgba(243,215,123,0.09),
            transparent
        );

    transform:
        rotate(18deg)
        translate3d(0,0,0);

    transition:
        left .9s cubic-bezier(.16,1,.3,1);

}


.sap-project-card:hover::after {

    left: 130%;

}


.sap-project-card:hover {

    transform:
        translate3d(0,-9px,0);

    border-color:
        rgba(212,175,55,0.36);

    box-shadow:
        0 35px 90px rgba(0,0,0,0.50),
        0 0 0 1px rgba(212,175,55,0.05),
        0 0 50px rgba(212,175,55,0.085),
        inset 0 1px 0 rgba(255,255,255,0.07);

}


/* ================================================================
   IMAGE
   ================================================================ */

.sap-card-image {

    position: relative;

    height: 235px;

    overflow: hidden;

    background:
        #111;

}


.sap-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.04) 0%,
            transparent 36%,
            rgba(0,0,0,0.80) 100%
        );

}


.sap-card-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.001);

    filter:
        saturate(.82)
        contrast(1.06)
        brightness(.83);

    transition:
        transform .85s cubic-bezier(.16,1,.3,1),
        filter .65s ease;

}


.sap-project-card:hover
.sap-card-image img {

    transform:
        scale(1.05);

    filter:
        saturate(1)
        contrast(1.06)
        brightness(.95);

}


.sap-image-overlay {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(212,175,55,0.18),
            transparent 52%
        );

}


/* ================================================================
   CATEGORY
   ================================================================ */

.sap-category {

    position: absolute;

    top: 16px;
    left: 16px;

    z-index: 6;

    display: inline-flex;

    align-items: center;

    min-height: 29px;

    padding:
        0 11px;

    border:
        1px solid rgba(243,215,123,0.40);

    border-radius: 999px;

    background:
        rgba(4,4,4,0.72);

    color:
        #ffe59a;

    font-size: 8px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .16em;

    text-transform: uppercase;

    text-shadow:
        0 0 10px rgba(243,215,123,0.20);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 5px 20px rgba(0,0,0,.30);

}


.sap-project-card:hover .sap-category {

    border-color:
        rgba(243,215,123,.65);

    background:
        rgba(212,175,55,.12);

    box-shadow:
        0 0 20px rgba(212,175,55,.16);

}


/* ================================================================
   NUMBER
   ================================================================ */

.sap-project-number {

    position: absolute;

    top: 18px;
    right: 18px;

    z-index: 6;

    color:
        rgba(255,255,255,.70);

    font-family:
        "Poppins", sans-serif;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .14em;

    text-shadow:
        0 1px 8px rgba(0,0,0,.6);

}


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

.sap-card-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    padding:
        25px 22px 21px;

}


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

.sap-title-row {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 12px;

}


.sap-title-row h3 {

    margin: 0;

    color:
        #ffffff;

    font-family:
        "Poppins", sans-serif;

    font-size:
        clamp(20px, 1.35vw, 25px);

    line-height:
        1.15;

    font-weight:
        800;

    letter-spacing:
        -0.035em;

    text-shadow:
        0 1px 1px rgba(0,0,0,.5);

    transition:
        color .35s ease,
        text-shadow .35s ease;

}


.sap-project-card:hover
.sap-title-row h3 {

    color:
        #fff;

    text-shadow:
        0 0 24px rgba(243,215,123,.24);

}


/* ================================================================
   STATUS
   ================================================================ */

.sap-status-dot {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    flex-shrink: 0;

    padding-top: 4px;

    color:
        #a7a7a7;

    font-size:
        8px;

    font-weight:
        700;

    white-space:
        nowrap;

}


.sap-status-dot i {

    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #e0bc49;

    box-shadow:
        0 0 9px rgba(212,175,55,.85);

    animation:
        sapStatusPulse 2.2s ease-in-out infinite;

}


/* ================================================================
   DESCRIPTION — HIGH READABILITY
   ================================================================ */

.sap-project-description {

    min-height: 76px;

    margin:
        0 0 20px;

    color:
        #c0c0c0;

    font-family:
        "Inter", sans-serif;

    font-size:
        12px;

    line-height:
        1.72;

    font-weight:
        500;

    letter-spacing:
        0.005em;

    text-shadow:
        0 1px 1px rgba(0,0,0,.35);

}


/* ================================================================
   METRICS
   ================================================================ */

.sap-metrics {

    display: grid;

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

    gap: 7px;

    margin-bottom: 20px;

}


.sap-metric {

    min-width: 0;

    padding:
        12px 9px;

    border:
        1px solid rgba(255,255,255,.085);

    border-radius:
        11px;

    background:
        rgba(255,255,255,.028);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease;

}


.sap-project-card:hover
.sap-metric {

    border-color:
        rgba(212,175,55,.18);

    background:
        rgba(212,175,55,.035);

}


.sap-project-card:hover
.sap-metric:nth-child(1) {

    transform:
        translateY(-2px);

}


.sap-project-card:hover
.sap-metric:nth-child(2) {

    transform:
        translateY(-4px);

}


.sap-project-card:hover
.sap-metric:nth-child(3) {

    transform:
        translateY(-2px);

}


/* ================================================================
   METRIC LABEL
   ================================================================ */

.sap-metric-label {

    display: block;

    margin-bottom: 6px;

    overflow: hidden;

    color:
        #999999;

    font-size:
        8px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/* ================================================================
   METRIC VALUE
   ================================================================ */

.sap-metric strong {

    display: block;

    color:
        #f6d978;

    font-family:
        "Poppins", sans-serif;

    font-size:
        17px;

    line-height:
        1;

    font-weight:
        800;

    letter-spacing:
        -.025em;

    text-shadow:
        0 0 12px rgba(212,175,55,.13);

}


/* ================================================================
   CHART
   ================================================================ */

.sap-chart {

    margin-top:
        auto;

    margin-bottom:
        18px;

}


.sap-chart-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom:
        9px;

    color:
        #929292;

    font-size:
        8px;

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        .07em;

    text-transform:
        uppercase;

}


.sap-chart-top strong {

    color:
        #f0d16c;

    font-size:
        9px;

    font-weight:
        800;

}


/* ================================================================
   GRAPH AREA
   ================================================================ */

.sap-chart-area {

    position: relative;

    height:
        57px;

    overflow: hidden;

    border-bottom:
        1px solid rgba(255,255,255,.10);

}


.sap-chart-grid {

    position: absolute;

    left: 0;
    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        );

}


.sap-chart-grid.grid-1 {
    top: 18%;
}

.sap-chart-grid.grid-2 {
    top: 48%;
}

.sap-chart-grid.grid-3 {
    top: 78%;
}


/* ================================================================
   GRAPH BARS
   ================================================================ */

.sap-graph {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;

    gap: 5px;

    padding:
        5px 3px 0;

}


.sap-graph i {

    position: relative;

    flex: 1;

    display: block;

    min-width: 0;

    border-radius:
        5px 5px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(243,215,123,.95),
            rgba(212,175,55,.14)
        );

    transform-origin:
        bottom;

    box-shadow:
        0 0 12px rgba(212,175,55,.14);

    animation:
        sapGraphPulse 3.5s ease-in-out infinite;

}


.sap-graph i::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;
    right: 0;

    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #b98c22,
            #fff0a5,
            #c79b2c
        );

    box-shadow:
        0 0 9px rgba(243,215,123,.65);

}


/* ================================================================
   GRAPH HEIGHTS
   ================================================================ */

.sap-graph-1 i:nth-child(1) {
    height: 24%;
}

.sap-graph-1 i:nth-child(2) {
    height: 31%;
}

.sap-graph-1 i:nth-child(3) {
    height: 37%;
}

.sap-graph-1 i:nth-child(4) {
    height: 52%;
}

.sap-graph-1 i:nth-child(5) {
    height: 66%;
}

.sap-graph-1 i:nth-child(6) {
    height: 88%;
}


.sap-graph-2 i:nth-child(1) {
    height: 34%;
}

.sap-graph-2 i:nth-child(2) {
    height: 29%;
}

.sap-graph-2 i:nth-child(3) {
    height: 47%;
}

.sap-graph-2 i:nth-child(4) {
    height: 58%;
}

.sap-graph-2 i:nth-child(5) {
    height: 71%;
}

.sap-graph-2 i:nth-child(6) {
    height: 93%;
}


.sap-graph-3 i:nth-child(1) {
    height: 22%;
}

.sap-graph-3 i:nth-child(2) {
    height: 42%;
}

.sap-graph-3 i:nth-child(3) {
    height: 36%;
}

.sap-graph-3 i:nth-child(4) {
    height: 63%;
}

.sap-graph-3 i:nth-child(5) {
    height: 75%;
}

.sap-graph-3 i:nth-child(6) {
    height: 90%;
}


.sap-graph-4 i:nth-child(1) {
    height: 26%;
}

.sap-graph-4 i:nth-child(2) {
    height: 40%;
}

.sap-graph-4 i:nth-child(3) {
    height: 48%;
}

.sap-graph-4 i:nth-child(4) {
    height: 57%;
}

.sap-graph-4 i:nth-child(5) {
    height: 79%;
}

.sap-graph-4 i:nth-child(6) {
    height: 94%;
}


.sap-graph-5 i:nth-child(1) {
    height: 30%;
}

.sap-graph-5 i:nth-child(2) {
    height: 35%;
}

.sap-graph-5 i:nth-child(3) {
    height: 49%;
}

.sap-graph-5 i:nth-child(4) {
    height: 43%;
}

.sap-graph-5 i:nth-child(5) {
    height: 72%;
}

.sap-graph-5 i:nth-child(6) {
    height: 91%;
}


.sap-graph-6 i:nth-child(1) {
    height: 28%;
}

.sap-graph-6 i:nth-child(2) {
    height: 46%;
}

.sap-graph-6 i:nth-child(3) {
    height: 44%;
}

.sap-graph-6 i:nth-child(4) {
    height: 68%;
}

.sap-graph-6 i:nth-child(5) {
    height: 76%;
}

.sap-graph-6 i:nth-child(6) {
    height: 92%;
}


.sap-graph-7 i:nth-child(1) {
    height: 20%;
}

.sap-graph-7 i:nth-child(2) {
    height: 33%;
}

.sap-graph-7 i:nth-child(3) {
    height: 55%;
}

.sap-graph-7 i:nth-child(4) {
    height: 62%;
}

.sap-graph-7 i:nth-child(5) {
    height: 79%;
}

.sap-graph-7 i:nth-child(6) {
    height: 96%;
}


.sap-graph-8 i:nth-child(1) {
    height: 27%;
}

.sap-graph-8 i:nth-child(2) {
    height: 38%;
}

.sap-graph-8 i:nth-child(3) {
    height: 45%;
}

.sap-graph-8 i:nth-child(4) {
    height: 61%;
}

.sap-graph-8 i:nth-child(5) {
    height: 78%;
}

.sap-graph-8 i:nth-child(6) {
    height: 95%;
}


/* ================================================================
   GRAPH DELAYS
   ================================================================ */

.sap-graph i:nth-child(1) {
    animation-delay: -.3s;
}

.sap-graph i:nth-child(2) {
    animation-delay: -.6s;
}

.sap-graph i:nth-child(3) {
    animation-delay: -.9s;
}

.sap-graph i:nth-child(4) {
    animation-delay: -1.2s;
}

.sap-graph i:nth-child(5) {
    animation-delay: -1.5s;
}

.sap-graph i:nth-child(6) {
    animation-delay: -1.8s;
}


/* ================================================================
   VIEW DETAILS
   ================================================================ */

.sap-details-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding-top:
        15px;

    border-top:
        1px solid rgba(255,255,255,.09);

    color:
        #b7b7b7;

    text-decoration: none;

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;

    transition:
        color .35s ease,
        border-color .35s ease;

}


.sap-details-link:hover {

    color:
        #f3d77b;

    border-color:
        rgba(212,175,55,.28);

}


.sap-arrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:
        29px;

    height:
        29px;

    border:
        1px solid rgba(212,175,55,.26);

    border-radius:
        50%;

    color:
        #e3c45e;

    font-size:
        15px;

    font-weight:
        500;

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}


.sap-details-link:hover
.sap-arrow {

    transform:
        translateX(5px)
        rotate(-5deg);

    border-color:
        rgba(212,175,55,.60);

    background:
        rgba(212,175,55,.10);

    box-shadow:
        0 0 20px rgba(212,175,55,.15);

}


/* ================================================================
   BOTTOM CTA
   ================================================================ */

.sap-case-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top:
        60px;

    padding-top:
        25px;

    border-top:
        1px solid rgba(255,255,255,.085);

}


.sap-case-bottom p {

    margin:
        0;

    color:
        #9e9e9e;

    font-size:
        12px;

    font-weight:
        500;

    letter-spacing:
        .04em;

}


.sap-bottom-cta {

    display: inline-flex;

    align-items: center;

    gap: 16px;

    padding:
        14px 20px;

    border:
        1px solid rgba(212,175,55,.32);

    border-radius:
        999px;

    color:
        #eeeeee;

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

    background:
        rgba(212,175,55,.03);

    transition:
        transform .4s ease,
        color .4s ease,
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

}


.sap-bottom-cta span:last-child {

    color:
        #e2c35d;

    font-size:
        16px;

    transition:
        transform .4s cubic-bezier(.16,1,.3,1);

}


.sap-bottom-cta:hover {

    transform:
        translateY(-3px);

    color:
        #ffffff;

    border-color:
        rgba(212,175,55,.65);

    background:
        rgba(212,175,55,.08);

    box-shadow:
        0 14px 35px rgba(212,175,55,.12);

}


.sap-bottom-cta:hover span:last-child {

    transform:
        translate(3px,-3px);

}


/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes sapFilterReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes sapCardReveal {

    from {

        opacity: 0;

        transform:
            translate3d(0,35px,0)
            scale(.985);

    }

    to {

        opacity: 1;

        transform:
            translate3d(0,0,0)
            scale(1);

    }

}


@keyframes sapStatusPulse {

    0%,
    100% {

        opacity: .65;

        transform:
            scale(.85);

        box-shadow:
            0 0 5px rgba(212,175,55,.4);

    }

    50% {

        opacity: 1;

        transform:
            scale(1.15);

        box-shadow:
            0 0 12px rgba(212,175,55,.9);

    }

}


@keyframes sapGraphPulse {

    0%,
    100% {

        opacity: .78;

        transform:
            scaleY(.96);

    }

    50% {

        opacity: 1;

        transform:
            scaleY(1.035);

    }

}


@keyframes sapParticleFloat {

    0% {

        opacity: 0;

        transform:
            translate3d(0,20px,0)
            scale(.5);

    }

    15% {
        opacity: .65;
    }

    50% {

        opacity: .9;

        transform:
            translate3d(12px,-25px,0)
            scale(1);

    }

    85% {
        opacity: .35;
    }

    100% {

        opacity: 0;

        transform:
            translate3d(-8px,-65px,0)
            scale(.5);

    }

}


@keyframes sapOrbFloatOne {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(80px,50px,0)
            scale(1.12);

    }

}


@keyframes sapOrbFloatTwo {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-90px,-45px,0)
            scale(1.08);

    }

}


@keyframes sapOrbFloatThree {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(55px,-55px,0)
            scale(1.1);

    }

}


/* ================================================================
   LARGE DESKTOP
   ================================================================ */

@media (min-width: 1800px) {

    .sap-case-studies {

        padding-left:
            45px;

        padding-right:
            45px;

    }

    .sap-project-grid {

        gap:
            29px;

    }

    .sap-card-image {

        height:
            255px;

    }

    .sap-card-content {

        padding:
            27px 25px 23px;

    }

    .sap-project-description {

        font-size:
            12.5px;

    }

    .sap-metric strong {

        font-size:
            18px;

    }

}


/* ================================================================
   3 COLUMN
   ================================================================ */

@media (max-width: 1350px) {

    .sap-project-grid {

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

    }

    .sap-filter-nav {

        border-radius:
            24px;

    }

}


/* ================================================================
   2 COLUMN TABLET
   ================================================================ */

@media (max-width: 1050px) {

    .sap-case-studies {

        padding:
            85px 25px 85px;

    }

    .sap-project-grid {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

        gap:
            20px;

    }

    .sap-card-image {

        height:
            250px;

    }

    .sap-filter-nav {

        margin-bottom:
            42px;

    }

}


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

@media (max-width: 700px) {

    .sap-case-studies {

        padding:
            65px 16px 70px;

    }

    .sap-filter-nav {

        justify-content:
            flex-start;

        gap:
            6px;

        padding:
            7px;

        border-radius:
            19px;

    }

    .sap-filter {

        min-height:
            38px;

        padding:
            0 13px;

        font-size:
            9px;

    }

    .sap-project-grid {

        grid-template-columns:
            minmax(0,1fr);

        gap:
            18px;

    }

    .sap-card-image {

        height:
            275px;

    }

    .sap-card-content {

        padding:
            24px 20px 20px;

    }

    .sap-project-description {

        min-height:
            auto;

        font-size:
            12.5px;

        line-height:
            1.72;

    }

    .sap-metric strong {

        font-size:
            17px;

    }

    .sap-case-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        margin-top:
            40px;

    }

}


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

@media (max-width: 430px) {

    .sap-case-studies {

        padding:
            55px 12px 60px;

    }

    .sap-filter-nav {

        justify-content:
            center;

        border-radius:
            18px;

    }

    .sap-filter {

        min-height:
            36px;

        padding:
            0 10px;

        font-size:
            8px;

    }

    .sap-card-image {

        height:
            235px;

    }

    .sap-card-content {

        padding:
            21px 17px 18px;

    }

    .sap-title-row h3 {

        font-size:
            20px;

    }

    .sap-status-dot {

        display:
            none;

    }

    .sap-project-description {

        font-size:
            12px;

    }

    .sap-metric {

        padding:
            10px 7px;

    }

    .sap-metric-label {

        font-size:
            7px;

    }

    .sap-metric strong {

        font-size:
            15px;

    }

    .sap-chart-area {

        height:
            50px;

    }

}


/* ================================================================
   REDUCED MOTION
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .sap-case-studies *,
    .sap-case-studies *::before,
    .sap-case-studies *::after {

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

        scroll-behavior:
            auto !important;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-779958d *//* ==========================================================
   SUDHIRADSPRO — CAMPAIGN GALLERY
   4 COLUMNS × 2 ROWS
   HTML + CSS ONLY
   ========================================================== */

.sap-cg {
  --black: #050505;
  --panel: #090909;
  --white: #ffffff;
  --text: #e5e5e5;
  --muted: #a7a7a7;
  --gold: #d4af37;
  --gold-light: #ffd700;
  --gold-soft: #ffcc4d;

  width: 100%;
  max-width: 100%;

  position: relative;
  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 0% 15%,
      rgba(212,175,55,.07),
      transparent 28%
    ),
    radial-gradient(
      circle at 100% 75%,
      rgba(255,215,0,.05),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #050505 0%,
      #090909 50%,
      #050505 100%
    );

  color: #fff;

  font-family:
    Inter,
    Arial,
    Helvetica,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sap-cg *,
.sap-cg *::before,
.sap-cg *::after {
  box-sizing: border-box;
}


/* ==========================================================
   BACKGROUND LIGHT
   ========================================================== */

.sap-cg__glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
}

.sap-cg__glow--one {
  width: 450px;
  height: 450px;

  left: -220px;
  top: 15%;

  background: rgba(212,175,55,.055);

  animation:
    sap-cg-breathe 10s ease-in-out infinite;
}

.sap-cg__glow--two {
  width: 450px;
  height: 450px;

  right: -220px;
  bottom: 5%;

  background: rgba(255,215,0,.045);

  animation:
    sap-cg-breathe 13s ease-in-out infinite reverse;
}


/* ==========================================================
   MAXIMUM WIDTH CONTAINER
   ========================================================== */

.sap-cg__container {
  width: 97%;
  max-width: 1900px;

  margin: 0 auto;

  padding:
    70px 0;
}


/* ==========================================================
   TOP LABEL — ONLY CAMPAIGN GALLERY
   ========================================================== */

.sap-cg__heading {
  width: 100%;
  margin-bottom: 32px;
}

.sap-cg__heading span {
  display: inline-flex;
  align-items: center;

  color: var(--gold-light);

  font-family:
    Poppins,
    Arial,
    sans-serif;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;

  letter-spacing: .2em;

  text-transform: uppercase;

  text-shadow:
    0 0 18px rgba(255,215,0,.24);
}

.sap-cg__heading span::before {
  content: "";

  width: 34px;
  height: 1px;

  margin-right: 13px;

  background:
    linear-gradient(
      90deg,
      var(--gold-light),
      transparent
    );
}


/* ==========================================================
   IMPORTANT:
   EXACTLY 4 BOXES PER ROW ON LARGE SCREENS
   ========================================================== */

.sap-cg__grid {
  width: 100%;

  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  grid-template-rows:
    repeat(2, auto);

  gap: 24px;

  align-items: stretch;
}


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

.sap-cg-card {
  min-width: 0;

  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      #0c0c0c,
      #080808
    );

  box-shadow:
    0 22px 55px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035);

  transform:
    translateZ(0);

  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    border-color .35s ease,
    box-shadow .45s ease;

  animation:
    sap-cg-card-in .7s cubic-bezier(.16,1,.3,1) both;
}

.sap-cg-card:nth-child(1) {
  animation-delay: .03s;
}

.sap-cg-card:nth-child(2) {
  animation-delay: .07s;
}

.sap-cg-card:nth-child(3) {
  animation-delay: .11s;
}

.sap-cg-card:nth-child(4) {
  animation-delay: .15s;
}

.sap-cg-card:nth-child(5) {
  animation-delay: .19s;
}

.sap-cg-card:nth-child(6) {
  animation-delay: .23s;
}

.sap-cg-card:nth-child(7) {
  animation-delay: .27s;
}

.sap-cg-card:nth-child(8) {
  animation-delay: .31s;
}

.sap-cg-card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(212,175,55,.35);

  box-shadow:
    0 35px 75px rgba(0,0,0,.55),
    0 0 35px rgba(212,175,55,.06);
}


/* ==========================================================
   GLASS REFLECTION
   ========================================================== */

.sap-cg-card::after {
  content: "";

  position: absolute;

  z-index: 20;

  top: 0;
  left: -130%;

  width: 65%;
  height: 100%;

  pointer-events: none;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.075),
      transparent
    );

  transition:
    left .8s cubic-bezier(.16,1,.3,1);
}

.sap-cg-card:hover::after {
  left: 140%;
}


/* ==========================================================
   DASHBOARD AREA
   ========================================================== */

.sap-cg-dashboard {
  position: relative;

  height: 285px;
  min-height: 285px;

  padding: 21px;

  overflow: hidden;

  border-bottom:
    1px solid rgba(255,255,255,.07);

  background:
    linear-gradient(
      145deg,
      #111111,
      #080808
    );

  flex-shrink: 0;
}

.sap-cg-dashboard::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -120px;
  top: -120px;

  border-radius: 50%;

  background:
    rgba(255,215,0,.04);

  filter: blur(45px);

  pointer-events: none;
}


/* ==========================================================
   TOPBAR
   ========================================================== */

.sap-cg-topbar {
  position: relative;
  z-index: 3;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.sap-cg-brand {
  min-width: 0;

  display: flex;

  align-items: center;

  gap: 9px;

  color: #f5f5f5;

  font-size: 12px;
  font-weight: 700;
}

.sap-cg-brand > span:last-child {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.sap-cg-brand-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  color: #fff;

  font-size: 12px;
  font-weight: 800;
}

.sap-cg-brand-icon.google {
  background: #4285f4;
}

.sap-cg-brand-icon.meta {
  background:
    linear-gradient(
      135deg,
      #7b61ff,
      #3d7cff
    );
}

.sap-cg-brand-icon.ga4 {
  background: #f9ab00;
}

.sap-cg-brand-icon.gtm {
  background: #4285f4;
}

.sap-cg-brand-icon.looker {
  background: #ea4335;
}

.sap-cg-brand-icon.travel {
  background: #3b82f6;
}

.sap-cg-brand-icon.finance {
  background: var(--gold-light);
  color: #080808;
}

.sap-cg-dots {
  color: #666;
  font-size: 12px;
  letter-spacing: 1px;
}


/* ==========================================================
   KPI
   ========================================================== */

.sap-cg-kpis {
  position: relative;
  z-index: 2;

  display: grid;

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

  gap: 8px;

  margin-top: 22px;
}

.sap-cg-kpi {
  min-width: 0;

  padding: 12px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 9px;

  background:
    rgba(255,255,255,.025);
}

.sap-cg-kpi span,
.sap-cg-kpi strong,
.sap-cg-kpi small {
  display: block;
}

.sap-cg-kpi span {
  color: #999;
  font-size: 9px;
}

.sap-cg-kpi strong {
  margin-top: 5px;

  color: #fff;

  font-size: 14px;
  font-weight: 800;
}

.sap-cg-kpi small {
  margin-top: 4px;

  color: #64d98a;

  font-size: 9px;
  font-weight: 700;
}


/* ==========================================================
   CHART
   ========================================================== */

.sap-cg-chart {
  position: relative;

  height: 105px;

  margin-top: 18px;

  overflow: hidden;
}

.sap-cg-grid-lines {
  position: absolute;

  inset: 0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.045) 0,
      rgba(255,255,255,.045) 1px,
      transparent 1px,
      transparent 25%
    );
}

.sap-cg-line {
  position: absolute;

  width: 125%;
  height: 80px;

  left: -3%;
  top: 10px;

  transform: rotate(-6deg);

  border-bottom:
    3px solid var(--gold-light);

  border-radius:
    0 0 55% 45%;

  filter:
    drop-shadow(
      0 0 6px rgba(255,215,0,.4)
    );
}

.sap-cg-line-gold {
  clip-path:
    polygon(
      0 80%,
      10% 70%,
      20% 77%,
      30% 53%,
      40% 62%,
      50% 35%,
      60% 43%,
      70% 25%,
      80% 30%,
      90% 10%,
      100% 0,
      100% 100%,
      0 100%
    );
}

.sap-cg-chart-dot {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 0 10px rgba(255,215,0,.8);
}

.sap-cg-chart-dot.dot-1 {
  left: 40%;
  top: 43%;
}

.sap-cg-chart-dot.dot-2 {
  left: 69%;
  top: 26%;
}

.sap-cg-chart-dot.dot-3 {
  right: 4%;
  top: 8%;
}

.sap-cg-chart-label {
  display: flex;

  justify-content: space-between;

  margin-top: 2px;

  color: #888;

  font-size: 9px;
}

.sap-cg-chart-label strong {
  color: var(--gold-soft);
}


/* ==========================================================
   BIG STAT
   ========================================================== */

.sap-cg-big-stat {
  margin-top: 32px;
}

.sap-cg-big-stat span,
.sap-cg-big-stat strong,
.sap-cg-big-stat small {
  display: block;
}

.sap-cg-big-stat span {
  color: #999;
  font-size: 9px;
}

.sap-cg-big-stat strong {
  margin-top: 6px;

  color: #fff;

  font-size: 34px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.04em;
}

.sap-cg-big-stat small {
  margin-top: 6px;

  color: #63d58a;

  font-size: 9px;
  font-weight: 700;
}


/* ==========================================================
   BARS
   ========================================================== */

.sap-cg-bars {
  display: flex;

  align-items: flex-end;

  gap: 7px;

  height: 105px;

  margin-top: 18px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.sap-cg-bars i {
  flex: 1;

  display: block;

  border-radius:
    4px 4px 0 0;

  background:
    linear-gradient(
      to top,
      rgba(255,255,255,.05),
      rgba(255,255,255,.35)
    );
}

.sap-cg-blue-bars i {
  background:
    linear-gradient(
      to top,
      rgba(66,133,244,.18),
      #5c8fff
    );
}

.sap-cg-gold-bars i {
  background:
    linear-gradient(
      to top,
      rgba(212,175,55,.12),
      #d4af37
    );
}


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

.sap-cg-mini-stats {
  display: flex;

  justify-content: space-between;

  gap: 10px;

  margin-top: 12px;

  color: #8d8d8d;

  font-size: 9px;
}

.sap-cg-mini-stats b {
  color: #ededed;
}


/* ==========================================================
   GA4 DONUT
   ========================================================== */

.sap-cg-ga-layout {
  display: flex;

  align-items: center;

  justify-content: space-between;
}

.sap-cg-donut {
  width: 88px;
  height: 88px;

  margin-top: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      #f9ab00 0 36%,
      #4285f4 36% 61%,
      #34a853 61% 84%,
      #ea4335 84% 100%
    );
}

.sap-cg-donut > div {
  width: 65px;
  height: 65px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: #0b0b0b;
}

.sap-cg-donut strong {
  color: #fff;
  font-size: 16px;
}

.sap-cg-donut span {
  margin-top: 3px;

  color: #888;

  font-size: 8px;
}


/* ==========================================================
   GTM
   ========================================================== */

.sap-cg-flow {
  display: grid;

  grid-template-columns:
    1fr auto 1fr auto 1fr;

  align-items: center;

  gap: 5px;

  margin-top: 38px;
}

.sap-cg-flow > div {
  min-width: 0;

  padding: 12px 5px;

  text-align: center;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 8px;

  background:
    rgba(255,255,255,.025);
}

.sap-cg-flow small,
.sap-cg-flow strong {
  display: block;
}

.sap-cg-flow small {
  color: #777;
  font-size: 7px;
}

.sap-cg-flow strong {
  margin-top: 5px;

  color: #eee;

  font-size: 9px;

  white-space: nowrap;
}

.sap-cg-flow > b {
  color: var(--gold-light);

  font-size: 11px;
}

.sap-cg-code {
  display: flex;

  flex-direction: column;

  gap: 4px;

  margin-top: 18px;

  padding: 12px;

  border-radius: 8px;

  background: #060606;

  color: #888;

  font-family:
    Consolas,
    monospace;

  font-size: 9px;
}

.sap-cg-code span:first-child {
  color: var(--gold-light);
}


/* ==========================================================
   LANDING PAGE
   ========================================================== */

.sap-cg-landing {
  padding: 15px;
}

.sap-cg-browser {
  height: 100%;

  overflow: hidden;

  border-radius: 10px;

  background: #101010;
}

.sap-cg-browser-top {
  height: 28px;

  display: flex;

  align-items: center;

  gap: 5px;

  padding: 0 10px;

  background: #181818;
}

.sap-cg-browser-top i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #666;
}

.sap-cg-browser-top span {
  margin-left: 6px;

  color: #777;

  font-size: 7px;
}

.sap-cg-landing-body {
  min-height: 230px;

  padding: 28px 20px;

  background:
    radial-gradient(
      circle at 80% 15%,
      rgba(255,215,0,.13),
      transparent 45%
    );
}

.sap-cg-landing-body > small {
  color: var(--gold-light);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: .12em;
}

.sap-cg-landing-body h4 {
  max-width: 240px;

  margin:
    13px 0 0;

  color: #fff;

  font-family:
    Poppins,
    Arial,
    sans-serif;

  font-size: 24px;

  line-height: 1.15;

  letter-spacing: -.04em;
}

.sap-cg-landing-body h4 em {
  display: block;

  color: var(--gold-light);

  font-style: normal;
}

.sap-cg-landing-body button {
  margin-top: 16px;

  padding:
    8px 14px;

  border: 0;

  border-radius: 6px;

  background:
    linear-gradient(
      135deg,
      var(--gold),
      var(--gold-light)
    );

  color: #050505;

  font-size: 8px;

  font-weight: 800;
}

.sap-cg-landing-stats {
  display: flex;

  gap: 18px;

  margin-top: 24px;
}

.sap-cg-landing-stats span {
  color: #fff;

  font-size: 10px;

  font-weight: 800;
}

.sap-cg-landing-stats small {
  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 6px;
}


/* ==========================================================
   LOOKER
   ========================================================== */

.sap-cg-looker-kpis {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 9px;

  margin-top: 25px;
}

.sap-cg-looker-kpis > div {
  padding: 12px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius: 8px;

  background:
    rgba(255,255,255,.025);
}

.sap-cg-looker-kpis span,
.sap-cg-looker-kpis strong {
  display: block;
}

.sap-cg-looker-kpis span {
  color: #888;
  font-size: 9px;
}

.sap-cg-looker-kpis strong {
  margin-top: 5px;

  color: #fff;

  font-size: 15px;
}

.sap-cg-looker-chart {
  position: relative;

  height: 100px;

  margin-top: 15px;

  overflow: hidden;
}

.sap-cg-looker-bars {
  position: absolute;

  inset: 0;

  height: 100px;

  margin: 0;
}

.sap-cg-line-white {
  top: 13px;

  border-color: #fff;

  transform: rotate(-5deg);
}


/* ==========================================================
   TRAVEL
   ========================================================== */

.sap-cg-travel-layout {
  display: flex;

  align-items: center;

  justify-content: space-between;
}

.sap-cg-travel-circle {
  width: 88px;
  height: 88px;

  margin-top: 30px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--gold-light) 0 84%,
      #252525 84% 100%
    );
}

.sap-cg-travel-circle span {
  width: 66px;
  height: 66px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #0b0b0b;

  color: #fff;

  font-size: 16px;

  font-weight: 800;
}

.sap-cg-progress {
  height: 6px;

  margin-top: 23px;

  overflow: hidden;

  border-radius: 999px;

  background: #202020;
}

.sap-cg-progress span {
  display: block;

  width: 84%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );
}


/* ==========================================================
   FINANCE
   ========================================================== */

.sap-cg-finance-stat {
  margin-top: 35px;
}

.sap-cg-finance-chart {
  position: relative;

  height: 95px;

  margin-top: 18px;

  overflow: hidden;
}

.sap-cg-finance-chart .sap-cg-line {
  width: 125%;

  top: 12px;
  left: -5%;
}


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

.sap-cg-content {
  min-width: 0;

  flex: 1;

  display: flex;

  flex-direction: column;

  padding:
    24px
    22px
    25px;

  background: #090909;
}

.sap-cg-tag {
  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  max-width: 100%;

  padding:
    7px
    10px;

  border:
    1px solid rgba(212,175,55,.3);

  border-radius: 999px;

  background:
    rgba(212,175,55,.06);

  color: #f1cf59;

  font-size: 8px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: .12em;

  white-space: nowrap;
}

.sap-cg-content h3 {
  margin:
    15px
    0
    0;

  color: #fff;

  font-family:
    Poppins,
    Arial,
    sans-serif;

  font-size: 21px;

  font-weight: 800;

  line-height: 1.3;

  letter-spacing: -.025em;
}

.sap-cg-content p {
  min-height: 78px;

  margin:
    11px
    0
    0;

  color: #d5d5d5;

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.7;

  letter-spacing: .005em;
}

.sap-cg-result {
  display: flex;

  align-items: baseline;

  gap: 8px;

  margin-top: auto;

  padding-top: 15px;

  border-top:
    1px solid rgba(255,255,255,.08);
}

.sap-cg-result strong {
  color: var(--gold-light);

  font-family:
    Poppins,
    Arial,
    sans-serif;

  font-size: 22px;

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;
}

.sap-cg-result span {
  color: #aaa;

  font-size: 9px;
}

.sap-cg-link {
  display: inline-flex;

  align-items: center;

  align-self: flex-start;

  gap: 7px;

  margin-top: 17px;

  color: #eee;

  font-size: 10px;

  font-weight: 700;

  text-decoration: none;

  transition:
    color .3s ease,
    gap .3s ease;
}

.sap-cg-link b {
  color: var(--gold-light);

  font-size: 16px;

  font-weight: 500;

  transition:
    transform .3s ease;
}

.sap-cg-link:hover {
  color: var(--gold-light);

  gap: 11px;
}

.sap-cg-link:hover b {
  transform: translateX(3px);
}


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

.sap-cg-cta {
  display: flex;

  justify-content: center;

  margin-top: 42px;
}

.sap-cg-cta-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 54px;

  padding:
    0 28px;

  overflow: hidden;

  border:
    1px solid rgba(255,215,0,.48);

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      rgba(212,175,55,.15),
      rgba(255,215,0,.035)
    );

  color: #fff;

  font-family:
    Poppins,
    Arial,
    sans-serif;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;

  box-shadow:
    0 15px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.07);

  transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

.sap-cg-cta-button::before {
  content: "";

  position: absolute;

  left: -130%;
  top: 0;

  width: 75%;
  height: 100%;

  transform:
    skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.18),
      transparent
    );

  transition:
    left .75s cubic-bezier(.16,1,.3,1);
}

.sap-cg-cta-button span,
.sap-cg-cta-button b {
  position: relative;

  z-index: 2;
}

.sap-cg-cta-button b {
  color: var(--gold-light);

  font-size: 18px;

  transition:
    transform .3s ease;
}

.sap-cg-cta-button:hover {
  transform: translateY(-3px);

  border-color:
    rgba(255,215,0,.8);

  box-shadow:
    0 20px 50px rgba(0,0,0,.5),
    0 0 30px rgba(255,215,0,.08);
}

.sap-cg-cta-button:hover::before {
  left: 140%;
}

.sap-cg-cta-button:hover b {
  transform: translateX(4px);
}


/* ==========================================================
   CARD ENTRANCE
   ========================================================== */

@keyframes sap-cg-card-in {

  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ==========================================================
   BACKGROUND BREATHING
   ========================================================== */

@keyframes sap-cg-breathe {

  0%,
  100% {
    opacity: .45;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    transform: scale(1.08);
  }

}


/* ==========================================================
   LARGE DESKTOP
   1600px+
   ========================================================== */

@media (min-width: 1600px) {

  .sap-cg__container {
    width: 97%;
    max-width: 1900px;
  }

  .sap-cg__grid {
    gap: 26px;
  }

  .sap-cg-dashboard {
    height: 300px;
    min-height: 300px;
  }

  .sap-cg-content {
    padding:
      26px
      24px
      28px;
  }

  .sap-cg-content h3 {
    font-size: 22px;
  }

  .sap-cg-content p {
    font-size: 13.5px;
    line-height: 1.75;
  }

}


/* ==========================================================
   1200px–1599px
   STILL 4 BOXES PER ROW
   ========================================================== */

@media (min-width: 1200px) and (max-width: 1599px) {

  .sap-cg__container {
    width: 96%;
  }

  .sap-cg__grid {
    grid-template-columns:
      repeat(4, minmax(0, 1fr));

    gap: 20px;
  }

  .sap-cg-dashboard {
    height: 270px;
    min-height: 270px;

    padding: 18px;
  }

  .sap-cg-content {
    padding:
      21px
      19px
      23px;
  }

  .sap-cg-content h3 {
    font-size: 19px;
  }

  .sap-cg-content p {
    font-size: 12px;
  }

}


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

@media (max-width: 1199px) {

  .sap-cg__container {
    width: 94%;
  }

  .sap-cg__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    grid-template-rows: auto;

    gap: 20px;
  }

  .sap-cg-dashboard {
    height: 280px;
    min-height: 280px;
  }

}


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

@media (max-width: 650px) {

  .sap-cg__container {
    width: 91%;

    padding-top: 48px;
    padding-bottom: 55px;
  }

  .sap-cg__heading {
    margin-bottom: 25px;
  }

  .sap-cg__heading span {
    font-size: 11px;

    letter-spacing: .17em;
  }

  .sap-cg__heading span::before {
    width: 22px;

    margin-right: 9px;
  }

  .sap-cg__grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .sap-cg-dashboard {
    height: 270px;
    min-height: 270px;
  }

  .sap-cg-content {
    padding:
      23px
      20px
      25px;
  }

  .sap-cg-content h3 {
    font-size: 20px;
  }

  .sap-cg-content p {
    min-height: auto;

    font-size: 13px;

    line-height: 1.75;
  }

  .sap-cg-result {
    margin-top: 18px;
  }

  .sap-cg-result strong {
    font-size: 21px;
  }

}


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

@media (max-width: 380px) {

  .sap-cg__container {
    width: 90%;
  }

  .sap-cg-dashboard {
    height: 250px;
    min-height: 250px;
  }

}


/* ==========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .sap-cg *,
  .sap-cg *::before,
  .sap-cg *::after {

    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7b01c17 *//* ============================================================
   SUDHIRADSPRO
   WHAT OUR PORTFOLIO REPRESENTS
   PREMIUM BLACK + GOLD FEATURE SECTION
   PURE CSS — NO JAVASCRIPT
   ============================================================ */


/* ============================================================
   GOOGLE FONTS
   ============================================================ */

@import url(
    'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800;900&display=swap'
);


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

.portfolio-represent-section {

    --black:
        #050505;

    --black-soft:
        #090909;

    --black-panel:
        #0a0a0a;

    --gold:
        #d4af37;

    --gold-light:
        #f3cf62;

    --gold-bright:
        #ffe89a;

    --gold-dark:
        #9b7515;

    --white:
        #ffffff;

    --text:
        #f5f5f5;

    --body:
        #e3e3e3;

    position:
        relative;

    width:
        100%;

    min-height:
        540px;

    padding:
        76px 28px 86px;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        radial-gradient(
            ellipse at 50% 48%,
            rgba(212,175,55,.045),
            transparent 48%
        ),
        linear-gradient(
            180deg,
            #060606 0%,
            #090909 50%,
            #050505 100%
        );

    color:
        var(--white);

    font-family:
        "Inter",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;

}


/* ============================================================
   BACKGROUND VIGNETTE
   ============================================================ */

.portfolio-represent-section::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -10;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 20%,
            rgba(0,0,0,.32) 100%
        );

}


/* ============================================================
   AMBIENT GLOWS
   ============================================================ */

.portfolio-glow {

    position:
        absolute;

    z-index:
        -6;

    width:
        420px;

    height:
        420px;

    border-radius:
        50%;

    pointer-events:
        none;

    filter:
        blur(115px);

    opacity:
        .22;

}


.portfolio-glow-left {

    left:
        -260px;

    top:
        30%;

    background:
        rgba(212,175,55,.16);

    animation:
        portfolioGlowLeft
        13s
        ease-in-out
        infinite
        alternate;

}


.portfolio-glow-right {

    right:
        -270px;

    top:
        8%;

    background:
        rgba(212,175,55,.13);

    animation:
        portfolioGlowRight
        15s
        ease-in-out
        infinite
        alternate;

}


/* ============================================================
   PARTICLES
   ============================================================ */

.portfolio-particles {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

    overflow:
        hidden;

    pointer-events:
        none;

}


.portfolio-particles span {

    position:
        absolute;

    width:
        3px;

    height:
        3px;

    border-radius:
        50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 8px rgba(212,175,55,.75),
        0 0 18px rgba(212,175,55,.25);

    opacity:
        .45;

    animation:
        portfolioParticle
        8s
        linear
        infinite;

}


.portfolio-particles span:nth-child(1) {
    left: 4%;
    top: 35%;
    animation-delay: -2s;
}

.portfolio-particles span:nth-child(2) {
    left: 10%;
    top: 70%;
    animation-delay: -6s;
}

.portfolio-particles span:nth-child(3) {
    left: 18%;
    top: 21%;
    animation-delay: -3s;
}

.portfolio-particles span:nth-child(4) {
    left: 29%;
    top: 83%;
    animation-delay: -7s;
}

.portfolio-particles span:nth-child(5) {
    left: 40%;
    top: 18%;
    animation-delay: -1s;
}

.portfolio-particles span:nth-child(6) {
    left: 51%;
    top: 76%;
    animation-delay: -5s;
}

.portfolio-particles span:nth-child(7) {
    left: 61%;
    top: 23%;
    animation-delay: -4s;
}

.portfolio-particles span:nth-child(8) {
    left: 70%;
    top: 81%;
    animation-delay: -8s;
}

.portfolio-particles span:nth-child(9) {
    left: 79%;
    top: 28%;
    animation-delay: -2.5s;
}

.portfolio-particles span:nth-child(10) {
    left: 87%;
    top: 68%;
    animation-delay: -6.5s;
}

.portfolio-particles span:nth-child(11) {
    left: 93%;
    top: 32%;
    animation-delay: -3.5s;
}

.portfolio-particles span:nth-child(12) {
    left: 97%;
    top: 84%;
    animation-delay: -5.5s;
}


/* ============================================================
   MAIN WIDTH
   ============================================================ */

.portfolio-represent-container {

    position:
        relative;

    width:
        min(100%, 1860px);

    margin:
        0 auto;

}


/* ============================================================
   REFERENCE IMAGE HEADER
   WHAT OUR PORTFOLIO REPRESENTS
   ============================================================ */

.portfolio-reference-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    gap:
        38px;

    margin:
        0 auto 48px;

    animation:
        portfolioHeadingReveal
        1s
        cubic-bezier(.16,1,.3,1)
        both;

}


/* ============================================================
   HEADER TEXT
   ============================================================ */

.portfolio-reference-heading h2 {

    position:
        relative;

    flex:
        0 0 auto;

    margin:
        0;

    padding:
        0;

    color:
        #f7c945;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(22px, 2.35vw, 46px);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .055em;

    text-align:
        center;

    white-space:
        nowrap;

    text-shadow:
        0 0 7px rgba(212,175,55,.30),
        0 0 20px rgba(212,175,55,.15);

}


/* ============================================================
   HEADER LINES
   ============================================================ */

.portfolio-heading-line {

    position:
        relative;

    width:
        clamp(80px, 12vw, 235px);

    height:
        2px;

    flex:
        0 1 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.92)
        );

    box-shadow:
        0 0 8px rgba(212,175,55,.22);

    overflow:
        visible;

}


.portfolio-heading-line-right {

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.92),
            transparent
        );

}


/* ============================================================
   GLOWING LINE ENDPOINTS
   ============================================================ */

.portfolio-heading-line::after {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    width:
        7px;

    height:
        7px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        #ffe9a0;

    box-shadow:
        0 0 6px #f3cf62,
        0 0 15px rgba(212,175,55,.9),
        0 0 30px rgba(212,175,55,.35);

    animation:
        portfolioEndpointPulse
        2.8s
        ease-in-out
        infinite;

}


.portfolio-heading-line-left::after {

    right:
        -3px;

}


.portfolio-heading-line-right::after {

    left:
        -3px;

}


/* ============================================================
   MAIN FEATURE PANEL
   ============================================================ */

.portfolio-feature-panel {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    width:
        100%;

    min-height:
        340px;

    border:
        1px solid
        rgba(212,175,55,.78);

    border-radius:
        19px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

    box-shadow:
        0 0 0 1px rgba(212,175,55,.035),
        0 25px 80px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(212,175,55,.045);

    overflow:
        hidden;

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

}


/* ============================================================
   PANEL TOP LIGHT
   ============================================================ */

.portfolio-feature-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        5%;

    width:
        90%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,232,154,.8),
            transparent
        );

    box-shadow:
        0 0 12px rgba(212,175,55,.30);

}


/* ============================================================
   PANEL BOTTOM GOLD LIGHT
   ============================================================ */

.portfolio-feature-panel::after {

    content:
        "";

    position:
        absolute;

    bottom:
        -2px;

    left:
        35%;

    width:
        30%;

    height:
        3px;

    border-radius:
        50%;

    background:
        #f6d56a;

    box-shadow:
        0 0 8px #f3cf62,
        0 0 25px #d4af37,
        0 0 65px rgba(212,175,55,.75);

    animation:
        portfolioBottomGlow
        4s
        ease-in-out
        infinite;

}


/* ============================================================
   FEATURE CARD
   ============================================================ */

.portfolio-feature-card {

    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    min-width:
        0;

    padding:
        38px 30px 40px;

    text-align:
        center;

    isolation:
        isolate;

    animation:
        portfolioCardReveal
        .8s
        cubic-bezier(.16,1,.3,1)
        both;

    transition:
        background .4s ease,
        transform .4s cubic-bezier(.16,1,.3,1);

}


/* ============================================================
   STAGGERED CARD REVEAL
   ============================================================ */

.portfolio-feature-card:nth-child(1) {
    animation-delay: .15s;
}

.portfolio-feature-card:nth-child(2) {
    animation-delay: .25s;
}

.portfolio-feature-card:nth-child(3) {
    animation-delay: .35s;
}

.portfolio-feature-card:nth-child(4) {
    animation-delay: .45s;
}

.portfolio-feature-card:nth-child(5) {
    animation-delay: .55s;
}

.portfolio-feature-card:nth-child(6) {
    animation-delay: .65s;
}


/* ============================================================
   VERTICAL SEPARATORS
   ============================================================ */

.portfolio-feature-card:not(:last-child)::after {

    content:
        "";

    position:
        absolute;

    top:
        15px;

    right:
        0;

    width:
        1px;

    height:
        calc(100% - 30px);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(212,175,55,.42) 12%,
            rgba(212,175,55,.42) 88%,
            transparent
        );

    box-shadow:
        0 0 8px rgba(212,175,55,.06);

}


/* ============================================================
   CARD HOVER
   ============================================================ */

.portfolio-feature-card:hover {

    background:
        radial-gradient(
            ellipse at center,
            rgba(212,175,55,.055),
            transparent 70%
        );

    transform:
        translateY(-4px);

}


.portfolio-feature-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        15px;

    z-index:
        -1;

    border-radius:
        15px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(212,175,55,.08),
            transparent 65%
        );

    opacity:
        0;

    transform:
        scale(.82);

    transition:
        opacity .45s ease,
        transform .5s cubic-bezier(.16,1,.3,1);

}


.portfolio-feature-card:hover::before {

    opacity:
        1;

    transform:
        scale(1);

}


/* ============================================================
   ICON
   ============================================================ */

.portfolio-icon {

    position:
        relative;

    width:
        72px;

    height:
        72px;

    margin:
        0 auto 27px;

    color:
        var(--gold-light);

    filter:
        drop-shadow(0 0 5px rgba(212,175,55,.25));

    transition:
        transform .45s cubic-bezier(.16,1,.3,1),
        filter .4s ease;

    animation:
        portfolioIconFloat
        4.5s
        ease-in-out
        infinite;

}


.portfolio-feature-card:hover .portfolio-icon {

    transform:
        translateY(-5px)
        scale(1.08);

    filter:
        drop-shadow(0 0 7px rgba(212,175,55,.8))
        drop-shadow(0 0 18px rgba(212,175,55,.35));

}


/* ============================================================
   01 — EXPERIENCE ICON
   ============================================================ */

.portfolio-icon-experience {

    border-bottom:
        2px solid
        var(--gold-light);

}


.experience-bar {

    position:
        absolute;

    bottom:
        9px;

    width:
        11px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        3px 3px 0 0;

}


.bar-one {

    left:
        7px;

    height:
        18px;

}


.bar-two {

    left:
        26px;

    height:
        31px;

}


.bar-three {

    right:
        8px;

    height:
        46px;

}


.experience-arrow {

    position:
        absolute;

    left:
        12px;

    top:
        16px;

    width:
        45px;

    height:
        2px;

    background:
        var(--gold-light);

    transform:
        rotate(-35deg);

    transform-origin:
        left center;

    box-shadow:
        0 0 8px rgba(212,175,55,.5);

}


.experience-arrow::after {

    content:
        "";

    position:
        absolute;

    right:
        -1px;

    top:
        -6px;

    width:
        12px;

    height:
        12px;

    border-top:
        2px solid
        var(--gold-light);

    border-right:
        2px solid
        var(--gold-light);

}


/* ============================================================
   02 — DATA ICON
   ============================================================ */

.data-shield {

    position:
        absolute;

    left:
        16px;

    top:
        7px;

    width:
        40px;

    height:
        52px;

    border:
        2px solid
        var(--gold-light);

    clip-path:
        polygon(
            50% 0%,
            100% 18%,
            96% 72%,
            50% 100%,
            4% 72%,
            0% 18%
        );

}


.data-node {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        50%;

    background:
        #090909;

    box-shadow:
        0 0 7px rgba(212,175,55,.5);

}


.node-one {

    left:
        22px;

    top:
        25px;

}


.node-two {

    left:
        38px;

    top:
        16px;

}


.node-three {

    left:
        42px;

    top:
        37px;

}


.data-connection {

    position:
        absolute;

    height:
        2px;

    background:
        var(--gold-light);

    transform-origin:
        left center;

}


.connection-one {

    width:
        18px;

    left:
        27px;

    top:
        28px;

    transform:
        rotate(-30deg);

}


.connection-two {

    width:
        17px;

    left:
        28px;

    top:
        31px;

    transform:
        rotate(27deg);

}


/* ============================================================
   03 — RESULTS ICON
   ============================================================ */

.results-target {

    position:
        absolute;

    left:
        7px;

    top:
        8px;

    width:
        43px;

    height:
        43px;

    border:
        3px solid
        var(--gold-light);

    border-radius:
        50%;

}


.results-target::before {

    content:
        "";

    position:
        absolute;

    inset:
        8px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        50%;

}


.results-center {

    position:
        absolute;

    left:
        24px;

    top:
        25px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--gold-bright);

    box-shadow:
        0 0 9px rgba(255,232,154,.9);

}


.results-arrow {

    position:
        absolute;

    left:
        29px;

    top:
        13px;

    width:
        36px;

    height:
        2px;

    background:
        var(--gold-light);

    transform:
        rotate(-44deg);

    transform-origin:
        left center;

}


.results-arrow::after {

    content:
        "";

    position:
        absolute;

    right:
        -2px;

    top:
        -5px;

    width:
        11px;

    height:
        11px;

    border-top:
        2px solid
        var(--gold-light);

    border-right:
        2px solid
        var(--gold-light);

}


.results-bar {

    position:
        absolute;

    bottom:
        7px;

    width:
        8px;

    border:
        2px solid
        var(--gold-light);

}


.result-bar-one {

    right:
        13px;

    height:
        17px;

}


.result-bar-two {

    right:
        1px;

    height:
        31px;

}


/* ============================================================
   04 — REPORTING ICON
   ============================================================ */

.report-sheet {

    position:
        absolute;

    left:
        13px;

    top:
        5px;

    width:
        45px;

    height:
        55px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        5px;

}


.report-fold {

    position:
        absolute;

    left:
        45px;

    top:
        5px;

    width:
        13px;

    height:
        13px;

    border-left:
        2px solid
        var(--gold-light);

    border-bottom:
        2px solid
        var(--gold-light);

    transform:
        rotate(0deg);

}


.report-chart {

    position:
        absolute;

    left:
        22px;

    top:
        15px;

    width:
        20px;

    height:
        17px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        50%;

}


.report-chart::after {

    content:
        "";

    position:
        absolute;

    right:
        -3px;

    bottom:
        -3px;

    width:
        8px;

    height:
        8px;

    border-top:
        2px solid
        var(--gold-light);

    border-right:
        2px solid
        var(--gold-light);

}


.report-line {

    position:
        absolute;

    left:
        21px;

    height:
        2px;

    background:
        var(--gold-light);

}


.report-line-one {

    top:
        39px;

    width:
        25px;

}


.report-line-two {

    top:
        47px;

    width:
        19px;

}


.report-line-three {

    top:
        55px;

    width:
        25px;

}


/* ============================================================
   05 — PARTNERSHIP ICON
   ============================================================ */

.hand-circle {

    position:
        absolute;

    inset:
        5px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        50%;

}


.hand-left {

    position:
        absolute;

    left:
        9px;

    top:
        29px;

    width:
        27px;

    height:
        10px;

    border-top:
        3px solid
        var(--gold-light);

    transform:
        rotate(-26deg);

    border-radius:
        50%;

}


.hand-right {

    position:
        absolute;

    right:
        9px;

    top:
        32px;

    width:
        27px;

    height:
        10px;

    border-top:
        3px solid
        var(--gold-light);

    transform:
        rotate(25deg);

    border-radius:
        50%;

}


.handshake-line {

    position:
        absolute;

    left:
        22px;

    top:
        32px;

    width:
        29px;

    height:
        3px;

    background:
        var(--gold-light);

    transform:
        rotate(-7deg);

    box-shadow:
        0 0 6px rgba(212,175,55,.35);

}


/* ============================================================
   06 — ROI ICON
   ============================================================ */

.roi-ring {

    position:
        absolute;

    inset:
        7px;

    border:
        2px solid
        var(--gold-light);

    border-radius:
        50%;

}


.roi-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        9px;

    border:
        1px dashed
        rgba(243,207,98,.7);

    border-radius:
        50%;

    animation:
        portfolioRoiRotate
        8s
        linear
        infinite;

}


.roi-symbol {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

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

    color:
        var(--gold-bright);

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        24px;

    font-weight:
        800;

    line-height:
        1;

    text-shadow:
        0 0 10px rgba(212,175,55,.65);

}


.roi-cross {

    position:
        absolute;

    background:
        var(--gold-light);

}


.cross-top,
.cross-bottom {

    width:
        2px;

    height:
        10px;

    left:
        35px;

}


.cross-top {

    top:
        0;

}


.cross-bottom {

    bottom:
        0;

}


.cross-left,
.cross-right {

    width:
        10px;

    height:
        2px;

    top:
        35px;

}


.cross-left {

    left:
        0;

}


.cross-right {

    right:
        0;

}


/* ============================================================
   TITLES — HIGH VISIBILITY
   ============================================================ */

.portfolio-feature-card h3 {

    width:
        100%;

    margin:
        0 0 16px;

    padding:
        0;

    color:
        #ffffff;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size:
        clamp(16px, 1.05vw, 21px);

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        -.02em;

    text-align:
        center;

    white-space:
        normal;

    text-shadow:
        0 1px 2px rgba(0,0,0,.95),
        0 0 8px rgba(255,255,255,.04);

    transition:
        color .35s ease,
        text-shadow .35s ease,
        transform .35s ease;

}


.portfolio-feature-card:hover h3 {

    color:
        #ffe69a;

    transform:
        translateY(-2px);

    text-shadow:
        0 0 10px rgba(212,175,55,.55),
        0 0 22px rgba(212,175,55,.18);

}


/* ============================================================
   DESCRIPTIONS — EXTRA CLEAR
   ============================================================ */

.portfolio-feature-card p {

    width:
        100%;

    max-width:
        245px;

    margin:
        0 auto;

    color:
        #e4e4e4;

    font-family:
        "Inter",
        Arial,
        sans-serif;

    font-size:
        clamp(12px, .78vw, 15px);

    font-weight:
        500;

    line-height:
        1.72;

    letter-spacing:
        .005em;

    text-align:
        center;

    text-shadow:
        0 1px 2px rgba(0,0,0,.9);

    transition:
        color .35s ease;

}


.portfolio-feature-card:hover p {

    color:
        #f0f0f0;

}


/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes portfolioHeadingReveal {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes portfolioCardReveal {

    from {

        opacity:
            0;

        transform:
            translateY(30px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes portfolioIconFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-4px);

    }

}


@keyframes portfolioEndpointPulse {

    0%,
    100% {

        opacity:
            .65;

        transform:
            translateY(-50%)
            scale(.85);

        box-shadow:
            0 0 5px #f3cf62,
            0 0 12px rgba(212,175,55,.5);

    }

    50% {

        opacity:
            1;

        transform:
            translateY(-50%)
            scale(1.25);

        box-shadow:
            0 0 8px #ffe9a0,
            0 0 22px rgba(212,175,55,.95),
            0 0 38px rgba(212,175,55,.35);

    }

}


@keyframes portfolioBottomGlow {

    0%,
    100% {

        opacity:
            .55;

        transform:
            scaleX(.65);

    }

    50% {

        opacity:
            1;

        transform:
            scaleX(1);

    }

}


@keyframes portfolioParticle {

    0% {

        opacity:
            0;

        transform:
            translate3d(0,20px,0)
            scale(.5);

    }

    20% {

        opacity:
            .7;

    }

    50% {

        opacity:
            1;

        transform:
            translate3d(10px,-20px,0)
            scale(1);

    }

    100% {

        opacity:
            0;

        transform:
            translate3d(-8px,-75px,0)
            scale(.45);

    }

}


@keyframes portfolioGlowLeft {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(70px,-30px,0)
            scale(1.12);

    }

}


@keyframes portfolioGlowRight {

    from {

        transform:
            translate3d(0,0,0)
            scale(1);

    }

    to {

        transform:
            translate3d(-70px,45px,0)
            scale(1.1);

    }

}


@keyframes portfolioRoiRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1700px) {

    .portfolio-represent-section {

        padding-left:
            40px;

        padding-right:
            40px;

    }

    .portfolio-feature-card {

        padding:
            44px 38px 46px;

    }

    .portfolio-feature-card h3 {

        font-size:
            20px;

    }

    .portfolio-feature-card p {

        max-width:
            270px;

        font-size:
            14px;

        line-height:
            1.78;

    }

    .portfolio-icon {

        width:
            78px;

        height:
            78px;

        margin-bottom:
            30px;

    }

}


/* ============================================================
   TABLET — 3 COLUMNS
   ============================================================ */

@media (max-width: 1250px) {

    .portfolio-represent-section {

        padding:
            65px 22px 70px;

    }

    .portfolio-reference-heading {

        gap:
            22px;

        margin-bottom:
            40px;

    }

    .portfolio-reference-heading h2 {

        font-size:
            clamp(19px, 2.4vw, 29px);

    }

    .portfolio-feature-panel {

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

    }

    .portfolio-feature-card {

        min-height:
            300px;

        padding:
            35px 25px;

    }

    .portfolio-feature-card:nth-child(3)::after {

        display:
            none;

    }

    .portfolio-feature-card:nth-child(4)::after {

        display:
            block;

    }

    .portfolio-feature-card p {

        max-width:
            230px;

        font-size:
            12px;

    }

}


/* ============================================================
   TABLET — 2 COLUMNS
   ============================================================ */

@media (max-width: 850px) {

    .portfolio-represent-section {

        padding:
            55px 16px 60px;

    }

    .portfolio-reference-heading {

        gap:
            14px;

        margin-bottom:
            34px;

    }

    .portfolio-reference-heading h2 {

        font-size:
            16px;

        letter-spacing:
            .04em;

    }

    .portfolio-heading-line {

        width:
            70px;

    }

    .portfolio-feature-panel {

        grid-template-columns:
            repeat(2, minmax(0,1fr));

    }

    .portfolio-feature-card {

        min-height:
            285px;

        padding:
            32px 24px;

    }

    .portfolio-feature-card:nth-child(2)::after,
    .portfolio-feature-card:nth-child(4)::after,
    .portfolio-feature-card:nth-child(6)::after {

        display:
            none;

    }

    .portfolio-feature-card:nth-child(odd)::after {

        display:
            block;

    }

    .portfolio-feature-card h3 {

        font-size:
            15px;

    }

    .portfolio-feature-card p {

        font-size:
            11.5px;

        max-width:
            215px;

    }

}


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

@media (max-width: 600px) {

    .portfolio-represent-section {

        padding:
            45px 10px 50px;

    }

    .portfolio-reference-heading {

        gap:
            9px;

        margin-bottom:
            28px;

    }

    .portfolio-reference-heading h2 {

        font-size:
            12px;

        letter-spacing:
            .035em;

        line-height:
            1.2;

    }

    .portfolio-heading-line {

        width:
            35px;

        height:
            1px;

    }

    .portfolio-heading-line::after {

        width:
            5px;

        height:
            5px;

    }

    .portfolio-feature-panel {

        grid-template-columns:
            1fr;

        border-radius:
            16px;

    }

    .portfolio-feature-card {

        min-height:
            auto;

        padding:
            35px 18px 38px;

    }

    .portfolio-feature-card:not(:last-child) {

        border-bottom:
            1px solid
            rgba(212,175,55,.20);

    }

    .portfolio-feature-card:not(:last-child)::after {

        display:
            none;

    }

    .portfolio-icon {

        width:
            68px;

        height:
            68px;

        margin-bottom:
            23px;

    }

    .portfolio-feature-card h3 {

        font-size:
            16px;

        margin-bottom:
            12px;

    }

    .portfolio-feature-card p {

        max-width:
            340px;

        font-size:
            12px;

        line-height:
            1.75;

    }

}


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

@media (max-width: 380px) {

    .portfolio-reference-heading {

        gap:
            6px;

    }

    .portfolio-reference-heading h2 {

        font-size:
            10px;

    }

    .portfolio-heading-line {

        width:
            25px;

    }

    .portfolio-feature-card {

        padding-left:
            14px;

        padding-right:
            14px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .portfolio-represent-section *,
    .portfolio-represent-section *::before,
    .portfolio-represent-section *::after {

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .001ms !important;

    }

}/* End custom CSS */