/*
! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

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

::before,
::after {
  --tw-content: "";
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  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";
  /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

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

/*
Remove the default font size and weight for headings.
*/

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

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

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

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

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

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

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

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

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

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

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

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

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

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

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

/*
Set the default cursor for buttons.
*/

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

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

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

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type="text"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1c64f2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #1c64f2;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #6b7280;
  opacity: 1;
}

input::placeholder,
textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-date-and-time-value {
  min-height: 1.5em;
}

select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  print-color-adjust: exact;
}

[multiple] {
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  print-color-adjust: unset;
}

[type="checkbox"],
[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0;
  print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #1c64f2;
  background-color: #fff;
  border-color: #6b7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type="checkbox"] {
  border-radius: 0px;
}

[type="radio"] {
  border-radius: 100%;
}

[type="checkbox"]:focus,
[type="radio"]:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,
      /*!*/
      /*!*/
    );
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1c64f2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type="checkbox"]:checked,
[type="radio"]:checked,
.dark [type="checkbox"]:checked,
.dark [type="radio"]:checked {
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

[type="checkbox"]:indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

[type="checkbox"]:indeterminate:hover,
[type="checkbox"]:indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

[type="file"] {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type="file"]:focus {
  outline: 1px auto inherit;
}

input[type="file"]::-webkit-file-upload-button {
  color: white;
  background: #1f2937;
  border: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2rem;
  padding-right: 1rem;
  -webkit-margin-start: -1rem;
  margin-inline-start: -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

input[type="file"]::file-selector-button {
  color: white;
  background: #1f2937;
  border: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2rem;
  padding-right: 1rem;
  -webkit-margin-start: -1rem;
  margin-inline-start: -1rem;
  -webkit-margin-end: 1rem;
  margin-inline-end: 1rem;
}

input[type="file"]::-webkit-file-upload-button:hover {
  background: #374151;
}

input[type="file"]::file-selector-button:hover {
  background: #374151;
}

.dark input[type="file"]::-webkit-file-upload-button {
  color: white;
  background: #4b5563;
}

.dark input[type="file"]::file-selector-button {
  color: white;
  background: #4b5563;
}

.dark input[type="file"]::-webkit-file-upload-button:hover {
  background: #6b7280;
}

.dark input[type="file"]::file-selector-button:hover {
  background: #6b7280;
}

input[type="range"]::-webkit-slider-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: #1c64f2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-webkit-slider-thumb {
  background: #9ca3af;
}

.dark input[type="range"]:disabled::-webkit-slider-thumb {
  background: #6b7280;
}

input[type="range"]:focus::-webkit-slider-thumb {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1px;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

input[type="range"]::-moz-range-thumb {
  height: 1.25rem;
  width: 1.25rem;
  background: #1c64f2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-moz-range-thumb {
  background: #9ca3af;
}

.dark input[type="range"]:disabled::-moz-range-thumb {
  background: #6b7280;
}

input[type="range"]::-moz-range-progress {
  background: #3f83f8;
}

input[type="range"]::-ms-fill-lower {
  background: #3f83f8;
}

.toggle-bg:after {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  background: white;
  border-color: #d1d5db;
  border-width: 1px;
  border-radius: 9999px;
  height: 1.25rem;
  width: 1.25rem;
  transition-property:
    background-color,
    border-color,
    color,
    fill,
    stroke,
    opacity,
    box-shadow,
    transform,
    filter,
    backdrop-filter,
    -webkit-backdrop-filter;
  transition-duration: 0.15s;
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

input:checked+.toggle-bg:after {
  transform: translateX(100%);
  border-color: white;
}

input:checked+.toggle-bg {
  background: #1c64f2;
  border-color: #1c64f2;
}

.tooltip-arrow,
.tooltip-arrow:before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.tooltip-arrow {
  visibility: hidden;
}

.tooltip-arrow:before {
  content: "";
  visibility: visible;
  transform: rotate(45deg);
}

[data-tooltip-style^="light"]+.tooltip>.tooltip-arrow:before {
  border-style: solid;
  border-color: #e5e7eb;
}

[data-tooltip-style^="light"]+.tooltip[data-popper-placement^="top"]>.tooltip-arrow:before {
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-tooltip-style^="light"]+.tooltip[data-popper-placement^="right"]>.tooltip-arrow:before {
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^="light"]+.tooltip[data-popper-placement^="bottom"]>.tooltip-arrow:before {
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^="light"]+.tooltip[data-popper-placement^="left"]>.tooltip-arrow:before {
  border-top-width: 1px;
  border-right-width: 1px;
}

.tooltip[data-popper-placement^="top"]>.tooltip-arrow {
  bottom: -4px;
}

.tooltip[data-popper-placement^="bottom"]>.tooltip-arrow {
  top: -4px;
}

.tooltip[data-popper-placement^="left"]>.tooltip-arrow {
  right: -4px;
}

.tooltip[data-popper-placement^="right"]>.tooltip-arrow {
  left: -4px;
}

.tooltip.invisible>.tooltip-arrow:before {
  visibility: hidden;
}

*,
::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-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(63 131 248 / 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: ;
}

::-webkit-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(63 131 248 / 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(63 131 248 / 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: ;
}

.responsive-img {
  display: none;
}

.right-aligned-text {
  display: none;
  position: absolute;
  top: 15%;
  right: 2%;
  transform: translateY(-50%);
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 160%;
  text-shadow: 1px 1px 2px rgb(120, 58, 235);
}

.left-aligned-text-tamil {
  display: none;
  position: absolute;
  top: -1%;
  left: 0%;
  transform: translateY(-50%);
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 160%;
  text-shadow: 1px 1px 2px rgb(120, 58, 235);
}

.left-aligned-text {
  display: none;
  position: absolute;
  top: -1%;
  left: 0%;
  transform: translateY(-50%);
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 160%;
  text-shadow: 1px 1px 2px rgb(120, 58, 235);
}

.left-aligned-text-hindi {
  display: none;
  position: absolute;
  top: -1%;
  left: 0%;
  transform: translateY(-50%);
  margin: 0;
  font-family: "Caveat", cursive;
  font-weight: 400;
  font-size: 160%;
  text-shadow: 1px 1px 2px rgb(120, 58, 235);
}

.container {
  width: 100%;
}

#sidebar {
  width: 200px;
  background-color: #ffffff;
  overflow-y: auto;
  position: sticky;
  top: 0;
  height: 100vh;
}

#content {
  flex: 1;
  overflow-y: auto;
}

@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;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.top-0 {
  top: 0px;
}

.left-0 {
  left: 0px;
}

.z-20 {
  z-index: 20;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

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

.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.my-8 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-6 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

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

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

.mr-4 {
  margin-right: 1rem;
}

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

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

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

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

.mt-8 {
  margin-top: 5rem;
}

.mt-7 {
  margin-top: 3rem;
}

.mr-auto {
  margin-right: auto;
}

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

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

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

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

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

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

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

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

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

.mb-5 {
  margin-bottom: 1.25rem;
}

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

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

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

.my-1 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-6 {
  height: 1.5rem;
}

.h-4 {
  height: 1rem;
}

.h-9 {
  height: 2.25rem;
}

.h-8 {
  height: 2rem;
}

.h-5 {
  height: 1.25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 3rem;
}

.h-12 {
  height: 3rem;
}

.w-full {
  width: 100%;
}

.w-6 {
  width: 1.5rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 3rem;
}

.w-64 {
  width: 16rem;
}

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

.max-w-screen-xl {
  max-width: 1280px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 52rem;
}

.max-w-screen-md {
  max-width: 768px;
}

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

.max-w-screen-sm {
  max-width: 640px;
}

.flex-1 {
  flex: 1 1 0%;
}

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

.flex-shrink {
  flex-shrink: 1;
}

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

.-translate-x-full {
  --tw-translate-x: -100%;
  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-full {
  --tw-translate-x: 100%;
  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-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.rotate-180 {
  --tw-rotate: 180deg;
  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));
}

.cursor-default {
  cursor: default;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-pointer {
  cursor: pointer;
}

.resize {
  resize: both;
}

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

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

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

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

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

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

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

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

.gap-8 {
  gap: 2rem;
}

.gap-4 {
  gap: 1rem;
}

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

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

.space-x-5> :not([hidden])~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.25rem * var(--tw-space-x-reverse));
  margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-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)));
}

