:root{

    /* Brand */

    --primary:#176BFF;
    --primary-light:#43C3FF;

    /* Neutral */

    --dark:#071A2B;
    --text:#5D6D7D;
    --white:#FFFFFF;
    --bg:#F8FBFF;

    /* Effects */

    --border:rgba(23,107,255,.10);

    --shadow:rgba(7,26,43,.10);


      /* Border Radius */

    --radius-xs:6px;
    --radius-sm:10px;
    --radius-md:16px;
    --radius-lg:22px;
    --radius-xl:30px;
    --radius-xxl:40px;

}





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

.sh-hero{

    position:relative;

    min-height:calc(100vh - 130px);

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#ffffff;

    padding:70px 0 90px;

}


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

.sh-hero-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}


/*==================================
GRADIENT
==================================*/

.sh-hero-gradient{

    position:absolute;

    width:1100px;

    height:1100px;

    top:-420px;

    right:-260px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(23,107,255,.14),
    rgba(23,107,255,0));

}


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

.sh-grid-pattern{

    position:absolute;

    inset:0;

    opacity:.35;

    background-image:

    linear-gradient(
    rgba(20,40,80,.04) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(20,40,80,.04) 1px,
    transparent 1px);

    background-size:60px 60px;

}


/*==================================
CIRCLES
==================================*/

.sh-hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

}


.sh-circle-one{

    width:360px;

    height:360px;

    left:-120px;

    top:80px;

    background:
    radial-gradient(circle,
    rgba(67,195,255,.12),
    rgba(67,195,255,0));

}


.sh-circle-two{

    width:520px;

    height:520px;

    right:0;

    bottom:-220px;

    background:
    radial-gradient(circle,
    rgba(23,107,255,.08),
    rgba(23,107,255,0));

}


.sh-circle-three{

    width:180px;

    height:180px;

    top:120px;

    right:28%;

    background:
    radial-gradient(circle,
    rgba(82,233,255,.16),
    rgba(82,233,255,0));

}


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

.sh-hero .container{

    position:relative;

    z-index:2;

}


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

.sh-hero-content{

    position:relative;

    max-width:620px;

}


/*==================================
BADGE
==================================*/

.sh-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    margin-bottom:30px;

    border-radius:50px;

    background:#f4f8ff;

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

    color:#176bff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

}


.sh-hero-badge i{

    font-size:15px;

}


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

.sh-hero-content h1{

    margin:0;

    color:#071a2b;

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

    font-size:clamp(54px,6vw,82px);

    font-weight:800;

    line-height:1.05;

    letter-spacing:-3px;

}


.sh-hero-content h1 span{

    display:block;

    background:linear-gradient(
    90deg,
    #176bff,
    #42d7ff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

.sh-hero-content p{

    max-width:560px;

    margin:30px 0 0;

    color:#5d6d7d;

    font-size:18px;

    line-height:1.9;

    font-weight:400;

}


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

.sh-hero-buttons{

    margin-top:42px;

}


.sh-hero-points{

    margin-top:38px;

}


.sh-hero-clients{

    margin-top:55px;

}


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

.sh-hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}


/*==================================
PRIMARY BUTTON
==================================*/

.sh-primary-btn{

    position:relative;

    height:60px;

    padding:0 10px 0 28px;

    display:inline-flex;

    align-items:center;

    gap:22px;

    border-radius:60px;

    overflow:hidden;

    background:#176bff;

    color:#ffffff;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

    transition:.35s;

    box-shadow:

    0 18px 45px

    rgba(23,107,255,.28);

}


.sh-primary-btn:hover{

    color:#ffffff;

    transform:translateY(-4px);

}


.sh-primary-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    #071a2b,

    #0d3354

    );

    transform:translateX(-100%);

    transition:.45s;

}


.sh-primary-btn:hover::before{

    transform:translateX(0);

}


.sh-primary-btn span,

.sh-primary-btn i{

    position:relative;

    z-index:2;

}


.sh-primary-btn i{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    color:#176bff;

    transition:.35s;

}


.sh-primary-btn:hover i{
color: white;
    transform:rotate(45deg);

}



/*==================================
SECONDARY BUTTON
==================================*/

.sh-secondary-btn{

    height:60px;

    padding:0 32px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:60px;

    border:1px solid

    rgba(7,26,43,.12);

    background:#ffffff;

    color:#071a2b;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}


.sh-secondary-btn:hover{

    background:#071a2b;

    color:#ffffff;

    border-color:#071a2b;

    transform:translateY(-4px);

}



/*=========================================================
BUTTON SHADOW
=========================================================*/

.sh-primary-btn,

.sh-secondary-btn{

    text-decoration:none;

}



/*=========================================================
BUTTON ACTIVE
=========================================================*/

.sh-primary-btn:active,

.sh-secondary-btn:active{

    transform:scale(.96);

}

/*=========================================================
HERO TRUST POINTS
=========================================================*/

.sh-hero-points{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

}


.sh-point{

    display:flex;

    align-items:center;

    gap:10px;

    color:#556575;

    font-size:14px;

    font-weight:600;

    transition:.35s ease;

}


.sh-point i{

    width:22px;

    height:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(23,107,255,.10);

    color:#176bff;

    font-size:12px;

    transition:.35s ease;

}


.sh-point:hover{

    color:#071a2b;

    transform:translateY(-2px);

}


.sh-point:hover i{

    background:#176bff;

    color:#ffffff;

}



/*=========================================================
CLIENT LOGOS
=========================================================*/

.sh-hero-clients{

    max-width:520px;

}


.sh-hero-clients small{

    display:block;

    margin-bottom:18px;

    color:#8b97a5;

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}


.sh-client-logos{

    display:flex;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}


.sh-client-logos img{

    height:38px;

    width:auto;

    opacity:.45;

    filter:grayscale(100%);

    transition:.35s ease;

}


.sh-client-logos img:hover{

    opacity:1;

    filter:grayscale(0);

    transform:translateY(-3px);

}



/*=========================================================
LEFT CONTENT ANIMATION READY
=========================================================*/

.sh-hero-content>*{

    position:relative;

    z-index:2;

}


.sh-hero-content h1,

.sh-hero-content p,

.sh-hero-buttons,

.sh-hero-points,

.sh-hero-clients{

    transition:.5s ease;

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

    .sh-hero{

        padding:100px 0 80px;

    }

    .sh-hero-content h1{

        font-size:64px;

    }

}


@media(max-width:991px){

    .sh-hero{

        text-align:center;

        padding:80px 0 60px;

    }

    .sh-hero-content{

        max-width:100%;

    }

    .sh-hero-content p{

        max-width:100%;

    }

    .sh-hero-buttons{

        justify-content:center;

    }

    .sh-hero-points{

        justify-content:center;

    }

    .sh-hero-clients{

        max-width:100%;

    }

    .sh-client-logos{

        justify-content:center;

    }

}


@media(max-width:767px){

    .sh-hero-content h1{

        font-size:48px;

        letter-spacing:-2px;

    }

    .sh-hero-content p{

        font-size:16px;

        line-height:1.8;

    }

    .sh-primary-btn,

    .sh-secondary-btn{

        width:100%;

        justify-content:center;

    }

}


@media(max-width:575px){

    .sh-hero{

        min-height:auto;

        padding:70px 0 40px;

    }

    .sh-hero-badge{

        font-size:12px;

        padding:8px 16px;

    }

    .sh-hero-content h1{

        font-size:40px;

        line-height:1.08;

    }

    .sh-client-logos{

        gap:20px;

    }

    .sh-client-logos img{

        height:24px;

    }

}

/*=========================================================
RIGHT SIDE
=========================================================*/

.sh-hero-visual{

    position:relative;

    height:720px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/*==================================
MAIN GLOW
==================================*/

.sh-main-glow{

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(23,107,255,.18),
    rgba(23,107,255,0));

    filter:blur(30px);

    animation:shGlow 6s ease-in-out infinite;

}


@keyframes shGlow{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}


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

.sh-main-image{

    position:relative;

    z-index:5;

    width:470px;

    display:flex;

    align-items:center;

    justify-content:center;

}


.sh-main-image img{

    width:100%;

    height:auto;

    object-fit:contain;

    animation:heroFloat 6s ease-in-out infinite;

    filter:

    drop-shadow(

    0 35px 70px

    rgba(7,26,43,.18)

    );

}


@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}



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

