/* // tw-carousel.css */

	.carousel-container {
		overflow: hidden;
		position: relative;
		width: 100%; /* Allows responsive width up to your Tailwind max-w-* class */
		/*max-width: 896px; this is the max-w-4x1 use one onky setting in teh index.html gallery container div*/
		margin-left: auto; 
		margin-right: auto; 
		max-height: 320px; /* Sets the maximum height of the carousel container */
	}


	@media (min-width: 640px) { /* Tailwind 'sm' breakpoint - larger phones/small tablets */
		.carousel-container {
			max-height: 400px;
		}
	}


	@media (min-width: 768px) { /* Tailwind 'md' breakpoint */
		.carousel-container {
			max-height: 520px;
		}
	}


	@media (min-width: 1024px) { /* Tailwind 'lg' breakpoint */
		.carousel-container {
			max-height: 600px; /* Or your preferred max height for desktops */
		}
	}


	.carousel-images {
		display: flex; 
		transition: transform 0.5s ease-in-out; 
		position: relative;
		width: 100%; /* Necessary for the transformX to work correctly based on full width slides */
   }


	.carousel-images img {
		width: 100%;      /* Each image takes 100% width of its 'slot' (the carousel's viewport width) */
		height: 100%;     /* Image will try to fill 100% of the height of the .carousel-images container */
		flex-shrink: 0;
		object-fit: contain; /* Fits the entire image within the bounds, respecting aspect ratio. */
		border-radius: 0.5rem;
	}


	.carousel-button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background-color: rgba(0, 0, 0, 0.5); 
		color: white;
		padding: 0.5rem 1rem;
		border: none;
		cursor: pointer;
		z-index: 10; 
		border-radius: 0.25rem; 
		transition: background-color 0.3s ease; 
	}


	.carousel-button:hover {
		background-color: rgba(0, 0, 0, 0.7); 
	}


	.carousel-button.prev {
		left: 1rem;
	}


	.carousel-button.next {
		right: 1rem;
	}


	.carousel-dots {
		position: absolute;
		bottom: 1rem; 
		left: 50%;
		transform: translateX(-50%); 
		display: flex;
		gap: 0.5rem; 
		z-index: 10; 
		justify-content: center; 	/* If you want the group of visible dots centered */
		align-items: center;
	}


	.carousel-dot {
		width: 10px;
		height: 10px;
		background-color: rgba(255, 255, 255, 0.5); 
		border-radius: 50%; 
		cursor: pointer;
		transition: background-color 0.3s ease; 
	}


	.carousel-dot.active {
		background-color: rgba(255, 255, 255, 1); 
	}


	/* Optional: Styles for "ellipsis" or "jump" indicators if you add them */
	.carousel-ellipsis-dot {
		/* Style like a dot, but maybe slightly different or with '...' */
		padding: 0 5px; /* Adjust as needed */
		color: rgba(255, 255, 255, 0.7); /* Or your dot color */
		cursor: default; /* If not clickable */
	}


	#toggleSlideButton {
		position: absolute; 
		bottom: 2rem; 
		left: 50%;
		transform: translateX(-50%); 
		background-color: rgba(0, 0, 0, 0.5); 
		color: white; 
		padding: 0.75rem; 
		border: none;
		border-radius: 50%; 
		cursor: pointer;
		z-index: 10; 
		transition: background-color 0.3s ease; 
		display: flex; 
		align-items: center;
		justify-content: center;
	}


	#toggleSlideButton:hover {
		background-color: rgba(0, 0, 0, 0.7); 
	}


	#toggleSlideButton svg {
		display: block; 
	}