.consultation { max-width: 640px; margin: 80px auto; padding: 20px; }
.consultation-card {
    position: relative; overflow: hidden; text-align: center;
    padding: 46px 40px; border-radius: 24px;
    background: var(--color0901);
    border: 1px solid color-mix(in srgb, var(--color0902) 8%, transparent);
    box-shadow: 0 16px 50px color-mix(in srgb, var(--color0902) 10%, transparent);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.consultation-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 5px;
    background: linear-gradient(90deg, var(--color0903), var(--color0904), var(--color0905));
}
.consultation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px color-mix(in srgb, var(--color0902) 16%, transparent);
}
.consultation-icon {
    width: 68px; height: 68px; margin: 0 auto 18px; border-radius: 20px;
    display: grid; place-items: center; font-size: 26px; color: #fff;
    background: linear-gradient(135deg, var(--color0903), var(--color0904));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--color0903) 40%, transparent);
}
.consultation-card h2 {
    font-family: Sahel-SemiBold; font-size: 28px; margin: 0 0 10px;
    color: var(--color0902);
}
.consultation-card p {
    font-family: Sahel-Light; direction: rtl; margin: 0 0 28px;
    color: color-mix(in srgb, var(--color0902) 60%, transparent);
}
.consultation-form { display: flex; flex-wrap: wrap; gap: 14px; }
.consultation-form input, .consultation-form textarea {
    flex: 1 1 15em; width: 100%; direction: rtl; text-align: right;
    font-family: Sahel-Light; font-size: 14px;
    padding: 14px 14px; border-radius: 12px; outline: none;
    color: var(--color0902);
    background: color-mix(in srgb, var(--color0902) 3%, transparent);
    border: 1px solid color-mix(in srgb, var(--color0902) 14%, transparent);
    transition: border-color 0.3s, box-shadow 0.3s; resize: vertical;
}
.consultation-form textarea { flex-basis: 100%; }
.consultation-form input::placeholder, .consultation-form textarea::placeholder {
    color: color-mix(in srgb, var(--color0902) 42%, transparent);
}
.consultation-form input:focus, .consultation-form textarea:focus {
    border-color: var(--color0903);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color0903) 13%, transparent);
}
.consultation-card form button {
    width: 100%; margin-top: 20px; cursor: pointer;
    font-family: Sahel-SemiBold; font-size: 15px; color: #fff;
    padding: 14px 0; border: none; border-radius: 12px;
    background: linear-gradient(135deg, var(--color0903), var(--color0904));
    transition: transform 0.25s ease, box-shadow 0.3s ease, filter 0.3s;
}
.consultation-card form button:hover {
    transform: translateY(-2px); filter: brightness(1.05);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--color0903) 38%, transparent);
}
@media screen and (max-width: 600px) {
    .consultation { margin: 40px 12px; padding: 0; }
    .consultation-card { padding: 34px 22px; }
    .consultation-card h2 { font-size: 24px; }
}