* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Bungee Shade', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    /* Use bgimage.jpg as the background for the body with a dark overlay */
    body {
      background: 
        linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)),
        url('1.jpg') no-repeat center center/cover;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Main container styling with modern shadow and rounded corners */
    .container {
      width: 90%;
      max-width: 1000px;
      height: 600px;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 15px;
      display: flex;
      overflow: hidden;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      animation: fadeIn 1s ease-in-out;
    }
    
    /* Left Panel: Blue gradient background (complaints tile color) with slide-in animation */
    .left-panel {
      flex: 1;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: slideInLeft 0.8s ease-out;
      
    }
    
    #header-logo {
    position: absolute; /* Position the logo absolutely within the header */
    top: 10px; /* Adjust vertical position */
    left: 10px; /* Adjust horizontal position */
    width: 150px; /* Reduced size for better responsiveness */
    height: 100px;
}


    .left-panel .left-content {
      text-align: center;
      padding: 20px;
      color: black;
    }
    .left-panel h2 {
      font-size: 26px;
      letter-spacing: 3px;
      margin-bottom: 15px;
    }
    .left-panel h1 {
      font-size: 56px;
      margin-bottom: 20px;
    }
    .left-panel .subtitle {
      font-size: 20px;
      font-weight: 300;
      margin-bottom: 15px;
      color: #FFA500
    }
    
    /* Right Panel: Orange gradient background with slide-in animation */
    .right-panel {
      flex: 1;
      background: #066965;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 50px;
      animation: slideInRight 0.8s ease-out;
    }
    /* Form container placed on top of the orange background */
    .form-container {
      width: 100%;
      max-width: 400px;
      background: #fff;
      border-radius: 10px;
      padding: 40px 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    .form-title {
      text-align: center;
      font-size: 32px;
      margin-bottom: 40px;
      color: #ffffff;
    }
    
    /* Input Group with icons */
    /* Input Group container */
.input-group {
  position: relative;
  margin-bottom: 20px;
}
/* Base styling for all icons */
.input-group i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
}
/* Username & Password Input Fields */
.input-group input {
  width: 100%;
  padding: 12px 15px 12px 45px; /* extra left padding for icon */
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

/* Focus state for inputs */
.input-group input:focus {
  border-color: #1abc9c;
  box-shadow: 0 0 10px rgba(26,188,156,0.5);
  outline: none;
}

/* Hospital Select Field - For screens wider than 576px */
@media (min-width: 577px) {
  .input-group select {
    width: 100%;
    padding: 12px 15px 12px 45px; /* extra left padding to account for icon */
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 16px;
    transition: border 0.3s ease;
    text-align: left;
  }
  /* Ensure hospital icon is visible on larger screens */
  .input-group i.fa-hospital {
    display: block;
  }
}

/* Hospital Select Field - For mobile screens (<=576px) */
@media (max-width: 576px) {
  .input-group select {
    width: 100%;
    padding: 12px 15px; /* use equal padding so text is centered */
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 16px;
    transition: border 0.3s ease;
    text-align: center;
    text-align-last: center; /* centers the selected option in Chrome/Firefox */
  }
  /* Hide hospital icon on mobile for cleaner look */
  .input-group i.fa-hospital {
    display: none;
  }
}

/* Focus state for select field */
/* Base styling for input-group icons and inputs */
.input-group i:not(.toggle-password) {
  left: 15px;
}
.input-group i.toggle-password {
  left: auto;
  right: 10px;
}
/* Toggle Password Icon (eye) (right) */
.toggle-password {
  position: absolute;
  top: 50%;
  text-align: center;
  transform: translateY(-50%);
  cursor: pointer;
  color: #7f8c8d;
  font-size: 16px;
}

/* Password input with enough left & right padding for icons */
.input-group input[type="password"] {
  width: 100%;
  padding: 12px 50px;  /* 50px left & right combined if no placeholder text 
                          or 12px 50px 12px 50px for symmetrical left & right */
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

/* Focus state for password input */
.input-group input[type="password"]:focus {
  border-color: #1abc9c;
  box-shadow: 0 0 10px rgba(26,188,156,0.5);
  outline: none;
}
   
    .forgot-password {
      display: block;
      text-align: right;
      margin-bottom: 25px;
      color: #fff;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    .forgot-password:hover {
      color: #fff;
    }
    
    /* Buttons with smooth transitions */
    .login-btn,
    .cancel-btn {
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 30px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      margin-bottom: 20px;
      transition: background 0.3s ease;
    }
    /* Login button color changed to blue */
    .login-btn {
      background: #FAB972 ;
      color: #066965;
    }
    .login-btn:hover {
      background: #e57231;
    }
    .cancel-btn {
      background: #ecf0f1;
      color: #066965;
    }
    .cancel-btn:hover {
      background: #bdc3c7;
    }
    
    /* Animations */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInLeft {
      from { transform: translateX(-100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideInRight {
      from { transform: translateX(100%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        height: auto;
      }
      .left-panel, .right-panel {
        width: 100%;
        flex: none;
      }
      .left-panel {
        height: 300px;
      }
    }