/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

/*body {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: #5a5a5a;
}
*/

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
    text-align: center;

}

.carousel-item {
    max-width: 100vw;
    overflow: hidden;
    background-size:cover
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 3rem;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    padding-left: 100px;
    padding-right: 100px;
    left: 0;
    right: 0;
    bottom: 0
}


/* Declare heights because of positioning of img element */
/*.carousel-item {
  height: 32rem;
}*/
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
/*  min-width: 100%*/;
  height: 32rem;
 /*   height: 400px;*/
}

.carousel-indicators {margin-top:15px; position:relative}
.carousel-indicators-background {
    background-color: #fff;
    opacity: 0.4;
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 8px;
    padding-bottom: 10px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
.marketing h2 {
  font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  /* rtl:remove */
  letter-spacing: -.05rem;
}
.carousel .img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    overflow: hidden !important;
                
}
.carousel.slide .carousel-inner .carousel-item{
transition: transform .6s ease-in-out;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-color: rgba(0,0,0,0.4);
    background-size: 80%;
}


.carousel-indicators [data-bs-target] {
    background-color: #0d6efd;
}


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}


/*custom */

@media (max-width: 1199px) {
/*    .carousel {
        top: 56px;
    }*/
}

@media (max-width: 767px) {
    .carousel-caption {
        position: relative;
        padding-left: unset;
        padding-right: unset;
        background: transparent;
        color: #333
    }

    .carousel-indicators-background {
        background-color: transparent
    }

    /*.carousel {
        top: 56px
    }*/

        .carousel .img-fluid {
            height: auto;
        }
    .carousel-control-next, .carousel-control-prev {
        align-items:unset;
        top:25%
    }


}