.info-boxes {
	display: flex;
	justify-content: space-around;
	margin-top: 2rem;
	margin-bottom: 2rem;
    padding: 20px;
	flex-wrap: wrap;
}

.info-box {
	background-color: #e9ecef;
	border-radius: 0.5rem;
	padding: 1.5rem;
	text-align: center;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
	width: 30%;
	min-width: 250px;
	margin-bottom: 1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transitions for smooth effect */
    box-sizing: border-box;
}

.info-box:hover {
    transform: translateY(-5px); /* Move the box slightly up */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); /* Increase the shadow */
}

.info-box h3 {
	font-size: 1.25rem;
	font-weight: 600;
	color: #333;
	margin-bottom: 1rem;
}

.info-box p {
	font-size: 1rem;
	font-weight: 300;
	color: #555;
}

ul.home-panel {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 25px; /* Removes default left padding from the UL */
    text-align: left; /* Ensures text aligns left within the info-box */
}

ul.home-panel li {
    font-size: 1.0rem;
    color: #555;
    padding: 3px 0; /* Adds a little vertical padding for spacing between list items */

    white-space: nowrap; /* Forces text to stay on a single line */
    overflow: hidden;     /* Hides any content that overflows the element's box */
    text-overflow: ellipsis; /* Displays an ellipsis (...) to indicate truncated text */
    /* -------------------------------------------------------- */

    /* --- Styles for Individual Item Hover --- */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Changes mouse cursor to a pointer, indicating interactivity */
}

ul.home-panel li:hover {
    background-color: #d8dee9; /* A subtle light blue/gray background on hover */
    color: #004d99; /* Changes text color to match your header blue on hover */
    /* Optional: You could add a subtle transform here if you want a tiny lift */
    /* transform: translateX(3px); */
}