.journey-bg { width: 100%; padding: 60px 0; position: relative; }
.journey-bg .counter { display: none; opacity: 0; transition: all 0.3s ease-in-out; }
.journey-bg .counter.show { display: block; opacity: 1; }
.journey-bg.show { display: block !important; }
.journey-bg .img-bg { background-size: 100px auto; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/journey-bg.png) repeat 0 0; background-size: 60px auto; opacity: .15; }
.journey-bg .img-bg::before { content: ''; width: 100%; height: 10%; background: linear-gradient(180deg,#000 0,transparent); position: absolute; left: 0; top: 0; }
.journey-bg .img-bg::after { content: ''; width: 100%; height: 10%; background: linear-gradient(180deg,transparent 0,#000); position: absolute; left: 0; bottom: 0; }
.num-row { width: 100%; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; margin: 45px auto; animation: rowani 3s ease-in-out; }
.num-row .num-col { width: calc(100% / 3); height: 130px; position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; animation: colani 3s ease-in-out; }
.num-row .num-col .tri { width: 150px; height: fit-content; }
.num-row .num-col .tri.alt { transform: rotate(180deg);}
.num-row .num-col .num-txt { width: calc(100% - 150px); padding-left: 15px; animation: txtani 3s ease-in-out; }
.num-row .num-col .num-txt h2 { font-size: 40px; font-weight: 600; color: #fecb85; margin-bottom: 5px; }
.num-row .num-col .num-txt p { font-size: 14px; font-weight: 400; line-height: 19px; color: #fff; margin-bottom: 0; }

.num-col.seq-one { animation: point1 3s ease-in-out; }
.num-col.seq-two { animation: point2 3s ease-in-out; }
.num-col.seq-thr { animation: point3 3s ease-in-out; }
.num-col.seq-for { animation: point4 3s ease-in-out; }
.num-col.seq-fiv { animation: point5 3s ease-in-out; }
.num-col.seq-six { animation: point6 3s ease-in-out; }
@media screen and (max-width: 1024px) {
    .num-row { transform: scale(0.85); }
}
@media screen and (max-width: 768px) {
    .journey-bg { padding: 30px 0; }
    .num-row { transform: scale(0.95); margin: 25px auto; animation: none; }
    .num-row .num-col { width: 50%; margin-bottom: 15px; height: auto; animation: none; }
    .num-row .num-col .tri { width: 70px; }
    .num-row .num-col .num-txt { width: calc(100% - 70px); padding-left: 15px; animation: none; }
    .num-row .num-col .num-txt h2 { font-size: 24px; line-height: 29px; margin-bottom: 6px; }
    .num-row .num-col .num-txt p { font-size: 14px; line-height: 17px; }
}

@media screen and (max-width: 425px) {
    .journey-bg { padding: 30px 0; }
    .num-row { flex-direction: column; flex-wrap: wrap; margin: 25px auto; animation: none; }
    .num-row .num-col { width: 100%; margin-bottom: 15px; height: auto; animation: none; }
    .num-row .num-col .tri { width: 56px; }
    .num-row .num-col .num-txt { width: calc(100% - 56px); padding-left: 5px; animation: none; }
    .num-row .num-col .num-txt h2 { font-size: 17px; line-height: 21px; margin-bottom: 2px; }
    .num-row .num-col .num-txt p { font-size: 12px; line-height: 14px; }
}

@keyframes rowani { 
    0% { width: 450px; }
    30% { width: 450px; }
    60% { width: 100%; }
}
@keyframes colani { 
    0% { width: 150px; }
    30% { width: 150px; }
    60% { width: 33.333%; }
}
@keyframes txtani { 
    0% { opacity: 0; transform: scaleX(0); font-size: 0% !important; }
    30% { padding-left: 0; }
    55% { opacity: 0; transform: scaleX(0); font-size: 0% !important; }
    60% { opacity: 0; transform: scaleX(1); font-size: 100%; }  
    100% { opacity: 1; padding-left: 15px; }
}

@keyframes point1 { 
    0% { opacity: 0; }
    5% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes point2 { 
    0% { opacity: 0; left: -80px; }
    5% { opacity: 0; }
    10% { opacity: 1; }
    20% { left: -80px; }
    100% { opacity: 1; left: 0; }
}
@keyframes point3 { 
    0% { opacity: 0; right: -80px; top: -15px; }
    20% { opacity: 0; right: -80px; top: 0px; }
    25% { opacity: 1; }
    100% { opacity: 1; right: 0; }
}
@keyframes point4 { 
    0% { opacity: 0; top: -15px; }
    15% { opacity: 0; }
    20% { opacity: 1; top: 0px; }
    100% { opacity: 1; }
}
@keyframes point5 { 
    0% { opacity: 0; left: -80px; top: -15px; }
    10% { opacity: 0; }    
    15% { opacity: 1; }
    20% { left: -80px; top: 0px; }
    100% { opacity: 1; left: 0; }
}
@keyframes point6 { 
    0% { opacity: 0; right: -80px; }
    20% { right: -80px; }
    25% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 1; right: 0; }
}