.divide-x-2> :not([hidden])~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(2px * var(--tw-divide-x-reverse));
  border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
}

.divide-gray-500> :not([hidden])~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
}

.place-self-center {
  place-self: center;
  text-align: center;
}

.self-center {
  align-self: center;
}

.whitespace-nowrap {
  white-space: nowrap;
}

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

.rounded {
  border-radius: 0.25rem;
}

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

.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

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

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

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

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

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

.border-blue-700 {
  --tw-border-opacity: 1;
  border-color: rgb(26 86 219 / var(--tw-border-opacity));
}

.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(28 100 242 / var(--tw-border-opacity));
}

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

.bg-purple-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}

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

.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 42 217 / var(--tw-bg-opacity));
}

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

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
}

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

.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}

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

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.p-2 {
  padding: 0.5rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-4 {
  padding: 1rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-1 {
  padding: 0.25rem;
}

.px-7 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.py-7 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

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

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

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

.py-1\.2 {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

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

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

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

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

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

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

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

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

.pl-3 {
  padding-left: 0.75rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pb-5 {
  padding-bottom: 5px;
}

.pl-20 {
  padding-left: 5rem;
}

.pr-20 {
  padding-right: 5rem;
}

.pb-8 {
  padding-bottom: 2rem;
}

.pt-16 {
  padding-top: 4rem;
}

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

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

.pr-3 {
  padding-right: 0.75rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-xxl {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

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

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

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

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

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

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

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

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

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-semimedium {
  font-weight: 500;
}

.font-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.font-bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.leading-none {
  line-height: 1;
}

.leading-tight {
  line-height: 1.25;
}

.leading-6 {
  line-height: 1.5rem;
}

.leading-9 {
  line-height: 2.25rem;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

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

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

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

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

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

.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(144 97 249 / var(--tw-text-opacity));
}

.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(107 42 217 / var(--tw-text-opacity));
}

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

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(14 159 110 / var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(28 100 242 / var(--tw-text-opacity));
}

.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(6 55 130 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(215 0 0 / var(--tw-text-opacity));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored:
    0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  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);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  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);
}

.filter {
  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);
}

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

.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-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

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

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

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

.hover\:bg-purple-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(85 33 181 / var(--tw-bg-opacity));
}

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

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}

.hover\:bg-blue-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
}

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

.hover\:text-blue-700:hover {
  --tw-text-opacity: 1;
  color: rgb(26 86 219 / var(--tw-text-opacity));
}

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

.hover\:text-purple-800:hover {
  --tw-text-opacity: 1;
  color: rgb(85 33 181 / var(--tw-text-opacity));
}

.active\:text-purple-800:active {
  --tw-text-opacity: 1;
  color: rgb(85 33 181 / var(--tw-text-opacity));
}

.hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
  color: rgb(28 100 242 / var(--tw-text-opacity));
}

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

.hover\:underline:hover {
  -webkit-text-decoration-line: underline;
  text-decoration-line: underline;
}

.focus\:z-10:focus {
  z-index: 10;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-4:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow:
    var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

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

.focus\:ring-purple-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(202 191 253 / var(--tw-ring-opacity));
}

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

.focus\:ring-gray-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
}

.focus\:ring-purple-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(220 215 254 / var(--tw-ring-opacity));
}

.focus\:ring-blue-300:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

.dark .dark\:divide-gray-700> :not([hidden])~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}

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

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

.dark .dark\:border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(63 131 248 / var(--tw-border-opacity));
}

.dark .dark\:border-transparent {
  border-color: transparent;
}

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

.dark .dark\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(107 42 217 / var(--tw-bg-opacity));
}

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

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

.dark .dark\:bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
}

.dark .dark\:bg-gray-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.dark .dark\:bg-gray-800\/50 {
  background-color: rgb(31 41 55 / 0.5);
}

.dark .dark\:bg-opacity-80 {
  --tw-bg-opacity: 0.8;
}

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

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

.dark .dark\:text-purple-400 {
  --tw-text-opacity: 1;
  color: rgb(172 148 250 / var(--tw-text-opacity));
}

.dark .dark\:text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(144 97 249 / var(--tw-text-opacity));
}

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

.dark .dark\:text-green-400 {
  --tw-text-opacity: 1;
  color: rgb(49 196 141 / var(--tw-text-opacity));
}

.dark .dark\:text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(63 131 248 / var(--tw-text-opacity));
}

.dark .dark\:hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
}

.dark .dark\:hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(108 43 217 / var(--tw-bg-opacity));
}

.dark .dark\:hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}

.dark .dark\:hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
}

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

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

.dark .dark\:hover\:text-purple-700:hover {
  --tw-text-opacity: 1;
  color: rgb(108 43 217 / var(--tw-text-opacity));
}

.dark .dark\:hover\:text-blue-500:hover {
  --tw-text-opacity: 1;
  color: rgb(63 131 248 / var(--tw-text-opacity));
}

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

.dark .dark\:focus\:ring-gray-800:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
}

.dark .dark\:focus\:ring-purple-800:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(85 33 181 / var(--tw-ring-opacity));
}

.dark .dark\:focus\:ring-gray-600:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
}

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

.dark .dark\:focus\:ring-purple-900:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(74 29 150 / var(--tw-ring-opacity));
}

@media (max-width: 640px) {
  .hideforphone {
    display: none;
  }
}

@media (min-width: 641px) {
  .hideforbigscreen {
    display: none;
  }
}

@media (min-width: 640px) {
  .min-w-2xl {
    min-width: 42rem;
  }

  .right-aligned-text {
    display: block;
  }

  .left-aligned-text {
    display: block;
  }

  .left-aligned-text-tamil {
    display: block;
  }

  .left-aligned-text-hindi {
    display: block;
  }

  .responsive-img {
    display: block;
    width: 15%;
    height: auto;
  }

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

  .sm\:mr-2 {
    margin-right: 0.5rem;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:h-6 {
    height: 1.5rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:w-auto {
    width: auto;
  }

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

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .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\: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\: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\:grid {
    display: grid;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:w-12 {
    width: 3rem;
  }

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

  .md\: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));
  }

  .md\:p-8 {
    padding: 2rem;
  }

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

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

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

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

@media (max-width: 1024px) {
  #sidebar {
    display: none;
    position: fixed;
    top: 30px;
    left: 0;
    height: 100%;
    z-index: 1000;
  }

  #sidebar.open {
    display: block;
  }

  #toggleButton {
    display: block;
  }
}

