html,
body {
    height: 100%;
    /* Make sure the html and body are taking full height */
    margin: 0;
    padding: 0;
}

.call-to-action {
    display: flex;
    /* Enables Flexbox */
    flex-direction: column;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    height: 100vh;
    /* Full viewport height */
    text-align: center;
    /* Center text */
    padding: 20px;
    /* Add some padding */
}

.cta-content {
    max-width: 600px;
    /* Maximum width of the content */
}

.cta-buttons {
    display: flex;
    justify-content: center;
    /* Center buttons horizontally */
    gap: 10px;
    /* Space between buttons */
    flex-wrap: wrap;
    /* Wrap buttons to next line on small screens */
}

.cta-button {
    flex: 1 1 auto;
    /* Buttons take equal space */
    min-width: 120px;
    /* Minimum width of buttons */
    padding: 10px 20px;
    /* Padding inside buttons */
    text-align: center;
    /* Center text inside buttons */
    margin-top: 10px;
    /* Space above buttons */
}

.email-subscription {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-end;
    /* Aligns content to the bottom */
    min-height: 100vh;
    /* Ensures the section takes at least the height of the viewport */
    padding: 20px;
    /* Adds padding for aesthetics */
}

.email-subscription .call-to-action {
    height: 20;
    width: 100%;
    /* Ensures the content uses the full width */
    max-width: 600px;
    /* Optional: Restricts the content width for better readability */
    margin: 0 auto;
    /* Centers the content horizontally */
}