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



body {
            font-family: "Quicksand", sans-serif;
            scroll-behavior: smooth;
            font-weight: 500;
            color: #7E7E7E;
        }



.btn.btn-default.pdfsigner_contfrm_submitb {
    background-color: #2e729c;
    color: #fff;
    border: 1px solid #2e729c;
    border-radius: 0.3rem;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 20px 5px 20px;
}

.btn.btn-default.pdfsigner_contfrm_resetbtn {
    background-color: #eee;
    color: #222;
    border: 1px solid #c0c6cc;
    border-radius: 0.3rem;
    font-size: 16px;
    font-weight: 500;
    padding: 5px 20px 5px 20px;
}

        .blockq_minheight{
            min-height: 150px;
        }
       
.container {margin: auto; max-width:1440px !important;}
.gradient-bg {
                 background-image: linear-gradient(90deg, #FC7D72, #D6392C);

            }

            .card-hover:hover {
                transform:scale(1.1);
            }

            .testimonial-card {
                position: relative;
            }

            .testimonial-card::before {
                content: '"';
                position: absolute;
                top: -15px;
                left: 20px;
                font-size: 80px;
                color: rgba(79, 70, 229, 0.1);
                font-family: serif;
            }
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .right-0 {
                right: 0px
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .h-full {
                height: 100%
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .flex-wrap {
                flex-wrap: wrap
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-8 {
                gap: 2rem
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .hero-brand {
                padding:0px 0 50px 0 ;
                position: relative;
                top: 80px;
            }

            .figure {
                border-radius:30px;
                background-color: #fff;
                box-shadow: 0px 0px 30px 4px rgba(0,0,0,0.1);
                padding:60px 40px !important;
            }
            .figure div{
                border-radius:100px;
                border: 6px solid transparent;
                border-color: #E2E6F2;
                padding: 15px;
                display: inline-block;
            }

            .usecase-content {
               
                background-color: #fff;
                box-shadow: 0px 0px 30px 4px rgba(0,0,0,0.1);
                
            }

            .slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: auto;
  overflow: hidden;
}

/* Hide radio buttons */
.slider input[type="radio"] {
  display: none;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
  height: 400px;

}
.dot {
  animation: slide 12s infinite;
}
.dot:hover {
  animation-play-state: paused;
}
/* Each slide takes equal width */
.slide {
  width: 100%;
  flex-shrink: 0;
    background-color: #D6392C;
}

/* Move slides based on which radio is checked */
#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }

/* Dots container */
.dots {
  text-align: center;
  margin-top: 10px;
}

.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background: gray;
  border-radius: 50%;
  cursor: pointer;
}

/* Active dot style */
#slide1:checked ~ .dots label[for="slide1"],
#slide2:checked ~ .dots label[for="slide2"],
#slide3:checked ~ .dots label[for="slide3"] {
  background: black;
}
            
            .hero-grey-title{
               
            }
            

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .px-2 {
                padding-left: 0.5rem;
                padding-right: 0.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .italic {
                font-style: italic
            }

            .leading-tight {
                line-height: 1.25
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .opacity-70 {
                opacity: 0.7
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:text-indigo-800:hover {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
        
        
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .inset-y-0 {
                top: 0px;
                bottom: 0px
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-0 {
                right: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .w-2 {
                width: 0.5rem
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-8 {
                gap: 2rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-300 {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-2 {
                padding-left: 0.5rem;
                padding-right: 0.5rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .leading-tight {
                line-height: 1.25
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:text-indigo-800:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
       
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .inset-y-0 {
                top: 0px;
                bottom: 0px
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-0 {
                right: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-2 {
                width: 0.5rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-8 {
                gap: 2rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-300 {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .leading-tight {
                line-height: 1.25
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:text-indigo-800:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .inset-y-0 {
                top: 0px;
                bottom: 0px
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-0 {
                right: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .h-10 {
                height: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .w-10 {
                width: 2.5rem
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-8 {
                gap: 2rem
            }

            .gap-4 {
                gap: 1rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .rounded {
                border-radius: 0.25rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .italic {
                font-style: italic
            }

            .leading-tight {
                line-height: 1.25
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .transition-all {
                transition-property: all;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .duration-500 {
                transition-duration: 500ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:text-indigo-800:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .mb-2 {
                margin-bottom: 0.5rem
            }

            .mb-3 {
                margin-bottom: 0.75rem
            }

            .mb-8 {
                margin-bottom: 2rem
            }

            .mb-1 {
                margin-bottom: 0.25rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .max-w-6xl {
                max-width: 72rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .flex-wrap {
                flex-wrap: wrap
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-4 {
                gap: 1rem
            }

            .gap-8 {
                gap: 2rem
            }

            .gap-6 {
                gap: 1.5rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .space-x-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.75rem * var(--tw-space-x-reverse));
                margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded {
                border-radius: 0.25rem
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-t {
                border-top-width: 1px
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .border-gray-200 {
                --tw-border-opacity: 1;
                border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-8 {
                padding-top: 2rem;
                padding-bottom: 2rem
            }

            .py-10 {
                padding-top: 2.5rem;
                padding-bottom: 2.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .pt-6 {
                padding-top: 1.5rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .text-xs {
                font-size: 0.75rem;
                line-height: 1rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .italic {
                font-style: italic
            }

            .leading-tight {
                line-height: 1.25
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .text-gray-500 {
                --tw-text-opacity: 1;
                color: rgb(107 114 128 / var(--tw-text-opacity, 1))
            }

            .text-gray-700 {
                --tw-text-opacity: 1;
                color: rgb(55 65 81 / var(--tw-text-opacity, 1))
            }

            .text-indigo-700 {
                --tw-text-opacity: 1;
                color: rgb(67 56 202 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .transition-colors {
                transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:text-indigo-700:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:text-indigo-900:hover {
                --tw-text-opacity: 1;
              color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:grid-cols-\[2fr_2fr_1fr\] {
                    grid-template-columns: 2fr 2fr 1fr
                }

                .md\:grid-cols-\[3fr_3fr_1fr\] {
                    grid-template-columns: 3fr 3fr 1fr
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
     
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-2 {
                margin-bottom: 0.5rem
            }

            .mb-3 {
                margin-bottom: 0.75rem
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .mb-8 {
                margin-bottom: 2rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .mt-0\.5 {
                margin-top: 0.125rem
            }

            .mt-1 {
                margin-top: 0.25rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .w-8 {
                width: 2rem
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .flex-wrap {
                flex-wrap: wrap
            }

            .items-start {
                align-items: flex-start
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-4 {
                gap: 1rem
            }

            .gap-6 {
                gap: 1.5rem
            }

            .gap-8 {
                gap: 2rem
            }

            .gap-3 {
                gap: 0.75rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-x-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.75rem * var(--tw-space-x-reverse));
                margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .space-x-4 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(1rem * var(--tw-space-x-reverse));
                margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded {
                border-radius: 0.25rem
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-t {
                border-top-width: 1px
            }

            .border-gray-200 {
                --tw-border-opacity: 1;
                border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .py-10 {
                padding-top: 2.5rem;
                padding-bottom: 2.5rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-12 {
                padding-top: 3rem;
                padding-bottom: 3rem
            }

            .py-6 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .pt-6 {
                padding-top: 1.5rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .text-xs {
                font-size: 0.75rem;
                line-height: 1rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .uppercase {
                text-transform: uppercase
            }

            .italic {
                font-style: italic
            }

            .not-italic {
                font-style: normal
            }

            .leading-tight {
                line-height: 1.25
            }

            .tracking-wider {
                letter-spacing: 0.05em
            }

            .text-gray-500 {
                --tw-text-opacity: 1;
                color: rgb(107 114 128 / var(--tw-text-opacity, 1))
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-700 {
                --tw-text-opacity: 1;
                color: rgb(55 65 81 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-700 {
                --tw-text-opacity: 1;
                color: rgb(67 56 202 / var(--tw-text-opacity, 1))
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .text-gray-400 {
                --tw-text-opacity: 1;
                color: rgb(156 163 175 / var(--tw-text-opacity, 1))
            }

            .text-indigo-500 {
                --tw-text-opacity: 1;
                color: rgb(46 114 156) !important;
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .transition-colors {
                transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:text-indigo-700:hover {
                --tw-text-opacity: 1;
              color: rgb(46 114 156);
            }

            .hover\:text-indigo-900:hover {
                --tw-text-opacity: 1;
              color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:grid-cols-\[2fr_2fr_1fr\] {
                    grid-template-columns: 2fr 2fr 1fr
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:justify-between {
                    justify-content: space-between
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-0\.5 {
                margin-top: 0.125rem
            }

            .mt-1 {
                margin-top: 0.25rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-8 {
                width: 2rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .flex-wrap {
                flex-wrap: wrap
            }

            .items-start {
                align-items: flex-start
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-3 {
                gap: 0.75rem
            }

            .gap-4 {
                gap: 1rem
            }

            .gap-8 {
                gap: 2rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-x-4 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(1rem * var(--tw-space-x-reverse));
                margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded {
                border-radius: 0.25rem
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-t {
                border-top-width: 1px
            }

            .border-gray-200 {
                --tw-border-opacity: 1;
                border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .py-12 {
                padding-top: 3rem;
                padding-bottom: 3rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-6 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .text-xs {
                font-size: 0.75rem;
                line-height: 1rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .uppercase {
                text-transform: uppercase
            }

            .italic {
                font-style: italic
            }

            .not-italic {
                font-style: normal
            }

            .leading-tight {
                line-height: 1.25
            }

            .tracking-wider {
                letter-spacing: 0.05em
            }

            .text-gray-400 {
                --tw-text-opacity: 1;
                color: rgb(156 163 175 / var(--tw-text-opacity, 1))
            }

            .text-gray-500 {
                --tw-text-opacity: 1;
                color: rgb(107 114 128 / var(--tw-text-opacity, 1))
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-500 {
                --tw-text-opacity: 1;
                 color: rgb(46 114 156);
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:grid-cols-\[2fr\2c 1fr\2c 3fr\2c 1fr\] {
                    grid-template-columns: 2fr 1fr 3fr 1fr
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:justify-between {
                    justify-content: space-between
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:grid-cols-\[3fr\2c 2fr\2c 1fr\2c 4fr\] {
                    grid-template-columns: 3fr 2fr 1fr 4fr
                }

                .lg\:grid-cols-\[3fr\2c 3fr\2c 1fr\2c 2fr\] {
                    grid-template-columns: 3fr 3fr 1fr 2fr
                }

                .lg\:grid-cols-\[3fr\2c 3fr\2c 2fr\2c 3fr\] {
                    grid-template-columns: 3fr 3fr 2fr 3fr
                }

                .lg\:grid-cols-\[3fr\2c 4fr\2c 2fr\2c 3fr\] {
                    grid-template-columns: 3fr 4fr 2fr 3fr
                }

                .lg\:grid-cols-\[3fr\2c 4fr\2c 2fr\2c 2fr\] {
                    grid-template-columns: 3fr 4fr 2fr 2fr
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }





            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-0\.5 {
                margin-top: 0.125rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 80rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .items-start {
                align-items: flex-start
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-4 {
                gap: 1rem
            }

            .gap-8 {
                gap: 2rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-x-4 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(1rem * var(--tw-space-x-reverse));
                margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded {
                border-radius: 0.25rem
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-t {
                border-top-width: 1px
            }

            .border-gray-200 {
                --tw-border-opacity: 1;
                border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1))
            }

            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .py-12 {
                padding-top: 3rem;
                padding-bottom: 3rem
            }

            .py-16 {
                padding-top: 4rem;
                padding-bottom: 4rem
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-6 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 1.875rem;
                line-height: 2.25rem
            }

            .text-lg {
                font-size: 1.125rem;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 1.25rem;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .uppercase {
                text-transform: uppercase
            }

            .italic {
                font-style: italic
            }

            .not-italic {
                font-style: normal
            }

            .leading-tight {
                line-height: 1.25
            }

            .tracking-wider {
                letter-spacing: 0.05em
            }

            .text-gray-400 {
                --tw-text-opacity: 1;
                color: rgb(156 163 175 / var(--tw-text-opacity, 1))
            }

            .text-gray-500 {
                --tw-text-opacity: 1;
                color: rgb(107 114 128 / var(--tw-text-opacity, 1))
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                color: rgb(75 85 99 / var(--tw-text-opacity, 1))
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-500 {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color: rgb(55 48 163 / var(--tw-text-opacity, 1))
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156 / var(--tw-text-opacity, 1))
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
               color: rgb(46 114 156);
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            .text-indigo-600 {
                    --tw-text-opacity: 1;
                       color: rgb(46 114 156) !important;
                }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:grid-cols-\[2fr\2c 1fr\2c 3fr\2c 1fr\] {
                    grid-template-columns: 2fr 1fr 3fr 1fr
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:justify-between {
                    justify-content: space-between
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:grid-cols-\[3fr\2c 4fr\2c 2fr\2c 2fr\] {
                    grid-template-columns: 3fr 4fr 2fr 2fr
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 3rem;
                    line-height: 1
                }
            }
      
            *, ::before, ::after {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            ::backdrop {
                --tw-border-spacing-x: 0;
                --tw-border-spacing-y: 0;
                --tw-translate-x: 0;
                --tw-translate-y: 0;
                --tw-rotate: 0;
                --tw-skew-x: 0;
                --tw-skew-y: 0;
                --tw-scale-x: 1;
                --tw-scale-y: 1;
                --tw-pan-x: ;
                --tw-pan-y: ;
                --tw-pinch-zoom: ;
                --tw-scroll-snap-strictness: proximity;
                --tw-gradient-from-position: ;
                --tw-gradient-via-position: ;
                --tw-gradient-to-position: ;
                --tw-ordinal: ;
                --tw-slashed-zero: ;
                --tw-numeric-figure: ;
                --tw-numeric-spacing: ;
                --tw-numeric-fraction: ;
                --tw-ring-inset: ;
                --tw-ring-offset-width: 0px;
                --tw-ring-offset-color: #fff;
                --tw-ring-color: rgb(59 130 246 / 0.5);
                --tw-ring-offset-shadow: 0 0 #0000;
                --tw-ring-shadow: 0 0 #0000;
                --tw-shadow: 0 0 #0000;
                --tw-shadow-colored: 0 0 #0000;
                --tw-blur: ;
                --tw-brightness: ;
                --tw-contrast: ;
                --tw-grayscale: ;
                --tw-hue-rotate: ;
                --tw-invert: ;
                --tw-saturate: ;
                --tw-sepia: ;
                --tw-drop-shadow: ;
                --tw-backdrop-blur: ;
                --tw-backdrop-brightness: ;
                --tw-backdrop-contrast: ;
                --tw-backdrop-grayscale: ;
                --tw-backdrop-hue-rotate: ;
                --tw-backdrop-invert: ;
                --tw-backdrop-opacity: ;
                --tw-backdrop-saturate: ;
                --tw-backdrop-sepia: ;
                --tw-contain-size: ;
                --tw-contain-layout: ;
                --tw-contain-paint: ;
                --tw-contain-style:
            }

            /* ! tailwindcss v3.4.16 | MIT License | https://tailwindcss.com */
            *,::after,::before {
                box-sizing: border-box;
                border-width: 0;
                border-style: solid;
                border-color: #e5e7eb
            }

            ::after,::before {
                --tw-content: ''
            }

            :host,html {
                line-height: 1.5;
                -webkit-text-size-adjust: 100%;
                -moz-tab-size: 4;
                tab-size: 4;
                font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
                font-feature-settings: normal;
                font-variation-settings: normal;
                -webkit-tap-highlight-color: transparent
            }

            body {
                margin: 0;
                line-height: inherit
            }

            hr {
                height: 0;
                color: inherit;
                border-top-width: 1px
            }

            abbr:where([title]) {
                -webkit-text-decoration: underline dotted;
                text-decoration: underline dotted
            }

            h1,h2,h3,h4,h5,h6 {
                font-size: inherit;
                font-weight: inherit
            }

            a {
                color: inherit;
                text-decoration: inherit
            }

            b,strong {
                font-weight: bolder
            }

            code,kbd,pre,samp {
                font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
                font-feature-settings: normal;
                font-variation-settings: normal;
                font-size: 1em
            }

            small {
                font-size: 80%
            }

            sub,sup {
                font-size: 75%;
                line-height: 0;
                position: relative;
                vertical-align: baseline
            }

            sub {
                bottom: -.25em
            }

            sup {
                top: -.5em
            }

            table {
                text-indent: 0;
                border-color: inherit;
                border-collapse: collapse
            }

            button,input,optgroup,select,textarea {
                font-family: inherit;
                font-feature-settings: inherit;
                font-variation-settings: inherit;
                font-size: 100%;
                font-weight: inherit;
                line-height: inherit;
                letter-spacing: inherit;
                color: inherit;
                margin: 0;
                padding: 0
            }

            button,select {
                text-transform: none
            }

            button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]) {
                -webkit-appearance: button;
                background-color: transparent;
                background-image: none
            }

            :-moz-focusring {
                outline: auto
            }

            :-moz-ui-invalid {
                box-shadow: none
            }

            progress {
                vertical-align: baseline
            }

            ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
                height: auto
            }

            [type=search] {
                -webkit-appearance: textfield;
                outline-offset: -2px
            }

            ::-webkit-search-decoration {
                -webkit-appearance: none
            }

            ::-webkit-file-upload-button {
                -webkit-appearance: button;
                font: inherit
            }

            summary {
                display: list-item
            }

            blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre {
                margin: 0
            }

            fieldset {
                margin: 0;
                padding: 0
            }

            legend {
                padding: 0
            }

            menu,ol,ul {
                list-style: none;
                margin: 0;
                padding: 0
            }

            dialog {
                padding: 0
            }

            textarea {
                resize: vertical
            }

            input::placeholder,textarea::placeholder {
                opacity: 1;
                color: #9ca3af
            }

            [role=button],button {
                cursor: pointer
            }

            :disabled {
                cursor: default
            }

            audio,canvas,embed,iframe,img,object,svg,video {
                display: block;
                vertical-align: middle
            }

            img,video {
                max-width: 100%;
                height: auto
            }

            [hidden]:where(:not([hidden=until-found])) {
                display: none
            }

            .fixed {
                position: fixed
            }

            .absolute {
                position: absolute
            }

            .relative {
                position: relative
            }

            .bottom-4 {
                bottom: 1rem
            }

            .left-0 {
                left: 0px
            }

            .right-4 {
                right: 1rem
            }

            .top-1\/2 {
                top: 50%
            }

            .z-10 {
                z-index: 10
            }

            .z-50 {
                z-index: 50
            }

            .mx-auto {
                margin-left: auto;
                margin-right: auto
            }

            .mb-4 {
                margin-bottom: 1rem
            }

            .mb-6 {
                margin-bottom: 1.5rem
            }

            .ml-1 {
                margin-left: 0.25rem
            }

            .ml-2 {
                margin-left: 0.5rem
            }

            .ml-3 {
                margin-left: 0.75rem
            }

            .ml-4 {
                margin-left: 1rem
            }

            .mr-2 {
                margin-right: 0.5rem
            }

            .mt-0\.5 {
                margin-top: 0.125rem
            }

            .mt-10 {
                margin-top: 2.5rem
            }

            .mt-12 {
                margin-top: 3rem
            }

            .mt-16 {
                margin-top: 4rem
            }

            .mt-2 {
                margin-top: 0.5rem
            }

            .mt-4 {
                margin-top: 1rem
            }

            .mt-5 {
                margin-top: 1.25rem
            }

            .mt-6 {
                margin-top: 1.5rem
            }

            .mt-8 {
                margin-top: 2rem
            }

            .flex {
                display: flex
            }

            .inline-flex {
                display: inline-flex
            }

            .grid {
                display: grid
            }

            .hidden {
                display: none
            }

            .h-0\.5 {
                height: 0.125rem
            }

            .h-10 {
                height: 2.5rem
            }

            .h-12 {
                height: 3rem
            }

            .h-16 {
                height: 4rem
            }

            .h-2 {
                height: 0.5rem
            }

            .h-5 {
                height: 1.25rem
            }

            .h-6 {
                height: 1.5rem
            }

            .h-64 {
                height: 16rem
            }

            .h-8 {
                height: 2rem
            }

            .w-10 {
                width: 2.5rem
            }

            .w-12 {
                width: 3rem
            }

            .w-16 {
                width: 4rem
            }

            .w-5 {
                width: 1.25rem
            }

            .w-6 {
                width: 1.5rem
            }

            .w-64 {
                width: 16rem
            }

            .w-auto {
                width: auto
            }

            .w-full {
                width: 100%
            }

            .max-w-3xl {
                max-width: 48rem
            }

            .max-w-7xl {
                max-width: 90rem
            }

            .max-w-md {
                max-width: 28rem
            }

            .flex-shrink-0 {
                flex-shrink: 0
            }

            .-translate-y-1\/2 {
                --tw-translate-y: -50%;
                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 {
                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))
            }

            @keyframes pulse {
                50% {
                    opacity: .5
                }
            }

            .animate-pulse {
                animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
            }

            .grid-cols-1 {
                grid-template-columns: repeat(1, minmax(0, 1fr))
            }

            .flex-col {
                flex-direction: column
            }

            .items-start {
                align-items: flex-start
            }

            .items-center {
                align-items: center
            }

            .justify-center {
                justify-content: center
            }

            .justify-between {
                justify-content: space-between
            }

            .gap-4 {
                gap: 1rem
            }

            .gap-8 {
                gap: 2rem
            }

            .space-x-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(0.5rem * var(--tw-space-x-reverse));
                margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-x-4 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-x-reverse: 0;
                margin-right: calc(1rem * var(--tw-space-x-reverse));
                margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
            }

            .space-y-10 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(2.5rem * var(--tw-space-y-reverse))
            }

            .space-y-2 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))
            }

            .space-y-3 > :not([hidden]) ~ :not([hidden]) {
                --tw-space-y-reverse: 0;
                margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
                margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))
            }

            .overflow-hidden {
                overflow: hidden
            }

            .rounded {
                border-radius: 0.25rem
            }

            .rounded-full {
                border-radius: 9999px
            }

            .rounded-lg {
                border-radius: 0.5rem
            }

            .rounded-md {
                border-radius: 0.375rem
            }

            .rounded-xl {
                border-radius: 0.75rem
            }

            .border {
                border-width: 1px
            }

            .border-l-4 {
                border-left-width: 4px
            }

            .border-t {
                border-top-width: 1px
            }

            .border-gray-200 {
                --tw-border-opacity: 1;
                border-color: rgb(229 231 235 / var(--tw-border-opacity, 1))
            }

            .border-indigo-500 {
                --tw-border-opacity: 1;
                border-color: rgb(46 114 156 / var(--tw-border-opacity, 1))
            }

            .border-indigo-600 {
                --tw-border-opacity: 1;
                border-color: rgb(79 70 229 / var(--tw-border-opacity, 1))
            }

            .bg-gray-100 {
                --tw-bg-opacity: 1;
                background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1))
            }

            .bg-gray-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
            }
            .bg-coral-light {
                --tw-bg-opacity: 1;
                background-color:#FFF6F2;
            }
            .bg-blue-light {
                --tw-bg-opacity: 1;
                background-color:#F2F8FF;
            }
            .bg-indigo-100 {
                --tw-bg-opacity: 1;
                background-color:#E2E6F2;
            }

            .bg-indigo-200 {
                --tw-bg-opacity: 1;
                background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-50 {
                --tw-bg-opacity: 1;
                background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1))
            }

            .bg-indigo-600 {
                --tw-bg-opacity: 1;
                        background-image: linear-gradient(90deg, #31719B, #193242);

            }
            .hero-video{
                display: contents;
                float: right;
              
            }
            .hero-video iframe{
                border-radius: 20px !important;
                float: right;
                width: 80%; height: 380px;
            }
            .hero-video img{
                border-radius: 20px !important;
                float: right;
                width: 400px; height: auto;
            }
            .arrow-btn{
                float: right;
                padding-top: 5px;
                padding-left: 10px;
            }
            .text-gradient-blue {
                background: #31719B;
                    background: linear-gradient(to right, #31719B 0%, #193242 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
            }
             .text-color-coral {
                color: #FC7D72;
            }
            .text-color-coral {
                color: #FC7D72;
            }
            .bg-hero {

                background-size: cover;
                background-attachment: scroll;
                padding: 10px 0px 3rem 0px;
                background-image: url(../img/herobg.svg);
                width: 100%;
                height: auto;
                min-height: auto;
                background-color: #ffffff;
                margin-bottom: 1rem;
                background-position: 44% 50%;
               min-height:768px;
            }

            


            .bg-white {
                --tw-bg-opacity: 1;
                background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1))
            }

            .p-2 {
                padding: 0.5rem
            }

            .p-6 {
                padding: 1.5rem
            }

            .p-8 {
                padding: 2rem
            }

            .px-3 {
                padding-left: 0.75rem;
                padding-right: 0.75rem
            }

            .px-4 {
                padding-left: 1rem;
                padding-right: 1rem
            }

            .px-6 {
                padding-left: 1.5rem;
                padding-right: 1.5rem
            }

            .px-8 {
                padding-left: 2rem;
                padding-right: 2rem
            }

            .py-0\.5 {
                padding-top: 0.125rem;
                padding-bottom: 0.125rem
            }

            .py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem
            }

            .py-12 {
                padding-top: 3rem;
                padding-bottom: 3rem
            }

            .py-16 {
                padding-top: 100px;
                padding-bottom: 100px
            }

            .py-2 {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem
            }

            .py-3 {
                padding-top: 0.75rem;
                padding-bottom: 0.75rem
            }

            .py-6 {
                padding-top: 1.5rem;
                padding-bottom: 1.5rem
            }

            .pb-16 {
                padding-bottom: 4rem
            }

            .pl-4 {
                padding-left: 1rem
            }

            .pt-24 {
                padding-top: 6rem
            }

            .text-center {
                text-align: center
            }

            .text-3xl {
                font-size: 40px;
                line-height: 2.25rem
            }

            .text-lg {
                font-size:24px;
                line-height: 1.75rem
            }

            .text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem
            }

            .text-xl {
                font-size: 16px;
                line-height: 1.75rem
            }

            .font-bold {
                font-weight: 700
            }

            .font-medium {
                font-weight: 500
            }

            .font-semibold {
                font-weight: 600
            }

            .uppercase {
                text-transform: uppercase
            }

            .italic {
                font-style: italic
            }

            .not-italic {
                font-style: normal
            }

            .leading-tight {
                line-height: 1.25
            }

            .tracking-wider {
                letter-spacing: 0.05em
            }

            .text-gray-400 {
                --tw-text-opacity: 1;
                color: rgb(156 163 175 / var(--tw-text-opacity, 1))
            }

            .text-gray-500 {
                --tw-text-opacity: 1;
                color: rgb(107 114 128 / var(--tw-text-opacity, 1))
            }

            .text-gray-600 {
                --tw-text-opacity: 1;
                
            }

            .text-gray-800 {
                --tw-text-opacity: 1;
                color: rgb(31 41 55 / var(--tw-text-opacity, 1))
            }

            .text-gray-900 {
                --tw-text-opacity: 1;
                color: rgb(17 24 39 / var(--tw-text-opacity, 1))
            }

            .text-indigo-500 {
                --tw-text-opacity: 1;
                /* color: rgb(46 114 156 / var(--tw-text-opacity, 1)) */
                color: rgb(46 114 156);
            }

            .text-indigo-600 {
                --tw-text-opacity: 1;
                color: #31719B;
            }
            .text-coral {
                --tw-text-opacity: 1;
                color:#FC7D72;
            }

            .text-indigo-800 {
                --tw-text-opacity: 1;
                color:#31719B;
            }

            .text-white {
                --tw-text-opacity: 1;
                color: rgb(255 255 255 / var(--tw-text-opacity, 1))
            }

            .text-yellow-400 {
                --tw-text-opacity: 1;
                color: rgb(250 204 21 / var(--tw-text-opacity, 1))
            }

            .shadow-2xl {
                --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
                --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-lg {
                --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -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)
            }

            .shadow-md {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .shadow-sm {
                --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .transition {
                transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
                transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-duration: 150ms
            }

            .duration-150 {
                transition-duration: 150ms
            }

            .duration-300 {
                transition-duration: 300ms
            }

            .ease-in-out {
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
            }

            .hover\:-translate-y-1:hover {
                --tw-translate-y: -0.25rem;
                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\:bg-indigo-300:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(165 180 252 / var(--tw-bg-opacity, 1))
            }

            .hover\:bg-indigo-50:hover {
                --tw-bg-opacity: 1;
                background-color:#fff;
            }

            .hover\:bg-indigo-700:hover {
                --tw-bg-opacity: 1;
                background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1))
            }

            .hover\:text-gray-900:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156);
            }

            .hover\:text-indigo-500:hover {
                --tw-text-opacity: 1;
                color:#FC7D72;
            }

            .hover\:text-indigo-600:hover {
                --tw-text-opacity: 1;
                color: rgb(46 114 156) !important;
            }

            .hover\:shadow-md:hover {
                --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
            }

            .hover\:shadow-xl:hover {
                --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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
            }

            @media (min-width: 640px) {
                .sm\:flex-row {
                    flex-direction:row
                }

                .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(1rem * var(--tw-space-x-reverse));
                    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-y-reverse: 0;
                    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
                    margin-bottom: calc(0px * var(--tw-space-y-reverse))
                }

                .sm\:px-6 {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem
                }
            }

            @media (min-width: 768px) {
                .md\:mt-0 {
                    margin-top:0px
                }

                .md\:block {
                    display: block
                }

                .md\:flex {
                    display: flex
                }

                .md\:hidden {
                    display: none
                }

                .md\:w-1\/2 {
                    width: 50%
                }

                .md\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .md\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .md\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .md\:grid-cols-\[2fr\2c 1fr\2c 3fr\2c 1fr\] {
                    grid-template-columns: 2fr 1fr 3fr 1fr
                }

                .md\:flex-row {
                    flex-direction: row
                }

                .md\:items-center {
                    align-items: center
                }

                .md\:justify-between {
                    justify-content: space-between
                }

                .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
                    --tw-space-x-reverse: 0;
                    margin-right: calc(2rem * var(--tw-space-x-reverse));
                    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)))
                }

                .md\:pb-24 {
                    padding-bottom: 6rem
                }

                .md\:pr-12 {
                    padding-right: 3rem
                }

                .md\:pt-32 {
                    padding-top: 8rem
                }

                .md\:text-4xl {
                    font-size: 2.25rem;
                    line-height: 2.5rem
                }
            }

            @media (min-width: 1024px) {
                .lg\:col-span-5 {
                    grid-column:span 5 / span 5
                }

                .lg\:col-span-7 {
                    grid-column: span 7 / span 7
                }

                .lg\:mt-0 {
                    margin-top: 0px
                }

                .lg\:grid {
                    display: grid
                }

                .lg\:grid-cols-12 {
                    grid-template-columns: repeat(12, minmax(0, 1fr))
                }

                .lg\:grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr))
                }

                .lg\:grid-cols-3 {
                    grid-template-columns: repeat(3, minmax(0, 1fr))
                }

                .lg\:grid-cols-4 {
                    grid-template-columns: repeat(4, minmax(0, 1fr))
                }

                .lg\:grid-cols-\[3fr\2c 4fr\2c 2fr\2c 2fr\] {
                    grid-template-columns: 3fr 4fr 2fr 2fr
                }

                .lg\:gap-8 {
                    gap: 2rem
                }

                .lg\:px-8 {
                    padding-left: 2rem;
                    padding-right: 2rem
                }

                .lg\:text-5xl {
                    font-size: 71px;
                    line-height: 1
                }
            }


           /* --- Default Overrides - Personal Preference --- */


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

form > * {
	outline: none;
}

a {
	text-decoration: none;
	color: inherit;
}

ul, li {
	list-style: none;
}


/* --- Clearfix for floated Elements --- */

/* I never ended up using this for the nav-bar */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}



.site-logo {
	font-size: 2rem;
	font-weight: bolder;
	text-transform: uppercase;
	letter-spacing: 0.8rem;
	    margin-bottom: 0px;
    float: left;
}


.gradient-bg {
    --tw-bg-opacity: 1;
    background-image: linear-gradient(90deg, #31719B, #193242);
}


.kdkproductsbox {
    font-size: 14px;

}
span.kdkproductsbox_line {
    padding: 0px 5px 0px 5px;
    color: #a7a7a7;
}
/* --- Elements --- */

.nav-bar .container{text-align: center; text-align: center;
    width: 100%;} 


.nav-bar {
    display: inline-flex;
    padding: 10px;
	position: fixed; /* lock to top */
	top: 0;
	width: 100%; /* full width */
	background-color: white;
	height: auto;
    z-index: 999;
    background: #ffffff;
  -webkit-box-shadow: 0 0 3px rgba(60, 72, 88, 0.15);
  box-shadow: 0px 3px 3px rgb(60 72 88 / 15%);
}



/* Hide checkbox that controls Mobile Nav Button*/
#drop-down-cbox {
	display: none;
}

/* Mobile Nav Button */
#drop-down-cbox + label {
	position: absolute;
    top: 0;
    right: 0;
	display: none;
	width: 60px;
	height: 60px;
	overflow: hidden;
	background-color: transparent;
	transition: all 300ms ease-in-out;
}

/* Mobile Nav Button Bars */
#drop-down-cbox + label span {
	position: absolute;
	display: block;
	background-color: #31719B;
	width: 34px;
	height: 4px;
	border-radius: 2px;
	left: 50%;
	transform: translate(-50%, -50%); /* centering trick */
	transition: all 300ms ease-in-out;
}

/* Mobile Nav Button Bars Invididually */
#drop-down-cbox + label span:nth-child(1) {
	top: 35%; /* evenly spaced */
}
#drop-down-cbox + label span:nth-child(2) {
	top: 50%; /* evenly spaced */
}
#drop-down-cbox + label span:nth-child(3) {
	top: 65%; /* evenly spaced */
}

/* Mobile Nav Button Styling for Checked */
#drop-down-cbox:checked + label {
	background-color: #fc7d72;
}

#drop-down-cbox:checked + label span {
	background-color: white;
}

/* Transform the bars into an 'X' */
#drop-down-cbox:checked + label span:nth-child(1) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg); /* center, then rotate */
}
#drop-down-cbox:checked + label span:nth-child(2) {
	left: -150%; /* move center bar out of the picture */
}
#drop-down-cbox:checked + label span:nth-child(3) {
	top: 50%;
	transform: translate(-50%, -50%) rotate(-45deg); /* center, then rotate */
}

/* Main Nav Desktop */
.main-nav {
	display: inline-block;
    text-align: left;
    font-size: 14px;
    
}
.download-trial-btn {
    float: right;
    margin-top: 10px;
}
ul.main-nav.small-caps {
    margin-bottom: 0px;
    margin-top: 9px;
}
.main-nav li {
	display: inline-block;
	width: auto;
	height: 40px;
	line-height: 40px; /* vertically center text, matches height */
	text-align: center;
    padding: 0 30px;
        text-transform: uppercase;
}
.main-nav li a {
    color: #31719b;
    padding: 0px;
}

.main-nav li a:hover {
       color: #fc7d72;
    text-decoration: none;
}

.main-nav li a,
.main-nav li span {
	display: block;
	width: 100%;
	height: 100%;
    font-weight: 700;
}

.main-nav li a:hover,
.main-nav li span:hover {
	
   color: #fc7d72;
}

.main-nav li > ul {
	max-height: 0px; /* max-height instead of height, height can't transition to auto */
	transition: all 500ms ease-in-out;
	overflow: hidden; /* make it so nav doesn't show beyond the 0px max-height */
}

.main-nav li:hover > ul {
	max-height: 180px; /* height x how many links */
	height: auto;
}

.main-nav li > ul li a,
.main-nav li > ul li span {
	background-color: white;
}

.main-nav li > ul li a:hover,
.main-nav li > ul li span:hover {
	background-color: #666;
	color: white;
	border-bottom: none;
}

button.zepdf_dowloadbt {
    background-color: #2e729c;
    color: #fff;
    text-transform: uppercase;
    border:1px solid  #2e729c;
}

span.sarred {
    color: red;
}

.download-trial-btn a:hover{
    text-decoration: none;
}

button.zepdf_spportbt {
    background-color: #f37b72;
    color: #fff;
    text-transform: uppercase;
    border: 1px solid #f37b72;
}

button.zepdf_dowloadbt:hover {
    background-color: #fff;
    color: #2e729c;
    text-transform: uppercase;
}

button.zepdf_spportbt:hover {
    background-color: #fff;
    color: #f37b72;
    text-transform: uppercase;
}


/* Tablet and Mobile View */
@media (max-width: 768px) {


.hero-video iframe{
                border-radius: 5px !important;
              
                width: auto; height: auto;
            }
    .download-trial-btn {
    margin-right: 60px;
    
}
	.site-logo {
		font-size: 1.5rem;
		flex-grow: 1;
		text-align: center;
	}
	
	#drop-down-cbox + label {
		display: block; /* unhide the mobile nav button */
	}
	
 
	.main-nav {
		max-height: 0px; /* same vertical grow transition trick as above */
		height: calc(100vh - 60px); /* take full vertical viewport height, -60px for nav-bar */
		overflow: hidden;
		position: absolute;
		top: 60px;
		line-height: auto;
		left: 0;
		width: 100%;
		flex-direction: column;
		background-color: white;
		transition: all 500ms ease-in-out;
	}
	
	#drop-down-cbox:checked ~ .main-nav {
		max-height: calc(100vh - 60px);
		transition: all 500ms ease-in-out;
	}

     .main-nav li  {
        width: 100%;
		padding: 0;
        height: auto;
        line-height: 50px;
        text-align: left;
	}

     .main-nav li a{
        padding-left: 15px
	}

	.main-nav li span {
		position: relative;
	}
	
	/* design and position downward arrow */
	.main-nav li span:after {
		content: "";
		width: 6px;
		height: 6px;
		position: absolute;
		top: 50%;
		margin-top: -2px;
		margin-left: 8px;
		transform: translateY(-50%) rotate(-45deg);
		border-left: 2px solid #666;
		border-bottom: 2px solid #666;
	}
	
	.main-nav li a:hover,
	.main-nav li span:hover {
		background-color: #fc7d72;
		color: white;
		border-bottom: none;
	}
	
	.main-nav li > ul li {
		position: relative;
	}
	
	.main-nav li > ul li a,
	.main-nav li > ul li span {
		background-color: #eee;
	}
	
}

blockquote {
  font-style: italic;
  font-size: 17px;
  font-weight: 700;
  border-left: 4px solid #FC7D72;
}

.swiper {
      width: 100%;
      height: auto;
      overflow: hidden;
      padding: 30px 0px 60px 0px !important;
      
    }
    .swiper-slide {
      display: flex;
      padding: 50px 30px 80px 30px;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
      background: #fff;
      border-radius: 30px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      
    }

    .swiper-pagination-bullet {
      background: #ccc;
      opacity: 1;
      padding:5px;
    }
    .swiper-pagination-bullet-active {
      background: #FC7D72 !important;
    }

.marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  top: 20px;
}

.marquee-content {
  display: flex;
  width: max-content;
  animation: marquee 20s linear infinite;
  animation-play-state: running;
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-item {
  flex-shrink: 0;
  width: auto;
  height: auto;
  padding: 0px 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
  border-radius: 15px;
  background-color: #fff;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.marquee-item img{
  
  width: 120px;
  height: auto;
}

.marquee:hover .marquee-item {
  filter: blur(4px);
  transform: scale(0.9);
}

.marquee .marquee-item:hover {
  filter: none;
  transform: scale(1.4);
  
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}




     p.ITRmain_trusted_textbox {
          bottom: -2rem;
          position: relative;
          font-size: 40px;
          margin-bottom: 2px;
          color: #000;

          & span.ITRmain_trusted_textclr_black {
              font-weight: bold;
          }

          & span.ITRmain_trusted_textclr_blue {
            background: linear-gradient(#31719B 25%, #112735 61%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: bold;
        }}

        .trustbottomimgbox {
            position: relative;
            bottom: -1.5rem;
            display: inline-flex;
            margin-bottom: 20px;

          }
          .trustbottomimgbox img {
            vertical-align: middle;
    border-style: none;
          }