@font-face {
    font-family: 'Vazirmatn-Regular';
    src: url('fonts/Vazirmatn-Regular.woff');
}
@font-face {
    font-family: 'fontello';
    src: url('fonts/fontello.woff2');
    font-weight: normal;
    font-style: normal;
  }

  [class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
  
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
  
    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;
  
    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;
  
    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;
  
    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */
  
    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  
    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
  }
  
  .icon-ok:before { content: '\e800'; } /* '' */
  .icon-instagram:before { content: '\f16d'; } /* '' */
  .icon-whatsapp:before { content: '\f232'; } /* '' */
  .icon-telegram:before { content: '\f2c6'; } /* '' */
  
  .icon-ok{
    color: rgb(191 6 6);
    font-size: 150%;
  }

html{
    scroll-behavior: smooth;
}
body{
  	/* background: url("res/img/back.jpg") no-repeat fixed; */
    user-select: none;
    background-size: 100vw 100vh;
    font-family: 'Vazirmatn-Regular',Arial, Helvetica, sans-serif;
    text-align: center;
    display: block;
    margin: 20px auto;
    font-size: 100%;
    direction: rtl;
    max-width: 600px;
    color: #444 !important;
    padding: 0;
    box-shadow: 0 0 12px #0000001c;
    border-radius: 20px;
}
header{
    padding: 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: 5px;
}
.op-info{
    text-align: justify;
    box-shadow: 0 0 12px #4d4d4d1c;
    max-width: 600px;
    display: block;
    margin: 4px auto;
    border-radius: 12px;
}
.op-info #off{
	text-align: center;
  	border:2px solid #fff;
}
#op-info-main{
    text-align: justify;
    width: 96%;
    max-width: 600px;
    display: block;
    margin: auto;
    border-radius: 20px;
    margin-top: 10px;
    height: auto;
    min-height: 640px !important;
}
#op-info-main #off{
	text-align: center;
  	border:2px solid #fff;
}
.op-inner-info{
    width: 100%;
    display: block;
    margin: auto;
}
.clear{
    clear: both;
}
h1,h2{
    margin: 0 auto;
    text-align: right;
    font-size: 150%;
}
h1{
    font-size: 120%;
}
h2{
    font-size: 110%;
}
#cap{
    color: #fff;
    padding: 7px 0;
    font-weight: 800;
    font-size: 100%;
    text-align: center;
    border-radius: 12px;
    width: 300px;
    display: block;
    margin: auto;
    background: rgb(191 6 6);
}
#prices{
    margin: 0;
    background: rgb(3, 112, 3);
    color: #fff;
    padding: 14px 0;
    font-weight: 800;
    font-size: 100%;
    text-align: center;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    margin-top: 20px;
}
#contact{
    margin: auto;
    background: #F4132A;
    color: #fff;
    padding: 15px 7px;
    font-weight: 800;
    font-size: 100%;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    margin-bottom: 16px;
    text-align: justify;
    /* -webkit-animation: bg 0.75s infinite alternate;
    -moz-animation: bg 0.75s infinite alternate;
    -o-animation: bg 0.75s infinite alternate;
    animation: bg 0.75s infinite alternate; */
    text-align: center;
}
#logo{
    display: block;
    margin-right: auto;
    margin-top: 0px;
    -webkit-transition: width 400ms linear;
    -moz-transition: width 400ms linear;
    -o-transition: width 400ms linear;
    -ms-transition: width 400ms linear;
    transition: width 400ms linear;
}
.zoom{
    animation: zoominoutsinglefeatured 1.5s infinite;
}
.line{
    margin: 15px;
}
.line #right-hr{
    background: -webkit-linear-gradient(0deg, rgb(255, 0, 0) 0, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 3px;
    width: 49%;
    float: right;
    border: none;
}
.line #left-hr{
    background: -webkit-linear-gradient(180deg, rgb(255, 0, 0) 0, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 3px;
    border: none;
    width: 49%;
    float: left;
}
p{
    font-size: 100%;
}
#instagram{
    background:linear-gradient(45deg, #EF9233 0, #D9274A 50%, #BD1987 100%);
    box-shadow: 0 0 8px #D9274A;
}
#whatsapp{
    background-color: #0da846;
    box-shadow: 0 0 8px #0da846;
}
#telegram{
    background-color: #007BFF;
    box-shadow: 0 0 8px #007BFF;
}
#rubika{
    background-color: #e0005d;
    box-shadow: 0 0 8px #e0005d;
}
#eita{
    background-color: #e06100;
    box-shadow: 0 0 8px #e06100;
}
#bale{
    background-color: #03a292;
    box-shadow: 0 0 8px #03a292;
}
#soroosh{
    background-color: #155BA4;
    box-shadow: 0 0 8px #155BA4;
}
#sms{
    background-color: #308e33;
    box-shadow: 0 0 8px #308e33;
}
@keyframes zoominoutsinglefeatured {
    0% {
        transform: scale(1,1);
    }
    50% {
        transform: scale(1.05,1.05);
    }
    100% {
        transform: scale(1,1);
    }
}
#order{
    background-color: #a50000;
    animation: zoominoutsinglefeatured 1.5s infinite ;
}
.info{
    background-color: #000;
    padding: 1px;
}
.info{
    color: #fff;
}
.info p{
    margin: 8px 0;
    font-weight: 800;
    font-size: 90%;
}
@media only screen and (max-width: 560px) {
    body {
      width: 100%;
      box-shadow: none;
      margin: 0 auto;
      padding: 10px 0;
    }
    header{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    #up{
        width: 100% !important;
    }
  }

  .container {
    margin: 15px auto;
    width: 270px;
    height: 480px;
    overflow: hidden;
    border: solid;
    position: relative;
  }
  .photo {
    position: absolute;
    animation: round 32s infinite;
    opacity: 0;
    margin-right: -135px;
  }
  
  @keyframes round {
    25% {
      opacity: 1;
    }
    40% {
      opacity: 0;
    }
}

