.main_body{
  .header {
  position: relative;
  z-index: 1;
  .wrapper {
    position: relative;
    .banner_index {
      .banner_bg {
        background-image: url(./../img/banner/bg1.jpg);
        justify-content: center;
        width: 100%;
        margin: auto;
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        @media screen and(max-width:768px) {
          height: auto;
        }
        .card {
          display: none;
          background: transparent;
          padding-top: 100px;
          padding-bottom: 100px;
          border: none !important;
          letter-spacing: -2px;
          // animation-name: fadeInOut;
          // animation-delay: 1s;
          // animation-duration: 3s;
          text-transform: uppercase;
          @media screen and(max-width:996px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:768px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:572px) {
            display: block;
            padding-top: 100px;
            padding-left: 25px;
          }
          @media screen and(max-width:450px) {
            display: block;
            padding-top: 100px;
            padding-left: 20px;
          }
          .card-title {
            font-size: 2.5vw;
            font-weight: 700;
            color: $color-brand2;
            @media screen and(max-width:996px) {
              font-size: 25px;
            }
            @media screen and(max-width:572px) {
              font-size: 18px;
            }
            @media screen and(max-width:768px) {
              font-size: 25px;
            }
          }
          .card-text {
            color: $color-white;
            font-size: 3.5vw;
            font-weight: bolder;
            @media screen and(max-width:996px) {
              font-size: 40px;
            }
            @media screen and(max-width:768px) {
              font-size: 40px;
            }
            @media screen and(max-width:572px) {
              font-size: 30px;
            }
          }
          .text-bottom {
            font-size: 20px;
            color: $color-brand2;
            font-weight: bolder;
            padding-bottom: 40px;
            letter-spacing: 0px;
          }
        }
      }
      .banner_bg2 {
        background-image: url(./../img/banner/bg2.jpg);
        justify-content: center;
        width: 100%;
        margin: auto;
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        @media screen and(max-width:768px) {
          height: auto;
        }
        .card {
          display: none;
          background: transparent;
          padding-top: 100px;
          padding-bottom: 100px;
          border: none !important;
          letter-spacing: -2px;
          // animation-name: fadeInOut;
          // animation-delay: 1s;
          // animation-duration: 3s;
          text-transform: uppercase;
          @media screen and(max-width:996px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:768px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:572px) {
            display: block;
            padding-top: 100px;
            padding-left: 25px;
          }
          @media screen and(max-width:450px) {
            display: block;
            padding-top: 100px;
            padding-left: 20px;
          }
          .card-title {
            font-size: 2.5vw;
            font-weight: 700;
            color: $color-brand2;
            @media screen and(max-width:996px) {
              font-size: 25px;
            }
            @media screen and(max-width:572px) {
              font-size: 18px;
            }
            @media screen and(max-width:768px) {
              font-size: 25px;
            }
          }
          .card-text {
            color: $color-white;
            font-size: 3.5vw;
            font-weight: bolder;
            @media screen and(max-width:996px) {
              font-size: 40px;
            }
            @media screen and(max-width:768px) {
              font-size: 40px;
            }
            @media screen and(max-width:572px) {
              font-size: 30px;
            }
          }
          .text-bottom {
            font-size: 20px;
            color: $color-brand2;
            font-weight: bolder;
            padding-bottom: 40px;
            letter-spacing: 0px;
          }
        }
      }
      .banner_bg3 {
        background-image: url(./../img/banner/bg3.jpg);
        justify-content: center;
        width: 100%;
        margin: auto;
        background-size: cover;
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        @media screen and(max-width:768px) {
          height: auto;
        }
        .card {
          display: none;
          background: transparent;
          padding-top: 100px;
          padding-bottom: 100px;
          border: none !important;
          letter-spacing: -2px;
          // animation-name: fadeInOut;
          // animation-delay: 1s;
          // animation-duration: 3s;
          text-transform: uppercase;
          @media screen and(max-width:996px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:768px) {
            display: block;
            padding-top: 200px;
            padding-left: 100px;
          }
          @media screen and(max-width:572px) {
            display: block;
            padding-top: 100px;
            padding-left: 25px;
          }
          @media screen and(max-width:450px) {
            display: block;
            padding-top: 100px;
            padding-left: 20px;
          }
          .card-title {
            font-size: 2.5vw;
            font-weight: 700;
            color: $color-brand2;
            @media screen and(max-width:996px) {
              font-size: 25px;
            }
            @media screen and(max-width:572px) {
              font-size: 18px;
            }
            @media screen and(max-width:768px) {
              font-size: 25px;
            }
          }
          .card-text {
            color: $color-white;
            font-size: 3.5vw;
            font-weight: bolder;
            @media screen and(max-width:996px) {
              font-size: 40px;
            }
            @media screen and(max-width:768px) {
              font-size: 40px;
            }
            @media screen and(max-width:572px) {
              font-size: 30px;
            }
          }
          .text-bottom {
            font-size: 20px;
            color: $color-brand2;
            font-weight: bolder;
            padding-bottom: 40px;
            letter-spacing: 0px;
          }
        }
      }
      .banner_left {
        width: 100%;
        height: 100vh;
        background-color: #b22126;
        @media screen and(max-width:996px) {
          display: none;
        }
        canvas {
          position: absolute;
          top: 0;
          left: 0;
        }
        p {
          // first we make all instances of this transparent.
          opacity: 0;
          // as we're using the same animation for each instance, call it here so we're not repeating it
          animation: fadeInUp 1s ease-in-out 0s forwards;
          // then define the animation delay in each class
          &.first {
            animation-delay: 1s;
          }
          &.second {
            animation-delay: 3s;
          }
          &.third {
            animation-delay: 5s;
          }
          &.fourth {
            animation-delay: 7s;
          }
          &.fifth {
            animation-delay: 9s;
          }
          &.sixth {
            animation-delay: 11s;
          }
        }
        .btn,
        .owl-nav {
          // first we make all instances of this transparent.
          opacity: 0;
          // as we're using the same animation for each instance, call it here so we're not repeating it
          animation: fadeInUp 1s ease-in-out 0s forwards;
          // then define the animation delay in each class
          &.fourth {
            animation-delay: 7s;
          }
        }
        .owl-nav {
          // first we make all instances of this transparent.
          opacity: 0;
          // as we're using the same animation for each instance, call it here so we're not repeating it
          animation: fadeInUp 1s ease-in-out 0s forwards;
          // then define the animation delay in each class
          &.first {
            animation-delay: 1s;
          }
          &.second {
            animation-delay: 3s;
          }
          &.third {
            animation-delay: 5s;
          }
          &.fourth {
            animation-delay: 7s;
          }
          &.fifth {
            animation-delay: 9s;
          }
          &.sixth {
            animation-delay: 11s;
          }
        }
        .card {
          background: transparent;
          padding-top: 100px;
          padding-bottom: 100px;
          border: none !important;
          letter-spacing: -2px;
          // animation-name: fadeInOut;
          // animation-delay: 1s;
          // animation-duration: 3s;
          text-transform: uppercase;
          //@media screen and(max-width:768px){
          //padding-top:50px;
          //padding-bottom: 100px;
          // }
          .card-title {
            font-size: 2.5vw;
            font-weight: 700;
            color: $color-brand2;
          }
          .card-text {
            color: $color-white;
            font-size: 3.5vw;
            font-weight: bolder;
          }
          .text-bottom {
            font-size: 20px;
            color: $color-brand2;
            font-weight: bolder;
            padding-bottom: 40px;
            letter-spacing: 0px;
          }
        }
      }
    }
    .owl-carousel button.owl-dot span {
      height: 20px;
      width: 20px;
      color: $color-white;
      background-color: transparent;
      display: block;
      font-weight: bolder;
      margin: 5px;
      @media screen and(max-width:996px) {
        right: 16%;
        bottom: 4%;
      }
    }
    .owl-carousel button.owl-dot.active span {
      color: $color-hover;
      height: 30px;
      width: 30px;
      font-size: 25px;
    }
    .owl-carousel {
      position: relative;
      .owl-nav {
        position: absolute;
        right: 36%;
        bottom: 4%;
        width: 250px;
        text-align: center;
        padding-top: 23px;
        @media screen and(max-width:996px) {
          right: 0%;
          bottom: 4%;
        }
        @media screen and(max-width:572px) {
          right: 0%;
          bottom: 3%;
        }
        @media screen and(max-width:572px) {
          right: 0%;
          bottom: 3%;
        }
      }
      .owl-prev {
        color: $color-white;
        margin-right: 15px;
        //   &::after{
        //   content: "";
        //   position: absolute;
        //   height: 3px;
        //   width: 18px;
        //   background-color: #f0f0f0;
        //   top: 59px;
        //   left: 78px;
        //   display: none;
        // }
        &:hover {
          color: $color-white;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          padding-right: 15px;
          &::after {
            content: "";
            position: absolute;
            height: 3px;
            width: 33px;
            background-color: #f0f0f0;
            top: 59px;
            left: 75px;
            display: block;
            -webkit-transition: 0.5s;
            transition: 0.5s;
          }
          i {
            font-size: 45px;
            -webkit-transition: 0.5s;
            transition: 0.5s;
          }
        }
        i {
          font-size: 45px;
          padding: 15px;
        }
      }
      .owl-next {
        color: $color-white;
        &::after {
          content: "";
          position: absolute;
          height: 3px;
          width: 5px;
          background-color: #f0f0f000;
          top: 58px;
          left: 153px;
          display: block;
        }
        &:hover {
          color: $color-white;
          padding-left: 15px !important;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          &::after {
            content: "";
            position: absolute;
            height: 3px;
            width: 40px;
            background-color: #f0f0f0;
            top: 59px;
            left: 139px;
            display: block;
            -webkit-transition: 0.5s;
            transition: 0.5s;
          }
          i {
            font-size: 45px;
            padding: 15px;
          }
        }
        i {
          font-size: 45px;
          padding: 15px;
        }
      }
      .owl-dots {
        position: absolute;
        bottom: 5%;
        right: 5%;
        @media screen and(max-width:1000px) {
          left: 20px;
        }
        @media screen and(max-width:768px) {
          left: 100px;
        }
        @media screen and(max-width:600px) {
          left: 55px;
        }
        @media screen and(max-width:450px) {
          left: 20px;
        }
      }
    }
  }
}
}


// @keyframes fadeInOut {
//     0% {
//       opacity: 0;
//     }
//     45% {
//       opacity: 1;
//     }
//     100% {
//       opacity: 0%;
//     }
//   }
/* defines the animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.b_wrapp{
  position: absolute;
  bottom: 40px;
  z-index: 999;
  right: 26%;
  @media screen and(max-width:650px) {
    right: 40%;
    bottom: 20px;
  }
  .btn.btn-down {
  position: relative;
  z-index: 999;
color: $color-white;
  &::after{
  display: block;
  top: 103%;
left: 50%;
position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
   }
   &::before{
  display: block;
    position: absolute;
      top: 26%;
      left: 29%;
      z-index: -1;
      content: '';
      width: 44px;
      height: 44px;
      box-shadow: 0 0 0 0 rgba(255,255,255,.1);
      border-radius: 100%;
      opacity: 0;
      -webkit-animation: sdb03 3s infinite;
      animation: sdb03 3s infinite;
      box-sizing: border-box;
    }
    @-webkit-keyframes sdb03 {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
    @keyframes sdb03 {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
