.reaction-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 80%;
            margin: auto;
        }
        .reaction {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;
            font-size: 20px; /* Changed font size to 20px */
            flex-wrap: wrap;
        }
        .compound-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 5px 15px; /* Added margin-bottom for vertical gap */
            text-align: center;
        }
        .compound {
            font-weight: bold;
        }
        .description {
            font-size: 18px;
        }
        .arrow {
            font-size: 30px;
            text-align: center;
            margin: 0 5px;
        }
        .water {
            color: blue;
        }
        .carbon-dioxide {
            color: red;
        }
        .carbonic-acid {
            color: green;
        }
        .bicarbonate {
            color: purple;
        }
        .forsterite {
            color: orange; /* Unique color for Mg2SiO4 */
        }

    /* Adjust image size for smaller screens */
    img {
      max-width: 100%;
      height: auto;
    }
    .right-align-lg {
      text-align: right;
    }
    .center-align-xs {
      text-align: center;
    }
    @media (max-width: 991.98px) {
      .right-align-lg {
        text-align: center;
      }
    }