@font-face {font-family:'jura';src: url('Jura.ttf');}
@font-face {font-family:'rupee';src: url('Rupee_Foradian.ttf');}
@font-face {font-family:'abel';src: url('abel-regular.ttf');}
@font-face {font-family:'mm';src: url('EPAOMAYEK.TTF') format('truetype');}
@font-face {font-family:'roboto_cr';src: url('RobotoCondensed_Regular.ttf');}
@font-face {font-family:'roboto';src: url('Roboto-Regular.ttf');}
@font-face {font-family:'popins';src: url('Poppins-Regular.ttf');}
@font-face {font-family:'mohave_l';src: url('mohave.light.ttf');}
@font-face {font-family:'mohave_r';src: url('mohave.regular.ttf');}
@font-face {font-family:'mohave_m';src: url('mohave.medium.ttf');}
@font-face {font-family:'mulish_el';src: url('Mulish-ExtraLight.ttf') format('truetype');}
@font-face {font-family:'mulish_l';src: url('Mulish-Light.ttf') format('truetype');}
@font-face {font-family:'mulish_r';src: url('Mulish-Regular.ttf') format('truetype');}
@font-face {font-family:'roboto_r';src: url('RobotoCondensed_Regular.ttf') format('truetype');}

body { background: linear-gradient(135deg, #6398fe 0%, #ff3100 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-container { width: 100%; max-width: 1200px; padding: 20px; }
.login-wrapper { display: flex; background: white; border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); overflow: hidden; min-height: 600px; }
.brand-section { flex: 1; background: linear-gradient(135deg, #a2bbec 0%, #6398fe 100%); color: white; padding: 60px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.company_logo_container { margin-bottom: 30px; }
.company_logo { max-width: 250px; height: auto; border-radius: 12%; border: 4px solid rgba(255, 255, 255, 0.2); background: #fff; }

.client_logo { max-width: 300px; height: auto; border-radius: 10%; border: 2px solid rgba(255, 255, 255, 0.2); background: #fff; }
.product_logo { max-width: 100px; height: auto; border-radius: 12%; border: 1px solid rgba(255, 255, 255, 0.2); background: #fff; }
.brand-info h1 { font-size: 2.5rem; margin-bottom: 10px; font-weight: 700; }
.brand-info h2 { font-size: 1.5rem; margin-bottom: 10px; font-weight: 600; }
.brand-info p { font-size: 1.1rem; opacity: 0.9; }
footer{background-color:#000;clear:both;text-align:center;padding:10px 0;color:#888;position:fixed;bottom:0;width:100%;z-index:10}
#flashMsg{position:fixed;background-color:rgba(0,0,0,0.8);height:100%;width:100%;z-index:90000;top:0;box-sizing:border-box;display:none;transition: visibility 0s, opacity 0.5s linear;}
#flashMsg .msg{background-color:#fff;padding:10px 20px;border:solid 2px #999;border-radius:2px;color:#000;position: fixed;min-width:180px;top: 50%;left: 50%;transform: translate(-50%, -50%);}

.popFormCont{color:#333;display:none;width:550px;position:fixed;top:60px;border:solid 3px #69f;background-color:#f6f6ff;z-index:1001;box-shadow:0 0 5px #000;}
.popFormCont{top:40%;left:0;right:0;margin:auto;width:auto;}
.popFormCont h3{text-transform:uppercase;padding:5px 2px 6px 0px;font-size:1.6em;font-weight:bold;margin:0;background-color:#69f;color:#fff;text-align:center}
.popFormCont h4 {  text-transform: uppercase;  padding: 5px 2px 6px 0px;  font-size: 1.2em;  font-weight: bold;  margin: 0;  color: #55688e;}
.popFormCont .close{background-color:#e00;float:right;color:#fff;font-size:0.5em;font-family:'verdana';width:18px;height:18px;line-height:18px;cursor:pointer;text-align:center;border-radius:20px;}

.company-info {    display: flex;    flex-direction: column;    align-items: center;    justify-content: center;    text-align: center;    gap: 15px; padding: 10px;}

.product-logos-row {display: flex;    justify-content: center;    align-items: center;    gap: 15px;    flex-wrap: wrap;}

.product_logo_container {flex: 0 0 auto; width: 80px; /* or whatever size you prefer */ height: 80px; display: flex; justify-content: center;align-items: center;}
.product_logo_container img { max-width: 100%;max-height: 100%;object-fit: contain;}
/* Fixed Login Section */
.login-section { flex: 1; padding: 40px 20px; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 320px; margin: 0 auto; } /* Centered and proper width */
.login-header { text-align: center; margin-bottom: 30px; }
.login-header h2 { font-size: 1.8rem; color: #333; margin-bottom: 8px; font-weight: 600; }
.login-header p { color: #666; font-size: 0.95rem; margin: 0; }
.login-form { width: 100%; padding: 0; }
.form-group { margin-bottom: 20px; width: 100%; } /* Fixed width and spacing */
.input-container { position: relative; width: 100%; display: block; }
.form-input { width: 90%; padding: 12px 0 12px 45px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 0.95rem; transition: all 0.3s ease; background: #f8f9fa; margin: 0; margin:auto;} /* Fixed padding and margin */
.form-input:focus { outline: none; border-color: #667eea; background: white; box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1); }
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: #667eea; }
.button { width: 100%; padding: 12px; background: linear-gradient(135deg, #ff3100 0%, #ff3100 100%); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; display: block; } /* Fixed display */
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); }
.button:active { transform: translateY(0); }
.login-footer { text-align: center; margin-top: 20px; width: 100%; }
.forgot-link { color: #667eea; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; display: inline-block; margin-top: 5px; text-transform: uppercase; }
.forgot-link:hover { color: #764ba2; text-decoration: underline; }
.compatibility-message { text-align: center; margin-top: 20px; color: white; font-size: 0.9rem; opacity: 0.8; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.login-card { animation: fadeIn 0.6s ease-out; }
.form-input:focus { transform: translateY(-1px); }
.button:focus { outline: 3px solid rgba(102, 126, 234, 0.3); outline-offset: 2px; }

/* Responsive Design */
@media (max-width: 768px) { 
    .login-wrapper { flex-direction: column; min-height: auto; } 
    .brand-section { padding: 40px 20px; } 
    .login-section { padding: 30px 20px; } 
    .brand-info h1 { font-size: 2rem; } 
    .brand-info h2 { font-size: 1.3rem; } 
    .login-card { max-width: 280px; }
}
@media (max-width: 480px) { 
    .login-container { padding: 10px; } 
    .brand-section, .login-section { padding: 20px 15px; } 
    .logo { max-width: 120px; } 
    .login-card { max-width: 260px; }
    .form-input { padding: 10px 40px 10px 40px; font-size: 0.9rem; }
    .button { padding: 10px; font-size: 0.95rem; }
}