@charset "utf-8";
/* CSS Document */
/*	General Styling
----------------------------------------------------------------------*/
@import url("bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
	/* primary color */
	--primary-100: #F1F4F7;
	--primary-200: #E0E7ED;
	--primary-300: #C1CEDB;
	--primary-400: #98ADC4;
	--primary-500: #6786A7;
	--primary-600: #325C88;
	--primary-700: #163B64;
	--primary-800: #072A51;
	--primary-900: #002147;
	--primary-1000: #00142D;
	/* secondary color */
	--secondary-100: #FEF7F0;
	--secondary-200: #FEEDDD;
	--secondary-300: #FCD9B8;
	--secondary-400: #FBC28F;
	--secondary-500: #F9AC66;
	--secondary-600: #F89A44;
	--secondary-700: #DC8639;
	--secondary-800: #BB702D;
	--secondary-900: #98571F;
	--secondary-1000: #784113;
	/* neutral color */
	--neutral-100: #ffffff;
	--neutral-200: #fbfbfb;
	--neutral-300: #f6f6f6;
	--neutral-400: #e8e9ea;
	--neutral-500: #d6d6d6;
	--neutral-600: #b8b8b7;
	--neutral-700: #969695;
	--neutral-800: #666664;
	--neutral-900: #484846;
	--neutral-1000: #1a1a18;
	/* danger color */
	--danger-100: #fcebec;
	--danger-200: #f4c0c5;
	--danger-300: #efa2a9;
	--danger-400: #e87882;
	--danger-500: #e35d6a;
	--danger-600: #dc3545;
	--danger-700: #c8303f;
	--danger-800: #9c2631;
	--danger-900: #791d26;
	--danger-1000: #5c161d;
	/* success color */
	--success-100: #e7f8f2;
	--success-200: #b5e9d8;
	--success-300: #91dfc5;
	--success-400: #5fd0ab;
	--success-500: #40c79a;
	--success-600: #10b981;
	--success-700: #0fa875;
	--success-800: #0b835c;
	--success-900: #096647;
	--success-1000: #074e36;
	/* warning color */
	--warning-100: #fff9e6;
	--warning-200: #ffecb2;
	--warning-300: #ffe28d;
	--warning-400: #ffd559;
	--warning-500: #ffcd39;
	--warning-600: #ffc107;
	--warning-700: #e8b006;
	--warning-800: #b58905;
	--warning-900: #8c6a04;
	--warning-1000: #6b5103;
	/* gray color */
	--gray-100: #f9fafb;
	--gray-200: #f3f4f6;
	--gray-300: #e5e7eb;
	--gray-400: #d1d5db;
	--gray-500: #9ca3af;
	--gray-600: #6b7280;
	--gray-700: #4b5563;
	--gray-800: #374151;
	--gray-900: #1f2937;
	--gray-1000: #111827;
	/* info color */
	--info-100: #eff6ff;
	--info-200: #dbeafe;
	--info-300: #bfdbfe;
	--info-400: #93c5fd;
	--info-500: #60a5fa;
	--info-600: #3b82f6;
	--info-700: #2563eb;
	--info-800: #1d4ed8;
	--info-900: #1e40af;
	--info-1000: #111827;
	/* indigo color */
	--indigo-100: #efe6fd;
	--indigo-200: #e0cffc;
	--indigo-300: #c29ffa;
	--indigo-400: #a370f7;
	--indigo-500: #8540f5;
	--indigo-600: #6610f2;
	--indigo-700: #520dc2;
	--indigo-800: #3d0a91;
	--indigo-900: #1e40af;
	--indigo-1000: #140330;
	--bg-white: #ffffff;
	--transition: 0.18s cubic-bezier(.4, 0, .2, 1);
	--shadow-sm: 0 1px 4px rgba(0, 60, 100, 0.06);
    --shadow-md: 0 4px 20px rgba(0, 60, 100, 0.09);
    --shadow-lg: 0 8px 40px rgba(0, 60, 100, 0.13);
	--ink: var(--primary-900);
	--text-white: #ffffff;
}

