@charset "UTF-8"; @font-face { font-family: "metrosansbook"; src: url("../assets/fonts/metro-sans/metrosans-book.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-book.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "metrosanslight"; src: url("../assets/fonts/metro-sans/metrosans-light.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-light.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "metrosansmedium"; src: url("../assets/fonts/metro-sans/metrosans-medium.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-medium.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "metrosansregular"; src: url("../assets/fonts/metro-sans/metrosans-regular.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-regular.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "metrosanssemibold"; src: url("../assets/fonts/metro-sans/metrosans-semibold.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-semibold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "metrosansbold"; src: url("../assets/fonts/metro-sans/metrosans-bold.woff2") format("woff2"), url("../assets/fonts/metro-sans/metrosans-bold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "poppinsblack"; src: url("../assets/fonts/poppins/poppins-black.woff2") format("woff2"), url("../assets/fonts/poppins/poppins-black.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "poppinsbold"; src: url("../assets/fonts/poppins/poppins-bold.woff2") format("woff2"), url("../assets/fonts/poppins/poppins-bold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "bwroundbold"; src: url("../assets/fonts/bw-round/bwround-bold.woff2") format("woff2"), url("../assets/fonts/bw-round/bwround-bold.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "bwroundregular"; src: url("../assets/fonts/bw-round/bwround-regular.woff2") format("woff2"), url("../assets/fonts/bw-round/bwround-regular.woff") format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: "opensans"; src: url("../assets/fonts/OpenSans/OpenSans-Regular.ttf"); } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } * { scroll-behavior: smooth; } ::selection { background: #e2ecf8; } html, body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "metrosansregular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; color: #1e394c; width: 100%; } a { color: #1e394c; } .pos-rel { position: relative; } .pos-abs { position: absolute; } .pos-sticky { position: sticky; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-right { display: flex; justify-content: flex-end; } .flex-left { display: flex; justify-content: flex-start; } .flex-bottom { display: flex; align-items: flex-end; } .flex-right-center { display: flex; justify-content: flex-end; align-items: center; } .flex-space-between { display: flex; justify-content: space-between; align-items: center; } .flex-space-between-top { display: flex; justify-content: space-between; align-items: flex-start; } .display-none { display: none; } .bottom-mar-20 { margin-bottom: 20px !important; } .bottom-mar-10 { margin-bottom: 10px !important; } .bottom-mar-neg-50 { margin-bottom: -50px; } .right-mar { margin-right: 20px; } .big-margin { margin: 0 200px 0; text-align: center; } .max-width-35 { max-width: 35%; } .width-200 { width: 200px; } .width-40 { width: 40px; } .padding-23 { padding: 23px; } .padding-20 { padding: 20px; } .font-bold { font-weight: bold; } .white-bg { background-color: white; border-radius: 4 px; } .grey-bg { background-color: #f1f1f1; } .h120 { height: 120px; } .white-font { color: white; } .mar-top-30 { margin-top: 30px; } .mar-top-45 { margin-top: 45px; } .mar-top-50 { margin-top: 50px; } .mar-top-10 { margin-top: 10px; } .radius-border { border: 1px solid lightgrey; border-radius: 5px; } .ul-padding-16 { padding-inline-start: 16px; } .pad-15 { padding: 15px; } .mar-top-5 { margin-top: 5em; } .mar-bottom-5 { margin-bottom: 5em; } .pad-top-50 { padding-top: 50px; } .pad-top-50-imp { padding-top: 50px !important; } .pad-top-95 { padding-top: 95px; } .pad-top-98 { padding-top: 98px; } .pad-top-95-imp { padding-top: 95px !important; } .pad-bottom-50 { padding-bottom: 50px; } .pad-top-bottom-50 { padding: 50px 0; } .mar-left-right-100 { margin: 0 100px; } /* .yellowbtn { background-color: #ffcb07 !important; color: black !important; font-size: 25px; text-transform: uppercase; font-family: "bwroundbold"; padding-right: 60px; } */ /* .yellowbtn:after { width: 32px; height: 33px; content: " "; background-image: url(/assets/img/double-chevron.png); position: absolute; right: 20px; top: 9px; background-size: 79%; background-repeat: no-repeat; } */ /* ************** */ .yellowbtn { background-color: #ffcb07 !important; color: black !important; font-size: 22px; text-transform: uppercase; font-family: "bwroundbold"; margin: 1em 0; } .yellowbtn::after { display: inline-block; padding-left: 8px; content: "\0279E"; -webkit-transition: transform 0.3s ease-out; -moz-transition: transform 0.3s ease-out; -ms-transition: transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; } .yellowbtn:hover { color: #0c5449; background-color: #f6f3ed; } .yellowbtn:hover::after { -webkit-transform: translateX(4px); -moz-transform: translateX(4px); -ms-transform: translateX(4px); -o-transform: translateX(4px); transform: translateX(4px); } /* ************** */ .center-block { display: block; margin: auto; } .mar-auto { margin: auto !important; } .min-height-275 { min-height: 275px; } .min-height-200 { min-height: 200px; } .min-height-332 { min-height: 332px; } .rotate-45 { transform: rotate3d(180 deg); } .header-padding { padding-top: 95px; } .capital { text-transform: uppercase; } .aspire-grey { color: #7f8080; } .aspire-font { color: #000; } .aspire-container { border: solid 5px #3fbeb4; padding: 20px; margin-bottom: 20px; } .width-550 { width: 550px !important; } .aspire-section { position: relative; background-color: #0089cc; fill: #0089cc; color: #fff; padding: 2rem; font-size: 3rem; text-align: center; font-weight: bold; } .width-100 { width: 100px; } .white-font { color: #fff; } .home-aspire-maintitle { font-size: 1.9em; color: #fff; font-family: "poppinsbold"; line-height: 1em; letter-spacing: 0; text-transform: uppercase; margin-bottom: 0; } .mar-0 { margin: 0; } .center-text { text-align: center; } header { left: 0; top: 0; height: 10rem; width: 100%; animation-duration: 0.5s; transition: 0.5s; background-color: #fff; border-bottom: 1px solid transparent; transition: border-bottom-color 0.3s; position: relative; z-index: 100; } header .logo-container:hover { opacity: 1; } header .nav-container { height: inherit; display: flex; align-items: center; justify-content: space-between; /* Menu */ /* Mobile navigation */ } header .nav-container .logo { color: #818486; font-family: "bwroundregular"; font-size: 2.2em; margin-top: 0.6em; } header .nav-container .logo .brand { font-family: "bwroundbold"; color: #0089cc; } header .nav-container nav { float: right; height: auto; } header .nav-container nav ul { list-style: none; margin: 0; padding: 0; height: inherit; display: flex; } header .nav-container nav ul li { height: inherit; position: relative; display: flex; align-items: center; } header .nav-container nav ul li a, header .nav-container nav ul li a:visited { display: block; color: #0089cc; text-decoration: none; display: block; padding: 0 1em; font-family: "metrosansmedium"; font-size: 1em; cursor: pointer; } header .nav-container nav ul li a:hover, header .nav-container nav ul li a:visited:hover { opacity: 1; } header .nav-container nav ul li a:not(:only-child):after, header .nav-container nav ul li a:visited:not(:only-child):after { padding-left: 4px; content: " ▾"; } header .nav-container nav ul li ul li { min-width: 190px; } header .nav-container nav ul li ul li a { padding: 15px; line-height: 20px; } header .nav-container .nav-dropdown { position: absolute; display: none; z-index: 1; box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); } header .nav-container .nav-mobile { display: none; position: absolute; top: 0; right: 0; background: #0089cc; height: 10rem; width: 10rem; } header .nav-container #nav-toggle { cursor: pointer; position: absolute; top: 50%; } header .nav-container #nav-toggle span, header .nav-container #nav-toggle span:before, header .nav-container #nav-toggle span:after { cursor: pointer; border-radius: 5px; height: 3px; width: 25px; position: absolute; display: block; content: ""; transition: all 300ms ease-in-out; } header .nav-container #nav-toggle span:before { top: -8px; } header .nav-container #nav-toggle span:after { bottom: -8px; } header .nav-container #nav-toggle.active span { background-color: transparent; } header .nav-container #nav-toggle.active span:before, header .nav-container #nav-toggle.active span:after { top: 0; } header .nav-container #nav-toggle.active span:before { transform: rotate(45deg); } header .nav-container #nav-toggle.active span:after { transform: rotate(-45deg); } header.is-fixed { position: fixed; z-index: 100; animation-name: stickySlideDown; padding: 0; transition: none; height: 7rem; border-bottom: 1px solid rgba(174, 176, 183, 0.45); } @keyframes stickySlideDown { 0% { opacity: 0.7; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .hori-menu { display: -webkit-box; } .logo-outer-container { background-color: #fff; position: fixed; width: 100%; z-index: 999; } .banner-container { min-height: 56rem; width: 100%; height: 100%; position: relative; background-image: url(../assets/img/bg.jpg); background-repeat: no-repeat; background-size: auto 100%; background-position-x: 100%; overflow: hidden; } .banner-container .backdrop-bg { position: absolute; right: 0; width: 100%; } .banner-container .backdrop-bg .arrow-1 { position: absolute; left: -10%; width: 50%; top: -6rem; } .banner-container .backdrop-bg .arrow-2 { position: absolute; right: 0; width: 50%; top: -6rem; } .banner-container .blob { position: absolute; top: 15px; right: 60px; width: 35vmax; z-index: 0; transform-origin: 50% 50%; } .banner-container .edge { position: absolute; bottom: -291px; right: 0; width: 100vmax; z-index: 0; } .banner-container .container { display: flex; flex-direction: row; padding-top: 3rem; padding-bottom: 3rem; position: relative; z-index: 1; } .banner-container .container .hero-text-container { flex: 1 0 62%; } .banner-container .container .hero-image-container { flex: 1 0 38%; padding: 1em; display: flex; justify-content: center; } .banner-container .banner-title { font-family: "poppinsbold"; font-size: 3.5em; line-height: 1.4em; letter-spacing: 0; } .banner-container .banner-subtitle { font-family: "metrosansmedium"; font-size: 2em; color: rgba(0, 0, 0, 0.75); margin-top: 2rem; letter-spacing: 0; line-height: normal; } .banner-container .banner-img { width: 75%; } .banner-container .link { display: block; margin-top: 6rem; transition: all 0.3s ease; color: #0089cc; } .banner-container .link:hover { opacity: 1; color: #243c59; /* text-decoration: underline; */ } @keyframes move { 0% { transform: scale(1) translate(10px, -30px); } 38% { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); } 40% { transform: scale(0.8, 1) translate(80vw, 30vh) rotate(160deg); } 78% { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); } 80% { transform: scale(1.3) translate(0vw, 50vh) rotate(-20deg); } 100% { transform: scale(1) translate(10px, -30px); } } /* 88888888888 */ /* .career-banner-container { min-height: 56rem; width: 100%; height: 100%; position: relative; background-image: url(../assets/img/remote.png); background-repeat: no-repeat; background-size: auto 86%; background-position-x: 812px; overflow: hidden; .backdrop-bg { position: absolute; right: 0; width: 100%; .arrow-1 { position: absolute; left: -10%; width: 50%; top: -6rem; } .arrow-2 { position: absolute; right: 0; width: 50%; top: -6rem; } } .blob { position: absolute; top: 15px; right: 60px; width: 35vmax; z-index: 0; transform-origin: 50% 50%; } .edge { position: absolute; bottom: -291px; right: 0; width: 100vmax; z-index: 0; } .container { display: flex; flex-direction: row; padding-top: 3rem; padding-bottom: 3rem; position: relative; z-index: 1; .career-text-container { flex: 1 0 62%; } .hero-image-container { flex: 1 0 38%; padding: 1em; display: flex; justify-content: center; } } .banner-title { font-family: $secondary-bold-font; font-size: 3.5em; line-height: 1.4em; letter-spacing: 0; } .career-banner-subtitle { font-family: $medium-font; font-size: 1em; color: $text-secondary; margin-top: 2rem; letter-spacing: 0; line-height: normal; width: 80%; } .banner-img { width: 75%; } .link { display: block; margin-top: 6rem; transition: all 0.3s ease; color: $azure; &:hover { opacity: 1; color: $navy; } } } */ .banner-title { font-family: "poppinsbold"; font-size: 3.5em; line-height: 1.4em; letter-spacing: 0; } /* ddddddddddddddddd */ .blank-banner-container { width: 100%; height: 100%; position: relative; } .blank-banner-container .backdrop-bg { position: absolute; right: 0; width: 100%; } .blank-banner-container .backdrop-bg .arrow-1 { position: absolute; left: -10%; width: 50%; top: -6rem; } .blank-banner-container .backdrop-bg .arrow-2 { position: absolute; right: 0; width: 50%; top: -6rem; } .blank-banner-container .blob { position: absolute; top: 15px; right: 60px; width: 35vmax; z-index: 0; transform-origin: 50% 50%; } .blank-banner-container .edge { position: absolute; bottom: -291px; right: 0; width: 100vmax; z-index: 0; } .blank-banner-container .blank-container { display: flex; flex-direction: row; padding-top: 3rem; padding-bottom: 3rem; position: relative; z-index: 1; margin: 0 100px; } .blank-banner-container .blank-container .blank-text-container { flex: 1 0 70%; } .blank-banner-container .blank-container .hero-image-container { flex: 1 0 38%; padding: 1em; display: flex; justify-content: center; } .blank-banner-container .blank-banner-title { font-family: "poppinsbold"; font-size: 3.5em; line-height: 1.4em; letter-spacing: 0; } .blank-banner-container .blank-banner-subtitle { font-family: "metrosansmedium"; font-size: 1em; color: rgba(0, 0, 0, 0.75); margin-top: 2rem; letter-spacing: 0; line-height: normal; width: 100%; } .blank-banner-container .blank-banner-img { width: 75%; } .blank-banner-container .link { display: block; margin-top: 6rem; transition: all 0.3s ease; color: #0089cc; } .blank-banner-container .link:hover { opacity: 1; color: #243c59; /* text-decoration: underline; */ } .banner-maintitle { font-family: "poppinsbold"; font-size: 3.5em; line-height: 1.4em; letter-spacing: 0; } .banner-mainsubtitle { font-family: "metrosansmedium"; font-size: 2em; color: rgba(0, 0, 0, 0.75); margin-top: 2rem; letter-spacing: 0; line-height: normal; margin-bottom: 20px; } .banner-img-block { visibility: visible; } .container-home { width: 100%; padding: 0 200px; } .intro-container { padding-top: 7rem; padding-bottom: 7rem; position: relative; background-color: #eff6ff; z-index: 0; } .intro-container h1 { font-family: "poppinsbold"; margin: 0 auto 1.5em auto; font-size: 2.5em; } .intro-container .link { display: block; margin-top: 6rem; transition: all 0.3s ease; color: #0089cc; } .intro-container .link:hover { opacity: 1; color: #243c59; /* text-decoration: underline; */ } .intro-container .card-main-container .feature-container { box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .intro-container .card-main-container .feature-container .title { font-family: "metrosanssemibold"; } .intro-container .card-main-container .feature-container p { font-size: 1.85rem; color: rgba(0, 0, 0, 0.75); font-family: "metrosansregular"; text-align: center; } .success-stories-container { padding-top: 7rem; padding-bottom: 7rem; position: relative; background-color: #fff; z-index: 0; /* background-image: url(../assets/img/pattern-fworks-light.svg); background-repeat: no-repeat; background-position-y: bottom; */ } .services-container { padding-top: 7rem; padding-bottom: 7rem; background-color: #f7f7f7; position: relative; background-image: url(../assets/img/hexabg.jpg); background-size: cover; } .services-container h1 { font-family: "poppinsbold"; margin: 0 auto 1.5em auto; font-size: 2.5em; } .services-container .service-title { font-family: "metrosansbold"; line-height: normal; font-size: 2em; } .services-container .service-subtitle { font-family: "metrosansmedium"; line-height: normal; font-size: 1.5em; } .services-container .service-text { font-family: "metrosansbook"; font-size: 1.2em; color: rgba(0, 0, 0, 0.75); line-height: 1.4; } .services-container .col-7 { padding: 2rem; } .services-container .col-5 { padding: 2rem; } .services-container .row { margin: 2rem; } footer { position: relative; background-color: #0089cc; fill: #0089cc; color: #fff; padding-top: 5rem; } footer .wave { position: absolute; top: -290px; } footer .foo-company-info-container { display: flex; flex-direction: column; } footer .foo-company-info-container .foo-logo-container .logo { color: #fff; font-family: "bwroundregular"; font-size: 2.2em; } footer .foo-company-info-container .foo-logo-container .logo .brand { font-family: "bwroundbold"; } footer .foo-company-info-container .foo-company-description { font-size: 1.1em; font-family: "metrosansregular"; } footer .foo-company-contact-container { display: flex; flex-direction: column; align-items: start; font-size: 1em; font-family: "metrosansregular"; color: #fff; text-decoration: none; } footer .foo-company-contact-container a[href^="tel"] { color: inherit; text-decoration: none; } footer .foo-links-container { display: flex; flex-direction: column; align-items: start; } footer .foo-links-container ul { list-style-type: none; } footer .foo-links-container ul li a { font-size: 1em; font-family: "metrosansregular"; color: #fff; } footer .foo-links { font-family: "metrosansmedium"; font-size: 1.125em; margin-top: 3.12rem; margin-bottom: 1.89rem; height: 20px; } footer .foo-copyright-container .foo-bottom-wrapper { margin-top: 7.5rem; position: relative; display: flex; align-items: center; justify-content: center; } footer .foo-copyright-container .foo-bottom-wrapper .logo { color: #fff; font-family: "bwroundregular"; } footer .foo-copyright-container .foo-bottom-wrapper .logo .brand { font-family: "bwroundbold"; } footer .foo-copyright-container .foo-bottom-wrapper p { margin-right: 1.1rem; } footer .foo-copyright-container .foo-bottom-wrapper p a { margin: 0 1.2rem 0 1.2rem; color: #fff; text-decoration: underline; } .diagram-container .diagram-img-container { margin-top: 6.7rem; margin-bottom: 3.8rem; } .diagram-container .diagram-img-container .monolithic-diagram { background-image: url(../assets/img/sprite-avt.png); background-position: -264px -15px; width: 72px; height: 72px; } .diagram-container .diagram-img-container .arrows-diagram { background-image: url(../assets/img/sprite-avt.png); background-position: -400px -29px; width: 54px; height: 44px; margin: 0 6.5rem; } .diagram-container .diagram-img-container .micro-services-diagram { background-image: url(../assets/img/sprite-avt.png); background-position: -512px -9px; width: 89px; height: 84px; } .diagram-container .diagram-img-container .diagram-subtitle { font-size: 0.75em; margin-top: 0.8rem; } .diagram-container .diagram-img-container .monolithic-text { position: relative; left: -7.6em; } .diagram-container .diagram-img-container .micro-ser-text { position: relative; right: -5.7em; } .diagram-container .diagram-heading { font-family: "metrosanssemibold"; font-size: 2em; text-align: center; margin-bottom: 2.688rem; } .diagram-container .diagram-text { font-family: "metrosanslight"; font-size: 1.125em; line-height: 1.667em; color: rgba(0, 0, 0, 0.75); text-align: center; max-width: 94%; margin: 0 auto; } .diagram-container .diagram-text span { font-family: "metrosansbold"; } .feature-description { margin: 3.125em 0; } .feature-description .feature-container { margin: 0 auto; max-width: 25rem !important; } .feature-description .feature-container label { font-size: 1.125em; position: relative; } .feature-description .feature-container label::before { content: ""; position: absolute; bottom: -0.9rem; left: 0; width: 100%; height: 5px; } .feature-description .feature-container .agile-bg::before { background-color: #e2ecf8; } .feature-description .feature-container .resilient-bg::before { background-color: #2c97a3; } .feature-description .feature-container .scalable-bg::before { background-color: #4e81c7; } .feature-description .feature-container .secure-bg::before { background-color: #e3452c; } .feature-description p { font-size: 1em; margin-top: 1.6rem; color: rgba(0, 0, 0, 0.75); font-family: "metrosanslight"; } .block-container { width: 100%; } .block-container .block-container-wrapper { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 49.4rem; padding: 0rem 6rem; } .block-container .block-container-wrapper .block-heading { font-family: "metrosansregular"; font-size: 1.875em; margin: 1.8rem 0; } .block-container .block-container-wrapper p { max-width: 54rem; font-size: 1.125em; font-family: "metrosanslight"; text-align: center; margin-bottom: 2em; } .block-container .block-container-wrapper a { background-color: transparent; padding: 0.8rem 1.6rem; font-size: 1em; border-radius: 5px; cursor: pointer; outline: none; } .block-container .cloud-grad-wrapper { background: linear-gradient(to left, #4290c7, #0260bb); /* For browsers that do not support gradients */ background: -webkit-linear-gradient(35deg, #4290c7, #0260bb); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(35deg, #4290c7, #0260bb); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(35deg, #4290c7, #0260bb); /* For Firefox 3.6 to 15 */ background: linear-gradient(35deg, #4290c7, #0260bb); /* Standard syntax */ } .block-container .cloud-grad-wrapper .cloud-logo-container { width: 85px; height: 85px; background-image: url(../assets/img/sprite-avt.png); background-position: 349px -5px; } .block-container .cloud-grad-wrapper h1 { color: #fff; } .block-container .cloud-grad-wrapper p { color: #fff; } .block-container .cloud-grad-wrapper a { border: 1px solid #fff; color: #fff; } .block-container .devops-grad-wrapper { background: linear-gradient(to left, #6cbbeb, #f7fafd); /* For browsers that do not support gradients */ background: -webkit-linear-gradient(35deg, #6cbbeb, #f7fafd); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(35deg, #6cbbeb, #f7fafd); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(35deg, #6cbbeb, #f7fafd); /* For Firefox 3.6 to 15 */ background: linear-gradient(35deg, #6cbbeb, #f7fafd); /* Standard syntax */ } .block-container .devops-grad-wrapper .devops-logo-container { width: 135px; height: 56px; background-image: url(../assets/img/sprite-avt.png); background-position: 217px -11px; } .block-container .devops-grad-wrapper h1 { color: #464547; } .block-container .devops-grad-wrapper p { color: #464547; } .block-container .devops-grad-wrapper a { color: #464547; border: 1px solid #464547; } .coming-soon-container { margin-top: 10rem; width: 100%; min-height: calc(100vh - 35rem); } .coming-soon-container .content-container { display: flex; justify-content: center; align-items: center; flex-direction: column; } .coming-soon-container .content-container img { width: 5em; height: auto; } .coming-soon-container .content-container .calm-text { margin: 1em 0 0.5em 0; font-family: "metrosanslight"; font-size: 1.8em; color: rgba(0, 0, 0, 0.75); } .coming-soon-container .content-container .content-text { font-family: "metrosanslight"; font-size: 1.2em; color: rgba(0, 0, 0, 0.75); } .coming-soon-container .content-container a { color: #0089cc; } .page-container { position: relative; padding: 0.5em 0 2.5em 0; } .page-container p { color: rgba(0, 0, 0, 0.75); font-family: "metrosansregular"; font-size: 1.125em; } .page-container h1 { font-family: "metrosanssemibold"; } .page-container h2 { font-family: "metrosanssemibold"; } .page-container h4 { font-family: "metrosanssemibold"; } .page-container .img-container { display: flex; justify-content: center; align-items: center; flex-direction: column; margin-bottom: 2em; } .page-container .img-container .caption { color: rgba(0, 0, 0, 0.75); font-size: 0.875em; font-family: "metrosansregular"; font-style: italic; } .page-container .link { display: block; transition: all 0.3s ease; color: #0089cc; } .page-container .link:hover { opacity: 1; color: #243c59; text-decoration: underline; } .honeycomb { background-image: url(../assets/img/honeycomb.svg); position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; } .modern-app-bg { background-image: url(../assets/img/pattern-fworks-light.svg); position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; } .product-strategy-bg { background-image: url(../assets/img/product-strategy9.jpg); height: auto; background-repeat: no-repeat; height: 200px; display: flex; align-items: center; justify-content: center; background-position-y: inherit; color: white; background-size: cover; margin-top: 5em; } .product-design-bg { background-image: url(../assets/img/product-design-bg.jpg); height: auto; background-repeat: no-repeat; height: 200px; display: flex; align-items: center; justify-content: center; color: white; background-position-y: bottom; background-size: cover; margin-top: 5em; } .software-engineering-bg { background-image: url(../assets/img/software-engineering-bg.jpg); height: auto; background-repeat: no-repeat; height: 200px; display: flex; align-items: center; justify-content: center; background-position-y: bottom; background-size: cover; margin-top: 5em; } .inner-page-heading { font-family: "poppinsbold"; margin: 0 auto 1.5em auto; font-size: 2.5em; text-align: center; padding-top: 95px; } .particles { z-index: 1; top: 0; right: 0; width: 100%; position: absolute; left: 0; bottom: 0; margin: 0; padding: 0; } .modal-link:hover { cursor: pointer; opacity: 1 !important; } .modaloverlay { background: rgba(0, 0, 0, 0.8); bottom: 0; left: 0; opacity: 0; pointer-events: none; position: fixed; right: 0; top: 0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; z-index: -1; display: none; } .modaloverlay:target { display: block; opacity: 1; pointer-events: auto; z-index: 99999; } .modaloverlay .modal { height: 100%; position: relative; margin: 0 auto; display: flex; justify-content: center; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 80em) { .modaloverlay .modal { width: 100%; height: 100%; display: flex; display: flex; justify-content: center; align-items: start; } } .modaloverlay .modal > iframe, .modaloverlay .modal > div { border: none; width: 100%; height: 100%; } .modaloverlay .close { color: #0089cc; font-size: 3em; position: absolute; right: 0; text-align: center; text-decoration: none; top: 0; z-index: 1; right: 2rem; } .career-block { background-color: #0189cc; color: white; } .dotpattern { background-image: url(../assets/img/dots.png); height: auto; background-repeat: no-repeat; height: 200px; display: flex; align-items: center; justify-content: center; background-position-y: bottom; background-size: cover; } .icon { background-image: url(/assets/img/check.png); width: fit-content; height: auto; } .wearehiring { display: block; margin-left: 454px; } .geomatric-bg1 { background-image: url(/assets/img/right-blue-geogrophic.png); background-size: contain; background-repeat: repeat-y; background-position: right; } .geomatric-bg2 { background-image: url(/assets/img/left-blue-geogrophic.png); background-size: contain; background-repeat: repeat-y; background-position: left; } li:before { content: "\f00c"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1.9em; /* same as padding-left set on li */ width: 1.9em; /* same as padding-left set on li */ color: #00c3c7; } .wrapper { column-count: 1; column-gap: 50px; padding: 50px; } .qae { float: right; shape-outside: url("/assets/img/programmer.png"); width: 500px; } .rpo { float: right; shape-outside: url("/assets/img/quality-assurance-boy.png"); width: 483px; } .careerpic { float: right; shape-outside: url("/assets/img/remote.png"); shape-margin: 20px; width: 450px; } .githubicon:before { content: "\f092"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1.9em; /* same as padding-left set on li */ width: 1.9em; /* same as padding-left set on li */ color: #ffffff; } .twittericon:before { content: "\f081"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1.9em; /* same as padding-left set on li */ width: 1.9em; /* same as padding-left set on li */ color: #ffffff; } .linkedinicon:before { content: "\f08c"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1.9em; /* same as padding-left set on li */ width: 1.9em; /* same as padding-left set on li */ color: #ffffff; } .instaicon:before { content: "\f08c"; /* FontAwesome Unicode */ font-family: FontAwesome; display: inline-block; margin-left: -1.9em; /* same as padding-left set on li */ width: 1.9em; /* same as padding-left set on li */ color: #0089cc; } .card { margin-top: 8px; } .card:hover { box-shadow: 0 4px 9px #464646; transition: 0.6s; } .page-container h1 { font-family: "metrosansbold"; } .capabilities-container { padding-top: 7rem; padding-bottom: 7rem; position: relative; background-color: #f5f5f5; } .capabilities-container h1 { font-family: "poppinsbold"; margin: 0 auto 1.5em auto; font-size: 2.5em; } .capabilities-container .capabilities-title { font-family: "metrosansbold"; line-height: normal; font-size: 2em; } .capabilities-container .title { font-family: "metrosansbook"; font-size: 1.2em; color: rgba(0, 0, 0, 0.75); line-height: 1.4; } .capabilities-container .tech-img { width: 5rem; height: 5rem; } .capabilities-container .row { margin: 0rem; justify-content: flex-start !important; } .capabilities-section { background-color: red; } .capabilities-section:active { margin-top: 300px; } .capabilities-section:focus { margin-top: 300px; } @media screen and (max-width: 599px) { .banner-maintitle { font-size: 1.7em; text-align: center; } .banner-mainsubtitle { font-size: 1em; text-align: center; } .yellowbtn { font-size: 12px; } .hori-menu { display: none; } intro-container h1 { font-size: 1.7em; } header .nav-container .logo { font-size: 1.9em; } .intro-container h1 { font-size: 1.7em; } .services-container h1 { font-size: 1.7em; } .capabilities-container h1 { font-size: 1.7em; } header .nav-container .logo { margin-left: 10px; } .pos-sticky { height: 50px; } .flex-space-between { height: 50px; } .product-strategy-bg { margin-bottom: 20px; height: 100px; } .product-design-bg { margin-bottom: 20px; height: 100px; } .software-engineering-bg { margin-bottom: 20px; height: 100px; } .inner-page-heading { margin-bottom: 0.5em; padding-top: 50px; } .product-strategy-bg { margin-top: 1em; } .product-design-bg { margin-top: 1em; } .software-engineering-bg { margin-top: 1em; } .header-padding { padding-top: 50px; } } @media screen and (min-width: 600px) and (max-width: 899px) { .banner-maintitle { font-size: 1.8em; } .banner-mainsubtitle { font-size: 1.1em; } .yellowbtn { font-size: 17px; } .hori-menu { visibility: hidden; } /* .col-4 { max-width: calc((100% / (12 / 4)) - var(--grid-gutter)); } .col-8 { max-width: calc((100% / (12 / 8)) - var(--grid-gutter)); } */ } @media screen and (min-width: 900px) and (max-width: 1199px) { .banner-maintitle { font-size: 2.3em; } .banner-mainsubtitle { font-size: 1.3em; } .yellowbtn { font-size: 17px; } #hamnav { visibility: hidden; } } @media screen and (min-width: 1200px) { .banner-maintitle { font-size: 3.2em; } .banner-mainsubtitle { font-size: 1.7em; } #hamnav { visibility: hidden; } } /* [ON BIG SCREEN] */ /* (A) WRAPPER */ #hamnav { width: auto; } /* (B) HORIZONTAL MENU ITEMS */ #hamitems { position: absolute; top: 42px; right: 0; width: max-content; } #hamitems a { flex-grow: 1; padding: 10px; text-decoration: none; text-align: center; } #hamitems a:hover { font-weight: bold; } /* (C) HIDE HAMBURGER */ #hamnav label, #hamburger { display: none; } /* [ON SMALL SCREENS] */ @media screen and (min-width: 300px) and (max-width: 899px) { /* (A) BREAK INTO VERTICAL MENU */ #hamitems a { box-sizing: border-box; display: block; width: 100%; border-top: 1px solid #333; background-color: #fff; } /* (B) SHOW HAMBURGER ICON */ #hamnav label { display: inline-block; color: #0089cc; font-style: normal; font-size: 1.2em; padding-top: 3px; position: sticky; right: 0; top: 0px; margin-right: 10px; } /* (C) TOGGLE SHOW/HIDE MENU */ #hamitems { display: none; } #hamnav input:checked ~ #hamitems { display: block; } } #hamnav { position: sticky; top: 0; }