/* ================================
   MAIN SECTION
================================ */

.ptns-process-section{
    position:relative;
    overflow:hidden;
    padding:90px 30px 100px;

    background:
        radial-gradient(circle at 95% 5%,
        var(--ptns-process-color-0, rgba(237,28,36,.08)),
        transparent 24%),

        radial-gradient(circle at 5% 90%,
        var(--ptns-process-color-1, rgba(7,25,56,.05)),
        transparent 30%),

        var(--ptns-process-color-2, #f9fbfe);

    font-family:Arial, sans-serif;
}


/* soft decorative waves */
.ptns-process-section::before{
    content:"";
    position:absolute;

    width:650px;
    height:650px;

    left:-300px;
    top:120px;

    border-radius:50%;

    border:2px solid var(--ptns-process-color-3, rgba(255,255,255,.9));

    box-shadow:
        0 0 0 90px var(--ptns-process-color-4, rgba(255,255,255,.22)),
        0 0 0 180px var(--ptns-process-color-5, rgba(255,255,255,.12));

    pointer-events:none;
}


/* ================================
   HEADER
================================ */

.ptns-process-header{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:0 auto 65px;

    text-align:center;
}


.ptns-process-small-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;

    margin-bottom:14px;

    font-size:14px;
    font-weight:700;

    letter-spacing:5px;

    color:var(--ptns-process-color-6, #647084);
}


.ptns-process-small-title span{
    width:70px;
    height:2px;

    background:var(--ptns-process-color-7, #ed1c24);
}


.ptns-process-header h2{
    margin:0 0 18px;

    font-size:clamp(38px,5vw,58px);
    line-height:1.1;

    font-weight:800;

    color:var(--ptns-process-color-8, #071938);
}


.ptns-process-header h2 strong{
    color:var(--ptns-process-color-7, #ed1c24);
}


.ptns-process-header p{
    max-width:760px;

    margin:0 auto;

    font-size:18px;
    line-height:1.7;

    color:var(--ptns-process-color-9, #697589);
}


/* ================================
   PROCESS WRAPPER
================================ */

.ptns-process-wrapper{
    position:relative;

    max-width:1300px;

    margin:auto;
}


/* Curved connection line */

.ptns-process-line{
    position:absolute;

    width:86%;
    height:180px;

    left:7%;
    top:30px;

    z-index:1;

    overflow:visible;
}


/* ================================
   GRID
================================ */

.ptns-process-grid{
    position:relative;

    z-index:2;

    display:grid;

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

    gap:45px;
}


/* ================================
   ITEM
================================ */

.ptns-process-item{
    text-align:center;

    transition:
        transform .45s cubic-bezier(.22,1,.36,1);
}


.ptns-process-item:hover{
    transform:translateY(-8px);
}


/* ================================
   ICON AREA
================================ */

.ptns-process-icon-wrap{
    position:relative;

    width:200px;
    height:200px;

    margin:0 auto 30px;
}


/* dotted ring */

.ptns-process-dotted-circle{
    position:absolute;

    inset:4px;

    border-radius:50%;

    border:3px dotted var(--ptns-process-color-10, rgba(237,28,36,.62));

    transition:
        transform .7s ease,
        border-color .4s ease;
}


.ptns-process-item:hover
.ptns-process-dotted-circle{
    transform:rotate(25deg) scale(1.04);

    border-color:var(--ptns-process-color-7, #ed1c24);
}


/* white icon circle */

.ptns-process-icon{
    position:absolute;

    width:170px;
    height:170px;

    left:15px;
    top:15px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--ptns-process-color-11, #ffffff),
            var(--ptns-process-color-12, #fff7f7)
        );

    border:
        1px solid
        var(--ptns-process-color-13, rgba(237,28,36,.18));

    box-shadow:
        0 14px 35px
        var(--ptns-process-color-14, rgba(237,28,36,.12));

    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        box-shadow .5s ease;
}


.ptns-process-icon span{
    font-size:52px;

    color:var(--ptns-process-color-7, #ed1c24);
}


.ptns-process-item:hover
.ptns-process-icon{
    transform:scale(1.06);

    box-shadow:
        0 20px 45px
        var(--ptns-process-color-15, rgba(237,28,36,.20));
}


/* ================================
   NUMBER
================================ */

.ptns-process-number{
    position:absolute;

    width:60px;
    height:60px;

    right:-2px;
    bottom:8px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--ptns-process-color-7, #ed1c24);

    color:var(--ptns-process-color-11, #ffffff);

    font-size:26px;
    font-weight:700;

    box-shadow:
        0 9px 25px
        var(--ptns-process-color-16, rgba(237,28,36,.26));

    transition:
        transform .4s ease;
}


.ptns-process-item:hover
.ptns-process-number{
    transform:scale(1.10);
}


/* ================================
   TEXT
================================ */

.ptns-process-item h3{
    margin:0 0 14px;

    font-size:23px;
    font-weight:800;

    color:var(--ptns-process-color-8, #071938);
}


.ptns-process-divider{
    width:46px;
    height:4px;

    margin:0 auto 18px;

    border-radius:30px;

    background:var(--ptns-process-color-7, #ed1c24);

    transition:
        width .4s ease;
}


.ptns-process-item:hover
.ptns-process-divider{
    width:75px;
}


.ptns-process-item p{
    max-width:270px;

    margin:auto;

    font-size:16px;

    line-height:1.7;

    color:var(--ptns-process-color-17, #6b7588);
}


/* ================================
   RESPONSIVE TABLET
================================ */

@media(max-width:1024px){

    .ptns-process-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:70px 30px;
    }


    .ptns-process-line{
        display:none;
    }

}


/* ================================
   MOBILE
================================ */

@media(max-width:600px){

    .ptns-process-section{
        padding:
            65px 20px;
    }


    .ptns-process-small-title{
        font-size:12px;

        letter-spacing:3px;

        gap:12px;
    }


    .ptns-process-small-title span{
        width:35px;
    }


    .ptns-process-header h2{
        font-size:34px;
    }


    .ptns-process-header p{
        font-size:15px;
    }


    .ptns-process-grid{
        grid-template-columns:1fr;

        gap:55px;
    }


    .ptns-process-icon-wrap{
        width:175px;
        height:175px;
    }


    .ptns-process-icon{
        width:145px;
        height:145px;

        left:15px;
        top:15px;
    }


    .ptns-process-number{
        width:52px;
        height:52px;

        font-size:22px;
    }

}


.ptns-process, .ptns-process * { box-sizing:border-box; }
.ptns-process { isolation:isolate; }
.ptns-process .ptns-process-icon img { width:70px; height:70px; object-fit:contain; }
.ptns-process .ptns-process-icon svg { width:52px; height:52px; fill:currentColor; }
.ptns-process .ptns-process-icon i { font-size:52px; }
@media (prefers-reduced-motion: reduce) {
 .ptns-process *, .ptns-process *::before, .ptns-process *::after { transition:none!important; animation:none!important; }
 .ptns-process .ptns-process-item:hover, .ptns-process .ptns-process-item:hover .ptns-process-dotted-circle,
 .ptns-process .ptns-process-item:hover .ptns-process-icon, .ptns-process .ptns-process-item:hover .ptns-process-number { transform:none; }
}