/* =========================================================
   PA BUNTOK
   PROFIL STAF & PELAKSANA
========================================================= */

.pa-pelaksana{

    max-width:100%;

    margin:0 auto;

}


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

.pa-pelaksana-header{

    max-width:720px;

    margin:0 auto 42px;

    text-align:center;

}


.pa-pelaksana-eyebrow{

    display:inline-flex;

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

    padding:7px 14px;

    background:#eaf7ee;

    color:#0b7a3b;

    border-radius:999px;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

}


.pa-pelaksana-header h1{

    margin:16px 0 12px;

    color:#123b28;

    font-size:clamp(28px,4vw,38px);

    line-height:1.2;

    font-weight:700;

}


.pa-pelaksana-header p{

    max-width:620px;

    margin:0 auto;

    color:#64748b;

    font-size:15px;

    line-height:1.7;

}


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

.pa-pelaksana-grid{

    display:grid;

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

    gap:22px;

}


/* =========================================================
   CARD
========================================================= */

.pa-pelaksana-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-height:360px;

    padding:28px;

    overflow:hidden;

    text-decoration:none;

    background:#fff;

    border:1px solid #e1ebe4;

    border-radius:20px;

    box-shadow:
        0 8px 25px rgba(15,23,42,.045);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}


.pa-pelaksana-card:hover{

    transform:translateY(-6px);

    border-color:#c7dfcf;

    box-shadow:
        0 18px 40px rgba(15,23,42,.09);

}


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

.pa-pelaksana-number{

    position:absolute;

    top:20px;
    right:22px;

    color:#dcebe1;

    font-size:12px;

    font-weight:800;

    letter-spacing:.08em;

}


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

.pa-pelaksana-icon{

    display:flex;

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

    width:56px;
    height:56px;

    margin-bottom:25px;

    background:#eaf7ee;

    color:#0b7a3b;

    border-radius:16px;

    font-size:20px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.pa-pelaksana-card:hover .pa-pelaksana-icon{

    background:#0b7a3b;

    color:#fff;

    transform:scale(1.04);

}


/* =========================================================
   CARD CONTENT
========================================================= */

.pa-pelaksana-card-content{

    flex:1;

}


.pa-pelaksana-category{

    display:block;

    margin-bottom:8px;

    color:#8a9a94;

    font-size:10px;

    font-weight:800;

    letter-spacing:.07em;

}


.pa-pelaksana-card h2{

    margin:0 0 12px;

    color:#193c2b;

    font-size:25px;

    line-height:1.2;

    font-weight:700;

}


.pa-pelaksana-card p{

    margin:0;

    max-width:300px;

    color:#64748b;

    font-size:14px;

    line-height:1.7;

}


/* =========================================================
   JUMLAH PEGAWAI
========================================================= */

.pa-pelaksana-count{

    display:inline-flex;

    align-items:center;

    margin-top:20px;

    padding:6px 11px;

    background:#f3f8f5;

    color:#0b7a3b;

    border:1px solid #e0ebe4;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

}


/* =========================================================
   ARROW
========================================================= */

.pa-pelaksana-arrow{

    display:flex;

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

    width:38px;
    height:38px;

    margin-top:25px;

    background:#f3f8f5;

    color:#0b7a3b;

    border-radius:50%;

    font-size:13px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.pa-pelaksana-card:hover .pa-pelaksana-arrow{

    background:#0b7a3b;

    color:#fff;

    transform:translateX(4px);

}


/* =========================================================
   CARD DECORATION
========================================================= */

.pa-pelaksana-card::after{

    content:"";

    position:absolute;

    right:-45px;
    bottom:-55px;

    width:140px;
    height:140px;

    background:#f5faf7;

    border-radius:50%;

    transition:
        transform .4s ease;

}


.pa-pelaksana-card:hover::after{

    transform:scale(1.25);

}


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

@media(max-width:900px){

    .pa-pelaksana-grid{

        grid-template-columns:1fr;

        max-width:650px;

        margin:0 auto;

    }


    .pa-pelaksana-card{

        min-height:300px;

    }

}


@media(max-width:700px){

    .pa-pelaksana-header{

        margin-bottom:30px;

        padding:0 15px;

    }


    .pa-pelaksana-header h1{

        font-size:29px;

    }


    .pa-pelaksana-header p{

        font-size:14px;

    }


    .pa-pelaksana-grid{

        gap:16px;

    }


    .pa-pelaksana-card{

        min-height:280px;

        padding:24px;

        border-radius:18px;

    }


    .pa-pelaksana-icon{

        width:50px;
        height:50px;

        margin-bottom:20px;

        border-radius:14px;

        font-size:18px;

    }


    .pa-pelaksana-card h2{

        font-size:22px;

    }

}


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

@media(max-width:480px){

    .pa-pelaksana-header h1{

        font-size:26px;

    }


    .pa-pelaksana-eyebrow{

        font-size:10px;

        padding:6px 12px;

    }


    .pa-pelaksana-card{

        min-height:260px;

        padding:21px;

    }

}