.sh-glass-card{

    position:absolute;

    z-index:10;

    width:230px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:15px;

    border-radius:22px;

    background:

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

    backdrop-filter:blur(20px);

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

    border:

    1px solid

    rgba(255,255,255,.55);

    box-shadow:

    0 25px 60px

    rgba(7,26,43,.12);

    transition:.4s ease;

}


.sh-glass-card:hover{

    transform:

    translateY(-8px)

    scale(1.03);

}



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

.sh-card-icon{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:

    linear-gradient(

    135deg,

    #176bff,

    #43c3ff

    );

    color:#ffffff;

    font-size:22px;

    flex-shrink:0;

}



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

.sh-glass-card strong{

    display:block;

    color:#071a2b;

    font-size:16px;

    font-weight:700;

    margin-bottom:5px;

}


.sh-glass-card span{

    color:#657586;

    font-size:13px;

}


/*=========================================================
GLASS CARD POSITION
=========================================================*/

.sh-card-one{

    top:70px;

    left:0;

    animation:cardFloatOne 6s ease-in-out infinite;

}


.sh-card-two{

    top:180px;

    right:-10px;

    animation:cardFloatTwo 7s ease-in-out infinite;

}


.sh-card-three{

    bottom:120px;

    left:25px;

    animation:cardFloatThree 6.5s ease-in-out infinite;

}



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

@keyframes cardFloatOne{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes cardFloatTwo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(10px);

    }

    100%{

        transform:translateY(0);

    }

}



@keyframes cardFloatThree{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}



/*=========================================================
BOTTOM MINI CARDS
=========================================================*/

.sh-bottom-stats{

    position:absolute;

    left:50%;

    bottom:15px;

    transform:translateX(-50%);

    display:flex;

    gap:15px;

    z-index:20;

}


.sh-mini-card{

    min-width:120px;

    height:60px;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    border-radius:18px;

    background:

    rgba(255,255,255,.78);

    backdrop-filter:blur(18px);

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

    border:

    1px solid

    rgba(255,255,255,.6);

    box-shadow:

    0 18px 45px

    rgba(7,26,43,.12);

    transition:.35s ease;

}


.sh-mini-card:hover{

    transform:

    translateY(-6px);

}


.sh-mini-card i{

    color:#176bff;

    font-size:18px;

}


.sh-mini-card span{

    color:#071a2b;

    font-size:13px;

    font-weight:700;

}



/*=========================================================
FLOATING ICONS
=========================================================*/

.sh-float-icon{

    position:absolute;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    box-shadow:

    0 18px 45px

    rgba(7,26,43,.12);

    color:#176bff;

    font-size:22px;

    z-index:15;

}


.sh-icon-one{

    top:30px;

    right:120px;

    animation:floatIcon 5s ease-in-out infinite;

}


.sh-icon-two{

    bottom:190px;

    right:0;

    animation:floatIcon 6s ease-in-out infinite;

}


.sh-icon-three{

    bottom:40px;

    left:90px;

    animation:floatIcon 7s ease-in-out infinite;

}


@keyframes floatIcon{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

    .sh-main-image{

        width:420px;

    }

}


@media(max-width:991px){

    .sh-hero-visual{

        height:620px;

        margin-top:50px;

    }

    .sh-card-one{

        left:20px;

    }

    .sh-card-two{

        right:20px;

    }

    .sh-card-three{

        left:40px;

    }

}


@media(max-width:767px){

    .sh-hero-visual{

        height:500px;

    }

    .sh-main-image{

        width:320px;

    }

    .sh-glass-card{

        width:180px;

        padding:14px;

    }

    .sh-card-icon{

        width:46px;

        height:46px;

        font-size:18px;

    }

    .sh-glass-card strong{

        font-size:14px;

    }

    .sh-glass-card span{

        font-size:11px;

    }

    .sh-bottom-stats{

        gap:10px;

    }

    .sh-mini-card{

        min-width:95px;

        height:52px;

        padding:0 12px;

    }

}


@media(max-width:575px){

    .sh-hero-visual{

        height:430px;

    }

    .sh-main-image{

        width:260px;

    }

    .sh-glass-card{

        display:none;

    }

    .sh-float-icon{

        display:none;

    }

    .sh-bottom-stats{

        position:static;

        transform:none;

        justify-content:center;

        margin-top:25px;

        flex-wrap:wrap;

    }

}









































/*=========================================================
SECTION : TRUST
=========================================================*/

.sh-trust-section{

    position:relative;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}


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

.sh-trust-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}


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

.sh-trust-grid{

    position:absolute;

    inset:0;

    opacity:.28;

    background-image:

        linear-gradient(
            rgba(17,61,72,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(17,61,72,.035) 1px,
            transparent 1px
        );

    background-size:70px 70px;

}


/*==================================
BLUR
==================================*/

.sh-trust-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(20px);

}


.sh-trust-blur-one{

    width:500px;

    height:500px;

    left:-180px;

    top:-120px;

    background:

    radial-gradient(

        circle,

        rgba(23,107,255,.13),

        rgba(28,168,203,0)

    );

}


.sh-trust-blur-two{

    width:650px;

    height:650px;

    right:-250px;

    bottom:-300px;

    background:

    radial-gradient(

        circle,

        rgba(7,26,43,.08),

        rgba(17,61,72,0)

    );

}


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

.sh-trust-section .container{

    position:relative;

    z-index:2;

}


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

.sh-trust-heading{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}


/*==================================
BADGE
==================================*/

.sh-section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:#F5F9FF;

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

    color:#176BFF;

    font-size:13px;

    font-weight:700;

    letter-spacing:.3px;

}


.sh-section-badge i{

    font-size:15px;

}


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

.sh-trust-heading h2{

    margin:28px 0 22px;

    color:#071A2B;

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

    font-size:clamp(42px,5vw,62px);

    font-weight:800;

    line-height:1.1;

    letter-spacing:-2px;

}


.sh-trust-heading h2 span{

    display:block;

    margin-top:8px;

    background:linear-gradient(

        90deg,

        #176BFF,

        #43C3FF

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

.sh-trust-heading p{

    max-width:720px;

    margin:0 auto;

    color:#5D6D7D;

    font-size:18px;

    line-height:1.9;

}






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

.sh-stat-card{

    position:relative;

    height:100%;

    padding:42px 34px;

    border-radius:28px;

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

    border:1px solid rgba(7,26,43,.08);

    backdrop-filter:blur(14px);

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

    overflow:hidden;

    transition:

    transform .45s ease,

    box-shadow .45s ease,

    border-color .45s ease;

}


/*==================================
TOP GLOW
==================================*/

.sh-stat-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    transform:scaleX(0);

    transform-origin:left;

    background:

    linear-gradient(

        90deg,

        #176BFF,

        #43C3FF

    );

    transition:.45s;

}


/*==================================
BACKGROUND GLOW
==================================*/

.sh-stat-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(28,168,203,.15),

        transparent

    );

    opacity:0;

    transition:.45s;

}


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

.sh-stat-card:hover{

    transform:translateY(-12px);

    border-color:rgba(28,168,203,.18);

    box-shadow:

    0 30px 70px

    rgba(7,26,43,.12);

}


.sh-stat-card:hover::before{

    transform:scaleX(1);

}


.sh-stat-card:hover::after{

    opacity:1;

}


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

.sh-stat-icon{

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:22px;

    background:

    linear-gradient(

        135deg,

        #176BFF,

        #43C3FF

    );

    color:#ffffff;

    font-size:28px;

    box-shadow:

    0 15px 35px

    rgba(28,168,203,.25);

    transition:.45s;

}


.sh-stat-card:hover .sh-stat-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}


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

.sh-stat-card h3{

    margin:0;

    color:#071A2B;

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

    font-size:54px;

    font-weight:800;

    line-height:1;

    letter-spacing:-2px;

}


.sh-stat-card h3 span{

    display:inline-block;

}


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

