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

.process-section{

    position:relative;

    background:var(--bg-primary);

    overflow:hidden;

}

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

.process-section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:5px;

    height:100%;

    border-radius:50px;

    background:linear-gradient(
        to bottom,
        rgba(184,134,11,.15),
        var(--gold-primary),
        rgba(184,134,11,.15)
    );

    box-shadow:
        0 0 15px rgba(212,175,55,.25),
        0 0 35px rgba(212,175,55,.15);

}

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

.process-timeline{

    position:relative;

    max-width:1100px;

    margin:80px auto 0;

}

.process-item{

    position:relative;

    width:50%;

    padding:20px 50px;

    margin-bottom:70px;

}

.process-item.left{

    left:0;

    text-align:right;

}

.process-item.right{

    left:50%;

    text-align:left;

}

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

.process-content{

    position:relative;

    padding:32px;

    border-radius:22px;

    background:rgba(18,18,18,.92);

    backdrop-filter:blur(10px);

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

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

    transition:all .4s ease;

}

.process-content:hover{

    transform:translateY(-10px) scale(1.03);

    border-color:var(--gold-primary);

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        0 0 30px rgba(212,175,55,.18);

}

.process-content h3{

    margin:15px 0;

    color:var(--text-primary);

}

.process-content p{

    margin:0;

    color:var(--text-secondary);

    line-height:1.8;

}

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

.process-number{

    position:absolute;

    top:50%;

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(
        145deg,
        #f5d76e,
        var(--gold-primary),
        #8f6a00
    );

    color:#111;

    font-size:20px;

    font-weight:700;

    transform:translateY(-50%);

    box-shadow:
        0 0 25px rgba(212,175,55,.35),
        inset 0 2px 6px rgba(255,255,255,.25);

    transition:all .4s ease;

    z-index:10;

}

/* Left Number */

.process-item.left .process-number{

    right:-86px;

}

/* Right Number */

.process-item.right .process-number{

    left:-86px;

}

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

.process-content::before{

    content:"";

    position:absolute;

    top:50%;

    width:20px;

    height:20px;

    background:var(--bg-card);

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

    transform:translateY(-50%) rotate(45deg);

}

/* Left Arrow */

.process-item.left .process-content::before{

    right:-11px;

    border-left:none;

    border-bottom:none;

}

/* Right Arrow */

.process-item.right .process-content::before{

    left:-11px;

    border-right:none;

    border-top:none;

}

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

.process-number::after{

    content:"";

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--gold-primary);

    box-shadow:0 0 15px rgba(212,175,55,.7);

}

/* Left Connector */

.process-item.left .process-number::after{

    right:-28px;

}

/* Right Connector */

.process-item.right .process-number::after{

    left:-28px;

}

/*====================================
        ACTIVE STATE
====================================*/

.process-item.active .process-content{

    border-color:var(--gold-primary);

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 35px rgba(212,175,55,.22);

    transform:translateY(-10px);

}

.process-item.active .process-number{

    transform:translateY(-50%) scale(1.12);

    animation:goldPulse 2s infinite;

    box-shadow:
        0 0 20px rgba(212,175,55,.45),
        0 0 45px rgba(212,175,55,.30);

}

/*====================================
        TABLET
====================================*/

@media(max-width:991.98px){

    .process-item{

        padding-left:35px;

        padding-right:35px;

    }

    .process-number{

        width:62px;

        height:62px;

        font-size:18px;

    }

    .process-item.left .process-number{

        right:-76px;

    }

    .process-item.right .process-number{

        left:-76px;

    }

}

/*====================================
        MOBILE PROCESS TIMELINE
====================================*/

@media (max-width:767.98px){

    .process-section{
        overflow:hidden;
    }

    /* Remove desktop center line */
    .process-section::before{
        display:none;
    }

    .process-timeline{
        position:relative;
        margin-top:50px;
        padding-left:72px;
    }

    /* Mobile left-side timeline */
    .process-timeline::before{
        content:"";
        position:absolute;
        top:20px;
        bottom:20px;
        left:30px;
        width:3px;
        border-radius:20px;

        background:linear-gradient(
            to bottom,
            rgba(212,175,55,.15),
            var(--gold-primary),
            rgba(212,175,55,.15)
        );

        box-shadow:
            0 0 12px rgba(212,175,55,.25),
            0 0 25px rgba(212,175,55,.10);
    }

    /* All cards on same side */
    .process-item,
    .process-item.left,
    .process-item.right{
        position:relative;
        width:100%;
        left:0 !important;
        padding:0;
        margin-bottom:32px;
        text-align:left !important;
    }

    /* Number circle */
    .process-number,
    .process-item.left .process-number,
    .process-item.right .process-number{
        top:24px;
        left:-68px !important;
        right:auto !important;

        width:58px;
        height:58px;

        font-size:16px;

        transform:none;

        z-index:5;
    }

    /* Active state */
    .process-item.active .process-number{
        transform:scale(1.08);
    }

    /* Connector dot not needed */
    .process-number::after{
        display:none;
    }

    /* Remove desktop arrows */
    .process-content::before{
        display:none;
    }

    /* Mobile card */
    .process-content{
        width:100%;
        padding:24px 20px;

        text-align:left;

        border-radius:16px;

        background:rgba(18,18,18,.96);

        backdrop-filter:none;
        -webkit-backdrop-filter:none;
    }

    .process-content h3{
        margin:0 0 10px;

        font-size:1.25rem;
        line-height:1.3;
    }

    .process-content p{
        margin:0;

        font-size:.93rem;
        line-height:1.65;
    }

    /* Avoid exaggerated hover on touch screens */
    .process-content:hover{
        transform:none;
    }

    .process-item.active .process-content{
        transform:none;
    }

}

/*====================================
        SMALL MOBILE
====================================*/

@media (max-width:400px){

    .process-timeline{
        padding-left:62px;
    }

    .process-timeline::before{
        left:26px;
    }

    .process-number,
    .process-item.left .process-number,
    .process-item.right .process-number{
        left:-60px !important;

        width:52px;
        height:52px;

        font-size:14px;
    }

    .process-content{
        padding:21px 17px;
    }

    .process-content h3{
        font-size:1.15rem;
    }

    .process-content p{
        font-size:.9rem;
    }

}