.hero { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; overflow: hidden; } .pin-spacer { background: #fff; } @media screen and (orientation: portrait) { .hero { min-height: fit-content; margin-bottom: 0; overflow: visible; max-height: none; opacity: 1 !important; } } .hero .hero__screen-1 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding-inline: 4.8rem; display: flex; align-items: flex-end; padding-block: 0rem 7rem; overflow: hidden; height: 100vh; } @media screen and (orientation: portrait) { .hero .hero__screen-1 { padding-inline: 0; align-items: flex-start; padding-block: min(19rem, 19vh); border: 0px solid transparent; overflow: visible; max-height: none; } } .hero__screen-1 .hero__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__background { -webkit-mask-image: linear-gradient(black 80%, transparent); mask-image: linear-gradient(black 80%, transparent); } } .hero__screen-1 .hero__flex { display: flex; flex-direction: column; padding-inline: 4.8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 610px; margin: auto; background: linear-gradient( 135deg, #fefaf700 0%, #fefcf3d9 25%, #ebe9de80 50%, #e9debcc2 75%, #1b7d6e 100% ); padding-top: 40px; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 10px 10px #f0d0b6; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__flex { padding-inline: 0; } } .hero__screen-1 .hero__tagline { color: #000; font-size: 2.5rem; line-height: normal; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__tagline { font-size: min(1.4rem, 1.4vh); padding-inline: 2.5rem; width: 70%; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .hero__screen-1 .hero__tagline { font-size: min(2rem, 2vh); } } .hero__screen-1 .hero__heading { color: #000; font-size: 5vh; line-height: normal; width: fit-content; margin-left: -0.8rem; display: block; width: 100%; text-align: end; text-transform: uppercase; margin: auto; text-align: left; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__heading { padding-inline: 2.5rem; margin-left: 0; } } @media screen and (max-width: 991px){ .hero__screen-1 .hero__divider { display: none; } } .hero__screen-1 .hero__heading span { display: inline-block; font-family: 'Futura PT', sans-serif; font-weight: normal; text-align: left; width: 100%; } .hero__screen-1 .hero__divider { position: relative; width: 100%; height: 1.5px; isolation: isolate; margin-top: 1.3rem; pointer-events: none; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__divider { height: min(15rem, 15vh); pointer-events: none; flex-shrink: 0; margin-block: auto; } } .hero__screen-1 .hero__divider .hero__line { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 1.5px; z-index: 1; background: linear-gradient(to right, #fff3, #ffffff80 40%, #ffffff80 60%, #fff3); -webkit-background: linear-gradient( to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0.2) 100% ); } @media screen and (orientation: portrait) { .hero__screen-1 .hero__divider .hero__line { height: 1.8px; display: none; } } .hero__screen-1 .hero__divider .hero__shadow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 155rem; height: 12.8rem; z-index: -2; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__divider .hero__shadow { display: none; } } .headerRightContainer { display: flex; flex-wrap: wrap; margin-right: 15px; } .headerRightContainer a { font-size: 2.50vh; } .headerButton:hover { background: #fff; color: #000; } .headerButton { border: 1px solid; padding: 5px 10px; padding-right: 22px; background: #000; color: #fff; border-radius: 5px; text-transform: uppercase; margin-left: 10px; transition: 1s ease all; } .headerPhone { margin-top: 5px; } .hero__screen-1 .hero__subheading { color: #000; font-size: 5vh; line-height: normal; margin-left: auto; width: fit-content; margin-right: -1rem; text-align: center; width: 100%; text-transform: uppercase; width: 500px; margin: auto; } .location { display: flex; } .mapEmbed { width: 100%; } .mapEmbed iframe { height: 100%; } .contact_desc { font-size: 18px; margin-bottom: 20px; font-family: 'Futura PT', sans-serif; width: 380px; font-weight: normal; } .dist-table td { padding: 12px; font-family: 'Futura PT', sans-serif; } .dist-table { width: 100%; font-size: 2vh; margin-bottom: 20px; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__subheading { margin-bottom: 0; padding-inline: 2.5rem; margin-right: 0; } } .hero__screen-1 .hero__subheading span { display: inline-block; font-family: 'Futura PT', sans-serif; font-weight: normal; } .hero__screen-1 .hero__button { display: flex; justify-content: flex-end; align-items: center; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__button { margin-right: 2.5rem; } } .hero__screen-1 .CTA-btn .CTA-btn__border:after { background: linear-gradient(90deg, #fff, #fff0 10%, #fff0 89.92%, #fff); } .hero__screen-1 .CTA-btn .CTA-btn__inner { display: flex; align-items: center; background: #000; padding: 1rem 2.5rem; gap: 1.5rem; } @media screen and (orientation: portrait) { .hero .hero__screen-1 .CTA-btn .CTA-btn__inner { gap: 1rem; padding: 1rem 2.5rem; } } .hero__screen-1 .CTA-btn .CTA-btn__icon { background: #fff; width: 1rem; height: 1rem; } @media screen and (orientation: portrait) { .hero__screen-1 .CTA-btn .CTA-btn__icon { width: 0.8rem; height: 0.8rem; } } .hero__screen-1 .CTA-btn .CTA-btn__text { color: #fff; } @media screen and (orientation: portrait) { .hero__screen-1 .CTA-btn .CTA-btn__text { font-size: 1.8rem; } } .hero__screen-1 .hero__text { color: #000; font-size: clamp(15px, calc(2rem + 5px), 35px); line-height: normal; max-width: min(53rem, 53vh); } @media screen and (orientation: portrait) { .hero__screen-1 .hero__text { display: none; } } .hero__screen-1 .hero__scroll-wrapper { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -31%); width: 39.6rem; height: 39.6rem; flex-shrink: 0; border-radius: 100%; background: #00000075; -webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1.4rem; padding-top: 5.3rem; } .hero__desc_button { font-size: 16px; background: #3d848d; text-align: center; padding: 10px; border-radius: 0; display: block; margin-top: 10px; font-family: 'Futura PT', sans-serif; text-transform: uppercase; border: 0; } .heroTagBox { color: #fff; font-size: 22px; color: #fff; font-family: 'Futura PT', sans-serif; font-weight: normal; width: 500px; font-style: italic; background: #3d848f; color: #fffdfd; padding: 10px; line-height: 32px; width: 100%; } .heroButton a { background: #fff; font-size: 18px; text-transform: uppercase; padding: 11px 10px; margin: 0 6px; font-family: 'Futura PT', sans-serif; font-weight: normal; background: #3d848d; color: #fff; transition: 1s ease all; -webkit-transition: 1s ease all; border-radius: 3px; font-weight: 500; width: 100%; display: block; text-align: center; } .heroButton a:hover { background: #000; color: #fff; } .heroButtons { display: flex; justify-content: space-between; margin-top: 20px; padding-bottom: 30px; } .heroButton { width: 47%; } .hero__subheading2 { text-align: center; margin-top: 20px; margin-bottom: 40px; padding: 10px; border: 0; margin: auto; padding-left: 0; padding-right: 0; margin: ; margin-top: 20px; } .hero__subheading2 span { display: block; margin: auto; padding: 0; font-size: 19px; font-family: 'Futura PT', sans-serif; font-weight: normal; padding: 9px 26px; background: #3c787b; margin: 8px; color: #fff; border-bottom: 3px solid #bd7b49; font-weight: normal; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__scroll-wrapper { transform: translate(-50%, -31%); width: 25rem; height: 25rem; -webkit-backdrop-filter: blur(4.5px); backdrop-filter: blur(4.5px); gap: 1rem; padding-top: 3.3rem; -webkit-mask-image: linear-gradient(black 0%, transparent 50%); mask-image: linear-gradient(black 0%, transparent 50%); } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .hero__screen-1 .hero__scroll-wrapper { transform: translate(-50%, -25%); width: 40rem; height: 40rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: landscape) { .hero__screen-1 .hero__scroll-wrapper { width: 48rem; height: 48rem; padding-top: 7rem; } } .hero__screen-1 .hero__scroll-text { color: #fffc; font-size: 1.8rem; line-height: normal; letter-spacing: 2.827px; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__scroll-text { font-size: 1.1rem; letter-spacing: 1.78px; } } .hero__screen-1 .hero__scroll-icon { width: 1.8rem; height: 2.2rem; flex-shrink: 0; } @media screen and (orientation: portrait) { .hero__screen-1 .hero__scroll-icon { width: 1.1rem; height: 1.3rem; } } .hero__screen-1 .hero__scroll-wrapper svg { width: 100%; height: 100%; } .hero__divider-img { display: none; } @media screen and (orientation: portrait) { .hero__divider-img { display: block; height: 100%; position: relative; } .hero__divider-img:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; z-index: -1; height: 2px; background: linear-gradient(to right, #fff0, #ffffff80 40%, #ffffff80 60%, #fff0); -webkit-background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0) 100% ); } .hero__divider-img img { object-fit: contain; } } .hero__screen.hero__screen-2 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; isolation: isolate; pointer-events: none; } .hero__screen-2 { opacity: 0; visibility: hidden; transition: all 0.5s ease; } .hero__screen-2.show { opacity: 1; visibility: visible; background: url(banner4.jpg); background-size: cover; } .hero__screen-2 .hero__content::after { content: ""; background: #00000069; position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; } .hero__screen-2 .hero__background-clip { position: absolute; top: 50%; left: 50%; z-index: 1; width: 130vw; height: 130vw; clip-path: polygon(47% 47%, 53% 47%, 53% 53%, 47% 53%); background: transparent; z-index: -1; pointer-events: none; } @media screen and (orientation: portrait) { .hero__screen-2 .hero__background-clip { width: min(10.8rem, 10.8vh); height: min(10.8rem, 10.8vh); clip-path: none; background: #171717; z-index: -1; pointer-events: none; border: 1.16px solid rgba(255, 255, 255, 0.6); top: min(40.5rem, 40.5vh); transform: translate(-50%) rotate(45deg); overflow: hidden; display: none; } } .hero__screen-2 .hero__screen-2__lines { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; -webkit-mask-image: linear-gradient(black 80%, transparent); mask-image: linear-gradient(black 80%, transparent); } @media screen and (orientation: portrait) { .hero__screen-2 .hero__screen-2__lines { display: none; } } .hero__screen-2 .hero__image-wrapper { position: absolute; top: 50%; left: 50%; width: 43.7rem; height: min(70.4rem, 65.4vh); flex-shrink: 0; pointer-events: none; overflow: hidden; z-index: 99999 !important; } .hero__screen-2 .hero__image-wrapper-1 { transform: translate(-50%, -50%) rotate(-45deg) scale(1.5); } .hero__screen-2 .hero__image-wrapper-2 { transform: translate(-50%, -50%) scale(1.5); z-index: -1; opacity: 0; } @media screen and (orientation: portrait) { .hero__screen-2 .hero__image-wrapper { transform: translate(-50%, -50%) rotate(-45deg) scale(1); width: 43.7rem; height: min(70.4rem, 70.4vh); } .hero__screen-2 .hero__image-wrapper-2 { display: none; } } .hero__screen-2 .hero__image-1 { position: absolute; top: 0; left: 0; } .hero__screen-2 .hero__image-2 { position: absolute; top: 0; left: 0; transform-origin: top; will-change: transform; } @media screen and (orientation: portrait) { .hero__screen-2 .hero__image-2 { display: none; } } .hero__screen-2 .hero__content { display: flex; width: 100%; height: 100%; padding-inline: 6.5rem 8.9rem; padding-block: min(26.5rem, 26.5vh) 3rem; } .hero__screen-2 .hero__flex { display: flex; width: 100%; height: 100%; justify-content: space-between; } .hero__screen-2 .hero__flex-left { display: flex; flex-direction: column; position: relative; z-index: 9999; width: 33%; } .hero__screen-2 .hero__tagline { color: #fff; font-size: min(2.5rem, 2.5vh); line-height: normal; overflow: hidden; display: grid; width: fit-content; position: relative; } .hero__screen-2 .hero__tagline span:nth-child(1) { opacity: 0; visibility: hidden; display: inline-block; font-family: montserrat; text-shadow: 4px 1px 7px #000; } .hero__screen-2 .hero__heading { color: #fff; font-size: min(9rem, 9vh); line-height: normal; display: grid; overflow: hidden; margin-left: -1.2rem; margin-top: 20px; margin-bottom: 20px; } .hero__screen-2 .hero__heading span { opacity: 0; visibility: hidden; font-family: 'Futura PT', sans-serif; font-weight: normal; text-transform: uppercase; font-size: 40px; line-height: 46px; } .custom_hero_heading { font-size: 4vh; } .why_subheading { font-size: 3vh; color: #000; font-family: 'Futura PT', sans-serif; font-weight: normal; text-transform: uppercase; } .hero__screen-2 .hero__media { display: flex; flex-direction: column; gap: min(5.5rem, 5.5vh); margin-top: auto; overflow: hidden; } .hero__screen-2 .hero__media video { width: 34rem; height: 19.6rem; flex-shrink: 0; opacity: 0; visibility: hidden; } .hero__screen-2 .hero__media-text { color: #fff; font-size: 2rem; line-height: normal; max-width: 34.9rem; opacity: 0; visibility: hidden; display: grid; grid-template-areas: "stack"; } .hero__screen-2 .hero__media-text-1 { grid-area: stack; } .hero__screen-2 .hero__media-text-2 { grid-area: stack; opacity: 0; visibility: hidden; } .hero__screen-2 .hero__flex-right { height: min(70.4rem, 65.4vh); width: 30%; display: flex; flex-direction: column; justify-content: center; z-index: 9999; } .hero__flex-right-overflow { display: grid; grid-template-areas: "block"; position: absolute; right: 8.7rem; overflow: hidden; margin-top: min(-12rem, -12vh); } .hero__screen-2 .hero__flex-block { grid-area: block; } .hero__screen-2 .hero__description { color: #FFF; font-size: 19px; line-height: 25px; width: 55.7rem; margin-bottom: 2rem; opacity: 0; visibility: hidden; font-family: 'Futura PT', sans-serif; opacity: 1 !important; font-weight: normal; } .hero__screen-2.show::after { background: #00000026; position: absolute; content: ""; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } .hero__screen-2 .hero__description span { color: #fff; } .hero__screen-2 .hero__cta { position: absolute; left: 50%; bottom: min(4rem, 4vh); transform: translate(-50%); opacity: 0; visibility: hidden; } .hero__screen-2 .CTA-btn .CTA-btn__inner { padding: 1rem 2.5rem; background: #696666; } .hero__rotating-line { position: absolute; width: 1px; height: min(15rem, 15vh); background-color: #009ca8; bottom: 14.8rem; right: 8.9rem; } @media screen and (orientation: portrait) { .hero__rotating-line { display: none; } } .hero__affiliated { position: relative; display: flex; align-items: center; gap: 1.3rem; padding-bottom: 2.4rem; width: fit-content; } .hero__affiliated .hero__affiliated-icon { width: 1rem; height: 1rem; transform: rotate(-45deg); flex-shrink: 0; aspect-ratio: 1/1; background: #009ca8; margin-left: 0.2rem; } .hero__affiliated .hero__affiliated-text { color: #000; font-size: 2.2rem; line-height: normal; letter-spacing: 0.88px; text-transform: uppercase; transition: var(--transition); } .hero__affiliated .hero__affiliated-line { position: absolute; left: 0; bottom: 0; background: #009ca8; height: 3px; width: 100%; transform: scaleX(0.45); transform-origin: left; transition: 0.5s var(--ease); } .hero__affiliated:hover .hero__affiliated-text { opacity: 0.6; } .hero__affiliated:hover .hero__affiliated-line { transform: scaleX(1); } .about.--is-mobile { display: none; flex-direction: column; width: 100%; padding-inline: 1.5rem; padding-block: 6rem 10rem; gap: 12rem; padding-top: 0; padding-bottom: 0; overflow: hidden; background: #093c43; padding-top: 20px; } @media screen and (orientation: portrait) { .about.--is-mobile { display: flex; } } .about.--is-mobile .about-content .about-tagline { color: #000; font-size: 1.4rem; line-height: normal; margin-bottom: 1.3rem; overflow: hidden; text-align: center; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-tagline { font-size: 2rem; } } .about.--is-mobile .about-content .about-tagline span { display: inline-block; font-family: 'Futura PT', sans-serif; color: #fff; } .about.--is-mobile .about-content .about-heading { color: #000; font-size: 3.5rem; line-height: normal; margin-bottom: 1rem; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-heading { color: #fff; font-size: 5.5rem; line-height: normal; margin-bottom: 3rem; } } .about.--is-mobile .about-content .about-heading span { display: block; font-family: 'Futura PT', sans-serif; font-weight: normal; font-size: 16px; text-transform: uppercase; color: #fff; text-align: center; display: block; width: 100%; margin: 0 !important; } .about.--is-mobile .about-content .about-heading span:nth-child(2) { margin-left: 5.5rem; } .about.--is-mobile .about-content .about-image { width: 100%; overflow: hidden; margin-inline: auto; margin-bottom: 20px; display: flex; justify-content: space-around; } .about.--is-mobile .about-content .about-image img { width: 48%; height: 250px; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-image { width: 50.7rem; height: 60rem; } } .about.--is-mobile .about-content .about-description { margin-bottom: 2.4rem; display: block; gap: 0; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-description { width: 47.5rem; margin-bottom: 3.5rem; } } .about.--is-mobile .about-content.about-content__bottom .about-description { width: 100%; margin-bottom: 2.5rem; } .about.--is-mobile .about-content .about-description .about-description__text { color: #fff; font-size: 18px; line-height: 142.857%; margin-bottom: 10px; font-family: 'Futura PT', sans-serif; font-weight: normal; text-align: justify; } .about.--is-mobile .about-content .about-description span { color: #fff; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-description .about-description__text { font-size: 2rem; } } .about.--is-mobile .about-content .about__cta { margin-bottom: 6rem; padding-left: 0.5rem; } .about.--is-mobile .about-content.about-content__bottom .about__cta { display: flex; justify-content: flex-start; } .about.--is-mobile .about-content .about-media__wrapper { display: grid; gap: 4rem; width: 100%; } .about.--is-mobile .about-content .about-media__wrapper video { width: 100%; height: 19.6rem; } .about.--is-mobile .about-content .about-media__wrapper .about__media-text { color: #000; font-size: 1.4rem; line-height: normal; max-width: 25.5rem; } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .about.--is-mobile .about-content .about-media__wrapper video { height: 29.6rem; } .about.--is-mobile .about-content .about-media__wrapper .about__media-text { color: #fff; font-size: 2rem; line-height: normal; max-width: 45.5rem; } } .about.--is-mobile .about-content.about-content__bottom .about-media__wrapper .about__media-text { max-width: 90%; } .about.--is-mobile .hero__affiliated { gap: 0.8rem; } .about.--is-mobile .hero__affiliated .hero__affiliated-icon { width: 0.8rem; height: 0.8rem; } .about.--is-mobile .hero__affiliated .hero__affiliated-text { font-size: 1.4rem; } .about.--is-mobile .hero__affiliated .hero__affiliated-line { transform: scaleX(0.7); } .projects { width: 100%; padding-block: min(28rem, 28vh) min(6rem, 6vh); margin-top: min(10rem, 10vh); display: flex; flex-grow: 0; min-height: 100vh; display: none !important; } @media screen and (orientation: portrait) { .projects { display: none !important; padding-block: 0; margin-top: 0rem; min-height: fit-content; } } .projects__accordion-css { position: relative; width: 100%; } .projects__accordion-css__list { flex-flow: column; display: flex; position: static; } .projects__accordion-css__item { position: relative; list-style: none; border-top: 1px solid rgba(255, 255, 255, 0.5); } .projects__accordion-css__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .projects__accordion-css__image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; opacity: 0; transition: var(--transition) 0.3s; } .projects__accordion-css__item-top { display: grid; grid-template-areas: "left right"; padding: 5rem 0 0; align-items: center; } @media screen and (orientation: portrait) { .projects__accordion-css__item-top { padding: 2.7rem 0 0; grid-template-areas: "link link" "date date" "title title"; padding-inline: 2rem; } } .projects__accordion-css__date { color: #ffffff80; font-size: 2rem; transition: var(--transition); grid-area: left; margin-left: 4.8rem; } @media screen and (orientation: portrait) { .projects__accordion-css__date { grid-area: date; font-size: 1.4rem; margin-left: 0rem; width: 100%; margin-bottom: 1.1rem; } } .projects__accordion-css__title { color: #fff; font-size: 4.4rem; grid-area: left; margin-left: 45rem; } @media screen and (orientation: portrait) { .projects__accordion-css__title { grid-area: title; font-size: 2.5rem; margin-left: 0rem; max-width: 27.7rem; } } .projects__accordion-css__link { grid-area: right; justify-self: end; margin-right: 4.8rem; } @media screen and (orientation: portrait) { .projects .projects__accordion-css__link.uptown-link { grid-area: link; justify-self: end; margin-right: 0rem; margin-bottom: 1.1rem; gap: 0.6rem; } .projects .projects__accordion-css__link.uptown-link .uptown-link-text { font-size: 1.4rem; } [data-accordion-status="active"] .uptown-link-icon { width: 0.7rem; height: 0.7rem; transform: scale(1) rotate(43deg); } } .projects__accordion-css__item-bottom { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); grid-template-rows: 0fr; display: grid; position: relative; overflow: hidden; margin-top: 5rem; transform: translateY(-3.5rem); margin-left: 45rem; } @media screen and (orientation: portrait) { .projects__accordion-css__item-bottom { margin-top: 2.7rem; transform: translateY(-2rem); margin-left: 0rem; padding-inline: 2rem; } } [data-accordion-status="active"] .projects__accordion-css__item-bottom { grid-template-rows: 1fr; } [data-accordion-status="active"] .projects__accordion-css__date { color: #fff; } [data-accordion-status="active"] .projects__accordion-css__image { opacity: 0.4; } .projects__accordion-css__item-bottom-wrap { flex-flow: column; height: 100000%; display: flex; position: relative; overflow: hidden; } .projects__accordion-css__item-bottom-content { width: fit-content; } [data-accordion-status="active"] .projects__accordion-css__item-icon { transform: rotate(0.001deg); } .projects__accordion-css__item-p { color: #fff; font-size: 2.2rem; line-height: normal; width: 47rem; } @media screen and (orientation: portrait) { .projects__accordion-css__item-p { font-size: 1.2rem; width: 22rem; } } .projects__accordion-css__tags { display: flex; align-items: center; gap: 2rem; margin-top: 3rem; } @media screen and (orientation: portrait) { .projects__accordion-css__tags { gap: 1.4rem; margin-top: 1.8rem; } } .projects__accordion-css__tag { display: flex; align-items: center; gap: 1.2rem; padding: 0.8rem 1rem; min-width: 12.4rem; border-radius: 3px; background: #85858538; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } @media screen and (orientation: portrait) { .projects__accordion-css__tag { gap: 0.8rem; padding: 0.5rem 0.6rem; min-width: 7.8rem; border-radius: 1.9px; background: #85858538; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } } .projects__accordion-css__tag-icon { width: 2rem; height: 2rem; flex-shrink: 0; } @media screen and (orientation: portrait) { .projects__accordion-css__tag-icon { width: 1.2rem; height: 1.2rem; } } .projects__accordion-css__tag-text { color: #f0f0f0; font-size: 1.6rem; line-height: normal; } @media screen and (orientation: portrait) { .projects__accordion-css__tag-text { font-size: 1rem; } } .contemporary { display: flex; justify-content: center; align-items: center; padding-block: 45rem 53rem; isolation: isolate; position: relative; background: #6c6969; height: 100vh; } @media screen and (orientation: portrait) { .contemporary { padding-block: 19.5rem 19.5rem; height: fit-content; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary { padding-block: 25rem 25rem; max-height: none; } } .contemporary .contemporary__content { position: relative; } .contemporary .contemporary__heading { color: #fff; text-align: center; font-size: 6vh; line-height: normal; overflow: hidden; margin-top: -13rem; font-family: ; opacity: 1 !important; } @media screen and (orientation: portrait) { .contemporary .contemporary__heading { font-size: 3.5rem; margin-top: -5rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary .contemporary__heading { font-size: 5.5rem; } } .contemporary .contemporary__heading span { opacity: 0; visibility: hidden; display: inline-block; color: #fff; font-family: 'Futura PT', sans-serif; font-weight: normal; } .contemporary .contemporary__image-left { width: 34.5rem; height: 37.7rem; flex-shrink: 0; position: absolute; top: 50%; left: 0; z-index: -1; opacity: 0.5; } @media screen and (orientation: portrait) { .contemporary .contemporary__image-left { width: 13.5rem; height: 14.7rem; opacity: 0.5; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary .contemporary__image-left { width: 23.5rem; height: 24.7rem; } } .contemporary .contemporary__image-center { width: 47rem; height: 60rem; flex-shrink: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } @media screen and (orientation: portrait) { .contemporary .contemporary__image-center { width: 18.3rem; height: 23.5rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary .contemporary__image-center { width: 28.3rem; height: 33.5rem; } } .contemporary .contemporary__image-center-back { width: 47rem; height: 60rem; flex-shrink: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -2; } @media screen and (orientation: portrait) { .contemporary .contemporary__image-center-back { width: 18.3rem; height: 23.5rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary .contemporary__image-center-back { width: 28.3rem; height: 33.5rem; } } .contemporary .contemporary__image-right { width: 34.5rem; height: 37.7rem; flex-shrink: 0; position: absolute; top: 50%; right: 0; z-index: -2; opacity: 0.5; overflow: hidden; } .contemporary__image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 105%; background-color: #171717; z-index: 1; -webkit-mask-image: linear-gradient(transparent 0%, #000 80%); mask-image: linear-gradient(transparent 0%, #000 80%); } @media screen and (orientation: portrait) { .contemporary .contemporary__image-right { width: 13.5rem; height: 14.7rem; opacity: 0.5; } .contemporary__image-layer { -webkit-mask-image: linear-gradient(transparent 0%, #000 90%); mask-image: linear-gradient(transparent 0%, #000 90%); } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .contemporary .contemporary__image-right { width: 23.5rem; height: 24.7rem; } } .contemporary__floating { position: absolute; z-index: -3; top: 0; right: 0; bottom: 0; left: 0; display: none; } .contemporary__floating-text { position: absolute; display: flex; justify-content: space-between; top: 50%; left: 50%; z-index: -3; } .contemporary__floating-text span { color: #57575733; text-align: center; font-family: Futura; font-size: min(10rem, 10vh); line-height: normal; } .contemporary__floating-text-1 { width: min(100rem, 100vh); transform: translate(-50%, -225%); } .contemporary__floating-text-2 { width: min(102rem, 102vh); transform: translate(-51%); } .contemporary__floating-text-3 { width: min(122.2rem, 122.2vh); transform: translate(-50%, 140%); z-index: 1; } @media screen and (orientation: portrait) { .contemporary__floating-text span { font-size: 3rem; } .contemporary__floating-text-1 { width: 30rem; transform: translate(-50%, -260%); } .contemporary__floating-text-2 { display: none; } .contemporary__floating-text-3 { width: 35.5rem; transform: translate(-50%, 110%); z-index: 1; } } .contemporary .contemporary__lines { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, black 20%, transparent); mask-image: linear-gradient(transparent, black 20%, transparent); } @media screen and (orientation: portrait) { .contemporary .contemporary__lines { display: none; } } .why { display: flex; justify-content: center; align-items: center; width: 100%; padding-block: min(20.7rem, 20.7vh) min(10rem, 10vh); z-index: 1; position: relative; background: #f8f8f8; padding-bottom: 0; padding-top: 50px; } @media screen and (orientation: portrait) { .why { padding-block: 6rem; height: fit-content; min-height: fit-content; } } .why__floating-wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; height: 100vh; pointer-events: none; -webkit-user-select: none; user-select: none; } @media screen and (orientation: portrait) { .why__floating-wrapper { height: auto; } } .why .why__floating-center { width: min(32.3rem, 32.3vh); height: min(41.3rem, 41.3vh); flex-shrink: 0; position: absolute; top: min(16rem, 16vh); left: min(4.4rem, 4.4vh); } .why .why__floating-right { width: min(34.5rem, 34.5vh); height: min(40rem, 40vh); flex-shrink: 0; position: absolute; top: min(-5.1rem, -5.1vh); right: min(32rem, 32vh); } .why .why__floating-left { width: min(30.6rem, 30.6vh); height: min(39rem, 39vh); flex-shrink: 0; position: absolute; bottom: min(-14.5rem, -14.5vh); left: min(21.4rem, 21.4vh); } .why .why__floating-center-back { width: min(35rem, 35vh); height: min(42rem, 42vh); flex-shrink: 0; position: absolute; bottom: min(-9rem, -9vh); right: min(7rem, 7vh); } @media screen and (orientation: portrait) { .why .why__floating-center { position: absolute; top: 4rem; left: -4rem; width: 8.1rem; height: 10.3rem; } .why .why__floating-right { position: absolute; top: 0; right: 2.8rem; width: 8.6rem; height: 11.3rem; } .why .why__floating-left { position: absolute; top: 21rem; left: 0; width: 7.6rem; height: 9.8rem; } .why .why__floating-center-back { position: absolute; top: 19.2rem; right: -4.3rem; width: 9.6rem; height: 12.3rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .why .why__floating-center { left: -7rem; width: 15.1rem; height: 17.3rem; } .why .why__floating-right { width: 15.6rem; right: 4.8rem; height: 18.3rem; } .why .why__floating-left { top: 25rem; width: 14.6rem; height: 16.8rem; } .why .why__floating-center-back { top: 25.2rem; right: -8.3rem; width: 16.6rem; height: 19.3rem; } } .why .why-flex { display: flex; flex-direction: column; opacity: 1 !important; align-items: center; } .why .why-flex .why__heading { color: #000; text-align: center; font-size: 6vh; line-height: normal; padding: 0 50px; width: 100%; margin-bottom: 10px; font-family: 'Futura PT', sans-serif; font-weight: normal; text-transform: uppercase; } .engineersSubheading { font-size: 3vh; } .config-badge { position: absolute; top: 0; font-size: 2vh; background: #000; color: #fff; padding: 10px; text-transform: uppercase; } @media screen and (orientation: portrait) { .why .why-flex .why__heading { font-size: 25px; margin-bottom: 1.6rem; padding: 0; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .why .why-flex .why__heading { font-size: 7rem; max-width: 49rem; } } .why .why-flex .why__heading span { color: #000; } .why .why-flex .why__description { color: #000; text-align: center; font-size: 18px; line-height: 140%; max-width: 700px; margin-bottom: 0; font-family: 'Futura PT', sans-serif; font-weight: normal; margin-bottom: 20px; padding-bottom: 0; } @media screen and (orientation: portrait) { .why .why-flex .why__description { font-size: 16px; line-height: 125%; margin-bottom: 0; padding: 0 20px; font-weight: normal; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .why .why-flex .why__description { font-size: 1.8rem; max-width: 36rem; } } .why .why-flex .why-scroll__wrapper { width: 15.9rem; height: 15.9rem; position: relative; display: flex; justify-content: center; align-items: center; isolation: isolate; } @media screen and (orientation: portrait) { .why .why-flex .why-scroll__wrapper { width: 10.8rem; height: 10.8rem; } } .why .why-flex .why-scroll__wrapper .why-scroll__square-1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 100%; height: 100%; border: 1px solid #009ca8; opacity: 0.15; z-index: -1; } .why .why-scroll__square-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 13.5rem; height: 13.5rem; flex-shrink: 0; border: 1px solid #009ca8; opacity: 0.3; z-index: -1; } @media screen and (orientation: portrait) { .why .why-scroll__square-2 { width: 9.1rem; height: 9.1rem; } } .why .why-scroll__square-3 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 11.1rem; height: 11.1rem; flex-shrink: 0; border: 1px solid #009ca8; background: #171717; z-index: -1; } @media screen and (orientation: portrait) { .why .why-scroll__square-3 { width: 7.5rem; height: 7.5rem; } } .why .why-scroll__text { color: #fff; text-align: center; font-size: 1.8rem; line-height: normal; letter-spacing: 3.24px; } @media screen and (orientation: portrait) { .why .why-scroll__text { font-size: 1.2rem; line-height: normal; letter-spacing: 2.1px; } } .why .why__lines { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(black 80%, transparent); mask-image: linear-gradient(black 80%, transparent); } @media screen and (orientation: portrait) { .why .why__lines { display: none; } } .choice { position: relative; width: 100%; height: 100vh; padding-inline: 20rem; padding-block: min(24.3rem, 24.3vh); display: flex; justify-content: center; align-items: center; isolation: isolate; margin-top: 0; background: #000; } @media screen and (orientation: portrait) { .choice { min-height: fit-content; height: auto; padding-inline: 0rem; padding-block: 4.5rem 3rem; margin-top: 0rem; } } .choice .choice__background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; mask-image: linear-gradient(transparent, #000 50%); -webkit-mask-image: linear-gradient(transparent, black 50%); } .choice .choice-swiper-container { height: min(59.4rem, 59.4vh); width: fit-content; overflow: hidden; } @media screen and (orientation: portrait) { .choice .choice-swiper-container { height: fit-content; } } .choice .choice-swiper-wrapper { display: flex; width: fit-content; height: 100%; pointer-events: none; gap: 7.7rem; } @media screen and (orientation: portrait) { .choice .choice-swiper-wrapper { pointer-events: all; height: fit-content; gap: 0; } } .choice .choice-swiper-slide { display: flex; flex-direction: column; flex-shrink: 0; padding: 6.5rem 5rem 5.5rem; background: #fffc; width: 45.4rem; height: 100%; opacity: 0; } @media screen and (orientation: portrait) { .choice .choice-swiper-slide { padding: 5rem 3rem; width: 34.4rem; height: 45rem; } } .choice .choice-swiper-slide__number { color: #000; font-size: min(3rem, 3vh); line-height: 93.333%; } @media screen and (orientation: portrait) { .choice .choice-swiper-slide__number { font-size: 2.5rem; line-height: 85%; } } .choice .choice-swiper-slide__number span { color: #000; } .choice .choice-swiper-slide__heading { display: flex; align-items: center; gap: 1.3rem; margin-top: min(31.4rem, 31.4vh); margin-bottom: min(1.8rem, 1.8vh); } @media screen and (orientation: portrait) { .choice .choice-swiper-slide__heading { gap: 1.2rem; margin-top: 22.8rem; margin-bottom: 1.2rem; } } .choice .choice-swiper-slide__heading-icon { width: 1rem; height: 1rem; flex-shrink: 0; background-color: #000; transform: rotate(-43.264deg); } .choice .choice-swiper-slide__heading-text { color: #000; font-size: min(2.2rem, 2.2vh); line-height: 127.273%; text-transform: uppercase; } @media screen and (orientation: portrait) { .choice .choice-swiper-slide__heading-text { font-size: 1.4rem; line-height: normal; } } .choice .choice-swiper-slide__description { color: #000; font-size: min(3rem, 3vh); line-height: 140%; letter-spacing: 1.5px; text-transform: uppercase; width: fit-content; max-width: min(34.8rem, 34.8vh); } @media screen and (orientation: portrait) { .choice .choice-swiper-slide__description { font-size: 2.5rem; line-height: 127%; letter-spacing: 1.25px; max-width: 27.5rem; } } .choice .choice-swiper-pagination { display: none; } @media screen and (orientation: portrait) { .choice .choice-swiper-pagination { margin-top: 8.5rem; height: 10.5px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 35px; } } .choice .choice-swiper-pagination-bullet { width: 8px; height: 8px; border: 1px solid #fdfdfd; transform: rotate(-43.264deg); flex-shrink: 0; aspect-ratio: 1/1; transition: var(--transition); } .choice .choice-swiper-pagination-bullet-active { border: none; background-color: #009ca8; } .choice .choice__heading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; text-align: center; font-size: 9rem; line-height: normal; overflow: hidden; } @media screen and (orientation: portrait) { .choice .choice__heading { position: absolute; top: 19.7rem; left: 50%; transform: translate(-50%); font-size: 3.5rem; width: 100%; } } .choice .choice__heading span { opacity: 0; visibility: hidden; display: inline-block; } .choice .choice__scroll-wrapper { position: absolute; width: 13.5rem; height: 13.5rem; display: grid; grid-template-areas: "stack"; align-items: center; justify-items: center; top: 75%; } @media screen and (orientation: portrait) { .choice .choice__scroll-wrapper { width: 7.4rem; height: 7.4rem; top: 46rem; } } .choice .choice__scroll-wrapper .choice__scroll-background { flex-shrink: 0; transform: rotate(-45deg); grid-area: stack; width: min(13.5rem, 13.5vh); height: min(13.5rem, 13.5vh); background-color: #000; } @media screen and (orientation: portrait) { .choice .choice__scroll-wrapper .choice__scroll-background { width: 100%; height: 100%; } } .choice .choice__scroll-wrapper .choice__scroll-text { position: relative; grid-area: stack; width: fit-content; } .choice .choice__scroll-wrapper .choice__scroll-text:before { content: attr(data-text-desktop); color: #fff; text-align: center; font-size: min(1.8rem, 1.8vh); line-height: normal; letter-spacing: 3.24px; text-transform: uppercase; } @media screen and (orientation: portrait) { .choice .choice__scroll-wrapper .choice__scroll-text:before { content: attr(data-text-mobile); font-size: 1.2rem; letter-spacing: 2.16px; } } .engineers { display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; background: #fff; padding: 30px 50px; } @media screen and (orientation: portrait) { .engineers { padding-block: 6rem; margin-top: 0; } } .engineers .engineers__heading { text-align: center; font-size: 6vh; line-height: normal; margin-bottom: 0px; overflow: hidden; color: #000; font-family: 'Futura PT', sans-serif; text-transform: uppercase; font-weight: normal; } .engineers__heading em { font-family: 'Futura PT', sans-serif; font-weight: normal; } @media screen and (orientation: portrait) { .engineers .engineers__heading { font-size: 3vh; margin-bottom:0; margin-inline: auto; } } .engineers .engineers__heading span { opacity: 0; visibility: hidden; display: inline-block; color: #000; } .engineers-drag { position: relative; height: fit-content; width: 100%; } .engineers .engineers-swiper-container { overflow: hidden; width: 100%; margin-bottom: min(3.8rem, 3.8vh); position: relative; } @media screen and (orientation: portrait) { .engineers .engineers-swiper-container { margin-bottom: 0; } } .engineers .engineers-swiper-wrapper { display: flex; flex-wrap: nowrap; height: 100%; } .engineers .engineers-swiper-slide { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 4.9rem; transition: opacity 0.1s ease-out; padding-bottom: 1rem; } .engineers-swiper-slide__ul { display: grid; justify-items: center; gap: 0.3rem; opacity: 0; transition: var(--transition); } .engineers-swiper-slide__ul .engineers-swiper-slide__li { color: #fff9; font-size: 2rem; font-weight: 5; line-height: 1.3; display: inline; text-align: center; } .engineers-swiper-slide__ul .engineers-swiper-slide__li span { color: #009ca8; } .engineers-swiper-slide__ul .engineers-swiper-slide__li svg { width: max(0.6rem, 4px); height: max(0.6rem, 4px); vertical-align: middle; } @media screen and (orientation: portrait) { .engineers .engineers-swiper-slide { gap: min(4rem, 4vh); } .engineers-swiper-slide__ul .engineers-swiper-slide__li { font-size: 1.4rem; } } .engineers .swiper-slide-prev, .engineers .swiper-slide-next { opacity: 0.5; } .engineers .engineers-swiper-slide__image-wrapper { position: relative; width: 28.2rem; width: 50%; height: min(45.2rem, 45.2vh); transition: all 1s var(--ease); } @media screen and (orientation: portrait) { .engineers .engineers-swiper-slide__image-wrapper { width: 100%; height: 45.5rem; } } .engineers .engineers-swiper-slide__image-wrapper img { width: 100%; height: 100%; object-fit: cover; } .engineers .engineers-swiper-slide__heading { position: absolute; bottom: 1.3rem; left: 1.3rem; width: calc(100% - 2.6rem); padding: 3rem 3.5rem; border-radius: 2px; background: #0000003b; backdrop-filter: blur(9.5px); -webkit-backdrop-filter: blur(9.5px); color: #fff; font-size: 3.2rem; line-height: normal; opacity: 0; transition: opacity 0.6s var(--ease) 0.2s; } .engineers .engineers-swiper-slide .CTA-btn { opacity: 0; transition: opacity 0.6s var(--ease) 0.2s; } @media screen and (orientation: portrait) { .engineers .engineers-swiper-slide__heading { bottom: 1rem; left: 1rem; width: calc(100% - 2rem); padding: 2rem 2.5rem; font-size: 2rem; } } .engineers .engineers-swiper-slide__text { color: #000; text-align: center; font-size: 2rem; line-height: normal; max-width: 62rem; width: fit-content; opacity: 0; transition: var(--transition); } @media screen and (orientation: portrait) { .engineers .engineers-swiper-slide__text { font-size: 1.4rem; max-width: 100%; } } .engineers .swiper-slide-active .engineers-swiper-slide__image-wrapper { width: 100%; } .engineers .swiper-slide-active .engineers-swiper-slide__heading, .engineers .swiper-slide-active .engineers-swiper-slide__text, .engineers .swiper-slide-active .engineers-swiper-slide__ul, .engineers .swiper-slide-active .CTA-btn { opacity: 1; } .engineers .CTA-btn { width: fit-content; display: block; margin: auto; } .engineers .CTA-btn__inner { padding: 1rem 2.5rem; } .engineers .CTA-btn .CTA-btn__inner .CTA-btn__icon { width: 1rem; height: 1rem; } .engineers .engineers__letters { position: absolute; width: 116.5rem; height: 27.8rem; left: 50%; top: 8rem; transform: translate(-50%); z-index: -1; } @media screen and (orientation: portrait) { .engineers .engineers__letters { width: 43rem; height: 10rem; top: 4rem; } } .clients { width: 100%; height: 100vh; display: flex; flex-direction: column; background: #eae5e5; justify-content: center; } .clients .clients-flex { display: flex; padding-inline: 14rem; align-items: center; gap: 10rem; margin-bottom: min(12rem, 12vh); } .clients-left { position: relative; display: flex; flex-direction: column; justify-content: center; flex-grow: 1; gap: min(5rem, 5vh); max-width: 55rem; } .clients .clients-left-swiper-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 54rem; flex-shrink: 0; overflow: hidden; padding-inline: 0.5rem; } .clients__heading { display: flex; gap: 1.3rem; align-items: center; margin-bottom: 3.4rem; color: #000; font-size: 2rem; line-height: 100%; text-transform: uppercase; } .clients__heading .clients__heading-icon { width: 1rem; height: 1rem; flex-shrink: 0; background-color: #000; transform: rotate(-43.264deg); } .clients .clients-left-swiper-wrapper { display: flex; flex-shrink: 0; transition: var(--swiper-transition) !important; } .clients .clients-left-swiper-slide { display: flex; flex-direction: column; width: 54rem; } .clients-left-swiper-slide__heading { color: #000; font-size: min(5rem, 5vh); line-height: 105%; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1.7rem; } .clients-left-swiper-slide__text { font-size: min(2rem, 2vh); line-height: normal; color: #000; margin-bottom: min(3.4rem, 3.4vh); } .clients-left-swiper-slide__text span { color: #000; } .clients .clients-left-swiper-slide .CTA-btn { margin-left: 1rem; margin-bottom: 1rem; } .clients-left-swiper-navigation { display: flex; align-items: center; width: fit-content; gap: 3rem; height: 5rem; margin-left: 1rem; } .clients-left-swiper-navigation .clients-left-swiper-button { width: 4.4rem; height: 4.4rem; transform: rotate(-45deg); flex-shrink: 0; border: 1px solid #000; display: flex; justify-content: center; background: #000; align-items: center; transition: var(--transition); cursor: pointer; } .clients-left-swiper-navigation .clients-left-swiper-button svg { width: 1.5rem; height: 1.5rem; } .clients-left-swiper-navigation .clients-left-swiper-button-prev:hover, .clients-left-swiper-navigation .clients-left-swiper-button-next:hover { background-color: #000; } .clients .clients-right { display: flex; flex-shrink: 0; max-width: 98.6rem; height: min(55.5rem, 55.5vh); flex-grow: 1; overflow: hidden; position: relative; } .clients-right-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; transition: opacity 0.8s ease-out; } .clients[data-swiper-active-slide="1"] .clients-right-img:nth-of-type(1), .clients[data-swiper-active-slide="2"] .clients-right-img:nth-of-type(2), .clients[data-swiper-active-slide="3"] .clients-right-img:nth-of-type(3), .clients[data-swiper-active-slide="4"] .clients-right-img:nth-of-type(4), .clients[data-swiper-active-slide="5"] .clients-right-img:nth-of-type(5), .clients[data-swiper-active-slide="6"] .clients-right-img:nth-of-type(6), .clients[data-swiper-active-slide="7"] .clients-right-img:nth-of-type(7), .clients[data-swiper-active-slide="8"] .clients-right-img:nth-of-type(8), .clients[data-swiper-active-slide="9"] .clients-right-img:nth-of-type(9), .clients[data-swiper-active-slide="10"] .clients-right-img:nth-of-type(10) { opacity: 1; } .clients-partners .clients-partners-swiper-container { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black, transparent); mask-image: linear-gradient(to right, transparent, black, transparent); } .clients-partners .clients-partners-swiper-wrapper { display: flex; flex-wrap: nowrap; height: 13.8rem; width: fit-content; transition: var(--swiper-transition) !important; } .clients-partners .clients-partners-swiper-slide { flex-shrink: 0; width: 17rem; transition: opacity 0.3s ease-out; } .clients-partners .clients-partners-swiper-slide:not(.swiper-slide-active) { opacity: 0.3; } .clients-partners .clients-partners-swiper-slide:not(.swiper-slide-active) .clients-partners__img { transform: scale(0.8); } .clients-partners .clients-partners__img { object-fit: contain; transition: transform 0.3s var(--ease); } @media screen and (orientation: portrait) { .clients { height: fit-content; padding-block: 6rem; } .clients .clients-flex { flex-direction: column-reverse; gap: 4.8rem; padding-inline: 1.5rem; margin-bottom: 6rem; } .clients-left { align-items: flex-start; justify-content: flex-start; flex-grow: 0; width: 100%; height: fit-content; padding-inline: 0; gap: 3rem; } .clients .clients-left-swiper-container { align-items: flex-start; justify-content: flex-start; width: 100%; padding-inline: 0.5rem; } .clients__heading { gap: 0.8rem; font-size: 1.4rem; line-height: 90%; margin: 0.5rem 0 1.4rem 0.5rem; } .clients .clients-left-swiper-slide { width: auto; } .clients-left-swiper-slide__heading { font-size: 2.5rem; line-height: 105%; letter-spacing: 0.5px; margin-bottom: 1.5rem; width: 28.7rem; } .clients-left-swiper-slide__text { font-size: 1.4rem; margin-bottom: 2.9rem; width: 28.7rem; } .clients .clients-left-swiper-slide .CTA-btn { margin-left: 1rem; margin-bottom: 0.5rem; } .clients .CTA-btn { margin-left: 0.5rem; margin-bottom: 0.7rem; } .clients .CTA-btn .CTA-btn__inner { padding: 1rem 2.5rem; } .clients-left-swiper-navigation { transform: scale(0.8); } .clients .clients-right { max-width: 34.5rem; width: 100%; height: 26.5rem; } .clients-partners .clients-partners-swiper-wrapper { height: 6.5rem; } .clients-partners .clients-partners-swiper-slide { width: 14.5rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .clients-left-swiper-slide__heading { font-size: 3.5rem; width: 40.7rem; } .clients-left-swiper-slide__text { font-size: 1.8rem; width: 45.7rem; } } .reviews { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 5.5rem; background: #000; padding: 17.5rem 0 4rem; } @media screen and (orientation: portrait) { .reviews { gap: 2rem; background: transparent; padding: 6rem 0 12rem; } } .reviews .reviews__heading { color: #fff; text-align: center; font-size: 10rem; line-height: normal; overflow: hidden; } @media screen and (orientation: portrait) { .reviews .reviews__heading { font-size: 3.5rem; width: 29rem; margin-inline: auto; } } .reviews .reviews__heading span { opacity: 0; visibility: hidden; color: #fff; display: inline-block; } .reviews .reviews__gradient { position: absolute; z-index: 1; pointer-events: none; -webkit-user-select: none; user-select: none; top: 0; right: 0; bottom: 0; left: 0; } .reviews-drag { position: relative; height: fit-content; width: 100%; } .reviews .reviews-swiper-container { position: relative; width: 100%; height: 63.8rem; isolation: isolate; display: flex; align-items: center; overflow: hidden; } @media screen and (orientation: portrait) { .reviews .reviews-swiper-container { height: fit-content; padding-block: 3rem; } } .reviews .reviews-swiper-wrapper { display: flex; } .reviews .reviews-swiper-slide { flex-shrink: 0; width: 55.9rem; min-height: 40.7rem; background: #fdfdfd; display: flex; flex-direction: column; padding: 3.5rem 2.2rem 2.5rem 3.5rem; } @media screen and (orientation: portrait) { .reviews .reviews-swiper-slide { flex-shrink: 0; width: 32.6rem; min-height: 23.8rem; padding: 2rem 1rem 1.5rem 2rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .reviews .reviews-swiper-slide { width: 38rem; } } .reviews-swiper-slide__quote { width: 3.2rem; height: 2.5rem; flex-shrink: 0; margin-bottom: 3.2rem; } .reviews-swiper-slide__quote svg { width: 100%; height: 100%; overflow: visible; } @media screen and (orientation: portrait) { .reviews-swiper-slide__quote { width: 1.8rem; height: 1.4rem; flex-shrink: 0; margin-bottom: 1.8rem; } } .reviews-swiper-slide__text { color: #5b5b5b; font-size: 2rem; line-height: 140%; margin-bottom: 9.5rem; margin-bottom: auto; } @media screen and (orientation: portrait) { .reviews-swiper-slide__text { font-size: 1.2rem; line-height: 136%; margin-bottom: 5.5rem; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .reviews-swiper-slide__text { font-size: 1.5rem; margin-bottom: 5.5rem; } } .reviews-swiper-slide__user { display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem; margin-bottom: 3rem; padding-right: 1.2rem; margin-top: 2rem; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user { gap: 0.85rem; margin-bottom: 1.5rem; padding-right: 0.7rem; margin-top: auto; } } .reviews-swiper-slide__user-avatar { width: 5rem; height: 5rem; border-radius: 100%; flex-shrink: 0; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user-avatar { width: 3rem; height: 3rem; background-color: #009ca8; } } .reviews-swiper-slide__user-info { display: grid; } .reviews-swiper-slide__user-info-name { color: #171717; font-size: 2rem; line-height: 140%; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user-info-name { font-size: 1.2rem; line-height: 136%; } } .reviews-swiper-slide__user-info-job { color: #5b5b5b; font-size: 1.6rem; line-height: 175%; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user-info-job { font-size: 1rem; line-height: 163%; } } .reviews-swiper-slide__user-rating { display: flex; flex-direction: row-reverse; align-items: center; gap: 0.3rem; width: 10rem; height: 2rem; margin-left: auto; pointer-events: none; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user-rating { gap: 0.3rem; width: 5.5rem; height: 1rem; } } .reviews-swiper-slide__user-rating input { display: none; } .reviews-swiper-slide__user-rating label { color: #fff; font-size: 2rem; text-shadow: 0 0 1px #009ca8, 0 0 1px #009ca8, 0 0 1px #009ca8, 0 0 1px #009ca8; -webkit-text-shadow: 0 0 1px #009ca8, 0 0 1px #009ca8, 0 0 1px #009ca8, 0 0 1px #009ca8; } @media screen and (orientation: portrait) { .reviews-swiper-slide__user-rating label { font-size: 1.3rem; } } .reviews-swiper-slide__user-rating input:checked ~ label, .reviews-swiper-slide__user-rating label:hover, .reviews-swiper-slide__user-rating label:hover ~ label { color: #009ca8; } .reviews-swiper-slide__user-rating input:checked + label { color: #009ca8; } .reviews-swiper-slide .reviews-swiper-slide__line { background-color: #17171733; height: 3px; width: 100%; } @media screen and (orientation: portrait) { .reviews-swiper-slide .reviews-swiper-slide__line { height: 1.8px; } } .reviews .reviews-swiper-container .reviews__background-image { position: absolute; top: 0; left: 50%; transform: translate(-50%); width: 119.1rem; height: 63.8rem; z-index: -1; } @media screen and (orientation: portrait) { .reviews .reviews-swiper-container .reviews__background-image { width: 100%; height: 100%; top: 50%; transform: translate(-50%, -50%); } } .reviews .reviews-swiper-pagination { height: 14.136px; flex-shrink: 0; display: flex; justify-content: center; align-items: center; gap: 40px; } .reviews-swiper-pagination-bullet { width: 10px; height: 10px; border: 1px solid #fdfdfd; transform: rotate(-43.264deg); flex-shrink: 0; aspect-ratio: 1/1; transition: var(--transition); cursor: pointer; position: relative; } .reviews-swiper-pagination-bullet:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8rem; height: 8rem; background-color: #fff; z-index: -1; border-radius: 100%; transition: var(--transition); opacity: 0; pointer-events: none; background: #009ca866; filter: blur(40px); -webkit-filter: blur(40px); } .reviews-swiper-pagination-bullet:hover:after { opacity: 1; } @media screen and (orientation: portrait) { .reviews-swiper-pagination-bullet:after { display: none; } .reviews-swiper-pagination-bullet { width: 8px; height: 8px; } } .reviews-swiper-pagination-bullet-active { border: none; background-color: #009ca8; } .location { position: relative; padding: 0; isolation: isolate; background: #fff; } @media screen and (orientation: portrait) { .location { padding: 0rem 1.5rem 6rem; } } .location__map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; -webkit-mask-image: linear-gradient(transparent, black 50%, transparent); mask-image: linear-gradient(transparent, black 50%, transparent); } @media screen and (orientation: portrait) { .location__map { -webkit-mask-image: linear-gradient(transparent, black 90%, transparent); mask-image: linear-gradient(transparent, black 90%, transparent); } } .location .location-card { padding: min(2.5rem, 2.5vh) 2.5rem min(6rem, 6vh); background: #faf5f5; width: fit-content; } @media screen and (orientation: portrait) { .location .location-card { padding: 1.5rem 1.5rem 3.8rem; width: 100%; } } @media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) { .location .location-card { padding: 1.5rem 1.5rem 3.8rem; width: 100%; max-width: 40rem; } } .location-card__image { height: min(29.5rem, 29.5vh); width: 48.2rem; margin-bottom: min(4.3rem, 4.3vh); } @media screen and (orientation: portrait) { .location-card__image { height: 19rem; width: 100%; margin-bottom: 3rem; } } .location .location-card .location-card__content { padding-inline: 2rem; } @media screen and (orientation: portrait) { .location .location-card .location-card__content { padding-inline: 1.2rem; } } .location-card__content-title { font-size: 20px; line-height: normal; margin-bottom: min(2rem, 2vh); font-family: 'Futura PT', sans-serif; font-weight: normal; text-transform: uppercase; } @media screen and (orientation: portrait) { .location-card__content-title { font-size: 1.2rem; margin-bottom: 1.2rem; } } .location-card__content-name { font-size: 3.5vh; line-height: normal; margin-bottom: min(3.5rem, 3.5vh); font-family: 'Futura PT', sans-serif; font-weight: normal; } @media screen and (orientation: portrait) { .location-card__content-name { font-size: 2.5rem; margin-bottom: 2.5rem; } } .location-card__content-address { display: flex; align-items: center; gap: 2rem; margin-bottom: min(5rem, 5vh); } @media screen and (orientation: portrait) { .location-card__content-address { gap: 1.3rem; margin-bottom: 3rem; } } .location-card__address-icon { width: 2rem; height: 2.3rem; flex-shrink: 0; } .location-card__address-icon svg { width: 100%; height: 100%; overflow: visible; } @media screen and (orientation: portrait) { .location-card__address-icon { width: 1.2rem; height: 1.6rem; } } .location-card__address-text { color: #5b5b5b; font-size: min(1.6rem, 1.6vh); line-height: normal; max-width: 29rem; } @media screen and (orientation: portrait) { .location-card__address-text { font-size: 1.2rem; max-width: 19rem; } } .location-card_content-line { width: 100%; height: 1px; background-color: #009ca8; margin-bottom: min(5rem, 5vh); } @media screen and (orientation: portrait) { .location-card_content-line { margin-bottom: 3.5rem; } } .location-card__content-office { display: flex; align-items: flex-start; gap: 2rem; margin-bottom: min(4rem, 4vh); } @media screen and (orientation: portrait) { .location-card__content-office { gap: 1.5rem; margin-bottom: 3rem; } } .location-card__office-icon { width: 1.9rem; height: 2.5rem; flex-shrink: 0; } .location-card__office-icon svg { width: 100%; height: 100%; overflow: visible; } @media screen and (orientation: portrait) { .location-card__office-icon { width: 1.1rem; height: 1.4rem; } } .location-card__block { display: grid; gap: 1.5rem; } @media screen and (orientation: portrait) { .location-card__block { gap: 1.3rem; } } .location-card__office-text { color: #5b5b5b; font-size: min(1.6rem, 1.6vh); line-height: normal; max-width: 37rem; } @media screen and (orientation: portrait) { .location-card__office-text { font-size: 1.2rem; max-width: 23.8rem; } } .location .CTA-btn { margin-left: auto; display: block; } .location .CTA-btn .CTA-btn__inner .CTA-btn__text { color: #5b5b5b; } .location .CTA-btn__border:before { border: 1px solid rgba(0, 156, 168, 0.1); } .location .CTA-btn .CTA-btn__blur { height: 2rem; filter: blur(20px); -webkit-filter: blur(20px); } .location__pin { position: absolute; top: min(44.5rem, 44.5vh); right: 78rem; width: 7rem; height: 7.8rem; overflow: visible; } @media screen and (orientation: portrait) { .location__pin { display: none; } } .mobile-lines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; display: none; } @media screen and (orientation: portrait) { .mobile-lines { display: block; } } @media screen and (orientation: portrait) { .footer .footer__lines { display: none; } } @media screen and (orientation: portrait) { .hero__screen-2 .hero__content { padding-inline: 0; padding-block: 0; } .hero__screen-2 .hero__flex-left{ width: 100%; } .hero__screen-2 .hero__content { display: flex; width: 95%; height: 100%; padding-inline: 0; padding-block: 0; overflow: hidden; margin: auto; } .hero__screen-2 .hero__flex { display: block; } .project-highlights .counter-grid { display: flex; justify-content: space-between; flex-wrap: wrap; } .hero__content .project-highlights .counter-box { padding: 9px 15px; width: 48%; } .av-num { font-size: 25px; } }