/* 1. First include Tailwind base */
@tailwind base;

/* 2. Add your base layer customizations like fonts */
@layer base {
  @font-face {
    font-family: "KalamehWeb-Regular";
    font-weight: 400;
    src: url(../fonts/kalameh/fonts/KalamehWeb-Regular.woff2) format("woff2");
  }
  @font-face {
    font-family: "KalamehWeb-Regular";
    font-weight: 700;
    src: url(../fonts/kalameh/fonts/KalamehWeb-Bold.woff2) format("woff2");
  }
}

:root {
  --bg-main: #1A1A1A;
}

/* 3. Include Tailwind components */
@tailwind components;

/* 4. Add your component layer customizations */
@layer components {
  .btn-hover {
    @apply tw-relative tw-overflow-hidden  before:tw-absolute before:tw-right-0 before:tw-top-0 before:tw-h-full before:tw-w-6 before:tw-translate-x-12
    before:tw-rotate-6 before:tw-bg-white before:tw-opacity-15 before:tw-duration-700 hover:before:-tw-translate-x-60;
  }

  .shadowHomeHeader {
    box-shadow: 10px 10px 200px 50px #53f9d9;
  }
  .shadowHomeSection4 {
    box-shadow: 10px 10px 200px 50px #b7ba31;
  }
}

/* 5. Finally include Tailwind utilities */
@tailwind utilities;

.glowing-circle {
  animation: glowing 3s ease-in-out infinite alternate;
}
/* @keyframes glowing {
  0% {
    box-shadow: 0 0 60px #ff02022e, 0 0 20px #ff0202, 0 0 30px #ff0202,
      0 0 40px #ff0202, 0 0 50px #ff0202, 0 0 60px #ff0202, 0 0 70px #ff0202;
  }
  100% {
    box-shadow: 0 0 40px #002d73, 0 0 50px #002d73, 0 0 60px #002d73,
      0 0 70px #002d73, 0 0 80px #002d73;
  }
} */

@keyframes glowing {
  0%,
  100% {
    box-shadow:
      0 0 320px 5px rgba(239, 68, 68, 0.7),
      0 0 40px 10px rgba(239, 68, 68, 0.5),
      0 0 60px 15px rgba(239, 68, 68, 0.3);
  }
  50% {
    box-shadow:
      0 0 320px 5px rgba(59, 130, 246, 0.7),
      0 0 40px 10px rgba(59, 130, 246, 0.5),
      0 0 60px 15px rgba(59, 130, 246, 0.3);
  }
}

.animate-radar {
  animation: rotate-radar 3s linear infinite;
}

@keyframes rotate-radar {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.bg-grd-green {
  background: var(
    --Backrdound-Primary,
    radial-gradient(
      50% 100% at 50% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.04) 100%
    )
  );
  /* background-color: #132a2a; */
}
/* .bg-grd-green {
  border: 1px solid #ffffff42;
  background:
    radial-gradient(
      50% 100% at 50% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.04) 100%
    );
  backdrop-filter: blur(11px);
} */

.bg-grd-black {
  background-color: #121212;
}

.dash-item {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 0.7rem;
}
.dash-item:hover {
  border: 1px solid #ffffff42;
  background:
    radial-gradient(
      50% 100% at 50% 0%,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.04) 100%
    );
  backdrop-filter: blur(11px);
}

label {
  cursor: pointer;
}