.process-timeline {
    position: relative;
	padding-top: 100px;
}

.process-timeline__wrapper {
    position: relative;
}

.process-timeline__line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
}

.process-timeline__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px 47px;
    position: relative;
}


.process-step:nth-child(1) { grid-column: span 2; }
.process-step:nth-child(2) { grid-column: span 2; }
.process-step:nth-child(3) { grid-column: span 2; }
.process-step:nth-child(4) { grid-column: span 3; }
.process-step:nth-child(5) { grid-column: span 3; }

.process-step {
    position: relative;
    z-index: 2;
}



@media (max-width: 768px){
    .process-step:nth-child(4){
        order: 1;
    }
}

.process-timeline__grid .process-timeline-line{
    position: absolute;
    left: auto;
    right: -150px;
    top: 48px;
}

.process-timeline__grid .process-timeline__grid-bg{
    position: absolute;
    width: 100%;
    min-width: 100%;
    top: 50%;
    transform: translate(0, -63%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.process-timeline__grid .bg-circle-one,
.process-timeline__grid .bg-circle-two,
.process-timeline__grid .bg-circle-three {
    will-change: transform;
    transition: transform 0.08s linear;
}

.process-timeline__grid .bg-circle-one{
    background: linear-gradient(270deg, rgb(229 20 103 / 65%) 0%, rgba(229, 20, 103, 0) 89.3%);
    width: 619px;
    height: 619px;
    border-radius: 100%;
    filter: blur(8px);
}

.process-timeline__grid .bg-circle-two{
    background: linear-gradient(270deg, rgb(229 20 103 / 65%) 0%, rgba(229, 20, 103, 0) 89.3%);
    width: 362px;
    height: 362px;
    border-radius: 100%;
    position: relative;
    left: 60px;
    filter: blur(8px);
}

.process-timeline__grid .bg-circle-three{
    background: linear-gradient(270deg, rgb(229 20 103 / 65%) 0%, rgba(229, 20, 103, 0) 89.3%);
    width: 160px;
    height: 160px;
    border-radius: 100%;
    position: relative;
    left: 120px;
    filter: blur(8px);
}

.process-step__circle {
    font-family: "Mona Sans", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97px;
    height: 97px;
    background: linear-gradient(135deg, rgba(229, 20, 103, 0.15) 0%, rgba(229, 20, 103, 0) 100%);
    border-radius: 100px;
    font-weight: 200;
    font-size: 60px;
    line-height: 120%;
    text-transform: uppercase;
    color: #FFF;
	margin-bottom: 16px;
    backdrop-filter: blur(8px);
    position: relative;
    z-index: 1;
}

.process-step__number {
    display: block;
}

.process-step__timeline p{
	font-family: "SF UI Display", sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 24px;
    color: #FFF;
	gap: 8px;
}

.process-step__timeline p span{
	color: #FFFFFF80;
}

.process-step__content .process-step__title{
	font-family: 'SF UI Display', sans-serif;
    font-weight: 300;
    font-size: 24px;
    line-height: 120%;
    text-transform: uppercase;
    color: #FFF;
    margin-bottom: 8px;	
}

.process-step__description{
	font-family: 'SF UI Display', sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    color: #FFFFFF99;
}

@media (max-width: 1440px){
    .process-timeline__grid .process-timeline-line{
        right: -30px;
    }
}

@media (max-width: 1024px) {
    .process-timeline__grid {
        grid-template-columns: 1fr;
    }

    .process-timeline__grid .process-timeline__grid-bg{
        top: 0;
        transform: none;
        flex-direction: column;
        height: 100%;
    }

    .process-timeline__grid .process-timeline-line{
        display: none;
    }

    .process-timeline__grid .bg-circle-one{
        width: 373px;
        height: 373px;
    }

    .process-timeline__grid .bg-circle-two{
        width: 219px;
        height: 219px;
        left: 0;
    }

    .process-timeline__grid .bg-circle-three{
        width: 97px;
        height: 97px;
        left: 0;
    }
}

@keyframes pulse70 {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

.b1, .b2, .b3{
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.b1{
  animation-name: pulse70, pulse70;
  animation-duration: 6s, 6s;
  animation-delay: 0s, 5s;
}

.b2{
  animation-name: pulse70, pulse70;
  animation-duration: 6s, 6s;
  animation-delay: 1s, 4s;
}

.b3{
  animation-name: pulse70, pulse70;
  animation-duration: 6s, 6s;
  animation-delay: 2s, 3s;
}


html[lang^="ar"] .process-timeline__grid .process-timeline-line{
    transform: rotate(180deg);
}

html[lang^="ar"] .process-timeline__grid{
    gap: 52px 47px;
}