html, body {height: 100%;}
body {font-family: "Montserrat", sans-serif; font-weight: 400; color: var(--ink); margin: 0;}
ul {list-style-type: none;}
.clear {clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0;}
.extra-wrap {overflow: hidden;}
.block {display: block;}
.in-block {display: inline-block;}
.p-rel {position: relative;}
.wrapper {width: 100%; overflow: hidden;}
.super-container {margin: 0; padding: 0px; position: relative;}
.container {position: relative;}
img {vertical-align: middle; height: auto; max-width: 100%; border: 0;}
a {text-decoration: none; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.font11 {font-size: 11px !important;}
.font12 {font-size: 12px !important;}
.font13 {font-size: 13px !important;}
.font14 {font-size: 14px !important;}
.font15 {font-size: 15px !important;}
.font17 {font-size: 17px !important;}
.font18 {font-size: 18px !important;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}

::placeholder {
    color: rgba(24, 24, 24, 0.10);
    opacity: 1; /* Firefox */
}
::-ms-input-placeholder { /* Edge 12 -18 */
    color: rgba(24, 24, 24, 0.10);
}
section {
	padding: 90px 0;
}

/* bullet list
--------------------------------------------------------------*/
.bullet-list {
    padding-left: 1.5rem;
}
.bullet-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 0.25rem;
}
.bullet-list li:before {
    content: "\F287";
    font-family: bootstrap-icons;
    position: absolute;
    left: 0px;
    top: 7px;
    font-size: 6px;
}

/* scan
--------------------------------------------------------------*/
.surface .scan {
	position: absolute;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(180deg, transparent, rgba(224, 122, 8, .10), transparent);
    filter: blur(4px);
    animation: sweep 9s linear infinite;
}
@keyframes sweep {
	0% {transform:translateY(-160px)}
	100% {transform:translateY(120vh)}
}


/* Forms
--------------------------------------------------------------*/
.form {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}
.form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 16px;
    font-size: 14px;
}
.form .form-grid.onefr {
    grid-template-columns: 1fr;
}
.form .form-floating .form-control,
.form .form-floating .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--neutral-200);
}
.form .form-floating label {
    color: var(--neutral-500);
}
.form .form-floating textarea {
    min-height: 88px;
    resize: vertical;
}
.form-floating>textarea:focus~label::after,
.form-floating>textarea:not(:placeholder-shown)~label::after {
    background-color: transparent;
}
.form .hint {
    font-size: 12px;
    color: var(--neutral-500);
    margin-top: 2px;
}
.form-select option {
    color: #333333;
}
.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}
.input-group .form-floating ~ .btn {
    background-color: rgba(255, 255, 255, 0.06);
    border-width: 1px 1px 1px 0;
    border-style: solid;
    box-shadow: none;
    border-color: rgba(255, 255, 255, 0.14);
    margin-left: 0 !important;
}
.input-group .form-floating .form-control ~ .btn {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
    height: 58px;
}
.input-group .form-floating .form-control ~ .btn:hover,
.input-group .form-floating .form-control ~ .btn:focus {
    background-color: transparent;
}

/* ANIMATIONS
--------------------------------------------------------------*/
/* hero load: staggered fade-up of hero copy on page load */
#hero .section-head > *,
#hero .cta-row {opacity:0;transform:translateY(20px);animation:heroUp .7s cubic-bezier(.22,.61,.36,1) forwards}
#hero .section-head > *:nth-child(1){animation-delay:.15s}
#hero .section-head > *:nth-child(2){animation-delay:.28s}
#hero .section-head > *:nth-child(3){animation-delay:.41s}
#hero .cta-row {animation-delay:.67s;}
@keyframes heroUp{to{opacity:1;transform:none}}
@keyframes heroLeft{to{opacity:1;transform:none}}
#hero .snippet-img {opacity:0;transform:translateX(50px);animation:heroLeft 1.7s cubic-bezier(.22,.61,.36,1) forwards}

/* scroll reveal: elements start hidden, fade+rise when .in is added */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}

/* stagger: children of a revealed grid cascade */
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.00s}
.stagger.in>*:nth-child(2){transition-delay:.08s}
.stagger.in>*:nth-child(3){transition-delay:.16s}
.stagger.in>*:nth-child(4){transition-delay:.24s}
.stagger.in>*:nth-child(5){transition-delay:.32s}
.stagger.in>*:nth-child(6){transition-delay:.40s}

