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

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

@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Thin.ttf") format("truetype"),
    url("/fonts/ProdigySans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-ExtraLight.ttf") format("truetype"),
    url("/fonts/ProdigySans-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Light.ttf") format("truetype")
    url("/fonts/ProdigySans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Regular.ttf") format("truetype"),
    url("/fonts/ProdigySans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Medium.ttf") format("truetype"),
    url("/fonts/ProdigySans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-SemiBold.ttf") format("truetype")
    url("/fonts/ProdigySans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Bold.ttf") format("truetype"),
    url("/fonts/ProdigySans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-ExtraBold.ttf") format("truetype"),
    url("/fonts/ProdigySans-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: "ProdigySans";
  src: url("/fonts/ProdigySans-Black.ttf") format("truetype")
    url("/fonts/ProdigySans-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "ProdigySans", Poppins;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar for modern browsers */
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

html {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.bouncing-element {
  animation: bounce 2s infinite;
}

:root:has(.no-doc-scroll) {
  overflow: hidden;
}

/* Hide scrollbar for card tailwind for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.opacityBlur {
  background-color: #5b5b5b;
  filter: blur(4px);
}

/* loading screen animation */
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

.max-container-1118 {
  @apply mx-auto max-w-[1118px];
}
.max-container-1248 {
  @apply mx-auto max-w-[1248px];
}

.max-container1440 {
  @apply mx-auto max-w-[1440px];
}

.max-container1720 {
  @apply mx-auto max-w-[1720px];
}

.padding-container {
  @apply px-4 sm:px-10 lg:px-24;
}

.flexCenter {
  @apply flex items-center justify-center;
}

.flexBetween {
  @apply flex items-center justify-between;
}

.flexBetweenItemsStretch {
  @apply flex items-stretch justify-between;
}

.flexCenterItemsStretch {
  @apply flex items-center justify-center;
}

.flexStart {
  @apply flex items-center justify-start;
}

.flexEnd {
  @apply flex items-center justify-end;
}

.flexEndItemsEnd {
  @apply flex items-end justify-end;
}

/* prodigySans Font */
.prodigySans100 {
  font-family: "ProdigySans";
  font-weight: 100;
}
.prodigySans200 {
  font-family: "ProdigySans";
  font-weight: 200;
}
.prodigySans300 {
  font-family: "ProdigySans";
  font-weight: 300;
}
.prodigySans400 {
  font-family: "ProdigySans";
  font-weight: 400;
}
.prodigySans500 {
  font-family: "ProdigySans";
  font-weight: 500;
}
.prodigySans600 {
  font-family: "ProdigySans";
  font-weight: 600;
}
.prodigySans700 {
  font-family: "ProdigySans";
  font-weight: 700;
}
.prodigySans800 {
  font-family: "ProdigySans";
  font-weight: 800;
}
.prodigySans900 {
  font-family: "ProdigySans";
  font-weight: 900;
}

.text-64 {
  @apply text-[64px] leading-10;
}

.text-56 {
  @apply text-[56px];
}

.text-48 {
  @apply text-[48px];
}

.text-42 {
  @apply text-[42px];
}

.text-40 {
  @apply text-[40px];
}

.text-36 {
  @apply text-[36px];
}

.text-32 {
  @apply text-[32px];
}

.text-30 {
  @apply text-[30px];
}

.text-28 {
  @apply text-[28px];
}

.text-26 {
  @apply text-[26px];
}

.text-24 {
  @apply text-[24px];
}

.text-22 {
  @apply text-[22px];
}

.text-20 {
  @apply text-[20px];
}

.text-18 {
  @apply text-[18px];
}

.text-16 {
  @apply text-[16px];
}

.text-14 {
  @apply text-[14px];
}

.text-12 {
  @apply text-[12px];
}

.text-10 {
  @apply text-[10px];
}




/* Add to your global CSS */
.prose {
  color: #1c1c1c;
  max-width: 100%;
}

.prose h2,
.prose h3,
.prose h4 {
  color: #1c1c1c;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.prose h2 {
  font-size: 1.75rem;
  line-height: 2.25rem;
}

.prose h3 {
  font-size: 1.5rem;
  line-height: 2rem;
}

.prose p {
  margin-bottom: 1.5rem;
  line-height: 1.8;
}

.prose a {
  color: #55a654;
  text-decoration: underline;
}

.prose ul,
.prose ol {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose img {
  margin: 2rem auto;
  border-radius: 0.5rem;
}

.prose blockquote {
  border-left: 4px solid #55a654;
  padding-left: 1.5rem;
  font-style: italic;
  color: #555;
  margin: 2rem 0;
}

.prose code {
  background-color: #f3f4f6;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: monospace;
}

.prose pre {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 2rem 0;
}