:root {
            --primary: #087f8c;
            --primary-dark: #075b67;
            --blue: #0877a8;
            --green: #198754;
            --light: #f2fafb;
            --dark: #12343b;
            --text: #53676c;
        }


        * {
            box-sizing: border-box;
        }


        body {

            margin: 0;

            min-height: 100vh;

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            background:
                linear-gradient(
                    135deg,
                    #eaf8f7,
                    #eef8fc
                );

            color: var(--text);

        }


        /* =========================================
           NAVBAR
        ========================================= */

        .navbar {

            background:
                linear-gradient(
                    90deg,
                    var(--primary-dark),
                    var(--primary),
                    var(--blue)
                );

            min-height: 60px;

        }


        .navbar-brand {

            color: white !important;

            font-size: 18px;

            font-weight: 700;

        }


        .navbar-brand i {

            margin-right: 7px;

        }


        .login-link {

            color:
                var(--primary-dark) !important;

            background: white;

            border-radius: 7px;

            padding:
                8px 15px;

            font-size: 12px;

            font-weight: 600;

            text-decoration: none;

        }


        /* =========================================
           MAIN CONTAINER
        ========================================= */

        .register-wrapper {

            min-height:
                calc(100vh - 60px);

            padding:
                85px 15px 35px;

            display: flex;

            align-items: center;

        }


        /* =========================================
           REGISTER CARD
        ========================================= */

        .register-card {

            width: 100%;

            max-width: 1050px;

            margin: auto;

            background: white;

            border-radius: 18px;

            overflow: hidden;

            box-shadow:
                0 15px 45px
                rgba(30, 80, 90, .12);

        }


        /* =========================================
           INFORMATION PANEL
        ========================================= */

        .info-panel {

            background:
                linear-gradient(
                    145deg,
                    var(--primary-dark),
                    var(--primary),
                    var(--blue)
                );

            color: white;

            padding:
                35px 25px;

        }


        .info-panel h2 {

            font-size: 27px;

            font-weight: 800;

        }


        .info-panel > p {

            font-size: 12px;

            line-height: 1.7;

            opacity: .9;

        }


        .info-item {

            display: flex;

            align-items: flex-start;

            margin-top: 20px;

        }


        .info-icon {

            width: 40px;

            height: 40px;

            min-width: 40px;

            border-radius: 10px;

            background:
                rgba(255,255,255,.15);

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 12px;

        }


        .info-item h6 {

            margin:
                0 0 4px;

            font-size: 12px;

        }


        .info-item p {

            margin: 0;

            font-size: 10px;

            line-height: 1.5;

            opacity: .85;

        }


        /* =========================================
           SUBJECT BADGES
        ========================================= */

        .subject-badge {

            display: inline-block;

            background:
                rgba(255,255,255,.15);

            border:
                1px solid
                rgba(255,255,255,.2);

            color: white;

            border-radius: 20px;

            padding:
                5px 9px;

            font-size: 9px;

            margin:
                3px 2px;

        }


        /* =========================================
           PRICE
        ========================================= */

        .price-box {

            display: inline-block;

            margin-top: 20px;

            background:
                rgba(255,255,255,.12);

            border:
                1px solid
                rgba(255,255,255,.2);

            border-radius: 10px;

            padding:
                10px 15px;

        }


        .price-box small {

            display: block;

            font-size: 9px;

            opacity: .8;

        }


        .price-box strong {

            font-size: 21px;

        }


        /* =========================================
           FORM PANEL
        ========================================= */

        .form-panel {

            padding:
                30px 20px;

        }


        .form-title {

            color: var(--dark);

            font-size: 23px;

            font-weight: 700;

            margin-bottom: 5px;

        }


        .form-subtitle {

            color: #7a8b8f;

            font-size: 11px;

            margin-bottom: 22px;

        }


        /* =========================================
           FORM
        ========================================= */

        .form-label {

            color: var(--dark);

            font-size: 11px;

            font-weight: 600;

            margin-bottom: 5px;

        }


        .form-control {

            min-height: 43px;

            border:
                1px solid #dcebed;

            font-size: 12px;

        }


        .form-control:focus {

            border-color:
                var(--primary);

            box-shadow:
                0 0 0 .2rem
                rgba(8,127,140,.12);

        }


        .input-group-text {

            background: #f1f8f9;

            border:
                1px solid #dcebed;

            color: var(--primary);

        }


        .password-toggle {

            cursor: pointer;

        }


        /* =========================================
           PASSWORD STRENGTH
        ========================================= */

        .password-strength {

            height: 5px;

            background: #edf1f2;

            border-radius: 10px;

            overflow: hidden;

            margin-top: 7px;

        }


        .password-strength-bar {

            width: 0%;

            height: 100%;

            transition: .3s;

        }


        .password-message {

            font-size: 9px;

            margin-top: 4px;

        }


        /* =========================================
           TERMS
        ========================================= */

        .form-check-label {

            font-size: 10px;

            color: #65777b;

        }


        .form-check-input:checked {

            background-color:
                var(--primary);

            border-color:
                var(--primary);

        }


        /* =========================================
           REGISTER BUTTON
        ========================================= */

        .register-button {

            width: 100%;

            border: none;

            color: white;

            padding: 12px;

            border-radius: 8px;

            font-size: 12px;

            font-weight: 700;

            background:
                linear-gradient(
                    90deg,
                    var(--primary-dark),
                    var(--primary)
                );

            transition: .2s;

        }


        .register-button:hover {

            opacity: .9;

        }


        /* =========================================
           LOGIN
        ========================================= */

        .login-text {

            text-align: center;

            margin-top: 18px;

            font-size: 11px;

        }


        .login-text a {

            color: var(--primary);

            font-weight: 700;

            text-decoration: none;

        }


        /* =========================================
           SECURITY NOTE
        ========================================= */

        .security-note {

            background: #f2fafb;

            border-radius: 8px;

            padding: 10px;

            margin-top: 15px;

            font-size: 9px;

            color: #688086;

        }


        .security-note i {

            color: var(--green);

        }


        /* =========================================
           FOOTER
        ========================================= */

        .footer {

            text-align: center;

            font-size: 9px;

            color: #789095;

            padding:
                0 15px 20px;

        }


        /* =========================================
           DESKTOP
        ========================================= */

        @media (min-width: 768px) {

            .register-wrapper {

                padding:
                    90px 25px 50px;

            }


            .info-panel {

                padding:
                    50px 40px;

                min-height: 610px;

            }


            .form-panel {

                padding:
                    45px;

            }

        }