*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }/* ! tailwindcss v3.4.17 | 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. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { 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: Cairo, Inter, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 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. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. 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-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* 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-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: 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, input:where([type='button']), input:where([type='reset']), input:where([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; } /* Reset default styling for dialogs. */ dialog { 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::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; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .prose { color: var(--tw-prose-body); max-width: 65ch; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-bold); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker { color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-inline-start-width: 0.25rem; border-inline-start-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-inline-start: 1em; } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: open-quote; } .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 900; color: inherit; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 800; color: inherit; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 700; color: inherit; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) { display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-inline-end: 0.375em; padding-bottom: 0.1875em; padding-inline-start: 0.375em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: "`"; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-inline-end: 1.1428571em; padding-bottom: 0.8571429em; padding-inline-start: 1.1428571em; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) { background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before { content: none; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after { content: none; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) { width: 100%; table-layout: auto; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) { border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { vertical-align: top; } .prose :where(th, td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { text-align: start; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) { color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .prose { --tw-prose-body: #374151; --tw-prose-headings: #111827; --tw-prose-lead: #4b5563; --tw-prose-links: #111827; --tw-prose-bold: #111827; --tw-prose-counters: #6b7280; --tw-prose-bullets: #d1d5db; --tw-prose-hr: #e5e7eb; --tw-prose-quotes: #111827; --tw-prose-quote-borders: #e5e7eb; --tw-prose-captions: #6b7280; --tw-prose-kbd: #111827; --tw-prose-kbd-shadows: 17 24 39; --tw-prose-code: #111827; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: #d1d5db; --tw-prose-td-borders: #e5e7eb; --tw-prose-invert-body: #d1d5db; --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: #9ca3af; --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: #9ca3af; --tw-prose-invert-bullets: #4b5563; --tw-prose-invert-hr: #374151; --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: #374151; --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: #d1d5db; --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: #374151; font-size: 1rem; line-height: 1.75; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; margin-bottom: 0; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ul > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(.prose > ol > li > p:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; } .prose :where(.prose > ol > li > p:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 1.25em; } .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0.5em; padding-inline-start: 1.625em; } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-top: 0.5714286em; padding-inline-end: 0.5714286em; padding-bottom: 0.5714286em; padding-inline-start: 0.5714286em; } .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-start: 0; } .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { padding-inline-end: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 2em; margin-bottom: 2em; } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) { margin-bottom: 0; } .prose-green { --tw-prose-links: #16a34a; --tw-prose-invert-links: #22c55e; } .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; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .static { position: static; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { inset: 0px; } .inset-x-0 { left: 0px; right: 0px; } .-bottom-8 { bottom: -2rem; } .-left-4 { left: -1rem; } .-right-2 { right: -0.5rem; } .-top-2 { top: -0.5rem; } .bottom-0 { bottom: 0px; } .bottom-5 { bottom: 1.25rem; } .left-0 { left: 0px; } .left-1 { left: 0.25rem; } .left-1\/2 { left: 50%; } .left-4 { left: 1rem; } .left-\[12px\] { left: 12px; } .left-auto { left: auto; } .left-full { left: 100%; } .right-0 { right: 0px; } .right-4 { right: 1rem; } .right-8 { right: 2rem; } .top-0 { top: 0px; } .top-1 { top: 0.25rem; } .top-1\/2 { top: 50%; } .top-12 { top: 3rem; } .-z-10 { z-index: -10; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } .col-span-2 { grid-column: span 2 / span 2; } .col-span-4 { grid-column: span 4 / span 4; } .col-span-full { grid-column: 1 / -1; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-auto { margin-left: auto; margin-right: auto; } .my-4 { margin-top: 1rem; margin-bottom: 1rem; } .-mb-2 { margin-bottom: -0.5rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-7 { margin-left: 1.75rem; } .ml-8 { margin-left: 2rem; } .mr-4 { margin-right: 1rem; } .mt-0 { margin-top: 0px; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1 { margin-top: 0.25rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-auto { margin-top: auto; } .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; } .contents { display: contents; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .aspect-video { aspect-ratio: 16 / 9; } .h-1\.5 { height: 0.375rem; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-3\.5 { height: 0.875rem; } .h-32 { height: 8rem; } .h-4 { height: 1rem; } .h-40 { height: 10rem; } .h-48 { height: 12rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-64 { height: 16rem; } .h-7 { height: 1.75rem; } .h-72 { height: 18rem; } .h-8 { height: 2rem; } .h-\[210px\] { height: 210px; } .h-\[300px\] { height: 300px; } .h-\[400px\] { height: 400px; } .h-auto { height: auto; } .h-full { height: 100%; } .h-screen { height: 100vh; } .max-h-0 { max-height: 0px; } .max-h-16 { max-height: 4rem; } .min-h-\[450px\] { min-height: 450px; } .min-h-\[70vh\] { min-height: 70vh; } .min-h-\[80vh\] { min-height: 80vh; } .min-h-screen { min-height: 100vh; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-11\/12 { width: 91.666667%; } .w-12 { width: 3rem; } .w-14 { width: 3.5rem; } .w-16 { width: 4rem; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-3\.5 { width: 0.875rem; } .w-32 { width: 8rem; } .w-4 { width: 1rem; } .w-4\/5 { width: 80%; } .w-48 { width: 12rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-7 { width: 1.75rem; } .w-8 { width: 2rem; } .w-auto { width: auto; } .w-full { width: 100%; } .min-w-16 { min-width: 4rem; } .min-w-\[250px\] { min-width: 250px; } .min-w-\[3rem\] { min-width: 3rem; } .min-w-full { min-width: 100%; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-5xl { max-width: 64rem; } .max-w-6xl { max-width: 72rem; } .max-w-7xl { max-width: 80rem; } .max-w-\[1200px\] { max-width: 1200px; } .max-w-\[1232px\] { max-width: 1232px; } .max-w-\[1280px\] { max-width: 1280px; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[260px\] { max-width: 260px; } .max-w-full { max-width: 100%; } .max-w-md { max-width: 28rem; } .max-w-none { max-width: none; } .max-w-sm { max-width: 24rem; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-4 { --tw-translate-x: -1rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-4 { --tw-translate-y: -1rem; 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-4 { --tw-translate-x: 1rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-4 { --tw-translate-y: 1rem; 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-pointer { cursor: pointer; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .gap-0 { gap: 0px; } .gap-1 { gap: 0.25rem; } .gap-10 { gap: 2.5rem; } .gap-12 { gap: 3rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; } .gap-y-10 { row-gap: 2.5rem; } .gap-y-3 { row-gap: 0.75rem; } .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-left: calc(0.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))); } .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1rem * var(--tw-space-x-reverse)); margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); } .space-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-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(2rem * var(--tw-space-x-reverse)); margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse))); } .space-y-10 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2.5rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-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-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-y-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-2xl { border-radius: 1rem; } .rounded-3xl { border-radius: 1.5rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 0.5rem; } .rounded-md { border-radius: 0.375rem; } .rounded-sm { border-radius: 0.125rem; } .rounded-xl { border-radius: 0.75rem; } .rounded-b-xl { border-bottom-right-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } .rounded-r-md { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; } .rounded-t-3xl { border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; } .rounded-t-xl { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; } .border { border-width: 1px; } .border-2 { border-width: 2px; } .border-4 { border-width: 4px; } .border-y { border-top-width: 1px; border-bottom-width: 1px; } .border-b { border-bottom-width: 1px; } .border-l-4 { border-left-width: 4px; } .border-r { border-right-width: 1px; } .border-t { border-top-width: 1px; } .border-none { border-style: none; } .border-\[\#14B8A6\] { --tw-border-opacity: 1; border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); } .border-\[\#D1D5DB\] { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .border-\[\#EC4899\] { --tw-border-opacity: 1; border-color: rgb(236 72 153 / var(--tw-border-opacity, 1)); } .border-amber-300 { --tw-border-opacity: 1; border-color: rgb(252 211 77 / var(--tw-border-opacity, 1)); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity, 1)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity, 1)); } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(156 163 175 / var(--tw-border-opacity, 1)); } .border-gray-700 { --tw-border-opacity: 1; border-color: rgb(55 65 81 / var(--tw-border-opacity, 1)); } .border-green-500 { --tw-border-opacity: 1; border-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); } .border-orange-300 { --tw-border-opacity: 1; border-color: rgb(253 186 116 / var(--tw-border-opacity, 1)); } .border-pink-500 { --tw-border-opacity: 1; border-color: rgb(236 72 153 / var(--tw-border-opacity, 1)); } .border-red-200 { --tw-border-opacity: 1; border-color: rgb(254 202 202 / var(--tw-border-opacity, 1)); } .border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } .border-sky-200 { --tw-border-opacity: 1; border-color: rgb(186 230 253 / var(--tw-border-opacity, 1)); } .border-sky-300 { --tw-border-opacity: 1; border-color: rgb(125 211 252 / var(--tw-border-opacity, 1)); } .border-sky-600 { --tw-border-opacity: 1; border-color: rgb(2 132 199 / var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .border-violet-300 { --tw-border-opacity: 1; border-color: rgb(196 181 253 / var(--tw-border-opacity, 1)); } .border-white\/20 { border-color: rgb(255 255 255 / 0.2); } .border-white\/40 { border-color: rgb(255 255 255 / 0.4); } .border-yellow-500 { --tw-border-opacity: 1; border-color: rgb(234 179 8 / var(--tw-border-opacity, 1)); } .bg-\[\#14B8A6\] { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1)); } .bg-\[\#FFFFFF\] { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-\[rgba\(255\2c 255\2c 255\2c 0\.16\)\] { background-color: rgba(255,255,255,0.16); } .bg-amber-400 { --tw-bg-opacity: 1; background-color: rgb(251 191 36 / var(--tw-bg-opacity, 1)); } .bg-amber-400\/20 { background-color: rgb(251 191 36 / 0.2); } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .bg-black\/60 { background-color: rgb(0 0 0 / 0.6); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1)); } .bg-blue-50 { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .bg-blue-600 { --tw-bg-opacity: 1; background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .bg-brand-bg-light { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-brand-bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-brand-border { --tw-bg-opacity: 1; background-color: rgb(218 39 56 / var(--tw-bg-opacity, 1)); } .bg-brand-dark { --tw-bg-opacity: 1; background-color: rgb(3 25 110 / var(--tw-bg-opacity, 1)); } .bg-brand-teal { --tw-bg-opacity: 1; background-color: rgb(3 25 110 / var(--tw-bg-opacity, 1)); } .bg-brand-teal-dark { --tw-bg-opacity: 1; background-color: rgb(3 25 110 / var(--tw-bg-opacity, 1)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .bg-gray-900 { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1)); } .bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1)); } .bg-orange-100 { --tw-bg-opacity: 1; background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1)); } .bg-pink-100 { --tw-bg-opacity: 1; background-color: rgb(252 231 243 / var(--tw-bg-opacity, 1)); } .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-red-600 { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .bg-sky-100 { --tw-bg-opacity: 1; background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1)); } .bg-slate-50 { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .bg-teal-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1)); } .bg-teal-500 { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1)); } .bg-transparent { background-color: transparent; } .bg-violet-100 { --tw-bg-opacity: 1; background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1)); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .bg-white\/10 { background-color: rgb(255 255 255 / 0.1); } .bg-white\/20 { background-color: rgb(255 255 255 / 0.2); } .bg-white\/90 { background-color: rgb(255 255 255 / 0.9); } .bg-yellow-100 { --tw-bg-opacity: 1; background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1)); } .bg-yellow-400 { --tw-bg-opacity: 1; background-color: rgb(250 204 21 / var(--tw-bg-opacity, 1)); } .bg-yellow-500 { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); } .bg-opacity-0 { --tw-bg-opacity: 0; } .bg-opacity-50 { --tw-bg-opacity: 0.5; } .bg-opacity-70 { --tw-bg-opacity: 0.7; } .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); } .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); } .from-blue-950 { --tw-gradient-from: #172554 var(--tw-gradient-from-position); --tw-gradient-to: rgb(23 37 84 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-brand-teal { --tw-gradient-from: #03196E var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 25 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-brand-teal-dark { --tw-gradient-from: #03196E var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 25 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-gray-900 { --tw-gradient-from: #111827 var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-green-400 { --tw-gradient-from: #4ade80 var(--tw-gradient-from-position); --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-pink-400 { --tw-gradient-from: #f472b6 var(--tw-gradient-from-position); --tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-teal-800\/80 { --tw-gradient-from: rgb(17 94 89 / 0.8) var(--tw-gradient-from-position); --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .from-yellow-400 { --tw-gradient-from: #facc15 var(--tw-gradient-from-position); --tw-gradient-to: rgb(250 204 21 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-\[\#0d9488\] { --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #0d9488 var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-blue-900\/70 { --tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(30 58 138 / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-brand-teal-dark { --tw-gradient-to: rgb(3 25 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #03196E var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-gray-800 { --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #1f2937 var(--tw-gradient-via-position), var(--tw-gradient-to); } .via-teal-800\/40 { --tw-gradient-to: rgb(17 94 89 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgb(17 94 89 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-\[\#065f46\] { --tw-gradient-to: #065f46 var(--tw-gradient-to-position); } .to-blue-900\/30 { --tw-gradient-to: rgb(30 58 138 / 0.3) var(--tw-gradient-to-position); } .to-brand-gold { --tw-gradient-to: #DA2738 var(--tw-gradient-to-position); } .to-brand-teal-dark { --tw-gradient-to: #03196E var(--tw-gradient-to-position); } .to-green-500 { --tw-gradient-to: #22c55e var(--tw-gradient-to-position); } .to-pink-500 { --tw-gradient-to: #ec4899 var(--tw-gradient-to-position); } .to-teal-900 { --tw-gradient-to: #134e4a var(--tw-gradient-to-position); } .to-transparent\/10 { --tw-gradient-to: rgb(0 0 0 / 0.1) var(--tw-gradient-to-position); } .to-yellow-500 { --tw-gradient-to: #eab308 var(--tw-gradient-to-position); } .bg-cover { background-size: cover; } .bg-fixed { background-attachment: fixed; } .bg-center { background-position: center; } .bg-right { background-position: right; } .bg-no-repeat { background-repeat: no-repeat; } .object-cover { -o-object-fit: cover; object-fit: cover; } .p-1 { padding: 0.25rem; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-0 { padding-left: 0px; padding-right: 0px; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-12 { padding-top: 3rem; padding-bottom: 3rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } .pb-12 { padding-bottom: 3rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-4 { padding-bottom: 1rem; } .pb-6 { padding-bottom: 1.5rem; } .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; } .pt-1 { padding-top: 0.25rem; } .pt-10 { padding-top: 2.5rem; } .pt-12 { padding-top: 3rem; } .pt-16 { padding-top: 4rem; } .pt-20 { padding-top: 5rem; } .pt-4 { padding-top: 1rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-sans { font-family: Cairo, Inter, sans-serif; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } .text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .text-5xl { font-size: 3rem; line-height: 1; } .text-7xl { font-size: 4.5rem; line-height: 1; } .text-\[160px\] { font-size: 160px; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .italic { font-style: italic; } .not-italic { font-style: normal; } .leading-4 { line-height: 1rem; } .leading-5 { line-height: 1.25rem; } .leading-6 { line-height: 1.5rem; } .leading-7 { line-height: 1.75rem; } .leading-none { line-height: 1; } .leading-relaxed { line-height: 1.625; } .leading-snug { line-height: 1.375; } .leading-tight { line-height: 1.25; } .tracking-tighter { letter-spacing: -0.05em; } .tracking-wider { letter-spacing: 0.05em; } .tracking-widest { letter-spacing: 0.1em; } .text-\[\#1F2937\] { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } .text-\[\#4B5563\] { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-\[\#6B7281\] { --tw-text-opacity: 1; color: rgb(107 114 129 / var(--tw-text-opacity, 1)); } .text-amber-300 { --tw-text-opacity: 1; color: rgb(252 211 77 / var(--tw-text-opacity, 1)); } .text-black { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .text-blue-100 { --tw-text-opacity: 1; color: rgb(219 234 254 / var(--tw-text-opacity, 1)); } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .text-blue-700 { --tw-text-opacity: 1; color: rgb(29 78 216 / var(--tw-text-opacity, 1)); } .text-blue-800 { --tw-text-opacity: 1; color: rgb(30 64 175 / var(--tw-text-opacity, 1)); } .text-brand-bg-light { --tw-text-opacity: 1; color: rgb(249 250 251 / var(--tw-text-opacity, 1)); } .text-brand-dark { --tw-text-opacity: 1; color: rgb(3 25 110 / var(--tw-text-opacity, 1)); } .text-brand-teal { --tw-text-opacity: 1; color: rgb(3 25 110 / var(--tw-text-opacity, 1)); } .text-brand-teal-dark { --tw-text-opacity: 1; color: rgb(3 25 110 / var(--tw-text-opacity, 1)); } .text-brand-text-light { --tw-text-opacity: 1; color: rgb(107 114 129 / var(--tw-text-opacity, 1)); } .text-brand-text-medium { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-200 { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity, 1)); } .text-gray-300 { --tw-text-opacity: 1; color: rgb(209 213 219 / var(--tw-text-opacity, 1)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(156 163 175 / var(--tw-text-opacity, 1)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity, 1)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity, 1)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(55 65 81 / var(--tw-text-opacity, 1)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(31 41 55 / var(--tw-text-opacity, 1)); } .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity, 1)); } .text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity, 1)); } .text-green-700 { --tw-text-opacity: 1; color: rgb(21 128 61 / var(--tw-text-opacity, 1)); } .text-green-800 { --tw-text-opacity: 1; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); } .text-orange-500 { --tw-text-opacity: 1; color: rgb(249 115 22 / var(--tw-text-opacity, 1)); } .text-pink-700 { --tw-text-opacity: 1; color: rgb(190 24 93 / var(--tw-text-opacity, 1)); } .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .text-sky-500 { --tw-text-opacity: 1; color: rgb(14 165 233 / var(--tw-text-opacity, 1)); } .text-sky-600 { --tw-text-opacity: 1; color: rgb(2 132 199 / var(--tw-text-opacity, 1)); } .text-sky-800 { --tw-text-opacity: 1; color: rgb(7 89 133 / var(--tw-text-opacity, 1)); } .text-teal-100 { --tw-text-opacity: 1; color: rgb(204 251 241 / var(--tw-text-opacity, 1)); } .text-teal-500 { --tw-text-opacity: 1; color: rgb(20 184 166 / var(--tw-text-opacity, 1)); } .text-violet-500 { --tw-text-opacity: 1; color: rgb(139 92 246 / var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .text-white\/70 { color: rgb(255 255 255 / 0.7); } .text-white\/80 { color: rgb(255 255 255 / 0.8); } .text-yellow-100 { --tw-text-opacity: 1; color: rgb(254 249 195 / var(--tw-text-opacity, 1)); } .text-yellow-600 { --tw-text-opacity: 1; color: rgb(202 138 4 / var(--tw-text-opacity, 1)); } .text-yellow-700 { --tw-text-opacity: 1; color: rgb(161 98 7 / var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .opacity-75 { opacity: 0.75; } .opacity-80 { opacity: 0.8; } .opacity-90 { opacity: 0.9; } .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-2xl { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xl { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .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); } .backdrop-blur { --tw-backdrop-blur: blur(8px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter { -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -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-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-200 { transition-duration: 200ms; } .duration-300 { transition-duration: 300ms; } .ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .\[text-shadow\:0_0_15px_rgba\(0\2c 128\2c 128\2c 0\.5\)\] { text-shadow: 0 0 15px rgba(0,128,128,0.5); } .\[text-shadow\:1px_1px_6px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] { text-shadow: 1px 1px 6px rgba(0,0,0,0.4); } /* * Arabic content support — scoped to actual text/prose elements only, and * deliberately explicit rather than relying on any inherited/logical-keyword * CSS behavior that can't be visually verified in this environment. * * Intentionally NOT applied via and NOT via a `direction` * property on these tags: `direction` mirrors flexbox/grid/table ordering on * whichever element it's set on directly, and several headings in this * codebase double as flex containers themselves (e.g. the FAQ toggle * `

`, which lays out the * question text and the chevron icon as flex items). Setting `direction` on * an element like that would silently swap which side the icon sits on — * exactly the kind of structural layout change that must NOT happen here. * `text-align` cannot do this: it only affects how a line of text sits * within its own box, never the position/order of sibling elements. * * Rule 1 — every text-bearing tag defaults to right-aligned. Explicit, * not inherited: no dependency on `text-align: start` resolving via * `direction` (which requires exactly the flex-unsafe property above). * * Rule 2 — anything that was centered (Tailwind's `.text-center`, the only * centering utility actually used in this codebase — confirmed no * responsive sm:/md:/lg:/xl:/2xl: variants of it exist) stays centered, on * both the element itself and all of its text descendants. This selector * list has higher specificity (0,1,1) than Rule 1's plain tags (0,0,1), so * it always wins for anything inside a centered container, regardless of * source order — no !important needed, no ambiguity. * * Broad tag-based selectors on purpose, not a class allowlist: most content * sits in plain

/

  • /heading tags with no dedicated "content" class * (e.g. product/campaign description paragraphs like `.mobile-desc`/ * `.desk-desc` elsewhere in the codebase) — enumerating every such class is * a losing game, whereas targeting the tags themselves catches all of them. * `span`/`a` are deliberately excluded: those are routinely used as flex * containers for icon+label buttons/badges, where text-align has no useful * effect anyway (inline content centered via flex `items-center`, not * block-level alignment). */ p, li, blockquote, dt, dd, figcaption, h1, h2, h3, h4, h5, h6, td, th { text-align: right; } .text-center, .text-center p, .text-center li, .text-center blockquote, .text-center dt, .text-center dd, .text-center figcaption, .text-center h1, .text-center h2, .text-center h3, .text-center h4, .text-center h5, .text-center h6, .text-center td, .text-center th { text-align: center; } /* * Rule 3 — bidirectional (bidi) ordering *within* a line. * * Rules 1-2 control alignment: which side a line of text sits on. They * cannot control the order of runs inside that line. With no base direction * anywhere (ca-header.php hardcodes with no dir, and WP's * locale is en_US so is_rtl() is false), the document base direction is LTR, * so the Unicode Bidi Algorithm resolves every line LTR-first. In Arabic * that embeds Latin words, digits or neutral punctuation, those runs land on * the wrong side — e.g. the homepage Zakat paragraph * "أوصل 100% من زكاتك للمحتاجين مع Giving Hands اليوم." * rendered with "100%", the brand name and the trailing "." out of place. * Only `direction` can fix this; `text-align` provably cannot. * * Same tag list as Rule 1, then explicitly reverted below on the few tags * that double as flex/grid containers — precisely the case Rule 1's comment * warns about, where `direction` would move a chevron icon to the other * side. Audited before applying:

    has 618 uses and zero flex/grid; only * 11

    (FAQ toggles) and 4
  • are flex containers; there are zero * nested flex/grid boxes inside
  • ///
    that could * inherit a changed box order; and no responsive (sm:/md:/lg:) flex or grid * variants exist on any of these tags. * * Alignment is untouched: Rules 1-2 set `text-align` explicitly, which always * beats the initial value that `direction` would otherwise flip. */ p, li, blockquote, dt, dd, figcaption, h1, h2, h3, h4, h5, h6, td, th { direction: rtl; } /* Text tags that are themselves flex/grid containers keep LTR box ordering, * so child element order (icon vs label) never moves. Written out rather * than with :is() so it degrades safely on older browsers. */ p.flex, p.inline-flex, p.grid, li.flex, li.inline-flex, li.grid, h1.flex, h2.flex, h3.flex, h4.flex, h5.flex, h6.flex, h1.inline-flex, h2.inline-flex, h3.inline-flex, h4.inline-flex, h5.inline-flex, h6.inline-flex, h2.grid, h3.grid, td.flex, th.flex, blockquote.flex { direction: ltr; } /* The FAQ toggle keeps LTR box order above (so its chevron stays put), but its * question text lives in its own non-flex — give that RTL base so mixed * Arabic/Latin questions order correctly without moving the icon. */ .faq-question-text { direction: rtl; } /* * Rule 4 — horizontal ORDER of multi-column content. * * Rules 1-3 fix how text sits and reads. They do not change the order in which * sibling boxes are laid out, so any multi-column grid still ran left-to-right: * the homepage "لماذا تختارنا" cards (front-page.php:570, a `grid grid-cols-1 * md:grid-cols-3` looping 01/02/03) put 01 on the LEFT, i.e. the end of the line * for an Arabic reader, who starts at the right. * * Scoped to `grid-cols-*` containers only — these are the content column * layouts (26 distinct ones). Flex is deliberately NOT included: it is used * ~1,200 times for small icon+label pairs and, critically, for the slider and * carousel tracks (`.swiper-wrapper`, `.flex.transition-transform`), whose JS * drives pixel transforms that a direction flip would invert. * * The second rule puts nested flex/single-column-grid components back to LTR * box order, so an icon+label pair inside a card does not swap sides just * because its grid parent is now RTL. Text inside them still reads RTL via * Rule 3, which targets the text tags themselves. */ [class*="grid-cols-"]:not(.rtl-keep-order) { direction: rtl; } /* Opt-out: add `rtl-keep-order` to any grid whose column order is deliberate * and must not mirror — e.g. the homepage image-left / text-right feature * sections, where flipping would move the photo to the other side of the copy. */ .rtl-keep-order { direction: ltr; } [class*="grid-cols-"] .flex, [class*="grid-cols-"] .inline-flex, [class*="grid-cols-"] .grid:not([class*="grid-cols-"]) { direction: ltr; } /* * Missing Tailwind utilities — needed for RTL layout from the editor. * * This theme ships a PURGED Tailwind build: main.css only contains classes that * were present in the source at build time. Utilities added later to database * content (page markup edited in wp-admin) therefore do nothing at all — * `ml-auto`, `justify-end` and `md:text-right` are all absent from the build. * * That matters for RTL specifically: `text-align: right` is a no-op on any box * that is not full width (a flex item, or anything capped with `max-w-*`), so * the fix has to MOVE THE BOX — which is precisely what `ml-auto` and * `justify-end` are for. Without them there is no way to right-align such * content from the editor. * * Checked in a headless browser before adding: `.justify-end` matched zero * rendered elements outside the About page, so nothing previously laid out * changes. (`md:justify-end` is a separate class and is unaffected.) */ .ml-auto { margin-left: auto; } .mr-auto { margin-right: auto; } .justify-end { justify-content: flex-end; } .justify-start { justify-content: flex-start; } /* Form fields — typed text and placeholder text both follow the input's own * text-align (this covers both). Excludes non-text input types (checkbox, * radio, submit, etc. — text-align on those either does nothing or, for * submit/button, would misalign a button label) and anything explicitly * centered (e.g. the cart's quantity-stepper input), which must keep the * same "stays centered" behavior as Rule 2 above — hence :not(.text-center) * with matching specificity to that rule's plain-class selector. */ input[type="text"]:not(.text-center), input[type="email"]:not(.text-center), input[type="tel"]:not(.text-center), input[type="number"]:not(.text-center), input[type="search"]:not(.text-center), input[type="url"]:not(.text-center), input[type="password"]:not(.text-center), textarea:not(.text-center) { text-align: right; } /* Navbar dropdown menu links: Tailwind_Dropdown_Nav_Walker (class-tailwind- * walker.php) renders bare links directly inside * .sub-menu-container with no
  • wrapper, so they never picked up * right-alignment from anything above — `a` is deliberately excluded from * Rule 1 for the icon-button reason explained there, but these are plain * text links, not icon buttons. */ .sub-menu-container a { text-align: right; } /* Sub-menu links that themselves have children get `flex justify-between` * plus a trailing chevron SVG (see class-tailwind-walker.php). Same * flex-child-position issue as the FAQ fix below main.css's other RTL * rule: text-align cannot move flex children, so reverse just this * element's own two children (label, then icon) — label lands on the * right, icon on the left — without touching direction/dir anywhere else. */ .sub-menu-container a.flex { flex-direction: row-reverse; } /* "Label: Value" cart/checkout rows (Subtotal, Total, Admin Fee) are flex * containers with justify-content: space-between, wrapping a label * (or

    ) followed by an amount — same flex-child-position issue * as above: text-align does nothing here since the amount's *position* is * set by DOM order + justify-content, not by any text-align property. * Instead of touching the parent's flex-direction (would also need a * class added to ~6 template files), pull just the amount element first * via `order`, so the amount lands at the row's start (left) and the * label lands at the end (right) -- reachable across every one of these * without touching layout anywhere else on the page: * - #cart-subtotal: header cart drawer (ca-header.php) * - #single-campaign-cart-subtotal / .single-campaign-cart-subtotal-mobile: * campaign page desktop/mobile cart (layout-one/two/two-backup/three.php; * :not(.head) excludes the unrelated sticky-header item-count variant, * which uses `gap`, not `justify-between`, and isn't a label:value pair) * - #summary-subtotal / #summary-total / #checkout-summary-subtotal / * #checkout-summary-fee / #checkout-summary-total: the /checkout/ page's * two order-summary boxes (grownex-checkout.php) */ #cart-subtotal, #single-campaign-cart-subtotal, .single-campaign-cart-subtotal-mobile:not(.head), #summary-subtotal, #summary-total, #checkout-summary-subtotal, #checkout-summary-fee, #checkout-summary-total { order: -1; } /* "Why Trust Us" counter cards (layout-one.php only): the card title is a * plain

    with no dedicated class, so it inherited the base right-align * rule above like any other heading. Client wants these specific card * titles centered instead -- scoped to .gn-counter-card so it doesn't * touch headings anywhere else. (0,1,1) beats the base rule's plain `h3` * (0,0,1), so no !important needed. */ .gn-counter-card h3 { text-align: center; } .hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:-translate-y-2:hover { --tw-translate-y: -0.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:translate-x-2:hover { --tw-translate-x: 0.5rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:scale-105:hover { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:border-\[\#14B8A6\]:hover { --tw-border-opacity: 1; border-color: rgb(20 184 166 / var(--tw-border-opacity, 1)); } .hover\:bg-\[\#0D9488\]:hover { --tw-bg-opacity: 1; background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); } .hover\:bg-\[\#14B8A6\]:hover { --tw-bg-opacity: 1; background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1)); } .hover\:bg-black:hover { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .hover\:bg-blue-50:hover { --tw-bg-opacity: 1; background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1)); } .hover\:bg-blue-700:hover { --tw-bg-opacity: 1; background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); } .hover\:bg-brand-teal-dark:hover { --tw-bg-opacity: 1; background-color: rgb(3 25 110 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-300:hover { --tw-bg-opacity: 1; background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-50:hover { --tw-bg-opacity: 1; background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-700:hover { --tw-bg-opacity: 1; background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)); } .hover\:bg-gray-900:hover { --tw-bg-opacity: 1; background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1)); } .hover\:bg-green-500:hover { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .hover\:bg-green-700:hover { --tw-bg-opacity: 1; background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1)); } .hover\:bg-pink-500:hover { --tw-bg-opacity: 1; background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-50:hover { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-600:hover { --tw-bg-opacity: 1; background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .hover\:bg-sky-600:hover { --tw-bg-opacity: 1; background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1)); } .hover\:bg-teal-600:hover { --tw-bg-opacity: 1; background-color: rgb(13 148 136 / var(--tw-bg-opacity, 1)); } .hover\:bg-teal-700:hover { --tw-bg-opacity: 1; background-color: rgb(15 118 110 / var(--tw-bg-opacity, 1)); } .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.1); } .hover\:bg-white\/20:hover { background-color: rgb(255 255 255 / 0.2); } .hover\:bg-white\/40:hover { background-color: rgb(255 255 255 / 0.4); } .hover\:bg-yellow-500:hover { --tw-bg-opacity: 1; background-color: rgb(234 179 8 / var(--tw-bg-opacity, 1)); } .hover\:bg-yellow-600:hover { --tw-bg-opacity: 1; background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1)); } .hover\:from-brand-teal-dark:hover { --tw-gradient-from: #03196E var(--tw-gradient-from-position); --tw-gradient-to: rgb(3 25 110 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:from-green-500:hover { --tw-gradient-from: #22c55e var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:from-pink-500:hover { --tw-gradient-from: #ec4899 var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 72 153 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:from-yellow-500:hover { --tw-gradient-from: #eab308 var(--tw-gradient-from-position); --tw-gradient-to: rgb(234 179 8 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .hover\:to-green-600:hover { --tw-gradient-to: #16a34a var(--tw-gradient-to-position); } .hover\:to-pink-600:hover { --tw-gradient-to: #db2777 var(--tw-gradient-to-position); } .hover\:to-yellow-600:hover { --tw-gradient-to: #ca8a04 var(--tw-gradient-to-position); } .hover\:text-\[\#14B8A6\]:hover { --tw-text-opacity: 1; color: rgb(20 184 166 / var(--tw-text-opacity, 1)); } .hover\:text-blue-600:hover { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity, 1)); } .hover\:text-brand-teal:hover { --tw-text-opacity: 1; color: rgb(3 25 110 / var(--tw-text-opacity, 1)); } .hover\:text-brand-teal-dark:hover { --tw-text-opacity: 1; color: rgb(3 25 110 / var(--tw-text-opacity, 1)); } .hover\:text-red-500:hover { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .hover\:text-red-600:hover { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity, 1)); } .hover\:text-teal-400:hover { --tw-text-opacity: 1; color: rgb(45 212 191 / var(--tw-text-opacity, 1)); } .hover\:text-white:hover { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hover\:text-yellow-300:hover { --tw-text-opacity: 1; color: rgb(253 224 71 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-80:hover { opacity: 0.8; } .hover\:opacity-90:hover { opacity: 0.9; } .hover\:shadow-2xl:hover { --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-lg:hover { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-md:hover { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-xl:hover { --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus\:border-indigo-500:focus { --tw-border-opacity: 1; border-color: rgb(99 102 241 / var(--tw-border-opacity, 1)); } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-0: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(0px + 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-brand-teal:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(3 25 110 / var(--tw-ring-opacity, 1)); } .focus\:ring-indigo-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity, 1)); } .focus\:ring-red-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); } .focus\:ring-sky-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity, 1)); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } .group:hover .group-hover\:scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:bg-opacity-25 { --tw-bg-opacity: 0.25; } .group:hover .group-hover\:text-\[\#14B8A6\] { --tw-text-opacity: 1; color: rgb(20 184 166 / var(--tw-text-opacity, 1)); } .peer:checked ~ .peer-checked\: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)); } .peer:checked ~ .peer-checked\:bg-brand-teal { --tw-bg-opacity: 1; background-color: rgb(3 25 110 / var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { .sm\:left-0 { left: 0px; } .sm\:flex { display: flex; } .sm\:h-80 { height: 20rem; } .sm\:h-\[400px\] { height: 400px; } .sm\:h-\[500px\] { height: 500px; } .sm\:w-auto { width: auto; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sm\:flex-row { flex-direction: row; } .sm\:space-x-6 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(1.5rem * var(--tw-space-x-reverse)); margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse))); } .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\:p-10 { padding: 2.5rem; } .sm\:p-12 { padding: 3rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-5xl { font-size: 3rem; line-height: 1; } .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } } @media (min-width: 768px) { .md\:-left-8 { left: -2rem; } .md\:mb-12 { margin-bottom: 3rem; } .md\:mb-16 { margin-bottom: 4rem; } .md\:mb-20 { margin-bottom: 5rem; } .md\:ml-12 { margin-left: 3rem; } .md\:h-80 { height: 20rem; } .md\:h-96 { height: 24rem; } .md\:h-\[471px\] { height: 471px; } .md\:h-\[500px\] { height: 500px; } .md\:w-1\/3 { width: 33.333333%; } .md\:w-2\/3 { width: 66.666667%; } .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } .md\:items-start { align-items: flex-start; } .md\:gap-12 { gap: 3rem; } .md\:p-10 { padding: 2.5rem; } .md\:p-12 { padding: 3rem; } .md\:p-6 { padding: 1.5rem; } .md\:p-8 { padding: 2rem; } .md\:px-12 { padding-left: 3rem; padding-right: 3rem; } .md\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .md\:py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .md\:pt-24 { padding-top: 6rem; } .md\:text-right { text-align: right; } .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; } .md\:text-5xl { font-size: 3rem; line-height: 1; } .md\:text-6xl { font-size: 3.75rem; line-height: 1; } .md\:text-8xl { font-size: 6rem; line-height: 1; } .md\:text-base { font-size: 1rem; line-height: 1.5rem; } .md\:text-lg { font-size: 1.125rem; line-height: 1.75rem; } .md\:text-sm { font-size: 0.875rem; line-height: 1.25rem; } .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } .md\:leading-6 { line-height: 1.5rem; } } @media (min-width: 1024px) { .lg\:col-span-4 { grid-column: span 4 / span 4; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:mt-0 { margin-top: 0px; } .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:grid { display: grid; } .lg\:hidden { display: none; } .lg\:h-16 { height: 4rem; } .lg\:h-96 { height: 24rem; } .lg\:h-\[600px\] { height: 600px; } .lg\:h-full { height: 100%; } .lg\:w-1\/3 { width: 33.333333%; } .lg\:w-2\/5 { width: 40%; } .lg\:w-3\/5 { width: 60%; } .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:gap-12 { gap: 3rem; } .lg\:gap-16 { gap: 4rem; } .lg\:gap-3 { gap: 0.75rem; } .lg\:gap-8 { gap: 2rem; } .lg\:rounded-l-xl { border-top-left-radius: 0.75rem; border-bottom-left-radius: 0.75rem; } .lg\:rounded-r-xl { border-top-right-radius: 0.75rem; border-bottom-right-radius: 0.75rem; } .lg\:rounded-bl-none { border-bottom-left-radius: 0px; } .lg\:rounded-tr-none { border-top-right-radius: 0px; } .lg\:p-12 { padding: 3rem; } .lg\:p-16 { padding: 4rem; } .lg\:px-8 { padding-left: 2rem; padding-right: 2rem; } .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; } .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; } .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; } .lg\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } .lg\:pt-28 { padding-top: 7rem; } .lg\:text-6xl { font-size: 3.75rem; line-height: 1; } .lg\:text-xl { font-size: 1.25rem; line-height: 1.75rem; } } @media (min-width: 1280px) { .xl\:w-8 { width: 2rem; } } /* ------------------------------------------------------------------ Responsive grid utilities missing from the purged Tailwind build. These classes are used in page content but were absent at build time, so they silently did nothing. Appended last so they win over the base .grid-cols-* rules. ------------------------------------------------------------------ */ @media (min-width: 640px) { .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } } @media (min-width: 1280px) { .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }