* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: yekan, 'Open Sans', sans-serif;
}

h2 {
    font-family: yekan, 'Open Sans', sans-serif;
}

body {
    direction: rtl;
}

.login-page {

    min-height: 100svh;

    padding: 30px 15px;

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

    background: linear-gradient(135deg, #353535, #232323);

}

.login-box {

    width: min(960px, 95%);
    min-height: 650px;
    height: auto;

    background: #fff;

    border-radius: 18px;

    display: flex;

    overflow: hidden;

    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);

}

.login-form {

    width: 50%;

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

}

.login-form h2 {

    margin-bottom: 50px;

    font-size: 34px;

    color: #444;

}

.input {

    width: 320px;
    height: 52px;

    background: #eef4ff;

    border-radius: 50px;

    margin-bottom: 18px;

    position: relative;

}

.input input {

    width: 100%;
    height: 100%;

    border: none;
    outline: none;

    background: none;

    padding: 0 55px;

    font-size: 15px;

}

.input i {

    position: absolute;

    right: 22px;
    top: 17px;

    color: #555;

}

button {

    width: 320px;
    height: 55px;

    border: none;

    margin-top: 10px;

    background: #353535;

    color: #fff;

    border-radius: 50px;

    font-size: 17px;

    cursor: pointer;

    transition: .3s;

}

button:hover {

    transform: translateY(-3px);

    box-shadow: 0 2px 15px #353535;

}

.login-image {

    width: 50%;

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

    position: relative;

}

.logo-circle {

    width: 260px;
    height: 260px;

    background: #f7f7f7;

    border-radius: 50%;

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

}

.logo-circle img {

    width: 150px;

}

.shape {

    position: absolute;

    animation: float 4s ease-in-out infinite;

}

.circle {

    width: 18px;
    height: 18px;

    border: 3px solid #08a8ef;

    border-radius: 50%;

    top: 180px;
    left: 80px;

}

.square {

    width: 10px;
    height: 10px;

    border: 2px solid #ddd;

    top: 120px;
    right: 140px;

}

.triangle {

    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #74d04b;

    right: 80px;
    top: 220px;

}

.dot {

    width: 10px;
    height: 10px;

    border: 3px solid #09a8ef;

    border-radius: 50%;

    right: 120px;
    bottom: 160px;

}

@keyframes float {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }

}

@media (max-width: 768px) {

    .login-box {
        flex-direction: column-reverse;
        min-height: auto;
    }

    .login-form,
    .login-image {
        width: 100%;
    }

}

.input,
button {
    width: 100%;
    max-width: 320px;
}

@media (max-width: 768px) {

    .logo-circle {
        width: 180px;
        height: 180px;
    }

    .logo-circle img {
        width: 110px;
    }

}

@media (max-width: 768px) {

    .shape {
        display: none;
    }

}