@import "tailwindcss";

:root {
  --background: #ffffff;
  --foreground: #171717;
  --dblue: #1D3D76;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --dblue: #1D3D76;
  }
}

@keyframes fadeSwap {
  0% { opacity: 0; transform: translateY(10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}

.animate-fadeSwap {
  animation: fadeSwap 5s ease-in-out forwards;
}

html, body {
  font-family: theme('fontFamily.sans');
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}



body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Inter", sans-serif;
  @apply bg-white text-black;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;               /* width of scrollbar */
}

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

::-webkit-scrollbar-thumb {
  background-color: #1d3d76; /* scrollbar color */
  border-radius: 4px;        /* rounded edges */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #16325d; /* darker on hover */
}


/* scrollbar starts */
.swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {width: 50% !important;margin-left: auto;margin-right: 40px;left: auto;right: 40px;margin-top: 25px !important; background: #00000080 !important;
    height: 1px !important;}.swiper-scrollbar {background: #00000080 !important;}
.swiper-scrollbar-drag {width: 200px !important;background-color: #E1E1E1 !important;height: 7px !important; top: -3px!important;}
/* scrollbar ends */
/* c pagination starts */
.cpage .swiper-pagination {position: absolute;bottom: 0;}
.cpage .swiper-pagination-bullet {width: 25px !important;height:7px;border-radius: 5px;transition: .3s linear;}
.cpage .swiper-pagination-bullet-active {background-color: var(--dblue);}
/* c pagination ends */

@media screen and (max-width:1030px) {
  .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {margin-right: 50px;left: auto;right: 50px;}
  .swiper-scrollbar-drag {width: 100px !important;}

}
@media screen and (max-width: 780px) {
  .swiper-scrollbar-drag {width: 70px !important;}

}
@media screen and (max-width: 580px) {
  .swiper-scrollbar-drag {width: 40px !important;}

}