/* define fonts start */

/* samim */
@font-face {
  font-family: "samim";
  src: url("../fonts/Samim/Samim.woff") format("woff"),
    url("../fonts/Samim/Samim.eot"),
    url("../fonts/Samim/Samim.ttf") format("truetype");
}

/* samim */
@font-face {
  font-family: "aviny";
  src: url("../fonts/aviny/aviny-700.woff") format("woff"),
    url("../fonts/aviny/aviny-700.eot"),
    url("../fonts/aviny/aviny-700.ttf") format("truetype");
}

/* iransans */
@font-face {
  font-family: "iransans";
  src: url("../fonts/IRANSansWeb\(FaNum\).e2b0436903df14b8a8c2.woff2")
    format("woff");
}

/* yekanbakh */
@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 03 Light.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 03 Light.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 03 Light.ttf?v=970802")
      format("truetype");
}

@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 04 Regular.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 04 Regular.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 04 Regular.ttf?v=970802")
      format("truetype");
}

@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 05 Medium.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 05 Medium.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 05 Medium.ttf?v=970802")
      format("truetype");
}

@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 06 Bold.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 06 Bold.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 06 Bold.ttf?v=970802")
      format("truetype");
}

@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 07 Heavy.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 07 Heavy.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 07 Heavy.ttf?v=970802")
      format("truetype");
}

@font-face {
  font-family: YekanBakh;
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 08 Fat.eot?v=970802");
  src: url("../fonts/Yekan Bakh/Yekan Bakh EN 08 Fat.woff?v=970802")
      format("woff"),
    url("../fonts/Yekan Bakh/Yekan Bakh EN 08 Fat.ttf?v=970802")
      format("truetype");
}

/* iranyekan */
@font-face {
  font-family: iranyekan;
  font-style: bold;
  font-weight: 700;
  src: url(../fonts/iranyekan/eot/iranyekanwebboldfanum.eot);
  src: url(../fonts/iranyekan/woff/iranyekanwebboldfanum.woff) format("woff"),
    url(../fonts/iranyekan/ttf/iranyekanwebboldfanum.ttf) format("truetype");
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/iranyekan/eot/iranyekanwebregularfanum.eot);
  src: url(../fonts/iranyekan/woff/iranyekanwebregularfanum.woff) format("woff"),
    url(../fonts/iranyekan/ttf/iranyekanwebregularfanum.ttf) format("truetype");
}

@font-face {
  font-family: iranyekan;
  font-style: light;
  font-weight: 300;
  src: url(../fonts/iranyekan/eot/iranyekanweblightfanum.eot);
  src: url(../fonts/iranyekan/woff/iranyekanweblightfanum.woff) format("woff"),
    url(../fonts/iranyekan/ttf/iranyekanweblightfanum.ttf) format("truetype");
}

@font-face{
  font-family: "nokia";
  src: url("../fonts/nokia/nokia.eot");
  src: url("../fonts/nokia/nokia.eot?#iefix")format("embedded-opentype"),
      url("../fonts/nokia/nokia.woff")format("woff"),
      url("../fonts/nokia/nokia.woff2")format("woff2"),
      url("../fonts/nokia/nokia.ttf")format("truetype"),
      url("../fonts/nokia/nokia.svg#NokianvirallinenkirjasinREGULAR")format("svg");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family: 'swiss 721';
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/swis721/Swiss721Bold.woff) format("woff"),
    url(../fonts/swis721/Swiss721Bold.ttf) format("truetype");
}

@font-face {
  font-family: 'swiss 721';
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/swis721/Swiss721Black.woff) format("woff"),
    url(../fonts/swis721/Swiss721Black.ttf) format("truetype");
}

/* define fonts end */

