.bc-image-slider {
  .image-slider-container {
    .image-slider-item {
      display: grid;
      max-width: 100%;
      position: relative;
      max-height: 760px;
      &:before{
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        background: $bcb-shoppingexperiences-sliderOverlay;
        left: 0;
        top: 0;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .banner--content-wrapper {
      position: absolute;
      top: 0;
      display: flex;
      width: inherit;
      align-items: center;
      height: 100%;
      &.content-right {
        justify-content: end;
        .banner--content{
          padding-right: 10%;
        }         
      }
      &.content-left {
        justify-content: left;
        margin-left: 90px;
         .banner--content{
          padding-right: 10%;
        }      
      }
      &.content-center {
        justify-content: center;
        .banner--content {
          width: 55%;
          text-align: center;
          padding: 0;
          .banner--btn {
            margin: auto;
            margin-top: 32px;
          }
        }
      }
      .banner--content {
        width: 60%;
       
        .banner--title {
          font-size: 50px;
          line-height: normal;
          font-weight: 600;
          margin: 0;
          margin-bottom: 15px;
        }
        .banner--subtitle {
          font-size: 24px;
          line-height: 15px;
        }
        .banner--btn {
    width: fit-content;
          border-radius:$bcb-shoppingexperiences-btn-radius+px;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 45px;
          margin-top: 32px;
          padding: 0 30px;
          .btn--link {
            font-size: 14px;
            text-transform: uppercase;
            width: 100%;
            font-weight: 600;
          }
          &:hover {
            opacity: 0.9;
          }
        }
        a {
          text-decoration: none;
        }
      }
    }
    .tns-slide-active {
      .slideInRight {
        animation-name: slideInRight;
        animation-delay: 0.2s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
      }
    }
  }
  .custom-slider-controls {
    .image-slider-controls-prev {
      right: 70px;
      border: none;
      background: none;
      color: $bcb-blackColor;
      opacity: 1;
      top: inherit;
      bottom: -32px;
      display: none;
    }
    .image-slider-controls-next {
      right: 25px;
      border: none;
      background: none;
      color: $bcb-blackColor;
      opacity: 1;
      top: inherit;
      bottom: -32px;
      display: none;
    }
  }
  .cms-element-bc-image-slider {
    width: 100%;
    padding: 0;
    .tns-outer {
      .tns-nav {
        left: inherit;
        right: -4px;
        width: auto;
        bottom: inherit;
        top: 44%;
        transform: rotate(90deg);
      }
    }
  }
  .base-slider {
    .tns-nav {
      button.tns-nav-active {
        background-color:$sw-color-brand-primary;
        outline: $bcb-whiteColor;
      }
      button {
        &:hover {
          background: $sw-color-brand-primary;
        }
      }
    }
  }
  .tns-nav {
    button {
      padding: 10px;
      background-color: transparent;
      border: 1px solid $bcb-whiteColor;
    }
  }
}

@media screen and (min-width: 575.98px) {
  .bc-image-slider {
    .image-slider-container {
      .banner--content-wrapper {
        .banner--content {
          &.align--text-right {
            padding-right: 90px;
            text-align: end;
            .banner--btn {
              margin-left: auto;
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 2560px) {
  .bc-image-slider {
    .image-slider-container {
      .banner--content-wrapper {
        .banner--content {
          width: 40%;
          .banner--title {
            max-width: 70%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1440px) {
  .bc-image-slider {
    .image-slider-container {
      .banner--content-wrapper {
        .banner--content {
          padding-right: 0px;
          .banner--title {
            font-size: 46px;
            line-height: normal;
          }
        
        }
      }
    }
    .custom-slider-controls {
      .image-slider-controls-prev {
        img {
          width: 15px;
          height: auto;
        }
      }
      .image-slider-controls-next {
        img {
          width: 15px;
          height: auto;
        }
      }
    }
  }
}

@media (max-width: 1199.98px) {
  .bc-image-slider {
    .image-slider-container {
      .banner--content-wrapper {
        .banner--content {           
          .banner--title {
            font-size: 30px;
            line-height: normal;          
          }
          .banner--btn{            
            margin-top: 20px;
            height: 35px;
            width: fit-content;
            padding: 0 20px;
          }
        }
      }
    }
  }
}

@media (max-width: 991.98px) {
 
  .bc-image-slider {
    .image-slider-container {
      .banner--content-wrapper {
        &.content-center {
          .banner--content {
            .banner--btn {
              margin-top: 15px;
            }
          }
        }
        .banner--content {
      
          .banner--title {
            font-size: 26px;
            margin-bottom: 5px;
          }
          .banner--subtitle {
            font-size: 16px;
          }
        
        }

       
      }
    }
    .custom-slider-controls {
      .image-slider-controls-prev {
        img {
          width: 12px;
        }
      }
      .image-slider-controls-next {
        img {
          width: 12px;
        }
      }
    }
    .base-slider {
      .tns-nav {
        button {
          padding: 6px;
        }
      }
    }
  }
}

@media (max-width: 767.98px) {
  .bc-image-slider {
    .image-slider-container {
      .image-slider-item {
        min-height: 220px;
      }
      .banner--content-wrapper {
        .banner--content {
          .banner--title {
            font-size: 20px;
          }
          .banner--subtitle {
            font-size: 16px;
          }
          .banner--btn {
            margin-top: 15px;
             
          }
        }
      }
    }
    .base-slider {
      .tns-nav {
        button {
          margin: 0 5px;
        }
      }
    }
  }
}

@media (max-width: 575.98px) {
  .bc-image-slider {
    display: block;
    .tns-ah {
      overflow: inherit;
    }
    .image-slider-container {
      .image-slider-item {
        .img-fluid {
          height: 100%;
          object-fit: cover;
        }
      }
      .banner--content-wrapper {
        position: relative;
        width: 100%;
        &.content-left {
          margin-left: 0;
        }
        .banner--content {
          margin-top: 25px;
          padding: 0 22px;
          padding-bottom: 20px;
          width: 100% !important;
          text-align: center;
          .banner--title {  
            color: #000 !important;
          }
          .banner--subtitle { 
            color: #000 !important;
          }
          .banner--btn {
            margin: 0 auto;
            margin-top: 15px;
            background: #000 !important;
            a {
              color:$bcb-whiteColor !important;
            }
          }
        }
      }
    }
    .cms-element-bc-image-slider {
      .tns-outer {
        .tns-nav {
          top: 20%;
          right: 0px;
        }
      }
    }
    .custom-slider-controls {
      display: none;
    }
  }
}

@keyframes slideInRight {
  0% {
    transform: translateX(70%);
    opacity: 0;
    display: none;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
    display: flex;
  }
}
