@charset "UTF-8";
/*
Theme Name: Father's Day Html Landing Page
Description:  قالب لندینگ روز پدر
Version: 1.0.0
Author: Amir_KHP
Author URI: https://umx.ir
*/
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:shabnam,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:'shabnam';src:url(fonts/Shabnam.eot);src:url(fonts/Shabnam.eot?#iefix) format("embedded-opentype"),url(fonts/Shabnam.woff2) format("woff2"),url(fonts/Shabnam.woff) format("woff"),url(fonts/Shabnam.ttf) format("truetype");font-weight:normal;font-style:normal}
@font-face{font-family:'shabnam';src:url(fonts/Shabnam-Bold.eot);src:url(fonts/Shabnam-Bold.eot?#iefix) format("embedded-opentype"),url(fonts/Shabnam-Bold.woff2) format("woff2"),url(fonts/Shabnam-Bold.woff) format("woff"),url(fonts/Shabnam-Bold.ttf) format("truetype");font-weight:bold;font-style:normal}
@font-face{font-family:'shabnamfa';src:url(fonts/Shabnam-FD.eot);src:url(fonts/Shabnam-FD.eot?#iefix) format("embedded-opentype"),url(fonts/Shabnam-FD.woff2) format("woff2"),url(fonts/Shabnam-FD.woff) format("woff"),url(fonts/Shabnam-FD.ttf) format("truetype");font-weight:normal;font-style:normal}
html{scroll-behavior:smooth;}
body{margin:0;padding:0;box-sizing:border-box;direction:rtl;font:normal 14px/24px shabnam;text-align:right;margin:0;padding:0;box-sizing:border-box;color:#252525;background:#fff}
#scroll{position:fixed;background:transparent;border:2px solid #00306b;right:10px;bottom:10px;cursor:pointer;width:50px;height:50px;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:#00306b;opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100)}
#scroll path{fill:#00306b}
#scroll:hover path{fill:#fff}
.container{width:1280px;margin:0 auto;position:relative}
.header{min-height:676px;background-image:url(img/header.svg);background-repeat:no-repeat;background-size:auto 600px;background-position:-4px -4px;overflow:hidden;position:relative}
.element-1,.element-2,.element-3{background-repeat:no-repeat;height:676px;position:absolute;top:-15px;background-size:contain;}
.element-1{background-image:url(img/1.png);width:129px;left:170px;z-index:3}
.element-2{background-image:url(img/2.png);width:322px;left:230px;z-index:2}
.element-3{background-image:url(img/3.png);width:233px;left:347px;z-index:1}
.topbar{padding:20px 0;display:flex;align-items:center;justify-content:space-between}
.navigation{color:#757575;font:normal 14px/1 shabnam;}
.navigation ul{display:flex}
.navigation li{margin:0 15px}
.navigation li:first-of-type{margin-right:0}
.navigation li a:hover{border-bottom:1px solid #212121}
.logo{z-index:4}
.open-btn{cursor:pointer;display:none}
.open-btn svg{width:30px;height:30px;vertical-align:middle}
.open-btn path{fill:#fff}
.closebtn{width:0;position:fixed;top:0;right:0;background:rgba(0,0,0,.5);height:100vh;display:block;transition:none;z-index:100000}
.flex-header{display:flex;flex-direction:column;justify-content:flex-end;height:506px;}
.header-title{width:50%;max-width:570px;margin-bottom:80px;}
.header-title h1{font:bold 50px/1 shabnam;color:#00306b;}
.header-title p{font:normal 18px/32px shabnam;margin-top:40px}
.header-title a{font:bold 20px/1 shabnam;background:#a15c01;padding:16px 26px;display:inline-block;margin-top:60px;color:#fff;border-radius:50px;border:2px solid #a15c01;}
.header-title a:hover{color:#a15c01;background:transparent}
.white-background{padding:120px 0 150px 0;background-color:#fff}
.white-background:first-of-type{padding-top:50px}
.gray-background{padding:100px 0 150px 0;background-color:#fafafa}
.title{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}
.title h2{font:bold 24px/1 shabnam;color:#001026;position:relative}
.title h2 svg{fill:rgba(1,127,186,.2);width:60px;height:60px;margin-left:15px;vertical-align:middle;margin-top:-10px}
.title h2 svg path{fill:rgba(1,127,186,.2)}
.title h2::after{content:"";display:inline-block;width:40px;height:4px;background:#00306b;vertical-align:middle;margin-right:15px;border-radius:4px}
.offer-countdown{display:flex;justify-content:center}
.offer-countdown div{background:rgba(1,127,186,.5);color:#fff;margin:0 5px;padding:8px;min-width:70px;text-align:center;border-radius:15px}
.offer-countdown span{display:block}
.offer-countdown .digits{font:normal 38px/1 shabnamfa}
.offer-countdown .label{font:normal 12px/1 shabnam}
.offer-countdown p{color:#a15c01;font-size:18px}
.offer-product-flex{display:flex;align-items:center;justify-content:space-between;}
.offer-product-flex:nth-of-type(2n){margin-top:40px}
.offer-product-info{width:50%}
.offer-product-info h3{font:bold 28px/1.8 shabnam;margin-bottom:20px}
.offer-product-price{margin-right:20px}
.offer-product-price del{display:block;font:normal 16px/36px shabnam;color:#898989;}
.offer-product-price ins{display:inline-block;font:bold 24px/36px shabnam;text-decoration:none;color:#ed3340}
.offer-product-price span{display:inline-block;color:#fff;font:bold 16px/34px shabnam;padding:0 15px;border-radius:100px;margin-right:5px;background:#ed3340}
.offer-product-info ul{margin:30px 0}
.offer-product-info li{font:normal 16px/2 shabnam;color:#757575}
.offer-product-info li:before{content:"";width:8px;height:8px;display:inline-block;border:1px solid #757575;border-radius:100%;vertical-align:middle;margin-left:5px}
.offer-product-info a , .product-btn{font:normal 18px/1 shabnam;color:#a15c01;display:inline-block;padding:15px;border-radius:15px;float:left;border:2px solid #a15c01}
.offer-product-info a svg,.product-btn svg{fill:#a15c01;vertical-align:middle;width:13px;transition:ease-in-out .15s;}
.offer-product-info a:hover svg,.product-btn:hover svg{fill:#fff}
.offer-product-info a:hover,.product-btn:hover{background:#a15c01;color:#fff}
.product-offer-countdown{border-top:1px solid #e0e0e0;margin-top:30px;padding-top:30px}
#product-offer-countdown{display:flex;align-items:center;justify-content:center;font:normal 36px/36px shabnamfa}
#product-offer-countdown span{display:inline-block;margin:0 5px;font:normal 36px/36px shabnamfa;text-align:center}
#product-offer-countdown p{font:normal 18px/2 shabnam;margin:0 10px}
.offer-product-img{width:50%;background-image:url(img/blob-shape.svg);height:520px;background-repeat:no-repeat;background-size:650px;background-position:center;position:relative}
.offer-product-img img{max-width:100%;position:absolute;display:block;bottom:0;top:0;margin:auto;right:0;left:0}
.gray-background svg.wave,.white-background svg.wave{margin-bottom:-162px;}
.gray-background .wave path{fill:#fff;stroke:#fff;}
.white-background .wave path{fill:#fafafa;stroke:#fafafa;}
.product-list{display:flex;align-items:center;flex-flow:wrap;}
.product-box{width:calc(25% - 30px);margin:0 15px 40px 15px;text-align:center}
.product-img{width:100%;padding:20px;background:#fff;overflow:hidden;display:block;text-align:center;border-radius:15px;position:relative;box-shadow:0px 0px 15px 0px #eee;}
.sale-flash{position:absolute;top:18px;left:18px;background:#ed3340;color:#fff;border-radius:15px;font:bold 18px/.8 shabnam;padding:6px}
.product-title{margin:20px 0;display:block;font:normal 16px/1.8 shabnam;padding:0 15px}
.product-title h3{height:64px;overflow:hidden}
.product-title:hover{color:#00306b}
.product-price del{font:normal 16px shabnam;margin:0 2px;vertical-align:middle;color:#898989}
.product-price ins{font:bold 24px shabnam;text-decoration:none;margin:0 2px;vertical-align:middle}
.product-price span{font:normal 16px shabnam;margin:0 2px;vertical-align:middle}
.product-btn{float:none;padding:10px 15px;margin-top:20px}
.couponbox{padding:30px;background:#f5f5f5;border-radius:15px;display:flex;align-items:center;margin-bottom:80px}
.couponbox .bowtie{width:360px;height:196px;margin:-90px 0 -90px 0;background-image:url(img/4.png);background-repeat:no-repeat;background-size:80%;background-position:center}
.coupon{display:flex;align-items:center;justify-content:space-between;width:calc(100% - 360px)}
.coupon strong{font:bold 24px/1.8 shabnam;margin-right:15px}
.coupon span{font:normal 16px/1.8 shabnam;margin-right:5px}
.coupon div{border:2px solid #252525;padding:12px 10px 5px 10px;font:normal 24px/1 shabnam;border-radius:15px;text-transform:uppercase}
.footer-flex{display:flex;}
.about h2{font:bold 28px/2 shabnam;}
.about{width:calc(100% - 300px);}
.about p{font:normal 16px/1.8 shabnam;text-align:justify;color:#424242;margin-top:15px}
.namad{width:300px;text-align:center;padding:15px;}
.namad img{margin:0 10px}
p.copyright{font:normal 16px/2 shabnam;color:#424242;display:block;margin:0 auto}
.advantages{margin:0 0 40px 0;padding:0;list-style:none;display:flex;align-items:center;flex-wrap:wrap;justify-content:space-between;}
.icon-box.icon_position-left{font-size:14px;display:flex;align-items:center;}
.advantages li{padding:10px;justify-content:center;position:relative;margin-bottom:0;}
.icon-box{position:relative;}
.advantages .icon-box-step{width:1px;position:relative;min-width:1px;}
.advantages .icon-box-step::after{position:absolute;top:-20px;right:0;width:1px;height:60px;background-color:#dadada;content:"";}
.advantages li::after{left:0;right:auto;}
.icon-box.icon_position-left .box-wrapper{padding-left:0;padding-right:25px;}
.icon-box.icon_position-left .box-title{font-size:18px;font-weight:500;margin-bottom:0;margin-top:0;color:#000;}
.advantages .icon-box-step:last-child{display:none;}
.box-icon svg{display:inline-block;height:55px;width:55px;vertical-align:-0.05em;fill:#00306b}
.box-icon svg path{fill:#00306b}
.last-section{padding-bottom:30px}
.copyright{text-align:center;padding-top:60px;position:relative}
.copyright::after{content:"";width:40px;height:4px;background:#00306b;display:block;position:absolute;top:40px;left:0;right:0;margin:0 auto;border-radius:4px}
@media only screen and (max-width:1320px){.container{width:calc(100% - 100px)}
.offer-product-img img{max-width:90%}
}
@media only screen and (max-width:1200px){.header{background-size:650px;min-height:550px}
.element-1,.element-2,.element-3{height:600px}
.element-1{left:100px;}
.element-2{left:140px}
.element-3{left:270px}
.header-title{max-width:460px}
.advantages li{justify-content:right !important;}
.advantages li{width:49%;margin:10px 0;justify-content:left;padding:0;}
li.icon-box-step{display:none}
.coupon span{display:block;margin-right:15px;}
}
@media only screen and (max-width:1120px){.header{background-size:600px;min-height:550px}
.element-1,.element-2,.element-3{height:500px}
.element-1{left:40px;}
.element-2{width:280px;left:80px}
.element-3{width:180px;left:200px}
.header-title{max-width:40%}
.header-title h1{font-size:38px}
.header-title p{font-size:16px}
.header-title a{font-size:18px}
.flex-header{height:auto;margin-top:40px}
}
@media only screen and (max-width:900px){.header{background-size:450px!important;}
.parallax-layer{display:none}
.all-element{width:300px;height:400px;background:url(img/elements.png);background-repeat:no-repeat;background-size:contain;background-position:center;position:absolute;left:0;top:-20px}
}
@media only screen and (max-width:840px){.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}
}
@media only screen and (min-width:961px){.navigation ul{width:100%!important;}
}
@media only screen and (max-width:960px){.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{margin:25px 30px;}
.navigation ul li:first-child{margin:40px 30px 0 0;}
.navigation ul li a:hover{border-color:#000}
.open-btn{display:block}
.open-btn svg,.open-btn path{fill:#00306b}
.header{background-size:500px;min-height:auto}
.header-title{max-width:calc(60% - 20px)}
.product-box{width:calc(33.3333333% - 30px)}
.couponbox .bowtie{width:200px;height:100px;margin:0}
.coupon{width:calc(100% - 200px)}
.logo{width:60px}
}
@media only screen and (max-width:790px){.header{background-size:900px!important;}
.elements{margin-bottom:300px}
.all-element{width:50%;height:400px;background:url(img/elements.png);background-repeat:no-repeat;background-size:contain;background-position:center top;position:absolute;right:0;left:0;margin:0 auto;top:-20px}
.header-title{min-width:100%}
.product-box{width:calc(50% - 30px)}
.bowtie{display:none}
.coupon{width:100%}
.title{flex-direction:column}
.offer-countdown{margin-top:30px}
.title h2 svg{width:40px;height:40px;margin-top:0}
.white-background , .gray-background{padding:50px 0}
.gray-background svg.wave, .white-background svg.wave{margin-bottom:-65px}
}
@media only screen and (max-width:680px){.container{width:90%}
.footer-flex{display:block;}
.footer-flex aside{width:100%}
.namad{margin-top:20px}
#product-offer-countdown,#product-offer-countdown span{font-size:28px}
.header{background-size:850px!important;}
}
@media only screen and (max-width:550px){#product-offer-countdown{display:block;text-align:center}
#countdown p{margin-top:20px}
.title h2{font-size:18px;}
.advantages li{width:99%;margin:10px 0;padding:0;}
}
@media only screen and (max-width:500px){.product-box{width:calc(100% - 30px)}
.product-title h3{height:auto}
.coupon{display:block;text-align:center}
.coupon strong{display:block}
.elements{margin-bottom:60%}
.coupon span{margin-bottom:15px;}
}
@media only screen and (max-width:360px){.offer-product-info h3{font-size:22px}
.title h2::after{display:none}
html{overflow-x:hidden}
}
@media only screen and (max-width:270px){.title h2 svg{display:none}
.elements{display:none}
}