@font-face {
    font-family: 'Bahij_Muna-Regular';
    src: url("fonts/Bahij_Muna-Regular.ttf");
}

body {
    background-color: #fff;
    position: relative;
    font-family: 'Bahij_Muna-Regular';
    font-size: 14px;
    line-height: 1.3;
    direction: rtl;

    overflow: hidden;
    margin: 0;
    text-rendering: optimizeLegibility;
}

ul li {
    list-style: none;
}

a {
    display: block;
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6, strong {
    font-family: 'Bahij_Muna-Regular';
}

h1, h2, h3, h4, h5, h6, strong, p {
    /*font-weight: 400;*/
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input, textarea, button, select {
    font-family: 'Bahij_Muna-Regular';
    outline: none;
}

img {
    display: block;
    width: 100%;
}

.site-width {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.well {
    position: relative;
    overflow: hidden;
    transition: 1s cubic-bezier(0.5, 0, 0.5, 1);
}

/*.top {*/
    /*font-size: 80%;*/
    /*color: hsla(0, 0%, 100%, .25);*/
    /*position: relative;*/
    /*top: -.2em;*/
    /*cursor: pointer;*/
/*}*/

.panel {
    position: relative;
    height: 100vh;
    overflow: hidden;
    font-size: 24px;
    /*padding: 1em;*/
    box-sizing: border-box;
    color: #000;
    cursor: default;
}

.panel:nth-child(1) {
    background-color: #fff;
    background-image: url("images/zahr-bg.png");
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 50%;

}

.panel:nth-child(2) {
    background: #fefefe;
}

.panel:nth-child(2) .content > div {
    padding: 40px;
    box-sizing: border-box;
}

.content {
    display: table;
    width: 100%;
    height: 100vh;

}

.content > div {
    display: table-cell;
    width: 50%;
    position: relative;
    vertical-align: middle;
}

.image {
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    max-width: 400px;
    right: 0;
    margin: auto;
    background-position: center;

}

.desc img {
    max-width: 120px;

}

.desc p {
    max-width: 400px;
}

.fb a {
    height: 30px;
    width: 30px;
    display: block;
    /* background: #fff; */
    /*float: left;*/
    overflow: hidden;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 5px;

    background-image: url('data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ1NS43MyA0NTUuNzMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ1NS43MyA0NTUuNzM7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8cGF0aCBzdHlsZT0iZmlsbDojM0E1NTlGOyIgZD0iTTAsMHY0NTUuNzNoMjQyLjcwNFYyNzkuNjkxaC01OS4zM3YtNzEuODY0aDU5LjMzdi02MC4zNTNjMC00My44OTMsMzUuNTgyLTc5LjQ3NSw3OS40NzUtNzkuNDc1ICBoNjIuMDI1djY0LjYyMmgtNDQuMzgyYy0xMy45NDcsMC0yNS4yNTQsMTEuMzA3LTI1LjI1NCwyNS4yNTR2NDkuOTUzaDY4LjUyMWwtOS40Nyw3MS44NjRoLTU5LjA1MVY0NTUuNzNINDU1LjczVjBIMHoiLz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==');
}

#googleMap {
    height: 50vh;
}

.contact p {
    margin-bottom: 10px;
    font-size: 20px;

}

.top,.bottom{
    position: absolute;
    bottom: 10px;
    right: 10px;
    /*background: #f9b5a4;*/
    padding: 10px 20px;
    opacity: 0.4;
    /* width: 100%; */
    border-radius: 50%;
    /* text-align: center; */
    cursor: pointer;
    -moz-animation: bounce 2s infinite;
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.top:hover,.bottom:hover{
    color: #9a4b9d;
    opacity: 1;
}


@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@media only screen and (max-width: 768px) {
    .panel:nth-child(1) {
        background-image: none;
    }
    .top,.bottom{
     display: none;
    }

}
@media only screen and (max-width: 515px) {
    .content > div.image {
        width: 100%;
        position: absolute;
        opacity: 0.2;
    }



    .panel:nth-child(2) .content > div {
        padding: 14px;
    }
    .content > div {
        width: 100%;
    }
    .panel:nth-child(2) .content {
        display: block;
    }

    .panel:nth-child(2) .content > div {
        display: block;
        width: 100%;
        padding: 0;
        padding-top: 20px;
    }
    .contact p {
        margin-bottom: 0;
        font-size: 18px;
    }

}