:root {

            --primary: #FF6B35;

            --secondary: #1DA4D9;

            --accent: #FFD166;

            --dark: #073B4C;

            --light: #F8F9FA;

            --success: #06D6A0;

        }

        

        * {

            box-sizing: border-box;

            margin: 0;

            padding: 0;

        }

        

        body {

            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

            background: linear-gradient(135deg, var(--secondary) 0%, var(--dark) 100%);

            color: var(--dark);

            line-height: 1.6;

            padding: 20px;

            min-height: 100vh;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        .container {

            max-width: 800px;

            width: 100%;

            display: flex;

            flex-wrap: wrap;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

            border-radius: 15px;

            overflow: hidden;

        }

        

        .form-section {

            flex: 1;

            min-width: 300px;

            background: var(--light);

            padding: 30px;

        }

        

        .info-section {

            flex: 1;

            min-width: 300px;

            background: var(--primary);

            color: white;

            padding: 30px;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }

        

        h1 {

            color: var(--primary);

            margin-bottom: 10px;

            font-size: 28px;

        }

        

        h2 {

            color: white;

            margin-bottom: 15px;

            font-size: 24px;

        }

        

        .subtitle {

            color: var(--dark);

            margin-bottom: 25px;

            font-size: 16px;

        }

        

        .info-section p {

            margin-bottom: 20px;

            font-size: 16px;

        }

        

        .form-group {

            margin-bottom: 20px;

        }

        

        label {

            display: block;

            margin-bottom: 8px;

            font-weight: 600;

            color: var(--dark);

        }

        

        .input-field {

            width: 100%;

            padding: 12px 15px;

            border: 2px solid #ddd;

            border-radius: 8px;

            font-size: 16px;

            transition: all 0.3s;

        }

        

        .input-field:focus {

            border-color: var(--primary);

            box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);

            outline: none;

        }

        

        .btn-submit {

            background: var(--primary);

            color: white;

            border: none;

            padding: 14px 25px;

            font-size: 16px;

            font-weight: 600;

            border-radius: 8px;

            cursor: pointer;

            transition: all 0.3s;

            width: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        

        .btn-submit:hover {

            background: #e55a2b;

            transform: translateY(-2px);

            box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);

        }

        

        .btn-submit:active {

            transform: translateY(0);

        }

        

        .spinner {

            display: none;

            width: 20px;

            height: 20px;

            border: 3px solid rgba(255, 255, 255, 0.3);

            border-radius: 50%;

            border-top-color: white;

            animation: spin 1s ease-in-out infinite;

            margin-right: 10px;

        }

        

        @keyframes spin {

            to { transform: rotate(360deg); }

        }

        

        .logo {

            max-width: 100%;

            height: auto;

            border-radius: 10px;

            margin-top: 20px;

        }

        

        .benefits {

            list-style-type: none;

            margin-top: 20px;

        }

        

        .benefits li {

            margin-bottom: 10px;

            padding-left: 25px;

            position: relative;

        }

        

        .benefits li:before {

            content: "✓";

            position: absolute;

            left: 0;

            color: var(--accent);

            font-weight: bold;

        }

        

        .error-message {

            color: #e74c3c;

            font-size: 14px;

            margin-top: 5px;

            display: none;

        }

        

        .success-message {

            background: var(--success);

            color: white;

            padding: 15px;

            border-radius: 8px;

            margin-top: 20px;

            display: none;

        }

        

        @media (max-width: 768px) {

            .container {

                flex-direction: column;

            }

            

            .form-section, .info-section {

                width: 100%;

            }

        }