@font-face {
  font-family: 'yekan';
  src: url('/shared/fonts/YekanBakhFaNum-Regular.eot');
  src: url('/shared/fonts/YekanBakhFaNum-Regular.eot?#iefix') format('embedded-opentype'),
  url('/shared/fonts/YekanBakhFaNum-Regular.woff2') format('woff2'),
  url('/shared/fonts/YekanBakhFaNum-Regular.woff') format('woff'),
  url('/shared/fonts/YekanBakhFaNum-Regular.ttf') format('truetype'),
  url('/shared/fonts/YekanBakhFaNum-Regular.svg#Shabnam-FD') format('svg');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 14px;
  overflow-x: hidden !important;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

body
{
  font-family: 'yekan' ;
  background-color: #181818;
  color: white;
  direction: rtl;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}

#logo img
{
  width: 100% !important;
}

#logo h6
{
  background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%);
  -webkit-text-fill-color:transparent;
  font-size: 18px;
  background-clip: text;
  text-decoration: none;
  font-weight: bold;
}

#logo a
{
    text-decoration: none !important;
}

#logo p
{
  color: #B4BCD0FF;
  font-size: 14px;
  text-decoration: none;
  margin-top: -30px;
}

header
{
  width: 100% !important;
  overflow-x: hidden !important;
}

header #earth
{
    background-image: url("../img/earth.svg");
    width: 100%;
    height: 200px;
    left: 0;
    position: absolute;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    z-index: 0;
}

header #earth-globe
{
  position: absolute;
  bottom: -150px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
  background: radial-gradient(rgb(32, 48, 48) 5%, transparent 70%);
  height: 600px;
  width: 80%;
}


header #topbar
{
  min-height: 74px;
  line-height: 74px;
}

header #topbar ul
{
  list-style: none;
  float: left;
}

header #topbar ul li
{
  font-size: 15px;
  margin-right: 32px;
}

header #topbar ul li a
{
  color: white;
  text-decoration: none;
  font-weight: bold;
}

header #topbar .href-login
{
  background: linear-gradient(92deg, #40E0D0 0%, #28C1F5 98.77%);
  padding: 10px 15px;
  border-radius: 8px;
  color: black !important;
  margin-right: -16px;
}

header #topbar .href-order
{
  background: linear-gradient(92deg,#a288f3 0%,  #de83d3 98.77%);
  padding: 10px 15px;
  border-radius: 8px;
  color: black !important;
}

header .navbar
{
  background-color: transparent !important;
}


.fixed {
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  width: 60%;
  height: 80px !important;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 999;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

header .navbar ul
{
  margin-right: -30px !important;
}


header .navbar .nav-item
{
  font-size: 15px;
}

header .navbar .nav-item .nav-link:before
{
  content:"";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #40E0D0;
  border-radius: 100%;
  margin-left: 10px;
}

header .navbar .nav-item .nav-link
{
  font-size: 16px;
  color: white;
  text-decoration: none;
  padding-left: 16px;
}

header .navbar .nav-item .nav-link:hover
{
   color: #40E0D0;
}


.normal-navbar .href-fixed
{
  display: none !important;
  position: fixed;
  left: 19%;
  top: 62px;
  transform: translateY(-50%);
  font-size: 14px;
  padding: 10px 20px;
  text-decoration: none;
  z-index: 999;
}

.normal-navbar .href-fixed a
{
  color: white !important;
  text-decoration: none;
  font-size: 24px;
  padding: 10px 20px;
}

.normal-navbar .href-fixed a:hover
{
  color: #40E0D0 !important;
}

.normal-navbar .href-fixed.show
{
  display: block !important;
  opacity: 1;
}

header #hero h1
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  -webkit-text-fill-color:transparent;
  background-clip: text;
  font-size: 42px;
  font-weight: bold;
}

header #hero h4
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%) text;
  -webkit-text-fill-color:transparent;
  font-size: 36px;
    line-height: 36px;
}

header #hero h6
{
  color: #B4BCD0FF;
  line-height: 40px;
  padding-left: 10%;
  padding-right: 10%;
  font-size: 22px;
}

header #href-start
{
  width: 150px;
  margin: 0 auto;
}

header #href-start:hover
{
  transform: scale(1.1) !important;
  transition: ease-in-out 400ms;
}

header #href-start a
{
  background: linear-gradient(92deg, rgba(135, 252, 196, 0.133) 0%, rgba(40, 193, 245, 0.133) 98.77%);
  padding: 10px 15px;
  border-radius: 16px;
  z-index: 2;
}

