/* ==========================================================================
   Shendy Tech
   Clients & Presence Section
   ========================================================================== */

.stc-clients {

    --stc-dark:
        #020a18;

    --stc-dark-2:
        #041329;

    --stc-dark-3:
        #061b3c;

    --stc-navy:
        #062b66;

    --stc-blue:
        #0d8cff;

    --stc-blue-light:
        #57baff;

    --stc-gold:
        #f8b400;

    --stc-gold-light:
        #ffd46a;

    --stc-white:
        #ffffff;

    --stc-muted:
        #849bbe;

    --mouse-x:
        50%;

    --mouse-y:
        50%;


    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    padding:
        110px 0 85px;

    background:

        radial-gradient(
            circle at 80% 12%,
            rgba(
                18,
                124,
                255,
                .12
            ),
            transparent
            30%
        ),

        radial-gradient(
            circle at 7% 78%,
            rgba(
                248,
                180,
                0,
                .07
            ),
            transparent
            28%
        ),

        linear-gradient(
            135deg,
            #020816 0%,
            #04142e 48%,
            #020918 100%
        );

    color:
        #ffffff;

}


/* ==========================================================================
   Container
   ========================================================================== */

.stc-clients
.st-container {

    position:
        relative;

    z-index:
        5;

    width:
        min(
            1420px,
            calc(
                100% -
                60px
            )
        );

    margin:
        0 auto;

}


/* ==========================================================================
   Background Grid
   ========================================================================== */

.stc-clients-grid {

    position:
        absolute;

    inset:
        0;

    z-index:
        -6;

    opacity:
        .32;

    background-image:

        linear-gradient(
            rgba(
                66,
                139,
                230,
                .045
            )
            1px,
            transparent
            1px
        ),

        linear-gradient(
            90deg,
            rgba(
                66,
                139,
                230,
                .045
            )
            1px,
            transparent
            1px
        );

    background-size:
        56px 56px;

    mask-image:

        linear-gradient(
            to bottom,
            transparent,
            black 8%,
            black 90%,
            transparent
        );

}


/* ==========================================================================
   Noise
   ========================================================================== */

.stc-clients-noise {

    position:
        absolute;

    inset:
        0;

    z-index:
        -5;

    pointer-events:
        none;

    opacity:
        .18;

    background-image:

        radial-gradient(
            rgba(
                255,
                255,
                255,
                .6
            )
            .6px,
            transparent
            .6px
        );

    background-size:
        20px 20px;

}


/* ==========================================================================
   Main Glows
   ========================================================================== */

.stc-clients-glow {

    position:
        absolute;

    z-index:
        -4;

    pointer-events:
        none;

    border-radius:
        50%;

    filter:
        blur(
            15px
        );

}


.stc-clients-glow-one {

    top:
        -190px;

    right:
        9%;

    width:
        580px;

    height:
        580px;

    background:

        radial-gradient(
            circle,
            rgba(
                24,
                128,
                255,
                .19
            ),
            transparent
            70%
        );

    animation:

        stcMainGlow
        10s
        ease-in-out
        infinite;

}


.stc-clients-glow-two {

    left:
        -180px;

    bottom:
        50px;

    width:
        460px;

    height:
        460px;

    background:

        radial-gradient(
            circle,
            rgba(
                248,
                180,
                0,
                .11
            ),
            transparent
            70%
        );

    animation:

        stcMainGlow
        12s
        ease-in-out
        infinite reverse;

}


@keyframes stcMainGlow {

    0%,
    100% {

        transform:
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            translate(
                40px,
                25px
            );

    }

}


/* ==========================================================================
   Mouse Glow
   ========================================================================== */

.stc-clients-mouse-glow {

    position:
        absolute;

    z-index:
        -3;

    top:
        0;

    left:
        0;

    width:
        720px;

    height:
        720px;

    pointer-events:
        none;

    transform:

        translate(
            calc(
                var(--mouse-x) -
                360px
            ),
            calc(
                var(--mouse-y) -
                360px
            )
        );

    background:

        radial-gradient(
            circle,
            rgba(
                23,
                131,
                255,
                .075
            ),
            rgba(
                23,
                131,
                255,
                .02
            )
            35%,
            transparent
            68%
        );

}


