* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --white: #fff;
    --black: #000;
    --bright-blue: #2558EB;
    --dark-blue: #172754;
    --light-gray: #F6F6F6;
    --soft-blue: #6088FA;
    --pale-blue: #BFCFFE;
    --indigo-blue: #1E3A8A;
    --light-royal-blue: #93AEFD;
    --primary-blue: #3B6BF6;
    --primary-blue-dark: #1D4DD8;
    --soft-gray: #E7E7E7;
    --frost-blue: #EFF3FF;
    --airy-blue: #DBE4FE;
    --light-green: #E3EFD1;
    --soft-green: #ECFDF3;
    --dark-gray: #888;
    --dark-black: #0B0B0B;
    --dark-green: #027A48;
    --gary-text: #888888;
    --dark-text-gray: #5D5D5D;
    --gray-card-text: #B0B0B0;
    --darkish-gray: #3D3D3D;
    --day-gray: #6B7280;
    --gray-border: #DEDEDE;
    --ans-text: #4B5D67;
    --dark-red: #B10303;
    --light-red: #F00;
    --correct: #91C149;
    --footer-gray: #9CA3AF;
}
/* font */
@font-face {
    font-family: 'Helvetica Neue',Inter;
    src: url('../assets/fonts/Helvetica-font/HelveticaNeue-Bold-02.woff2') format('woff2'),
         url('../assets/fonts/Helvetica-font/HelveticaNeue-Bold-02.ttf') format('truetype');
    font-style: normal;
}

.login-page img.login-logo {
    height: 100px;
    width: 220px;
}
.login-page img.reset-logo {
    width: 150px;
    height: 100%;
}


