.elementor-11 .elementor-element.elementor-element-cfb7052:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-cfb7052 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1C292A;}.elementor-11 .elementor-element.elementor-element-cfb7052{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-cfb7052 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-04ff922{--spacer-size:50px;}.elementor-11 .elementor-element.elementor-element-497f266:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-497f266 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1C292A;}.elementor-11 .elementor-element.elementor-element-497f266 > .elementor-container{max-width:800px;}.elementor-11 .elementor-element.elementor-element-497f266{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-497f266 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-11 .elementor-element.elementor-element-c43876a:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-c43876a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1C292A;}.elementor-11 .elementor-element.elementor-element-c43876a{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-c43876a > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-bfac7cb:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-bfac7cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1C292A;}.elementor-11 .elementor-element.elementor-element-bfac7cb{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-bfac7cb > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-66ded00{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-66ded00 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11 .elementor-element.elementor-element-627ed84:not(.elementor-motion-effects-element-type-background), .elementor-11 .elementor-element.elementor-element-627ed84 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1C292A;}.elementor-11 .elementor-element.elementor-element-627ed84{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11 .elementor-element.elementor-element-627ed84 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(max-width:767px){.elementor-11 .elementor-element.elementor-element-04ff922{--spacer-size:0px;}.elementor-11 .elementor-element.elementor-element-474c284 > .elementor-widget-container{--e-transform-scale:0.8;}}/* Start custom CSS for text-editor, class: .elementor-element-474c284 */.jo-hero-headline {
    font-size: 3.5rem;
    font-weight: 900;
    color: #FFFFFF; /* Putih Bersih */
    line-height: 1.2;
}

.jo-hero-tagline {
    font-size: 1.4rem;
    color: #B0C4DE; /* Abu-abu terang */
    max-width: 700px;
    margin: 20px auto 40px;
}

.highlight-text {
    color: #00FFFF; /* Neon Cyan */
    font-weight: 900;
}

@media (max-width: 767px) {
    .jo-hero-headline {
        font-size: 2.5rem;
    }
    .jo-hero-tagline {
        font-size: 1.1rem;
    }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-9326a94 */.jo-features-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 20px 0;
}

.jo-creative-feature-box {
    background: #1f2427; /* Charcoal Card */
    border-radius: 20px;
    border: 1px solid #374151;
    padding: 35px 20px;
    min-height: 280px;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.jo-creative-feature-box:hover {
    border-color: #00FFFF; /* Neon Cyan */
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.4);
}

.jo-creative-icon {
    display: flex;
    justify-content: center;
    margin: 0 auto 20px;
    color: #00FFFF; /* Neon Cyan */
    transition: transform 0.4s ease;
}

.jo-creative-feature-title {
    color: #FFFFFF; /* Putih Bersih */
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.jo-creative-feature-description {
    color: #B0C4DE; /* Abu-abu terang */
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .jo-features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .jo-features-container {
        grid-template-columns: 1fr;
        gap: 15px;
        display: flex;
        flex-direction: column;
    }
}

/* Untuk elemen ikon yang menggunakan Font Awesome (tag <i>) */
.jo-creative-icon i {
    font-size: 40px; /* Ukuran Ikon yang Jauh Lebih Besar (Sesuaikan dengan kebutuhan) */
    color: 51BDF5 /* Warna Merah Jocreative untuk Ikon */
}

/* Untuk jarak di bawah ikon */
.jo-creative-icon {
    margin-bottom: 15px; /* Jarak antara ikon dan judul */
    text-align: center; /* Untuk memastikan ikon berada di tengah */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3624a32 */<style>
    /* ------------------------------------------- */
    /* GLOBAL & BASE STYLING */
    /* ------------------------------------------- */
    body {
        min-height: 100vh;
        font-family: 'Arial', sans-serif;
        background-color: #1a1a2e; /* Latar Belakang Gelap Utama */
        margin: 0;
        padding: 0;
        color: #f0f8ff;
    }

    /* Grid Layout untuk Fitur & Layanan */
    .jo-grid {
        display: grid;
        /* Tata letak 2 kolom dengan lebar sama */
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto 50px auto; 
    }

    /* ------------------------------------------- */
    /* BLOCK FITUR KECIL (4 kotak di atas) */
    /* ------------------------------------------- */
    .jo-page-container {
        padding: 50px 20px 20px;
        background-color: #1a1a2e;
        font-family: 'Arial', sans-serif;
    }

    .jo-feature-card {
        background-color: #242440;
        padding: 20px;
        border-radius: 8px;
        color: #f0f8ff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    .jo-feature-card h3 {
        color: #8be9fd;
        margin-top: 0;
        font-size: 1.1em;
        font-weight: 600;
        min-height: 40px; 
    }
    .jo-feature-card p {
        font-size: 0.9em;
        line-height: 1.5;
        color: #cccccc;
    }

    /* ------------------------------------------- */
    /* BLOCK LAYANAN UTAMA (4 kotak besar di tengah) */
    /* ------------------------------------------- */
    .jo-service-card {
        background-color: #242440;
        border-radius: 8px;
        position: relative;
        overflow: hidden; 
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        display: flex;
        flex-direction: column;
        min-height: 300px; 
        transition: transform 0.3s;
    }

    .jo-service-card:hover {
        transform: translateY(-5px);
    }
    
    /* Aturan khusus untuk kartu ke-4 (Dokumenter) agar menyisakan 1 kolom kosong */
    .jo-service-card:nth-child(4) {
        grid-column: span 1; 
    }
    
    .jo-category-label {
        position: absolute;
        top: 0;
        right: 0;
        background-color: #0f4c75;
        color: white;
        padding: 5px 15px;
        font-size: 0.8em;
        font-weight: bold;
        border-bottom-left-radius: 8px;
        z-index: 10;
        text-transform: uppercase;
    }
    
    .jo-service-content {
        padding: 25px;
        flex-grow: 1;
    }

    .jo-scroll-content {
        max-height: 120px; 
        overflow-y: auto; 
        margin-bottom: 15px;
    }

    .jo-service-content h3.jo-main-title {
        color: #f0f8ff;
        margin: 0 0 5px 0;
        font-size: 1.4em;
        font-weight: 700;
    }
    
    .jo-service-content p {
        color: #cccccc;
        margin: 0 0 5px 0;
        font-size: 0.95em;
        line-height: 1.4;
    }

    .jo-service-tone {
        background-color: #1a1a2e;
        color: #ff4b5c;
        padding: 10px 25px;
        font-size: 0.9em;
        font-weight: 600;
        flex-shrink: 0; 
    }

    /* CSS SAMPLE AUDIO (HTML5 Audio Tag) */
    .jo-sample-audio {
        padding: 15px 25px 20px;
        background-color: #1a1a2e;
        flex-shrink: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .jo-sample-audio audio {
        width: 100%;
        max-width: 100%;
        height: 35px;
        border-radius: 5px;
        filter: invert(0.8) hue-rotate(180deg); /* Membuat kontrol audio terlihat terang di latar gelap */
    }

    /* ------------------------------------------- */
    /* FLOATING FAQ BOX & BUTTON (CS/Headset) */
    /* ------------------------------------------- */
    .floating-faq-box {
        position: fixed;
        bottom: 25px;
        right: 25px;
        width: 380px;
        height: 520px;
        background-color: #ffffff; /* Kotak FAQ Ceraah */
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
        overflow: hidden; 
        z-index: 99999;
        display: none; 
        flex-direction: column; 
        transition: all 0.3s ease-in-out;
        font-size: 15px;
        color: #333333;
    }

    .floating-faq-header {
        background-color: #3282b8;
        color: #ffffff;
        padding: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0; 
        font-weight: 700;
    }

    .floating-faq-title {
        margin: 0;
        font-size: 1.3em;
    }

    .close-faq-button {
        background: none;
        border: none;
        color: #ffffff;
        font-size: 30px;
        cursor: pointer;
        line-height: 1;
        padding: 0 5px 0 0;
        transition: color 0.2s;
    }

    .close-faq-button:hover {
        color: #ffdd57;
    }

    .jo-faq-container {
        padding: 15px;
        overflow-y: auto; 
        flex-grow: 1; 
        background-color: #f8f8f8;
    }
    
    .floating-faq-button {
        position: fixed;
        bottom: 25px;
        right: 25px;
        width: 65px;
        height: 65px;
        background-color: #0f4c75; 
        color: #ffffff;
        border: none;
        border-radius: 50%;
        font-size: 30px;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
        z-index: 100000; 
        transition: background-color 0.3s, transform 0.3s;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .floating-faq-button:hover {
        background-color: #3282b8;
        transform: scale(1.1);
    }

    /* FAQ Item Styling (Agar konten seperti tabel harga tampil penuh) */
    .jo-faq-item {
        border: 1px solid #dddddd;
        border-radius: 8px;
        margin-bottom: 12px;
        background-color: #ffffff;
        overflow: hidden;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    }

    .jo-faq-question {
        padding: 15px;
        font-weight: 600;
        color: #0f4c75;
        cursor: pointer;
        display: block;
        transition: background-color 0.2s;
    }

    .jo-faq-question:hover {
        background-color: #eaf6ff;
    }

    .jo-faq-answer {
        padding: 0 15px 0 15px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.7s ease-in-out, padding 0.7s ease-in-out;
        background-color: #ffffff;
        border-top: 1px solid #eeeeee;
        color: #444444;
    }

    .jo-faq-toggle:checked ~ .jo-faq-answer {
        max-height: 2000px; /* Nilai besar agar semua konten tabel terlihat */
        padding-bottom: 15px;
    }

    .jo-faq-toggle {
        display: none;
    }

    .jo-faq-price-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
        font-size: 0.9em;
    }

    .jo-faq-price-table th, .jo-faq-price-table td {
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
        color: #333333;
    }

    .jo-faq-price-table thead th {
        background-color: #3282b8;
        color: #ffffff;
    }

    /* ------------------------------------------- */
    /* FOOTER COPYRIGHT */
    /* ------------------------------------------- */
    .jo-footer {
        width: 100%;
        padding: 20px 0;
        background-color: #1a1a2e; 
        color: #f0f8ff; 
        text-align: center;
        font-family: 'Arial', sans-serif;
        font-size: 0.9em;
        margin-top: 50px; 
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .jo-footer p {
        margin: 0;
        padding: 0;
    }

    .jo-footer a {
        color: #8be9fd;
        text-decoration: none;
        transition: color 0.3s;
    }

    .jo-footer a:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    /* ------------------------------------------- */
    /* MEDIA QUERIES (RESPONSIVE) */
    /* ------------------------------------------- */
    @media (max-width: 600px) {
        .jo-grid {
            /* Di layar kecil, semua menjadi 1 kolom penuh */
            grid-template-columns: 1fr;
            gap: 20px;
            margin-bottom: 30px;
        }
        .jo-service-card:nth-child(4) {
            /* Di mobile, batalkan aturan 2 kolom */
            grid-column: span 1;
        }
        
        .floating-faq-box {
            width: 90%;
            right: 5%;
            height: 80vh;
            bottom: 15px;
        }
        .floating-faq-button {
            bottom: 15px;
            right: 15px;
        }
    }
</style>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-1b633a7 */.jo-contact-card {
    /* Background Card: Charcoal */
    background-color: #1f2427; 
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 25px; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.jo-contact-heading {
    /* Judul: Putih Bersih */
    color: #FFFFFF; 
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 10px;
}

.jo-contact-item {
    display: flex;
    align-items: flex-start; /* Mengatur alignment ke atas untuk teks multi-baris */
    margin-bottom: 15px;
}

.jo-contact-icon-wrapper {
    /* Ikon: Neon Cyan */
    color: #00FFFF; 
    margin-right: 15px;
    padding: 8px;
    /* Latar belakang ikon: Neon Cyan transparan */
    background-color: rgba(0, 255, 255, 0.1); 
    border-radius: 50%;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Mencegah ikon menyusut */
}

.jo-contact-text a, .jo-contact-value {
    /* Value Kontak (Email/Nomor): Putih Bersih */
    color: #FFFFFF; 
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.4;
}

.jo-contact-text a:hover {
    /* Hover link: Neon Cyan */
    color: #00FFFF; 
}

.jo-contact-label, .jo-operational-hours p {
    /* Label dan Jam Operasional: Abu-abu terang */
    color: #B0C4DE;
    font-size: 0.95rem;
    line-height: 1.6;
    display: block; /* Memastikan label di baris terpisah */
}/* End custom CSS */