@font-face {
    font-family: "iransans";
    src: url("/font/iransans.ttf");
          font-display: swap;
      
           }

html { 
  direction: rtl;
}

body {
    margin: 0;
    padding: 0;
    font-family: iransans; 
}


:root {
--color1: #000000;
--color2: #202020;
--color3: #282828;
--color4: #404040;
--color5: #606060;
--color6: #707070;
--color7: #808080;
--color8: #909090;
--color9: #A0A0A0;
--color10: #B0B0B0;
--color11: #C0C0C0;
--color12: #D0D0D0;
--color13: #E0E0E0;
--color14: #F0F0F0;
--color15: #F9F9F9;
--color16: #FFFFFF;
}



:root {
  --opacity1: #00000025;
  --opacity2: #00000050;
  --opacity3: #00000075;
  --opacity4: #00000090;
  --opacity5: #00000095;
  --opacity6: #F9F9F925;
  --opacity7: #F9F9F950;
  --opacity8: #F9F9F975;
  --opacity9: #F9F9F990;
  --opacity10: #F9F9F995;
}


:root {
    --origin1: #f6f9e6;
    --origin2: #edf4cd;
    --origin3: #e4efb4;
    --origin4: #dce99b;
    --origin5: #d3e482;
    --origin6: #cadf69;
    --origin7: #c2d950;
    --origin8: #b9d436;
    --origin9: #b0cf1d;
    --origin10: #a8ca05;
    --origin11: #97b504;
    --origin12: #86a104;
    --origin13: #758d03;
    --origin14: #546502;
    --origin15: #323c01;
    --origin20: #ff7900;
    --origin30: #2454ff;
    --origin10-25: #a8ca0525;
    --origin10-50: #a8ca0550;
    --origin10-75: #a8ca0575;
    --origin10-90: #a8ca0590;
    --origin10-95: #a8ca0595;
}


:root {
  --origin10-25: #c3a16125;
  --origin10-50: #c3a16150;
  --origin10-75: #c3a16175;
  --origin10-90: #c3a16190;
  --origin10-95: #c3a16195;
}



:root {
  --titr-line-height: 1.2;  
  --gap-1: .01%;
  --gap-2: .2%;
  --gap-5: .5%;
  --gap-1-5: 1.5%;
  --gap1: 1%;
  --gap2: 2%;
  --gap3: 3%;
  --gap4: 4%;
  --gap5: 5%;
  --gap6: 6%;
  --gap7: 7%;
  --gap8: 8%;
  --gap9: 9%;
  --gap10: 10%;
    --gap15: 15%;
    --gap20: 20%;
  --border-radius: 5px;
  --item-count1:1;
  --item-count2:2;
  --item-count3:3;
  --item-count4:4;
  --item-count5:5;
  --item-count6:6;
  --item-count7:7;
  --item-count8:8;
  --box-shadow: none;
  --very-big:3rem;
  --very-huge:2.5rem;
  --huge:2rem;
   --big:1.5rem;
   --normal:1rem;
  --medium:0.9rem;
  --small:0.8rem;
   --verysmall: 0.75rem;
  --tiny: 0.7rem
}

main {
width:600px;
  margin:auto;
}

.mid-header {
    display: flex;
    align-items: center;
    padding: 0 var(--gap3);
    justify-content: space-between;
  flex-wrap: wrap;
}

.logo{
text-align: center;
  display: flex;
}

.logo h1
{
padding-top:20px

}

.caption {
    text-align: center;
}

.pic-place {
width: 100%;
    text-align: center;
} 

.pic-place img {
max-width: 400px;
    display: unset !important;
  max-height: 350px;
      object-fit: contain;
  transition: .5s ease-out;
  border-radius: 20px;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

figure:not(.product-group section figure) {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.logo-place img {
    max-height: 90px;
    margin-top: 8px;
}

#product-effect,#product-slide
{
  background-color:var(--opacity1);

}

#product-slide
{
  margin-top:20px;
}


.button{
    align-content: center;
    justify-content: center;
  display: flex;
}
.button a{
  padding:4px;
  margin:2px;
  cursor:pointer;
  background-color:var(--color16);
  border-radius:3px;
  font-size: .9em;
}

.button a:hover{
  background-color:var(--color12);
}

address{
font-style: normal;
}

#hint{
  display:none
}

#qrcode img {
 text-align: center;
  margin: auto;
  padding-bottom: 40px;
  display:block;
}

