. Sits above the overlay.
*/
.surface-card-title {
margin-bottom: 0.75rem;
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-size: 1.25rem;
font-weight: 500;
text-transform: uppercase;
line-height: 1.5;
letter-spacing: 0em;
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
}
@media (min-width: 1440px) {
.surface-card-title {
font-size: 1.5rem;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
* ICON LIST — wrap a WYSIWYG
to swap bullets for an icon.
*
* The design's own bulleted list (the Key Capabilities grid, 10911:520) uses a
* plain 6px orange dot rather than a glyph, so this class stays available for
* WYSIWYG content but is not what that section should use.
*
* TODO: `\e932` is a placeholder codepoint — set it once the icomoon set lands.
* ═══════════════════════════════════════════════════════════════════════════ */
.list-icon ul,
ul.list-icon {
margin-left: 0px;
list-style-type: none;
}
.list-icon ul li,
ul.list-icon li {
position: relative;
padding-left: 2rem;
}
.list-icon ul li::before,
ul.list-icon li::before {
position: absolute;
top: 0.15em;
left: 0px;
font-family: icomoon;
font-size: 1.2em;
font-weight: 400;
line-height: 1;
content: var(--tw-content);
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
@media (min-width: 992px) {
.list-icon ul li,
ul.list-icon li {
padding-left: 2.25rem;
}
}
.list-icon ul li strong,
ul.list-icon li strong {
--tw-text-opacity: 1;
color: rgb(15 29 37 / var(--tw-text-opacity, 1));
}
/* ═══════════════════════════════════════════════════════════════════════════
* Skip link — first child of .site-wrapper.
* ═══════════════════════════════════════════════════════════════════════════ */
.skip-link {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.skip-link:focus {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
position: fixed;
left: 1rem;
top: 1rem;
z-index: 100000;
border-radius: 0.25rem;
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
--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);
}
/* ═══════════════════════════════════════════════════════════════════════════
* Media collage — the offset treatment on the home About section.
*
* ✓ Figma 10911:118 / 10911:120. All coordinates below are relative to the
* 1440-wide SECTION, which is how the export reports them:
*
* backdrop x 1010..1440 430x684 y 0 flush to the VIEWPORT edge
* block x 861..1159 298x334 y 160 orange, behind the front photo
* front x 720..1140 420x340 y 184 starts on the section midpoint
*
* Two things this gets right that the first cut did not:
*
* 1. The backdrop is anchored to the SECTION, not to the media column, so
* `right: 0` lands on the viewport edge at ANY width. Pinned to the column
* with a fixed -60px it only touched at exactly 1440 and left a 240px gap
* at 1920.
* 2. The front photo and the block sit at y=184 / y=160 of the 684 block, not
* at 24 / 0 — they were riding ~160px too high, bunched at the top.
*
* The column cell carries px-3 / xl:px-4, which would push the front photo
* inboard of the section midpoint, so .media-collage cancels it with a
* matching negative margin.
*
* Below lg it collapses to the two photos stacked with no overlap — the offset
* needs horizontal room a phone does not have — and the orange block becomes a
* thin accent bar rather than vanishing, since it is the only brand colour here.
* ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
.media-text--collage {
position: relative;
}
}
.media-text--collage {
/* containing block for all three collage layers */
}
/*
* `lg:static` on purpose. Below lg this is a relative flex column; from lg up it
* must NOT be a containing block, so the three layers resolve against the
* SECTION instead — which is what lets the backdrop reach the viewport edge and
* what makes the design's section-relative coordinates usable directly.
* It keeps its height so the row still reserves 684px of space.
*/
.media-collage {
position: relative;
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 992px) {
.media-collage {
position: static;
display: block;
height: 42.75rem;
gap: 0px;
}
}
/*
* ✓ Anchored so the OVERLAP with the front photo is what stays constant.
*
* `right: 0` alone was not enough. The backdrop kept touching the viewport edge,
* but as the screen grew it walked away from the front photo:
*
* 1440 overlap 130 (the design)
* 1680 overlap 10
* 1920 overlap -110 (a gap)
* 2560 overlap -430 (a wide gap — the composition falls apart)
*
* `.container` caps at 1440 and centres, so its left edge is `50vw - 720`. The
* design puts the backdrop 1010px into that container, hence
* `calc(50vw + 290px)`. Because the front photo sits on the viewport centre and
* is 420 wide, the overlap comes out at 420 - 290 = 130px at EVERY width.
*
* Width is then whatever is left to the viewport edge (430 at 1440, 990 at
* 2560), so the photo keeps bleeding off the screen and simply shows more of
* itself on a wide monitor — which is what a full-bleed image should do.
*/
.media-collage-backdrop {
overflow: hidden;
}
@media not all and (min-width: 992px) {
.media-collage-backdrop {
aspect-ratio: 4/3;
}
}
@media (min-width: 992px) {
.media-collage-backdrop {
position: absolute;
left: calc(50vw + 290px);
right: 0px;
top: 4rem;
height: 42.75rem;
width: auto;
max-width: none;
}
}
@media (min-width: 1200px) {
.media-collage-backdrop {
top: 5rem;
}
}
@media (min-width: 1440px) {
.media-collage-backdrop {
top: 7.5rem;
}
}
.media-collage-front {
overflow: hidden;
--tw-shadow: 0 10px 30px rgba(15,29,37,0.18);
--tw-shadow-colored: 0 10px 30px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media not all and (min-width: 992px) {
.media-collage-front {
aspect-ratio: 4/3;
}
}
@media (min-width: 992px) {
.media-collage-front {
position: absolute;
left: 50%;
top: 15.5rem;
z-index: 2;
height: 21.25rem;
width: 26.25rem;
}
}
@media (min-width: 1200px) {
.media-collage-front {
top: 16.5rem;
}
}
@media (min-width: 1440px) {
.media-collage-front {
top: 19rem;
}
}
.media-collage-front {
/* 120 pad + 184 */
}
/* ✓ x=861 = the midpoint + 141px (10911:121). */
.media-collage-block {
display: block;
height: 0.5rem;
width: 6rem;
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
}
@media (min-width: 992px) {
.media-collage-block {
position: absolute;
left: calc(50% + 8.8125rem);
top: 14rem;
z-index: 1;
height: 20.875rem;
width: 18.625rem;
}
}
@media (min-width: 1200px) {
.media-collage-block {
top: 15rem;
}
}
@media (min-width: 1440px) {
.media-collage-block {
top: 17.5rem;
}
}
.media-collage-block {
/* 120 pad + 160 */
}
/*
* ⚠ The collage section KEEPS its normal vertical rhythm.
*
* An earlier pass stripped it, on a misreading: the Figma frames on this page
* are CONTENT blocks separated by a uniform 120px gap (774→894, 1095→1215,
* 1899→2019, 3088→3208, 3800→3920), and that gap IS 2xl:py-30. Cropping the
* build from the section top rather than the content top made correctly-placed
* copy look 117px low.
*
* So there is nothing to override here — the rule is kept, empty, as a marker
* that the collage variant was checked and needs no padding change.
*/
.media-text--collage {
/* intentionally no overrides — see the note above */
}
/* ═══════════════════════════════════════════════════════════════════════════
* Why Choose Us — per-reason background swap.
*
* ⚠ NOT IN THE DESIGN. The Figma band (10911:202) carries one static photo;
* this is a requested enhancement, driven by atg.whyChooseUs().
*
* The layers cross-fade rather than cut, and the non-hovered reasons dim so the
* active one reads as selected. `has-[...]` is avoided deliberately — the JS
* already owns the state and duplicating it in CSS invites the two to disagree.
* ═══════════════════════════════════════════════════════════════════════════ */
.wcu-layer {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
/*
* ✓ Numerals are WHITE; only the active row's goes primary and gains a 3px
* underline (10911:202 — measured: 01 is #E4462B with its rule at y242-244,
* 32px wide; 02/03/04 are pure white).
*
* Both `:hover` and `.is-active` so the pointer state works even if the JS has
* not run, and the JS-driven state (which also covers focus) matches it.
*/
.wcu-num {
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
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: 300ms;
}
/*
* On a white surface the numerals are INK, not off-white — Commercial Services
* (12946:645) sets them #0F1D25 with only the active one going primary. The
* light branch used to paint every numeral `text-primary` permanently, so all
* four read as active.
*/
.wcu-num--ink {
--tw-text-opacity: 1;
color: rgb(15 29 37 / var(--tw-text-opacity, 1));
}
/*
* ✓ …EXCEPT ON THE COMPACT LIST, where all four ARE primary and all four carry
* the rule (Apartment Buildings 12946:1861 / 1866 / 1871 / 1876 — every one has
* its Rectangle 149854). There is no active row to distinguish on that frame, so
* the marked state is the resting state.
*
* The rule is 2px and 29 wide here against the 3px/32 of the hover state, and it
* is drawn unconditionally rather than on `:hover` — which also means this
* variant needs no JS and no `is-active`.
*/
.wcu-num--marked {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
.wcu-num--marked::after {
position: absolute;
bottom: -0.5rem;
left: 0px;
height: 2px;
width: 1.8125rem;
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
--tw-content: '';
content: var(--tw-content);
}
/*
* ⚠ KEYED ON `.wcu-row`, NOT `.wcu-reason`.
*
* The two classes do different jobs and used to be conflated. `.wcu-reason` is
* the JS hook for the photo variant's background swap and is only emitted when
* there are layers to swap; `.wcu-row` is every row in both variants and owns
* the numeral's colour and underline. While these rules were keyed on
* `.wcu-reason` the beside-image variant got no hover state at all, because it
* has one static photograph and therefore no reason to carry the JS hook.
*/
.wcu-row:hover .wcu-num,
.wcu-row.is-active .wcu-num {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
.wcu-row:hover .wcu-num::after,
.wcu-row.is-active .wcu-num::after {
position: absolute;
bottom: -0.5rem;
left: 0px;
height: 3px;
width: 2rem;
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
--tw-content: '';
content: var(--tw-content);
}
.wcu-layer.is-active {
opacity: 1;
}
/*
* ⚠ The non-hovered reasons are NOT dimmed.
*
* An earlier pass faded them to 55% to mark the active row. The design does not:
* in the export, 02/03/04 stay pure white while 01 is active. The active state
* is carried entirely by the numeral going primary plus its 3px underline, so
* dimming was inventing emphasis the design does not use — and it made the
* other three harder to read over the photo.
*/
/*
* Respect reduced motion: swap instantly instead of cross-fading. The swap
* itself stays — it is information, not decoration — but the 500ms fade goes.
*/
@media (prefers-reduced-motion: reduce) {
.wcu-layer,
.wcu-num {
transition-property: none;
}
}
.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;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-y-0 {
top: 0px;
bottom: 0px;
}
.bottom-2 {
bottom: 0.5rem;
}
.bottom-3 {
bottom: 0.75rem;
}
.left-2 {
left: 0.5rem;
}
.left-3 {
left: 0.75rem;
}
.right-3 {
right: 0.75rem;
}
.top-1\/2 {
top: 50%;
}
.z-\[-1\] {
z-index: -1;
}
.z-\[-2\] {
z-index: -2;
}
.z-\[1\] {
z-index: 1;
}
.z-\[2\] {
z-index: 2;
}
.z-\[3\] {
z-index: 3;
}
.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-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.my-9 {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-14 {
margin-bottom: 3.5rem;
}
.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-7 {
margin-bottom: 1.75rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mb-9 {
margin-bottom: 2.25rem;
}
.ml-0 {
margin-left: 0px;
}
.mt-10 {
margin-top: 2.5rem;
}
.mt-12 {
margin-top: 3rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-2\.5 {
margin-top: 0.625rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-7 {
margin-top: 1.75rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-9 {
margin-top: 2.25rem;
}
.mt-auto {
margin-top: auto;
}
.block {
display: 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-\[10\/13\] {
aspect-ratio: 10/13;
}
.aspect-\[16\/10\] {
aspect-ratio: 16/10;
}
.aspect-\[371\/220\] {
aspect-ratio: 371/220;
}
.aspect-\[4\/3\] {
aspect-ratio: 4/3;
}
.aspect-\[564\/223\] {
aspect-ratio: 564/223;
}
.aspect-\[638\/419\] {
aspect-ratio: 638/419;
}
.aspect-\[638\/581\] {
aspect-ratio: 638/581;
}
.size-12 {
width: 3rem;
height: 3rem;
}
.size-14 {
width: 3.5rem;
height: 3.5rem;
}
.size-16 {
width: 4rem;
height: 4rem;
}
.size-2 {
width: 0.5rem;
height: 0.5rem;
}
.size-20 {
width: 5rem;
height: 5rem;
}
.size-28 {
width: 7rem;
height: 7rem;
}
.size-6 {
width: 1.5rem;
height: 1.5rem;
}
.size-8 {
width: 2rem;
height: 2rem;
}
.size-9 {
width: 2.25rem;
height: 2.25rem;
}
.size-full {
width: 100%;
height: 100%;
}
.h-1 {
height: 0.25rem;
}
.h-10 {
height: 2.5rem;
}
.h-20 {
height: 5rem;
}
.h-72 {
height: 18rem;
}
.h-auto {
height: auto;
}
.h-full {
height: 100%;
}
.max-h-16 {
max-height: 4rem;
}
.min-h-72 {
min-height: 18rem;
}
.min-h-80 {
min-height: 20rem;
}
.min-h-\[15rem\] {
min-height: 15rem;
}
.min-h-\[24\.4375rem\] {
min-height: 24.4375rem;
}
.w-1\/2 {
width: 50%;
}
.w-\[4\.4375rem\] {
width: 4.4375rem;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.min-w-\[38rem\] {
min-width: 38rem;
}
.max-w-16 {
max-width: 4rem;
}
.max-w-\[26rem\] {
max-width: 26rem;
}
.max-w-\[40\.3125rem\] {
max-width: 40.3125rem;
}
.max-w-\[40\.5rem\] {
max-width: 40.5rem;
}
.max-w-\[42\.5rem\] {
max-width: 42.5rem;
}
.max-w-\[46rem\] {
max-width: 46rem;
}
.max-w-\[50rem\] {
max-width: 50rem;
}
.max-w-\[51rem\] {
max-width: 51rem;
}
.max-w-\[52\.8125rem\] {
max-width: 52.8125rem;
}
.max-w-\[52rem\] {
max-width: 52rem;
}
.max-w-\[53\.375rem\] {
max-width: 53.375rem;
}
.max-w-\[54\.5625rem\] {
max-width: 54.5625rem;
}
.max-w-\[55\.125rem\] {
max-width: 55.125rem;
}
.max-w-\[56\.5rem\] {
max-width: 56.5rem;
}
.max-w-\[71\.875rem\] {
max-width: 71.875rem;
}
.max-w-none {
max-width: none;
}
.flex-1 {
flex: 1 1 0%;
}
.shrink-0 {
flex-shrink: 0;
}
.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-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));
}
.rotate-90 {
--tw-rotate: 90deg;
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));
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
.animate-marquee {
animation: marquee 15s linear infinite;
}
.cursor-default {
cursor: default;
}
.select-none {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.resize {
resize: both;
}
.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));
}
.grid-rows-\[0fr\] {
grid-template-rows: 0fr;
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.place-items-center {
place-items: center;
}
.items-start {
align-items: flex-start;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-0\.5 {
gap: 0.125rem;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-2\.5 {
gap: 0.625rem;
}
.gap-4 {
gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-\[20px\] {
gap: 20px;
}
.gap-px {
gap: 1px;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.gap-x-8 {
-moz-column-gap: 2rem;
column-gap: 2rem;
}
.gap-x-\[0\.9375rem\] {
-moz-column-gap: 0.9375rem;
column-gap: 0.9375rem;
}
.gap-y-1 {
row-gap: 0.25rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-y-2\.5 {
row-gap: 0.625rem;
}
.gap-y-3 {
row-gap: 0.75rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.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));
}
.self-start {
align-self: flex-start;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-x-auto {
overflow-x: auto;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border {
border-width: 1px;
}
.border-0 {
border-width: 0px;
}
.border-b {
border-bottom-width: 1px;
}
.border-l-0 {
border-left-width: 0px;
}
.border-l-2 {
border-left-width: 2px;
}
.border-t {
border-top-width: 1px;
}
.border-atg-gray-50 {
--tw-border-opacity: 1;
border-color: rgb(243 248 250 / var(--tw-border-opacity, 1));
}
.border-atg-gray-50\/20 {
border-color: rgb(243 248 250 / 0.2);
}
.border-atg-gray-50\/25 {
border-color: rgb(243 248 250 / 0.25);
}
.border-atg-gray-50\/40 {
border-color: rgb(243 248 250 / 0.4);
}
.border-atg-gray-900\/10 {
border-color: rgb(15 29 37 / 0.1);
}
.border-atg-gray-900\/15 {
border-color: rgb(15 29 37 / 0.15);
}
.border-danger\/40 {
border-color: rgb(179 38 30 / 0.4);
}
.border-primary {
--tw-border-opacity: 1;
border-color: rgb(228 70 43 / var(--tw-border-opacity, 1));
}
.border-white\/20 {
border-color: rgb(255 255 255 / 0.2);
}
.border-t-\[\#CBDDE0\] {
--tw-border-opacity: 1;
border-top-color: rgb(203 221 224 / var(--tw-border-opacity, 1));
}
.border-t-atg-gray-50\/40 {
border-top-color: rgb(243 248 250 / 0.4);
}
.border-t-atg-gray-900\/10 {
border-top-color: rgb(15 29 37 / 0.1);
}
.bg-\[\#CACACA\]\/10 {
background-color: rgb(202 202 202 / 0.1);
}
.bg-\[\#EEDFDC\] {
--tw-bg-opacity: 1;
background-color: rgb(238 223 220 / var(--tw-bg-opacity, 1));
}
.bg-\[\#EFF1F1\] {
--tw-bg-opacity: 1;
background-color: rgb(239 241 241 / var(--tw-bg-opacity, 1));
}
.bg-atg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(200 214 219 / var(--tw-bg-opacity, 1));
}
.bg-atg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(94 112 120 / var(--tw-bg-opacity, 1));
}
.bg-atg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(243 248 250 / var(--tw-bg-opacity, 1));
}
.bg-atg-gray-50\/10 {
background-color: rgb(243 248 250 / 0.1);
}
.bg-atg-gray-50\/15 {
background-color: rgb(243 248 250 / 0.15);
}
.bg-atg-gray-50\/70 {
background-color: rgb(243 248 250 / 0.7);
}
.bg-atg-gray-50\/80 {
background-color: rgb(243 248 250 / 0.8);
}
.bg-atg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(15 29 37 / var(--tw-bg-opacity, 1));
}
.bg-atg-gray-900\/40 {
background-color: rgb(15 29 37 / 0.4);
}
.bg-danger {
--tw-bg-opacity: 1;
background-color: rgb(179 38 30 / var(--tw-bg-opacity, 1));
}
.bg-danger\/5 {
background-color: rgb(179 38 30 / 0.05);
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
}
.bg-primary-700 {
--tw-bg-opacity: 1;
background-color: rgb(201 58 34 / var(--tw-bg-opacity, 1));
}
.bg-primary\/10 {
background-color: rgb(228 70 43 / 0.1);
}
.bg-secondary {
--tw-bg-opacity: 1;
background-color: rgb(41 139 151 / var(--tw-bg-opacity, 1));
}
.bg-secondary-700 {
--tw-bg-opacity: 1;
background-color: rgb(36 129 141 / var(--tw-bg-opacity, 1));
}
.bg-tertiary {
--tw-bg-opacity: 1;
background-color: rgb(77 184 200 / var(--tw-bg-opacity, 1));
}
.bg-tertiary\/15 {
background-color: rgb(77 184 200 / 0.15);
}
.bg-transparent {
background-color: transparent;
}
.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-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
.from-secondary {
--tw-gradient-from: #298B97 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(41 139 151 / 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\.24\] {
--tw-gradient-from: rgb(255 255 255 / 0.24) 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);
}
.to-\[\#CCE3E6\] {
--tw-gradient-to: #CCE3E6 var(--tw-gradient-to-position);
}
.to-primary {
--tw-gradient-to: #E4462B var(--tw-gradient-to-position);
}
.to-secondary\/\[0\.24\] {
--tw-gradient-to: rgb(41 139 151 / 0.24) var(--tw-gradient-to-position);
}
.bg-cover {
background-size: cover;
}
.bg-center {
background-position: center;
}
.bg-no-repeat {
background-repeat: no-repeat;
}
.object-contain {
-o-object-fit: contain;
object-fit: contain;
}
.object-cover {
-o-object-fit: cover;
object-fit: cover;
}
.object-\[68\%_center\] {
-o-object-position: 68% center;
object-position: 68% center;
}
.object-center {
-o-object-position: center;
object-position: center;
}
.p-0 {
padding: 0px;
}
.p-4 {
padding: 1rem;
}
.p-5 {
padding: 1.25rem;
}
.p-6 {
padding: 1.5rem;
}
.p-7 {
padding: 1.75rem;
}
.p-8 {
padding: 2rem;
}
.p-\[2px\] {
padding: 2px;
}
.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;
}
.py-0\.5 {
padding-top: 0.125rem;
padding-bottom: 0.125rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.py-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.py-14 {
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
.py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.py-30 {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.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-3 {
padding-bottom: 0.75rem;
}
.pb-4 {
padding-bottom: 1rem;
}
.pb-6 {
padding-bottom: 1.5rem;
}
.pb-8 {
padding-bottom: 2rem;
}
.pl-14 {
padding-left: 3.5rem;
}
.pl-5 {
padding-left: 1.25rem;
}
.pt-1\.5 {
padding-top: 0.375rem;
}
.pt-4 {
padding-top: 1rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.font-primary {
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.font-secondary {
font-family: Poppins, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.font-tertiary {
font-family: Poppins, system-ui, sans-serif;
}
.text-\[0\.6875rem\] {
font-size: 0.6875rem;
}
.text-\[0\.8125rem\] {
font-size: 0.8125rem;
}
.text-\[0\.875rem\] {
font-size: 0.875rem;
}
.text-\[0\.9375rem\] {
font-size: 0.9375rem;
}
.text-\[1\.0625rem\] {
font-size: 1.0625rem;
}
.text-\[1\.125rem\] {
font-size: 1.125rem;
}
.text-\[1\.25rem\] {
font-size: 1.25rem;
}
.text-\[1\.5rem\] {
font-size: 1.5rem;
}
.text-\[1\.75rem\] {
font-size: 1.75rem;
}
.text-\[1rem\] {
font-size: 1rem;
}
.text-\[3rem\] {
font-size: 3rem;
}
.text-\[7rem\] {
font-size: 7rem;
}
.font-bold {
font-weight: 700;
}
.font-light {
font-weight: 300;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.normal-case {
text-transform: none;
}
.italic {
font-style: italic;
}
.not-italic {
font-style: normal;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-\[1\.15\] {
line-height: 1.15;
}
.leading-\[1\.2857\] {
line-height: 1.2857;
}
.leading-\[1\.3125\] {
line-height: 1.3125;
}
.leading-\[1\.375rem\] {
line-height: 1.375rem;
}
.leading-\[1\.3\] {
line-height: 1.3;
}
.leading-\[1\.4\] {
line-height: 1.4;
}
.leading-\[1\.5\] {
line-height: 1.5;
}
.leading-\[1\.5rem\] {
line-height: 1.5rem;
}
.leading-\[1\.6\] {
line-height: 1.6;
}
.leading-none {
line-height: 1;
}
.leading-normal {
line-height: 1.5;
}
.leading-snug {
line-height: 1.375;
}
.leading-tight {
line-height: 1.25;
}
.tracking-\[0\.06em\] {
letter-spacing: 0.06em;
}
.tracking-body {
letter-spacing: 0.03em;
}
.tracking-normal {
letter-spacing: 0em;
}
.text-\[\#333333\] {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.text-\[\#505050\] {
--tw-text-opacity: 1;
color: rgb(80 80 80 / var(--tw-text-opacity, 1));
}
.text-atg-gray-100 {
--tw-text-opacity: 1;
color: rgb(200 214 219 / var(--tw-text-opacity, 1));
}
.text-atg-gray-300 {
--tw-text-opacity: 1;
color: rgb(94 112 120 / var(--tw-text-opacity, 1));
}
.text-atg-gray-50 {
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
}
.text-atg-gray-900 {
--tw-text-opacity: 1;
color: rgb(15 29 37 / var(--tw-text-opacity, 1));
}
.text-atg-gray-900\/80 {
color: rgb(15 29 37 / 0.8);
}
.text-danger {
--tw-text-opacity: 1;
color: rgb(179 38 30 / var(--tw-text-opacity, 1));
}
.text-inherit {
color: inherit;
}
.text-primary {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
.text-primary\/35 {
color: rgb(228 70 43 / 0.35);
}
.text-secondary-700 {
--tw-text-opacity: 1;
color: rgb(36 129 141 / var(--tw-text-opacity, 1));
}
.text-white\/85 {
color: rgb(255 255 255 / 0.85);
}
.underline {
text-decoration-line: underline;
}
.no-underline {
text-decoration-line: none;
}
.opacity-0 {
opacity: 0;
}
.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);
}
.outline {
outline-style: solid;
}
.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);
}
.ring-1 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-atg-gray-900\/10 {
--tw-ring-color: rgb(15 29 37 / 0.1);
}
.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-md {
--tw-backdrop-blur: blur(12px);
-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);
}
.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-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;
}
.duration-500 {
transition-duration: 500ms;
}
.content-\[\'\\eXXX\'\] {
--tw-content: '\eXXX';
content: var(--tw-content);
}
.stretched-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 10;
}
.title-white :is(h1,h2,h3,h4,h5,h6) {
color: #F3F8FA;
}
.\[mask-image\:linear-gradient\(to_right\2c transparent\2c black_6\%\2c black_94\%\2c transparent\)\] {
-webkit-mask-image: linear-gradient(to right,transparent,black 6%,black 94%,transparent);
mask-image: linear-gradient(to right,transparent,black 6%,black 94%,transparent);
}
/**
* Custom styles to immediately follow Tailwind's `utilities` layer.
*
* For PLAIN utility classes only. Anything needing a variant (hover:, lg:,
* group-hover:) belongs in tailwind.config.js → plugins → addUtilities().
*/
.before\:absolute::before {
content: var(--tw-content);
position: absolute;
}
.before\:inset-0::before {
content: var(--tw-content);
inset: 0px;
}
.before\:left-0::before {
content: var(--tw-content);
left: 0px;
}
.before\:top-\[0\.55em\]::before {
content: var(--tw-content);
top: 0.55em;
}
.before\:top-\[0\.5em\]::before {
content: var(--tw-content);
top: 0.5em;
}
.before\:z-\[1\]::before {
content: var(--tw-content);
z-index: 1;
}
.before\:block::before {
content: var(--tw-content);
display: block;
}
.before\:size-1\.5::before {
content: var(--tw-content);
width: 0.375rem;
height: 0.375rem;
}
.before\:h-0\.5::before {
content: var(--tw-content);
height: 0.125rem;
}
.before\:w-2\.5::before {
content: var(--tw-content);
width: 0.625rem;
}
.before\:rounded-full::before {
content: var(--tw-content);
border-radius: 9999px;
}
.before\:bg-atg-gray-900::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(15 29 37 / var(--tw-bg-opacity, 1));
}
.before\:bg-black\/40::before {
content: var(--tw-content);
background-color: rgb(0 0 0 / 0.4);
}
.before\:bg-current::before {
content: var(--tw-content);
background-color: currentColor;
}
.before\:bg-primary::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
}
.before\:content-\[\'\'\]::before {
--tw-content: '';
content: var(--tw-content);
}
.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-\[1\]::after {
content: var(--tw-content);
z-index: 1;
}
.after\:h-2\.5::after {
content: var(--tw-content);
height: 0.625rem;
}
.after\:w-0\.5::after {
content: var(--tw-content);
width: 0.125rem;
}
.after\:bg-atg-gray-900\/55::after {
content: var(--tw-content);
background-color: rgb(15 29 37 / 0.55);
}
.after\:bg-atg-gray-900\/70::after {
content: var(--tw-content);
background-color: rgb(15 29 37 / 0.7);
}
.after\:bg-atg-gray-900\/80::after {
content: var(--tw-content);
background-color: rgb(15 29 37 / 0.8);
}
.after\:bg-atg-gray-900\/\[0\.48\]::after {
content: var(--tw-content);
background-color: rgb(15 29 37 / 0.48);
}
.after\:bg-current::after {
content: var(--tw-content);
background-color: currentColor;
}
.after\:bg-tertiary\/20::after {
content: var(--tw-content);
background-color: rgb(77 184 200 / 0.2);
}
.after\:transition-transform::after {
content: var(--tw-content);
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.after\:duration-300::after {
content: var(--tw-content);
transition-duration: 300ms;
}
.after\:content-\[\'\'\]::after {
--tw-content: '';
content: var(--tw-content);
}
.first\:pt-0:first-child {
padding-top: 0px;
}
.last\:mb-0:last-child {
margin-bottom: 0px;
}
.last\:border-0:last-child {
border-width: 0px;
}
.last\:pb-0:last-child {
padding-bottom: 0px;
}
.hover\:border-atg-gray-900\/30:hover {
border-color: rgb(15 29 37 / 0.3);
}
.hover\:bg-atg-gray-50:hover {
--tw-bg-opacity: 1;
background-color: rgb(243 248 250 / var(--tw-bg-opacity, 1));
}
.hover\:bg-atg-gray-50\/20:hover {
background-color: rgb(243 248 250 / 0.2);
}
.hover\:bg-atg-gray-900\/5:hover {
background-color: rgb(15 29 37 / 0.05);
}
.hover\:bg-primary:hover {
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
}
.hover\:text-atg-gray-50:hover {
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
}
.hover\:text-atg-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(15 29 37 / var(--tw-text-opacity, 1));
}
.hover\:text-primary:hover {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group:focus-within .group-focus-within\:grid-rows-\[1fr\] {
grid-template-rows: 1fr;
}
.group:focus-within .group-focus-within\:opacity-100 {
opacity: 1;
}
.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\:grid-rows-\[1fr\] {
grid-template-rows: 1fr;
}
.group:hover .group-hover\:bg-atg-gray-50\/25 {
background-color: rgb(243 248 250 / 0.25);
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:\[animation-play-state\:paused\] {
animation-play-state: paused;
}
@media not all and (min-width: 1200px) {
.max-xl\:hidden {
display: none;
}
.max-xl\:w-full {
width: 100%;
}
}
@media (min-width: 576px) {
.sm\:my-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
.sm\:h-96 {
height: 24rem;
}
.sm\:w-1\/2 {
width: 50%;
}
.sm\:w-1\/3 {
width: 33.333333%;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sm\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.md\:w-1\/2 {
width: 50%;
}
}
@media (min-width: 992px) {
.lg\:absolute {
position: absolute;
}
.lg\:relative {
position: relative;
}
.lg\:sticky {
position: sticky;
}
.lg\:inset-x-3 {
left: 0.75rem;
right: 0.75rem;
}
.lg\:inset-y-0 {
top: 0px;
bottom: 0px;
}
.lg\:left-0 {
left: 0px;
}
.lg\:top-\[calc\(var\(--header-h\2c 11rem\)\+1\.5rem\)\] {
top: calc(var(--header-h,11rem) + 1.5rem);
}
.lg\:my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.lg\:mb-0 {
margin-bottom: 0px;
}
.lg\:mb-10 {
margin-bottom: 2.5rem;
}
.lg\:mb-12 {
margin-bottom: 3rem;
}
.lg\:mb-8 {
margin-bottom: 2rem;
}
.lg\:mb-9 {
margin-bottom: 2.25rem;
}
.lg\:ml-auto {
margin-left: auto;
}
.lg\:mt-10 {
margin-top: 2.5rem;
}
.lg\:mt-12 {
margin-top: 3rem;
}
.lg\:mt-8 {
margin-top: 2rem;
}
.lg\:mt-9 {
margin-top: 2.25rem;
}
.lg\:h-auto {
height: auto;
}
.lg\:h-full {
height: 100%;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
.lg\:w-1\/4 {
width: 25%;
}
.lg\:w-1\/5 {
width: 20%;
}
.lg\:w-\[36\%\] {
width: 36%;
}
.lg\:w-\[43\.6\%\] {
width: 43.6%;
}
.lg\:w-\[64\%\] {
width: 64%;
}
.lg\:flex-1 {
flex: 1 1 0%;
}
.lg\:-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));
}
.lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-row-reverse {
flex-direction: row-reverse;
}
.lg\:items-stretch {
align-items: stretch;
}
.lg\:gap-x-10 {
-moz-column-gap: 2.5rem;
column-gap: 2.5rem;
}
.lg\: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));
}
.lg\:p-10 {
padding: 2.5rem;
}
.lg\:py-16 {
padding-top: 4rem;
padding-bottom: 4rem;
}
.lg\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.lg\:pb-16 {
padding-bottom: 4rem;
}
.lg\:pl-\[2\.8125rem\] {
padding-left: 2.8125rem;
}
}
@media (min-width: 1200px) {
.xl\:inset-x-4 {
left: 1rem;
right: 1rem;
}
.xl\:-mx-4 {
margin-left: -1rem;
margin-right: -1rem;
}
.xl\:my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.xl\:size-20 {
width: 5rem;
height: 5rem;
}
.xl\:max-h-24 {
max-height: 6rem;
}
.xl\:max-w-24 {
max-width: 6rem;
}
.xl\:gap-20 {
gap: 5rem;
}
.xl\:gap-6 {
gap: 1.5rem;
}
.xl\:gap-y-8 {
row-gap: 2rem;
}
.xl\:p-5 {
padding: 1.25rem;
}
.xl\:p-6 {
padding: 1.5rem;
}
.xl\:p-8 {
padding: 2rem;
}
.xl\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.xl\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.xl\:py-20 {
padding-top: 5rem;
padding-bottom: 5rem;
}
.xl\:py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.xl\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.xl\:pb-20 {
padding-bottom: 5rem;
}
.xl\:pb-5 {
padding-bottom: 1.25rem;
}
.xl\:pl-\[4\.5rem\] {
padding-left: 4.5rem;
}
.xl\:text-\[1\.625rem\] {
font-size: 1.625rem;
}
.xl\:text-\[1\.875rem\] {
font-size: 1.875rem;
}
}
@media (min-width: 1440px) {
.\32xl\:bottom-3 {
bottom: 0.75rem;
}
.\32xl\:bottom-5 {
bottom: 1.25rem;
}
.\32xl\:left-5 {
left: 1.25rem;
}
.\32xl\:right-\[1\.4375rem\] {
right: 1.4375rem;
}
.\32xl\:-mx-3 {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.\32xl\:-mx-5 {
margin-left: -1.25rem;
margin-right: -1.25rem;
}
.\32xl\:my-24 {
margin-top: 6rem;
margin-bottom: 6rem;
}
.\32xl\:my-30 {
margin-top: 7.5rem;
margin-bottom: 7.5rem;
}
.\32xl\:my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.\32xl\:mb-0 {
margin-bottom: 0px;
}
.\32xl\:mb-4 {
margin-bottom: 1rem;
}
.\32xl\:mb-5 {
margin-bottom: 1.25rem;
}
.\32xl\:mb-6 {
margin-bottom: 1.5rem;
}
.\32xl\:mb-\[1\.3125rem\] {
margin-bottom: 1.3125rem;
}
.\32xl\:mb-\[1\.5625rem\] {
margin-bottom: 1.5625rem;
}
.\32xl\:mb-\[2\.6875rem\] {
margin-bottom: 2.6875rem;
}
.\32xl\:mb-\[3\.75rem\] {
margin-bottom: 3.75rem;
}
.\32xl\:mt-0 {
margin-top: 0px;
}
.\32xl\:mt-10 {
margin-top: 2.5rem;
}
.\32xl\:mt-6 {
margin-top: 1.5rem;
}
.\32xl\:mt-\[0\.875rem\] {
margin-top: 0.875rem;
}
.\32xl\:mt-\[1\.1875rem\] {
margin-top: 1.1875rem;
}
.\32xl\:mt-\[1\.3125rem\] {
margin-top: 1.3125rem;
}
.\32xl\:mt-\[1\.875rem\] {
margin-top: 1.875rem;
}
.\32xl\:mt-\[2\.375rem\] {
margin-top: 2.375rem;
}
.\32xl\:mt-\[2\.8125rem\] {
margin-top: 2.8125rem;
}
.\32xl\:mt-\[3\.75rem\] {
margin-top: 3.75rem;
}
.\32xl\:mt-\[5\.0625rem\] {
margin-top: 5.0625rem;
}
.\32xl\:mt-\[6\.4375rem\] {
margin-top: 6.4375rem;
}
.\32xl\:aspect-\[106\/100\] {
aspect-ratio: 106/100;
}
.\32xl\:size-14 {
width: 3.5rem;
height: 3.5rem;
}
.\32xl\:size-20 {
width: 5rem;
height: 5rem;
}
.\32xl\:size-8 {
width: 2rem;
height: 2rem;
}
.\32xl\:size-\[5\.625rem\] {
width: 5.625rem;
height: 5.625rem;
}
.\32xl\:size-\[9\.125rem\] {
width: 9.125rem;
height: 9.125rem;
}
.\32xl\:h-\[32\.5rem\] {
height: 32.5rem;
}
.\32xl\:max-h-32 {
max-height: 8rem;
}
.\32xl\:min-h-\[18\.125rem\] {
min-height: 18.125rem;
}
.\32xl\:min-h-\[24\.4375rem\] {
min-height: 24.4375rem;
}
.\32xl\:min-h-\[9\.4375rem\] {
min-height: 9.4375rem;
}
.\32xl\:w-\[2\.0625rem\] {
width: 2.0625rem;
}
.\32xl\:w-\[2\.9375rem\] {
width: 2.9375rem;
}
.\32xl\:w-\[32\%\] {
width: 32%;
}
.\32xl\:w-\[34\.5rem\] {
width: 34.5rem;
}
.\32xl\:w-\[34\.875rem\] {
width: 34.875rem;
}
.\32xl\:w-\[36rem\] {
width: 36rem;
}
.\32xl\:w-\[38\.8125rem\] {
width: 38.8125rem;
}
.\32xl\:w-\[39\.5rem\] {
width: 39.5rem;
}
.\32xl\:w-\[40\.4375rem\] {
width: 40.4375rem;
}
.\32xl\:w-\[40\.6875rem\] {
width: 40.6875rem;
}
.\32xl\:w-\[41\.875rem\] {
width: 41.875rem;
}
.\32xl\:w-\[42\.0625rem\] {
width: 42.0625rem;
}
.\32xl\:w-\[43rem\] {
width: 43rem;
}
.\32xl\:w-\[45\.75rem\] {
width: 45.75rem;
}
.\32xl\:w-\[68\%\] {
width: 68%;
}
.\32xl\:max-w-32 {
max-width: 8rem;
}
.\32xl\:max-w-\[62\.1875rem\] {
max-width: 62.1875rem;
}
.\32xl\:justify-between {
justify-content: space-between;
}
.\32xl\:gap-3\.5 {
gap: 0.875rem;
}
.\32xl\:gap-5 {
gap: 1.25rem;
}
.\32xl\:gap-7 {
gap: 1.75rem;
}
.\32xl\:gap-x-6 {
-moz-column-gap: 1.5rem;
column-gap: 1.5rem;
}
.\32xl\:gap-x-\[0\.9375rem\] {
-moz-column-gap: 0.9375rem;
column-gap: 0.9375rem;
}
.\32xl\:gap-x-\[1\.875rem\] {
-moz-column-gap: 1.875rem;
column-gap: 1.875rem;
}
.\32xl\:gap-x-\[7\.1875rem\] {
-moz-column-gap: 7.1875rem;
column-gap: 7.1875rem;
}
.\32xl\:gap-y-4 {
row-gap: 1rem;
}
.\32xl\:gap-y-6 {
row-gap: 1.5rem;
}
.\32xl\: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));
}
.\32xl\: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));
}
.\32xl\:space-y-\[1\.125rem\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.125rem * var(--tw-space-y-reverse));
}
.\32xl\:space-y-\[1\.3125rem\] > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.3125rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.3125rem * var(--tw-space-y-reverse));
}
.\32xl\:p-5 {
padding: 1.25rem;
}
.\32xl\:p-6 {
padding: 1.5rem;
}
.\32xl\:p-8 {
padding: 2rem;
}
.\32xl\:p-\[1\.875rem\] {
padding: 1.875rem;
}
.\32xl\:px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.\32xl\:px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.\32xl\:px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.\32xl\:px-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.\32xl\:px-\[0\.9375rem\] {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.\32xl\:py-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.\32xl\:py-3\.5 {
padding-top: 0.875rem;
padding-bottom: 0.875rem;
}
.\32xl\:py-30 {
padding-top: 7.5rem;
padding-bottom: 7.5rem;
}
.\32xl\:py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.\32xl\:py-\[0\.6875rem\] {
padding-top: 0.6875rem;
padding-bottom: 0.6875rem;
}
.\32xl\:py-\[0\.8125rem\] {
padding-top: 0.8125rem;
padding-bottom: 0.8125rem;
}
.\32xl\:py-\[6\.25rem\] {
padding-top: 6.25rem;
padding-bottom: 6.25rem;
}
.\32xl\:py-\[6\.8125rem\] {
padding-top: 6.8125rem;
padding-bottom: 6.8125rem;
}
.\32xl\:py-\[7\.9375rem\] {
padding-top: 7.9375rem;
padding-bottom: 7.9375rem;
}
.\32xl\:py-\[7rem\] {
padding-top: 7rem;
padding-bottom: 7rem;
}
.\32xl\:py-\[8\.90625rem\] {
padding-top: 8.90625rem;
padding-bottom: 8.90625rem;
}
.\32xl\:pb-20 {
padding-bottom: 5rem;
}
.\32xl\:pb-30 {
padding-bottom: 7.5rem;
}
.\32xl\:pb-6 {
padding-bottom: 1.5rem;
}
.\32xl\:pb-8 {
padding-bottom: 2rem;
}
.\32xl\:pb-\[0\.625rem\] {
padding-bottom: 0.625rem;
}
.\32xl\:pb-\[4\.3125rem\] {
padding-bottom: 4.3125rem;
}
.\32xl\:pl-4 {
padding-left: 1rem;
}
.\32xl\:pl-\[5\.25rem\] {
padding-left: 5.25rem;
}
.\32xl\:pr-\[2\.8125rem\] {
padding-right: 2.8125rem;
}
.\32xl\:pt-10 {
padding-top: 2.5rem;
}
.\32xl\:pt-24 {
padding-top: 6rem;
}
.\32xl\:pt-6 {
padding-top: 1.5rem;
}
.\32xl\:pt-\[1\.125rem\] {
padding-top: 1.125rem;
}
.\32xl\:pt-\[1\.625rem\] {
padding-top: 1.625rem;
}
.\32xl\:pt-\[6\.25rem\] {
padding-top: 6.25rem;
}
.\32xl\:text-\[0\.75rem\] {
font-size: 0.75rem;
}
.\32xl\:text-\[0\.875rem\] {
font-size: 0.875rem;
}
.\32xl\:text-\[1\.125rem\] {
font-size: 1.125rem;
}
.\32xl\:text-\[1\.25rem\] {
font-size: 1.25rem;
}
.\32xl\:text-\[1\.5625rem\] {
font-size: 1.5625rem;
}
.\32xl\:text-\[1\.5rem\] {
font-size: 1.5rem;
}
.\32xl\:text-\[1\.75rem\] {
font-size: 1.75rem;
}
.\32xl\:text-\[1rem\] {
font-size: 1rem;
}
.\32xl\:text-\[2\.25rem\] {
font-size: 2.25rem;
}
.\32xl\:text-\[2rem\] {
font-size: 2rem;
}
.\32xl\:font-medium {
font-weight: 500;
}
.\32xl\:normal-case {
text-transform: none;
}
.\32xl\:leading-6 {
line-height: 1.5rem;
}
.\32xl\:leading-\[1\.3125\] {
line-height: 1.3125;
}
.\32xl\:leading-\[1\.35625rem\] {
line-height: 1.35625rem;
}
.\32xl\:leading-\[1\.625rem\] {
line-height: 1.625rem;
}
.\32xl\:leading-\[1\.835rem\] {
line-height: 1.835rem;
}
.\32xl\:tracking-\[0\.42px\] {
letter-spacing: 0.42px;
}
.\32xl\:tracking-normal {
letter-spacing: 0em;
}
.\32xl\:before\:top-\[0\.625em\]::before {
content: var(--tw-content);
top: 0.625em;
}
.\32xl\:before\:w-3\.5::before {
content: var(--tw-content);
width: 0.875rem;
}
.\32xl\:after\:h-3\.5::after {
content: var(--tw-content);
height: 0.875rem;
}
.\32xl\:first\:pt-0:first-child {
padding-top: 0px;
}
.\32xl\:last\:pb-0:last-child {
padding-bottom: 0px;
}
}
.\[\&\.is-active\]\:border-primary.is-active {
--tw-border-opacity: 1;
border-color: rgb(228 70 43 / var(--tw-border-opacity, 1));
}
.\[\&\.is-active\]\:bg-primary.is-active {
--tw-bg-opacity: 1;
background-color: rgb(228 70 43 / var(--tw-bg-opacity, 1));
}
.\[\&\.is-active\]\:text-atg-gray-50.is-active {
--tw-text-opacity: 1;
color: rgb(243 248 250 / var(--tw-text-opacity, 1));
}
.hover\:\[\&\.is-active\]\:border-primary-700.is-active:hover {
--tw-border-opacity: 1;
border-color: rgb(201 58 34 / var(--tw-border-opacity, 1));
}
.hover\:\[\&\.is-active\]\:bg-primary-700.is-active:hover {
--tw-bg-opacity: 1;
background-color: rgb(201 58 34 / var(--tw-bg-opacity, 1));
}
.\[\&\.itemActive\]\:to-primary\/\[0\.24\].itemActive {
--tw-gradient-to: rgb(228 70 43 / 0.24) var(--tw-gradient-to-position);
}
.\[\&\.itemActive\]\:ring-primary.itemActive {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(228 70 43 / var(--tw-ring-opacity, 1));
}
.\[\&\>\*\:last-child\]\:mb-0>*:last-child {
margin-bottom: 0px;
}
.\[\&\>\*\]\:mb-0>* {
margin-bottom: 0px;
}
@media (min-width: 1440px) {
.\32xl\:\[\&\>\*\]\:mb-0>* {
margin-bottom: 0px;
}
.\32xl\:\[\&\>h2\]\:mb-0>h2 {
margin-bottom: 0px;
}
}
.\[\&_a\]\:text-primary a {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
.\[\&_a\]\:underline a {
text-decoration-line: underline;
}
@media (min-width: 1440px) {
.\32xl\:\[\&_h2\]\:mx-auto h2 {
margin-left: auto;
margin-right: auto;
}
.\32xl\:\[\&_h2\]\:mb-\[1\.875rem\] h2 {
margin-bottom: 1.875rem;
}
.\32xl\:\[\&_h2\]\:max-w-lg h2 {
max-width: 32rem;
}
.\32xl\:\[\&_h2\]\:tracking-normal h2 {
letter-spacing: 0em;
}
}
.\[\&_iframe\]\:block iframe {
display: block;
}
.\[\&_iframe\]\:h-64 iframe {
height: 16rem;
}
.\[\&_iframe\]\:h-80 iframe {
height: 20rem;
}
.\[\&_iframe\]\:w-full iframe {
width: 100%;
}
@media (min-width: 992px) {
.lg\:\[\&_iframe\]\:h-\[19rem\] iframe {
height: 19rem;
}
.lg\:\[\&_iframe\]\:h-\[26rem\] iframe {
height: 26rem;
}
}
@media (min-width: 1440px) {
.\32xl\:\[\&_iframe\]\:h-\[31\.25rem\] iframe {
height: 31.25rem;
}
.\32xl\:\[\&_li\]\:leading-6 li {
line-height: 1.5rem;
}
.\32xl\:\[\&_li\]\:text-\[\#333333\] li {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.\32xl\:\[\&_li\]\:marker\:text-primary * li::marker {
color: rgb(228 70 43 );
}
.\32xl\:\[\&_li\]\:marker\:text-primary li::marker {
color: rgb(228 70 43 );
}
}
.last\:\[\&_p\]\:mb-0 p:last-child {
margin-bottom: 0px;
}
@media (min-width: 1440px) {
.\32xl\:\[\&_p\]\:mx-auto p {
margin-left: auto;
margin-right: auto;
}
.\32xl\:\[\&_p\]\:mb-6 p {
margin-bottom: 1.5rem;
}
.\32xl\:\[\&_p\]\:mb-\[1\.125rem\] p {
margin-bottom: 1.125rem;
}
.\32xl\:\[\&_p\]\:max-w-\[43\.75rem\] p {
max-width: 43.75rem;
}
.\32xl\:\[\&_p\]\:leading-\[1\.625rem\] p {
line-height: 1.625rem;
}
.\32xl\:\[\&_p\]\:text-\[\#333333\] p {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity, 1));
}
.\32xl\:\[\&_strong\]\:text-primary strong {
--tw-text-opacity: 1;
color: rgb(228 70 43 / var(--tw-text-opacity, 1));
}
}
.\[\&_svg\]\:size-4 svg {
width: 1rem;
height: 1rem;
}
.\[\&_svg\]\:size-\[8\.125rem\] svg {
width: 8.125rem;
height: 8.125rem;
}
@media (min-width: 1440px) {
.\32xl\:\[\&_ul\]\:space-y-2 ul > :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));
}
}
[aria-expanded=true] .\[\[aria-expanded\=true\]_\&\]\:-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));
}
[aria-expanded=true] .\[\[aria-expanded\=true\]_\&\]\:after\:scale-y-0::after {
content: var(--tw-content);
--tw-scale-y: 0;
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));
}