@media (prefers-reduced-motion:reduce) {
    html{scroll-behavior:auto}
    .reveal,.stagger>*{opacity:1;transform:none;transition:none}
    .hero-copy>*{opacity:1;transform:none;animation:none}
    .reveal .eyebrow::before,.stagger.in .eyebrow::before{animation:none;width:22px}
    .btn:hover{transform:none}
    a.arrow:hover,.block a:hover{gap:6px}
    .qa .ans{transition:none}
}
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: none;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* buttons
--------------------------------------------------------------*/
.primary-btn {
    background-color: var(--secondary-600);
    color: var(--text-white);
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 600;
    line-height: normal;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.primary-btn:hover,
.primary-btn:active,
.primary-btn:first-child:active,
.primary-btn:focus-visible {
    background-color: var(--secondary-700) !important;
    box-shadow: 0 10px 24px -10px rgba(224, 122, 8, .7);
    color: var(--text-white);
}
.ghost-btn {
    background-color: transparent;
    color: var(--ink);
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 12px;
    line-height: normal;
    border: 1px solid var(--primary-200);
}
.ghost-btn:hover {
    background-color: var(--primary-100);
    border-color: var(--primary-500);
}
.link-btn-secondary {
    color: var(--secondary-600);
}
.ghost-btn-dark {
    background-color: transparent;
    color: var(--text-white);
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 12px;
    line-height: normal;
    border: 1px solid rgba(255,255,255,.16);
}
.ghost-btn-dark:hover {
    background-color: rgba(255, 255, 255, .08);
    border-color: rgba(255,255,255,.32);
}


/* login / register
--------------------------------------------------------------*/
#lr-container {
    color: #fff;
    background: linear-gradient(160deg, var(--primary-1000) 0%, var(--primary-900) 75%);
    -webkit-font-smoothing: antialiased;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
#lr-container #brand {
    background-color: var(--gray-200);
    position: relative;
    overflow: hidden;
    color: var(--ink);
    padding: 48px 56px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
}
#lr-container #brand .surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
#lr-container #brand .grid {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(177, 178, 181, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(177, 178, 181, .10) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: radial-gradient(125% 100% at 20% 18%, #000 38%, transparent 84%);
    -webkit-mask-image: radial-gradient(125% 100% at 20% 18%, #000 38%, transparent 84%);
}
#brand .logo {
    position: relative;
    width: 230px;
}
#brand .brand-copy {
    position: relative;
    z-index: 2;
    max-width: 450px;
}
.brand-copy .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary-600);
    margin-bottom: 20px;
}
.brand-copy .eyebrow .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary-600);
    box-shadow:0 0 0 4px rgba(251,208,169,1);
    animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
    50% {
        box-shadow:0 0 0 9px rgba(224,122,8,0);
    }
}
.brand-copy h1 {
    font-weight: 600;
    font-size: 33px;
}
.brand-copy p {
    color: var(--primary-500);
    margin-bottom: 0;
}
#brand .trust-badges {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
#brand .trust-badges .badge {
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--gray-400);
    background-color: var(--gray-100);
    padding: 7px 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ink);
}
#brand .trust-badges .badge svg {
    fill: var(--secondary-600);
    width: 13px;
    height: 13px;
}
#lr-container #panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 40px;
    overflow-y: auto;
    height: 100vh;
}
.login-page .panel-card {
    width: 100%;
    max-width: 400px;
}
#panel .card-logo img {
    height: 48px;
    width: auto;
}
#panel .panel-nav {
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.14);
    background-color: rgba(255,255,255,0.07);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 auto 25px;
    width: 100%;
    max-width: 400px;
}
#panel .panel-nav .nav-link {
    width: 50%;
    text-align: center;
    padding: 10px;
    font-weight: 500;
    border-radius: 6px;
    color: var(--gray-400);
}
#panel .panel-nav .nav-link:hover,
#panel .panel-nav .nav-link:focus {
    color: var(--text-white);
}
#panel .panel-nav .nav-link.active {
    background-color: var(--bg-white);
    color: var(--ink);
}
.panel-card .panel-head {
    margin-bottom: 25px;
}
.panel-card .panel-head h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 5px;
}
.panel-card .panel-head p {
    color: var(--primary-300);
    margin-bottom: 0;
    font-size: 14px;
}
.login-form.form .form-grid {
    grid-template-columns: 1fr;
    margin-bottom: 16px;
}
.login-form .check-link-row {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.login-form .check-link-row .remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--primary-300);
    cursor: pointer;
    user-select: none;
}
.login-form .check-link-row .remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--secondary-600) ;
    cursor: pointer;
}
.panel-card .footer {
    font-size: 13px;
    color: var(--primary-300);
    margin: 20px 0 0;
    text-align: center;
}

