.pdf-download-wrap {
    display: flex;
    justify-content: center; /* centers the child elements horizontally */
    align-items: center; /* centers the child elements vertically */
    /* ensure the container takes up the full width if necessary, or specify a width */
    width: 100%;
}

.download-button {
    display: inline-flex; /* this keeps the button's width according to its content */
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background-color: transparent;
    border: 2px solid #2b6cb0;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none; /* ensures no underline */
    color: #3182ce;
    transition: all .3s ease-in-out;
    font-size: 1.125rem;
    /* you can specify a max-width here if you want */
    /* max-width: 200px; */
}

.download-button .icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    fill: #3182ce;
    transition: fill 0.3s;
}

.download-button:hover {
    background-color: #2b6cb0;
    color: #ffffff;
    text-decoration: none; /* this rule is redundant since it's already specified above */
}

.download-button:hover .icon {
    fill: #ffffff;
}