@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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body {
    max-width: 650px;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    
}

.owl-theme .owl-nav.disabled+.owl-dots {
    display: none;
}

main {
    max-width: 100%;
    overflow-y: scroll;
    height: 100vh;
}

.content--home {
    background-color: #F1F7FC;
    padding-bottom: 100px;
}

h1, h2, h3, h4, h5, p {
    margin: 0;
}

/* 
    =================
        CARD 
    =================
*/

.content--card{
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
}

/* 
    =================
        HEADER 
    =================
*/

header {
    background-color: #fff;
}

.title {
    font-size: 32px;
    font-weight: bold;
    text-align: center;
    padding: 15px 0px;
    border-bottom: 1px solid #dedee0;
}

.menu-tab {
    justify-content: space-between;
    padding: 10px 0px;
}

.nav {
    flex-wrap: nowrap;
}

.nav-pills .nav-link {
    color: #000;
    border-radius: 0px;
    font-size: 15px;
    padding: 8px 10px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #000;
    background: none;
    border-bottom: 1px solid #1774E8;
    font-weight: bold;
}

/* 
    =================
        CONTENT PROFIL 
    =================
*/

.wraper--content--profil , 
.wrapper--content--jp,
.container--artikel, 
.container--disc {
    margin: 0px 10px;
}

.content--intro .switch {
    text-align: center;
}

.wrapper--intro--profil {
    display: grid;
    /* align-items: center; */
    align-items: start;
    grid-template-columns: 10% 90%;
    margin-bottom: 10px;
}

.wraper--content--profil .wrapper--intro--profil .info-clinic {
    display: flex;
    align-items: center;
    margin-left: 15px;
}

.wraper--content--profil .wrapper--intro--profil .title--clinic {
    font-weight: bold;
    font-size: 28px;
}

.wraper--content--profil .wrapper--intro--profil .info-clinic span {
    font-weight: bold;
    font-size: 16px;
    padding: 5px;
    color: #fff;
    background-color: #DAB76E;
    border-radius: 4px;
    margin-left: 7px;
}

.wraper--content--profil .content--teks-intro {
    margin-bottom: 15px;
}

.content--desc-keunggulan ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* align-items: center; */
    padding: 0px;
}

.content--desc-keunggulan ul li {
    list-style-type: none;
}

.content--desc-keunggulan ul li:nth-child(1) {
    font-weight: bold;
}

/* 
    =================
        CONTENT INFORMATION 
    =================
*/

.wraper--content--profil .content--information .title--information,
.wraper--content--profil .content--information .title--lingkungan, 
.wraper--content--profil .content--information .title--keunggulan {
    font-weight: bold;
    margin: 10px 0px;
}

.wraper--content--profil .content--information img {
    width: 100%;
}

.wraper--content--profil .content--information .keunggualan-alat img {
    height: 100%;
    object-fit: cover;
}

.wraper--content--profil .content--information .wrapper--content--teks--information {
    display: grid;
    grid-template-columns: 30% 67%;
    gap: 15px;
}

.wraper--content--profil .content--information .keunggualan-alat .penjelasan--alat h3 {
    font-weight: bold;
    font-size: 18px;
}

.wraper--content--profil .content--information .keunggualan-alat .penjelasan--alat span {
    color: #888c97;
}

.wraper--content--profil .content--information .top--title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wraper--content--profil .content--information .top--title a {
    color: #888c97;
    text-decoration: none;
}

/* 
    =================
        GAMBAR LINGKUNGAN KLINIK
    =================
*/
.home--lingkungan figcaption {
    text-transform: capitalize;
    font-weight: bold;
}


/* 
    =================
        CONTENT JENIS PENYAKIT 
    =================
*/

