html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0; /* Optional: background color for the body */
    overflow: hidden; /* Prevent scrolling */
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Align children horizontally in the center */
    justify-content: center; /* Align children vertically in the center */
    width: 80%; /* Percentage of the viewport width */
    height: auto; /* Height to be determined by content */
    max-width: 600px; /* Maximum width of the container */
    max-height: 100%; /* Maximum height of the container */
}

.responsive-image {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    max-height: 80vh; /* Maximum height relative to the viewport */
    object-fit: contain;
}

.icon-container {
    display: flex;
    justify-content: center; /* Center icons horizontally */
    align-items: center; /* Center icons vertically */
    margin-top: 20px; /* Space between image and icons */
}

.icon {
    width: 40px; /* Icon width */
    height: 40px; /* Icon height */
    margin: 0 10px; /* Space between icons */
}