/*==================================================
        DDS JOURNEY
        PREMIUM TIMELINE SECTION
        PART 1
        SECTION + HEADING + BACKGROUND
==================================================*/


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

#dds-journey{

    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    linear-gradient(
        180deg,
        #050505,
        #0b0b0b
    );

    isolation:isolate;

}


/*==============================
        RESET ONLY SECTION
==============================*/

#dds-journey *{

    box-sizing:border-box;

}


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

#dds-journey .container{

    position:relative;
    z-index:5;

}


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

#dds-journey .dds-journey-bg{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

    pointer-events:none;

    z-index:-1;

    animation:
    ddsJourneyFloat 8s ease-in-out infinite;

}


#dds-journey .circle1{

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    background:
    rgba(253,185,19,.12);

}


#dds-journey .circle2{

    width:380px;

    height:380px;

    right:-150px;

    bottom:-120px;

    background:
    rgba(253,185,19,.08);

    animation-delay:3s;

}



/*==============================
        GOLD PARTICLE GRID
==============================*/


#dds-journey::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(
        rgba(253,185,19,.18) 1px,
        transparent 1px
    );

    background-size:60px 60px;

    opacity:.12;

    pointer-events:none;

}



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


#dds-journey::after{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:220px;

    height:4px;

    border-radius:50px;

    background:

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


    box-shadow:

    0 0 25px rgba(253,185,19,.8);

}



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


#dds-journey .dds-journey-heading{


    max-width:900px;

    margin:

    0 auto 90px;

    text-align:center;


}



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


#dds-journey .dds-journey-heading > span{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;


    padding:

    14px 32px;


    border-radius:50px;


    background:

    rgba(253,185,19,.08);


    border:

    1px solid rgba(253,185,19,.30);


    color:#fdb913;


    font-size:14px;


    font-weight:700;


    letter-spacing:2px;


    backdrop-filter:blur(15px);


    margin-bottom:30px;


}



#dds-journey .dds-journey-heading span i{


    font-size:18px;

    animation:

    ddsRouteRotate 8s linear infinite;


}



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


#dds-journey h2{


    color:#fff;

    font-size:58px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:25px;


}



#dds-journey h2 span{


    color:#fdb913;


}



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


#dds-journey .dds-journey-heading p{


    max-width:760px;

    margin:auto;


    color:#cfcfcf;


    font-size:18px;


    line-height:34px;


}



/*==================================================
        TIMELINE BASE
==================================================*/


#dds-journey .dds-timeline{


    position:relative;


    max-width:1250px;


    margin:auto;


    padding:40px 0;


}



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


#dds-journey .dds-timeline::before{


    content:"";


    position:absolute;


    top:0;


    left:50%;


    transform:translateX(-50%);


    width:5px;


    height:100%;


    border-radius:50px;


    background:


    linear-gradient(

        to bottom,

        transparent,

        #fdb913,

        transparent

    );


    box-shadow:


    0 0 20px rgba(253,185,19,.5);


}



/*==============================
        STEP BASE
==============================*/


#dds-journey .dds-step{


    position:relative;


    width:50%;


    padding:30px 70px;


    margin-bottom:70px;


    z-index:2;


}



/* LEFT */


#dds-journey .dds-step.left{


    left:0;

    text-align:right;


}



/* RIGHT */


#dds-journey .dds-step.right{


    left:50%;

    text-align:left;


}
/*==================================================
        DDS JOURNEY
        PART 2
        CARDS + ICONS + EFFECTS
==================================================*/


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


#dds-journey .dds-step-card{


    position:relative;


    padding:35px;


    border-radius:28px;


    background:


    rgba(18,18,18,.88);


    border:


    1px solid rgba(255,255,255,.08);


    backdrop-filter:blur(18px);


    overflow:hidden;


    transition:.45s;


}



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


#dds-journey .dds-step-card::before{


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:70px;


    height:100%;


    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );


    transform:skewX(-25deg);


    transition:.8s;


}



#dds-journey .dds-step:hover .dds-step-card::before{


    left:140%;


}



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


#dds-journey .dds-step:hover{


    z-index:20;


}



#dds-journey .dds-step:hover .dds-step-card{


    transform:


    translateY(-12px);


    border-color:#fdb913;


    box-shadow:


    0 25px 60px rgba(0,0,0,.45),


    0 0 30px rgba(253,185,19,.25);


}



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


