@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;
}

@font-face {
    font-family: 'fontawesome-free-5.15.2-web';
    src: url(fonts/fontawesome-free-5.15.2-web);
    src: url(fonts/fontawesome-free-5.15.2-web?#iefix) format("embedded-opentype"), url(fonts/fontawesome-free-5.15.2-web) format("woff2"), url(fonts/fontawesome-free-5.15.2-web) format("woff"), url(fonts/fontawesome-free-5.15.2-web) 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 #d60644;
    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: #ed3340;
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: alpha(opacity=100);
}
#scroll path {
    fill: #ed3340;
}
#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;
        margin-top: -9px;
}
.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: 65%;
    max-width: 570px;
    margin-bottom: 80px;
}

.header-title h1 {
    font: bold 50px/1 B Esfehan;
    color: #d60644;
}

.header-title p {
    font: normal 18px/32px shabnam;
    margin-top: 40px;
}
.header-title a {
    font: bold 20px/1 shabnam;
    background: #c58b42;
    padding: 16px 26px;
    display: inline-block;
    margin-top: 60px;
    color: #fff;
    border-radius: 50px;
    border: 2px solid #fafafa;
}

.header-title a:hover {
    color: #fafafa;
    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 {
    margin-bottom: 13px;
    margin-top: 13px;
}
.title h2 {
    font: bold 24px/1 shabnam;
    color: #d60644;
    position: relative;
}
.title h2 svg {
    fill: rgb(214 6 68);
    width: 60px;
    height: 60px;
    margin-left: 15px;
    vertical-align: middle;
    margin-top: -10px;
}
.title h2 svg path {
    fill: rgb(214 6 68);
}

.offer-countdown {
    display: flex;
    justify-content: center;
}
.offer-countdown div {
    background: #c6834f;
    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 66px 40px 66px;
    
  text-align:  center;
    
}
.product-img {
    
  width:  100%;
    
  padding:  0px;
    
  background:  #fff;
    
  padding-bottom:  0px !important;
    
  overflow:  hidden;
    
  display:  inline-flex;
    
  text-align:  center;
    
  border-top-left-radius:  50px;
    
  border-bottom-right-radius:  50px;
    
  position:  relative;
    
  box-shadow:  0px 0px 15px 0px #eee;
    
}
.sale-flash {
    position: absolute;
    top: 11px;
    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: 23px;
    overflow: hidden;
}
.product-title:hover {
    color: #ed3340;
}
.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 5px;
    margin-top: 20px;
}
.couponbox {
    padding: 30px;
    background: #d6ac78;
    border-radius: 15px;
    display: flex;
    align-items: center;
    margin-bottom: 80px;
}
.couponbox .bowtie {
    width: 360px;
    height: 196px;
    margin: -90px 0 -90px 0;
    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: #000000;
    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: #ed3340;
}
.box-icon svg path {
    fill: #ed3340;
}
.last-section {
    padding-bottom: 30px;
}
.copyright {
    text-align: center;
    padding-top: 60px;
    position: relative;
}
.copyright::after {
    content: "";
    width: 40px;
    height: 4px;
    background: #ed3340;
    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: 34px;
}
.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: #ed3340;
}
.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;
}
}




/*شریف */

.bdy  {
    
    margin:  0;
    
    overflow:  hidden;
    
}