.signup-page .steps-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 20px;
}
.signup-page .steps-list .step-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--primary-500);
    transition: color .25s;
}
.signup-page .steps-list .step-item.active {
    color: var(--ink);
}
.signup-page .steps-list .num {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600;
    border: 1.5px solid var(--primary-300);
    transition: all .25s;
    background: #fff;
}
.signup-page .steps-list .step-item.active .num {
    background: var(--secondary-600);
    border-color: var(--secondary-600);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(224, 122, 8, .2);
}
.signup-page .steps-list .step-item .lbl {
    font-size: 14.5px;
    font-weight: 500;
}
.signup-page .steps-list .step-item .lbl small {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--primary-500);
}
.signup-page .panel-card {
    width: 100%;
    max-width: 700px;
}
.signup-page .panel-card .panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.signup-page .panel-head .stepcount {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-300);
    flex-shrink: 0;
}
.signup-page .progress {
    height: 4px;
    background: var(--gray-500);
    border-radius: 99px;
    margin-bottom: 28px;
    overflow: hidden;
}
.signup-page .progress span {
    display: block;
    height: 100%;
    width: 50%;
    background: var(--secondary-600);
    border-radius: 99px;
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
#panel .action-btns {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
}
#panelFormFade .carousel-item {
    padding: 0 5px;
}


/* Toggle Switch
--------------------------------------------------------------*/
.field-control-toggle {
	display: flex;
	align-items: center;
	column-gap: 5px;
    justify-content: end;
}
.field-control-toggle .toggle {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 16px;
	flex-shrink: 0;
}
.field-control-toggle .toggle .toggle__input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.field-control-toggle .toggle .toggle__track {
	position: absolute;
	inset: 0;
	background-color: #2ecc8f;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.25s ease;
}
.field-control-toggle .toggle .toggle__thumb {
	position: absolute;
	top: 2px;
	left: 3px;
	width: 12px;
	height: 12px;
	background-color: #ffffff;
	border-radius: 50%;
	transition: transform 0.25s ease;
	pointer-events: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.field-control-toggle .toggle .toggle__input:checked + .toggle__track {
	background-color: #2ecc8f;
}
.field-control-toggle .toggle .toggle__input:not(:checked) + .toggle__track {
	background-color: #d1d5db;
}
.field-control-toggle .toggle .toggle__input:checked ~ .toggle__thumb {
	transform: translateX(12px);
}
.field-control-toggle .status-label {
	font-size: 15px;
	font-weight: 400;
	color: var(--success-600);
	transition: color 0.25s ease;
}
.field-control-toggle .status-label.inactive {
	color: #9ca3af;
}


/* captcha
--------------------------------------------------------------*/
.captcha-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
}
.captcha-row .captcha-img {
    flex: none;
    width: 104px;
    height: 54px;
    border-radius: 4px;
    border: 0;
    background: #f3eee6
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='48'%3E%3Ctext x='14' y='34' font-family='monospace' font-size='26' font-style='italic' fill='%23334' transform='rotate(-4 60 24)' letter-spacing='3'%3E7H4XL%3C/text%3E%3Cline x1='6' y1='30' x2='114' y2='18' stroke='%23889' stroke-width='1'/%3E%3Cline x1='10' y1='12' x2='110' y2='38' stroke='%23aab' stroke-width='1'/%3E%3C/svg%3E")
        center/cover;
}
.captcha-row .captcha-refresh {
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: rgba(226, 235, 244, 0.7);
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.captcha-row .captcha-refresh:hover {
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.captcha-row .captcha-input {
    flex: 1;
}
.captcha-row ~ .err-msg {
    display: none;
    color: #FFB3AB;
    font-size: 12.5px;
    margin-top: 6px;
}
.captcha-row .form-floating {
    flex: 1;
}

/* error msg
--------------------------------------------------------------*/
.error-msg {
    display: none;
    color: var(--danger-400);
    font-size: 12.5px;
    margin-top: 2px;
    font-weight: 500;
}
.invalid .error-msg {
    display: block;
}
.form .invalid input {
    border-color:var(--danger-400) !important;
}
.invalid .hint {
    display: none;
}

.carousel .carousel-item {
    animation: fade .5s ease;
    transition: none;
    margin: 0;
}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}



/* verify-screen
--------------------------------------------------------------*/
.verify-screen {
    text-align: center;
    padding: 20px 0;
    width: 100%;
    max-width: 450px;
    text-align: center;
    margin: 0 auto;
}
.verify-screen .mail-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(26, 161, 121, .20);
    color: var(--success-600);
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
}
.verify-screen h4 {
    font-size: 26px;
}