#qrcode{
  width:100%;
  text-align: center;
    justify-content: center;
}

#qrcode h3{
  padding:5px;
text-align: center;
    font-size: var(--item-count1);
}

#hint{
display:none;
  position:fixed;
  bottom:20px; 
  left:20px; right:20px;
  background:white;
  z-index: 108; 
  padding:16px; 
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}

#vcf {
 display:none; 
}

a:visited,a:link{
    text-decoration: none; 
  color: black;
}

.master-container {
margin: var(--gap1) var(--gap10);
  
}

footer {
font-size: var(--small);
}

iframe{
border:none;
max-width:100%;
  height:300px;
  width:100%;
}

.bot-footer {
padding: 10px;
  width: 100%;
  background-color: var(--origin5);
      text-align: center;
  margin-top: -9px;
}

.copyright {
font-size: var(--tiny);
  padding-top: 18px;
  color: var(--color7);
}

.up i {
  transition: .3s ease-out;
  margin: 8px 8px 0 0;
  
  position: absolute;
  color: #fff;
}

.up {
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  left: 5px;
  z-index: 102;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  transition: .3s ease-out;
  display: none;
    background-color: var(--opacity2);
}

.bg-slide {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg-slide2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg-slide3 {
  animation-duration:5s;
}


@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

.social a:before {
color: var(--color16);
}


    /* Under 1900px	*/
@media (max-width: 1920px) {

   
}

    /* Under 1600px	*/
@media (max-width: 1600px) {

  
}


    /* Under 1400px	*/
    @media (max-width: 1400px) {

      
     
      
}



    /* Under 1360px	*/
    @media (max-width: 1360px) {
      
      
    }


    /* Under 1024px	*/
    @media (max-width: 1024px) {
      
      
   
      
      
      #vcf {
 display:block; 
}
      
      .master-container {
        margin: var(--gap1) var(--gap2);
    }
      

}



    /* Under 820px	*/
    @media (max-width:820px) {
      
      
      
            .logo h1
{
padding:0px;
  margin: 0;
}
      
      .logo-place,.social
{
text-align: center;
  width: 100%;  
}
      .logo{
        display:unset
      }
      
 
      .button {
        width: 100%;
        justify-content: center;
        padding: var(--gap1) 0px;
}
      
      
      

    }



    /* Under 620px	*/
    @media (max-width: 620px) {
      
      .banner {
      padding: 0px var(--gap3);
      }
      
      .pic-place img {
    max-width: 100%;
}
      
            main {
width:100%;
  margin:auto;
}
     
      
       :root {
          --item-count4:2;
      }
      
      
      
      .social i::before , .social a::before {
  font-size: 1.8em;;
}
      

      
      .logo{display: block;
  flex-direction: column;}
      
       
      
      .button a {
  padding: 4px;
  margin: 3px;
  font-size: var(--verysmall);
    }



}
     /* Under 520px*/
    @media (max-width: 520px) {

      
      .mid-header {
    justify-content: center;
        margin-bottom: var(--gap4);
}
      
      
   
      .social {
      font-size: var(--medium);
      }
      
   
}

     /* Under 430px*/
    @media (max-width: 430px) {
      
     .mid-header {
    align-items: center;
    justify-content: center;
}

    }





 /* Under 360px*/
    @media (max-width: 360px) {
      
   

}


 /* theme2 */

.theme2 .mid-header {
    padding: 0px;
}

.theme2 .logo {
    display: flex;
    font-size: var(--tiny);
    height: 70px;
    justify-content: center;
    align-content: center;
    background: linear-gradient(90deg, rgb(71 184 255) 0%, rgba(179, 226, 255, 1) 100%);
    padding: 0px var(--gap3);
}

.theme2 .logo h1 {
    margin: 0px;
}