/* blue bar */
.btn  {
    
    height:  9%;
    
    width:  11%;
    
    background:  #59cce0;
    
    /* z-index:  0;
     */
    position:  relative;
    
}
  
  /* text */
  .spn,  .a1  {
    
    color:  #fff;
    
    left:  95%;
    
    transform:  translate(-50%, -50%);
    
    position:  absolute;
    
    display:  inline-block;
    
    font-size:  30px;
    
    font-family:  'open sans', sans-serif;
    
    letter-spacing:  -1px;
    
    font-weight:  bold;
    
}
  .spn  {
    
    top:  88%;
    
}
  .a1  {
    
    color:  #bbb;
    
    font-size:  11px;
    
    bottom:  10px;
    
    font-weight:  400;
    
    text-transform:  uppercase;
    
    text-decoration:  none;
    
    letter-spacing:  1px;
    
}
  /* Shine */
  .btn: after  {
    
      content: '';
    
    top: 0;
    
      transform: translateX(100%);
    
      width: 100%;
    
      height: 220px;
    
      position:  absolute;
    
      z-index: 1;
    
      animation:  slide 1s infinite;
    
       
    /* 
    CSS Gradient - complete browser support from http: //www.colorzilla.com/gradient-editor/ 
    */
    background:  -moz-linear-gradient(left,  rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 0.8) 50%,  rgba(128, 186, 232, 0) 99%,  rgba(125, 185, 232, 0) 100%);
     /* FF3.6+ */
      background:  -webkit-gradient(linear,  left top,  right top,  color-stop(0%, rgba(255, 255, 255, 0)),  color-stop(50%, rgba(255, 255, 255, 0.8)),  color-stop(99%, rgba(128, 186, 232, 0)),  color-stop(100%, rgba(125, 185, 232, 0)));
     /* Chrome, Safari4+ */
      background:  -webkit-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* Chrome10+, Safari5.1+ */
      background:  -o-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* Opera 11.10+ */
      background:  -ms-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* IE10+ */
      background:  linear-gradient(to right,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* W3C */
      filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',  endColorstr='#007db9e8', GradientType=1 );
     /* IE6-9 */
  }
  
  /* animation */
  
  @keyframes slide  {
    
      0%  {
    transform: translateX(-150%);
}

      100%  {
    transform: translateX(100%);
}

  }

  .discounted  {
    
    display:  block !important;
    
}


  .right-side  {
    
  position:  absolute;
    
  top:  3px;
    
  left:  142px;
    
  background:  #ed334000;
    
  color:  #fff;
    
  border-radius:  15px;
    
  padding-left:  32px;
    
  font:  bold 18px/.8 shabnam;
    
  padding-top:  7px;
    
}

@media only screen and (max-width:  768px) {
    
  .right-side  {
    
    position:  absolute;
    
    top: 0px;
    
    left:  auto;
    
    background:  #ed334000;
    
    color:  #fff;
    
    border-radius:  15px;
    
    padding-left:  32px;
    
    font:  bold 18px/.8 shabnam;
    
    padding-top:  3px;
    
    width:  64%;
    
    right:  0;
    
}
}
.pic {
    
    float:  left;
    
    margin-left:  -60px;
    
    margin-top:  -95px;
    
}

.nmd {
    
    display:  flex;
    
    justify-content:  center;
    
    flex-wrap:  wrap;
    
    align-items:  center;
    
    align-items:  center;
    
    max-width:  100%;
    

}

.pdng {
    
    padding:  1%;
    
}
.fontclr {
    
    color:  #bd053c;
    
}
.gol  {
    
  margin-top:  45px;
    
  margin-right:  -30px;
    
  max-width:  131%;
    
}
.mah {
    

    
}
.nave  {
    
  position: relative;
    
  width: 620px;
    
  margin: 0 auto;
    
  margin-top: 50px;
    
  padding: 10px;
    
}

ul#navigation  {
    
  margin: 0px auto;
    
  position: relative;
    

}

ul#navigation li  {
    
  display: inline;
    
  font-size: 12px;
    
  font-weight: bold;
    
  margin: 0;
    
  padding: 0;
    
  float: left;
    
  position: relative;
    

}

ul#navigation li a  {
    
  padding: 10px 25px;
    
  color: #616161;
    
  text-shadow: 1px 1px 0px #fff;
    
  text-decoration: none;
    
  display: inline-block;
    


  -webkit-transition: color 0.2s linear,  background 0.2s linear;
    
  -moz-transition: color 0.2s linear,  background 0.2s linear;
    
  -o-transition: color 0.2s linear,  background 0.2s linear;
    
  transition: color 0.2s linear,  background 0.2s linear;
    
}

ul#navigation li a: hover  {
    
  background: #f8f8f8;
    
  color: #282828;
    
}

ul#navigation li a.first  {
    
  border-left:  0 none;
    
}

ul#navigation li a.last  {
    
  border-right:  0 none;
    
}

ul#navigation li: hover > a  {
    
  background: #fff;
    
}
ul#navigation li: hover > ul
 {
    
/*these 2 styles are very important, 
being the ones which make the drop-down to appear on hover */
    visibility: visible;
    
    opacity: 1;
    
}
 
ul#navigation ul,  ul#navigation ul li ul  {
    
    list-style:  none;
    
    margin:  0;
    
    padding:  0;
    
