:root {
  --color1: #12d0f4;
  --color2: #dcf9fd;
  --color3: #2f2f2f;
  --color3: #e3342f;
}

@font-face {
  font-family: iransharp;
  src: url(../font/iransharp_bold.woff2);
  font-weight: 700;
}

@font-face {
  font-family: iransharp;
  src: url(../font/iransharp_regular.woff2);
  font-weight: 500;
}

*:focus-visible {
  outline: none;
}

html,
body {
  font-family: iransharp !important;
  font-weight: 700;
  scroll-behavior: smooth;
}

.container {
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  margin-right: auto;
  margin-left: auto;
}

.collapse.show {
  display: block;
}
.collapse {
  display: none;
  visibility: visible;
  min-height: 40px;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

.tab-content > .tab-pane {
  display: none;
}

.tab-content > .active {
  display: flex;
}

.products-page .tab-content > .active,
.example-page .tab-content > .active {
  display: block;
}

.fade {
  transition: opacity 0.15s linear;
}

.fade:not(.show) {
  opacity: 0;
}

.change .bar1 {
  transform: translate(0, 7.54px) rotate(-45deg);
  background-color: white !important;
}

.change .bar2 {
  opacity: 0;
  background-color: white !important;
}

.change .bar3 {
  transform: translate(0, -7.54px) rotate(45deg);
  background-color: white !important;
}

#homeCarousel .slick-dots {
  bottom: 80px;
  left: calc(((100% - 950px) / 2) + 108px);
  width: auto;
  z-index: 11;
}

#homeCarousel .slick-dots li button {
  border-radius: 100px;
  background-color: #d2d1cd;
  height: 3px;
  width: 50px;
  padding: 1.5px;
}
#homeCarousel .slick-dots li {
  width: 50px;
  height: 3px;
  display: block;
}

#homeCarousel .slick-dots {
  display: flex;
}

#homeCarousel .slick-dots li button::before {
  /* display: none; */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: white;
  transition: all ease 0.3s;
}
#homeCarousel .slick-dots .slick-active button::before {
  width: 100%;
}

/* animated */
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-300px);
    -ms-transform: translateY(-300px);
    transform: translateY(-300px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@keyframes fadeInup {
  0% {
    opacity: 0;
    -webkit-transform: translateY(120px);
    -ms-transform: translateY(120px);
    transform: translateY(120px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInup {
  -webkit-animation-name: fadeInup;
  animation-name: fadeInup;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.description h1,
.description h1 strong,
h1 {
  font-weight: 700;
  font-size: 20px !important;
}
.description h2,
.description h2 strong,
.description h2 strong span,
h2,
h2 a,
h2 > span,
h2 span span,
h2 b span,
h2 b span span {
  font-weight: 700;
  font-size: 22px !important;
}
.description h3,
.description h3 strong,
.description h3 strong span,
h3,
h3 a,
h3 > span,
h3 span span,
h3 b span,
h3 b span span {
  font-weight: 700;
  font-size: 20px !important;
}
.description h4,
.description h4 strong,
.description h4 strong span,
h4,
h4 a,
h4 > span,
h4 span span,
h4 b span,
h4 b span span {
  font-weight: 700;
  font-size: 18px !important;
}
.description h5,
.description h5 strong,
.description h5 strong span,
h5,
h5 a,
h5 > span,
h5 span span,
h5 b span,
h5 b span span {
  font-weight: 700;
  /*font-size: 18px !important;*/
}
.description h6,
.description h6 strong,
.description h6 strong span,
h6,
h6 a,
h6 > span,
h6 span span,
h6 b span,
h6 b span span {
  font-weight: 700;
}

p {
  word-spacing: -2px;
}

.text-danger {
  color: red;
}
.ltr {
  direction: ltr;
}

/* insta gradient */
@property --page-rotate {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.insta-gradient {
  --page-rotate: 0deg;
  border-radius: 50%;
  background: linear-gradient(
    var(--page-rotate),
    #f8224a,
    #fff87a,
    #d12437,
    #ce00c1
  );
  padding: 3px;
  transition: --page-rotate linear 0.5s;
  animation: gradient-page 2s linear infinite;
  position: relative;
  z-index: 0;
}
.insta-gradient a {
  background-color: #fff;
  border-radius: 50%;
  padding: 5px;
  display: block;
}

@keyframes gradient-page {
  0% {
    --page-rotate: 0deg;
  }
  100% {
    --page-rotate: 360deg;
  }
}

.tooltip {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translate(100%, -50%);
  background-color: var(--color1);
  color: #000;
  padding: 8px 4px;
  border-radius: 4px;
  text-align: center;
  animation: fade 15s infinite;
  opacity: 1;
  display: none;
}

.insta-gradient .tooltip {
  display: block;
}
.tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent var(--color1) transparent transparent;
}

@keyframes fade {
  0% {
    opacity: 1;
    transform: translate(100%, -50%);
  }
  45% {
    opacity: 1;
    transform: translate(100%, -50%);
  }
  50% {
    opacity: 0;
    transform: translate(150%, -50%);
  }
  95% {
    opacity: 0;
    transform: translate(150%, -50%);
  }
  100% {
    opacity: 1;
    transform: translate(100%, -50%);
  }
}