.sh-stat-card h5{

    margin:18px 0 12px;

    color:#071A2B;

    font-size:20px;

    font-weight:700;

}


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

.sh-stat-card p{

    margin:0;

    color:#6b7983;

    font-size:15px;

    line-height:1.8;

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px){

    .sh-stat-card{

        padding:36px 28px;

    }

}


@media(max-width:767px){

    .sh-stat-card{

        text-align:center;

    }

    .sh-stat-icon{

        margin:

        0 auto 24px;

    }

}


@media(max-width:575px){

    .sh-stat-card{

        border-radius:22px;

        padding:30px 24px;

    }

    .sh-stat-card h3{

        font-size:44px;

    }

    .sh-stat-card h5{

        font-size:18px;

    }

}

/*=========================================================
CLIENT AREA
=========================================================*/

.sh-client-area{

    position:relative;

    margin-top:90px;

    padding:45px 50px;

    border-radius:30px;

    background:

    linear-gradient(

        180deg,

        rgba(255,255,255,.96),

        rgba(247,251,253,.95)

    );

    border:1px solid rgba(7,26,43,.08);

    box-shadow:

    0 25px 60px

    rgba(17,61,72,.06);

}


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

.sh-client-area>span{

    display:block;

    margin-bottom:32px;

    text-align:center;

    color:#8a98a3;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;

}



/*==================================
LOGOS
==================================*/

.sh-client-list{

    display:flex;

    align-items:center;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:35px;

}


.sh-client-list img{

    height:70px;

    width:auto;

    opacity:.45;

    filter:grayscale(100%);

    transition:

    opacity .35s,

    transform .35s,

    filter .35s;

}


.sh-client-list img:hover{

    opacity:1;

    filter:grayscale(0);

    transform:translateY(-6px);

}



/*=========================================================
TRUST TAGS
=========================================================*/

.sh-trust-tags{

    margin-top:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}


.sh-trust-tags span{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:60px;

    background:#ffffff;

    border:1px solid rgba(7,26,43,.08);

    color:#071A2B;

    font-size:14px;

    font-weight:600;

    transition:

    all .35s ease;

}


.sh-trust-tags span i{

    color:#176BFF;

    font-size:16px;

    transition:.35s;

}


.sh-trust-tags span:hover{

    background:#176BFF;

    color:#ffffff;

    border-color:#071A2B;

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px

    rgba(17,61,72,.18);

}


.sh-trust-tags span:hover i{

    color:#ffffff;

}



/*=========================================================
SMALL DIVIDER
=========================================================*/

.sh-client-area::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-35px;

    transform:translateX(-50%);

    width:80px;

    height:5px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #176BFF,

        #43C3FF

    );

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:991px){

    .sh-client-area{

        padding:40px 30px;

    }

}


@media(max-width:767px){

    .sh-client-list{

        justify-content:center;

    }

    .sh-client-list img{

        height:30px;

    }

}


@media(max-width:575px){

    .sh-client-area{

        padding:28px 20px;

        border-radius:22px;

    }

    .sh-trust-tags{

        gap:12px;

    }

    .sh-trust-tags span{

        width:100%;

        justify-content:center;

    }

}


















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

.sh-about-section{

    position:relative;

    padding:70px 0;

    background:var(--white);

    overflow:hidden;

}


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

.sh-about-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-250px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(23,107,255,.08),

        transparent

    );

}


.sh-about-section::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(67,195,255,.10),

        transparent

    );

}


.sh-about-section .container{

    position:relative;

    z-index:2;

}



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

.sh-about-image-wrapper{

    position:relative;

    padding-right:70px;

}



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

.sh-about-image{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}


.sh-about-image img{

    width:100%;

    display:block;

    transition:1s;

}


.sh-about-image:hover img{

    transform:scale(1.06);

}



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

.sh-about-exp-card{

    position:absolute;

    top:35px;

    right:0;

    width:170px;

    padding:24px;

    background:var(--white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    border:1px solid var(--border);

    text-align:center;

}


.sh-about-exp-card h3{

    margin:0;

    font-size:46px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}


.sh-about-exp-card span{

    display:block;

    margin-top:10px;

    color:var(--text);

    font-size:14px;

}



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

.sh-about-place-card{

    position:absolute;

    left:40px;

    bottom:-35px;

    width:220px;

    padding:24px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:var(--white);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

}


.sh-about-place-card h3{

    margin:0;

    font-size:42px;

    font-weight:800;

    line-height:1;

}


.sh-about-place-card span{

    display:block;

    margin-top:10px;

    font-size:14px;

    opacity:.9;

}


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

.sh-about-content{

    position:relative;

    padding-left:35px;

}


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

.sh-about-content h2{

    margin:26px 0 24px;

    font-family:var(--heading-font);

    font-size:clamp(42px,5vw,60px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--dark);

}


.sh-about-content h2 span{

    display:block;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}


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

.sh-about-content>p{

    margin:0 0 42px;

    color:var(--text);

    font-size:17px;

    line-height:1.9;

}



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

.sh-about-feature{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:24px;

    margin-bottom:22px;

    border-radius:var(--radius-lg);

    background:var(--white);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.sh-about-feature:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-md);

    border-color:rgba(23,107,255,.20);

}



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

.sh-about-feature i{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:18px;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:var(--white);

    font-size:24px;

    transition:var(--transition);

}


.sh-about-feature:hover i{

    transform:rotate(-8deg) scale(1.08);

}



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

.sh-about-feature h4{

    margin:0 0 8px;

    color:var(--dark);

    font-size:22px;

    font-weight:700;

}


.sh-about-feature p{

    margin:0;

    color:var(--text);

    line-height:1.8;

}



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

.sh-about-content .sh-primary-btn{

    margin-top:18px;

}

/*=========================================================
ABOUT RESPONSIVE
=========================================================*/

@media (max-width:1199px){

    .sh-about-image-wrapper{

        padding-right:40px;

    }

    .sh-about-content{

        padding-left:15px;

    }

    .sh-about-exp-card{

        width:155px;

    }

    .sh-about-place-card{

        width:200px;

    }

}



@media (max-width:991px){

    .sh-about-section{

        padding:100px 0;

    }

    .sh-about-image-wrapper{

        padding-right:0;

        max-width:650px;

        margin:0 auto 60px;

    }

    .sh-about-content{

        padding-left:0;

        text-align:center;

    }

    .sh-about-content>p{

        max-width:700px;

        margin:0 auto 40px;

    }

    .sh-about-content .sh-primary-btn{

        margin-top:25px;

    }

}



@media (max-width:767px){

    .sh-about-section{

        padding:80px 0;

    }

    .sh-about-content h2{

        font-size:42px;

        letter-spacing:-1px;

    }

    .sh-about-feature{

        padding:20px;

        text-align:left;

    }

    .sh-about-exp-card{

        width:140px;

        padding:18px;

    }

    .sh-about-exp-card h3{

        font-size:36px;

    }

    .sh-about-place-card{

        width:180px;

        left:20px;

        bottom:-25px;

        padding:20px;

    }

    .sh-about-place-card h3{

        font-size:34px;

    }

}



@media (max-width:575px){

    .sh-about-image-wrapper{

        margin-bottom:45px;

    }

    .sh-about-image{

        border-radius:24px;

    }

    .sh-about-exp-card{

        top:15px;

        right:15px;

        width:120px;

        border-radius:18px;

    }

    .sh-about-exp-card h3{

        font-size:30px;

    }

    .sh-about-exp-card span{

        font-size:12px;

    }

    .sh-about-place-card{

        position:relative;

        left:auto;

        bottom:auto;

        width:100%;

        margin-top:20px;

        border-radius:22px;

    }

    .sh-about-content h2{

        font-size:34px;

    }

    .sh-about-content>p{

        font-size:16px;

    }

    .sh-about-feature{

        flex-direction:column;

        align-items:center;

        text-align:center;

    }

    .sh-about-feature i{

        margin-bottom:8px;

    }

}



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

.sh-about-image{

    cursor:pointer;

}

.sh-about-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(7,26,43,.08)

    );

    opacity:0;

    transition:var(--transition);

    z-index:1;

}

.sh-about-image:hover::before{

    opacity:1;

}



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

