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

body
{
    margin:0;
}

/*----------------------------------------------*/
main
{
    width:100%;
    min-height:80vh;
    background-color:var(--cream);
}

.ContentLayer
{
    width:80%;
    height:inherit;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    margin:0 auto;
    padding:50px 0;

    font-family:Yekan_Regular;
    color:var(--brown);
}

/*----------------------------------------------*/
.FormLayer
{
    width:50%;
    border-radius:20px;
    box-shadow:var(--thin-gray-boxshadow-4), var(--thin-gray-boxshadow-5);
    padding:20px;
    text-align:right;
    direction:rtl;
}

.FormLayer table
    {
        width:100%;
        /*border:1px solid red;*/
    }

    .FormLayer table .col1
    {
        width: 50px;
        text-align: left;
    }

    .FormLayer .lbl
    {
        margin-left:10px;
    }

    .FormLayer .txt
    {
        width:100%;
        height:25px;
        font-family:inherit;
        margin-bottom:5px;
        color:inherit;
        border:none;
        border:1px solid var(--brown);
    }

    .FormLayer .txtMessage
    {
        width:100%;
        font-family:inherit;
        color:inherit;
        border:none;
        border:1px solid var(--brown);
    }

    .FormLayer .btn
    {
        width:100%;
        height:25px;
        font-family:inherit;
        color:inherit;
        border:none;
        border:1px solid var(--brown);
    }

    /*----------------------------------------------*/
.LinkLayer
{
    width:40%;
    padding:20px;
    display:flex;
    flex-direction:column;

    border-left:5px dashed var(--brown);
}

    .LinkLayer table .icon
    {
        width: 50px;
        text-align: left;
    }

    .LinkLayer table .icon img
    {
        width:35px;
    }

    .LinkLayer table .text
    {
    }
/*----------------------------------------- Tablet --------------------------------------*/
@media (max-width: 768px)
{
    .ContentLayer
    {
        width: 70%;
        flex-direction: column;
        justify-content:center;
    }

    .FormLayer
    {
        width: 100%;
    }

    .LinkLayer
    {
        width: 100%;
        margin-top:30px;
    }
}


/*------------------------------------------- Mobile ------------------------------------*/
@media (max-width: 420px)
{
    .ContentLayer
    {
        width: 90%;
        flex-direction: column;
        justify-content:center;
    }

    .FormLayer
    {
        width: 100%;
    }

    .LinkLayer
    {
        width: 100%;
        margin-top:30px;
    }
}