/* ==========================================================================
   Particles
   ========================================================================== */

.stc-clients-particles {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    pointer-events:
        none;

}


.stc-clients-particles
span {

    position:
        absolute;

    left:
        var(--x);

    top:
        var(--y);

    width:
        var(--size);

    height:
        var(--size);

    border-radius:
        50%;

    opacity:
        .25;

    background:
        #55b3ff;

    box-shadow:

        0 0 10px
        rgba(
            71,
            168,
            255,
            .9
        );

    animation:

        stcParticlePulse
        var(--duration)
        ease-in-out
        var(--delay)
        infinite;

}


.stc-clients-particles
span:nth-child(3n) {

    background:
        #f8b400;

    box-shadow:

        0 0 10px
        rgba(
            248,
            180,
            0,
            .85
        );

}


@keyframes stcParticlePulse {

    0%,
    100% {

        opacity:
            .12;

        transform:
            scale(.7);

    }

    50% {

        opacity:
            .8;

        transform:
            scale(1.5);

    }

}


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

.stc-clients-hero {

    display:
        grid;

    grid-template-columns:

        minmax(
            410px,
            .82fr
        )

        minmax(
            590px,
            1.18fr
        );

    align-items:
        center;

    gap:
        65px;

}


/* ==========================================================================
   Content Animation
   ========================================================================== */

.stc-clients-content {

    opacity:
        0;

    transform:
        translateY(
            30px
        );

    transition:

        opacity
        .9s
        ease,

        transform
        .9s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        );

}


.stc-clients.is-visible
.stc-clients-content {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


/* ==========================================================================
   Badge
   ========================================================================== */

.stc-clients-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    width:
        fit-content;

    min-height:
        44px;

    padding:
        6px 14px;

    border:
        1px solid
        rgba(
            248,
            180,
            0,
            .35
        );

    border-radius:
        999px;

    color:
        #ffd66b;

    background:

        linear-gradient(
            90deg,
            rgba(
                248,
                180,
                0,
                .12
            ),
            rgba(
                248,
                180,
                0,
                .025
            )
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .06
        ),

        0 0 25px
        rgba(
            248,
            180,
            0,
            .055
        );

    font-size:
        13px;

    font-weight:
        900;

}


.stc-clients-badge-icon {

    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #ffd66b;

    background:
        rgba(
            248,
            180,
            0,
            .10
        );

}


.stc-clients-badge-icon
svg {

    width:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.stc-clients-badge
> i {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #f8b400;

    box-shadow:

        0 0 12px
        #f8b400;

    animation:

        stcStatusPulse
        1.8s
        infinite;

}


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

.stc-clients-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        34px;

    color:
        #54b8ff;

    font-size:
        12px;

    font-weight:
        900;

}


.stc-clients-eyebrow
span {

    width:
        36px;

    height:
        2px;

    border-radius:
        99px;

    background:

        linear-gradient(
            90deg,
            #168fff,
            transparent
        );

}


[dir="rtl"]
.stc-clients-eyebrow
span {

    background:

        linear-gradient(
            270deg,
            #168fff,
            transparent
        );

}


/* ==========================================================================
   Title
   ========================================================================== */

.stc-clients-title {

    margin:
        15px 0 20px;

    color:
        #ffffff;

    font-size:
        clamp(
            43px,
            4vw,
            68px
        );

    line-height:
        1.13;

    font-weight:
        900;

    letter-spacing:
        -.03em;

}