/*the next 2 styles are very important, 
being the ones which make the drop-down to stay hidden */
    visibility: hidden;
    
    opacity: 0;
    
    position:  absolute;
    
    z-index:  99999;
    
    width: 180px;
    
    background: #f8f8f8;
    
    box-shadow: 1px 1px 3px #ccc;
    
/* css3 transitions for smooth hover effect */
    -webkit-transition: opacity 0.2s linear,  visibility 0.2s linear;
    
    -moz-transition: opacity 0.2s linear,  visibility 0.2s linear;
    
    -o-transition: opacity 0.2s linear,  visibility 0.2s linear;
    
    transition: opacity 0.2s linear,  visibility 0.2s linear;
    
}
 
ul#navigation ul  {
    
    top:  43px;
    
    left:  1px;
    
}
 
ul#navigation ul li ul  {
    
    top:  0;
    
    left:  181px;
     /* strong related to width: 180px;
     from above */
}
 
ul#navigation ul li  {
    
    clear: both;
    
    width: 100%;
    
    border: 0 none;
    
    border-bottom: 1px solid #c9c9c9;
    
}
 
ul#navigation ul li a  {
    
    background: none;
    
    padding: 7px 15px;
    
    color: #616161;
    
    text-shadow: 1px 1px 0px #fff;
    
    text-decoration: none;
    
    display: inline-block;
    
    border: 0 none;
    
    float: left;
    
    clear: both;
    
    width: 150px;
    
}




.nav1 {
    
  width:  50%;
    
}
.ul1 {
    
  margin:  auto;
    
  display:  flex;
    
}
.l2 {
    
  margin:  auto;
    
}
.fadeInUp {
    
 
    
  width:  550px;
    
}


.fadeInDown {
    
  width:  335px !important;
    
}

.limenu {
    
  width:  100%;
    
  display:  flex;
    
}
.ulmenu {
    
  width:  100%;
    
}
.product-title2 {
    

    margin:  20px 0;
    
    display:  block;
    
    font:  normal 16px/1.8 shabnam;
    
    padding:  0 0;
    

}
.product-list2 {
    
  display:  flex;
    
  align-items:  center;
    
  flex-flow:  wrap;
    
}
.product-box2 {
    
  width:  calc(25% - 39px);
    
  margin:  22px 15px 40px 15px;
    
  text-align:  center;
    
  
}
.product-img2  {
    
  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;
    
}
@media only screen and (max-width: 768px) {
    .product-box2 {
    width: calc(100% - 30px);
    
  width:  48%;
    
  float:  right;
    
  margin:  0px !important;
    
  margin-left:  2% !important;
    
  padding-bottom:  26px;
    

}
.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: 1120px) {
    
    .bdy  {
    
    margin:  0;
    
    overflow:  hidden;
    
}
.btn  {
    
  height:  9%;
    
  width:  48%;
    
  background:  #59cce0;
    
  /* z-index:  0;
     */
  position:  relative;
    
}

/* text */
.spn,  .a1  {
    
  color:  #fff;
    
  left:  50%;
    
  transform:  translate(-50%, -50%);
    
  position:  absolute;
    
  display:  inline-block;
    
  font-size:  40px;
    
  font-family:  'open sans', sans-serif;
    
  letter-spacing:  -1px;
    
  font-weight:  bold;
    
}
.spn  {
    
  top:  88%;
    
}
.a1  {
    
  color:  #bbb;
    
  font-size:  11px;
    
  bottom:  10px;
    
  font-weight:  400;
    
  text-transform:  uppercase;
    
  text-decoration:  none;
    
  letter-spacing:  4px;
    
}
/* Shine */
.btn: after  {
    
    content: '';
    
  top: 0;
    
    transform: translateX(100%);
    
    width: 100%;
    
    height: 220px;
    
    position:  absolute;
    
    z-index: 1;
    
    animation:  slide 1s infinite;
    
     
  /* 
  CSS Gradient - complete browser support from http: //www.colorzilla.com/gradient-editor/ 
  */
  background: -moz-linear-gradient(left,  rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 0.8) 50%,  rgba(128, 186, 232, 0) 99%,  rgba(125, 185, 232, 0) 100%);
     /* FF3.6+ */
    background:  -webkit-gradient(linear,  left top,  right top,  color-stop(0%, rgba(255, 255, 255, 0)),  color-stop(50%, rgba(255, 255, 255, 0.8)),  color-stop(99%, rgba(128, 186, 232, 0)),  color-stop(100%, rgba(125, 185, 232, 0)));
     /* Chrome, Safari4+ */
    background:  -webkit-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* Chrome10+, Safari5.1+ */
    background:  -o-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* Opera 11.10+ */
    background:  -ms-linear-gradient(left,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* IE10+ */
    background:  linear-gradient(to right,  rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(128, 186, 232, 0) 99%, rgba(125, 185, 232, 0) 100%);
     /* W3C */
    filter:  progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',  endColorstr='#007db9e8', GradientType=1 );
     /* IE6-9 */
}

/* animation */
}


    @media only screen and (max-width:  500px) {
    
    .coupon strong  {
    
        display:  block;
    
}

    .coupon  {
    
      display:  block;
    
      text-align:  center;
    
  }
  .line {
    
    visibility:  visible;
    animation-name:  fadeInRight;
        display:  contents;
    
  }
  }

