@charset "UTF-8";

[class*=spacer] {
clear: both;
width: 100%
}
.spacer-xxl {
height: var(--sp-xxl)
}
.spacer-xl {
height: var(--sp-xl)
}
.spacer-lg {
height: var(--sp-lg)
}
.spacer-md {
height: var(--sp-md)
}
.spacer-sm {
height: var(--sp-sm)
}
.spacer-xs {
height: var(--sp-xs)
}
.mt-xxl {
margin-top: var(--sp-xxl)
}
.mt-xl {
margin-top: var(--sp-xl)
}
.mt-lg {
margin-top: var(--sp-lg)
}
.mt-md {
margin-top: var(--sp-md)
}
.mt-sm {
margin-top: var(--sp-sm)
}
.mt-xs {
margin-top: var(--sp-xs)
}
.mb-xxl {
margin-bottom: var(--sp-xxl)
}
.mb-xl {
margin-bottom: var(--sp-xl)
}
.mb-lg {
margin-bottom: var(--sp-lg)
}
.mb-md {
margin-bottom: var(--sp-md)
}
.mb-sm {
margin-bottom: var(--sp-sm)
}
.mb-xs {
margin-bottom: var(--sp-xs)
}
.mx-auto {
margin-inline: auto
}
.seo-section {
border-top: .0625rem solid rgba(22, 22, 24, .2);
padding-block: var(--sp-sm)
}
.seo-block {
--pd-inline: 0rem;
--space: 1rem;
--inActive-height: 488px;
padding-inline: var(--pd-inline)
}
.seo-block>*+* {
margin-top: var(--space)
}
.seo-content {
--inActive-height: calc(1.4em * 3);
height: var(--inActive-height);
min-height: var(--inActive-height);
overflow: hidden;
text-overflow: ellipsis
}
.seo-content .text *+:where(*) {
margin-top: calc(var(--text-space) * 1.25)
}
.seo-btn {
position: relative;
cursor: pointer;
gap: .75rem;
display: inline-flex;
align-items: center;
font-size: .875rem;
line-height: 1.2em;
font-weight: 500;
color: var(--clr-primary);
text-transform: uppercase;
transition: .5s cubic-bezier(.06, 0, 0, 1)
}
.seo-btn span {
position: relative;
overflow: hidden;
display: inline-block;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
color: transparent
}
.seo-btn span:before,
.seo-btn span:after {
content: attr(data-txt-more);
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: var(--clr-primary);
transition: .5s cubic-bezier(.06, 0, 0, 1)
}
.seo-btn span:after {
transform: translateY(100%)
}
.seo-btn span>*:last-child {
display: none
}
.seo-btn.is-active span:before,
.seo-btn.is-active span:after {
content: attr(data-txt-less)
}
.seo-btn.is-active span>*:first-child {
display: none
}
.seo-btn.is-active span>*:last-child {
display: inline-block
}
@media (min-width:1200px) {
.seo-block {
--pd-inline: .5rem;
--space: 1.25rem
}
.seo-btn:hover span:before {
transform: translateY(-100%)
}
.seo-btn:hover span:after {
transform: translateY(0%)
}
}
.number-section {
--clr-title: #fff;
--clr-text: #fff;
background-color: var(--bg-dark);
padding-block: var(--sp-xl);
margin-top: var(--sp-xl)
}
.number-wrap {
--items: 1;
--gap: clamp(1.875rem, -0.7566rem + 5.4825vw, 5rem);
position: relative;
gap: var(--gap);
display: flex;
flex-wrap: wrap
}
.number-item {
position: relative;
width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items))
}
.number-item>*+* {
margin-top: clamp(0.625rem, 0.3092rem + 0.6579vw, 1rem)
}
.number-value {
display: block;
font-size: clamp(7.5rem, 3.8158rem + 7.6754vw, 11.875rem);
line-height: .8em;
font-weight: 600;
color: rgba(255, 255, 255, .25);
text-transform: uppercase
}
@media (min-width:768px) {
.number-wrap {
--items: 2
}
}
@media (min-width:1200px) {
.number-block {
width: 83.33333333%;
margin-left: auto
}
.number-wrap {
margin-left: 10vw
}
}
.number-cards {
gap: var(--sp-xs);
display: grid;
grid-template-columns: repeat(3, 1fr)
}
.number-card {
position: relative;
gap: var(--sp-xs);
display: flex;
flex-direction: column;
border-radius: .625rem;
border: .0625rem solid var(--clr-border);
padding: var(--sp-sm)
}
.number-card .number-value {
font-size: clamp(4.6875rem, 4.1262rem + 2.3948vw, 7rem);
color: var(--clr-title)
}
@media (max-width:991px) {
.number-cards {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width:767px) {
.number-cards {
grid-template-columns: 1fr
}
}
.service-block {
gap: clamp(1.25rem, -1.9079rem + 6.5789vw, 5rem);
display: flex
}
.service-images {
position: sticky;
top: calc(var(--h-height) + 10vh);
overflow: hidden;
display: none;
width: 50%;
height: 100%;
aspect-ratio: 1.25;
flex-shrink: 0
}
.service-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: .75rem;
will-change: opacity;
transition: opacity var(--transition-2);
opacity: 0
}
.service-media img,
.service-media video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
transform: initial;
border-radius: .75rem
}
.service-media.is-active {
opacity: 1;
z-index: 2
}
.service-content {
position: relative;
width: 100%
}
.service-content-item>*+* {
margin-top: var(--sp-sm)
}
.service-content-item+.service-content-item {
margin-top: calc(var(--sp-md) + 0.625rem)
}
.service-media-content {
position: relative;
overflow: hidden;
display: block;
width: 100%;
aspect-ratio: 1.574;
border-radius: .75rem
}
.service-media-content img,
.service-media-content video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
transform: initial;
border-radius: .75rem
}
@media (min-width:992px) and (max-width:1199px) {
.service-content-item {
gap: 0 2rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: start
}
.service-content-item .title {
grid-area: 1/2/2/3
}
.service-content-item .text {
grid-area: 2/2/3/3
}
.service-content-item .btn {
grid-area: 3/2/4/3
}
.service-content-item:nth-child(even) .service-media-content {
grid-area: 1/2/4/3
}
.service-content-item:nth-child(even) .title {
grid-area: 1/1/2/2
}
.service-content-item:nth-child(even) .text {
grid-area: 2/1/3/2
}
.service-content-item:nth-child(even) .btn {
grid-area: 3/1/4/2
}
.service-media-content {
grid-area: 1/1/4/2
}
}
@media (min-width:1200px) {
.service-block {
grid-template-columns: 49.419% auto
}
.service-images {
display: block
}
.service-content {
counter-reset: number
}
.service-content-item {
--size-counter: 4.625rem;
will-change: opacity, transform;
padding-left: calc(var(--size-counter) + clamp(1.125rem, -8.5625rem + 12.9167vw, 5rem));
padding-block: var(--sp-lg)
}
.service-content-item:before {
counter-increment: number;
content: counter(number, decimal-leading-zero);
position: absolute;
left: 0;
top: calc(var(--sp-lg) + var(--size-counter) * -0.25);
width: var(--size-counter);
height: var(--size-counter);
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-radius: 100%;
background-color: var(--clr-secondary);
font-size: var(--h4);
line-height: normal;
font-weight: 600;
color: var(--clr-title);
text-transform: uppercase
}
.service-content-item>*+.title {
margin-top: 0
}
.service-content-item+.service-content-item {
margin-top: 0
}
.service-media-content {
display: none
}
}
.prd-slider {
--pg-space: var(--sp-sm);
isolation: isolate
}
.prd-slider .swiper-container {
overflow: visible
}
.prd-slider .swiper-wrapper {
background: #fff;
min-width: -moz-max-content;
min-width: max-content
}
.prd-slider .swiper-slide {
transform: none !important
}
.prd-slider-item {
position: relative;
gap: var(--sp-xs);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: end;
border-left: solid 1px var(--clr-border);
padding-inline: var(--sp-xs)
}
.prd-slider-item .title,
.prd-slider-item .text {
mix-blend-mode: difference;
padding-right: var(--sp-sm)
}
.prd-slider-item .title {
color: #e9e9e7
}
.prd-slider-item .text {
color: #a0a095;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis
}
.prd-slider-item__image {
display: none
}
.prd-slider__follow {
position: absolute;
transform: translate(-50%, -50%);
top: 0;
left: 0;
width: 18.75rem;
aspect-ratio: 300/360;
padding: 0;
pointer-events: none;
opacity: 0;
visibility: hidden;
z-index: -1;
transition: opacity var(--transition-1), visibility var(--transition-1)
}
.prd-slider__follow img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
border-radius: .625rem
}
.prd-slider__follow.active {
opacity: 1;
visibility: visible
}
.swiper-slide:nth-child(even) .prd-slider-item {
min-height: 35rem
}
.swiper-slide:nth-child(odd) .prd-slider-item {
min-height: 42.5rem
}
@media (max-width:1199px) {
.prd-slider .swiper-slide {
height: auto
}
.prd-slider-item {
min-height: auto !important;
height: 100%
}
.prd-slider-item .text {
display: none
}
.prd-slider-item .btn {
margin-top: auto
}
.prd-slider-item__image {
position: relative;
display: block;
width: 100%;
aspect-ratio: 300/360
}
.prd-slider-item__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
border-radius: .625rem
}
.prd-slider__follow {
display: none
}
}
@media (max-width:767px) {
.prd-slider-item {
border: none
}
}
@media (min-width:1200px) and (max-height:750px) {
.swiper-slide:nth-child(even) .prd-slider-item {
min-height: 29rem
}
.swiper-slide:nth-child(odd) .prd-slider-item {
min-height: 36rem
}
}
.advd-wrap {
height: min(50.5rem, 100svh - var(--h-height));
min-height: 37.5rem;
display: grid;
align-items: flex-start;
grid-template-columns: repeat(4, 1fr);
counter-reset: adv-counter;
position: relative;
z-index: 2
}
.advd-item-wrap {
display: flex;
align-self: stretch;
align-items: flex-start
}
.advd-item-wrap:nth-child(odd) {
align-items: flex-end;
justify-content: flex-end
}
.advd-item-wrap:nth-child(odd) .advd-item {
margin-top: -100%
}
.advd-item-wrap:nth-child(even) .advd-item {
margin-bottom: -100%
}
.advd-item {
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
border: solid 1px var(--clr-border);
border-radius: .75rem;
padding: calc(var(--sp-sm) * 0.75);
height: 64%;
gap: var(--sp-xs);
min-height: 64%;
background: var(--bg);
transition: height var(--cubic-1), border-color var(--cubic-1), min-height var(--cubic-1)
}
.advd-item:before {
content: counter(adv-counter, decimal-leading-zero);
counter-increment: adv-counter;
display: inline-block;
font-size: var(--h5);
font-weight: 500;
color: var(--clr-text);
transition: color var(--cubic-1)
}
.advd-item__icon {
margin: auto;
width: 100%;
position: relative;
padding-top: 0;
overflow: visible;
opacity: 0;
transition: padding-top var(--cubic-1), opacity var(--cubic-1)
}
.advd-item__icon img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
aspect-ratio: 1;
-o-object-fit: contain;
object-fit: contain
}
.advd-item__text {
margin-top: calc(var(--sp-xs) * -1);
margin-bottom: calc(var(--advd-js-text-height) * -1);
opacity: 0;
transition: margin var(--cubic-1), opacity var(--cubic-1)
}
@media (min-width:1200px) {
.advd-item:hover {
height: 100%;
border-color: var(--clr-title);
min-height: -moz-fit-content;
min-height: fit-content
}
.advd-item:hover:before {
color: var(--clr-title)
}
.advd-item:hover .advd-item__icon {
padding-top: 100%;
opacity: 1
}
.advd-item:hover .advd-item__text {
margin: 0;
opacity: 1
}
}
@media (min-width:1200px) and (max-height:800px) {
.advd-item__icon {
width: 80%
}
.advd-item:hover .advd-item__icon {
padding-top: 80%
}
}
@media (min-width:1200px) and (max-height:700px) {
.advd-item__icon {
width: 60%
}
.advd-item:hover .advd-item__icon {
padding-top: 60%
}
}
@media (max-width:1199px) {
.advd-wrap {
align-items: flex-start;
height: auto;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-xs)
}
.advd-item-wrap {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4
}
.advd-item {
display: grid;
grid-template-rows: subgrid;
grid-row: span 4;
align-items: flex-start;
align-self: stretch;
height: auto;
margin-block: 0 !important
}
.advd-item__icon {
padding-top: 100%;
opacity: 1
}
.advd-item__text {
margin: 0;
opacity: 1
}
}
@media (max-width:991px) {
.advd-item__icon {
max-width: 12.5rem;
width: 100%;
padding: 0;
aspect-ratio: 1/1;
justify-self: center
}
}
@media (max-width:767px) {
.advd-wrap {
grid-template-columns: repeat(1, 1fr)
}
}
.service-map {
gap: var(--sp-sm);
display: grid
}
.service-map svg {
display: block;
width: 100%;
height: 100%
}
.service-map-content {
position: relative
}
.service-map-info {
gap: var(--sp-sm);
display: flex;
flex-direction: column
}
.service-map-info .btn {
align-self: start
}
.service-map-links {
--space: 1rem
}
.service-map-links ul {
width: -moz-max-content;
width: max-content;
gap: var(--space);
display: flex
}
.service-map-links li {
position: relative;
cursor: pointer;
display: inline-block;
font-family: var(--ff-2);
font-size: .75rem;
line-height: 1.4em;
font-weight: 500;
color: var(--clr-text-light);
transition: var(--transition-1)
}
.service-map-links li.is-active {
color: var(--clr-primary)
}
.service-region {
pointer-events: none;
color: #e5e5e7;
transition: var(--transition-1)
}
.service-region circle {
opacity: 0;
transition: var(--transition-1)
}
.service-region.is-active {
pointer-events: all;
cursor: pointer;
transform-origin: center;
color: var(--clr-primary)
}
.service-region.is-active circle {
opacity: 1
}
.service-region-tooltip {
position: absolute;
pointer-events: none;
background-color: var(--clr-white);
border-radius: .5rem;
width: 16.25rem;
height: auto;
font-size: .875rem;
line-height: 1.42857em;
font-weight: 300;
color: var(--clr-text);
white-space: nowrap;
padding: .625rem .75rem
}
.service-region-tooltip b {
font-size: var(--text);
line-height: normal;
font-weight: 500;
color: var(--clr-title)
}
.service-region-tooltip li {
position: relative;
padding-left: 1.25em
}
.service-region-tooltip li:before {
content: "";
position: absolute;
left: .25em;
top: .55em;
width: .1875rem;
height: .1875rem;
border-radius: 100%;
background-color: currentColor
}
.service-region-tooltip li+li {
margin-top: .25rem
}
.service-region-tooltip>*+* {
margin-top: .5rem
}
@media (min-width:576px) {
.service-map-links li {
font-size: clamp(1rem, 0.3026rem + 1.9737vw, 2.375rem);
text-transform: uppercase
}
}
@media (min-width:1200px) {
.service-map-section .title-anim .title {
margin-bottom: 0
}
.service-map {
gap: var(--sp-lg);
grid-template-columns: 30% auto
}
.service-map-info:not(:has(.service-map-links))>*:first-child {
margin-top: auto
}
.service-map-links {
--space: .5rem;
order: -1;
margin-block: auto
}
.service-map-links ul {
flex-direction: column
}
.service-map-links li:before {
content: "—";
position: absolute;
left: 0;
display: inline-block;
transition: var(--transition-1);
transform-origin: center;
transform: scale(0)
}
.service-map-links li:hover {
color: var(--clr-primary)
}
.service-map-links li.is-active {
padding-left: 1.6em
}
.service-map-links li.is-active:before {
transform: scale(1)
}
.service-region.is-active:hover {
color: rgba(28, 118, 255, .75);
transform: scale(.99)
}
.service-region-tooltip {
display: none
}
}
@media (max-width:1199px) {
.service-region-tooltip {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, transform .3s ease;
overflow-y: auto
}
.service-region-tooltip.show {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1)
}
}
.partner-wrap {
--items: 2;
--gap: var(--sp-sm);
position: relative;
gap: var(--gap);
display: flex;
flex-wrap: wrap
}
.partner-card {
position: relative;
overflow: hidden;
display: block;
width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));
padding-top: min(3.75rem, 10%)
}
.partner-card img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--transition-1);
max-width: 80%;
max-height: 90%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
content-visibility: auto
}
@media (min-width:992px) {
.partner-wrap {
--items: 3
}
}
@media (min-width:1200px) {
.partner-wrap {
--items: 5
}
.partner-card:hover img {
transform: translate(-50%, -50%) scale(1.05)
}
}
.qst-block {
gap: 1.25rem;
display: grid
}
.qst-content {
gap: 1.25rem;
display: grid
}
.qst-content .text {
font-weight: 500
}
.qst-media {
position: relative;
overflow: hidden;
display: block;
width: 100%;
max-width: min(17.5rem, 75%);
aspect-ratio: 1.166667;
border-radius: .5rem
}
.qst-media img,
.qst-media video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
transform: initial;
border-radius: .5rem
}
@media (min-width:768px) {
.qst-block {
grid-template-columns: auto 55%
}
.qst-media {
margin-top: auto
}
}
@media (min-width:1200px) {
.qst-block {
gap: var(--sp-xl);
grid-template-columns: auto 45%
}
.qst-content {
margin-left: var(--sp-md)
}
.qst-content:has(.contact-card) {
gap: var(--sp-md)
}
}
.footer-labels-wrap+footer {
margin-top: 0
}
.footer-labels-wrap {
display: flex;
align-items: flex-end;
height: 6.25rem;
overflow: visible;
pointer-events: none;
padding-bottom: 1px;
margin-bottom: -1px;
order: 2
}
.footer-labels {
position: relative;
height: 37.5rem;
width: 100%;
display: block;
overflow: hidden;
opacity: 0;
transition: opacity var(--transition-1)
}
.footer-label {
font-size: .8125rem;
font-weight: 500;
color: var(--clr-title);
font-family: var(--ff-2);
text-transform: uppercase;
display: inline-block;
padding: .8rem;
background: #d7ecff;
border-radius: .625rem;
white-space: nowrap;
pointer-events: all;
position: absolute;
left: 0;
top: 20%;
width: auto;
will-change: transform;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: color var(--transition-1), background var(--transition-1)
}
.footer-label:nth-child(1) {
left: 4.5rem;
transform: translate(-30%, -10%)
}
.footer-label:nth-child(2) {
left: 4.5rem;
transform: translateY(120%)
}
.footer-label:nth-child(3) {
left: 4.5rem;
transform: translateX(40%)
}
.footer-label:nth-child(4) {
left: calc(100% - 12rem);
transform: translateX(-40%)
}
.footer-label:nth-child(5) {
left: calc(100% - 12rem);
transform: translate(-50%, 110%)
}
.footer-label:nth-child(6) {
left: calc(100% - 12rem);
transform: translateX(-10%)
}
@media (min-width:1200px) {
.footer-label:hover {
color: var(--clr-white);
background: var(--clr-primary)
}
}
@media (max-width:991px) {
.footer-label {
font-size: .75rem
}
}
@media (max-width:767px) {
.footer-labels-wrap {
height: 9rem
}
.footer-label {
font-size: .75rem;
padding: .5rem
}
.footer-label:nth-child(3) {
left: 2rem;
transform: translate(-30%, -10%)
}
.footer-label:nth-child(2) {
left: 2rem;
transform: translateY(120%)
}
.footer-label:nth-child(1) {
left: 2rem;
transform: translateX(60%)
}
.footer-label:nth-child(4) {
left: calc(100% - 8rem);
transform: translateX(-90%)
}
.footer-label:nth-child(5) {
left: calc(100% - 8rem);
transform: translate(-50%, 110%)
}
.footer-label:nth-child(6) {
left: calc(100% - 8rem);
transform: translateX(-20%)
}
}
.advt-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-xs)
}
.advt-item {
display: grid;
border: solid .0625rem var(--clr-border);
grid-row: span 4;
grid-template-rows: subgrid;
padding: calc(var(--sp-sm) * 0.75);
border-radius: .75rem
}
.advt-item_2 {
border: none;
padding: 0;
text-align: center;
padding-bottom: var(--sp-xs)
}
.advt-img {
position: relative;
width: 13.125rem;
aspect-ratio: 210/140;
flex-shrink: 0;
margin-bottom: calc(var(--sp-lg) - var(--sp-xs))
}
.advt-img>* {
position: absolute;
inset: 0;
-o-object-fit: scale-down;
object-fit: scale-down
}
.advt-img_2 {
width: 100%;
aspect-ratio: 415/320;
margin: 0;
border-radius: .625rem;
overflow: hidden
}
.advt-img_2 img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
object-position: top;
}
.advt-img_3 {
width: 100%;
aspect-ratio: 1/1;
margin: 0;
border-radius: .625rem;
overflow: hidden
}
.advt-img_3 img {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.advt-title {
text-transform: none
}
.h-logo img {
width: 70px;
}
@media (max-width:1199px) {
.advt-grid {
grid-template-columns: repeat(3, 1fr)
}
}
@media (max-width:991px) {
.advt-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width:575px) {
.advt-grid {
grid-template-columns: repeat(1, 1fr)
}
.advt-img {
margin-bottom: var(--sp-sm)
}
.advt-img_2 {
margin-bottom: 0
}
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-xs)
}
.team-card {
--btn-size: 3.5rem;
position: relative;
display: grid;
grid-template-columns: var(--btn-size) auto;
grid-row: span 3;
grid-template-rows: subgrid;
gap: var(--sp-xs);
padding: var(--sp-xs);
border-radius: .625rem;
border: solid .0625rem var(--clr-border)
}
.team-card__title {
grid-column: -1/1;
font-weight: 400
}
.team-card__subtitle {
grid-column: -1/1;
margin-top: calc(var(--sp-xs) / -2)
}
.team-card__image {
aspect-ratio: 300/420;
position: relative;
overflow: hidden;
border-radius: .75rem
}
.team-card__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto
}
.team-card__contact {
display: flex;
flex-direction: column;
gap: .75rem;
justify-content: flex-end
}
.team-card__btn {
width: var(--btn-size);
height: var(--btn-size);
border-radius: 100%;
background-color: var(--clr-secondary);
color: var(--clr-primary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
transition: color var(--transition-1), background-color var(--transition-1)
}
.team-card__btn svg {
display: block;
width: 1.5rem;
height: 1.5rem
}
@media (min-width:1200px) {
.team-card__btn:hover {
background-color: var(--clr-primary);
color: var(--clr-white)
}
}
@media (max-width:991px) {
.team-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (max-width:767px) {
.team-card {
--btn-size: 2rem
}
.team-card__title {
font-size: 1rem
}
.team-card__subtitle {
font-size: .75rem
}
.team-card__contact {
gap: .5rem
}
.team-card__btn svg {
width: 1rem;
height: 1rem
}
}
.cta {
position: relative;
border-radius: .625rem;
border: solid 1px var(--clr-border);
padding: var(--sp-sm);
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--sp-sm)
}
.cta__title {
text-transform: none;
text-wrap: balance
}
.cta__text {
max-width: 41.625rem;
margin-bottom: var(--sp-sm)
}
.cta__content {
grid-column: 1;
align-self: flex-end
}
.cta__image {
align-self: flex-end;
aspect-ratio: 520/290;
border-radius: .5rem;
overflow: hidden;
position: relative
}
.cta__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto
}
@media (max-width:991px) {
.cta {
grid-template-columns: 1fr 1fr
}
.cta__title {
grid-column: -1/1
}
}
@media (max-width:767px) {
.cta {
grid-template-columns: 1fr
}
.cta__image {
grid-row: 1
}
.cta__title {
font-size: var(--h4)
}
}
.brand-product {
position: relative;
border: solid .0625rem var(--clr-border);
border-radius: .625rem;
padding: var(--sp-xs);
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--sp-md);
height: 100%
}
.brand-product__title {
text-wrap: balance;
text-transform: none
}
.brand-product__image {
margin-left: var(--sp-sm);
position: relative;
border-radius: .5rem;
overflow: hidden;
aspect-ratio: 337/250
}
.brand-product__image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto
}
.brand-products-swiper .swiper-slide {
height: auto
}
.brand-photos-swiper .swiper-container {
overflow: visible
}
.brand-photos-swiper .swiper-slide {
height: 33.75rem;
width: auto
}
.brand-photos-swiper .swiper-slide>div {
height: 100%;
position: relative
}
.brand-photos-swiper .swiper-slide img {
display: block;
max-height: 100%;
border-radius: .625rem
}
@media (max-width:1199px) {
.brand-photos-swiper .swiper-slide {
height: 25rem
}
}
@media (max-width:991px) {
.brand-photos-swiper .swiper-slide {
height: 20rem
}
}
@media (max-width:767px) {
.brand-photos-swiper .swiper-slide {
height: 15rem
}
}
@media (max-width:575px) {
.brand-photos-swiper .swiper-slide {
height: 10rem
}
}
.jobs-grid {
gap: var(--sp-xs);
display: grid;
grid-template-columns: 1fr
}
.job-card {
border: solid 1px var(--clr-border);
border-radius: .625rem;
padding: var(--sp-xs);
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
align-items: flex-start;
gap: var(--sp-xs);
cursor: pointer;
transition: border-color var(--transition-1)
}
.job-card__title {
text-transform: none;
transition: color var(--transition-1)
}
.job-card__info {
display: flex;
flex-wrap: wrap;
gap: var(--sp-xs);
font-size: var(--text-sm);
line-height: 1.4;
color: var(--clr-title)
}
.job-card__info li {
display: flex;
align-items: center;
gap: .5em
}
.job-card__info img {
width: 1.5em;
display: block;
flex-shrink: 0
}
.job-card__info.type-2 {
font-family: var(--ff-2);
font-size: var(--h5);
font-weight: 500
}
.job-card__info.type-2 li {
gap: .675em
}
.job-card__info.type-2 img {
width: 1.3334em
}
.jobs-filters {
gap: var(--sp-xs);
display: flex;
justify-content: center;
flex-wrap: wrap
}
.jobs-filters>* {
flex-grow: 1
}
.job-content {
gap: clamp(2.5rem, 0.3947rem + 4.386vw, 5rem);
display: grid
}
@media (min-width:768px) {
.jobs-grid {
grid-template-columns: repeat(2, 1fr)
}
}
@media (min-width:992px) {
.job-content {
grid-template-columns: auto 45%
}
.job-content .form-mini {
position: sticky !important;
top: calc(var(--h-height) + 0.5rem);
align-self: start
}
}
@media (min-width:1200px) {
.job-card:hover {
border-color: var(--clr-primary)
}
.job-card:hover .job-card__title {
color: var(--clr-primary)
}
.jobs-grid {
grid-template-columns: repeat(3, 1fr)
}
.job-content {
grid-template-columns: auto 32.6%
}
.jobs-filters>* {
flex-grow: 0;
flex-basis: 26.25rem
}
}
.rl-block {
gap: var(--sp-sm);
display: grid
}
.rl-media {
position: relative;
overflow: hidden;
display: block;
width: 100%;
aspect-ratio: 1.3281;
border-radius: .625rem
}
.rl-media .video-block {
display: block;
width: 100%;
height: 100%
}
.rl-media img,
.rl-media video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
transform: initial;
border-radius: .625rem
}
.rl-content>*+* {
margin-top: var(--sp-sm)
}
.rl-content .title {
text-transform: initial
}
@media (min-width:992px) {
.rl-block {
grid-template-columns: 50% auto
}
.rl-block.rl-right {
grid-template-columns: auto 50%
}
.rl-block.rl-right .rl-media {
order: 1
}
.rl-content {
align-self: center
}
}
@media (min-width:1200px) {
.rl-block {
gap: clamp(3.75rem, -1.5132rem + 10.9649vw, 10rem);
grid-template-columns: 54.546% auto
}
.rl-block.rl-right {
grid-template-columns: auto 54.546%
}
.rl-content>.text,
.rl-content>.btn {
margin-left: var(--sp-md)
}
.rl-content>*+.btn {
margin-top: clamp(3.75rem, 1.6447rem + 4.386vw, 6.25rem)
}
}
.lr-block {
gap: var(--sp-sm);
display: grid
}
.lr-media {
position: relative;
overflow: hidden;
display: block;
width: 100%;
aspect-ratio: 640/480;
border-radius: .625rem
}
.lr-media.ratio-1-1 {
aspect-ratio: 640/640;
}
.lr-media.ratio-1-15 {
aspect-ratio: 1/1.5;
}
.lr-media .video-block {
display: block;
width: 100%;
height: 100%
}
.lr-media img,
.lr-media video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
transform: initial;
border-radius: .625rem
}
.lr-content>*+* {
margin-top: var(--sp-sm)
}
@media (min-width:992px) {
.lr-block {
grid-template-columns: 50% auto
}
.lr-block.lr-right {
grid-template-columns: auto 50%
}
.lr-block.lr-right .lr-media {
order: 1
}
.lr-content {
align-self: center
}
}
@media (min-width:1200px) {
.lr-block {
gap: clamp(2.5rem, 0.3947rem + 4.386vw, 5rem);
grid-template-columns: 44.652% auto
}
.lr-block.lr-right {
grid-template-columns: auto 44.652%
}
}
.pagination {
--size: 2.75rem;
--font-size: 1rem;
--gap: .75rem;
position: relative;
gap: .5rem;
display: flex;
align-items: center;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
margin-top: max(1.25rem, 2.5vw)
}
.pagination ul {
line-height: 0;
gap: var(--gap);
display: flex;
justify-content: center;
border-radius: .625rem;
background-color: var(--clr-grey);
padding: .5rem
}
.pagination li {
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
flex-shrink: 0;
border-radius: .5rem;
font-size: var(--font-size);
font-weight: 500;
line-height: var(--size);
color: var(--clr-text);
text-align: center
}
.pagination a {
position: relative;
display: inline-block;
width: 100%;
height: 100%;
border-radius: inherit
}
.pagination .dots {
pointer-events: none
}
.pagination .pag-arrow {
--size: 3.75rem;
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
flex-shrink: 0;
color: var(--clr-primary);
border-radius: .625rem;
border: .0625rem solid var(--clr-border)
}
.pagination .pag-arrow svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%
}
.pagination .pag-arrow:last-child {
transform: rotate(180deg)
}
.pagination li.active a {
pointer-events: none;
color: var(--clr-white);
background-color: var(--clr-primary)
}
@media (min-width:1200px) {
.pagination li a:hover {
color: var(--clr-primary)
}
.pagination .pag-arrow:hover {
border-color: var(--clr-primary)
}
}
@media (max-width:575px) {
.pagination {
--size: 2.125rem;
--font-size: .875rem;
--gap: .5rem;
gap: .25rem
}
.pagination ul {
padding: .25rem
}
.pagination .pag-arrow {
--size: 2.625rem
}
}
.blog-wrap {
--items: 1;
--gap: 1.25rem;
gap: var(--gap);
display: flex;
flex-wrap: wrap
}
.blog-wrap+.btn {
display: flex;
width: -moz-fit-content;
width: fit-content;
margin-inline: auto;
margin-top: var(--sp-sm)
}
.blog-card {
position: relative;
gap: .5rem;
display: flex;
flex-direction: column;
width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));
border-radius: .625rem;
border: .0625rem solid var(--clr-border);
padding: 1rem
}
.blog-card .title {
text-transform: initial
}
.blog-img {
position: relative;
overflow: hidden;
display: block;
width: 100%;
aspect-ratio: 1.348;
border-radius: .5rem
}
.blog-img img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
border-radius: .5rem
}
.blog-content {
gap: .5rem;
display: grid;
margin-top: auto
}
.blog-labels {
position: relative;
gap: var(--sp-sm);
display: inline-flex;
align-items: center
}
.blog-labels>* {
gap: .75rem;
display: inline-flex;
align-items: center;
font-size: var(--text);
line-height: 1.25em;
font-weight: 300;
color: var(--clr-text)
}
.blog-labels>* img {
--size: 1.7778em;
display: inline-block;
width: var(--size);
height: var(--size);
flex-shrink: 0
}
.blog-detail .title {
text-transform: initial
}
@media (min-width:768px) {
.blog-wrap {
--items: 2
}
}
@media (min-width:1200px) {
.blog-wrap {
--items: 3
}
.blog-card {
gap: clamp(2.5rem, 0.3947rem + 4.386vw, 5rem);
padding: 1.25rem
}
.blog-card .title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: var(--transition-1)
}
.blog-card:hover {
border-color: var(--clr-primary)
}
.blog-card:hover .title {
color: var(--clr-primary)
}
.blog-card:hover .blog-img img {
transform: scale(1.05)
}
.blog-img img {
transition: transform var(--transition-1)
}
.blog-content {
gap: 1.25rem;
grid-template-columns: auto 65%
}
.blog-content .text {
align-self: end
}
}
.brand-wrap {
--items: 2;
--gap: .0625rem;
position: relative;
gap: var(--gap);
display: flex;
flex-wrap: wrap
}
.brand-card {
position: relative;
overflow: hidden;
display: block;
width: calc(100% / var(--items) - var(--gap) + var(--gap) / var(--items));
border-radius: .625rem;
box-shadow: 0 0 0 .0625rem var(--clr-border);
text-align: center;
padding: var(--sp-sm)
}
.brand-card>*+* {
margin-top: .75rem
}
.brand-img {
position: relative;
overflow: hidden;
display: block;
padding-top: max(2.75rem, 33%)
}
.brand-img img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: var(--transition-1);
max-width: 100%;
max-height: 100%;
width: 100%;
-o-object-fit: contain;
object-fit: contain;
content-visibility: auto
}
@media (min-width:768px) {
.brand-wrap {
--items: 3
}
}
@media (min-width:992px) {
.brand-wrap {
--items: 4
}
}
@media (min-width:1200px) {
.brand-wrap {
--items: 7;
--gap: .125rem
}
.brand-card .btn-link {
opacity: 0;
visibility: hidden
}
.brand-card:hover {
box-shadow: 0 0 0 .0625rem var(--clr-title)
}
.brand-card:hover .btn-link {
opacity: 1;
visibility: visible
}
.brand-card:hover .brand-img img {
transform: translate(-50%, -50%) scale(1.1)
}
}
html:has(.history-section) {
scroll-behavior: auto
}
.history-inner {
gap: clamp(3.75rem, -1.5132rem + 10.9649vw, 10rem);
display: grid;
grid-template-columns: max-content auto
}
.history-sidebar-wrap {
display: flex
}
.history-sidebar {
--gap: 1.25rem;
position: relative;
overflow-y: auto;
overflow-x: clip;
pointer-events: none;
width: 100%;
height: auto
}
.history-sidebar>*+* {
margin-top: .25rem
}
.history-year {
position: relative;
cursor: pointer;
z-index: 0;
pointer-events: all;
transition: var(--transition-1);
display: block;
font-family: var(--ff-2);
font-size: var(--h3);
line-height: 1.25em;
font-weight: 600;
color: rgba(22, 22, 24, .15)
}
.history-year.active {
color: var(--clr-primary)
}
.history-block {
position: relative;
overflow: hidden
}
.history-block+.history-block {
margin-top: var(--sp-sm)
}
.history-content>*+* {
margin-top: var(--sp-sm)
}
.history-tag {
position: relative;
font-family: var(--ff-2);
font-size: var(--h5);
line-height: 1em;
font-weight: 400;
color: var(--clr-text-light);
text-transform: uppercase;
text-align: center
}
.history-tag b {
position: relative;
background-color: #f3f3f3;
padding-inline: 1.25rem
}
.history-tag:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: .0625rem;
background-color: rgba(22, 22, 24, .2)
}
@media (max-width:1199px) {
.history-inner {
gap: var(--sp-sm);
grid-template-columns: 100%
}
.history-sticky {
position: sticky;
z-index: 10;
top: var(--h-height);
background-color: #f3f3f3;
border-radius: 7.625rem;
transition: top var(--transition-1);
padding-inline: 1rem
}
.history-sidebar-wrap {
margin-inline: calc(-0.5 * var(--bs-gutter-x))
}
.history-sidebar {
--gap: .5rem;
pointer-events: all;
gap: 0;
display: inline-flex;
flex-wrap: nowrap;
background-color: transparent;
padding-inline: calc(0.5 * var(--bs-gutter-x));
padding-block: var(--gap)
}
.history-sidebar::-webkit-scrollbar {
display: none
}
.history-sidebar>*+* {
margin-top: 0
}
.history-year {
white-space: nowrap;
flex-shrink: 0;
font-size: var(--h4);
padding-inline: calc(0.5 * var(--bs-gutter-x)) 0
}
.history-year:before {
content: none
}
}
.sub-links {
--space: .75rem;
overflow-y: clip;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding-bottom: .25rem
}
.sub-links::-webkit-scrollbar {
width: .375rem !important;
height: .375rem !important
}
.sub-links::-webkit-scrollbar-thumb {
border-radius: .375rem
}
.sub-links::-webkit-scrollbar-thumb:active {
background: #8d8d8d
}
.sub-links ul {
width: -moz-max-content;
width: max-content;
margin-inline: auto;
gap: 0;
display: flex;
justify-content: center;
border-radius: 4.375rem;
background-color: var(--clr-grey);
padding: .625rem
}
.sub-links li {
cursor: pointer;
display: inline-block;
scroll-snap-align: center;
scroll-margin-left: var(--space);
border-radius: 3rem;
transition: var(--transition-1);
font-size: .875rem;
line-height: 1.43em;
font-weight: 500;
color: var(--clr-title);
padding: .625rem 1rem
}
.sub-links li.is-active {
color: var(--clr-white);
background-color: var(--clr-primary)
}
@media (min-width:1200px) {
.sub-links li:hover {
color: var(--clr-primary)
}
}
@media (max-width:575px) {
.sub-links {
margin-inline: calc(-1 * var(--space))
}
.sub-links ul {
padding-inline: var(--space)
}
}
._tabs {
position: relative
}
:where(._tab) {
display: none
}
._tab:nth-child(1 of ._tab) {
display: block
}
._tab-item {
cursor: pointer
}
._tab-item.is-active {
pointer-events: none
}
.accordion {
position: relative;
z-index: 1
}
.accordion-item {
--padding-acc: var(--sp-xs);
position: relative;
background: var(--bg-light);
border-radius: .625rem
}
.accordion-item+.accordion-item {
margin-top: .5rem
}
.accordion-item .text {
--texst-space: .5rem
}
.accordion-title {
position: relative;
cursor: pointer;
font-size: var(--text);
line-height: 1.5;
font-weight: 500;
color: var(--clr-title);
padding: var(--padding-acc);
transition: var(--transition-1);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-xs)
}
.accordion-title i {
position: relative;
flex-shrink: 0;
display: inline-block;
height: 1.875rem;
width: 1.875rem;
border-radius: 100%;
transition: var(--transition-1);
color: var(--clr-white);
background-color: var(--clr-primary)
}
.accordion-title i:before,
.accordion-title i:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: .125rem;
width: 34%;
background-color: currentColor;
transform: translate(-50%, -50%);
border-radius: .125rem;
transition: transform var(--transition-1)
}
.accordion-title i:before {
transform: translate(-50%, -50%) rotate(90deg)
}
.accordion-title.is-active {
color: var(--clr-primary)
}
.accordion-title.is-active i:before {
transform: translate(-50%, -50%) rotate(0deg)
}
.accordion-inner {
display: none;
padding: var(--padding-acc);
padding-top: 0
}
@media (min-width:1200px) {
.accordion-title:hover {
color: var(--clr-primary)
}
}
@media (max-width:991px) {
.accordion-item {
--padding-acc: .875rem
}
}
.faq-block {
gap: var(--sp-md);
display: grid
}
.faq-info .text {
font-weight: 500
}
@media (min-width:1200px) {
.faq-block {
grid-template-columns: 35.5% auto
}
}
.contact-card {
--gap: 1rem;
position: relative;
display: block;
border-radius: .625rem;
border: .0625rem solid rgba(22, 22, 24, .2);
padding: var(--gap)
}
.contact-card .title {
text-transform: initial
}
.contact-card>*+* {
margin-top: var(--gap)
}
.contact-card+.contact-card {
margin-top: var(--gap)
}
.contact-item {
--icon-size: 1.5em;
gap: .5rem;
display: flex;
align-items: flex-start;
font-size: 1rem;
line-height: var(--icon-size);
font-weight: 300;
color: var(--clr-text)
}
.contact-item img {
display: inline-block;
width: var(--icon-size);
height: var(--icon-size);
flex-shrink: 0
}
.contact-item a {
transform-origin: center
}
.contact-item+.contact-item {
margin-top: calc(var(--gap) * 0.75)
}
.contact-links {
gap: .5rem;
display: inline-flex;
flex-direction: column
}
@media (min-width:1200px) {
.contact-item a:hover {
transform: scale(.9)
}
.contact-card {
--gap: 1.25rem
}
}
:where(.section_dark, .section_light)+.map-section {
margin-top: 0
}
.map-section:last-child {
margin-bottom: 0
}
.map-block {
position: relative;
overflow: hidden;
display: block;
padding-top: max(25rem, 40.625vw)
}
.map {
position: absolute;
inset: 0
}
.infoBox {
--space: .5rem
}
.infoBox>img {
z-index: 10;
opacity: 0
}
.infoBox>img,
.infoBox .btn-close {
--size: 1.5rem;
position: absolute !important;
top: .125rem;
right: .125rem;
width: var(--size);
height: var(--size)
}
.info-box-wrapper {
position: relative;
z-index: 1;
background-color: var(--clr-white);
border-radius: .5rem;
display: flex
}
.info-box-inner {
padding-inline: .75rem;
padding-block: .625rem
}
.info-box-inner>* {
margin-bottom: var(--space)
}
.info-box-inner :last-child {
margin-bottom: 0
}
.cnt-title {
font-family: var(--ff-1);
font-size: var(--text);
line-height: normal;
font-weight: 500;
color: var(--clr-title)
}
.cnt-item {
display: flex;
align-items: flex-start
}
.cnt-img {
flex-shrink: 0;
width: 1.25rem;
height: 1.25rem;
margin-right: var(--space)
}
.cnt-img img {
width: 100%;
line-height: 0
}
.cnt-info {
display: inline-flex;
flex-direction: column;
font-family: var(--ff-1);
font-size: .875rem;
line-height: normal;
font-weight: 300;
color: var(--clr-text)
}
.cnt-info a {
display: block;
width: -moz-fit-content;
width: fit-content
}
.cnt-info>*+* {
margin-top: var(--space)
}
@media (min-width:1200px) {
.infoBox img:hover+.info-box-wrapper .btn-close {
transform: scale(.9)
}
.cnt-info a:hover {
transform: scale(.9)
}
}
.social ul {
gap: .5rem;
display: flex;
align-items: center;
flex-wrap: wrap
}
.social li {
line-height: 0
}
.social a {
--size: 2.5rem;
position: relative;
display: inline-block;
width: var(--size);
height: var(--size);
flex-shrink: 0;
border-radius: .625rem;
background-color: var(--clr-grey)
}
.social a>* {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 40%
}
@media (min-width:1200px) {
.social a:hover {
background-color: var(--clr-secondary)
}
}
footer {
--pd-inline: 0rem;
padding-block: var(--sp-sm) var(--sp-xs);
border-top: .0625rem solid var(--clr-border)
}
.footer-top+.footer-bottom {
margin-top: clamp(2rem, -0.5263rem + 5.2632vw, 5rem)
}
.footer-top {
gap: 1rem;
display: grid;
padding-inline: var(--pd-inline)
}
.footer-top .btn-wrap {
justify-self: start
}
.footer-logo {
display: block;
width: 100%;
max-width: 10rem;
flex-shrink: 0;
transform-origin: center
}
.footer-logo img {
display: block;
width: 100%
}
.footer-links {
gap: .5rem;
display: grid;
grid-template-columns: repeat(2, 1fr)
}
.footer-links li {
line-height: 0
}
.footer-links li+li {
margin-top: .5rem
}
.footer-links a {
font-size: .875rem;
line-height: 1.2em;
font-weight: 400;
color: var(--clr-title);
text-transform: uppercase;
transform-origin: center
}
.footer-contact {
gap: .75rem;
display: flex;
flex-direction: column
}
.footer-contact-list {
gap: .75rem;
display: inline-flex;
flex-direction: column
}
.footer-contact-list a,
.footer-contact-list p {
font-size: var(--text-sm);
line-height: 1.1em;
font-weight: 300;
color: var(--clr-text)
}
.footer-contact-list a {
transform-origin: center
}
.footer-bottom {
gap: .5rem;
display: flex;
flex-direction: column;
font-size: .875rem;
line-height: 1.5em;
font-weight: 400;
color: var(--clr-text);
padding-inline: var(--pd-inline)
}
.footer-bottom a {
transform-origin: center
}
.dev-link {
gap: .375rem;
display: flex;
align-items: center
}
.dev-link img {
width: 6.125rem
}
@media (min-width:768px) {
.footer-top {
gap: 1.5rem 3rem;
grid-template-columns: max-content
}
.footer-top .btn-wrap {
justify-self: end;
align-self: center
}
.footer-logo {
max-width: 12rem
}
.footer-links {
order: 2;
gap: 1rem;
grid-template-columns: repeat(3, max-content);
grid-column: 2/2;
justify-content: space-evenly
}
.footer-links li+li {
margin-top: 1rem
}
.footer-contact {
order: 1;
gap: 1rem
}
.footer-contact-list {
gap: 1rem
}
}
@media (min-width:1200px) {
footer {
--pd-inline: .5rem
}
.footer-top {
gap: 10vw;
grid-template-columns: 12rem max-content max-content max-content;
justify-content: space-between
}
.footer-top .btn-wrap {
align-self: start;
flex-direction: column
}
.footer-top .btn-wrap>* {
width: 100%
}
.footer-logo {
margin-right: auto;
align-self: start
}
.footer-links {
order: initial;
grid-column: initial;
gap: 7.5vw
}
.footer-contact {
order: initial
}
.footer-bottom {
gap: 1rem;
flex-direction: row;
justify-content: space-between
}
a.footer-logo:hover,
.footer-links a:hover,
.footer-contact-list a:hover,
.footer-bottom a:hover,
a.dev-link:hover {
transform: scale(.9)
}
}
.popup-wrapper {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
left: -100%;
transition-delay: .3s;
display: block
}
.popup-wrapper .bg-layer {
position: absolute;
left: 0;
right: 0;
top: -6.25rem;
bottom: -6.25rem;
background: var(--bg-overlay);
backdrop-filter: blur(var(--blur));
opacity: 0;
transition: opacity var(--transition-1)
}
.popup-wrapper.active {
left: 0;
transition-delay: 0s
}
.popup-wrapper.active .bg-layer {
opacity: 1
}
.popup-content {
position: absolute;
inset: 0;
font-size: 0;
text-align: center;
letter-spacing: 0;
padding: 1rem;
overflow: auto;
-webkit-overflow-scrolling: touch;
backface-visibility: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(6.25rem);
transition: var(--transition-1)
}
.popup-content.active {
transform: translateY(0%);
opacity: 1;
visibility: visible
}
.popup-content:after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%
}
.popup-content .layer-close {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 625rem
}
.popup-container {
position: relative;
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 42rem;
background: var(--clr-white);
border-radius: .625rem
}
.popup-container.size-2 {
max-width: 41.25rem
}
.popup-container .btn-close {
position: absolute;
z-index: 10;
top: .375rem;
right: .375rem
}
.popup-align {
position: relative;
z-index: 1;
text-align: left;
padding: 1.25rem
}
.popup-align .title {
text-transform: initial
}
.popup-align>*+* {
margin-top: var(--sp-md)
}
.popup-align>.title+.text {
margin-top: var(--sp-xs)
}
.popup-align:has(.form-block) {
padding: clamp(1.25rem, 0.1974rem + 2.193vw, 2.5rem)
}
.popup-align:has(.form-block)>*+* {
margin-top: var(--sp-sm)
}
.popup-entry {
gap: var(--sp-md);
display: grid;
grid-template-columns: auto 53.5%
}
.popup-info {
align-self: self-end
}
.popup-info>*+* {
margin-top: var(--sp-sm)
}
.popup-img {
position: relative;
overflow: hidden;
display: block;
width: 100%;
aspect-ratio: 1.58;
border-radius: .5rem
}
.popup-img img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
content-visibility: auto;
border-radius: .5rem
}
.open-popup {
cursor: pointer
}
@media (max-width:575px) {
.popup-entry {
grid-template-columns: auto
}
.popup-align>*+* {
margin-top: var(--sp-sm)
}
}
.cookies-informer {
--cookie-pd: clamp(1rem, 0.7895rem + 0.4386vw, 1.25rem);
--cookie-gap: clamp(0.75rem, 0.3289rem + 0.8772vw, 1.25rem);
position: fixed;
bottom: var(--cookie-gap);
left: var(--cookie-gap);
transform: translate(0%, 100%);
transition: var(--transition-1);
opacity: 0;
visibility: hidden;
backface-visibility: hidden;
max-width: min(100%, 31.25rem);
width: calc(100% - var(--cookie-gap) * 2);
border-radius: .75rem;
background-color: rgba(243, 243, 243, .5);
backdrop-filter: blur(15px);
padding: var(--cookie-pd);
display: block
}
.cookies-informer .btn-close {
position: absolute;
top: .375rem;
right: .375rem
}
.cookies-informer.active {
z-index: 500;
visibility: visible;
opacity: 1;
transform: translate(0%, 0%)
}
.cookies-informer-inner {
width: 100%
}
.cookies-informer-inner>*+* {
margin-top: .75rem
}
.cookies-btn-wrap {
gap: .5rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap
}
.page-404 {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: calc(100svh - var(--h-height));
padding: 2.5rem 0;
margin: 0
}
.page-404-inner .title {
text-transform: uppercase
}
.page-404-inner>*+* {
margin-top: 1rem
}
.page-404-inner>.title+* {
margin-top: var(--sp-md)
}
.page-404-img {
display: block;
margin-inline: auto
}
.page-404-img img {
width: 100%
}
.page-404-img+.page-404-inner {
margin-top: .625rem
}
@media (min-width:576px) {
.page-404-inner .text {
width: min(31.75rem, 85%);
margin-inline: auto
}
}