@media (min-width: 1024px) {
  .mt60 {
    margin-top: 60px;
  }

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

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

  .lg\:order-1 {
    order: 1;
  }

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

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

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

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

  .lg\:my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .lg\:mr-0 {
    margin-right: 0px;
  }

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

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

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mb-12 {
    margin-bottom: 3rem;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:w-auto {
    width: auto;
  }

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

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

  .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\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:justify-center {
    justify-content: center;
  }

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

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

  .lg\: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)));
  }

  .lg\:space-y-20> :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));
  }

  .lg\: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));
  }

  .lg\:border-0 {
    border-width: 0px;
  }

  .lg\:bg-transparent {
    background-color: transparent;
  }

  .lg\:p-0 {
    padding: 0px;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

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

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

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

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

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

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

  .lg\:px-60 {
    padding-left: 15rem;
    padding-right: 15rem;
  }

  .lg\:pb-16 {
    padding-bottom: 4rem;
  }

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

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

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

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

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

  .lg\:text-purple-700 {
    --tw-text-opacity: 1;
    color: rgb(108 43 217 / var(--tw-text-opacity));
  }

  .lg\:hover\:bg-transparent:hover {
    background-color: transparent;
  }

  .lg\:hover\:text-purple-700:hover {
    --tw-text-opacity: 1;
    color: rgb(108 43 217 / var(--tw-text-opacity));
  }

  .dark .lg\:dark\:hover\:bg-transparent:hover {
    background-color: transparent;
  }

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

@media (min-width: 1280px) {
  .xl\:gap-0 {
    gap: 0px;
  }

  .xl\:gap-16 {
    gap: 4rem;
  }

  .xl\:gap-24 {
    gap: 6rem;
  }

  .xl\:gap-10 {
    gap: 2.5rem;
  }

  .xl\:p-8 {
    padding: 2rem;
  }

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

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

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

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

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

  .xl\:px-80 {
    padding-left: 20rem;
    padding-right: 20rem;
  }
}

.wb {
  word-break: break-all;
}

.feature-icon {
  width: 10rem;
  text-align: center;
}

.feature-icon-image {
  background-color: #ffffff;
  border-radius: 0.25rem;
  padding-left: 15px;
  margin-bottom: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.feature-icon-image:hover {
  background-color: #ffffff;
  border-radius: 0.25rem;
  padding-left: 15px;
  margin-bottom: 13px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 15px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}

.feature-icon-new {
  width: 150px;
  /* Locks a standard crisp horizontal column width */
  text-align: center;
  text-decoration: none !important;
  margin-bottom: 28px;
  /* Keeps your clean vertical gap between rows */
  margin-left: 12px;
  margin-right: 12px;
}

@media (max-width: 668px) {
  .feature-icon-new {
    width: 50%;
    margin-left: 0;
    margin-right: 0;
  }
}

.feature-icon-new-image {
  background-color: #ffffff;
  border-radius: 20px;
  /* Clean matching curve profiles */
  width: 100px;
  /* FORCE clean fixed width */
  height: 100px;
  /* FORCE identical clean height for a perfect square */
  aspect-ratio: 1 / 1;
  /* Safety locking rule */
  margin-bottom: 12px;
  box-shadow: 0 8px 24px rgba(147, 51, 234, 0.04);
  /* Soft background shadow contrast */
  position: relative;
  display: flex;
  /* Centers the main SVG icon perfectly inside the square box */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.feature-icon-new-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(147, 51, 234, 0.12);
}

/* Rounded inverted layout mask corner matching custom dimensions */
.feature-icon-new-image::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border-bottom-right-radius: 20px;
  box-shadow: 12px 12px 0px 12px #ffffff;
  pointer-events: none;
  z-index: 10;
}

/* Sharp Link Arrow Box Layout position */
.inner-box-link-arrow {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.33);
  border-top-left-radius: 12px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed !important;
  z-index: 20;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

/* Brightens the background and subtly nudges the arrow diagonally down-right */
.inner-box-link-arrow:hover {
  background-color: #7c3aed;
  /* Bright purple */
}

.inner-box-link-arrow:hover svg {
  transform: translate(2px, -2px);
  /* Clean interactive feedback glide */
  transition: transform 0.2s ease;
}

/* Brightens the background and subtly nudges the arrow diagonally down-right */
.feature-icon-new-image:hover .inner-box-link-arrow {
  background-color: #581c87;
}

.feature-icon-new-image:hover .inner-box-link-arrow svg {
  color: #ffffff;
}

.white-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: rgb(108, 43, 217) !important;
  text-transform: capitalize;
  font-size: 25px;
  background-color: #ace5f3;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all 0.5s;
}

.white-button a i {
  margin-left: 5px;
  font-size: 18px;
}

.white-button a:hover {
  background-color: #009ffc;
  color: #fff !important;
}

.first-button {
  margin-right: 15px;
}

.oval-card {
  background-color: rgb(172 148 250);
  /* Purple background */
  color: white;
  /* White text */
  font-size: 16px;
  /* Adjust text size */
  font-weight: bold;
  /* Make the text bold */
  text-align: center;
  /* Center the text */
  padding: 15px 30px;
  /* Add space around the text */
  border-radius: 50px;
  /* Make it oval */
  display: inline-block;
  /* Make it fit its content */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* Add a subtle shadow */
  font-family: Arial, sans-serif;
  /* Use a clean font */
}

.line-through {
  text-decoration: line-through;
}

.numberBox {
  width: 100px;
  height: 40px;
  padding: 5px;
  padding-right: 2px;
  font-weight: bold;
  border-radius: 3px;
  border-width: 2px;
}

.numberBox[disabled] {
  color: #a3a3a3;
  border-color: #a3a3a3;
}

.bgblue {
  background-image: url(../images/background-dollar.png);
  background-repeat: no-repeat;
  background-size: 55%;
  background-position: center;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

.lbl_Users,
.lbl_Branches {
  font-weight: 500;
}

.refer-button {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  padding: 9px 15px !important;
  font-weight: 600;
  right: 79px !important;
  animation: floatUpDown 2.5s ease-in-out infinite;
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.overscreen-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  color: white;
  border: none;
  padding: 2px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
  z-index: 1000;
}

.overscreen-button:hover {
  animation-play-state: paused;
  transform: scale(1.05);
}

.popup {
  display: none;
  position: fixed;
  bottom: 65px;
  right: 20px;
  background: #fff;
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 1001;
  font-size: 15px;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  width: 250px;
  animation: fadeIn 0.3s ease-in-out;
}

.close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@media (max-width: 720px) {
  .font-11 {
    font-size: 11px;
  }

  .font-10 {
    font-size: 10px;
  }
}

.gradient-text {
  /* background: linear-gradient(90deg, #c72c91 33.54%, #0565ff 73.82%); */
  background: linear-gradient(90deg, rgb(151, 9, 194) 33.54%, #c72c91 73.82%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 4px;
}

.gradient-text2 {
  background: linear-gradient(90deg,
      #a110be,
      /* Royal Violet */
      #8e2de2,
      /* Deep Violet */
      #0059ff,
      /* Sunset Orange */
      #0044ff,
      /* Golden Yellow */
      #8e2de2
      /* Violet again */
    );

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  padding-right: 4px;
}

.gradient-fix {
  padding-bottom: 4px;
}

.chat-icon {
  position: fixed;
  bottom: 80px;
  right: 20px;
  cursor: pointer;
  z-index: 1000;
}

.chat-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.chat-container {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 320px;
  height: 440px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  overflow: hidden;
}

.chat-header {
  background: #7c4dff;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-body {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f9f4fd;
}

.chat-footer {
  display: flex;
  border-top: 1px solid #ccc;
  padding: 8px;
}

.chat-footer input {
  flex: 1;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid #ccc;
}

.chat-footer button {
  margin-left: 5px;
  background: #7c4dff;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 12px;
  cursor: pointer;
}

.message {
  display: flex;
  align-items: flex-start;
}

.message.bot {
  flex-direction: row;
}

.message.user {
  flex-direction: row-reverse;
}

.message .text {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
}

.message.bot .text {
  background: #ede7f6;
  color: #4a148c;
}

.message.user .text {
  background: #e1bee7;
  color: #4a0072;
}

.message img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin: 0 8px;
}

.suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0;
}

.suggestions button {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
  border: 1px solid #ba68c8;
  color: #4a0072;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 20px;
  cursor: pointer;
  text-align: left;
  transition:
    background 0.3s,
    transform 0.2s;
}

.suggestions button:hover {
  background: linear-gradient(135deg, #e1bee7, #ba68c8);
  transform: scale(1.03);
}

#langSelect {
  margin-right: auto;
  padding: 6px 12px;
  border: 1px solid #ba68c8;
  border-radius: 20px;
  background-color: #f3e5f5;
  color: #4a0072;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition:
    border 0.3s,
    background 0.3s;
}

#langSelect:hover {
  background-color: #e1bee7;
  border-color: #ab47bc;
}

.close-btn {
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px;
}

@media (max-width: 400px) {
  .chat-container {
    width: 95%;
    right: 10px;
    bottom: 80px;
    height: 90vh;
  }
}