.theme2 .logo-place img {
    max-height: 270px;
    margin-top: 8px;
    max-width: 100%;
    object-fit: cover;
      border-radius: 20px;
}

.theme2 .logo-place figure {
margin: 5%;
  text-align: center;
}

.theme2 .social {
	display: flex;
    flex-wrap: nowrap;
}

 /* Under 600px*/
    @media (max-width: 780px) {
      
   .theme2 .social {
	display: flex;
    flex-wrap: wrap;
}

}

.theme2 .social a {
   width: calc(100% / var(--item-count2) - var(--gap2));
    border-radius: 10px;
    margin: var(--gap1);
    padding: var(--gap1);
      box-shadow: 0 7px 7px rgb(90 97 105 / 40%), 0 2px 0px rgb(90 97 105 / 40%);
  transition: .5s ease-out;
}

.theme2 .social a:hover {
    transform: scale(0.98);
}

.theme2 .social a:before {
float: right;
    width: 100%;
    margin: 0px;
    font-size: var(--huge);
    text-align: center;
}

.theme2 .social a span {
padding-top: 8px;
    float: right;
    color: var(--color16);
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.theme2 .social .icon-telegram {
  background-color:#0093d9;
}

.theme2 .social .icon-instagram {
	background-color:#b400ff;
}

.theme2 .social .icon-whatsapp {
	background-color:#0cbd5a;
}

.theme2 .social .icon-mobile {
	background-color:#ffa300;
}

.theme2 .button {
    background: var(--color9);
    padding: 3%;
    margin-bottom: 10px;
}

.theme2 {
  background:var(--color13);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='2000' height='900' preserveAspectRatio='none' viewBox='0 0 2000 900'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1018%26quot%3b)' fill='none'%3e%3cpath d='M -423.58300811198694%2c622 C -323.58%2c560.6 -123.58%2c312.8 76.41699188801304%2c315 C 276.42%2c317.2 376.42%2c658.4 576.4169918880131%2c633 C 776.42%2c607.6 876.42%2c170.6 1076.416991888013%2c188 C 1276.42%2c205.4 1376.42%2c728.2 1576.416991888013%2c720 C 1776.42%2c711.8 1991.7%2c142 2076.416991888013%2c147 C 2161.13%2c152 2015.28%2c625.4 2000%2c745' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -640.15116956463%2c473 C -540.15%2c414.8 -340.15%2c116.2 -140.15116956462998%2c182 C 59.85%2c247.8 159.85%2c764.8 359.84883043537%2c802 C 559.85%2c839.2 659.85%2c389.2 859.84883043537%2c368 C 1059.85%2c346.8 1159.85%2c746 1359.84883043537%2c696 C 1559.85%2c646 1731.82%2c160.2 1859.84883043537%2c118 C 1987.88%2c75.8 1971.97%2c411.6 2000%2c485' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -327.6406402625232%2c762 C -227.64%2c681 -27.64%2c397.8 172.35935973747678%2c357 C 372.36%2c316.2 472.36%2c561.4 672.3593597374768%2c558 C 872.36%2c554.6 972.36%2c344 1172.3593597374768%2c340 C 1372.36%2c336 1472.36%2c568.8 1672.3593597374768%2c538 C 1872.36%2c507.2 2106.83%2c169.8 2172.3593597374766%2c186 C 2237.89%2c202.2 2034.47%2c532.4 2000%2c619' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -438.8489851787283%2c715 C -338.85%2c604.6 -138.85%2c173.4 61.15101482127172%2c163 C 261.15%2c152.6 361.15%2c646.4 561.1510148212717%2c663 C 761.15%2c679.6 861.15%2c285.8 1061.1510148212717%2c246 C 1261.15%2c206.2 1361.15%2c438 1561.1510148212717%2c464 C 1761.15%2c490 1973.38%2c341.8 2061.151014821272%2c376 C 2148.92%2c410.2 2012.23%2c583.2 2000%2c635' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -749.2554293593944%2c812 C -649.26%2c697.4 -449.26%2c252.4 -249.25542935939444%2c239 C -49.26%2c225.6 50.74%2c724.4 250.74457064060556%2c745 C 450.74%2c765.6 550.74%2c380 750.7445706406056%2c342 C 950.74%2c304 1050.74%2c573.6 1250.7445706406056%2c555 C 1450.74%2c536.4 1600.89%2c222.6 1750.7445706406056%2c249 C 1900.6%2c275.4 1950.15%2c599.4 2000%2c687' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3cpath d='M -204.1087487945088%2c533 C -104.11%2c457.4 95.89%2c104 295.8912512054912%2c155 C 495.89%2c206 595.89%2c732.8 795.8912512054912%2c788 C 995.89%2c843.2 1095.89%2c490.4 1295.8912512054912%2c431 C 1495.89%2c371.6 1595.89%2c549.6 1795.8912512054912%2c491 C 1995.89%2c432.4 2255.07%2c124.8 2295.8912512054912%2c138 C 2336.71%2c151.2 2059.18%2c473.2 2000%2c557' stroke='rgba(243%2c 243%2c 243%2c 0.2)' stroke-width='2'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1018'%3e%3crect width='2000' height='900' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
      background-position: top;
    background-repeat: no-repeat;
}