/* define dynamic varibales start */
:root {
  --body-font: Tahoma;
  --fa-body-font: var(--body-font-iranyekan);
  --body-font-swiss: "swiss 721";
  --body-font-iranyekan: iranyekan;
  --body-font-yekanbakh: YekanBakh;
  --body-font-samim: "samim";
  --body-font-nokia: "nokia";
  --body-font-iransans: "iransans";
  --body-font-aviny: "aviny";
  --background-color: #ffffff;
  --text-color: #ffffff;
  --text-hover-color: #7ec8fd;
  --border-color: #ebebeb;

  --color-text: #262523;
  --color-bg: #efece5;
  --color-link: #eca324;
  --color-link-hover: #262523;
  --color-title: #ffffff;
  --img-maxwidth: 250px;
  --blendmode-title: difference;
  --filter-img: none;
  /* color: var(--color-text);
  background-color: var(--color-bg); */

}
/* define dynamic varibales end */

.swiss {
  font-family: var(--body-font-swiss);
}

.nokia {
  font-family: var(--body-font-nokia);
}

.yekanbakh {
  font-family: var(--body-font-yekanbakh);
}

.aviny {
  font-family: var(--body-font-aviny);
}

.iranyekan {
  font-family: var(--body-font-iranyekan);
}

.iransans {
  font-family: var(--body-font-iransans);
}
/* css start */


body {
  font-family: var(--body-font) !important;
  color: var(--text-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body:lang(en) {
  direction: ltr;
}

body:lang(en),
body:lang(en) * {
  font-weight: light !important;
}

body:lang(fa) {
  direction: rtl;
  font-family: var(--fa-body-font) !important;
}

nav a {
  color: inherit !important;
  transition: all ease-out 0.3s !important;
}
nav a:hover {
  color: var(--text-hover-color) !important;
}

nav:lang(fa) a {
  color: inherit !important;
  transition: all ease-out 0.3s !important;
}
nav:lang(fa) a:hover {
  color: var(--text-hover-color) !important;
}

button,
button:focus {
  border: none;
  outline: none;
  box-shadow: none;
}


.section-title:lang(en) {
  font-weight: 100 !important;
}

/* width */


::-webkit-scrollbar {
  width: 6px;
  background-color: #151515;
}

/* Handle */

::-webkit-scrollbar-thumb {
  border-radius: 12px;
  background: #474747e3;
}

::-webkit-scrollbar-thumb:hover {
  background: #757575e3;
}

/* sidebar */
.side-bar {
  width: 60px;
  height: 100vh;
  color: #262523;
  position: fixed;
  z-index: 10;
  right: 0;
  top: 0;
}
.menu {
  display: block;
  width: 25px;
  margin: 40px auto 0;
  cursor: pointer;
}
.social-links img,
.useful-links img {
  width: 25px;
  margin: 5px auto;
  cursor: pointer;
}
.social-links{
  width: 50px;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.useful-links{
  width: 50px;
  text-align: center;
  position: absolute;
  bottom: 30px;
  transform: translateY(-50%);
}

/* sidebar */

.text-outline {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #fff;
  -webkit-text-stroke-width: 0.001em;
  transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 100;
}

.text-outline2 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #fff;
  -webkit-text-stroke-width: 0.015em;
  letter-spacing: 0.1rem;
  transition: all 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* .text-outline:first-child:hover {
  transform: translatey(-10px) rotate(-25deg);
} */

/* .text-outline:nth-child(2):hover {
  transform: scale(1.1) ;
} */

/* .text-outline:nth-child(3):hover {
  transform: translatey(-20px) rotate(180deg);
} */

/* .text-outline:last-child:hover {
  transform: translatey(25px) rotate(30deg);
} */

.text-outline-hover {
  position: relative;
}
.text-outline-hover::before {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  content: attr(data-text);
  transition: max-width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-text-fill-color: #fff;
}
.text-outline-hover:hover::before {
  max-width: 100%;
  -webkit-text-fill-color: #fff;
}

.heading {
  font-size: 6rem !important;
}

.mask-picture {
  mask-image: url(../../tools1.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  overflow: hidden;
  top:15vh;right:10%
}

#landing .subtitle {
  margin-top: 0px;
  letter-spacing: 14px;
}

#dropdownHover {
  width: 1000px;
  margin: 20px;
}

@media screen and (max-width: 768px) {
  .heading {
    font-size: 4.5rem !important;
  }

  .mask-picture {
    top: 50vh;
    right: 36%;
  }

  #landing .subtitle {
    margin-top: 0px;
    letter-spacing: 11px;
  }
  
}

@media screen and (max-width: 540px) {
  .heading {
    font-size: 2rem !important;
  }

  .mask-picture {
    top: 30vh;
    right: 20%;
  }

  #landing .subtitle {
    letter-spacing: 2px;
    margin-top: 0;
  }
}

