body {
     background-image: url(images/bg-image.png);
     font-family: 'Segoe UI', sans-serif;
 }

 .login-container {
     max-width: 900px;
     margin: 60px auto;
     background: white;
     border-radius: 20px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
 }

 .login-left {
     flex: 1;
     background: rgba(234, 243, 252, 0.4);
     /* 30% opacity */
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 40px;

 }

 .login-left img {
     max-width: 100%;
 }

 .login-right {
     flex: 1;
     padding: 40px;
 }

 .login-title {
     font-size: 26px;
     font-weight: 600;
     margin-bottom: 30px;
     font-family: 'Poppins', sans-serif;
 }

 .form-control {
     border-radius: 30px;
     padding-left: 40px;
     height: 45px;
 }

 .input-icon {
     position: absolute;
     top: 12px;
     left: 15px;
     color: #aaa;
 }

 .floating-group {
     position: relative;
     margin-bottom: 30px;
 }

 .floating-group input {
     width: 100%;
     padding: 12px 15px 12px 40px;
     border-radius: 30px;
     border: none;
     background-color: rgba(2, 49, 121, 0.2);
 }

 .floating-group label {
     position: absolute;
     top: 12px;
     left: 40px;
     color: #023179;
     font-size: 14px;
     pointer-events: none;
     transition: 0.2s ease all;
 }

 .floating-group input:focus+label,
 .floating-group input:not(:placeholder-shown)+label {
     top: -25px;
     left: 5px;
     font-size: 15px;
     background-color: transparent;
     padding: 0 5px;
     font-weight: 700;
 }


 input {
     background-color: rgba(2, 49, 121, 0.2) !important;
 }

 .form-check-input {
     border-radius: 50%;
     background-color: rgba(2, 49, 121, 0.2);
 }

 .btn-login {
     border-radius: 30px !important;
     width: 100% !important;
     background-color: rgba(2, 49, 121, 0.2) !important;
     /* Transparent blue */
     color: black !important;
     font-weight: 500 !important;
     transition: 0.3s ease !important;
     backdrop-filter: blur(10px) !important;
     /* Glass blur */
     -webkit-backdrop-filter: blur(10px) !important;
     /* Safari support */
     border: 1px solid rgba(255, 255, 255, 0.3) !important;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
 }


 .btn-login:hover {
     background-color:#ef5f23 !important;
     color: black !important;
 }


 .form-footer {
     text-align: center;
     margin-top: 20px;
 }

 .form-footer a {
     color: #023179;
     text-decoration: none;
 }

 .form-footer a:hover {
     text-decoration: none;
 }

 .close-btn {
     position: absolute;
     top: 20px;
     right: 25px;
     font-size: 24px;
     cursor: pointer;
     color: #333;
 }

 i {
     color: #023179;
 }

 @media (max-width: 768px) {
     .login-container {
         flex-direction: column;
         margin: 20px;
     }

     .login-left,
     .login-right {
         flex: 100%;
         padding: 30px;
     }
 }

 input:focus,
 textarea:focus,
 select:focus,
 button:focus {
     outline: none !important;
     box-shadow: none !important;
 }


 .btn-social-1 {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background-color: rgba(2, 49, 121, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: red;
     transition: background-color 0.3s ease;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .btn-social-2 {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background-color: rgba(2, 49, 121, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: #023179;
     transition: background-color 0.3s ease;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .btn-social-3 {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: none;
     background-color: rgba(2, 49, 121, 0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     color: black;
     transition: background-color 0.3s ease;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }

 .btn-social:hover {
     background-color: #023179;
     color: white !important;
 }

 .toggle-password {
     position: absolute;
     top: 12px;
     right: 15px;
     cursor: pointer;
     color: #aaa;
     font-size: 16px;
 }

 .toggle-password:hover {
     color: #023179;
 }

 .form-group .form-label {
     margin-bottom: 5px;
     font-weight: 500;
     display: block;
     color: #023179;
 }

 .form-label {
     margin-bottom: 5px;
     font-weight: 500;
     display: block;
     color: #023179;
 }

 .fa-apple {
     color: black !important;
 }

 .fa-google {
     color: orange;
 }

 @keyframes rotate360 {
     from {
         transform: rotate(0deg);
     }

     to {
         transform: rotate(360deg);
     }
 }

 .btn-social-1:hover,
 .btn-social-2:hover,
 .btn-social-3:hover {
     animation: rotate360 0.5s ease-in-out;
 }

 /* Google Button */
 .btn-social-1:hover {
     background-color: #DB4437 !important;
     /* Google Red */
 }

 .btn-social-1:hover i {
     color: white !important;
 }

 /* Facebook Button */
 .btn-social-2:hover {
     background-color: #023179 !important;
     /* Facebook Blue */
 }

 .btn-social-2:hover i {
     color: white !important;
 }

 /* Apple Button */
 .btn-social-3:hover {
     background-color: #000 !important;
     /* Black for Apple */
 }

 .btn-social-3:hover i {
     color: white !important;
 }


 .form-check-input:checked {
     background-color: #023179 !important;
     /* Dark blue */
     border-color: #023179 !important;
 }