img:nth-child(1) {
animation-delay: 32s;
}
img:nth-child(2) {
animation-delay: 28s;
}
img:nth-child(3) {
animation-delay: 24s;
}
img:nth-child(4) {
animation-delay: 20s;
}
img:nth-child(5) {
animation-delay: 16s;
}
img:nth-child(6) {
animation-delay: 12s;
}
img:nth-child(7) {
animation-delay: 8s;
}
img:nth-child(8) {
animation-delay: 4s;
}
img:nth-child(9) {
animation-delay: 0s;
}
#off{
	background-color: rgb(191 6 6);
	border-radius: 12px;
	font-size: 100%;
	font-weight: 500;
	padding: 6px 10px;
	display: block;
	width: 195px;
	margin: auto;
	margin-top: 3px;
	margin-bottom: 0;
	/* animation: bg 1s;
	animation-iteration-count: infinite; */
	cursor: default;
	color: #444;
    box-shadow: 0 0 12px #0000001c;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes whiteRed {
    from {color: #f00;}  
    to {color: #000;}  
}


@font-face {
    font-family: 'Vazirmatn-Regular';
  	font-display: swap; 
    src: url(fonts/Vazirmatn-Regular.woff);
}

/* width */
::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; 
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888; 
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; 
  }

audio{
    display: block;
    margin: 8px auto;
    box-shadow: 0 0 10px #00000038;
    border-radius: 60px;
    opacity: 0.8;
    transform: scale(0.95);
}

h2{
    text-align: center;
    font-size: 110%;
    width: fit-content;
    display: block;
    margin: 10px auto;
}
p{
    font-weight: 800;
}
.text{
    text-align: center;
    margin: 0 20px;
    font-weight: 800;
}
#routinedesc{
    text-align: center;
}
.line #right-hr {
    background: -webkit-linear-gradient(0deg,rgb(255, 0, 0) 0,rgba(255,255,255,0) 100%);
    height: 3px;
    width: 49%;
    float: right;
    border: none;
}
.line #left-hr {
    background: -webkit-linear-gradient(180deg,rgb(255, 0, 0) 0,rgba(255,255,255,0) 100%);
    height: 3px;
    width: 49%;
    float: left;
    border: none;
}
.sectionImage{
    display: block;
    margin: auto;
}
.contact-us {
    text-decoration: none;
    right: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    color: #fff;
    cursor: pointer;
    border-radius: 0;
    box-shadow: none;
    background: rgb(191 6 6);
    font-size: 90%;
    border-top: 1px solid #000;
    /* animation: colors 3s infinite; */
}
@keyframes colors {
    from {background-color: #cf0000;}  
    to {background-color: #fb7d00;}  
}
@keyframes whiteRed {
    from {color: #f00;}  
    to {color: #000;}  
}
.showcase{
    overflow-x: auto;
}
.showcase img{
    border: 1px solid #cf0000;
    width: 270px;
    height: 480px;
}
.btn{
    text-decoration: none;
    color: #fff;
    border-radius: 12px;
    padding: 6px 10px;
    display: block;
    margin: 5px 8px;
    text-align: center;
    width: 130px;
    font-weight: 800;
}
.btn-wrap{
    display: flex;
    justify-content: center;
    margin: 4px 0;
}
.btn-wrap #off{
    width: 148px;
    padding: 10px 5px !important;
    margin: 5px!important;
}
#bigBanner{
    width: 95%;
    max-width: 400px;
    display: block;
    margin: auto;
}
#samples{
    background-color: #cf0000;
}
.zoom{
    animation: zoominoutsinglefeatured 1.5s infinite;
}
@keyframes zoominoutsinglefeatured{0%,to{transform:scale(1,1)}50%{transform:scale(0.85,0.85)}}

.info{
    text-align: center;
    background-color: green;
    box-shadow: 0 0 16px green;
    font-weight: 900;
    font-size: 110%;
    padding: 5px 0;
    color: #fff;
    margin: 20px 0;
}
.info p{
    margin: 0;
}
.contact-us {
  background: #e20000;
  -webkit-animation: bg 0.75s infinite alternate;
  -moz-animation: bg 0.75s infinite alternate;
  -o-animation: bg 0.75s infinite alternate;
  animation: bg 0.75s infinite alternate;
}

@-webkit-keyframes bg {
  0%   { background: rgb(31, 185, 31); }
  100% { background: green; }
}
@-moz-keyframes bg {
  0%   { background: rgb(31, 185, 31); }
  100% { background: green; }
}
@-o-keyframes bg {
  0%   { background: rgb(31, 185, 31); }
  100% { background: green; }
}
@keyframes bg {
  0%   { background: rgb(31, 185, 31); }
  100% { background: green; }
}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.satis{
    width: 95%;
    max-width: 350px;
    margin-top: 10px;
    border-radius: 30px;
    box-shadow: 0 0 11px #000;
}

#satisbtn{
    font-size: 90%;
    display: block;
    cursor: default;
    color: #03A9F4;
    text-decoration: none;
    text-align: left;
    border-bottom: 2px solid;
    width: fit-content;
    margin-right: auto;
    margin-left: 15px;
    margin-bottom: 6px;
  	font-weight: 900;
}

