/* IMPORT FONT */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

        /* COLOR VARIABLES */
        :root {
            --primary-color: #0e2f76;
            --secondary-color: #060606;
            --background-color: #EFEFEF;
            --shadow-color: rgba(0, 51, 160, 0.1);
            --white-color: #FFF;
            --black-color: #000;
            --input-border-color: #E3E4E6;
            --transition-3s: 0.3s;
            --accent-blue: #1a4cbc;
            --accent-yellow: #ffd633;
        }

        /* GLOBAL STYLES */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        /* REUSABLE ELEMENTS */
        a {
            text-decoration: none;
            color: var(--black-color);
            transition: var(--transition-3s);
        }

        a:hover {
            text-decoration: underline;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            position: relative;
            overflow: hidden;
        }

        /* FLOATING LOGOS CONTAINER */
        .floating-logos {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
        }

        /* FLOATING LOGO STYLES */
        .floating-logo {
            position: absolute;
            opacity: 0.15;
            animation: float 20s infinite linear;
            user-select: none;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        }

        /* Different sizes */
        .floating-logo.small {
            width: 50px;
            height: 50px;
        }

        .floating-logo.medium {
            width: 80px;
            height: 80px;
        }

        .floating-logo.large {
            width: 120px;
            height: 120px;
        }

        .floating-logo.xlarge {
            width: 150px;
            height: 150px;
        }

        /* Different animations for each logo */
        .floating-logo:nth-child(1) {
            top: 5%;
            left: 2%;
            animation: float1 25s infinite ease-in-out;
        }

        .floating-logo:nth-child(2) {
            top: 15%;
            right: 5%;
            animation: float2 22s infinite ease-in-out;
        }

        .floating-logo:nth-child(3) {
            bottom: 10%;
            left: 8%;
            animation: float3 28s infinite ease-in-out;
        }

        .floating-logo:nth-child(4) {
            bottom: 20%;
            right: 10%;
            animation: float4 24s infinite ease-in-out;
        }

        .floating-logo:nth-child(5) {
            top: 30%;
            left: 15%;
            animation: float5 30s infinite ease-in-out;
        }

        .floating-logo:nth-child(6) {
            top: 45%;
            right: 20%;
            animation: float6 26s infinite ease-in-out;
        }

        .floating-logo:nth-child(7) {
            bottom: 35%;
            left: 25%;
            animation: float7 32s infinite ease-in-out;
        }

        .floating-logo:nth-child(8) {
            top: 60%;
            right: 30%;
            animation: float8 23s infinite ease-in-out;
        }

        .floating-logo:nth-child(9) {
            bottom: 45%;
            right: 40%;
            animation: float9 29s infinite ease-in-out;
        }

        .floating-logo:nth-child(10) {
            top: 75%;
            left: 35%;
            animation: float10 27s infinite ease-in-out;
        }

        .floating-logo:nth-child(11) {
            top: 10%;
            left: 50%;
            animation: float11 31s infinite ease-in-out;
        }

        .floating-logo:nth-child(12) {
            bottom: 15%;
            right: 55%;
            animation: float12 21s infinite ease-in-out;
        }

        .floating-logo:nth-child(13) {
            top: 40%;
            left: 70%;
            animation: float1 26s infinite ease-in-out;
        }

        .floating-logo:nth-child(14) {
            top: 80%;
            right: 65%;
            animation: float2 24s infinite ease-in-out;
        }

        .floating-logo:nth-child(15) {
            bottom: 60%;
            left: 80%;
            animation: float3 29s infinite ease-in-out;
        }

        .floating-logo:nth-child(16) {
            top: 25%;
            right: 75%;
            animation: float4 27s infinite ease-in-out;
        }

        .floating-logo:nth-child(17) {
            bottom: 70%;
            left: 90%;
            animation: float5 23s infinite ease-in-out;
        }

        .floating-logo:nth-child(18) {
            top: 90%;
            right: 85%;
            animation: float6 25s infinite ease-in-out;
        }

        .floating-logo:nth-child(19) {
            bottom: 80%;
            left: 60%;
            animation: float7 28s infinite ease-in-out;
        }

        .floating-logo:nth-child(20) {
            top: 50%;
            right: 45%;
            animation: float8 22s infinite ease-in-out;
        }

        /* Custom animation paths */
        @keyframes float1 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            33% {
                transform: translate(120px, -60px) rotate(120deg);
            }

            66% {
                transform: translate(40px, 80px) rotate(240deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float2 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            25% {
                transform: translate(-80px, 70px) rotate(90deg);
            }

            50% {
                transform: translate(-120px, -40px) rotate(180deg);
            }

            75% {
                transform: translate(60px, -80px) rotate(270deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float3 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(100px, 100px) scale(1.3);
            }

            100% {
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes float4 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            50% {
                transform: translate(-120px, -70px) rotate(180deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float5 {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(70px, -100px);
            }

            50% {
                transform: translate(130px, 50px);
            }

            75% {
                transform: translate(60px, 130px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes float6 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            40% {
                transform: translate(-140px, 50px) rotate(144deg);
            }

            80% {
                transform: translate(50px, -100px) rotate(288deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float7 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            33% {
                transform: translate(110px, -80px) scale(0.8);
            }

            66% {
                transform: translate(-60px, 110px) scale(1.2);
            }

            100% {
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes float8 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            30% {
                transform: translate(90px, 80px) rotate(108deg);
            }

            60% {
                transform: translate(-80px, -60px) rotate(216deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float9 {
            0% {
                transform: translate(0, 0);
            }

            20% {
                transform: translate(60px, -120px);
            }

            40% {
                transform: translate(120px, -60px);
            }

            60% {
                transform: translate(60px, 60px);
            }

            80% {
                transform: translate(-60px, 120px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes float10 {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }

            35% {
                transform: translate(-100px, -90px) rotate(126deg);
            }

            70% {
                transform: translate(90px, 70px) rotate(252deg);
            }

            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }

        @keyframes float11 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            45% {
                transform: translate(80px, -100px) scale(1.4);
            }

            90% {
                transform: translate(-70px, 50px) scale(0.8);
            }

            100% {
                transform: translate(0, 0) scale(1);
            }
        }

        @keyframes float12 {
            0% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(-120px, -80px);
            }

            50% {
                transform: translate(30px, -120px);
            }

            75% {
                transform: translate(100px, -40px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        /* WRAPPER */
        .wrapper {
            position: relative;
            width: 430px;
            height: 500px;
            background-color: var(--white-color);
            border-radius: 15px;
            padding: 120px 32px 64px;
            border: 1px solid var(--primary-color);
            box-shadow: 0 8px 15px var(--shadow-color);
            transition: var(--transition-3s);
            overflow: hidden;
            z-index: 1;
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.95);
        }

        /* FORM HEADER */
        .form-header {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 140px;
            height: 70px;
            background-color: var(--primary-color);
            border-radius: 0 0 20px 20px;
        }

        .form-header::before,
        .form-header::after {
            content: "";
            position: absolute;
            top: 0;
            width: 30px;
            height: 30px;
        }

        .form-header::before {
            left: -30px;
            border-top-right-radius: 50%;
            box-shadow: 15px 0 0 var(--primary-color);
        }

        .form-header::after {
            right: -30px;
            border-top-left-radius: 50%;
            box-shadow: -15px 0 0 var(--primary-color);
        }

        /* TITLES */
        .titles {
            position: relative;
        }

        .title-login,
        .title-register {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--white-color);
            font-size: 24px;
            transition: var(--transition-3s);
        }

        .title-register {
            top: 50px;
        }

        /* FORMS */
        .login-form,
        .register-form {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 85%;
            transition: var(--transition-3s);
        }

        .register-form {
            left: 150%;
        }

        /* INPUT FIELDS */
        .input-box {
            position: relative;
            display: flex;
            flex-direction: column;
            margin: 20px 0;
        }

        .input-field {
            width: 100%;
            height: 55px;
            font-size: 16px;
            background: transparent;
            color: var(--black-color);
            padding: 0 20px;
            border: 1px solid var(--input-border-color);
            border-radius: 30px;
            outline: none;
            transition: var(--transition-3s);
        }

        .input-field:focus {
            border: 1px solid var(--primary-color);
        }

        .label {
            position: absolute;
            top: 50%;
            left: 20px;
            transform: translateY(-50%);
            color: var(--secondary-color);
            transition: 0.2s;
            cursor: text;
        }

        .input-field:focus~.label,
        .input-field:valid~.label {
            top: 0;
            font-size: 14px;
            background-color: var(--white-color);
            color: var(--primary-color);
            padding: 0 10px;
        }

        .input-field:valid~.label {
            color: var(--secondary-color);
        }

        .icon {
            position: absolute;
            top: 50%;
            right: 25px;
            transform: translateY(-50%);
            font-size: 20px;
            color: var(--secondary-color);
        }

        /* FORGOT PASSWORD & TERMS AND CONDITIONS */
        .form-cols {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        .col-1 {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* SUBMIT BUTTON */
        .btn-submit {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            height: 50px;
            background-color: var(--primary-color);
            color: var(--white-color);
            font-size: 16px;
            font-weight: 500;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: var(--transition-3s);
        }

        .btn-submit:hover {
            gap: 15px;
        }

        .btn-submit i {
            font-size: 20px;
        }

        /* SWITCH FORM */
        .switch-form {
            text-align: center;
        }

        .switch-form a {
            font-weight: 500;
        }

        /* RESPONSIVE STYLES */
        @media only screen and (max-width: 564px) {
            .wrapper {
                margin: 20px;
            }

            .floating-logo.small {
                width: 30px;
                height: 30px;
            }

            .floating-logo.medium {
                width: 50px;
                height: 50px;
            }

            .floating-logo.large {
                width: 70px;
                height: 70px;
            }

            .floating-logo.xlarge {
                width: 90px;
                height: 90px;
            }
        }