html
{
	font-size: 14px;
}

@media (min-width: 768px)
{
	html
	{
		font-size: 16px;
	}
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus
{
	box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html
{
	position: relative;
	min-height: 100%;
}

body
{
	margin-bottom: 60px;
}

/* Make carousel indicators white and slightly larger for better visibility on dark hero */
#heroCarousel .carousel-indicators [data-bs-target]
{
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: rgba(255,255,255,0.65);
	border: none;
	opacity: 1;
}

#heroCarousel .carousel-indicators .active
{
	background-color: #ffffff;
	box-shadow: 0 0 6px rgba(0,0,0,0.35);
}
/* Improve focus outline for accessibility */
#heroCarousel .carousel-indicators [data-bs-target]:focus
{
	outline: 2px solid rgba(255,255,255,0.25);
	outline-offset: 2px;
}

/* Make carousel prev/next controls (<> arrows) white and larger */
#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon
{
	width: 2.2rem;
	height: 2.2rem;
	background-size: 2.2rem 2.2rem;
	background-repeat: no-repeat;
	background-position: center;
	/* remove default gradient */
	background-color: transparent;
}

/* Left arrow (previous) - white SVG */
#heroCarousel .carousel-control-prev-icon
{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Right arrow (next) - white SVG */
#heroCarousel .carousel-control-next-icon
{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a .5.5 0 0 0 0 .708L10.293 8 4.646 13.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0z'/%3E%3C/svg%3E");
}

/* Slightly increase the clickable area for accessibility */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next
{
	width: 4.5rem;
}

/* Your original zoom effect */
.agwzoomover
{
	transition: transform .5s ease;
	cursor: pointer;
}

	.agwzoomover:hover
	{
		transform: scale(2);
	}