html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal overflow */

  background-color: #000000;
}

body {
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: 100vh;
  width: 100%;

  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.centering-container {
  display: flex;
  justify-content: center; /* Center container horizontally */
  align-items: center; /* Center container vertically */
  width: 100%; /* Adapt to body width */
  max-width: 1280px; /* Maximum width for the content */
}

.grid-container {
  display: flex;
  justify-content: center; /* Center items within the container */
  align-items: center; /* Align items vertically in the center */
  width: 100%;
}

.grid-item {
  display: flex;
  flex-direction: column; /* Stack children vertically */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  width: 100%;
}


.image-link {
  display: flex; /* Ensure this is flex to center the image inside */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  width: 100%; /* Full width to contain the image */
  position: relative;
}

.image-link img {
  width: 70%; /* Control image width while maintaining aspect ratio */
  height: auto;
  transition: transform 0.3s ease; /* Ensure smooth transition */
}

.image-link::before {
  /* Retain existing properties for the hover effect */
}

.image-link:hover::before {
  background-color: rgba(255, 255, 255, 0.2); /* Subtle white overlay */
}

.image-link:hover img {
  transform: scale(1.05); /* Scale effect on hover */
}



.image-description {
  color: white; /* Set text color */
  text-align: center; /* Center the text horizontally */
  font-family: Arial, Helvetica, sans-serif; /* Specify the font */
  font-size: 16px; /* Adjust font size as needed */
  margin-top: 20px; /* Add some space between the image and the text */
  width: 100%; /* Ensure the text container matches the image/link width for consistency */
}

.contact-link {
  color: rgba(255, 255, 255, 0.7); /* Set the link color */
  font-weight: 900; 
  text-decoration: none;
}

.contact-link:hover {
  text-decoration: underline; /* Optional: Add underline on hover for better visibility */
}




@media screen and (max-width: 800px) {
  .grid-item {
      flex-basis: 100%; /* Adjust for smaller screens */
  }
}