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

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.4);
            z-index: 0;
        }

        .main-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 24px;
            padding: 40px 20px;
            position: relative;
            z-index: 1;
        }

        .login-wrapper {
            display: flex;
            gap: 30px;
            max-width: 1200px;
            width: 100%;
            align-items: stretch;
        }

        .slider-column {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
            min-width: 0;
            align-self: stretch;
        }

        /* Slider Section */
        .slider-section {
            background: white;
            position: relative;
            display: flex;
            flex-direction: column;
            border-radius: 12px;
            border: 3px solid #E5E7EB;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            flex: 1;
        }

        .carousel-container {
            flex: 1;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 50px 40px;
            background: #F9FAFB;
            min-height: 400px;
        }

        .carousel-slide {
            display: none;
            text-align: center;
            animation: fadeIn 0.5s ease-in-out;
        }

        .carousel-slide.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slide-icon {
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
        }

        .slide-icon svg {
            width: 60px;
            height: 60px;
            fill: white;
        }

        .slide-content h3 {
            font-size: 22px;
            font-weight: 600;
            color: #1F2937;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .slide-content p {
            font-size: 15px;
            color: #6B7280;
            line-height: 1.6;
            max-width: 350px;
            margin: 0 auto;
        }

        .carousel-indicators {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 20px;
            background: #F9FAFB;
        }

        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #D1D5DB;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: #3B82F6;
            width: 24px;
            border-radius: 4px;
        }

        .carousel-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            z-index: 10;
        }

        .carousel-nav:hover {
            background: #F9FAFB;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .carousel-nav.prev {
            left: 20px;
        }

        .carousel-nav.next {
            right: 20px;
        }

        .carousel-nav svg {
            width: 20px;
            height: 20px;
            fill: #6B7280;
        }

        .info-footer {
            padding: 16px 20px;
            text-align: center;
            font-size: 12px;
            color: #E5E7EB;
            background: transparent;
            line-height: 1.6;
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
        }

        .info-footer p {
            margin: 0;
        }

        .info-footer a {
            color: #93C5FD;
            text-decoration: none;
            font-weight: 500;
        }

        .info-footer a:hover {
            color: #BFDBFE;
            text-decoration: underline;
        }

        /* Signup Section */
        .login-section {
            flex: 0 0 auto;
            width: 100%;
            max-width: 460px;
            min-width: 380px;
            padding: 40px 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
            border-radius: 12px;
            border: 3px solid #E5E7EB;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            align-self: stretch;
        }

        .login-box {
            width: 100%;
        }

        .login-header {
            text-align: center;
            margin-bottom: 10px;
        }

        .auth-logo {
            text-align: center;
            margin-bottom: 25px;
        }

        .auth-logo img {
            height: 90px;
            width: auto !important;
        }

        .login-header h2 {
            font-size: 24px;
            font-weight: 700;
            color: #1F2937;
            margin-bottom: 0;
        }

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

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-top: 6px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper .field-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9CA3AF;
            pointer-events: none;
        }

        .input-wrapper .toggle-password {
            position: absolute;
            top: 50%;
            right: 14px;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #9CA3AF;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .input-wrapper .toggle-password:focus-visible {
            outline: 2px solid #3B82F6;
            outline-offset: 2px;
        }

        .input-wrapper .toggle-password .eye-closed {
            display: none;
        }

        .input-wrapper .toggle-password.active {
            color: #374151;
        }

        .input-wrapper .toggle-password.active .eye-open {
            display: none;
        }

        .input-wrapper .toggle-password.active .eye-closed {
            display: inline;
        }

        .input-wrapper .form-control.with-icon {
            padding-left: 44px;
        }

        .form-control.with-password-toggle {
            padding-right: 46px;
        }

        .error-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background-color: #dc3545;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            z-index: 10;
        }

        .error-icon:hover {
            background-color: #c82333;
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            font-size: 14px;
            border: 1.5px solid #D1D5DB;
            border-radius: 8px;
            background: white;
            color: #1F2937;
            transition: all 0.2s ease;
            font-family: inherit;
        }

        .form-control:focus {
            outline: none;
            border-color: #3B82F6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        .form-control::placeholder {
            color: #9CA3AF;
        }

        .form-control.is-invalid {
            border-color: #dc3545;
            padding-right: 45px;
            background-image: none !important;
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        .invalid-feedback {
            display: none !important;
        }

        /* Popover styling for errors */
        .popover {
            background-color: #dc3545;
            border: 1px solid #dc3545;
        }

        .popover .popover-body {
            color: white;
            font-size: 13px;
        }

        .popover.bs-popover-top>.arrow::after,
        .popover.bs-popover-auto[data-popper-placement^="top"]>.arrow::after {
            border-top-color: #dc3545;
        }

        .popover.bs-popover-bottom>.arrow::after,
        .popover.bs-popover-auto[data-popper-placement^="bottom"]>.arrow::after {
            border-bottom-color: #dc3545;
        }

        .popover.bs-popover-right>.arrow::after,
        .popover.bs-popover-auto[data-popper-placement^="right"]>.arrow::after {
            border-right-color: #dc3545;
        }

        .popover.bs-popover-left>.arrow::after,
        .popover.bs-popover-auto[data-popper-placement^="left"]>.arrow::after {
            border-left-color: #dc3545;
        }

        .btn-primary {
            width: 100%;
            padding: 12px 24px;
            background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
            box-shadow: 0 6px 12px -1px rgba(59, 130, 246, 0.4);
            transform: translateY(-1px);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .btn-primary:disabled {
            background: #9CA3AF;
            cursor: not-allowed;
            transform: none;
        }

        .signup-section a:hover {
            text-decoration: underline;
            color: #2563EB;
        }

        .alert {
            display: none !important;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .alert-success {
            display: none !important;
        }

        .alert-danger {
            display: none !important;
        }

        @media (max-width: 1024px) {
            .login-wrapper {
                max-width: 900px;
                gap: 24px;
            }

            .login-section {
                min-width: 340px;
                max-width: 420px;
                padding: 35px 35px;
            }

            .slider-section {
                min-height: 450px;
            }
        }

        @media (max-width: 968px) {
            .login-wrapper {
                flex-direction: column;
                gap: 20px;
                max-width: 500px;
                margin: 0 auto;
                align-items: center;
            }

            .slider-column {
                width: 100%;
                max-width: 500px;
            }

            .slider-section {
                min-height: 400px;
                height: auto;
            }

            .login-section {
                flex: 1;
                width: 100%;
                max-width: 500px;
                min-width: unset;
                height: auto;
                min-height: auto;
            }

            .carousel-container {
                min-height: 350px;
                padding: 40px 30px;
            }
        }

        @media (max-width: 576px) {
            .login-section {
                padding: 30px 25px;
            }

            .main-container {
                padding: 20px 16px;
            }

            .login-wrapper {
                gap: 16px;
            }

            .slider-section {
                min-height: 350px;
            }

            .carousel-container {
                min-height: 300px;
                padding: 30px 20px;
            }

            .slide-icon {
                width: 100px;
                height: 100px;
                margin-bottom: 20px;
            }

            .slide-icon svg {
                width: 50px;
                height: 50px;
            }

            .slide-content h3 {
                font-size: 20px;
            }

            .slide-content p {
                font-size: 14px;
            }

            .auth-logo img {
                height: 70px;
            }

            .login-header h2 {
                font-size: 22px;
            }

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

            .info-footer {
                padding: 15px 20px;
                font-size: 11px;
            }
        }

        @media (max-width: 400px) {
            .login-section {
                padding: 25px 20px;
            }

            .slider-section {
                display: none;
            }

            .info-footer {
                padding: 12px 16px;
                font-size: 10px;
            }
        }