/* =====================================
MECANISMO
===================================== */

#mecanismo{

    position:relative;
}

.process-timeline{

    position:relative;

    max-width:900px;

    margin:80px auto 0;
}

.process-timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:2px;

    height:100%;

    transform:translateX(-50%);

    background:
    linear-gradient(
        to bottom,
        transparent,
        rgba(212,175,55,.8),
        transparent
    );
}

.process-step{

    position:relative;

    margin-bottom:80px;
}

.process-dot{

    position:absolute;

    left:50%;

    top:50%;

    width:26px;

    height:26px;

    border-radius:50%;

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

    background:#d4af37;

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

.process-card{

    width:42%;

    padding:35px;

    border-radius:25px;

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

    backdrop-filter:blur(20px);

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

    transition:.5s;
}

.process-card:hover{

    transform:
    translateY(-6px);

    border-color:
    rgba(212,175,55,.4);

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

.process-step:nth-child(odd)
.process-card{

    margin-right:auto;
}

.process-step:nth-child(even)
.process-card{

    margin-left:auto;
}

.process-number{

    display:inline-block;

    margin-bottom:15px;

    font-size:.8rem;

    letter-spacing:3px;

    color:#d4af37;
}

.process-card h3{

    margin-bottom:15px;
}

.process-card p{

    color:#d4d4d4;

    line-height:1.8;
}

/* RESPONSIVE */

@media(max-width:900px){

    .process-timeline::before{

        left:20px;
    }

    .process-dot{

        left:20px;
    }

    .process-card{

        width:calc(100% - 60px);

        margin-left:60px !important;
    }
}

.amuleto-preview{

    width:120px;

    display:block;

    margin:20px auto 0;

    filter:
    drop-shadow(
        0 0 25px
        rgba(212,175,55,.4)
    );

    animation:
    floatAmulet 5s ease-in-out infinite;
}

@keyframes floatAmulet{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }
}