/* =========================================================
   HERO
========================================================= */

.layanan-hero {
    position: relative;

    overflow: hidden;

    padding: 68px 0 72px;

    background:
        linear-gradient(
            135deg,
            #102044 0%,
            #15395c 55%,
            #079DB9 100%
        );
}

.layanan-hero::before {
    content: "";

    position: absolute;

    width: 460px;
    height: 460px;

    top: -250px;
    right: -110px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .06);
}

.layanan-hero::after {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    bottom: -210px;
    left: 10%;

    border-radius: 50%;

    background: rgba(255, 255, 255, .04);
}

.layanan-hero-content {
    position: relative;
    z-index: 2;

    max-width: 820px;
}

.layanan-hero-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 14px;

    color: #ffffff;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}

.layanan-hero-label i {
    color: #FF7A1A;

    font-size: 15px;
}

.layanan-hero h1 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(35px, 5vw, 56px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -1.5px;
}

.layanan-hero h1 span {
    display: block;

    color: #8de3ed;
}

.layanan-hero p {
    max-width: 710px;

    margin: 18px 0 0;

    color: rgba(255, 255, 255, .82);

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.layanan-breadcrumb-wrapper {
    background: #ffffff;

    border-bottom: 1px solid #e8edf2;
}

.layanan-breadcrumb {
    display: flex;
    align-items: center;

    gap: 9px;

    min-height: 50px;

    color: #667085;

    font-size: 12px;
}

.layanan-breadcrumb a {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #079DB9;

    text-decoration: none;

    font-weight: 600;
}

.layanan-breadcrumb > i {
    color: #98A2B3;

    font-size: 9px;
}


/* =========================================================
   INTRO
========================================================= */

.layanan-intro-section {
    padding: 34px 0 18px;

    background: #ffffff;
}

.layanan-intro {
    display: flex;

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

    gap: 30px;

    padding: 28px 30px;

    border: 1px solid #dfe8ec;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f3fbfc,
            #ffffff
        );

    box-shadow:
        0 8px 24px rgba(16, 32, 68, .035);
}

.layanan-intro-content {
    min-width: 0;
}

.layanan-section-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #079DB9;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}

.layanan-section-label > span {
    width: 22px;
    height: 3px;

    border-radius: 10px;

    background: #FF7A1A;
}

.layanan-intro h2 {
    margin: 7px 0 8px;

    color: #102044;

    font-size: 25px;

    line-height: 1.3;

    font-weight: 800;
}

.layanan-intro p {
    max-width: 720px;

    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.8;
}


/* =========================================================
   INTRO STAT
========================================================= */

.layanan-intro-stat {
    display: flex;
    align-items: center;

    gap: 12px;

    flex-shrink: 0;

    padding: 13px 16px;

    border: 1px solid #d8edf1;

    border-radius: 12px;

    background: #ffffff;
}

.layanan-intro-stat-icon {
    width: 42px;
    height: 42px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 18px;
}

.layanan-intro-stat strong {
    display: block;

    color: #102044;

    font-size: 20px;

    line-height: 1;
}

.layanan-intro-stat span {
    display: block;

    margin-top: 4px;

    color: #667085;

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .5px;
}


/* =========================================================
   LIST
========================================================= */

.layanan-list-section {
    padding: 22px 0 78px;

    background: #ffffff;
}

.layanan-list-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}

.layanan-list-header h2 {
    margin: 6px 0 0;

    color: #102044;

    font-size: 25px;

    font-weight: 800;
}

.layanan-total {
    padding: 7px 11px;

    border: 1px solid #dfe8ec;

    border-radius: 8px;

    background: #f8fafb;

    color: #667085;

    font-size: 10px;

    font-weight: 700;
}


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