header #href-start p
{
  background: linear-gradient(92deg,#40E0D0 30%,#9ffac7 81%);
  display: inline-block;
  -webkit-text-fill-color:transparent;
  font-size: 16px;
  background-clip: text;
}


#background-halo
{
  background: radial-gradient(87.68% 101.73% at 51.86% -0.36%, rgba(122, 139, 241, 0.14) 0%, rgba(24, 24, 24, 0) 100%);
  width: 100%;
  height: 700px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

#stars
{
  background: transparent;
  position: absolute;
  height: 1px;
  width: 1px;
  top: 0;
  left: 0;
  z-index: 0;
  box-shadow: 259px 459px #ccc,354px 294px #999,926px 518px #999,825px 646px #999,1335px 855px #999,118px 897px #999,1698px 811px #999,254px 854px #999,270px 520px #999,1746px 217px #999,246px 724px #999,1598px 757px #999,106px 32px #999,460px 573px #999,35px 803px #999,1004px 930px #999,280px 273px #999,1314px 744px #999,1567px 571px #999,1540px 557px #999,1616px 395px #999,1011px 374px #999,1491px 399px #999,512px 639px #999,1339px 252px #999,635px 946px #999,832px 743px #999,335px 43px #999,44px 677px #999,861px 45px #999,858px 449px #fff,585px 343px #ccc,1028px 235px #999,241px 614px #999,163px 618px #999,141px 112px #999,1367px 112px #fff,317px 41px #ccc,267px 949px #999,1003px 788px #999,1607px 367px #999,1689px 539px #999,978px 102px #999,1500px 615px #ccc,304px 741px #999,1698px 664px #999,820px 47px #999,1454px 782px #999,1856px 40px #999,219px 459px #ccc,258px 416px #999,1160px 537px #999,218px 190px #999,978px 359px #999,30px 918px #999,914px 227px #ccc,1824px 583px #999,569px 819px #999,251px 393px #999,1866px 651px #999,1199px 611px #999,5px 650px #ccc,1426px 692px #999,1655px 752px #999,749px 454px #999,1580px 927px #999,551px 185px #999,1830px 135px #ccc,1621px 6px #999,1256px 476px #999,1851px 212px #999,717px 896px #999,938px 598px #999,1838px 522px #ccc,1604px 354px #999,1671px 369px #999,1720px 575px #fff,440px 843px #999,1662px 630px #999,1514px 634px #ccc,1138px 356px #999,886px 384px #999,1909px 303px #fff,1799px 231px #999,634px 180px #999,1067px 551px #ccc,1563px 519px #999,1482px 879px #fff,1730px 642px #fff,537px 261px #999,486px 88px #999,1097px 11px #ccc,185px 58px #999,1106px 609px #fff,596px 610px #fff,1412px 561px #999,443px 228px #999,1640px 173px #ccc,1356px 643px #fff,899px 31px #fff,1828px 91px #fff,130px 944px #999,16px 53px #999,201px 295px #ccc,928px 668px #fff,1554px 259px #999,435px 712px #fff,829px 421px #999,1645px 973px #999,1707px 231px #ccc,42px 392px #fff,122px 123px #999,1127px 106px #999,620px 469px #999,370px 179px #999,49px 751px #ccc,184px 666px #fff,1759px 402px #999,513px 226px #999,1304px 66px #999,1123px 108px #999,1790px 465px #ccc,73px 276px #fff,1189px 318px #999,1829px 848px #999,283px 133px #999,1099px 497px #999,1080px 134px #ccc,1479px 367px #fff,1738px 109px #999,353px 834px #999,1279px 34px #999,1660px 88px #999,391px 28px #ccc,1719px 458px #fff,249px 361px #999,266px 582px #999,229px 352px #999,557px 486px #999,278px 526px #ccc,437px 594px #fff,1044px 884px #999,162px 651px #999,1417px 436px #999,139px 376px #999,1417px 860px #ccc,949px 667px #fff,1285px 451px #999,1726px 465px #999,45px 53px #999,1104px 577px #999,1848px 327px #ccc,155px 497px #fff,578px 119px #999,1069px 982px #999,257px 86px #999,1237px 187px #999,1614px 158px #ccc,1167px 63px #fff,30px 932px #999,486px 968px #999,368px 581px #999,919px 209px #999,1134px 496px #ccc,747px 561px #fff,1143px 984px #999,79px 829px #999,527px 799px #999,962px 21px #999,338px 673px #ccc,1793px 753px #fff,344px 349px #999,625px 672px #999,1351px 312px #999,65px 696px #999,1220px 926px #ccc,891px 850px #fff,1111px 505px #999,271px 332px #999,906px 639px #999,16px 799px #999,1824px 422px #ccc,4px 418px #fff,1476px 322px #999,1127px 447px #999,322px 649px #999,1010px 324px #999,1042px 65px #ccc,1387px 455px #fff,1775px 985px #999,33px 930px #999,1610px 556px #999,1593px 1253px #999,1793px 1120px #999,1293px 1220px #999,1593px 990px #999,1623px 1153px #999,93px 1053px #fff,153px 1153px #fff,193px 1253px #999,293px 1120px #999,393px 1220px #999,493px 990px #999,523px 1153px #999,596px 1315px #ccc,737px 1314px #ccc,896px 1459px #ccc,375px 1419px #ccc,1106px 1293px #ccc,888px 1203px #ccc,938px 1481px #ccc,1189px 1475px #ccc,170px 1421px #ccc;
}


#meteor-master
{
  background-image:linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  height:2px;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  top: -100px;
  transform: rotate(-90deg);
  width: 300px;
  animation: meteor-master 700ms linear forwards;
  animation-iteration-count: 1;
    z-index: -1 !important;
}

#meteor-master:before
{
  content:"";
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: hsla(0,0%,100%,0.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -4px;
  margin-right: -2px;
}


#meteor-1
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 60%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-1:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-2
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 0;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-2:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-3
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 30%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-3:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-4
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 65%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-4:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
    z-index: 0 !important;
}


#meteor-5
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 45%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-5:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-6
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 7%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-6:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-7
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 70%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-7:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}

#meteor-8
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 15%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-8:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}


