@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
}

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

body {
  @apply font-Poppins;
}

.container {
  @apply max-w-[1440px] mx-auto mt-12 px-3;
}

.menuItem {
  @apply text-base font-medium duration-300 p-3 rounded-sm border-2 border-primary group-hover:bg-[#185bb4] group-hover:border-2 group-hover:border-white hover:border-white;
}

.custom-border {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  color: #2c7af6;
}

/* custom-scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  height: 210px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #dfebfe;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #f60;
  border-radius: 8px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #2362c5;
}

/* Position scrollbar on the left */
.scrollbar-left {
  direction: rtl;
}

.scrollbar-left > * {
  direction: ltr;
}

.circular-chart {
  display: block;
  margin: 0 auto;
  width: 144px;
  height: 144px;
  filter: drop-shadow(1px 7px 8px #8095b0);
}
.circle-bg {
  fill: none;
  stroke: #d9e2ee;
  stroke-width: 4.2;
}
.circle {
  fill: none;
  stroke-width: 4.2;
  stroke-linecap: butt;
  animation: progress 1s ease-out forwards;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}

@keyframes slideBackground {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.animate-slide {
  animation: slideBackground 10s linear infinite;
}