/*=========================================================
JOB SEEKERS HERO
=========================================================*/

.shjob-hero{

    position:relative;

    height:100vh;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:#0b2339;

}



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

.shjob-hero-bg{

    position:absolute;

    inset:0;

    z-index:1;

}



.shjob-hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

}



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

.shjob-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        90deg,

        rgba(9,30,48,.88) 0%,

        rgba(9,30,48,.72) 35%,

        rgba(9,30,48,.40) 60%,

        rgba(9,30,48,.12) 100%

    );

}



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

.shjob-hero .container{

    position:relative;

    z-index:5;

}



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

.shjob-hero .row{

    min-height:70vh;

}



/*=========================================================
BREADCRUMB
=========================================================*/

.shjob-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin:0 0 28px;

    padding:0;

    list-style:none;

}



.shjob-breadcrumb li{

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

    font-size:14px;

}



.shjob-breadcrumb a{

    color:#ffffff;

    transition:.35s;

}



.shjob-breadcrumb a:hover{

    color:var(--primary-light);

}



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

.shjob-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:50px;

    background:

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

    backdrop-filter:blur(16px);

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

    color:#ffffff;

    font-size:14px;

    font-weight:600;

}



.shjob-subtitle i{

    color:var(--primary-light);

}



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

.shjob-hero h1{

    margin:30px 0 24px;

    color:#ffffff;

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

    font-size:clamp(48px,5vw,72px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

}



.shjob-hero h1 span{

    color:var(--primary-light);

}



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

.shjob-hero p{

    max-width:650px;

    margin-bottom:42px;

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

    font-size:18px;

    line-height:1.9;

}



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

.shjob-btns{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}



.shjob-outline-btn{

    height:60px;

    padding:0 34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:60px;

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

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

    backdrop-filter:blur(12px);

    color:#ffffff;

    font-weight:600;

    transition:.35s;

}



.shjob-outline-btn:hover{

    background:#ffffff;

    color:var(--primary);

}


/*=========================================================
HIGHLIGHTS
=========================================================*/

.shjob-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:45px;

}



.shjob-item{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 22px;

    border-radius:60px;

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

    backdrop-filter:blur(16px);

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

    transition:.35s;

}



.shjob-item i{

    color:#48d17b;

    font-size:18px;

}



.shjob-item span{

    color:#ffffff;

    font-size:15px;

    font-weight:500;

}



.shjob-item:hover{

    transform:translateY(-4px);

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

}



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

.shjob-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:2;

}



.shjob-shape-1{

    width:220px;

    height:220px;

    top:8%;

    right:12%;

    background:

    radial-gradient(

        circle,

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

        transparent 72%

    );

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

}



.shjob-shape-2{

    width:120px;

    height:120px;

    bottom:18%;

    right:28%;

    background:

    radial-gradient(

        circle,

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

        transparent 70%

    );

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

}



.shjob-shape-3{

    width:70px;

    height:70px;

    top:18%;

    left:60%;

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

    backdrop-filter:blur(12px);

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

}



/*=========================================================
SCROLL
=========================================================*/

.shjob-scroll{

    position:absolute;

    left:50%;

    bottom:45px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#ffffff;

    z-index:10;

}



.shjob-scroll span{

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}



.shjob-scroll i{

    font-size:26px;

    animation:shjobScroll 2s infinite;

}



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

.shjob-wave{

    position:absolute;

    left:0;

    right:0;

    bottom:-2px;

    z-index:6;

    line-height:0;

}



.shjob-wave svg{

    display:block;

    width:100%;

    height:120px;

}



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

@keyframes shjobFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-16px);

}

100%{

transform:translateY(0);

}

}



@keyframes shjobScroll{

0%{

transform:translateY(0);

opacity:1;

}

50%{

transform:translateY(10px);

opacity:.45;

}

100%{

transform:translateY(0);

opacity:1;

}

}



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

@media(max-width:991px){

.shjob-hero{

height:auto;

min-height:620px;

padding:150px 0 120px;

}

.shjob-hero .row{

min-height:auto;

}

.shjob-hero h1{

font-size:54px;

}

.shjob-highlights{

gap:14px;

}

.shjob-scroll{

display:none;

}

}



