web/style/globals.css

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

@layer components {
  .btn {
    @apply py-2 px-4 rounded transition-all;
  }

  .btn-primary {
    @apply bg-primary-500 text-white;
  }
  .btn-primary:hover {
    @apply bg-primary-600;
  }

  .btn-outline-primary {
    @apply border border-primary-500 text-primary-500 p-2;
  }
  .btn-outline-primary:hover {
    @apply bg-primary-600 text-white;
  }

  .btn-secondary {
    @apply bg-secondary-600 text-white;
  }

  .btn-light {
    @apply bg-gray-100 text-black;
  }
  .btn-light:hover {
    @apply bg-gray-300 text-black;
  }

  .btn-outline-light {
    @apply border border-gray-100 text-white;
  }
  .btn-outline-light:hover {
    @apply bg-gray-100 text-black;
  }

  .btn-secondary:hover {
    @apply bg-secondary-800;
  }

  .btn-info {
    @apply bg-info-100 text-white;
  }
  .btn-info:hover {
    @apply bg-info-200;
  }

  .form-control {
    @apply !appearance-none !border-[2px] bg-navbar !border-gray-300 !rounded-2xl !w-full !py-4 !px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-gray-300 focus:!outline-none;
  }

  .form-control-white {
    @apply !appearance-none !border-[2px] !bg-white !border-gray-300 !rounded-2xl !w-full !py-4 px-3 !text-gray-700 !leading-tight focus:!border-[2px] focus:!border-red-600 focus:!outline-none;
  }
}

body {
  font-family: KalamehWeb !important;
  background: #eeeeee;
  --toastify-font-family: KalamehWeb !important;
  --Chart-defaults-font-family: KalamehWeb !important;
}

.rtl {
  direction: rtl;
}

.ltr {
  direction: ltr;
}

.tr2 {
  transition: 2s;
}

.tr03 {
  transition: 0.3s all;
}

.fuck-cick {
  pointer-events: none;
}

.bg-contact-us {
  background: hsla(201, 100%, 43%, 1);

  background: radial-gradient(
    circle,
    hwb(201 0% 14%) 36%,
    hsla(207, 100%, 33%, 1) 100%
  );

  background: -moz-radial-gradient(
    circle,
    hsla(201, 100%, 43%, 1) 36%,
    hsla(207, 100%, 33%, 1) 100%
  );

  background: -webkit-radial-gradient(
    circle,
    hsla(201, 100%, 43%, 1) 36%,
    hsla(207, 100%, 33%, 1) 100%
  );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#0090DD", endColorstr="#005CA7", GradientType=1 );

  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#00A6FF", endColorstr="#0062B3", GradientType=1 );
  background-position: center;
  background-size: cover;
}

.bg-navbar {
  background: rgba(240, 240, 240, 0.4);
}

.bg-navbar2 {
  background: rgba(240, 240, 240, 0.2);
}

.bg-glass {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.4px);
  -webkit-backdrop-filter: blur(4.4px);
}

#swich-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#swich-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.bg-login {
  height: 100vh;

  --s: 200px; /* control the size */
  --c: #2189a836; /* first color */

  --_g: #b3222200 8%, var(--c) 0 17%, #b3222200 0 58%;
  background: linear-gradient(
        135deg,
        #b3222200 20.5%,
        var(--c) 0 29.5%,
        #b3222200 0
      )
      0 calc(var(--s) / 4),
    linear-gradient(45deg, var(--_g)) calc(var(--s) / 2) 0,
    linear-gradient(135deg, var(--_g), var(--c) 0 67%, #d6afaf00 0),
    linear-gradient(
      45deg,
      var(--_g),
      var(--c) 0 67%,
      #b3222200 0 83%,
      var(--c) 0 92%,
      #b3222200 0
    ),
    #1095c1; /* second color */
  background-size: var(--s) var(--s);
}

.fade {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  opacity: 1;
}
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 0;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  }
}

.background {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: #4e54c8;
  overflow: hidden;
}
.background li {
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  animation: animate 53s linear infinite;
}

.background li:nth-child(0) {
  left: 39%;
  width: 83px;
  height: 83px;
  bottom: -83px;
  animation-delay: 1s;
}
.background li:nth-child(1) {
  left: 15%;
  width: 87px;
  height: 87px;
  bottom: -87px;
  animation-delay: 1s;
}
.background li:nth-child(2) {
  left: 85%;
  width: 177px;
  height: 177px;
  bottom: -177px;
  animation-delay: 5s;
}
.background li:nth-child(3) {
  left: 5%;
  width: 89px;
  height: 89px;
  bottom: -89px;
  animation-delay: 1s;
}