@font-face {
  font-family: "myIranYekan";
  font-weight: normal;
  src: url("../../fonts/iranyekan/ttf/iranyekanwebregular.ttf")
      format("truetype"),
    url("../../fonts/iranyekan/woff/iranyekanwebregular.woff") format("woff");
}

@font-face {
  font-family: "myIranYekan";
  font-weight: bold;
  src: url("../../fonts/iranyekan/ttf/iranyekanwebbold.ttf") format("truetype"),
    url("../../fonts/iranyekan/woff/iranyekanwebbold.woff") format("woff");
}

@font-face {
  font-family: "myPinar";
  font-weight: normal;
  src: url("../../fonts/pinar/Pinar-Regular.ttf") format("truetype"),
    url("../../fonts/pinar/Pinar-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "myPinar";
  font-weight: bold;
  src: url("../../fonts/pinar/Pinar-Bold.ttf") format("truetype"),
    url("../../fonts/pinar/Pinar-Bold.woff2") format("woff2");
}

@keyframes animation-button {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes animation-text {
  0% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }

  25% {
    transform: translate3d(4px, 0, 0) translateZ(0);
  }

  50% {
    transform: translate3d(-3px, 0, 0) translateZ(0);
  }

  75% {
    transform: translate3d(2px, 0, 0) translateZ(0);
  }

  100% {
    transform: translate3d(0, 0, 0) translateZ(0);
  }
}

body,
html {
  font-family: "myIranYekan", sans-serif;
  direction: rtl;
  scroll-behavior: smooth;
}
@media (width >= 64rem ) {
    .contain {
    max-width: 90%;
    margin: 0 auto;
  }
}

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-theme-Slogan);
  border-radius: 10px;
}
.top-navigation a:link,
.top-navigation a:visited {
  font-weight: bold;
  color: #000;
  font-size: 17px;
  transition: all 0.5s;
  position: relative;
}

.top-navigation li a::after {
    content: "";
    display: block;
    width: 0px;
    height: 3px;
    background-color:var(--color-theme-primary);
    position: absolute;
    bottom: -3px;
}
.top-navigation li a:hover::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-theme-primary);
    position: absolute;
    bottom: -3px;
}
.top-navigation li a::after {
  transition: all 0.3s;
}
.button:hover {
  animation: animation-button 0.7s ease-in-out both;
}

.button:hover span,
.button:hover i {
  animation: animation-text 0.7s ease-in-out both;
  animation-delay: 0.06s;
}


.btn-shine:after {
  background: #000;
  content: "";
  height: 155px;
  left: -75px;
  opacity: 0.4;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btn-shine:hover:after {
  left: 120%;
  transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}
.overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
}
.h-modal{
  z-index: 100;
}
.search-box {
  visibility: hidden;
  transform: translateY(-280%);
  transition: all 0.5s ease;

}
.search-box.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: all 0.5s ease;

}
.menu-list {
  transform: translateX(100%); 
  max-width: 20rem;
  width: 100%;
  transition: transform 0.5s ease ,opacity 0.5s ease ;
}
.menu-list.show {
  transform: translateX(0);
}
.bg-footer {
  background-image: url(../../image/index/map-dotted.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.bg-footer{
  background-color: rgb(34, 34, 34);
}
.bg-contact-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, rgb(221, 58, 58) 0%, rgb(225, 40, 40) 58%, rgb(184, 12, 12) 100%);
  z-index: 1;
}

.bg-contact-footer > * {
  position: relative;
  z-index: 2;   
}

.bg-contact-footer:hover{
  border: 0;
}

.bg-contact-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(69, 69, 69, 1) 0%, rgba(41, 41, 41, 1) 52%, rgba(20, 20, 20, 1) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;   
}

.bg-contact-footer:hover::after {
  opacity: 1;
}

.bg-name-business{
  background-color: rgb(22, 22, 22);
}
.button-up{
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.animation-button-up{
  transform: translateY(-35px);
  opacity: 1;
}