@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');

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

@layer components {
  @font-face {
    font-family: 'Charm';
    src: url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
  }
}

.custom-shadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}

/* scrollbar */
/* width */
body::-webkit-scrollbar {
  width: 10px;
}
.scrollbar::-webkit-scrollbar {
  width: 5px;
}

/* Track */
body::-webkit-scrollbar-track {
  background: #bfdbfe;
  border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-track {
  background: #bfdbfe;
  border-radius: 5px;
}

/* Handle */
.scrollbar::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #c084fc;
  border-radius: 5px;
}

/* Handle on hover */
.scrollbar::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #9333ea;
}

/* Loader */
#nprogress {
  pointer-events: none;
}
/* #nprogress .bar {
  background: dodgerblue;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
} */

#nprogress {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.123);
  top: 0;
  left: 0;
}
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}

#nprogress .spinner-icon {
  width: 32px;
  height: 32px;
  box-sizing: border-box;

  border: solid 3px transparent;
  border-top-color: #a855f7;
  border-left-color: #a855f7;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

html {
  scroll-behavior: smooth;
}

.bg-image {
  /* background-repeat: no-repeat; */
  background-size: cover;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='800' height='1600' preserveAspectRatio='none' viewBox='0 0 800 1600'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1202%26quot%3b)' fill='none'%3e%3crect width='800' height='1600' x='0' y='0' fill='rgba(214%2c 238%2c 255%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c509.951C93.992%2c516.873%2c166.944%2c434.091%2c246.51%2c383.576C326.557%2c332.755%2c440.968%2c304.474%2c467.172%2c213.35C493.806%2c120.731%2c404.021%2c37.453%2c372.201%2c-53.514C347.565%2c-123.944%2c336.949%2c-195.511%2c301.238%2c-261.024C257.197%2c-341.82%2c226.123%2c-444.805%2c140.517%2c-478.556C54.709%2c-512.387%2c-39.76%2c-461.921%2c-126.117%2c-429.516C-207.032%2c-399.153%2c-290.208%2c-365.63%2c-342.925%2c-297.146C-394.315%2c-230.386%2c-389.506%2c-140.525%2c-411.232%2c-59.126C-436.438%2c35.309%2c-521.57%2c130.742%2c-480.849%2c219.596C-440.117%2c308.473%2c-307.923%2c298.375%2c-224.231%2c348.911C-143.827%2c397.462%2c-93.671%2c503.053%2c0%2c509.951' fill='%239f60ff35'%3e%3c/path%3e%3cpath d='M800 2173.0119999999997C906.891 2173.719 1002.983 2113.135 1088.913 2049.558 1170.683 1989.059 1230.632 1908.2440000000001 1278.884 1818.699 1329.992 1723.855 1381.298 1624.812 1375.7730000000001 1517.216 1369.999 1404.767 1338.216 1279.051 1247.732 1212.038 1158.511 1145.96 1032.702 1197.574 922.81 1181.746 832.87 1168.792 750.2139999999999 1108.912 661.282 1127.568 569.7719999999999 1146.7640000000001 486.453 1205.723 435.325 1284.008 386.774 1358.348 396.875 1452.6100000000001 391.132 1541.214 385.843 1622.814 383.816 1701.795 403.094 1781.261 426.084 1876.028 444.13 1977.25 513.533 2045.752 589.435 2120.668 693.355 2172.307 800 2173.0119999999997' fill='white'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1202'%3e%3crect width='800' height='1600' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.bg-hero-image {
  background-image: url('/hero.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left bottom;
}
