/* ===========================
   Grid Layanan
=========================== */

.pku-layanan-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.pku-layanan-card{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.pku-layanan-card:hover{

    transform:translateY(-5px);

}

.pku-layanan-image img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.pku-layanan-content{

    padding: 28px 24px 18px 24px;

}

.pku-layanan-content h3{

    margin:0px 0px 0px 0px;

    font-size:22px;
    font-weight: 650;

}

.pku-layanan-content h3 a{
    font-size:18px;
    font-weight: 650;
    /* margin-top: 10px; */
    color:#111;

    text-decoration:none;

}

/* ATUR PARAGRAPH DI DESKRIPSI LAYANAN */
.pku-layanan-content p{

    margin-top: 12px;

    line-height:1.4;

    color:#666;

}

.pku-layanan-button{
    font-size: 14px;
    font-weight: 600;
    display:block;

    margin-top:30px;

    padding:14px;

    background:#eaf3f3;

    color:#358888;

    text-align:center;

    text-decoration:none;

    border-radius:6px;

}

.pku-layanan-button:hover{
    color:#ffffff;
    background:#358888;

}

@media(max-width:767px){

    .pku-layanan-grid{

        grid-template-columns:1fr;

    }

}

/* ===========================
   Grid Layanan
=========================== */

.pku-layanan-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.pku-layanan-card{

    background:#fff;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

}

.pku-layanan-card:hover{

    transform:translateY(-5px);

}

.pku-layanan-image img{

    width:100%;

    display:block;

    aspect-ratio:16/9;

    object-fit:cover;

}

.pku-layanan-content{

    padding: 28px 24px 18px 24px;

}

.pku-layanan-content h3{

    margin:0px 0px 0px 0px;

    font-size:22px;
    font-weight: 650;

}

.pku-layanan-content h3 a{
    font-size:18px;
    font-weight: 650;
    /* margin-top: 10px; */
    color:#111;

    text-decoration:none;

}

/* ATUR PARAGRAPH DI DESKRIPSI LAYANAN */
.pku-layanan-content p{

    margin-top: 12px;

    line-height:1.6;

    color:#666;

}

.pku-layanan-button{
    font-size: 14px;
    font-weight: 600;
    display:block;

    margin-top:30px;

    padding:14px;

    background:#eaf3f3;

    color:#358888;

    text-align:center;

    text-decoration:none;

    border-radius:6px;

}

.pku-layanan-button:hover{
    color:#ffffff;
    background:#358888;

}

@media(max-width:767px){

    .pku-layanan-grid{

        grid-template-columns:1fr;

    }

}


/* ===========================
   Slider Layanan
=========================== */

.pku-layanan-slider-container {
    width: 100%;
}

.pku-layanan-slider {
    position: relative;
    overflow: hidden;
}

.pku-layanan-slider .swiper-slide a {
    text-decoration: none;
    display: block;
}

.pku-layanan-slider .swiper-slide {
    height: auto;
}

.pku-layanan-card {
    height: 100%;
}


/* ===========================
   Navigasi Slider
   Arrow di bawah card
=========================== */

.pku-layanan-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: ;
    gap: 8px;
    margin-top: 18px;
}

.pku-layanan-navigation .swiper-button-prev,
.pku-layanan-navigation .swiper-button-next {
    position: relative;

    width: 40px;
    height: 40px;

    margin: 0;

    flex: 0 0 40px;

    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
}


/* Ukuran icon arrow */

.pku-layanan-navigation .swiper-button-prev::after,
.pku-layanan-navigation .swiper-button-next::after {
    font-size: 18px;
}

/* ===========================
   Warna Tombol Arrow
=========================== */

/* Tombol kiri */
.pku-layanan-navigation .swiper-button-prev {
    background: #eaf3f3;
    border-radius: 6px;
}

/* Icon tombol kiri */
.pku-layanan-navigation .swiper-button-prev::after {
    color: #358888;
}


/* Tombol kanan */
.pku-layanan-navigation .swiper-button-next {
    background: #358888;
    border-radius: 6px;
}

/* Icon tombol kanan */
.pku-layanan-navigation .swiper-button-next::after {
    color: #ffffff;
}