/* Custom CSS for the fade-in effect */
.lazy {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
.loaded {
    opacity: 1;
}
.jacquard-font {
  font-family: "Jacquard 12", system-ui;
  /* Since this font only has one weight, you can omit font-weight and font-style, as they'll default to 'normal' anyway. */
}

/* Specific styles for the main heading */
.main-title {
  font-size: 72px;
}

/* Specific styles for the subheading */
.subheading {
  font-size: 36px;
  color: yellow;
}

/* New styles for the image containers */
.image-container {
    max-width: 90vw; /* This sets the maximum width to 90% of the viewport width */
    height: auto; /* Maintains the aspect ratio */
    margin: 0 auto; /* Centers the container horizontally */
    margin-bottom: 5vw; /* Adds space between images */
}

/* Adjust the image within the container */
.image-container img {
    width: 100%; /* Makes the image fill its container */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
}