.wrapper--content--jp .wrapper--top--title--jp {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.wrapper--content--jp .wrapper--top--title--jp a, 
.wrapper--title--top a {
    color: #888c97;
    text-decoration: none;
}

.wrapper--content--jp .wrapper--jp {
    display: flex;
    gap: 15px;
    text-align: center;
    margin: 10px 0px;
}

.wrapper--top--title--jp h3, 
.wrapper--title--top h3 {
    color: #000;
    font-weight: bold;
}

.wrapper--content--jp .wrapper--jp a {
    text-decoration: none
}

.wrapper--content--jp .wrapper--jp .jp--left {
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #86D1FB; */
    padding: 15px;
    width: 30%;
    border-radius: 10px;
    color: #fff;
}

.wrapper--content--jp .wrapper--jp .andrologi {
    background: linear-gradient(50deg, #92B9FC, #86D1FB);
}

.wrapper--content--jp .wrapper--jp .ginekologi {
    background: linear-gradient(50deg, #99ABEB, #ACC6F9);
}

.wrapper--content--jp .wrapper--jp .jp--right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 70%;
}

.wrapper--content--jp .wrapper--jp .jp--right a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    padding: 15px;
    background-color: #F4F6FB;
    border-radius: 10px;
}

.img--1, 
.wrapper--content--konsul {
    margin: 10px;
}

.img--1 img {
    border-radius: 10px;
}

/* 
    =================
        ARTIKEL 
    =================
*/

.blog--post {
    margin: 15px 0px;
}

.short--post {
    text-decoration: none;
    /* color: #000; */
}

.short--post:hover {
    text-decoration: underline;
    color: #000;
}

.blog--post .post--title {
    text-transform: capitalize;
    font-size: 20px;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn--konsul {
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #F4F6FB;
    color: #2F69F9;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 15px;
    text-transform: uppercase;
    margin: 10px 0px;
}

/* 
    =================
        CONTENT KONSULTASI 
    =================
*/

.wrapper--content--konsul .wrapper-konsul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.wrapper--content--konsul .wrapper-konsul .konsul-left {
    border-right: 2px solid #eee;
    padding: 10px;
}

.wrapper--content--konsul .wrapper-konsul img {
    width: 80px;
    height: 80px;
}

.wrapper--content--konsul .wrapper-konsul a {
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
}

.wrapper--content--konsul .wrapper-konsul h5 {
    font-weight: bold;
}

.content--penyakit {
    padding: 15px;
}

.content--penyakit .title--penyakit, 
.title--keutungan {
    margin: 15px 0px;
    font-weight: bold;
    /* color: #6e3a08; */
}

.wrapper--content--penyakit {
    display: grid;
    grid-template-columns: auto auto auto;
    /* align-items: center; */
    text-align: center;
    gap: 10px;
}

.wrapper--content--penyakit a{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #000;
    background-color: #F4F6FB;
    padding: 15px;
}

.wrapper--lingkungan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.tombol-chat {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    border-top: 1px solid #dedee0;
    width: 100%;
    max-width: 41rem;
}

.wrapper--fitur--chat {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.83em 0% 0.7em;
    background-color: #fff;
    text-align: center;
}

.wrapper--fitur--chat a {
    text-decoration: none;
    color: #000;
}

.wrapper--fitur--chat .hubungi a, 
.wrapper--fitur--chat .konsultai-grat a{
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
}

.wrapper--fitur--chat .hubungi a {
    background-color: #5689FE;
}

.wrapper--fitur--chat .konsultai-grat a {
    background-color: #2F69F9;
}

/* 
    =================
        CONTENT DISKON 
    =================
*/

.container--disc .wrapper--content--disc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0px;
}

.container--disc .wrapper--content--disc p:first-child {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.container--disc .wrapper--content--disc p:nth-child(2) {
    font-weight: bold;
}
.container--disc .wrapper--content--disc a {
    text-decoration: none;
    text-align: center;
    background-color: #F4F6FB;
    color: #2F69F9;
    font-weight: bold;
    padding: 10px 15px;
}

/* 
    =================
        TAB KEUNTUNGAN 
    =================
*/

.content--keuntungan, 
.content--lingkungan, 
.content--penyakit {
    padding: 15px 15px 100px 15px;
}

.content--keuntungan figcaption {
    text-transform: capitalize;
    font-weight: bold;
    margin: 15px 0px;
}

.float {
    width: 80px;
    height: 80px;
    position: fixed;
    right: 18%;
    top: 50%;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .float {
        right: 0;
        top: 70%;
    }
}

@media screen and (max-width: 576px) {
    .title {
        font-size: 24px;
    }

    .menu-tab {
        overflow-x: scroll;
    }

    .wrapper--intro--profil {
        grid-template-columns: 15% 85%;
    }

    .nav-pills .nav-link, 
    .wrapper--content--konsul .wrapper-konsul h5, 
    .wraper--content--profil .content--teks-intro {
        font-size: 14px;
    }

    .wrapper--content--jp .wrapper--jp, 
    .wrapper--content--penyakit a {
        font-size: 12px;
    }

    .wraper--content--profil .content--information .wrapper--content--teks--information {
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .wrapper--content--jp .wrapper--jp, 
    .wrapper--content--jp .wrapper--jp .jp--right {
        gap: 5px;
    }

    .wrapper--content--konsul .wrapper-konsul img {
        width: 40px;
        height: 40px;
    }
    .wrapper--lingkungan {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 480px) {
    .wrapper--content--jp .wrapper--jp .jp--right {
        grid-template-columns: 49% 49%;
    }
    .wraper--content--profil .wrapper--intro--profil .title--clinic {
        font-size: 20px;
    }
    .home--lingkungan figcaption {
        font-size: 13px;
    }
    .wraper--content--profil .wrapper--intro--profil .info-clinic span {
        font-size: 10px;
    }
    .container--disc .wrapper--content--disc, 
    .content--desc-keunggulan ul li, 
    .blog--post .post--title, 
    .btn--konsul {
        font-size: 14px;
    }

    .wrapper--top--title--jp h3,
    .wrapper--title--top h3 {
        font-size: 18px;
    }

    .wrapper--content--jp .wrapper--top--title--jp a, 
    .wrapper--content--konsul .wrapper-konsul h5, 
    .wrapper--fitur--chat, 
    .wrapper--title--top a {
        font-size: 12px;
    }

    .wrapper--fitur--chat .hubungi a, 
    .wrapper--fitur--chat .konsultai-grat a {
        padding: 10px;
    }

    .wrapper--content--penyakit {
        grid-template-columns: auto auto;
        gap: 5px;
    }
}

@media screen and (max-width: 340px) {
    .wraper--content--profil .wrapper--intro--profil .title--clinic {
        flex-wrap: wrap;
        font-size: 16px;
    }

    .blog--post .post--title {
        font-size: 12px;
    }

    .blog--post img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wraper--content--profil .wrapper--intro--profil .info-clinic span {
        font-size: 12px;
    }
    .wrapper--content--penyakit {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 300px) {
    .wraper--content--profil .wrapper--intro--profil .title--clinic {
        font-size: 14px;
    }
    .wraper--content--profil .wrapper--intro--profil .info-clinic span {
        font-size: 10px;
    }
    .wrapper--content--jp .wrapper--jp {
        flex-direction: column;
    }

    .wrapper--content--jp .wrapper--jp .jp--left, 
    .wrapper--content--jp .wrapper--jp .jp--right {
        width: 100%;
    }
}