/*==================================================
    GetPro Design
    Utility Classes
==================================================*/

/*==============================
    Display
==============================*/

.d-flex{display:flex;}
.d-grid{display:grid;}
.d-block{display:block;}
.d-inline-block{display:inline-block;}
.d-none{display:none;}

/*==============================
    Flex Alignment
==============================*/

.align-center{align-items:center;}
.align-start{align-items:flex-start;}
.align-end{align-items:flex-end;}

.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.justify-around{justify-content:space-around;}
.justify-end{justify-content:flex-end;}

.flex-column{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}

/*==============================
    Gap
==============================*/

.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-40{gap:40px;}
.gap-50{gap:50px;}
.gap-60{gap:60px;}

/*==============================
    Width
==============================*/

.w-100{width:100%;}
.w-auto{width:auto;}

/*==============================
    Height
==============================*/

.h-100{height:100%;}
.vh-100{min-height:100vh;}

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

.text-left{text-align:left;}
.text-center{text-align:center;}
.text-right{text-align:right;}

/*==============================
    Font Weight
==============================*/

.fw-light{font-weight:300;}
.fw-normal{font-weight:400;}
.fw-medium{font-weight:500;}
.fw-semibold{font-weight:600;}
.fw-bold{font-weight:700;}
.fw-extra-bold{font-weight:800;}

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

.text-primary{
    color:var(--color-primary);
}

.text-accent{
    color:var(--color-accent);
}

.text-white{
    color:#fff;
}

.text-muted{
    color:var(--text-light);
}

/*==============================
    Background
==============================*/

.bg-primary{
    background:var(--color-primary);
}

.bg-accent{
    background:var(--color-accent);
}

.bg-white{
    background:#fff;
}

.bg-light{
    background:var(--color-surface);
}

/*==============================
    Border Radius
==============================*/

.radius-sm{
    border-radius:var(--radius-sm);
}

.radius-md{
    border-radius:var(--radius-md);
}

.radius-lg{
    border-radius:var(--radius-lg);
}

.radius-xl{
    border-radius:var(--radius-xl);
}

.radius-pill{
    border-radius:var(--radius-pill);
}

/*==============================
    Shadows
==============================*/

.shadow-sm{
    box-shadow:var(--shadow-sm);
}

.shadow-md{
    box-shadow:var(--shadow-md);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

/*==============================
    Overflow
==============================*/

.overflow-hidden{
    overflow:hidden;
}

.overflow-visible{
    overflow:visible;
}

/*==============================
    Position
==============================*/

.position-relative{
    position:relative;
}

.position-absolute{
    position:absolute;
}

.position-fixed{
    position:fixed;
}

/*==============================
    Margin Bottom
==============================*/

.mb-10{margin-bottom:10px;}
.mb-20{margin-bottom:20px;}
.mb-30{margin-bottom:30px;}
.mb-40{margin-bottom:40px;}
.mb-50{margin-bottom:50px;}
.mb-60{margin-bottom:60px;}

/*==============================
    Margin Top
==============================*/

.mt-10{margin-top:10px;}
.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-50{margin-top:50px;}
.mt-60{margin-top:60px;}

/*==============================
    Padding
==============================*/

.pt-120{
    padding-top:120px;
}

.pb-120{
    padding-bottom:120px;
}

.py-120{
    padding:120px 0;
}

/*==============================
    Transition
==============================*/

.transition{
    transition:var(--transition-fast);
}

/*==============================
    Section Tag (shared badge)
==============================*/

.section-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(255,122,0,.08);
    color:var(--color-accent);
    font-size:14px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:28px;
}
/*==================================================
    PROCESS SECTION
==================================================*/

.process-section{

    position:relative;

    padding:140px 0;

    background:#fff;

    overflow:hidden;

}

.process-section .container{

    position:relative;

    z-index:5;

}

/*====================================
Background
====================================*/

.process-blob{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    pointer-events:none;

}

.process-blob-1{

    width:380px;

    height:380px;

    background:rgba(255,122,0,.07);

    top:-100px;

    left:-120px;

}

.process-blob-2{

    width:320px;

    height:320px;

    background:rgba(255,122,0,.05);

    bottom:-100px;

    right:-100px;

}
/*==================================================
    HEADING — centered, full-width, sits above the
    timeline instead of a sticky left sidebar
==================================================*/

.process-heading{

    text-align:center;

    max-width:760px;

    margin:0 auto 90px;

}

.process-heading h2{

    font-size:52px;

    line-height:1.15;

    margin:25px 0;

}

.process-heading p{

    max-width:560px;

    margin-left:auto;

    margin-right:auto;

    color:#666;

    font-size:17px;

    line-height:1.9;

    margin-bottom:36px;

}
/*==================================================
    TIMELINE — a straightforward horizontal row of
    step cards (3 across, wrapping to a new row every
    3rd item), connected by a short dashed line between
    neighbours in the same row. Collapses to one column
    under 768px (see the max-width:767px block below).
==================================================*/

.process-timeline{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:70px 30px;

}

.process-item{

    position:relative;

    text-align:center;

}

.process-item::after{

    content:"";

    position:absolute;

    top:37px;

    right:-15px;

    width:30px;

    height:2px;

    background:repeating-linear-gradient(90deg,rgba(255,122,0,.4) 0 6px,transparent 6px 12px);

}

.process-item:nth-child(3n)::after{

    display:none;

}

.process-number{

    position:relative;

    width:74px;

    height:74px;

    margin:0 auto 22px;

    border-radius:50%;

    background:#fff;

    border:2px solid #ececec;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:800;

    color:#999;

    transition:.4s;

}

/*==============================
Step Number Badge
==============================*/

.step-badge{

    position:absolute;

    bottom:-4px;

    right:calc(50% - 41px);

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--color-primary);

    color:#fff;

    font-size:10px;

    font-weight:800;

    display:flex;

    align-items:center;

    justify-content:center;

    border:3px solid #fff;

    transition:.4s;

}

.process-item:hover .step-badge,
.process-item.active .step-badge{

    background:var(--color-accent);

}
.process-content{

    padding:24px 20px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:

        0 25px 60px rgba(0,0,0,.05);

    transition:.45s;

}

.process-content-top{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:6px;

    margin-bottom:10px;

}

.process-content h3{

    font-size:19px;

    margin-bottom:0;

}

.process-duration{

    flex-shrink:0;

    padding:5px 12px;

    border-radius:999px;

    background:var(--color-accent-light);

    color:var(--color-accent);

    font-size:11px;

    font-weight:700;

    white-space:nowrap;

}

.process-content p{

    color:#666;

    font-size:13.5px;

    line-height:1.7;

    margin:0;

}
/*==============================
Highlights Checklist — centered row
==============================*/

.process-highlights{

    display:flex;

    flex-direction:row;

    flex-wrap:wrap;

    justify-content:center;

    gap:14px 28px;

    margin-bottom:36px;

}

.process-highlights li{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    font-weight:600;

    color:#333;

}

.process-highlights li i{

    width:22px;

    height:22px;

    border-radius:50%;

    background:rgba(255,122,0,.10);

    color:var(--color-accent);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;

    flex-shrink:0;

}
.process-item:hover .process-number,
.process-item.active .process-number{

    background:var(--color-accent);

    color:#fff;

    border-color:var(--color-accent);

    transform:scale(1.08);

}

.process-item:hover .process-content{

    transform:translateY(-8px);

    box-shadow:

        0 40px 80px rgba(255,122,0,.12);

}
.process-heading .btn{

    min-width:220px;

    height:60px;

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    border-radius:50px;

}