body,
html {
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: white;
    width: 70%;
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1000;
    border: 1px solid #ff69b4;
    /* pink */
    border-top: none;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

/* Untuk mendukung submenu posisi */
.dropdown-submenu {
    position: relative;
}

.dropdown-menu {
    background-color: transparent;
    border: none;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-top: -0.5rem;
    display: none;
    border-radius: 10px;
    background-color: transparent;
    border: none;
}

/* Tampilan tombol dropdown-item seperti di gambar */
.dropdown-menu .dropdown-item {
    background-color: #f770a0;
    color: #fff;
    border-radius: 20px;
    margin: 4px 10px;
    padding: 8px 16px;
    font-weight: 600;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #e86095;
}

/* Aktifkan submenu saat parent diklik */
.dropdown-submenu.show>.dropdown-menu {
    display: block;
}

.hero-pelayanan {
    width: 100%;
    /* max-width: 100; */
    min-height: 100vh;
    padding-top: 80px;
    /* background-color: black; */
}

.hero-pelayanan .box-text {
    position: absolute;
}

.hero-pelayanan .box-text span {
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-pelayanan .judul-pelayanan {
    background-color: #ff3d7e;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 30px;
    width: 40%;
}

.hero-pelayanan .judul-pelayanan span {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.hero-pelayanan .btn-whatsapp {
    background-color: #16cbb9;
    width: 60%;
    color: white;
    border-radius: 20px;
}

.hero-pelayanan .btn-whatsapp:hover {
    transform: translateY(-8px);
    transition: transform 0.3s ease-out;
}

.hero-pelayanan .box-hero {
    background-color: #ff3d7e;
    width: 100%;
    height: 70%;
    border-top-left-radius: 50px;
    position: absolute;
}

.hero-pelayanan .box-image {
    background-color: blue;
    width: 80%;
    height: 90%;
    border-top-left-radius: 50px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-left: 5px solid white;
}

.hero-pelayanan .box-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.layanan {
    width: 100%;
    margin-top: 100px;
}

.layanan .box-layanan {
    cursor: pointer;
}

.layanan .box-layanan:hover {
    background-color: #c5004f;
    border-radius: 20px;
    color: white;
}

.layanan .box-img {
    width: 150px;
    /*height: 150px;*/
    overflow: hidden;
}

.layanan .box-text .judul {
    font-size: 20px;
    font-weight: bold;
}

.layanan .box-img img {
    width: 100%;
    height: 100%;
    /*object-fit: cover;*/
}

.manfaat .box-manfaat {
    background-color: #ff3d7e;
    border-top-right-radius: 150px;
    width: 90%;
}

.manfaat .box-manfaat .box-img {
    width: 50%;
    height: 80%;
    overflow: hidden;
    border-top-right-radius: 50px;
}

.manfaat .box-manfaat .box-text {
    height: 100%;
    padding-top: 100px;
    max-width: 50%;
}

.manfaat .box-manfaat .box-text .judul {
    font-size: 30px;
    font-weight: bold;
    color: #1eeeda;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.manfaat .box-manfaat .box-text .konten {
    color: white;
    margin-top: 10px;
}

.manfaat .box-manfaat .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pemeriksaan {
    margin-top: 20px;
}

.pemeriksaan .box-text .judul {
    font-size: 30px;
    font-weight: bold;
    color: #c5004f;
}

.pemeriksaan .konten .box-konten {
    height: 350px;
}

.pemeriksaan .konten .box-konten .box-img {
    width: 100px;
    height: 100px;
    overflow: hidden;
}

.pemeriksaan .konten .box-konten .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pemeriksaan .box-kiri {
    background: linear-gradient(to bottom, #95e0d7, #22c6b6);
    width: 100px;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 20px;
    border-bottom-right-radius: 70px;
    border-top-right-radius: 70px;
}

.pemeriksaan .box-kanan {
    background: linear-gradient(to bottom, #95e0d7, #22c6b6);
    width: 180px;
    height: 80px;
    position: absolute;
    right: 0;
    top: 20px;
    border-bottom-left-radius: 70px;
    border-top-left-radius: 70px;
}

/* .galeri {
    background-color: red;
} */

.galeri .owl-carousel .item {
    background-color: red;
    height: 350px;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.galeri .owl-carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.harga .box-harga {
    background: linear-gradient(to bottom, #eb9fc3, #ff5e9e);
    width: 90%;
    border-radius: 30px;
}

.harga .box-harga .judul {
    font-size: 30px;
    font-weight: bold;
    color: #c5004f;
}

.harga .circle-top {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: absolute;
    top: -20px;
}

.harga .circle-bottom {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: white;
    position: absolute;
    bottom: -20px;
}

/* Page Tentang Dokter */
.hero-dokter {
    width: 100vw;
    max-width: 100vw;
    height: 100%;
}

.hero-dokter .img-dokter {
    width: 300px;
}

.hero-dokter .judul {
    font-size: 25px;
    color: #ea005e;
    font-weight: bold;
    text-shadow: 
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

.hero-dokter .nama-dokter {
    font-size: 40px;
    font-weight: bold;
    color: #16cbb9;
    margin-top: -10px;
    text-shadow: 
        -1px -1px 0 white,
         1px -1px 0 white,
        -1px  1px 0 white,
         1px  1px 0 white;
}

.hero-dokter .box-img {
    display: flex;
    justify-content: end;
    align-items: start;
    overflow: hidden;
    margin-top: 25px;
}

.hero-dokter .box-kanan {
    align-items: end !important;
}

.hero-dokter .box-text {
    width: 100%;
    height: 100%;
}

.hero-dokter .btn-back {
    background: linear-gradient(to bottom, #95e0d7, #22c6b6);
    border: none;
    width: 200px;
    color: white;
    border-radius: 50px;
}

/* Page Antrean */

.hero-antrean {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    position: relative;
}

/*.hero-antrean .box-right-top {*/
/*    position: absolute;*/
/*    width: 200px;*/
/*    height: 300px;*/
/*    background-color: #ff3d7e;*/
/*    top: 0;*/
/*    right: 5%;*/
/*    border-bottom-left-radius: 90px;*/
/*    border-bottom-right-radius: 90px;*/
/*    z-index: 10;*/
/*}*/

.hero-antrean .box-antrean {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    border-radius: 20px;
    /* position: absolute; */
}

.hero-antrean .box-text {
    width: 50%;
    border-bottom: 1px solid #ea005e;
    z-index: 99;
    position: relative;
}

.hero-antrean .box-text .judul {
    font-size: 30px;
    font-weight: bold;
    color: #ea005e;
}

.hero-antrean .box-text .sub-judul {
    font-size: 20px;
    color: #ea005e;
    margin-top: -10px;
}

.hero-antrean .box-antrean .text-rincian {
    font-size: 25px;
    font-weight: bold;
    color: #ea005e;
}

.hero-antrean .box-antrean .text-poli {
    font-weight: bold;
    color: #ea005e;
}

.hero-antrean .box-antrean .text-informasi {
    color: #ea005e;
}

.hero-antrean .box-antrean .text-antrean {
    color: #00a999;
    font-size: 30px;
    font-weight: bold;
}

.hero-antrean .box-antrean .text-antrean2 {
    color: #00a999;
    font-size: 20px;
    font-weight: bold;
}



.hero-antrean .box-antrean .box-right .box-img {
    width: 200px;
    height: 300px;
    overflow: hidden;
    border-radius: 90px;
}

.hero-antrean .box-antrean .box-right .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kata-mereka .btn-back,
.kata-mereka .btn-next {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #95e0d7, #22c6b6);
    border-radius: 50px;
    border: none;
    color: #ffff;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    padding: 16px;
}

.image-grid img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767px) {
    .hero-antrean .box-antrean .box-right .box-img {
        display: none;
    }
    
    .hero-dokter .box-img {
        justify-content: center;
        margin-top: 50px;
    }
    
    .hero-dokter .box-img img {
        height: 400px;
    }
    
    .hero-dokter .box-kanan {
        padding-top: 20px !important;
    }
}

@media (max-width: 540px) {
    .hero-pelayanan .btn-whatsapp {
        margin-bottom: -100px;
    }

    .navbar {
        width: 100%;
        border-radius: 0;
        background-color: white;
    }

    .hero-pelayanan .box-text span {
        font-size: 35px;
        font-weight: bold;
    }

    .manfaat .box-manfaat {
        flex-direction: column;
        align-items: start !important;
        padding-bottom: 20px !important;
    }

    .manfaat .box-manfaat .box-img {
        width: 80%;
        height: 80%;
        overflow: hidden;
        border-top-right-radius: 100px;
        margin-top: 70px;
    }

    .manfaat .box-manfaat .box-text {
        height: 100%;
        padding-top: 40px;
        max-width: 100%;
    }

    .pemeriksaan .box-kiri,
    .pemeriksaan .box-kanan {
        display: none;
    }

    .pemeriksaan .konten .box-konten {
        height: 200px;
        align-items: center !important;
    }

    /* page tentang dokter */

    .hero-dokter .box-kanan {
        align-items: start !important;
        padding-top: 10px !important;
    }

    /*.hero-dokter .judul,*/
    /*.hero-dokter .nama-dokter {*/
    /*    color: black;*/
    /*}*/

    .hero-dokter .box-text {
        padding: 0 !important;
    }

    .hero-antrean .box-text {
        width: 100%;
        border-bottom: 1px solid #000;
    }

    .hero-antrean .box-antrean .box-right .box-img {
        display: none;
    }

    .hero-antrean .box-right-top {
        display: none;
    }
    
    .hero-antrean .box-antrean .text-antrean {
        font-size: 20px;
    }
    
    .hero-antrean .box-antrean .text-antrean2 {
        font-size: 15px;
    }
}

@media (max-width: 344px) {
    .hero-dokter .nama-dokter {
        font-size: 33px;
    }
}