:root {
  --dark-green: #004f56;
  --purple: #4c4c9e;
  --blue: #0033a7;
  --red: #dd283d;
  --black: black;
  --yellow: #f5b53c;
  --green: #3d8742;
  --orange: #ff7500;
  --dark-blue: #001e45;
  --white-2: var(--white);
  --medium-grey: #5c5c5c;
  --white: #fff;
  --light-grey: #92929254;
  --black-opacity: #131313d9;
  --transparent: #fff0;
  --dark-yellow: #dd950d;
  --dark-grey: #353535;
  --very-light-grey: #f3f3f3;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-form-formradioinput--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 12px;
  height: 12px;
}

.w-form-formradioinput--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-form-formradioinput--inputType-custom.w--redirected-checked {
  border-width: 4px;
  border-color: #3898ec;
}

.w-checkbox {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-checkbox:before {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox:after {
  content: " ";
  clear: both;
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-checkbox-input {
  float: left;
  margin: 4px 0 0 -20px;
  line-height: normal;
}

.w-checkbox-input--inputType-custom {
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 12px;
  height: 12px;
}

.w-checkbox-input--inputType-custom.w--redirected-checked {
  background-color: #3898ec;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/static/custom-checkbox-checkmark.589d534424.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: #3898ec;
}

.w-checkbox-input--inputType-custom.w--redirected-focus {
  box-shadow: 0 0 3px 1px #3898ec;
}

.w-backgroundvideo-backgroundvideoplaypausebutton:focus-visible {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3b79c3;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: #333;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.field-block {
  z-index: 1;
  border: 1px solid #0000;
  flex-direction: column;
  flex: 1;
  align-items: stretch;
  min-width: 50px;
  min-height: 20px;
  margin-bottom: 8px;
  display: flex;
}

.sg-title {
  color: #3f3b35;
  margin-bottom: 8px;
  font-size: 24px;
  line-height: 1.4em;
}

.form-error {
  color: #444;
  background-color: #ece7e0;
  border-radius: 6px;
  padding: 16px;
}

.sg-nav {
  border-right: 1px solid #ced5db;
  width: 240px;
  height: 0;
  position: fixed;
  inset: 0% auto 0 0;
}

.wrapper {
  margin-right: 0;
  padding-left: 0;
}

.spacer {
  background-color: #ece7e0;
  height: 48px;
}

.spacer._24 {
  text-transform: uppercase;
  background-color: #0000;
  width: 24px;
  height: 24px;
}

.sg-nav-container {
  background-color: #f5b53c0a;
  width: 240px;
  height: 100vh;
}

.sg-label {
  color: #929292;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2em;
}

.sg-menu-link {
  color: var(--dark-green);
  border-left: 4px solid #0000;
  width: 100%;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 27px;
  transition: background-color .2s, color .2s;
}

.sg-menu-link:hover {
  color: var(--purple);
}

.sg-menu-link.w--current {
  color: #000;
  background-color: #f8f8f8;
  padding-right: 0;
  font-weight: 600;
}

.sg-description {
  color: #5c5c5c;
  max-width: 400px;
  font-weight: 400;
}

.divider-wrapper {
  margin-top: 24px;
}

.form-success {
  color: #444;
  background-color: #d4e9ff;
  border-radius: 6px;
  padding: 32px;
  font-size: 16px;
  line-height: 1.4em;
}

.form-checkbox {
  margin-bottom: 16px;
  padding-left: 24px;
}

._12-columns {
  flex-flow: wrap;
  place-content: stretch center;
  align-items: center;
  margin-left: -16px;
  margin-right: -16px;
  display: flex;
}

._12-columns.align-left {
  justify-content: flex-start;
}

.color-block {
  background-color: var(--blue);
  border-radius: 5px;
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
}

.color-block.light-blue {
  background-color: var(--purple);
  border-style: none;
}

.color-block.dark-grey {
  background-color: #353535;
}

.color-block.grey {
  background-color: #5c5c5c;
}

.color-block.soft-grey {
  background-color: var(--red);
}

.color-block.light-grey {
  background-color: var(--black);
}

.color-block.soft-blue {
  background-color: var(--yellow);
}

.color-block.hard-blue {
  background-color: var(--green);
}

.color-block.dark-blue {
  background-color: var(--dark-green);
}

.color-block.blue {
  background-color: var(--orange);
}

.sg-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin-left: 240px;
  display: flex;
}

.heading {
  text-align: center;
}

.heading.h4 {
  color: var(--blue);
  text-shadow: none;
  font-family: Pangram, sans-serif;
  font-size: 25px;
}

.heading.h4.red {
  color: var(--red);
}

.heading.h4.dark-green {
  color: var(--dark-green);
}

.heading.h2 {
  color: var(--dark-blue);
  text-align: center;
  text-shadow: none;
  word-break: normal;
  margin-bottom: 0;
  padding-left: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3em;
  display: flex;
}

.heading.h2.center {
  text-align: center;
  justify-content: center;
  align-items: center;
}

.heading.h2.white {
  color: var(--white-2);
}

.heading.h1 {
  color: var(--blue);
  text-align: left;
  text-shadow: none;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 38px;
  line-height: 1.25em;
}

.heading.h1.left {
  text-align: left;
}

.heading.h3 {
  color: var(--orange);
  font-size: 30px;
  line-height: 1.4em;
}

.heading.h5 {
  color: #353535;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5em;
}

.heading.h3 {
  color: var(--blue);
  text-align: center;
  text-shadow: none;
  margin-bottom: 0;
  padding-left: 0;
  font-family: Pangram, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.3em;
  display: flex;
}

.heading.h3.left {
  text-align: left;
  font-size: 28px;
}

.heading.h2 {
  color: var(--blue);
  text-align: left;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 38px;
  line-height: 1.25em;
}

.radio-button {
  width: 20px;
  height: 20px;
  margin-top: 0;
  margin-left: -24px;
  margin-right: 10px;
}

.radio-button.w--redirected-checked {
  border-width: 6px;
  border-color: #2b95ff;
}

.form-dropdown {
  border: 1px solid var(--blue);
  color: var(--orange);
  background-color: #fafafa;
  border-radius: 5px;
  width: 100%;
  height: 48px;
  margin-bottom: 16px;
  padding: 8px 16px;
  font-size: 15px;
  position: relative;
}

.form-dropdown:hover, .form-dropdown:focus {
  color: #37474e;
}

.form-dropdown::placeholder {
  color: #999;
  font-size: 15px;
}

.paragraph {
  color: var(--medium-grey);
  text-shadow: none;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5em;
}

.paragraph.large {
  color: var(--medium-grey);
  text-align: center;
  text-shadow: none;
  justify-content: center;
  align-items: flex-end;
  margin-top: 0;
  font-family: Pangram, sans-serif;
  font-size: 18px;
  font-weight: 400;
  display: flex;
  position: static;
}

.paragraph.large.left {
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  padding-right: 5px;
}

.paragraph.small {
  opacity: .75;
  font-size: 14px;
  font-style: italic;
}

.paragraph.center {
  color: var(--medium-grey);
  text-align: center;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 17px;
  font-weight: 300;
}

.paragraph.white {
  color: var(--white-2);
  padding-right: 10px;
  font-family: Pangram, sans-serif;
  font-size: 14px;
}

.paragraph.white.large {
  text-align: left;
  justify-content: flex-start;
  align-items: center;
  font-size: 17px;
}

.paragraph.list {
  margin-top: 10px;
}

.form {
  margin-bottom: 8px;
}

.ds-colour-grid {
  flex-wrap: wrap;
  margin-top: 24px;
  display: flex;
}

.sg-block {
  margin-bottom: 32px;
}

.ds-colour-block {
  width: 20%;
  padding-right: 16px;
  display: inline-block;
}

.check-box {
  width: 20px;
  height: 20px;
  margin-top: 0;
  margin-left: -24px;
  margin-right: 10px;
}

.check-box.w--redirected-checked {
  background-color: #ddffe7;
  background-image: url('../images/Dark.svg');
  background-position: 50%;
  background-size: 16px;
  border-color: #2b95ff;
}

.field-label {
  color: var(--blue);
  font-size: 14px;
  font-weight: 500;
}

.text-box {
  max-width: 750px;
}

.text-box._600px {
  max-width: 600px;
  min-height: 64px;
}

.text-box._500px {
  max-width: 500px;
  min-height: 64px;
}

.sg-section {
  z-index: 0;
  text-align: left;
  padding: 60px 0;
  position: relative;
}

.sg-section.header {
  color: var(--white-2);
  background-image: linear-gradient(#0000000f, #0000000f), url('../images/back.svg'), url('../images/dividerwhite.svg');
  background-position: 0 0, 0 100%, 50% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, 1200px, auto;
}

.sg-section.with-back {
  background-image: url('../images/background-swirl2.svg'), linear-gradient(#92929229, #92929229);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-attachment: fixed, scroll;
  margin-bottom: 100px;
  padding-top: 10px;
  padding-left: 10px;
}

.sg-section.divider {
  background-image: url('../images/dividers.svg'), url('../images/yellow-top-white.svg');
  background-position: 0 0, 50% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  margin-bottom: 100px;
  margin-left: 10px;
  padding-bottom: 80px;
}

.sg-section.icons-back {
  background-image: url('../images/ICONS.svg');
  background-position: 105% 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 100px;
  margin-left: 10px;
}

.sg-section.forms {
  background-image: linear-gradient(#faf4f4cc, #faf4f4cc), url('../images/background.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: auto, cover;
  margin-top: 60px;
}

.sg-section.buttons {
  background-image: url('../images/BUTTONS.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 100px;
  margin-left: 10px;
}

.sg-section.images {
  background-image: url('../images/IMAGES.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-left: 10px;
}

.sg-section.colours {
  background-image: url('../images/COLOURS.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-top: 30px;
  margin-left: 10px;
}

.sg-section.reviews {
  z-index: 9;
  background-color: var(--white);
  color: var(--white);
  padding: 20px;
}

.sg-section.cta {
  z-index: 2;
  background-image: url('../images/bottom-red.svg'), linear-gradient(#00000040, #00000040), linear-gradient(#001e45f5, #fff0), url('../images/CTA.jpg');
  background-position: 50% 0, 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-size: 100%, auto, auto, cover;
  background-attachment: scroll, scroll, scroll, fixed;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 0;
  display: flex;
}

.icon {
  color: #fff;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  font-size: 24px;
}

.icon:hover {
  opacity: 1;
}

.column {
  flex-flow: column;
  flex: 0 auto;
  align-items: stretch;
  min-height: 32px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  position: relative;
}

.column.desk-4 {
  width: 33.33%;
}

.ds-icon-grid {
  margin-top: 105px;
}

.sg-menu {
  width: 100%;
}

.form-radio-button {
  margin-bottom: 16px;
  padding-left: 24px;
}

.ds-section-header {
  margin-top: 140px;
  margin-bottom: 50px;
}

.divider {
  width: 100%;
  margin-bottom: 10px;
}

.sg-menu-brand {
  margin-top: 40px;
  margin-bottom: 50px;
  margin-left: 30px;
  padding-left: 0;
  padding-right: 30px;
}

.sg-body {
  background-color: #fff;
}

.ds-icon {
  margin-bottom: 4px;
  margin-right: 24px;
  display: inline-block;
}

.block-quote {
  border-left-color: var(--blue);
  color: var(--medium-grey);
  margin-bottom: 40px;
  padding-right: 0;
  font-family: Pangram, sans-serif;
  font-size: 17px;
  line-height: 1.4em;
}

.block-quote.red {
  border-left-color: var(--red);
  color: var(--medium-grey);
  text-shadow: none;
}

.block-quote.purple {
  border-left-color: var(--purple);
  text-shadow: none;
}

.block-quote.orange {
  border-left-color: var(--orange);
  color: var(--medium-grey);
  text-align: left;
  text-shadow: none;
}

.block-quote.yellow {
  border-left-color: var(--yellow);
  color: var(--medium-grey);
  text-shadow: none;
}

.block-quote.dark-green {
  border-left-color: var(--dark-green);
  color: var(--medium-grey);
  text-shadow: none;
  font-weight: 400;
}

.text-input {
  border: 1px solid var(--blue);
  background-color: var(--white-2);
  color: var(--blue);
  border-radius: 5px;
  margin-bottom: 16px;
  padding: 24px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4px;
  box-shadow: 0 0 10px #00000003;
}

.text-input:focus {
  border-color: #ddffe7;
}

.text-input::placeholder {
  color: #f8f8f8;
}

.text-input.form {
  border-color: var(--blue);
  min-height: 120px;
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.4em;
}

.button {
  background-color: var(--blue);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  flex: none;
  margin-bottom: 8px;
  padding: 8px 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  transition: border-color .2s, color .2s, box-shadow .2s, background-color .2s;
  box-shadow: 0 2px 8px #00000008;
}

.button:hover {
  background-color: #29a0b1;
  box-shadow: 0 7px 20px -10px #0003;
}

.button:active {
  background-color: #167d7f;
}

.grid {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 40px;
  margin-bottom: 60px;
}

.heading-2 {
  outline-offset: 0px;
  color: var(--blue);
  text-shadow: none;
  outline: 3px #fff;
  margin-top: 0;
  font-family: Pangram, sans-serif;
  font-size: 38px;
}

.heading-2.center {
  text-align: center;
}

.heading-3 {
  color: var(--blue);
  text-align: center;
  margin-top: 45px;
  font-size: 25px;
}

.link {
  color: var(--red);
  text-decoration: none;
}

.div-block {
  margin-top: 90px;
}

.button-wrapper {
  color: #ff003d;
  align-items: center;
  min-height: 50px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s;
  display: flex;
  position: relative;
}

.button-wrapper.center {
  justify-content: center;
  align-items: center;
}

.button-wrapper.space-top {
  margin-top: 40px;
}

.form-block {
  margin-top: 99px;
}

.button-2 {
  color: #040126;
  text-align: center;
  letter-spacing: -.03rem;
  background-color: #9adbff;
  padding: .75rem 1.5rem;
  font-weight: 500;
  text-decoration: none;
  overflow: visible;
}

.button-2.red {
  background-color: var(--red);
  color: var(--white);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.red:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.yellow {
  background-color: var(--yellow);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.yellow:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.purple {
  background-color: var(--purple);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.purple:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.orange {
  background-color: var(--orange);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.orange:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.dark-green {
  background-color: var(--dark-green);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.dark-green:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.green {
  background-color: var(--green);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.green:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.button-2.green._2 {
  margin-left: 20px;
}

.button-2.blue {
  background-color: var(--blue);
  color: var(--white-2);
  letter-spacing: .1rem;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3rem;
  padding-right: 2rem;
  font-family: Publicsans, sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  transition: border-radius .3s, background-color .3s;
}

.button-2.blue:hover {
  background-color: var(--blue);
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 3rem;
  padding-left: 2rem;
}

.track-overlay {
  z-index: 1;
  background-image: linear-gradient(#f9f5ff, #0000 50%, #f9f5ff);
  position: absolute;
  inset: 0%;
}

.track-overlay.unclickable {
  background-image: linear-gradient(#fff, #0000 50%, #fff);
  width: 100%;
  height: 100%;
  position: absolute;
}

.heading-large {
  color: #111322;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.25;
}

.heading-large.rotate-text {
  color: #dcdfea;
  white-space: nowrap;
  font-weight: 600;
}

.heading-large.rotate-text._1, .heading-large.rotate-text._4, .heading-large.rotate-text._5, .heading-large.rotate-text._2, .heading-large.rotate-text._3 {
  font-size: 2rem;
}

.heading-large.rotate-text._7 {
  font-size: 2rem;
  font-weight: 700;
}

.heading-large.rotate-text._6, .heading-large.rotate-text._18 {
  font-size: 2rem;
}

.heading-large.rotate-text._1 {
  margin-top: 30px;
  margin-bottom: 30px;
  font-size: 1.4rem;
  font-weight: 700;
}

.heading-large.rotate-text._4 {
  font-size: 1.4rem;
}

.heading-large.rotate-text._5 {
  font-size: 2rem;
}

.heading-large.rotate-text._2 {
  font-size: 1.4rem;
  font-weight: 700;
}

.heading-large.rotate-text._3 {
  font-size: 1.4rem;
}

.heading-large.rotate-text._6 {
  font-size: 2rem;
}

.infinite-rotation-holder {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.track-vertical {
  flex-direction: column;
  display: flex;
  position: absolute;
}

.vertical-scroll-wrapper {
  flex-direction: column;
  align-items: flex-start;
  width: 43ch;
  position: relative;
}

.text-rotation-wrapper {
  display: flex;
}

.image-3 {
  width: 50%;
}

.d-131-corner-line-v {
  background-color: var(--medium-grey);
  transform-origin: 50% 0;
  border-radius: 100px;
  width: 3px;
  height: 15px;
  margin-top: -2px;
  margin-left: -2px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.d-131-corner-line-v.bottom-right {
  transform-origin: 50% 100%;
  margin: 0 -2px -2px 0;
  inset: auto 0% 0% auto;
}

.d-131-corner-line-v.top-right {
  transform-origin: 50% 0;
  margin-left: 0;
  margin-right: -2px;
  inset: 0% 0% auto auto;
}

.d-131-corner-line-v.bottom-left {
  transform-origin: 50% 100%;
  margin-top: 0;
  margin-bottom: -2px;
  inset: auto auto 0% 0%;
}

.d-131-logos-wrapper {
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 0;
}

.d-131-logos-wrapper.top-space {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  grid-template-rows: auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 40px;
  display: grid;
}

.d-131-corner-line-h {
  z-index: 99;
  background-color: var(--medium-grey);
  transform-origin: 0%;
  border-radius: 100px;
  width: 15px;
  height: 3px;
  margin-top: -2px;
  margin-left: -2px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.d-131-corner-line-h.top-right {
  transform-origin: 100%;
  margin-left: 0;
  margin-right: -2px;
  inset: 0% 0% auto auto;
}

.d-131-corner-line-h.bottom-right {
  transform-origin: 100%;
  margin: 0 -2px -2px 0;
  inset: auto 0% 0% auto;
}

.d-131-corner-line-h.bottom-left {
  margin-top: 0;
  margin-bottom: -2px;
  inset: auto auto 0% 0%;
}

.d-131-logo-link-block {
  background-image: url('../images/Badsberg-Logo-2019.png');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 80px;
  border: 1px solid #0000;
  width: 120px;
  height: 120px;
  text-decoration: none;
  transition: border-color 1s cubic-bezier(.25, .46, .45, .94);
  position: relative;
}

.d-131-logo-link-block:hover {
  border: 1px solid #0006;
}

.d-131-logo-link-block._4 {
  background-image: url('../images/Atlantis-Foundries.svg');
  background-size: 90px;
}

.d-131-logo-link-block._2 {
  background-image: url('../images/aspen.svg');
  background-size: 100px;
}

.d-131-logo-link-block._3 {
  background-image: url('../images/Aqunion.svg');
  background-size: 100px;
}

.d-131-logo-link-block._5 {
  background-image: url('../images/Barrick.svg');
  background-size: 100px 100px;
}

.d-131-logo-link-block._6 {
  color: var(--white);
  background-image: url('../images/Britos.svg');
  background-size: 80px;
}

.d-131-logo-link-block._7 {
  color: var(--white);
  background-image: url('../images/CKI.svg');
}

.d-131-logo-link-block._8 {
  background-image: url('../images/Carrotech_1.svg');
}

.d-131-logo-link-block._9 {
  background-image: url('../images/CBRE.svg');
  background-size: 80px;
}

.d-131-logo-link-block._10 {
  background-image: url('../images/Ceres_Fruit_Juices_Logo.png');
  background-size: 90px;
}

.d-131-logo-link-block._11 {
  background-image: url('../images/Ciolli.svg');
  background-size: 100px;
}

.d-131-logo-link-block._12 {
  background-image: url('../images/coca-cola.png');
  background-size: 100px;
}

.d-131-logo-link-block._13 {
  color: var(--white);
  background-image: url('../images/Country-Fair.svg');
}

.d-131-logo-link-block._14 {
  color: var(--white);
  background-image: url('../images/DISTELL.svg');
}

.d-131-logo-link-block._15 {
  background-image: url('../images/Duferco.svg');
}

.d-131-logo-link-block._16 {
  background-image: url('../images/Elgin-Orchards.svg');
  background-size: 80px;
}

.d-131-logo-link-block._17 {
  background-image: url('../images/ESKOM.svg');
  background-size: 90px;
}

.d-131-logo-link-block._18 {
  background-image: url('../images/Get-Metal.svg');
  background-size: 80px;
}

.d-131-logo-link-block._19 {
  background-image: url('../images/GSK.svg');
  background-size: 60px;
}

.d-131-logo-link-block._20 {
  color: var(--white);
  background-image: url('../images/Huhtamaki.svg');
}

.d-131-logo-link-block._21 {
  color: var(--white);
  background-image: url('../images/John-Thompson.svg');
  background-size: 100px;
}

.d-131-logo-link-block._22 {
  color: var(--white);
  background-image: url('../images/Kanonkop-Estate.png');
  background-size: 80px;
}

.d-131-logo-link-block._23 {
  color: var(--white);
  background-image: url('../images/Kimberly.svg');
  background-size: 110px;
}

.d-131-logo-link-block._24 {
  color: var(--white);
  background-image: url('../images/Kromco.svg');
}

.d-131-logo-link-block._25 {
  color: var(--white);
  background-image: url('../images/KWV.svg');
  background-size: 70px;
}

.d-131-logo-link-block._26 {
  color: var(--white);
  background-image: url('../images/Lactalis.svg');
}

.d-131-logo-link-block._21-copy {
  color: var(--white);
  background-image: url('../images/John-Thompson.svg');
}

.d-131-logo-link-block._27 {
  color: var(--white);
  background-image: url('../images/Le-roux-group.png');
  background-size: 90px;
}

.d-131-logo-link-block._28 {
  color: var(--white);
  background-image: url('../images/Mambos_1.svg');
}

.d-131-logo-link-block._29 {
  color: var(--white);
  background-image: url('../images/mpact.svg');
}

.d-131-logo-link-block._30 {
  color: var(--white);
  background-image: url('../images/Nuwater.svg');
  background-size: 100px;
}

.d-131-logo-link-block._31 {
  color: var(--white);
  background-image: url('../images/Pepsico.svg');
  background-size: 100px;
}

.d-131-logo-link-block._32 {
  color: var(--white);
  background-image: url('../images/pioneer-foods.png');
  background-size: 80px;
}

.d-131-logo-link-block._33 {
  color: var(--white);
  background-image: url('../images/Protea-hotel.png');
  background-size: 99px;
}

.d-131-logo-link-block._34 {
  color: var(--white);
  background-image: url('../images/Randgold.svg');
  background-size: 100px;
}

.d-131-logo-link-block._35 {
  color: var(--white);
  background-image: url('../images/RFG_1.svg');
  background-size: 50px;
}

.d-131-logo-link-block._36 {
  color: var(--white);
  background-image: url('../images/Sea-Harvest_1.svg');
  background-size: 60px;
}

.d-131-logo-link-block._37 {
  color: var(--white);
  background-image: url('../images/Swartland.svg');
}

.d-131-logo-link-block._38 {
  color: var(--white);
  background-image: url('../images/Tiger-Brands-Logo.png');
  background-size: 60px;
}

.d-131-logo-link-block._39 {
  color: var(--white);
  background-image: url('../images/Transnet.svg');
  background-size: 70px;
}

.d-131-logo-link-block._40 {
  color: var(--white);
  background-image: url('../images/Tronox.png');
  background-size: 100px;
}

.d-131-logo-link-block._41 {
  color: var(--white);
  background-image: url('../images/two-day.svg');
  background-size: 50px;
}

.d-131-logo-link-block._42 {
  color: var(--white);
  background-image: url('../images/Victoria-and-Albert.svg');
  background-size: 120px;
}

.d-131-logo-link-block._43 {
  color: var(--white);
  background-image: url('../images/Vital.svg');
  background-size: 70px;
}

.d-131-logo-link-block._1 {
  background-image: url('../images/ABinBev.svg');
}

.d-131-logo-link-block._24-copy {
  color: var(--white);
  background-image: url('../images/Kromco.svg');
}

.d-131-logo-link-block._5-copy, .d-131-logo-link-block.b2 {
  background-image: url('../images/Badsberg-Logo-2019.png');
  background-size: 80px;
}

.d-131-logo-link-block._34-a {
  color: var(--white);
  background-image: url('../images/RCL.svg');
  background-size: 40px;
}

.body-section {
  background-color: var(--white);
  background-image: linear-gradient(#ffffffad, #ffffffad), url('../images/background_1.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  margin: 0 auto;
  padding: 60px 40px 80px;
}

.body-section.noteworthy {
  background-image: url('../images/orange-bottom.svg'), linear-gradient(#ffffffad, #ffffffad), url('../images/background_1.svg');
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: 100%, auto, cover;
  padding-top: 30px;
  padding-bottom: 40px;
}

.body-section.noteworthy.red {
  background-image: url('../images/bottom-red.svg'), linear-gradient(#0000, #0000), url('../images/bottom-red.svg');
  background-size: 100%, auto, 100%;
  padding-top: 40px;
}

.body-section.noteworthy.orange-top {
  padding-top: 40px;
}

.body-section.noteworthy.green-top {
  background-image: linear-gradient(#0000, #0000), url('../images/green-bottom.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, 100%;
  padding-top: 40px;
}

.body-section.noteworthy.yello-top {
  background-image: url('../images/yellow-bottom.svg'), linear-gradient(#0000, #0000), url('../images/yellow-bottom.svg');
  background-size: 100%, auto, 100%;
  padding-top: 40px;
}

.body-section.noteworthy.purple-top {
  background-image: url('../images/purple-bottom.svg'), linear-gradient(#0000, #0000), url('../images/purple-bottom.svg');
  background-size: 100%, auto, 100%;
  padding-top: 40px;
}

.body-section.noteworthy.dark-green-top {
  clear: left;
  background-image: linear-gradient(#0000, #0000), url('../images/dark-green-bottom.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, 100%;
  padding-top: 40px;
  padding-bottom: 100px;
}

.body-section.red-bottom {
  background-image: linear-gradient(#ffffffad, #ffffffad), linear-gradient(#0000, #0000), url('../images/background_1.svg');
  background-position: 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, cover;
  background-attachment: scroll, scroll, scroll;
  padding-top: 80px;
}

.body-section.orange-bottom {
  background-image: linear-gradient(#ffffffad, #ffffffad), url('../images/background_1.svg'), linear-gradient(#0000, #0000);
  background-position: 0 0, 50%, 0 0;
  background-repeat: repeat, repeat, repeat;
  background-size: auto, auto, auto;
  padding-top: 80px;
}

.body-section.green-bottom {
  background-image: linear-gradient(#ffffffad, #ffffffad), url('../images/background_1.svg'), linear-gradient(#0000, #0000), url('../images/green-top.svg');
  background-position: 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat, repeat, repeat, no-repeat;
  background-size: auto, cover, auto, cover;
  padding-top: 80px;
}

.body-section.yellow-bottom {
  background-image: linear-gradient(#0000, #0000);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  padding-top: 80px;
}

.body-section.purple-bottom {
  background-image: linear-gradient(#0000, #0000);
  padding-top: 80px;
}

.body-section.dark-green-bottom {
  background-image: linear-gradient(#ffffffad, #ffffffad), url('../images/background_1.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  padding-top: 80px;
}

.navbar_upper-wrap {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  padding-top: 7px;
  position: static;
}

.navbar_toggle {
  padding: 0;
}

.text-color-primary {
  color: #000;
}

.text-color-primary.hover {
  color: var(--white-2);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  transition: all .3s;
}

.navbar {
  background-color: var(--white-2);
  width: 100%;
  max-width: 100%;
}

.brand {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  color: #2aa8ff;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.6rem;
  font-weight: 600;
  display: flex;
}

.nav_link {
  letter-spacing: 1px;
  padding: 10px 20px 13px;
  font-family: Pangram, sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: transform .2s;
}

.nav_link.w--current {
  padding-left: 20px;
  padding-right: 20px;
}

.nav_link.drop {
  padding-left: 0;
}

.navbar_dropdown {
  vertical-align: top;
  display: none;
}

.brand_logo {
  width: 170px;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-bottom: 0;
  padding-left: 10px;
}

.dropdown-list {
  background-color: #fff;
  border: 1px solid #000;
}

.dropdown-list.w--open {
  padding-right: 60px;
  right: 12.2625px;
}

.navbar_icon {
  width: 70px;
  padding: 20px;
  transition: all .3s;
}

.navbar_icon:hover {
  scale: 1.05;
}

.navbar_container {
  border-bottom: 1px solid var(--blue);
  background-image: url('../images/tophead5.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
  padding-left: 10px;
}

.navbar_container.blue {
  background-image: url('../images/tophead5.svg');
  background-position: 100% 0;
  background-size: 100%;
  margin-right: -1px;
  padding-top: 0;
  padding-left: 0;
}

.page-wrapper {
  z-index: 12;
  background-color: var(--white-2);
  text-shadow: 0 1px 1px #0003;
  padding-top: 0;
  display: block;
  position: relative;
}

.under_line {
  background-color: var(--white-2);
  color: var(--white-2);
  width: 0;
  height: 1px;
  margin-top: 5px;
  transition: transform .2s;
  transform: translate(0);
}

.under_line.drop {
  color: var(--blue);
}

.nav-menu {
  margin-right: 20px;
  padding-top: 2px;
  display: flex;
}

.nav_other-link {
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  display: flex;
}

.nav_other-link.mobile {
  display: none;
}

.section-2 {
  background-color: var(--white);
  background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  flex-flow: column;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 70px 40px 90px;
}

.section-2.no-divider {
  background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  padding-top: 40px;
  padding-bottom: 0;
}

.section-2.top-space {
  background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  padding-top: 100px;
}

.section-2.services {
  padding-top: 50px;
}

.heading-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 0 20px;
  display: flex;
}

.heading-container.left {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 940px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

.heading-container.small {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.grid-2 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 40px;
  display: block;
}

.card {
  border-style: solid;
  border-width: 1px 0 1px 1px;
  border-color: var(--light-grey);
  background-color: var(--white-2);
  border-radius: 1px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  display: block;
}

.card:hover {
  box-shadow: 0 2px 20px -2px #0003;
}

.line-animate-top {
  aspect-ratio: auto;
  background-color: var(--red);
  flex-flow: column;
  height: 10px;
  margin-bottom: 10px;
  display: flex;
}

.line-animate-top.orange {
  background-color: var(--orange);
}

.c-hero-slide-content {
  background-image: linear-gradient(#13131359, #13131359), url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  height: 100%;
  position: relative;
}

.c-hero-slide-content._1 {
  background-image: linear-gradient(90deg, #fff0, #13131380 75%), url('../images/electrical-and-electronic-engineering.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.c-hero-slide-content._3 {
  background-image: linear-gradient(90deg, #fff0, #131313bf 75%), url('../images/medium-voltage.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.c-hero-slide-content._2 {
  background-image: linear-gradient(90deg, #fff0, #131313bf 75%), url('../images/automation.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.c-hero-slide-content._4 {
  background-image: linear-gradient(90deg, #fff0, #131313bf 75%), url('../images/projects.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.c-hero-slide-content._5, .c-hero-slide-content._6 {
  background-image: linear-gradient(90deg, #fff0, #131313bf 75%), url('../images/technosolar.jpg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

.hero-slide-highlight-text {
  opacity: .25;
  color: #fff0;
  letter-spacing: .2em;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white-2);
  text-transform: uppercase;
  padding-top: 20px;
  padding-left: 20px;
  font-family: Publicsans, sans-serif;
  font-size: 5em;
  font-weight: 700;
  line-height: 1em;
  position: absolute;
}

.hero-slide-header {
  z-index: 10;
  color: var(--white);
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Publicsans, sans-serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.3em;
  position: relative;
}

.slide-cta-curtain {
  background-color: var(--blue);
  position: absolute;
  inset: 0%;
  transform: translate(0, 101%);
}

.hero-slider-arrow {
  opacity: .25;
  width: 50px;
  height: 50px;
  font-size: 20px;
  transition: all .2s;
}

.hero-slider-arrow:hover {
  opacity: 1;
}

.hero-slide-stripe {
  opacity: .35;
  background-color: #fff;
  width: 10px;
  height: 15px;
  margin-right: 10px;
  transform: skew(-45deg);
}

.hero-slide-bg-no {
  opacity: .1;
  text-align: right;
  border: 1px solid #ff5b5b;
  font-size: 18px;
  font-weight: 400;
  line-height: 1em;
  position: absolute;
  inset: .25vw .25vw auto auto;
}

.hero-slide-p {
  z-index: 10;
  color: var(--white);
  margin-bottom: 30px;
  font-family: Publicsans, sans-serif;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5em;
  position: relative;
}

.c-hero-slider {
  background-color: var(--white-2);
  height: 75vh;
  font-size: 1vw;
  line-height: 1.5em;
  position: relative;
}

.c-hero-slide-details {
  perspective: 1000px;
  position: absolute;
  inset: 30% 5% 20% auto;
  transform: perspective(1000px);
}

.slide-cta {
  color: #fff;
  text-transform: uppercase;
  border: 1px solid #ffffff80;
  border-top-left-radius: 37px;
  justify-content: center;
  align-items: center;
  padding: 10px 20px;
  font-size: 13px;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.slide-cta:hover {
  color: #fff;
  text-decoration: none;
}

.slide-cta.outline {
  border-color: var(--blue);
}

.slide-cta.outline:hover {
  color: var(--white-2);
}

.hero-slide {
  perspective: 1000px;
  transform: perspective(1000px);
}

.c-hero-slide-stripes {
  margin-bottom: 5px;
  padding-left: 10px;
  display: flex;
}

.hero {
  height: 100%;
  min-height: 50vh;
}

.slide-cta-text {
  z-index: 10;
  font-family: Publicsans, sans-serif;
  font-weight: 500;
  position: relative;
}

.slide-cta-text.blue {
  color: var(--blue);
}

.slide-cta-text.blue:hover {
  color: var(--white-2);
}

.hero-slider-nav {
  display: none;
}

._w-hero-slider-nav {
  z-index: 15;
  cursor: pointer;
  border-right: 1px solid #333;
  width: 100%;
  height: 100%;
  padding: 20px 15%;
  position: relative;
  overflow: hidden;
}

._w-hero-slide-details {
  border-left: 5px solid var(--dark-green);
  color: var(--white-2);
  background-color: #131313d9;
  width: 450px;
  padding: 30px 40px;
  font-family: Montserrat, sans-serif;
  position: relative;
}

._w-hero-slide-details._1 {
  border-left-color: var(--red);
  background-color: var(--black-opacity);
}

._w-hero-slide-details._3 {
  border-left-color: var(--purple);
}

._w-hero-slide-details._2 {
  border-left-color: var(--yellow);
}

._w-hero-slide-details._4 {
  border-left-color: var(--orange);
}

._w-hero-slide-details._6 {
  border-left-color: var(--green);
}

.hero-slider {
  background-color: #0000;
  height: 83vh;
}

.footer-credit-link {
  color: var(--white-2);
  padding-top: 10px;
  padding-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 13px;
  text-decoration: none;
}

.footer {
  border-bottom: 0px solid var(--blue);
  background-color: var(--dark-blue);
  background-image: url('../images/footdiv.svg');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  display: flex;
  position: sticky;
  bottom: 0;
}

.footer-credit {
  border-top: 0 solid #ffffff30;
  justify-content: center;
  align-items: center;
  width: 60%;
  max-width: 1200px;
  margin-top: 10px;
  margin-bottom: -42px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
}

.footer-link {
  color: #ffffffb3;
  text-transform: none;
  margin-bottom: 7px;
  font-family: Pangram, sans-serif;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  transition: opacity .2s;
}

.footer-link:hover {
  opacity: .8;
}

.footer-link.address {
  margin-left: 0;
}

.image-div.icon {
  border: 1px solid var(--red);
  text-align: center;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin-top: 0;
  margin-right: 10px;
  display: flex;
}

.image-div.icon.purple {
  border-color: var(--purple);
  max-width: 60px;
  max-height: 60px;
}

.image-div.icon.green {
  border-width: 1px;
  border-color: var(--green);
}

.image-div.icon.yello {
  border-color: var(--yellow);
}

.image-div.icon.orange {
  border-color: var(--orange);
}

.image-div.icon.dark-green {
  border-width: 1px;
  border-color: var(--dark-green);
}

.image-div._1 {
  background-image: none;
}

.card-head {
  color: var(--medium-grey);
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 10px;
  font-family: Pangram, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
}

.card-head.red {
  color: var(--red);
  text-align: left;
  letter-spacing: .6px;
  text-transform: none;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  display: flex;
}

.card-head.orange {
  color: var(--orange);
  text-align: left;
  margin-top: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 17px;
}

.card-head.purple {
  color: var(--purple);
  text-align: left;
  letter-spacing: .7px;
  text-transform: capitalize;
  flex: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 300;
}

.card-head.yellow {
  color: var(--dark-yellow);
  text-align: left;
  letter-spacing: .6px;
  text-transform: none;
  text-shadow: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 17px;
}

.card-head.dark-green {
  color: var(--dark-green);
  text-align: left;
  letter-spacing: .6px;
  -webkit-text-stroke-color: var(--dark-green);
  text-transform: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 18px;
}

.card-head.blue {
  color: var(--blue);
  text-align: left;
  letter-spacing: .6px;
  text-transform: none;
  text-shadow: none;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  font-size: 17px;
}

.line {
  background-color: var(--red);
  text-align: center;
  width: 100px;
  height: 3px;
  margin-top: 20px;
  margin-bottom: 30px;
}

.line.center {
  margin-left: auto;
  margin-right: auto;
}

.card-info {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px 20px;
  display: flex;
}

.intro-grid {
  grid-template-rows: auto;
  grid-template-columns: .75fr .75fr;
  max-width: 940px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.filled-container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
}

.filled-container.light-grey {
  padding-top: 0;
}

.small-divider {
  background-image: url('../images/red-divider.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  height: 30px;
  margin-bottom: .5em;
}

.small-divider.yellow {
  background-image: url('../images/yello-divider.svg');
}

.small-divider.purple {
  background-image: url('../images/purple_1.svg');
}

.small-divider.orange {
  background-image: url('../images/orange_1.svg');
}

.small-divider.dark-green {
  background-image: url('../images/dark-green.svg');
}

.small-divider.green {
  background-image: url('../images/green_1.svg');
}

.hero-1 {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.hero-1._3 {
  border-bottom: 1px solid var(--blue);
  background-image: url('../images/bottomhead.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 80vh;
}

.hero-section {
  background-image: url('../images/tecnoserve-wall-logo.jpg');
  background-position: 50% 0;
  background-size: cover;
  align-items: center;
  display: flex;
}

.hero-section._3 {
  background-image: url('../images/walllogolight.jpg');
}

.div-block-8 {
  margin-top: 40px;
}

.container {
  background-color: var(--white-2);
  box-shadow: none;
  border-radius: 10px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 40px 20px;
  display: flex;
}

.container.clients {
  box-shadow: none;
  max-width: 1000px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 60px 10px 0;
}

.blog-cards-wrapper-4 {
  perspective: 1000px;
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
  align-items: center;
  display: block;
}

.image-9 {
  margin-bottom: 10px;
  margin-left: 10px;
}

.service-colour {
  z-index: 10;
  background-color: var(--red);
  justify-content: space-between;
  align-items: flex-end;
  width: 125px;
  padding-left: 10px;
  position: relative;
}

.service-colour.red {
  border-bottom-right-radius: 60px;
}

.service-colour.yellow {
  background-color: var(--yellow);
}

.service-colour.purple {
  background-color: var(--purple);
}

.service-colour.orange {
  background-color: var(--orange);
}

.service-colour.dark-green {
  background-color: var(--dark-green);
}

.service-colour.green {
  background-color: var(--green);
}

.div-block-111 {
  z-index: 100;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  padding-right: 40px;
  display: flex;
  position: absolute;
  inset: auto 96px 0% auto;
}

.bg-color {
  background-color: #f3edff;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  display: flex;
  box-shadow: 0 5px 10px -2px #0000007a;
}

.bg-color.blog-cards-4 {
  background-color: var(--white);
  background-image: none;
  align-items: center;
  max-width: 100%;
  min-height: auto;
  display: block;
}

.service-title {
  color: #fff;
  text-align: right;
  letter-spacing: 1px;
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: #fff;
  text-shadow: -1px -3px 11px #0000009c;
  margin-bottom: 0;
  padding-left: 10px;
  font-family: Pangram, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 31px;
  position: relative;
}

.blog-card-4-base {
  border-bottom-right-radius: 60px;
  flex-direction: row;
  width: 480px;
  height: 250px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 10px #00000059;
}

.div-block-109 {
  z-index: 50;
  background-image: linear-gradient(129deg, var(--dark-green), var(--purple) 0%, var(--dark-green) 103%);
  border-radius: 100%;
  width: 30px;
  height: 30px;
  position: absolute;
  inset: auto 20px 20px auto;
}

.div-block-109.red {
  background-color: var(--red);
  background-image: none;
}

.div-block-109.purple {
  background-image: linear-gradient(129deg, var(--purple), var(--purple) 0%, var(--purple) 103%);
}

.div-block-109.organge {
  background-image: linear-gradient(129deg, var(--orange), var(--purple) 0%, var(--orange) 0%);
}

.div-block-109.dark-green {
  background-image: linear-gradient(129deg, var(--dark-green), var(--dark-green) 0%, #3e4e90 0%, var(--dark-green) 0%, var(--dark-green) 103%);
}

.div-block-109.green {
  background-image: linear-gradient(129deg, var(--green), var(--purple) 0%, var(--green) 0%);
}

.div-block-109.yellow {
  background-image: linear-gradient(129deg, #f5b53ca3, var(--purple) 0%, var(--yellow) 0%);
}

.grid-6 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  padding-left: 0;
  display: grid;
}

.service-div {
  z-index: 1;
  border-left: 5px solid var(--orange);
  background-image: url('../images/projects.jpg');
  background-position: 50%;
  background-size: cover;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 10px;
  padding-right: 20px;
  display: flex;
  position: relative;
}

.service-div._1 {
  border-left: 5px solid var(--red);
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/medium-voltage.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.service-div._2 {
  border-left: 5px solid var(--yellow);
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/automation_1.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.service-div._3 {
  border-left: 5px solid var(--purple);
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/Medium-Voltage_1.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.service-div._6 {
  border-left-color: var(--green);
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/technosolar.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.service-div._5 {
  border-left-color: var(--dark-green);
  background-image: linear-gradient(#fff0, #00000087), url('../images/renewable-energy.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.service-div._4 {
  background-image: linear-gradient(#0000004d, #0000004d), url('../images/Technoserve-images-1.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
}

.small-div {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.mask-2 {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transform: translate(0);
}

.div-block-114 {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 20px;
}

.container-2 {
  background-color: var(--white-2);
  border-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 40px auto;
  padding: 40px 20px;
  display: flex;
  box-shadow: 20px 16px 60px 6px #0003;
}

.container-2.left {
  background-color: var(--transparent);
  box-shadow: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.home-logo-left-gradient {
  background-image: linear-gradient(to right, #fff, #fff0);
  width: 10%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.home-logo-left-gradient.right {
  background-image: linear-gradient(270deg, #fff, #fff0);
  inset: 0% 0% 0% auto;
}

.client-logo {
  opacity: .8;
  height: 4rem;
  min-height: 3rem;
  margin-right: 0;
  padding-left: 20px;
  padding-right: 20px;
  transition: opacity .4s;
}

.client-logo:hover {
  opacity: 1;
}

.client-logo._2 {
  margin-right: 10px;
}

.overline {
  color: var(--blue);
  text-align: center;
  letter-spacing: .08rem;
  text-transform: uppercase;
  margin-bottom: 40px;
  font-size: .7rem;
  font-weight: 500;
}

.clients-grid {
  grid-column-gap: 30px;
  grid-row-gap: 0px;
  opacity: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: center;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.clients-grid.logo-animate-alt {
  flex: none;
  margin-top: 0;
  margin-right: auto;
  display: flex;
}

.clients-grid.logo-animate {
  grid-column-gap: 0px;
  opacity: 1;
  flex: none;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0 0 0 -44px;
  display: flex;
}

.embed {
  display: none;
}

.home-logo-wrapper {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  justify-content: flex-start;
  align-items: center;
  height: 6rem;
  min-height: 5rem;
  margin-top: 1rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.home-logo-wrapper.bottom, .home-logo-wrapper.top {
  margin-top: .125rem;
}

.home-logo-wrapper._3, .home-logo-wrapper._2, .home-logo-wrapper._1 {
  height: 5rem;
}

.logos-marquee {
  max-width: 100%;
}

.logos-marquee.desktop {
  margin-top: 40px;
}

.logos-marquee.mobile {
  display: none;
}

.grid-12 {
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr 1.25fr 1.25fr;
  width: 100%;
  max-width: 1000px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.div-block-116 {
  width: 100%;
  max-width: 100%;
}

.footer-title {
  border-bottom: 0px solid var(--yellow);
  color: var(--white-2);
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 16px;
}

.footer-div {
  flex-flow: column;
  padding-left: 20px;
  display: flex;
}

.footer-div.last {
  padding-left: 0;
}

.image-11 {
  margin-bottom: 20px;
}

.footer-title-wrapper {
  justify-content: flex-start;
  align-items: flex-end;
  margin-bottom: 30px;
  display: flex;
}

.small-line {
  background-color: var(--yellow);
  color: var(--yellow);
  width: 20px;
  height: 1px;
  margin-bottom: 3px;
  margin-left: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
}

.icon-wrapper {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.footer-icon-div {
  width: 15%;
  height: auto;
}

.footer-icon-div._3 {
  width: 15%;
}

.image-12 {
  width: 30px;
  height: auto;
  margin-right: 0;
}

.cta-title {
  color: var(--white-2);
  text-align: center;
  margin-bottom: 9px;
  font-size: 45px;
  font-weight: 500;
  line-height: 50px;
}

.paragraph-3 {
  color: var(--white);
  text-align: center;
  font-family: Pangram, sans-serif;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
}

.icon-2 {
  display: flex;
}

.service-box-link-text {
  z-index: 100;
  transform-origin: 0 0;
  color: var(--white-2);
  flex-direction: column;
  justify-content: flex-end;
  font-family: Pangram, sans-serif;
  font-size: 18px;
  position: absolute;
  inset: 15px -5px auto auto;
  transform: rotate(90deg);
}

.background-video {
  background-image: url('../images/bottomhead2.svg'), radial-gradient(circle, #1f419aa3 11%, #fff0);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: 91%, auto;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  margin-top: -1px;
  margin-left: 0;
  margin-right: auto;
  padding-top: 0;
}

.hero-wrapper {
  z-index: 20;
  text-align: left;
  background-color: #fff0;
  border-radius: 20px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 75%;
  max-width: none;
  height: 80%;
  margin-left: auto;
  padding-bottom: 60px;
  font-size: 30px;
  font-weight: 700;
  display: flex;
  position: relative;
}

.heading-1 {
  color: #134b8f;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 0;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.heading-1.hero {
  aspect-ratio: auto;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 4px #192024;
  justify-content: center;
  align-items: center;
  height: auto;
  margin: 200px auto 20px;
  font-family: Pangram, sans-serif;
  font-size: 1.5em;
  line-height: 1.5em;
  display: flex;
  position: relative;
}

.hero-text {
  letter-spacing: 3px;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 1.4em;
}

.image-1 {
  z-index: 1;
  height: 75%;
}

.image-1.what-we-do-1 {
  margin-top: 66px;
}

.image-2 {
  z-index: 2;
  width: 100%;
  height: 65%;
  transition: transform .2s, opacity .2s;
}

.image-2.what-we-do2 {
  width: auto;
  height: 65%;
  margin-top: 36px;
  margin-left: -20px;
  padding-left: 0;
}

.animation-image-wrapper {
  width: 100%;
  height: 500px;
  margin-top: 42px;
  display: flex;
}

.animation-image-wrapper.mob {
  display: none;
}

.animation-image-wrapper.wwd {
  height: 600px;
}

.cta-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  margin-top: 30px;
  margin-left: 5%;
  margin-right: 5%;
  padding: 60px 20px;
  display: flex;
}

.text-block-3 {
  color: var(--white-2);
  text-align: center;
  font-size: 20px;
}

.card-title-wrapper {
  z-index: 100;
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  padding-right: 40px;
  display: flex;
  position: absolute;
  inset: auto 96px 0% auto;
}

.div-titles {
  text-align: left;
  margin-bottom: 18px;
}

.page-headers {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #fff;
  background-image: url('../images/divider-white-bottom.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/manual-therapy-2.jpg');
  background-position: 100% 100%, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: auto, auto, auto;
  grid-template-rows: auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  height: 70vh;
  min-height: 600px;
  margin-bottom: 0;
  padding: 130px 130px 130px 55px;
}

.page-headers.pp {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Ignis-Testing.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.eee {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/medium-voltage.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
  padding-right: 0;
}

.page-headers.automation {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/automation_1.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.med-volt {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Medium-Voltage_1.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.epc-projects {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Technoserve-images-1.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.ren-ener {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
  background-position: 0 0, 0 0, 50% 100%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 60vh;
  margin-top: -1px;
  padding-left: 0;
  padding-right: 0;
}

.page-headers.compoverview {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(180deg, #ffffff24, var(--dark-blue) 0%, #0a2343b5 0%, #192a404a 11%, #192a404a), url('../images/What-we-do-and-services-header5.jpg');
  background-position: 0 0, 0 0, 50% 30%;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: 91%, auto, cover;
  background-attachment: scroll, scroll, scroll;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.careers {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Careers-header.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.technosolar {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
  background-position: 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.faq {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a 54%), url('../images/FAQ-Header.jpg');
  background-position: 0 0, 0 0, 50% 20%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
}

.page-headers.contact {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a 19%), url('../images/Contact-us-header.jpg');
  background-position: 0 0, 0 0, 50% 80%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
}

.page-headers.re {
  background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
  background-position: 0 0, 0 0, 50% 100%;
  background-repeat: no-repeat, repeat, repeat;
  background-size: 91%, auto, cover;
  height: 60vh;
  min-height: 70vh;
  margin-top: -1px;
  padding-right: 0;
}

.title-wrap-2 {
  width: 100%;
  margin-top: 40px;
}

.header-title {
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 1px 2px 1px #00000075;
  margin: 0 auto 10px;
  padding-left: 8%;
  font-family: Pangram, sans-serif;
  font-size: 60px;
  font-weight: 900;
  line-height: 1.2em;
  transition: transform .2s, opacity .4s;
}

.header-title.center {
  margin-top: 0%;
  padding-top: 10%;
  padding-left: 8%;
  font-size: 55px;
  font-weight: 700;
}

.icon-3 {
  color: var(--white-2);
  margin-bottom: 10px;
  margin-right: 0;
}

.dropdown-toggle {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 20px;
}

.dropdown-link {
  font-size: 14px;
}

.dropdown-link:hover {
  background-color: var(--light-grey);
  color: var(--blue);
  font-weight: 700;
}

.dropdown-link.w--current {
  color: var(--blue);
}

.dropdown-list-2 {
  padding-left: 20px;
}

.dropdown-list-2.w--open {
  border-bottom-right-radius: 60px;
  margin-left: 20px;
  padding-left: 0;
  transition: transform .6s, box-shadow .5s;
}

.section-4 {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.div-block-118 {
  background-image: url('../images/Mission.jpg');
  background-position: 70%;
  background-size: cover;
  width: 100%;
  height: 450px;
  margin-top: 0;
}

.container-8 {
  background-color: var(--blue);
  margin-top: 50px;
  margin-bottom: 80px;
  margin-left: -101px;
  padding: 20px 20px 10px 40px;
}

.heading-white {
  color: var(--white-2);
}

.content-div {
  margin-bottom: 80px;
  padding-top: 0;
}

.subtitle {
  color: var(--red);
  margin-bottom: 20px;
  font-family: Pangram, sans-serif;
  font-size: 20px;
  font-weight: 400;
}

.member-grid {
  grid-template-rows: auto;
  grid-template-columns: .25fr .75fr;
  margin-top: 45px;
  margin-bottom: 45px;
}

.bold-text {
  line-height: 25px;
}

.thumbnail {
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/background-image.svg');
  background-position: 50%;
  background-size: cover;
  border-radius: 50%;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 25px;
  display: flex;
  position: absolute;
  inset: 1em 0 0;
}

.thumbnail._3 {
  background-image: linear-gradient(180deg, #fff0 25%, var(--blue)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  margin-top: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._2 {
  background-image: linear-gradient(180deg, #fff0 25%, var(--blue)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._1 {
  background-image: linear-gradient(180deg, #fff0 3%, #fff0 46%, #5771b3bf 75%, var(--blue)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  margin-top: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._4 {
  background-image: linear-gradient(180deg, #fff0 26%, var(--blue)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  margin-top: 0;
  padding: 10px;
  top: 1em;
}

.thumbnail._5 {
  background-image: linear-gradient(180deg, #fff0 46%, var(--red)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._6 {
  background-image: linear-gradient(180deg, #fff0 31%, var(--purple)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  margin-top: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._7 {
  background-image: linear-gradient(180deg, #bfd8c154 12%, #fff0 54%, var(--green)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  margin-top: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.thumbnail._8, .thumbnail._7 {
  background-image: linear-gradient(180deg, #fff0 58%, var(--green)), url('../images/placeholder.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border-radius: 100%;
  margin-top: 0;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

.team-position {
  text-align: center;
  text-shadow: 0 1px 1px #00000052;
  margin-bottom: 21px;
  font-family: Publicsans, sans-serif;
  font-size: 13px;
  font-weight: 300;
}

.border {
  border-top: 1px #000;
  border-bottom: 120px solid var(--blue);
  color: #fff;
  background-color: #0000;
  border-radius: 50%;
  width: 230px;
  height: 225px;
  position: absolute;
  inset: 4px 0 0;
}

.border.red {
  border-bottom-width: 120px;
  border-bottom-color: var(--red);
  height: 230px;
}

.border.purple {
  border-top-width: 0;
  border-bottom-width: 120px;
  border-bottom-color: var(--purple);
  height: 230px;
}

.border.green {
  border-top-width: 0;
  border-bottom-width: 120px;
  border-bottom-color: var(--green);
  top: 4px;
  bottom: 0;
}

.team-name {
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 10px #000000c4;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 15px;
}

.flex-container {
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin-top: 40px;
  display: flex;
}

.team-wrap {
  color: #fff;
  width: 230px;
  height: 230px;
  margin-bottom: 0;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  inset: 4px 0 0;
}

.light-grey-section {
  background-color: #f3f3f3c7;
  padding-top: 40px;
  padding-bottom: 0;
}

.code-embed {
  margin-top: 40px;
}

.bold-text-4, .bold-text-5 {
  text-transform: none;
  text-shadow: none;
  font-weight: 600;
}

.grid-18 {
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr;
  margin-top: 30px;
  margin-bottom: 40px;
}

.image-13 {
  max-width: 90%;
}

.icon-service-wrapper {
  justify-content: center;
  align-items: center;
  margin-top: 0;
  display: flex;
}

.image-14 {
  max-width: 90%;
}

.bold-text-13 {
  font-weight: 400;
}

.project-logo {
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.faq-item {
  background-color: var(--white-2);
  border: 1px #212121;
  border-radius: 25px;
  box-shadow: 0 10px 20px #0000000d;
}

.main-container {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1050px;
  display: flex;
}

.main-container.centre {
  align-items: center;
}

.minus {
  background-color: #fff;
  border-radius: 20px;
  width: 38%;
  height: 2px;
  position: absolute;
}

.faq-answer-inner {
  padding: 0 20px 20px 90px;
  overflow: visible;
}

.faq-answer-inner._1-column {
  padding-left: 20px;
}

.p-m-wrap {
  background-image: linear-gradient(52deg, var(--green) 100%, #07f);
  border-radius: 50px;
  justify-content: center;
  align-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  margin-bottom: 10px;
  margin-left: 60px;
  display: flex;
  position: relative;
}

.p-m-wrap.red {
  background-image: linear-gradient(52deg, var(--red) 100%, #07f);
  text-transform: none;
}

.p-m-wrap.purple {
  background-image: linear-gradient(52deg, var(--purple) 100%, #07f);
  justify-content: center;
  align-items: center;
}

.p-m-wrap.yellow {
  background-image: linear-gradient(52deg, var(--yellow) 100%, #07f);
}

.p-m-wrap.orange {
  background-image: linear-gradient(52deg, var(--orange) 100%, #07f);
}

.p-m-wrap.dark-grreen {
  background-image: linear-gradient(52deg, var(--dark-green) 100%, #07f);
}

.p-m-wrap.blue {
  background-image: linear-gradient(52deg, var(--blue) 100%, #07f);
}

.plus {
  background-color: #fff;
  border-radius: 20px;
  width: 2px;
  height: 38%;
  position: absolute;
}

.h3 {
  color: #000;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 800;
}

.faq-question {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 10px 0 20px;
  text-decoration: none;
  display: flex;
}

.faq-wrap {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 40px;
  display: grid;
}

.h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
}

.faq-answer {
  overflow: hidden;
}

.division {
  text-align: center;
  margin-top: 20px;
  font-family: Pangram, sans-serif;
}

.project-title {
  color: var(--dark-blue);
  -webkit-text-stroke-color: var(--orange);
  text-shadow: none;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: Pangram, sans-serif;
  font-weight: 600;
}

.project-info {
  margin-top: 20px;
  padding-left: 20px;
}

.project-info._2 {
  border-bottom: 1px solid var(--medium-grey);
  margin-top: 20px;
  padding-bottom: 60px;
}

.video-div {
  margin-top: 40px;
  padding-left: 20px;
}

.grid-2-cols {
  grid-template-rows: auto auto;
  grid-template-columns: .25fr 1fr;
  margin-top: 20px;
  margin-bottom: 30px;
}

.grid-multiple-rows {
  grid-template-rows: auto auto auto auto;
  grid-template-columns: .25fr 1fr;
  margin-top: 20px;
  margin-bottom: 40px;
}

.dot {
  color: var(--green);
  font-size: 13px;
}

.home-intro-grid {
  grid-template-rows: auto;
  grid-template-columns: .5fr .5fr;
  margin-bottom: 0;
  padding: 50px 0 0;
}

.home-intro-grid.wwd {
  grid-template-columns: .5fr .5fr;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

.heading-4 {
  margin-bottom: 0;
}

.list {
  margin-top: 20px;
}

.para-title {
  color: var(--medium-grey);
  text-shadow: none;
  margin-bottom: 0;
  font-family: Pangram, sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5em;
}

.contact-title {
  color: var(--blue);
  text-align: center;
  text-transform: uppercase;
  text-shadow: none;
  font-size: 20px;
  font-weight: 600;
}

.contact-title.blue {
  letter-spacing: 1px;
  font-family: Pangram, sans-serif;
  font-weight: 500;
}

.contact-title.red {
  color: var(--red);
  letter-spacing: 1px;
  font-family: Pangram, sans-serif;
  font-weight: 500;
}

.contact-title.purple {
  color: var(--yellow);
  letter-spacing: 1px;
  font-family: Pangram, sans-serif;
}

.container-9 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-icon-link {
  opacity: 1;
  color: #fff;
  text-transform: uppercase;
  flex: none;
  padding-top: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  transition: all .2s linear;
}

.footer-icon-link:hover {
  color: #fff;
}

.footer-icon-link.w--current {
  opacity: 1;
  color: #1a1b1f;
  font-weight: 600;
}

.footer-icon {
  width: 20px;
  margin-right: 20px;
  overflow: visible;
}

.contact-link {
  color: #363b46;
  text-shadow: none;
  background-image: none;
  background-repeat: repeat;
  background-size: auto;
  font-weight: 400;
  text-decoration: none;
  transition: all .2s linear;
  display: inline;
}

.contact-link:hover {
  color: var(--blue);
  background-position: 50% 100%;
  background-size: auto 100%;
}

.maps-embed {
  width: 100%;
  margin-top: 20px;
}

.footer-link-wrap-icon {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.block {
  text-align: left;
  background-color: #fff;
  background-image: url('../images/blue-divider.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 7px;
  flex-flow: column;
  align-items: flex-start;
  padding: 20px 25px 60px;
  display: flex;
  box-shadow: 0 10px 30px #0003;
}

.block.red {
  background-image: url('../images/red-divider.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto;
  padding-bottom: 0;
}

.block.purple {
  background-image: url('../images/purple_1.svg');
}

.block.dark-green {
  background-image: url('../images/dark-green.svg');
}

.block.orange {
  background-image: url('../images/orange_1.svg');
}

.block.green {
  background-image: url('../images/green_1.svg');
}

.contact-maps-grid {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  grid-template-rows: auto;
  margin-top: 60px;
}

.red {
  color: var(--red);
  font-family: Pangram, sans-serif;
}

.purplr {
  color: var(--purple);
  font-family: Pangram, sans-serif;
}

.green {
  color: var(--green);
  font-family: Pangram, sans-serif;
}

.dark-green {
  color: var(--dark-green);
  font-family: Pangram, sans-serif;
}

.orange {
  color: var(--orange);
  font-family: Pangram, sans-serif;
}

.yellow {
  color: var(--yellow);
  font-family: Pangram, sans-serif;
}

.intro {
  grid-template-rows: auto;
  grid-template-columns: .5fr .5fr;
  margin-bottom: 0;
  padding: 0;
}

.intro.our-work {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: .5fr .5fr;
  max-width: 950px;
  margin-left: auto;
  margin-right: auto;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 500px;
  display: flex;
}

.faq-wrap-1-column {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  flex-direction: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  display: grid;
}

.container-10 {
  padding-top: 40px;
}

.bold-text-17 {
  font-family: Pangram, sans-serif;
}

.noteworthy-container {
  margin-top: 40px;
}

.service-section-home {
  background-color: var(--white);
  background-image: url('../images/top-red.svg'), linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
  background-position: 100% 100%, 0 0, 50%;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: 101%, auto, cover;
  background-attachment: scroll, scroll, fixed;
  flex-flow: column;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 40px 80px;
}

.service-section-home.no-div {
  background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  padding-top: 40px;
  padding-bottom: 20px;
}

.service-section-home.top-space {
  background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, fixed;
  padding-top: 100px;
}

.service-block-subheading {
  color: var(--white-2);
  text-align: center;
  font-family: Pangram, sans-serif;
  font-size: 20px;
}

.code-embed-2 {
  width: 100%;
  max-width: 940px;
}

.grid-19 {
  grid-template-rows: auto auto;
}

.subopskrif {
  text-align: center;
  text-shadow: none;
  margin-top: 10px;
  font-family: Pangram, sans-serif;
}

.mt {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.tabs {
  max-width: 1000px;
  display: flex;
}

.tabs.margin-bottom.margin-medium {
  max-width: 1200px;
}

.button-3 {
  color: #333;
  background-color: #0000;
  border: 3px solid #006cff;
  border-radius: 8px;
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.2;
}

.button-3:hover {
  color: #fff;
  background-color: #006cff;
}

.icon-4 {
  width: 48px;
  height: 48px;
}

.is--tab-heading {
  font-family: Pangram, sans-serif;
  font-size: 25px;
  line-height: 32px;
}

.tab {
  opacity: .5;
  background-color: #0000;
  padding: 0;
}

.tab.w--current {
  opacity: 1;
  background-color: #0000;
  padding: 0;
  font-weight: 400;
}

.tabs-content {
  background-color: #fff;
  flex: 1;
  padding: 2em;
}

.margin-bottom.margin-medium {
  margin-bottom: 2em;
}

.box {
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px 0 0 5px;
  justify-content: flex-start;
  align-items: center;
  padding: 2em;
  display: flex;
}

._w-footer {
  justify-content: space-between;
  margin-top: 30px;
  display: flex;
}

.subtitle-2 {
  color: #006cff;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 400;
}

.div-block-119 {
  margin-left: 2em;
  margin-right: 2em;
}

.tabs-menu {
  flex-direction: column;
  width: 400px;
  display: flex;
}

.portfolio-div {
  width: 1000px;
  max-width: 1000px;
  margin-top: 40px;
}

.portfolio-block {
  text-align: left;
  background-color: #fff;
  background-image: url('../images/blue-divider.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto;
  border-radius: 7px;
  flex-flow: column;
  align-items: flex-start;
  width: 1000px;
  max-width: 940px;
  padding: 20px 20px 60px;
  display: flex;
  box-shadow: 0 10px 30px #0003;
}

.portfolio-block.red {
  background-image: url('../images/red-divider.svg');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto;
  width: 1000px;
  max-width: 1000px;
  padding-bottom: 40px;
}

.portfolio-block.purple {
  background-image: url('../images/purple_1.svg');
}

.portfolio-block.dark-green {
  background-image: url('../images/dark-green.svg');
  width: 1000px;
  max-width: 1000px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.portfolio-block.orange {
  background-image: url('../images/orange_1.svg');
}

.portfolio-block.green {
  background-image: url('../images/green_1.svg');
}

.clients-section {
  z-index: 0;
  text-align: left;
  padding-bottom: 10px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.clients-section.header {
  color: var(--white-2);
  background-image: linear-gradient(#0000000f, #0000000f), url('../images/back.svg'), url('../images/dividerwhite.svg');
  background-position: 0 0, 0 100%, 50% 100%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: auto, 1200px, auto;
}

.clients-section.with-back {
  background-image: url('../images/background-swirl2.svg'), linear-gradient(#92929229, #92929229);
  background-position: 0 0, 0 0;
  background-repeat: no-repeat, repeat;
  background-size: cover, auto;
  background-attachment: fixed, scroll;
  margin-bottom: 100px;
  padding-top: 10px;
  padding-left: 10px;
}

.clients-section.divider {
  background-image: url('../images/dividers.svg'), url('../images/yellow-top-white.svg');
  background-position: 0 0, 50% 100%;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, auto;
  margin-bottom: 100px;
  margin-left: 10px;
  padding-bottom: 80px;
}

.clients-section.icons-back {
  background-image: url('../images/ICONS.svg');
  background-position: 105% 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 100px;
  margin-left: 10px;
}

.clients-section.forms {
  background-image: linear-gradient(#faf4f4cc, #faf4f4cc), url('../images/background.svg');
  background-position: 0 0, 0 0;
  background-repeat: repeat, repeat;
  background-size: auto, cover;
  margin-top: 60px;
}

.clients-section.buttons {
  background-image: url('../images/BUTTONS.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-bottom: 100px;
  margin-left: 10px;
}

.clients-section.images {
  background-image: url('../images/IMAGES.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-left: 10px;
}

.clients-section.colours {
  background-image: url('../images/COLOURS.svg');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto;
  margin-top: 30px;
  margin-left: 10px;
}

.clients-section.reviews {
  z-index: 9;
  background-color: var(--white);
  color: var(--white);
  padding: 20px;
}

.clients-section.cta {
  z-index: 2;
  background-image: url('../images/bottom-red.svg'), linear-gradient(#00000040, #00000040), linear-gradient(#001e45f5, #fff0), url('../images/CTA.jpg');
  background-position: 50% 0, 0 0, 0 0, 50%;
  background-repeat: no-repeat, repeat, repeat, repeat;
  background-size: 100%, auto, auto, cover;
  background-attachment: scroll, scroll, scroll, fixed;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 0;
  display: flex;
}

.leadership {
  display: none;
}

.grid-20 {
  grid-template-rows: auto;
}

.major-projects-embed {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 30px 0 20px;
  display: flex;
}

.major-projects-embed.left {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  height: auto;
  padding-top: 0;
}

.major-projects-embed.small {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.image-1-wwd {
  z-index: 1;
  vertical-align: baseline;
  width: auto;
  height: 75%;
  margin-top: 0;
}

.image-2-wwd {
  z-index: 2;
  width: 100%;
  height: 60%;
  margin-top: -30px;
  margin-left: -191px;
  padding-left: 0;
  transition: transform .2s, opacity .2s;
  display: block;
}

.text-span {
  color: var(--dark-grey);
}

.image-3-wwd {
  z-index: 2;
  width: auto;
  height: 65%;
  margin-top: 0;
  margin-right: 0;
  padding-top: 0;
  padding-left: 0;
  transition: transform .2s, opacity .2s;
  display: block;
}

.image-2-wwd-copy {
  z-index: 2;
  width: 100%;
  height: 45%;
  margin-top: 280px;
  margin-left: -220px;
  padding-left: 0;
  transition: transform .2s, opacity .2s;
  display: block;
}

.image-1-what-we-do {
  z-index: 1;
  height: 75%;
}

.image-4 {
  z-index: 1;
  text-align: right;
  height: 60%;
  margin-top: 0;
  margin-bottom: 48px;
  margin-left: 0;
  padding-left: 93px;
}

.image-4.what-we-do-1 {
  margin-top: 66px;
}

.image-2-copy {
  z-index: 2;
  width: 100%;
  height: 60%;
  margin-top: -183px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 155px;
  transition: transform .2s, opacity .2s;
  display: block;
}

.image-2-copy.what-we-do2 {
  width: auto;
  height: 65%;
  margin-top: 36px;
  margin-left: -20px;
  padding-left: 0;
}

.wwd-div-1 {
  margin-bottom: 20px;
  margin-right: 0;
}

.image-16 {
  height: 385.328px;
}

.membership {
  padding-top: 10px;
}

.grid-21 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: auto;
  width: 1000px;
}

.animation-image-wrapper-wwd {
  flex-flow: column;
  width: 100%;
  height: 600px;
  margin-top: 42px;
  display: flex;
}

.animation-image-wrapper-wwd.mob {
  display: none;
}

.animation-image-wrapper-wwd.wwd {
  height: 600px;
}

.animation-image-wrapper-wwd.desk {
  margin-top: -42px;
}

.heading-5 {
  margin-top: 0;
}

.mission-section {
  z-index: 2;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr .75fr;
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.wware-div {
  margin-bottom: 70px;
  padding-top: 0;
}

@media screen and (min-width: 1280px) {
  .sg-nav, .sg-nav-container {
    width: 280px;
  }

  .sg-content {
    margin-left: 280px;
  }

  .paragraph.center {
    font-size: 17px;
  }

  .sg-section {
    background-size: 80px;
  }

  .ds-icon-grid {
    margin-top: 114px;
  }

  .ds-section-header {
    margin-top: 123px;
  }

  .button-2.orange, .button-2.green {
    font-size: 14px;
  }

  .d-131-logo-link-block {
    background-image: url('../images/ABinBev.svg');
  }

  .d-131-logo-link-block._4 {
    background-image: url('../images/Atlantis-Foundries.svg');
  }

  .d-131-logo-link-block._2 {
    background-image: url('../images/Aqunion.svg');
    background-repeat: no-repeat;
    background-size: 100px;
  }

  .d-131-logo-link-block._3 {
    background-image: url('../images/aspen.svg');
  }

  .d-131-logo-link-block._9 {
    background-image: url('../images/CBRE.svg');
    background-position: 50%;
    background-size: 80px;
  }

  .d-131-logo-link-block._10 {
    background-image: url('../images/aspen.svg');
  }

  .d-131-logo-link-block._11 {
    background-image: url('../images/Atlantis-Foundries.svg');
  }

  .d-131-logo-link-block._16 {
    background-image: url('../images/Elgin-Orchards.svg');
    background-repeat: no-repeat;
    background-size: 80px;
  }

  .d-131-logo-link-block._17 {
    background-image: url('../images/ESKOM.svg');
  }

  .d-131-logo-link-block._18 {
    background-image: url('../images/Get-metal.png');
  }

  .d-131-logo-link-block._20, .d-131-logo-link-block._21 {
    background-size: 100px;
  }

  .d-131-logo-link-block._23 {
    background-size: 110px;
  }

  .navbar_upper-wrap {
    margin-left: 17px;
  }

  .brand_logo {
    margin-left: 10px;
    padding-bottom: 0;
  }

  .navbar_container {
    background-image: url('../images/tophead3.svg');
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 103%;
  }

  .section-2 {
    background-image: url('../images/top-red.svg'), linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 100% 100%, 0 0, 50%;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: 101%, auto, cover;
    background-attachment: scroll, scroll, fixed;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .section-2.no-divider {
    background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
    justify-content: center;
    align-items: center;
  }

  .section-2.top-space {
    background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .slide-cta {
    font-family: Publicsans, sans-serif;
  }

  .footer {
    background-image: url('../images/footdiv.svg');
    background-position: 50% 100%;
    background-size: auto;
  }

  .intro-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }

  .filled-container.light-grey {
    border-top-right-radius: 0;
    border-bottom-right-radius: 80px;
    padding: 20px 20px 40px;
  }

  .hero-1._3 {
    background-image: url('../images/bottomhead.svg');
    background-repeat: no-repeat;
    background-size: auto;
  }

  .container {
    background-color: var(--white);
    border-radius: 20px;
    padding: 60px 20px;
  }

  .container.clients {
    margin-bottom: 20px;
  }

  .grid-6 {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    place-content: stretch;
  }

  .small-div {
    width: 70%;
  }

  .mask-2 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
  }

  .div-block-114 {
    margin-right: 0;
  }

  .container-2 {
    background-color: var(--white);
    border-radius: 20px;
    padding: 20px;
  }

  .container-2.left {
    background-color: var(--transparent);
  }

  .background-video {
    background-image: url('../images/bottomhead2.svg'), radial-gradient(circle, #1f419aa3 11%, #fff0);
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 93%, auto;
    width: 100%;
    max-width: 100%;
  }

  .image-2 {
    height: 65%;
  }

  .image-2.what-we-do2 {
    height: 70%;
  }

  .animation-image-wrapper {
    margin-top: 0;
  }

  .page-headers.eee {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/medium-voltage.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .page-headers.automation {
    background-size: 93%, auto, cover;
  }

  .page-headers.med-volt {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Medium-Voltage_1.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .page-headers.epc-projects {
    background-image: url('../images/bottomhead2.svg'), url('../images/headbottom6.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Technoserve-images-1.jpg');
    background-position: 0 0, 0 0, 0 0, 50%;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 93%, 98%, auto, cover;
  }

  .page-headers.ren-ener {
    background-size: 93%, auto, cover;
  }

  .page-headers.compoverview {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213aa8 0%, #192a4026 18%), url('../images/What-we-do-and-services-header5.jpg');
    background-position: 0 0, 0 0, 50% 35%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .page-headers.careers {
    background-size: 91%, auto, cover;
    min-height: 70vh;
  }

  .page-headers.technosolar {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .page-headers.faq {
    background-size: 93%, auto, cover;
    padding-top: 130px;
  }

  .page-headers.contact {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a 40%), url('../images/Contact-us-header2.jpg');
    background-position: 0 0, 0 0, 50% 70%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .page-headers.re {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
    background-position: 0 0, 0 0, 50% 100%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 93%, auto, cover;
  }

  .header-title, .header-title.center {
    padding-left: 10%;
  }

  .div-block-118 {
    background-position: 80%;
  }

  .container-8 {
    margin-top: 50px;
    margin-bottom: 99px;
    padding-bottom: 20px;
  }

  .home-intro-grid {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 1100px;
    max-width: 1200px;
    margin-left: -8px;
    margin-right: auto;
    padding-bottom: 0;
  }

  .intro {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0;
  }

  .service-section-home {
    background-image: url('../images/top-red.svg'), linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 100% 100%, 0 0, 50%;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: 101%, auto, cover;
    background-attachment: scroll, scroll, fixed;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .service-section-home.no-div {
    background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
    justify-content: center;
    align-items: center;
  }

  .service-section-home.top-space {
    background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .clients-section {
    background-size: 80px;
  }

  .image-2-wwd {
    height: 65%;
  }

  .image-3-wwd {
    height: 75%;
  }

  .image-2-wwd-copy {
    height: 65%;
  }

  .image-4 {
    margin-bottom: 0;
    padding-left: 84px;
    padding-right: 0;
  }

  .image-2-copy {
    width: 100%;
    margin-top: -126px;
    padding-right: 150px;
  }

  .image-2-copy.what-we-do2 {
    height: 70%;
  }

  .wwd-div-1 {
    margin-right: 0;
  }

  .membership {
    padding-top: 0;
  }

  .grid-21 {
    grid-template-rows: auto;
    margin-left: 0;
    padding-left: 0;
  }

  .animation-image-wrapper-wwd {
    margin-top: 0;
  }

  .animation-image-wrapper-wwd.desk {
    margin-right: 200px;
  }
}

@media screen and (min-width: 1440px) {
  .paragraph.large.left {
    padding-right: 5px;
  }

  .sg-section.reviews {
    padding-top: 60px;
  }

  .body-section {
    margin-bottom: 40px;
  }

  .body-section.noteworthy.red, .body-section.noteworthy.dark-green-top {
    padding-top: 40px;
  }

  .navbar_upper-wrap {
    padding-top: 16px;
  }

  .navbar {
    padding-left: 0;
  }

  .nav_link {
    padding-top: 15px;
  }

  .brand_logo {
    width: 190px;
    margin-left: 0;
    padding-bottom: 0;
  }

  .navbar_container {
    background-image: url('../images/tophead3.svg');
    background-position: 50% 0;
    background-size: 105%;
    padding-left: 20px;
  }

  .navbar_container.blue {
    background-position: 100% 0;
    background-size: 100%;
    padding-left: 20px;
  }

  .section-2 {
    background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
    padding-top: 70px;
    padding-bottom: 60px;
  }

  .section-2.no-divider {
    background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .hero {
    display: block;
  }

  .footer-credit {
    padding-bottom: 14px;
  }

  .intro-grid {
    margin-bottom: 0;
  }

  .filled-container {
    padding-top: 0;
  }

  .filled-container.light-grey {
    background-color: var(--transparent);
  }

  .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .container.clients {
    margin-top: 0;
    padding-top: 40px;
  }

  .container-2.left {
    padding-top: 20px;
  }

  .grid-12 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer-title-wrapper {
    margin-bottom: 42px;
  }

  .background-video {
    background-image: url('../images/bottomhead2.svg'), radial-gradient(circle, #1f419aa3 11%, #fff0);
    background-size: 91%, auto;
    margin-left: -1px;
  }

  .page-headers.pp {
    font-size: 35px;
  }

  .page-headers.eee, .page-headers.automation {
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .page-headers.med-volt {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Medium-Voltage_1.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .page-headers.epc-projects {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Technoserve-images-1.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .page-headers.ren-ener {
    font-size: 35px;
  }

  .page-headers.compoverview {
    background-image: url('../images/bottomhead2.svg'), url('../images/headbottom6.svg'), linear-gradient(#ffffff40, #0d213ad1 0%, #192a4014 22%), url('../images/What-we-do-and-services-header5.jpg');
    background-position: 0 0, 0 0, 0 0, 50% 30%;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 91%, 98%, auto, cover;
    font-size: 35px;
  }

  .page-headers.careers {
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .page-headers.technosolar {
    background-image: url('../images/bottomhead2.svg'), url('../images/headbottom6.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
    background-position: 0 0, 0 0, 0 0, 50%;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 91%, auto, auto, auto;
    font-size: 35px;
  }

  .page-headers.faq {
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .page-headers.contact {
    background-image: url('../images/bottomhead2.svg'), url('../images/headbottom6.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a 39%), url('../images/Contact-us-header2.jpg');
    background-position: 0 0, 0 0, 0 0, 50% 70%;
    background-repeat: no-repeat, no-repeat, repeat, repeat;
    background-size: 91%, 98%, auto, cover;
    font-size: 35px;
  }

  .page-headers.re {
    background-size: 91%, auto, cover;
    font-size: 35px;
  }

  .title-wrap-2 {
    margin-top: 100px;
  }

  .header-title {
    padding-left: 14%;
  }

  .header-title.center {
    padding-top: 5%;
    padding-left: 15%;
  }

  .container-8 {
    margin-top: 60px;
  }

  .home-intro-grid {
    margin-bottom: 0;
    margin-left: -11px;
  }

  .intro {
    margin-bottom: 0;
  }

  .service-section-home.no-div {
    background-image: linear-gradient(#ffffffa1, #ffffffa1), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .clients-section.reviews {
    padding-top: 60px;
  }

  .image-1-wwd {
    margin-top: 0;
    margin-right: -8px;
  }

  .image-2-wwd {
    height: 60%;
    margin-left: -230px;
    box-shadow: 0 2px 5px #0000;
  }

  .image-3-wwd {
    height: 75%;
    margin-top: 0;
    margin-right: -32px;
    padding-left: 0;
  }

  .image-2-wwd-copy {
    height: 60%;
    margin-left: -230px;
    box-shadow: 0 2px 5px #0000;
  }

  .image-4 {
    padding-left: 87px;
  }

  .image-2-copy {
    margin-top: -132px;
    padding-right: 152px;
  }

  .grid-21 {
    grid-template-columns: 1fr 1fr;
    padding-top: 20px;
  }

  .mission-section {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1920px) {
  .sg-title {
    margin-top: 220px;
  }

  .paragraph.large, .paragraph.center {
    font-size: 18px;
  }

  .sg-section.with-back {
    padding-top: 10px;
  }

  .sg-section.divider {
    margin-bottom: 220px;
  }

  .sg-section.forms {
    background-image: linear-gradient(#faf4f4cc, #faf4f4cc), url('../images/background.svg');
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    margin-top: 0;
    padding-top: 2px;
  }

  .sg-section.reviews {
    padding-top: 60px;
  }

  .ds-icon-grid {
    margin-top: 200px;
  }

  .ds-section-header, .div-block {
    margin-top: 220px;
  }

  .button-2.red {
    letter-spacing: .1px;
  }

  .button-2.yellow, .button-2.purple, .button-2.orange, .button-2.dark-green, .button-2.green {
    font-size: 14px;
  }

  .body-section, .body-section.noteworthy.red, .body-section.noteworthy.orange-top, .body-section.noteworthy.green-top, .body-section.noteworthy.yello-top, .body-section.noteworthy.purple-top, .body-section.noteworthy.dark-green-top {
    padding-top: 60px;
  }

  .navbar_upper-wrap {
    margin-left: 41px;
    padding-top: 20px;
  }

  .text-color-primary.hover, .nav_link {
    font-size: 15px;
  }

  .brand_logo {
    width: 240px;
    margin-bottom: 10px;
    margin-left: 0;
    padding-bottom: 0;
  }

  .navbar_container {
    background-position: 50% 0;
    background-size: 100%;
    padding-left: 10px;
    display: block;
  }

  .navbar_container.blue {
    background-size: 100%;
    height: 7.1em;
    padding-left: 10px;
  }

  .section-2 {
    background-image: linear-gradient(#ffffffb5, #ffffffb5), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
    padding-bottom: 80px;
  }

  .section-2.no-divider {
    padding-top: 40px;
  }

  .footer {
    border-bottom-color: var(--transparent);
    background-image: url('../images/footdiv.svg');
  }

  .footer-credit {
    margin-bottom: -36px;
    padding-top: 0;
  }

  .filled-container {
    line-height: 25px;
  }

  .filled-container.light-grey {
    padding-bottom: 40px;
  }

  .hero-1._3 {
    margin-top: -1px;
  }

  .hero-section {
    background-image: url('../images/tecnoserve-wall-logo.jpg');
    background-position: 50%;
  }

  .hero-section._3 {
    background-image: url('../images/walllogolight.jpg');
  }

  .container.clients {
    margin-top: 0;
    padding-top: 40px;
  }

  .grid-12 {
    margin-top: 0;
    margin-bottom: 60px;
  }

  .background-video {
    background-image: url('../images/bottomhead2.svg'), radial-gradient(circle, #1f419aa3 11%, #fff0);
    background-position: 0 0, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 91%, auto;
    margin-left: -1px;
  }

  .hero-wrapper {
    justify-content: center;
    align-items: flex-start;
    width: 65%;
    height: 80vh;
    margin-right: auto;
  }

  .heading-1.hero {
    font-size: 1.8em;
  }

  .hero-text {
    font-size: 1.7em;
  }

  .image-1 {
    height: 80%;
  }

  .image-2 {
    height: 70%;
  }

  .animation-image-wrapper.wwd {
    width: 70%;
  }

  .cta-container {
    margin-top: 20px;
  }

  .page-headers.eee {
    padding-left: 0;
  }

  .page-headers.automation, .page-headers.med-volt, .page-headers.epc-projects {
    background-size: 90%, auto, cover;
  }

  .page-headers.ren-ener {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
    background-position: 0 0, 0 0, 50% 100%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 90%, auto, cover;
  }

  .page-headers.compoverview {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213ad6 0%, #192a4000 24%), url('../images/What-we-do-and-services-header4.jpg');
    background-position: 0 0, 0 0, 50% 40%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 91%, auto, cover;
  }

  .page-headers.careers, .page-headers.technosolar {
    background-size: 101%, auto, cover;
  }

  .page-headers.technosolar {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 90%, auto, auto;
  }

  .page-headers.faq {
    background-size: 90%, auto, cover;
  }

  .page-headers.contact {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404f 39%, #192a404a), url('../images/Contact-us-header.jpg');
    background-position: 0 0, 0 0, 50% 60%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 91%, auto, cover;
  }

  .page-headers.re {
    padding-left: 0;
  }

  .title-wrap-2 {
    width: auto;
    margin-top: 140px;
  }

  .header-title {
    padding-left: 5%;
    font-size: 80px;
  }

  .header-title.center {
    text-align: center;
    padding-left: 0%;
    font-size: 60px;
  }

  .div-block-118 {
    height: 550px;
  }

  .container-8 {
    margin-top: 70px;
  }

  .home-intro-grid {
    margin-left: -30px;
  }

  .intro.our-work {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .container-10 {
    padding-top: 50px;
  }

  .service-section-home.no-div {
    padding-top: 40px;
  }

  .clients-section.with-back {
    padding-top: 10px;
  }

  .clients-section.divider {
    margin-bottom: 220px;
  }

  .clients-section.forms {
    background-image: linear-gradient(#faf4f4cc, #faf4f4cc), url('../images/background.svg');
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    margin-top: 0;
    padding-top: 2px;
  }

  .clients-section.reviews, .major-projects-embed {
    padding-top: 60px;
  }

  .image-1-wwd {
    width: 100%;
    margin-top: 42px;
  }

  .image-3-wwd {
    margin-top: 0;
  }

  .image-1-what-we-do {
    height: 80%;
  }

  .image-4 {
    height: 80%;
    padding-left: 104px;
  }

  .image-2-copy {
    height: 70%;
    margin-top: -138px;
    padding-right: 161px;
  }

  .membership {
    padding-top: 40px;
  }

  .grid-21 {
    width: 1100px;
    margin-left: -65px;
    margin-right: auto;
    padding-right: 0;
  }

  .animation-image-wrapper-wwd.wwd {
    width: 70%;
  }

  .animation-image-wrapper-wwd.desk {
    height: 650px;
  }

  .mission-section {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 991px) {
  .sg-nav {
    z-index: 10;
    background-color: #fafafa;
    border-right-style: none;
    width: 100%;
    height: 80px;
    padding-top: 20px;
    position: sticky;
    bottom: auto;
    left: 0;
    right: 0;
    overflow: visible;
  }

  .sg-nav-container {
    width: auto;
    height: auto;
  }

  ._12-columns {
    flex-flow: wrap;
  }

  .sg-content {
    border-left-style: none;
    width: 100%;
    margin-left: 0;
    position: static;
  }

  .heading.h2, .heading.h3 {
    font-size: 26px;
  }

  .paragraph.center {
    text-align: center;
  }

  .sg-block {
    margin-bottom: 40px;
  }

  .sg-section.reviews {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sg-section.cta {
    padding-top: 140px;
  }

  .sg-menu-button {
    margin-right: 12px;
    padding: 15px;
    top: -10px;
  }

  .sg-menu-button.w--open {
    color: #98d7c2;
    background-color: #d0e8ff;
    border-radius: 40px;
  }

  .column {
    width: 50%;
  }

  .sg-menu {
    z-index: 500;
    background-color: #fafafa;
    border-bottom: 1px solid #f8f8f8;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block;
    position: absolute;
    inset: 80px auto auto 0%;
    box-shadow: 0 3px 5px #0000000d;
  }

  .sg-menu-icon {
    font-size: 32px;
  }

  .sg-menu-brand {
    margin-top: 4px;
    margin-bottom: 16px;
  }

  .button {
    position: relative;
  }

  .heading-2 {
    color: var(--blue);
    font-family: Pangram, sans-serif;
    font-size: 33px;
  }

  .button-2.yellow, .button-2.purple, .button-2.orange {
    font-size: 14px;
  }

  .heading-large {
    font-size: 2.25rem;
  }

  .vertical-scroll-wrapper {
    width: auto;
    height: 2.8125rem;
    overflow: hidden;
  }

  .text-rotation-wrapper {
    flex-direction: column;
  }

  .d-131-logos-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: row;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 0;
    margin-bottom: 60px;
  }

  .d-131-logos-wrapper.top-space {
    flex-flow: wrap;
    display: flex;
  }

  .d-131-logo-link-block._3, .d-131-logo-link-block._10, .d-131-logo-link-block._17 {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .body-section {
    padding-top: 40px;
  }

  .navbar_upper-wrap {
    height: 40px;
    padding-top: 0;
  }

  .navbar {
    background-color: var(--white-2);
  }

  .nav_link {
    display: none;
  }

  .brand_logo {
    padding-top: 10px;
  }

  .nav_menu-button {
    background-color: var(--blue);
    border-bottom-right-radius: 30px;
    margin-bottom: 10px;
    margin-right: 10px;
  }

  .nav_menu-button.w--open {
    color: #000;
  }

  .navbar_icon {
    display: none;
  }

  .nav_link-mobile {
    color: #222;
    padding-top: 0;
    padding-bottom: 0;
    text-decoration: none;
    transition: all .3s;
  }

  .nav_link-mobile:hover {
    scale: 1.05;
  }

  .navbar_container {
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
  }

  .navbar_container.blue {
    background-image: linear-gradient(#0000, #0000), linear-gradient(#0000, #0000);
    background-repeat: repeat, repeat;
    background-size: auto, auto;
  }

  .nav-menu {
    background-color: #fff;
    border-bottom: 1px solid #a4a4a4;
  }

  .nav_other-link {
    display: none;
  }

  .nav_other-link.mobile {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: center;
    margin-bottom: 40px;
    display: flex;
  }

  .section-2.no-divider {
    padding-bottom: 40px;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr 1fr;
    display: block;
  }

  .hero-slide-highlight-text {
    font-size: 10em;
  }

  .hero-slider-arrow {
    opacity: .75;
    font-size: 25px;
  }

  .c-hero-slide-details {
    padding-left: 5%;
    padding-right: 5%;
    bottom: 12%;
    right: auto;
  }

  ._w-hero-slide-details {
    width: 100%;
  }

  .footer {
    background-size: auto;
  }

  .footer-credit, .image-div.icon {
    margin-bottom: 0;
  }

  .card-head.red, .card-head.yellow, .card-head.dark-green, .card-head.blue {
    margin-top: 0;
    margin-bottom: 0;
  }

  .line {
    margin-top: 20px;
  }

  .intro-grid {
    flex-flow: column;
    margin-bottom: 0;
    display: flex;
  }

  .hero-1 {
    width: 100%;
    height: 730px;
  }

  .hero-1._3 {
    background-size: 140%;
  }

  .hero-section {
    flex-direction: column;
  }

  .hero-section._3 {
    background-position: 50%;
    background-size: cover;
  }

  .container {
    padding-left: 0;
    padding-right: 0;
  }

  .grid-6 {
    grid-template-columns: 1fr;
    margin-top: 0;
    margin-left: 0;
  }

  .small-div {
    width: 600px;
  }

  .div-block-114 {
    margin-bottom: 0;
    margin-right: 0;
  }

  .container-2.left {
    margin-left: auto;
  }

  .clients-grid.logo-animate-alt {
    margin-left: 0;
  }

  .logos-marquee.mobile {
    display: none;
  }

  .grid-12 {
    grid-template-columns: 1fr .75fr;
  }

  .footer-div {
    padding-left: 0;
  }

  .cta-title {
    font-size: 35px;
    line-height: 45px;
  }

  .icon-2 {
    color: var(--white-2);
  }

  .background-video {
    background-image: radial-gradient(circle, #1f419aa3 11%, #fff0);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .hero-wrapper {
    background-color: #fff0;
    justify-content: center;
    align-items: center;
    width: auto;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    display: block;
    top: 15%;
    left: auto;
  }

  .heading-1 {
    font-size: 30px;
  }

  .heading-1.hero {
    width: 80%;
    max-width: 100%;
    height: 50vh;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    line-height: 1.3em;
    display: flex;
  }

  .image-1 {
    height: 80%;
    margin-top: 66px;
  }

  .image-1.what-we-do-1 {
    height: 85%;
  }

  .image-2 {
    height: 75%;
    margin-top: 36px;
    margin-left: -29px;
  }

  .image-2.what-we-do2 {
    height: 75%;
    margin-left: -20px;
  }

  .animation-image-wrapper.mob {
    height: 450px;
    margin-top: 0;
    padding-top: 0;
  }

  .animation-image-wrapper.mob.wwd {
    height: 400px;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .animation-image-wrapper.wwd {
    justify-content: center;
    align-items: flex-start;
    height: 500px;
    padding-left: 60px;
    display: flex;
  }

  .page-headers.pp {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Ignis-Testing.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    padding-right: 55px;
  }

  .page-headers.eee {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/medium-voltage.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.automation {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/automation_1.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.med-volt {
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.epc-projects {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Technoserve-images-1.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.ren-ener {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .page-headers.compoverview {
    background-image: linear-gradient(#ffffff24, #0d213a 0%, #192a4029 31%), url('../images/What-we-do-and-services-header2.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.careers {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Careers-header.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.technosolar {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    padding-right: 55px;
  }

  .page-headers.faq {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a 23%), url('../images/FAQ-Header.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.contact {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a 46%), url('../images/Contact-us-header.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-right: 55px;
  }

  .page-headers.re {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    padding-right: 55px;
  }

  .title-wrap-2 {
    width: 100%;
  }

  .header-title {
    padding-left: 20px;
    font-size: 50px;
  }

  .header-title.center {
    text-align: center;
    padding-left: 0;
  }

  .container-8 {
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 10px;
  }

  .heading-white {
    font-family: Pangram, sans-serif;
    font-size: 30px;
  }

  .flex-container {
    flex-wrap: wrap;
  }

  .icon-service-wrapper {
    justify-content: space-around;
  }

  .p-m-wrap {
    justify-content: center;
    align-items: center;
  }

  .faq-question {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .home-intro-grid {
    flex-flow: column;
    margin-bottom: 0;
    display: flex;
  }

  .footer-icon-link {
    text-align: center;
    transition: background-color .4s, opacity .4s, color .4s;
  }

  .footer-icon {
    display: block;
  }

  .contact-maps-grid {
    grid-template-columns: 1fr;
  }

  .intro {
    flex-flow: column;
    margin-bottom: 0;
    display: flex;
  }

  .faq-wrap-1-column {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .service-section-home {
    background-position: 100% 100%, 0 0, 50%;
    padding-top: 20px;
  }

  .service-section-home.no-div {
    padding-bottom: 40px;
  }

  .code-embed-2 {
    max-width: none;
  }

  .box {
    flex-direction: column;
    align-items: flex-start;
  }

  .div-block-119 {
    margin-left: 0;
    margin-right: .125em;
  }

  .tabs-menu {
    width: 40%;
  }

  .portfolio-block {
    width: 100%;
  }

  .clients-section.reviews {
    padding-left: 20px;
    padding-right: 20px;
  }

  .clients-section.cta {
    padding-top: 140px;
  }

  .grid-20 {
    margin-bottom: 40px;
  }

  .major-projects-embed {
    width: auto;
    max-width: none;
    padding-top: 40px;
  }

  .image-1-wwd {
    height: 85%;
    margin-top: 66px;
    margin-right: 0;
  }

  .image-2-wwd {
    height: 80%;
    margin-top: 96px;
    margin-left: -29px;
  }

  .image-3-wwd {
    height: 80%;
    margin-top: -51px;
    margin-left: 0;
  }

  .image-2-wwd-copy {
    height: 80%;
    margin-top: 36px;
    margin-left: -29px;
  }

  .div-block-120 {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .image-1-what-we-do {
    height: 80%;
    margin-top: 66px;
  }

  .image-4 {
    margin-top: 0;
    margin-bottom: 0;
  }

  .image-4.what-we-do-1 {
    height: 85%;
  }

  .image-2-copy {
    height: 250px;
    margin-top: -51px;
    margin-left: 0;
  }

  .image-2-copy.what-we-do2 {
    height: 75%;
    margin-left: -8px;
  }

  .wwd-div-1 {
    margin-bottom: 0;
    margin-right: 0;
  }

  .membership {
    padding-top: 20px;
  }

  .grid-21 {
    grid-template-columns: 1fr;
    width: auto;
  }

  .animation-image-wrapper-wwd {
    display: none;
  }

  .animation-image-wrapper-wwd.mob {
    height: auto;
    margin-top: -54px;
    margin-bottom: 10px;
    padding-top: 0;
    display: block;
  }

  .animation-image-wrapper-wwd.mob.wwd {
    height: 400px;
    margin-top: 0;
    margin-bottom: 20px;
  }

  .animation-image-wrapper-wwd.wwd {
    justify-content: center;
    align-items: flex-start;
    height: 500px;
    padding-left: 60px;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .field-block {
    min-height: auto;
  }

  .spacer {
    height: 32px;
  }

  ._12-columns {
    flex-wrap: wrap;
  }

  .sg-content {
    margin-left: 0;
  }

  .heading.h4 {
    font-size: 20px;
  }

  .heading.h1 {
    font-size: 35px;
  }

  .heading.h3 {
    font-size: 24px;
    line-height: 1.2em;
  }

  .heading.h2 {
    font-size: 35px;
  }

  .paragraph {
    text-align: left;
    font-size: 17px;
  }

  .paragraph.large, .paragraph.center {
    text-align: center;
  }

  .ds-colour-block {
    width: 25%;
  }

  .sg-section {
    padding-left: 30px;
    padding-right: 30px;
  }

  .column.desk-4 {
    width: 100%;
  }

  .sg-menu {
    background-color: #fff;
  }

  .sg-menu-brand.w--current {
    margin-top: 14px;
  }

  .button-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .button-2.green._2 {
    margin-top: 20px;
    margin-left: 0;
  }

  .heading-large {
    font-size: 1.875rem;
  }

  .vertical-scroll-wrapper {
    height: 2.34375rem;
    overflow: hidden;
  }

  .text-rotation-wrapper {
    margin-left: 0%;
  }

  .d-131-logos-wrapper.top-space {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .body-section {
    background-image: linear-gradient(#0000, #0000);
    background-position: 0 0;
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .body-section.red-bottom {
    padding-top: 60px;
  }

  .body-section.orange-bottom {
    background-image: linear-gradient(#0000, #0000), url('../images/orange-top.svg');
    background-position: 0 0, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, auto;
    padding-top: 60px;
  }

  .body-section.purple-bottom, .body-section.dark-green-bottom {
    padding-top: 60px;
  }

  .navbar_upper-wrap {
    margin-left: 20px;
    margin-right: 20px;
  }

  .nav_menu-button {
    background-color: var(--blue);
    margin-right: 0;
  }

  .nav_link-mobile {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }

  .nav-menu {
    margin-right: 0;
  }

  .nav_other-link.mobile {
    flex-flow: column;
    place-items: center;
    display: flex;
  }

  .section-2 {
    padding-top: 0;
  }

  .section-2.no-divider {
    padding: 20px 20px 0;
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .c-hero-slide-content {
    min-height: 100vh;
  }

  .hero-slider-arrow {
    display: none;
  }

  .c-hero-slider {
    height: auto;
  }

  .footer-credit {
    margin-top: 0;
  }

  .footer-link.address {
    margin-left: 0;
  }

  .intro-grid {
    grid-template-columns: .75fr;
  }

  .filled-container {
    width: 100%;
    max-width: 100%;
  }

  .hero-1 {
    height: 620px;
  }

  .hero-section._3 {
    background-repeat: no-repeat;
    background-size: cover;
  }

  .container {
    margin-top: 20px;
  }

  .container.clients {
    margin-bottom: 0;
    padding-top: 20px;
  }

  .small-div {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .mask-2 {
    width: 428.555px;
    max-width: 428.555px;
  }

  .div-block-114 {
    margin-right: 0;
  }

  .container-2.left {
    padding-top: 0;
  }

  .client-logo {
    height: 4rem;
    min-height: 4rem;
    margin-top: 0;
    padding-bottom: 10px;
  }

  .clients-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    margin-left: 0;
  }

  .clients-grid.logo-animate-alt {
    grid-column-gap: 20px;
  }

  .clients-grid.logo-animate {
    margin-top: 10px;
  }

  .home-logo-wrapper {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    height: 4rem;
    min-height: 4rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  .home-logo-wrapper.bottom {
    height: 4rem;
    min-height: 3rem;
    margin-top: 0;
    margin-bottom: 2em;
    display: block;
  }

  .home-logo-wrapper.top {
    height: 4rem;
    min-height: 4rem;
    margin-top: 0;
    margin-bottom: 10px;
    display: block;
  }

  .home-logo-wrapper._3 {
    margin-top: 20px;
  }

  .logos-marquee.mobile {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 20px;
    display: none;
  }

  .grid-12 {
    grid-template-columns: 1fr;
  }

  .footer-icon-div {
    width: 10%;
  }

  .paragraph-3 {
    font-size: 22px;
  }

  .icon-2 {
    color: var(--white-2);
  }

  .hero-wrapper {
    padding-left: 0;
    position: relative;
    left: auto;
  }

  .heading-1.hero {
    width: auto;
    font-size: 26px;
    line-height: 35px;
  }

  .image-1 {
    height: 70%;
    position: relative;
  }

  .image-1.what-we-do-1 {
    height: 75%;
  }

  .image-2 {
    max-width: 217.898px;
    margin-top: 27px;
    position: relative;
  }

  .image-2.what-we-do2 {
    z-index: 1;
    width: 100%;
    height: 65%;
    margin-left: -17px;
  }

  .animation-image-wrapper.mob {
    width: 428.555px;
    max-width: 428.555px;
    margin-top: 20px;
  }

  .animation-image-wrapper.wwd {
    height: auto;
    margin-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
  }

  .page-headers {
    padding-left: 60px;
  }

  .page-headers.eee {
    min-height: 60vh;
  }

  .page-headers.automation {
    min-height: 60vh;
    padding-left: 55px;
  }

  .page-headers.med-volt {
    padding-left: 55px;
  }

  .page-headers.compoverview {
    background-image: linear-gradient(#ffffff24, #0d213a 0%, #192a4029 31%), url('../images/What-we-do-and-services-header2.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    background-attachment: scroll, scroll;
    min-height: 60vh;
  }

  .page-headers.careers, .page-headers.technosolar, .page-headers.faq {
    padding-left: 55px;
  }

  .page-headers.contact {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a 52%), url('../images/Contact-us-header.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
  }

  .page-headers.re {
    min-height: 60vh;
    padding-left: 55px;
  }

  .title-wrap-2 {
    width: auto;
  }

  .header-title {
    padding-left: 0;
    font-size: 40px;
  }

  .header-title.center {
    font-size: 40px;
  }

  .section-4 {
    grid-template-columns: 1fr;
  }

  .div-block-118 {
    height: 300px;
  }

  .container-8 {
    margin-top: 0;
    margin-left: 0;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 10px;
  }

  .content-div {
    flex-flow: column;
    margin-bottom: 40px;
  }

  .subtitle {
    text-align: center;
    font-size: 18px;
  }

  .member-grid {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .logo-div {
    text-align: center;
    width: 100%;
    margin-top: 40px;
  }

  .bold-text-2 {
    font-size: 18px;
  }

  .flex-container {
    margin-top: 20px;
  }

  .grid-18 {
    flex-flow: column;
    grid-template-columns: .25fr 1fr;
    margin-top: 0;
    display: flex;
  }

  .image-13 {
    width: 40%;
  }

  .project-logo {
    width: 100%;
    max-width: 100%;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .project-info {
    margin-top: 20px;
  }

  .project-info._2 {
    margin-top: 10px;
    padding-left: 0;
  }

  .video-div {
    margin-top: 10px;
  }

  .grid-2-cols, .grid-multiple-rows {
    flex-flow: column;
    grid-template-columns: .25fr 1fr;
    margin-top: 0;
    display: flex;
  }

  .home-intro-grid {
    grid-template-columns: .75fr;
    padding-top: 20px;
  }

  .list {
    font-size: 17px;
  }

  .para-title {
    text-align: left;
    font-size: 15px;
  }

  .contact-link {
    font-size: 15px;
  }

  .intro {
    grid-template-columns: .75fr;
  }

  .faq-wrap-1-column {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .bold-text-17 {
    text-shadow: none;
  }

  .service-section-home {
    padding-top: 0;
  }

  .service-section-home.no-div {
    padding-bottom: 0;
  }

  .grid-19 {
    grid-template-columns: 1fr;
  }

  .tabs.margin-bottom.margin-medium {
    max-width: 100%;
    display: block;
  }

  .button-3 {
    font-size: 1em;
  }

  .icon-4 {
    width: 24px;
    height: 24px;
  }

  .is--tab-heading {
    font-size: 1.8em;
  }

  .tabs-content {
    padding: 1.5em 1.5em 4em;
  }

  .box {
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    padding: 1.5em;
  }

  .subtitle-2 {
    font-size: .7rem;
  }

  .tabs-menu {
    flex-direction: row;
    width: 100%;
  }

  .portfolio-block {
    max-width: none;
    padding-left: 10px;
    padding-right: 10px;
  }

  .clients-section {
    padding-left: 20px;
    padding-right: 20px;
  }

  .image-1-wwd {
    width: 45%;
    margin-right: 0;
    position: relative;
  }

  .image-2-wwd {
    max-width: 217.898px;
    height: 80%;
    margin-top: 162px;
    margin-left: -200px;
    position: relative;
  }

  .image-3-wwd {
    z-index: 3;
    max-width: 217.898px;
    height: 70%;
    margin-top: -39px;
    margin-left: -17px;
    margin-right: 11px;
    position: relative;
  }

  .image-2-wwd-copy {
    max-width: 217.898px;
    height: 80%;
    margin-top: 0;
    margin-left: -20px;
    position: relative;
  }

  .image-1-what-we-do {
    height: 70%;
    position: relative;
  }

  .image-4 {
    height: 70%;
    margin-top: -30px;
    position: relative;
  }

  .image-2-copy {
    margin-top: -63px;
    position: relative;
  }

  .image-2-copy.what-we-do2 {
    z-index: 1;
    width: 100%;
    height: 75%;
    margin-left: -17px;
  }

  .wwd-div-1 {
    margin-right: 0;
  }

  .membership {
    padding-top: 0;
  }

  .grid-21 {
    flex-flow: column;
    grid-template-rows: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .animation-image-wrapper-wwd {
    display: none;
  }

  .animation-image-wrapper-wwd.mob {
    width: 600px;
    max-width: 428.555px;
    margin-top: 0;
  }

  .animation-image-wrapper-wwd.wwd {
    height: auto;
    margin-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
  }

  .mission-section {
    grid-template-columns: 1fr;
  }

  .wware-div {
    flex-flow: column;
    margin-bottom: 40px;
  }
}

@media screen and (max-width: 479px) {
  .color-block {
    margin-bottom: 20px;
  }

  .heading.h2 {
    text-align: center;
    font-size: 20px;
    line-height: 1.2em;
  }

  .heading.h2.center, .heading.h2.white {
    font-size: 25px;
  }

  .heading.h1 {
    font-size: 28px;
  }

  .heading.h3 {
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    line-height: 1.2em;
  }

  .heading.h2 {
    font-size: 28px;
  }

  .paragraph {
    text-align: left;
    font-size: 16px;
    font-weight: 400;
  }

  .paragraph.large {
    text-align: center;
  }

  .paragraph.large.left {
    text-align: left;
    font-size: 17px;
  }

  .paragraph.center {
    font-size: 16px;
    font-weight: 400;
  }

  .paragraph.white {
    text-align: left;
  }

  .sg-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .sg-section.reviews {
    padding-left: 10px;
    padding-right: 10px;
  }

  .sg-section.cta {
    padding: 40px 20px;
  }

  .sg-menu-button {
    margin-right: 4px;
  }

  .column {
    margin-bottom: 0;
  }

  .sg-menu-brand {
    margin-left: 16px;
  }

  .text-input {
    width: 100%;
  }

  .button {
    width: 100%;
    font-size: 16px;
  }

  .heading-2 {
    margin-top: 0;
    font-size: 28px;
  }

  .button-2.purple {
    font-size: 12px;
  }

  .button-2.green {
    text-align: left;
    letter-spacing: .03rem;
  }

  .d-131-logos-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .d-131-logos-wrapper.top-space {
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    grid-template-rows: auto auto auto auto auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-top: 40px;
    margin-bottom: 0;
    display: grid;
  }

  .body-section {
    background-image: linear-gradient(#ffffffc9, #ffffffc9), url('../images/background_1.svg');
    background-position: 0 0, 0 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    padding-top: 60px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
  }

  .body-section.noteworthy {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .body-section.red-bottom {
    padding-top: 40px;
  }

  .body-section.orange-bottom {
    background-image: url('../images/orange-top.svg'), linear-gradient(#0000, #0000), url('../images/orange-top.svg');
    background-position: 100% 100%, 0 0, 100% 100%;
    background-repeat: no-repeat, repeat, no-repeat;
  }

  .body-section.green-bottom, .body-section.yellow-bottom, .body-section.purple-bottom {
    padding-top: 40px;
  }

  .navbar_upper-wrap {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-top: 0;
    margin-left: 10px;
    margin-right: 10px;
  }

  .navbar_dropdown {
    vertical-align: top;
  }

  .brand_logo {
    padding-top: 10px;
  }

  .nav_menu-button {
    background-color: var(--blue);
    margin-bottom: 10px;
    padding-bottom: 18px;
  }

  .navbar_container {
    justify-content: center;
    align-items: stretch;
    display: block;
  }

  .nav-menu {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-right: 0;
    display: flex;
  }

  .nav_other-link.mobile {
    grid-template-columns: 1fr;
    justify-content: start;
    width: 100%;
    max-width: 100%;
  }

  .section-2 {
    background-image: url('../images/top-red.svg'), linear-gradient(#ffffffb5, #ffffffb5);
    background-position: 100% 100%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 101%, auto;
    background-attachment: scroll, scroll;
    padding: 60px 20px 10px;
  }

  .section-2.no-divider {
    background-image: linear-gradient(#ffffff73, #ffffff73), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .section-2.top-space {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .section-2.services {
    background-image: linear-gradient(#ffffffb5, #ffffffb5);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto;
    background-attachment: scroll;
    padding-bottom: 40px;
  }

  .grid-2 {
    grid-template-rows: auto auto auto;
    grid-template-columns: 1fr;
  }

  .c-hero-slide-content {
    height: 35vh;
    min-height: 0;
    margin-bottom: 10px;
  }

  .hero-slider-arrow {
    background-color: #13131340;
    width: 40px;
    height: 50px;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 20px;
    display: block;
    top: 20%;
  }

  .c-hero-slider {
    padding-bottom: 0;
  }

  .c-hero-slide-details {
    background-color: var(--medium-grey);
    padding-bottom: 5%;
    position: relative;
  }

  .hero {
    background-image: none;
  }

  ._w-hero-slide-details {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-credit-link {
    padding-bottom: 10px;
    font-size: 12px;
  }

  .footer {
    padding-top: 40px;
    padding-bottom: 20px;
    position: relative;
  }

  .footer-credit {
    padding-top: 0;
    padding-bottom: 0;
  }

  .footer-link {
    margin-bottom: 5px;
    font-size: 15px;
  }

  .footer-link.address, .footer-link.contact {
    padding-left: 10px;
  }

  .image-div.icon {
    min-width: 60px;
    min-height: 60px;
  }

  .image-div.icon.purple {
    width: 60px;
    display: flex;
  }

  .card-head.purple {
    width: 65%;
    max-width: 100%;
  }

  .line {
    margin-top: 20px;
  }

  .intro-grid {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hero-1 {
    height: 100vh;
  }

  .container {
    margin-top: 10px;
    padding-top: 10px;
  }

  .container.clients {
    margin-bottom: 40px;
  }

  .blog-cards-wrapper-4 {
    margin-bottom: 20px;
    display: flex;
  }

  .service-colour.red {
    width: 120px;
  }

  .service-title {
    text-shadow: 0 1px 12px var(--medium-grey);
    font-size: 17px;
    line-height: 25px;
  }

  .blog-card-4-base {
    width: 325px;
  }

  .grid-6 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-auto-columns: 1fr;
    margin-top: 0;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
  }

  .service-div._1 {
    background-image: linear-gradient(#0000, #0000), url('../images/engineer.jpg');
    background-position: 0 0, 50%;
  }

  .small-div {
    padding-left: 10px;
    padding-right: 10px;
  }

  .mask-2 {
    height: auto;
  }

  .container-2.left {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .client-logo {
    object-position: 0% 50%;
  }

  .overline {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  .clients-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .clients-grid.logo-animate-alt {
    display: flex;
  }

  .clients-grid.logo-animate {
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 26px;
  }

  .home-logo-wrapper {
    align-items: center;
    height: 3rem;
    min-height: 3rem;
    display: block;
  }

  .home-logo-wrapper.top {
    height: 3.2rem;
    min-height: 3.2rem;
    margin-bottom: 1em;
  }

  .home-logo-wrapper._3 {
    margin-top: 10px;
    display: flex;
  }

  .home-logo-wrapper._2 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-end;
    align-items: center;
    height: 4rem;
    min-height: 4rem;
    margin-top: 20px;
    display: flex;
  }

  .home-logo-wrapper._1 {
    height: 4rem;
    margin-bottom: 10px;
    display: flex;
  }

  .footer-div {
    margin-bottom: 10px;
    padding-top: 10px;
  }

  .footer-div.last {
    margin-top: 0;
    margin-bottom: 0;
  }

  .footer-title-wrapper {
    margin-bottom: 10px;
  }

  .cta-title {
    font-size: 26px;
    line-height: 38px;
  }

  .paragraph-3 {
    font-size: 18px;
    line-height: 26px;
  }

  .icon-2 {
    color: var(--white-2);
  }

  .background-video {
    height: 50vh;
  }

  .hero-wrapper {
    width: 85%;
    height: 20vh;
    margin-top: -60%;
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 0;
    padding-right: 0;
  }

  .heading-1 {
    font-size: 28px;
    line-height: 35px;
  }

  .heading-1.hero {
    height: auto;
    min-height: auto;
    margin-top: 60px;
    font-size: 22px;
  }

  .hero-text {
    font-size: 1.5em;
    line-height: 1.3em;
  }

  .image-1 {
    height: 60%;
    padding-top: 4px;
    position: relative;
    top: 41px;
  }

  .image-1.what-we-do-1 {
    height: 60%;
    margin-top: 30px;
    margin-right: -45px;
    padding-right: 0;
  }

  .image-2 {
    z-index: 0;
    width: auto;
    height: 60%;
    margin-top: 33px;
    top: -8px;
    left: -5px;
  }

  .image-2.what-we-do2 {
    height: 60%;
    margin-left: 0;
  }

  .animation-image-wrapper {
    height: 550px;
    padding-left: 20px;
    display: none;
  }

  .animation-image-wrapper.mob {
    justify-content: center;
    align-items: flex-start;
    height: 400px;
    margin-top: 0;
    padding-left: 30px;
    display: none;
  }

  .animation-image-wrapper.mob.wwd {
    height: 300px;
    margin-top: 40px;
    margin-bottom: 0;
  }

  .animation-image-wrapper.wwd {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    padding-left: 0;
  }

  .card-title-wrapper {
    padding-left: 10px;
    padding-right: 20px;
  }

  .page-headers {
    height: 70vh;
    min-height: 70vh;
    padding-left: 40px;
    padding-right: 40px;
  }

  .page-headers.pp {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Ignis-Testing.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .page-headers.eee {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/medium-voltage.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
    padding-left: 0;
    padding-right: 0;
  }

  .page-headers.automation {
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: auto, auto, cover;
    min-height: 60vh;
  }

  .page-headers.med-volt {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Medium-Voltage_1.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .page-headers.epc-projects {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Technoserve-images-1.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .page-headers.ren-ener {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg'), url('../images/bottomheadnew.svg'), url('../images/headbottom6.svg');
    background-position: 0 0, 50%, 0 0, 0 0;
    background-repeat: repeat, repeat, no-repeat, repeat;
    background-size: auto, cover, auto, auto;
    padding-left: 10px;
    padding-right: 10px;
  }

  .page-headers.compoverview {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a401c 24%), url('../images/What-we-do-and-services-header2.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
  }

  .page-headers.careers {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/Careers-header.jpg');
    background-position: 0 0, 50% 100%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
  }

  .page-headers.technosolar {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/technosolar.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, auto;
  }

  .page-headers.faq {
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: auto, auto, cover;
  }

  .page-headers.contact {
    background-image: linear-gradient(#ffffff40, #0d213a 0%, #192a404a 63%), url('../images/Contact-us-header.jpg');
    background-position: 0 0, 50%;
    background-repeat: repeat, repeat;
    background-size: auto, cover;
    min-height: 60vh;
  }

  .page-headers.re {
    background-image: url('../images/bottomhead2.svg'), linear-gradient(#ffffff40, #0d213a 0%, #192a404a), url('../images/renewable-energy.jpg');
    background-position: 0 0, 0 0, 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-size: 90%, auto, cover;
    padding-left: 0;
    padding-right: 0;
  }

  .title-wrap-2 {
    max-width: none;
    margin-top: 20px;
    padding-left: 0;
  }

  .header-title {
    margin-right: 0;
    font-size: 36px;
    line-height: 1.2em;
  }

  .header-title.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    font-size: 33px;
  }

  .div-block-118 {
    background-position: 60%;
  }

  .content-div {
    margin-top: 0;
    margin-bottom: 45px;
  }

  .member-grid {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .grid-18 {
    flex-flow: column;
    grid-template-columns: .25fr 1fr;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .image-13 {
    width: 50%;
  }

  .main-container.centre {
    max-width: 100%;
  }

  .p-m-wrap {
    margin-left: 40px;
  }

  .faq-question {
    width: 100%;
  }

  .faq-wrap {
    grid-template-columns: 1fr;
    justify-content: center;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .h2 {
    font-size: 30px;
  }

  .project-info {
    text-align: left;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-left: 0;
    display: flex;
  }

  .grid-2-cols {
    flex-flow: column;
    grid-template-columns: .25fr 1fr;
    display: flex;
  }

  .grid-multiple-rows {
    flex-flow: column;
    grid-template-columns: .25fr 1fr;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .home-intro-grid {
    padding-top: 0;
    padding-bottom: 0;
  }

  .para-title {
    text-align: left;
  }

  .contact-title.blue, .contact-title.red, .contact-title.purple {
    margin-bottom: 20px;
  }

  .block {
    padding-top: 20px;
  }

  .block.red {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  .block.purple, .block.dark-green, .block.orange, .block.green {
    padding-top: 20px;
  }

  .div-block-3 {
    flex-flow: column;
    align-items: flex-start;
    display: flex;
  }

  .red {
    text-align: left;
  }

  .intro {
    padding-top: 0;
    padding-bottom: 0;
  }

  .faq-wrap-1-column {
    grid-template-columns: 1fr;
    justify-content: center;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .bold-text-17 {
    font-size: 22px;
  }

  .service-section-home {
    background-image: url('../images/top-red.svg'), linear-gradient(#ffffffb5, #ffffffb5);
    background-position: 100% 100%, 0 0;
    background-repeat: no-repeat, repeat;
    background-size: 101%, auto;
    background-attachment: scroll, scroll;
    padding: 40px 20px;
  }

  .service-section-home.no-div {
    background-image: linear-gradient(#ffffff73, #ffffff73), url('../images/background_1.svg');
    background-position: 0 0, 50%;
    background-repeat: repeat, no-repeat;
    background-size: auto, cover;
    background-attachment: scroll, fixed;
  }

  .service-section-home.top-space {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .service-block-subheading {
    font-family: Pangram, sans-serif;
    font-size: 15px;
  }

  .code-embed-2 {
    max-width: 100%;
  }

  .is--tab-heading {
    font-size: 1.4em;
  }

  .tabs-content {
    padding: 1.1em 1.1em 3.5em;
  }

  .is-tab-subtext {
    font-size: .8em;
  }

  .box {
    height: 100%;
    padding: 1.1em;
    display: block;
  }

  .div-block-119 {
    margin-right: 0;
  }

  .portfolio-block {
    width: auto;
    padding-top: 20px;
  }

  .portfolio-block.red {
    padding-top: 20px;
    padding-bottom: 60px;
  }

  .portfolio-block.purple, .portfolio-block.dark-green, .portfolio-block.orange, .portfolio-block.green {
    padding-top: 20px;
  }

  .clients-section {
    margin-top: -33px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .clients-section.reviews {
    padding-left: 10px;
    padding-right: 10px;
  }

  .clients-section.cta {
    padding: 40px 20px;
  }

  .grid-20 {
    grid-template-columns: 1fr;
  }

  .major-projects-embed {
    padding-top: 50px;
  }

  .image-1-wwd {
    width: 50%;
    height: 80%;
    margin-top: 12px;
    padding-top: 4px;
    position: relative;
    top: 41px;
  }

  .image-2-wwd {
    width: 60%;
    height: 75%;
    margin-top: 6px;
    margin-left: -17px;
    display: none;
    top: -8px;
    left: -5px;
  }

  .image-3-wwd {
    width: 55%;
    height: auto;
    margin-top: -6px;
    margin-left: -2px;
    top: -8px;
    left: -5px;
  }

  .image-2-wwd-copy {
    width: auto;
    height: 75%;
    margin-top: 6px;
    margin-left: -17px;
    top: -8px;
    left: -5px;
  }

  .div-block-120 {
    padding-left: 20px;
  }

  .image-1-what-we-do {
    height: 60%;
    padding-top: 4px;
    position: relative;
    top: 41px;
  }

  .image-4 {
    height: 260px;
    margin-top: -60px;
    padding-top: 5px;
    padding-left: 8px;
    position: relative;
    top: 41px;
  }

  .image-4.what-we-do-1 {
    height: 60%;
  }

  .image-2-copy {
    z-index: 0;
    height: 100%;
    margin-top: -6px;
    padding-right: 89px;
    top: -8px;
    left: -5px;
  }

  .membership {
    padding-top: 0;
  }

  .animation-image-wrapper-wwd {
    height: 550px;
    padding-left: 20px;
    display: none;
  }

  .animation-image-wrapper-wwd.mob {
    justify-content: center;
    align-items: flex-start;
    height: 400px;
    margin-top: -24px;
    padding-left: 80px;
    display: flex;
  }

  .animation-image-wrapper-wwd.mob.wwd {
    height: 300px;
    margin-top: 40px;
    margin-bottom: 0;
  }

  .animation-image-wrapper-wwd.wwd {
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 0;
    padding-left: 0;
  }

  .wware-div {
    margin-top: 0;
    margin-bottom: 45px;
  }
}

#w-node-_4f499923-ea47-3dc7-75b6-dd59f6dca640-4a386a65 {
  place-self: center;
}

#w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3964-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3965-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3967-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3968-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3969-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec396a-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec396b-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec396c-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3970-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3971-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3972-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3973-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3975-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3978-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3979-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397b-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397c-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397d-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397e-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397f-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3980-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20ba5-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb8-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20ba6-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20ba8-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20ba9-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20baa-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bab-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bad-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb0-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb3-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb4-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb1-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb6-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb7-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bc9-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bca-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd0-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bcc-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bcd-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bce-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bcf-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd1-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bda-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd5-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bdb-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd7-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd8-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd9-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bdc-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bdf-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be0-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be2-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be3-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be4-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be5-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be6-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be7-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea0-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea1-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea3-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea4-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea5-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea6-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea7-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea8-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eab-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eac-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ead-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eae-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eaf-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb1-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb4-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb5-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb7-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb8-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb9-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eba-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ebb-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ebc-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb340-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb341-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb343-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb344-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb345-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb346-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb347-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb348-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb34e-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb34f-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb350-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb351-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb352-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb353-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb356-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb357-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb359-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35a-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35b-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35c-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35d-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35e-4a386a65 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_2b1bccc3-f8be-3541-20eb-00e472286a94-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286aa0-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286aac-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286ab8-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286ac4-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286ad2-72286a8a {
  place-self: center;
}

#w-node-e719cf33-3d63-447f-82ef-0cf8062affe7-020d8920, #w-node-e719cf33-3d63-447f-82ef-0cf8062afff4-020d8920, #w-node-e719cf33-3d63-447f-82ef-0cf8062b0001-020d8920, #w-node-e9adfded-5c33-ecb8-c4bd-275b4805964f-020d8920, #w-node-e9adfded-5c33-ecb8-c4bd-275b4805965a-020d8920 {
  justify-self: stretch;
}

#w-node-e9adfded-5c33-ecb8-c4bd-275b48059665-020d8920 {
  justify-self: center;
}

#w-node-_174b4c1b-3566-a159-0d93-bc13c228b38e-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b39f-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b3b0-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b3c2-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b3d3-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b3e5-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b3f6-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b407-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b418-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b429-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b43a-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b44b-78b39f6c, #w-node-_174b4c1b-3566-a159-0d93-bc13c228b45c-78b39f6c, #w-node-_3fdb2d70-ae09-24c5-8ef0-5d53481c2d9a-78b39f6c, #w-node-b5ef4a76-dea0-f333-985a-5ed4a4432758-bf5ba78f, #w-node-b5ef4a76-dea0-f333-985a-5ed4a4432765-bf5ba78f, #w-node-c9187290-71ff-873f-d7f1-dddb1a89b31e-bf5ba78f, #w-node-_79f56380-e2a4-5603-3e47-897e6eb51195-bf5ba78f, #w-node-a97f7af7-2553-0659-64c7-a23a99abbd0f-bf5ba78f, #w-node-_3e8fe7b4-d507-6629-f6bf-dcfafdffc247-bf5ba78f, #w-node-e5198872-d2df-d4bf-8535-8138a2a7ce8e-bf5ba78f, #w-node-_5cfc8377-5836-c241-1c80-b05822eb20ca-bf5ba78f, #w-node-_891715f9-4afc-b97e-5c96-4afdaaaffab0-bf5ba78f, #w-node-a511a152-1601-2f22-67f9-b3b80f807e12-bf5ba78f, #w-node-b23fe6ef-074b-4fdb-b11d-9f978e398bc5-bf5ba78f, #w-node-aea8be9d-24a8-6091-0125-f1c1d31e9eb2-bf5ba78f, #w-node-_56a29906-aff5-bd4b-2fa0-c992f238572a-bf5ba78f, #w-node-_94c54b4a-9add-9fff-22f2-ca292c85b454-bf5ba78f, #w-node-_11822b1e-92ec-8aa9-7c0f-99d4ca08c839-bf5ba78f, #w-node-_227be60a-725b-6e46-19c0-54f4c80f45a9-bf5ba78f, #w-node-ffc6bbf3-1253-7905-037a-491cdc351f9f-bf5ba78f, #w-node-_603a9f17-1b3b-62c5-8988-78ecd88ed1aa-bf5ba78f, #w-node-_1015f0d2-ef9f-a195-f95b-1f6420bcb843-bf5ba78f, #w-node-_2c731688-ae85-5556-c94a-0e5cba100805-bf5ba78f, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b808-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b819-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b82a-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b83c-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b84d-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b85f-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b870-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b881-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b892-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8a3-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8b4-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8c5-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8d6-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8e7-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b8f8-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b909-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b91a-96739dc3, #w-node-_4fd08c1f-beec-7d6c-7408-539edb46b92b-96739dc3, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d41-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d52-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d63-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d75-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d86-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06d98-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06da9-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06dba-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06dcb-4e78607f, #w-node-e91a1668-7bdc-4b9e-8fac-73c4b9d06ddc-4e78607f, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1ae84-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1ae95-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aea6-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aeb8-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aec9-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aedb-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aeec-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1aefd-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af0e-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af1f-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af30-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af41-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af52-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af63-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af74-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af85-af80bc5c, #w-node-_43f26f0c-8822-a2c6-7b69-946f36b1af96-af80bc5c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-b5a8388b-9bed-e4f3-018c-998654fcd0f0-6484b64b {
  place-self: center;
}

#w-node-_26bf487b-6b59-59be-4308-407ab77b27a2-2d62aa36 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_88800791-3e99-71c2-8316-300dbacf54e7-2d62aa36, #w-node-b9b694c7-04f0-3f38-6198-0a5b60f4251d-2d62aa36, #w-node-_62c1078f-9f28-f1d5-dff6-452f7bf4179d-2d62aa36, #w-node-_62c1078f-9f28-f1d5-dff6-452f7bf4179f-2d62aa36, #w-node-_0db5b49e-c240-ea54-2dfe-61ce9462cdcf-2d62aa36, #w-node-_0db5b49e-c240-ea54-2dfe-61ce9462cdd1-2d62aa36, #w-node-_8fda0cdc-c162-0c13-c424-15b46cdf99cf-2d62aa36, #w-node-_8fda0cdc-c162-0c13-c424-15b46cdf99d1-2d62aa36, #w-node-_4c40eccb-523a-c3b1-ecfb-6206222d1e2e-2d62aa36, #w-node-_4c40eccb-523a-c3b1-ecfb-6206222d1e30-2d62aa36, #w-node-de959763-7821-8555-6bbe-b26948e54216-1717160e {
  place-self: center;
}

#w-node-_4fd08c1f-beec-7d6c-7408-539edb46b808-a5caca93, #w-node-_71ffa674-4376-f754-7172-5e741f0b36ef-a5caca93, #w-node-_2b3c1f50-6b5d-769c-50b3-80a84ba5d31e-a5caca93, #w-node-_30e18ab1-d925-5d9d-bd1d-8bcf0bbd1987-a5caca93, #w-node-_3ee3088f-19f0-08e3-15d3-ff81027528d4-a5caca93 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (min-width: 1920px) {
  #w-node-_4f499923-ea47-3dc7-75b6-dd59f6dca640-4a386a65 {
    justify-self: end;
  }

  #w-node-_26bf487b-6b59-59be-4308-407ab77b27a2-2d62aa36 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-de959763-7821-8555-6bbe-b26948e54216-1717160e {
    justify-self: end;
  }
}

@media screen and (min-width: 1440px) {
  #w-node-_4f499923-ea47-3dc7-75b6-dd59f6dca640-4a386a65 {
    justify-self: start;
  }
}

@media screen and (min-width: 1280px) {
  #w-node-_2b1bccc3-f8be-3541-20eb-00e472286aa0-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286ab8-72286a8a, #w-node-_2b1bccc3-f8be-3541-20eb-00e472286ad2-72286a8a {
    place-self: center;
  }

  #w-node-_26bf487b-6b59-59be-4308-407ab77b27a2-2d62aa36 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }

  #w-node-de959763-7821-8555-6bbe-b26948e54216-1717160e {
    justify-self: start;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3968-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec3970-4a386a65, #w-node-_9317b097-e459-313c-6aeb-f1dbb2ec397c-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20ba9-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bb4-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bcd-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20bd8-4a386a65, #w-node-_11da3451-fc8b-d910-4b35-175e67c20be3-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40ea4-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eac-4a386a65, #w-node-_9059262b-fe0f-db85-f326-cc42fee40eb8-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb344-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb34f-4a386a65, #w-node-_99f94da6-7e99-0190-d4a4-902c6e4bb35a-4a386a65 {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_985f06ef-5f52-b189-56ae-dbc8b831deae-b831de7e {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}


@font-face {
  font-family: 'Publicsans';
  src: url('../fonts/PublicSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Publicsans';
  src: url('../fonts/PublicSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Publicsans';
  src: url('../fonts/PublicSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/public-sans.bold.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('../fonts/Pangram-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('../fonts/Pangram-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('../fonts/Pangram-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('../fonts/Pangram-Regular.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pangram';
  src: url('../fonts/Pangram-Medium.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}