.elementor-428 .elementor-element.elementor-element-7231a2d{--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;--border-radius:0px 0px 0px 0px;}.elementor-428 .elementor-element.elementor-element-7231a2d:not(.elementor-motion-effects-element-type-background), .elementor-428 .elementor-element.elementor-element-7231a2d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DB4A2B;}.elementor-428 .elementor-element.elementor-element-6c7879f{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-428 .elementor-element.elementor-element-cf9b7e8{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-428 .elementor-element.elementor-element-a19c6e4{text-align:left;}.elementor-428 .elementor-element.elementor-element-a19c6e4 .elementor-heading-title{color:var( --e-global-color-astglobalcolor4 );}.elementor-428 .elementor-element.elementor-element-13defae{--display:flex;--border-radius:50px 50px 50px 50px;}.elementor-428 .elementor-element.elementor-element-13defae:not(.elementor-motion-effects-element-type-background), .elementor-428 .elementor-element.elementor-element-13defae > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor4 );}.elementor-428 .elementor-element.elementor-element-2d68d43 > .elementor-widget-container{margin:0px 0px 0px 7px;}.elementor-428 .elementor-element.elementor-element-2d68d43 .elementor-heading-title{color:#DB4A2B;}.elementor-428 .elementor-element.elementor-element-09a3844{--display:flex;}.elementor-428 .elementor-element.elementor-element-42a35fc > .elementor-widget-container{margin:-46px 0px 0px 0px;}@media(min-width:768px){.elementor-428 .elementor-element.elementor-element-6c7879f{--width:60%;}.elementor-428 .elementor-element.elementor-element-13defae{--width:40%;}}/* Start custom CSS for login-form, class: .elementor-element-830348e *//* Customizing the Login Button */
input.button[name="submit_login"] {
    background-color: #db4a2b !important; /* Example: A nice green for login */
    color: white !important;
    border: none !important;
    border-radius: 5px !important;
    padding: 12px 25px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase !important; /* Optional: Make text uppercase */
    width: 100%; /* Make button full width if desired for consistency with the new register button */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    margin-bottom: 20px; /* Add some space below the login button */
}

/* Hover state for the Login Button */
input.button[name="submit_login"]:hover {
    background-color: #4cae4c !important; /* Darker green on hover */
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-42a35fc *//* --- CSS for "OR" separator and Register button --- */

/* Wrapper for "OR" and Register Button */
.login-or-register-wrap {
    text-align: center; /* Center block-level children horizontally */
    margin-top: 0; /* No extra margin on top, relies on login button's margin-bottom */
    margin-bottom: 20px; /* Space below this entire section */
}

/* Styling for the "OR" text (on its own line with horizontal rules) */
.login-or-separator {
    display: block; /* Make it a block element to take its own line */
    font-size: 14px;
    color: #888; /* Grey color for the "OR" text */
    margin: 15px 0; /* Vertical margin around "OR" */
    position: relative;
    line-height: 1; /* Helps with vertical alignment of text and lines */
}

/* Lines on the sides of "OR" */
.login-or-separator::before,
.login-or-separator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%; /* Adjust line length as needed */
    height: 1px;
    background: #ddd; /* Color of the line */
}

.login-or-separator::before {
    left: 0;
    transform: translateX(-100%); /* Position line to the left */
}

.login-or-separator::after {
    right: 0;
    transform: translateX(100%); /* Position line to the right */
}


/* Styling for the Register Account BUTTON */
.register-custom-button {
    /* Make it behave like a full-width button, matching login button dimensions */
    display: block !important; /* Forces it to be a block element */
    width: 100% !important; /* Takes full width of its parent container */
    box-sizing: border-box; /* Ensures padding and border are included in the 100% width */
    margin-left: auto; /* Centers the block element */
    margin-right: auto; /* Centers the block element */

    /* Initial "graded out black" appearance */
    background-color: #555555 !important; /* Graded out black */
    color: #eeeeee !important; /* Light grey text */
    border: none !important;
    
    /* Dimensions and general styling matching login button */
    border-radius: 5px !important;
    padding: 12px 25px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    text-transform: uppercase !important; /* Optional: Make text uppercase */
    text-decoration: none !important; /* Ensure no underline from being an <a> tag */
}

/* Hover state for the Register Account BUTTON */
.register-custom-button:hover {
    background-color: #db4a2b !important; /* Your desired hover color */
    color: white !important; /* White text on hover */
    transform: translateY(-1px); /* Slight lift effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}/* End custom CSS */