.stc-clients-title
span {

    display:
        block;

    width:
        fit-content;

    color:
        transparent;

    background:

        linear-gradient(
            90deg,
            #ffd768,
            #f8b400,
            #ffc82c
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

}


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

.stc-clients-description {

    max-width:
        610px;

    margin:
        0;

    color:
        #889fc1;

    font-size:
        15px;

    line-height:
        2;

    font-weight:
        500;

}


/* ==========================================================================
   Statistics
   ========================================================================== */

.stc-clients-stats {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        34px;

}


.stc-stat-card {

    position:
        relative;

    overflow:
        hidden;

    min-height:
        88px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px;

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

    border-radius:
        16px;

    background:

        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                .075
            ),
            rgba(
                255,
                255,
                255,
                .018
            )
        );

    backdrop-filter:
        blur(
            15px
        );

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

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .06
        ),

        0 20px 45px
        rgba(
            0,
            0,
            0,
            .16
        );

    transition:
        .35s ease;

}


.stc-stat-card::after {

    content:
        "";

    position:
        absolute;

    right:
        15%;

    left:
        15%;

    bottom:
        0;

    height:
        1px;

    opacity:
        .6;

    background:

        linear-gradient(
            90deg,
            transparent,
            #f8b400,
            transparent
        );

}


.stc-stat-card:hover {

    transform:
        translateY(
            -5px
        );

    border-color:
        rgba(
            248,
            180,
            0,
            .25
        );

}


.stc-stat-icon {

    flex:
        0 0 43px;

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

}


.stc-stat-icon.gold {

    color:
        #ffd669;

    border:
        1px solid
        rgba(
            248,
            180,
            0,
            .26
        );

    background:
        rgba(
            248,
            180,
            0,
            .075
        );

}


.stc-stat-icon.blue {

    color:
        #59baff;

    border:
        1px solid
        rgba(
            24,
            143,
            255,
            .27
        );

    background:
        rgba(
            24,
            143,
            255,
            .075
        );

}


.stc-stat-icon
svg {

    width:
        22px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.stc-stat-card
> div {

    min-width:
        0;

}


.stc-stat-card
strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        24px;

    line-height:
        1.1;

    font-weight:
        900;

}


.stc-stat-card
div
span {

    display:
        block;

    margin-top:
        4px;

    color:
        #849bbe;

    font-size:
        10px;

    line-height:
        1.4;

    font-weight:
        800;

}


/* ==========================================================================
   Map Card
   ========================================================================== */

.stc-map-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(
            51,
            145,
            255,
            .18
        );

    border-radius:
        27px;

    background:
        rgba(
            3,
            18,
            44,
            .88
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .07
        ),

        0 35px 100px
        rgba(
            0,
            0,
            0,
            .37
        ),

        0 0 80px
        rgba(
            9,
            105,
            255,
            .055
        );

    opacity:
        0;

    transform:
        translateY(
            30px
        );

    transition:

        opacity
        1s
        ease
        .15s,

        transform
        1s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        )
        .15s;

}


.stc-clients.is-visible
.stc-map-card {

    opacity:
        1;

    transform:
        translateY(
            0
        );

}


/* ==========================================================================
   Map Top
   ========================================================================== */

.stc-map-card-top {

    position:
        relative;

    z-index:
        4;

    min-height:
        64px;

    padding:
        0 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

}


.stc-map-status {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        #dce9ff;

    font-size:
        11px;

    font-weight:
        800;

}


.stc-map-status
span {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #36dda0;

    box-shadow:

        0 0 0 5px
        rgba(
            54,
            221,
            160,
            .08
        ),

        0 0 14px
        rgba(
            54,
            221,
            160,
            .75
        );

    animation:

        stcStatusPulse
        1.7s
        infinite;

}


@keyframes stcStatusPulse {

    0%,
    100% {

        opacity:
            1;

    }

    50% {

        opacity:
            .35;

    }

}


.stc-map-region {

    color:
        rgba(
            152,
            181,
            226,
            .50
        );

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .19em;

}


/* ==========================================================================
   Map Image Wrapper
   ========================================================================== */

.stc-map-image-wrapper {

    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    height:
        465px;

    background:
        #03122d;

}


/* ==========================================================================
   Map Image
   ========================================================================== */

.stc-map-image {

    position:
        absolute;

    z-index:
        2;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transform:
        scale(
            1.015
        );

    filter:

        saturate(
            1.08
        )

        contrast(
            1.04
        )

        brightness(
            .95
        );

    animation:

        stcMapFloat
        10s
        ease-in-out
        infinite;

}


