hds-web 0.1.10 → 1.0.1

package/src/styles/tailwind.css

@@ -863,6 +863,10 @@ select {
   bottom: 0.375rem;
 }
 
+.bottom-8 {
+  bottom: 2rem;
+}
+
 .bottom-full {
   bottom: 100%;
 }
@@ -875,26 +879,10 @@ select {
   left: 50%;
 }
 
-.left-10 {
-  left: 2.5rem;
-}
-
-.left-16 {
-  left: 4rem;
-}
-
 .left-2 {
   left: 0.5rem;
 }
 
-.left-4 {
-  left: 1rem;
-}
-
-.left-8 {
-  left: 2rem;
-}
-
 .left-\[160\%\] {
   left: 160%;
 }
@@ -919,24 +907,12 @@ select {
   right: 0.5rem;
 }
 
-.top-0 {
-  top: 0px;
-}
-
-.top-10 {
-  top: 2.5rem;
-}
-
-.top-16 {
-  top: 4rem;
+.right-8 {
+  right: 2rem;
 }
 
-.top-4 {
-  top: 1rem;
-}
-
-.top-8 {
-  top: 2rem;
+.top-0 {
+  top: 0px;
 }
 
 .isolate {
@@ -951,18 +927,14 @@ select {
   z-index: 10;
 }
 
-.z-20 {
-  z-index: 20;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
 .z-50 {
   z-index: 50;
 }
 
+.z-\[1\] {
+  z-index: 1;
+}
+
 .z-\[2\] {
   z-index: 2;
 }
@@ -1010,11 +982,6 @@ select {
   margin-bottom: -0.5rem;
 }
 
-.-my-6 {
-  margin-top: -1.5rem;
-  margin-bottom: -1.5rem;
-}
-
 .mx-10 {
   margin-left: 2.5rem;
   margin-right: 2.5rem;
@@ -1130,10 +1097,6 @@ select {
   margin-right: -0.5rem;
 }
 
-.-mt-4 {
-  margin-top: -1rem;
-}
-
 .-mt-5 {
   margin-top: -1.25rem;
 }
@@ -1142,6 +1105,14 @@ select {
   margin-top: -1.5rem;
 }
 
+.mb-1 {
+  margin-bottom: 0.25rem;
+}
+
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -1154,6 +1125,14 @@ select {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
+.mb-9 {
+  margin-bottom: 2.25rem;
+}
+
 .mb-\[28\%\] {
   margin-bottom: 28%;
 }
@@ -1278,6 +1257,10 @@ select {
   height: 0.25rem;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1314,18 +1297,10 @@ select {
   height: 1.25rem;
 }
 
-.h-52 {
-  height: 13rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
 
-.h-64 {
-  height: 16rem;
-}
-
 .h-7 {
   height: 1.75rem;
 }
@@ -1346,6 +1321,14 @@ select {
   height: 100%;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
+.max-h-\[26\.25\] {
+  max-height: 26.25;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1406,6 +1389,10 @@ select {
   width: 24rem;
 }
 
+.w-\[290px\] {
+  width: 290px;
+}
+
 .w-\[60\%\] {
   width: 60%;
 }
@@ -1448,6 +1435,20 @@ select {
   width: 100vw;
 }
 
+.w-20 {
+  width: 5rem;
+}
+
+.min-w-\[882px\] {
+  min-width: 882px;
+}
+
+.min-w-fit {
+  min-width: -webkit-fit-content;
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1460,6 +1461,14 @@ select {
   max-width: 80rem;
 }
 
+.max-w-\[15rem\] {
+  max-width: 15rem;
+}
+
+.max-w-\[18rem\] {
+  max-width: 18rem;
+}
+
 .max-w-\[6rem\] {
   max-width: 6rem;
 }
@@ -1473,6 +1482,11 @@ select {
   max-width: 28rem;
 }
 
+.max-w-min {
+  max-width: -webkit-min-content;
+  max-width: min-content;
+}
+
 .max-w-xs {
   max-width: 20rem;
 }
@@ -1534,6 +1548,12 @@ select {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-\[-20px\] {
+  --tw-translate-y: -20px;
+  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .rotate-45 {
   --tw-rotate: 45deg;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1559,6 +1579,47 @@ select {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+@-webkit-keyframes bounce {
+  0%, 100% {
+    -webkit-transform: translateY(-25%);
+            transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    -webkit-transform: none;
+            transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+@keyframes bounce {
+  0%, 100% {
+    -webkit-transform: translateY(-25%);
+            transform: translateY(-25%);
+    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
+            animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    -webkit-transform: none;
+            transform: none;
+    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
+            animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  -webkit-animation: bounce 1s infinite;
+          animation: bounce 1s infinite;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .select-none {
   -webkit-user-select: none;
           user-select: none;
@@ -1628,6 +1689,10 @@ select {
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-center {
   align-items: center;
 }
@@ -1636,6 +1701,10 @@ select {
   align-items: stretch;
 }
 
+.justify-start {
+  justify-content: flex-start;
+}
+
 .justify-end {
   justify-content: flex-end;
 }
@@ -1680,14 +1749,26 @@ select {
   gap: 1rem;
 }
 
+.gap-5 {
+  gap: 1.25rem;
+}
+
 .gap-6 {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-\[14rem\] {
   gap: 14rem;
 }
 
+.gap-\[25rem\] {
+  gap: 25rem;
+}
+
 .gap-x-1 {
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -1805,12 +1886,39 @@ select {
   border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
 }
 
+.divide-x-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(0px * var(--tw-divide-x-reverse));
+  border-left-width: calc(0px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
+}
+
 .divide-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
   border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
 }
 
+.divide-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(2px * var(--tw-divide-x-reverse));
+  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
+}
+
+.divide-blue-600\/10 > :not([hidden]) ~ :not([hidden]) {
+  border-color: rgb(30 86 227 / 0.1);
+}
+
+.divide-neutral-150 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(236 237 240 / var(--tw-divide-opacity));
+}
+
 .overflow-auto {
   overflow: auto;
 }
@@ -1847,6 +1955,10 @@ select {
   white-space: pre-wrap;
 }
 
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -1888,6 +2000,16 @@ select {
   border-bottom-left-radius: 1rem;
 }
 
+.rounded-b-3xl {
+  border-bottom-right-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
+.rounded-l-3xl {
+  border-top-left-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -1944,10 +2066,18 @@ select {
   border-left-width: 2px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-r-0 {
   border-right-width: 0px;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
 .border-solid {
   border-style: solid;
 }
@@ -2037,14 +2167,24 @@ select {
   border-color: rgb(225 58 124 / var(--tw-border-opacity));
 }
 
+.border-neutral-150 {
+  --tw-border-opacity: 1;
+  border-color: rgb(236 237 240 / var(--tw-border-opacity));
+}
+
 .border-b-neutral-400 {
   --tw-border-opacity: 1;
   border-bottom-color: rgb(157 164 174 / var(--tw-border-opacity));
 }
 
-.bg-\[\#333333\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
+.border-r-neutral-150 {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(236 237 240 / var(--tw-border-opacity));
+}
+
+.border-t-neutral-150 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(236 237 240 / var(--tw-border-opacity));
 }
 
 .bg-amber-100 {
@@ -2527,6 +2667,10 @@ select {
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .from-amber-100 {
   --tw-gradient-from: #FFF3D4 var(--tw-gradient-from-position);
   --tw-gradient-from-position:  ;
@@ -4447,18 +4591,18 @@ select {
   --tw-gradient-to-position:  ;
 }
 
-.stroke-pink-500 {
-  stroke: #E13A7C;
-}
-
-.stroke-pink-600 {
-  stroke: #C21E5F;
+.stroke-neutral-800 {
+  stroke: #1F2A37;
 }
 
 .stroke-2 {
   stroke-width: 2;
 }
 
+.stroke-\[1\.5px\] {
+  stroke-width: 1.5px;
+}
+
 .object-contain {
   object-fit: contain;
 }
@@ -4566,6 +4710,11 @@ select {
   padding-right: 1.5rem;
 }
 
+.px-8 {
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+
 .py-0 {
   padding-top: 0px;
   padding-bottom: 0px;
@@ -4626,6 +4775,18 @@ select {
   padding-bottom: 1.5rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.pb-4 {
+  padding-bottom: 1rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -4690,6 +4851,10 @@ select {
   padding-right: 1rem;
 }
 
+.pr-48 {
+  padding-right: 12rem;
+}
+
 .pr-7 {
   padding-right: 1.75rem;
 }
@@ -4698,6 +4863,14 @@ select {
   padding-right: 10px;
 }
 
+.pt-0 {
+  padding-top: 0px;
+}
+
+.pt-10 {
+  padding-top: 2.5rem;
+}
+
 .pt-16 {
   padding-top: 4rem;
 }
@@ -4706,6 +4879,14 @@ select {
   padding-top: 1.25rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.pt-\[2\.875rem\] {
+  padding-top: 2.875rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -4714,6 +4895,10 @@ select {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -5002,10 +5187,18 @@ select {
   font-weight: 500;
 }
 
+.font-normal {
+  font-weight: 400;
+}
+
 .font-semibold {
   font-weight: 600;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .italic {
   font-style: italic;
 }
@@ -5698,83 +5891,469 @@ select {
 
 /* Typography classes */
 
-.scrollbar-hide::-webkit-scrollbar {
-  width: 0;
-  height: 0;
+.card-animation-wrapper {
+  position: relative;
 }
 
-.display-2xl-bold {
-  font-size: 4.5rem;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: -0.015em;
+.card-animation-wrapper .feature-card {
+  transition: all;
 }
 
-.display-xl-bold {
-  font-size: 3.75rem;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+.card-animation-wrapper .feature-card:first-child {
+  -webkit-animation: card1 15s infinite;
+          animation: card1 15s infinite;
 }
 
-.display-lg-bold {
-  font-size: 3rem;
-  line-height: 1;
-  font-weight: 700;
-  letter-spacing: -0.01em;
+.card-animation-wrapper .feature-card:nth-child(2) {
+  -webkit-animation: card2 15s infinite;
+          animation: card2 15s infinite;
 }
 
-.display-md-regular {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-  font-weight: 400;
+.card-animation-wrapper .feature-card:nth-child(3) {
+  -webkit-animation: card3 15s infinite;
+          animation: card3 15s infinite;
 }
 
-.display-md-bold {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-  font-weight: 700;
-}
+@-webkit-keyframes card1 {
+  0%   {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+    z-index: 3;
+  }
 
-.display-sm-regular {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-  font-weight: 400;
-}
+  0.1%,6.65%   {
+    z-index: 3;
+  }
 
-.display-sm-bold {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-  font-weight: 700;
-}
+  6.66%, 26.64%  {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
 
-.display-xs-regular {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 400;
-}
+  33.3%, 59.94%  {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
 
-.display-xs-bold {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
+  66.6%, 100% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+    z-index: 0;
+  }
 }
 
-.text-xl-regular {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 400;
-}
+@keyframes card1 {
+  0%   {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+    z-index: 3;
+  }
 
-.text-xl-medium {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 500;
-}
+  0.1%,6.65%   {
+    z-index: 3;
+  }
 
-.text-xl-bold {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
+  6.66%, 26.64%  {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+
+  33.3%, 59.94%  {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+
+  66.6%, 100% {
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+    z-index: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  @-webkit-keyframes card1 {
+    0%   {
+      -webkit-transform: translate(0, 0);
+              transform: translate(0, 0);
+      z-index: 3;
+    }
+
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(0, 0);
+              transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+  @keyframes card1 {
+    0%   {
+      -webkit-transform: translate(0, 0);
+              transform: translate(0, 0);
+      z-index: 3;
+    }
+
+    0.1%,6.65%   {
+      z-index: 3;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(0, 0);
+              transform: translate(0, 0);
+      z-index: 0;
+    }
+  }
+}
+
+@-webkit-keyframes card2 {
+  0%   {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+
+  6.66%, 26.64%  {
+    -webkit-transform: translate(0px, 0px);
+            transform: translate(0px, 0px);
+    z-index: 0;
+  }
+
+  26.65%,33.29%   {
+    z-index: 2;
+  }
+
+  33.3%, 59.94%  {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+
+  66.6%, 100% {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+}
+
+@keyframes card2 {
+  0%   {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+
+  6.66%, 26.64%  {
+    -webkit-transform: translate(0px, 0px);
+            transform: translate(0px, 0px);
+    z-index: 0;
+  }
+
+  26.65%,33.29%   {
+    z-index: 2;
+  }
+
+  33.3%, 59.94%  {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+
+  66.6%, 100% {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+}
+
+@media (max-width: 600px) {
+  @-webkit-keyframes card2 {
+    0%   {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(0px, 0px);
+              transform: translate(0px, 0px);
+      z-index: 0;
+    }
+
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+  }
+  @keyframes card2 {
+    0%   {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(0px, 0px);
+              transform: translate(0px, 0px);
+      z-index: 0;
+    }
+
+    26.65%,33.29%   {
+      z-index: 2;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+  }
+}
+
+@-webkit-keyframes card3 {
+  0%   {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+
+  6.66%, 26.64%  {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+
+  33.3%, 59.94%  {
+    -webkit-transform: translate(0px, 0px);
+            transform: translate(0px, 0px);
+    z-index: 0;
+  }
+
+  59.95%,66.5%   {
+    z-index: 2;
+  }
+
+  66.6%, 100% {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+}
+
+@keyframes card3 {
+  0%   {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+
+  6.66%, 26.64%  {
+    -webkit-transform: translate(2rem, 2rem);
+            transform: translate(2rem, 2rem);
+    z-index: 1;
+  }
+
+  33.3%, 59.94%  {
+    -webkit-transform: translate(0px, 0px);
+            transform: translate(0px, 0px);
+    z-index: 0;
+  }
+
+  59.95%,66.5%   {
+    z-index: 2;
+  }
+
+  66.6%, 100% {
+    -webkit-transform: translate(4rem, 4rem);
+            transform: translate(4rem, 4rem);
+    z-index: 2;
+  }
+}
+
+@media (max-width: 600px) {
+  @-webkit-keyframes card3 {
+    0%   {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(0px, 0px);
+              transform: translate(0px, 0px);
+      z-index: 0;
+    }
+
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+  }
+  @keyframes card3 {
+    0%   {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+
+    6.66%, 26.64%  {
+      -webkit-transform: translate(1.5rem, 1.5rem);
+              transform: translate(1.5rem, 1.5rem);
+      z-index: 1;
+    }
+
+    33.3%, 59.94%  {
+      -webkit-transform: translate(0px, 0px);
+              transform: translate(0px, 0px);
+      z-index: 0;
+    }
+
+    59.95%,66.5%   {
+      z-index: 2;
+    }
+
+    66.6%, 100% {
+      -webkit-transform: translate(3rem, 3rem);
+              transform: translate(3rem, 3rem);
+      z-index: 2;
+    }
+  }
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.display-2xl-bold {
+  font-size: 4.5rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+}
+
+.display-xl-bold {
+  font-size: 3.75rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.display-lg-bold {
+  font-size: 3rem;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.display-md-regular {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 400;
+}
+
+.display-md-bold {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 700;
+}
+
+.display-sm-regular {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 400;
+}
+
+.display-sm-bold {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+  font-weight: 700;
+}
+
+.display-xs-regular {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 400;
+}
+
+.display-xs-bold {
+  font-size: 1.5rem;
+  line-height: 2rem;
+  font-weight: 700;
+}
+
+.text-xl-regular {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 400;
+}
+
+.text-xl-medium {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+}
+
+.text-xl-bold {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
   font-weight: 700;
 }
 
@@ -6182,18 +6761,6 @@ select {
   z-index: 10;
 }
 
-.hover\:translate-x-4:hover {
-  --tw-translate-x: 1rem;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.hover\:translate-y-4:hover {
-  --tw-translate-y: 1rem;
-  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-          transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .hover\:scale-125:hover {
   --tw-scale-x: 1.25;
   --tw-scale-y: 1.25;
@@ -6201,22 +6768,6 @@ select {
           transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-@-webkit-keyframes bounce {
-  0%, 100% {
-    -webkit-transform: translateY(-25%);
-            transform: translateY(-25%);
-    -webkit-animation-timing-function: cubic-bezier(0.8,0,1,1);
-            animation-timing-function: cubic-bezier(0.8,0,1,1);
-  }
-
-  50% {
-    -webkit-transform: none;
-            transform: none;
-    -webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);
-            animation-timing-function: cubic-bezier(0,0,0.2,1);
-  }
-}
-
 @keyframes bounce {
   0%, 100% {
     -webkit-transform: translateY(-25%);
@@ -6339,11 +6890,6 @@ select {
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
 }
 
-.hover\:bg-\[\#333333\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-amber-300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 206 112 / var(--tw-bg-opacity));
@@ -6419,10 +6965,6 @@ select {
   color: rgb(17 25 39 / var(--tw-text-opacity));
 }
 
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
 .hover\:shadow:hover {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -6451,10 +6993,6 @@ select {
   transition-delay: 100ms;
 }
 
-.hover\:delay-300:hover {
-  transition-delay: 300ms;
-}
-
 .hover\:duration-300:hover {
   transition-duration: 300ms;
 }
@@ -6463,6 +7001,10 @@ select {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
+.hover\:ease-in-out:hover {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .hover\:ease-out:hover {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
@@ -6527,11 +7069,6 @@ select {
   border-color: rgb(225 58 124 / var(--tw-border-opacity));
 }
 
-.focus\:bg-\[\#333333\]:focus {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 51 51 / var(--tw-bg-opacity));
-}
-
 .focus\:bg-blue-100:focus {
   --tw-bg-opacity: 1;
   background-color: rgb(240 244 255 / var(--tw-bg-opacity));
@@ -6577,10 +7114,6 @@ select {
   color: rgb(17 25 39 / var(--tw-text-opacity));
 }
 
-.focus\:underline:focus {
-  text-decoration-line: underline;
-}
-
 .focus\:shadow-\[0_0px_0px_4px_\#DFE8FF\]:focus {
   --tw-shadow: 0 0px 0px 4px #DFE8FF;
   --tw-shadow-colored: 0 0px 0px 4px var(--tw-shadow-color);
@@ -6593,12 +7126,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:shadow-\[0px_0px_0px_4px_\#D2D6DB\]:focus {
-  --tw-shadow: 0px 0px 0px 4px #D2D6DB;
-  --tw-shadow-colored: 0px 0px 0px 4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .focus\:shadow-\[0px_0px_0px_4px_\#DFE8FF\]:focus {
   --tw-shadow: 0px 0px 0px 4px #DFE8FF;
   --tw-shadow-colored: 0px 0px 0px 4px var(--tw-shadow-color);
@@ -6617,12 +7144,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.focus\:shadow-\[0px_0px_0px_4px_\#F3F4F6\]:focus {
-  --tw-shadow: 0px 0px 0px 4px #F3F4F6;
-  --tw-shadow-colored: 0px 0px 0px 4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -6746,10 +7267,6 @@ select {
   visibility: visible;
 }
 
-.group:hover .group-hover\:block {
-  display: block;
-}
-
 .group:hover .group-hover\:translate-x-\[0\.15rem\] {
   --tw-translate-x: 0.15rem;
   -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -6782,16 +7299,20 @@ select {
   transition-duration: 150ms;
 }
 
-.group:hover .group-hover\:delay-300 {
-  transition-delay: 300ms;
+.group:hover .group-hover\:delay-100 {
+  transition-delay: 100ms;
+}
+
+.group:hover .group-hover\:duration-100 {
+  transition-duration: 100ms;
 }
 
 .group:hover .group-hover\:duration-300 {
   transition-duration: 300ms;
 }
 
-.group:hover .group-hover\:ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+.group:hover .group-hover\:ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .group:focus .group-focus\:stroke-neutral-0 {
@@ -6914,10 +7435,34 @@ select {
     visibility: visible;
   }
 
+  .tb\:mb-16 {
+    margin-bottom: 4rem;
+  }
+
   .tb\:ml-0 {
     margin-left: 0px;
   }
 
+  .tb\:mt-10 {
+    margin-top: 2.5rem;
+  }
+
+  .tb\:mt-4 {
+    margin-top: 1rem;
+  }
+
+  .tb\:mt-8 {
+    margin-top: 2rem;
+  }
+
+  .tb\:mt-\[-4px\] {
+    margin-top: -4px;
+  }
+
+  .tb\:block {
+    display: block;
+  }
+
   .tb\:flex {
     display: flex;
   }
@@ -6930,16 +7475,64 @@ select {
     display: none;
   }
 
+  .tb\:h-full {
+    height: 100%;
+  }
+
+  .tb\:max-h-\[25\.25rem\] {
+    max-height: 25.25rem;
+  }
+
+  .tb\:w-1\/2 {
+    width: 50%;
+  }
+
+  .tb\:w-\[90\%\] {
+    width: 90%;
+  }
+
   .tb\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
   }
 
+  .tb\:w-full {
+    width: 100%;
+  }
+
   .tb\:min-w-\[18rem\] {
     min-width: 18rem;
   }
 
+  .tb\:min-w-\[310px\] {
+    min-width: 310px;
+  }
+
+  .tb\:max-w-\[17rem\] {
+    max-width: 17rem;
+  }
+
+  .tb\:max-w-\[21rem\] {
+    max-width: 21rem;
+  }
+
+  .tb\:max-w-\[25rem\] {
+    max-width: 25rem;
+  }
+
+  .tb\:max-w-\[290px\] {
+    max-width: 290px;
+  }
+
+  .tb\:max-w-\[530px\] {
+    max-width: 530px;
+  }
+
+  .tb\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .tb\:flex-col {
     flex-direction: column;
   }
@@ -6948,14 +7541,60 @@ select {
     align-items: center;
   }
 
+  .tb\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .tb\:justify-center {
+    justify-content: center;
+  }
+
+  .tb\:gap-\[31\.5rem\] {
+    gap: 31.5rem;
+  }
+
   .tb\:rounded-2xl {
     border-radius: 1rem;
   }
 
+  .tb\:p-16 {
+    padding: 4rem;
+  }
+
   .tb\:p-8 {
     padding: 2rem;
   }
 
+  .tb\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .tb\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .tb\:pb-8 {
+    padding-bottom: 2rem;
+  }
+
+  .tb\:pr-0 {
+    padding-right: 0px;
+  }
+
+  .tb\:pt-8 {
+    padding-top: 2rem;
+  }
+
+  .tb\:text-left {
+    text-align: left;
+  }
+
+  .tb\:text-center {
+    text-align: center;
+  }
+
   .tb\:text-hds-t-body1 {
     font-size: 1rem;
     line-height: 1.75rem;
@@ -7248,10 +7887,6 @@ select {
     width: 3rem;
   }
 
-  .sm\:max-w-sm {
-    max-width: 24rem;
-  }
-
   .sm\:flex-auto {
     flex: 1 1 auto;
   }
@@ -7372,6 +8007,61 @@ select {
   }
 }
 
+@media (min-width: 905px) {
+  .tb-l\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .tb-l\:ml-\[-4px\] {
+    margin-left: -4px;
+  }
+
+  .tb-l\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .tb-l\:block {
+    display: block;
+  }
+
+  .tb-l\:flex {
+    display: flex;
+  }
+
+  .tb-l\:w-1\/2 {
+    width: 50%;
+  }
+
+  .tb-l\:w-\[70\%\] {
+    width: 70%;
+  }
+
+  .tb-l\:min-w-\[400px\] {
+    min-width: 400px;
+  }
+
+  .tb-l\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .tb-l\:self-center {
+    align-self: center;
+  }
+
+  .tb-l\:bg-gradient-to-r {
+    background-image: linear-gradient(to right, var(--tw-gradient-stops));
+  }
+
+  .tb-l\:py-12 {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+
+  .tb-l\:text-left {
+    text-align: left;
+  }
+}
+
 @media (min-width: 1024px) {
   .lg\:flex {
     display: flex;
@@ -7421,12 +8111,137 @@ select {
     right: -1.25rem;
   }
 
+  .db\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
+  .db\:ml-0 {
+    margin-left: 0px;
+  }
+
+  .db\:inline {
+    display: inline;
+  }
+
+  .db\:flex {
+    display: flex;
+  }
+
+  .db\:w-1\/2 {
+    width: 50%;
+  }
+
+  .db\:w-\[36\%\] {
+    width: 36%;
+  }
+
+  .db\:w-\[72\%\] {
+    width: 72%;
+  }
+
+  .db\:w-\[75\%\] {
+    width: 75%;
+  }
+
   .db\:w-fit {
     width: -webkit-fit-content;
     width: -moz-fit-content;
     width: fit-content;
   }
 
+  .db\:w-full {
+    width: 100%;
+  }
+
+  .db\:min-w-\[625px\] {
+    min-width: 625px;
+  }
+
+  .db\:max-w-\[500px\] {
+    max-width: 500px;
+  }
+
+  .db\:max-w-\[625px\] {
+    max-width: 625px;
+  }
+
+  .db\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .db\:justify-start {
+    justify-content: flex-start;
+  }
+
+  .db\:gap-0 {
+    gap: 0px;
+  }
+
+  .db\:gap-36 {
+    gap: 9rem;
+  }
+
+  .db\:gap-x-8 {
+    -webkit-column-gap: 2rem;
+            column-gap: 2rem;
+  }
+
+  .db\:gap-y-2 {
+    row-gap: 0.5rem;
+  }
+
+  .db\:px-20 {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
+
+  .db\:px-28 {
+    padding-left: 7rem;
+    padding-right: 7rem;
+  }
+
+  .db\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  .db\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
+  .db\:pb-10 {
+    padding-bottom: 2.5rem;
+  }
+
+  .db\:pb-28 {
+    padding-bottom: 7rem;
+  }
+
+  .db\:pl-28 {
+    padding-left: 7rem;
+  }
+
+  .db\:pr-0 {
+    padding-right: 0px;
+  }
+
+  .db\:pt-20 {
+    padding-top: 5rem;
+  }
+
+  .db\:pt-28 {
+    padding-top: 7rem;
+  }
+
+  .db\:pt-32 {
+    padding-top: 8rem;
+  }
+
+  .db\:text-left {
+    text-align: left;
+  }
+
   .db\:text-hds-d-body1 {
     font-size: 1rem;
     line-height: 1.75rem;
@@ -7671,4 +8486,12 @@ select {
     letter-spacing: -0.01em;
     font-weight: 400;
   }
+}
+
+.\[\&\>\*\]\:mb-8>* {
+  margin-bottom: 2rem;
+}
+
+.last\:\[\&\>\*\]\:mb-0>*:last-child {
+  margin-bottom: 0px;
 }