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

.btn-oren {
  color: #fff;
  background-color: #feb147;
  border-color: #feb147;
  border-radius: 0px !important;
  padding-bottom: 9px;
}

.btn-oren:hover {
  color: #fff;
  background-color: #feb147;
  border-color: #feb147;
}

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

.btn-oren.disabled, .btn-oren:disabled {
  color: #fff;
  background-color: #feb147;
  border-color: #feb147;
}

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

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




/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 72px;
  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);
}

#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: #fff;
  padding: 10px 15px;
  transition: 0.3s;
  font-size: 15px;
  font-family: "Open Sans", sans-serif;
}

.nav-menu a:hover, .nav-menu .active > a, .nav-menu li:hover > a {
  color: #eb5d1e;
  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: #4e4039;
  transition: 0.4s;
}

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

.mobile-nav a {
  display: block;
  position: relative;
  color: #f9d1c0;
  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 =====================*/
/*=================================================*/

/*BANNER*/

#banner-index{
  background-image: url('../../assets/images/banner/banner.png'); 
  background-size: cover;
  height: 600px; 
  margin-top: 70px;
}

#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-index{
  background-color: #fff4ef;
}

#about-index .img-about{
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); 
  border-radius: 7px; 
  margin-right: -7px;
  margin-left: -7px; 
  /*height: 100%*/
}



/*JENIS USAHA*/
#jenis-usaha-index .deskripsi{
  font-size: 80%; 
  color: #575757;
}

#jenis-usaha-index .deskripsi label{
  border-bottom: 1px solid #AEAEAE; 
  font-weight: bold;
}



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


/*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;
}