#meteor-9
{
  position: absolute;
  background: linear-gradient(90deg,#fff,hsla(0,0%,100%,0));
  width: 300px;
  height: 1px;
  left: 92%;
  top: -200px;
  transform: rotate(-90deg);
  animation-delay: 1500ms;
    z-index: 0 !important;
}

#meteor-9:before
{
  position: absolute;
  content: "";
  width: 5px;
  height: 4px;
  background: hsla(0,0%,100%,.7);
  border-radius: 50%;
  box-shadow: 0 0 15px 3px #fff;
  margin-top: -2px;
}

#why img
{
  margin-top: -30px !important;
  width: 70% !important;
}

main
{
  background-color: #181818;
  margin-top: -50px;
}

main h2
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%) text;
  -webkit-text-fill-color:transparent;
  font-size: 26px;
  font-weight: bold;
}

main h4
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%) text;
  -webkit-text-fill-color:transparent;
  font-size: 22px;
    line-height: 36px;
}

main  i
{
  font-size: 24px;
  margin-left: 4px;
}

.service-title
{
  background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%)!important;
  -webkit-text-fill-color:transparent!important;
  font-size: 18px!important;
  background-clip: text !important;
}

.service-text
{
  color: #B4BCD0FF!important;
  font-size: 16px!important;
  line-height: 32px!important;
}


main .why-box h6
{
   text-align: center;
   background: linear-gradient(45deg,#28C1F5 30%,#40E0D0 81%);
   color: white;
   font-size: 32px;
   border-radius: 8px;
   padding: 10px 25px;
   width: auto;
   display: inline-block;
}
main .why-box h3
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  font-size: 62px;
}

main .why-card ul
{
  list-style: none;
}

main .why-card ul li h4
{
  background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%);
  -webkit-text-fill-color:transparent;
  font-size: 18px;
  font-weight: bold;
  background-clip: text;
}

main .why-card ul li p
{
  color: #B4BCD0FF;
  font-size: 16px;
  line-height: 32px;
}


@keyframes meteor {
  0% {
    top: -100px;
    right: 0;
    opacity: 1;
  }

  75% {
    top: 250px;
    right: 25%;
    opacity: 0.5;
  }

  100% {
    top: 400px;
    right: 50%;
    opacity: 0;
  }
}