@keyframes stcMapFloat {

    0%,
    100% {

        transform:
            scale(
                1.015
            )
            translate(
                0,
                0
            );

    }

    50% {

        transform:
            scale(
                1.045
            )
            translate(
                5px,
                -3px
            );

    }

}


/* ==========================================================================
   Map Image Glow
   ========================================================================== */

.stc-map-image-glow {

    position:
        absolute;

    z-index:
        3;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 47% 52%,
            rgba(
                248,
                180,
                0,
                .13
            ),
            transparent
            22%
        ),

        radial-gradient(
            circle at 70% 65%,
            rgba(
                0,
                136,
                255,
                .08
            ),
            transparent
            28%
        ),

        linear-gradient(
            to bottom,
            rgba(
                2,
                11,
                28,
                .03
            ),
            rgba(
                2,
                11,
                28,
                .12
            )
        );

}


/* ==========================================================================
   Map Scan
   ========================================================================== */

.stc-map-scan {

    position:
        absolute;

    z-index:
        5;

    top:
        -10%;

    left:
        -15%;

    width:
        130%;

    height:
        8%;

    pointer-events:
        none;

    opacity:
        .42;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(
                71,
                171,
                255,
                .02
            ),
            rgba(
                73,
                181,
                255,
                .15
            ),
            rgba(
                73,
                181,
                255,
                .02
            ),
            transparent
        );

    filter:
        blur(
            2px
        );

    animation:

        stcMapScan
        6.5s
        linear
        infinite;

}


@keyframes stcMapScan {

    0% {

        transform:
            translateY(
                -80px
            );

    }

    100% {

        transform:
            translateY(
                570px
            );

    }

}


/* ==========================================================================
   Map Flares
   ========================================================================== */

.stc-map-flare {

    position:
        absolute;

    z-index:
        6;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    pointer-events:
        none;

}


.stc-map-flare-one {

    left:
        47%;

    top:
        53%;

    background:
        #ffffff;

    box-shadow:

        0 0 8px
        #ffffff,

        0 0 20px
        #f8b400,

        0 0 40px
        rgba(
            248,
            180,
            0,
            .8
        );

    animation:

        stcFlarePulse
        2.2s
        ease-in-out
        infinite;

}


.stc-map-flare-two {

    left:
        72%;

    top:
        68%;

    background:
        #57baff;

    box-shadow:

        0 0 8px
        #57baff,

        0 0 22px
        rgba(
            20,
            142,
            255,
            .85
        );

    animation:

        stcFlarePulse
        2.8s
        ease-in-out
        infinite
        .7s;

}


@keyframes stcFlarePulse {

    0%,
    100% {

        opacity:
            .35;

        transform:
            scale(
                .8
            );

    }

    50% {

        opacity:
            1;

        transform:
            scale(
                1.9
            );

    }

}


/* ==========================================================================
   Map Bottom
   ========================================================================== */

.stc-map-card-bottom {

    position:
        relative;

    z-index:
        4;

    min-height:
        64px;

    padding:
        0 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

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

    background:
        rgba(
            4,
            21,
            50,
            .85
        );

}


.stc-map-connection-status {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #8099be;

    font-size:
        10px;

    font-weight:
        800;

}


.stc-map-connection-status
i {

    width:
        38px;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            #f8b400,
            transparent
        );

}


[dir="rtl"]
.stc-map-connection-status
i {

    background:

        linear-gradient(
            270deg,
            #f8b400,
            transparent
        );

}


.stc-map-country-count {

    display:
        flex;

    align-items:
        baseline;

    gap:
        6px;

}


.stc-map-country-count
strong {

    color:
        #ffd45c;

    font-size:
        20px;

    font-weight:
        900;

}


.stc-map-country-count
span {

    color:
        #7891b5;

    font-size:
        10px;

    font-weight:
        800;

}


/* ==========================================================================
   Clients Showcase
   ========================================================================== */