#dds-journey .dds-step-card span{


    display:inline-flex;


    padding:


    8px 18px;


    margin-bottom:18px;


    border-radius:50px;


    background:


    rgba(253,185,19,.12);


    color:#fdb913;


    font-size:13px;


    font-weight:700;


    letter-spacing:2px;


}



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


#dds-journey .dds-step-card h3{


    color:#fff;


    font-size:28px;


    font-weight:700;


    margin-bottom:15px;


    transition:.35s;


}



#dds-journey .dds-step:hover h3{


    color:#fdb913;


}



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


#dds-journey .dds-step-card p{


    color:#cfcfcf;


    font-size:16px;


    line-height:30px;


}





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


#dds-journey .dds-step-icon{


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:78px;


    height:78px;


    border-radius:50%;


    display:flex;


    justify-content:center;


    align-items:center;


    background:


    linear-gradient(

        135deg,

        #fdb913,

        #ffe37a

    );


    color:#111;


    font-size:30px;


    z-index:10;


    box-shadow:


    0 0 25px rgba(253,185,19,.45);


    transition:.5s;


}



/* ICON GLOW */


#dds-journey .dds-step-icon::before{


    content:"";


    position:absolute;


    inset:-8px;


    border-radius:50%;


    background:


    rgba(253,185,19,.25);


    filter:blur(15px);


    z-index:-1;


    animation:


    ddsIconPulse 2.5s infinite;


}



/* ICON DOT */


#dds-journey .dds-step-icon::after{


    content:"";


    position:absolute;


    width:8px;


    height:8px;


    border-radius:50%;


    background:#fff;


    box-shadow:


    0 0 15px #fff,


    0 0 30px #fdb913;


    animation:


    ddsIconSpark 2s infinite;


}



/*==============================
        LEFT ICON POSITION
==============================*/


#dds-journey .dds-step.left .dds-step-icon{


    right:-39px;


}



/*==============================
        RIGHT ICON POSITION
==============================*/


#dds-journey .dds-step.right .dds-step-icon{


    left:-39px;


}



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


#dds-journey .dds-step::after{


    content:"";


    position:absolute;


    top:50%;


    width:60px;


    height:3px;


    background:#fdb913;


    opacity:.6;


}



/* LEFT CONNECTOR */


#dds-journey .dds-step.left::after{


    right:22px;


}



/* RIGHT CONNECTOR */


#dds-journey .dds-step.right::after{


    left:22px;


}



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


#dds-journey .dds-step:hover .dds-step-icon{


    transform:


    translateY(-50%)


    scale(1.12)


    rotate(360deg);



    box-shadow:


    0 0 30px rgba(253,185,19,.8),


    0 0 70px rgba(253,185,19,.4);


}



/*==============================
        FINISH STEP
==============================*/


#dds-journey .dds-step:last-child .dds-step-icon{


    animation:


    ddsFinishGlow 3s infinite;


}



/*==================================================
        ANIMATIONS
==================================================*/


@keyframes ddsIconPulse{


0%,100%{


    transform:scale(.9);


    opacity:.4;


}


50%{


    transform:scale(1.3);


    opacity:1;


}


}



@keyframes ddsIconSpark{


0%{


    transform:translate(-50%,-50%) scale(.5);


    opacity:.3;


}


50%{


    transform:translate(-50%,-50%) scale(1.5);


    opacity:1;


}


100%{


    transform:translate(-50%,-50%) scale(.5);


    opacity:.3;


}



}



@keyframes ddsFinishGlow{


0%,100%{


box-shadow:


0 0 20px #fdb913;


}


50%{


box-shadow:


0 0 50px #fdb913,


0 0 100px rgba(253,185,19,.8);


}



}



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


@keyframes ddsJourneyFloat{


0%,100%{


transform:translateY(0);


}


50%{


transform:translateY(-35px);


}


}



@keyframes ddsRouteRotate{


from{


transform:rotate(0deg);


}


to{


transform:rotate(360deg);


}


}
/*==================================================
        DDS JOURNEY
        PART 3
        RESPONSIVE FINAL VERSION
==================================================*/


/*==================================================
        TABLET
        991px
==================================================*/


@media(max-width:991px){


#dds-journey{


    padding:90px 0;


}


/* HEADING */


#dds-journey .dds-journey-heading{


    margin-bottom:60px;


}


#dds-journey h2{


    font-size:42px;


}


