/* create_account.css */

/* General styles for the create account container */
.create-account-container {
    display: flex;
    flex-direction: row; /* Left-to-right layout */
    width: 100%;
    height: 100vh;
    background-color: #f5f5f5;
}

.create-account-button {
    width: 100%;
    padding: 12px;
    background-color: #44B18C;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    font-weight: 600;
}

.create-account-button:hover {
    background-color: #3a9b79;
}

/* Left panel for image with cover effect */
.create-account-image {
    flex: 1; /* Equal width to form */
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* Establish a relative container for positioning */
}

.create-account-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
}

/* Right panel for the form */
.create-account-form {
    flex: 1; /* Equal width to image */
    display: flex;
    flex-direction: column;
    background: #ffffff;
    padding: 40px;
    justify-content: center;
    align-items: center;
}

/* Styling for the text box within the left image */
.create-account-image {
    flex: 1; /* Equal width to form */
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative; /* Establish a relative container for positioning */
}

.create-account-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
    transform: translateX(-100%); /* Start fully offscreen to the left */
    animation: coverEffect 1.5s ease-in-out forwards; /* Cover effect animation */
}

/* Centering the text box within the image */
.image-text-box {
    position: absolute;
    display: flex;
    flex-direction: column; /* Allows proper formatting for content */
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.8); /* White box with 80% transparency */
    padding: 20px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 400px; /* Adjust the width as needed */
    text-align: left; /* Center-align the text */
    font-family: Arial, sans-serif;
    font-size: 26px;
    color: #2B3A67; /* Text color */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Correct centering offset */
    opacity: 0; /* Start invisible */
    animation: fadeInEffect 1s ease-in-out 1.5s forwards; /* Delay to start after image animation */
}

/* Bullet list styling */
.image-text-box ul {
    list-style-type: disc;
    padding-left: 20px; /* Indent the bullet points */
    margin: 0; /* Remove margin for better alignment */
}

.image-text-box ul li {
    margin-bottom: 15px; /* Space between bullet points */
}

/* Keyframes for the cover effect */
@keyframes coverEffect {
    from {
        transform: translateX(-100%); /* Start fully offscreen to the left */
    }
    to {
        transform: translateX(0); /* End fully onscreen */
    }
}

/* Keyframes for fade-in effect */
@keyframes fadeInEffect {
    from {
        opacity: 0; /* Fully transparent */
    }
    to {
        opacity: 1; /* Fully visible */
    }
}