.stc-clients-showcase {

    margin-top:
        82px;

}


/* ==========================================================================
   Showcase Heading
   ========================================================================== */

.stc-clients-showcase-head {

    margin-bottom:
        23px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.stc-clients-showcase-kicker {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #f8b400;

    font-size:
        11px;

    font-weight:
        900;

}


.stc-clients-showcase-head
h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        34px;

    line-height:
        1.15;

    font-weight:
        900;

}


/* ==========================================================================
   Slider Buttons
   ========================================================================== */

.stc-slider-controls {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.stc-slider-button {

    width:
        43px;

    height:
        43px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    color:
        #93a9ca;

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

    cursor:
        pointer;

    transition:
        .3s ease;

}


.stc-slider-button:hover {

    border-color:
        #f8b400;

    color:
        #061329;

    background:
        #f8b400;

    box-shadow:

        0 0 25px
        rgba(
            248,
            180,
            0,
            .20
        );

    transform:
        translateY(
            -3px
        );

}


.stc-slider-button
svg {

    width:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


/* ==========================================================================
   Slider
   ========================================================================== */

.stc-clients-slider {

    overflow-x:
        auto;

    overflow-y:
        visible;

    padding:
        8px 4px 26px;

    scroll-snap-type:
        x mandatory;

    scrollbar-width:
        none;

}


.stc-clients-slider::-webkit-scrollbar {

    display:
        none;

}


.stc-clients-track {

    display:
        flex;

    gap:
        18px;

    width:
        max-content;

}


/* ==========================================================================
   Client Card
   ========================================================================== */

.stc-client-card {

    --card-x:
        50%;

    --card-y:
        50%;


    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    flex:
        0 0 285px;

    width:
        285px;

    min-height:
        230px;

    display:
        flex;

    flex-direction:
        column;

    color:
        inherit;

    text-decoration:
        none;

    scroll-snap-align:
        start;

    border:
        1px solid
        rgba(
            74,
            165,
            255,
            .17
        );

    border-radius:
        21px;

    background:

        linear-gradient(
            145deg,
            rgba(
                8,
                34,
                76,
                .92
            ),
            rgba(
                3,
                14,
                34,
                .95
            )
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .06
        ),

        0 22px 55px
        rgba(
            0,
            0,
            0,
            .27
        );

    transform-style:
        preserve-3d;

    transition:

        transform
        .24s
        ease,

        border-color
        .35s
        ease,

        box-shadow
        .35s
        ease;

}


.stc-client-card:hover {

    border-color:
        rgba(
            73,
            173,
            255,
            .50
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .08
        ),

        0 28px 75px
        rgba(
            0,
            0,
            0,
            .38
        ),

        0 0 35px
        rgba(
            25,
            128,
            255,
            .12
        );

}


/* ==========================================================================
   Client Card Glow
   ========================================================================== */

.stc-client-card-glow {

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .65;

    background:

        radial-gradient(
            circle at
            var(--card-x)
            var(--card-y),

            rgba(
                44,
                153,
                255,
                .18
            ),

            transparent
            42%
        );

}


/* ==========================================================================
   Card Shine
   ========================================================================== */

.stc-client-card-shine {

    position:
        absolute;

    z-index:
        4;

    top:
        -130%;

    left:
        -55%;

    width:
        52%;

    height:
        330%;

    pointer-events:
        none;

    transform:
        rotate(
            25deg
        );

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                255,
                255,
                255,
                .10
            ),
            transparent
        );

    transition:

        left
        .9s
        ease;

}


.stc-client-card:hover
.stc-client-card-shine {

    left:
        150%;

}


/* ==========================================================================
   Client Number
   ========================================================================== */

.stc-client-number {

    position:
        absolute;

    z-index:
        6;

    top:
        14px;

    right:
        16px;

    color:
        rgba(
            152,
            180,
            221,
            .40
        );

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .08em;

}


[dir="rtl"]
.stc-client-number {

    right:
        auto;

    left:
        16px;

}


