*,
    ::after,
    ::before {
      box-sizing: border-box;
      border-width: 0;
      border-style: solid;
      border-color: #e5e7eb
    }

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

    html {
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
      -moz-tab-size: 4;
      -o-tab-size: 4;
      tab-size: 4;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      font-feature-settings: normal;
      font-variation-settings: normal
    }

    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-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-size: 100%;
      font-weight: inherit;
      line-height: inherit;
      color: inherit;
      margin: 0;
      padding: 0
    }

    button,
    select {
      text-transform: none
    }

    [type=button],
    [type=reset],
    [type=submit],
    button {
      -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
    }

    textarea {
      resize: vertical
    }

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

    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] {
      display: none
    }

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

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

    .absolute {
      position: absolute
    }

    .relative {
      position: relative
    }

    .sticky {
      position: sticky
    }

    .inset-0 {
      inset: 0px
    }

    .bottom-0 {
      bottom: 0
    }

    .bottom-20 {
      bottom: 5rem
    }

    .left-0 {
      left: 0
    }

    .right-0 {
      right: 0
    }

    .top-0 {
      top: 0
    }

    .top-20 {
      top: 5rem
    }

    .z-50 {
      z-index: 50
    }

    .order-1 {
      order: 1
    }

    .order-2 {
      order: 2
    }

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

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

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

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

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

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

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

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

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

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

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

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

    .inline-block {
      display: inline-block
    }

    .flex {
      display: flex
    }

    .inline-flex {
      display: inline-flex
    }

    .grid {
      display: grid
    }

    .hidden {
      display: none
    }

    .h-1 {
      height: .25rem
    }

    .h-12 {
      height: 3rem
    }

    .h-14 {
      height: 3.5rem
    }

    .h-16 {
      height: 4rem
    }

    .h-24 {
      height: 6rem
    }

    .h-28 {
      height: 7rem
    }

    .h-64 {
      height: 16rem
    }

    .h-80 {
      height: 20rem
    }

    .h-96 {
      height: 24rem
    }

    .h-auto {
      height: auto
    }

    .w-12 {
      width: 3rem
    }

    .w-14 {
      width: 3.5rem
    }

    .w-16 {
      width: 4rem
    }

    .w-24 {
      width: 6rem
    }

    .w-64 {
      width: 16rem
    }

    .w-80 {
      width: 20rem
    }

    .w-96 {
      width: 24rem
    }

    .w-auto {
      width: auto
    }

    .w-full {
      width: 100%
    }

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

    .max-w-4xl {
      max-width: 56rem
    }

    .max-w-5xl {
      max-width: 64rem
    }

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

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

    .-translate-x-1\/2 {
      --tw-translate-x: -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))
    }

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

    .translate-x-1\/2 {
      --tw-translate-x: 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))
    }

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

    .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-12 {
      gap: 3rem
    }

    .gap-2 {
      gap: .5rem
    }

    .gap-3 {
      gap: .75rem
    }

    .gap-4 {
      gap: 1rem
    }

    .gap-6 {
      gap: 1.5rem
    }

    .gap-8 {
      gap: 2rem
    }

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

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

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

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

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

    .overflow-hidden {
      overflow: hidden
    }

    .rounded-2xl {
      border-radius: 1rem
    }

    .rounded-3xl {
      border-radius: 1.5rem
    }

    .rounded-\[var\(--button-rounded-radius\)\] {
      border-radius: var(--button-rounded-radius)
    }

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

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

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

    .border {
      border-width: 1px
    }

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

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

    .border-\[var\(--light-border-color\)\] {
      border-color: var(--light-border-color)
    }

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

    .bg-\[\#FF9900\] {
      --tw-bg-opacity: 1;
      background-color: rgb(255 153 0 / var(--tw-bg-opacity))
    }

    .bg-\[\#FFE600\] {
      --tw-bg-opacity: 1;
      background-color: rgb(255 230 0 / var(--tw-bg-opacity))
    }

    /* Shopee Brand Colors Fix */
    .bg-\[\#EE4D2D\] {
      background-color: #EE4D2D;
    }

    .hover\:bg-\[\#d73211\]:hover {
      background-color: #d73211;
    }

    .bg-\[var\(--accent-color\)\] {
      background-color: var(--accent-color)
    }

    .bg-\[var\(--dark-background-color\)\] {
      background-color: var(--dark-background-color)
    }

    .bg-\[var\(--light-background-color\)\] {
      background-color: var(--light-background-color)
    }

    .bg-\[var\(--medium-background-color\)\] {
      background-color: var(--medium-background-color)
    }

    .bg-\[var\(--primary-color\)\] {
      background-color: var(--primary-color)
    }

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

    .bg-white\/80 {
      background-color: rgb(255 255 255 / .8)
    }

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

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

    .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-\[var\(--light-background-color\)\] {
      --tw-gradient-from: var(--light-background-color) var(--tw-gradient-from-position);
      --tw-gradient-from-position: ;
      --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-from-position);
      --tw-gradient-to-position: ;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

    .from-\[var\(--primary-color\)\] {
      --tw-gradient-from: var(--primary-color) var(--tw-gradient-from-position);
      --tw-gradient-from-position: ;
      --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-from-position);
      --tw-gradient-to-position: ;
      --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
    }

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

    .to-\[var\(--dark-background-color\)\] {
      --tw-gradient-to: var(--dark-background-color) var(--tw-gradient-to-position);
      --tw-gradient-to-position:
    }

    .to-\[var\(--light-background-color\)\] {
      --tw-gradient-to: var(--light-background-color) var(--tw-gradient-to-position);
      --tw-gradient-to-position:
    }

    .to-\[var\(--medium-background-color\)\] {
      --tw-gradient-to: var(--medium-background-color) var(--tw-gradient-to-position);
      --tw-gradient-to-position:
    }

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

    .to-white {
      --tw-gradient-to: #fff var(--tw-gradient-to-position);
      --tw-gradient-to-position:
    }

    .object-cover {
      -o-object-fit: cover;
      object-fit: cover
    }

    .p-2 {
      padding: .5rem
    }

    .p-4 {
      padding: 1rem
    }

    .p-6 {
      padding: 1.5rem
    }

    .p-8 {
      padding: 2rem
    }

    .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-12 {
      padding-top: 3rem;
      padding-bottom: 3rem
    }

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

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

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

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

    .py-6 {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem
    }

    .pt-4 {
      padding-top: 1rem
    }

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

    .pt-8 {
      padding-top: 2rem
    }

    .text-left {
      text-align: left
    }

    .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-base {
      font-size: 1rem;
      line-height: 1.5rem
    }

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

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

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

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

    .font-\[var\(--font-family-body\)\] {
      font-weight: var(--font-family-body)
    }

    .font-\[var\(--font-family-heading\)\] {
      font-weight: var(--font-family-heading)
    }

    .font-bold {
      font-weight: 700
    }

    .font-medium {
      font-weight: 500
    }

    .font-semibold {
      font-weight: 600
    }

    .leading-relaxed {
      line-height: 1.625
    }

    .leading-tight {
      line-height: 1.25
    }

    .text-\[\#333333\] {
      --tw-text-opacity: 1;
      color: rgb(51 51 51 / var(--tw-text-opacity))
    }

    .text-\[var\(--accent-color\)\] {
      color: var(--accent-color)
    }

    .text-\[var\(--dark-text-color\)\] {
      color: var(--dark-text-color)
    }

    .text-\[var\(--gray-text-color\)\] {
      color: var(--gray-text-color)
    }

    .text-\[var\(--primary-button-text-color\)\] {
      color: var(--primary-button-text-color)
    }

    .text-\[var\(--primary-color\)\] {
      color: var(--primary-color)
    }

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

    .text-gray-400 {
      --tw-text-opacity: 1;
      color: rgb(156 163 175 / var(--tw-text-opacity))
    }

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

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

    .shadow-xl {
      --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)
    }

    .blur-3xl {
      --tw-blur: blur(64px);
      filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
    }

    .backdrop-blur-sm {
      --tw-backdrop-blur: blur(4px);
      backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
    }

    .transition {
      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, 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
    }

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

    .transition-shadow {
      transition-property: box-shadow;
      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-200 {
      transition-duration: .2s
    }

    .duration-300 {
      transition-duration: .3s
    }

    .duration-500 {
      transition-duration: .5s
    }

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

    .hover\:-translate-y-2:hover {
      --tw-translate-y: -0.5rem;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 1.05;
      --tw-scale-y: 1.05;
      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .hover\:scale-\[1\.02\]:hover {
      --tw-scale-x: 1.02;
      --tw-scale-y: 1.02;
      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-\[\#F7DF1E\]:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(247 223 30 / var(--tw-bg-opacity))
    }

    .hover\:bg-\[\#FF8800\]:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(255 136 0 / var(--tw-bg-opacity))
    }

    .hover\:bg-\[var\(--primary-button-hover-bg-color\)\]:hover {
      background-color: var(--primary-button-hover-bg-color)
    }

    .hover\:text-\[\#FF9900\]:hover {
      --tw-text-opacity: 1;
      color: rgb(255 153 0 / var(--tw-text-opacity))
    }

    .hover\:text-\[\#FFE600\]:hover {
      --tw-text-opacity: 1;
      color: rgb(255 230 0 / var(--tw-text-opacity))
    }

    .hover\:text-\[var\(--accent-color\)\]:hover {
      color: var(--accent-color)
    }

    .hover\:text-\[var\(--primary-button-hover-bg-color\)\]:hover {
      color: var(--primary-button-hover-bg-color)
    }

    .hover\:text-\[var\(--primary-color\)\]:hover {
      color: var(--primary-color)
    }

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

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

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

    @media (min-width:640px) {
      .sm\:mb-16 {
        margin-bottom: 4rem
      }

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

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

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

      .sm\:h-16 {
        height: 4rem
      }

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

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

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

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

      .sm\:p-10 {
        padding: 2.5rem
      }

      .sm\:p-12 {
        padding: 3rem
      }

      .sm\:p-6 {
        padding: 1.5rem
      }

      .sm\:p-8 {
        padding: 2rem
      }

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

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

      .sm\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem
      }

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

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

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

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

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

    @media (min-width:768px) {
      .md\:col-span-2 {
        grid-column: span 2/span 2
      }

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

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

      .md\:text-left {
        text-align: left
      }
    }

    @media (min-width:1024px) {
      .lg\:order-1 {
        order: 1
      }

      .lg\:order-2 {
        order: 2
      }

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

      .lg\:flex {
        display: flex
      }

      .lg\:hidden {
        display: none
      }

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

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

      .lg\:justify-start {
        justify-content: flex-start
      }

      .lg\:gap-12 {
        gap: 3rem
      }

      .lg\:gap-16 {
        gap: 4rem
      }

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

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

      .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem
      }

      .lg\:py-28 {
        padding-top: 7rem;
        padding-bottom: 7rem
      }

      .lg\:text-left {
        text-align: left
      }

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

      .lg\:text-6xl {
        font-size: 3.75rem;
        line-height: 1
      }
    }

    .opacity-5 {
      opacity: .05
    }

    .opacity-10 {
      opacity: .1
    }

    .opacity-90 {
      opacity: .9
    }

    /* Estilos do Pop-up (Modal) */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .modal-content {
      background: white;
      width: 100%;
      max-width: 600px;
      border-radius: 24px;
      position: relative;
      padding: 2.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      transform: scale(0.9);
      transition: transform 0.3s ease;
    }

    .modal-overlay.active {
      display: flex;
    }

    .modal-overlay.active .modal-content {
      transform: translateY(0);
    }

    .close-modal {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      font-size: 1.5rem;
      color: var(--gray-text-color);
      cursor: pointer;
      transition: color 0.2s;
    }

    .close-modal:hover {
      color: var(--primary-color);
    }

    #sgxfsqq {
      background-color: var(--light-background-color);
      background-image: none;
    }

    @media (min-width: 1024px) {
      #sgxfsqq {
        background-image: linear-gradient(to right, var(--light-background-color) 0%, var(--light-background-color) 40%, transparent 90%), url('https://ik.imagekit.io/SimBem/Projeto%20Tia/Inicio-SimBem-SemTexto.png');
        background-size: cover;
        background-position: center right;
      }
    }
  

    :root {
      /* SimBem Brand Colors */
      --accent-color: #F4C522;

      /* Primary Brand & Typography */
      --primary-color: #605B96;
      --dark-text-color: #1A1A24;
      --gray-text-color: #4A4A5A;

      /* Structural Variables */
      --font-family-body: 'Lato', sans-serif;
      --font-family-heading: 'Nunito', sans-serif;
      --button-rounded-radius: 12px;

      /* Backgrounds & Borders */
      --light-border-color: #EBEBEF;
      --dark-border-color: #DCDDE1;
      --dark-background-color: #1E1E24;
      --light-background-color: #FFF9E5;
      --medium-background-color: #F4F4F9;

      /* Buttons */
      --primary-button-text-color: #FFFFFF;
      --primary-button-hover-bg-color: #4A4674;
    }

    .parceiro-img {
      width: auto;
      object-fit: contain;
      filter: grayscale(100%) opacity(60%);
      transition: all 0.4s ease-in-out;
      cursor: pointer;
    }

    .parceiro-img:hover {
      filter: grayscale(0%) opacity(100%);
      transform: scale(1.1);
    }

    /* Responsive Heights: Mobile first (smaller), then Desktop (your requested sizes) */
    .logo-native {
      height: 70px;
    }

    .logo-vapza {
      height: 45px;
    }

    .logo-lanmax {
      height: 60px;
    }

    .logo-3coracoes {
      height: 55px;
    }

    @media (min-width: 640px) {
      .logo-native {
        height: 150px;
      }

      .logo-vapza {
        height: 90px;
      }

      .logo-lanmax {
        height: 130px;
      }

      .logo-3coracoes {
        height: 120px;
      }
    }

    /* Mobile Carousel Animation */
    @media (max-width: 639px) {
      .carousel-container {
        width: 100%;
        overflow: hidden;
        /* Optional: creates a fade effect on the left and right edges */
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      }

      .carousel-track {
        display: flex;
        align-items: center;
        width: max-content;
        gap: 3rem;
        animation: scroll 15s linear infinite;
        padding-left: 1.5rem;
        /* Initial offset for smooth looping */
      }

      @keyframes scroll {
        0% {
          transform: translateX(0);
        }

        /* Scrolls exactly half the width of the track (the first set of logos) */
        100% {
          transform: translateX(calc(-50% - 1.5rem));
        }
      }
    }

    /* Desktop Static Layout */
    @media (min-width: 640px) {
      .carousel-track {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 4rem;
        /* Equivalent to sm:gap-16 */
      }

      .duplicate-set {
        display: none;
        /* Hide the duplicated logos on desktop screens */
      }
    }

    .h-32 {
      height: 8rem;
    }

    /* 128px */
    .w-32 {
      width: 8rem;
    }

    /* 72px */
    .text-8xl {
      font-size: 5rem;
      line-height: 1;
    }

    .text-green-500 {
      color: #22c55e;
    }


    /* --- CLASSES FALTANTES DO TAILWIND --- */

    /* Cores e Bordas Verdes (WhatsApp/Sucesso) */
    .bg-green-500 {
      background-color: #22c55e;
    }

    .bg-green-600 {
      background-color: #16a34a;
    }

    .text-green-600 {
      color: #16a34a;
    }

    .border-green-500 {
      border-color: #22c55e;
    }

    /* Backgrounds com Opacidade (Overlays) */
    .bg-black\/60 {
      background-color: rgba(0, 0, 0, 0.6);
    }

    .bg-black\/10 {
      background-color: rgba(0, 0, 0, 0.1);
    }

    .bg-red-50 {
      background-color: #fef2f2;
    }

    .text-red-500 {
      color: #ef4444;
    }

    /* Efeitos Visuais */
    .backdrop-blur-md {
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .brightness-90 {
      filter: brightness(0.9);
    }

    .hover\:brightness-90:hover {
      filter: brightness(0.9);
    }

    .hover\:brightness-110:hover {
      filter: brightness(1.1);
    }

    /* Interatividade */
    .active\:scale-95:active {
      transform: scale(0.95);
    }

    html {
      scroll-behavior: smooth;
      /* Enables smooth scrolling for all internal links */
    }

    /* Adds a margin to all sections so the sticky header (h-28) doesn't overlap content */
    section[id] {
      scroll-margin-top: 112px;
      /* 112px is the equivalent of your h-28 header */
    }

    .fixed { 
  position: fixed; 
}
.z-\[100\] { 
  z-index: 100; 
}
.block { 
  display: block; 
}
.relative { 
  position: relative; 
}