@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); 
@import url('https://fonts.cdnfonts.com/css/times-new-roman');

:root {
    --accent: #7F953E;
    --accent-hover: #EAF1D3;
    --white: #ffffff;
    --black: #000000;
    --light: #f5f5f5;
    --dark: #070e40;
    --danger: #DC3545;
    
    --text: #10111a;
    --text2: #838694;

    --border: #E6E6E6;
    --border2: #D2D2D2;

    --background: #F6F8FA;

    --shadow: 0 0.25rem 1rem 0.5rem rgba(54, 56, 72, 0.05);
    --shadow-sm: 0 0.15rem 1rem 0.5rem rgba(54, 56, 72, 0.035);
    --shadow-md: 0 0.313rem 1.25rem rgba(54, 56, 72, 0.1);

    --transition: all .4s ease-in-out;
    --transition-2: all .2s ease-in-out;
    --transition-3: all .3s ease-in-out;
    --transition-4: all .4s ease-in-out;
    --transition-5: all .5s ease-in-out;
    --transition-6: all .6s ease-in-out;
    --transition-7: all .7s ease-in-out;
    --transition-8: all .8s ease-in-out;
    --transition-9: all .9s ease-in-out;

    --font1: 'Poppins', sans-serif;
    --font2: 'Times New Roman', sans-serif;

    --transform-fix: 'none';
}