span.text-outline {
  display: inline-block !important;
}

.mask-picture1 {
  mask-image: url(../../tools1.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  overflow: hidden;
}

.mask-picture2 {
  mask-image: url(../../tools2.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  overflow: hidden;
}

.mask-picture3 {
  mask-image: url(../../tools3.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: cover;
  mask-size: cover;
  overflow: hidden;
}

.pointer {
  cursor: pointer !important;
}

/* ===================================
    Cursor
====================================== */

#animated-cursor {
  position: absolute;
  left: 0;
  display: none;
  top: 0;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 10000;
  -webkit-transition: opacity 0.2s ease-in-out 0.5s;
  transition: opacity 0.2s ease-in-out 0.5s;
}

.cursor-light:hover ~ #animated-cursor {
  display: inline-block;
}

.footer.cursor-light:hover ~ #animated-cursor#cursor {
  border: 2px solid rgba(0, 0, 0, 1);
}

#cursor {
  position: fixed;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border: 2px solid rgba(255, 255, 255, 1);
  border-radius: 50%;
  pointer-events: none;
  opacity: 1;
  box-sizing: border-box;
}

#cursor:before {
  font-family: themify;
  content: "\e649";
  font-size: 6px;
  width: 4px;
  height: 8px;
  line-height: 8px;
  text-align: center;
  position: absolute;
  left: -12px;
  top: 9px;
  color: #ffffff;
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

#hold-event {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0);
}

#cursor-loader {
  width: 40px;
  height: 40px;
  position: absolute;
  background-color: transparent;
  border-right: 2px solid transparent;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid transparent;
  border-top: 2px solid transparent;
  border-radius: 50px;
  box-sizing: border-box;
  opacity: 0;
  transform: translate(-9px, -9px) rotate(0deg);
  -webkit-animation: rotating 0.8s ease-in-out infinite;
  animation: rotating 0.8s ease-in-out infinite;
  -webkit-transition: opacity 0s ease-in-out 0s;
  transition: opacity 0s ease-in-out 0s;
}

#cursor:after {
  font-family: themify;
  content: "\e649";
  font-size: 6px;
  width: 4px;
  height: 8px;
  line-height: 8px;
  text-align: center;
  position: absolute;
  right: -10px;
  top: 9px;
  color: #ffffff;
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

@keyframes rotating {
  0% {
    -webkit-transform: translate(-7px, -7px) rotate(0deg);
    transform: translate(-7px, -7px) rotate(0deg);
  }

  95% {
    -webkit-transform: translate(-7px, -7px) rotate(350deg);
    transform: translate(-7px, -7px) rotate(350deg);
  }

  100% {
    -webkit-transform: translate(-7px, -7px) rotate(360deg);
    transform: translate(-7px, -7px) rotate(360deg);
  }
}

.header-appear.cursor-light:hover ~ #animated-cursor {
  display: none;
}

.header-appear .animated-wrap,
.header-appear .animated-element {
  transform: none !important;
}

* {
  cursor: none !important
}

/* card with outside */

.gallery-list .item:hover #parent img {
  transform: rotate(10deg) scale(1.2);
}

#parent {
  position: relative;
  height:300px;
  min-width: 300px;
  max-width: 90%;
  transition: all ease-out 0.3s;
}