.grad-border {
  position: relative;
  display: inline-block;
  padding: 0px;
  border-radius: 8px;
  /* background: linear-gradient(90deg,#06b6d4,#7c3aed,#ec4899); */
  isolation: isolate;
}

.grad-border::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: linear-gradient(90deg, #06b6d4, #7c3aed, #ec4899);
  filter: blur(2px);
  opacity: 0.3;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: glowPulse 1s infinite ease-in-out alternate;
}

.grad-border img {
  width: 100%;
}

@keyframes glowPulse {
  0% {
    filter: blur(2px);
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    filter: blur(3px);
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1.002);
  }

  100% {
    filter: blur(6px);
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
  }
}

.grad-border .inner {
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.grad-border img {
  display: block;
  object-fit: cover;
}

.video-container {
  display: flex;
  justify-content: center;
  margin: 60px 0 30px;
}

/* 
.video-gradient {
  background: linear-gradient(to right, #6366f1, #8b5cf6, #ec4899);
  padding: 2px;
  border-radius: 22px;
  max-width: 900px;
  width: 100%;
} */

.video-inner {
  max-width: 900px;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.video-player {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

/* --- Download section --- */
.download-section {
  text-align: center;
  margin-top: 40px;
}

.download-text {
  font-size: 18px;
  font-weight: 600;
  color: #222;
  margin-bottom: 25px;
}

.download-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  padding: 12px 30px;
  font-size: 16px;
  border-radius: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.download-btn .icon {
  width: 18px;
  height: 18px;
}

.download-btn:hover {
  transform: scale(1.07);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.docx-btn {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.pdf-btn {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.docx-btn:hover {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
}

.pdf-btn:hover {
  background: linear-gradient(135deg, #db2777, #e11d48);
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .download-text {
    font-size: 16px;
    padding: 0 10px;
  }

  .download-btn {
    width: 90%;
    justify-content: center;
  }
}

#langPopup {
  position: absolute;
  z-index: 50;
  max-height: 300px;
  width: 150px;
  left: -48px;
  overflow-y: auto;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

html[lang="ja"] nav a,
html[lang="ja"] [data-i18n] {
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, "Yu Gothic", sans-serif;
  display: inline-block !important;
}

.problem-solution-wrapper {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  position: relative;
}

/* Tagline */

.tagline-main {
  font-family: "Shantell Sans", cursive;
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.3;
}

.tagline-highlight {
  color: #7c3aed;
}

.tagline-secondary {
  display: block;
  margin-top: 10px;
  font-size: 1.3rem;
  color: #9333ea;
}

/* Card Layout */

.problem-section,
.solution-section {
  background: white;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: 0.3s ease;
}

.problem-section:hover,
.solution-section:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Titles */

.problem-title,
.solution-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.problem-title-highlight {
  color: #ef4444;
}

.solution-title-highlight {
  color: #16a34a;
}

/* Description */

.problem-description,
.solution-description {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* Lists */

.problem-list li,
.solution-list li {
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.solution-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.problem-list li:last-child,
.solution-list li:last-child {
  border-bottom: none;
}

/* Dots */

.problem-list-dot {
  width: 8px;
  height: 8px;
  background: #ef4444;
  border-radius: 50%;
  margin-right: 12px;
}

/* Checkmarks */

.solution-list-check {
  width: 22px;
  height: 22px;
  background: #16a34a;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

/* Result Box */

.problem-result {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  font-weight: 600;
}

.solution-result {
  background: #f0fdf4;
  border-left: 4px solid #16a34a;
  padding: 15px;
  border-radius: 8px;
  margin-top: 20px;
  font-weight: 600;
}

/* Urgency Card */
.urgency-card {
  background: linear-gradient(135deg,
      rgba(249, 115, 22, 0.1) 0%,
      rgba(234, 88, 12, 0.1) 100%);
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid #ea580c;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.1);
}

.urgency-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #234e52;
  margin-bottom: 15px;
}

.urgency-list {
  list-style: none;
  padding: 0;
}

.urgency-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 1rem;
  color: #374151;
}

.urgency-emoji {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.2rem;
}

.urgency-badge {
  margin-top: 20px;
  padding: 12px;
  background: linear-gradient(120deg, #ea580c 0%, #f97316 100%);
  color: white;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

/* Guarantee Card */
.guarantee-card {
  background: linear-gradient(135deg,
      rgba(34, 197, 94, 0.1) 0%,
      rgba(16, 185, 129, 0.1) 100%);
  padding: 30px;
  border-radius: 15px;
  border-left: 5px solid #10b981;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.1);
}

.guarantee-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 15px;
}

.guarantee-text {
  font-size: 1.1rem;
  color: #374151;
  margin-bottom: 15px;
  font-weight: 500;
  line-height: 1.6;
}

.guarantee-text strong {
  color: #10b981;
}

.guarantee-subtitle {
  font-size: 0.95rem;
  color: #6b7280;
}

.guarantee-badge {
  margin-top: 20px;
  padding: 12px;
  background: linear-gradient(120deg, #10b981 0%, #059669 100%);
  color: white;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

/* CTA Section */
.cta-section {
  text-align: center;
  margin-top: 40px;
  position: relative;
  z-index: 10;
}

.cta-button {
  display: inline-block;
  padding: 18px 50px;
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
  transition: all 0.3s ease;
  border: 2px solid #7c3aed;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.4);
}

.cta-sub-text {
  margin-top: 12px;
  font-size: 0.95rem;
  color: #6b7280;
}

.cta-sub-text strong {
  color: #1f2937;
}

/* Related Grid for Urgency + Guarantee */
.urgency-guarantee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

@media (max-width: 768px) {
  .urgency-guarantee-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Animations */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes bounce {

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

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

/* Responsive adjustments */
@media (max-width: 768px) {
  .tagline-main {
    font-size: 2rem;
  }

  .problem-title,
  .solution-title {
    font-size: 1.5rem;
  }

  .problem-section,
  .solution-section {
    margin-bottom: 2rem;
  }
}

.center-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 60px;
  height: 60px;
  background: #ede9fe;
  color: #7c3aed;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  z-index: 20;

  animation: floatArrow 2s ease-in-out infinite;
}

@keyframes floatArrow {
  0% {
    transform: translate(-50%, -50%) translateX(0);
  }

  50% {
    transform: translate(-50%, -50%) translateX(8px);
  }

  100% {
    transform: translate(-50%, -50%) translateX(0);
  }
}

/* New-LP-Design */

/* Base styling for all screens (Mobile gets the gradient here) */
.image-theme-bg {
  background-image: linear-gradient(to bottom,
      rgb(255, 255, 255) 0%,
      rgb(255, 255, 255) 2%,
      #efecf4 30%,
      #f6f4fb 85%,
      rgb(255, 255, 255) 100%);
}

@media (min-width: 768px) {
  .image-theme-bg {
    /* This handles fallback color and the baseline definition */
    background-color: rgb(255, 255, 255);

    background-image:
      /* --- KEEPING ALL YOUR DECORATIVE SVGs EXACTLY THE SAME --- */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' opacity='0.35'%3E%3Cpath d='M12 0c.5 6 5.5 11 11.5 11.5-.2.1-5.5.5-11.5 11.5-.5-6-5.5-11-11.5-11.5.2-.1 5.5-.5 11.5-11.5z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' opacity='0.45'%3E%3Cpath d='M12 0c.4 5.5 5 10.5 10.5 11-.2 0-5 .5-10.5 11-.4-5.5-5-10.5-10.5-11 .2 0 5-.5 10.5-11z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' opacity='0.55'%3E%3Cpath d='M12 2c.3 4 4 7.7 8 8-.2 0-4 .3-8 8-.3-4-4-7.7-8-8 .2 0 4-.3 8-8z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa' opacity='0.6'%3E%3Cpath d='M12 3c.2 4 4 7.8 8 8-.2 0-4 .2-8 8-.2-4-4-7.8-8-8 .2 0 4-.2 8-8z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d28d9' opacity='0.45'%3E%3Cpath d='M12 5l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23581c87' opacity='0.5'%3E%3Cpath d='M12 5l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='none' stroke-width='1.8' opacity='0.0 1'%3E%3Cpath d='M0,8 L5,2 L10,8 L15,2 L20,8 L25,2 L30,8 L35,2 L40,8'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 15' fill='none' stroke='%237c3aed' stroke-width='1.5' opacity='0.4'%3E%3Cpath d='M0,7 C10,-2 10,17 20,7 C30,-2 30,17 40,7'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%23c084fc' stroke-width='1.5' stroke-dasharray='3,2' opacity='0.6'%3E%3Cpath d='M0,2 Q10,10 20,2 T40,2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23c084fc' stroke-width='1.5' stroke-dasharray='2,2' opacity='0.5'%3E%3Cpath d='M5,15 C5,5 25,5 25,15 C25,25 5,25 5,15 Z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23818cf8' stroke-width='1.2' stroke-dasharray='3,1' opacity='0.45'%3E%3Cpath d='M5,15 C5,5 25,5 25,15 C25,25 5,25 5,15 Z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d28d9' opacity='0.45'%3E%3Ccircle cx='12' cy='4' r='1.5'/%3E%3Ccircle cx='12' cy='20' r='1.5'/%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='20' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa' opacity='0.4'%3E%3Ccircle cx='6' cy='6' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='18' cy='18' r='1.2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.2' opacity='0.35'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='1' opacity='0.3'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E"),
      /* --- YOUR NEW GRADIENT APPLIED AS THE BOTTOM LAYER --- */
      linear-gradient(to bottom,
        rgb(255, 255, 255) 0%,
        rgb(255, 255, 255) 2%,
        #efecf4 30%,
        #f6f4fb 85%,
        rgb(255, 255, 255) 100%);
    /* Layout Positions */
    background-position:
      15% 10%,
      85% 15%,
      12% 75%,
      94% 65%,
      50% 12%,
      88% 85%,
      90% 8%,
      4% 48%,
      65% 92%,
      22% 55%,
      76% 38%,
      78% 72%,
      28% 22%,
      5% 90%,
      95% 5%,
      center center;
    /* Positions the gradient block centered across the full screen dimensions */

    /* Asset Sizes */
    background-size:
      32px 32px,
      24px 24px,
      20px 20px,
      18px 18px,
      22px 22px,
      22px 22px,
      55px 15px,
      60px 22px,
      65px 15px,
      40px 40px,
      35px 35px,
      30px 30px,
      25px 25px,
      35px 35px,
      28px 28px,
      100% 100%;
    /* Spreads the new linear gradient seamlessly to fill 100% of the canvas */

    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  .image-old-theme-bg {
    background-color: #f7f4fd;
    background-image:
      /* --- STARS & SPARKS --- */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e1065' opacity='0.75'%3E%3Cpath d='M12 0c.5 6 5.5 11 11.5 11.5-.2.1-5.5.5-11.5 11.5-.5-6-5.5-11-11.5-11.5.2-.1 5.5-.5 11.5-11.5z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e1065' opacity='0.7'%3E%3Cpath d='M12 0c.4 5.5 5 10.5 10.5 11-.2 0-5 .5-10.5 11-.4-5.5-5-10.5-10.5-11 .2 0 5-.5 10.5-11z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237c3aed' opacity='0.55'%3E%3Cpath d='M12 2c.3 4 4 7.7 8 8-.2 0-4 .3-8 8-.3-4-4-7.7-8-8 .2 0 4-.3 8-8z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa' opacity='0.6'%3E%3Cpath d='M12 3c.2 4 4 7.8 8 8-.2 0-4 .2-8 8-.2-4-4-7.8-8-8 .2 0 4-.2 8-8z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d28d9' opacity='0.45'%3E%3Cpath d='M12 5l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23581c87' opacity='0.5'%3E%3Cpath d='M12 5l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/%3E%3C/svg%3E"),
      /* --- 4 UNIQUE RIBBONS & FLUID LINES --- */
      /* 7. Classic Soft Wave (Top Left Accent) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%236d28d9' stroke-width='1.8' opacity='0.65'%3E%3Cpath d='M0,5 Q5,0 10,5 T20,5 T30,5 T40,5'/%3E%3C/svg%3E"),
      /* 8. Sharp Zig-Zag Steps (Top Right Accent) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%236d28d9' stroke-width='1.8' opacity='0.65'%3E%3Cpath d='M0,8 L5,2 L10,8 L15,2 L20,8 L25,2 L30,8 L35,2 L40,8'/%3E%3C/svg%3E"),
      /* 9. High-Amplitude Deep Wave (Center Left Side) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 15' fill='none' stroke='%237c3aed' stroke-width='1.5' opacity='0.4'%3E%3Cpath d='M0,7 C10,-2 10,17 20,7 C30,-2 30,17 40,7'/%3E%3C/svg%3E"),
      /* 10. Dashed Minimal Wave Ribbon (Bottom Center-Right) */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%23c084fc' stroke-width='1.5' stroke-dasharray='3,2' opacity='0.6'%3E%3Cpath d='M0,2 Q10,10 20,2 T40,2'/%3E%3C/svg%3E"),
      /* --- CONSTELLATIONS & LOOPS --- */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23c084fc' stroke-width='1.5' stroke-dasharray='2,2' opacity='0.5'%3E%3Cpath d='M5,15 C5,5 25,5 25,15 C25,25 5,25 5,15 Z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23818cf8' stroke-width='1.2' stroke-dasharray='3,1' opacity='0.45'%3E%3Cpath d='M5,15 C5,5 25,5 25,15 C25,25 5,25 5,15 Z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236d28d9' opacity='0.45'%3E%3Ccircle cx='12' cy='4' r='1.5'/%3E%3Ccircle cx='12' cy='20' r='1.5'/%3E%3Ccircle cx='4' cy='12' r='1.5'/%3E%3Ccircle cx='20' cy='12' r='1.5'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa' opacity='0.4'%3E%3Ccircle cx='6' cy='6' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3Ccircle cx='18' cy='18' r='1.2'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='1.2' opacity='0.35'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c1d95' stroke-width='1' opacity='0.3'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E"),
      /* Base Gradients */
      radial-gradient(at 10% 20%, rgba(147, 51, 234, 0.16) 0px, transparent 50%),
      radial-gradient(at 90% 10%, rgba(147, 51, 234, 0.09) 0px, transparent 40%),
      radial-gradient(at 50% 50%, rgba(192, 132, 252, 0.14) 0px, transparent 60%),
      radial-gradient(at 5% 80%, rgba(168, 85, 247, 0.14) 0px, transparent 50%);

    /* Layout Coordinates Mapping */
    background-position:
      15% 10%,
      /* 1. Top-left star */
      85% 15%,
      /* 2. Mid-right star */
      12% 75%,
      /* 3. Bottom-left spark */
      94% 65%,
      /* 4. Far-right spark */
      50% 12%,
      /* 5. Top center diamond */
      88% 85%,
      /* 6. Bottom right diamond */
      6% 14%,
      /* 7. Classic Soft Ribbon */
      90% 8%,
      /* 8. Sharp Zig-Zag Ribbon */
      4% 48%,
      /* 9. Deep Wave Ribbon */
      65% 92%,
      /* 10. Dashed Ribbon */
      22% 45%,
      /* 11. Left loop spiral */
      76% 38%,
      /* 12. Mid right loop spiral */
      78% 72%,
      /* 13. Lower right dot cross */
      28% 22%,
      /* 14. Mid left diagonal dots */
      5% 90%,
      /* 15. Far bottom left orbit */
      95% 5%,
      /* 16. Far top right orbit */
      center center,
      center center,
      center center,
      center center;

    /* Scaled proportions */
    background-size:
      32px 32px,
      24px 24px,
      20px 20px,
      18px 18px,
      22px 22px,
      22px 22px,
      60px 15px,
      55px 15px,
      60px 22px,
      65px 15px,
      40px 40px,
      35px 35px,
      30px 30px,
      25px 25px,
      35px 35px,
      28px 28px,
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%;

    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  /* Unique decorative background specifically for the ERP overview section */
  .modern-shapes-bg {
    background-image:
      /* 1. Top Left - Hollow Circle */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='2' opacity='0.3'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E"),
      /* 2. Top Right - Geometric Plus */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5cf6' stroke-width='2' stroke-linecap='round' opacity='0.4'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"),
      /* 3. Mid Left - Abstract Dash Wave */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' fill='none' stroke='%23c084fc' stroke-width='1.5' stroke-dasharray='4,3' opacity='0.5'%3E%3Cpath d='M0,5 Q10,-2 20,5 T40,5'/%3E%3C/svg%3E"),
      /* 4. Center Background - Soft Blur Glow */
      radial-gradient(circle at 70% 30%,
        rgba(167, 139, 250, 0.08) 0px,
        transparent 400px),
      /* 5. Bottom Right - Abstract Triangle Matrix */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%236d28d9' stroke-width='1' opacity='0.25'%3E%3Cpath d='M15 5 L25 25 L5 25 Z M15 10 L20 22 L10 22 Z'/%3E%3C/svg%3E"),
      /* 6. Bottom Left - Minimal Dot Grid */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a78bfa' opacity='0.3'%3E%3Ccircle cx='4' cy='4' r='1'/%3E%3Ccircle cx='12' cy='4' r='1'/%3E%3Ccircle cx='20' cy='4' r='1'/%3E%3Ccircle cx='4' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='20' cy='12' r='1'/%3E%3Ccircle cx='4' cy='20' r='1'/%3E%3Ccircle cx='12' cy='20' r='1'/%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/svg%3E");

    background-position:
      38% 15%,
      /* 1. Hollow Circle */
      90% 10%,
      /* 2. Plus Sign */
      8% 65%,
      /* 3. Dash Wave */
      center,
      /* 4. Glow */
      96% 86%,
      /* 5. Triangle */
      30% 90%;
    /* 6. Dot Grid */

    background-size:
      45px 45px,
      /* 1. Hollow Circle */
      30px 30px,
      /* 2. Plus Sign */
      70px 20px,
      /* 3. Dash Wave */
      100% 100%,
      /* 4. Glow */
      60px 60px,
      /* 5. Triangle */
      40px 40px;
    /* 6. Dot Grid */

    background-repeat: no-repeat;
    /* Optional: keeping attachment fixed makes elements float cleanly when user scrolls */
    background-attachment: scroll;
  }

  /* Unique decorative background specifically for the GST Compliance section */
  .modern-shapes-bg-1 {
    background-image:
      /* 1. Top Right - Large Hollow Hexagon / Diamond */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a855f7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.35'%3E%3Cpolygon points='12 2 22 12 12 22 2 12 12 2'/%3E%3C/svg%3E"),
      /* 2. Top Left - 3x3 Plus/Cross Grid Array */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%238b5cf6' stroke-width='1.5' stroke-linecap='round' opacity='0.3'%3E%3Cpath d='M5 2v6M2 5h6 M15 2v6M12 5h6 M25 2v6M22 5h6 M5 12v6M2 15h6 M15 12v6M12 15h6 M25 12v6M22 15h6 M5 22v6M2 25h6 M15 22v6M12 25h6 M25 22v6M22 25h6'/%3E%3C/svg%3E"),
      /* 3. Mid Right - Clean Diagonal Slash Marks */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23c084fc' stroke-width='2' stroke-linecap='round' opacity='0.45'%3E%3Cpath d='M10 30 L30 10 M10 40 L40 10 M20 40 L40 20'/%3E%3C/svg%3E"),
      /* 4. Center Background - Soft Ambient Purple Glow */
      radial-gradient(ellipse at 30% 50%,
        rgba(139, 92, 246, 0.05) 0px,
        transparent 500px),
      radial-gradient(ellipse at 80% 80%,
        rgba(168, 85, 247, 0.04) 0px,
        transparent 400px),
      /* 5. Bottom Right - Modern Concentric Quarter Circles */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%237c3aed' stroke-width='1.5' stroke-linecap='round' opacity='0.25'%3E%3Cpath d='M40 0 A40 40 0 0 0 0 40 M40 10 A30 30 0 0 0 10 40 M40 20 A20 20 0 0 0 20 40'/%3E%3C/svg%3E"),
      /* 6. Bottom Left - Abstract Tech Circuit Dots */
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239333ea' stroke-width='1' opacity='0.3'%3E%3Ccircle cx='4' cy='4' r='1.5' fill='%239333ea'/%3E%3Ccircle cx='20' cy='20' r='1.5' fill='%239333ea'/%3E%3Cpath d='M4 4 h6 v16 h10' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Layout Coordinates mapping the vectors into empty visual spaces */
    background-position:
      88% 20%,
      /* 1. Hollow Diamond */
      4% 10%,
      /* 2. Plus Grid */
      92% 65%,
      /* 3. Diagonal Slashes */
      center,
      center,
      /* 4. Ambient Glows */
      95% 95%,
      /* 5. Concentric Circles */
      5% 85%;
    /* 6. Circuit Dots */

    /* Scaled dimensions for the vector assets */
    background-size:
      50px 50px,
      /* 1. Hollow Diamond */
      30px 30px,
      /* 2. Plus Grid */
      45px 45px,
      /* 3. Diagonal Slashes */
      100% 100%,
      100% 100%,
      /* 4. Ambient Glows */
      80px 80px,
      /* 5. Concentric Circles */
      40px 40px;
    /* 6. Circuit Dots */

    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}

/* Container for the whole section */
.customer-section {
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* The dark blue banner box */
.customer-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 64rem;
  /* keep this as your outer cap */
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border-radius: 1rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
  .customer-banner {
    flex-direction: row;
    padding: 1.25rem 2.5rem;
  }
}

/* The top arrow notch */
.banner-notch {
  display: none;
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 2rem;
  height: 2rem;
  background-color: #ffffff;
  border-top-left-radius: 0.5rem;
}

@media (min-width: 768px) {
  .banner-notch {
    display: block;
  }
}

/* Left side: Label and icons */
.banner-label-group {
  display: flex;
  align-items: center;
  /* keeps icon/title/arrow vertically centered as title grows to 2 lines */
  gap: 1rem;
  z-index: 10;
  margin-bottom: 1.5rem;
  flex-shrink: 1;
  max-width: 100%;
}

@media (min-width: 768px) {
  .banner-label-group {
    margin-bottom: 0;
  }
}

.banner-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e2336;
  letter-spacing: 0.025em;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  flex: 0 1 auto;
  max-width: 300px;
}

.banner-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #98df2f;
}

.banner-arrow {
  display: none;
  width: 2rem;
  height: 1.5rem;
  color: #98df2f;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .banner-arrow {
    display: block;
  }
}

/* Right side: Logos */
.banner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 10;
  width: 100%;
}

@media (min-width: 768px) {
  .banner-logos {
    width: auto;
    gap: 3rem;
  }
}

/* Individual Logo styling and hover effect */
.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* opacity: 0.6; */
  /* filter: grayscale(100%); */
  transition: all 0.3s ease;
  cursor: pointer;
}

.logo-item:hover {
  opacity: 1;
  /* filter: grayscale(0%); */
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e2336;
  /* Light gray fallback for placeholder text */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Animated Colorful Mesh Background */
.colorful-mesh-bg {
  background: linear-gradient(-45deg, #e0c3fc, #8ec5fc, #fbc2eb, #a18cd1);
  background-size: 400% 400%;
  animation: gradientMove 12s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.glass-interactive-container {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Interactive Frosted Glass Card */
.glass-interactive-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 2rem;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .glass-interactive-card:hover {
    transform: translateY(-8px) translateZ(0);
    box-shadow: 0 20px 40px 0 rgba(31, 38, 135, 0.2);
    background: rgba(255, 255, 255, 1.2);
  }
}

@media (max-width: 640px) {
  .glass-interactive-card {
    border-radius: 1.5rem;
  }

  .glass-interactive-card p {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .glass-interactive-card li {
    align-items: flex-start;
  }

  .glass-interactive-card img {
    max-width: 100%;
  }
}

/* Glowing Gradient Border Card */
.glow-border-card {
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 2rem;
  z-index: 1;
  transition: transform 0.4s ease;
}

.glow-border-card::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 2.2rem;
  background: linear-gradient(45deg, #ff00cc, #3333ff, #00cccc, #ff00cc);
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  filter: blur(15px);
  transition: opacity 0.5s ease;
}

.glow-border-card:hover {
  transform: translateY(-8px);
}

.glow-border-card:hover::before {
  opacity: 1;
  animation: glowSpin 4s linear infinite;
}

@keyframes glowSpin {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.testimonials-section {
  padding: 60px 40px 70px;
  font-family: "Nunito", sans-serif;
  position: relative;
  overflow: hidden;
}

.testimonials-section .deco {
  position: absolute;
  pointer-events: none;
}

.testimonials-section .deco-star-purple {
  top: 60px;
  left: 22%;
  color: #7c3aed;
  font-size: 28px;
}

.testimonials-section .deco-wave-purple {
  top: 160px;
  left: 10%;
  color: #7c3aed;
  font-size: 22px;
  letter-spacing: -4px;
  opacity: 0.7;
}

.testimonials-section .deco-wave-green {
  top: 72px;
  right: 28%;
  color: #84cc16;
  font-size: 20px;
  letter-spacing: -4px;
  opacity: 0.9;
}

.testimonials-section .deco-circle {
  top: 30px;
  right: 4%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #c4b5fd;
  opacity: 0.85;
}

.testimonials-section .deco-star-green {
  top: 200px;
  right: 12%;
  color: #84cc16;
  font-size: 24px;
}

.testimonials-heading {
  text-align: center;
  margin-bottom: 48px;
}

.testimonials-heading h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
}

.testimonials-heading h2 .purple {
  color: #7c3aed;
}

.testimonials-heading p {
  margin-top: 10px;
  font-size: 1.125rem;
  color: #7b818a;
  font-weight: 500;
}

/* Outer flex: arrows + viewport */
.testimonials-outer {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Arrow buttons */
.slider-arrow {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2rem;
  color: #ffffff;
  padding: 10px 14px;
  flex-shrink: 0;
  user-select: none;
  transition: color 0.2s;
  line-height: 1;
}

.slider-arrow:hover {
  color: #7c3aed;
}

/* Clipping viewport */
.slider-viewport {
  overflow: hidden;
  flex: 1;
  padding-top: 5px;
}

/* Moving track — width set by JS */
.slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each card is exactly 1/3 of the viewport minus gaps */
.testimonial-card {
  flex: 0 0 calc((100% - 48px) / 3);
  background: #fff;
  border-radius: 20px;
  padding: 28px 28px 32px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
  /* important: sizing relative to track, not viewport */
  box-sizing: border-box;
}

.testimonial-card:hover {
  box-shadow: 0 8px 32px rgba(124, 58, 237, 0.13);
  transform: translateY(-4px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.card-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #111;
  line-height: 1.2;
  /* white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px; */
}

.card-role {
  font-size: 0.82rem;
  font-weight: 500;
  color: #9ca3af;
  margin-top: 2px;
}

/* .card-role {
  font-size: 0.82rem;
  font-weight: 500;
  color: #9ca3af;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
} */

/* .card-name-wrapper:hover .card-name,
.card-name-wrapper:hover .card-role {
  white-space: normal;
  overflow: visible;
  max-width: 100%;
} */

.card-stars {
  color: #fbbf24;
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.card-quote {
  font-size: 0.93rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.65;
}

/* .card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.card-name-wrapper {
  max-height: 3em;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.card-name-wrapper:hover {
  max-height: 6em;
} */

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    background 0.25s,
    transform 0.25s;
}

.slider-dot.active {
  background: #7c3aed;
  transform: scale(1.25);
}

/* Responsive */
@media (max-width: 900px) {
  .testimonial-card {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (max-width: 580px) {
  .testimonials-section {
    padding: 50px 16px 60px;
  }

  .testimonial-card {
    flex: 0 0 100%;
  }

  .slider-arrow {
    padding: 8px 8px;
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .testimonials-section .deco {
    display: none;
  }
}

.faq-section {
  padding: 70px 40px 80px;
  font-family: "Nunito", sans-serif;
  position: relative;
  overflow: hidden;
}

/* Decorative elements — same as testimonials */
@media (max-width: 768px) {
  .faq-section .deco {
    display: none;
  }
}

.faq-section .deco {
  position: absolute;
  pointer-events: none;
}

.faq-section .deco-star-purple {
  top: 50px;
  left: 8%;
  color: #7c3aed;
  font-size: 26px;
}

.faq-section .deco-wave-purple {
  top: 140px;
  left: 4%;
  color: #7c3aed;
  font-size: 20px;
  letter-spacing: -4px;
  opacity: 0.6;
}

.faq-section .deco-wave-green {
  top: 60px;
  right: 20%;
  color: #84cc16;
  font-size: 18px;
  letter-spacing: -4px;
  opacity: 0.85;
}

.faq-section .deco-circle {
  top: 30px;
  right: 4%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #c4b5fd;
  opacity: 0.8;
}

.faq-section .deco-star-green {
  bottom: 15%;
  right: 8%;
  color: #84cc16;
  font-size: 22px;
}

.faq-section .deco-star-purple2 {
  bottom: 12%;
  left: 6%;
  color: #7c3aed;
  font-size: 18px;
  opacity: 0.5;
}

/* Heading */
.faq-heading {
  text-align: center;
  margin-bottom: 52px;
}

.faq-heading h2 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  color: #111;
}

.faq-heading h2 .purple {
  color: #7c3aed;
}

.faq-heading p {
  margin-top: 10px;
  font-size: 1.125rem;
  color: #7b818a;
  font-weight: 500;
}

/* FAQ grid — left number col + right items */
.faq-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Each item */
.faq-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: box-shadow 0.25s;
}

.faq-item:hover {
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.12);
}

.faq-item.open {
  box-shadow: 0 6px 28px rgba(124, 58, 237, 0.15);
}

/* Question button */
.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  text-align: left;
}

.faq-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f0ff;
  color: #7c3aed;
  font-size: 0.85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    color 0.25s;
}

.faq-item.open .faq-num {
  background: #7c3aed;
  color: #fff;
}

.faq-question-text {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
}

.faq-item.open .faq-question-text {
  color: #7c3aed;
}

/* Chevron */
.faq-chevron {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f0ff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s,
    transform 0.35s;
}

.faq-chevron svg {
  width: 14px;
  height: 14px;
  color: #7c3aed;
  transition: color 0.25s;
}

.faq-item.open .faq-chevron {
  background: #7c3aed;
  transform: rotate(180deg);
}

.faq-item.open .faq-chevron svg {
  color: #fff;
}

/* Answer panel */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 24px 0 76px;
}

.faq-item.open .faq-answer {
  max-height: 400px;
}

/* Inner wrapper carries the padding so it doesn't jump */
.faq-answer-inner {
  padding-bottom: 22px;
}

.faq-answer p,
.faq-answer ul {
  font-size: 0.93rem;
  font-weight: 600;
  color: #6b7280;
  line-height: 1.7;
  margin: 0;
}

.faq-answer ul {
  padding-left: 18px;
}

.faq-answer ul li {
  margin-bottom: 6px;
}

@media (max-width: 600px) {
  .faq-section {
    padding: 50px 16px 60px;
  }

  .faq-answer {
    padding-left: 24px;
  }
}

.faq-divider {
  display: none !important;
}

.purple-icon {
  filter: brightness(0) saturate(100%) invert(23%) sepia(91%) saturate(2290%) hue-rotate(251deg) brightness(91%) contrast(93%);
}

/* Section Background */
.wcu-color-section {
  /* Crisp, slightly off-white to contrast the white circles */
  padding: 40px 20px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
}

/* Container */
.wcu-color-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Typography */
.wcu-color-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  /* Dark Navy */
  margin-top: 0;
  margin-bottom: 70px;
  letter-spacing: -0.02em;
}

/* Grid Layout */
.wcu-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* Card & Interaction */
.wcu-color-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.wcu-color-card:hover {
  transform: translateY(-8px);
  /* Subtle lift */
  transition: transform 0.3s ease;
}

/* Colored Icon Container */
.wcu-color-icon {
  background-color: #ffffff;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(113, 70, 228, 0.08);
  /* Soft purple-tinted shadow */
  transition: all 0.3s ease;
  /* Smooth color transition */
}

/* SVG Standard State (Brand Purple) */
.wcu-color-icon svg {
  width: 36px;
  height: 36px;
  stroke: #7146e4;
  /* Run On Web Purple */
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s ease;
}

/* Hover State - Fills circle with purple, icon goes white */
.wcu-color-card:hover .wcu-color-icon {
  background-color: #7146e4;
  box-shadow: 0 15px 35px rgba(113, 70, 228, 0.25);
}

.wcu-color-card:hover .wcu-color-icon svg {
  stroke: #ffffff;
}

/* Text */
.wcu-color-text {
  color: #1e293b;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* Why Choose Us tooltips */
.wcu-color-card {
  position: relative;
}

.wcu-tooltip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #000000;
  /* black */
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  width: max-content;
  max-width: clamp(160px, 60vw, 220px);
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wcu-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}

.wcu-tooltip-line {
  display: block;
}

.wcu-color-card:hover .wcu-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Dark mode tweak */
.dark .wcu-tooltip {
  background: #000000;
  /* black */
  color: #fff;
}

.dark .wcu-tooltip::after {
  border-color: #000000 transparent transparent transparent;
}

/* Responsive Rules */
@media (max-width: 900px) {
  .wcu-color-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
  }
}

/* Mobile */
@media (max-width: 500px) {
  .wcu-color-section {
    padding: 50px 16px;
  }

  .wcu-color-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .wcu-color-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }

  .wcu-color-icon {
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
  }

  .wcu-color-icon svg {
    width: 26px;
    height: 26px;
  }

  .wcu-color-text {
    font-size: 0.9rem;
    line-height: 1.35;
  }

  .wcu-tooltip {
    max-width: 150px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 11.5px;
    line-height: 1.35;
    padding: 8px 10px;
  }
}


/* Tablet */
@media (max-width: 900px) {
  .wcu-color-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .wcu-color-icon {
    width: 80px;
    height: 80px;
  }

  .wcu-color-icon svg {
    width: 30px;
    height: 30px;
  }
}

.glow-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  /* Increased gap */
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #d8b4fe;
  padding: 10px 22px;
  /* Bigger badge */
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition: all 0.3s ease;

  animation: badgeGlow 2s ease-in-out infinite;
}

.glow-dot {
  width: 10px;
  /* Bigger dot */
  height: 10px;
  border-radius: 50%;
  background: #7c3aed;
  display: inline-block;
}

.glow-badge span:last-child {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  /* Bigger text */
  font-weight: 700;
  color: #6d28d9;
  letter-spacing: 0.2px;
}

@keyframes badgeGlow {

  0%,
  100% {
    box-shadow:
      0 0 12px rgba(124, 58, 237, 0.2),
      0 0 24px rgba(168, 85, 247, 0.15);
  }

  50% {
    box-shadow:
      0 0 20px rgba(124, 58, 237, 0.45),
      0 0 40px rgba(168, 85, 247, 0.35),
      0 0 60px rgba(192, 132, 252, 0.25);
  }
}

.customer-section-container {
  background: radial-gradient(circle at bottom right,
      #f3f4f6 0%,
      #f5f6f8 20%,
      #fafafa 45%,
      #ffffff 70%);
}

@media (min-width: 1024px) {
  .customer-container {
    border-top-left-radius: 10rem;
    border-bottom-right-radius: 10rem;
  }
}

@media (max-width: 1024px) {
  .customer-container {
    border-top-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
  }
}

@media (max-width: 960px) {
  .glass-interactive-card {
    padding: 0.75rem;
  }
}

#home .ronw-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid rgba(168, 121, 11, 0.3);
  border-bottom: 1px solid rgba(168, 121, 11, 0.3);
  padding: 14px 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

#home .ronw-marquee-track {
  display: flex;
  width: max-content;
  animation: ronwScroll 62s linear infinite;
}

#home .ronw-marquee-track span {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: #5b21b6;
  padding: 0 22px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 22px;
}

#home .ronw-marquee-track span::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #a8790b;
}

@keyframes ronwScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #home .ronw-marquee-track {
    animation: none;
  }
}

#home .ronw-fade {
  animation: ronwFadeIn 0.8s ease-out both;
}

@keyframes ronwFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

#home * {
  box-sizing: border-box;
}

#home .ronw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #a8790b;
}

#home .ronw-eyebrow .line {
  width: 28px;
  height: 1px;
  background: #a8790b;
  opacity: 0.5;
}

#home .ronw-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #4c1d95;
  line-height: 1;
}

