:root {
    --color-primary: #C89AA2;
    --color-secondary: #DFC5CA;
    --primary-dark: #010101;
    --secondary-dark: #761586;
    --primary-hover: #df6703;
    --rgba-primary-1: rgba(252, 128, 25, 0.1);
    --rgba-primary-2: rgba(252, 128, 25, 0.2);
    --rgba-primary-3: rgba(252, 128, 25, 0.3);
    --rgba-primary-4: rgba(252, 128, 25, 0.4);
    --rgba-primary-5: rgba(252, 128, 25, 0.5);
    --rgba-primary-6: rgba(252, 128, 25, 0.6);
    --rgba-primary-7: rgba(252, 128, 25, 0.7);
    --rgba-primary-8: rgba(252, 128, 25, 0.8);
    --rgba-primary-9: rgba(252, 128, 25, 0.9);
    --rgba-secondary-1: rgba(157, 28, 178, 0.1);
    --rgba-secondary-2: rgba(157, 28, 178, 0.2);
    --rgba-secondary-3: rgba(157, 28, 178, 0.3);
    --rgba-secondary-4: rgba(157, 28, 178, 0.4);
    --rgba-secondary-5: rgba(157, 28, 178, 0.5);
    --rgba-secondary-6: rgba(157, 28, 178, 0.6);
    --rgba-secondary-7: rgba(157, 28, 178, 0.7);
    --rgba-secondary-8: rgba(157, 28, 178, 0.8);
    --rgba-secondary-9: rgba(157, 28, 178, 0.9);
    --font-family-base: Roboto, sans-serif;
    --font-family-title: Roboto, sans-serif;
    --title: #3D4152; 
}

/*font*/
@font-face {
  font-family: 'bludhaven';
  src: URL('../../../assets/frontend/font/BLUDHAVEN.ttf') format('truetype');
}


/*--------------------------------------------------------------
# BUTTON
--------------------------------------------------------------*/

.btn-primary {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 20px !important;
    padding: 0px 20px;
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(254, 177, 71, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-oren.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .primary-oren.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(254, 177, 71, 0.5);
}


.btn-tokopedia{
    color: #fff;
    background-color: #5fb74eab;
    border-color: #5fb74e;
    border-radius: 10px !important;
    height: 50%;
    width: 100%;
    padding: 20px 20px;
    font-size: 200px;
}

.btn-tokopedia:hover{
    color: #fff;
    background-color: #ffffff;
    border-color: #5fb74e;
    /*border-radius: 20px !important;*/
    height: 50%;
    width: 100%;
    padding: 20px 20px;
    font-size: 200px;
}

.btn-shopee{
    color: #fff;
    background-color: #ee4e2cad;
    border-color: #ee4e2cad;
    border-radius: 10px !important;
    height: 50%;
    width: 100%;
    padding: 20px 20px;
    font-size: 200px;
}


.btn-shopee:hover{
    color: #fff;
    background-color: #ffffff;
    border-color: #ee4e2ced;
    /*border-radius: 20px !important;*/
    height: 50%;
    width: 100%;
    padding: 20px 20px;
    font-size: 200px;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    height: 90px;
    transition: all 0.5s;
    z-index: 997;
    transition: all 0.5s;
    padding: 15px 0;
    /*background: #fff;*/
    /*background: #feb147;*/
    /*box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);*/
    background-image: url('../../../assets/frontend/images/bg_header.png'); 
}

#header .logo h1 {
  font-size: 30px;
  margin: 0;
  padding: 6px 0;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 2px;
}

#header .logo h1 a, #header .logo h1 a:hover {
  color: #7a6960;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 40px;
}