#parent img {

  object-fit: contain !important;
  width: 200px;
  height: 150px;
  position: absolute;
  bottom: 25%;
  left: 0;
  z-index: 10;
  transform: rotate(0deg);
  transition: all ease-out 0.3s;
}


#box {
  position: absolute;
  width: 100%;
  height: 150px;
  bottom: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: all ease-out 0.3s;
}

#parent:hover #box {
  background-color: #014D71;
}


.owl-theme .owl-dots .owl-dot span {
  background-color: #1F2937;
  transition: all ease-out 0.3s;
}

.owl-theme .owl-dots .owl-dot:hover span {
  background-color: #014D71;
  transition: all ease-out 0.3s;
}

.owl-theme .owl-dots .owl-dot.active span {
  background-color: #014D71;
  width: 40px;
  transition: all ease-out 0.3s;
}

.category-slider .owl-stage-outer .owl-stage .owl-item a:hover {
  transition: all ease-in-out 0.3s;
}

.category-slider .owl-stage-outer .owl-stage .owl-item a:hover span  {
  transition: all ease-out 0.3s;
}

.category-slider .owl-stage-outer .owl-stage .owl-item a:hover span {
  color: rgb(17, 24, 39);
  transition: all ease-out 0.3s;
}

/* services */

#services-box {
  position: relative;
  height: 450px;
  min-width: 300px;
  max-width: 450px;
  width: 95%;
  transition: all ease-out 0.3s;
}

#services-box img {
  height: auto;
  width: 95%;
  position: absolute;
  bottom: 35%;
  left: -5%;
  z-index: 10;
  transform: rotate(-3deg);
}

@media screen and (max-width: 768px) {
  #services-box img {
    left: -1%;
  }
}

#services-box #box {
  position: absolute;
  width: 100%;
  height: 400px;
  bottom: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
  z-index: 1;
  transition: all ease-out 0.3s;
}

#services-box:hover #box {
  background-color: #151515;
}