.helvetica-neue { font-family: 'Helvetica Neue',Inter;}
h1,h2,h3,h4,h5,h6{ font-family: 'Helvetica Neue',Inter;}
/* colors */
.gary-text { color: var(--gary-text); }
.dark-text-gray { color: var(--dark-text-gray); }
.black { color: var(--black); }
.gray-card-text { color: var(--gray-card-text); }
.darkish-gray { color: var(--darkish-gray); }
.day-gray { color: var(--day-gray); }
.dark-blue { color: var(--dark-blue); }
.footer-gray { color: var(--footer-gray); }
.frost-blue { color: var(--frost-blue); }
body {  font-family: "Inter", sans-serif;}
body { background: var(--white) !important;}
/* Scrollbar */
::-webkit-scrollbar { width: 10px; background-color: transparent;}
::-webkit-scrollbar-track {   background-color: transparent;}
::-webkit-scrollbar-thumb {  background-color: #888; border-radius: 20px;}
::-webkit-scrollbar-thumb:hover {  background-color: #555;}
.fs-24 {
    font-size: 24px;
}

h1,
.fs-20 {
    font-size: 20px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}



h1,
.fs-20 {
    font-size: 20px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}



p {
    font-size: 16px;
}

.fs-16 {
    font-size: 14px;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}

/* font-weight */
.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}


h1,
.fs-20 {
    font-size: 20px;
}

h2 {
    font-size: 16px;
}

h3 {
    font-size: 14px;
}

p {
    font-size: 16px;
}

.fs-16 {
    font-size: 16px;
}

.fs-14 {
    font-size: 14px;
}

.fs-12 {
    font-size: 12px;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    word-break: break-word;
}

p,
a,
span {
    line-height: 1.5;
    word-break: break-word;
}

.bold {
    font-weight: 700;
}

.semi_bold {
    font-weight: 600;
}

.regular {
    font-weight: 500;
}

.normal {
    font-weight: 400;
}
.border-footer {  border-top: 0.667px solid var(--50, #EFF3FF);}
.register-bg { background-size: cover; border-radius: 15px; height: 100%; width: 100%; justify-content: center; display: flex; align-items: center; background-position: center; background: linear-gradient(194deg, var(--100, #DBE4FE) 5.23%, rgba(227, 239, 209, 0.20) 101.37%); stroke-width: 1px; stroke: var(--100, #DBE4FE); filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12)); border-radius: 20px; }
.subscription-screen { background-size: cover; border-radius: 15px; width: 500px; height: 500px; justify-content: center; display: flex; align-items: center; background-position: center; background: linear-gradient(194deg, var(--100, #DBE4FE) 5.23%, rgba(227, 239, 209, 0.20) 101.37%); stroke-width: 1px; stroke: var(--100, #DBE4FE); filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12)); border-radius: 20px; }
.otp-screen .subscription-screen { background-size: cover; border-radius: 15px; width: 674px; height: 450px; justify-content: center; display: flex; align-items: center; background-position: center; background: linear-gradient(194deg, var(--100, #DBE4FE) 5.23%, rgba(227, 239, 209, 0.20) 101.37%); stroke-width: 1px; stroke: var(--100, #DBE4FE); filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.12)); border-radius: 20px; }
.banner-section { height: 681px; }
.banner-section .card-content { position: absolute; bottom: 93px; right: 33%; padding: 18px 12px; }
body .banner-section .card-body { margin: 0; padding: 0; }
.banner-section .asterisk-img { position: absolute; right: 75%; top: 55px; }
.register-section { height: 785px; }
.register-section .card-content { position: absolute; bottom: 150px; right: 33%; padding: 18px 12px; }
body .register-section .card-body { margin: 0; padding: 0; }
.register-section .asterisk-img { position: absolute; right: 75%; top: 102px; }
body .login-content input { border-radius: var(--m, 16px); border: 1px solid var(--soft-gray); background: var(--soft-gray); display: flex; height: var(--300, 56px); padding: 4px 23px; align-items: center; gap: 12px; align-self: stretch; }
body .register-content .register-input { display: flex; height: 40px; padding: 4px 23px; align-items: center; gap: 12px; align-self: stretch; border-radius: var(--m, 16px); border: 1px solid var(--soft-gray); background: var(--White, #FFF); box-shadow: 0 2px 16px 0 var(--airy-blue); }
body .subscription-screen .register-input { display: flex; height: 40px; padding: 4px 23px; align-items: center; gap: 12px; align-self: stretch; border-radius: var(--m, 16px); border: 1px solid var(--200, #BFCFFE); background: var(--White, #FFF); box-shadow: 0 2px 16px 0 var(--100, #DBE4FE); }
.header-light-blue-btn { display: flex; font-size: 14px; padding: 8px 32px; justify-content: center; align-items: center; gap: 10px; width: fit-content; color: var(--white); border-radius: 8px; border: 1px solid var(--soft-blue); background: linear-gradient(180deg, var(--light-royal-blue) 0%, var(--primary-blue) 100%); box-shadow: 0px 2px 4px 0px var(--pale-blue), 0px 2px 4px 0px var(--soft-blue) inset; box-shadow: 0px 2px 4px 0px var(--200, #BFCFFE), 0px 2px 4px 0px var(--400, #6088FA) inset; }
.payment-img-position { position: absolute; right: 30px; top: 71%; transform: translateY(-50%); width: 36px; height: 40px; pointer-events: none; }
/* footer */
.footer-section { background: var(--950, var(--dark-blue)); padding-block: 2rem; display: flex; justify-content: center; align-items: center; }
.footer-section ul li a { font-size: 16px; font-weight: 400; color: var(--text-gray); }
.img-fluid-footer { max-width: 74%; height: auto; }
.top-footer-sec { padding-block: 3rem 11rem; }
/* .top-footer-sec .footer-exam-content {
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-blue-dark) 50%, var(--indigo-blue) 100%);
    border-radius: 20px;
    padding: 3rem 4rem;
    position: absolute;
    z-index: 1;
        left: 50%;
    transform: translateX(-50%);
} */
.footer-register-student { border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(2px); padding: 10px 20px; }
.img.img-size { width: 60%; height: 60vh; object-fit: contain; }
/* mask-img */
.image-mask-container { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center top; mask-position: center top; overflow: hidden; width: 515px; height: 515px; -webkit-mask-image: url(../images/mask-img.png); mask-image: url(../images/mask-img.png); position: relative; }
.image-mask-container img { width: 100%; height: 540px; object-fit: cover; position: absolute; top: -24px; right: 0; }
.card-content img, .asterisk-img img { width: 100%; height: 100%; }
.banner-section .asterisk-img {width: 75px; height: 70px; }
/* .toggle-password {
    position: absolute;
    top: 50%;        
    right: 15px;            
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    color: #666;       toggle-password
} */

.toggle-password {
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    color: #666;
    pointer-events: auto;
}
body:has(.is-invalid) .toggle-password {
    top: 50%;
    right: 35px;
}

.toggle-passwords {
    position: absolute;
    /* top: 48%;           */
    top: 19px;
    right: 15px;        
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 2;
    color: #666;
    pointer-events: auto;
}
/* body:has(.pass-error-message) .toggle-passwords{
    top:33%;
} */
 /* .position-relative:has(.pass-error-message) .toggle-passwords {
    top: 33%;
} */
/* Hide arrows in input type="number" (Chrome, Safari, Edge) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide arrows in Firefox */
input[type=number] {
    -moz-appearance: textfield;
}
/* Base position of the toggle eye icon */