.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 */ }