#main {
  margin-top: 72px;
}



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
.nav-menu, .nav-menu * {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu > ul > li {
    position: relative;
    white-space: nowrap;
    float: left;
}

.nav-menu a {
    display: block;
    position: relative;
    color: var(--primary-dark);
    padding: 15px 20px;
    transition: 0.3s;
    letter-spacing: 2.5px;
    font-size: 15px;
    font-family: 'Montserrat', sans-serif;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
    color: var(--color-primary);
    text-decoration: none;
}

.nav-menu .get-started a {
  background: #eb5d1e;
  color: #fff;
  border-radius: 50px;
  margin: 0 15px;
  padding: 10px 25px;
}

.nav-menu .get-started a:hover {
  background: #ee7843;
  color: #fff;
}

.nav-menu .drop-down ul {
  display: block;
  position: absolute;
  left: 0;
  top: calc(100% - 30px);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  padding: 10px 0;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: ease all 0.3s;
}

.nav-menu .drop-down:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.nav-menu .drop-down li {
  min-width: 180px;
  position: relative;
}

.nav-menu .drop-down ul a {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #3c1300;
}

.nav-menu .drop-down ul a:hover, .nav-menu .drop-down ul .active > a, .nav-menu .drop-down ul li:hover > a {
  color: #eb5d1e;
}

.nav-menu .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 5px;
}

.nav-menu .drop-down .drop-down ul {
  top: 0;
  left: calc(100% - 30px);
}

.nav-menu .drop-down .drop-down:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
}

.nav-menu .drop-down .drop-down > a {
  padding-right: 35px;
}

.nav-menu .drop-down .drop-down > a:after {
  content: "\eaa0";
  font-family: IcoFont;
  position: absolute;
  right: 15px;
}

@media (max-width: 1366px) {
  .nav-menu .drop-down .drop-down ul {
    left: -90%;
  }
  .nav-menu .drop-down .drop-down:hover > ul {
    left: -100%;
  }
  .nav-menu .drop-down .drop-down > a:after {
    content: "\ea9d";
  }
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 9999;
  overflow-y: auto;
  left: -260px;
  width: 260px;
  padding-top: 18px;
  background: var(--color-primary);
  transition: 0.4s;
}

.mobile-nav * {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav a {
  display: block;
  position: relative;
  color: black;
  padding: 10px 20px;
  font-weight: 500;
  transition: 0.3s;
}

.mobile-nav a:hover, .mobile-nav .active > a, .mobile-nav li:hover > a {
  color: #f39e7a;
  text-decoration: none;
}

.mobile-nav .get-started a {
  background: #eb5d1e;
  color: #fff;
  border-radius: 50px;
  margin: 15px;
  padding: 10px 25px;
}

.mobile-nav .get-started a:hover {
  background: #ee7843;
  color: #fff;
}

.mobile-nav .drop-down > a:after {
  content: "\ea99";
  font-family: IcoFont;
  padding-left: 10px;
  position: absolute;
  right: 15px;
}

.mobile-nav .active.drop-down > a:after {
  content: "\eaa0";
}

.mobile-nav .drop-down > a {
  padding-right: 35px;
}

.mobile-nav .drop-down ul {
  display: none;
  overflow: hidden;
}

.mobile-nav .drop-down li {
  padding-left: 20px;
}

.mobile-nav-toggle {
  position: fixed;
  right: 15px;
  top: 22px;
  z-index: 9998;
  border: 0;
  background: none;
  font-size: 24px;
  transition: all 0.4s;
  outline: none !important;
  line-height: 1;
  cursor: pointer;
  text-align: right;
}

.mobile-nav-toggle i {
  color: #7a6960;
}

.mobile-nav-overly {
  width: 100%;
  height: 100%;
  z-index: 9997;
  top: 0;
  left: 0;
  position: fixed;
  background: rgba(78, 64, 57, 0.9);
  overflow: hidden;
  display: none;
}

.mobile-nav-active {
  overflow: hidden;
}

.mobile-nav-active .mobile-nav {
  left: 0;
}

.mobile-nav-active .mobile-nav-toggle i {
  color: #fff;
}



/*EXTRA ALL*/

.title-200{
  font-weight: 200;
}

.card-shadow{
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
  border-radius: 7px; 
  margin-right: -7px;
  margin-left: -7px; height: 100%
}

.img-valign-middle{
  display: inline-block; 
  vertical-align: middle; 
  height: 100%
}

.shadow-5-5-10{
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); 
  border-radius: 8px;
}

.shadow-1-1-5{
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
  border-radius: 7px; 
  margin-right: -7px;
  margin-left: -7px; 
  height: 100%
}

.shadow-3-3-10{
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2)
}

.page-item.active .page-link{
  background-color: #feb147;
  border-color: #feb147;
}

