* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.home-m {
  cursor: none;
  width: 100%;
  height: 100%;
  background-color: #e0dad5;
  overflow: hidden;
}

/* svg {
  display: none;
} */
.page {
  width: 100%;
  height: 100%;
  background-color: #e0dad5;
  display: block;
}

.page-bg {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-bg p {
  font-family: "Asul", sans-serif;
  color: #dbd6d1;
  opacity: 0.68;
  font-size: 37vmin;
  margin: 0;
  text-align: center;
  line-height: 34vh;
}

.noise {
  /* background-image: url("https://foo-exp.s3.amazonaws.com/morph_mouse/noise_pattern.png"); */
  background-size: 200px 200px;
  background-repeat: repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: hard-light;
}

.container-m-h {
  width: 50%;
  height: 75vh;
  display: table;
  z-index: 100;
}

.child {
  display: table-row;
}

.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.HoverButton {
  position: relative;
  display: inline-block;
  z-index: 20;
  padding: 0 2%;
  overflow: hidden;
}


.HoverButton .bg {
  pointer-events: none;
  position: absolute;
  background-color: #234567;
  height: 100%;
  width: 125%;
  display: block;
  transform: translateX(-112%) skew(-10deg);
}



.images {
  position: absolute;
  left: 50%;
  top: 64vh;
  transform: translate(-50%, 0);
  z-index: 10;
  pointer-events: none;
}

.images .big {
  width: 36vmax;
}

.images .small {
  width: 27vmax;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.Cursor {
  pointer-events: none;
  position: fixed;
  display: block;
  border-radius: 0;
  transform-origin: center center;
  mix-blend-mode: difference;
  top: 0;
  left: 0;
  z-index: 1000;
  filter: url("#goo");
}

.Cursor span {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 20px;
  background-color: #fff;
  transform-origin: center center;
  transform: translate(-50%, -50%);
}

.stamp {
  max-height: 75vh;
  max-width: 50%;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  z-index: 10;
  /* right: 6vmax;
  top: 6vmax; */
  z-index: 10;
}

#smallImg {
  max-height: 72%;
}

.stamp p {
  color: #234567;
  font-size: 2vmax;
  font-family: "Asul", sans-serif;
  margin: 0;
}

.stamp .circle {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  left: 0%;
  top: 0%;
  background-color: transparent;
  -webkit-animation: rotating 55.5s linear infinite;
  animation: rotating 55.5s linear infinite;
}

.stamp .circle span {
  font-family: "Rubik", sans-serif;
  font-weight: bold;
  font-size: 0.8vmax;
  color: #002B36;
  height: 42%;
  position: absolute;
  display: inline-block;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
}

.char1 {
  transform: rotate(13deg);
}

.char2 {
  transform: rotate(26deg);
}

.char3 {
  transform: rotate(39deg);
}

.char4 {
  transform: rotate(52deg);
}

.char5 {
  transform: rotate(65deg);
}

.char6 {
  transform: rotate(78deg);
}

.char7 {
  transform: rotate(91deg);
}

.char8 {
  transform: rotate(104deg);
}

.char9 {
  transform: rotate(117deg);
}

.char10 {
  transform: rotate(130deg);
}

.char11 {
  transform: rotate(143deg);
}

.char12 {
  transform: rotate(156deg);
}

.char13 {
  transform: rotate(169deg);
}

.char14 {
  transform: rotate(182deg);
}

.char15 {
  transform: rotate(195deg);
}

.char16 {
  transform: rotate(208deg);
}

.char17 {
  transform: rotate(221deg);
}

.char18 {
  transform: rotate(234deg);
}

.char19 {
  transform: rotate(247deg);
}

.char20 {
  transform: rotate(260deg);
}

.char21 {
  transform: rotate(273deg);
}

.char22 {
  transform: rotate(286deg);
}

.char23 {
  transform: rotate(299deg);
}

.char24 {
  transform: rotate(312deg);
}

.char25 {
  transform: rotate(325deg);
}

.char26 {
  transform: rotate(338deg);
}

.char27 {
  transform: rotate(351deg);
}

.char28 {
  transform: rotate(364deg);
}

/* .line,
.line-vertical,
.line-horizontal,
.lines .line1,
.lines .line2,
.lines .line3,
.lines .line4,
.lines .line5 {
  position: absolute;
  background-color: #ede8e5;
} */
.line-vertical,
.lines .line3,
.lines .line4,
.lines .line5 {
  width: 2px;
  height: 100%;
  top: 0;
}

.line-horizontal,
.lines .line1,
.lines .line2 {
  width: 100%;
  height: 2px;
  left: 0;
}

.lines {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 2;
}

.lines .line1 {
  top: 36vh;
}

.lines .line2 {
  top: 64vh;
}

.lines .line3 {
  left: 22vw;
}

.lines .line4 {
  left: 78vw;
}

.lines .line5 {
  left: 50vw;
}

.design {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 5;
  color: #000;
  font-family: "Work Sans", sans-serif;
  font-size: 10px;
}

.design a {
  color: #000;
}

@-webkit-keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#button>h1 {
  line-height: 225px;
}

/* From Uiverse.io by alexmaracinaru */
.cta {
  position: relative;
  /* margin: auto; */
  padding: 12px 18px;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.cta:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-radius: 50px;
  background: #b1dae7;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}

.cta span {
  position: relative;
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0em;
  font-family: IRANSansX !important;

  color: #234567;
}

.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #234567;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}

.cta:hover:before {
  width: 100%;
  background: #b1dae7;
}

.cta:hover svg {
  transform: translateX(0);
}

.cta:active {
  transform: scale(0.95);
}

#button>h2 {
  color: #234567;
  position: relative;
  font-weight: normal;
  text-align: right;
  font-family: "Asul", sans-serif;
  z-index: 1;
  margin-right: 16px !important;
  margin: 0;
  font-size: 3vmax;
  mix-blend-mode: difference;
  line-height: 68px;
}

.bg-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.path {
  animation: draw 5s linear infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 96;
  }
}

.st::before {
  content: "";
  position: absolute;
  top: -4px;
  z-index: 1;
  right: -4px;
  display: block;
  border-radius: 50px;
  background: #b1dae7;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}

.st2::before {
  content: "";
  position: absolute;
  top: 7px;
  z-index: 1;
  right: 7px;
  display: block;
  border-radius: 50px;
  background: #b1dae7;
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}