#dds-journey .dds-journey-heading p{


    font-size:16px;


    line-height:30px;


}



/* TIMELINE LEFT */


#dds-journey .dds-timeline::before{


    left:40px;


    transform:none;


}


/* STEPS */


#dds-journey .dds-step,
#dds-journey .dds-step.left,
#dds-journey .dds-step.right{


    width:100%;


    left:0;


    text-align:left;


    padding:


    0 20px 0 95px;


    margin-bottom:50px;


}



/* CONNECTOR */


#dds-journey .dds-step::after{


    left:40px;


    width:35px;


}



/* CARD */


#dds-journey .dds-step-card{


    padding:


    30px;


}



/* ICON */


#dds-journey .dds-step.left .dds-step-icon,
#dds-journey .dds-step.right .dds-step-icon{


    left:5px;


    right:auto;


    top:50%;


    width:62px;


    height:62px;


    font-size:24px;


    transform:translateY(-50%);


}



}



/*==================================================
        MOBILE
        767px
==================================================*/


@media(max-width:767px){


#dds-journey{


    padding:70px 0;


}



/* HEADING */


#dds-journey h2{


    font-size:34px;


}


#dds-journey .dds-journey-heading p{


    font-size:15px;


    line-height:28px;


}



#dds-journey .dds-journey-heading > span{


    padding:12px 22px;


    font-size:12px;


}



/* TIMELINE */


#dds-journey .dds-timeline{


    padding:20px 0;


}



#dds-journey .dds-timeline::before{


    left:28px;


    width:4px;


}



/* STEP */


#dds-journey .dds-step,
#dds-journey .dds-step.left,
#dds-journey .dds-step.right{


    padding:


    0 10px 0 65px;


    margin-bottom:40px;


}



/* CONNECTOR REMOVE */


#dds-journey .dds-step::after{


    display:none;


}



/* CARD */


#dds-journey .dds-step-card{


    padding:


    25px 20px;


    border-radius:22px;


}



/* ICON */


#dds-journey .dds-step.left .dds-step-icon,
#dds-journey .dds-step.right .dds-step-icon{


    left:2px;


    width:52px;


    height:52px;


    font-size:20px;


}



/* TEXT */


#dds-journey .dds-step-card h3{


    font-size:21px;


}


#dds-journey .dds-step-card p{


    font-size:15px;


    line-height:26px;


}



}



/*==================================================
        SMALL MOBILE
        480px
==================================================*/


@media(max-width:480px){


#dds-journey{


    padding:60px 0;


}



/* HEADING */


#dds-journey h2{


    font-size:28px;


}


#dds-journey .dds-journey-heading{


    margin-bottom:45px;


}



/* TIMELINE */


#dds-journey .dds-timeline::before{


    left:22px;


}



/* STEP */


#dds-journey .dds-step,
#dds-journey .dds-step.left,
#dds-journey .dds-step.right{


    padding:


    0 5px 0 55px;


}



/* CARD */


#dds-journey .dds-step-card{


    padding:


    22px 16px;


    border-radius:18px;


}



/* ICON */


#dds-journey .dds-step.left .dds-step-icon,
#dds-journey .dds-step.right .dds-step-icon{


    left:0;


    width:42px;


    height:42px;


    font-size:16px;


}



/* NUMBER */


#dds-journey .dds-step-card span{


    font-size:11px;


    padding:6px 14px;


}



/* TITLE */


#dds-journey .dds-step-card h3{


    font-size:18px;


    margin-bottom:10px;


}



/* DESCRIPTION */


#dds-journey .dds-step-card p{


    font-size:14px;


    line-height:24px;


}



/* REMOVE HEAVY ANIMATION */


#dds-journey .dds-step{


    animation:none;


}



}



/*==================================================
        VERY SMALL DEVICES
        360px
==================================================*/


@media(max-width:360px){


#dds-journey h2{


    font-size:25px;


}



#dds-journey .dds-step,
#dds-journey .dds-step.left,
#dds-journey .dds-step.right{


    padding-left:50px;


}



#dds-journey .dds-step-card{


    padding:18px 14px;


}



#dds-journey .dds-step-card h3{


    font-size:17px;


}



}



/*==================================================
        ACCESSIBILITY
==================================================*/


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


#dds-journey *,
#dds-journey *::before,
#dds-journey *::after{


    animation:none!important;

    transition:none!important;


}


}