.layanan-card {
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 22px;

    border: 1px solid #e0e8ec;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 7px 22px rgba(16, 32, 68, .04);

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

.layanan-card:hover {
    transform: translateY(-5px);

    border-color: #cde3e8;

    box-shadow:
        0 15px 34px rgba(16, 32, 68, .09);
}


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

.layanan-card-top {
    display: flex;

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

    gap: 12px;

    margin-bottom: 18px;
}

.layanan-card-icon {
    width: 50px;
    height: 50px;

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

    border-radius: 13px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 21px;

    transition: .25s ease;
}

.layanan-card:hover .layanan-card-icon {
    background: #079DB9;

    color: #ffffff;
}

.layanan-card-badge {
    padding: 5px 8px;

    border-radius: 6px;

    background: #fff5ed;

    color: #FF7A1A;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .6px;

    text-transform: uppercase;
}


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

.layanan-card-content {
    display: flex;
    flex-direction: column;

    flex: 1;
}

.layanan-card-content h3 {
    margin: 0 0 9px;

    color: #102044;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 800;
}

.layanan-card-description {
    min-height: 66px;

    margin: 0 0 17px;

    color: #667085;

    font-size: 12px;

    line-height: 1.75;
}


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

.layanan-card-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: auto;

    margin-bottom: 18px;
}

.layanan-card-meta-item {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    max-width: 100%;

    padding: 6px 8px;

    border: 1px solid #e7edef;

    border-radius: 7px;

    background: #f8fafb;

    color: #667085;

    font-size: 9px;

    line-height: 1.4;
}

.layanan-card-meta-icon {
    color: #FF7A1A;

    font-size: 11px;
}


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

.layanan-card-button {
    width: 100%;

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

    gap: 10px;

    padding: 10px 11px;

    border: 1px solid #d5e4e8;

    border-radius: 9px;

    background: #ffffff;

    color: #102044;

    font-size: 11px;

    font-weight: 750;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.layanan-card-button:hover {
    border-color: #079DB9;

    background: #079DB9;

    color: #ffffff;
}

.layanan-card-button-icon {
    width: 27px;
    height: 27px;

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

    flex-shrink: 0;

    border-radius: 7px;

    background: #edf9fb;

    color: #079DB9;

    transition: .2s ease;
}

.layanan-card-button:hover .layanan-card-button-icon {
    background: rgba(255, 255, 255, .16);

    color: #ffffff;

    transform: translateX(2px);
}


/* =========================================================
   MODAL
========================================================= */

.layanan-modal .modal-dialog {
    max-width: 940px;
}

.layanan-modal .modal-content {
    overflow: hidden;

    border: 0;

    border-radius: 18px;

    box-shadow:
        0 25px 75px rgba(16, 32, 68, .18);
}

.layanan-modal .modal-header {
    padding: 20px 24px;

    border-bottom: 1px solid #e7edef;

    background: #f8fbfc;
}

.layanan-modal-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    min-width: 0;
}

.layanan-modal-icon {
    width: 44px;
    height: 44px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #079DB9;

    color: #ffffff;

    font-size: 18px;
}

.layanan-modal-label {
    margin-bottom: 3px;

    color: #FF7A1A;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.layanan-modal-title {
    margin: 0;

    color: #102044;

    font-size: 20px;

    line-height: 1.3;

    font-weight: 800;
}


/* =========================================================
   MODAL CONTENT
========================================================= */

.layanan-modal .modal-body {
    padding: 26px 24px;
}

.layanan-modal-content {
    max-width: 860px;

    margin: 0 auto;
}


/* =========================================================
   MODAL SECTION
========================================================= */

.layanan-modal-section {
    margin-bottom: 30px;

    padding-bottom: 26px;

    border-bottom: 1px solid #edf1f3;
}

.layanan-modal-section:last-child {
    border-bottom: 0;
}

.layanan-modal-section-heading {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 14px;
}

.layanan-modal-section-heading > span {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 16px;
}

.layanan-modal-section-heading small {
    display: block;

    margin-bottom: 2px;

    color: #98A2B3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.layanan-modal-section-heading h3 {
    margin: 0;

    color: #102044;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 800;
}


/* =========================================================
   TINYMCE / RICH TEXT
========================================================= */

.layanan-rich-text {
    color: #475467;

    font-size: 13px;

    line-height: 1.85;

    overflow-wrap: break-word;
}

