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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;

    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;

    --primary: 220.9 39.3% 11%;
    --primary-foreground: 210 20% 98%;

    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;

    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;

    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 224 71.4% 4.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;

    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;

    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;

    --primary: 210 20% 98%;
    --primary-foreground: 220.9 39.3% 11%;

    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;

    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;

    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;

    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 216 12.2% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(0, 0, 0);
  color: white;
}
.navbar {
  font-weight: 500;
  cursor: pointer;
}
.btn {
  background-color: #fecc09;
  color: black;
  padding: 6px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 8px;
  width: 169px;
  height: 46px;
}
.line {
  height: 2px;
  width: 140px;
  background-color: #5322c0;
}

/* card css */
.flip-card {
  background-color: transparent;
  /* width: 300px; */
  /* height: 250px; */
}

.flip-card-inner {
  position: flex;
  text-align: left;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-card-front {
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-width: 1px;
  border-color: gray;
  border-radius: 8px;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* scroll bar css */
/* Targeting the specific element with a custom scrollbar */

/* Custom scrollbar styling */
*::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}

*::-webkit-scrollbar-track {
  background: #ffffff; /* Track color */
}

*::-webkit-scrollbar-thumb {
  background: #3a3a3a; /* Scrollbar thumb color */
  border-radius: 25px; /* Round the corners */
}

*::-webkit-scrollbar-thumb:hover {
  background: #d49919; /* Thumb color on hover */
}

/* Optional: Customizing scrollbar for Firefox */
* {
  scrollbar-width: thin; /* 'auto' or 'thin' */
  scrollbar-color: #fecc09 #000000; /* thumb color, track color */
}

.select option {
  height: 200px; /* Adjust the height as needed */
}
strong {
  font-weight: 600;
}

.box:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #5422c073;
  transform: translate3d(0px, -15px, 0) scale(1);
  filter: blur(80px);
  opacity: var(0.2);
  transition: opacity 0.3s;
  border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.box::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}

/* heading text gradient */
.gradient-text {
  display: inline-block;
  background: linear-gradient(
    to right,
    #d97706,
    #94a3b8
  ); /* 'from-yellow-600' to 'to-slate-400' */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* custom heading */
.custom-text {
  font-weight: bold;
  font-size: 30px;
  text-transform: capitalize;
}

@media (min-width: 640px) {
  /* sm breakpoint in Tailwind is 640px */
  .custom-text {
    font-size: 40px;
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint in Tailwind is 1024px */
  .custom-text {
    font-size: 50px;
  }
}

.custome-background {
  background-image: radial-gradient(
      circle 5px at top left,
      rgba(33, 20, 182, 0.53) 0%,
      rgba(33, 20, 182, 0.53) 50%,
      rgba(7, 23, 232, 0.66) 50%,
      rgba(7, 23, 232, 0.66) 30%,
      transparent 30%,
      transparent 50%
    ),
    linear-gradient(216deg, rgb(0, 0, 0), rgb(0, 0, 0));
  background-size: 11px 11px;
}

.shadow{
  box-shadow: 53px 16px 68px 100px rgba(80, 21, 136, 0.226);
  width: 300px;
  border-radius: 100px;
}