@media(max-width:767px){

.shjob-hero{

padding:130px 0 90px;

min-height:auto;

}

.shjob-hero h1{

font-size:42px;

}

.shjob-hero p{

font-size:16px;

}

.shjob-btns{

flex-direction:column;

align-items:stretch;

}

.shjob-outline-btn,

.shjob-btns .sh-primary-btn{

width:100%;

justify-content:center;

}

.shjob-highlights{

flex-direction:column;

}

.shjob-item{

width:100%;

}

.shjob-shape{

display:none;

}

.shjob-wave svg{

height:70px;

}

}












/*=========================================================
JOB APPLICATION SECTION
=========================================================*/

.shapply-section{

    position:relative;

    padding:140px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shapply-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}



.shapply-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}



.shapply-blur-1{

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    background:

    radial-gradient(

        circle,

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

        transparent

    );

}



.shapply-blur-2{

    width:620px;

    height:620px;

    right:-280px;

    bottom:-240px;

    background:

    radial-gradient(

        circle,

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

        transparent

    );

}



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

.shapply-section .container{

    position:relative;

    z-index:5;

}



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

.shapply-heading{

    max-width:820px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.shapply-heading h2{

    margin:22px 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);

}



.shapply-heading h2 span{

    color:var(--primary);

}



.shapply-heading p{

    max-width:700px;

    margin:auto;

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}



/*=========================================================
LEFT PANEL
=========================================================*/

.shapply-left{

    position:relative;

    padding:45px;

    border-radius:10px;

    background:

    linear-gradient(

        135deg,

        #0d2741,

        #12445c

    );

    color:#ffffff;

    overflow:hidden;

    box-shadow:

    0 30px 80px

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

}



.shapply-left::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    right:-120px;

    top:-120px;

    background:

    radial-gradient(

        circle,

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

        transparent

    );

}



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

.shapply-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:50px;

    background:

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

    backdrop-filter:blur(12px);

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

    font-size:14px;

    font-weight:600;

}



.shapply-badge i{

    color:#ffd65c;

}



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

.shapply-left h3{

    margin:30px 0 18px;

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

    font-size:38px;

    font-weight:800;

    line-height:1.2;

    color:#ffffff;

}



.shapply-left p{

    margin-bottom:38px;

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

    line-height:1.9;

}



/*=========================================================
BENEFITS
=========================================================*/

.shapply-benefits{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.shapply-benefit{

    display:flex;

    align-items:flex-start;

    gap:18px;

}



.shapply-benefit i{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:

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

    color:#ffffff;

    font-size:22px;

    flex-shrink:0;

}



.shapply-benefit h4{

    margin:0 0 6px;

    font-size:20px;

    font-weight:700;

    color:#ffffff;

}



.shapply-benefit span{

    display:block;

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

    line-height:1.7;

}



/*=========================================================
COUNTERS
=========================================================*/

.shapply-counter{

    display:flex;

    justify-content:space-between;

    gap:20px;

    margin-top:45px;

    padding-top:35px;

    border-top:

    1px solid

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

}



.shapply-counter h5{

    margin:0;

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

    font-size:42px;

    font-weight:800;

    color:#ffffff;

}



.shapply-counter span{

    display:block;

    margin-top:8px;

    font-size:14px;

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

}


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

.shapply-form-wrap{

    position:relative;

    padding:55px;

    border-radius:10px;

    background:#ffffff;

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

    box-shadow:

    0 35px 90px

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

    overflow:hidden;

}



.shapply-form-wrap::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

}



/*=========================================================
FORM
=========================================================*/

.shapply-form{

    position:relative;

    z-index:2;

}



/*=========================================================
GROUP
=========================================================*/

.shapply-group{

    margin-bottom:28px;

}



.shapply-group label{

    display:block;

    margin-bottom:12px;

    font-size:15px;

    font-weight:700;

    color:var(--dark);

}



/*=========================================================
INPUT
=========================================================*/

.shapply-group input,

.shapply-group select,