.line {
    
  visibility:  visible;
    animation-name:  fadeInRight;
     margin-right:  20%;
    
}
.khat  {
    
  display:  block;
    
  content:  '';
    
  width:  96%;
    
  height:  2px;
    
  margin:  29.7em 0 1em 0;
    
  border-radius:  2px;
    
  background-image:  linear-gradient(90deg,  #efa8b0,  #c58b42,  #efa8b0);
    
  position:  absolute;
    

}
@media only screen and (max-width:  500px) {
    
  .khat  {
    
    display:  block;
    
    content:  '';
    
    width:  96%;
    
    height:  2px;
    
    margin:  516% 0 1em 0;
    
    border-radius:  2px;
    
    background-image:  linear-gradient(90deg,  #efa8b0,  #c58b42,  #efa8b0);
    
    position:  absolute;
    
  
  }
}

  @media only screen and (max-width:  768px) {
    
    .fnt  {
    
    font-size:  11px;
    
    height:  69px;
    
    display:  contents;
    
}

.product-img {
    
  width:  100%;
    
  height: 10%;
    
  padding:  0px;
    
  background:  #fff;
    
  padding-bottom:  0px !important;
    
  overflow:  hidden;
    
  display:  inline-flex;
    
  text-align:  center;
    
  border-top-left-radius:  50px;
    
  border-bottom-right-radius:  50px;
    
  position:  relative;
    
  box-shadow:  0px 0px 15px 0px #eee;
    
}


}





@media only screen and (max-width:  768px) {
    
    .im  {
    
    width:  240px;
    
    height:  240px;
    
}
    
    
}

.fnt-text {
    
  font-size:  19px !important;
    
  

}

@media only screen and (max-width:  768px) {
    
.product-title2  {
    
  margin:  20px 0;
    
  display:  block;
    
  font:  normal 16px/1.8 shabnam;
    
  padding:  0 0;
    
  height:  80px;
    
}
  }


 @media only screen and (max-width:  768px) {
    
  .fnt-text {
    
  font-size:  11px !important;
}

}



@media only screen and (max-width:  768px) {
    
  .mt2 {
    
        width: 100%;
    text-align-last: center;
}
}
@media only screen and (max-width:  768px) {
    

.title  {
    
    display:  flex;
    
    justify-content:  space-between;
    
    align-items:  center;
    
}
    .mah  {
    
    margin-top:  -7%;
    
       width:  100%;
    
       margin-bottom:  25px;
    
}
.h {
    
        margin-top:  51px;
    
            display:  inline-grid;
    
                padding-left:  14px;
    
    
}
.nav1  {
    
    width:  53%;
    
}
.titr {
    
        margin-top:  30px;
    
            text-align-last:  center;
    
}
.fadeInUp {
    
    padding-top:  300px !important;
    
    width:  380px;
    
}
ul#navigation li  {
    
    display:  inline;
    
    font-size:  15px;
    
    font-weight:  bold;
    
    margin:  0;
    
    padding:  0;
    
    float:  left;
    
    position:  relative;
    
    display:  contents;
    
}


}

.sizeh {
    
        font-size:  30px !important;
    
    width: 100%;
    text-align: center;
    display: block;
    
}

.zir {
    
    width: 100%;
    
        font:  bold 24px/1 shabnam;
    
    color:  #d60644;
        text-align-last: center;
    position:  relative;
    
}
@media only screen and (max-width:  768px) {

.zir {
        margin-top: 0px;
    width: 100%;
    
        font:  bold 24px/1 shabnam;
    
    color:  #d60644;
        text-align-last: center;
    position:  relative;
    
}}
.slideInUp  {
    
    -webkit-animation-name:  slideInUp;
    
    animation-name:  slideInUp;
    
        margin-top:  60px;
    
}

.bordr1 {
    border-color: #ed3340;
    width: fit-content;
    border-radius: 5px;
    display: inline;
    font-size: 22px;
    margin: auto;
    background-color: #d60644;
    color: white;
}

.bordr2 {
    border-color: #d60644;
    border-style: solid;
    height: 31px;
    width: fit-content;
    border-radius: 9px;
    display: inline;
    font-size: 22px;
   /* font-family: unset;*/
    margin: auto;
    background-color: #d6064400;
    padding: 13px;
}
@media only screen and (max-width:  768px) {


.a11{    display: inline-flex;
        margin-right: 57px;
    margin-top: 9px;
    
}

}

@media only screen and (max-width:  768px) {
.bordr1 {
    border-color: #ed3340;
    width: fit-content;
    border-radius: 5px;
    display: inline;
    font-size: 22px;
    margin: auto;
    background-color: #d60644;
      margin-right: 11px;
    color: white;
      width:40px;
          width: max-content !important;
              height: 35px;
}}

@media only screen and (max-width:  768px) {
.bordr2 {
    border-color: #d60644;
    border-style: solid;
    height: 31px;
    width: fit-content;
    border-radius: 9px;
    display: inline;
    font-size: 21px;
    font-family: unset;
    margin: auto;
    background-color: #d6064400;
    padding: 13px;
        height: 35px;
}}
@media only screen and (max-width:  768px) {
.product-btn {
    float: none;
    padding: 10px 5px;
    margin-top: 20px;
        width: 138px;
}

}


.couponbox1 {
    padding: 30px;
    background: #d6ac78;
    border-radius: 15px;
    display: flex;
    align-items: center;
    height: 40px;
    margin-right: 8%;
        width: 87%;
}
.bordr2 {
    border-color: #ffffff;
    width: fit-content;
    border-radius: 5px;
    display: inline;
    font-size: 22px;
    margin: auto;
    background-color: #ffffff;
    color: black;
}
.bordr3 {
    border-color: #ffffff;
    width: fit-content;
    border-radius: 5px;
    display: inline;
    font-size: 22px;
    margin: auto;
    background-color: #ffffff;
    color: black;
}
.inpt{
    margin-right: -102px;
}

@media only screen and (max-width:  768px) {.inpt2{    display: -webkit-inline-box;}}
@media only screen and (max-width:  768px) {

.sizeh {
    
        font-size:  30px !important;
    
    
    width: 100%;
    text-align: center;
    display: block;
    
}
}
.d1
{
    margin-top: 6px;     margin-right: 19px;
}

@media only screen and (max-width:  768px) {
.matn{
     font-size: 22px !important;
}}


.khat2{
    
    display: inherit;
}


@media only screen and (max-width:  768px) {
    .khat2{
    
    display: none;
}}

@media only screen and (max-width:  768px) {
    .font2{  font-size: 15px;
}}

.font2{  font-size: 22px;
}
.headerpic{
     width: 100%;
    
    
}
@media only screen and (max-width:  768px) {
.headerpic{
display:none;
    
}}
.headerpic1{
display:none;
    
}
@media only screen and (max-width:  768px) {
.headerpic1{
display:inline-table}}
@media only screen and (max-width:  768px) {
.w{
        width: 28%;
            height: 100px;
}
}
.w{
     height: 106px;
}
.matn-center{    display: block;
    width:100%;
}



.matn-center2{        width: 100%;
    text-align: center;
    display: block;}
.mt2{
        width: 100%;
    text-align-last: center;
}

@media only screen and (max-width:  768px) {
 .h{
  margin-top:  8px;
    
    
 }
 .title {

    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

    .couponbox1 p.fadeInRight{
            visibility: visible !important;
    }
    .couponbox p.fadeInRight{
            visibility: visible !important;
    }
    
    .title .mt2 {
        margin-top:13px;
    }
}
.q1{
    text-decoration: blink;
    color: #000;
    text-align-last: center !important;
        color: #000000;
}
.product-price2 del {
    font: normal 16px shabnam;
    margin: 0 2px;
    vertical-align: middle;
    color: #000;
}