/* carousel */
 .carousel{
   position: relative;
}

.carousel_inner{
   width: 450px;
   overflow: hidden;
   padding: 20px 0px;
   /* border: solid; */
}

.carousel_inner::after{
   content: "";
   display: block;
   clear: both;
}

.carousel_item{
   position: relative;
   float: left;
   display: none;
   width: 100%;
   
   margin-right: -100%;
}

/* slide effect */
.carousel_item__active,
.carousel_item__pos_prev,
.carousel_item__pos_next{
   display: block;
}

.carousel_item__pos_prev{
   left: -100%;
}

.carousel_item__pos_next{
   left: 100%;
}

.carousel_item__prev{
   transform: translateX(100%);
   transition: transform .5s ease-in-out;
}

.carousel_item__next{
   transform: translateX(-100%);
   transition: transform .5s ease-in-out;
}

/* fade effect */
.carousel__fade .carousel_item__pos_prev,
.carousel__fade .carousel_item__pos_next{
   left: 0;
   opacity: 0;
}

.carousel__fade .carousel_item__prev,
.carousel__fade .carousel_item__next{
   transform: none;
   opacity: 1;
   transition: opacity .5s ease-in-out;
}

.carousel__fade .carousel_item__active.carousel_item__prev,
.carousel__fade .carousel_item__active.carousel_item__next{
   opacity: 0;
}

/* carousel */
.carousel_img{
   display: block;
   width: 100%;
   object-fit: contain;
   height: 450px;
}

.carousel_item__active{
   width: auto;
 }
.carousel_caption {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: fit-content;
  padding: 0rem 2rem;
  text-align: center;
  color: #fff;
  z-index: 1;
  border-radius: 10px;
  /* Shadow Background */
  background: linear-gradient(to top, rgba(0, 56, 84, 0.8), rgba(0, 0, 0, 0.3)); 

}

.carousel_title{
   font-family: "Montserrat", sans-serif;
   font-weight: 600;
   font-size: 16px;
   width: 100%;

}

.carousel_description{
   margin-top: .75rem;
   font-size: 14px;
   width: 100%;
   line-height: 150%;
}

.carousel_indicator{
   position: absolute;
   bottom: 1rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: row;
   gap: .5rem;
   z-index: 1;

}

.carousel_dot{
   display: block;
   padding: .12rem;
   background-color: rgba(255, 255, 255, .25);
   border: none;
   /* border-radius: 50%; */
   width: 15px;
   cursor: pointer;
   transition: background-color .5s ease-in-out;
}

.carousel_dot__active{
   background-color: lightskyblue;
   cursor: default;
   pointer-events: none;
}

.carousel_control{
   position: absolute;
   display: none;
   top: 0;
   left: 0;
   /* display: flex; */
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   height: 100%;
}

.carousel_button{
   display: block;
   padding-inline: 1rem;
   font-family: "Raleway", sans-serif;
   font-size: 1.375rem;
   background-color: transparent;
   color: rgba(255, 255, 255, .25);
   border: none;
   cursor: pointer;
   transition: color .25s;
   z-index: 1;
}

.carousel_button:hover{
   color: rgba(135, 206, 250, .75);
}





@media only screen and (max-width:756px) {
  
/* carousel */
.carousel{
  position: relative;
  width: 100%;
}

.carousel_inner{
  width: 100%;
  padding: 10px 0px;
  overflow: hidden;

  /* border: solid; */
}

.carousel_inner::after{
  content: "";
  display: block;
  clear: both;
}

.carousel_item{
  position: relative;
  float: left;
  display: none;
  width: 100%;
  margin-right: -100%;
}

/* slide effect */
.carousel_item__active,
.carousel_item__pos_prev,
.carousel_item__pos_next{
  display: block;
}

.carousel_item__pos_prev{
  left: -100%;
}

.carousel_item__pos_next{
  left: 100%;
}

.carousel_item__prev{
  transform: translateX(100%);
  transition: transform .5s ease-in-out;
}

.carousel_item__next{
  transform: translateX(-100%);
  transition: transform .5s ease-in-out;
}

/* fade effect */
.carousel__fade .carousel_item__pos_prev,
.carousel__fade .carousel_item__pos_next{
  left: 0;
  opacity: 0;
}

.carousel__fade .carousel_item__prev,
.carousel__fade .carousel_item__next{
  transform: none;
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.carousel__fade .carousel_item__active.carousel_item__prev,
.carousel__fade .carousel_item__active.carousel_item__next{
  opacity: 0;
}

/* carousel */
.carousel_img{
  display: block;
  width: 100%;
  object-fit: contain;
  height: 300px;
}

.carousel_caption{
  /* border: solid; */
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: fit-content;
  height: fit-content;
  padding: 0rem 0rem;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  /* Shadow Background */
  background: linear-gradient(to top, rgba(0, 56, 84, 0.8), rgba(0, 0, 0, 0.3)); 
  z-index: 1;
}

.carousel_item__active{
   width: 100%;
 }

.carousel_title{
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.carousel_description{
  margin-top: .50rem;
  font-size: 14px;
  line-height: 150%;
  padding: 0 0;
}

.carousel_indicator{
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: .5rem;
  z-index: 1;

}

.carousel_dot{
  display: block;
  padding: .12rem;
  background-color: rgba(255, 255, 255, .25);
  border: none;
  /* border-radius: 50%; */
  width: 15px;
  cursor: pointer;
  transition: background-color .5s ease-in-out;
}

.carousel_dot__active{
  background-color: lightskyblue;
  cursor: default;
  pointer-events: none;
}

.carousel_control{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  /* display: flex; */
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.carousel_button{
  display: block;
  padding-inline: 1rem;
  font-family: "Raleway", sans-serif;
  font-size: 1.375rem;
  background-color: transparent;
  color: rgba(255, 255, 255, .25);
  border: none;
  cursor: pointer;
  transition: color .25s;
  z-index: 1;
}

.carousel_button:hover{
  color: rgba(135, 206, 250, .75);
}


}