.journey-section{
    padding:100px 20px;
    position:relative;
    overflow:hidden;
    box-sizing:border-box;
      background:#f7fbff;
}

/* Decorative Background Circles */

.journey-section::before{
    content:'';
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(220,38,93,.05);
    top:-150px;
    left:-120px;
}

.journey-section::after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(14,114,167,.05);
    bottom:-150px;
    right:-120px;
}

/* Floating Icons */

.floating-icon{
    position:absolute;
    font-size:60px;
    opacity:.05;
    pointer-events:none;
    animation:float 8s ease-in-out infinite;
    z-index:0;
}

.icon1{top:120px;left:5%;}
.icon2{top:180px;right:8%;animation-delay:1s;}
.icon3{top:420px;left:10%;animation-delay:2s;}
.icon4{top:600px;right:15%;animation-delay:3s;}
.icon5{top:350px;right:30%;animation-delay:4s;}
.icon6{top:520px;left:40%;animation-delay:5s;}

@keyframes float{
    0%{transform:translateY(0);}
    50%{transform:translateY(-20px);}
    100%{transform:translateY(0);}
}

/* HEADING */

.section-title{
    text-align:center;
    margin-bottom:80px;
    position:relative;
    z-index:2;
}

.section-title h2{
    font-size:58px;
    font-weight:800;
    color:var(--blue);
}

.section-title h2 span{
    color:var(--pink);
}

.section-title p{
    color:#666;
    margin-top:15px;
    font-size:18px;
}

/* TIMELINE */

.timeline-wrapper{
    max-width:1400px;
    margin:auto;
    position:relative;
}

.timeline-line{
    position:absolute;
    top:75px;
    left:8%;
    width:84%;
    height:8px;
    border-radius:50px;

    background:linear-gradient(
        90deg,
        #dc265d,
        #0e72a7,
        #dc265d
    );

    background-size:300% 100%;

    animation:lineMove 8s linear infinite;

    box-shadow:
    0 0 20px rgba(220,38,93,.25),
    0 0 20px rgba(14,114,167,.25);
}

@keyframes lineMove{
    0%{background-position:0% 50%;}
    100%{background-position:100% 50%;}
}

.timeline{
    display:flex;
    justify-content:space-between;
    position:relative;
    z-index:2;
}

/* STAGE */

.stage{
    width:23%;
    text-align:center;
}

/* NUMBER */

.number{
    width:60px;
    height:60px;
    border-radius:50%;

    margin:0 auto -30px;

    background:linear-gradient(
        135deg,
        var(--pink),
        var(--blue)
    );

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

    color:#fff;
    font-size:22px;
    font-weight:700;

    position:relative;
    z-index:3;
}

/* PHOTO */

.photo{
    width:150px;
    height:150px;

    border-radius:50%;
    overflow:hidden;

    margin:auto;

    border:6px solid #fff;

    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

    transition:.4s;
}

.stage:hover .photo{
    transform:scale(1.08);
}

.photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* CARD */

.card{

    margin-top:25px;

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

    backdrop-filter:blur(20px);

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

    border-radius:25px;

    padding:25px;

    position:relative;
    overflow:hidden;

    transition:.4s;

    box-shadow:
    0 15px 40px rgba(0,0,0,.06);
}

.stage:hover .card{
    transform:translateY(-10px);
}

/* Shine Effect */

.card::before{

    content:'';

    position:absolute;

    top:-50%;
    left:-100%;

    width:120%;
    height:200%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.6),
        transparent
    );

    transition:.8s;
}

.stage:hover .card::before{
    left:120%;
}

/* TEXT */

.card h3{
    color:var(--blue);
    font-size:26px;
    margin-bottom:10px;
}

.class-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(220,38,93,.1);

    color:var(--pink);

    font-weight:600;

    margin-bottom:15px;
}

.card p{
    color:#666;
    line-height:1.8;
}

/* FOOTER TAGLINE */

.journey-footer{

    text-align:center;

    margin-top:80px;

    font-size:24px;

    font-weight:600;

    background:linear-gradient(
        90deg,
        #dc265d,
        #0e72a7
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    position:relative;
    z-index:2;
}

/* MOBILE */

@media(max-width:1100px){

.timeline{
    flex-wrap:wrap;
    gap:30px;
}

.timeline-line{
    display:none;
}

.stage{
    width:48%;
}

}

@media(max-width:768px){

.section-title h2{
    font-size:36px;
}

.stage{
    width:100%;
}

.floating-icon{
    display:none;
}

}