@keyframes meteor-master {
  0% {
    top: -100px;
    opacity: 1;
  }
  50% {
    top: 250px;
    opacity: 0.8;
  }
  70% {
    top: 400px;
    opacity: 0.5;
  }
  100% {
    top: 600px;
    opacity: 0;
  }
}
/*
@keyframes meteor-second {
  0% {
    top: -100px;
    right: 20%;
    opacity: 1;
  }

  75% {
    top: 250px;
    right: 25%;
    opacity: 0.5;
  }

  100% {
    top: 400px;
    right: 27%;
    opacity: 0;
  }
}
*/
@keyframes meteor-shoot {
  0% {
    top: -200px;
    opacity: 1;
  }
  100% {
    top: 40vh;
    opacity: 0;
  }
}

/*
@keyframes meteor-third {
  0% {
    top: -100px;
    left: 25%;
    opacity: 1;
  }
  70% {
    top: 250px;
    left: 27%;
    opacity: 0.8;
  }

  100% {
    top: 400px;
    left: 28%;
    opacity: 0;
  }
}
*/


@media (max-width: 1450px)
{
  #why img
  {
     margin-top: 0px !important;
     width: 100% !important;
  }
}

@media (max-width: 1300px)
{

  header
  {
    overflow-x: hidden !important;
  }
  #hero
  {
    padding-top: 32px !important;
    margin-top: 24px !important;
  }

  #logo h6
  {
    font-size: 16px !important;
  }

  #logo p
  {
    font-size: 14px !important;
  }

 #why img
  {
    display: none !important;
  }

  .why-card
  {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .fixed
  {
    width: 70% !important;
  }

  .href-fixed
  {
    left: 14% !important;
  }
}

@media (max-width: 1000px)
{
  header
  {
    overflow-x: hidden !important;
  }

  #logo
  {
    display: none;
  }

  #sidebarToggle
  {
    display: block !important;
  }

  #header .normal-navbar
  {
    display: none !important;
  }


  #sidebarToggle {
    display: block;
  }

  #sidebarToggle {
    position: absolute;
    top: 5px;
    right: 15px;
  }

  #sidebar.open {
    right: 0;
  }

  .fixed, .href-fixed
  {
    display: none !important;
  }
}

@media (max-width: 768px)
{
  header
  {
    overflow-x: hidden !important;
  }
  #logo
  {
    display: none;
  }
  #hero
  {
    padding-top: 0 !important;
  }
  #hero h1 {
    font-size: 34px !important;
  }
  #hero h4 {
    font-size: 28px !important;
  }
  #hero h6 {
    font-size: 16px !important;
  }
}


@media (max-width: 480px)
{
  header
  {
    overflow-x: hidden !important;
  }
 .item-useless
 {
   display: none;
 }
 #logo
 {
   display: none;
 }
 #hero
 {
   padding-top: 32px !important;
   margin-top: 24px !important;
 }
  #hero h1 {
    font-size: 32px !important;
  }
  #hero h4 {
    font-size: 26px !important;
  }
  #hero h6
  {
    padding-top: 24px !important;
    font-size: 16px !important;
  }

  #service
  {
      margin-top: -100px !important;
  }
}

@media (max-height: 750px)
{
    #hero h1
    {
        margin-top: -30px !important;
        padding-top: 0 !important;
    }

    #hero h6
    {
        margin-top: -10px !important;
    }

    #service-box h2
    {
        margin-top: -120px !important;
    }
}

@media (max-height: 660px)
{
    #hero h6
    {
        display: none !important;
    }

    #hero #href-start
    {
        margin-top: 20px !important;
    }
}


.sidebar {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: white;
  transition: 0.3s ease;
  z-index: 1000;
  box-shadow:  -10px 0 20px rgba(0,0,0,.15);
}

.sidebar-content
{
  padding: 20px;
}

.sidebar img
{
  width: 200px !important;
}

