﻿

body
{
    margin:0;
    font-family:Yekan_Regular;
}

/*----------------------------------------------*/

.ContentLayer
{
    min-height: 80vh;
    color: #414141;
    font-family:Yekan_Regular;
    padding: 50px 8%;
    display: flex;
    flex-direction:row;
    direction:rtl;
}
    
    .ImageLayer
    {
        width:40%;
    }
    
    .ProductImage
    {
        width:100%;
        height:auto;
    }
    
    .formviewImage
    {
        width:100%;
    }

        
   /*---------------------------------*/
    
.InfoLayer
{
    width:40%;
    margin-right:4%;
}
    
    .leftColumn
    {
        font-weight:bold;
    }
    
    .rightColumn
    {
        padding:8px 20px 0;
    }
    
    .tblTitle
    {
        margin-top:0;
    }

    /*---------------------------------------*/

    .btnControl
        {
            min-width: 100px;
            display: inline-block;
            color: white;
            background-color: #FF5572;
            font-family: Yekan_Regular;
            font-weight: bold;
            border: none;
            padding: 10px 20px;
            margin-left: 10%;
            margin-top: 50px;
            text-align: center;
            box-sizing: border-box;
            cursor:pointer;
        }

            .btnControl:hover
            {
                color: #FF5572;
                background-color: white;
                border: 1px solid #FF5572;
            }

/*----------------------------------------- Tablet --------------------------------------*/
@media (max-width: 768px)
{
    .ContentLayer
    {
        flex-direction:column;
        align-items: center;
    }

    .ImageLayer
    {
        width:60%;
        margin:0;
        margin-bottom:50px;
    }

    .InfoLayer
    {
        width: 60%;
        margin:0;
    }

}


/*------------------------------------------- Mobile ------------------------------------*/
@media (max-width: 420px)
{
    .ContentLayer
    {
        flex-direction: column;
        align-items: center;
    }

    .ImageLayer
    {
        width:70%;
        margin:0;
        margin-bottom:30px;
    }

    .InfoLayer
    {
        width: 70%;
        margin:0;
    }

}