#overlay {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.4);
	    z-index: 999;
	}

	#loginPopup {
	    position: fixed;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    background: #fff;
	    padding: 25px 30px;
	    width: 420px;
	    border-radius: 8px;
	    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	    z-index: 1000;
	    text-align: center;
	}

	#loginPopup p {
	    font-size: 16px;
	    margin-bottom: 20px;
	    color: #333;
	}

	.popup-buttons {
	    display: flex;
	    justify-content: center;
	    gap: 15px;
	}

	.btn-yes {
	    background-color: #28a745;
	    color: #fff;
	    border: none;
	    padding: 8px 20px;
	    border-radius: 5px;
	    cursor: pointer;
	}

	.btn-no {
	    background-color: #dc3545;
	    color: #fff;
	    border: none;
	    padding: 8px 20px;
	    border-radius: 5px;
	    cursor: pointer;
	}

	.btn-yes:hover {
	    background-color: #218838;
	}

	.btn-no:hover {
	    background-color: #c82333;
	}

	.DIS_input {
	    position: relative;
	    mat-form-field button.ic_password {
	        border: none;
	        background: #fff;
	        mat-icon {
	            line-height: 0.9;
	        }
	    }
	}

	.pass_alert {
	    padding: 0;
	    display: flex;
	    align-items: center;
	    height: 43px;
	    position: relative;
	}

	.myDIV {
	    border: 1px solid #cacaca;
	    height: 25px;
	    width: 25px;
	    border-radius: 15px;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	}

	.myDIV:hover + .hide {
	    display: block;
	    color: red;
	}

	.hide {
	    display: none;
	    position: absolute;
	    right: -315px;
	    width: 309px;
	    top: -117px;
	    background: #fff;
	    padding: 1rem 0;
	    text-align: left;
	    border-top-left-radius: 11px;
	    border-top-right-radius: 11px;
	    border-bottom-right-radius: 11px;
	    border: 1px solid #cacaca;
	    font-size: 0.91rem;
	    filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.1));
	    pointer-events: none;
	    ul {
	        margin-bottom: 0;
	    }
	    .hide:hover {
	        visibility: visible;
	    }
	}

	.hide:before {
	    content: '';
	    position: absolute;
	    left: -21px;
	    bottom: -1px;
	    border-left: 21px solid #cacaca;
	    border-top: 0px solid transparent;
	    border-bottom: 21px solid transparent;
	    z-index: -1;
	    transform: rotate(180deg);
	}

	.wrapper {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    height: 75vh;
	}

	.login-container {
	    background-color: #f8fafd;
	    padding: 40px;
	    width: 100%;
	    max-width: 500px;
	    border-radius: 16px;
	    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	    margin-top: -100px;
	    text-align: center; /* Keep this for centering other elements */
	}

	.icon_logo {
	    display: flex;
	    justify-content: center;
	    margin-top: -35px;
	}

	.login-container h2 {
	    text-align: center;
	    font-size: 24px;
	    margin-bottom: 0px;
	    color: #333333;
	    margin-top: 0px;
	}

	/* FIXED: Force labels to left align */
	.login-container label {
		font-size: 14px;
		    color: #444;
		    display: block !important;
		    margin-bottom: 9px;
		    text-align: left !important;
		    width: 100%;
		    margin-top: 32px;
	}

	/* FIXED: Force form group to left align */
	.login-container .form-group {
	    text-align: left !important;
		margin-top: 51px;
	}

	/* FIXED: Force captcha container to left align */
	.login-container .captcha-container {
	    display: flex;
	    align-items: center;
	    gap: 10px;
	    text-align: left !important;
	    justify-content: flex-start;
	}

	.login-container .captcha-container input {
	    flex: 1;
	}

	.login-container .captcha-container .captcha-image {
	    flex-shrink: 0;
		margin-top: 0px !important;
	}

	.login-container .captcha-container .captcha-refresh {
	    flex-shrink: 0;
		margin-top: 0px !important;
	}

	.login-container input {
	    margin-bottom: 16px;
	    padding: 10px 12px;
	    border: 1px solid #ccc;
	    border-radius: 6px;
	}

	input[type="text"],
	input[type="password"] {
	    width: 100%;
	    transition: border-color 0.2s;
	}

	input[type="text"]:focus,
	input[type="password"]:focus {
	    outline: none;
	    border-color: #3399ff;
	}

	.actions {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 16px;
	}

	.actions label {
	    display: flex;
	    align-items: center;
	    font-size: 13px;
	}

	.actions input[type="checkbox"] {
	    margin-right: 6px;
	}

	.actions a {
	    font-size: 13px;
	    color: #007bff;
	    text-decoration: none;
	}

	.actions a:hover {
	    text-decoration: underline;
	}

	.login-btn {
	    width: 100%;
	    color: white;
	    padding: 10px;
	    border: none;
	    border-radius: 6px;
	    font-size: 1rem;
	    cursor: pointer;
	    transition: background-color 0.3s;
	}

	.login-btn:hover {
	    background-color: transparent;
	}

	.footer {
	    text-align: center;
	    margin-top: 20px;
	    font-size: 12px;
	    color: #777;
	}

	.d-flex {
	    display: flex !important;
	    margin-top: 18px;
	}

	.captcha[_ngcontent-ng-c626133939] .captcha_text[_ngcontent-ng-c626133939] {
	    background: #e8f0fe;
	    padding: 8px 15px;
	    font-family: cursive;
	    border-radius: 20px 0 0 20px;
	    border: 1px solid #bfbfbf;
	}

	/* FIXED: Remove conflicting label rule */
	label {
	    display: inline-block;
	}

	button, input, optgroup, select, textarea {
	    margin: 0;
	    font-family: inherit;
	    font-size: inherit;
	    line-height: inherit;
	}

	.mat-mdc-form-field-flex {
	    display: inline-flex;
	    align-items: baseline;
	    box-sizing: border-box;
	    width: 100%;
	}

	@media screen and (max-width: 480px) {
	    .login-container {
	        padding: 30px 20px;
	    }
	}

	.captcha {
	    input {
	        width: 100%;
	        border-radius: unset;
	        border: 1px solid #bfbfbf;
	        border-left: unset;
	        border-right: unset;
	        padding-left: 10px;
	        outline: unset;
	    }
	    .captcha_text {
	        background: #e8f0fe;
	        padding: 8px 15px;
	        font-family: cursive;
	        border-radius: 20px 0px 0px 20px;
	        border: 1px solid #bfbfbf;
	        height: 46px;
	    }
	    .btn.refresh {
	        padding: 5px 10px;
	        background: #e9e9e9;
	        border-radius: 0 20px 20px 0;
	        border: 1px solid #bfbfbf;
	        height: 46px;
	        img {
	            height: 17px;
	            opacity: 0.61;
	        }
	    }
	}

	.footer_content {
	    margin-top: auto;
	    text-align: center;
	    padding: 15px 0;
	    background: transparent;
	}

	main {
	    flex: 1;
	}

	footer {
	    flex-shrink: 0;
	    text-align: center;
	    background: #fff;
	    width: 100%;
	}

	.forget_pass {
	    margin-top: 15px;
	    margin-bottom: 10px;
	    font-weight: 500;
	    display: flex;
	    align-items: center;
	    justify-content: right;
	}

	hr {
	    color: inherit;
	    border-right-style: initial;
	    border-bottom-style: initial;
	    border-left-style: initial;
	    border-right-color: initial;
	    border-bottom-color: initial;
	    border-left-color: initial;
	    opacity: 0.25;
	    margin: 1rem 0px;
	    border-width: 0px 0px 0px;
	    border-image: initial;
	    border-top: var(--bs-border-width) solid;
	}

	.mb-2 {
	    text-align: center;
	}

	.signup_btn {
	    width: 50%;
	    background-color: rgb(97 99 105);
	    color: white;
	    padding: 10px;
	    border: none;
	    border-radius: 6px;
	    font-size: 16px;
	    cursor: pointer;
	    transition: background-color 0.3s;
	}

	.header-bar {
	    background-image: url(assets/images//header_bg_img.png), linear-gradient(to right, #0c2875, #0c2875);
	}

	/* Additional fix for password wrapper to ensure left alignment */
	.login-container div[style*="position: relative"] {
	    text-align: left !important;
	}

	/* Ensure error messages are left aligned */
	.login-container .error {
	    text-align: left !important;
	    margin-top: -10px;
	    margin-bottom: 10px;
	}

	/* Fix for forget password section */
	.login-container .forget_pass {
	    text-align: right !important;
	    justify-content: flex-end !important;
	}

	    body {
	        min-height: 100vh;
	        font-family: "Inter", sans-serif;
	        color: var(--text);
	        overflow-x: hidden;

	        background:
	            radial-gradient(
	                circle at top left,
	                rgba(255,255,255,.8) 0 12%,
	                transparent 12.2%
	            ),
	            linear-gradient(
	                135deg,
	                #edfaff 0%,
	                #e1f4ff 50%,
	                #d4edfc 100%
	            );
	    }

	    .page {
	        min-height: 100vh;
	        padding: 22px 28px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        position: relative;
	        overflow: hidden;
	    }

	    .page::before {
	        content: "";
	        position: absolute;

	        width: 820px;
	        height: 260px;

	        left: -220px;
	        top: -160px;

	        border-radius: 50%;

	        background: rgba(176, 221, 248, .34);
	    }

	    .page::after {
	        content: "";
	        position: absolute;

	        width: 1000px;
	        height: 340px;

	        right: -200px;
	        bottom: -230px;

	        border-radius: 50%;

	        background: rgba(177, 220, 247, .35);
	    }

	    .shell {
	        width: min(1500px, 100%);
	        min-height: 830px;

	        display: grid;
	        grid-template-columns:
	            minmax(500px, 570px)
	            minmax(700px, 1fr);

	        gap: 30px;

	        position: relative;
	        z-index: 2;
	    }

	    /* =====================================================
	       LEFT CARD
	    ====================================================== */

	    .login-panel {
	        position: relative;
	        overflow: hidden;

	        background: var(--card-bg);
	        border-radius: 28px;
	        box-shadow: var(--shadow);

	        padding: 46px 50px 30px;

	        display: flex;
	        flex-direction: column;
	        justify-content: center;
	    }

	    .login-panel::before {
	        content: "";

	        position: absolute;
	        left: -18px;
	        top: -16px;

	        width: 105px;
	        height: 105px;

	        background: #0877d3;

	        border-radius: 0 0 100% 0;
	    }

	    .login-panel::after {
	        content: "";

	        position: absolute;
	        right: -18px;
	        bottom: -18px;

	        width: 105px;
	        height: 105px;

	        background: #0877d3;

	        border-radius: 100% 0 0 0;
	    }

	    .secure-area {
	        display: flex;
	        flex-direction: column;
	        align-items: center;

	        position: relative;
	        z-index: 2;
	    }

	    /* =====================================================
	       ROTATING SECURE ACCESS CIRCLE
	    ====================================================== */

	    .secure-ring-box {
	        width: 96px;
	        height: 96px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        position: relative;

	        margin-bottom: 24px;
	    }

	    .secure-ring-rotate {
	        position: absolute;
	        inset: 0;

	        border-radius: 50%;

	        animation:
	            rotateSecureRing 5s linear infinite;
	    }

	    .secure-ring-rotate::before {
	        content: "";

	        position: absolute;
	        inset: 3px;

	        border-radius: 50%;

	        border-top: 4px solid var(--blue);
	        border-right: 4px solid var(--orange);
	        border-bottom: 4px solid transparent;
	        border-left: 4px solid var(--blue);
	    }

	    .secure-ring-rotate::after {
	        content: "";

	        position: absolute;
	        inset: 13px;

	        border-radius: 50%;

	        border:
	            2px dashed
	            #57bdf1;
	    }

	    @keyframes rotateSecureRing {
	        from {
	            transform: rotate(0deg);
	        }

	        to {
	            transform: rotate(360deg);
	        }
	    }

	    .secure-lock {
	        width: 57px;
	        height: 57px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        border-radius: 50%;

	        background:
	            linear-gradient(
	                145deg,
	                #0f98df,
	                #0372c9
	            );

	        color: #06203b;

	        font-size: 22px;

	        position: relative;
	        z-index: 2;

	        box-shadow:
	            0 5px 13px
	            rgba(0, 106, 190, .16);
	    }

	    .secure-label {
	        display: flex;
	        align-items: center;
	        justify-content: center;

	        gap: 14px;

	        color: #096abd;

	        font-weight: 800;
	        font-size: 13px;

	        letter-spacing: .4px;

	        margin-bottom: 17px;
	    }

	    .secure-label::before,
	    .secure-label::after {
	        content: "";

	        width: 44px;
	        height: 1px;

	        background:
	            #1397dc;
	    }

	    .login-title {
	        font-family:
	            "Poppins",
	            sans-serif;

	        color: #0d3155;

	        text-align: center;

	        font-size: 36px;
	        font-weight: 800;

	        line-height: 1.15;

	        margin-bottom: 10px;
	    }

	    .login-description {
	        max-width: 430px;

	        margin:
	            0 auto 30px;

	        color: #6784a0;

	        text-align: center;

	        font-size: 13px;
	        line-height: 1.65;
	    }

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

	    .input-box {
	        min-height: 58px;

	        display: flex;
	        align-items: center;

	        border:
	            1px solid
	            var(--border);

	        border-radius: 12px;

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

	        transition: .25s ease;
	    }

	    .input-box:focus-within {
	        border-color: #168bda;

	        box-shadow:
	            0 0 0 4px
	            rgba(16, 141, 219, .07);
	    }

	    .field-icon {
	        width: 48px;

	        flex: 0 0 48px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        color: #0874d2;

	        font-size: 18px;
	    }

	    .input-box input {
	        flex: 1;

	        width: 100%;
	        min-width: 0;

	        height: 56px;

	        border: 0;
	        outline: 0;

	        background: transparent;

	        color: #2e4c68;

	        font-size: 14px;

	        padding-right: 13px;
	    }

	    .password-toggle {
	        width: 48px;
	        height: 56px;

	        border: 0;
	        background: transparent;

	        color: #7692ad;

	        cursor: pointer;

	        font-size: 15px;
	    }

	    /* =====================================================
	       CAPTCHA
	    ====================================================== */

	    .captcha-row {
	        display: grid;

	        grid-template-columns:
	            128px
	            1fr
	            54px;

	        gap: 10px;

	        margin-bottom: 14px;
	    }

	    .captcha-view {
	        height: 55px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        position: relative;

	        overflow: hidden;

	        border:
	            1px solid
	            #bfd4e6;

	        border-radius: 12px;

	        background:
	            linear-gradient(
	                12deg,
	                transparent 47%,
	                #c9d7e5 48%,
	                #c9d7e5 49%,
	                transparent 50%
	            ),
	            linear-gradient(
	                -13deg,
	                transparent 47%,
	                #e2a95e 48%,
	                #e2a95e 49%,
	                transparent 50%
	            ),
	            #f3f8fc;
	    }

	    .captcha-view::before {
	        content: "";

	        position: absolute;

	        inset: 0;

	        background:
	            radial-gradient(
	                circle,
	                rgba(51, 128, 193, .15) 1px,
	                transparent 1.5px
	            );

	        background-size:
	            12px 12px;
	    }

	    .captcha-value {
	        position: relative;
	        z-index: 2;

	        color: #172c9f;

	        font-family:
	            Georgia,
	            serif;

	        font-size: 21px;
	        font-weight: 700;

	        letter-spacing: 2px;
	    }

	    .captcha-input {
	        height: 55px;

	        border:
	            1px solid
	            #bfd4e6;

	        border-radius: 12px;

	        outline: 0;

	        padding:
	            0 14px;

	        color: #2f4c67;

	        font-size: 14px;

	        background: #fff;
	    }

	    .captcha-input:focus {
	        border-color: #1388d7;
	    }

	    .captcha-refresh {
	        height: 55px;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        border: 0;
	        border-radius: 12px;

	        background: #dff2ff;

	        color: #0870c8;

	        font-size: 19px;

	        cursor: pointer;

	        transition: .2s ease;
	    }

	    .captcha-refresh:hover {
	        background: #caeaff;
	    }

	    .options-row {
	        display: flex;
	        align-items: center;
	        justify-content: space-between;

	        gap: 10px;

	        margin-bottom: 21px;

	        font-size: 12px;
	    }

	    .remember-row {
	        display: flex;
	        align-items: center;
	        gap: 7px;
	    }

	    .remember-row input {
	        width: 15px;
	        height: 15px;
	    }

	    .forgot-link {
	        color: #006dcc;
	        text-decoration: none;
	        font-weight: 600;
	    }

	    .signin-btn {
	        width: 100%;
	        height: 57px;

	        border: 0;
	        border-radius: 11px;

	        background:
	            linear-gradient(
	                90deg,
	                #0fa7dc 0%,
	                #0870d3 55%,
	                #084ec1 100%
	            );

	        color: #fff;

	        font-size: 15px;
	        font-weight: 700;

	        cursor: pointer;

	        box-shadow:
	            0 11px 25px
	            rgba(6, 80, 183, .22);

	        transition: .25s;
	    }

	    .signin-btn:hover {
	        transform: translateY(-2px);

	        box-shadow:
	            0 14px 29px
	            rgba(6, 80, 183, .30);
	    }

	    .separator {
	        display: flex;
	        align-items: center;

	        gap: 12px;

	        color: #617c98;

	        font-size: 12px;
	        font-weight: 600;

	        margin: 27px 0;
	    }

	    .separator::before,
	    .separator::after {
	        content: "";

	        height: 1px;
	        flex: 1;

	        background: #d7e5ef;
	    }

	    .home-btn {
	        width: 100%;
	        height: 52px;

	        border:
	            1px solid
	            #0575de;

	        border-radius: 10px;

	        background: #fff;

	        color: #0064c2;

	        font-size: 13px;
	        font-weight: 700;

	        cursor: pointer;
	    }

	    .home-btn i {
	        margin-right: 9px;
	    }

	    .protection-note {
	        display: flex;
	        align-items: center;
	        justify-content: center;

	        gap: 10px;

	        color: #6c84a0;

	        font-size: 11px;

	        margin-top: 28px;

	        position: relative;
	        z-index: 3;
	    }

	    .protection-note i {
	        color: #087cd7;
	        font-size: 19px;
	    }

	    .login-bottom-wave {
	        position: absolute;

	        left: 0;
	        right: 0;
	        bottom: 0;

	        height: 8px;

	        display: grid;
	        grid-template-columns:
	            1fr 1fr 1fr;

	        z-index: 1;
	    }

	    .login-bottom-wave span:nth-child(1) {
	        background: var(--orange);
	    }

	    .login-bottom-wave span:nth-child(2) {
	        background: #fff;
	    }

	    .login-bottom-wave span:nth-child(3) {
	        background: var(--green);
	    }

	    /* =====================================================
	       RIGHT PANEL
	    ====================================================== */

	    .hero-panel {
	        position: relative;
	        overflow: hidden;

	        border-radius: 28px;

	        background:
	            linear-gradient(
	                90deg,
	                rgba(244,253,255,.98) 0%,
	                rgba(233,248,255,.97) 62%,
	                rgba(222,242,254,.95) 100%
	            );

	        padding:
	            65px
	            55px
	            50px;

	        display: flex;
	        flex-direction: column;

	        align-items: center;
	        justify-content: center;

	        text-align: center;

	        min-width: 0;
	    }

	    /* =====================================================
	       MITHILA IMAGE
	    ====================================================== */

	    .mithila-image {
	        position: absolute;

	        top: -5px;
	        right: -2px;

	       width: 805px;
	height: 585px;
	        object-fit: contain;
	        object-position: top right;

	        z-index: 1;

	        pointer-events: none;

	        opacity: .94;

	        -webkit-mask-image:
	            linear-gradient(
	                to bottom,
	                #000 0%,
	                #000 68%,
	                rgba(0,0,0,.8) 82%,
	                transparent 100%
	            );

	        mask-image:
	            linear-gradient(
	                to bottom,
	                #000 0%,
	                #000 68%,
	                rgba(0,0,0,.8) 82%,
	                transparent 100%
	            );
	    }

	    .mithila-dots {
	        position: absolute;

	        top: 65px;
	        right: 115px;

	        width: 130px;
	        height: 150px;

	        z-index: 0;

	        opacity: .32;

	        background-image:
	            radial-gradient(
	                circle,
	                #4db2e8 2px,
	                transparent 2.5px
	            );

	        background-size:
	            14px 14px;
	    }

	    .hero-content {
	        position: relative;
	        z-index: 3;

	        width: 100%;

	        display: flex;
	        flex-direction: column;
	        align-items: center;
	    }

	    /* =====================================================
	       GOVERNMENT LOGO CIRCLE
	    ====================================================== */

	    .gov-logo-wrap {
	        width: 176px;
	        height: 176px;

	        position: relative;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        margin-bottom: 27px;
	    }

	    .gov-logo-ring {
	        position: absolute;
	        inset: 0;

	        border-radius: 50%;

	        border-top: 5px solid var(--blue);
	        border-right: 5px solid var(--green);
	        border-bottom: 5px solid var(--orange);
	        border-left: 5px solid #65bee8;

	        transform: rotate(18deg);
	    }

	    .gov-logo-ring::before {
	        content: "";

	        position: absolute;
	        inset: 13px;

	        border:
	            2px dashed
	            #71c6f1;

	        border-radius: 50%;
	    }

	    .gov-logo-inner {
	        width: 116px;
	        height: 116px;

	        border-radius: 50%;

	        display: flex;
	        align-items: center;
	        justify-content: center;

	        background: #fff;

	        color: #0866b7;

	        font-size: 26px;
	        font-weight: 700;

	        font-family: Georgia, serif;

	        position: relative;
	        z-index: 2;
	    }

	    .government-text {
	        color: #26486a;

	        font-family:
	            "Poppins",
	            sans-serif;

	        font-size: 23px;
	        font-weight: 700;

	        margin-bottom: 7px;
	    }

	    .data-lab {
	        font-family:
	            "Poppins",
	            sans-serif;

	        font-size:
	            clamp(
	                58px,
	                5.4vw,
	                80px
	            );

	        font-weight: 800;

	        letter-spacing: 2px;
	        line-height: 1;

	        color: #0871cf;

	        text-shadow:
	            0 2px 2px
	            rgba(0, 75, 145, .08);
	    }

	    .directorate {
	        margin-top: 8px;

	        color: #243f60;

	        font-family:
	            "Poppins",
	            sans-serif;

	        font-size: 22px;
	        font-weight: 800;
	    }

	    .mini-tricolor {
	        display: flex;
	        gap: 5px;

	        margin: 20px 0 27px;
	    }

	    .mini-tricolor span {
	        width: 52px;
	        height: 3px;
	    }

	    .mini-tricolor span:nth-child(1) {
	        background: var(--orange);
	    }

	    .mini-tricolor span:nth-child(2) {
	        background: #b8c8d4;
	    }

	    .mini-tricolor span:nth-child(3) {
	        background: var(--green);
	    }

	    .hero-description {
	        max-width: 680px;

	        color: #62809c;

	        font-size: 14px;
	        line-height: 1.8;

	        margin-bottom: 34px;
	    }

	    /* =====================================================
	       FEATURE CARDS
	    ====================================================== */

	    .features {
	        width: min(690px, 100%);

	        display: grid;

	        grid-template-columns:
	            repeat(3, 1fr);

	        gap: 17px;
	    }

	    .feature {
	        min-height: 168px;

	        padding: 20px 16px;

	        display: flex;
	        flex-direction: column;
	        align-items: center;
	        justify-content: center;

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

	        border:
	            1px solid
	            #bfd8e8;

	        border-radius: 13px;

	        transition: .25s ease;
	    }

	    .feature:hover {
	        transform: translateY(-4px);

	        box-shadow:
	            0 13px 27px
	            rgba(30, 91, 139, .10);
	    }

	    .feature-icon {
	        margin-bottom: 14px;

	        font-size: 35px;
	    }

	    .analytics-icon {
	        color: #03a5de;
	    }

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

	    .reports-icon {
	        color: var(--green);
	    }

	    .feature-title {
	        margin-bottom: 8px;

	        color: #213f60;

	        font-size: 13px;
	        font-weight: 800;
	    }

	    .feature-text {
	        color: #748ca5;

	        font-size: 11px;
	        line-height: 1.6;
	    }

	    /* =====================================================
	       LARGE SCREEN
	    ====================================================== */

	    @media (min-width: 1600px) {

	        .shell {
	            min-height: 860px;
	        }

	        .login-panel {
	            padding-left: 55px;
	            padding-right: 55px;
	        }

	        .hero-panel {
	            padding-left: 70px;
	            padding-right: 70px;
	        }

	        .mithila-image {
	            width: 804px;
	    height: 585px;
	        }
	    }

	    /* =====================================================
	       LAPTOP
	    ====================================================== */

	    @media (max-width: 1250px) {

	        .page {
	            padding: 25px;
	        }

	        .shell {
	            grid-template-columns:
	                minmax(420px, 500px)
	                minmax(560px, 1fr);
	        }

	        .login-panel {
	            padding-left: 37px;
	            padding-right: 37px;
	        }

	        .hero-panel {
	            padding-left: 32px;
	            padding-right: 32px;
	        }

	        .mithila-image {
	            width: 265px;
	            height: 470px;
	        }

	        .data-lab {
	            font-size: 58px;
	        }

	        .directorate {
	            font-size: 18px;
	        }
	    }

	    /* =====================================================
	       TABLET
	    ====================================================== */

	    @media (max-width: 1024px) {

	        .page {
	            padding: 20px;
	            align-items: flex-start;
	        }

	        .shell {
	            max-width: 760px;

	            grid-template-columns: 1fr;

	            gap: 18px;
	        }

	        .hero-panel {
	            order: 1;

	            min-height: 690px;
	        }

	        .login-panel {
	            order: 2;
	        }

	        .mithila-image {
	            width: 245px;
	            height: 420px;
	        }
	    }

	    /* =====================================================
	       SMALL TABLET / MOBILE
	    ====================================================== */

	    @media (max-width: 700px) {

	        .page {
	            padding: 12px;
	        }

	        .login-panel,
	        .hero-panel {
	            border-radius: 20px;
	        }

	        .login-panel {
	            padding:
	                33px
	                22px
	                27px;
	        }

	        .login-title {
	            font-size: 30px;
	        }

	        .hero-panel {
	            min-height: auto;

	            padding:
	                54px
	                20px
	                38px;
	        }

	        .gov-logo-wrap {
	            width: 140px;
	            height: 140px;
	        }

	        .gov-logo-inner {
	            width: 92px;
	            height: 92px;

	            font-size: 21px;
	        }

	        .government-text {
	            font-size: 19px;
	        }

	        .data-lab {
	            font-size: 48px;
	        }

	        .directorate {
	            font-size: 17px;
	        }

	        .mithila-image {
	            width: 180px;
	            height: 320px;

	            opacity: .67;
	        }

	        .mithila-dots {
	            width: 90px;
	            height: 110px;

	            right: 75px;

	            background-size:
	                12px 12px;
	        }

	        .features {
	            max-width: 430px;

	            grid-template-columns: 1fr;
	        }

	        .feature {
	            min-height: 115px;
	        }

	        .captcha-row {
	            grid-template-columns:
	                110px
	                1fr
	                48px;
	        }
	    }

	    /* =====================================================
	       PHONE
	    ====================================================== */

	    @media (max-width: 480px) {

	        .page {
	            padding: 7px;
	        }

	        .shell {
	            gap: 10px;
	        }

	        .login-panel {
	            padding:
	                28px
	                15px
	                24px;
	        }

	        .login-panel::before {
	            width: 76px;
	            height: 76px;
	        }

	        .login-panel::after {
	            width: 76px;
	            height: 76px;
	        }

	        .secure-ring-box {
	            width: 80px;
	            height: 80px;

	            margin-bottom: 18px;
	        }

	        .secure-lock {
	            width: 49px;
	            height: 49px;

	            font-size: 18px;
	        }

	        .secure-label {
	            font-size: 11px;
	        }

	        .secure-label::before,
	        .secure-label::after {
	            width: 30px;
	        }

	        .login-title {
	            font-size: 26px;
	        }

	        .login-description {
	            font-size: 12px;
	        }

	        .captcha-row {
	            grid-template-columns:
	                98px
	                minmax(0, 1fr)
	                44px;

	            gap: 6px;
	        }

	        .captcha-value {
	            font-size: 17px;
	        }

	        .captcha-input {
	            padding-left: 9px;
	            padding-right: 9px;

	            font-size: 12px;
	        }

	        .options-row {
	            flex-wrap: wrap;
	        }

	        .hero-panel {
	            padding:
	                45px
	                14px
	                29px;
	        }

	        .gov-logo-wrap {
	            width: 112px;
	            height: 112px;
	        }

	        .gov-logo-inner {
	            width: 72px;
	            height: 72px;

	            font-size: 17px;
	        }

	        .government-text {
	            font-size: 17px;
	        }

	        .data-lab {
	            font-size: 39px;
	            letter-spacing: 1px;
	        }

	        .directorate {
	            max-width: 300px;

	            font-size: 14px;
	        }

	        .hero-description {
	            font-size: 12px;
	        }

	        .mithila-image {
	            width: 145px;
	            height: 240px;

	            opacity: .42;
	        }

	        .mithila-dots {
	            display: none;
	        }
	    }