.sh-about-exp-card{

    animation:aboutFloatOne 5s ease-in-out infinite;

}

.sh-about-place-card{

    animation:aboutFloatTwo 6s ease-in-out infinite;

}

@keyframes aboutFloatOne{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes aboutFloatTwo{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}














/*=========================================================
SECTION : SERVICES
=========================================================*/

.sh-services-section{

    position:relative;

    padding:70px 0;

    background:var(--white);

    overflow:hidden;

}



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

.sh-services-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}



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

.sh-services-grid{

    position:absolute;

    inset:0;

    opacity:.28;

    background-image:

        linear-gradient(

            rgba(23,107,255,.03) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(23,107,255,.03) 1px,

            transparent 1px

        );

    background-size:70px 70px;

}



/*==================================
BLUR
==================================*/

.sh-services-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(25px);

}



.sh-blur-one{

    width:520px;

    height:520px;

    left:-220px;

    top:-150px;

    background:

    radial-gradient(

        circle,

        rgba(23,107,255,.12),

        transparent

    );

}



.sh-blur-two{

    width:650px;

    height:650px;

    right:-250px;

    bottom:-320px;

    background:

    radial-gradient(

        circle,

        rgba(67,195,255,.10),

        transparent

    );

}



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

.sh-services-section .container{

    position:relative;

    z-index:2;

}



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

.sh-services-heading{

    max-width:820px;

    margin:0 auto 80px;

    text-align:center;

}



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

.sh-services-heading h2{

    margin:28px 0 20px;

    font-family:var(--heading-font);

    font-size:clamp(42px,5vw,62px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--dark);

}



.sh-services-heading h2 span{

    display:block;

    margin-top:8px;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}



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

.sh-services-heading p{

    max-width:720px;

    margin:0 auto;

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}



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

.sh-services-section .row{

    position:relative;

}



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

.sh-feature-service{

    position:relative;

    height:100%;

    overflow:hidden;

}

/*=========================================================
FEATURED SERVICE CARD
=========================================================*/

.sh-feature-service{

    position:relative;

    height:100%;

    padding:55px 48px;

    border-radius:var(--radius-xl);

    overflow:hidden;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:var(--white);

    box-shadow:

    0 35px 80px

    rgba(23,107,255,.25);

    transition:var(--transition);

}



/*==================================
BACKGROUND SHAPES
==================================*/

.sh-feature-service::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    right:-220px;

    top:-180px;

    border-radius:50%;

    background:

    rgba(255,255,255,.08);

}



.sh-feature-service::after{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    left:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

    rgba(255,255,255,.06);

}



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

.sh-feature-service:hover{

    transform:translateY(-10px);

    box-shadow:

    0 45px 90px

    rgba(23,107,255,.32);

}



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

.sh-feature-service>*{

    position:relative;

    z-index:2;

}



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

.sh-feature-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:30px;

    border-radius:26px;

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

    backdrop-filter:blur(12px);

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

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

    transition:var(--transition);

}


.sh-feature-icon i{

    font-size:40px;

    color:var(--white);

}


.sh-feature-service:hover .sh-feature-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



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

.sh-feature-service>span{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    margin-bottom:24px;

    border-radius:40px;

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

    font-size:13px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}



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

.sh-feature-service h3{

    margin:0 0 24px;

    font-family:var(--heading-font);

    font-size:48px;

    font-weight:800;

    line-height:1.12;

    letter-spacing:-2px;

}



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

.sh-feature-service>p{

    margin:0 0 34px;

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

    font-size:17px;

    line-height:1.9;

}

/*=========================================================
FEATURE LIST
=========================================================*/

.sh-feature-service ul{

    margin:0;

    padding:0;

    list-style:none;

}


.sh-feature-service ul li{

    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

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

    font-size:16px;

    font-weight:500;

}


.sh-feature-service ul li:last-child{

    margin-bottom:40px;

}



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

.sh-feature-service ul li::before{

    content:"";

    width:12px;

    height:12px;

    border-radius:50%;

    flex-shrink:0;

    background:#ffffff;

    box-shadow:

    0 0 0 6px

    rgba(255,255,255,.15);

}



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

.sh-feature-service .sh-primary-btn{

    background:var(--white);

    color:var(--primary);

    box-shadow:none;

}


.sh-feature-service .sh-primary-btn::before{

    background:var(--dark);

}


.sh-feature-service .sh-primary-btn:hover{

    color:var(--white);

}


.sh-feature-service .sh-primary-btn i{

    background:var(--primary);

    color:var(--white);

}


.sh-feature-service .sh-primary-btn:hover i{

    background:var(--white);

    color:var(--primary);

}



/*=========================================================
DECORATIVE LINE
=========================================================*/

.sh-feature-service .sh-primary-btn::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    right:-70px;

    bottom:-70px;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.12),

        transparent

    );

    pointer-events:none;

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

    .sh-feature-service{

        padding:48px 40px;

    }

    .sh-feature-service h3{

        font-size:42px;

    }

}


@media(max-width:991px){

    .sh-feature-service{

        margin-bottom:20px;

    }

}


@media(max-width:767px){

    .sh-feature-service{

        padding:36px 30px;

        border-radius:var(--radius-lg);

    }

    .sh-feature-icon{

        width:78px;

        height:78px;

    }

    .sh-feature-icon i{

        font-size:34px;

    }

    .sh-feature-service h3{

        font-size:34px;

        letter-spacing:-1px;

    }

    .sh-feature-service>p{

        font-size:16px;

    }

}


@media(max-width:575px){

    .sh-feature-service{

        padding:30px 24px;

    }

    .sh-feature-service h3{

        font-size:30px;

    }

    .sh-feature-service ul li{

        font-size:15px;

    }

    .sh-feature-service .sh-primary-btn{

        width:100%;

        justify-content:center;

    }

}


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

.sh-service-card{

    position:relative;

    height:100%;

    padding:34px 30px;

    border-radius:var(--radius-lg);

    background:var(--white);

    border:1px solid var(--border);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}



/*==================================
TOP BORDER
==================================*/

.sh-service-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:var(--transition);

}



/*==================================
BACKGROUND GLOW
==================================*/

.sh-service-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(23,107,255,.10),

        transparent

    );

    opacity:0;

    transition:var(--transition);

}



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

.sh-service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(23,107,255,.18);

    box-shadow:var(--shadow-lg);

}


.sh-service-card:hover::before{

    transform:scaleX(1);

}


.sh-service-card:hover::after{

    opacity:1;

}



/*=========================================================
TOP AREA
=========================================================*/

.sh-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:28px;

}



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

.sh-card-icon{

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:var(--white);

    font-size:26px;

    box-shadow:

    0 16px 35px

    rgba(23,107,255,.20);

    transition:var(--transition);

}


.sh-service-card:hover .sh-card-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



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

.sh-card-top span{

    color:rgba(7,26,43,.15);

    font-size:34px;

    font-weight:800;

    line-height:1;

}

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

.sh-service-card h4{

    margin:0 0 16px;

    color:var(--dark);

    font-family:var(--heading-font);

    font-size:26px;

    font-weight:700;

    line-height:1.3;

    transition:var(--transition);

}


.sh-service-card p{

    margin:0;

    color:var(--text);

    font-size:15px;

    line-height:1.9;

}



/*=========================================================
LEARN MORE
=========================================================*/

.sh-service-card a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:28px;

    color:var(--primary);

    font-size:15px;

    font-weight:700;

    text-decoration:none;

    transition:var(--transition);

}


.sh-service-card a i{

    font-size:15px;

    transition:var(--transition);

}



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

.sh-service-card:hover h4{

    color:var(--primary);

}


.sh-service-card:hover a{

    gap:18px;

}


.sh-service-card:hover a i{

    transform:translateX(6px);

}



/*=========================================================
BOTTOM GLOW
=========================================================*/

.sh-service-card .sh-card-bottom{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transform:scaleX(0);

    transform-origin:right;

    transition:var(--transition);

}


.sh-service-card:hover .sh-card-bottom{

    transform:scaleX(1);

    transform-origin:left;

}



/*=========================================================
FOCUS
=========================================================*/