/* blog */
.blog-slider {
  width: 95%;
  position: relative;
  max-width: 800px;
  margin: auto;
  background-color: #014D71;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 25px;
  border-radius: 25px;
  height: 400px;
  transition: all 0.3s;
}
@media screen and (max-width: 992px) {
  .blog-slider {
    max-width: 680px;
    height: 400px;
  }
}
@media screen and (max-width: 768px) {
  .blog-slider {
    min-height: 500px;
    height: auto;
    margin: 180px auto 0;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider {
    height: 350px;
    max-width: 100%;
  }
}
.blog-slider__item {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .blog-slider__item {
    flex-direction: column;
  }
}
.blog-slider__item.swiper-slide-active .blog-slider__img img {
  opacity: 1;
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > * {
  opacity: 1;
  transform: none;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(1) {
  transition-delay: 0.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(2) {
  transition-delay: 0.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(3) {
  transition-delay: 0.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(5) {
  transition-delay: 0.7s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(6) {
  transition-delay: 0.8s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(7) {
  transition-delay: 0.9s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(8) {
  transition-delay: 1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(9) {
  transition-delay: 1.1s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(10) {
  transition-delay: 1.2s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(11) {
  transition-delay: 1.3s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(12) {
  transition-delay: 1.4s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(13) {
  transition-delay: 1.5s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(14) {
  transition-delay: 1.6s;
}
.blog-slider__item.swiper-slide-active .blog-slider__content > *:nth-child(15) {
  transition-delay: 1.7s;
}
.blog-slider__img {
  width: 300px;
  flex-shrink: 0;
  height: 300px;
  /* box-shadow: 4px 13px 30px 1px #003e6b26; */
  border-radius: 20px;
  transform: translateX(-80px);
  overflow: hidden;
}
.blog-slider__img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border-radius: 20px;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .blog-slider__img {
    transform: translateY(-50%);
    width: 90%;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__img {
    width: 280px;
  }
}
@media screen and (max-height: 500px) and (min-width: 992px) {
  .blog-slider__img {
    height: 270px;
  }
}
.blog-slider__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  border-radius: 20px;
  transition: all 0.3s;
}
.blog-slider__content {
  padding-right: 25px;
}
@media screen and (max-width: 768px) {
  .blog-slider__content {
    margin-top: -80px;
    text-align: center;
    padding: 0 30px;
  }
}
@media screen and (max-width: 576px) {
  .blog-slider__content {
    padding: 0;
  }
}
.blog-slider__content > * {
  opacity: 0;
  transform: translateY(25px);
  transition: all 0.4s;
}
.blog-slider__code {
  color: #ffffff;
  margin-bottom: 15px;
  display: block;
  font-weight: 500;
}
.blog-slider__title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}
.blog-slider__text {
  color: #ccc;
  margin-bottom: 30px;
  line-height: 1.5em;
}
.blog-slider__button {
  display: inline-flex;
  background-image: linear-gradient(147deg, #003e6b 0%, #1F2937 74%);
  padding: 15px 35px;
  border-radius: 50px;
  color: #fff;
  box-shadow: 0px 14px 80px #003e6b26;
  text-decoration: none;
  font-weight: 500;
  justify-content: center;
  text-align: center;
  letter-spacing: 1px;
}
@media screen and (max-width: 576px) {
  .blog-slider__button {
    width: 100%;
  }
}
.blog-slider .swiper-container-horizontal > .swiper-pagination-bullets, .blog-slider .swiper-pagination-custom, .blog-slider .swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%;
}
.blog-slider__pagination {
  position: absolute;
  z-index: 21;
  right: 20px;
  width: 11px !important;
  text-align: center;
  left: auto !important;
  top: 50%;
  bottom: auto !important;
  transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination {
    transform: translateX(-50%);
    left: 50% !important;
    top: 205px;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 8px 0;
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
  }
}
.blog-slider__pagination .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  display: block;
  border-radius: 10px;
  background: #002131;
  opacity: 0.4;
  transition: all 0.3s;
}
.blog-slider__pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background: #1F2937;
  height: 30px;
  box-shadow: 0px 0px 20px #003e6b26;
}
@media screen and (max-width: 768px) {
  .blog-slider__pagination .swiper-pagination-bullet-active {
    height: 11px;
    width: 30px;
  }
}


.progress2 {
  direction: ltr;
  position: absolute;
  top:0;
  z-index: 10;
  padding: 0px;
  border-radius: 0px;
  background: rgba(0, 0, 0, 0.25);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar2 {
  height: 2px;
  border-radius: 0px;
  background-image: 
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  transition: 0.4s linear;  
  transition-property: width, background-color;    
}

.progress-moved .progress-bar2 {
  width: 100vw; 
  background-color: #014D71;  
  animation: progressAnimation 3s infinite;
}

@keyframes progressAnimation {
  0%   { width: 0; background-color: #014D71;}
  90% { width: 100vw; background-color: #014D71; }
  100% { width: 0; background-color: #014D71; }
}

.cls-1 {
  fill: #aeaeae;
}

.cls-1, .cls-2 {
  stroke-width: 0px;
}

.cls-2 {
  fill: #fff;
}

.cls-3 {
  fill: #014D71;
  stroke: #014D71;
  stroke-width: 2.14px;
}

.cls-3, .cls-4 {
  stroke-miterlimit: 10;
}

.cls-4 {
  fill: none;
  stroke: #002d44;
  stroke-width: 3.72px;
}

#Layer_2 .cls-1 {
  fill: #aeaeae;
}

#Layer_2 .cls-1, #Layer_2 .cls-2 {
  stroke-width: 0px;
}

#Layer_2 .cls-3 {
  fill: none;
  stroke: #002d44;
  stroke-width: 3.98px;
}

#Layer_2 .cls-3, #Layer_2 .cls-4 {
  stroke-miterlimit: 10;
}

#Layer_2 .cls-2 {
  fill: #fff;
}

#Layer_2 .cls-4 {
  fill: #076aaa;
  stroke: #076aaa;
  stroke-width: 2.29px;
}

.category-slider a svg g.border-cls {
  transition: all ease-out 0.3s;
}

.category-slider a:hover svg g.border-cls {
  /* opacity: 0.2 !important; */
  transform: scale(1.2) translateY(-20%)
}

#header {
  transition: all ease-out 0.5s;
  z-index: 20 !important;
}

.z-10 {
  z-index: 10 !important;
}

.overflow-menu {
  transition: 0.5s all ease-out !important;
}

.overflow-menu .contact-us img ,
.social-links a img  {
  filter: invert(180) !important;
  
}

.overflow-menu .contact-us a {
  transition: 0.3s all ease-out;
}

.animated-show {
  width: 100vw !important;
  height: 100vh !important;
  top: 0;
  right: 0;
  animation: showAnimated 0.5s linear 1 alternate;
}

@keyframes showAnimated {
  0%   { 
    width: 0;
    height: 0;
    opacity: 0;
  }
  100% { 
    width: 100vw;
    height: 100vh;
    opacity: 1;
  }
}
.product-list a div,
.product-list a div * {
  transition: all ease-out 0.3s;
}

.product-list a div:hover .card {
  background-color: #1F2937 !important;
}

.product-list a div .card img  {
  transform: rotate(5deg);
}

.product-list a div:hover .card img {
  transform: rotate(5deg) scale(0.9) translateY(10px);
}

ul.feature-list li {
  list-style: none;
  display: flex;
  align-items: center;
}

ul.feature-list li::before {
  content: '';
  display: inline-flex;
  height: 20px;
  width: 19px;
  margin-left: 10px;
  background-image: url(../images/icon.svg);
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s all ease-out;
}

ul.feature-list li:hover:before {
  height: 30px;
  width: 26px;
}

.blog-hero .blog-card {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200%;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.blog-hero .blog-card a {
  background-color: rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.blog-hero .blog-card:hover {
  background-size: 300% !important;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.blog-hero .blog-card:hover a {
  background-color: rgba(0, 0, 0, 0.75);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  text-decoration: none;
}

#accordion-flush,
#accordion-flush * {
  transition: 0.5s all ease-in-out;
}

#chart-container ,
#chart-container svg text {
  font-family: var(--body-font-iranyekan) !important;
  font-size: 6px !important;
}

.fc__tooltip.fusioncharts-div {
  background-color: unset !important;
  border: unset !important;
}

.video-card ,
.video-card svg{
  transition: all ease-in-out 0.3s;
}

.video-card:hover svg {
  transform: scale(2) !important;
  transition: all ease-in-out 0.3s;
  fill: #fff;
}


.dx-theme-generic-typography {
  font-family: inherit;
}

#grid-accounting-list input,
#grid-accounting-list select {
  border: none !important;
}

#grid-accounting-list input:focus,
#grid-accounting-list select:focus {
  border: none !important;
  box-shadow: none !important;
}

.dx-widget {
  font-family: inherit;
  font-size: 13px;
}

.text-grey {
  color: var(--gray-light);
}

.font-small {
  font-size: 8px;
}

.dx-list-select-all {
  display: none;
}

.grid-accounting-list td {
  vertical-align: middle;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td,
.dx-datagrid-content .dx-datagrid-table .dx-row > tr > td {
  vertical-align: middle;
}

.dx-item.dx-list-item {
  border-top: none;
}

.bg-grey {
  background-color: var(--gray-lightest);
}

.font-large {
  font-size: 14px;
}

.dx-popup .dx-toolbar-before *,
.dx-popup .dx-popup-content {
  font-family: iranyekan;
}

.sidebar-icon-only .sidebar .nav .nav-item.active > .nav-link {
  background-color: transparent !important;
}

.dx-context-menu * {
  font-family: iranyekan;
  font-size: 10px;
}

.dx-context-menu i.mdi::before,
.dx-button-content i.mdi::before {
    line-height: unset !important;
}


.text-teal {
  color: #01877e !important;
}

.alert-teal {
    background-color: #cfe7e7;
}

.dx-menu {
    font-size: 12px;
}

.dx-texteditor-input,
.dx-texteditor-input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.dx-datagrid .dx-header-row * {
  font-size: 11px !important;
}

.dx-widget, 
.dx-widget input, 
.dx-widget textarea {
  font-family: iranyekan !important;
}

.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused) > tr > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > td,
.dx-datagrid-rowsview .dx-selection.dx-row:not(.dx-row-focused):hover > tr > td {
  background-color: #cfe7e7;
  color: #333;
}

.dx-rtl .dx-field-item:not(.dx-first-col) {
  padding-right: unset !important;
}

.dx-form-group-caption {
  
  font-size: 13px !important;
}

.dx-form-group-with-caption > .dx-form-group-content {
  border: none;
  padding-top: 0;
  padding-bottom: 0;
}

.dx-fileuploader-content {
  display: flex;
  align-items: center;
}

.dx-fileuploader-input-container {
  display: none;
}

.dx-fileuploader-show-file-list .dx-fileuploader-files-container {
  padding-top: 0;
  padding-right: 10px;
}

#menu {
  width: 100% !important;
  overflow-y: hidden !important;
  overflow-x: scroll !important; 
  white-space: nowrap !important;
}

.content-wrapper,
.main-panel {
  overflow-x: hidden;
}

.buttons .dx-button-content{
  margin-left: 5px !important;
}

.dx-tabs-wrapper {
  display: flex;
}

.dx-tabs {
  border: unset;
  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
}

.dx-tab {
  background-color: unset;
  min-width: 80px !important;
  
}

.dx-tab.dx-tab-selected  {
  color: rgb(0, 150, 136) !important;
  font-weight: bold;
  background-color: rgba(0, 150, 136, 0.08);
}

.dx-tab-selected::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  left: -1px;
  border-right: unset;
  border-left: unset;
  border-top: none;
  border-bottom: none;
  z-index: 1;
}

.dx-tab.dx-tab-selected .dx-tab-content::after {
  content: "";
  position: absolute;
  right: 0px;
  left: 0px;
  width: 50%;
  margin: 0 auto;
  height: 5px;
  background-color: rgb(0, 150, 136);
  bottom: 0px;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: unset;
  border-bottom-left-radius: unset;
}

.dx-tab.dx-state-hover {
  background-color: rgba(0, 150, 136, 0.08);
}

.dx-tab.dx-state-focused {
  background-color: rgba(0, 150, 136, 0.08);
}

.dx-tab.dx-state-focused::after {
  border: none !important;
}

.dx-tabs-nav-button {
  background-color: rgba(0, 150, 136, 0.08);
}

.dx-tabs-scrollable .dx-tabs-wrapper {
  border: unset;
  border-block-end: 1px solid rgb(225, 225, 225, 0.4);
  border-block-start: 1px solid rgb(225, 225, 225, 0.4);
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs {
  background-color: transparent;
  border: unset;
  border-block-end: 1px solid rgb(225, 225, 225, 0.9);
  -webkit-box-shadow: none !important; 
  box-shadow: none !important;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tab {
  -webkit-box-shadow: none !important; 
  box-shadow: none !important;
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tab:hover,
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab:focus {
  background-color: rgba(0, 150, 136, 0.08);
}

.dx-tabpanel .dx-multiview-wrapper {
  border: none;
}

.dx-invalid-message {
  font-family: Yekanbakh;
}

.dx-toast-message {
  font-family: Yekanbakh;
  font-weight: 300 !important;
  text-align: right;
  margin-left: auto;
}