@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');  
@font-face {
    font-family: 'Ethnocentric';
    src: url('../fonts/Ethnocentric-Regular.woff2') format('woff2'),
        url('../fonts/Ethnocentric-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


.Ethnocentric {
    font-family: 'Ethnocentric';
    font-weight: normal;
    font-style: normal;
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.logo-icon {
    align-items: center;
    justify-content: center;
    color: var(--white);
    transition: 0.35s;
}

.logo-icon img {
    max-width: 60px;
}

.uplogo img {
    max-width: 74px;
}

.logo-text {
    /* line-height: 1.2; */
    /* padding-left: 7px; */
}

.logo-text .brand {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--orange);
    display: block;
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    margin-top: 13px;
}

.logo-text .brand > span {
    color: var(--blue);
    display: block;
    font-size: 1.9em;
    line-height: 15px;
}

.logo-text .sub {
    font-size: 0.9em;
    color: var(--white);
    margin-top: 6px;
    display: block;
    letter-spacing: 1px;
}
        body {
           color: var(--navy);
           background:
                radial-gradient(circle at 15% 25%, rgba(255, 126, 35, .08), transparent 28%),
                radial-gradient(circle at 85% 70%, rgba(35, 151, 190, .10), transparent 30%),
                linear-gradient(180deg, #fffdf9 0%, #f8fcfd 100%) !important;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .35;
            background-image: radial-gradient(#f28a4a 1px, transparent 1px);
            background-size: 32px 32px;
        }

        .auth-page {
            position: relative;
            min-height: calc(100vh - 148px);
            background: radial-gradient(circle at 46% 9%, rgba(85, 140, 255, .08) 0 2px, transparent 3px) 0 0 / 18px 18px, radial-gradient(circle at 62% 14%, rgba(255, 122, 0, .09), transparent 22%), linear-gradient(105deg, #fff 0%, #fdfdfd00 52%, #fffdf900 100%);
        }

        .auth-page::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .45;
            background-image: radial-gradient(#ff8a3d55 1px, transparent 1px);
            background-size: 34px 34px;
            pointer-events: none;
        }

        .brand-icon {
            color: var(--orange);
            font-size: 42px;
        }

        .brand-name {
            font-size: 26px;
            font-weight: 800;
            letter-spacing: -1px;
            color: var(--navy);
            line-height: 1;
        }

        .brand-sub {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .auth-card {
            max-width: 540px;
            border-radius: 22px;
            background: rgba(255, 255, 255, .96);
            border: 1px solid rgba(210, 220, 228, .9);
            box-shadow:
                0 18px 45px rgba(20, 65, 95, .10),
                0 3px 10px rgba(20, 65, 95, .04);
        }

        .form-control,
        .form-select {
            min-height: 40px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--orange);
            box-shadow: 0 0 0 .2rem rgba(255, 116, 23, .12);
        }

        .btn-orange {
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
            min-height: 40px;
            border-radius: 10px;
            font-weight: 700;
            background: linear-gradient(135deg, rgb(255, 123, 0) 0%, rgb(230, 81, 0) 100%);
            box-shadow: rgba(255, 123, 0, 0.3) 0px 4px 12px;
            color: rgb(255, 255, 255)
        }

        .btn-orange:hover {
            background: #e9630c;
            border-color: #e9630c;
            color: #fff;
        }

        .orange {
            color: var(--orange);
        }

        .navy {
            color: var(--navy);
        }

        .switch-link {
            color: var(--orange);
            font-weight: 700;
            cursor: pointer;
        }

        .visual-map {
            font-size: 210px;
            color: #ff7b22;
            opacity: .14;
        }

        .visual-center {
            width: 88px;
            height: 88px;
            display: grid;
            place-items: center;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 12px 35px rgba(11, 47, 97, .12);
        }

        .feature-card {
            background: rgba(255, 255, 255, .8);
            border: 1px solid #f0e5d8;
            border-radius: 15px;
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            flex-shrink: 0;
            border-radius: 10px;
            background: #fff1e7;
            color: var(--orange);
        }


        .site-footer {
            position: relative;
            
            overflow: hidden;
        }

        .footer-skyline {
            height: 83px;
            background-image: url("https://startinup.up.gov.in/wp-content/uploads/2022/12/up-vector-light.png");
            background-repeat: repeat-x;
            background-position: center bottom;
            background-size: auto 95px;
            opacity: .95;
            filter: brightness(50%);
        }

        .footer-content {
            border-top: 1px solid rgba(255, 255, 255, .24);
            padding: 7px 36px;
            font-size: .75rem;
            background: linear-gradient(90deg, #0f3b70, #0f4f91 48%, #0e3d75);
        color: #fff;
        }

        .footer-content a {
            color: #8cf2ff;
            text-decoration: none;
        }

        .instruction {
            position: relative;
        }

        .instruction::before {
            content: "";
            position: absolute;
            width: 380px;
            height: 380px;
            border-radius: 50%;
            background: rgba(35, 157, 190, .08);
            filter: blur(40px);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
        }

        .instruction img {
            width: 560px;
            max-width: 100%;
            filter: drop-shadow(0 18px 20px rgba(0, 50, 80, .18));
            transition: transform .4s ease;
        }

        .instruction img:hover {
            transform: scale(1.02);
        }

        .startup-india-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 5px 20px;
            border-radius: 8px;
            background: linear-gradient(135deg, #08a6a6, #0877b9);
            border: 1px solid #078ca8;
            color: #fff !important;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            box-shadow:
                0 5px 15px rgba(8, 130, 175, .25),
                0 0 0 0 rgba(8, 166, 166, .45);
            overflow: hidden;
            animation: startupGlow 1.8s infinite;
            transition: .25s ease;
        }

        .startup-india-btn::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 45%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, .45),
                    transparent);
            transform: skewX(-20deg);
            animation: startupShine 2.8s infinite;
        }

        .startup-india-btn i,
        .startup-india-btn span {
            position: relative;
            z-index: 1;
        }

        @keyframes startupGlow {

            0%,
            100% {
                box-shadow:
                    0 5px 15px rgba(8, 130, 175, .25),
                    0 0 0 0 rgba(8, 166, 166, .45);
            }

            50% {
                box-shadow:
                    0 7px 20px rgba(8, 130, 175, .40),
                    0 0 0 7px rgba(8, 166, 166, 0);
            }
        }

        @keyframes startupShine {
            0% {
                left: -100%;
            }

            45%,
            100% {
                left: 130%;
            }
        }

        .startup-india-btn:hover {
            background: linear-gradient(135deg, #079393, #06699f);
            transform: translateY(-2px);
            box-shadow: 0 9px 24px rgba(8, 130, 175, .40);
        }

    /* ✅ Primary */
    .btn-primary {
      background: linear-gradient(135deg, #007bff, #0056d2);
      box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    }
    .btn-primary:hover {
      background: linear-gradient(135deg, #0056d2, #007bff);
      box-shadow: 0 6px 18px rgba(0, 123, 255, 0.6);
      transform: translateY(-5px);
    }

    /* ✅ Secondary */
    .btn-secondary {
      background: linear-gradient(135deg, #6c757d, #495057);
      box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
    }
    .btn-secondary:hover {
      background: linear-gradient(135deg, #495057, #6c757d);
      box-shadow: 0 6px 18px rgba(108, 117, 125, 0.6);
      transform: translateY(-5px);
    }

    /* ✅ Success */
    .btn-success {
      background: linear-gradient(135deg, #28a745, #218838) !important;
      box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    }
    .btn-success:hover {
      background: linear-gradient(135deg, #218838, #28a745);
      box-shadow: 0 6px 18px rgba(40, 167, 69, 0.6);
      transform: translateY(-5px);
    }

    /* ✅ Danger */
    .btn-danger {
      background: linear-gradient(135deg, #dc3545, #b02a37) !important;
      box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
    }
    .btn-danger:hover {
      background: linear-gradient(135deg, #b02a37, #dc3545);
      box-shadow: 0 6px 18px rgba(220, 53, 69, 0.6);
      transform: translateY(-5px);
    }

    /* ✅ Warning */
    .btn-warning {
      /* color: #212529 !important; */
      background: linear-gradient(135deg, #ff8c12 0%, #ff5f10 50%, #ff4800 100%);
      box-shadow: 0 4px 12px rgb(255 87 34 / 39%);
    }
    .btn-warning:hover {
      background: linear-gradient(
315deg, #ff8c12 0%, #ff5f10 50%, #ff4800 100%);
      box-shadow: 0 6px 18px rgb(223 136 109 / 69%);
      transform: translateY(-5px);
    }

    /* ✅ Info */
    .btn-info {
      background: linear-gradient(135deg, #17a2b8, #0d6efd) !important;
      box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }
    .btn-info:hover {
      background: linear-gradient(135deg, #0d6efd, #17a2b8);
      box-shadow: 0 6px 18px rgba(23, 162, 184, 0.6);
      transform: translateY(-5px);
    }

    /* ✅ Light */
    .btn-light {
      color: #212529 !important;
      background: linear-gradient(135deg, #f8f9fa, #e9ecef) !important;
      box-shadow: 0 4px 10px rgba(173, 181, 189, 0.3);
    }
    .btn-light:hover {
      background: linear-gradient(135deg, #e9ecef, #f8f9fa);
      box-shadow: 0 6px 16px rgba(173, 181, 189, 0.5);
      transform: translateY(-5px);
    }

    /* ✅ Dark */
    .btn-dark {
      background: linear-gradient(135deg, #212529, #000) !important;
      box-shadow: 0 4px 12px rgba(33, 37, 41, 0.4);
    }
    .btn-dark:hover {
      background: linear-gradient(135deg, #000, #212529);
      box-shadow: 0 6px 18px rgba(33, 37, 41, 0.6);
      transform: translateY(-5px);
    }
    
    .register-card {
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(210, 220, 228, .9);
    box-shadow: 0 18px 45px rgba(20, 65, 95, .10), 0 3px 10px rgba(20, 65, 95, .04);
    max-width: 540px;
}
header {
    backdrop-filter: blur(5px);
}
.input-group .btn-outline-secondary {
    border-color: #d7e0e9;
}
        @media (max-width: 991px) {
            .visual-section {
                display: none;
            }
        }

        @media (max-width: 575px) {
            .auth-card {
                border-radius: 16px;
            }

            .auth-card .card-body {
                padding: 24px !important;
            }

            .brand-name {
                font-size: 22px;
            }

            .brand-icon {
                font-size: 34px;
            }
        }