@media (max-width: 1024px) {
  .bg-decoration {
    display: none !important;
  }
}

.card-name-wrapper {
  cursor: default;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.shine-btn {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.shine-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background:
    conic-gradient(from var(--angle),
      transparent 0deg,
      transparent 310deg,
      #ddd9d9,
      #4c1d95,
      #4c1d95,
      transparent 360deg);
  filter: blur(.5px);
  animation: rotate 2.8s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@keyframes rotate {
  to {
    --angle: 360deg;
  }
}

/* Scroll to top button */
.arrowicon-shadow {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 15px;
  z-index: 1000;
  width: 48px;
  height: 48px;
  border: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s ease;
}

#scrollTopBtn:hover {
  transform: translateY(-3px);
}

#scrollTopBtn:active {
  transform: translateY(-1px) scale(0.95);
}

.arrow-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #7E3BF2;
  stroke-width: 2;
  animation: bounceUp 1.6s ease-in-out infinite;
}

@keyframes bounceUp {

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

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

.wcu-wobble-title {
  transform-origin: 50% 100%;
}

.wcu-wobble-title.wcu-play-wobble {
  animation: wcuWobbleSpin 0.7s ease;
}

@keyframes wcuWobbleSpin {

  0%,
  100% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(-6deg);
  }

  40% {
    transform: rotate(5deg);
  }

  60% {
    transform: rotate(-3deg);
  }

  80% {
    transform: rotate(2deg);
  }
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* orbit Card Styling */
/* .ronw-orbit-card {
  display: none;
} */

@media (min-width: 1024px) {
  .ronw-orbit-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    pointer-events: none;
    font-family: 'Inter', sans-serif;
  }
}

