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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
}

.darkMode body {
  background-color: #121212;
  color: #FFFFFF;
}
main {
  /* padding: 20px; */
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}




@font-face {
  font-family: 'IRANYekan';
  src: url('/fonts/Qs_Iranyekan black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'IRANYekan';
  src: url('/fonts/Qs_Iranyekan bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'IRANYekan';
  src: url('/fonts/Qs_Iranyekan extrabold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'IRANYekan';
  src: url('/fonts/Qs_Iranyekan light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'IRANYekan';
  src: url('/fonts/Qs_Iranyekan medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
}


.dark {
  background-color: #111111 !important;
  color: #fff;
}

.light {
  background-color: #FFF;
  color: #1B2430;
}
.home-div>section {
  margin: 1rem 1.5rem;
}

.home-div>section.explore-sec {
  margin: 0px !important;
}

.swiper-pagination {
  bottom: 20px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  /* background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 100px; */
  position: relative;
  padding: 8px 16px;
}

.neon-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.neon-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  z-index: -1;
  background: linear-gradient(45deg, #00f0ff, #ff00f0, #00ff88);
  filter: blur(8px);
  border-radius: inherit;
  animation: pulseGlow 3s ease-in-out infinite;
}

.dock-container {
  align-content: flex-end;
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0px;
  height: 70px;
  justify-content: center;
  overflow: visible;
  padding: 0px;
  position: relative;
  width: min-content;
}

.icon-container {
  aspect-ratio: 1 / 1;
  cursor: pointer;
  flex: none;
  height: 70px;
  position: relative;
  width: 70px;
  z-index: 6;
}

.dock-background {
  bottom: -4px;
  flex: none;
  left: -4px;
  overflow: hidden;
  position: absolute;
  right: -10px;
  top: -4px;
  will-change: transform;
  z-index: 1;
}

.profile-section {
  align-content: center;
  align-items: center;
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
  height: 100%;
  justify-content: center;
  overflow: visible;
  padding: 0px 1px 0px 0px;
  position: relative;
  z-index: 4;
}

/* Size variations for active states */
.dock-container:hover .icon-container {
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Support for aspect-ratio */
@supports (aspect-ratio: 1) {
  .icon-container {
    height: auto;
  }
}

/* Border utility */
[data-border="true"]::after {
  content: "";
  border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0);
  border-color: var(--border-color, none);
  border-style: var(--border-style, none);
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  left: 0;
  top: 0;
  border-radius: inherit;
  pointer-events: none;
}
@supports (aspect-ratio: 1) {
  body {
    --framer-aspect-ratio-supported: auto;
  }
}


@keyframes pulseGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.swiper-pagination::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  /* background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 100px; */
  z-index: -1;
  left: 0;
  top: 0;
}

.swiper-pagination-bullet {
  background: #219A8E !important;
  opacity: 0.5 !important;
  width: 10px !important;
  height: 10px !important;
  transition: all 0.3s !important;
  margin: 0 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
  transform: scale(1.2);
}
.custom-prev:hover, .custom-next:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Navigation arrows */
.swiper-button-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Rounded container */
.swiper {
  border-radius: 14px;
}

@media (min-width: 768px) {
  .swiper {
    border-radius: 45px;
  }
}
/* Add this to your global CSS file or Tailwind configuration */
@keyframes spin-slow {
     from { transform: rotate(0deg); }
     to { transform: rotate(360deg); }
   }
   .animate-spin-slow {
     animation: spin-slow 3s linear infinite;
   } 


.marketplace-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: linear-gradient(243.58deg, rgba(61, 150, 255, 0.1) 0%, rgba(61, 150, 255, 0) 66.77%);
}

@keyframes sparkle {
  to {
    width: calc(var(--width) * 0.5px);
    transform: translate(2000%, -50%);
  }
}

@keyframes sparkleChecked {
  to {
    width: calc(var(--width) * 1px);
    transform: translate(5000%, -50%);
  }
}

.toggle-cont:has(.toggle-input:checked) {
  --checked: true;
}

.toggle-cont .toggle-label {
  background-color: #41434400;
  border: 1px solid #3d6970;
  border-bottom: 0;
}

.toggle-cont .toggle-label::before {
  box-shadow: 0 1rem 2.5rem -2rem #0080ff;
}

.toggle-cont .toggle-label .cont-icon {
  overflow: visible;
  background-image: radial-gradient(circle at 50% 0%, #045ab1 0%, var(--primary) 100%);
  border: 1px solid var(--primary);
  border-bottom: 0;
  transform: translateX(calc((var(--gap) * 2) + 100%)) rotate(-225deg);
}

.toggle-cont .toggle-label .cont-icon .sparkle {
  z-index: -10;
  width: calc(var(--width) * 1.5px);
  background-color: #acacac;
  animation: sparkleChecked calc(100s / var(--duration)) linear calc(10s / var(--duration)) infinite;
}




@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}









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