@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: "vazir";
  src: url("/fonts/Vazir.woff") format("woff");
}

@font-face {
  font-family: "vazir-num";
  src: url("/fonts/Vazir-Light-FD.woff") format("woff");
}

body {
  font-family: "vazir";
  font-family: "vazir-num";
}
@layer utilities {
  .bg-parallax {
    background-image: linear-gradient(
        rgba(10, 10, 10, 0.75),
        rgba(10, 10, 10, 0.75)
      ),
      url("/images/paralax.webp");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .formDark {
    background-image: url("/images/bg-form-dark.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  }
  .paralax-aboutUs {
    background-image: url("/images/2.webp");
    background-position: center;
  }
  .paralax-aboutUs2 {
    background-image: url("/images/1.webp");
    background-position: center;
  }
  .formLight {
    background: linear-gradient(180deg, #ffffff 0%, #4da1a9 100%);
  }

  /* .bgLight-header {
    background: linear-gradient(180deg, #2c8191 -70%, #ffffff 90%);
  } */

  /* .bg-header {
    @apply bg-[linear-gradient(180deg,#2c8191_-70%,#ffffff_90%)] dark:bg-bCartDark;
  } */

  .bg-header {
    background: linear-gradient(180deg, #ffffff 0%, #2c8191 250%);
    /* background: linear-gradient(180deg, #2c8191 -150%, #ffffff 90%); */
  }

  .dark .bg-header {
    background: theme("colors.bCartDark"); /* یا مقدار رنگ دلخواه */
  }

  .containerPage {
    @apply px-4 md:px-10 lg:px-5 xl:px-28 py-5 md:py-8 lg:py-10;
  }

  .flexCenter {
    @apply flex items-center justify-center;
  }

  del {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #2c8191;
    border-radius: 7px;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .plyr__tooltip {
    background: #000;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    padding: 5px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .plyr__video-wrapper {
    @apply !rounded-xl bg-transparent;
  }

  button {
    @apply text-white;
  }
  .float {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes flashScale {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  .flash-text {
    animation: flashScale 1.5s infinite ease-in-out;
    display: inline-block;
  }
}