@media (min-width: 1280px) {
  .ronw-orbit-card {
    max-width: 520px;
  }
}

.ronw-orbit-card .rc-src-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.ronw-orbit-card .rc-dash-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  fill: #4c1d95;
}

.ronw-orbit-card .rc-orbit-ring-spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-orbit-spin 60s linear infinite;
}

@keyframes rc-orbit-spin {
  to {
    transform: rotate(360deg);
  }
}

.ronw-orbit-card .rc-orbit-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-orbit-breathe 3.2s ease-in-out infinite;
}

@keyframes rc-orbit-breathe {

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

  50% {
    transform: scale(1.05);
  }
}

.ronw-orbit-card .rc-orbit-dashboard-float {
  transform-box: fill-box;
  transform-origin: center;
  animation: rc-orbit-float 4.5s ease-in-out infinite;
}

@keyframes rc-orbit-float {

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

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

@media (prefers-reduced-motion: reduce) {

  .ronw-orbit-card .rc-orbit-ring-spin,
  .ronw-orbit-card .rc-orbit-node,
  .ronw-orbit-card .rc-orbit-dashboard-float {
    animation: none;
  }
}

.herotext-1 {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 4px;
  color: #1e1b3a;
  animation-delay: 0.2s;

}

.herotext-2 {

  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin: 0 0 28px;
  background: linear-gradient(90deg, #7c3aed, #c026d3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation-delay: 0.3s;

}