.slider-container {
    max-width: 1000px;
    padding: 0 0.3rem;
    /* background: #e6e6e6; */
    margin: 0 auto 0 auto;
    overflow: hidden;
    border-radius: 5px;
    position: relative;

    /* &:before {
        content: '.slider-container';
        position: absolute;
        left: 0;
        top: 0;
        color: blue;
    } */
}

/* img {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
} */

.my-slider {
    position: relative;
}

.slider-item {
    /* background: grey; */
    /* border-right: 2px solid #333; */
    /* padding: 1.5rem .75rem; */
    position: relative;

    &:before {
        content: '.slider-item';
        position: absolute;
        left: 0;
        top: 0;
        /* color: blue; */
    }

    &:hover {
        cursor: pointer;
    }
}

.controls {
    margin: 0;
    padding: 10px;
    list-style: none;
    position: absolute;
    left: 0;
    /* background: #333; */
    width: 100%;
    top: 50%;
    transform: translatey(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    &:focus {
        outline: none;
    }

    /* li:hover {
        cursor: pointer;
    } */
}

/*.controls [disabled] {
  color: #999999;
  background: #B3B3B3;
  cursor: not-allowed !important;
}*/

.controls [aria-disabled="true"] {
    border-color: GrayText;
    color: GrayText;
  }


/* carousel3 */


@media (max-width: 768px) {
        #carousel3 .carousel-inner .carousel-item > div {
          display: none;
        }
        #carousel3 .carousel-inner .carousel-item > div:first-child {
          display: block;
        }
      }

      #carousel3 .carousel-inner .carousel-item.active,
      #carousel3 .carousel-inner .carousel-item-start,
      #carousel3 .carousel-inner .carousel-item-next,
      #carousel3 .carousel-inner .carousel-item-prev {
        display: flex;
        /* // transition-duration: 10s; */
      }

      /* display 4 */
      @media (min-width: 768px) {
        #carousel3 .carousel-inner .carousel-item-right.active,
        #carousel3 .carousel-inner .carousel-item-next,
        #carousel3 .carousel-item-next:not(.carousel-item-start) {
          transform: translateX(25%) !important;
        }

        #carousel3 .carousel-inner .carousel-item-left.active,
        #carousel3 .carousel-item-prev:not(.carousel-item-end),
        #carousel3 .active.carousel-item-start,
        #carousel3 .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
        }

        #carousel3 .carousel-item-next.carousel-item-start,
        #carousel3 .active.carousel-item-end {
          transform: translateX(0) !important;
        }

        #carousel3 .carousel-inner .carousel-item-prev,
        #carousel3 .carousel-item-prev:not(.carousel-item-end) {
          transform: translateX(-25%) !important;
        }
      }

.carousel3 .carousel .carousel-indicators {
  bottom: -40px;
}

.carousel3 .carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--primary);
}

@media only screen and (max-width : 992px) {
  .carousel3 .carousel .carousel-indicators {
    display: block !important;
    text-align: center;
  }
}

.carousel1 .carousel .carousel-indicators {
  bottom: -50px !important;
}

.carousel1 .carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--primary);
}



.carousel .carousel-indicators {
  bottom: -50px;
}

.carousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background-color: var(--primary);
}