.sidebar h4
{
  background: linear-gradient(92deg,rgb(40, 193, 245) 30%,#40E0D0 81%);
  -webkit-text-fill-color:transparent;
  font-size: 22px;
  background-clip: text;
}

.sidebar .navbar-nav {
  display: block;
  width: 300px !important;
}

.sidebar .navbar ul {
  margin-right: -60px !important;
  width: 100% !important;
}

.sidebar .nav-item {
  display: block;
  width: 100%;
  text-align: right;
}

.sidebar.open {
  right: 0;
}

.sidebar .sidebar-shop
{
  background-color: rgba(37, 37, 37, 0.4);
  border:1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: black !important;
}

.sidebar .nav-link {
  color: white;
  font-size: 18px;
  padding: 15px 20px;
  display: block;
}

#sidebarToggle
{
  display: none;
  position: absolute;
  top: -75px;
  background: linear-gradient(92deg, rgba(135, 252, 196, 0.133) 0%, rgba(40, 193, 245, 0.133) 98.77%);
  border-radius: 8px;
}

#sidebarToggle span
{
  background: linear-gradient(92deg,rgb(40, 193, 245) 30%,#40E0D0 81%);
  -webkit-text-fill-color:transparent;
  font-size: 32px;
  background-clip: text;
}

.overlay
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.overlay.show
{
  display: block !important;
}

#contact
{
  overflow: hidden;
  position: relative;
}




#contact #contact-box h4
{
  background:  linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  font-size: 28px;
}

#contact #contact-box h6
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  line-height: 40px;
  font-size: 18px;
}


#contact #contact-box p
{
  color: #B4BCD0FF;
  font-size: 22px;
}

#contact #contact-box .contact-order
{
  text-decoration: none;
  background: linear-gradient(92deg,#40E0D0 30%,#9ffac7 81%);
  font-size: 18px;
  color: black !important;
  border-radius: 8px;
  padding: 0px 20px;
  font-weight: lighter !important;
}

#contact #contact-box .contact-tel
{
  text-decoration: none;
  border:1px dotted rgba(255, 255, 255, 0.1);
  font-size: 18px;
  color: white !important;
  border-radius: 8px;
  padding: 0px 20px;
  margin-right: 16px;
  font-weight: lighter !important;
}

#contact #contact-box a
{
  text-decoration: none;
  color: white !important;
}

#links .link-box
{
  border-radius: 16px;
  padding: 16px !important;
  border-radius: 16px;
  border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(59.09% 66.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%)
}

#links .link-box a
{
  text-decoration: none !important;
}

#links .link-box:hover
{
  border: 1px dashed rgba(40, 193, 245, 0.2);
}

#links .link-box .link-title
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  -webkit-text-fill-color:transparent;
  font-size: 20px;
  background-clip: text;
}

#links .link-box .link-text
{
  color: #B4BCD0FF;
  font-size: 14px;
  line-height: 32px;
}

/*
#innovation,#technology,#support
{
  background-image: url("../img/cube.svg");
  background-repeat: repeat;
}


#experience,#quality,#save
{
  background: #1c1c1c;
}
*/


footer h4
{
  background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%);
  -webkit-text-fill-color:transparent;
  background-clip: text;
  font-size: 18px;
}

footer h5
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  font-size: 16px;
}

footer h6
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  font-size: 15px;
}

footer p
{
  color: #B4BCD0FF;
  font-size: 14px;
  line-height: 32px;
}

footer ul li a
{
  color: #B4BCD0FF;
  font-size: 16px;
  line-height: 38px;
  text-decoration: none !important;
}

#copyright p
{
  background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
  background-clip: text;
  -webkit-text-fill-color:transparent;
  font-size: 16px;
}

.seprator
{
  width: 100%;
  height: 1px;
  margin-bottom: 20px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(135, 252, 196, 0.2) 0%, rgba(135, 252, 196, 0) 100%);
}

#main h2
{
    background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
    background-clip: text;
    -webkit-text-fill-color:transparent;
    font-size: 46px;
}

#main h4
{
    background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
    background-clip: text;
    -webkit-text-fill-color:transparent;
    font-size: 22px;
    line-height: 34px;
}

#main h3
{
    background: linear-gradient(177.69deg, rgb(255, 255, 255) 23.84%, rgba(255, 255, 255, 0) 145.09%);
    background-clip: text;
    -webkit-text-fill-color:transparent;
    font-size: 32px;
}

#main p {
    font-size: 16px;
    line-height: 32px;
    color: #B4BCD0FF;
}


.card-box
{
    border-radius: 16px;
    padding: 16px !important;
    border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(59.09% 66.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(6px);
    z-index: 999 !important;
}

.card-box:hover
{
    border: 1px dashed rgba(40, 193, 245, 0.2);
}

.card-box .card-title
{
    background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%);
    -webkit-text-fill-color:transparent;
    font-size: 28px !important;
    background-clip: text;
}

.card-box .card-text
{
    color: #B4BCD0FF!important;
    font-size: 14px !important;
    line-height: 32px !important;
}


.form-control
{
    border-radius: 12px;
    background-color: rgba(18, 18, 18, 0.6);
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
    color: white;
    backdrop-filter: blur(6px);
}

.form input[type=text]:focus
{
    background-color: rgba(40, 193, 245, 0.2);
    color: white;
}

