/* ============================= [ Process Section CSS Start ] ============================= */
.process-section { max-width: 1120px; width: 100%; margin-inline: auto; font-weight: 400; }
.process-section * { font-family: var(--e-global-typography-39e6924-font-family); }

.process-section .process-section-block { padding-block: 50px 0; }

.process-section .process-section-block { display: flex; flex-direction: column; gap: 200px; }
.process-section .process-row { display: flex; flex-direction: row; }
.process-section .process-row:nth-child(even) { flex-direction: row-reverse; }


.process-section .row-wrapper { display: flex; flex-direction: column; gap: 10px; }
.process-section .row { margin-inline: 0; align-items: center; }
.process-section .row >* { padding-inline: 0; }


.process-section .start-point { position: relative; height: 176px; }
.process-section .start-point::after { position: absolute; }

.process-section .step-icon { flex-shrink: 0; position: relative; background-color: #6C8B16; display: flex; align-items: center; justify-content: center; height: auto; aspect-ratio: 1 / 1; width: 185px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.process-section .step-icon svg { width: 56%; height: auto; aspect-ratio: 104 / 115; }

.process-section .bg-green { background-color: #6C8B16; }
.process-section .bg-orange { background-color: #F14A1D; }

.process-section .text-green * { color: #6C8B16; }
.process-section .text-orange * { color: #F14A1D; }

.process-section .step-count * { text-align: center; font-style: normal; font-weight: 800; margin-bottom: 0; font-size: 56px; line-height: 1; white-space: nowrap; color: #000000; }

.process-section .step-title * { line-clamp: 4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; color: #6C8B16; font-size: 24px; line-height: 1.3; font-weight: 800; margin-bottom: 0; }
.process-section .step-disc * { line-clamp: 10; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; overflow: hidden; color: #171A1F; font-size: 24px; line-height: 1.2; font-weight: 400; margin-bottom: 0; }

.process-section .step-content { display: flex; gap: 12px; align-items: center; }
.process-section .step-content .step-text { min-height: 400px; height: 1px; display: flex; flex-direction: column; max-width: 250px; }
.process-section .step-content .step-text .step-title { display: flex; align-items: end; padding-bottom: 16px; height: 50%; flex-grow: 1; }
.process-section .step-content .step-text .step-disc { display: flex; align-items: start; padding-top: 16px; height: 50%; flex-grow: 1; }


/* Odd Row Styling */
.process-section .step-title * { color: #6C8B16; }
.process-section .step-icon { background-color: #6C8B16; }
.process-section .row:nth-child(odd) .step-icon::after { content: ""; position: absolute; left: calc(100% + 44px); background: url('./images/green-process-icon.svg') no-repeat; height: auto; aspect-ratio: 335 / 453; width: 335px; bottom: 50%; user-select: none; pointer-events: none; background-size: 100%; }

/* Even Row Styling */
.process-section .row:nth-child(even) { flex-direction: row-reverse; }
.process-section .row:nth-child(even) .step-content { flex-direction: row-reverse; }
.process-section .row:nth-child(even) .step-title * { color: #F14A1D; }
.process-section .row:nth-child(even) .step-icon { background-color: #F14A1D; }
.process-section .row:nth-child(even) .step-icon::after { content: ""; position: absolute; right: calc(100% + 44px); background: url('./images/orange-process-icon.svg') no-repeat; height: auto; aspect-ratio: 335 / 453; width: 335px; bottom: 50%; user-select: none; pointer-events: none; background-size: 100%; }

/* 1st Row Styling */
.process-section .row:first-child .step-icon::after { content: ""; position: absolute; left: 100%; background: url('./images/green-process-top-icon.svg') no-repeat; height: auto; aspect-ratio: 406 / 255; width: 392px; bottom: 50%; user-select: none; pointer-events: none; background-size: 100%; }

/* Last Row Styling */
.process-section .row:last-child { justify-content: center; }
.process-section .row:last-child .step-icon { width: 150px; margin-inline: auto; }
.process-section .row:last-child .step-icon::after { background: url('./images/green-process-bottom-icon.svg'); background-repeat: no-repeat; right: calc(50% - 4px); bottom: calc(100% - 2px); aspect-ratio: 116 / 252; width: 116px; height: auto; left: unset; background-size: 100%; }

.process-section.odd-items .row-wrapper .row:last-child .step-icon::after { background: url('./images/orange-process-bottom-icon.svg'); background-repeat: no-repeat; left: calc(50% - 4px); bottom: calc(100% - 2px); aspect-ratio: 116 / 252; width: 116px; height: auto; right: unset; background-size: 100%; }
/* ============================= [ Process Section CSS End ] ============================= */



/* =============================== [ Process Section Responsive Start ] =============================== */
@media (max-width: 1399px) {
    .process-section { max-width: 910px; }
    .process-section .step-icon { width: 120px; }
    .process-section .step-count * { font-size: 40px; }

    .process-section .step-title * ,
    .process-section .step-disc * { font-size: 20px; }
    
    .process-section .step-content .step-text .step-disc { padding-top: 12px; }
    .process-section .step-content .step-text .step-title { padding-bottom: 12px; }
    
    .process-section .row:nth-child(odd) .step-icon::after { left: calc(100% + 40px); width: 300px; }
    .process-section .row:nth-child(even) .step-icon::after { right: calc(100% + 40px); width: 300px; }

    .process-section .row:first-child .step-icon::after { width: 351px; left: 100%; }

    .process-section .row:last-child .step-icon::after { width: 104px; right: 50%; left: unset; }
    .process-section.odd-items .row-wrapper .row:last-child .step-icon::after { width: 104px; left: 50%; right: unset; }

    .process-section .step-content .step-text { max-width: 220px; min-height: 360px; }
    .process-section .row:last-child .step-icon { width: 120px; }
}

@media (max-width: 1199px) {
    .process-section { max-width: 750px; }
    .process-section .step-icon { width: 100px; }
    .process-section .step-count * { font-size: 30px; }

    .process-section .step-title * ,
    .process-section .step-disc * { font-size: 18px; }

    .process-section .step-content .step-text .step-disc { padding-top: 8px; }
    .process-section .step-content .step-text .step-title { padding-bottom: 8px; }

    
    .process-section .row:nth-child(odd) .step-icon::after { left: calc(100% + 40px); width: 240px; }
    .process-section .row:nth-child(even) .step-icon::after { right: calc(100% + 40px); width: 240px; }

    .process-section .row:first-child .step-icon::after { width: 290px; left: 100%; }

    .process-section .row:last-child .step-icon::after { width: 83px; right: 50%; left: unset; }
    .process-section.odd-items .row-wrapper .row:last-child .step-icon::after { width: 83px; left: 50%; right: unset; }

    .process-section .step-content .step-text { max-width: 180px; min-height: 280px; }
    .process-section .row:last-child .step-icon { width: 100px; }
}

@media (max-width: 991px) {
    .process-section { max-width: 630px; }
    .process-section .step-icon { width: 80px; }
    .process-section .step-count * { font-size: 24px; }

    .process-section .step-title * ,
    .process-section .step-disc * { font-size: 15px; }

    .process-section .step-content .step-text .step-disc { padding-top: 8px; }
    .process-section .step-content .step-text .step-title { padding-bottom: 8px; }

    
    .process-section .row:nth-child(odd) .step-icon::after { left: calc(100% + 30px); width: 210px; }
    .process-section .row:nth-child(even) .step-icon::after { right: calc(100% + 30px); width: 210px; }

    .process-section .row:first-child .step-icon::after { width: 250px; left: 100%; }

    .process-section .row:last-child .step-icon::after { width: 73px; right: 50%; left: unset; }
    .process-section.odd-items .row-wrapper .row:last-child .step-icon::after { width: 73px; left: 50%; right: unset; }

    .process-section .step-content .step-text { max-width: 150px; min-height: 250px; }
    .process-section .row:last-child .step-icon { width: 80px; }
}

@media (max-width: 767px) {
    .process-section { max-width: 470px; }
    .process-section .step-icon { width: 0; }
    .process-section .step-content .step-text { max-width: 100%; }
    .process-section .step-content { gap: 0; }

    .process-section .row:nth-child(odd) .step-text { padding-right: 30px; }
    .process-section .row:nth-child(even) .step-text { padding-left: 30px; }
}

@media (max-width: 575px) {
    .process-section .process-section-block { padding-block: 0; }
    .process-section { max-width: 100%; }
    .process-section .step-icon { display: none; }

    .process-section .row-wrapper { gap: 0; }
    .process-section .row-wrapper .row:nth-child(odd) { flex-direction: row-reverse; }
    .process-section .step-content .step-text { min-height: fit-content; height: fit-content; }

    .process-section .row:nth-child(even) .step-text { padding-inline: 20px 0; }
    .process-section .row:nth-child(odd) .step-text { padding-inline: 20px 0; }

    .process-section .step-title * { font-size: 18px; } 
    .process-section .step-disc * { font-size: 16px; }
    .process-section .row { align-items: start; }

    .process-section .step-content .step-text .step-disc { padding-top: 0; }

    .process-section .step-content { justify-content: start; }

    .process-section .row { position: relative; padding-left: 20px; padding-bottom: 30px; }
    .process-section .row:nth-last-child(2) { padding-bottom: 0; }
    .process-section .row .step-count { position: relative; }
    .process-section .row .step-count::after { content: ""; position: absolute; top: 50%; left: -20px; height: 12px; width: 12px; background-color: #6C8B16; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); }
    .process-section .row::before { content: ""; position: absolute; top: 10px; left: 6px; height: 100%; width: 2px; background-color: #6C8B16; }
    .process-section .row-wrapper .row:last-child { display: none; }

    .process-section .row:nth-child(even) .step-count::after { background-color: #F14A1D; }
    .process-section .row:nth-child(even)::before { background-color: #F14A1D; }
}
/* =============================== [ Process Section Responsive End ] =============================== */