.theme2 .caption {
margin: 30px 20px;
    text-align: center;
    font-size: var(--small);
}

.theme2 .master-container {
margin: 0px;
        background: var(--color16);
        padding-top: 10px;
}

.theme2 .mid-header {
display: unset;
}

.theme2 .bot-footer {
    background-color: var(--color12);
}

.theme3 {
  background:none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='600' height='700' preserveAspectRatio='none' viewBox='0 0 600 700'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1128%26quot%3b)' fill='none'%3e%3crect width='600' height='700' x='0' y='0' fill='rgba(255%2c 255%2c 255%2c 1)'%3e%3c/rect%3e%3cpath d='M91.11 203.68 a145.56 145.56 0 1 0 291.12 0 a145.56 145.56 0 1 0 -291.12 0z' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M-72.16 279.32 a129.08 129.08 0 1 0 258.16 0 a129.08 129.08 0 1 0 -258.16 0z' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M295.348%2c586.596C337.487%2c587.068%2c375.468%2c560.71%2c394.894%2c523.313C412.953%2c488.548%2c403.938%2c448.376%2c384.947%2c414.111C365.212%2c378.502%2c336.04%2c344.964%2c295.348%2c343.701C252.915%2c342.384%2c215.734%2c370.875%2c195.571%2c408.234C176.402%2c443.75%2c179.884%2c485.906%2c199.588%2c521.128C219.821%2c557.296%2c253.908%2c586.132%2c295.348%2c586.596' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-141.19 513.7 a170.38 170.38 0 1 0 340.76 0 a170.38 170.38 0 1 0 -340.76 0z' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M253.085%2c712.703C298.112%2c713.068%2c337.441%2c684.961%2c360.025%2c646.006C382.684%2c606.92%2c388.475%2c558.252%2c365.006%2c519.647C342.291%2c482.281%2c296.811%2c470.64%2c253.085%2c470.093C208.123%2c469.53%2c159.25%2c478.172%2c136.204%2c516.783C112.737%2c556.1%2c125.651%2c604.973%2c149.11%2c644.295C171.891%2c682.482%2c208.62%2c712.342%2c253.085%2c712.703' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M335.68 138.19 a175.88 175.88 0 1 0 351.76 0 a175.88 175.88 0 1 0 -351.76 0z' fill='rgba(28%2c 83%2c 142%2c 0.03)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1128'%3e%3crect width='600' height='700' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");
      background-position: top;
    background-repeat: no-repeat;
}

.theme3 .master-container {
    background:none;
}

.theme3 #qrcode img {
    padding-top: 40px;
  padding-bottom: 0px;
}

.theme3 .master-container h3 {
font-size: var(--medium);
    text-align: center;
}

 /* Under 500px*/
    @media (max-width: 500px) {
      
   .theme2 .social a:before {
    float: right;
    width: unset;
    margin: 5px;
    font-size: var(--big);
}
      
      .theme2 .social a span {
    padding-top: 8px;
    float: right;
    color: var(--color16);
    font-weight: bold;
    width: unset;
}

}