.sh-service-card:hover{

    z-index:5;

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

    .sh-service-card{

        padding:30px 26px;

    }

}


@media(max-width:991px){

    .sh-service-card{

        min-height:100%;

    }

}


@media(max-width:767px){

    .sh-card-icon{

        width:60px;

        height:60px;

        font-size:22px;

    }

    .sh-card-top span{

        font-size:28px;

    }

    .sh-service-card h4{

        font-size:22px;

    }

}


@media(max-width:575px){

    .sh-service-card{

        padding:26px 22px;

        border-radius:var(--radius-md);

    }

    .sh-service-card h4{

        font-size:20px;

    }

    .sh-service-card p{

        font-size:14px;

    }

    .sh-service-card a{

        margin-top:22px;

    }

}
















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

.shemb-section{

    position:relative;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shemb-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}



.shemb-grid{

    position:absolute;

    inset:0;

    opacity:.18;

    background-image:

    linear-gradient(

    rgba(23,107,255,.04) 1px,

    transparent 1px),

    linear-gradient(

    90deg,

    rgba(23,107,255,.04) 1px,

    transparent 1px);

    background-size:70px 70px;

}



.shemb-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

}



.shemb-blur-left{

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.12),

    transparent);

}



.shemb-blur-right{

    width:650px;

    height:650px;

    right:-260px;

    bottom:-260px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.10),

    transparent);

}



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

.shemb-section .container{

    position:relative;

    z-index:5;

}



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

.shemb-heading{

    max-width:820px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}



.shemb-heading h2{

    margin:24px 0 18px;

    color:var(--dark);

    font-size:clamp(42px,5vw,62px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

}



.shemb-heading p{

    max-width:700px;

    margin:auto;

    color:var(--text);

    font-size:18px;

    line-height:1.9;

}



/*=========================================================
CAROUSEL
=========================================================*/

.shemb-carousel{

    position:relative;

}



/*=========================================================
VIEWPORT
=========================================================*/

.shemb-viewport{

    overflow:hidden;

    width:100%;

}



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

.shemb-container{

    display:flex;

    align-items:stretch;

    gap:30px;

    will-change:transform;

}



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

.shemb-card{

    position:relative;

    flex:0 0 31%;

    min-width:0;

    height:540px;

    overflow:hidden;

    border-radius:34px;

    background:#081521;

    cursor:pointer;

    transition:.45s;

    box-shadow:

    0 25px 60px

    rgba(8,21,33,.12);

}



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

.shemb-image{

    position:absolute;

    inset:0;

}



.shemb-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s;

}



/*=========================================================
OVERLAY
=========================================================*/

.shemb-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(0,0,0,.05),

    rgba(0,0,0,.20),

    rgba(7,26,43,.96));

    z-index:2;

}



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

.shemb-content{

    position:absolute;

    left:34px;

    right:34px;

    bottom:34px;

    z-index:5;

}



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

.shemb-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:24px;

    border-radius:22px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light));

    color:#ffffff;

    font-size:30px;

    transition:.4s;

}



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

.shemb-content h3{

    margin:0 0 16px;

    color:#ffffff;

    font-size:34px;

    font-weight:700;

}



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

.shemb-content p{

    color:

    rgba(255,255,255,.86);

    line-height:1.9;

    font-size:15px;

}



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

.shemb-content a{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:28px;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.35s;

}



.shemb-content a i{

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    backdrop-filter:blur(12px);

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

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

    transition:.4s;

}



/*=========================================================
TOP LINE
=========================================================*/

.shemb-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

    z-index:8;

}



/*=========================================================
SHINE
=========================================================*/

.shemb-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:45%;

    height:260%;

    transform:rotate(26deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transition:1s;

    pointer-events:none;

    z-index:6;

}



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

.shemb-card:hover{

    transform:translateY(-14px);

    box-shadow:

    0 35px 80px

    rgba(8,21,33,.18);

}



.shemb-card:hover::before{

    transform:scaleX(1);

}



.shemb-card:hover::after{

    left:150%;

}



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

.shemb-card:hover .shemb-image img{

    transform:scale(1.10);

}



/*=========================================================
OVERLAY
=========================================================*/

.shemb-card:hover .shemb-overlay{

    background:

    linear-gradient(

        180deg,

        rgba(7,26,43,.08),

        rgba(7,26,43,.98)

    );

}



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

.shemb-card:hover .shemb-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



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

.shemb-content h3{

    transition:.35s;

}



.shemb-card:hover h3{

    transform:translateX(5px);

}



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

.shemb-card:hover .shemb-content a{

    gap:20px;

}



.shemb-card:hover .shemb-content a i{

    background:#ffffff;

    color:var(--primary);

    transform:rotate(45deg);

}



/*=========================================================
ARROWS
=========================================================*/

.shemb-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:none;

    cursor:pointer;

    border-radius:50%;

    background:#ffffff;

    color:var(--primary);

    box-shadow:

    0 18px 45px

    rgba(15,23,42,.12);

    transition:.35s;

    z-index:20;

}



.shemb-prev{

    left:-30px;

}



.shemb-next{

    right:-30px;

}



.shemb-arrow:hover{

    background:var(--primary);

    color:#ffffff;

}



/*=========================================================
DOTS
=========================================================*/

.shemb-dots{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-top:45px;

}



.shemb-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#d9dee7;

    cursor:pointer;

    transition:.35s;

}



.shemb-dot.is-selected{

    width:34px;

    border-radius:40px;

    background:var(--primary);

}


/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1400px){

    .shemb-card{

        flex:0 0 36%;

    }

}



@media(max-width:1200px){

    .shemb-card{

        flex:0 0 46%;

        height:500px;

    }

}



@media(max-width:991px){

    .shemb-section{

        padding:110px 0;

    }

    .shemb-card{

        flex:0 0 65%;

        height:470px;

    }

    .shemb-arrow{

        display:none;

    }

}



@media(max-width:767px){

    .shemb-section{

        padding:90px 0;

    }

    .shemb-heading h2{

        font-size:42px;

    }

    .shemb-card{

        flex:0 0 84%;

        height:420px;

        border-radius:28px;

    }

    .shemb-content{

        left:24px;

        right:24px;

        bottom:24px;

    }

    .shemb-icon{

        width:60px;

        height:60px;

        font-size:24px;

    }

    .shemb-content h3{

        font-size:28px;

    }

    .shemb-content p{

        font-size:14px;

    }

}



@media(max-width:575px){

    .shemb-card{

        flex:0 0 92%;

        height:390px;

    }

}



















/*=========================================================
WHY CHOOSE US
SECTION
=========================================================*/

.shwhy-section{

    position:relative;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shwhy-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}



.shwhy-grid{

    position:absolute;

    inset:0;

    opacity:.16;

    background-image:

    linear-gradient(

    rgba(23,107,255,.04) 1px,

    transparent 1px),

    linear-gradient(

    90deg,

    rgba(23,107,255,.04) 1px,

    transparent 1px);

    background-size:70px 70px;

}



.shwhy-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}



.shwhy-blur-left{

    width:500px;

    height:500px;

    left:-240px;

    top:-160px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.10),

    transparent);

}



.shwhy-blur-right{

    width:620px;

    height:620px;

    right:-280px;

    bottom:-260px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.08),

    transparent);

}



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

.shwhy-section .container{

    position:relative;

    z-index:5;

}



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

.shwhy-heading{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.shwhy-heading h2{

    margin:24px 0 18px;

    font-size:clamp(44px,5vw,68px);

    line-height:1.08;

    font-weight:800;

    color:var(--dark);

    letter-spacing:-2px;

}



.shwhy-heading h2 span{

    color:var(--primary);

}



.shwhy-heading p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:var(--text);

}



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

.shwhy-section .row{

    position:relative;

}



/*=========================================================
LEFT & RIGHT COLUMN
=========================================================*/

.shwhy-column{

    display:flex;

    flex-direction:column;

    gap:34px;

}



/*=========================================================
CENTER
=========================================================*/

.shwhy-center{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:720px;

}



/*=========================================================
CIRCLE
=========================================================*/

