body {
  margin: 0; 
  font-family: sans-serif; 
}

/* Top Bar Styles */
.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #f0f0f0; /* Light gray background */
  padding: 10px 20px;
  position: sticky; /* Add this to make the top bar sticky */
  top: 0; /* Stick the top bar to the top of the viewport */
  z-index: 100; /* Ensure the top bar is above other elements */
}

.social-icons {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-right: 50px;
}

.social-icons img {
  width: 24px; 
  height: 24px; 
  margin-left: 10px; 

}

.social-icons a { /* Style the links (the <a> tags) */
  display: inline-block; /* Make the links behave like inline-block elements */
  position: relative; /* Needed for positioning the underline */
  text-decoration: none; /* Remove default underline */
}

.social-icons a::after { /* Create the underline using a pseudo-element */
  content: '';
  position: absolute;
  bottom: -2px; /* Adjust position as needed */
  left: 0;
  width: 100%;
  height: 2px; /* Adjust thickness as needed */
  background-color: #07A53A; /* Underline color */
  transform: scaleX(0); /* Initially hide the underline */
  transition: transform 0.3s ease; /* Add a smooth transition */
}

.social-icons a:hover::after {
  transform: scaleX(1); /* Show the underline on hover */
}