.static-page, .contact, .complaint{ background-color: #030a12; display: grid; grid-template-rows: auto 1fr; min-height: calc(100vh - 180px - 2rem); position: relative} @supports(height: 100dvh){ .static-page, .contact, .complaint{ min-height: calc(100dvh - 180px - 2rem)}} .static-page> header, .contact> header, .complaint> header{ align-items: center; background-color: #030a12; display: flex; padding: 0.5rem; position: sticky; top: 58px; width: 100%; z-index: 9} .static-page> header:is(h1, h2), .contact> header:is(h1, h2), .complaint> header:is(h1, h2){ align-items: center; display: flex; font-size: 0.875rem; font-weight: 900; line-height: 1.2; margin: 0; min-width: 0; width: 100%} .static-page> header:is(h1, h2) i, .contact> header:is(h1, h2) i, .complaint> header:is(h1, h2) i{ flex-shrink: 0; margin-right: 0.5rem} .static-page> header:is(h1, h2) span, .contact> header:is(h1, h2) span, .complaint> header:is(h1, h2) span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .static-page__content{ display: grid; gap: 0.75rem; align-content: start; padding: 0.5rem} .static-page__content h1{ color: #0e34d5; font-size: 1.25rem; margin-bottom: 1rem} .static-page__content h2, .static-page__content p{ font-weight: 500; margin-bottom: 1rem} .static-page__content h2{ color: #0e34d5; font-size: 0.875rem} .static-page__content h3{ border-bottom: 1px solid #081950; font-size: 1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 1rem} .static-page__content p{ font-size: 0.75rem} .static-page__content em{ color: #0e34d5; font-style: normal} .static-page__content ol{ counter-reset: item 0; padding-left: 0.5rem} .static-page__content ol li{ color: #fff; display: block; font-size: 0.75rem; font-weight: 500; margin-bottom: 1rem} .static-page__content ol li::before{ color: #0e34d5; content: counters(item, ".") "."; counter-increment: item 1; padding-right: 0.5rem} .static-page__content ol li> ol{ margin-top: 1rem} .static-page__content ol li em{ font-size: 0.875rem} .static-page__content ul{ padding-left: 1rem} .static-page__content ul li{ font-size: 0.75rem; font-weight: 500; margin-bottom: 1rem} .static-page__content ul li::before{ color: #0e34d5; content: "•"; display: inline-block; font-weight: 700; margin-left: -1em; width: 0.8rem} .contact__details{ display: grid; padding: 0 0.5rem 0.5rem; gap: 0.5rem; align-content: start} .contact__details p{ font-size: 0.75rem; padding: 0 1rem 0.5rem} .contact__details> div:first-child, .contact__details> div:last-child{ display: grid; gap: 0.5rem; align-content: start} .contact__details> div:last-child{ grid-template-columns: repeat(2, minmax(0, 1fr))} .contact__details a, .contact__details button, .contact__details li> div{ display: grid; width: 100%; gap: 1rem; align-items: center; background-color: #081950; border: 2px solid #081950; border-radius: 40px; color: #fff; grid-template-columns: 2.5rem 1fr; padding: 0.5rem; text-align: left} .contact__details a> div, .contact__details button> div, .contact__details li> div> div{ align-items: center; background-color: #0e34d5; border-radius: 50%; color: #fff; display: flex; height: 0; justify-content: center; padding-bottom: 100%; position: relative} .contact__details a i, .contact__details button i, .contact__details li> div i{ left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%)} .contact__details a img, .contact__details button img, .contact__details li> div img{ display: block; height: 100%; left: 0; object-fit: contain; position: absolute; top: 0; width: 100%} .contact__details a span, .contact__details button span, .contact__details li> div span{ font-size: 0.875rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .complaint__container{ display: grid; gap: 0.75rem; align-content: start; padding: 0.5rem} .complaint__container .alert{ justify-self: center; max-width: 30rem; width: 100%} .complaint__container .alert ul{ display: grid; gap: 0.25rem; font-size: 0.75rem; font-weight: 600; list-style: initial} .complaint__container form{ display: grid; gap: 0.75rem; align-content: start; grid-template-rows: auto 1fr} .complaint__container form> div{ justify-self: center; max-width: 30rem; width: 100%} .complaint__container form .btn{ justify-self: center} .complaint .captcha{ margin-bottom: 0.75rem; width: 100%} .complaint .captcha label{ display: block; font-size: 0.875rem; margin-bottom: 0.25rem} .complaint .captcha__root{ display: grid; overflow: hidden; gap: 0.25rem; align-items: center; grid-template-columns: 50% auto 1fr} .complaint .captcha__root .captcha__input{ height: 100%; margin-bottom: 0} .complaint .captcha__image{ align-items: center; background-color: #081950; border-radius: 5px; display: flex; height: 100%; justify-content: center; overflow: hidden; position: relative; width: 100%} .complaint .captcha__image img{ display: block; height: 100%; object-fit: contain; position: absolute; transition: filter 0.2s ease; width: 100%} .complaint .captcha__image img.captcha--loading{ filter: blur(3px)} @media(min-width: 1024px){ .static-page, .contact, .complaint{ min-height: calc(100vh - 80px - 1.5rem)} .contact__details{ grid-template-columns: 1fr 2fr; padding: 0.75rem} .contact__details> div:last-child{ padding: 0 3rem} .complaint .captcha--d{ margin: 0 auto 1rem; max-width: 20rem}}