#form1 p, #form2 p, #form3 p, #form4 p, #form5 p{
    padding: 0 16px;
    word-spacing: 1px;
    text-align: center;
    /* font-size: 120%; */
}
.checkbox-container{
    padding: 0;
  margin-top: 17px;
  
}
.checkbox-container label{
    font-size: 100%;
    text-align: center;
    display: block;
    width: 260px;
    margin: 10px auto;
    background: #7d7d7d3b;
    border-radius: 12px;
    padding: 8px 0;
    /* cursor: pointer; */
    -webkit-transition: background-color 250ms linear;
    -ms-transition: background-color 250ms linear;
    transition: background-color 250ms linear;
    color: #000;
  	border:2px solid rgba(1, 168, 12, 0);
}
.checkbox-container input{
    margin: 20px auto;
    transform: scale(1.5);
    margin-left: 8px;
    display: none;
}
#load-more{
    font-family: 'Vazirmatn-Regular';
    display: block;
    margin: auto;
    font-size: 100%;
    border-radius: 12px;
    padding: 0 3px;
    border: none;
    background: none;
}
#next1{
    font-family: 'Vazirmatn-Regular';
    font-size: 100%;
    display: block;
    margin: 15px auto;
    border-radius: 12px;
    border: none;
    box-shadow: 0 0 10px #0000006b;
    padding: 10px 20px;
    font-weight: 800;
    background: rgb(3, 112, 3);
    color: #fff;
}
#form3 li{
    margin: 10px 0;
  	font-weight:800;
}

#cycle-factor, #pct-factor, #work-factor, #diet-factor{
    display: none;
}
#back3{
    margin: 0 auto;
    display: block;
    font-family: 'Vazirmatn-Regular';
    border: 0;
    font-weight: 800;
    padding: 3px 10px;
    background: none;
    border-bottom: 2px solid;
    margin-top: 10px;
    color: #00000070;
}
#order-code{
    text-align: center;
    width: fit-content;
    display: block;
    margin: 40px auto;
    background: #ffffff30;
    border-radius: 12px;
    padding: 5px 20px 5px 32px !important;
    font-size: 135%;
    border: 1px solid #fff;
    letter-spacing: 10px;
    user-select: text !important;
}
#last-order-code{
    text-align: center;
    background: #308e3336;
    border-radius: 12px;
    border: 3px solid #308e33;
    font-size: 160%;
    user-select: text !important;
    letter-spacing: 10px;
    margin: 0 auto;
    width: fit-content;
    color: #308e33;
    padding-left: 15px !important;
    padding-right: 2px !important;
}
#information{
    background: #1fa3f852;
    border: 2px solid #009bff;
    font-weight: 400;
    padding: 5px 25px !important;
    margin: 5px auto 5px auto;
    border-radius: 12px;
    width: 260px;
    display: block;
    color: #025a91;
}
#price-bill{
    font-weight: 800;
    padding: 10px;
    width: fit-content;
    display: block;
    margin: auto;
    border-radius: 12px;
  	border:2px solid;
}
#price-bill2{
    font-weight: 800;
    padding: 10px;
    width: 238px;
    display: block;
    margin: auto;
    border-radius: 12px;
  	margin-top:13px;
    border: 1px solid;
}
#total-price2{
    text-align: center;
    font-size: 110% !important;
    margin: 0;
    text-decoration: line-through;
    display: none;
}
#discount-price2{
    text-align: center;
    margin: 0;
    display: none;
}
#discount-price-number2{
    font-size: 110%;
}
#total-price{
    text-align: center;
    font-size: 110% !important;
    margin: 0;
    text-decoration: line-through;
}
#discount-price{
    text-align: center;
    margin: 0;
}
#discount-price-number{
    font-size: 110%;
}
#discount-prg{
    display: block;
    margin: auto;
    margin-top: 0;
    height: 40px;
    direction: ltr;
    width: 85%;
}
#discount-txt{
    font-size: 100%;
    text-align: center;
    margin: 0;
    margin: 15px;
}
#discount-time{
    text-align: center;
    margin: 0;
    direction: ltr;
    font-size: 65% !important;
}
#copy-code{
    display: block;
    margin: auto;
    font-family: Vazirmatn-Regular;
    font-size: 100%;
    border-radius: 12px;
    border: none;
    background: #308e33;
    color: #FFF;
    margin-top: 10px;
    margin-bottom: 22px;
    padding: 5px 15px;
}
#text-code{
    text-align: center;
    display: block;
    margin: auto;
    font-size: 100%;
    font-weight: 400;
    margin-top: 20px;
}