.shapply-group textarea{

    width:100%;

    height:62px;

    padding:0 22px;

    border-radius:18px;

    border:1px solid #dfe7f6;

    background:#f9fbff;

    font-size:15px;

    color:var(--dark);

    transition:.35s;

    outline:none;

}



.shapply-group textarea{

    height:170px;

    padding:22px;

    resize:none;

}



.shapply-group input::placeholder,

.shapply-group textarea::placeholder{

    color:#8f9db2;

}



.shapply-group input:focus,

.shapply-group textarea:focus,

.shapply-group select:focus{

    border-color:var(--primary);

    background:#ffffff;

    box-shadow:

    0 0 0 5px

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

}



/*=========================================================
SELECT
=========================================================*/

.shapply-group select{

    appearance:none;

    cursor:pointer;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23176BFF' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6' stroke='%23176BFF' stroke-width='2' fill='none'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 22px center;

}



/*=========================================================
UPLOAD
=========================================================*/

.shapply-upload{

    position:relative;

    padding:50px 30px;

    border-radius:24px;

    border:2px dashed rgba(23,107,255,.22);

    background:#f8fbff;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    margin-bottom:30px;

}



.shapply-upload:hover{

    border-color:var(--primary);

    background:#ffffff;

}



.shapply-upload i{

    display:inline-flex;

    width:82px;

    height:82px;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--primary);

    font-size:34px;

    margin-bottom:22px;

}



.shapply-upload h4{

    margin-bottom:10px;

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

    font-size:28px;

    font-weight:700;

    color:var(--dark);

}



.shapply-upload p{

    margin:0;

    color:var(--text);

    font-size:15px;

}



/*=========================================================
FILE
=========================================================*/

.shapply-upload input{

    position:absolute;

    inset:0;

    opacity:0;

    cursor:pointer;

}


/*=========================================================
CHECKBOX
=========================================================*/

.shapply-check{

    display:flex;

    align-items:flex-start;

    gap:14px;

    margin:10px 0 35px;

}



.shapply-check input{

    width:22px;

    height:22px;

    margin-top:2px;

    accent-color:var(--primary);

    cursor:pointer;

}



.shapply-check label{

    margin:0;

    font-size:15px;

    line-height:1.8;

    color:var(--text);

    cursor:pointer;

}



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

.shapply-form .sh-primary-btn{

    width:100%;

    justify-content:center;

    height:64px;

    font-size:16px;

    border:none;

    cursor:pointer;

}



.shapply-form .sh-primary-btn i{

    margin-left:8px;

}



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

.shapply-form-wrap{

    transition:.45s;

}



.shapply-form-wrap:hover{

    transform:translateY(-6px);

    box-shadow:

    0 45px 100px

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

}



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

.shapply-group input:hover,

.shapply-group select:hover,

.shapply-group textarea:hover{

    border-color:

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

}



/*=========================================================
BENEFITS
=========================================================*/

.shapply-benefit{

    transition:.35s;

}



.shapply-benefit:hover{

    transform:translateX(10px);

}



.shapply-benefit:hover i{

    background:var(--primary);

    transform:rotate(-10deg);

}



/*=========================================================
COUNTER
=========================================================*/

.shapply-counter>div{

    flex:1;

}



.shapply-counter h5{

    transition:.35s;

}



.shapply-counter>div:hover h5{

    color:var(--primary-light);

}



/*=========================================================
UPLOAD
=========================================================*/

.shapply-upload{

    overflow:hidden;

}



.shapply-upload::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:45%;

    height:260%;

    transform:rotate(28deg);

    background:

    linear-gradient(

        90deg,

        transparent,

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

        transparent

    );

    transition:1s;

}



.shapply-upload:hover::before{

    left:170%;

}



.shapply-upload:hover i{

    transform:

    scale(1.08)

    rotate(-8deg);

}



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

@media(max-width:1199px){

.shapply-left{

padding:38px;

}

.shapply-form-wrap{

padding:40px;

}

}



@media(max-width:991px){

.shapply-section{

padding:110px 0;

}

.shapply-left{

margin-bottom:40px;

}

.shapply-counter{

margin-top:35px;

}

}



