/*==================================================
09 Flow
==================================================*/



/*======== Base ========*/

.it-flow{

    display:flex;

    flex-direction:column;

    gap:var(--space-6);

}

/*======== Item ========*/

.it-flow-item{

    position:relative;

    display:flex;

    gap:var(--space-5);

    align-items:flex-start;

}

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


.it-flow-number{

    width:72px;

    min-width:72px;

    height:72px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    flex-shrink:0;

    line-height:1;

    box-shadow:var(--shadow-s);

}

/*======== Content ========*/

.it-flow-content{

    flex:1;

    min-width:0;

}

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

.it-flow-title{

    margin-bottom:10px;

    color:var(--primary);

    font-size:1.4rem;

    font-weight:700;

    line-height:1.4;

}

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

.it-flow-text{

    color:var(--text-light);

    line-height:1.9;

}

/*======== Arrow ========*/

.it-flow-item:not(:last-child)::after{

    content:"";

    position:absolute;

    left:35px;

    top:86px;

    width:2px;

    height:calc(100% + 24px);

    background:linear-gradient(

        var(--primary),

        var(--border)

    );

}

/*======== Card Style ========*/

.it-flow-card{

    padding:var(--space-6);

    background:#fff;

    border:1px solid var(--border);

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

    box-shadow:var(--shadow-s);

}

/*======== Light ========*/

.it-flow-light{

    background:var(--light-blue);

}

/*======== Compact ========*/

.it-flow-compact{

    gap:var(--space-4);

}

.it-flow-compact .it-flow-number{

    width:56px;

    min-width:56px;

    height:56px;

    font-size:1rem;

}

/*======== Center ========*/

.it-flow-center{

    text-align:center;

}

/*======== Compatibility ========*/

.it-card .it-flow{

    width:100%;

}


.it-card .it-flow-item{

    align-items:flex-start;
	  width:100%;

}

.it-card .it-flow-content{

    text-align:left;
    flex:1;

}


.it-flow-number::before{

    content:"STEP";

    font-size:.65rem;

    font-weight:600;

    letter-spacing:.12em;

    margin-bottom:4px;

    opacity:.85;

}

.it-flow-number{

    font-size:1.35rem;

    font-weight:700;

}

.it-flow-item{

    transition:var(--transition);

}

.it-flow-item:hover{

    transform:translateX(6px);

}


.it-card .it-flow-title{

    text-align:left;

}

.it-card .it-flow-text{

    text-align:left;

}