/* ==========================================================================
   Client Logo Area
   ========================================================================== */

.stc-client-logo-area {

    position:
        relative;

    min-height:
        164px;

    display:
        grid;

    place-items:
        center;

    padding:
        30px 25px 19px;

}


/* ==========================================================================
   Logo Ring Glow
   ========================================================================== */

.stc-client-logo-ring {

    position:
        absolute;

    z-index:
        1;

    left:
        50%;

    top:
        50%;

    width:
        145px;

    height:
        105px;

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

    pointer-events:
        none;

}


.stc-client-logo-ring::before {

    content:
        "";

    position:
        absolute;

    inset:
        12%;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle,
            rgba(
                24,
                132,
                255,
                .15
            ),
            rgba(
                24,
                132,
                255,
                .03
            )
            45%,
            transparent
            70%
        );

    filter:
        blur(
            10px
        );

}


.stc-client-logo-ring
span {

    position:
        absolute;

    inset:
        0;

    border:
        1px solid
        rgba(
            58,
            164,
            255,
            .10
        );

    border-radius:
        50%;

    animation:

        stcLogoRing
        3.6s
        ease-out
        infinite;

}


.stc-client-logo-ring
span:nth-child(2) {

    animation-delay:
        1.8s;

}


@keyframes stcLogoRing {

    0% {

        opacity:
            .8;

        transform:
            scale(
                .65
            );

    }

    100% {

        opacity:
            0;

        transform:
            scale(
                1.25
            );

    }

}


/* ==========================================================================
   Client Logo
   ========================================================================== */

.stc-client-logo {

    position:
        relative;

    z-index:
        3;

    width:
        100%;

    min-height:
        105px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.stc-client-logo
img {

    display:
        block;

    width:
        auto;

    height:
        auto;

    max-width:
        175px;

    max-height:
        88px;

    object-fit:
        contain;

    opacity:
        .92;

    /*
    |--------------------------------------------------------------------------
    | Logo Light Effect
    |--------------------------------------------------------------------------
    */

    filter:

        brightness(
            1.16
        )

        contrast(
            1.05
        )

        drop-shadow(
            0 0 5px
            rgba(
                255,
                255,
                255,
                .30
            )
        )

        drop-shadow(
            0 0 12px
            rgba(
                40,
                148,
                255,
                .38
            )
        )

        drop-shadow(
            0 0 25px
            rgba(
                17,
                112,
                255,
                .20
            )
        );

    transform:
        translateZ(
            24px
        );

    transition:

        transform
        .45s
        cubic-bezier(
            .16,
            1,
            .3,
            1
        ),

        filter
        .45s
        ease,

        opacity
        .45s
        ease;

}


.stc-client-card:hover
.stc-client-logo
img {

    opacity:
        1;

    transform:

        translateZ(
            38px
        )

        scale(
            1.09
        );

    filter:

        brightness(
            1.24
        )

        contrast(
            1.08
        )

        saturate(
            1.10
        )

        drop-shadow(
            0 0 7px
            rgba(
                255,
                255,
                255,
                .48
            )
        )

        drop-shadow(
            0 0 17px
            rgba(
                50,
                165,
                255,
                .62
            )
        )

        drop-shadow(
            0 0 35px
            rgba(
                19,
                126,
                255,
                .36
            )
        );

}


/* ==========================================================================
   Logo Without Image
   ========================================================================== */

.stc-client-logo
strong {

    color:
        #ffffff;

    font-size:
        21px;

    font-weight:
        900;

    text-align:
        center;

    text-shadow:

        0 0 15px
        rgba(
            64,
            166,
            255,
            .40
        );

}


/* ==========================================================================
   Client Line
   ========================================================================== */

.stc-client-line {

    height:
        1px;

    margin:
        0 18px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                88,
                165,
                255,
                .18
            ),
            rgba(
                248,
                180,
                0,
                .14
            ),
            transparent
        );

}


/* ==========================================================================
   Client Footer
   ========================================================================== */

