@charset "UTF-8";
/*
Theme Name: Ramadan+ Html Landing Page
Description:  قالب لندینگ رمضان پلاس
Version: 1.0.0
Author: Amir_KHP
Author URI: http://umx.ir
*/
@charset "UTF-8";html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,top-header,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;outline:0}
html{height:101%}
body{font-size:62.5%;line-height:1;font-family:yekan,Arial,Tahoma,Verdana,sans-serif}
article,aside,details,figcaption,figure,footer,top-header,menu,nav,section{display:block}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
strong{font-weight:700}
input{outline:0}
table{border-collapse:collapse;border-spacing:0}
img{border:0;max-width:100%;height:auto}
a{text-decoration:none;color:inherit;transition:ease-in-out .15s}
.clearfix:before,.container:after{content:"";display:table}
.clearfix:after{clear:both}
.clearfix{zoom:1}
.clear{clear:both}
*{box-sizing:border-box}
@font-face{font-family:'vazir';src:url(fonts/Vazir-Light.eot);src:url(fonts/Vazir-Light.eot?#iefix) format("embedded-opentype"),url(fonts/Vazir-Light.woff2) format("woff2"),url(fonts/Vazir-Light.woff) format("woff"),url(fonts/Vazir-Light.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'vazirbold';src:url(fonts/Vazir-Bold.eot);src:url(fonts/Vazir-Bold.eot?#iefix) format("embedded-opentype"),url(fonts/Vazir-Bold.woff2) format("woff2"),url(fonts/Vazir-Bold.woff) format("woff"),url(fonts/Vazir-Bold.ttf) format("truetype");font-weight:400;font-style:normal}
@font-face{font-family:'persiannum';src:url(fonts/Vazir-Bold-FD-WOL.eot);src:url(fonts/Vazir-Bold-FD-WOL.eot?#iefix) format("embedded-opentype"),url(fonts/Vazir-Bold-FD-WOL.woff2) format("woff2"),url(fonts/Vazir-Bold-FD-WOL.woff) format("woff"),url(fonts/Vazir-Bold-FD-WOL.ttf) format("truetype");font-weight:400;font-style:normal}
html{scroll-behavior:smooth;}
body{direction:rtl;font:normal 16px/24px vazir;text-align:right;}
#scroll{position:fixed;right:10px;bottom:10px;cursor:pointer;width:50px;height:50px;background-color:#FFA000;display:none;border-radius:60px;z-index:33;box-shadow:0 0 20px 0 rgba(0,0,0,0.08);text-align:center;line-height:50px}
#scroll:hover{background-color:#212121;opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100)}
.container{width:1170px;margin:0 auto;position:relative}
.navigation{;padding:10px 0}
.navigation ul{font:normal 13px/50px vazir;color:#fff;}
.navigation ul li{float:right;margin:0 12px}
.navigation ul li:first-child{margin-right:0}
.logo{float:left;margin:0;max-height:50px}
.navigation li a:hover{border-bottom:1px solid #212121}
.open-btn{margin-top:10px;float:right;cursor:pointer;padding:10px;border-radius:100%;display:none}
.menu-icon{background-image:url(img/menu.svg);background-size:contain;background-position:center;width:25px;height:25px;display:block}
.closebtn{width:0;position:fixed;top:0;background:rgba(0,0,0,.5);height:100vh;display:block;transition:none;z-index:100000}
.header{position:relative;background:linear-gradient(180deg,#662D91 0%,#1d0030 50%);}
.main-header{background:url(img/pattern.svg)}
.flexbox{display:flex;justify-content:space-between;align-items:center;overflow:hidden;}
.header-image{max-width:calc(50% - 30px);width:530px;height:530px;background-image:url(img/ramadan.png);background-repeat:no-repeat;background-position:center;background-size:contain}
.header-title{width:50%;text-align:center}
.header-title h1{font:normal 48px/2 vazirbold;color:#F9A825;text-shadow:0 2px 5px rgba(0,0,0,.01)}
.header-title p{margin:20px 0 50px 0;font:normal 24px/1.5 vazir;color:#EEEEEE}
a.scroll-bottom{display:inline-block;-webkit-transform:translate(0, -50%);transform:translate(0, -50%);color:#EEEEEE;font:normal 20px/1 vazir;text-decoration:none;transition:opacity .3s;height:50px;position:relative;}
a.scroll-bottom span{position:absolute;top:0;left:50%;width:30px;height:50px;margin-left:-15px;border:2px solid #EEEEEE;border-radius:50px;box-sizing:border-box;}
a.scroll-bottom span::before{position:absolute;top:10px;left:50%;content:'';width:6px;height:6px;margin-left:-3px;background-color:#EEEEEE;border-radius:100%;-webkit-animation:sdb10 2s infinite;animation:sdb10 2s infinite;box-sizing:border-box;}
@-webkit-keyframes sdb10{0%{-webkit-transform:translate(0, 0);opacity:0;}
40%{opacity:1;}
80%{-webkit-transform:translate(0, 20px);opacity:0;}
100%{opacity:0;}
}
@keyframes sdb10{0%{transform:translate(0, 0);opacity:0;}
40%{opacity:1;}
80%{transform:translate(0, 20px);opacity:0;}
100%{opacity:0;}
}
.tahvil{padding:50px 0 80px 0;color:#fff;min-height:198px}
#countdown{display:flex;align-items:center;justify-content:center}
#countdown span{display:inline-block;margin:0 20px;font:normal 42px/36px persiannum;width:50px;text-align:center}
#countdown ul li{display:inline-block;margin:0 20px;font:normal 16px/2 vazir;width:50px;text-align:center}
#countdown p{font:normal 22px/2 vazirbold;margin:0 10px}
.white-background{background:#fff;position:relative;padding:75px 0 90px 0;}
.grey-background{background:#F5F5F5;position:relative;padding:75px 0 90px 0;}
.purple-background{background:#F3E5F5;position:relative;padding:75px 0;}
.black-background{background:#424242;position:relative;padding:75px 0;color:#fff}
.grey-background::before, .white-background::before, .purple-background::before, .black-background::before{content:"";display:block;position:absolute;min-width:100%;max-width:1920px;height:75px;top:-75px;background-position:center;background-size:1921px 75px;background-repeat:no-repeat;}
.white-background::before{background-image:url(img/white-curved.svg)}
.grey-background:before{background-image:url(img/gray-curved.svg)}
.purple-background::before{background-image:url(img/purple-curved.svg)}
.black-background::before{background-image:url(img/black-curved.svg)}
.title{margin-bottom:80px;position:relative}
.title-border{border-bottom:2px solid #e1e1e1;padding-top:25px}
.title h2{position:absolute;font:normal 24px/2 vazirbold;color:#7B1FA2;top:0;padding:0 15px;margin:0 50px}
.title p{position:absolute;font:normal 16px/48px vazirbold;color:#fff;top:0;padding:0 15px;margin:0 50px;left:0}
.title a{background:#FFA000;padding:10px 30px;border-radius:100px;box-shadow:0 0 10px 0 rgba(0,0,0,0.05)}
.title a:hover{box-shadow:0 0 10px 0 rgba(0,0,0,0.15);background:#252525;color:#fff}
.white-background .title h2 , .white-background .title p{background:#fff}
.grey-background .title h2 , .grey-background .title p{background:#F5F5F5}
.offer-product-flex{display:flex;align-items:center;justify-content:space-between;}
.offer-product-flex:nth-of-type(2n){margin-top:50px}
.offer-product-info{width:50%}
.offer-product-info h3{font:normal 30px/2 vazirbold;margin-bottom:25px}
.offer-product-price{margin-right:20px}
.offer-product-price del{display:block;font:normal 18px/36px vazir;color:#898989}
.offer-product-price ins{display:inline-block;font:normal 24px/36px vazirbold;color:#7B1FA2;text-decoration:none}
.offer-product-price span{display:inline-block;background:#7B1FA2;color:#fff;font:normal 16px/34px vazirbold;padding:0 15px;border-radius:100px;margin-right:5px;}
.offer-product-info ul{margin:30px 0}
.offer-product-info li{font:normal 16px/2 vazir;color:#757575}
.offer-product-info li:before{content:"";width:8px;height:8px;display:inline-block;background:#757575;border-radius:100%;vertical-align:middle;margin-left:5px}
.offer-product-info a{font:normal 18px/50px vazirbold;background:#43A047;color:#fff;display:inline-block;padding:0 30px;border-radius:100px;float:left;}
.offer-product-info a:before{content:"";display:inline-block;width:30px;height:20px;vertical-align:middle;background-image:url(img/cart.svg);background-repeat:no-repeat;background-position:right;margin-left:5px;background-size:contain}
.offer-product-info a:hover{background:#212121}
.offer-countdown{border-top:1px solid #e0e0e0;margin-top:30px;padding-top:30px}
#offer-countdown{display:flex;align-items:center;justify-content:center;font:normal 36px/36px persiannum}
#offer-countdown span{display:inline-block;margin:0 5px;font:normal 36px/36px persiannum;text-align:center}
#offer-countdown p{font:normal 18px/2 vazir;margin:0 10px}
.offer-product-img{max-width:50%;background-image:url(img/box.png);width:520px;height:520px;background-repeat:no-repeat;background-size:contain;background-position:center;position:relative}
.offer-product-img img{max-width:490px;position:absolute;display:block;bottom:0;top:0;margin:auto;right:0;left:0}
.all-products{background-image:url(img/banners-bg.png);background-position:center;background-repeat:no-repeat;background-size:auto;}
.product-box{width:calc(25% - 30px);float:right;padding:15px;position:relative;background:#fff;border-radius:25px;margin:0 15px 30px;text-align:center;box-shadow:0px 0px 15px 0px rgba(0, 0, 0, 0.05);}
.product-title{padding-top:15px;margin-top:15px;font:normal 18px/2 vazirbold;border-top:1px solid #EEEEEE}
.product-title h3{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.product-price del{display:block;margin-top:15px;font:normal 14px/36px vazir;color:#898989}
.product-price ins{display:block;font:normal 18px/2 vazirbold;color:#43A047;text-decoration:none}
.product-box:hover{box-shadow:0 0 25px 0 rgba(0,0,0,0.1);color:#7B1FA2;}
.product-img img{border-radius:25px}
.go-shop{display:inline-block;float:left;margin:20px 0 0 15px;color:#fff;background:#f15252;font:normal 18px/50px vazirbold;padding:0 30px;border-radius:100px;}
.go-shop:after{content:"";display:inline-block;width:30px;height:20px;vertical-align:middle;background-image:url(img/arrow.svg);background-repeat:no-repeat;background-position:left;margin-right:5px;background-size:contain}
.go-shop:hover{background:#212121}
.social-network{width:calc(100% - 600px);text-align:center;margin:0 auto}
.social-network h2{font:normal 24px/2 vazirbold;color:#7B1FA2;}
.social-network p{font:normal 16px/1.8 vazir;color:#333;margin-top:15px}
.coupon .container{display:flex;justify-content:space-between}
.coupon-box{background:#fff;width:270px;text-align:center;border-radius:15px;box-shadow:0 5px 25px 0 rgba(0,0,0,0.05);padding:20px;position:relative;overflow:hidden;margin:0 10px}
.coupon-box i{width:110px;height:110px;display:block;margin:0 auto;background-size:contain;background-repeat:no-repeat;background-position:center;margin-bottom:20px}
.apple{background-image:url(img/gift.svg)}
.gress{background-image:url(img/mosque.svg)}
.coupon-box h4{font:normal 24px/2 vazirbold}
.green h4{color:#FFA000;}
.pink h4{color:#7B1FA2}
.coupon-box p{font:normal 16px/2 vazir;margin:10px 0 20px;color:#252525}
.coupon-box span{border-radius:25px;border:2px solid #666;padding:4px 30px 0;font:normal 24px/2 vazir;color:#666}
.application{padding:15px 0 180px 0!important;}
.mobile{width:357px;height:650px;background-image:url(img/mobile.png);position:absolute;top:-130px}
.app-dec{width:calc(100% - 387px);float:left;text-align:center;}
.screen{width:242px;height:501px;background-image:url(../content/screenshot.jpg);background-size:cover;background-repeat:no-repeat;margin:43px 16px 0 0;border-radius:18px}
.app-dec h2{font:normal 24px/2 vazirbold;color:#7B1FA2;margin-top:50px}
.app-dec p{font:normal 16px/1.8 vazir;color:#666;max-width:600px;margin:0 auto;margin:20px auto}
.app-dec a{width:220px;max-width:90%;height:80px;display:inline-block;background-repeat:no-repeat;background-position:center;}
.google-play{background-image:url(img/google-play.png)}
.cafe-bazaar{background-image:url(img/bazaar.png)}
.sibapp{background-image:url(img/sibapp.png)}
.advantages{padding-top:35px}
.advantages .container{display:flex;justify-content:space-between;align-items:center;}
.advantage-box{display:flex;align-items:center;}
.free-delivery{background-image:url(img/delivery.svg)}
.quality-guarantee{background-image:url(img/guarantee.svg)}
.support{background-image:url(img/support.svg)}
.download{background-image:url(img/download.svg)}
.advantage-icon{height:100px;width:120px;background-size:contain;;background-repeat:no-repeat;}
.advantage-text{border-right:1px solid #7B1FA2;margin-right:10px;padding-right:10px}
.advantage-text h4{font:normal 28px/2 vazirbold;color:#7B1FA2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.advantage-text span{font:normal 16px/2 vazir;color:#212121;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pig{float:right;width:400px;height:300px;position:relative}
.pig-image{width:350px;height:570px;background-image:url(img/pig.svg);background-position:center;background-repeat:no-repeat;background-size:contain;position:absolute;top:-120px;z-index:2}
.footer{padding-bottom:0}
.footer .container{display:flex;}
.about h2{font:normal 24px/2 vazirbold;color:#212121}
.about{width:calc(100% - 300px);}
.about p{font:normal 16px/1.8 vazir;text-align:justify;color:#424242;margin-top:15px}
.namad{width:300px;text-align:center;padding:15px;}
.namad img{margin:0 10px}
.social-network-btn{margin-top:20px;text-align:center;}
.social-network-btn a{width:40px;height:40px;background:#212121;display:inline-block;border-radius:50%;margin:0 2.5px;font:normal 18px/36px vazir;color:#fff}
.social-network-btn a:hover{background:#FFA000}
.social-network-btn a i{width:40px;height:40px;display:block;background-position:center;background-size:20px 20px;background-repeat:no-repeat}
.telegram{background-image:url(img/telegram.svg);margin-right:1px}
.instagram{background-image:url(img/instagram.svg)}
.twitter{background-image:url(img/twitter.svg)}
.call{background-image:url(img/call.svg)}
.mail{background-image:url(img/mail.svg)}
.facebook{background-image:url(img/facebook.svg)}
.whatsapp{background-image:url(img/whatsapp.svg)}
.footer .container:last-child{border-top:2px solid #e1e1e1;padding:20px;margin-top:40px;text-align:center;}
p.copyright{font:normal 16px/2 vazirbold;color:#424242;display:block;margin:0 auto}
@media only screen and (max-width:1170px){.container{width:90%}
.header-title h1{font-size:36px}
.header-title p , #countdown p{font-size:20px}
.offer-product-img img{max-width:90%}
.social-network{width:calc(50% - 20px)}
.coupon-box{width:calc(25% - 20px)}
.coupon-box p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
}
@media only screen and (max-width:980px){.product-box{width:calc(33.33333% - 30px)}
.advantage-box{text-align:center;width:calc(33.3333% - 30px);margin:0 15px;display:block}
.advantage-icon{width:100%;background-position:center center}
.advantage-text{margin:0;padding:0;border:unset}
.coupon .container{display:block}
.social-network{width:100%}
.coupon-box{width:calc(50% - 20px);margin:20px 10px;float:right}
.app-dec h2{font:normal 32px/2 vazirbold}
}
@media only screen and (min-width:842px){.navigation ul{width:100%!important;}
}
@media only screen and (max-width:840px){.navigation ul{height:100%;width:0;position:fixed;z-index:100002;top:0;right:0;background-color:#fff;overflow-x:hidden;transition:.3s;display:block;box-shadow:0 0 100px rgba(0,0,0,.5);color:#212121;margin-top:0;font-size:14px}
.navigation ul li{float:none;margin:0 15px}
.navigation ul li:first-child{margin:30px 15px 0 0}
.navigation ul li a:hover{border-color:#000}
.logo{margin-top:10px}
.open-btn{display:block;background:#F9A825}
#countdown span{margin:0 10px;font:normal 36px/36px persiannum;width:45px;}
#countdown ul li{margin:0 10px;font:normal 16px/2 vazir;width:45px;}
.offer-product-flex{display:block}
.offer-product-info{width:100%}
.offer-product-img{background:none;width:100%;max-width:100%;height:auto;text-align:center}
.offer-product-img img{position:static;max-width:100%;display:inline-block;margin-top:30px}
.app-dec h2{font:normal 28px/2 vazirbold}
.app-dec p{font:normal 16px/2 vazir}
.mobile{display:none}
.app-dec{width:100%}
.application{padding-bottom:75px!important;}
}
@media only screen and (max-width:680px){.product-box{width:calc(50% - 30px)}
.footer .container{display:block}
.footer .container aside{width:100%}
.namad{margin-top:20px}
.flexbox{display:block}
.header-image{max-width:100%;;margin:0 auto;background-position:center;max-height:300px}
.header-title{width:100%;margin-top:30px}
#countdown span{margin:0 10px;font:normal 30px/30px persiannum;width:35px;}
#countdown ul li{margin:0 10px;font:normal 14px/1.5 vazir;width:35px;}
#countdown p{font-size:18px}
#offer-countdown,#offer-countdown span{font-size:28px}
}
@media only screen and (max-width:550px){#countdown , #offer-countdown{display:block;text-align:center}
#countdown p{margin-top:20px}
.advantage-box{width:100%;margin:15px 0;display:flex;justify-content:center}
.advantages .container{display:block;}
.advantage-icon{height:100px;width:120px;background-size:contain;;background-repeat:no-repeat;}
.advantage-text{border-right:1px solid #7B1FA2;margin-right:10px;padding-right:10px}
.advantage-text h4{font:normal 28px/2 vazirbold;color:#7B1FA2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.advantage-text span{font:normal 16px/2 vazir;color:#212121;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.new-year-calligraphy{width:100%;margin:0}
.title h2{font-size:18px;line-height:48px}
.title p{margin:0 10px;padding:0 10px;font:normal 16px/48px vazirbold;}
.title a{padding:10px 15px;}
.coupon-box{width:calc(100% - 20px)}
.title h2{margin:0 10px}
}
@media only screen and (max-width:480px){.main-header{border-radius:0 0 0 100px}
*{max-width:100%}
.scroll-bottom{display:none!important;}
.product-box{width:calc(100% - 40px);margin:15px 20px}
.title{margin-bottom:15px}
.title p{position:static;text-align:center;margin-top:35px}
}
@media only screen and (max-width:360px){.offer-product-info h3{font-size:22px}
.header-image{height:200px}
.app-dec a{background-size:contain}
}