@import url(vazir.css);

html, body{font: normal 14px/1.6 vazir, sans-serif; color: #6f6f6f;margin:0;padding: 0;}
h1, h2, h3, h4{color: #413c43;}
.rtl{direction: rtl;}
.center{justify-content: center; text-align: center;}
a{text-decoration: none; color: #413c43;}

.wrapper{box-sizing:border-box;position:relative;margin: 0 auto;background: url('img/background.svg'); background-repeat: no-repeat; background-position: top center;}
.top-container{margin: 0 auto;}
header{padding: 25px 0 45px 0;}
header ul{list-style: none;display: flex;flex-direction: row;flex-wrap: wrap;}
header ul li{margin-left: 15px;}
header ul li:last-child{margin-left: 0;}
.description{color: #fff;}
.description h1, .description p{text-align: justify; margin-bottom: 0}
.description h1{font-size: 23px; line-height: 1.2; color: #fff;}
.description p{margin-bottom: 35px;}
.description a{display: flex; flex-direction: row; justify-content: center; width: 100%}
.button{cursor: pointer; background: #fff; padding: 5px 25px 5px 10px; border-radius: 50px; color: #453f49; display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center;margin-top: 15px;box-shadow: 0 30px 75px -15px rgba(0,0,0,0.1), 0 25px 40px -20px rgba(0,0,0,0.2);}
.button div{display: flex; flex-direction: column;}
.button h4{font-size:13px;margin: 0;} .button span{font-size: 12px; color: #8a8a8a;}
.button i{width: 48px; height: 48px; border-radius: 50%;}
.button i.web{background: url('img/web.svg'); background-repeat: no-repeat; background-position: center;}
.button i.whatsapp{background: url('img/whatsapp.svg'); background-repeat: no-repeat; background-position: center;}
.button i.android{background: url('img/android.svg'); background-repeat: no-repeat; background-position: center;}
.button i.ios{background: url('img/ios.svg'); background-repeat: no-repeat; background-position: center;}
.mockup{position: relative;height: 570px;}
.mockup img{position: absolute; top: 0; left: 0;}
.mockup img.phone{left: 50%; margin-left: -135px; box-shadow: 0 30px 75px -15px rgba(0,0,0,0.1), 0 25px 40px -20px rgba(0,0,0,0.2); border-radius: 30px;}

.features{margin-top: 100px; justify-content: center;}
.margin-check{display: inline-block;position: relative;text-align: center;}
.margin-check:after {position: absolute;content: '';border-bottom: 3px solid #f70849;width: 25%;transform: translateX(-50%);bottom: 0px;left: 50%;}
.feature-list{margin: 60px 0 ;}
.feature{display: flex; flex-direction: column; align-items: center;margin: 15px 0;min-height: 215px;}
.feature .icon{width: 48px; height: 48px; padding: 15px;background: #fff;border-radius: 50%; display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; align-items: center;box-shadow: 0 30px 75px -15px rgba(217,222,228,1), 0 25px 40px -20px rgba(217,222,228,1)}
.feature p{text-align: center;margin-top: 0;width:100%;}
.video{margin: 100px 0; justify-content: center;}
.cover{display: flex; flex-direction: row; justify-content: center; align-items: center; border-radius: 15px; background: #ececec; height: 350px; margin-bottom: 35px;}
.btn-outline-danger{border:1px red solid; background-color:red;border-radius:30px;flex-direction:row;text-align:center}
.btn-outline-danger div{;width:100%}
.btn-outline-danger h4{color:white;}
.footer{min-height: 350px; display: flex; flex-direction: row; justify-content: center;background: url('img/background.svg'); transform:scaleY(-1); background-position: bottom center; background-repeat: no-repeat;}
.footer .container{transform:scaleY(-1);color: #fff;padding-top: 165px;}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 479px){
	header ul{display: none;}
	.description{display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
	.description h1, .description p { text-align: center; }
	.mockup{margin-top: 45px;}
	.footer .container{padding-top: 200px;}
}