.layanan-rich-text p {
    margin: 0 0 14px;
}

.layanan-rich-text p:last-child {
    margin-bottom: 0;
}


/* HEADING */

.layanan-rich-text h1,
.layanan-rich-text h2,
.layanan-rich-text h3,
.layanan-rich-text h4,
.layanan-rich-text h5,
.layanan-rich-text h6 {
    margin-top: 22px;

    margin-bottom: 10px;

    color: #102044;

    line-height: 1.35;

    font-weight: 750;
}

.layanan-rich-text h1:first-child,
.layanan-rich-text h2:first-child,
.layanan-rich-text h3:first-child,
.layanan-rich-text h4:first-child,
.layanan-rich-text h5:first-child,
.layanan-rich-text h6:first-child {
    margin-top: 0;
}

.layanan-rich-text h1 {
    font-size: 25px;
}

.layanan-rich-text h2 {
    font-size: 22px;
}

.layanan-rich-text h3 {
    font-size: 19px;
}

.layanan-rich-text h4 {
    font-size: 17px;
}

.layanan-rich-text h5 {
    font-size: 15px;
}

.layanan-rich-text h6 {
    font-size: 14px;
}


/* BOLD / ITALIC */

.layanan-rich-text strong,
.layanan-rich-text b {
    color: #102044;

    font-weight: 700;
}

.layanan-rich-text em {
    font-style: italic;
}


/* LIST */

.layanan-rich-text ul,
.layanan-rich-text ol {
    margin: 0 0 16px;

    padding-left: 25px;
}

.layanan-rich-text li {
    margin-bottom: 6px;
}

.layanan-rich-text li:last-child {
    margin-bottom: 0;
}


/* LINK */

.layanan-rich-text a {
    color: #079DB9;

    text-decoration: underline;

    text-underline-offset: 2px;
}

.layanan-rich-text a:hover {
    color: #102044;
}


/* BLOCKQUOTE */

.layanan-rich-text blockquote {
    margin: 20px 0;

    padding: 13px 16px;

    border-left: 4px solid #FF7A1A;

    border-radius: 0 8px 8px 0;

    background: #fff8f1;

    color: #475467;
}


/* IMAGE */

.layanan-rich-text img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 16px 0;

    border-radius: 9px;
}


/* TABLE */

.layanan-rich-text table {
    width: 100%;

    margin: 20px 0;

    border-collapse: collapse;

    background: #ffffff;
}

.layanan-rich-text th,
.layanan-rich-text td {
    padding: 9px 11px;

    border: 1px solid #dfe5e8;

    text-align: left;

    vertical-align: top;
}

.layanan-rich-text th {
    background: #f8fafc;

    color: #102044;

    font-weight: 700;
}


/* HORIZONTAL RULE */

.layanan-rich-text hr {
    margin: 24px 0;

    border: 0;

    border-top: 1px solid #dfe5e8;
}


/* CODE */

.layanan-rich-text code {
    padding: 2px 6px;

    border-radius: 4px;

    background: #f2f4f7;

    color: #102044;

    font-size: .9em;
}

.layanan-rich-text pre {
    margin: 18px 0;

    padding: 14px;

    overflow-x: auto;

    border-radius: 8px;

    background: #102044;

    color: #ffffff;

    line-height: 1.6;
}


/* =========================================================
   INFORMATION
========================================================= */

.layanan-modal-information {
    padding: 20px;

    border: 1px solid #e3eaed;

    border-radius: 13px;

    background: #fbfcfd;
}

.layanan-info-box {
    display: flex;
    align-items: center;

    gap: 12px;

    height: 100%;

    padding: 14px;

    border: 1px solid #e1e8eb;

    border-radius: 10px;

    background: #ffffff;
}

.layanan-info-box-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 16px;
}

.layanan-info-box span {
    display: block;

    margin-bottom: 3px;

    color: #98A2B3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.layanan-info-box strong {
    display: block;

    color: #102044;

    font-size: 12px;

    font-weight: 700;
}


