* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   :root {
       --gold: linear-gradient(180deg, #ab6a01 0%, #fde66b 50%, #9c5801 100%);
       --light-gray: #f5f5f5;
       --border: #ddd;
       --text: #333;
       --white: #fff;
   }

   /* ---------- BODY ---------- */
   body {
       font-family: Arial, Helvetica, sans-serif;
       background: var(--white);
       color: var(--text);
   }

   /* ---------- MAIN LAYOUT ---------- */
   .login_main {
       display: flex;
       min-height: 100vh;
   }

   /* LEFT SECTION */
   .left-section {
       flex: 1;
       background: linear-gradient(135deg, #c9a030b0, #a67d1aba);
       padding: 60px 40px;
       display: flex;
       flex-direction: column;
       justify-content: center;
       position: relative;
   }

   .left-section::after {
       content: "";
       position: absolute;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       background: url('https://otxworld.com/Assets/Portal/images/login_bg.jpg') center/cover no-repeat;
       z-index: -1;
   }

   .logo img {
       width: 200px;
       background: black;
       border-radius: 8px;
       margin-bottom: 20px;
   }

   .hero-title {
       font-size: 42px;
       color: #fff;
       font-weight: 700;
       margin-bottom: 20px;
   }

   .hero-description {
       font-size: 17px;
       color: #fff;
       margin-bottom: 40px;
   }

   .features-list {
       list-style: none;
   }

   .feature-item {
       display: flex;
       gap: 15px;
       margin-bottom: 25px;
   }

   .feature-icon {
       width: 45px;
       height: 45px;
       background: rgba(255, 255, 255, 0.15);
       border-radius: 8px;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 22px;
       color: #fff;
   }

   .feature-content h3 {
       color: #fff;
       font-size: 16px;
       margin-bottom: 4px;
   }

   .feature-content p {
       color: #fff;
       font-size: 13px;
   }

   /* ---------- RIGHT SECTION ---------- */
   .right-section {
       flex: 1;
       background: #000;
       padding: 40px 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }

   .top-right-link {
       margin-bottom: 20px;
       text-align: center;
   }

   .top-right-link span {
       color: #c7c7c7;
       font-size: 16px;
   }

   .create-account-btn {
       padding: 10px 25px;
       border: 2px solid #f19c02;
       color: #f19c02;
       border-radius: 10px;
       text-decoration: none;
       margin-left: 10px;
       transition: .3s;
   }

   .create-account-btn:hover {
       background: var(--gold);
       color: #000;
   }

   /* ---------- FORM ---------- */
   .login-form-wrapper {
       width: 100%;
       max-width: 420px;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid #f19c02;
       border-radius: 10px;
       padding: 30px;
       box-shadow: 0 0 10px #2b2b2b;
   }

   .form-header {
       text-align: center;
       margin-bottom: 30px;
   }

   .form-header h1 {
       color: #f19c02;
       font-size: 30px;
       font-weight: 700;
   }

   .form-header p {
       color: #bdb9b9;
       font-size: 15px;
   }

   .form-group {
       margin-bottom: 20px;
   }

   .form-label {
       color: #f19c02;
       font-size: 15px;
       font-weight: 600;
       margin-bottom: 6px;
   }

   .input-wrapper {
       display: flex;
       align-items: center;
       background: var(--light-gray);
       border: 1px solid var(--border);
       padding: 0 15px;
       border-radius: 8px;
   }

   .input-wrapper input {
       flex: 1;
       border: none;
       background: transparent;
       padding: 12px 0;
       font-size: 15px;
       outline: none;
   }

   .input-icon {
       margin-right: 10px;
       font-size: 17px;
       color: #666;
   }

   /* CHECKBOX */
   .checkbox-wrapper {
       margin-top: 15px;
       margin-bottom: 25px;
   }

   .Remember_span {
       color: #f19c02;
       font-size: 14px;
   }

   .checkbox_A {
       color: #f19c02;
   }

   /* BUTTON */
   .sign-in-btn {
       width: 100%;
       padding: 14px;
       background: var(--gold);
       border: none;
       border-radius: 8px;
       font-size: 16px;
       font-weight: 700;
       cursor: pointer;
       transition: .3s;
   }

   .sign-in-btn:hover {
       background: #f19c02;
   }

   /* SOCIAL */
   .social-section {
       text-align: center;
       margin-top: 20px;
   }

   .social-text {
       color: #999;
       margin-bottom: 10px;
   }

   .social-buttons {
       display: flex;
       gap: 10px;
       justify-content: center;
   }

   .social-btn {
       padding: 10px 20px;
       background: #fff;
       border: 1px solid #ddd;
       border-radius: 8px;
       cursor: pointer;
   }

   /* ---------- FOOTER ---------- */
   .footer {
       text-align: center;
       color: #888;
       margin-top: 30px;
       font-size: 12px;
   }


   /* ---------- MOBILE RESPONSIVE ---------- */
   @media(max-width:768px) {
       .login_main {
           flex-direction: column;
       }

     

       .right-section {
           padding: 20px;
       }

       .login-form-wrapper {
           padding: 20px;
       }
   }

   @media(max-width:480px) {
       .form-header h1 {
           font-size: 24px;
       }

       .form-header p {
           font-size: 13px;
       }

       .social-buttons {
           flex-direction: column;
       }

       .social-btn {
           width: 100%;
       }
   }

   /* ---------------------------------------------------------- */