.pagination .page-link{
  color: #feb147;
}

.pagination .page-link:active{
  box-shadow: none;
}




/*=================================================*/
/*===================== INDEX =====================*/
/*=================================================*/

section{
    padding-top: 60px;
    padding-bottom: 30px;
}

section h2{
    color: var(--color-primary);
    font-size: 40px;
    font-family: 'bludhaven' !important;
}

/*BANNER*/

#banner-index{
    /*background-image: url('../../../assets/frontend/images/home/home.jpg'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height:100vh;  /* responsive height */
}

#banner-index .title-banner{
  padding-top: 10%;
}

#banner-index .title-banner span{
  color: #feb147; 
  font-size: 450%; 
  font-family: 'Montserrat', sans-serif;
}

#banner-index .title-banner p{
  font-size: 120%;
}


/*ABOUT*/

#about img.img_dr_main{
    justify-content: center;
    margin: auto;
    display: block;
    width: 100%;
  	border-radius:5px;
    /*background-color: red;*/
}

#about img.img_dr_galery{
    display: inline-flex;
    justify-content: center;
    height: 130px;
    width: 130px;
    margin-bottom: 5px;
  	border-radius:5px;
    /*background-color: yellow;*/
}

#about .#banner_img{
    justify-content: center;
    /*background-color: blue;*/
}

#about .sosmed_dr{
    text-align: center;
    color: var(--color-primary);
}

#about .dr_name{
    text-align: center;
    color: var(--color-primary);
    font-size: 17px;
    font-weight: bold;
}

#about .bio_dr{
    justify-content: center;
    text-align: center;
}

#about .bio_dr h3{
    color: var(--color-secondary);
    /*font-family: 'Montserrat', sans-serif;*/
    font-family: 'bludhaven';
    border-bottom: 2px solid;
    display: inline-block;
    letter-spacing: 2.0px;
}

#about .bio_dr table{
    table-layout: fixed;
    width: 100%;
}
#about .bio_dr table tr td{
    margin: auto;
    text-align: center;
    white-space: nowrap;
}

/*Treatment*/
/*.treatment ul li{
    padding-bottom: 15px 0px;
}
.treatment ul li a {
    text-decoration: none;
    color: #515151;
    font-weight:900;
    padding-top: 20px;
}

.treatment ul li a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
   display: inline-block;
   padding-right: 5px;
   vertical-align: middle;
   font-weight:900;
}


.treatment ul{
    list-style: none;
    padding-left: 0px;
    margin: 0px;
}*/
.treatment ul li{
    padding-bottom: 25px 0px;
    margin: 15px 0;
    border-bottom: 1px solid black;
}

.treatment ul li a {
    text-decoration: none;
    color: #515151;
    font-weight:900;
}

.treatment ul li a:hover {
    text-decoration: none;
    color: #515151;
    font-weight:900;
    color: var(--color-primary);
}

.treatment ul li a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
   display: inline-block;
   padding-right: 5px;
   vertical-align: middle;
   font-weight:900;
}


.treatment ul{
    list-style: none;
    padding-left: 0px;
    margin: 0px;
}

.treatment h3{
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
    color: var(--color-primary);
}

.treatment .title{
    color: var(--color-primary);
    font-size: 30px;
}
.treatment .text_desk{
    font-size: 16px;
    text-align: justify;
    font-family: 'headven'
}

.treatment .btn-treatment{
    background-color: var(--color-primary);
    border-radius: 20px;
    border-color: var(--color-primary);
    /*font-size: 15px;*/
    padding: 0 25px;
}

.btn-shoping{
    background-color: var(--color-primary);
    border-radius: 20px;
    border-color: var(--color-primary);
    /*font-size: 15px;*/
    padding: 0 10px;
}


/*Treatment*/
.product h3{
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
    color: var(--color-primary);
}

.product ul li{
    padding-bottom: 25px 0px;
    margin: 15px 0;
    border-bottom: 1px solid black;
}

.product ul li a {
    text-decoration: none;
    color: #515151;
    font-weight:900;
}

.product ul li a:hover {
    text-decoration: none;
    color: #515151;
    font-weight:900;
    color: var(--color-primary);
}

