/*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html, body { color: #03001E; font-family: "Afacad", sans-serif; background-color: #fbfafa; overflow-x: hidden; } .container { margin: 0 auto; max-width: 1300px; padding: 0 10px; } .button { background-color: #fbfafa; color: #03001E; border-radius: 25px; max-width: 164px; height: 50px; padding: 13px 35px; display: inline-flex; align-items: center; text-transform: uppercase; font-size: 18px; line-height: 1.3333; text-wrap: nowrap; cursor: pointer; } .none { display: none !important; } .pink { color: #FF1B6B; } .blue { color: #45CAFF; } a:hover, button:hover { opacity: 0.6; } .select-menu-wrapper { border-radius: 10px; background-color: white; } .select-menu-wrapper .select-menu { position: relative; width: 100%; max-width: 406px; border-radius: 10px; } .select-menu-wrapper .select-menu__selected { display: flex; justify-content: space-between; align-items: center; cursor: pointer; border: 1px solid #7d7c85; width: 100%; height: 58px; padding: 19px 23px 20px 22px; border-radius: 10px; } .select-menu-wrapper .select-menu .select-menu__value { font-size: 14px; color: #292828; } .select-menu-wrapper .select-menu__options { position: absolute; top: 100%; left: 0; width: 100%; background-color: white; border-radius: 10px; z-index: 1; overflow-y: auto; display: none; } .select-menu-wrapper .select-menu__option { padding: 14px 10px 12px 21px; font-size: 14px; color: #292828; cursor: pointer; } .select-menu-wrapper .select-menu__option:hover, .select-menu-wrapper .select-menu__option.active { font-weight: 700; background-color: rgba(34, 33, 33, 0.19); font-weight: bold; } .select-menu-wrapper.open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .select-menu-wrapper.open .select-menu__icon { transform: rotate(180deg); } .select-menu-wrapper.open .select-menu__options { padding-top: 4px; border-top-left-radius: 0px; border-top-right-radius: 0px; display: block; } .careers__form, .contact-us__form { display: none; } .careers__form.active, .contact-us__form.active { display: block; } .bold { font-weight: 700; } .underline { text-decoration: underline; } .section-title { font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); line-height: 1.2; } .filter-white { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(251deg) brightness(106%) contrast(102%); } .filter-light-gray { filter: brightness(0) saturate(100%) invert(28%) sepia(5%) saturate(2603%) hue-rotate(206deg) brightness(90%) contrast(81%); } .image-zoom { overflow: hidden; position: relative; } .image-zoom img { transition: transform 0.3s ease-in-out; transform-origin: center center; } .image-zoom:hover img { transform: scale(1.4); } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOutOpacity { 0% { opacity: 1; } 100% { opacity: 0; } } .js-marquee { display: flex; gap: 100px; } .modal { display: none; align-items: center; position: fixed; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(251, 250, 250, 0.7); } /* Modal Content / Box */ .modal-content { display: flex; flex-direction: column; gap: 10px; text-align: center; border-radius: 25px; background-color: #fbfafa; margin: 0 auto; padding: 40px; border: 1px solid black; max-width: 500px; justify-content: space-between; } .modal-content a { text-decoration: none; font-weight: 700; } .modal-content .modal-title { font-weight: 700; font-size: 24px; } .modal-content .buttons { margin-top: 20px; display: flex; justify-content: center; gap: 20px; } .modal-content .buttons button { padding: 10px; border: 1px solid black; border-radius: 10px; cursor: pointer; text-wrap: nowrap; } .header { padding: 23px 0; } .header__nav-desktop { display: flex; justify-content: space-between; align-items: center; } .nav__logo a { font-weight: 700; display: block; } .nav__logo img { display: block; max-height: 46.6px; } .nav__links { display: flex; align-items: center; gap: 42px; } .nav__link { text-decoration: none; font-size: 18px; font-weight: 700; line-height: 1.3333; } .nav__link.button { position: relative; z-index: 1; } .nav__link.button:hover { background-color: #45CAFF; opacity: 1; } .nav__link.button:hover:before { background-image: none; } .nav__link.button:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 25px; padding: 2px; background-image: linear-gradient(90deg, #FF1B6B, #BB77ED, #45CAFF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; z-index: -1; } .header__content { margin-top: 160px; text-align: left; } .header__title { font-size: 24px; margin-bottom: 13px; } .header__content h1 { max-width: 586px; font-size: 50px; font-weight: 700; margin-bottom: 40px; } .header__description { max-width: 586px; font-size: 14px; line-height: 24px; } .header__nav-mobile { display: none; justify-content: space-between; align-items: center; padding: 10px 20px; position: relative; } .nav__links-mobile { display: none; flex-direction: column; align-items: center; gap: 20px; position: fixed; top: 0; left: 0; width: 100%; background-color: #fbfafa; padding: 20px 0; z-index: 1; } .hamburger-menu { display: flex; flex-direction: column; justify-content: space-around; width: 2rem; height: 2rem; cursor: pointer; z-index: 10; } .hamburger-menu div { width: 2rem; height: 0.25rem; background: #03001E; border-radius: 10px; transition: all 0.3s linear; position: relative; transform-origin: 1px; } .hamburger-menu.active div:nth-child(1) { transform: rotate(45deg); } .hamburger-menu.active div:nth-child(2) { opacity: 0; } .hamburger-menu.active div:nth-child(3) { transform: rotate(-45deg); } .header__nav-mobile.active .nav__links-mobile { display: flex; } @media (max-width: 992px) { .header__content { margin-top: 72px; } .header__nav-desktop { display: none; } .header__nav-mobile { display: flex; } } .hero-section { position: relative; color: white; display: flex; } .hero-section .container { margin-top: 130px; width: 100%; } .hero-section:not(.cookies-page):not(.privacy-page):not(.terms-page) { background-image: url("./../assets/images/hero-section.png"); background-size: cover; aspect-ratio: 1440/653; } .hero-section .hero-content .hero-title { font-size: clamp(1rem, 0.375rem + 1.667vw, 1.875rem); line-height: 1.3333; font-weight: 700; } .hero-section .hero-content .hero-subtitle { margin-top: 9px; font-size: clamp(2rem, 0.75rem + 3.333vw, 3.75rem); line-height: 1.3333; } .hero-section .hero-content .hero-gradient-text { display: inline-block; margin-top: 12px; font-size: clamp(1.313rem, 0.464rem + 2.262vw, 2.5rem); background-image: linear-gradient(to right, #45CAFF 20%, #BB77ED 30%, #FF1B6B 90%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; color: transparent; line-height: 1.3333; } .hero-section .hero-content .hero-gradient-text:hover { background-position: 0% 0; } .hero-section .hero-content .hero-description { font-size: clamp(0.875rem, 0.786rem + 0.238vw, 1rem); line-height: 1.3125; opacity: 0.7; margin-top: 31px; max-width: 39.2361vw; } @media (max-width: 992px) { .hero-section { align-items: center; } .hero-section .container { margin-top: 0; padding: 10px; } } @media (max-width: 430px) { .hero-description { max-width: 50vw !important; } } .vision-mission-section { padding: 112px 0 169px 0; position: relative; z-index: 0; } .vision-mission-section .left-side-image, .vision-mission-section .right-side-image { position: absolute; z-index: -1; } .vision-mission-section .left-side-image { top: 101px; left: 0; transform: translate(-50%, -20%); } .vision-mission-section .right-side-image { top: 292px; right: 0; transform: translate(50%, -20%); } .vision-mission-section .middle { display: flex; flex-direction: column; align-items: center; gap: 56px; text-align: center; font-size: 30px; line-height: 1.3333; } .vision-mission-section .middle .row { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-weight: 700; } .vision-mission-section .middle .row .icon { margin: 0 35px; cursor: pointer; transition: all 0.3s ease; } .vision-mission-section .middle .row .icon img { display: block; } .vision-mission-section .middle .row .icon.active { opacity: 0.15; cursor: default; } .vision-mission-section .middle .row .text { cursor: pointer; transition: color 0.3s ease; } .vision-mission-section .middle .row .text:hover:not(.active) { text-decoration: underline; } .vision-mission-section .middle .row .text.active { color: #FF1B6B; cursor: text; } .vision-mission-section .middle .row .text.mission.active { color: #45CAFF; cursor: text; } .vision-mission-section .middle .row .divider { margin: 0 6px; } .vision-mission-section .middle .description { max-width: 922px; line-height: 1.2; font-size: clamp(1.875rem, 0.536rem + 3.571vw, 3.75rem); } .vision-mission-section .middle .description.vision { max-width: 782px; } .vision-mission-section .middle .description p { display: none; } .vision-mission-section .middle .description p.active { display: block; animation: fadeInOpacity 0.6s ease forwards; } .vision-mission-section .middle .description p.inactive { animation: fadeOutOpacity 0.6s ease forwards; } @media (max-width: 430px) { .vision-mission-section .middle .row .icon { margin: 0 10px; } } .comprehensive-services { width: 100%; position: relative; overflow: hidden; color: #fff; height: 653px; } .comprehensive-services .container { height: 100%; } .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease, visibility 0.5s; visibility: hidden; } .slide.active { opacity: 1; visibility: visible; } .slide-info-wrapper { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; flex-direction: column; padding: 45px 0 68px 0; height: 100%; justify-content: space-between; } .slide-info-block { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .slide-number { color: rgba(255, 255, 255, 0.35); font-size: 18px; font-weight: bold; } .slide-number .current-number { color: rgb(255, 255, 255); } .slide-title { font-size: 30px; font-weight: 700; line-height: 1.333; } .slide-content-block { display: flex; flex-direction: column; align-content: flex-start; } .slide-subtitle { max-width: 544px; font-size: clamp(2.625rem, 1.821rem + 2.143vw, 3.75rem); line-height: 1.2; } .slide-description { font-size: 16px; line-height: 1.3125; margin-top: 20px; opacity: 0.7; max-width: 493px; max-height: 170px; overflow-y: auto; /* Firefox */ scrollbar-width: thin; scrollbar-color: #8c8c8c transparent; /* Chrome, Edge, and Safari */ } .slide-description::-webkit-scrollbar { width: 6px; } .slide-description::-webkit-scrollbar-track { background-color: transparent; } .slide-description::-webkit-scrollbar-thumb { background-color: #8c8c8c; border-radius: 6px; } .slide-description::-webkit-scrollbar-thumb:hover { background-color: #6c6c6c; } .slide-controls-block { display: flex; justify-content: center; align-items: center; gap: 14px; } .slide-controls-block button { background-color: transparent; border: none; color: #fff; font-size: 24px; cursor: pointer; } .slide-controls-block button img:first-child { display: block; } .slide-controls-block button:hover img:first-child { display: none; } .slide-controls-block button img:last-child { display: none; } .slide-controls-block button:hover img:last-child { display: block; } .slide-controls-block button img { display: block; } .slide-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; aspect-ratio: 1440/653; background-position: center; z-index: 0; transition: opacity 0.6s ease-in-out; pointer-events: none; } @media (max-width: 1024px) { .comprehensive-services .container { height: 100%; } .slide-info-wrapper { padding: 30px; } .slide-background { object-fit: cover; } } .sectors-of-expertise { width: 100%; padding: 137px 0 174px 0; position: relative; } .sectors-of-expertise .sectors-img-left { position: absolute; top: 521px; left: 55px; transform: translate(-30%, -30%); z-index: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } .sectors-of-expertise .sectors-img-right { position: absolute; top: 73px; right: 129px; transform: translate(30%, -30%); z-index: 0; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; } .card-slider { margin-top: 58.5px; display: flex; justify-content: flex-start; width: 100%; overflow-x: hidden; } .card-container { display: flex; gap: 100px; height: 178px; } .card { display: flex; flex-direction: column; align-items: flex-start; } .card-number { font-size: 24px; font-weight: bold; background: -webkit-linear-gradient(343deg, #FF1B6B, #BB77ED, #45CAFF 90%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .card-title { font-size: 24px; text-wrap: nowrap; } .card-separator { width: 110px; height: 2px; background: linear-gradient(to right, #FF1B6B, #BB77ED, #45CAFF); margin-top: 18px; } .card-description { margin-top: 22px; font-size: 16px; opacity: 0.7; line-height: 1.5; width: 313px; } .marquee { --gap: 100px; position: relative; display: flex; overflow: hidden; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; gap: var(--gap); min-width: 100%; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } .marquee__content { animation: scroll 25s linear infinite; } .marquee--hover-pause:hover .marquee__content { animation-play-state: paused; } .marquee--fit-content { max-width: fit-content; } .marquee--pos-absolute .marquee__content:last-child { position: absolute; top: 0; left: 0; } .marquee--pos-absolute .marquee__content:last-child { animation-name: scroll-abs; } @keyframes scroll-abs { from { transform: translateX(calc(100% + var(--gap))); } to { transform: translateX(0); } } @media (max-width: 992px) { .sectors-of-expertise { padding-bottom: 72px; padding-top: 72px; } .sectors-img-left { display: none; } .sectors-img-right { display: none; } } .commitment-to-sustainability .container .commitment-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .commitment-to-sustainability .container .commitment-wrapper .left { flex: 0 1 718px; } .commitment-to-sustainability .container .commitment-wrapper .left .description { margin-top: 32px; opacity: 0.7; font-size: 16px; line-height: 1.5; } @media (max-width: 600px) { .commitment-to-sustainability .container .commitment-wrapper .left { flex-basis: 70%; } } @media (max-width: 430px) { .commitment-to-sustainability .container .commitment-wrapper { flex-direction: column; } .commitment-to-sustainability .container .commitment-wrapper img { max-width: 300px; } } .trusted-partnerships { margin-top: 90px; } .trusted-partnerships .container .trusted-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .trusted-partnerships .container .trusted-wrapper .right { flex: 0 1 718px; } .trusted-partnerships .container .trusted-wrapper .right .description { margin-top: 32px; opacity: 0.7; font-size: 16px; line-height: 1.5; } @media (max-width: 600px) { .trusted-partnerships .container .trusted-wrapper .right { flex-basis: 70%; } } @media (max-width: 430px) { .trusted-partnerships .container .trusted-wrapper { flex-direction: column; } .trusted-partnerships .container .trusted-wrapper img { max-width: 300px; } .trusted-partnerships .container .trusted-wrapper .left { order: 2; } } .lets-connect { margin-top: 90px; padding-top: 90px; padding-bottom: 90px; background: linear-gradient(286deg, #bb77ed, #c68eef, #85edfd); display: flex; justify-content: center; align-items: center; color: #03001E; } .lets-connect-content { text-align: center; } .lets-connect-description { margin-top: 20px; font-size: 16px; line-height: 1.5; opacity: 0.7; max-width: 458px; } .lets-connect-button { margin: 38px auto 0; background-color: transparent; border: 2px solid #03001e; font-weight: 700; transition: background-color 0.3s, color 0.3s; display: flex; justify-content: center; align-items: center; } .lets-connect-button:hover { opacity: 1; background-color: #fff; border: none; } .contact-us { padding: 30px 0 80px 0; color: #4d4b60; } .back-to-main { display: flex; align-items: center; color: #4d4b60; text-decoration: none; font-size: 16px; margin-bottom: 46px; } .back-to-main img { height: 12px; width: 12px; margin-right: 6px; } .contact-us-title { font-size: 60px; line-height: 1.2; margin-top: 46px; color: #03001E; } .contact-us-content { display: flex; justify-content: space-between; } .contact-form { flex: 0 1 624px; padding-top: 69px; } .separator { width: 1px; background-color: #4d4b60; opacity: 0.25; margin: 0 50px; } .form-row { display: flex; gap: 16px; margin-bottom: 17px; } .form-field { flex: 1; } .form-field label { display: block; font-size: 14px; color: #4d4b60; margin-bottom: 9px; } .form-field input, .form-field textarea { width: 100%; padding: 12px 16px; background-color: #f3f3f3; border: none; border-radius: 2px; border-bottom: 2px solid #4d4b60; font-size: 16px; } .form-field textarea { height: 90px; resize: vertical; word-wrap: break-word; } .consent { align-items: flex-start; gap: 11px; margin-top: 7px; } .consent-checkbox { position: relative; width: 28px; height: 28px; background-color: #f1f3f8; border-radius: 8px; } .consent-checkbox input { appearance: none; width: 100%; height: 100%; cursor: pointer; } .consent-checkbox .checkbox-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; display: none; pointer-events: none; cursor: pointer; } .consent-checkbox input:checked + .checkbox-mark { display: block; } .consent-description { font-size: 14px; line-height: 28px; } .submit-button { margin-top: 22px; transition: background-color 0.3s; position: relative; z-index: 1; font-weight: 700; width: 164px; display: flex; align-items: center; justify-content: center; } .submit-button:hover { background-color: #45CAFF; opacity: 1; } .submit-button:hover:hover:before { background-image: none; } .submit-button.button:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 25px; padding: 2px; background-image: linear-gradient(90deg, #FF1B6B, #BB77ED, #45CAFF); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; z-index: -1; } .contact-info { flex: 1; padding-top: 69px; } .contact-info h3 { font-size: 24px; line-height: 1.3333; margin-bottom: 26px; color: #03001E; } .contact-info h3.email { margin-top: 46px; margin-bottom: 20px; } .contact-info p { font-size: 14px; line-height: 1.7143; } .contact-email { color: #45CAFF; text-decoration: none; } @media (max-width: 992px) { .contact-us-content { flex-direction: column; } .contact-us-content .contact-form { flex: auto; margin-bottom: 50px; } .contact-us-content .separator { margin: 0 auto; width: 100%; height: 1px; } .contact-us-content .contact-info { padding-top: 50px; } } @media (max-width: 430px) { .form-row { flex-direction: column; } } .footer { background-color: #03001E; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; } .footer .footer__links { margin: 40px 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 21px; align-items: center; } .footer .footer__links .footer__link { padding: 10.5px; font-size: 18px; line-height: 1.3333; } .footer .footer__legal { border-top: 2px solid #4d4b60; padding: 24px 32px; margin: 0 32px; max-width: 856px; } .footer .footer__legal .footer__legal-info { flex-wrap: wrap; display: flex; align-items: center; justify-content: center; text-align: center; gap: 32px; font-size: 16px; line-height: 21px; opacity: 0.7; } @media (max-width: 600px) { .footer { height: auto; } .footer .footer__links { flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 10px; } .footer .footer__legal { padding: 24px 16px; } } /*# sourceMappingURL=style.css.map */