/* Styling untuk Kartu Layanan Baru */
    /* Ganti CSS Anda dengan blok ini */

/* ======================================================= */
/* GANTI SEMUA CSS SERVICE CARD ANDA DENGAN BLOK DI BAWAH INI */
/* ======================================================= */
/* ================================================== */
/* GANTI SEMUA CSS SERVICE-CARD ANDA DENGAN BLOK INI  */
/* ================================================== */

/* Container utama untuk card */
.services .service-card {
    background-color: #ffffff;
    border-radius: 16px; /* Sudut yang lebih tumpul */
    border: 1px solid #eef2f7; /* Garis tepi yang sangat halus */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Shadow yang lebih halus */
    overflow: hidden; /* SANGAT PENTING: agar sudut gambar ikut membulat */
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-bottom: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Container untuk gambar */
.services .service-card-image {
    height: 180px; /* Tinggi gambar dibuat tetap agar semua card seragam. Sesuaikan jika perlu. */
    overflow: hidden;
}

/* Pengaturan untuk gambar di dalam card */
.services .service-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* KUNCI: Membuat gambar mengisi penuh area tanpa distorsi */
}

/* Area konten di bawah gambar */
.services .service-card-content {
    padding: 24px;
    text-align: start; /* Membuat teks di tengah */
    flex-grow: 1;
}

/* Judul fitur */
.services .service-card-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748; /* Warna teks sedikit lebih gelap untuk kontras */
    margin: 0; /* Menghilangkan margin default dari h3 */
}

