:root {

    --primary: #006A67;
    --primary-light: #4C8784;

    --background: #F4FBF9;
    --surface: #FFFFFF;

    --text: #1C1B1F;
    --outline: #DADCE0;

    --radius: 28px;

}
@font-face {
    font-family: Vazirmatn;
    src: url("../fonts/Vazirmatn-Regular.woff2");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {

    font-family: "Vazirmatn";
    background: var(--background);
    direction: rtl;
    min-height: 100vh;

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

    padding: 40px;
}

.app {
    width: 100%;
    max-width: 700px;
}

.card {

    background: var(--surface);

    border-radius: var(--radius);

    padding: 40px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, .06),
        0 1px 3px rgba(0, 0, 0, .1);

}

.top-bar {
    margin-bottom: 30px;
}

.logo {

    width: max-content;

    padding: 10px 18px;

    border-radius: 16px;

    background: #DDF4F2;

    color: var(--primary);

    font-weight: bold;
}

.form-title {

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

    margin-bottom: 10px;

    color: var(--text);
}

.form-subtitle {

    color: #666;

    margin-bottom: 35px;

    font-size: 15px;
}

.input-group {

    position: relative;

    margin-bottom: 28px;
}

.input-group input,
.input-group textarea {

    width: 100%;

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

    background: white;

    padding: 20px 16px 10px;

    border-radius: 18px;

    font-size: 15px;

    outline: none;

    transition: .3s;
}

.input-group textarea {

    height: 180px;

    resize: none;
}

.input-group label {

    position: absolute;

    right: 16px;
    top: 16px;

    background: white;

    padding: 0 6px;

    color: #777;

    transition: .25s;

    pointer-events: none;
}

.input-group input:focus,
.input-group textarea:focus {

    border-color: var(--primary);

    box-shadow: 0 0 0 4px rgba(0, 106, 103, .10);
}

.input-group input:focus+label,
.input-group textarea:focus+label,
.input-group input:valid+label,
.input-group textarea:valid+label {

    top: -10px;

    font-size: 12px;

    color: var(--primary);
}

.submit-btn {

    width: 100%;

    height: 56px;

    border: none;

    border-radius: 18px;

    background: var(--primary);

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    transition: .3s;
}

.submit-btn:hover {

    background: var(--primary-light);

    transform: translateY(-2px);
}

@media(max-width:768px) {

    .card {
        padding: 24px;
    }

    .form-title {
        font-size: 24px;
    }

}