.stc-client-footer {

    position:
        relative;

    z-index:
        5;

    min-height:
        65px;

    padding:
        0 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


/* ==========================================================================
   Client Name
   ========================================================================== */

.stc-client-name {

    min-width:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.stc-client-name
> span {

    flex:
        0 0 7px;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #37dc9c;

    box-shadow:

        0 0 0 5px
        rgba(
            55,
            220,
            156,
            .07
        ),

        0 0 11px
        rgba(
            55,
            220,
            156,
            .70
        );

}


.stc-client-name
strong {

    overflow:
        hidden;

    color:
        #b2c3dd;

    font-size:
        10px;

    font-weight:
        900;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

    transition:
        .3s ease;

}


.stc-client-card:hover
.stc-client-name
strong {

    color:
        #ffffff;

}


/* ==========================================================================
   Client Arrow
   ========================================================================== */

.stc-client-arrow {

    flex:
        0 0 30px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        50%;

    color:
        #91aacf;

    transition:
        .3s ease;

}


.stc-client-arrow
svg {

    width:
        14px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.stc-client-card:hover
.stc-client-arrow {

    color:
        #07172f;

    border-color:
        #f8b400;

    background:
        #f8b400;

    box-shadow:

        0 0 18px
        rgba(
            248,
            180,
            0,
            .22
        );

}


/* ==========================================================================
   Client Online
   ========================================================================== */

.stc-client-online {

    flex:
        0 0 30px;

    width:
        30px;

    height:
        30px;

    display:
        grid;

    place-items:
        center;

}


.stc-client-online
i {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #37dc9c;

    box-shadow:

        0 0 13px
        rgba(
            55,
            220,
            156,
            .85
        );

}


/* ==========================================================================
   Trust Bar
   ========================================================================== */

.stc-trust-bar {

    position:
        relative;

    overflow:
        hidden;

    margin-top:
        45px;

    min-height:
        126px;

    padding:
        24px 34px;

    display:
        grid;

    grid-template-columns:

        1fr
        auto
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        26px;

    border:
        1px solid
        rgba(
            248,
            180,
            0,
            .13
        );

    border-radius:
        22px;

    background:

        linear-gradient(
            100deg,
            rgba(
                248,
                180,
                0,
                .025
            ),
            rgba(
                7,
                34,
                75,
                .68
            )
            50%,
            rgba(
                20,
                136,
                255,
                .025
            )
        );

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        0 25px 70px
        rgba(
            0,
            0,
            0,
            .16
        );

}


.stc-trust-bar::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        8%;

    right:
        8%;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(
                248,
                180,
                0,
                .65
            ),
            rgba(
                61,
                162,
                255,
                .55
            ),
            transparent
        );

}


/* ==========================================================================
   Trust Item
   ========================================================================== */

.stc-trust-item {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.stc-trust-icon {

    flex:
        0 0 55px;

    width:
        55px;

    height:
        55px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

}


.stc-trust-icon.gold {

    color:
        #ffd66c;

    border:
        1px solid
        rgba(
            248,
            180,
            0,
            .25
        );

    background:
        rgba(
            248,
            180,
            0,
            .06
        );

    box-shadow:

        0 0 24px
        rgba(
            248,
            180,
            0,
            .06
        );

}


.stc-trust-icon.blue {

    color:
        #61c0ff;

    border:
        1px solid
        rgba(
            30,
            145,
            255,
            .27
        );

    background:
        rgba(
            30,
            145,
            255,
            .06
        );

}


.stc-trust-icon
svg {

    width:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.6;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

}


.stc-trust-item
div {

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

}


.stc-trust-item
strong {

    color:
        #ffffff;

    font-size:
        14px;

    font-weight:
        900;

}


.stc-trust-item
small {

    max-width:
        245px;

    color:
        #7e97bb;

    font-size:
        10px;

    line-height:
        1.7;

    font-weight:
        600;

}


.stc-trust-divider {

    width:
        1px;

    height:
        55px;

    background:

        linear-gradient(
            to bottom,
            transparent,
            rgba(
                255,
                255,
                255,
                .14
            ),
            transparent
        );

}


/* ==========================================================================
   Responsive - 1250
   ========================================================================== */

@media (
    max-width:
    1250px
) {

    .stc-clients-hero {

        grid-template-columns:
            .88fr
            1.12fr;

        gap:
            35px;

    }


    .stc-clients-title {

        font-size:
            49px;

    }


    .stc-clients-stats {

        grid-template-columns:
            1fr;

    }


    .stc-stat-card {

        min-height:
            72px;

    }


    .stc-map-image-wrapper {

        height:
            430px;

    }

}


/* ==========================================================================
   Responsive - 991
   ========================================================================== */

@media (
    max-width:
    991px
) {

    .stc-clients {

        padding:
            85px 0 65px;

    }


    .stc-clients
    .st-container {

        width:
            min(
                760px,
                calc(
                    100% -
                    34px
                )
            );

    }


    .stc-clients-hero {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }


    .stc-clients-content {

        text-align:
            center;

    }


    .stc-clients-badge,
    .stc-clients-eyebrow {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .stc-clients-eyebrow {

        justify-content:
            center;

    }


    .stc-clients-title {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .stc-clients-title
    span {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .stc-clients-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .stc-clients-stats {

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

    }


    .stc-map-image-wrapper {

        height:
            430px;

    }


    .stc-trust-bar {

        grid-template-columns:
            1fr;

        gap:
            20px;

    }


    .stc-trust-divider {

        width:
            100%;

        height:
            1px;

        background:

            linear-gradient(
                90deg,
                transparent,
                rgba(
                    255,
                    255,
                    255,
                    .14
                ),
                transparent
            );

    }

}


/* ==========================================================================
   Responsive - 767
   ========================================================================== */

@media (
    max-width:
    767px
) {

    .stc-clients {

        padding:
            68px 0 55px;

    }


    .stc-clients
    .st-container {

        width:
            calc(
                100% -
                24px
            );

    }


    .stc-clients-title {

        font-size:
            38px;

    }


    .stc-clients-description {

        font-size:
            14px;

        line-height:
            1.9;

    }


    .stc-clients-stats {

        grid-template-columns:
            1fr;

    }


    .stc-stat-card {

        justify-content:
            flex-start;

    }


    .stc-map-card {

        border-radius:
            20px;

    }


    .stc-map-card-top {

        min-height:
            56px;

        padding:
            0 15px;

    }


    .stc-map-region {

        display:
            none;

    }


    .stc-map-image-wrapper {

        height:
            330px;

    }


    .stc-map-image {

        object-position:
            center;

    }


    .stc-map-card-bottom {

        min-height:
            58px;

        padding:
            0 15px;

    }


    .stc-clients-showcase {

        margin-top:
            58px;

    }


    .stc-clients-showcase-head
    h3 {

        font-size:
            28px;

    }


    .stc-client-card {

        flex-basis:
            250px;

        width:
            250px;

        min-height:
            215px;

    }


    .stc-client-logo-area {

        min-height:
            150px;

    }


    .stc-client-logo
    img {

        max-width:
            150px;

        max-height:
            78px;

    }


    .stc-trust-bar {

        padding:
            23px 20px;

    }

}


/* ==========================================================================
   Responsive - 480
   ========================================================================== */

@media (
    max-width:
    480px
) {

    .stc-clients-title {

        font-size:
            33px;

    }


    .stc-clients-badge {

        font-size:
            11px;

    }


    .stc-map-image-wrapper {

        height:
            270px;

    }


    .stc-map-image {

        transform:
            scale(
                1.12
            );

        animation:
            none;

    }


    .stc-client-card {

        flex-basis:
            228px;

        width:
            228px;

    }


    .stc-client-logo
    img {

        max-width:
            135px;

    }


    .stc-slider-button {

        width:
            38px;

        height:
            38px;

    }


    .stc-trust-icon {

        flex-basis:
            48px;

        width:
            48px;

        height:
            48px;

    }

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

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

    .stc-clients *,
    .stc-clients *::before,
    .stc-clients *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}