input[type="password"]::-ms-reveal {
    display: none;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control:-webkit-autofill:focus {
    transition: background-color 600000s ease-in-out 0s, color 600000s ease-in-out 0s !important;
}


/* header
--------------------------------------------------------------*/
#header {
    padding: 16px 0;
    background-color: var(--bg-white);
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    z-index: 997;
    top: 0;
    left: 0;
    right: 0;
}
#header .logo {
    height: 46px;
}



/* user-verification-page
--------------------------------------------------------------*/
.user-verification-page {
    background-color: var(--gray-100);
    min-height: 100dvh;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--secondary-600);
    position: relative;
    margin-bottom: 20px;
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--secondary-600);
}

.verification-card {
    animation: fade .5s ease;
    background-color: var(--bg-white);
    border-radius: 18px;
    border: 1px solid var(--gray-300);
    padding: 45px;
    box-shadow: 0 30px 70px -40px rgba(0,33,71,.30);
    text-align: center;
    margin-top: 4rem;
}
.verification-card .verify-icon {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    background-color: var(--neutral-300);
    border: 1px solid var(--neutral-400);
    border-radius: 100%;
    margin: 0 auto 20px;
    padding: 12px;
}
.verification-card .card-title {
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 14px;
}
.verification-card .form {
    row-gap: 0;
}
.verification-card .otp {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 30px;
}
.verification-card .otp input {
    width: 54px;
    height: 60px;
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.verification-card .otp input:focus {
    outline: none;
    border-color: var(--secondary-500);
    box-shadow: 0 0 0 4px rgba(248, 154, 68, .16);
    background: var(--secondary-100);
}
.verification-card .otp input.filled {
    border-color: var(--primary-500);
    box-shadow: none;
    background-color: var(--bg-white);
}
.verification-card  .resend {
    margin-top: 22px;
    font-size: 14px;
    color: var(--neutral-800);
}
.verification-card .resend button {
    background: none;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--secondary-600);
    cursor: pointer;
    padding: 0;
}
.verification-card .resend .timer {
    color: var(--neutral-800);
    font-weight: 600;
}


/* animatons
--------------------------------------------------------------*/
@keyframes fade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: none;
    }
}






@media (max-width: 768px) { } 

/* `sm` applies to x-small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	
    #lr-container {grid-template-columns: 1fr;}
    #lr-container #brand {display: none;}
    #lr-container #panel {padding: 20px;}

    .signup-page .panel-card .panel-head {flex-direction: column; row-gap: 15px; align-items: flex-start; margin-bottom: 10px;}

    .captcha-row {margin-top: 0;}

    .user-verification-page .logo {height: 34px;}
    .verification-card {padding: 25px;}
    .verification-card .otp input {width: 40px; height: 44px;}

}

/* `md` applies to small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {

    #lr-container {grid-template-columns: 1fr;}
    #lr-container #brand {display: none;}
    #lr-container #panel {padding: 20px;}

    .signup-page .panel-card .panel-head {flex-direction: column; row-gap: 15px; align-items: flex-start; margin-bottom: 10px;}

}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {

    #lr-container {grid-template-columns: 1fr;}
    #lr-container #brand {display: none;}
    #lr-container #panel {padding: 20px;}
    #panel .card-logo img {height: 50px;}

}



/* `xl` applies to large devices (desktops, less than 1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {

    #lr-container #brand {padding-left: 30px; padding-right: 30px;}
    
    .captcha-row {margin-top: 0;}

    .user-verification-page .logo {
        height: 40px;
    }
}

/* `xxl` applies to x-large devices (large desktops, less than 1400px) / 15" Notebook (1366x768) */
@media (min-width: 1200px) and (max-width: 1399.98px) { }

/* 19" Desktop (1400x900) */
@media (min-width: 1367px) and (max-width: 1440px) {}

/* 22" Desktop (1680x1050) / 20" Desktop (1600x900) */
@media (min-width: 1441px) and (max-width: 1680px) {}

/* 24" Desktop (1920x1200) / 23" Desktop (1920x1080) */
@media (min-width: 1681px) and (max-width: 1920px) {}