.shwhy-circle{

    position:relative;

    width:470px;

    height:470px;

    border-radius:50%;

    overflow:hidden;

    background:#ffffff;

    padding:16px;

    box-shadow:

    0 40px 100px

    rgba(15,23,42,.10);

}



.shwhy-circle::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:50%;

    background:

    linear-gradient(

    135deg,

    rgba(23,107,255,.40),

    rgba(23,107,255,.05));

    z-index:-1;

}



.shwhy-circle img{

    width:100%;

    height:100%;

    border-radius:50%;

    object-fit:cover;

}



/*=========================================================
CENTER GLOW
=========================================================*/

.shwhy-center::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.10),

    transparent 70%);

    z-index:-1;

}



/*=========================================================
TRUST BADGE
=========================================================*/

.shwhy-badge{

    position:absolute;

    bottom:90px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    padding:18px 28px;

    border-radius:60px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light));

    color:#ffffff;

    font-size:16px;

    font-weight:700;

    white-space:nowrap;

    box-shadow:

    0 20px 45px

    rgba(23,107,255,.30);

}



.shwhy-badge i{

    font-size:22px;

}



/*=========================================================
CONNECTOR LINES
=========================================================*/

.shwhy-center::after{

    content:"";

    position:absolute;

    width:100%;

    height:2px;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(23,107,255,.20),

    transparent);

    top:50%;

    left:0;

}

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

.shwhy-card{

    height: 250px;
    position:relative;

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:34px;

    border-radius:28px;

    background:#ffffff;

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

    box-shadow:

    0 25px 60px

    rgba(15,23,42,.06);

    transition:.45s cubic-bezier(.22,.61,.36,1);

    overflow:hidden;

}



/*=========================================================
LEFT ACCENT
=========================================================*/

.shwhy-card::before{

    content:"";

    position:absolute;

    left:0;

    top:40px;

    width:5px;

    height:90px;

    border-radius:10px;

    background:

    linear-gradient(

        180deg,

        var(--primary),

        var(--primary-light)

    );

    transition:.45s;

}



/*=========================================================
TOP SHINE
=========================================================*/

.shwhy-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.7),

        transparent

    );

    transition:1s;

}



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

.shwhy-icon{

    flex-shrink:0;

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(

        135deg,

        var(--primary),

        var(--primary-light)

    );

    color:#ffffff;

    font-size:30px;

    box-shadow:

    0 20px 45px

    rgba(23,107,255,.22);

    transition:.45s;

}



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

.shwhy-info{

    flex:1;

}



.shwhy-info h3{

    margin:0;

    color:var(--dark);

    font-size:28px;

    font-weight:700;

    line-height:1.2;

}



.shwhy-info h3::after{

    content:"";

    display:block;

    width:42px;

    height:4px;

    margin-top:14px;

    margin-bottom:18px;

    border-radius:10px;

    background:var(--primary);

    transition:.4s;

}



.shwhy-info p{

    margin:0;

    color:var(--text);

    font-size:16px;

    line-height:1.9;

}



/*=========================================================
CONNECTOR DOT
=========================================================*/

.shwhy-card .shwhy-dot{

    position:absolute;

    right:-8px;

    top:50%;

    transform:translateY(-50%);

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 0 8px

    rgba(23,107,255,.10);

}



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

.shwhy-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    box-shadow:

    0 40px 80px

    rgba(15,23,42,.12);

}



.shwhy-card:hover::before{

    height:100%;

    top:0;

}



.shwhy-card:hover::after{

    left:170%;

}



.shwhy-card:hover .shwhy-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



.shwhy-card:hover .shwhy-info h3{

    color:var(--primary);

}



.shwhy-card:hover .shwhy-info h3::after{

    width:80px;

}



.shwhy-card:hover .shwhy-dot{

    box-shadow:

    0 0 0 14px

    rgba(23,107,255,.08);

}



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

.shwhy-circle{

    transition:.55s;

}



.shwhy-center:hover .shwhy-circle{

    transform:scale(1.03);

}



.shwhy-center:hover .shwhy-badge{

    transform:

    translateX(-50%)

    translateY(-6px);

}


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

.shwhy-stats{

    margin-top:120px;

    padding:0;

}



.shwhy-stat{

    position:relative;

    text-align:center;

    padding:45px 20px;

    background:#ffffff;

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

    transition:.45s;

    overflow:hidden;

}



.shwhy-stat::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(23,107,255,.02),

        transparent

    );

    opacity:0;

    transition:.45s;

}



.shwhy-stat i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:18px;

    display:inline-block;

    transition:.4s;

}



.shwhy-stat h4{

    margin:0;

    color:var(--dark);

    font-size:52px;

    font-weight:800;

    line-height:1;

}



.shwhy-stat span{

    display:block;

    margin-top:12px;

    color:var(--text);

    font-size:15px;

    font-weight:500;

}



/*=========================================================
STAT BORDER
=========================================================*/

.shwhy-stat:not(:last-child){

    border-right:none;

}



/*=========================================================
STAT HOVER
=========================================================*/

.shwhy-stat:hover{

    transform:translateY(-10px);

    z-index:5;

    box-shadow:

    0 30px 70px

    rgba(15,23,42,.08);

}



.shwhy-stat:hover::before{

    opacity:1;

}



.shwhy-stat:hover i{

    transform:

    rotate(-12deg)

    scale(1.12);

}



/*=========================================================
FLOAT
=========================================================*/

@keyframes shwhyFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}



.shwhy-circle{

    animation:

    shwhyFloat

    6s ease-in-out infinite;

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

.shwhy-center{

min-height:560px;

}

.shwhy-circle{

width:380px;

height:380px;

}

}



@media(max-width:991px){

.shwhy-section{

padding:110px 0;

}

.shwhy-center{

margin:60px 0;

min-height:auto;

}

.shwhy-circle{

width:340px;

height:340px;

}

.shwhy-column{

gap:24px;

}

.shwhy-card{

padding:28px;

}

.shwhy-stats{

margin-top:80px;

}

.shwhy-stat{

border-right:1px solid rgba(23,107,255,.08);

border-bottom:1px solid rgba(23,107,255,.08);

}

}



@media(max-width:767px){

.shwhy-heading{

margin-bottom:60px;

}

.shwhy-heading h2{

font-size:42px;

}

.shwhy-card{

padding:24px;

gap:18px;

}

.shwhy-icon{

width:64px;

height:64px;

font-size:24px;

border-radius:18px;

}

.shwhy-info h3{

font-size:22px;

}

.shwhy-info p{

font-size:14px;

}

.shwhy-circle{

width:290px;

height:290px;

}

.shwhy-badge{

padding:14px 22px;

font-size:14px;

bottom:40px;

}

.shwhy-stat{

padding:35px 15px;

}

.shwhy-stat h4{

font-size:40px;

}

}



@media(max-width:575px){

.shwhy-section{

padding:90px 0;

}

.shwhy-circle{

width:250px;

height:250px;

padding:10px;

}

.shwhy-badge{

position:relative;

left:auto;

bottom:auto;

transform:none;

margin-top:25px;

justify-content:center;

}

.shwhy-center{

display:flex;

flex-direction:column;

}

.shwhy-card{

flex-direction:column;

text-align:center;

align-items:center;

}

.shwhy-card::before{

display:none;

}

.shwhy-info h3::after{

margin-left:auto;

margin-right:auto;

}

.shwhy-dot{

display:none;

}

}



















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

.shprocess-section{

    position:relative;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shprocess-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}



.shprocess-grid{

    position:absolute;

    inset:0;

    opacity:.16;

    background-image:

    linear-gradient(

    rgba(23,107,255,.04) 1px,

    transparent 1px),

    linear-gradient(

    90deg,

    rgba(23,107,255,.04) 1px,

    transparent 1px);

    background-size:70px 70px;

}



.shprocess-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}



.shprocess-blur-left{

    width:520px;

    height:520px;

    left:-240px;

    top:-180px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.10),

    transparent);

}



.shprocess-blur-right{

    width:650px;

    height:650px;

    right:-280px;

    bottom:-250px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.08),

    transparent);

}



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

.shprocess-section .container{

    position:relative;

    z-index:5;

}



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