/* =========================================================
   CONTACT
========================================================= */

.layanan-contact-box {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px;

    border: 1px solid #f3deca;

    border-radius: 10px;

    background: #fff8f1;
}

.layanan-contact-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #FF7A1A;

    color: #ffffff;

    font-size: 15px;
}

.layanan-contact-box span {
    display: block;

    margin-bottom: 3px;

    color: #9b7657;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.layanan-contact-box strong {
    display: block;

    color: #4b3b30;

    font-size: 12px;

    font-weight: 650;

    word-break: break-word;
}


/* =========================================================
   EMPTY MODAL
========================================================= */

.layanan-modal-empty {
    padding: 35px 20px;

    text-align: center;

    color: #667085;
}

.layanan-modal-empty i {
    display: block;

    margin-bottom: 9px;

    color: #079DB9;

    font-size: 30px;
}

.layanan-modal-empty p {
    margin: 0;

    font-size: 12px;
}


/* =========================================================
   MODAL FOOTER
========================================================= */

.layanan-modal .modal-footer {
    padding: 14px 24px;

    border-top: 1px solid #e7edef;

    background: #fafbfc;
}

.layanan-modal-close {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 9px 15px;

    border: 1px solid #d6e1e5;

    border-radius: 8px;

    background: #ffffff;

    color: #475467;

    font-size: 11px;

    font-weight: 700;

    transition: .2s ease;
}

.layanan-modal-close:hover {
    border-color: #079DB9;

    background: #079DB9;

    color: #ffffff;
}


/* =========================================================
   EMPTY PAGE
========================================================= */

.layanan-empty {
    max-width: 560px;

    margin: 40px auto;

    padding: 60px 20px;

    text-align: center;
}

.layanan-empty-icon {
    width: 72px;
    height: 72px;

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

    margin: 0 auto 18px;

    border-radius: 50%;

    background: #edf9fb;

    color: #079DB9;

    font-size: 32px;
}

.layanan-empty h3 {
    margin: 0 0 8px;

    color: #102044;

    font-size: 21px;

    font-weight: 800;
}

.layanan-empty p {
    margin: 0;

    color: #667085;

    font-size: 13px;

    line-height: 1.7;
}

/* =========================================================
   DETAIL HERO
========================================================= */

.layanan-detail-hero {
    position: relative;

    overflow: hidden;

    padding: 48px 0 54px;

    background:
        linear-gradient(
            135deg,
            #102044 0%,
            #15395c 58%,
            #079DB9 100%
        );
}

.layanan-detail-hero::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    top: -170px;
    right: -80px;

    border-radius: 50%;

    background: rgba(255,255,255,.06);
}

.layanan-detail-hero-content {
    position: relative;

    z-index: 2;

    max-width: 850px;
}

.layanan-detail-back {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 25px;

    color: rgba(255,255,255,.8);

    font-size: 11px;

    font-weight: 650;

    text-decoration: none;
}

.layanan-detail-back:hover {
    color: #ffffff;
}

.layanan-detail-icon {
    width: 58px;
    height: 58px;

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

    margin-bottom: 18px;

    border-radius: 14px;

    background: rgba(255,255,255,.14);

    color: #ffffff;

    font-size: 23px;

    border: 1px solid rgba(255,255,255,.18);
}

.layanan-detail-label {
    margin-bottom: 6px;

    color: #8de3ed;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.layanan-detail-hero h1 {
    max-width: 800px;

    margin: 0;

    color: #ffffff;

    font-size: clamp(32px, 5vw, 50px);

    line-height: 1.1;

    font-weight: 800;

    letter-spacing: -1px;
}

