.elementor-53882 .elementor-element.elementor-element-0a21c5a{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-53882 .elementor-element.elementor-element-1c613be{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-53882 .elementor-element.elementor-element-1c613be.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}@media(min-width:768px){.elementor-53882 .elementor-element.elementor-element-0a21c5a{--content-width:1300px;}.elementor-53882 .elementor-element.elementor-element-1c613be{--width:93.462%;}}/* Start custom CSS for html, class: .elementor-element-3e8f8f4 */.page-container {
    display: flex;
}

.image-container {
    position: relative;
    width: 50%;
}

#background-image {
    width: 100%;
    height: auto;
}

.text-overlay {
    position: absolute;
    top: 50%; /* Center the overlay vertically */
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    text-align: center;
    white-space: nowrap; /* Prevent text from wrapping */
}

#text-overlay {
    font-size: 140px; /* Adjust as necessary */
    margin-bottom: 0.75in; /* Space between text and Braille (1/2 inch) */
}

#braille-overlay {
    font-size: 24px; /* Adjust as necessary */
    font-family: 'SimBraille', 'Arial', sans-serif;
    position: relative;
    top: 0; /* Keeps the Braille right below the text */
}

.controls-container {
    width: 50%;
    padding-left: 20px;
}

.input-container,
.font-picker,
.color-picker {
    margin-top: 20px;
    text-align: center;
}

#overlay-text {
    padding: 10px;
    width: 80%;
    font-size: 18px;
}

.color-options img {
    width: 60px;
    height: 60px;
    margin: 5px;
    cursor: pointer;
}

#font-select {
    padding: 10px;
    font-size: 16px;
}/* End custom CSS */