. Tailwind Typography's
* default blockquote (left border, italic, font-weight 500, quote-mark
* pseudo-elements) is overridden here to match the confirmed filled
* bg-primary rounded box instead — not applied to `.prose` globally, since
* text-block.php (CMS legal pages) reuses `.prose` too and Figma shows no
* such treatment there.
*
* Round 86: two things Round 83 missed. (1) font-size/leading/weight were
* never set, so it was silently inheriting Typography's default 500-weight
* blockquote instead of the confirmed `Inter:Regular` (400) / 18px /
* leading-[28px]. (2) Typography's quote-mark decoration is generated on
* the INNER (`blockquote p:first-of-type::before` /
* `:last-of-type::after`), not the blockquote itself — resetting only the
* blockquote's own pseudo-elements left the auto-generated marks active,
* doubling up with the literal “ ” characters already in the confirmed
* copy (Figma's own text content types the quotes by hand, it doesn't rely
* on CSS-generated ones).
*
* Round 87: padding still read as too generous — the blockquote's OWN
* padding (py-4/px-8) was already exactly 16px/32px, confirmed correct via
* computed style. The actual culprit was the INNER
's own Typography
* default vertical margin (~22.5px, unrelated to the blockquote's padding)
* stacking on top of it, so the real visual gap was ~38.5px, not 16px.
* Zeroed with `[&_p]:my-0` — the confirmed mockup has no separate
* paragraph-level margin, just the one flex container with its own padding.
* ═══════════════════════════════════════════════════════════════════════════ */
.blog-article .prose blockquote {
margin-top: 2rem;
margin-bottom: 2rem;
border-radius: 1rem;
border-left-width: 0px;
--tw-bg-opacity: 1;
background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-family: Inter, sans-serif;
font-size: 1.125rem;
font-weight: 400;
font-style: normal;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.blog-article .prose blockquote::before {
--tw-content: none;
content: var(--tw-content);
}
.blog-article .prose blockquote::after {
--tw-content: none;
content: var(--tw-content);
}
.blog-article .prose blockquote p {
margin-top: 0px;
margin-bottom: 0px;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.blog-article .prose blockquote p::before {
--tw-content: none;
content: var(--tw-content);
}
.blog-article .prose blockquote p::after {
--tw-content: none;
content: var(--tw-content);
}
/* Round 88: body paragraphs are confirmed Inter Regular too (same node
* range as the pull-quote/h3 above) — font-quaternary, sized/leading
* already correct sitewide (16px/28px matches the confirmed values, no
* override needed beyond the family itself). Color is handled by the
* UNSCOPED `.prose` rule below — Inter is blog-specific, but the color
* bug it's riding along with turned out not to be. */
.blog-article .prose p {
font-family: Inter, sans-serif;
}
/* Round 89: EVERY `.prose` usage sitewide — not just the blog post — was
* silently wrong on body-text color. This project never opts into the
* named `prose-direct_shower_door` typography variant (see
* tailwind-typography.config.js's own comment: "does nothing until you
* swap the class"), so Typography's DEFAULT prose variant's built-in
* `--tw-prose-body` gray (rgb(55,65,81), Tailwind's gray-700) was
* rendering everywhere instead of this project's palette. Confirmed via a
* live check on Privacy Policy (already signed off in Phase 6, uses the
* same bare `.prose max-w-none` in text-block.php) — identical wrong
* color there too, not something specific to the blog post. Both
* confirm the same value: `rgba(40,55,74,0.8)` (secondary/80) for
* paragraphs AND lists (Privacy Policy's own bulleted clauses). Fixed
* unscoped, not `.blog-article`-scoped, since this is a real sitewide gap
* — Privacy Policy stays on Poppins (confirmed `Poppins:Regular` there),
* only the color was ever wrong, not the font. */
.prose p,
.prose li {
color: rgb(40 55 74 / 0.8);
}
/* Round 87: Tailwind Typography sizes `.prose` headings with its own
* em-relative scale (h3 ≈ 1.25em → 20px), which wins over the sitewide
* `h3, .h3` rule (base.css, confirmed 18px/24px at 2xl) inside `.prose` —
* Typography's plugin CSS loads in the components layer, after base.css's
* base-layer rule, so it wins the cascade tie even though both are
* effectively bare-h3-specificity. Re-asserted the sitewide scale here
* instead of letting article body h3s drift to a size never confirmed
* against Figma. */
.blog-article .prose h3 {
font-size: 1.125rem;
font-weight: 600;
line-height: 1.3;
--tw-text-opacity: 1;
color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}
@media (min-width: 1310px) {
.blog-article .prose h3 {
font-size: 1.5rem;
}
}
/* Content image, e.g. after "Which Style Fits Your Bathroom?" — confirmed
* from Figma (same node range as the pull-quote above, node 33880:16652):
* rounded-[20px], object-cover. Scoped the same way as the pull-quote. */
.blog-article .prose img {
border-radius: 1.25rem;
}
/**
* Tailwind's utility classes, then this theme's. Utilities that need variants
* (hover:, lg:, group-hover:) belong in the config's `plugins` array instead.
*/
.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;
}
.invisible {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.inset-x-6 {
left: 1.5rem;
right: 1.5rem;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.bottom-0 {
bottom: 0px;
}
.bottom-6 {
bottom: 1.5rem;
}
.right-0 {
right: 0px;
}
.right-8 {
right: 2rem;
}
.top-2 {
top: 0.5rem;
}
.top-\[668px\] {
top: 668px;
}
.isolate {
isolation: isolate;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-\[-1\] {
z-index: -1;
}
.z-\[1\] {
z-index: 1;
}
.z-\[3\] {
z-index: 3;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.m-0 {
margin: 0px;
}
.-mx-3 {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.my-9 {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.\!mb-2 {
margin-bottom: 0.5rem !important;
}
.\!mt-0 {
margin-top: 0px !important;
}
.-mb-6 {
margin-bottom: -1.5rem;
}
.-mb-\[20\.375rem\] {
margin-bottom: -20.375rem;
}
.-mt-10 {
margin-top: -2.5rem;
}
.-mt-2 {
margin-top: -0.5rem;
}
.-mt-5 {
margin-top: -1.25rem;
}
.-mt-8 {
margin-top: -2rem;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-0\.5 {
margin-bottom: 0.125rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-2\.5 {
margin-bottom: 0.625rem;
}
.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;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.mb-\[5px\] {
margin-bottom: 5px;
}
.mb-\[60px\] {
margin-bottom: 60px;
}
.ml-0 {
margin-left: 0px;
}
.ml-auto {
margin-left: auto;
}
.mt-0 {
margin-top: 0px;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.mt-\[12\.375rem\] {
margin-top: 12.375rem;
}
.mt-\[22px\] {
margin-top: 22px;
}
.mt-\[30px\] {
margin-top: 30px;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.aspect-\[280\/120\] {
aspect-ratio: 280/120;
}
.aspect-\[350\/357\] {
aspect-ratio: 350/357;
}
.aspect-\[397\/353\] {
aspect-ratio: 397/353;
}
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.aspect-\[403\/353\] {
aspect-ratio: 403/353;
}
.aspect-\[596\/512\] {
aspect-ratio: 596/512;
}
.aspect-video {
aspect-ratio: 16 / 9;
}
.size-10 {
width: 2.5rem;
height: 2.5rem;
}
.size-12 {
width: 3rem;
height: 3rem;
}
.size-3\.5 {
width: 0.875rem;
height: 0.875rem;
}
.size-32 {
width: 8rem;
height: 8rem;
}
.size-5 {
width: 1.25rem;
height: 1.25rem;
}
.size-6 {
width: 1.5rem;
height: 1.5rem;
}
.size-\[1\.0625rem\] {
width: 1.0625rem;
height: 1.0625rem;
}
.size-\[14px\] {
width: 14px;
height: 14px;
}
.size-\[22px\] {
width: 22px;
height: 22px;
}
.size-\[3\.3125rem\] {
width: 3.3125rem;
height: 3.3125rem;
}
.size-\[30px\] {
width: 30px;
height: 30px;
}
.size-\[43\.231px\] {
width: 43.231px;
height: 43.231px;
}
.size-\[67px\] {
width: 67px;
height: 67px;
}
.size-\[70px\] {
width: 70px;
height: 70px;
}
.size-full {
width: 100%;
height: 100%;
}
.h-40 {
height: 10rem;
}
.h-6 {
height: 1.5rem;
}
.h-\[1\.965px\] {
height: 1.965px;
}
.h-\[13\.75rem\] {
height: 13.75rem;
}
.h-\[182px\] {
height: 182px;
}
.h-\[28\.5rem\] {
height: 28.5rem;
}
.h-\[3\.125rem\] {
height: 3.125rem;
}
.h-\[350px\] {
height: 350px;
}
.h-\[45\.625rem\] {
height: 45.625rem;
}
.h-\[720px\] {
height: 720px;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.min-h-0 {
min-height: 0px;
}
.min-h-\[22rem\] {
min-height: 22rem;
}
.min-h-\[26rem\] {
min-height: 26rem;
}
.min-h-\[28rem\] {
min-height: 28rem;
}
.min-h-\[350px\] {
min-height: 350px;
}
.w-1\/2 {
width: 50%;
}
.w-16 {
width: 4rem;
}
.w-64 {
width: 16rem;
}
.w-\[11px\] {
width: 11px;
}
.w-\[169\.143px\] {
width: 169.143px;
}
.w-\[18px\] {
width: 18px;
}
.w-\[19px\] {
width: 19px;
}
.w-\[240px\] {
width: 240px;
}
.w-\[85\.479px\] {
width: 85.479px;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-px {
width: 1px;
}
.min-w-0 {
min-width: 0px;
}
.min-w-\[170px\] {
min-width: 170px;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-\[65rem\] {
max-width: 65rem;
}
.max-w-\[720px\] {
max-width: 720px;
}
.max-w-md {
max-width: 28rem;
}
.max-w-none {
max-width: none;
}
.max-w-xl {
max-width: 36rem;
}
.flex-1 {
flex: 1 1 0%;
}
.shrink {
flex-shrink: 1;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow-0 {
flex-grow: 0;
}
.basis-full {
flex-basis: 100%;
}
.-translate-y-\[60px\] {
--tw-translate-y: -60px;
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\/3 {
--tw-translate-y: 33.333333%;
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));
}
.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));
}
.-scale-x-100 {
--tw-scale-x: -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));
}
.-scale-y-100 {
--tw-scale-y: -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));
}
.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;
}
.scroll-mt-28 {
scroll-margin-top: 7rem;
}
.list-disc {
list-style-type: disc;
}
.list-none {
list-style-type: none;
}
.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;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-1\.5 {
gap: 0.375rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-3 {
gap: 0.75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-8 {
gap: 2rem;
}
.gap-\[1\.875rem\] {
gap: 1.875rem;
}
.gap-\[10px\] {
gap: 10px;
}
.gap-\[11\.422px\] {
gap: 11.422px;
}
.gap-\[14\.738px\] {
gap: 14.738px;
}
.gap-\[15\.72px\] {
gap: 15.72px;
}
.gap-\[15px\] {
gap: 15px;
}
.gap-\[20px\] {
gap: 20px;
}
.gap-\[30px\] {
gap: 30px;
}
.gap-\[4\.913px\] {
gap: 4.913px;
}
.gap-\[40px\] {
gap: 40px;
}
.gap-\[6\.878px\] {
gap: 6.878px;
}
.gap-\[7\.86px\] {
gap: 7.86px;
}
.gap-\[8\.843px\] {
gap: 8.843px;
}
.gap-\[80px\] {
gap: 80px;
}
.gap-\[8px\] {
gap: 8px;
}
.gap-x-20 {
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.gap-y-8 {
row-gap: 2rem;
}
.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));
}
.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-2\.5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.625rem * 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-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));
}
.divide-x > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-secondary\/20 > :not([hidden]) ~ :not([hidden]) {
border-color: rgb(40 55 74 / 0.2);
}
.self-center {
align-self: center;
}
.self-stretch {
align-self: stretch;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap {
white-space: nowrap;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-\[0\.3125rem\] {
border-radius: 0.3125rem;
}
.rounded-\[10px\] {
border-radius: 10px;
}
.rounded-\[16px\] {
border-radius: 16px;
}
.rounded-\[20px\] {
border-radius: 20px;
}
.rounded-\[2px\] {
border-radius: 2px;
}
.rounded-\[5px\] {
border-radius: 5px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-t-\[20px\] {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.border {
border-width: 1px;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-b {
border-bottom-width: 1px;
}
.border-t {
border-top-width: 1px;
}
.border-solid {
border-style: solid;
}
.\!border-primary {
--tw-border-opacity: 1 !important;
border-color: rgb(107 166 202 / var(--tw-border-opacity, 1)) !important;
}
.border-\[\#6ba6ca\] {
--tw-border-opacity: 1;
border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}
.border-\[\#c4c7c7\] {
--tw-border-opacity: 1;
border-color: rgb(196 199 199 / var(--tw-border-opacity, 1));
}
.border-black\/20 {
border-color: rgb(0 0 0 / 0.2);
}
.border-primary {
--tw-border-opacity: 1;
border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}
.border-primary\/20 {
border-color: rgb(107 166 202 / 0.2);
}
.border-primary\/40 {
border-color: rgb(107 166 202 / 0.4);
}
.border-secondary-100 {
--tw-border-opacity: 1;
border-color: rgb(223 228 233 / var(--tw-border-opacity, 1));
}
.border-secondary\/10 {
border-color: rgb(40 55 74 / 0.1);
}
.border-secondary\/\[0\.16\] {
border-color: rgb(40 55 74 / 0.16);
}
.border-white {
--tw-border-opacity: 1;
border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.border-white\/50 {
border-color: rgb(255 255 255 / 0.5);
}
.border-t-white\/20 {
border-top-color: rgb(255 255 255 / 0.2);
}
.bg-\[\#28374a\] {
--tw-bg-opacity: 1;
background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}
.bg-\[\#e1edf4\] {
--tw-bg-opacity: 1;
background-color: rgb(225 237 244 / var(--tw-bg-opacity, 1));
}
.bg-\[rgba\(107\2c 166\2c 202\2c 0\.2\)\] {
background-color: rgba(107,166,202,0.2);
}
.bg-current {
background-color: currentColor;
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(107 166 202 / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
background-color: rgb(107 166 202 / 0.2);
}
.bg-primary\/70 {
background-color: rgb(107 166 202 / 0.7);
}
.bg-primary\/80 {
background-color: rgb(107 166 202 / 0.8);
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}
.bg-secondary-50 {
--tw-bg-opacity: 1;
background-color: rgb(242 244 246 / var(--tw-bg-opacity, 1));
}
.bg-secondary\/20 {
background-color: rgb(40 55 74 / 0.2);
}
.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\/25 {
background-color: rgb(255 255 255 / 0.25);
}
.bg-white\/40 {
background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/\[0\.18\] {
background-color: rgb(255 255 255 / 0.18);
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.bg-gradient-to-l {
background-image: linear-gradient(to left, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.bg-none {
background-image: none;
}
.from-\[\#28374a\] {
--tw-gradient-from: #28374a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#e1edf4\] {
--tw-gradient-from: #e1edf4 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(225 237 244 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[rgba\(255\2c 255\2c 255\2c 0\)\] {
--tw-gradient-from: rgba(255,255,255,0) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[rgba\(40\2c 55\2c 74\2c 0\)\] {
--tw-gradient-from: rgba(40,55,74,0) var(--tw-gradient-from-position);
--tw-gradient-to: rgba(40, 55, 74, 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/20 {
--tw-gradient-from: rgb(107 166 202 / 0.2) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-primary\/80 {
--tw-gradient-from: rgb(107 166 202 / 0.8) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-secondary\/10 {
--tw-gradient-from: rgb(40 55 74 / 0.1) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white {
--tw-gradient-from: #fff var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-white\/0 {
--tw-gradient-from: rgb(255 255 255 / 0) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-primary\/50 {
--tw-gradient-to: rgb(107 166 202 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(107 166 202 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-secondary\/40 {
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(40 55 74 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-secondary\/85 {
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(40 55 74 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#28374a\] {
--tw-gradient-to: #28374a var(--tw-gradient-to-position);
}
.to-primary\/20 {
--tw-gradient-to: rgb(107 166 202 / 0.2) var(--tw-gradient-to-position);
}
.to-secondary {
--tw-gradient-to: #28374a var(--tw-gradient-to-position);
}
.to-transparent {
--tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.to-white {
--tw-gradient-to: #fff var(--tw-gradient-to-position);
}
.to-white\/20 {
--tw-gradient-to: rgb(255 255 255 / 0.2) var(--tw-gradient-to-position);
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.p-0 {
padding: 0px;
}
.p-10 {
padding: 2.5rem;
}
.p-4 {
padding: 1rem;
}
.p-6 {
padding: 1.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[33px\] {
padding: 33px;
}
.\!px-0 {
padding-left: 0px !important;
padding-right: 0px !important;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[1\.875rem\] {
padding-left: 1.875rem;
padding-right: 1.875rem;
}
.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-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.py-\[0\.9375rem\] {
padding-top: 0.9375rem;
padding-bottom: 0.9375rem;
}
.pb-10 {
padding-bottom: 2.5rem;
}
.pb-16 {
padding-bottom: 4rem;
}
.pb-20 {
padding-bottom: 5rem;
}
.pb-3 {
padding-bottom: 0.75rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-\[1\.875rem\] {
padding-bottom: 1.875rem;
}
.pl-6 {
padding-left: 1.5rem;
}
.pl-\[1\.6875rem\] {
padding-left: 1.6875rem;
}
.pr-6 {
padding-right: 1.5rem;
}
.pt-28 {
padding-top: 7rem;
}
.pt-32 {
padding-top: 8rem;
}
.pt-6 {
padding-top: 1.5rem;
}
.pt-\[1\.875rem\] {
padding-top: 1.875rem;
}
.pt-\[17\.125rem\] {
padding-top: 17.125rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.font-primary {
font-family: Poppins, sans-serif;
}
.font-quaternary {
font-family: Inter, sans-serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-\[0\.9375rem\] {
font-size: 0.9375rem;
}
.text-\[1\.125rem\] {
font-size: 1.125rem;
}
.text-\[1\.5rem\] {
font-size: 1.5rem;
}
.text-\[1\.625rem\] {
font-size: 1.625rem;
}
.text-\[16px\] {
font-size: 16px;
}
.text-\[2\.3rem\] {
font-size: 2.3rem;
}
.text-\[2\.5rem\] {
font-size: 2.5rem;
}
.text-\[32px\] {
font-size: 32px;
}
.text-\[40px\] {
font-size: 40px;
}
.text-\[60px\] {
font-size: 60px;
}
.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-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.font-medium {
font-weight: 500;
}
.font-normal {
font-weight: 400;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.italic {
font-style: italic;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-\[1\.2\] {
line-height: 1.2;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.5\] {
line-height: 1.5;
}
.leading-\[28px\] {
line-height: 28px;
}
.leading-tight {
line-height: 1.25;
}
.tracking-\[0\.15px\] {
letter-spacing: 0.15px;
}
.tracking-\[1\.4px\] {
letter-spacing: 1.4px;
}
.tracking-\[1px\] {
letter-spacing: 1px;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.\!text-primary {
--tw-text-opacity: 1 !important;
color: rgb(107 166 202 / var(--tw-text-opacity, 1)) !important;
}
.\!text-secondary {
--tw-text-opacity: 1 !important;
color: rgb(40 55 74 / var(--tw-text-opacity, 1)) !important;
}
.\!text-secondary\/80 {
color: rgb(40 55 74 / 0.8) !important;
}
.text-\[\#28374a\] {
--tw-text-opacity: 1;
color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}
.text-\[\#333\] {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-amber-400 {
--tw-text-opacity: 1;
color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}
.text-secondary {
--tw-text-opacity: 1;
color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}
.text-secondary-500 {
--tw-text-opacity: 1;
color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}
.text-secondary\/60 {
color: rgb(40 55 74 / 0.6);
}
.text-secondary\/70 {
color: rgb(40 55 74 / 0.7);
}
.text-secondary\/80 {
color: rgb(40 55 74 / 0.8);
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/80 {
color: rgb(255 255 255 / 0.8);
}
.text-white\/90 {
color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
color: rgb(255 255 255 / 0.95);
}
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-80 {
opacity: 0.8;
}
.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-\[0px_1px_1px_0px_rgba\(0\2c 0\2c 0\2c 0\.05\)\] {
--tw-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
--tw-shadow-colored: 0px 1px 1px 0px 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-\[0px_4px_14px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
--tw-shadow: 0px 4px 14px 0px rgba(0,0,0,0.1);
--tw-shadow-colored: 0px 4px 14px 0px 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-\[4px_4px_10px_0px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
--tw-shadow: 4px 4px 10px 0px rgba(0,0,0,0.1);
--tw-shadow-colored: 4px 4px 10px 0px 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;
}
.ring {
--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(3px + 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);
}
.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);
}
.drop-shadow {
--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
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);
}
.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-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;
}
.duration-300 {
transition-duration: 300ms;
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
}
.title-white :is(h1,h2,h3,h4,h5,h6) {
color: #ffffff;
}
.\[mask-image\:linear-gradient\(to_right\2c transparent\2c white_55\%\)\] {
-webkit-mask-image: linear-gradient(to right,transparent,white 55%);
mask-image: linear-gradient(to right,transparent,white 55%);
}
/**
* Custom styles to immediately follow Tailwind's `utilities` layer.
* tailwind/custom/utilities.css
*
* For PLAIN utility classes that never need a variant. Usually empty.
*/
/* Hide scrollbars on the horizontally-scrolling style-pill row. */
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.marker\:text-white *::marker {
color: rgb(255 255 255 );
}
.marker\:text-white::marker {
color: rgb(255 255 255 );
}
.placeholder\:text-secondary-500::-moz-placeholder {
--tw-text-opacity: 1;
color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}
.placeholder\:text-secondary-500::placeholder {
--tw-text-opacity: 1;
color: rgb(83 95 110 / var(--tw-text-opacity, 1));
}
.after\:absolute::after {
content: var(--tw-content);
position: absolute;
}
.after\:inset-0::after {
content: var(--tw-content);
inset: 0px;
}
.after\:z-\[1\]::after {
content: var(--tw-content);
z-index: 1;
}
.after\:z-\[2\]::after {
content: var(--tw-content);
z-index: 2;
}
.after\:bg-gradient-to-b::after {
content: var(--tw-content);
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.after\:bg-gradient-to-r::after {
content: var(--tw-content);
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.after\:from-secondary::after {
content: var(--tw-content);
--tw-gradient-from: #28374a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.after\:from-secondary\/0::after {
content: var(--tw-content);
--tw-gradient-from: rgb(40 55 74 / 0) var(--tw-gradient-from-position);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.after\:via-secondary\/40::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(40 55 74 / 0.4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.after\:via-secondary\/85::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), rgb(40 55 74 / 0.85) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.after\:to-secondary\/0::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
}
.after\:to-secondary\/50::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0.5) var(--tw-gradient-to-position);
}
.after\:to-secondary\/80::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0.8) var(--tw-gradient-to-position);
}
.hover\:border-transparent:hover {
border-color: transparent;
}
.hover\:bg-secondary:hover {
--tw-bg-opacity: 1;
background-color: rgb(40 55 74 / var(--tw-bg-opacity, 1));
}
.hover\:bg-secondary-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(16 22 30 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/20:hover {
background-color: rgb(255 255 255 / 0.2);
}
.focus\:border-primary:focus {
--tw-border-opacity: 1;
border-color: rgb(107 166 202 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white\/80 {
color: rgb(255 255 255 / 0.8);
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.prose-a\:text-primary :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
--tw-text-opacity: 1;
color: rgb(107 166 202 / var(--tw-text-opacity, 1));
}
@media not all and (min-width: 1200px) {
.max-xl\:m-4 {
margin: 1rem;
}
.max-xl\:hidden {
display: none;
}
}
@media (min-width: 576px) {
.sm\:col-span-2 {
grid-column: span 2 / span 2;
}
.sm\:my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.sm\:-mt-10 {
margin-top: -2.5rem;
}
.sm\:mb-12 {
margin-bottom: 3rem;
}
.sm\:mt-12 {
margin-top: 3rem;
}
.sm\:h-\[350px\] {
height: 350px;
}
.sm\:min-h-\[30rem\] {
min-height: 30rem;
}
.sm\:w-1\/2 {
width: 50%;
}
.sm\:w-24 {
width: 6rem;
}
.sm\:w-72 {
width: 18rem;
}
.sm\:w-\[calc\(50\%-0\.75rem\)\] {
width: calc(50% - 0.75rem);
}
.sm\:basis-\[calc\(\(100\%-2rem\)\/2\)\] {
flex-basis: calc((100% - 2rem) / 2);
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sm\:p-10 {
padding: 2.5rem;
}
.sm\:py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.sm\:pb-8 {
padding-bottom: 2rem;
}
.sm\:pt-40 {
padding-top: 10rem;
}
.sm\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-\[1rem\] {
font-size: 1rem;
}
}
@media (min-width: 768px) {
.md\:min-h-\[34rem\] {
min-height: 34rem;
}
.md\:w-1\/3 {
width: 33.333333%;
}
.md\:w-\[calc\(50\%-1rem\)\] {
width: calc(50% - 1rem);
}
.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.md\:flex-row {
flex-direction: row;
}
.md\:items-end {
align-items: flex-end;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:p-10 {
padding: 2.5rem;
}
.md\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.md\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.md\:pb-24 {
padding-bottom: 6rem;
}
.md\:text-right {
text-align: right;
}
}
@media (min-width: 992px) {
.lg\:absolute {
position: absolute;
}
.lg\:bottom-0 {
bottom: 0px;
}
.lg\:right-0 {
right: 0px;
}
.lg\:order-1 {
order: 1;
}
.lg\:order-2 {
order: 2;
}
.lg\:my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.lg\:-mt-10 {
margin-top: -2.5rem;
}
.lg\:-mt-12 {
margin-top: -3rem;
}
.lg\:mb-10 {
margin-bottom: 2.5rem;
}
.lg\:mb-12 {
margin-bottom: 3rem;
}
.lg\:mb-16 {
margin-bottom: 4rem;
}
.lg\:mb-24 {
margin-bottom: 6rem;
}
.lg\:mb-8 {
margin-bottom: 2rem;
}
.lg\:mt-0 {
margin-top: 0px;
}
.lg\:mt-10 {
margin-top: 2.5rem;
}
.lg\:mt-12 {
margin-top: 3rem;
}
.lg\:mt-16 {
margin-top: 4rem;
}
.lg\:mt-\[14\.6875rem\] {
margin-top: 14.6875rem;
}
.lg\:h-\[45\.625rem\] {
height: 45.625rem;
}
.lg\:h-auto {
height: auto;
}
.lg\:min-h-\[36rem\] {
min-height: 36rem;
}
.lg\:min-h-\[450px\] {
min-height: 450px;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
.lg\:w-3\/5 {
width: 60%;
}
.lg\:w-80 {
width: 20rem;
}
.lg\:w-\[15\%\] {
width: 15%;
}
.lg\:w-\[16\%\] {
width: 16%;
}
.lg\:w-\[23\.5625rem\] {
width: 23.5625rem;
}
.lg\:w-\[380px\] {
width: 380px;
}
.lg\:w-\[44\%\] {
width: 44%;
}
.lg\:w-\[calc\(33\.333\%-1rem\)\] {
width: calc(33.333% - 1rem);
}
.lg\:flex-1 {
flex: 1 1 0%;
}
.lg\:shrink-0 {
flex-shrink: 0;
}
.lg\:basis-\[calc\(\(100\%-4rem\)\/3\)\] {
flex-basis: calc((100% - 4rem) / 3);
}
.lg\:basis-\[calc\(\(100\%-6rem\)\/4\)\] {
flex-basis: calc((100% - 6rem) / 4);
}
.lg\:-translate-y-\[60px\] {
--tw-translate-y: -60px;
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));
}
.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-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:grid-cols-\[544fr_680fr\] {
grid-template-columns: 544fr 680fr;
}
.lg\:grid-cols-\[56fr_45fr\] {
grid-template-columns: 56fr 45fr;
}
.lg\:grid-cols-\[596fr_630fr\] {
grid-template-columns: 596fr 630fr;
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:items-center {
align-items: center;
}
.lg\:gap-11 {
gap: 2.75rem;
}
.lg\:gap-12 {
gap: 3rem;
}
.lg\:gap-14 {
gap: 3.5rem;
}
.lg\:gap-16 {
gap: 4rem;
}
.lg\:gap-\[4\.75rem\] {
gap: 4.75rem;
}
.lg\:gap-\[5\.8125rem\] {
gap: 5.8125rem;
}
.lg\:p-14 {
padding: 3.5rem;
}
.lg\:px-\[3\.75rem\] {
padding-left: 3.75rem;
padding-right: 3.75rem;
}
.lg\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.lg\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.lg\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.lg\:py-\[1\.475rem\] {
padding-top: 1.475rem;
padding-bottom: 1.475rem;
}
.lg\:pb-10 {
padding-bottom: 2.5rem;
}
.lg\:pb-14 {
padding-bottom: 3.5rem;
}
.lg\:pb-16 {
padding-bottom: 4rem;
}
.lg\:pb-20 {
padding-bottom: 5rem;
}
.lg\:pb-24 {
padding-bottom: 6rem;
}
.lg\:pr-12 {
padding-right: 3rem;
}
.lg\:pr-16 {
padding-right: 4rem;
}
.lg\:pt-10 {
padding-top: 2.5rem;
}
.lg\:pt-12 {
padding-top: 3rem;
}
.lg\:pt-20 {
padding-top: 5rem;
}
.lg\:after\:to-secondary\/0::after {
content: var(--tw-content);
--tw-gradient-to: rgb(40 55 74 / 0) var(--tw-gradient-to-position);
}
}
@media (min-width: 1200px) {
.xl\:-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.xl\:my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.xl\:-mb-\[20\.375rem\] {
margin-bottom: -20.375rem;
}
.xl\:-mb-\[24rem\] {
margin-bottom: -24rem;
}
.xl\:-mt-\[3\.25rem\] {
margin-top: -3.25rem;
}
.xl\:mb-20 {
margin-bottom: 5rem;
}
.xl\:mt-20 {
margin-top: 5rem;
}
.xl\:hidden {
display: none;
}
.xl\:min-h-\[\.\.\.\] {
min-height: ...;
}
.xl\:w-\[11\%\] {
width: 11%;
}
.xl\:w-\[24\%\] {
width: 24%;
}
.xl\:w-\[8\%\] {
width: 8%;
}
.xl\:flex-row {
flex-direction: row;
}
.xl\:items-center {
align-items: center;
}
.xl\:gap-4 {
gap: 1rem;
}
.xl\:gap-x-\[11\.0625rem\] {
-moz-column-gap: 11.0625rem;
column-gap: 11.0625rem;
}
.xl\:gap-y-8 {
row-gap: 2rem;
}
.xl\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.xl\:pb-16 {
padding-bottom: 4rem;
}
.xl\:pb-24 {
padding-bottom: 6rem;
}
.xl\:pt-14 {
padding-top: 3.5rem;
}
.xl\:pt-24 {
padding-top: 6rem;
}
.xl\:pt-\[17\.125rem\] {
padding-top: 17.125rem;
}
}
@media (min-width: 1310px) {
.\32xl\:my-24 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.\32xl\:mb-24 {
margin-bottom: 6rem;
}
.\32xl\:mt-24 {
margin-top: 6rem;
}
.\32xl\:min-h-\[45rem\] {
min-height: 45rem;
}
.\32xl\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.\32xl\:py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.\32xl\:pb-12 {
padding-bottom: 3rem;
}
.\32xl\:pb-14 {
padding-bottom: 3.5rem;
}
.\32xl\:pb-20 {
padding-bottom: 5rem;
}
.\32xl\:pb-32 {
padding-bottom: 8rem;
}
.\32xl\:pt-\[3\.75rem\] {
padding-top: 3.75rem;
}
}
.hover\:\[\&_a\:not\(\.btn\)\]\:text-white a:not(.btn):hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.\[\&_a\:not\(\:hover\)\]\:text-white\/70 a:not(:hover) {
color: rgb(255 255 255 / 0.7);
}
.\[\&_a\]\:text-inherit a {
color: inherit;
}
.\[\&_a\]\:text-secondary a {
--tw-text-opacity: 1;
color: rgb(40 55 74 / var(--tw-text-opacity, 1));
}
.\[\&_a\]\:underline a {
text-decoration-line: underline;
}
.\[\&_h1\]\:mb-4 h1 {
margin-bottom: 1rem;
}
.\[\&_p\]\:mb-0 p {
margin-bottom: 0px;
}