* {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "shabnam-light";
}

input::placeholder,
textarea::placeholder {
    user-select: none;
}

button {
    user-select: none;
}

body {
    overflow-x: hidden;
}

.container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    max-width: 100%;
}

.left-side {
    display: flex;
    justify-content: center;
    max-width: 44.5%;
    flex-flow: column wrap;
    align-items: center;
    margin-top: 1rem;
    margin-left: 1rem;
    margin-right: auto;
    height: 95%;
    gap: 2rem;
    padding: 4.5rem 1.5rem;
    background: linear-gradient(280deg, #00416A, #E4E5E6);
    border-radius: 20px;
    user-select: none;
}

.right-side {
    display: flex;
    position: fixed;
    top: 1rem;
    width: 50%;
    flex-flow: column wrap;
    align-items: center;
    margin-top: 0;
    margin-left: auto;
    margin-right: 1rem;
    height: 95%;
    padding: 2rem 1.5rem;
    background-color: #f3f3f3;
    box-shadow: 0 0 6px rgb(104, 100, 100);
    border-radius: 20px;
}

.right-side button {
    width: 45%;
    height: 2.25rem;
    border-radius: 4px;
    font-weight: Bold;
    cursor: pointer;
    transition: all 250ms ease-out;
    background-color: #ffffff;
}

.right-side button:hover {
    background-color: #a0a2a3;
    color: white;
}

.right-side form {
    display: flex;
    margin-bottom: auto;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    width: 95%;
    height: 100%;
    background-color: #cacccc;
    border-radius: 6px;
    gap: 1rem;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 450ms;
    background-color: #ffffff;
}

option {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #383434;
    color: white;
    transition: all 450ms;
}

.arrow-down_svg {
    position: relative;
    top: -2.5rem;
    left: -6.5rem;
    color: black;
    margin-bottom: -1.65rem;
    width: 16px;
    pointer-events: none;
}

.right-side .name-email {
    margin: 0 auto;
    width: 45%;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: 6px;
    outline: 2px solid transparent;
    transition: all 150ms ease-in;
    background-color: #ffffff;

}

.onvan {
    margin: 0 auto;
    width: 45%;
    height: 2.25rem;
    padding: 0 .75rem;
    border-radius: 6px;
    outline: 2px solid transparent;
    background-color: #ffffff;
    transition: all 150ms ease-in;
}

#id_subject {
    margin: 0 auto;
    width: 45%;
    height: 2rem;
    padding: 0 .75rem;
    background-color: #ffffff;
    border-radius: 6px;
    outline: 2px solid transparent;
    transition: all 150ms ease-in;

}

#id_message {
    margin: 0 auto;
    background-color: #ffffff;
    width: 45%;
    height: 12rem;
    padding: .75rem;
    border-radius: 6px;
    resize: none;
    outline: 2px solid transparent;
    transition: all 150ms ease-in;

}

#id_message:focus,
#id_subject:focus,
.name-email:focus,
.onvan:focus {
    outline: 2px solid black;
}

.left-side_title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 2rem;
    background: linear-gradient(45deg, #ec2F4B, #009FFF);
    color: #f5f5f5;
    width: 55%;
    height: 4.5rem;
    border-top-right-radius: 64px;
    border-bottom-left-radius: 64px;
    text-shadow: 1px 1px 6px black;
}

.left-side_text {
    text-align: justify;
    line-height: 1.75rem;
    color: #ffffffe4;
    text-shadow: 1px 1px 5px rgb(150, 149, 149);
}

.left-side_bottom_socials {
    display: flex;
    margin-bottom: 2rem;
    margin-top: auto;
    flex-flow: row wrap;
    list-style-type: none;
    align-items: center;
    gap: 5rem;
}

.socials-item {
    display: flex;
    flex-flow: column wrap;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: black;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.419);
}

.left-side img {
    width: 54px;
}

@media (max-width: 1250px) {
    .container {
        flex-flow: column-reverse wrap;
    }

    .left-side {
        display: flex;
        justify-content: center;
        max-width: 60%;
        flex-flow: column wrap;
        align-items: center;
        margin: 2rem auto;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.459);
        height: 95%;
        gap: 2rem;
        padding: 4.5rem 1.5rem;
        background: linear-gradient(280deg, #00416A, #E4E5E6);
        border-radius: 20px;
        user-select: none;
    }

    .right-side {
        display: flex;
        position: relative;
        top: 1rem;
        width: 60%;
        flex-flow: column wrap;
        align-items: center;
        margin: 0 auto;
        height: 95%;
        padding: 2rem 1.5rem;
        background-color: #f3f3f3;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.459);
        border-radius: 20px;
    }

    form {
        padding: 1rem;
    }

    input {
        width: 60% !important;
    }

    select {
        width: 60% !important;
    }

    textarea {
        width: 60% !important;
    }

    button {
        width: 60% !important;
    }
}

@media (max-width: 887px) {
    input {
        width: 70% !important;
    }

    select {
        width: 70% !important;
    }

    textarea {
        width: 70% !important;
    }

    button {
        width: 70% !important;
    }
}

@media (max-width: 777px) {

    .left-side,
    .right-side {
        max-width: 90% !important;
        width: 90% !important;
    }

    input {
        width: 60% !important;
    }

    select {
        width: 60% !important;
    }

    textarea {
        width: 60% !important;
    }

    button {
        width: 60% !important;
    }
}

@media (max-width: 606px) {

    .left-side,
    .right-side {
        max-width: 94% !important;
        width: 94% !important;
    }

    input {
        width: 75% !important;
    }

    select {
        width: 75% !important;
    }

    textarea {
        width: 75% !important;
    }

    button {
        width: 75% !important;
    }
}

@media (max-width: 485px) {

    .left-side,
    .right-side {
        max-width: 94% !important;
        width: 94% !important;
    }

    input {
        width: 90% !important;
    }

    select {
        width: 90% !important;
    }

    textarea {
        width: 90% !important;
    }

    button {
        width: 90% !important;
    }
}

@media (max-width: 424px) {

    .left-side,
    .right-side {
        max-width: 97% !important;
        width: 97% !important;
    }

    input {
        width: 95% !important;
    }

    select {
        width: 95% !important;
    }

    textarea {
        width: 95% !important;
    }

    button {
        width: 95% !important;
    }

    h4 {
        width: 70% !important;
        font-size: 1.5rem !important;
    }
}

@media (max-width: 399px) {

    .left-side,
    .right-side {
        max-width: 97% !important;
        width: 97% !important;
    }

    input {
        width: 97% !important;
    }

    select {
        width: 97% !important;
    }

    textarea {
        width: 97% !important;
    }

    button {
        width: 97% !important;
    }

    form {
        width: 100% !important;
    }

    h4 {
        width: 80% !important;
        font-size: 1.25rem !important;
    }
}