/* @import
  url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
} */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap');
html,body {
    font-family: 'Montserrat', sans-serif !important;
}

/* .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    padding-right: 30px;
    padding-left: 30px;
} */

.main-grad-bg-color {
  background: linear-gradient(168deg, rgba(147,107,38,1) 30%, rgba(191,147,69,1) 100%);
}
.main-grad-color {
  color: linear-gradient(168deg, rgba(147,107,38,1) 30%, rgba(191,147,69,1) 100%);
}
.main-header {
  width: 100%;
}

.font-weight-bold {
  font-weight: 500!important;
}

.pale-gold {
  color: #AA946B;
}

.stretched-20 {
  margin-left: -20px; margin-right: -20px;
}

.extra-bold {
  font-weight: 800;
}

.nowrap {
  white-space: nowrap;
}

.main-bg-color {
  /* background-color: #4D1C1C; */
  background: rgb(34,20,21);
  background: linear-gradient(168deg, rgba(34,20,21,1) 0%, rgba(92,3,9,1) 100%);
}

.grey-color {
  color: #666;
}

.main-color {
  color: #5C0309;
}

.main-color-2 {
  color: #8C7749; /* emas */
}

.main-color-3 {
  color: #B2961F;
}

.main-bg-color-4 {
  background-color: #CAA761;
}

.main-color-4 {
  color: #CAA761;
}

.light-grey-bg-color {
  background-color: #F9F9F9;
}

.light-grey-bg-color-2 {
  background-color: #F0F0F0;
}

.light-grey-color {
  color: #666;
}

.light-grey-bg-color-3 {
  background-color: #aaa;
}

.light-grey-color-2 {
  color: #aaa;
}

.light-grey-color-3 {
  color: #B5B5B5;
}

.allo-color {
  color: #FFBF32;
}

.img-icon {
  width: 27px;
}

.img-icon-h {
  width: 40px;
}

.card-icon-h{
  height: 70px;
}

.fa-2x {
    font-size: 1.5rem;
}
.fa {
    position: relative;
    text-align: center;
    vertical-align: middle;
    font-size: 1.5rem;
    height: 30px;
}

.main-nav {
    background: #fff;
    box-shadow: 0 7px 10px rgba(0,0,0,0.15);
    position: fixed;
    z-index: 1000;
}

.nav-cta {
    background: #fff;
    box-shadow: 0 0px 15px rgba(0,0,0,0.15);
    height: 5em;
    padding: 15px;
    z-index: 999;
}

.main-nav>ul {
    margin: 0rem 0rem;
}

nav ul,
nav li {
    outline: 0;
    margin: 0;
    padding: 0;
}
.main-nav li:hover>a,
nav.main-nav li.active>a{
    /* color: #fff;
    background-color: #E0E0E0; */
}

.main-nav li>a {
      border-collapse: collapse;
      border-spacing: 0;
      color: #aaa;
      font-size: 0.8rem;
      text-decoration: none;
}

@media (min-width:35.1em) {

  .img-icon-h {
    /* max-width: 40px; */
    /* max-height: 40px; */
  }

  .card-icon-h{
    height: 140px;
  }

  .img-icon {
    width: 24px;
  }

  .fa{
    display: table-cell;
    width: 5rem;
    height: 5rem;
  }

  .main-div {
    padding-left: 15rem;
  }

  .second-header {
    margin-left: 15rem;
  }

  .nav-cta {
    margin-left: 15rem;
  }

  .f-8-rem {
    size: 0.8rem;
  }

  /* kalau perlu toggle
  .main-nav:hover,
  nav.main-nav.expanded {
    width: 15em;
    overflow: visible;
  }
  kalau perlu toggle */

  .main-nav{
    top: 0;
    bottom: 0;
    height: 100%;
    left: 0;
    /* kalau perlu toggle */
    /* width: 5rem; */
    overflow: hidden;
    -webkit-transition: width .05s linear;
    transition: width .05s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
  }

  .main-nav li {
    position: relative;
    display: block;
    /* width: 18rem; */
  }
  .main-nav li>a {
      position: relative;
      display: table;
      -webkit-transform: translateZ(0) scale(1, 1);
      -webkit-transition: all .1s linear;
      transition: all .1s linear;
  }

  .main-nav .nav-text {
      position: relative;
      display: table-cell;
      vertical-align: middle;
      width: 10rem;
  }
}


@media (max-width:35em) {

    .main-nav {
        background: #fff;
        border-right: 0;
        position: fixed;
        margin: 0;
        left: 0;
        bottom: 0;
        height: 5em;
        width: 100%;
        box-shadow: 0 0px 15px rgba(0,0,0,0.15);

    }

  .main-nav ul{
    display: table;
    width: 100%;
  }

    .main-nav li{
      float: left;
      width: 20%;
      list-style-type: none;
      text-align: center;
    }

  .main-nav a{
    display: block;
    padding-top: 15px;
    height: 74px;
  }

  .main-nav i, .main-nav span{
    display: block;
  }

  .main-nav span{
    font-size: 0.6rem;
    padding-top: 10px;
  }
}

