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

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



* {
  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;
}

.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-1248 {
  @apply mx-auto max-w-[1248px];
}

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

.max-container-1720 {
  @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-light */

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

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

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

/* text-regular */
.regular-64 {
  @apply text-[64px] font-[400] leading-[120%];
}

.regular-56 {
  @apply text-[56px] font-[400] leading-[120%];
}

.regular-48 {
  @apply text-[48px] font-[400] leading-[120%];
}

.regular-42 {
  @apply text-[42px] font-[400] leading-[120%];
}

.regular-40 {
  @apply text-[40px] font-[400] leading-[120%];
}

.regular-36 {
  @apply text-[36px] font-[400] leading-[120%];
}

.regular-32 {
  @apply text-[32px] font-[400] leading-[120%];
}

.regular-30 {
  @apply text-[30px] font-[400] leading-[120%];
}

.regular-28 {
  @apply text-[28px] font-[400] leading-[120%];
}

.regular-26 {
  @apply text-[26px] font-[400] leading-[120%];
}

.regular-24 {
  @apply text-[24px] font-[400] leading-[120%];
}

.regular-22 {
  @apply text-[22px] font-[400] leading-[120%];
}

.regular-20 {
  @apply text-[20px] font-[400] leading-[120%];
}

.regular-18 {
  @apply text-[18px] font-[400] leading-[120%];
}

.regular-16 {
  @apply text-[16px] font-[400] leading-[120%];
}

.regular-14 {
  @apply text-[14px] font-[400] leading-[120%];
}

.regular-12 {
  @apply text-[12px] font-[400] leading-[120%];
}

.regular-10 {
  @apply text-[10px] font-[400] leading-[120%];
}

/* text medium */
.medium-64 {
    @apply text-[64px] font-[500] leading-[120%];
  }
  
  .medium-56 {
    @apply text-[56px] font-[500] leading-[120%];
  }
  
  .medium-48 {
    @apply text-[48px] font-[500] leading-[120%];
  }
  
  .medium-42 {
    @apply text-[42px] font-[500] leading-[120%];
  }
  
  .medium-40 {
    @apply text-[40px] font-[500] leading-[120%];
  }
  
  .medium-36 {
    @apply text-[36px] font-[500] leading-[120%];
  }
  
  .medium-32 {
    @apply text-[32px] font-[500] leading-[120%];
  }
  
  .medium-30 {
    @apply text-[30px] font-[500] leading-[120%];
  }
  
  .medium-28 {
    @apply text-[28px] font-[500] leading-[120%];
  }
  
  .medium-26 {
    @apply text-[26px] font-[500] leading-[120%];
  }
  
  .medium-24 {
    @apply text-[24px] font-[500] leading-[120%];
  }
  
  .medium-22 {
    @apply text-[22px] font-[500] leading-[120%];
  }
  
  .medium-20 {
    @apply text-[20px] font-[500] leading-[120%];
  }
  
  .medium-18 {
    @apply text-[18px] font-[500] leading-[120%];
  }
  
  .medium-16 {
    @apply text-[16px] font-[500] leading-[120%];
  }
  
  .medium-14 {
    @apply text-[14px] font-[500] leading-[120%];
  }
  
  .medium-12 {
    @apply text-[12px] font-[500] leading-[120%];
  }
  
  .medium-10 {
    @apply text-[10px] font-[500] leading-[120%];
  }
  

/* text semibold */

.semibold-64 {
    @apply text-[64px] font-[600] leading-[120%];
  }
  
  .semibold-56 {
    @apply text-[56px] font-[600] leading-[120%];
  }
  
  .semibold-48 {
    @apply text-[48px] font-[600] leading-[120%];
  }
  
  .semibold-42 {
    @apply text-[42px] font-[600] leading-[120%];
  }
  
  .semibold-40 {
    @apply text-[40px] font-[600] leading-[120%];
  }
  
  .semibold-36 {
    @apply text-[36px] font-[600] leading-[120%];
  }
  
  .semibold-32 {
    @apply text-[32px] font-[600] leading-[120%];
  }
  
  .semibold-30 {
    @apply text-[30px] font-[600] leading-[120%];
  }
  
  .semibold-28 {
    @apply text-[28px] font-[600] leading-[120%];
  }
  
  .semibold-26 {
    @apply text-[26px] font-[600] leading-[120%];
  }
  
  .semibold-24 {
    @apply text-[24px] font-[600] leading-[120%];
  }
  
  .semibold-22 {
    @apply text-[22px] font-[600] leading-[120%];
  }
  
  .semibold-20 {
    @apply text-[20px] font-[600] leading-[120%];
  }
  
  .semibold-18 {
    @apply text-[18px] font-[600] leading-[120%];
  }
  
  .semibold-16 {
    @apply text-[16px] font-[600] leading-[120%];
  }
  
  .semibold-14 {
    @apply text-[14px] font-[600] leading-[120%];
  }
  
  .semibold-12 {
    @apply text-[12px] font-[600] leading-[120%];
  }
  
  .semibold-10 {
    @apply text-[10px] font-[600] leading-[120%];
  }

/* text bold */

.bold-64 {
    @apply text-[64px] font-[700] leading-[120%];
  }
  
  .bold-56 {
    @apply text-[56px] font-[700] leading-[120%];
  }
  
  .bold-48 {
    @apply text-[48px] font-[700] leading-[120%];
  }
  
  .bold-42 {
    @apply text-[42px] font-[700] leading-[120%];
  }
  
  .bold-40 {
    @apply text-[40px] font-[700] leading-[120%];
  }
  
  .bold-36 {
    @apply text-[36px] font-[700] leading-[120%];
  }
  
  .bold-32 {
    @apply text-[32px] font-[700] leading-[120%];
  }
  
  .bold-30 {
    @apply text-[30px] font-[700] leading-[120%];
  }
  
  .bold-28 {
    @apply text-[28px] font-[700] leading-[120%];
  }
  
  .bold-26 {
    @apply text-[26px] font-[700] leading-[120%];
  }
  
  .bold-24 {
    @apply text-[24px] font-[700] leading-[120%];
  }
  
  .bold-22 {
    @apply text-[22px] font-[700] leading-[120%];
  }
  
  .bold-20 {
    @apply text-[20px] font-[700] leading-[120%];
  }
  
  .bold-18 {
    @apply text-[18px] font-[700] leading-[120%];
  }
  
  .bold-16 {
    @apply text-[16px] font-[700] leading-[120%];
  }
  
  .bold-14 {
    @apply text-[14px] font-[700] leading-[120%];
  }
  
  .bold-12 {
    @apply text-[12px] font-[700] leading-[120%];
  }
  
  .bold-10 {
    @apply text-[10px] font-[700] leading-[120%];
  }

/* text black */

.black-64 {
    @apply text-[64px] font-[800] leading-[120%];
  }
  
  .black-56 {
    @apply text-[56px] font-[800] leading-[120%];
  }
  
  .black-48 {
    @apply text-[48px] font-[800] leading-[120%];
  }
  
  .black-42 {
    @apply text-[42px] font-[800] leading-[120%];
  }
  
  .black-40 {
    @apply text-[40px] font-[800] leading-[120%];
  }
  
  .black-36 {
    @apply text-[36px] font-[800] leading-[120%];
  }
  
  .black-32 {
    @apply text-[32px] font-[800] leading-[120%];
  }
  
  .black-30 {
    @apply text-[30px] font-[800] leading-[120%];
  }
  
  .black-28 {
    @apply text-[28px] font-[800] leading-[120%];
  }
  
  .black-26 {
    @apply text-[26px] font-[800] leading-[120%];
  }
  
  .black-24 {
    @apply text-[24px] font-[800] leading-[120%];
  }
  
  .black-22 {
    @apply text-[22px] font-[800] leading-[120%];
  }
  
  .black-20 {
    @apply text-[20px] font-[800] leading-[120%];
  }
  
  .black-18 {
    @apply text-[18px] font-[800] leading-[120%];
  }
  
  .black-16 {
    @apply text-[16px] font-[800] leading-[120%];
  }
  
  .black-14 {
    @apply text-[14px] font-[800] leading-[120%];
  }
  
  .black-12 {
    @apply text-[12px] font-[800] leading-[120%];
  }
  
  .black-10 {
    @apply text-[10px] font-[800] leading-[120%];
  }



  /* Spacing */