.layanan-detail-hero p {
    max-width: 700px;

    margin: 15px 0 0;

    color: rgba(255,255,255,.8);

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================================
   DETAIL
========================================================= */

.layanan-detail-section {
    padding: 42px 0 80px;

    background: #f8fafb;
}

.layanan-detail-card {
    padding: 30px;

    border: 1px solid #e1e9ed;

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(16,32,68,.04);
}


/* =========================================================
   CONTENT SECTION
========================================================= */

.layanan-detail-content-section {
    margin-bottom: 35px;

    padding-bottom: 30px;

    border-bottom: 1px solid #edf1f3;
}

.layanan-detail-content-section:last-child {
    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: 0;
}

.layanan-detail-section-heading {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}

.layanan-detail-section-icon {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 10px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 16px;
}

.layanan-detail-section-heading small {
    display: block;

    margin-bottom: 2px;

    color: #98A2B3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .7px;

    text-transform: uppercase;
}

.layanan-detail-section-heading h2 {
    margin: 0;

    color: #102044;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 800;
}


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

.layanan-detail-card .layanan-rich-text {
    color: #475467;

    font-size: 14px;

    line-height: 1.9;

    overflow-wrap: break-word;
}

.layanan-detail-card .layanan-rich-text p {
    margin: 0 0 15px;
}

.layanan-detail-card .layanan-rich-text p:last-child {
    margin-bottom: 0;
}

.layanan-detail-card .layanan-rich-text h1,
.layanan-detail-card .layanan-rich-text h2,
.layanan-detail-card .layanan-rich-text h3,
.layanan-detail-card .layanan-rich-text h4,
.layanan-detail-card .layanan-rich-text h5,
.layanan-detail-card .layanan-rich-text h6 {
    color: #102044;
}

.layanan-detail-card .layanan-rich-text ul,
.layanan-detail-card .layanan-rich-text ol {
    padding-left: 26px;

    margin-bottom: 18px;
}

.layanan-detail-card .layanan-rich-text li {
    margin-bottom: 6px;
}

.layanan-detail-card .layanan-rich-text a {
    color: #079DB9;

    text-decoration: underline;
}

.layanan-detail-card .layanan-rich-text blockquote {
    margin: 20px 0;

    padding: 14px 17px;

    border-left: 4px solid #FF7A1A;

    border-radius: 0 8px 8px 0;

    background: #fff8f1;
}

.layanan-detail-card .layanan-rich-text img {
    max-width: 100%;
    height: auto;

    border-radius: 10px;
}

.layanan-detail-card .layanan-rich-text table {
    width: 100%;

    border-collapse: collapse;

    margin: 20px 0;
}

.layanan-detail-card .layanan-rich-text th,
.layanan-detail-card .layanan-rich-text td {
    padding: 9px 11px;

    border: 1px solid #dfe5e8;

    text-align: left;

    vertical-align: top;
}

.layanan-detail-card .layanan-rich-text th {
    background: #f8fafc;

    color: #102044;
}


/* =========================================================
   SIDEBAR
========================================================= */

.layanan-detail-sidebar {
    position: sticky;

    top: 90px;
}

.layanan-detail-info-card {
    padding: 22px;

    border: 1px solid #e1e9ed;

    border-radius: 15px;

    background: #ffffff;

    box-shadow:
        0 8px 24px rgba(16,32,68,.04);
}

.layanan-detail-info-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;

    padding-bottom: 16px;

    border-bottom: 1px solid #edf1f3;
}

.layanan-detail-info-header small {
    display: block;

    margin-bottom: 3px;

    color: #079DB9;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .8px;

    text-transform: uppercase;
}

.layanan-detail-info-header h2 {
    margin: 0;

    color: #102044;

    font-size: 17px;

    font-weight: 800;
}

.layanan-detail-info-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #edf9fb;

    color: #079DB9;
}


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

.layanan-detail-info-item {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    padding: 13px 0;

    border-bottom: 1px solid #f0f3f4;
}

.layanan-detail-info-item:last-of-type {
    border-bottom: 0;
}

.layanan-detail-info-item-icon {
    width: 36px;
    height: 36px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #edf9fb;

    color: #079DB9;

    font-size: 14px;
}

.layanan-detail-info-item-icon-orange {
    background: #fff5ed;

    color: #FF7A1A;
}