/* ------------------------------------ common ------------------------------------ */
    *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
    html, body { font-size: 100%; }
    body { background: var(--background); cursor: auto; font-family: var(--font1); font-style: normal; font-weight: 400; font-size: 1rem; line-height: 160%; letter-spacing: 0.01rem; color: var(--text); overflow-x: hidden; margin: 0; padding: 0; }

    body.modal-open { padding-right: 0px !important }
    body.modal-open .navbar { padding-right: 0px !important }

    main.wrap-site { position: relative; overflow-x: hidden; }

    ::-moz-selection { background: var(--accent); color: var(--white); }
    ::selection { background: var(--accent); color: var(--white); }

    body::-webkit-scrollbar { width: 0.6rem; }
    body::-webkit-scrollbar-track { background: var(--white) !important; -webkit-box-shadow: inset 0.09rem 0 0.313rem rgba(59, 53, 81, 0.2); box-shadow: inset 0.09rem 0 0.313rem rgba(59, 53, 81, 0.2); }
    body::-webkit-scrollbar-thumb {
        cursor: pointer !important;
        border-radius: 0.2rem !important;
        background: -webkit-linear-gradient(45deg, rgba(59, 53, 81, 0.14), rgba(59, 53, 81, 0.14));
        background: -o-linear-gradient(45deg, rgba(59, 53, 81, 0.14), rgba(59, 53, 81, 0.14));
        background: linear-gradient(45deg, rgba(59, 53, 81, 0.14), rgba(59, 53, 81, 0.14));
        -webkit-transition: var(--transition-6); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    body::-webkit-scrollbar-thumb:hover {
        background: -webkit-linear-gradient(45deg, rgba(0, 164, 224, 0.4), rgba(0, 164, 224, 0.3));
        background: -o-linear-gradient(45deg, rgba(0, 164, 224, 0.4), rgba(0, 164, 224, 0.3));
        background: linear-gradient(45deg, rgba(0, 164, 224, 0.4), rgba(0, 164, 224, 0.3));
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }

    *:focus { text-decoration: none; outline: none; }
    a { text-decoration: none; cursor: pointer; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a:focus, a:hover, a:active, *:focus,
    a:focus h1, a:hover h1, a:active h1,
    a:focus h2, a:hover h2, a:active h2,
    a:focus h3, a:hover h3, a:active h3,
    a:focus h4, a:hover h4, a:active h4,
    a:focus h5, a:hover h5, a:active h5,
    a:focus h6, a:hover h6, a:active h6 { 
        color: var(--white); outline: none; text-decoration: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }
    
    ol { padding: 0; margin: 0; }
    ol li { list-style: decimal inside !important; }
    ul { padding: 0; margin: 0; }
    ul li { list-style: none; }
    .list-unstyled { padding-left: 0; list-style: none; }
    .list-inline { padding-left: 0; list-style: none; }
    .list-inline-item { display: inline-block; }
    .list-inline-item:not(:last-child) { margin-right: 0.938rem; }

    .hv-shadow-sm { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-sm:hover, .hv-shadow-sm:focus { box-shadow: 0 0.24rem 0.625rem rgba(0, 0, 0, 0.0786943); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow:hover, .hv-shadow:focus { box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.0986943); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-trigger { position: relative; overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 20%; height: 20%; opacity: 0; visibility: hidden; border-radius: 0.6rem; background: var(--light); z-index: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:hover:before, .hv-trigger:focus:before { width: 100%; height: 100%; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
/* ------------------------------------ end common ------------------------------------ */


/* ------------------------------------ flex-column ------------------------------------ */
    .flex-col { width: 100%; margin-bottom: 0.938rem; margin-right: 0.938rem; padding-left: 0.375rem; padding-right: 0.375rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .flex-2-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-2-column .flex-col { flex-basis: 50%; -ms-flex: auto; }

    .flex-3-column { display: -ms-flexbox; display: flex; flex-flow: wrap; -ms-flex-direction: row; flex-direction: row; }
    .flex-3-column .flex-col { flex-basis: 31%; -ms-flex: auto; }


    @media (max-width: 1200px) {
        .flex-2-column .flex-col { flex-basis: 50%; }
        .flex-3-column .flex-col { flex-basis: 45%; }
    }
    @media (max-width: 992px) {
        .flex-2-column .flex-col { flex-basis: 50%; }
        .flex-3-column .flex-col { flex-basis: 45%; }
    }
    @media (max-width: 768px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
        .flex-3-column .flex-col { flex-basis: 100%; }
    }
    @media (max-width: 580px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
        .flex-3-column .flex-col { flex-basis: 100%; }
    }
    @media (max-width: 480px) {
        .flex-2-column .flex-col { flex-basis: 100%; }
        .flex-3-column .flex-col { flex-basis: 100%; }
    }
/* ------------------------------------ end flex-column ------------------------------------ */


/* ------------------------------------ form style ------------------------------------ */
    .form-style .form-group { width: 100%; position: relative; margin-bottom: 1.25rem; }

    .control-label { font-weight: 500; font-size: 0.875rem; line-height: 1.2; color: var(--text); margin-bottom: 0.414rem; }
    .form-control { 
        position: relative;
        display: block;
        width: 100%;
        height: calc(2.85rem + 0.95rem);
        padding: 0.275rem 0.75rem;
        border-radius: 2.5rem;
        background: var(--white); 
        border: 1px solid var(--border);
        box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.06);
        font-weight: 400;
        font-size: 0.875rem; 
        line-height: 1.2;
        color: var(--text); 
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .form-control::placeholder { font-weight: normal; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text); vertical-align: middle; opacity: 0.3; }
    .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text); vertical-align: middle; opacity: 0.3; }
    .form-control::-moz-placeholder { font-weight: normal; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text); vertical-align: middle; opacity: 0.3; }
    .form-control:-ms-input-placeholder { font-weight: normal; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text); vertical-align: middle; opacity: 0.3; }
    .form-control:-moz-placeholder { font-weight: normal; font-size: 0.95rem; letter-spacing: 0.04rem; color: var(--text); vertical-align: middle; opacity: 0.3; }
    .form-control:disabled, .form-control[readonly] { background-color: var(--light); opacity: 1; }
    .form-control:focus,
    .select2-selection--single:focus { 
        box-shadow: none; background: var(--white) !important; border-color: var(--accent) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }

    .form-actions { margin-top: 1.875rem; }

    /*validate*/
    .has-error { color: var(--danger) !important; clear: both; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
    .has-error em, em.has-error { color: var(--danger) !important; font-size: 0.975rem !important; letter-spacing: 0.02rem; }
    .has-error > input { border-color: var(--danger) !important; color: var(--text) !important; }
    input.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
/* ------------------------------------ end form style ------------------------------------ */


/* ------------------------------------ swiper slider ------------------------------------ */
    .swiper-container { position: relative; height: 100%; }
    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0.313rem - (var(--swiper-navigation-size)/ 2));
        
    }

    .swiper-button { font-family: swiper-icons; font-size: 2.5rem; line-height: 1; letter-spacing: 0; color: var(--color-white); z-index: 10; text-transform: none; font-variant: initial; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button:hover, .swiper-button:focus { color: var(--color-white) !important; }
    
    .swiper-button.swiper-button-disabled { opacity: 0.25; cursor: auto; pointer-events: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-button-prev { left: 3%; right: auto; }
    .swiper-button-prev:after { content: 'prev'; }
    .swiper-button-next { right: 3%; left: auto; }
    .swiper-button-next:after { content: 'next'; }

    .swiper-button.style-2 { background: var(--accent); width: 3.2rem; height: 3.2rem; border-radius: 50%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.style-2:after { font-size: 1.45rem; color: var(--color-white); }
    .swiper-button.style-2:hover { box-shadow: var(--shadow-accent-sm); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .swiper-button.style-3.swiper-button-disabled { opacity: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    @media (max-width: 768px) {
        .swiper-button.style-3 { opacity: 0.75; }
    }


    .swiper-button-area { position: relative; display: inline-block; }
    .swiper-button-area .swiper-button { position: relative; display: inline-flex; }
    .swiper-button-area .swiper-button:not(:last-child) { margin-right: 0.625rem; }
    .swiper-button-area .swiper-button-prev { left: 0; }
    .swiper-button-area .swiper-button-next { right: 0; }

    .swiper-pagination-bullet { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-pagination.swiper-pagination-bottom { bottom: -1.825rem; }
    .swiper-pagination-bullet-active { background: var(--accent) !important; }

    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; background: var(--dark); border: 1px solid transparent; opacity: 0.2; }
    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet:not(:last-child) { margin-right: 0.313rem; }
    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.25rem; height: 0.5rem; border-radius: 0.25rem; opacity: 1; background: var(--accent) !important; }

    .swiper-pagination-line .swiper-pagination-bullet { width: 1.825rem; border-radius: 3.125rem; background: var(--dark); opacity: 1; }
    .swiper-pagination-line .swiper-pagination-bullet:not(:last-child) { margin-right: 0.313rem; }
    .swiper-pagination-line .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 3.125rem; background: var(--white) !important; opacity: 1; }
/* ------------------------------------ end swiper slider ------------------------------------ */


    .slideshow-section { position: fixed; top: 0; left: 0; bottom: 0; right: 0; opacity: 0; visibility: hidden; z-index: 0; -webkit-transition: opacity 0.4s linear, visibility 0.4s linear; -moz-transition: opacity 0.4s linear, visibility 0.4s linear; -ms-transition: opacity 0.4s linear, visibility 0.4s linear; -o-transition: opacity 0.4s linear, visibility 0.4s linear; transition: opacity 0.4s linear, visibility 0.4s linear; }
    .slideshow-section.active { opacity: 1; visibility: visible; z-index: 99999; -webkit-transition: opacity 0.4s linear, visibility 0.4s linear; -moz-transition: opacity 0.4s linear, visibility 0.4s linear; -ms-transition: opacity 0.4s linear, visibility 0.4s linear; -o-transition: opacity 0.4s linear, visibility 0.4s linear; transition: opacity 0.4s linear, visibility 0.4s linear; }
    .slideshow-section .inner { width: 100%; height: 100vh; background: var(--dark); }
    .slideshow-section .slideshow-item { position: relative; overflow: hidden; }
    .slideshow-section .slideshow-item .slideshow-img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    /* .slideshow-section .slideshow-item .bg-image { position: absolute; bottom: -20%; right: -10%; width: 50%; height: 90vh; z-index: 3; border: 1px solid red; } */
    /* .slideshow-section .slideshow-item .bg-image:before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(246, 248, 250, 0.97) 25%, rgba(246, 248, 250, 0.5) 90%); z-index: 1; } */
    .slideshow-section .slideshow-item .bg-image img { object-fit: cover; object-position: left top; width: 100%; height: 100%; z-index: 0; opacity: 0.15; }


/* ------------------------------------ button ------------------------------------ */
    .btn {
        position: relative;
        overflow: hidden;
        width: 100%;
        font-family: var(--font1);
        outline: 0 !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-radius: 2.5rem;
        padding: 1.125rem 2.5rem;
        background: var(--accent);
        border: 1px solid var(--accent);
        font-weight: 600;
        font-size: 1rem; 
        line-height: 1.2; 
        letter-spacing: 0.05rem;
        color: var(--white) !important;
        cursor: pointer;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .btn:hover .btn:focus, .btn.focus { outline: none !important; background: var(--accent) !important; color: var(--white) !important; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .btn .text { position: relative; -webkit-transition: var(--transition-2); -moz-transition: var(--transition-2); -ms-transition: var(--transition-2); -o-transition: var(--transition-2); transition: var(--transition-2); }
    .btn .icon { font-size: 1rem; }
    .btn .icon.left { margin-right: 0.5rem; }
    .btn .loading-area { position: relative; }
    .btn .loading-area .text { font-weight: 500; margin-left: 0.625rem; }

    .btn-accent { color: var(--white) !important; background: var(--accent); border-color: var(--accent); }
    .btn-accent:hover, .btn-accent:focus { color: var(--accent) !important; background: transparent; border-color: var(--accent); }
/* ------------------------------------ end button ------------------------------------ */


/* ------------------------------------ modal ------------------------------------ */
    .modal-style .modal-content { border: 0; background: none; }
    .modal-style .modal-body { position: relative; overflow: hidden; border: none; background: var(--white); box-shadow: 0 0.25rem 1.875rem 0 rgba(0, 0, 0, 0.2); border-radius: 1.25rem; }
    .modal-style .modal-body .close { position: absolute; top: 1rem; right: 1rem; z-index: 10; font-size: 1.12rem; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .modal-body .close:hover { transform: scale(1.2); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .modal-title { font-weight: 500; font-size: 1.55rem; line-height: 1.3; letter-spacing: 0.02rem; color: var(--text); margin-bottom: 1.875rem; }

    .modal-style .modal-body.padd-md { padding: 1.25rem; }
    .modal-style .modal-body.padd-md .close { top: 0.938rem; right: 0.938rem; }
    .modal-style .modal-body.padd-lg { padding: 2.5rem; }
/* ------------------------------------ end modal ------------------------------------ */


/* ------------------------------------ start section ------------------------------------ */
    /* start section */
    .start-section { position: relative; overflow: hidden; width: 100%; height: 100vh; padding: 4.5rem 0; display: flex; align-items: center; justify-content: center; background: var(--background); }
    
    .start-section .bg-image { position: absolute; bottom: -3%; right: -5%; width: 50%; height: 90vh; }
    .start-section .bg-image:before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(120deg, rgba(246, 248, 250, 0.97) 25%, rgba(246, 248, 250, 0.5) 90%); z-index: 1; }
    .start-section .bg-image img { object-fit: cover; object-position: left top; width: 100%; height: 100%; z-index: 0; opacity: 0.4; }

    .start-section .inner { position: relative; z-index: 5; max-width: 680px; margin: auto; }

    .start-section .header { text-align: center; }
    .start-section .header img { object-fit: contain; max-width: 20rem; }

    .start-section .content { margin: 5rem auto; text-align: center; }
    .start-section .content .heading-area { margin-bottom: 3.5rem; }
    .start-section .content .heading-area .heading { font-weight: 600; font-size: 2.2rem; line-height: 1.1; letter-spacing: 0.02rem; color: #343959; margin-bottom: 0.5rem; }
    .start-section .content .heading-area .description { color: var(--text2); margin-bottom: 0; }

    .start-section .content .form-area { position: relative; }
    .start-section .content .form-area .control-label { font-weight: 500; font-size: 1.25rem; margin-bottom: 1rem; }
    .start-section .content .form-area .form-control { font-size: 1.25rem; line-height: 1; letter-spacing: 0.2rem; padding-left: 1.875rem; padding-right: 1.875rem; }

    .start-section .footer { text-align: center; }
    .start-section .footer p { font-weight: 300; font-size: 1rem; line-height: 150%; }
    .start-section .footer span { font-weight: 500; }

    .start-section.layanan .inner { max-width: 1200px; }
    .start-section.layanan .header { text-align: right; }
    .start-section.layanan .content { text-align: left; }
    .start-section.layanan .content .heading-area .heading { color: var(--color); }
    .start-section.layanan .content .heading-area .description { color: var(--text); }
    .start-section.layanan .content .layanan-area { position: relative; max-height: 53vh; overflow-y: auto; overflow-x: hidden; }
    .start-section.layanan .content .layanan-area .row div[class*="col-"] { margin-bottom: 1.65rem; }

    @media (max-width: 1200px) {
        .start-section .inner { max-width: 640px; }
    }
    @media(max-width: 580px) {
        .start-section .content .heading-area .heading { font-size: 2rem; }
    }


    /* .layanan-section { position: relative; background: var(--background); padding: 1.2rem 0 2rem 0; }
    .layanan-section .content { position: relative; text-align: center; max-width: 1100px; margin: auto; z-index: 5; }
    
    .layanan-section .content-header { padding-bottom: 55px; text-align: right; }
    .layanan-section .content .content-header img { max-width: 16rem; margin-bottom: 1.5rem; }
    .layanan-section .content-title { padding-bottom: 30px; text-align: left; }
    .layanan-section .content .content-title .heading { font-weight: 800; font-size: 1.8rem; line-height: 1.2; margin-bottom: 0.50rem; }
    .layanan-section .content .content-title .description { color: var(--text2); }
    .layanan-section .content .layanan-area { position: relative; } */


    .card-layanan {
        position: relative;
        display: block;
        background: var(--white);
        height: 100%;
        padding: 1.875rem;
        padding-right: 3.4rem;
        border: 1px solid var(--border);
        box-shadow: 0 1.25rem 1.25rem rgba(0, 0, 0, 0.03);
        border-radius: 2rem;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .card-layanan:hover { background: var(--accent-hover); border-color: var(--accent); -webkit-box-shadow: none; box-shadow: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .card-layanan:before { content: '\ea62'; font-family: 'LineIcons'; position: absolute; top: 0; bottom: 0; right: 1.875rem; margin: auto; display: flex; align-items: center; font-weight: bold; font-size: 1.25rem; color: var(--text); z-index: 3; }

    .card-layanan p { font-weight: 300; font-size: 1.25rem; line-height: 1.6; color: var(--text); margin: 0.625rem 0; }

    @media (max-width: 1200px) {
        .card-layanan p { margin: 0; }
    }


    /* .modal-style .modal-body .modal-data { margin: 20px 8px 20px 8px; font-family: var(--font1); color: var(--dark) !important; font-style: normal; }
    .modal-style .modal-body .modal-data label { font-weight: 600; font-size: 13px; line-height: 100%; }
    .modal-style .modal-body .modal-data p { font-weight: 300; font-size: 16px; line-height: 100%; } */

    .modal-data { position: relative; }
    .modal-data .data-item { position: relative; }
    .modal-data .data-item:not(:last-child) { margin-bottom: 1.25rem; }
    .modal-data .data-item .label { display: block; font-weight: 400; font-size: 0.95rem; line-height: 1.2; color: var(--text2); margin-bottom: 0.25rem; }
    .modal-data .data-item .value { display: block; font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--text); margin-bottom: 0; }

    .modal-data.style-2 .data-item .label { display: inline-block; width: 150px; flex-shrink: 0; font-weight: 500; font-size: 0.875rem; color: var(--text2); }
    .modal-data.style-2 .data-item .value { display: inline-block; width: calc(98% - 150px); text-align: right; font-weight: 600; font-size: 0.875rem; color: var(--text); }

    .modal-data.wider .data-item { padding: 0.313rem 0; }
    .modal-data.line .data-item:before { content: ''; position: absolute; left: 0; bottom: -0.625rem; width: 100%; height: 1px; background: var(--border); }
    .modal-data.line .data-item:last-child:before { opacity: 0; }

    @media(max-width: 992px) {
        .modal-data .data-item { margin-bottom: 1.25rem; }
        .modal-data.line .data-item:last-child:before { opacity: 1; }
    }


    .preview-doc { position: relative; padding: 1.875rem 0; font-family: var(--font2) !important; }
    .preview-doc .container { max-width: 21cm; margin: auto; }
    .preview-doc table.head { width: 100%; text-align: center; }
    .preview-doc .logo { width: 200px; }
    .preview-doc .logo img { object-fit: contain; width: 100%; max-height: 120px; max-width: 180px; }
    .preview-doc .title { width: calc(100% - 200px); }
    .preview-doc .content { margin-top: 10px; border-top: 2px solid #000000; }
    .preview-doc .content .c-title { text-align: center; padding: 20px 0; }
    .preview-doc .content .c-title h5 { text-transform: uppercase; text-decoration: underline; }
    .preview-doc .content .c-title h6 { margin-bottom: 0; }

    .preview-doc .content .c-first, 
    .preview-doc .content .c-second, 
    .preview-doc .content .c-first > *, 
    .preview-doc .content .c-second > * { 
        text-indent: 16px; font-size: 14px; line-height: 1.5 !important; 
    } 

    .preview-doc .content .c-info { padding: 1.25rem 0 1.25rem 40px; }
    .preview-doc .content .c-info table tr td { font-weight: 400; font-size: 14px; line-height: 1.3; color: #000000; letter-spacing: 0.02rem; margin-bottom: 0.25rem; }

    .preview-doc table.foot { width: 100%; margin-top: 20px; }
    .preview-doc table.foot tr td { width: 33.33%; text-align: center; text-align: center; padding: 5px 0; }
    .preview-doc table.foot tr:nth-child(1) td p { margin-bottom: 0; }
    .preview-doc table.foot tr:nth-child(3) td p:nth-child(1) { margin-bottom: 50px; }
    .preview-doc table.foot tr:nth-child(3) td p:nth-child(2) { text-decoration: underline; }

    .preview-doc .text-1 { font-weight: 600; font-size: 26px; line-height: 1.1; color: #000000; margin-bottom: 0.313rem; }
    .preview-doc .text-2 { font-weight: 600; font-size: 22px; line-height: 1.1; color: #000000; margin-bottom: 0.313rem; }
    .preview-doc p { font-weight: 400; font-size: 14px; line-height: 1.2; color: #000000; letter-spacing: 0.02rem; margin-bottom: 0.25rem; }

    .preview-doc .action { margin-bottom: 20px; text-align: right; }
    .preview-doc .action .btn { width: auto; }

    @media(max-width: 992px) {
        .preview-doc .logo { width: 150px; }
        .preview-doc .logo img { max-width: 150px; }
        .preview-doc .title { width: calc(100% - 150px); }
    }
    @media(max-width: 768px) {
        .preview-doc .logo img { max-height: 90px; }
    }
/* ------------------------------------ end section ------------------------------------ */