.hero-main{
  margin-top: $header-height;
  background: $primary-color;

  @include media-breakpoint-down(xl) {
    margin-top: -10px;
  }

  .hero-cont{

    /*Image Slider Title*/
    h1 {
      font-family: $font-family-tertiary;
      font-weight: $font-weight-black;
      letter-spacing: 0;
      text-shadow: 0px 3px 6px #00000033;
      -webkit-text-stroke: 1px #C9A300;

      @include media-breakpoint-down(md){
        font-size: 4rem!important;
      }
    }

    .sub-title {
      font-family: $font-family-tertiary;
      font-weight: $font-weight-bold;
      font-size: $font-size-64;
      line-height: $line-height-38;
      text-transform: none;
      letter-spacing: 0;
      text-shadow: 0px 3px 6px #00000033;
      -webkit-text-stroke: 1px #C9A300;

      @include media-breakpoint-down(md){
        font-size: 2rem;
      }
    }

    .banner-content{
      color: #4f6e44;
      font-weight: $font-weight-medium;
      font-size: $font-size-24;

      @include media-breakpoint-down(md){
        font-size: $font-size-16;
      }
    }
  }

  .figure{
    border-radius: 0px 0px 100% 100% / 0 0 25% 25%;
    height: 85%;

    /*Image Slider Color Overlay*/
    &:before{
      background: none;
      opacity: 1;
    }
  }


  /* Slider Dots big & active bigger */
  .owl-carousel .owl-dots button.owl-dot {
    width: 14px;
    height: 14px;
    background: rgba(255, 255, 255, 0.6);

    &.active{
      background: #ffffff;
      box-shadow: #ffffff 0 0 0 6px;
      width: 14px;
      height: 14px;
    }

    &:hover{
      transform: none;
    }
  }
}

/* Owl - Nav */
.owl-carousel {
  .owl-nav {
    button.owl-prev,
    button.owl-next {
      border-color: $secondary-color;

      &:before{
        color: $secondary-color;
      }

      &:hover,
      &:focus,
      &:active {
        border-color: $secondary-color;

        &:before {
          color:  $secondary-color;
          opacity: 0.6;
        }
      }
    }
  }
}

/* Owl - Dots */
.owl-carousel {
  .owl-dots {
    button.owl-dot {
      background: $secondary-color;
      opacity: 0.6;

      &:hover,
      &:focus,
      &:active,
      &.active {
        background: $secondary-color;
        opacity: 1;
      }

      &.active {
        background: $secondary-color;
        box-shadow: $secondary-color 0 0 0 3px;
        opacity: 1;
      }
    }
  }
}