@media screen and (max-width : 922px){
    .input-cari .button-secondary {
        width: 120px;
        font-size: 14px;
    }

    .input-cari .button-primary {
        font-size: 24px;
    }
}

@media screen and (max-width : 576px){
    .hero-tagline h1{
        line-height: 52px;
    }

    .img-hero {
        width: 75%;
        height: auto;
    }

    h2 {
        font-size: 34px;
    }

    .sub-title {
        font-size: 16px;
    }

    .card-layanan {
        margin: 15px 0;
    }

    #search h2 {
        font-size: 42px;
        line-height: 52px;
    }

    #search p {
        font-size: 18px;
        line-height: 24px;
    }

    .input-cari .button-secondary {
        width: 50%;
        height: 60px;
        border-radius: 0;
    }

    .input-cari .button-primary {
        height: 60px;
        width: 30%;
        font-size: 20px;
        border-radius: 0 0 10px 0;
    }

    .input-cari .form-control {
        height: 60px !important;
    }

    .card {
        width: 100% !important; /* Pastikan card mengisi seluruh lebar layar */
        margin-bottom: 15px; /* Menambahkan jarak antar card */
        border-radius: 8px; /* Menambahkan border-radius untuk sudut yang lebih halus */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Menambahkan bayangan untuk kesan lebih modern */
        overflow: hidden; /* Menjaga agar elemen di dalam card tetap terpotong dengan baik */
        padding: 0; /* Menambahkan padding pada card */
    }

    /* Memastikan avatar juga responsif */
    .card .avatar {
        width: 100px; /* Mengatur ukuran gambar agar lebih kecil di perangkat kecil */
        height: 100px; /* Menyesuaikan tinggi gambar */
        margin-bottom: 10px; /* Memberikan jarak antara gambar dan teks */
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .cardku-body h4 {
        font-size: 16px; /* Mengatur ukuran font untuk nama dokter agar lebih kecil */
        text-align: center; /* Memusatkan teks nama dokter */
        font-weight: bold; /* Memberikan penekanan pada nama dokter */
    }

    .cardku-body p {
        font-size: 14px; /* Mengatur ukuran font deskripsi dalam card */
        text-align: center; /* Memusatkan teks deskripsi */
        margin: 0; /* Mengurangi jarak yang tidak perlu */
    }

    .cardku-body p span {
        display: block; /* Memastikan setiap span tampil dalam satu baris baru */
        margin-top: 5px; /* Memberikan jarak antar baris informasi */
    }

    .col-4 {
        width: 100%; /* Membuat kolom card memenuhi lebar layar pada perangkat kecil */
        padding-left: 0;
        padding-right: 0;
    }

    /* Mengatur tampilan yang lebih responsif untuk setiap baris jadwal */
    .card .cardku-body {
        padding: 10px; /* Menambahkan padding agar lebih nyaman dibaca */
    }

    /* Mengatur container atau wrapper card */
    .card-wrapper {
        display: block; /* Membuat setiap card tampil secara terpisah */
        width: 100%;
        padding: 10px; /* Memberikan padding di sekitar card */
        box-sizing: border-box; /* Menjamin padding tidak mengganggu lebar total */
    }
}


@media screen and (max-width : 350px){
    
}