style.css

.image-gallery-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
}

.image-gallery {
	width: 80%; /* Increased width */
	max-height: 600px; /* Increased height */
	overflow: hidden;
	position: relative;
	margin-left: 50px;
	margin-right: 50px;
}

.image-gallery img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: none;
}

.image-gallery img.active {
	display: block;
}

.arrow {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2.5em;
	color: #444; /* Darker color */
	padding: 5px 15px;
	transition: color 0.3s;
	user-select: none;
	transform: scaleX(0.7);
}

.arrow:hover {
	color: #007bff; /* Color on hover */
}

.left-arrow {
	left: 20px; /* Adjusted position */
}

.right-arrow {
	right: 20px; /* Adjusted position */
}

.group-title {
	font-size: large;
	font-weight: bold;
	margin-top: 30px;
	font-size: 1.2em;
	text-align: center; /* Center the text */
	display: block; /* Ensure it behaves as a block element */
	margin-bottom: 10px; /* Add some space below the title */
}

.green {
  color: green; /* Set text color to green */
}

.red {
  color: red; /* Set text color to green */
}

.section-title {
  text-align: center;
}


.publication-links {
    text-align: center;
    margin-top: 20px;
}

.link-block {
    display: inline-block;
    margin: 8px; /* Increase spacing between buttons */
}

.button {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px; /* Larger padding for bigger buttons */
    text-decoration: none;
    color: black; /* Fixed text color */
    background-color: rgb(236, 236, 236); /* Dark background color */
    border-radius: 25px; /* Rounded corners */
    font-size: 18px; /* Larger font size */
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #495057; /* Slightly lighter on hover */
    color: white; /* Ensure text color remains white on hover */
}

.icon {
    margin-right: 8px; /* Adjust spacing between icon and text */
    font-size: 20px; /* Larger icon size */
}

/* Adjust font size for icons */
.fas, .fab, .ai {
    font-size: 20px; /* Ensuring all icons match the new size */
}

.image-gallery img {
	display: none; /* Hide all images by default */
}

.image-gallery img.active {
	display: block; /* Show only the image with the active class */
}