@font-face {
    font-family: "kal";
    src: url("./fonts/kalame/KalamehFaNum-Bold.ttf");
}
*{
    margin: 0;
    padding: 0;
}

:root {
    --color-primary: #5B628C; /* آبی تیره */
    --color-secondary: #F7A5A5; /* صورتی روشن */
    --color-bg: #FFDBB6; /* زمینه اصلی */
    --color-light: #FFF2EF; /* زمینه‌های فرعی */
    --color-text: #2E2E2E; /* متن تیره */
    --font:"kal" ,sans-serif;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
}

.sup-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.form-group{
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin: 7px;
}
.form-group label{
    margin: 5px 0;
}
.form-group input ,select ,textarea {
    padding: 10px;
    border: 1px solid var(--color-text);
    box-shadow: 0 0 4px var(--color-primary);
    border-radius: 12px;
    font-family: var(--font);
}

.form-group.password{
    position: relative;
}

#eye{
    position: absolute;
    left: 20px;
    bottom: 17px;
}
#eye:hover{
    cursor: pointer;
}
.submit-btn{
    width: 100%;
    text-align: center;
}
.submit-btn-btn{
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 5px 12px;
    font-family: var(--font);
    background-color:var(--color-secondary);
    margin: 10px 15px;
    border-radius: 12px;
    cursor: pointer;
}
.submit-btn-btn:hover{
    background-color: var(--color-primary);
}