body {
       font-family: 'Cairo', sans-serif;
       background-color: #f8f9fa;
       height: 100vh;
       margin: 0;
       overflow: hidden;
   }

   .main-container {
       height: 100vh;
       display: flex;
   }

   .info-side {
       background-color: #ffffff;
       flex: 1;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       padding: 0;
       position: relative;
       overflow: hidden;
   }

   .info-side img {
       min-width: 108%;
       min-height: 100%;
       width: auto;
       height: auto;
       max-width: none;
       max-height: none;
   }

   .brand-logo {
       position: absolute;
       top: 40px;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .brand-logo i {
       font-size: 2rem;
       color: #0d6efd;
   }

   .sidebar-icons {
       position: absolute;
       left: 20px;
       top: 50%;
       transform: translateY(-50%);
       display: flex;
       flex-direction: column;
       gap: 15px;
   }

   .icon-box {
       width: 45px;
       height: 45px;
       border-radius: 8px;
       display: flex;
       justify-content: center;
       align-items: center;
       color: white;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   }

   .login-side {
       background-color: #f1f1f1;
       flex: 1;
       display: flex;
       justify-content: center;
       align-items: center;
       padding: 40px;
   }

   .login-card {
       width: 100%;
       max-width: 450px;
   }

   .logoCon {
       text-align: center;
       margin: 0 0 24px;
   }

   .logoCon img {
       height: 199px;
   }

   .logoCon h3 {
       font-weight: bold;
       margin: 15px 0 0;
   }

   .form-label {
       font-weight: bold;
   }

   .input-group .form-control {
       border-radius: 0 10px 10px 0 !important;
   }

   .form-control {
       padding: 12px;
       border-radius: 10px;
       border: 1px solid #ddd;
   }

   .input-group .input-group-text {
       border-radius: 10px 0 0 10px !important;
   }

   .login-side .btn-primary {
       padding: 12px;
       border-radius: 8px;
       font-weight: 600;
       background-color: #2c7478;
       border: none;
   }
 .login-side .text-primary{color: #2c7478 !important;}
   a {
       color: #2c7478
   }

   .login-side .btn-primary:hover,
   .login-side .btn-primary:focus {
       background-color: #25676b;
   }

   .social-login {
       display: flex;
       justify-content: center;
       gap: 15px;
       margin-top: 20px;
   }

   .social-btn {
       width: 40px;
       height: 40px;
       border-radius: 50%;
       display: flex;
       justify-content: center;
       align-items: center;
       border: 1px solid #ddd;
       color: #555;
       text-decoration: none;
       transition: 0.3s;
   }

   .social-btn:hover {
       background-color: #eee;
   }

   @media (max-width: 992px) {
       .info-side {
           display: none;
       }
   }