/* 
  image should be placed in the middle. 
  image should be placed in the background. 
  the title and description should be placed on the right section of the image. 
  should have good support for mobile devices. 
  remove unnecessary css rules.
*/

.jesloo-carousel {
  position: relative;
  width: 100%;
  height: 910px;
  max-width: var(--jesloo-max-width-1920);
  margin: 0 auto;
  /* background-color: black; */
}

.jesloo-carousel .carousel-inner {
  /* by default has position: relative; */
  height: 100%;
}

.jesloo-carousel .carousel-inner .carousel-item {
  height: 100%;
}

.jesloo-carousel .carousel-inner .carousel-item img.jesloo-carousel-background-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  /* by_default? object-position: center; */
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  /* make the click penetrate through, to the image */
  pointer-events: none;
  color: white;
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-content-wrapper-positioner {
  /* instead of putting in center */
  /* put the content to the left section of the image */
  /* when width is small, place the content to the bottom of the image */
  /* dk grid approach */
  position: absolute;
  /* left: 18%; */
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper h2 {
  /* color: #115199; */
  /* font-size: 3em; */
  font-size: 54px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;

  /* revert the pointer-events: none; so you can select the text */
  pointer-events: auto;
  /* reduce width to prevent stopping the pointer-events: none; */
  width: fit-content;

  word-break: break-word;
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper p {
  /* font-size: 2em; */
  /* font-weight: 300; */
  font-size: 24px;

  /* revert the pointer-events: none; so you can select the text */
  pointer-events: auto;
  /* reduce width to prevent stopping the pointer-events: none; */
  width: fit-content;

  word-break: break-word;
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details {
  margin-top: 60px;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  gap: 10px;
  font-size: 24px;

  /* revert the pointer-events: none; so you can select the text */
  pointer-events: auto;

  /* animation */
  /* keep text align at left  */
  transform-origin: left center;
  transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
}

.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details:hover {
  color: var(--jesloo-primary-color-light);
  transform: scale(1.1);
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  /* revert then revert again...  */
  /* pointer-events: none; */
  /* cursor: pointer; */
}

/* 
.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details:hover svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
} */
/* 
.jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details:hover img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
} */


/*  ############
    arrow style 
    ############
*/

.jesloo-carousel button.carousel-control-prev .carousel-control-prev-icon {
  margin-right: 70%;
}

.jesloo-carousel button.carousel-control-next .carousel-control-next-icon {
  margin-left: 70%;
}


/* 2k screen */
@media (min-width: 1920.02px) {
  .jesloo-carousel {
    /* max-width: 2560px; */
    max-width: revert;
    /* 1920/910 = 2560/x */
    height: 1213.33px;
  }
}

/* 1024px width */
@media (max-width: 1399.98px) {
  .jesloo-carousel {
    height: 500px;
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper h2 {
    font-size: 2em;
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper p {
    font-size: 1em;
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details {
    font-size: 1em;
  }

  .carousel-control-next,
  .carousel-control-prev {
    width: 8%;
  }

  .carousel-control-next:hover,
  .carousel-control-prev:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
}

/* mobile width */
@media (max-width: 991.98px) {
  .jesloo-carousel {
    height: 350px;
  }

  /* add a mask to the image */
  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .jesloo-carousel .carousel-inner .carousel-item img.jesloo-carousel-background-image {
    /* object-fit: contain; */
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper h2 {
    font-size: 1.5em;
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper p {
    font-size: 1em;
  }

  .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-more-details {
    font-size: 1em;
    margin-top: 20px;
  }
}

.carousel-indicators [data-bs-target] {
  width: 60px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

/* 
  Splits the carousel into 2 sections:
    image above.
    text below.

    dont use absolute position for the text.
*/
/*
  @media (max-width: 767.98px) {
    .jesloo-carousel {
      /~ height: revert; ~/
      /~ height: 600px; ~/
      height: fit-content;
    }

    .jesloo-carousel .carousel-inner .carousel-item img {
      height: auto;
      /~ max-height: 250px; ~/
      /~ height: revert; ~/
      /~ object-fit: contain; ~/
    }

    .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper {
      position: revert;
      height: auto;
      /~ height: revert; ~/

      align-items: flex-start;
      justify-content: flex-start;

      padding: 1em;
    }


    .jesloo-carousel .carousel-inner .carousel-item .jesloo-carousel-content-wrapper .jesloo-carousel-content-wrapper-positioner {
      position: revert;
      left: revert;
      width: revert;
    }
  }*/