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

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

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

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.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 {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* slider */
.image-container {
  position: relative;
  width: 95%;            /* به جای 100 درصد */
  max-width: 1550px;     /* سقف اندازه */
  aspect-ratio: 16 / 5;  /* نسبت تصویر در دسکتاپ */
  margin: 20px auto;     /* فاصله از اطراف و بالا پایین */
  border: 2px solid white;
  border-radius: 45px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  overflow: hidden;
}


/* عکس */
.image {
  background-image: url("https://www.shatel.ir/wp-content/themes/shatel/namava-festival/img/1.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  inset: 0;
  border-radius: 30px;
  user-select: none;
}


.image-cut {
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
  filter: grayscale(100%);
}

.line {
  background: linear-gradient(
    90deg,
    black 0px,
    black 1px,
    #f26322 1px,
    #f26322 5px,
    black 5px
  );
  width: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 3px);
  z-index: 5;
}

.handle {
  position: absolute;
  top: 0;
  left: calc(50% - 60px);
  width: 90px;
  height: 60px;
  pointer-events: all;
  cursor: grab;
  z-index: 10;
}

.handle,
.line {
  transform: translateX(-50%);
  position: absolute;
}

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

.text-orange {
  color: #f26322;
}

.hover\:text-orange:hover {
  color: #f97316;
}

.text-navy {
  color: #374151;
}

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

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

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

.bg-navy {
  background-color: #374151;
}

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

.border-navy {
  border-color: #374151;
}

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

.scale {
  scale: 106%;
}

.heightphoto {
  height: 450px;
}
.heightphoto2{
  height: 350px;
}
.lineorange{
  width: 15%;
  height: 3px;
  border-radius: 100%;
}

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

  .iconone {
    top: 5%;
    left: 2%;
  }
  .icontwo {
    bottom: 0%;
    left: 2%;
  }
  .iconthree {
    right: 2%;
    bottom: 0%;
  }
  .iconfour {
    right: 2%;
    top: 5%;
  }
  .image {
    background-image: url("https://www.shatel.ir/wp-content/themes/shatel/namava-festival/img/480-320.jpg");
  }
  .image-container {
    aspect-ratio: 3 / 2; /* نزدیک به نسبت 480x320 */
  }
  
}

@media (max-width: 1000px) {
  .scale {
    scale: 100%;
  }
 
  .heightphoto {
    height: 350px;
    margin-top: 20px;
  }
  .heightphoto2{
    height: 350px;
  }
}