/* showcase page carousels */
.carousel-frame {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	text-align: center; /* Center the carousel */
}
.owl-carousel .item {
    position: relative;
    padding: 2px;
    /* background: #f4f4f4; */
    color: white;
    /* border-radius: 5px; */
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* height: 300px;  */
    max-width: 400px; /* Adjust the max width to make slides smaller */
    margin: 0 auto;
}
.owl-carousel .item img {
	max-width: 100%;
	height: auto;
	/* border-radius: 10px; */
}
.carousel-caption {
    margin-top: 10px; /* Add spacing between the image and caption */
    padding: 10px;
    background: rgba(0, 0, 0, 0.6); /* Dark background for caption */
    color: white;
    border-radius: 5px;
    text-align: center; /* Center align text */
    width: 100%; /* Make caption span the entire slide width */
}
.carousel-caption p {
    font-style: italic; /* Make the description text italic */
    color: white; /* Ensure the description text is white */
    margin: 0; /* Remove any default margins */
	text-align: left;
}
.nav_butt {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 50%;
	z-index: 4;
	cursor: pointer;
}
.nav_butt:hover {
	background-color: rgba(0, 0, 0, 0.8);
}
.nav_butt_right {
	right: 0;
}
.nav_butt_left {
	left: 0;
}
.owl-theme .owl-dots {
	position: static !important; /* Reset the position to default */
	text-align: center !important; /* Center the dots */
	width: auto !important; /* Allow width to adjust based on content */
	float: none !important; /* Remove any floating behavior */
	padding-top: 15px; /* Add space above the dots */
}
/* Override global button styles specifically for Owl Carousel dots */
button.owl-dot {
    position: static !important; /* Reset any positioning */
    text-align: center !important; /* Ensure text is centered */
    width: auto !important; /* Allow width to be determined by content */
    float: none !important; /* Remove any floating */
    margin: 0 5px !important; /* Adjust spacing between dots */
    background: none !important; /* Remove any background */
    border: none !important; /* Remove any borders */
    padding: 0 !important; /* Remove padding */
}
button.owl-dot span {
    width: 20px !important; /* Set the width of the dots */
    height: 12px !important; /* Set the height of the dots */
    background-color: #888 !important; /* Inactive dot color */
    border-radius: 50% !important; /* Make dots circular */
    display: inline-block !important;
    transition: background-color 0.3s ease !important;
}
button.owl-dot.active span {
    background-color: #555 !important; /* Active dot color */
}
.owl-carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the image covers the entire item without distortion */
    /* border-radius: 10px; */
}
/* Make the titles inside the caption white */
.carousel-caption h4 {
    height: 50px; /* Set the height to 50 pixels */
    line-height: 50px; /* Vertically center the text */
    overflow: hidden; /* Hide overflow if the text is too long */
    white-space: nowrap; /* Prevent text from wrapping to a new line */
    text-overflow: ellipsis; /* Add ellipsis (...) if the text overflows */
    color: white; /* Ensure the title is white */
    font-weight: bold;

}
.item p {
    margin: 10px !important;
}
.owl-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  #sc-content .title-container h4 {
    text-align:left;
    margin-left: 10px;
  }