@media(max-width:767px){

.shapply-section{

padding:90px 0;

}

.shapply-heading{

margin-bottom:60px;

}

.shapply-heading h2{

font-size:42px;

}

.shapply-left{

padding:30px;

border-radius:24px;

}

.shapply-left h3{

font-size:30px;

}

.shapply-benefit{

gap:14px;

}

.shapply-benefit i{

width:46px;

height:46px;

font-size:18px;

}

.shapply-counter{

flex-direction:column;

gap:25px;

}

.shapply-form-wrap{

padding:28px;

border-radius:24px;

}

.shapply-group{

margin-bottom:22px;

}

.shapply-group input,

.shapply-group select{

height:56px;

}

.shapply-group textarea{

height:150px;

}

.shapply-upload{

padding:40px 20px;

}

.shapply-upload h4{

font-size:22px;

}

}



@media(max-width:575px){

.shapply-check{

align-items:flex-start;

}

.shapply-check label{

font-size:14px;

}

}










/*=========================================================
CAREER JOURNEY
=========================================================*/

.shjourney-section{

    position:relative;

    padding:140px 0;

    background:#ffffff;

    overflow:hidden;

}



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

.shjourney-bg{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:0;

}



.shjourney-blur{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

}



.shjourney-blur-1{

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    background:

    radial-gradient(

        circle,

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

        transparent

    );

}



.shjourney-blur-2{

    width:650px;

    height:650px;

    right:-260px;

    bottom:-240px;

    background:

    radial-gradient(

        circle,

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

        transparent

    );

}



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

.shjourney-section .container{

    position:relative;

    z-index:5;

}



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

.shjourney-heading{

    max-width:850px;

    margin:auto;

    text-align:center;

    margin-bottom:90px;

}



.shjourney-heading h2{

    margin:22px 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);

}



.shjourney-heading h2 span{

    color:var(--primary);

}



.shjourney-heading p{

    max-width:720px;

    margin:auto;

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

    font-size:16px;

    line-height:1.9;

    color:var(--text);

}



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

.shjourney-wrapper{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:0;

    position:relative;

}



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

.shjourney-card{

    position:relative;

    flex:1;

    min-width:250px;

    max-width:280px;

    padding:105px 30px 35px;

    border-radius:10px;

    background:#ffffff;

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

    box-shadow:

    0 25px 60px

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

     overflow:visible;

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

}



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

.shjourney-icon{

    position:absolute;

    top:-42px;

    left:50%;

    transform:translateX(-50%);

    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);

    z-index:5;

}



.shjourney-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

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

    border-right-color:transparent;

    border-bottom-color:transparent;

    transform:rotate(-35deg);

}



.shjourney-icon i{

    font-size:42px;

    color:var(--primary);

}



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

.shjourney-number{

    position:absolute;

    top:90px;

    left:50%;

    transform:translateX(-50%);

    font-size:88px;

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

    font-weight:800;

    color:rgba(23,107,255,.07);

    line-height:1;

    user-select:none;

}



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

.shjourney-card h3{

    margin-bottom:18px;

    text-align:center;

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

    font-size:28px;

    font-weight:700;

    color:var(--dark);

    line-height:1.25;

}



.shjourney-card p{

    margin:0;

    text-align:center;

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

    font-size:15px;

    line-height:1.9;

    color:var(--text);

}





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

.shjourney-line{

    position:relative;

    flex:0 0 70px;

    height:330px;

    display:flex;

    align-items:center;

    justify-content:center;

}



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

.shjourney-line::before{

    content:"";

    position:absolute;

    top:96px;

    left:-10px;

    right:-10px;

    height:4px;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

}



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

.shjourney-line::after{

    content:"";

    position:absolute;

    top:92px;

    left:-5px;

    right:-5px;

    height:10px;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

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

        rgba(23,107,255,0)

    );

    filter:blur(12px);

}



/*=========================================================
ARROW
=========================================================*/

.shjourney-line span{

    position:relative;

    width:58px;

    height:58px;

    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;

    transition:.4s;

}



.shjourney-line span::before{

    content:"➜";

    font-size:22px;

    color:var(--primary);

    transition:.35s;

}



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

