@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700&display=swap');

.font-satoshi {
  font-family: 'Satoshi', sans-serif;
}
.font-cormorant{
  font-family: "Cormorant Garamond", serif;
}
.font-poppins{
  font-family: "Poppins", sans-serif;
}
body{
  overflow-x: hidden !important;
}
html {
  scroll-behavior: smooth;
  transition: background-color 0.4s ease, color 0.4s ease;
}

html[data-theme='light'] body {
  background: linear-gradient(to right, #d3eeff, #fdedfe);
  color: black !important;
}

html[data-theme='dark'] body {
  background-color: #111827; 
  color: rgba(255, 255, 255, 0.607);
}
html[data-theme='dark'] .dark\:text-white {
  color: white !important;
}
html[data-theme='dark'] .dark\:text-black {
  color: black !important;
}

html[data-theme='dark'] .dark\:bg-gray-900 {
  background-color: #1f2937 !important;
}
html[data-theme='dark'] .dark\:bg-black {
  background-color: black !important;
}
html[data-theme='dark'] .dark\:bg-slate {
  background-color: #0b0b26;
}
html[data-theme='dark'] .dark\:bg-accordion {
  background-image: linear-gradient(to right, #121228, #0b0b26) !important;
}


html[data-theme='dark'] .dark\:img-white {  
  filter: brightness(0) invert(1);
}
html[data-theme='dark'] .dark\:img-gray {
  filter: grayscale(60%) brightness(1.0) contrast(1.1) hue-rotate(285deg) saturate(1.2);
  
}


html[data-theme='dark'] .dark-remove-bg {
  background-image: none !important;
}

html[data-theme='dark'] .dark\:text-gray {
  color: rgb(207,207,210);
}

html[data-theme='dark'] .dark\:gradient-bg {
  background: rgb(17, 24, 39) ;
  opacity: 0.8;
}
html[data-theme='light'] .text-black {
  color: black !important;
}
.bg-white {
	background-color: var(--color-white) !important;
}
.bg-\[\#f5e0ff\] {
	background-color: #f5e0ff !important;
}
.bg-[#f1f7ff] {
  background-color: #f1f7ff !important;
}

.text-\[\#17256a\] {
  color: #17256a !important;
}
.text-[#17256a] {
  color: #17256a !important;
}
.text-[#000]{
  color: #000 !important;
}
@keyframes scroll {
  0% {
  transform: translateX(0%);
}
100% {
  transform: translateX(-50%);
}
}

.animate-scroll {
animation: scroll 7s linear infinite; 
display: flex; 
}

.animate-scroll > div {
flex: 0 0 auto; 
min-width: 200px; 
}

/* Initially, the header will have a background of transparent */
header {
  transition: transform 0.3s ease-in-out, background-color 0.3s ease;
}

/* When the header scrolls and 200px more */
header.scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow when the header is scrolled */
}
.custom-gradient {
  background-size: 200% auto;
  background-position: left center;
}
.custom-gradient:hover {
  background-position: right center;
}


/* ________ Animation___ */