:root {
    --mont-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Base helper (optional) */
.montserrat-mont {
    font-family: var(--mont-family);
    font-style: normal;
    font-optical-sizing: auto;
    font-display: swap; /* if self-hosted via @font-face you can apply this in @font-face instead */
}

/* Plain weights */
.montserrat-mont-100 {
    font-weight: 100;
    font-style: normal;
}

.montserrat-mont-200 {
    font-weight: 200;
    font-style: normal;
}

.montserrat-mont-300 {
    font-weight: 300;
    font-style: normal;
}

.montserrat-mont-400 {
    font-weight: 400;
    font-style: normal;
}
/* regular */
.montserrat-mont-500 {
    font-weight: 500;
    font-style: normal;
}

.montserrat-mont-600 {
    font-weight: 600;
    font-style: normal;
}

.montserrat-mont-700 {
    font-weight: 700;
    font-style: normal;
}
/* bold */
.montserrat-mont-800 {
    font-weight: 800;
    font-style: normal;
}

.montserrat-mont-900 {
    font-weight: 900;
    font-style: normal;
}

/* Italic weights */
.montserrat-mont-100-italic {
    font-weight: 100;
    font-style: italic;
}

.montserrat-mont-200-italic {
    font-weight: 200;
    font-style: italic;
}

.montserrat-mont-300-italic {
    font-weight: 300;
    font-style: italic;
}

.montserrat-mont-400-italic {
    font-weight: 400;
    font-style: italic;
}

.montserrat-mont-500-italic {
    font-weight: 500;
    font-style: italic;
}

.montserrat-mont-600-italic {
    font-weight: 600;
    font-style: italic;
}

.montserrat-mont-700-italic {
    font-weight: 700;
    font-style: italic;
}

.montserrat-mont-800-italic {
    font-weight: 800;
    font-style: italic;
}

.montserrat-mont-900-italic {
    font-weight: 900;
    font-style: italic;
}

/* Optional small helpers */
.montserrat-mont-uppercase {
    text-transform: uppercase;
    letter-spacing: .08em;
}

.montserrat-mont-heading {
    font-family: var(--mont-family);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
}

.form-container {
    background: #e0e0e0;
    border-radius: 30px;
    padding: 30px;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    width: 400px;
    max-width: 90vw;
    box-sizing: border-box;
    margin: 0 auto;
}

@media (max-width: 500px) {
    .form-container {
        padding: 16px;
        border-radius: 18px;
        width: 100%;
        box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
    }
}
.input-field {
    width: 100%;
    padding: 15px;
    padding-left: calc(1.5em + 1.3rem + 2px);
    margin: 10px 0;
    border: none;
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
    outline: none;
    font-weight: 600;
    font-size: 14px;
}

.login-btn {
    width: 70%;
    padding: 15px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
    color: red;
    font-weight: bold;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

    .login-btn:hover {
        box-shadow: inset 4px 4px 8px #bebebe, inset -4px -4px 8px #ffffff;
    }

.image-custom {
    width: 120px;
    transition: transform 0.05s linear;
}

.linear-text {
    color: transparent;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background: #373D8F;
    background: linear-gradient(323deg, rgba(55, 61, 143, 1) 0%, rgba(126, 166, 224, 1) 100%);
    font-weight: 700;
    font-size: 25px;
    font-weight: 1000;
}

.sub-text{
    color: rgb(109, 109, 109) !important;
}
:root {
    --db-red: #EC0016;
    --db-black: #151515;
    --db-green: #005F6A;
    --db-white: #FFFFFB;
}