@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=MuseoModerno:wght@700&display=swap');
* {
--blue-bg: #C3F9FF;
--black-bg: #181a1b;
--title-col: #3E54AC;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.custom-pageMaxWidth {
max-width: 60rem;
margin: 0 auto;
}
.custom-pageMaxWidth-wider {
max-width: 70rem;
margin: 0 auto;
}
.custom-autoSideMargins {
margin-left: auto;
margin-right: auto;
}
.custom-autoLeftMargin {
margin-left: auto;
}
.custom-div-displayNone-smallscreen {
display: none;
}
.custom-div-displayNone-largescreen {
display: block;
}
@media (min-width: 768px) {
.custom-div-displayNone-smallscreen {
display: block;
}
.custom-div-displayNone-largescreen {
display: none;
}
}
.custom-breakword {
word-break: break-word;
}
.custom-scrollMarginTop {
scroll-margin-top: 90px;
}
.custom-color-white {
color: white;
}
.custom-color-black {
color: #212529;
}
.custom-italic {
font-style: italic;
}
.custom-navbar-bg-white {
background-color: white;
}
.custom-navbar-col-black .nav-link {
color: black;
}
.custom-navbar-bg-black {
background-color: black;
}
.custom-navbar-col-white .navbar-brand, .custom-navbar-col-white .nav-link {
color: white;
}
.custom-nav-hamburger {
border: none;
}
.custom-nav-hamburger:focus {
box-shadow: none;
}
.custom-nav-hamburger:focus-visible {
box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(49,132,253,.5);
}
.custom-nav-hamburger > * {
display: none;
width: 1.6em;
height: 1.6em;
}
.custom-nav-hamburger[aria-expanded="false"] > .custom-nav-i-hbg {
display: inline;
}
.custom-nav-hamburger[aria-expanded="true"] > .custom-nav-i-x {
display: inline;
}
.custom-button {
display: inline-block;
text-decoration: none;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0.73rem 1.5rem;
transition: background-color .13s ease-in-out;
background-color: hsl(226deg 97% 42%);
font-weight: 600;
color: white;
border-radius: 0.4rem;
}
.custom-button:hover {
background-color: hsl(226deg 97% 47%);
}
.custom-button:active {
background-color: hsl(226deg 97% 37%);
}
.custom-button:focus:not(:focus-visible) {
outline: 0;
}
.custom-button:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
outline: 0;
}
.custom-centred-button {
display: block;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.custom-icon-list {
list-style: none;
position: relative;
margin-bottom: 0;
padding-left: 2.3rem;
}
.custom-icon-list > li {
margin-bottom: 0.5rem;
}
.custom-icon-list > li::before {
content: '';
background-repeat: no-repeat;
background-position: right center;
background-size: 1.5rem;
position: absolute;
left: 0;
width: 1.6rem;
height: 1.6rem;
background-image: url('../icons/list-check.svg');
}
.icon-email::before, .icon-instagram::before, .icon-linkedin::before, .icon-phone::before {
background-size: 1.3rem !important;
width: 1.4rem !important;
height: 1.4rem !important;
}
.white.icon-phone::before {
background-image: url('../icons/contact-white/phone.svg') !important;
}
.white.icon-email::before {
background-image: url('../icons/contact-white/email.svg') !important;
}
.white.icon-linkedin::before {
background-image: url('../icons/contact-white/linkedin.svg') !important;
}
.white.icon-instagram::before {
background-image: url('../icons/contact-white/instagram.svg') !important;
}
.black.icon-phone::before {
background-image: url('../icons/contact-black/phone.svg') !important;
}
.black.icon-email::before {
background-image: url('../icons/contact-black/email.svg') !important;
}
.black.icon-linkedin::before {
background-image: url('../icons/contact-black/linkedin.svg') !important;
}
.black.icon-instagram::before {
background-image: url('../icons/contact-black/instagram.svg') !important;
}
.custom-form-requiredDesc, .custom-form-requiredLabel:after {
color: red;
color: rgb(238 19 19);
}
.custom-form-requiredLabel:after {
content: " *";
}
.custom-input-num-noarrow::-webkit-outer-spin-button,
.custom-input-num-noarrow::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-input-num-noarrow {
-moz-appearance:textfield;
}
.custom-scr {
opacity: 0;
transition: all .7s;
}
.custom-scr-left { transform: translateX(-40px); }
.custom-scr-bottom { transform: translateY(50px); }
@media(prefers-reduced-motion) {
.custom-scr {
transition: none;
}
}
.custom-scr.shown {
opacity: 1;
transform: translateX(0px);
transform: translateY(0px);
}
@media (min-width: 768px) {
.custom-scr.custom-mx-delay1 {
transition-delay: 200ms;
}
.custom-scr.custom-mx-delay2 {
transition-delay: 400ms;
}
.custom-scr.custom-mx-delay3 {
transition-delay: 600ms;
}
}
.max-width-100 {
max-width: 100%;
}
.section-vertical-margin {
--margin-v: 4rem;
margin-top: var(--margin-v);
margin-bottom: var(--margin-v);
}
@media (min-width: 768px) {
.section-vertical-margin {
--margin-v: 9rem;
}
}
.mt-45 {
margin-top: 2rem;
}
.mb-45 {
margin-bottom: 2rem;
}
.btn {
font-weight: 500;
}
.better-link {
color: inherit;
text-decoration: none;
}
.better-link:hover {
text-decoration: underline;
}
nav {
background-color: var(--blue-bg);
padding: 1.5rem 0 !important;
}
nav img {
width: 13rem;
}
nav .nav-link {
border-radius: 0.5rem;
}
@media (min-width: 768px) {
nav .nav-link {
margin-left: 1rem;
padding-right: 0.8rem !important;
padding-left: 0.8rem !important;
}
}
nav .nav-link:hover {
background-color: white;
}
footer {
background-color: var(--black-bg);
color: white;
padding: 5rem 1.5rem;
}
footer > div {
max-width: 90rem;
margin: auto;
}
footer img {
width: 18rem;
margin: auto;
display: block;
margin-top: 6rem;
}
.section-heading {
font-weight: 700;
}
.section-heading.full {
font-size: calc(1.325rem + .9vw);
margin-bottom: 3rem;
}
.section-heading.half {
font-size: calc(1.3rem + .6vw);
margin-bottom: 1.6rem;
}
.page-header {
background-color: var(--blue-bg);
text-align: center;
padding: 5rem 1.5rem;
}
.logoish-header {
font-size: calc(1.875rem + 2vw);
font-family: "MuseoModerno", sans-serif;
font-weight: 500;
color: var(--title-col);
}
.half-image {
border-radius: 0.5rem;
width: 100%;
}
.hero {
background-color: var(--blue-bg);
text-align: center;
padding: 6rem 1.5rem;
}
.hero img {
max-width: 100%;
width: 36rem;
margin-bottom: 2rem;
}
.services-heading {
font-size: calc(1.375rem + 1.5vw);
}
.steps-container > div {
padding: 0.8rem 0.5rem;
}
.steps-container > div > div {
background-color: #E1F6F3;
border-radius: 0.5rem;
text-align: center;
padding: 2rem 1.6rem;
max-width: 21.3rem;
margin: auto;
height: 100%;
}
.steps-container > div > div > h4 {
font-family: "MuseoModerno", sans-serif;
font-weight: 700;
color: #325490;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.steps-container > div > div > img {
width: 7.3rem;
max-width: 100%;
}
.steps-container > div > div > p {
margin-top: 1.3rem;
margin-bottom: 0;
}
.modal-dialog {
max-width: 60rem;
border-radius: 1rem;
}
.modal-content {
overflow: hidden;
}
.modal-content .img-side > img {
object-fit: cover;
width: 100%;
height: 100%;
}
.modal-content .form-side {
--padding-x: 1.8rem;
padding: 2.3rem var(--padding-x);
}
.modal-content .form-side > h3 {
display: inline-block;
font-weight: 700;
margin-bottom: 1rem;
}
.modal-content .form-side > .btn-close {
display: inline-block;
position: absolute;
right: var(--padding-x);
}
.industry-container {
text-transform: uppercase;
}
.industry-container > div {
padding: 0.5rem
}
.industry-container > div > div {
background-color: rgb(50 70 95);
background-position: center;
background-size: cover;
border-radius: 0.5rem;
max-width: 100%;
width: 16rem;
aspect-ratio: 3/2;
margin: auto;
padding: 1rem;
display: flex;
align-items: center;
}
.industry-container > div > div > p {
width: 100%;
text-align: center;
margin: 0;
font-weight: 500;
color: white;
}
.purpose-container {
margin: auto;
}
.purpose-container .each-step {
background-color: #DBECEC;
height: 100%;
padding: 1.4rem 1.8rem;
border-radius: 0.5rem;
--icon-size: 1.5rem;
--spacing: 1.5rem;
}
.purpose-container img {
vertical-align: top;
width: var(--icon-size);
margin-right: var(--spacing);
}
.purpose-container p {
vertical-align: top;
width: calc(100% - var(--icon-size) - var(--spacing));
display: inline-block;
margin: 0;
margin-top: -0.2rem;
}