.card, .btn, .form-control { border-radius: 10px; }

.transparent-circle {
  background-color: rgba(255,255,255,0.5); width: 35px; height: 35px;
}

.card-img, .card-img-top, .radius-10 {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.scrolling-wrapper{
	overflow-x: auto;
}

.main-div {
  padding-bottom: 100px;
  min-height: 100vh
}

.explore-card {
  width: 100%; background-color: #aeaeae; border-radius: 10px;
  padding-top: 110%;
  position: relative; /* If you want text inside of it */
}

.explore-caption {
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;

  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

}

.explore-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.explore-img-bottom {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn-ghost {
  border: 1px solid #CAA761;
  border-radius: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.7rem;
  font-weight: bold;
  color: #CAA761;
}

.float{
	position:fixed;
	width:80px;
	height:80px;
	bottom:20px;
	right:20px;
  background-color: #4D1C1C;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	/* box-shadow: 2px 2px 3px #999; */
}

.float-2{
	/* position:fixed; */
	width:70px;
	height:70px;
	/* bottom:20px;
	right:20px; */
  border: 1px solid #fff;
  margin-left: 5px;
  margin-top: 5px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	/* box-shadow: 2px 2px 3px #999; */
}

.my-float{
	margin-top:10px;
  margin-bottom: 3px;
}

.btn-ghost-lg {
  border: 1px solid #CAA761;
  border-radius: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: bold;
  color: #CAA761;
  font-size: 0.8rem;
}

.btn-ghost:hover {
  color: #CAA761;
}

.btn-ghost-grey {
  border: 1px solid #DDD;
  border-radius: 30px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 0.7rem;
  color: #AAA;
}

.btn-ghost-grey:hover {
  color: #AAA;
}
.transparent-grad-img {
  box-shadow: inset 0px -200px 200px -125px rgb(51 51 51)
}

.explore-bg-color {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(20,0,0,.7));
}
.transparent-bg-color {
  background-image: linear-gradient(to bottom, rgba(3,3,3,0), rgba(3,3,3,.7));
}
.explore-frame {
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
.mobile-link {
  color: #011936;
  text-decoration: none;
}
.mobile-link:hover {
  color: #023c82;
  text-decoration: none;
}

.mobile-link-gold {
  color: #CAA761;
  text-decoration: none;
}
.mobile-link-gold:hover {
  color: #CAA761;
  text-decoration: none;
}

.radius-15 {
  border-radius: 15px;
}
.mobile-link-white {
  color: #fff;
  text-decoration: none;
}
.mobile-link-white:hover {
  color: #fff;
  text-decoration: none;
}
.second-fixed-header {
  padding-top: 71px;
}
.btn-thg {
  padding: 10px 40px 10px 40px;
}
.btn-icon {
  padding: 10px 15px 10px 15px;
}
.stretched {
  margin-left: -15px; margin-right: -15px;
}
.semi-bold {
  font-weight: 600;
}
.semi-bold-2 {
  font-weight: 700;
}
.facility-svg {
  height: 24px;
  width:24px;
  filter: invert(64%) sepia(11%) saturate(1941%) hue-rotate(10deg) brightness(91%) contrast(87%);
}

@media (max-width:360px) and (min-width: 280px){
  .near-attract {
    white-space: nowrap;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mice-hotel-name {
    white-space: inherit;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 48px;
  }

  .mice-hotel-address {
    text-overflow: ellipsis;
    overflow: hidden;
    height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

@media (max-width:420px) and (min-width: 361px){
  .near-attract {
      white-space: nowrap;
      width: 250px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mice-hotel-name {
      white-space: inherit;
      text-overflow: ellipsis;
      overflow: hidden;
      height: 48px;
    }

    .mice-hotel-address {
      text-overflow: ellipsis;
      overflow: hidden;
      height: 28px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
}
.mobile-more {
  display: none;
}

@media (max-width:360px) and (min-width: 280px){
  .mobile-more {
    display: block;
  }

  .fac-wrapper > div {
    width: 50%;
  }
}

@media (max-width:420px) and (min-width: 361px){
  .mobile-more {
    display: block;
  }

  .fac-wrapper {
    width: 90%;
  }
  .grow {
    -moz-transition: height .5s;
    -ms-transition: height .5s;
    -o-transition: height .5s;
    -webkit-transition: height .5s;
    transition: height .5s;
    height: 0;
    overflow: hidden;
  }
}
/* Href Color */
a {
  color: #000000; /* emas */
}
/* Hover href warna emas */
a:hover {
  color: #8C7749; /* emas */
}

/* .fac-wrapper > div {
  width: 100%;
} */