#snackbar {
    visibility: hidden;
    min-width: 200px;
    margin-left: -110px;
    background-color: #000000;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 15px 0px;
    position: fixed;
    z-index: 999;
    font-weight: 800;
    left: 50%;
    box-shadow: 0 0 10px #000;
    bottom: 30px;
    font-size: 110%;
    border-radius: 6px;
  }
  
  #snackbar.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, fadeout 0.5s 1.5s;
  }
  
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }

/*** <--- CIRCLE STYLES ---> ***/
.wrap-circles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  
  .circle {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0.5rem;
    border-radius: 50%;
    background: #FFCDB2;
    overflow: hidden;
  }
  .circle.per-75 {
    margin: 0;
  }
  #circle-prg{
    background-image: conic-gradient(#cf0000 100%, #cf000055 0);
  }
  .circle .inner {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    font-size: 1.85em;
    font-weight: 300;
  }







.trigger, #output {
	padding: 1em;
	margin: 0;
}

/*= Confirm Box */

#confirm-wrapper {
	width: 100%;
    height: 100% !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    background: #000000db;
    display: none;
    transition: opacity 1s ease-in;
}

#confirm-box {
	width: 300px;
	background: #fff;
	min-height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -100px 0 0 -150px;
}

#confirm-buttons {
	position: absolute;
	width: 100%;
	text-align: center;
	bottom: 0;
	left: 0;
	padding-bottom: 1em;
}

#confirm-buttons button {
	display: inline-block;
	background: transparent;
	color: #000;
	font-size: 1em;
    font-family: 'Vazirmatn-Regular';
	font-weight: bold;
	cursor: pointer;
	text-transform: uppercase;
	border: 2px solid;
	margin: 0 0.5em;
	padding: 0.6em 0;
	width: 120px;
}

#confirm-header {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1.5em 0 4.5em 0;
    color: #000 !important;
}

#confirm-header:after {
	content: ' ';
	display: block;
	width: 1em;
	border-top: 1px solid;
	margin: 0.4em auto;
}
#payaftertalk{
  margin: 0;
  padding: 0 !important;
  font-size: 85%;
  color: #0fa10f !important;
  font-weight: 900;
  width: 100%;
}
#work-diet-wrap{
	display: flex;
    justify-content: center;
}
#work-diet-wrap #work-label{
  width: 125px;
  margin:0;
  margin-left:3px;
}
#work-diet-wrap #diet-label{
  width: 125px;
  margin:0;
  margin-right:3px;
}
.next-customer{
    background: green;
    font-size: 110%;
    text-decoration: none;
    color: #fff;
    padding: 10px 20px;
    display: block;
    margin: 10px auto;
    border-radius: 12px;
    box-shadow: 0 0 10px #000;
    width: 150px;
}



@media (prefers-color-scheme: dark) {
  body {
    background:#181A19;
  }
  p,h1,h2,h3,h4,a,label,ol,ul,#load-more,#routinedesc,#back3{
    color:#F4F5F9!important;
  }
  #op-info-main,body,.op-info{
   /* box-shadow:0 0 8px #000; */
  }
  label{
    background:#2b2b2b;
  }
  .inner{
    background:#181A19 !important;
  }
  #satisbtn{
    color: #03A9F4 !important;
	}
}