.shprocess-heading{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.shprocess-heading h2{

    margin:24px 0 18px;

    font-family:var(--heading-font);

    font-size:clamp(42px,5vw,62px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--dark);

}



.shprocess-heading h2 span{

    color:var(--primary);

}



.shprocess-heading p{

    max-width:720px;

    margin:auto;

    font-family:var(--body-font);

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}



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

.shprocess-wrapper{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:0;

    position:relative;

}



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

.shprocess-card{

    position:relative;
    height: 350px;
    flex:1;

    min-width:250px;

    max-width:280px;

    padding:105px 28px 38px;

    border-radius:30px;

    background:#ffffff;

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

    box-shadow:

    0 25px 60px

    rgba(15,23,42,.06);

    transition:.45s cubic-bezier(.22,.61,.36,1);

     overflow:visible;

}



/*=========================================================
TOP
=========================================================*/

.shprocess-top{

    position:absolute;

    top:-42px;

    left:50%;

    transform:translateX(-50%);

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}



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

.shprocess-icon{

    width:110px;

    height:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    border:10px solid #f7f9ff;

    box-shadow:

    0 18px 45px

    rgba(15,23,42,.08);

    position:relative;

    z-index:3;

}



.shprocess-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:4px solid var(--primary);

    border-left-color:transparent;

    border-bottom-color:transparent;

    transform:rotate(-30deg);

}



.shprocess-icon i{

    font-size:42px;

    color:var(--primary);

}



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

.shprocess-number{

    position:absolute;

    top:92px;

    font-size:92px;

    font-weight:800;

    color:rgba(18,68,92,.08);

    line-height:1;

    user-select:none;

}



/*=========================================================
BODY
=========================================================*/

.shprocess-body{

    text-align:center;

}



.shprocess-body h3{

    margin-bottom:18px;

    font-family:var(--heading-font);

    font-size:28px;

    font-weight:700;

    color:var(--dark);

    line-height:1.25;

}



.shprocess-body p{

    margin:0;

    font-family:var(--body-font);

    font-size:15px;

    line-height:1.9;

    color:var(--text);

}



/*=========================================================
CONNECTOR LINE
=========================================================*/

.shprocess-line{

    position:relative;

    flex:0 0 70px;

    height:340px;

    display:flex;

    align-items:center;

    justify-content:center;

}



/*=========================================================
MAIN LINE
=========================================================*/

.shprocess-line::before{

    content:"";

    position:absolute;

    top:96px;

    left:-8px;

    right:-8px;

    height:4px;

    border-radius:10px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    opacity:.9;

}



/*=========================================================
GLOW
=========================================================*/

.shprocess-line::after{

    content:"";

    position:absolute;

    top:94px;

    left:0;

    width:100%;

    height:8px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        rgba(23,107,255,.45),

        rgba(23,107,255,0)

    );

    filter:blur(10px);

}



/*=========================================================
CENTER BUTTON
=========================================================*/

.shprocess-line span{

    position:relative;

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

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

    box-shadow:

    0 18px 45px

    rgba(15,23,42,.08);

    z-index:5;

}



.shprocess-line span::before{

    content:"→";

    color:var(--primary);

    font-size:22px;

    font-weight:700;

}



/*=========================================================
CARD TOP BORDER
=========================================================*/

.shprocess-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    transform:scaleX(0);

    transform-origin:left;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transition:.45s;

}



/*=========================================================
SHINE
=========================================================*/

.shprocess-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:50%;

    height:250%;

    transform:rotate(28deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.75),

        transparent

    );

    transition:1s;

}



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

.shprocess-card:hover{

    transform:

    translateY(-16px);

    box-shadow:

    0 45px 90px

    rgba(15,23,42,.12);

}



.shprocess-card:hover::before{

    transform:scaleX(1);

}



.shprocess-card:hover::after{

    left:170%;

}



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

.shprocess-card:hover .shprocess-icon{

    transform:

    rotate(-8deg)

    scale(1.08);

}



.shprocess-icon{

    transition:.45s;

}



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

.shprocess-card:hover .shprocess-number{

    color:

    rgba(23,107,255,.16);

}



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

.shprocess-body h3{

    transition:.35s;

}



.shprocess-card:hover h3{

    color:var(--primary);

}



/*=========================================================
LINE BUTTON
=========================================================*/

.shprocess-line span{

    transition:.35s;

}



.shprocess-card:hover + .shprocess-line span{

    transform:scale(1.12);

    background:var(--primary);

}



.shprocess-card:hover + .shprocess-line span::before{

    color:#ffffff;

}



/*=========================================================
ACTIVE GLOW
=========================================================*/

.shprocess-card:hover .shprocess-icon{

    box-shadow:

    0 25px 60px

    rgba(23,107,255,.22);

}


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

.shprocess-stats{

    position:relative;

    margin-top:120px;

    padding:0;

    border-radius:34px;

    overflow:hidden;

    background:

    linear-gradient(

        135deg,

        #0d2741,

        #123b61

    );

    box-shadow:

    0 35px 90px

    rgba(15,23,42,.16);

}



.shprocess-stats::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(255,255,255,.08),

        transparent 45%

    );

}



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

.shprocess-stat{

    position:relative;

    padding:55px 30px;

    text-align:center;

    color:#ffffff;

    transition:.4s;

}



.shprocess-stat::after{

    content:"";

    position:absolute;

    top:50%;

    right:0;

    width:1px;

    height:80px;

    transform:translateY(-50%);

    background:

    rgba(255,255,255,.12);

}



.shprocess-stat:last-child::after{

    display:none;

}



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

.shprocess-stat i{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    margin-bottom:22px;

    border-radius:50%;

    background:

    rgba(255,255,255,.08);

    backdrop-filter:blur(10px);

    color:#ffffff;

    font-size:28px;

    transition:.4s;

}



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

.shprocess-stat h4{

    margin:0;

    font-family:var(--heading-font);

    font-size:54px;

    font-weight:800;

    color:#ffffff;

    line-height:1;

}



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

.shprocess-stat span{

    display:block;

    margin-top:14px;

    font-size:15px;

    line-height:1.7;

    color:

    rgba(255,255,255,.82);

}



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

.shprocess-stat:hover{

    background:

    rgba(255,255,255,.03);

}



.shprocess-stat:hover i{

    transform:

    rotate(-10deg)

    scale(1.08);

    background:var(--primary);

}



/*=========================================================
FLOAT
=========================================================*/

@keyframes shprocessFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}



.shprocess-icon{

    animation:

    shprocessFloat

    5s ease-in-out infinite;

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1399px){

.shprocess-wrapper{

overflow-x:auto;

padding-bottom:20px;

justify-content:flex-start;

scrollbar-width:none;

}

.shprocess-wrapper::-webkit-scrollbar{

display:none;

}

}



@media(max-width:991px){
.shprocess-wrapper{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:40px;

}

.shprocess-card{
    height: 300px;

    width:100%;

    max-width:520px;

    min-width:unset;

}

.shprocess-line{

    width:4px;

    height:70px;

    flex:none;

}

.shprocess-line::before{

    width:4px;

    height:100%;

    left:50%;

    top:0;

    right:auto;

    transform:translateX(-50%);

}

.shprocess-line::after{

    display:none;

}

.shprocess-line span{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) rotate(90deg);

}

}



@media(max-width:767px){

.shprocess-section{

padding:90px 0;

}

.shprocess-heading{

margin-bottom:60px;

}

.shprocess-heading h2{

font-size:42px;

}

.shprocess-card{

min-width:280px;

padding:95px 24px 28px;

}

.shprocess-icon{

width:90px;

height:90px;

}

.shprocess-icon i{

font-size:34px;

}

.shprocess-number{

font-size:72px;

top:80px;

}

.shprocess-body h3{

font-size:24px;

}

.shprocess-body p{

font-size:14px;

}

.shprocess-line{

display:none;

}

.shprocess-stats{

margin-top:80px;

}

}



@media(max-width:575px){

.shprocess-card{

min-width:88%;

}

.shprocess-stat{

padding:35px 15px;

}

.shprocess-stat h4{

font-size:40px;

}

.shprocess-stat i{

width:60px;

height:60px;

font-size:24px;

}

}










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

