/*======================================
FRAMEWORK 10 STUDENT JOURNEY
======================================*/

.journey{

padding:var(--space-2xl) 0;

}

.journey-wrapper{

position:relative;

display:flex;

justify-content:space-between;

margin-top:90px;

}

.journey-line{

position:absolute;

top:45px;

left:0;

right:0;

height:4px;

background:var(--gradient-primary);

z-index:1;

}

.journey-step{

position:relative;

z-index:2;

width:18%;

text-align:center;

}

.step-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:36px;

background:var(--surface);

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

box-shadow:0 15px 40px rgba(124,58,237,.30);

margin-bottom:25px;

transition:.4s;

}

.journey-step:hover .step-icon{

transform:scale(1.15);

background:var(--primary);

}

.journey-step h3{

margin-bottom:12px;

font-size:28px;

}

.journey-step p{

font-size:15px;

}

@media(max-width:992px){

.journey-wrapper{

flex-direction:column;

gap:60px;

}

.journey-line{

display:none;

}

.journey-step{

width:100%;

}

}