body {
         background-color: #121212;
         color: white;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }

     .service-card {
         transition: all 0.3s ease;
     }

     .service-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 25px rgba(242, 106, 29, 0.3);
     }

     .category-title {
         position: relative;
         overflow: hidden;
     }

     .category-title::after {
         content: "";
         position: absolute;
         height: 1px;
         background-color: #f26a1d;
         width: 100%;
         left: 0;
         bottom: 0;
     }

     /* Animations */
     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(20px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     @keyframes pulse {
         0% {
             transform: scale(1);
         }

         50% {
             transform: scale(1.05);
         }

         100% {
             transform: scale(1);
         }
     }

     @keyframes float {
         0% {
             transform: translateY(0px);
         }

         50% {
             transform: translateY(-10px);
         }

         100% {
             transform: translateY(0px);
         }
     }

     @keyframes glow {
         0% {
             box-shadow: 0 0 5px rgba(242, 106, 29, 0.5);
         }

         50% {
             box-shadow: 0 0 20px rgba(242, 106, 29, 0.8);
         }

         100% {
             box-shadow: 0 0 5px rgba(242, 106, 29, 0.5);
         }
     }

     .animate-fadeIn {
         animation: fadeIn 0.6s ease-out forwards;
     }

     .animate-pulse {
         animation: pulse 2s infinite;
     }

     .animate-float {
         animation: float 6s ease-in-out infinite;
     }

     .animate-glow {
         animation: glow 3s infinite;
     }

     /* Staggered animations for cards */
     .service-card:nth-child(1) {
         animation-delay: 0.1s;
     }

     .service-card:nth-child(2) {
         animation-delay: 0.2s;
     }

     .service-card:nth-child(3) {
         animation-delay: 0.3s;
     }

     .service-card:nth-child(4) {
         animation-delay: 0.4s;
     }

     .service-card:nth-child(5) {
         animation-delay: 0.5s;
     }

     .service-card:nth-child(6) {
         animation-delay: 0.6s;
     }

     .service-card:nth-child(7) {
         animation-delay: 0.7s;
     }

     .service-card:nth-child(8) {
         animation-delay: 0.8s;
     }

     .service-card:nth-child(9) {
         animation-delay: 0.9s;
     }

     /* Modal animation */
     @keyframes scaleIn {
         from {
             opacity: 0;
             transform: scale(0.9);
         }

         to {
             opacity: 1;
             transform: scale(1);
         }
     }

     .modal-content {
         animation: scaleIn 0.3s ease-out forwards;
     }

     /* Custom scrollbar */
     ::-webkit-scrollbar {
         width: 8px;
     }

     ::-webkit-scrollbar-track {
         background: #1a1a1a;
     }

     ::-webkit-scrollbar-thumb {
         background: #f26a1d;
         border-radius: 4px;
     }

     ::-webkit-scrollbar-thumb:hover {
         background: #d45a16;
     }

     /* Footer hover effects */
     .footer-link {
         position: relative;
         transition: all 0.3s ease;
     }

     .footer-link::after {
         content: '';
         position: absolute;
         width: 0;
         height: 2px;
         bottom: -2px;
         left: 0;
         background-color: #f26a1d;
         transition: width 0.3s ease;
     }

     .footer-link:hover::after {
         width: 100%;
     }

     /* Tooltip */
     .tooltip {
         position: relative;
     }

     .tooltip .tooltip-text {
         visibility: hidden;
         width: 120px;
         background-color: #000;
         color: #fff;
         text-align: center;
         border-radius: 6px;
         padding: 5px;
         position: absolute;
         z-index: 1;
         bottom: 125%;
         left: 50%;
         margin-left: -60px;
         opacity: 0;
         transition: opacity 0.3s;
     }

     .tooltip .tooltip-text::after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
         border-color: #000 transparent transparent transparent;
     }

     .tooltip:hover .tooltip-text {
         visibility: visible;
         opacity: 1;
     }

     /* Dropdown menu */
     .dropdown {
         position: relative;
         display: inline-block;
     }

     .dropdown-content {
         display: none;
         position: absolute;
         background-color: #1a1a1a;
         min-width: 200px;
         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
         z-index: 1;
         border-radius: 8px;
         border: 1px solid rgba(242, 106, 29, 0.3);
         overflow: hidden;
     }

     .dropdown:hover .dropdown-content {
         display: block;
         animation: fadeIn 0.3s ease-out forwards;
     }

     .dropdown-item {
         padding: 12px 16px;
         text-decoration: none;
         display: block;
         transition: all 0.2s;
     }

     .dropdown-item:hover {
         background-color: rgba(242, 106, 29, 0.2);
     }

     /* Video section */
     .video-container {
         position: relative;
         padding-bottom: 56.25%;
         /* 16:9 aspect ratio */
         height: 0;
         overflow: hidden;
         border-radius: 8px;
     }

     .video-container iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         border: none;
     }

     .video-card {
         transition: all 0.3s ease;
     }

     .video-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 25px rgba(242, 106, 29, 0.3);
     }

     /* Device section */
     .device-card {
         transition: all 0.3s ease;
         overflow: hidden;
     }

     .device-card:hover {
         transform: translateY(-5px);
         box-shadow: 0 10px 25px rgba(242, 106, 29, 0.3);
     }

     .device-card img {
         transition: all 0.5s ease;
     }

     .device-card:hover img {
         transform: scale(1.05);
     }

     *,
     ::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
     }

     .container {
         width: 100%
     }

     @media (min-width: 640px) {
         .container {
             max-width: 640px
         }
     }

     @media (min-width: 768px) {
         .container {
             max-width: 768px
         }
     }

     @media (min-width: 1024px) {
         .container {
             max-width: 1024px
         }
     }

     @media (min-width: 1280px) {
         .container {
             max-width: 1280px
         }
     }

     @media (min-width: 1536px) {
         .container {
             max-width: 1536px
         }
     }

     .fixed {
         position: fixed
     }

     .absolute {
         position: absolute
     }

     .relative {
         position: relative
     }

     .sticky {
         position: sticky
     }

     .inset-0 {
         inset: 0px
     }

     .bottom-0 {
         bottom: 0px
     }

     .bottom-6 {
         bottom: 1.5rem
     }

     .left-0 {
         left: 0px
     }

     .right-0 {
         right: 0px
     }

     .right-6 {
         right: 1.5rem
     }

     .right-full {
         right: 100%
     }

     .top-0 {
         top: 0px
     }

     .z-50 {
         z-index: 50
     }

     .mx-4 {
         margin-left: 1rem;
         margin-right: 1rem
     }

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

     .mb-10 {
         margin-bottom: 2.5rem
     }

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

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

     .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-4 {
         margin-left: 1rem
     }

     .mr-1 {
         margin-right: 0.25rem
     }

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

     .mr-3 {
         margin-right: 0.75rem
     }

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

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

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

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

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

     .inline-block {
         display: inline-block
     }

     .flex {
         display: flex
     }

     .grid {
         display: grid
     }

     .hidden {
         display: none
     }

     .aspect-video {
         aspect-ratio: 16 / 9
     }

     .h-1\/3 {
         height: 33.333333%
     }

     .h-10 {
         height: 2.5rem
     }

     .h-12 {
         height: 3rem
     }

     .h-16 {
         height: 4rem
     }

     .h-4 {
         height: 1rem
     }

     .h-48 {
         height: 12rem
     }

     .h-5 {
         height: 1.25rem
     }

     .h-6 {
         height: 1.5rem
     }

     .h-8 {
         height: 2rem
     }

     .h-full {
         height: 100%
     }

     .h-20 {
         height: 5rem
     }

     .min-h-screen {
         min-height: 100vh
     }

     .w-1 {
         width: 0.25rem
     }

     .w-1\/3 {
         width: 33.333333%
     }

     .w-10 {
         width: 2.5rem
     }

     .w-12 {
         width: 3rem
     }

     .w-16 {
         width: 4rem
     }

     .w-2\/3 {
         width: 66.666667%
     }

     .w-4 {
         width: 1rem
     }

     .w-5 {
         width: 1.25rem
     }

     .w-6 {
         width: 1.5rem
     }

     .w-8 {
         width: 2rem
     }

     .w-full {
         width: 100%
     }

     .w-20 {
         width: 5rem
     }

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

     .max-w-lg {
         max-width: 32rem
     }

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

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

     .cursor-pointer {
         cursor: pointer
     }

     .list-inside {
         list-style-position: inside
     }

     .list-decimal {
         list-style-type: decimal
     }

     .list-disc {
         list-style-type: disc
     }

     .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-end {
         justify-content: flex-end
     }

     .justify-center {
         justify-content: center
     }

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

     .gap-3 {
         gap: 0.75rem
     }

     .gap-6 {
         gap: 1.5rem
     }

     .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-1> :not([hidden])~ :not([hidden]) {
         --tw-space-y-reverse: 0;
         margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
         margin-bottom: calc(0.25rem * 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-4> :not([hidden])~ :not([hidden]) {
         --tw-space-y-reverse: 0;
         margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
         margin-bottom: calc(1rem * var(--tw-space-y-reverse))
     }

     .overflow-hidden {
         overflow: hidden
     }

     .whitespace-nowrap {
         white-space: nowrap
     }

     .rounded {
         border-radius: 0.25rem
     }

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

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

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

     .border {
         border-width: 1px
     }

     .border-b {
         border-bottom-width: 1px
     }

     .border-b-2 {
         border-bottom-width: 2px
     }

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

     .border-custom-orange {
         --tw-border-opacity: 1;
         border-color: rgb(242 106 29 / var(--tw-border-opacity, 1))
     }

     .border-custom-orange\/30 {
         border-color: rgb(242 106 29 / 0.3)
     }

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

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

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

     .bg-black\/50 {
         background-color: rgb(0 0 0 / 0.5)
     }

     .bg-custom-orange {
         --tw-bg-opacity: 1;
         background-color: rgb(242 106 29 / var(--tw-bg-opacity, 1))
     }

     .bg-custom-orange\/10 {
         background-color: rgb(242 106 29 / 0.1)
     }

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

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

     .bg-green-500 {
         --tw-bg-opacity: 1;
         background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1))
     }

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

     .bg-opacity-40 {
         --tw-bg-opacity: 0.4
     }

     .bg-opacity-75 {
         --tw-bg-opacity: 0.75
     }

     .bg-gradient-to-r {
         background-image: linear-gradient(to right, var(--tw-gradient-stops))
     }

     .bg-gradient-to-t {
         background-image: linear-gradient(to top, var(--tw-gradient-stops))
     }

     .from-black {
         --tw-gradient-from: #000 var(--tw-gradient-from-position);
         --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
     }

     .from-custom-orange\/80 {
         --tw-gradient-from: rgb(242 106 29 / 0.8) var(--tw-gradient-from-position);
         --tw-gradient-to: rgb(242 106 29 / 0) var(--tw-gradient-to-position);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
     }

     .to-purple-700\/80 {
         --tw-gradient-to: rgb(126 34 206 / 0.8) var(--tw-gradient-to-position)
     }

     .to-transparent {
         --tw-gradient-to: transparent var(--tw-gradient-to-position)
     }

     .object-contain {
         object-fit: contain
     }

     .object-cover {
         object-fit: cover
     }

     .p-4 {
         padding: 1rem
     }

     .p-6 {
         padding: 1.5rem
     }

     .p-8 {
         padding: 2rem
     }

     .p-3 {
         padding: 0.75rem
     }

     .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
     }

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

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

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

     .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-2 {
         padding-bottom: 0.5rem
     }

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

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

     .text-center {
         text-align: center
     }

     .text-2xl {
         font-size: 1.5rem;
         line-height: 2rem
     }

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

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

     .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
     }

     .text-custom-orange {
         --tw-text-opacity: 1;
         color: rgb(242 106 29 / var(--tw-text-opacity, 1))
     }

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

     .text-gray-300 {
         --tw-text-opacity: 1;
         color: rgb(209 213 219 / var(--tw-text-opacity, 1))
     }

     .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-green-500 {
         --tw-text-opacity: 1;
         color: rgb(34 197 94 / var(--tw-text-opacity, 1))
     }

     .text-purple-700 {
         --tw-text-opacity: 1;
         color: rgb(126 34 206 / var(--tw-text-opacity, 1))
     }

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

     .text-white\/90 {
         color: rgb(255 255 255 / 0.9)
     }

     .opacity-0 {
         opacity: 0
     }

     .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-custom-orange\/10 {
         --tw-shadow-color: rgb(242 106 29 / 0.1);
         --tw-shadow: var(--tw-shadow-colored)
     }

     .shadow-custom-orange\/20 {
         --tw-shadow-color: rgb(242 106 29 / 0.2);
         --tw-shadow: var(--tw-shadow-colored)
     }

     .transition-all {
         transition-property: all;
         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
     }

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

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

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

     .hover\:bg-custom-orange\/20:hover {
         background-color: rgb(242 106 29 / 0.2)
     }

     .hover\:bg-custom-orange\/80:hover {
         background-color: rgb(242 106 29 / 0.8)
     }

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

     .hover\:bg-green-600:hover {
         --tw-bg-opacity: 1;
         background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1))
     }

     .hover\:text-custom-orange:hover {
         --tw-text-opacity: 1;
         color: rgb(242 106 29 / var(--tw-text-opacity, 1))
     }

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

     .hover\:shadow-lg:hover {
         --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)
     }

     .hover\:shadow-custom-orange\/20:hover {
         --tw-shadow-color: rgb(242 106 29 / 0.2);
         --tw-shadow: var(--tw-shadow-colored)
     }

     .hover\:shadow-custom-orange\/30:hover {
         --tw-shadow-color: rgb(242 106 29 / 0.3);
         --tw-shadow: var(--tw-shadow-colored)
     }

     .group:hover .group-hover\:scale-110 {
         --tw-scale-x: 1.1;
         --tw-scale-y: 1.1;
         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))
     }

     .group:hover .group-hover\:opacity-100 {
         opacity: 1
     }

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

         .md\:w-auto {
             width: auto
         }

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

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

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

         .md\:justify-end {
             justify-content: flex-end
         }

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

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

         .md\:text-5xl {
             font-size: 3rem;
             line-height: 1
         }
     }

     @media (min-width: 1024px) {
         .lg\:grid-cols-3 {
             grid-template-columns: repeat(3, minmax(0, 1fr))
         }
     }