body {
    background: #ececec;
    margin: 0;
    padding: 0;
    font-family:'Segoe UI', sans-serif;
}

.main-wrapper {
    width: 100%;
    margin: 0 auto; /* TOP-BOTTOM margin 0 */
    background: white;
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    height: 100vh; /* full height */
}

/* Left Panel – FULL image, NO GAP */
.left-panel {
    width: 80%;
    background: url(/assets/images/loginrigLeftImg.png) no-repeat center center/cover;
    position: relative;
    margin: 0;
    padding:0;
}

/* Left content should NOT add extra spacing */
.left-content {
    position: absolute;
    top: 40px;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
    h2 {
    color: #002f6fb0 !important;
}

.left-content img {
    width: 120px;
    margin-bottom: 15px;
}
.right-panel img {
    width: 120px;
    margin-bottom: 15px;
}

/* Right Panel */
.right-panel {
    width: 500px;
    background: #e7efff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center */
    align-items: center; /* horizontally center */
    text-align: center;
    gap: 15px; /* space between items */
}

    .right-panel button {
        width: 250px;
        height: 40px;
        border: none;
        border-radius: 6px;
        background: #0d6efd;
        color: white;
        font-size: 16px;
        cursor: pointer;
        transition: background 0.3s ease, opacity 0.3s ease;
    }
        /* Login Button */
        .right-panel button.login-btn {
            width: 250px;
            height: 40px;
            border: 2px solid black; /* black border */
            border-radius: 6px;
            background: transparent; /* transparent bg */
            color: black; /* black text */
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease; /* smooth hover effect */
        }

            /* Hover effect */
            .right-panel button.login-btn:hover {
                background: #0d6efd;
                color: white; /* white text */
                border-color: rgb(0, 47, 109);
            }


/*.creteAccount, .weltext {
    color: rgb(0, 47, 109);
}*/
#userRegistration, #userLogin:hover{
    cursor:pointer;
}