.animation-process-block{
    background: var(--d-dark);
}

.animation-process-block .content{
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: 140px 100px;
    width: 100%;
    align-items: center;
    margin: 0 auto;
    max-width: 1920px;
}

.animation-process-block .main-h2{
    color: var(--n-white);
}

.animation-process-block .subtitle-medium{
    color: var(--n-grey-BG);
}

.animation-process-block .block-info{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    width: 100%;
    text-align: center;
}

.animation-process-block .block-description{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    width: 100%;
    max-width: 800px;
    text-align: center;
}
.animation-process-block .block-description .main-h4-semibold{
    color: var(--d-light-grey);
}

.animation-process-block .block-description .main-h4-semibold>span.white{
    color: var(--d-white);
}

.animation-process-block .block-separator{
    width: 320px;
    height: 2px;
    max-width: 100%;
    background: linear-gradient(90deg, rgba(88, 155, 255, 0.00) 0%, #589BFF 50%, rgba(88, 155, 255, 0.00) 100%);
}

.animation-process-block .steps-container{
    display: grid;
    width: 100%;
    gap: 16px;
    align-items: stretch;
    grid-template-columns: repeat(12, 1fr);
}

.animation-process-block .step-card{
    border-radius: 20px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    width: 100%;
    padding: 32px 32px 32px 0;
    backdrop-filter: blur(7px);
    position: relative;
    min-height: 160px;
}

.animation-process-block .step-card::before, .animation-process-block .step-card::after{
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='100' viewBox='0 0 1 100' fill='none'%3E%3Cpath d='M0.0335071 99.9961C0.0335071 99.9961 1.0871 69.5264 0.994193 49.9961C0.901243 30.4576 0.0338769 -0.00390625 0.0338769 -0.00390625C0.0338769 -0.00390625 0.137082 30.4576 0.0441337 49.9961C-0.0487758 69.5264 0.0335071 99.9961 0.0335071 99.9961Z' fill='url(%23paint0_radial_20379_3104)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_20379_3104' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(0.99586 49.9961) scale(27.1619 52.7172)'%3E%3Cstop stop-color='%234C99FF'/%3E%3Cstop offset='1' stop-color='%234C99FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
    display: block;
    position: absolute;
    width: 100px;
    top: 50%;
    transform: translateY(-50%);
}

.animation-process-block .step-card::after{
    right: -50px;
}

.animation-process-block .step-card::before{
    left: -50px;
}

.animation-process-block .step-card img{
    height: 100%;
    width: auto;
}

.animation-process-block .step-card .step-count{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 72px;
}

.animation-process-block .step-card .main-h4-semibold{
    color: var(--d-white);
    flex:1;
    text-align: start;
}

.animation-process-block .step-card:nth-child(7n+1), 
.animation-process-block .step-card:nth-child(7n+2), 
.animation-process-block .step-card:nth-child(7n+3), 
.animation-process-block .step-card:nth-child(7n+4)  
{
  grid-column: span 3;
}

.animation-process-block .step-card:nth-child(7n+5), 
.animation-process-block .step-card:nth-child(7n+6), 
.animation-process-block .step-card:nth-child(7n+7)  
{
  grid-column: span 4;
}

.animation-process-block .step-card:nth-child(7n+1){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.20) 0%, rgba(5, 99, 222, 0.20) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n+2){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.40) 0%, rgba(5, 99, 222, 0.40) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n+3){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.60) 0%, rgba(5, 99, 222, 0.60) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n+4){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.70) 0%, rgba(5, 99, 222, 0.70) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n+5){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.70) 0%, rgba(5, 99, 222, 0.70) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n+6){
    background: linear-gradient(180deg, rgba(3, 54, 120, 0.90) 0%, rgba(5, 99, 222, 0.90) 100%), #070B22;
}

.animation-process-block .step-card:nth-child(7n){
    background: linear-gradient(180deg, #033678 0%, #0563DE 100%), #070B22;
}

@media screen and (max-width: 1919px) {
    .animation-process-block .content{
        gap: 60px;
        padding: 100px 80px;
    }

    .animation-process-block .block-info{
        gap: 60px;
    }

    .animation-process-block .block-description{
        gap: 48px;
        max-width: 720px;
    }

    .animation-process-block .step-card{
        gap: 24px;
        min-height: 130px;
    }

    .animation-process-block .step-card .step-count{
        width: 90px;
        height: 64px;
    }

    .animation-process-block .step-card::before, .animation-process-block .step-card::after{
        width: 76px;
    }
    
    .animation-process-block .step-card::after{
        right: -38px;
    }
    
    .animation-process-block .step-card::before{
        left: -38px;
    }
}

@media screen and (max-width: 1439px) {
    .animation-process-block .content{
        padding: 80px 60px;
    }

    .animation-process-block .block-description{
        gap: 40px;
        max-width: 700px;
    }

    .animation-process-block .step-card{
        border-radius: 16px;
        min-height: 112px;
        padding: 26px 32px 26px 0;
    }

    .animation-process-block .step-card .step-count{
        width: 80px;
        height: 56px;
    }

    .animation-process-block .step-card::before, .animation-process-block .step-card::after{
        width: 66px;
    }
    
    .animation-process-block .step-card::after{
        right: -33px;
    }
    
    .animation-process-block .step-card::before{
        left: -33px;
    }
}

@media screen and (max-width: 1279px) {
    .animation-process-block .steps-container{
        grid-template-columns: 1fr 1fr;
    }

    .animation-process-block .step-card:nth-child(n){
        grid-column: span 1;
    }

    .animation-process-block .step-card:nth-child(7n){
        grid-column: span 2;
    }
}

@media screen and (max-width: 1079px) {
    .animation-process-block .content{
        padding: 80px 40px;
    }

    .animation-process-block .block-info{
        gap: 48px;
    }

    .animation-process-block .block-description{
        max-width: unset;
    }

    .animation-process-block .steps-container{
        grid-template-columns: 1fr 1fr;
    }

    .animation-process-block .step-card{
        min-height: 124px;
        padding: 32px 32px 32px 0;
    }

    .animation-process-block .step-card:nth-child(n){
        grid-column: span 1;
    }

    .animation-process-block .step-card:nth-child(7n){
        grid-column: span 2;
    }
    
}

@media screen and (max-width: 576px) {
    .animation-process-block .content{
        padding: 60px 16px;
        max-width: 100%;
        gap: 48px;
    }

    .animation-process-block .block-info{
        gap: 40px;
    }

    .animation-process-block .steps-container{
        display: flex;
        flex-direction: column;
    }

    .animation-process-block .step-card{
        border-radius: 12px;
        min-height: 98px;
        gap: 16px;
        padding: 23px 32px 23px 0;
    }

    .animation-process-block .step-card .step-count{
        width: 80px;
        height: 48px;
    }

    .animation-process-block .step-card::before, .animation-process-block .step-card::after{
        width: 60px;
    }
    
    .animation-process-block .step-card::after{
        right: -30px;
    }
    
    .animation-process-block .step-card::before{
        left: -30px;
    }
}