/* ==========================================================
   How it Works
========================================================== */

.how-it-works {
    padding: 120px 0;
    background: var(--color-background-page-dark);
}

/* ==========================================================
   Container
========================================================== */

.how-it-works .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ==========================================================
   Header
========================================================== */

.how-it-works-header {
    max-width: 760px;
    margin-bottom: 80px;

    text-align: center;
}

/* ==========================================================
   Eyebrow
========================================================== */

.how-it-works-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    background: rgba(139,92,246,.12);
    color: var(--color-primary-light);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================
   Title
========================================================== */

.how-it-works-title {
    margin-bottom: 20px;
    color: var(--color-text-primary-dark);
}

/* ==========================================================
   Description
========================================================== */

.how-it-works-description {
    color: var(--color-text-secondary-dark);
}

/* ==========================================================
   Grid
========================================================== */

.how-it-works-grid {

    width: 100%;

    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 40px;
}

/* ==========================================================
   Step
========================================================== */

.how-it-works-step {

    position: relative;

    padding: 40px;

    border-radius: var(--radius-xl);

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

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

    transition: var(--transition-normal);

}

.how-it-works-step:hover {

    transform: translateY(-10px);

    border-color: rgba(139,92,246,.35);

    box-shadow: 0 25px 45px rgba(0,0,0,.25);

}

/* ==========================================================
   Number
========================================================== */

.step-number {

    position: absolute;

    top: 24px;
    right: 24px;

    font-size: 46px;

    font-weight: var(--font-weight-bold);

    color: rgba(255,255,255,.05);

}

/* ==========================================================
   Icon
========================================================== */

.step-icon {

    width: 70px;
    height: 70px;

    margin-bottom: 28px;

    display: flex;

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

    border-radius: 20px;

    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-primary-light)
    );

    color: white;

}

.step-icon svg{

    width:32px;
    height:32px;

}

/* ==========================================================
   Title
========================================================== */

.how-it-works-step h3{

    margin-bottom:16px;

    color:var(--color-text-primary-dark);

}

/* ==========================================================
   Text
========================================================== */

.how-it-works-step p{

    color:var(--color-text-secondary-dark);

    line-height:1.7;

}

/* ==========================================================
   Step Connections
========================================================== */

.how-it-works-step {
    position: relative;
}

/* Cria a linha entre os cards */
.how-it-works-step:not(:last-child)::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -34px;

    width: 28px;
    height: 2px;

    background: linear-gradient(
        90deg,
        rgba(139, 92, 246, 0.25),
        var(--color-primary-light)
    );

    transform: translateY(-50%);

}

/* Cria a ponta da seta */
.how-it-works-step:not(:last-child)::before {
    content: "";

    position: absolute;
    top: 50%;
    right: -34px;

    width: 8px;
    height: 8px;

    border-top: 2px solid var(--color-primary-light);
    border-right: 2px solid var(--color-primary-light);

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

/* ==========================================================
   Responsive Tablet
========================================================== */

@media (max-width:992px){

    .how-it-works-grid{

        grid-template-columns:1fr;

    }

    .how-it-works-step::before,
    .how-it-works-step::after {

    display: none;

}

}

/* ==========================================================
   Responsive Mobile
========================================================== */

@media (max-width:768px){

    .how-it-works{

        padding:80px 0;

    }

    .how-it-works-header{

        margin-bottom:50px;

    }

    .how-it-works-step{

        padding:32px;

    }

}