/* Sembunyikan deskripsi paragraf dan tombol agar sesuai gambar */
/* CSS BARU (BENAR) */
.services .service-card-action {
    display: none; /* Hanya sembunyikan tombol jika tidak diperlukan */
}

    .btn-outline {
        background-color: transparent !important;
        border: 2px solid #3a94b7ff !important;
        color: #3a94b7ff !important;
        font-weight: 600;
        padding: 10px 20px;
    }

    .btn-outline:hover {
        background-color: #3a94b7ff !important;
        color: #fff !important;
    }

    .subfeature-intro {
        padding: 40px 15px 30px 15px;
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
        margin-bottom: 30px;
    }

    .subfeature-intro h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .subfeature-intro p {
        font-size: 16px;
        line-height: 1.7;
        color: #555;
    }

    /* ======================================================= */
    /* ===== CSS POPUP MODAL (DENGAN NAMA CLASS BARU) ===== */
    /* ======================================================= */
    /* Backdrop */
    .custom-modal-backdrop {
        position: fixed;
        inset: 0;
        /* top:0; right:0; bottom:0; left:0 */
        background: rgba(0, 0, 0, .7);
        z-index: 1050;

        /* tidak perlu flex; biarkan konten yang self-centered */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .custom-modal-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Konten modal: selalu center ke viewport */
    .custom-modal-content {
        position: fixed;
        /* <- kunci: lepas dari flow/container */
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(.96);
        background: #fff;
        padding: 2rem;
        border-radius: .75rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .2);
        width: 560px;
        max-width: 90vw;

        /* kalau tinggi form panjang, tetap muat layar */
        max-height: calc(100vh - 40px);
        overflow: auto;

        opacity: 0;
        transition: transform .25s ease-out, opacity .25s ease-out;
    }

    .custom-modal-backdrop.show .custom-modal-content {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* tombol X tetap di posisi benar */
    .modal-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.75rem;
        line-height: 1;
        cursor: pointer;
        color: #6b7280;
    }



    .custom-modal-content h2 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-family: 'Poppins', sans-serif;
    }

    .custom-modal-content p {
        text-align: center;
        margin-bottom: 1.5rem;
        color: #666;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        display: block;
        text-align: left;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: .25rem;
    }

    .form-group input {
        width: 100%;
        padding: .75rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: .5rem;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
    }

    .success-modal .custom-modal-content {
        width: 400px;
        text-align: center;
    }

    .success-modal .custom-modal-content i.bx.bxs-check-circle {
        font-size: 4rem;
        color: #10B981;
    }

    .open-modal-button {
        cursor: pointer;
    }

    /* ======================================================= */
    /* ===== CSS UNTUK FORMULIR TESTIMONI [DIPERBAIKI] ===== */
    /* ======================================================= */
    .testimonial-form-container {
        max-width: 700px;
        margin: 0 auto;
        text-align: left;
    }

    #addTestimonialForm .form-group {
        margin-bottom: 15px;
        /* Sedikit penyesuaian margin */
    }

    #addTestimonialForm .form-group label {
        color: #555;
        font-weight: 600;
        margin-bottom: 5px;
    }

    #addTestimonialForm input[type="text"],
    #addTestimonialForm textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        background-color: #fff;
        transition: border-color 0.3s, box-shadow 0.3s;
    }

    #addTestimonialForm input[type="text"]:focus,
    #addTestimonialForm textarea:focus {
        outline: none;
        border-color: #3a94b7ff;
        box-shadow: 0 0 0 3px rgba(58, 148, 183, 0.2);
    }

    #addTestimonialForm textarea {
        resize: vertical;
        min-height: 100px;
    }

    #addTestimonialForm .form-checkbox {
        display: flex;
        align-items: center;
        margin-top: 20px;
        cursor: pointer;
    }

    #addTestimonialForm .form-checkbox label {
        position: relative;
        padding-left: 30px;
        cursor: pointer;
        user-select: none;
        margin-bottom: 0;
        font-weight: 500;
        font-size: 14px;
        color: #666;
    }

    #addTestimonialForm .form-checkbox input[type="checkbox"] {
        display: none;
    }

    #addTestimonialForm .form-checkbox label::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 4px;
        background-color: transparent;
        transition: background-color 0.2s, border-color 0.2s;
    }

    #addTestimonialForm .form-checkbox label::after {
        content: '\2713';
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #fff;
        opacity: 0;
        transition: opacity 0.2s;
    }

    #addTestimonialForm .form-checkbox input[type="checkbox"]:checked+label::before {
        background-color: #3a94b7ff;
        border-color: #3a94b7ff;
    }

    #addTestimonialForm .form-checkbox input[type="checkbox"]:checked+label::after {
        opacity: 1;
    }

    #addTestimonialForm .btn-action {
        width: auto;
        padding: 12px 30px;
        margin-top: 20px;
    }

    /* ===== CSS untuk Fitur Unggulan Horizontal Scroll ===== */
    #features-wrapper.scrollable {
        overflow-x: auto;
        padding-bottom: 20px;
        margin-bottom: -20px;
    }

    /* bikin container jadi deret card */
    #features-container.cards-row {
        display: flex;
        gap: 16px;
    }

    /* aktifkan scroll horizontal saat perlu */
    #features-container.hscroll {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* pastikan tiap card tidak mengecil & punya lebar tetap */
    #features-container .col-md-6,
    #features-container .col-sm-6 {
        flex: 0 0 auto;
        width: 640px;
        /* sesuaikan */
    }

    /* berjaga-jaga kalau parent memotong overflow */
    #features-wrapper {
        overflow: visible;
    }

    /* opsional: scrollbar style */
    #features-container.hscroll::-webkit-scrollbar {
        height: 8px;
    }

    #features-container.hscroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 4px;
    }


    /* Sembunyikan scrollbar untuk tampilan lebih bersih */
    #features-wrapper.scrollable {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    #features-wrapper.scrollable::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, and Opera */
    }

    #features-wrapper.scrollable #features-container.row {
        width: fit-content;
        /* Biarkan lebar container menyesuaikan isinya */
        flex-wrap: nowrap;
        margin: 0;
    }

    #features-wrapper.scrollable #features-container>div[class*="col-"] {
        flex-shrink: 0;
        margin-bottom: 0;
    }

    /* Atur lebar kartu untuk berbagai ukuran layar */
    @media (min-width: 992px) {
        #features-wrapper.scrollable #features-container>.col-md-4 {
            width: 360px;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        #features-wrapper.scrollable #features-container>.col-sm-6 {
            width: 340px;
        }
    }

    @media (max-width: 767px) {
        #features-wrapper.scrollable #features-container>div[class*="col-"] {
            width: 80vw;
            max-width: 340px;
        }
    }