.shjourney-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
=========================================================*/

.shjourney-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:50%;

    height:260%;

    transform:rotate(28deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.80),

        transparent

    );

    transition:1s;

}



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

.shjourney-card:hover{

    transform:

    translateY(-18px);

    box-shadow:

    0 45px 90px

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

}



.shjourney-card:hover::before{

    transform:scaleX(1);

}



.shjourney-card:hover::after{

    left:170%;

}



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

.shjourney-icon{

    transition:.45s;

}



.shjourney-card:hover .shjourney-icon{

    transform:

    translateX(-50%)

    rotate(-8deg)

    scale(1.08);

    box-shadow:

    0 25px 60px

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

}



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

.shjourney-number{

    transition:.35s;

}



.shjourney-card:hover .shjourney-number{

    color:

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

}



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

.shjourney-card h3{

    transition:.35s;

}



.shjourney-card:hover h3{

    color:var(--primary);

}



/*=========================================================
CONNECTOR ACTIVE
=========================================================*/

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

    background:var(--primary);

    transform:scale(1.1);

}



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

    color:#ffffff;

}



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

@keyframes shJourneyFloat{

0%{

transform:translateX(-50%) translateY(0);

}

50%{

transform:translateX(-50%) translateY(-8px);

}

100%{

transform:translateX(-50%) translateY(0);

}

}



.shjourney-icon{

    animation:

    shJourneyFloat

    5s ease-in-out infinite;

}


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

@media(max-width:1399px){

.shjourney-wrapper{

overflow-x:auto;

justify-content:flex-start;

padding-bottom:20px;

scrollbar-width:none;

}

.shjourney-wrapper::-webkit-scrollbar{

display:none;

}

}



@media(max-width:991px){

.shjourney-section{

padding:110px 0;

}



/*---------------------------------
VERTICAL LAYOUT
---------------------------------*/

.shjourney-wrapper{

display:flex;

flex-direction:column;

align-items:center;

gap:35px;

overflow:visible;

}



.shjourney-card{

width:100%;

max-width:560px;

min-width:unset;

}



/*---------------------------------
VERTICAL CONNECTOR
---------------------------------*/

.shjourney-line{

width:4px;

height:70px;

flex:none;

}



.shjourney-line::before{

top:0;

left:50%;

right:auto;

width:4px;

height:100%;

transform:translateX(-50%);

}



.shjourney-line::after{

display:none;

}



.shjourney-line span{

position:absolute;

top:50%;

left:50%;

transform:

translate(-50%,-50%)

rotate(90deg);

}

}



@media(max-width:767px){

.shjourney-section{

padding:90px 0;

}



.shjourney-heading{

margin-bottom:60px;

}



.shjourney-heading h2{

font-size:42px;

}



.shjourney-card{

padding:95px 24px 28px;

max-width:100%;

}



.shjourney-icon{

width:90px;

height:90px;

border-width:8px;

}



.shjourney-icon i{

font-size:34px;

}



.shjourney-number{

font-size:72px;

top:76px;

}



.shjourney-card h3{

font-size:24px;

}



.shjourney-card p{

font-size:14px;

line-height:1.8;

}



.shjourney-line{

height:55px;

}



}



@media(max-width:575px){

.shjourney-card{

border-radius:24px;

padding:90px 22px 26px;

}



.shjourney-heading h2{

font-size:36px;

}



.shjourney-heading p{

font-size:15px;

}



.shjourney-icon{

width:80px;

height:80px;

}



.shjourney-icon i{

font-size:30px;

}



.shjourney-number{

font-size:64px;

}



.shjourney-card h3{

font-size:22px;

}



.shjourney-card p{

font-size:14px;

}

}



/*=========================================================
REVEAL DEFAULT
=========================================================*/

.shjourney-card{

opacity:0;

transform:translateY(60px);

will-change:transform,opacity;

}



/*=========================================================
SMOOTH
=========================================================*/

.shjourney-card,
.shjourney-line span,
.shjourney-icon{

backface-visibility:hidden;

-webkit-font-smoothing:antialiased;

}