/* ---------------------------------------------------------------- */
@font-face {
  font-family: iransans;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../font/iransans.eot);
  src: url(../font/iransans.eot?#iefix) format("embedded-opentype"), url(../font/iransans.woff2) format("woff2"), url(../font/iransans.woff) format("woff")
}

/* ---------------------------------------------------------------- */

* {
  font-family: "iransans", Arial, sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.bg-body {
  background: #f7ece0;
  background: linear-gradient(to bottom, 
  #ece4da 10%,   /* شروع */
  #e6b176 80%,  /* کرم تا 70% کشیده بشه */
  #f9891f 100%  /* نارنجی از 70 تا انتها */
);

}

.scrollm {
  scroll-margin-top: calc(var(120px) + 2rem);
}

.modem-3d {
  transform-style: preserve-3d;
  animation: float 6s ease-in-out infinite;
}

.modem-3d2 {
  transform-style: preserve-3d;
  animation: float 4s ease-in-out infinite;
}

.modem-3d3 {
  transform-style: preserve-3d;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0% {
    transform: translateY(0px) rotateY(0deg);
  }

  50% {
    transform: translateY(-15px) rotateY(10deg);
  }

  100% {
    transform: translateY(0px) rotateY(0deg);
  }
}

.takhfif {
  clip-path: polygon(78% 0, 100% 49%, 79% 100%, 0 100%, 0 0);
}

.card-hover:hover {
  scale: 98%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}


/* tailwind */
.max-w-1600 {
  max-width: 1600px;
}

.text-orange {
  color: #d83d11;
}

.hover\:text-orange:hover {
  color: white;
}

.text-navy {
  color: #011e47;
}

.hover\:text-navy:hover {
  color: #011e47;
}

.bg-orange {
  background-color: #d83d11;
}

.hover\:bg-orange:hover {
  background-color: #d83d11;
}

.bg-navy {
  background-color: #011e47;
}

.border-orange {
  border-color: #d83d11;
}

.border-navy {
  border-color: #011e47;
}

.iconone {
  top: 40%;
  left: 5%;
  z-index: -10;
  rotate: 20deg;
}
.icontwo {
  bottom: 20%;
  left: 2%;
  z-index: -10;
  rotate: -20deg;
}
.iconthree {
  right: 5%;
  bottom: 30%;
  z-index: -10;
  rotate: 10deg;
}
.iconfour {
  right: 2%;
  top: 40%;
  z-index: -10deg;
  rotate: -10deg;
}

.iconone1 {
  top: 2%;
  left: 25%;
  z-index: -10;
}
.icontwo2 {
  bottom: 0;
  left: 15%;
  z-index: -10;
  rotate: -20deg;
}
.iconthree3 {
  right: 15%;
  bottom: 0;
  z-index: -10;
  rotate: 10deg;
}
.iconfour5 {
  right: 30%;
  top: 0%;
  z-index: -10deg;
  rotate: -10deg;
}
.scale {
  scale: 106%;
}
.textxss {
  font-size: 10px;
}
.maxw {
  max-width: 340px;
}

.lineorange {
  width: 15%;
  height: 3px;
  border-radius: 100%;
}
.lineorange2 {
  height: 2px;
}

.desat {
  position: absolute;
  inset: 0;
  z-index: 1000000;
  pointer-events: none;
  backdrop-filter: grayscale(1) saturate(0);
  -webkit-backdrop-filter: grayscale(1) saturate(0);
}


.canvas-wrapper {
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: 100%;
}
.canvas-wrapper #fluid {
  width: 100%;
  height: 100%;
  position: absolute;
}

@media (max-width: 768px) {
  .scale {
    scale: 100%;
  }
  .lineorange {
    width: 35%;
    height: 3px;
    border-radius: 100%;
  }

  .iconone {
    top: 98%;
    left: 5%;
  }
  .icontwo {
    bottom: -2%;
    left: 30%;
  }
  .iconthree {
    right: 5%;
    bottom: -2%;
  }
  .iconfour {
    right: 30%;
    top: 98%;
  }
}

@media (max-width: 1024px) {
  .scale {
    scale: 100%;
  }
  .iconone1 {
    top: 5%;
    left: 10%;
    z-index: -10;
  }
  .icontwo2 {
    bottom: -25%;
    left: 5%;
    z-index: -10;
    rotate: -20deg;
  }
  .iconthree3 {
    right: 2%;
    bottom: -25%;
    z-index: -10;
    rotate: 10deg;
  }
  .iconfour5 {
    right: 10%;
    top: 5%;
    z-index: -10deg;
    rotate: -10deg;
  }
}