.product ul li a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
   display: inline-block;
   padding-right: 5px;
   vertical-align: middle;
   font-weight:900;
}


.product ul{
    list-style: none;
    padding-left: 0px;
    margin: 0px;
}

.product .list_product{
    text-align: center;
}

.product .list_product .nama_product{
    color: var(--color-primary);
    font-size: 18px;
    z-index: 1
}


.product .list_product .harga span{
    font-size: 18px;
    margin-right: 6px;
}

.product .list_product .harga{
    font-size: 15px;
}

.product .list_product img{
    width: 100%;
}




/* Rate Star*/        
.start{
    width: 100px; height: 18px;
    background-color: #ccc;
    vertical-align:middle;
    display:inline-block;
    position: relative;
    top: -4px;
    z-index: -1;
}
.rate-stars{
    width: 100px; height: 18px;
    background: url(../../../assets/frontend/images/start.png) no-repeat;
    background-size: cover;
    position: absolute;
}
.rate-bg{
    height: 18px;
    background-color: #ffbe10;
    position: absolute;
}

.product_detail .harga span{
    font-size: 18px;
    margin-right: 6px;
}

.product_detail .harga{
    font-size: 15px;
}

.product_detail .list_product img{
    width: 100%;
}

.product_detail .kategory ul li{
    padding-bottom: 25px 0px;
    margin: 15px 0;
    border-bottom: 1px solid black;
}

.product_detail .kategory ul li a {
    text-decoration: none;
    color: #515151;
    font-weight:900;
}

.product_detail .kategory ul li a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f061";
   display: inline-block;
   padding-right: 5px;
   vertical-align: middle;
   font-weight:900;
}


.product_detail .kategory ul{
    list-style: none;
    padding-left: 0px;
    margin: 0px;
}

/* Rate Star Ends*/

/*KEMUDAHAN PENGGUNAAN INDEX*/
#kemudahan-penggunaan-index{
  color: #575757;
}

.btn_go_shop{
    margin-bottom: 20px;
}


/* Display rate count */    
.reviewCount, .reviewScore {font-size: 14px; color: #666666; margin-left: 5px;}
.reviewScore {font-weight: 600;}
/* Display rate count Ends*/  

/*PILIHAN PAKET INDEX*/
#pilihan-paket-index{
  color: #575757; 
  background-color: #f7f7f7
}






/*=================================================*/
/*====================== PAKET ====================*/
/*=================================================*/

#paket-list .img-paket{
  border-radius: 8px
}

#paket-list .deskripsi{
  font-size: 80%; 
  color: #575757;
}

#paket-list .deskripsi .title span{
  border-bottom: 1px solid #AEAEAE; 
  font-weight: bold;
}



/*=================================================*/
/*====================== PAKET ====================*/
/*=================================================*/
#list-blog .img-blog{
  border-radius: 8px
}

#list-blog .deskripsi{
  font-size: 80%; 
  color: #575757;
}

#list-blog .deskripsi .title .title-blog{
  border-bottom: 1px solid #AEAEAE; 
  font-weight: bold;
}



/*=================================================*/
/*==================== TUTORIAL ===================*/
/*=================================================*/

#list_tutorial .kartu{
  widows: 100%; 
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); 
  border-radius: 7px; 
  margin-right: -7px; 
  margin-left: -7px;
}

#list_tutorial .kartu .tab-img{
  border-right: 1px solid #AEAEAE;
}

#list_tutorial .kartu .title{
  border-bottom: 1px solid #AEAEAE; 
  font-weight: bold;
}

#list_tutorial .kartu .tombol button, #list_tutorial .kartu .tombol a{
  width: 49%
}




/*=================================================*/
/*==================== TESTIMONI ==================*/
/*=================================================*/

#section_testimonial .card-testi .img-profile{
  position: relative; 
  margin-top: -50px;
}


#section_testimonial .card-testi .deskripsi{
  font-size: 80%; 
  color: #575757;
}

#section_testimonial .card-testi .deskripsi{
  font-size: 80%; 
  color: #575757;
}

#section_testimonial .card-testi .title span{
  border-bottom: 1px solid #AEAEAE; 
  font-weight: bold;
}