:root{
  --theme-brown:#E59556;
  --theme-brown-light: #F7DECB;
  --theme-brown-light-extra: #FFF0E5;
  --theme-dark-green: #5B686B;
  --theme-dark-brown: #776c66;
}

body{
  font-family: 'Rubik', sans-serif !important;
}

.bg-theme-brown{
  background-color: var(--theme-brown);
}
.bg-theme-brown-light{
  background-color: var(--theme-brown-light);
}
.bg-theme-brown-light-extra{
  background-color: var(--theme-brown-light-extra);
}
.bg-theme-dark-green{
  background-color: var(--theme-dark-green);
}
.text-brown{
  color: var(--theme-brown);
}
.text-brown-light-extra{
  color: var(--theme-brown-light-extra);
}
.btn.bg-theme-dark-green:hover{
  background-color: black;
}

.hero-section{
  background-image: url('../../images/v2/hero-bg.jpg');
  background-size: cover;
  background-position: right;
}
.section-2{
  background-image: url('../../images/v2/achieve-success.jpg');
  background-size: cover;
  background-position: left;
}
b, strong {
  font-weight: bold; }
.nav-dark>.nav-item>.nav-link.active{
  color: white !important;
}
.min-height-100vh{
  min-height: 100vh;
}

/* SCROLL SNAP  */
.animatable {
  opacity: 0;
  transform: translateY(100px);
}
.main-container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
  -ms-overflow-style: none;
}
.cursor-pointer{
  cursor: pointer;
}

.accordion-item {
    border: 1px solid #40daf5;
}
.nav-link{
  color: #c9972e;
}

.sub-nav{
  display: none;
}
.sub-nav-item:hover{
  background-color: black;
  color: white !important;
}
.sub-nav-parent:hover .sub-nav, .sub-nav:hover{
  display: block;
}
.sub-nav-item:hover ~ .child-nav, .child-nav:hover{
  display: block;
}

.child-nav{
  display: none;
}
.nav-item.active > a {
    font-weight: bold;
    color: var(--theme-brown) !important;
}

.card {
}
.card h5 {
  font-size: 1.1rem;
  line-height: 1.4;
}
.card .btn {
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
}

.bg-theme-brown-dark{
  background-color:  var(--theme-dark-brown) !important;
}


@media (max-width: 767px) {
  .section-2 .container{
    background-color: #1d396ccd;
  }
  .hero-section{
    background-image: none;
  }
  .min-height-xs-auto{
    min-height: auto !important;
  }

  .sub-nav{
    display: none;
  }
  .sub-nav-item:hover{
    background-color: black;
  }
  .sub-nav-parent:hover .sub-nav, .sub-nav:hover{
    display: none;
  }
}