.form textarea:focus
{
    background-color: rgba(40, 193, 245, 0.2);
    color: white;
}

.btn-success
{
    background: linear-gradient(92deg, rgba(135, 252, 196, 0.133) 0%, rgba(40, 193, 245, 0.133) 98.77%);
    padding: 10px 15px;
    border-radius: 12px;
    border: 0 !important;
}

.faq-title
{
    background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%)!important;
    -webkit-text-fill-color:transparent!important;
    font-size: 18px !important;
    background-clip: text!important;
}

.faq-text
{
    color: #B4BCD0FF!important;
    font-size: 16px!important;
    line-height: 32px!important;
}

#main h6
{
    background: linear-gradient(92deg,#28C1F5 30%,#40E0D0 81%)!important;
    -webkit-text-fill-color:transparent!important;
    font-size: 24px !important;
    background-clip: text!important;
}

#main #vertical-navbar .nav-link {
    background: linear-gradient(92deg, #28C1F5 30%, #40E0D0 81%) !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 18px !important;
    background-clip: text !important;
    line-height: 36px;
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
    z-index: 10 !important;
}

#main #vertical-navbar .nav-link.active,
#main #vertical-navbar .nav-link:focus,
#main #vertical-navbar .nav-link:hover {
    background: rgba(40, 193, 245, 0.2) !important;
    font-size: 18px !important;
    border-radius: 12px;
    background-clip: border-box !important;
    -webkit-text-fill-color: white !important;
    backdrop-filter: blur(6px);
}


#main #horizental-navbar .nav-link {
    background: linear-gradient(92deg, #28C1F5 30%, #40E0D0 81%) !important;
    -webkit-text-fill-color: transparent !important;
    font-size: 18px !important;
    background-clip: text !important;
    line-height: 36px;
    margin-bottom: 10px;
    margin-left: 10px;
    transition: all 0.3s ease-in-out;
    border: 0 !important;
    z-index: 10 !important;
}

#main #horizental-navbar .nav-link.active,
#main #horizental-navbar .nav-link:focus,
#main #horizental-navbar .nav-link:hover {
    background: rgba(40, 193, 245, 0.2) !important;
    font-size: 18px !important;
    border-radius: 12px;
    background-clip: border-box !important;
    -webkit-text-fill-color: white !important;
    backdrop-filter: blur(6px);
}

.login-box
{
    width: 300px!important;
    margin: 0 auto;
}

.login-box .login-card
{
    border-radius: 16px;
    padding: 16px !important;
    border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(70.09% 80.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(6px);
    z-index: 10 !important;
}

.login-box .login-card p
{
    line-height: 14px !important;
    display: inline;
    padding-right: 30px;
    color: #fff !important;
}

.login-box .login-card p i
{
    position: absolute;
    right: 10px;
    top: 0px;
    color: #40E0D0 !important;
}

.login-content {
    display: none;
}
.login-content.active {
    display: block;
}

.login-card  .form-control
{
    border-radius: 12px;
    background-color: rgba(18, 18, 18, 0.8);
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 16px;
    color: white;
    backdrop-filter: blur(6px);
}

.basket-card
{
    border-radius: 16px;
    padding: 16px !important;
    border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(70.09% 80.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(6px);
    z-index: 10 !important;
}

.product-box
{
    border-radius: 16px;
    padding: 16px !important;
    border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(70.09% 80.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(6px);
    z-index: 10 !important;
}

.btn-danger
{
     border-radius: 12px !important;
    padding: 10px 15px;
}

.custom-checkbox {
    width: 24px;
    height: 24px;
    background-color: black;
    border: 2px solid white;
    border-radius: 10px; !important;/* اعمال گوشه‌های گرد */
    display: inline-flex; /* برای ترازبندی بهتر */
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden; /* جلوگیری از بیرون‌زدگی */
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 6px;
    border: 3px solid white; /* ضخامت چک */
    border-width: 0 0 3px 3px;
    transform: rotate(-45deg);
    top: 50%;
    left: 50%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    translate: -50% -50%;
}

.custom-checkbox input:checked + .custom-checkbox::after {
    opacity: 1;
}

.table-card
{
    border-radius: 16px;
    padding: 16px !important;
    border: 1px dashed rgba(64, 224, 208, 0.2);
    background: radial-gradient(70.09% 80.79% at 50% 50%, rgba(135, 252, 196, 0.06) 0%, rgba(0, 0, 0, 0.02) 100%);
    backdrop-filter: blur(6px);
    z-index: 10 !important;
}