.layanan-detail-info-item span {
    display: block;

    margin-bottom: 3px;

    color: #98A2B3;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.layanan-detail-info-item strong {
    display: block;

    color: #102044;

    font-size: 12px;

    line-height: 1.5;

    font-weight: 700;

    word-break: break-word;
}

.layanan-detail-info-empty {
    padding: 10px 0;

    color: #98A2B3;

    font-size: 11px;
}


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

.layanan-detail-action-card {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-top: 18px;

    padding: 18px;

    border: 1px solid #dcecef;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #f1fbfc,
            #ffffff
        );
}

.layanan-detail-action-icon {
    width: 38px;
    height: 38px;

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

    flex-shrink: 0;

    border-radius: 9px;

    background: #079DB9;

    color: #ffffff;

    font-size: 15px;
}

.layanan-detail-action-card h3 {
    margin: 0 0 5px;

    color: #102044;

    font-size: 14px;

    font-weight: 800;
}

.layanan-detail-action-card p {
    margin: 0 0 10px;

    color: #667085;

    font-size: 10px;

    line-height: 1.65;
}

.layanan-detail-action-link {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #079DB9;

    font-size: 10px;

    font-weight: 750;

    text-decoration: none;
}

.layanan-detail-action-link:hover {
    color: #102044;
}


/* =========================================================
   EMPTY CONTENT
========================================================= */

.layanan-detail-empty-content {
    padding: 50px 20px;

    text-align: center;

    color: #667085;
}

.layanan-detail-empty-content i {
    display: block;

    margin-bottom: 10px;

    color: #079DB9;

    font-size: 32px;
}

.layanan-detail-empty-content p {
    margin: 0;

    font-size: 12px;
}


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

@media (max-width: 991.98px) {

    .layanan-intro {
        align-items: flex-start;
    }

    .layanan-intro-stat {
        margin-top: 2px;
    }

    .layanan-detail-sidebar {
        position: static;
    }

}


@media (max-width: 767.98px) {

    .layanan-hero {
        padding: 52px 0;
    }

    .layanan-hero h1 {
        font-size: 34px;
    }

    .layanan-hero p {
        font-size: 13px;
    }

    .layanan-intro-section {
        padding-top: 25px;
    }

    .layanan-intro {
        flex-direction: column;

        gap: 18px;

        padding: 22px;
    }

    .layanan-intro h2 {
        font-size: 21px;
    }

    .layanan-intro-stat {
        width: 100%;
    }

    .layanan-list-section {
        padding-bottom: 55px;
    }

    .layanan-list-header {
        align-items: flex-start;
    }

    .layanan-list-header h2 {
        font-size: 21px;
    }

    .layanan-total {
        white-space: nowrap;
    }

    .layanan-card {
        padding: 20px;
    }

    .layanan-card-description {
        min-height: auto;
    }

    .layanan-modal .modal-header {
        padding: 16px;
    }

    .layanan-modal .modal-body {
        padding: 20px 16px;
    }

    .layanan-modal .modal-footer {
        padding: 12px 16px;
    }

    .layanan-modal-title {
        font-size: 17px;
    }

    .layanan-modal-section {
        margin-bottom: 25px;

        padding-bottom: 21px;
    }

    .layanan-rich-text {
        font-size: 13px;

        line-height: 1.8;
    }

    .layanan-rich-text h1 {
        font-size: 22px;
    }

    .layanan-rich-text h2 {
        font-size: 20px;
    }

    .layanan-rich-text h3 {
        font-size: 18px;
    }

    .layanan-rich-text table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

    .layanan-detail-section {
        padding: 30px 0 55px;
    }

    .layanan-detail-card {
        padding: 22px 18px;
    }

    .layanan-detail-hero {
        padding: 42px 0 48px;
    }

    .layanan-detail-hero h1 {
        font-size: 32px;
    }

    .layanan-detail-hero p {
        font-size: 13px;
    }

    .layanan-detail-section-heading h2 {
        font-size: 17px;
    }

    .layanan-detail-card .layanan-rich-text {
        font-size: 13px;

        line-height: 1.8;
    }

    .layanan-detail-card .layanan-rich-text table {
        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }

}