.shtesti-section{

    position:relative;

    padding:70px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shtesti-bg{

    position:absolute;

    inset:0;

    z-index:0;

    overflow:hidden;

}



.shtesti-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}



.shtesti-blur-left{

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.10),

    transparent);

}



.shtesti-blur-right{

    width:650px;

    height:650px;

    right:-280px;

    bottom:-260px;

    background:

    radial-gradient(

    circle,

    rgba(23,107,255,.08),

    transparent);

}



.shtesti-line{

    position:absolute;

    opacity:.45;

}



.shtesti-line-left{

    left:-30px;

    top:120px;

}



.shtesti-line-right{

    right:-30px;

    bottom:120px;

}



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

.shtesti-section .container{

    position:relative;

    z-index:5;

}



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

.shtesti-heading{

    max-width:840px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.shtesti-heading h2{

    margin:24px 0 18px;

    font-family:var(--heading-font);

    font-size:clamp(42px,5vw,62px);

    font-weight:800;

    line-height:1.08;

    letter-spacing:-2px;

    color:var(--dark);

}



.shtesti-heading h2 span{

    color:var(--primary);

}



.shtesti-heading p{

    max-width:720px;

    margin:auto;

    font-family:var(--body-font);

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}



/*=========================================================
SLIDER
=========================================================*/

.shtesti-slider{

    position:relative;

    overflow:hidden;

    padding:20px 0 80px;

}



.shtesti-slider .swiper-slide{

    height:auto;

    display:flex;

}

.shtesti-slider .swiper-wrapper{

    display:flex;

}

.shtesti-slider .swiper-slide{

    height:auto;

    display:flex;

    flex-shrink:0;

}

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

.shtesti-card{

    position:relative;

    width:100%;

    padding:38px;

    border-radius:30px;

    background:#ffffff;

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

    box-shadow:

    0 25px 60px

    rgba(15,23,42,.06);

    transition:.45s cubic-bezier(.22,.61,.36,1);

    overflow:hidden;

}



/*=========================================================
QUOTE
=========================================================*/

.shtesti-quote{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    margin-bottom:28px;

    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-light));

    color:#ffffff;

    font-size:30px;

    box-shadow:

    0 18px 45px

    rgba(23,107,255,.25);

}



/*=========================================================
RATING
=========================================================*/

.shtesti-rating{

    display:flex;

    gap:6px;

    margin-bottom:22px;

}



.shtesti-rating i{

    color:#ffb400;

    font-size:16px;

}



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

.shtesti-text{

    margin:0;

    font-family:var(--body-font);

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}


/*=========================================================
DIVIDER
=========================================================*/

.shtesti-divider{

    display:block;

    width:100%;

    height:1px;

    margin:30px 0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(23,107,255,.18),

        transparent

    );

}



/*=========================================================
CLIENT
=========================================================*/

.shtesti-client{

    display:flex;

    align-items:center;

    gap:18px;

}



.shtesti-client img{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #ffffff;

    box-shadow:

    0 12px 30px

    rgba(15,23,42,.10);

    transition:.4s;

}



.shtesti-client h4{

    margin:0 0 6px;

    font-family:var(--heading-font);

    font-size:22px;

    font-weight:700;

    color:var(--dark);

}



.shtesti-client span{

    display:block;

    margin-bottom:3px;

    font-size:14px;

    color:var(--primary);

    font-weight:600;

}



.shtesti-client small{

    display:block;

    color:var(--text);

    font-size:13px;

}



/*=========================================================
TOP BORDER
=========================================================*/

.shtesti-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    transform:scaleX(0);

    transform-origin:left;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transition:.45s;

}



/*=========================================================
SHINE
=========================================================*/

.shtesti-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:45%;

    height:260%;

    transform:rotate(28deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.8),

        transparent

    );

    transition:1s;

}



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

.shtesti-card:hover{

    transform:

    translateY(-14px);

    box-shadow:

    0 40px 80px

    rgba(15,23,42,.12);

}



.shtesti-card:hover::before{

    transform:scaleX(1);

}



.shtesti-card:hover::after{

    left:170%;

}



/*=========================================================
QUOTE
=========================================================*/

.shtesti-quote{

    transition:.4s;

}



.shtesti-card:hover .shtesti-quote{

    transform:

    rotate(-10deg)

    scale(1.08);

}



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

.shtesti-card:hover .shtesti-client img{

    transform:scale(1.08);

}



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

.shtesti-client h4{

    transition:.35s;

}



.shtesti-card:hover .shtesti-client h4{

    color:var(--primary);

}



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

.shtesti-text{

    transition:.35s;

}



.shtesti-card:hover .shtesti-text{

    color:var(--dark);

}



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

.shtesti-slider .swiper-slide-active .shtesti-card{

    border-color:

    rgba(23,107,255,.16);

}



/*=========================================================
ACTIVE QUOTE
=========================================================*/

.shtesti-slider .swiper-slide-active .shtesti-quote{

    box-shadow:

    0 22px 50px

    rgba(23,107,255,.30);

}

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

.shtesti-prev,
.shtesti-next{

    position:absolute;

    top:45%;

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

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

    box-shadow:
    0 18px 45px
    rgba(15,23,42,.08);

    cursor:pointer;

    transition:.35s;

    z-index:20;

}



.shtesti-prev{

    left:-32px;

}



.shtesti-next{

    right:-32px;

}



.shtesti-prev i,
.shtesti-next i{

    font-size:22px;

    color:var(--primary);

    transition:.35s;

}



.shtesti-prev:hover,
.shtesti-next:hover{

    background:var(--primary);

    transform:translateY(-4px);

}



.shtesti-prev:hover i,
.shtesti-next:hover i{

    color:#ffffff;

}



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

.shtesti-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    margin-top:55px;

}



/*=========================================================
PAGINATION
=========================================================*/

.shtesti-pagination{

    display:flex;

    align-items:center;

    gap:10px;

}



.shtesti-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    opacity:1;

    border-radius:30px;

    background:#d8e5ff;

    transition:.35s;

}



.shtesti-pagination .swiper-pagination-bullet-active{

    width:38px;

    background:var(--primary);

}



/*=========================================================
PROGRESS
=========================================================*/

.shtesti-progress{

    flex:1;

    max-width:320px;

    height:6px;

    border-radius:30px;

    overflow:hidden;

    background:#eaf1ff;

}



.shtesti-progress-fill{

    display:block;

    width:25%;

    height:100%;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

}



/*=========================================================
TRUST STRIP
=========================================================*/

.shtesti-trust{

    margin-top:90px;

}



.shtesti-trust-item{

    text-align:center;

    padding:36px 20px;

    border-radius:26px;

    background:#ffffff;

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

    box-shadow:

    0 18px 45px

    rgba(15,23,42,.05);

    transition:.35s;

}



.shtesti-trust-item i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:18px;

    display:inline-block;

    transition:.35s;

}



.shtesti-trust-item h4{

    margin:0;

    font-family:var(--heading-font);

    font-size:44px;

    font-weight:800;

    color:var(--dark);

}



.shtesti-trust-item span{

    display:block;

    margin-top:12px;

    color:var(--text);

    font-size:15px;

    line-height:1.8;

}



.shtesti-trust-item:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 70px

    rgba(15,23,42,.10);

}



.shtesti-trust-item:hover i{

    transform:rotate(-10deg);

}



/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:1199px){

.shtesti-prev{

left:-12px;

}

.shtesti-next{

right:-12px;

}

}



@media(max-width:991px){

.shtesti-section{

padding:110px 0;

}

.shtesti-prev,
.shtesti-next{

display:none;

}

}



@media(max-width:767px){

.shtesti-section{

padding:90px 0;

}

.shtesti-heading{

margin-bottom:60px;

}

.shtesti-bottom{

flex-direction:column;

gap:22px;

}

.shtesti-progress{

max-width:100%;

width:100%;

}

.shtesti-card{

padding:30px;

}

.shtesti-client img{

width:60px;

height:60px;

}

.shtesti-client h4{

font-size:20px;

}

.shtesti-trust{

margin-top:70px;

}

.shtesti-trust-item{

padding:30px 18px;

}

.shtesti-trust-item h4{

font-size:36px;

}

}