:root {
  --blue-gradient-1: #deedffba;
  --charcoal-grey: #383838;
  --primary-colour: #2e8cdf;
  --dark-blue: #023e8a;
  --white: white;
  --black-opacity-10: #00000005;
  --black: #252525;
  --alice-blue-opacity-80: #e6f1ffcc;
  --light-blue: #1d788a;
  --alice-blue: #e6f1ff;
  --black-black: #000;
  --port-bg: #73bed338;
  --midnight-blue: #0a192f;
  --pale-blue: #caf0f8;
  --alice-blue-opacity-90: #e6f1ffe6;
  --trans: #e6f1ff00;
  --heading-colour: #333;
  --primary: #03c065;
  --grey-bg: #e4e4e4;
  --grey-font: #d4d4d4;
  --lime-green: #2effa5;
  --invert-bg-colour: #0c0c0c;
  --light-background-colour: #ffffff1a;
  --green-shadow: #1ff9905e;
  --gird-lines-grey: #1616161c;
  --ligher-blue: #0077b6;
  --light-bue-bg: #e8f4f7;
  --dark-grey: #262525;
}

html {
  overflow-x: clip;
  width: 100%;
}

.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;
}

body {
  color: #333;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  overflow-x: clip;
  width: 100%;
}

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 100px;
  font-weight: 600;
  line-height: 110px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 25px;
  font-weight: 400;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

p {
  margin-bottom: 10px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  line-height: 28px;
}

.hero-section {
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--blue-gradient-1), white);
  background-position: 0 0;
  background-repeat: repeat;
  background-size: auto;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  position: static;
  overflow: clip;
}

.logo-wrapper {
  z-index: 99;
  border-bottom: 2px none var(--charcoal-grey);
  border-radius: 0;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 5px 0;
  display: flex;
  position: absolute;
  inset: 15px 50px auto;
}

.nav-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  margin-left: auto;
  margin-right: 0;
  display: flex;
}

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

.nav-link-block {
  border-bottom: 1px none var(--primary-colour);
  outline-offset: 0px;
  color: #8892b0;
  text-decoration: none;
  -webkit-text-decoration-color: var(--dark-blue);
  text-decoration-color: var(--dark-blue);
  outline: 3px #8892b0;
  flex-direction: column;
  align-items: flex-start;
  height: 41px;
  margin-left: 10px;
  padding-left: 15px;
  padding-right: 15px;
  font-family: Roboto Mono, sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: all .4s;
  display: flex;
  overflow: hidden;
}

.nav-link-block:hover {
  border-bottom-style: none;
  border-radius: 0;
  padding-left: 15px;
  padding-right: 15px;
}

.nav-link-block.w--current {
  padding-left: 10px;
  padding-right: 10px;
}

.nav-link-text-block {
  color: var(--charcoal-grey);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
}

.nav-link-text-block.num {
  color: var(--white);
  margin-right: 10px;
}

.logo-image {
  width: 30px;
}

.grid-wrapper {
  z-index: 9;
  justify-content: flex-end;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 1100px;
  height: 100vh;
}

.grid-block.black {
  background-color: var(--black-opacity-10);
}

.hero-content {
  z-index: 9;
  grid-column-gap: .4rem;
  grid-row-gap: .4rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex-flow: column;
  justify-content: flex-start;
  align-self: auto;
  align-items: flex-start;
  width: 100%;
  max-width: 890px;
  margin: 0 auto 0 0;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  position: static;
  inset: auto 0% 20px;
}

.heading-h1 {
  color: var(--charcoal-grey);
  text-align: center;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  justify-content: center;
  align-items: center;
  width: auto;
  margin: 0 auto;
  padding-bottom: 5px;
  font-family: mustica;
  font-size: 45px;
  font-weight: 600;
  line-height: 115%;
  display: flex;
}

.heading-h1.experience {
  color: var(--dark-blue);
  margin-top: 10px;
  margin-bottom: 60px;
}

.heading-h1.work {
  color: var(--black);
  text-transform: capitalize;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  width: auto;
  margin-top: 10px;
  margin-bottom: 25px;
  font-size: 9em;
}

.heading-h1._404 {
  color: var(--black);
  margin-bottom: 0;
  font-size: 150px;
  line-height: 150px;
}

.heading-h1.password {
  color: var(--black);
  letter-spacing: .5px;
  margin-bottom: 0;
  font-size: 32px;
  font-weight: 400;
  line-height: 40px;
}

.heading-h1.contact {
  color: var(--black);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  font-size: 10em;
}

.heading-h1.left-align {
  color: var(--charcoal-grey);
  text-align: left;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 5px;
  font-weight: 600;
}

.heading-h1.small-size {
  color: var(--black);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  margin-bottom: 5px;
  font-size: 20px;
}

.heading-h1.larger {
  font-size: 65px;
  font-weight: 600;
}

.hero-text-block {
  border-bottom: 2px solid var(--white);
  color: var(--primary-colour);
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 200px;
  margin-left: 3px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
}

.hero-text-block.experience {
  color: var(--dark-blue);
  width: 400px;
}

.hero-text-block.work {
  border-bottom: 3px none var(--black);
  color: var(--black);
  letter-spacing: 0;
  text-transform: capitalize;
  width: 300px;
  margin-bottom: 20px;
  font-family: mustica;
  font-size: 16px;
}

.hero-text-block.contact {
  border-bottom-color: var(--black);
  color: var(--black);
  width: 200px;
  margin-bottom: 40px;
  font-family: "Bdsans 2";
  font-size: 1.2em;
}

.paragraph {
  color: var(--dark-blue);
  margin-bottom: 20px;
  font-family: Poppins, sans-serif;
  font-size: 15px;
  line-height: 28px;
}

.paragraph.project {
  color: var(--black);
  text-align: right;
  border-radius: 3px;
  margin-top: 20px;
  font-size: 13px;
  line-height: 24px;
}

.paragraph.project.left {
  text-align: left;
}

.paragraph.work {
  color: var(--white);
  width: auto;
  margin-bottom: 80px;
  font-weight: 500;
}

.paragraph.contact {
  color: var(--black);
  width: 550px;
  margin-bottom: 35px;
}

.heading-h2 {
  color: #1f1f1f;
  text-align: center;
  width: 100%;
  max-width: 700px;
  margin-top: 20px;
  margin-bottom: 25px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5em;
  position: static;
  inset: auto 0% 0% auto;
}

.footer-block {
  z-index: 9;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: fixed;
  inset: auto auto 0% 40px;
}

.footer-block.right {
  inset: auto 40px 0% auto;
}

.footer-block-line {
  background-color: var(--white);
  color: var(--black);
  width: 1px;
  height: 100px;
  margin-top: 15px;
}

.social-icon {
  color: var(--white);
  font-family: "Font awesome 5 brands 400";
  font-size: 22px;
  text-decoration: none;
  transition: all .4s;
}

.social-icon:hover {
  color: var(--primary-colour);
}

.email-link {
  color: var(--white);
  margin-bottom: 90px;
  text-decoration: none;
  transform: rotate(90deg);
}

.social-icon-wrapper {
  color: var(--alice-blue-opacity-80);
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  text-decoration: none;
  transition: all .2s ease-in-out;
  display: flex;
}

.social-icon-wrapper:hover {
  color: var(--primary-colour);
  padding-bottom: 4px;
}

.email-link-wrapper {
  color: var(--white);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 30px;
  height: 200px;
  margin-left: 4px;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: all .4s ease-in-out;
}

.email-link-wrapper:hover {
  color: var(--primary-colour);
  height: 210px;
}

.experience-section {
  justify-content: center;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 0;
  display: none;
}

.experience-content-wrapper {
  width: 900px;
}

.accordion-wrapper {
  border-bottom: 1px solid var(--light-blue);
  margin-bottom: 30px;
}

.accordion-wrapper.last {
  border-bottom-style: none;
  margin-bottom: 0;
}

.accordion-header {
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.heading-h3 {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 5px;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 500;
}

.work-type {
  color: #e6f1ff99;
  font-family: Poppins, sans-serif;
}

.work-type.green {
  color: var(--primary-colour);
}

.accordion-content-wrapper {
  margin-top: 30px;
  overflow: hidden;
}

.visit-link {
  color: #64ffd9cc;
  align-items: center;
  margin-bottom: 40px;
  font-family: Poppins, sans-serif;
  text-decoration: none;
  display: flex;
}

.visit-link.project {
  color: var(--alice-blue);
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
}

.link-text {
  color: var(--black);
  margin-top: 0;
  font-family: Poppins, sans-serif;
}

.link-text.fa-icon {
  margin-left: 15px;
  font-family: "Font awesome 5 free solid 900";
  font-size: 12px;
}

.work-section {
  justify-content: center;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 0;
  display: flex;
  overflow: visible;
}

.project-wrapper {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  align-items: center;
  margin-bottom: 100px;
  display: flex;
  position: relative;
}

.project-wrapper.two {
  justify-content: flex-end;
}

.project-wrapper.two.last {
  margin-bottom: 0;
}

.project-details-wrapper {
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 5px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 450px;
  display: flex;
  position: static;
  left: auto;
  right: 0;
}

.project-details-wrapper.left {
  align-items: flex-start;
  left: 0%;
  right: auto;
}

.contact-section {
  grid-column-gap: 67px;
  grid-row-gap: 67px;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.copyright-info {
  color: var(--black);
  text-align: center;
  margin-bottom: 0;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  font-weight: 500;
  position: absolute;
  inset: auto 0% 0% auto;
}

.brand-link {
  color: #e6f1ff4d;
  text-decoration: none;
}

.brand-link:hover {
  color: #e6f1ff80;
}

.footer-info-wrapper {
  justify-content: space-between;
  align-items: center;
  margin-top: 150px;
  display: flex;
}

.footer-link {
  color: var(--dark-blue);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  text-decoration: none;
}

.footer-link:hover {
  color: #e6f1ff80;
}

.footer-link.second {
  margin-left: 30px;
}

.footer-links-wrapper {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.project-image {
  background-color: #1c507e;
  background-image: radial-gradient(circle farthest-corner at 100% 0%, #2c44d1, #fff0 36%), radial-gradient(circle farthest-corner at 0% 0%, var(--light-blue), #fff0 41%), url('../images/Paintopia-500-x-500-px-256-x-256-px-1000-x-500-px.png');
  background-position: 0 0, 0 0, 50%;
  background-repeat: repeat, repeat, no-repeat;
  background-size: auto, auto, contain;
  background-attachment: scroll, scroll, scroll;
  border-radius: 14px;
  justify-content: center;
  align-items: center;
  width: 500px;
  height: 300px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.project-image.two {
  background-image: radial-gradient(circle farthest-corner at 100% 0%, var(--alice-blue), #fff0 55%), url('../images/Untitled-1200-x-630-px-1000-x-750-px-2.png');
  background-position: 0 0, 50%;
  background-repeat: repeat, repeat;
  background-size: auto, cover;
  background-attachment: scroll, scroll;
}

.project-image.three {
  background-image: linear-gradient(#172a4599, #172a4599), url('../images/5img_project_3.jpg');
}

.project-image.four {
  background-image: linear-gradient(#172a4580, #172a4580), url('../images/6img_project_4.jpg');
}

.project-image.five {
  background-image: linear-gradient(#172a4580, #172a4580), url('../images/7img_project_5.jpg');
}

.project-image.six {
  background-image: linear-gradient(#172a4580, #172a4580), url('../images/8img_project_6.jpg');
}

.work-content-wrapper {
  width: 94%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.contact-content-wrapper {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.hero-section-overlay {
  background-color: var(--primary-colour);
  position: static;
  inset: 0%;
}

.nav-link-underline {
  background-color: var(--primary-colour);
  width: 100%;
  height: 1px;
  margin-top: 3px;
}

.nav-link-inner-wrapper {
  border-bottom: 1px none var(--primary-colour);
  align-items: center;
  padding: 10px 0;
  display: flex;
  overflow: visible;
}

.nav-link-inner-wrapper:hover {
  color: var(--black);
}

.body {
  background-color: var(--black-black);
  font-size: 1vw;
}

.project-image-overlay {
  background-color: var(--midnight-blue);
  background-image: url('../images/3img_project_1.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 0;
  display: none;
  position: absolute;
  inset: 0%;
}

.project-image-overlay._2 {
  background-image: url('../images/9bg_img_404.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.project-image-overlay._3 {
  background-image: url('../images/Untitled-1200-x-630-px-1000-x-750-px-2.png');
}

.project-image-overlay._4 {
  background-image: url('../images/HEALTH-AI-1000-x-750-px.png');
}

.hero-bg-image {
  z-index: 1;
  background-color: var(--pale-blue);
  position: static;
  inset: 0%;
}

.separator-line {
  background-color: #00000026;
  width: 100%;
  height: 1px;
}

.color {
  background-color: var(--midnight-blue);
  color: #000;
  width: 100%;
  height: 100px;
  margin-bottom: 25px;
}

.color._7 {
  background-color: var(--alice-blue-opacity-90);
}

.color._4 {
  background-color: var(--black-opacity-10);
}

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

.color._10 {
  background-color: var(--trans);
}

.color._6 {
  background-color: var(--alice-blue);
}

.color._2 {
  background-color: var(--primary-colour);
}

.color._9 {
  background-color: var(--alice-blue-opacity-80);
}

.color._3 {
  background-color: var(--black-black);
}

.color._5 {
  background-color: var(--white);
}

.color._11 {
  background-color: var(--pale-blue);
}

.color._13 {
  background-color: var(--light-blue);
}

.color._14 {
  background-color: var(--charcoal-grey);
}

.style-guide {
  color: #00000080;
  margin-top: 30px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}

.style-guide-text-4 {
  color: #3339;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #fff;
  padding-right: 20px;
  font-size: 14px;
  font-weight: 500;
  position: absolute;
  top: -10px;
}

.style-guide-text-block {
  color: #000;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
}

.style-guide-text-block._5 {
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.style-guide-text-block._3 {
  font-family: Roboto Mono, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.style-guide-text-block._2 {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 40px;
  text-decoration: none;
}

.style-guide-text-block._4 {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.color-wrapper {
  flex: none;
}

.color-description {
  color: #00000080;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  display: block;
}

.style-guide-column {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 20px;
  display: flex;
}

.style-guide-main-text-wrapper {
  text-align: center;
  width: 100%;
  margin-bottom: 35px;
  position: relative;
}

.style-guide-main-text-wrapper._2 {
  text-align: left;
  margin-top: 70px;
  margin-bottom: 60px;
}

.style-guide-section {
  background-color: #fff;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
}

.style-guide-text {
  color: #3339;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #fff;
  padding-right: 20px;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  top: -10px;
}

.color-usage-column-wrapper {
  width: 100%;
  margin-bottom: 30px;
}

.style-guide-column-wrapper {
  color: #000;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 60px;
  display: flex;
}

.style-guide-paragraph.project {
  font-size: 13px;
  line-height: 24px;
}

.style-guide-text-5 {
  color: #3339;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #fff;
  padding-right: 20px;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  top: -10px;
}

.style-guide-paragraph-3 {
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 25px;
}

.style-guide-link-2 {
  color: #3206f1;
  text-align: left;
  margin-bottom: 5px;
  font-size: 15px;
  text-decoration: underline;
}

.style-guide-link-2._2 {
  margin-top: 20px;
}

._404-page-wrapper {
  background-color: #f5f5f5;
  background-image: url('../images/9bg_img_404.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding-left: 15vw;
  display: flex;
}

._404-inner-wrapper {
  background-color: #f5f5f5;
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  width: 370px;
  padding: 100px 32px;
  display: flex;
}

.separator {
  background-color: #0006;
  width: 7.5vw;
  height: .1vh;
  margin-right: 30px;
}

.separator.password {
  background-color: #0000001a;
  width: 200px;
  height: 1px;
  margin: 28px auto 30px;
}

._404-text {
  color: #000;
  text-align: center;
  margin-bottom: 0;
  font-family: Poppins, sans-serif;
  font-size: 14px;
}

.submit-button {
  color: #333;
  background-color: #fff;
  margin-top: 40px;
  padding: 15px 50px;
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  text-decoration: none;
}

.submit-button.password {
  margin-top: 0;
}

.utility-page-wrap {
  background-image: url('../images/10bg_img_password.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  justify-content: flex-start;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 100vh;
  max-height: 100%;
  padding-left: 15vw;
  display: flex;
}

.utility-page-content {
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  flex-direction: column;
  align-items: center;
  width: 350px;
  padding: 100px 32px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.image {
  display: none;
}

.form-field.password {
  margin-bottom: 20px;
  font-family: Poppins, sans-serif;
}

.error-message {
  font-family: Poppins, sans-serif;
}

.text-block {
  color: #2e8cdf;
  text-transform: capitalize;
  order: -1;
  font-family: mustica;
  font-size: 40px;
  font-weight: 600;
  line-height: 32px;
}

.div-block {
  background-image: none;
  margin-bottom: 0;
  padding-top: 90px;
  padding-bottom: 20px;
}

.link-block {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #04795c;
  background-image: linear-gradient(90deg, #34a287, #10614d 77%);
  border-radius: 30px;
  justify-content: center;
  align-items: center;
  height: 50px;
  margin-top: 0;
  padding: 0 0 0 20px;
  text-decoration: none;
  display: inline-flex;
}

.image-2 {
  border-radius: 0;
  width: 31px;
  height: 100%;
  margin-right: 0;
  padding: 5px;
}

.text-block-2 {
  color: var(--white);
  text-transform: capitalize;
  font-family: Poppins, sans-serif;
  font-size: 1.1em;
}

.div-block-2 {
  background-color: #3bdab3;
  border-radius: 80px;
  margin-right: 4px;
  padding: 5px;
}

.hero-content-wrapper {
  justify-content: center;
  align-items: center;
  width: 94%;
  max-width: none;
  margin: 0 auto;
  display: flex;
  position: relative;
}

.image-3 {
  z-index: 0;
  aspect-ratio: 1;
  width: auto;
  max-width: 300px;
  height: auto;
  display: none;
  position: relative;
  inset: 59px 0% 0% -21px;
}

.div-block-3 {
  z-index: 3;
  border: 2px none var(--primary-colour);
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  display: flex;
  position: static;
}

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

.contact {
  margin-bottom: 0;
}

.div-block-4 {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
  display: flex;
}

.link-block-2 {
  background-color: #0072b1;
  border-radius: 999px;
  width: auto;
  height: 100%;
  margin-top: 0;
  padding: 14px;
  text-decoration: none;
}

.top-div {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: auto;
  margin: 0 auto 60px;
  display: inline-flex;
}

.social.media {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: center;
  align-items: center;
  width: 400px;
  margin-top: 40px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.social.media.no-margin {
  margin-top: 0;
}

.linkedin {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-left: 2px solid var(--charcoal-grey);
  justify-content: center;
  align-items: flex-start;
  padding: 5px 20px 0;
  display: inline-flex;
}

.linkedin:hover {
  text-underline-offset: 3px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--white);
  text-decoration-color: var(--white);
  text-decoration-style: solid;
  text-decoration-thickness: 1.3px;
}

.linkedin.black {
  border-left-color: var(--black);
}

.linkedin.no-left-align {
  border-left-style: none;
  font-family: Montserrat, sans-serif;
  font-weight: 400;
}

.image-4 {
  border-radius: 0;
  width: 18px;
  overflow: hidden;
}

.text-block-3 {
  color: var(--charcoal-grey);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.text-block-3.black {
  color: var(--black);
  font-family: "Bdsans 2";
}

.hero-contents {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  position: relative;
  top: 0;
}

.text-block-4 {
  color: var(--white);
  width: 250px;
  font-family: "Bdsans 2";
  font-size: 1em;
  font-weight: 600;
  line-height: 1.5em;
}

.div-block-5 {
  background-color: var(--white);
  width: 3px;
  height: 240px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.bold-text {
  font-family: Capuche;
}

.div-block-6 {
  grid-column-gap: 17px;
  grid-row-gap: 17px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-bottom: 100px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.project-container {
  cursor: pointer;
  background-image: none;
  background-size: auto;
  border-radius: 9px;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.project-container._8 {
  overflow: hidden;
}

.text-block-5 {
  color: var(--white);
  font-family: Poppins, sans-serif;
  font-weight: 600;
}

.text-block-5.black {
  color: var(--black);
}

.div-block-8 {
  z-index: 99;
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  border-bottom: 2px #20202000;
  border-radius: 3px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  padding: 5px 1px 2px;
  font-size: 13px;
  transition: all .3s;
  display: inline-flex;
  position: static;
  inset: auto auto 20px 20px;
}

.div-block-8:hover {
  border: 1px #000;
}

.image-5 {
  width: 60%;
}

.image-6 {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  width: auto;
  height: auto;
  min-height: auto;
  margin-bottom: 0;
  font-family: Roboto, sans-serif;
  display: block;
  overflow: clip;
}

.text-block-6 {
  color: var(--white);
  letter-spacing: 1.5px;
  -webkit-text-stroke-width: .2px;
  text-transform: capitalize;
  padding-bottom: 1px;
  font-family: "Robecha Daniera 2";
  font-size: 26px;
  font-weight: 900;
  line-height: 30px;
  position: static;
  inset: 20px auto auto 30px;
}

.text-block-6.gourmet-heading {
  letter-spacing: .4px;
  font-family: Tanheadline;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
}

.text-block-6.gourmet-heading.black {
  color: var(--heading-colour);
  font-family: "Orbitron 1";
  font-size: 22px;
}

.text-block-6.gourmet-heading.resortia {
  -webkit-text-stroke-width: .5px;
  font-family: Notica;
  font-size: 28px;
}

.text-block-6.barbell-b-header {
  letter-spacing: 1px;
  text-transform: capitalize;
  font-family: "Ea Sports Covers Sc 1";
  font-weight: 400;
}

.text-block-6.celestia-head {
  letter-spacing: .5px;
  font-family: "Bdsans 2";
}

.text-block-6.paintopia-head {
  letter-spacing: 1px;
  font-family: Exo, sans-serif;
  font-size: 28px;
  font-weight: 500;
}

.text-block-6.fxit-head {
  color: var(--black);
  letter-spacing: .6px;
  font-family: cooper;
  font-size: 28px;
  font-weight: 600;
}

.text-block-6.serpence {
  color: var(--black);
  -webkit-text-stroke-width: .3px;
  -webkit-text-stroke-color: var(--white);
  font-family: "Robecha Daniera 2";
}

.visit-site-link {
  z-index: 99;
  cursor: pointer;
  order: 1;
  transition: all .45s;
  display: block;
  position: static;
  inset: auto auto 0 30px;
  overflow: hidden;
}

.visit-site-link:hover {
  border-bottom: 1.5px none var(--white);
  text-decoration: none;
  -webkit-text-decoration-color: var(--white);
  text-decoration-color: var(--white);
  text-decoration-thickness: 2px;
}

.div-block-9 {
  background-color: var(--black);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  width: 400px;
  height: 3px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.animated-underline {
  background-color: var(--white);
  width: 100%;
  height: 2px;
  position: static;
  inset: 0% auto auto 0%;
  transform: translate(-100%);
}

.animated-underline.black {
  background-color: var(--black);
}

.link-block-4 {
  text-decoration: none;
  display: none;
  position: absolute;
  inset: 20px auto auto 30px;
  overflow: hidden;
}

.slide {
  cursor: pointer;
  object-fit: fill;
  border-radius: 0;
  justify-content: center;
  align-items: flex-end;
  width: auto;
  height: auto;
  min-height: auto;
  transition: none;
  display: flex;
  position: static;
  overflow: visible;
}

.text-span-2 {
  font-size: 20px;
}

.text-span-3 {
  font-size: 16px;
}

.text-span-4,
.text-span-5,
.text-span-6,
.text-span-7 {
  font-size: 20px;
}

.services {
  background-image: none;
  padding-top: 100px;
  padding-bottom: 140px;
}

.banner {
  padding-top: 20px;
  padding-bottom: 20px;
  overflow: hidden;
}

.content {
  width: 3000px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.div-block-10 {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  position: relative;
}

.heading {
  color: var(--black);
  margin-top: 0;
  margin-bottom: 15px;
  font-family: Capuche;
  font-size: 10em;
  line-height: 80px;
}

.div-block-11 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--white);
  background-image: linear-gradient(225deg, #dfdfdf, #fff 18%);
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 5px 15px;
  display: inline-flex;
  box-shadow: -6px 6px 20px -3px #00000069;
}

.image-7 {
  width: 20px;
}

.image-7.js {
  border-radius: 2px;
}

.text-block-7 {
  color: var(--black);
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.div-block-12 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}

.text-block-8 {
  color: #525252;
  max-width: 600px;
  margin-bottom: 40px;
  font-family: "Bdsans 2";
  font-size: 1em;
  font-weight: 600;
  line-height: 2em;
}

.div-block-13 {
  background-color: var(--white);
  width: 500px;
  height: 2px;
  position: absolute;
  inset: 0% auto auto 0%;
}

.div-block-14 {
  background-color: var(--black);
  width: 2px;
  height: 190px;
  position: absolute;
  inset: auto 0% 0% auto;
}

.text-block-9 {
  border-bottom: 2px solid var(--black);
  color: var(--black);
  text-align: left;
  letter-spacing: 2px;
  width: 250px;
  margin-bottom: 40px;
  font-family: "Bdsans 2";
  font-size: 1.2em;
  font-weight: 600;
  line-height: 40px;
  position: static;
  inset: -20px auto auto 0%;
}

.contatc-form {
  width: 650px;
  max-width: 65%;
}

.field-label {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  font-weight: 500;
}

.text-field {
  color: var(--black);
  background-color: #fff0;
  border: 1px #000;
  border-bottom-style: solid;
  border-radius: 0;
  margin-bottom: 25px;
  font-family: Poppins, sans-serif;
  font-size: 1.2em;
}

.textarea {
  border: 1px #000;
  border-bottom-style: solid;
  height: 200px;
  padding-bottom: 140px;
  font-family: Poppins, sans-serif;
}

.submit-button-2 {
  background-color: var(--port-bg);
  border-radius: 3px;
  width: 100%;
  margin-top: 29px;
  margin-left: auto;
  margin-right: auto;
  padding: 13px 40px;
  font-family: "Bdsans 2";
  font-size: 1.3em;
  font-weight: 500;
  transition: all .45s;
  display: block;
}

.submit-button-2:hover {
  background-color: var(--black);
}

.div-block-15 {
  flex-flow: column;
  display: flex;
}

.text-block-10 {
  border-left: 2px none var(--black);
  width: 26%;
  padding-left: 0;
  font-family: "Bdsans 2";
  font-size: 1em;
  font-weight: 400;
  line-height: 1.7em;
  position: absolute;
  inset: auto 0% 0% auto;
}

.div-block-16 {
  background-color: var(--black);
  width: 2px;
  height: 250px;
  position: absolute;
  inset: 0% 0% auto auto;
}

.text-span-8 {
  color: var(--light-blue);
}

.footer-container {
  border-top: 3px none var(--port-bg);
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 93%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  position: relative;
}

.heading-2 {
  color: var(--heading-colour);
  border: 1px #000;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  font-family: Capuche;
  font-size: 8em;
  font-weight: 400;
  line-height: .8em;
}

.section {
  padding-top: 20px;
  padding-bottom: 20px;
}

.text-span-9 {
  color: var(--port-bg);
}

.text-span-10 {
  font-weight: 700;
}

.link-block-5 {
  cursor: pointer;
}

.text-span-11 {
  color: var(--white);
  -webkit-text-stroke-width: .2px;
  font-family: "Robecha Daniera 2";
}

.button {
  background-color: #2e8cdf;
  background-image: linear-gradient(90deg, #0f67b5, var(--primary-colour) 37%);
  border: 1px solid #e0e0e0ba;
  border-radius: 45px;
  order: 1;
  margin-left: 20px;
  padding: 11px 30px;
  font-family: mustica;
  font-size: 13px;
  transition: all .3s;
}

.button:hover {
  background-image: linear-gradient(90deg, #0f67b5, var(--primary-colour) 37%);
  box-shadow: inset 0 -3px 9px 5px #0003;
}

.button.bg-colour-change {
  color: var(--charcoal-grey);
  background-color: #ececec;
  background-image: linear-gradient(#0000 39%, #a8a8a861);
  transition: all .45s;
  box-shadow: inset 0 -1px 12px -4px #0003;
}

.button.bg-colour-change:hover {
  box-shadow: none;
}

.button.bg-colour-change.lighter-outline {
  box-shadow: none;
  background-color: #ececec00;
  background-image: none;
  border-width: 2px;
  border-color: #616161;
}

.button.bg-colour-change.lighter-outline:hover {
  background-color: #fff;
}

.button.none {
  display: none;
}

.button.no-margin {
  width: 100%;
  margin-left: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.button.none-margin.centre {
  margin-left: auto;
  margin-right: auto;
}

.text-block-11 {
  margin-bottom: 0;
  padding: 7px 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 15px;
}

.small-heading-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: #121212;
  border: 1px solid #d3d3d30d;
  border-radius: 45px;
  order: -9999;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  padding: 4px 15px;
  display: flex;
}

.image-8 {
  order: -1;
  width: 20px;
}

.div-block-19 {
  aspect-ratio: 1;
  background-color: var(--primary);
  border-radius: 99px;
  width: 9px;
  margin-right: 5px;
  box-shadow: 0 0 5px 4px #96ff9680;
}

.div-block-19.blue {
  background-color: var(--primary-colour);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  box-shadow: 0 0 5px 4px #96a5ff80;
}

.cta-s {
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.image-9 {
  order: -1;
  width: 130px;
}

.image-9.larger {
  width: 190px;
  margin-bottom: 30px;
}

.div-block-20 {
  aspect-ratio: 1;
  outline-offset: 0px;
  background-color: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 8px 40px 40px;
  outline: 3px #333;
  justify-content: center;
  align-items: center;
  width: 60px;
  padding: 8px;
  display: flex;
  position: absolute;
  inset: auto 0% 0% auto;
  box-shadow: inset 0 2px 4px #0003;
}

.div-block-20.java {
  background-color: #f0dc4e;
  border-top-left-radius: 40px;
  border-top-right-radius: 8px;
  display: none;
  inset: auto auto 0% 0%;
}

.image-10 {
  border-radius: 5px;
  width: 35px;
}

.div-block-21 {
  aspect-ratio: 1;
  width: 16px;
  position: absolute;
  inset: -17px auto auto -15px;
}

.image-11 {
  box-shadow: none;
  opacity: .91;
  transform: rotate(-20deg);
}

.div-block-22 {
  background-color: #d8d8d8;
  width: 2px;
  height: 450px;
  position: absolute;
  inset: 0% 40px 0% auto;
}

.div-block-22.left-side {
  inset: 0% auto 0% 40px;
}

.div-block-23 {
  margin-top: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}

.div-block-194 {
  grid-column-gap: 29px;
  grid-row-gap: 29px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 50px;
  display: flex;
}

.div-block-195 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #f8f8f8c9;
  background-image: linear-gradient(180deg, var(--white), var(--grey-bg));
  box-shadow: none;
  border: 1px solid #b9b9b9;
  border-radius: 10px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: auto;
  margin-bottom: 0;
  padding: 20px 30px;
  display: flex;
}

.heading-41 {
  background-image: linear-gradient(180deg, #065ca8, var(--primary-colour));
  color: var(--primary-colour);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  font-family: mustica;
  font-size: 45px;
  font-weight: 400;
  line-height: 110%;
}

.div-block-196 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  justify-content: space-between;
  align-items: flex-end;
  display: block;
}

.text-block-102 {
  white-space: normal;
  word-break: normal;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 140%;
}

.text-span-12,
.text-span-13 {
  color: var(--primary-colour);
}

.image-79 {
  border-radius: 5px;
  width: 100%;
  margin-bottom: 10px;
  display: none;
}

.slide-1 {
  object-fit: fill;
  background-color: #fff;
  border: 0 solid #fff;
  border-radius: 6px;
  width: auto;
  height: auto;
  margin-right: 15px;
  position: relative;
  top: 0;
  overflow: hidden;
  box-shadow: 0 2px 18px -6px #00000091;
}

.slide-1.wider-length {
  border-radius: 10px;
  width: 430px;
  margin-right: 15px;
  overflow: hidden;
}

.slider-arrow-mask {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.arrow-icon {
  aspect-ratio: 1;
  width: 15px;
  height: auto;
  display: block;
}

.div-block-213 {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  min-height: auto;
  margin-bottom: 0;
  display: flex;
}

.mask-4 {
  width: auto;
  overflow: visible;
}

.text-block-115 {
  color: #fff;
  border-bottom: 1px #000;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.image-83 {
  width: 1rem;
  height: 1rem;
}

.link-block-8 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-bottom: 1px #cacaca;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  text-decoration: none;
  display: flex;
}

.div-block-211 {
  box-shadow: none;
  background-image: linear-gradient(#0000 62%, #333 94%), url('../images/2151874945.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  border: 1px solid #e9e9e9;
  border-radius: 0;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-bottom: 20px;
  padding: 20px;
  display: flex;
}

.div-block-211._4 {
  background-image: linear-gradient(135deg, #000, #fff0 27%), linear-gradient(#0003, #0003), linear-gradient(#0000 47%, #333 94%), url('../images/2148877044.jpg');
  background-position: 0 0, 0 0, 0 0, 50%;
  background-size: auto, auto, auto, cover;
}

.div-block-211.slider-2 {
  background-image: linear-gradient(#0000, #0000), linear-gradient(#0000 47%, #333 94%), url('../images/2150989805.jpg');
  background-position: 0 0, 0 0, 50%;
  background-size: auto, auto, cover;
}

.div-block-211.slide-3 {
  background-image: linear-gradient(#0000000f, #0000000f), linear-gradient(#0000 47%, #333 94%), url('../images/2150989957.jpg');
  background-position: 0 0, 0 0, 50%;
  background-size: auto, auto, cover;
}

.slider-button {
  background-color: #b10000;
  border-radius: 45px;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  display: flex;
  inset: 0% 0% auto auto;
}

.slider-button.left {
  background-image: linear-gradient(180deg, #116ab8, var(--primary-colour));
  border-radius: 6px;
  width: 3rem;
  height: 1.8rem;
  top: -55px;
  right: 55px;
}

.next-button {
  background-color: #b10000;
  background-image: linear-gradient(180deg, #116ab8, var(--primary-colour));
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 1.8rem;
  display: flex;
  inset: -55px 0% auto auto;
}

.next-button.rotated {
  aspect-ratio: 1;
  background-image: linear-gradient(180deg, #074881, var(--primary-colour));
  border-radius: 99px;
  width: 45px;
  height: auto;
}

.next-button.rotated.black-bg {
  background-color: #666;
  transform: none;
}

.slide-nav-5 {
  color: #333;
  justify-content: center;
  align-items: center;
  display: none;
  position: static;
}

.slider-4 {
  background-color: var(--trans);
  width: 1151.09px;
  margin-top: -29px;
  margin-bottom: 0;
  padding-top: 0;
  display: block;
  overflow: visible;
}

.image-84 {
  border-radius: 5px;
  width: 100%;
  margin-bottom: 10px;
  display: none;
}

.services-mask {
  width: 90%;
  margin-top: 17px;
  margin-left: auto;
  margin-right: auto;
}

.div-block-215 {
  margin-bottom: 60px;
}

.visit-website-div {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: auto;
  min-height: auto;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
  position: absolute;
}

.text-block-116 {
  color: #fff;
  border-bottom: 1px #000;
  margin-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.image-85 {
  width: 15px;
  height: auto;
  display: block;
}

.div-block-217 {
  grid-column-gap: 13px;
  grid-row-gap: 13px;
  justify-content: center;
  align-items: center;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.div-block-217._2 {
  order: -1;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}

.div-block-217._2.faqqq {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: auto;
}

.link-block-9 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-bottom: 1px #cacaca;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  text-decoration: none;
  display: flex;
}

.text-block-114 {
  color: #333;
  width: 600px;
  margin-top: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.text-block-112 {
  text-align: center;
  letter-spacing: 1.5px;
  -webkit-text-stroke-width: .3px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  display: flex;
}

.text-block-112.faq {
  letter-spacing: 0;
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
  padding-top: 0;
  padding-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.div-block-218 {
  aspect-ratio: auto;
  box-shadow: none;
  object-fit: cover;
  background-image: none;
  background-position: 0 0;
  border: 1px solid #e9e9e9;
  border-radius: 0;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-bottom: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.div-block-218._4 {
  background-image: linear-gradient(135deg, #000, #fff0 27%), linear-gradient(#0003, #0003), linear-gradient(#0000 47%, #333 94%), url('../images/2148877044.jpg');
  background-position: 0 0, 0 0, 0 0, 50%;
  background-size: auto, auto, auto, cover;
}

.div-block-218.slider-2 {
  background-image: linear-gradient(#0000, #0000), linear-gradient(#0000 47%, #333 94%), url('../images/2150989805.jpg');
  background-position: 0 0, 0 0, 50%;
  background-size: auto, auto, cover;
}

.div-block-218.slide-3 {
  background-image: linear-gradient(#0000000f, #0000000f), linear-gradient(#0000 47%, #333 94%), url('../images/2150989957.jpg');
  background-position: 0 0, 0 0, 50%;
  background-size: auto, auto, cover;
}

.text-block-118 {
  color: #333;
  width: 100%;
  margin-top: 0;
  margin-bottom: -38px;
  font-family: mustica;
  font-size: 45px;
  line-height: 125%;
}

.text-span-25 {
  color: var(--black);
}

.div-block-219 {
  background-color: #333;
  width: 20px;
  height: 1px;
}

.my-projects {
  background-color: var(--white);
  background-image: none;
  width: 100%;
  max-width: none;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  position: static;
  overflow: hidden;
}

.slider1 {
  background-color: #0000;
  width: 100%;
  height: auto;
}

.slider_nav {
  grid-column-gap: .75rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 2rem;
  display: flex;
  position: static;
}

.slider1_content {
  grid-column-gap: 16px;
  grid-row-gap: 2rem;
  background-color: #fff;
  border: 1px solid #2323221a;
  border-radius: 1rem;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  max-width: 49.125rem;
  margin-left: auto;
  margin-right: auto;
  padding: 3.5rem;
  display: flex;
}

.text-size-regular {
  font-size: 1rem;
}

.slider1_slide {
  vertical-align: baseline;
  height: auto;
}

.testimonial_details {
  grid-row-gap: .25rem;
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.testimonial_image {
  object-fit: cover;
  border-radius: 100vw;
  width: 5rem;
  height: 5rem;
}

.slider1_mask {
  width: 1279px;
  height: auto;
}

.text-size-large {
  font-size: 1.5rem;
}

.heading-style-h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
}

.heading-style-h4 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.4;
}

.slider1_arrow-wrapper {
  color: #232322;
  background-color: #e4fd5b;
  border-radius: 100vw;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  transition: color .2s, background-color .2s;
  display: flex;
  inset: 0% 0% auto auto;
}

.slider1_arrow-wrapper:hover {
  color: #fff;
  background-color: #232322;
}

.slider1_arrow-wrapper.left {
  inset: 0% 50px auto auto;
}

.text-size-medium {
  font-size: 1.25rem;
}

.icon-1x1-medium {
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}

.icon-1x1-medium.is-right {
  transform: rotate(180deg);
}

.testimonial_person {
  grid-column-gap: 2rem;
  align-items: center;
  display: flex;
}

.bold-text-2 {
  color: var(--black);
}

.image-86 {
  object-fit: contain;
}

.image-87 {
  width: 380px;
}

.image-88 {
  width: 34vw;
  height: auto;
  overflow: hidden;
}

.black-hover-background {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: #27272757;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.black-hover-background:hover {
  display: flex;
}

.roadmap {
  background-color: var(--white);
  background-image: none;
  flex-flow: column;
  padding-top: 60px;
  padding-bottom: 60px;
  display: flex;
}

.road-map-container {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
}

.div-block-220 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template: "Area-6 Area-4 Area-2"
    "Area-3 Area Area-5"
    / 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-top: 20px;
  margin-bottom: 0;
  display: grid;
  position: relative;
}

.div-block-221 {
  z-index: 3;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 15px;
  display: flex;
  position: absolute;
  inset: -6px 50% 100%;
}

.div-block-221.bottom-blue-circle {
  width: 19px;
  inset: auto 50% -12px;
}

.road-map-top-container {
  padding-bottom: 20px;
  position: relative;
}

.road-map-bottom-container {
  padding-top: 20px;
  position: relative;
}

.text-block-119 {
  color: var(--charcoal-grey);
  text-align: center;
  padding-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.div-block-222 {
  background-image: linear-gradient(270deg, #fff, var(--primary-colour) 0%, var(--primary-colour) 100%, #fff 102%);
  z-index: 2;
  width: 100%;
  height: 3px;
  position: static;
  top: 0%;
  bottom: 50%;
}

.div-block-222.no-right-colour {
  background-image: linear-gradient(90deg, #fff, var(--primary-colour) 0%, var(--primary-colour) 19%, #fff0);
}

.div-block-222.no-colour-left {
  background-image: linear-gradient(90deg, #fff0, var(--primary-colour) 62%, var(--primary-colour) 100%, #fff 102%);
}

.heading-42 {
  text-align: center;
  margin-top: 0;
  font-size: 19px;
  line-height: 115%;
}

.heading-42.first {
  font-size: 19px;
}

.div-block-223 {
  aspect-ratio: 1;
  background-color: var(--white);
  opacity: .6;
  border-radius: 99px;
  width: 3px;
  height: auto;
}

.roadmap-text-container {
  border: 1px #e9e9e9;
  border-radius: 13px;
  padding: 20px;
}

.image-89 {
  background-image: linear-gradient(180deg, #146ebc, var(--primary-colour));
  border-radius: 6px;
  order: 1;
  width: 30px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 6px;
}

.div-block-224 {
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: inline-flex;
}

.roadmap-heading {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  order: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-block-225 {
  margin-bottom: 60px;
}

.reviews-content {
  grid-column-gap: 1%;
  grid-row-gap: 1%;
  flex-flow: row;
  justify-content: center;
  align-items: stretch;
  width: 1496px;
  margin-top: 10px;
  display: flex;
  overflow: visible;
  transform: translate(-223px);
}

.reviews-content._2nd-row {
  transform: translate(-65px);
}

.customer-name {
  margin-bottom: 0;
  margin-right: 40px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.reviews-container {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  position: relative;
  left: 0;
}

.text-block-120 {
  text-align: center;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.sub-heading-italic {
  color: #333;
  text-align: left;
  margin-bottom: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.review-1 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  background-color: #fff;
  background-image: linear-gradient(180deg, white 52%, var(--grey-bg));
  border: 2px solid #ebebeb;
  border-radius: 7px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 363px;
  padding: 30px;
  display: flex;
  position: relative;
  box-shadow: 0 2px 20px -10px #0003;
}

.italic-text-10 {
  text-align: center;
}

.div-block-166 {
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  flex-flow: row;
  display: flex;
}

.div-block-166.top-right-revews {
  position: static;
  inset: 17% 14% auto auto;
}

.customer-text {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  flex-flow: column;
  display: flex;
}

.customer-details {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  order: -1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.reviews-section {
  background-color: #fff;
  padding-top: 70px;
  padding-bottom: 100px;
  overflow: hidden;
}

.image-57 {
  width: 16px;
}

.image-57.small {
  aspect-ratio: 1;
}

.customer-image {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 999px;
  width: 40px;
}

.reviews-content-main {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  order: -1;
  display: flex;
}

.main-heading {
  color: #333;
  text-align: center;
  letter-spacing: -1px;
  -webkit-text-stroke-width: 0px;
  text-shadow: none;
  max-width: 790px;
  margin: 0 0 0 auto;
  font-family: mustica;
  font-size: 65px;
  font-weight: 600;
  line-height: 70px;
  display: block;
}

.main-heading.centre {
  text-align: center;
  text-transform: capitalize;
  max-width: none;
  margin-bottom: 10px;
  margin-left: 0;
  font-size: 45px;
}

.main-heading.white {
  color: var(--black);
  text-align: left;
  max-width: 890px;
  font-size: 45px;
  line-height: 115%;
}

.sub-heading {
  color: #333;
  text-align: left;
  letter-spacing: 0;
  -webkit-text-stroke-width: 0px;
  width: auto;
  max-width: 480px;
  margin-left: 0;
  margin-right: auto;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 165%;
  display: block;
}

.sub-heading.centre-align {
  color: var(--black);
  text-align: left;
  max-width: 500px;
  margin: 10px auto 20px 0;
  font-size: 13px;
}

.sub-heading.centre-display {
  color: #333;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  display: flex;
}

.subscribe-container {
  grid-column-gap: 27px;
  grid-row-gap: 27px;
  background-color: #fff;
  border-radius: 666px;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 30px;
  padding: 5px 5px 5px 20px;
  display: flex;
  box-shadow: 0 2px 5px #0003;
}

.contact-container {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  background-image: none;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  height: auto;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 0;
  padding-left: 0;
  display: flex;
}

.bold-text-26 {
  color: var(--black);
  font-size: 55px;
}

.contact-text {
  max-width: none;
  margin-top: 0;
  margin-left: 0;
  margin-right: auto;
}

.contact-section-2 {
  background-color: var(--blue-gradient-1);
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--blue-gradient-1), white);
  padding-top: 40px;
  padding-bottom: 0;
}

.button-2 {
  color: #fff;
  letter-spacing: .3px;
  text-transform: capitalize;
  -webkit-text-fill-color: inherit;
  cursor: pointer;
  background-color: #333;
  background-image: none;
  background-clip: border-box;
  border: 2px solid #333;
  border-radius: 35px;
  justify-content: center;
  align-items: center;
  width: 159px;
  margin-top: 0;
  margin-left: 0;
  padding-top: 12px;
  padding-bottom: 12px;
  font-family: "Ea Sports Covers Sc 1";
  font-size: 15px;
  font-weight: 600;
  transition: all .4s;
  display: flex;
  position: static;
  inset: auto auto 20px 20px;
}

.button-2:hover {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #333;
  background-color: #1c507e00;
  border-style: solid;
  border-color: #333;
}

.button-2.grey {
  grid-column-gap: 7px;
  grid-row-gap: 7px;
  color: #fff;
  text-align: center;
  letter-spacing: 0;
  -webkit-text-stroke-width: 0px;
  text-transform: none;
  background-color: #333;
  background-image: none;
  border: 1px solid #fff0;
  border-radius: 999px;
  width: auto;
  padding: 11px 35px;
  font-family: mustica;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 0 9px -6px #0000008f;
}

.button-2.grey:hover {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #333;
  background-color: #f3dede;
  border-style: solid;
  border-color: #bb7b7b;
}

.form-block-2 {
  max-width: 500px;
  margin-left: 0;
  margin-right: auto;
}

.image-90 {
  border-radius: 5px;
  width: 100%;
  margin-bottom: 10px;
  display: none;
}

.services-2 {
  width: 90%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 70px;
  padding-bottom: 90px;
  position: relative;
}

.text-block-121 {
  color: #333;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  font-weight: 500;
}

.image-78 {
  width: 25px;
  padding: 6px;
}

.section-heading {
  background-image: linear-gradient(270deg, var(--primary), white);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.section-heading.centre {
  text-align: center;
  text-transform: capitalize;
  flex-flow: row;
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  padding-top: 4px;
  padding-bottom: 4px;
  display: block;
}

.section-heading.white {
  color: var(--white);
  -webkit-text-fill-color: inherit;
  background-image: none;
  background-clip: border-box;
}

.section-heading.white.small {
  font-size: 2rem;
  line-height: 1.2;
}

.section-heading.large {
  font-size: 5rem;
  line-height: 1.1;
}

.div-block-226 {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 0;
  display: flex;
}

.div-block-227 {
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  display: flex;
}

.image-77 {
  background-image: linear-gradient(180deg, white, var(--blue-gradient-1));
  border: 1px solid #bebebe;
  border-radius: 5px;
  width: auto;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
}

.div-block-228 {
  box-shadow: none;
  border: 1px #e9e9e9;
  border-radius: 5px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: none;
  height: 100%;
  margin-bottom: 20px;
  padding: 20px 20px 15px;
  display: flex;
}

.div-block-228.selected {
  background-image: linear-gradient(135deg, white 44%, var(--blue-gradient-1));
  border-style: solid;
  border-color: #ddd;
  box-shadow: 0 5px 20px -11px #0003;
}

.heading-1 {
  color: #313131;
  margin-top: 0;
  margin-bottom: 10px;
  font-family: mustica;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
}

.div-block-212 {
  grid-column-gap: 27px;
  grid-row-gap: 27px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: stretch stretch;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.div-block-214 {
  aspect-ratio: 1;
  box-shadow: none;
  background-color: #f5f9ff;
  border: 1px #bdbdbd;
  border-radius: 9px;
  order: -1;
  justify-content: center;
  align-self: auto;
  align-items: center;
  height: 60px;
  margin-bottom: 20px;
  display: flex;
}

.link-block-10 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  border-bottom: 1px solid #cacaca;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: none;
}

.sub-heading-2 {
  text-align: left;
  max-width: 700px;
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  line-height: 165%;
}

.text-span-26 {
  box-shadow: none;
  color: var(--white);
  background-color: #eaf4fc;
  background-image: linear-gradient(#126bb9, #2e8cdf), linear-gradient(#ecf5fc, #ecf5fc);
  border-radius: 14px;
  height: 55px;
  margin-left: 10px;
  padding-top: 0;
  padding-left: 15px;
  padding-right: 15px;
  font-style: normal;
}

.contact-cards {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.card {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  background-color: var(--white);
  border: 1px solid #b8b8b8;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 20px;
  display: flex;
}

.text-block-122 {
  color: var(--black);
  font-family: mustica;
  font-size: 15px;
}

.text-block-123 {
  color: var(--black);
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  line-height: 135%;
}

.div-block-229 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.image-91 {
  aspect-ratio: 1;
  width: auto;
  height: 40px;
}

.div-block-230 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.form {
  border: 1px solid var(--lime-green);
  background-color: var(--white);
  border-radius: 5px;
  width: 100%;
  max-width: none;
  padding: 40px;
}

.heading-43 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-family: mustica;
  font-size: 45px;
  line-height: 115%;
}

.textarea-2 {
  border: 1px solid #b4d1ff;
  border-radius: 3px;
  height: auto;
  min-height: 100px;
  margin-bottom: 20px;
  padding-bottom: 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.text-field-2 {
  border: 1px solid #b4d1ff;
  border-radius: 3px;
  margin-bottom: 15px;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.text-field-3,
.text-field-4 {
  font-family: Montserrat, sans-serif;
}

.form-block-3 {
  flex: 0 auto;
  width: 50%;
  max-width: 590px;
}

.div-block-231 {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.image-92 {
  z-index: 44;
  opacity: .27;
  width: 200px;
  display: none;
  position: absolute;
  inset: 34% auto auto -34px;
  transform: rotate(-31deg);
}

.navbar {
  background-color: #ddd0;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: block;
  position: absolute;
}

.container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
}

.nav-menu {
  justify-content: flex-end;
  align-items: center;
  margin-right: 10px;
  display: flex;
}

.nav-link {
  font-family: Montserrat, sans-serif;
  font-size: 13px;
}

.text-block-124 {
  color: var(--primary-colour);
  text-align: center;
  letter-spacing: -1px;
  margin-bottom: 10px;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
}

.brand {
  justify-content: flex-start;
  align-items: center;
  margin-left: 10px;
  display: flex;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.container-2 {
  background-image: none;
  border-radius: 45px;
  width: 90%;
  max-width: 1100px;
  margin-top: 7px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  position: relative;
}

.link-block-11 {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  text-decoration: none;
  display: flex;
}

.section-2 {
  background-image: none;
}

.menu-icon4_line-bottom {
  background-color: #fff;
  width: 24px;
  height: 2px;
}

.padding-global {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.margin-bottom {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.nav_logo-link {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  color: #fff;
  align-items: flex-end;
  padding-left: 0;
  display: flex;
}

.max-width-xsmall {
  width: 100%;
  max-width: 14.7rem;
}

.navbar-2 {
  width: 100%;
  padding-top: 30px;
  position: absolute;
}

.nav_logo {
  height: 1.3rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

.nav_menu-block {
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.nav_logo-pic {
  width: auto;
  max-width: 210px;
}

.menu-icon4_line-top {
  background-color: #fff;
  width: 24px;
  height: 2px;
  padding-bottom: 0;
  padding-right: 0;
}

.nav_title {
  color: #ffffff80;
  letter-spacing: -.019em;
  font-family: Inter, sans-serif;
  font-size: .9rem;
}

.nav_component {
  background-color: #fff0;
}

.text-size-small {
  color: var(--white);
  letter-spacing: -.005em;
  font-size: 1rem;
  line-height: 1.5;
}

.menu-icon_line-middle-base {
  background-color: #fff;
  width: 24px;
  height: 2px;
  position: absolute;
}

.menu-icon4_wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.menu-icon4 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  position: relative;
}

.padding-vertical {
  padding-left: 0;
  padding-right: 0;
}

.nav_left-wrapper {
  grid-column-gap: 2rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: start;
}

.nav_link-list {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 100%;
  grid-auto-columns: 100%;
  place-items: flex-start start;
  display: flex;
}

.container-large {
  width: 95%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.nav_menu-button {
  padding: 0;
}

.nav_menu-button.w--open {
  background-color: #0000;
}

.nav_logo-wrapper {
  grid-column-gap: 1.3125rem;
  grid-row-gap: 1.3125rem;
  flex-direction: column;
  display: flex;
}

.nav_link {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  color: #fff;
  letter-spacing: -.019em;
  justify-content: space-between;
  align-items: center;
  padding-top: .2rem;
  padding-bottom: .2rem;
  font-family: Inter, sans-serif;
  font-size: .9rem;
  line-height: 1.2;
  text-decoration: none;
  transition: all .4s;
  display: flex;
}

.nav_link:hover {
  opacity: 1;
  color: var(--primary);
  transform: translate(0, -1.5px);
}

.nav_link.w--current {
  color: #1ff990;
}

.nav_link.is-muted {
  color: #ffffff80;
  flex: 0 auto;
  text-decoration: line-through;
  transition: none;
}

.nav_link.is-muted:hover {
  opacity: 1;
  transform: none;
}

.menu-icon_line-middle-top {
  z-index: 2;
  width: 24px;
  height: 2px;
  position: absolute;
  inset: 0;
}

.menu-icon4_line-middle {
  background-color: #fff;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 2px;
  margin-top: 6px;
  margin-bottom: 6px;
  text-decoration: none;
  display: flex;
}

.body-3 {
  background-color: #000;
}

.hero-wrapper {
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100vh;
  min-height: auto;
  max-height: 900px;
  display: flex;
}

.image-93 {
  filter: blur();
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-background-image {
  filter: blur();
  object-fit: cover;
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0%;
  z-index: 0;
}

.hero-dark-overlay {
  background-image: linear-gradient(#fff0 54%, #000 93%), linear-gradient(#00000096, #fff0), radial-gradient(circle, #0000, #0000005c 71%);
  height: 100%;
  min-height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
  pointer-events: none;
}

.hero-heading {
  color: var(--white);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 4.3rem;
  font-weight: 500;
  line-height: 1.2;
}

.small-text {
  color: var(--white);
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
}

.small-text.lime-green {
  color: var(--lime-green);
  -webkit-text-stroke-color: var(--lime-green);
  font-size: .95rem;
}

.small-text.grey {
  color: var(--grey-font);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1rem;
  line-height: 1.7;
}

.small-text.relative {
  position: relative;
}

.small-text.relative.grey {
  z-index: 2;
}

.small-text.semi-bold {
  font-size: 1rem;
  font-weight: 600;
}

.small-text.none {
  display: none;
}

.tiny-text {
  color: var(--grey-font);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.hero-content-width-wrapper {
  z-index: 999;
  width: 95%;
  margin-bottom: 40px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  position: absolute;
  inset: auto 0% 0%;
}

.button-group {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.button-group.is-course {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: block;
}

.button-3 {
  color: #0a0a0a;
  text-align: center;
  background-color: #fff;
  padding: 1.5rem;
  font-weight: 600;
  line-height: .9;
  text-decoration: none;
  position: relative;
}

.button_bg {
  pointer-events: none;
  background-color: #1ff990;
  width: 0%;
  transition: width 1s cubic-bezier(.165, .84, .44, 1);
  position: absolute;
  inset: 0%;
}

.button_text {
  z-index: 2;
  color: #0a0a0a;
  position: relative;
}

.medium-text {
  color: var(--white);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.6;
  text-decoration: none;
}

.medium-text.grey {
  color: var(--grey-font);
}

.button-text {
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 600;
}

.button-cta {
  border: 1px solid var(--primary-colour);
  background-color: #0037ac;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 12px 25px;
  text-decoration: none;
  display: flex;
  position: relative;
  box-shadow: inset 0 -9px 16px #fff3;
}

.button-icon {
  color: var(--white);
  width: 20px;
  margin-left: 10px;
}

.buttoncover-interaction {
  background-color: #fff;
  height: 100%;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.work_link {
  grid-column-gap: .7em;
  grid-row-gap: .7em;
  background-color: var(--primary);
  color: var(--white);
  border: 1.5px solid #0003;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  padding: .5rem 1rem;
  line-height: 1.4;
  text-decoration: none;
  transition: all .2s;
  display: flex;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

.work_link:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
  border-bottom-width: 2px;
  border-bottom-color: var(--primary);
  color: var(--white);
  background-color: #06b26800;
  border-radius: 0;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
}

.work_link:hover {
  color: #fff;
  background-color: #000;
  border: 1.5px solid #fff;
}

.work_link:hover:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
  border: none;
  border-bottom: 2px solid var(--primary);
  border-radius: 0;
  text-decoration: none;
  background-color: transparent;
}

/* Hero Buttons Wrapper */
.hero-buttons-wrapper {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

/* Animation for My Work button */
.work_link-animate {
  opacity: 0;
  animation: slideUpFade 0.6s ease-out 0.5s forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Inverted Button Style */
.work_link-inverted {
  background-color: transparent;
  border: 1.5px solid #fff;
  color: #fff;
}

.work_link-inverted .work_link-svg {
  color: #fff;
}

.work_link-inverted:hover {
  background-color: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.work_link-inverted:hover .work_link-svg {
  color: #fff;
}

.work_link-text-wrap {
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.text-style-sub {
  text-transform: uppercase;
  margin-bottom: 0;
  font-size: 1rem;
}

.text-style-sub:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
  color: var(--white);
}

.text-style-sub.is-2 {
  color: var(--white);
  margin-bottom: 0;
  font-size: 1rem;
  position: absolute;
  inset: 0% auto auto 0%;
}

.text-style-sub.is-2:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
  color: var(--white);
}

.work_link-svg {
  flex: none;
  width: .7rem;
  height: 1rem;
  transition: transform .2s;
}

.work_link-svg:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
  color: var(--white);
}

.gallery_component {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.text-size-small-2 {
  letter-spacing: -.005em;
  font-size: .9rem;
}

.gallery_list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start;
  display: grid;
}

.gallery_item {
  flex-direction: column;
  align-items: center;
  width: 100%;
  transition: transform .4s;
  display: flex;
}

.gallery_item:hover {
  transform: translate(0, -10px);
}

.text-size-small-3,
.text-size-small-4 {
  letter-spacing: -.005em;
  font-size: .9rem;
}

.work-gallery {
  z-index: 999;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* Fix for 1280px-1440px range where hero is taller */
@media screen and (min-width: 1280px) and (max-width: 1440px) {
  .work-gallery {
    padding-top: 17rem;
  }
}

/* Projects Header */
.work-gallery-header {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 2rem;
  margin-bottom: calc(3rem - 20px);
  text-align: left;
}

.work-gallery-header .small-heading-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Marquee Container */
.marquee-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  padding: 20px 0 50px 0;
}

.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  width: 330px;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  background: linear-gradient(to right,
      #000000 0%,
      rgba(0, 0, 0, 0.9) 15%,
      rgba(0, 0, 0, 0.7) 30%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.3) 70%,
      rgba(0, 0, 0, 0.1) 85%,
      transparent 100%);
}

.marquee-container::after {
  right: 0;
  background: linear-gradient(to left,
      #000000 0%,
      rgba(0, 0, 0, 0.9) 15%,
      rgba(0, 0, 0, 0.7) 30%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.3) 70%,
      rgba(0, 0, 0, 0.1) 85%,
      transparent 100%);
}

.marquee-track {
  display: flex;
  gap: calc(2rem + 7px);
  animation: marquee 25s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Project Cards */
.marquee-project-card {
  flex-shrink: 0;
  width: 630px;
  height: auto;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
  border: 1px solid #1f1f1f;
  transition: transform 0.4s ease-in, box-shadow 0.4s ease-in, border-color 0.4s ease-in;
  will-change: transform;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.marquee-project-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 25px 60px -10px rgba(46, 255, 165, 0.18);
  border-color: rgba(46, 255, 165, 0.25);
}

.marquee-project-image {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  position: relative;
  border-radius: 5px 5px 0 0;
}

.marquee-project-info {
  padding: 1.75rem 2rem;
  width: 100%;
  background-color: #0f0f0f;
}

.marquee-project-category {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  color: #888;
  margin-bottom: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.4s ease-in;
}

.marquee-project-card:hover .marquee-project-category {
  color: #2effa5;
}

.marquee-project-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.35;
}

/* Responsive - Projects Section */
@media screen and (max-width: 991px) {
  .marquee-project-card {
    width: 500px;
    min-height: auto;
    overflow: visible;
  }

  .marquee-project-image {
    flex: 0 0 auto;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  .marquee-project-info {
    padding: 1.5rem 1.75rem;
    flex: 1 1 auto;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
  }

  .marquee-project-title {
    font-size: 1.2rem;
    white-space: normal;
    word-wrap: break-word;
  }

  .marquee-project-category {
    margin-bottom: 0.6rem;
    white-space: normal;
  }

  .marquee-track {
    animation-duration: 8s;
  }

  .work-gallery-header {
    padding: 0 1.5rem;
  }

  .marquee-container {
    padding: 20px 0 40px 0;
  }
}

@media screen and (max-width: 768px) {
  .marquee-project-card {
    width: 400px;
    min-height: auto;
    overflow: visible;
  }

  .marquee-project-image {
    flex: 0 0 auto;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  .marquee-project-info {
    padding: 1.25rem 1.5rem;
    flex: 1 1 auto;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .marquee-project-title {
    font-size: calc(1.15rem - 1.5px);
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
  }

  .marquee-project-category {
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    white-space: normal;
  }

  .marquee-track {
    gap: 1.5rem;
    animation-duration: 9s;
  }

  .marquee-container::before,
  .marquee-container::after {
    width: 100px;
  }

  .marquee-container {
    padding: 20px 0 40px 0;
  }

  .work-gallery {
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .work-gallery-header {
    padding: 0 1.25rem;
    margin-bottom: 2rem;
  }

  .my-services {
    padding-bottom: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .marquee-project-card {
    width: 320px;
    min-height: auto;
    overflow: visible;
  }

  .marquee-project-image {
    flex: 0 0 auto;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  .marquee-project-info {
    padding: 1rem 1.25rem;
    flex: 1 1 auto;
    min-height: fit-content;
    overflow: visible;
  }

  .marquee-project-title {
    font-size: calc(1.05rem - 1.5px);
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
  }

  .marquee-project-category {
    font-size: 0.7rem;
    margin-bottom: 0.45rem;
    white-space: normal;
  }

  .marquee-track {
    gap: 1rem;
    animation-duration: 19.2s;
  }

  .marquee-container::before,
  .marquee-container::after {
    width: 60px;
  }

  .marquee-container {
    padding: 20px 0 40px 0;
  }

  .work-gallery {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .work-gallery-header {
    padding: 0 1rem;
    margin-bottom: 1.5rem;
  }

  .my-services {
    padding-bottom: 1rem;
  }
}

@media screen and (max-width: 375px) {
  .marquee-project-card {
    width: 280px;
    min-height: auto;
    overflow: visible;
  }

  .marquee-project-image {
    border-radius: 5px 5px 0 0;
    overflow: hidden;
  }

  .marquee-project-info {
    padding: 0.875rem 1rem;
    flex: 1 1 auto;
    min-height: fit-content;
    overflow: visible;
  }

  .marquee-project-title {
    font-size: calc(1rem - 1.5px);
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
  }

  .marquee-project-category {
    font-size: 0.68rem;
    margin-bottom: 0.4rem;
    white-space: normal;
  }

  .marquee-track {
    gap: 0.875rem;
    animation-duration: 25s;
  }

  .marquee-container {
    padding: 20px 0 30px 0;
  }
}

.section-container {
  z-index: 1;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.section-container._4-bottom-padding {
  padding-bottom: 0;
}

.section-container._4-bottom-padding._2top-padding {
  padding-top: 2rem;
}

.section-container._2-padding-top-and-bottom {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section-container._2rem-bottom-padding {
  padding-bottom: 3rem;
}

.section-container._1-top-bottom-padding {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.text-size-small-5 {
  letter-spacing: -.005em;
  font-size: .9rem;
}

._10px-gap {
  width: 100%;
  padding-top: 10px;
}

.project-content-wrapper {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: var(--invert-bg-colour);
  flex-flow: column;
  padding: 15px 20px;
  text-decoration: none;
  display: flex;
}

.image-94 {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
  position: static;
}

.collection-item {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  border-radius: 5px;
  flex-flow: column;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  transition: all .4s;
  display: flex;
  overflow: hidden;
}

.collection-item:hover {
  transform: translate(0, -10px);
}

.collection-list {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  display: grid;
}

.website-image-link {
  position: relative;
}

.website-text-link-wrapper {
  text-decoration: none;
}

.ikonik-0stoa {
  color: #fff;
}

.small-icons {
  aspect-ratio: 1;
  color: var(--white);
  flex-flow: column;
  order: -9999;
  width: auto;
  height: 20px;
  display: flex;
}

.ikonik-whk48,
.ikonik-rabup,
.ikonik-7iamo,
.ikonik-qjssk,
.ikonik-il6wgj {
  color: #fff;
}

.div-block-233 {
  background-image: radial-gradient(circle, #fff0 66%, #0000004a);
  position: absolute;
  inset: 0%;
}

.my-services {
  z-index: 999;
  position: relative;
  padding-bottom: 2rem;
}

.what-we-do-point-1 {
  z-index: auto;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  background-color: var(--light-background-colour);
  color: #fff;
  background-image: none;
  border: 1px solid #131313;
  border-radius: 5px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  padding: 35px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.heading-sub-container {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  display: flex;
  gap: 1rem;
}

.heading-sub-container.centre {
  justify-content: flex-start;
  align-items: center;
}

.icon-wrapper {
  z-index: 2;
  aspect-ratio: 1;
  border: 2px solid var(--charcoal-grey);
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  height: 55px;
  display: flex;
  position: relative;
}

.what-we-do-wraper {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  display: flex;
}

.what-we-do-content {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.icon-embed-xxsmall {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: flex;
}

.icon-embed-xxsmall.is-min-w {
  color: #0e123d;
  min-width: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.medium-text-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #eee;
  flex-flow: column;
  flex: 0 auto;
  max-width: 800px;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
  display: flex;
}

.medium-text-2.relative {
  font-family: Inter, sans-serif;
  position: relative;
}

.ebutton_text-post {
  opacity: 0;
  color: #0e123d;
  margin-left: .75rem;
  font-size: 1rem;
  font-weight: 300;
}

.ebutton_text-pre {
  margin-left: .75rem;
  margin-right: .75rem;
  font-size: 1rem;
  font-weight: 300;
  position: static;
}

.blue-trans-gradient-overlay {
  z-index: 1;
  background-image: linear-gradient(#131212, #000);
  border: 1px #000;
  height: 100%;
  position: absolute;
  inset: auto 0% 0%;
}

._10px-spacng {
  width: 100%;
  padding-top: 10px;
}

.ebutton_outer {
  color: #fff;
  white-space: nowrap;
  background-color: #2d62ff;
  background-image: linear-gradient(270deg, #1b5f65, #1a3f49a3);
  border-radius: 5rem;
  justify-content: flex-start;
  align-items: center;
  width: 11rem;
  height: 3rem;
  padding: .5rem .25rem .5rem 2.75rem;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -5px 8px #0003;
}

.ebutton_outer.outline-6 {
  background-color: #2d62ff00;
  background-image: none;
  border: 1px solid #fff;
  width: auto;
}

.medium-heading {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.medium-heading.relative {
  font-size: 1.8rem;
  position: relative;
}

.medium-heading.semi-bold {
  font-weight: 500;
}

.medium-heading.medium {
  font-weight: 600;
}

.button-container {
  width: 259.9px;
  margin-left: auto;
  margin-right: auto;
}

.button-container.left-align {
  width: 185.35px;
  margin-left: 0;
}

.ebutton_icon-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  color: #2d62ff;
  background-color: #fff;
  background-image: radial-gradient(circle at 0 0, #f5f4ff, #fff);
  border-radius: 5rem;
  justify-content: flex-end;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem .75rem;
  display: flex;
  position: absolute;
  left: .25rem;
  overflow: hidden;
}

.section-heading-2 {
  color: #fff;
  text-transform: capitalize;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.1;
}

.small-icon {
  aspect-ratio: 1;
  color: var(--white);
  width: 50%;
  height: auto;
}

.diagonal-lines-image {
  z-index: auto;
  opacity: .09;
  background-image: none;
  border: 4px #b4b4b436;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.text-span-27 {
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff, #a2c7eb);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 500;
}

.small-heading {
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
}

.small-heading.relative {
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 500;
  line-height: 1.5;
  position: relative;
}

.white-green-gradient {
  background-image: linear-gradient(270deg, var(--primary), white 80%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.ikonik-8lcup,
.ikonik-qzzpz,
.ikonik-nzang,
.ikonik-dxkvg,
.ikonik-936j7,
.ikonik-wco6p,
.ikonik-qm4i,
.ikonik-kl026f {
  color: #fff;
}

.step-content-block {
  text-align: left;
  align-self: center;
  position: relative;
}

.img-block {
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 40%;
  display: flex;
  position: relative;
}

.dot {
  z-index: 3;
  background-color: #eeeff4;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-bottom: -6px;
  position: relative;
}

.step {
  z-index: 2;
  color: #272727;
  background-color: #0f0f0f;
  border: 1px solid #404040;
  border-radius: 10px;
  align-items: center;
  padding: 12%;
  display: flex;
  position: relative;
  box-shadow: inset 0 0 45px -30px #ffffff70, 0 1rem 80px -20px #1ff9905e;
}

.scoll-wrap {
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
  position: absolute;
  bottom: 50%;
}

.content-block {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 0;
}

.bg-shadow {
  z-index: 1;
  border-radius: 16px;
  position: absolute;
  inset: 0%;
  box-shadow: 7px 7px 20px #12121212;
}

.content-wrap {
  justify-content: flex-end;
  width: 40%;
  display: flex;
}

.label {
  color: var(--lime-green);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: Inter, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2;
}

.steps-clone {
  flex-direction: column;
  justify-content: center;
  margin-top: 0;
  display: flex;
  position: relative;
}

.step-block {
  flex-wrap: nowrap;
  place-content: center space-around;
  align-items: center;
  min-height: 60vh;
  margin-top: -1px;
  display: flex;
  position: relative;
}

.scroll-base {
  transform-origin: 50% 0;
  background-color: #eeeff4;
  width: 6px;
  height: 100%;
}

.process-content-wrapper {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  margin-top: 24px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  display: flex;
}

.scroll-animate {
  background-color: var(--primary);
  transform-origin: 50% 0;
  width: 6px;
  height: 100%;
  position: absolute;
  bottom: 0;
}

.heading-44 {
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
}

.large-icon {
  z-index: 2;
  aspect-ratio: 1;
  color: #fff;
  width: auto;
  height: 75%;
  position: relative;
  transform: rotate(5deg);
}

.circle {
  z-index: 0;
  aspect-ratio: 1;
  background-color: #1a1a1a;
  background-image: linear-gradient(#222, #000);
  border-radius: 99px;
  justify-content: center;
  align-items: center;
  height: 200px;
  display: flex;
  position: static;
  top: 41px;
  right: 141.681px;
}

.ikonik-p9efr,
.ikonik-vhtol,
.ikonik-5vref,
.ikonik-hhl45,
.ikonik-g9esk,
.ikonik-4ycot {
  color: #fff;
}

.my-process {
  z-index: 999;
  position: relative;
  padding: 6rem 0;
}

.my-process::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, #000000, transparent);
  z-index: 10;
  pointer-events: none;
}

/* New Process Section Styles */
.process-new-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.process-header {
  text-align: center;
  margin-bottom: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.process-header .small-heading-wrapper {
  margin-bottom: 0;
  display: inline-flex;
  width: auto;
}

.process-header .section-heading-2 {
  margin-top: 0;
  margin-bottom: 0;
}

.process-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.process-line {
  position: absolute;
  left: 109px;
  top: 0;
  height: 100%;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1px;
  z-index: 1;
}

.process-line-fill {
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #2effa5 0%, rgba(46, 255, 165, 0.5) 100%);
  border-radius: 1px;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  box-shadow: 0 0 15px rgba(46, 255, 165, 0.3);
}

.process-step {
  display: flex;
  gap: 4rem;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.process-step.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.process-step-number {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  min-width: 120px;
  position: relative;
  z-index: 3;
}

.process-step-number span {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.05em;
  transition: color 0.4s ease;
}

.process-step.animate-in .process-step-number span {
  color: #2effa5;
  text-shadow: 0 0 10px rgba(46, 255, 165, 0.3);
}

.process-step-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #0c0c0c;
  border: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 5;
  transition: all 0.4s ease;
  box-shadow: 0 0 0 8px #0c0c0c;
  /* Mask the line behind */
}

.process-step.animate-in .process-step-dot {
  border-color: #2effa5;
  box-shadow: 0 0 0 8px #0c0c0c, 0 0 20px rgba(46, 255, 165, 0.4);
  background: #0c0c0c;
}

.process-step-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2effa5;
  transition: transform 0.3s ease 0.2s;
}

.process-step.animate-in .process-step-dot::after {
  transform: translate(-50%, -50%) scale(1);
}

.process-step-card {
  flex: 1;
  display: flex;
  gap: 2rem;
  padding: 2.5rem;
  background: rgba(40, 40, 40, 0.3);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 16px;
  transition: all 0.4s ease;
}

.process-step-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(46, 255, 165, 0.15);
  transform: translateY(-4px);
  box-shadow: 0 20px 50px -15px rgba(46, 255, 165, 0.08);
}

.process-step-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 72px;
  height: 72px;
  min-width: 72px;
  background: rgba(46, 255, 165, 0.05);
  border: 1px solid rgba(46, 255, 165, 0.1);
  border-radius: 12px;
  color: #2effa5;
  transition: all 0.4s ease;
  padding-top: 12px;
}

.process-step-card:hover .process-step-icon {
  background: rgba(46, 255, 165, 0.1);
  border-color: rgba(46, 255, 165, 0.2);
  transform: scale(1.05);
}

.process-step-icon svg {
  width: 48px;
  height: 48px;
}

.process-step-content {
  flex: 1;
}

.process-step-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 1rem 0;
  line-height: 1.3;
}

.process-step-description {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
  margin: 0;
}

/* Process Section Responsive */
@media screen and (max-width: 991px) {
  .my-process {
    padding: 4rem 0;
  }

  .process-header {
    margin-bottom: 4rem;
  }

  .process-timeline {
    gap: 2.5rem;
  }

  .process-step {
    gap: 3rem;
  }

  .process-step-card {
    padding: 2rem;
    gap: 1.5rem;
  }

  .process-step-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    padding-top: 10px;
  }

  .process-step-icon svg {
    width: 40px;
    height: 40px;
  }

  .process-step-title {
    font-size: 1.25rem;
  }

  .process-line {
    left: 89px;
  }

  .process-step-number {
    min-width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .my-process {
    padding: 3rem 0;
  }

  .process-new-wrapper {
    padding: 0 1.5rem;
  }

  .process-header {
    margin-bottom: 3rem;
  }

  .process-subtitle {
    font-size: 1rem;
  }

  .process-step {
    flex-direction: column;
    gap: 0;
  }

  .process-step-number {
    flex-direction: row;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .process-line {
    display: none;
  }

  .process-step-card {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem;
  }

  .process-step-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    padding-top: 8px;
  }

  .process-step-icon svg {
    width: 36px;
    height: 36px;
  }

  .process-step-title {
    font-size: 1.125rem;
  }

  .process-step-description {
    font-size: 0.9375rem;
  }
}

@media screen and (max-width: 480px) {
  .process-new-wrapper {
    padding: 0 1rem;
  }

  .process-step-card {
    padding: 1.5rem;
  }

  .process-step-title {
    font-size: 1.0625rem;
  }

  .process-step-description {
    font-size: 0.875rem;
  }
}

.testimonials {
  z-index: 999;
  background-color: var(--invert-bg-colour);
  position: relative;
  overflow: hidden;
}

.slider-nav-inactive {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background-color: #fff;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  padding: 0;
  box-shadow: 0 2.4px 7.2px #122b690a, 0 1.2px 2.4px #122b6914, 0 0 0 1.2px #122b6914;
}

.slider-author-wrapper {
  grid-column-gap: 55px;
  grid-row-gap: 55px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.slider-icon {
  color: var(--white);
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  display: flex;
}

.slider-avatar {
  aspect-ratio: auto;
  flex: none;
  order: 9999;
  width: 30%;
  height: auto;
}

.slider-avatar.smaller {
  width: 15%;
}

.slider-avatar._20-width {
  width: 20%;
}

.slider-testimonial {
  background-color: #ddd0;
  justify-content: center;
  align-items: center;
  height: auto;
  display: block;
  width: 95%;
  margin: 0 auto;
}

.slider-arrow-icon {
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  display: flex;
}

.image-cover {
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 10px;
  width: 25%;
  height: auto;
}

.left-arrow-hidden {
  display: none;
}

.slider-nav {
  z-index: 2;
  justify-content: center;
  align-items: center;
  column-gap: 8px;
  padding: 16px;
  display: flex;
}

.testimonial-name {
  color: #000;
  font-weight: 500;
  line-height: 24px;
}

.slider-arrow-right {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #fff;
  white-space: nowrap;
  background-color: #202020;
  border-radius: 99px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  display: flex;
}

.slider-nav-active {
  background-color: var(--primary);
  box-shadow: 0 0 13px 0 var(--primary);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  padding: 0;
}

.slider-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1.5fr 1.5fr;
  justify-content: space-between;
  display: flex;
}

.slide-nav-hidden {
  display: none;
}

.slider-image {
  aspect-ratio: 1;
  background-image: linear-gradient(#00000080, #00000080), url('../images/2151075901.jpg');
  background-position: 0 0, 50%;
  background-size: auto, cover;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: auto;
  display: flex;
}

.slider-image.irmaks {
  aspect-ratio: 1;
  background-image: linear-gradient(#00000080, #00000080), url('../images/3614.jpg');
  background-position: 0 0, 50%;
}

.slider-image.tng {
  aspect-ratio: 1;
  background-image: linear-gradient(#0000, #0000), url('../images/2151944285.jpg');
  background-position: 0 0, 0 0;
  width: 50%;
}

.slider-control-row {
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  display: flex;
}

.slider-wrapper {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.slider-card {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 47%;
  padding: 32px 0;
  display: flex;
}

.testimonial-author {
  color: #5a5a60;
  letter-spacing: .08px;
}

.slider-pararagraph {
  color: #000;
  letter-spacing: -.2px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 32px;
}

.slider-arrow-left {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #000;
  white-space: nowrap;
  background-color: #fff;
  border-radius: 99px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
  display: flex;
}

.right-arrow-hidden {
  display: none;
}

.slide-2 {
  height: 100%;
}

.slider-button-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.content-spacing {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  flex-flow: column;
  display: flex;
}

.ikonik-ljf1l {
  color: #fff;
}

.speech-marks-icon {
  aspect-ratio: 1;
  color: var(--white);
  width: 100px;
  height: 100px;
}

.div-block-234 {
  background-color: #fff;
  width: 2px;
  height: 100%;
}

.footer-subscribe {
  border-bottom: 1px #e4ebf3;
  padding: 0 0 30px;
  position: relative;
}

.container-3 {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.footer-form-two {
  background-color: #f5f7fa;
  margin-bottom: 40px;
  padding: 64px;
}

.footer-form-container-two {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-form-title {
  font-size: 24px;
  line-height: 32px;
}

.footer-form-block-two {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  position: relative;
}

.footer-form-input {
  border: 1px #000;
  width: 460px;
  height: 48px;
  margin-bottom: 0;
  padding: 12px 180px 12px 20px;
}

.footer-form-input::placeholder {
  color: #1a1b1fcc;
}

.button-primary {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #1a1b1f;
  padding: 12px 25px;
  font-size: 12px;
  line-height: 20px;
  transition: all .2s;
}

.button-primary:hover {
  color: #fff;
  background-color: #32343a;
}

.button-primary:active {
  background-color: #43464d;
}

.button-primary.footer-form-button {
  padding: 8px 18px;
  position: absolute;
  right: 8px;
}

.footer-wrapper-three {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-block-three {
  justify-content: flex-start;
  align-items: center;
  margin-left: -20px;
  margin-right: -20px;
  display: flex;
}

.footer-link-three {
  color: var(--white);
  margin-left: 20px;
  margin-right: 20px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  text-decoration: none;
  transition: all .3s;
}

.footer-link-three:hover {
  color: var(--primary);
}

.footer-social-block-three {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: center;
  align-items: flex-end;
  margin-left: -32px;
  display: flex;
}

.footer-social-link-three {
  margin-left: 32px;
}

.footer-divider-two {
  background-color: #e4ebf3;
  width: 100%;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
}

.footer-bottom {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.footer-copyright {
  color: var(--white);
}

.footer-legal-block {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-legal-link {
  color: var(--white);
  margin-left: 24px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  text-decoration: none;
}

.footer-legal-link:hover {
  color: var(--primary);
}

.footer-legal-link.no-margin {
  margin-left: 0;
}

.image-95 {
  color: var(--white);
  font-family: Inter, sans-serif;
}

.website-link {
  text-decoration: none;
}

.footer {
  z-index: 999;
  background-image: radial-gradient(circle closest-corner at 50% 120%, #03c06508, #fff0);
  position: relative;
}

.form-text-field {
  color: #fff;
  background-color: #fff0;
  border: 1px #b0c3ff;
  border-bottom: 1px solid #fff;
  border-radius: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 14px;
  padding-left: 0;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  transition: border-color 0.2s ease;
}

.form-text-field:focus {
  border-bottom-color: var(--primary);
  outline: none;
}

.form-text-field.w-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  padding-right: 35px;
  cursor: pointer;
  line-height: 1.5;
  height: auto;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.form-text-field.w-select option {
  background-color: #0c0c0c;
  color: #fff;
}

.form-text-field.input-message {
  color: #fff;
  height: 140px;
  margin-bottom: 0;
  font-size: 1rem;
}

.contact-icon {
  aspect-ratio: 1;
  color: #fff;
  order: -9999;
  width: auto;
  height: 25px;
}

.name-number-input {
  grid-column-gap: 1.3rem;
  grid-row-gap: 1.3rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  display: flex;
}

.div-block-238 {
  margin-bottom: 15px;
}

.section-heading-3 {
  color: #fff;
  text-transform: capitalize;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(270deg, #a2c7eb, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 4rem;
  font-weight: 500;
  line-height: 1.1;
}

.email-input {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  width: 50%;
  display: flex;
}

.email-input.full-width {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.div-block-239 {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  border-radius: 0;
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: auto;
  max-width: 1450px;
  padding-bottom: 0;
  display: flex;
  overflow: hidden;
}

.diagonal-lines-image-2 {
  opacity: .09;
  border: 4px #b4b4b436;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.contact-form {
  z-index: 999;
  background-image: none;
  position: relative;
}

.form-block-wrapper {
  border-radius: 0;
  width: 100%;
  margin-bottom: 0;
  overflow: hidden;
}

.button-text-2 {
  font-size: 1rem;
}

.contact-details-wra {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.contact-text-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 32px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-top: 10px;
  display: grid;
}

.button-4 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #fff;
  letter-spacing: 0;
  text-transform: capitalize;
  -webkit-text-fill-color: inherit;
  cursor: pointer;
  background-image: linear-gradient(270deg, #19575e, #204e82);
  background-clip: border-box;
  border: 1px #fff;
  border-radius: 5px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: auto;
  margin-top: 0;
  margin-left: 0;
  padding: 13px 25px;
  font-size: .9rem;
  font-weight: 300;
  text-decoration: none;
  transition: all .4s;
  display: flex;
  position: static;
  inset: 0% 0% 0% auto;
}

.button-4:hover {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #fff;
  border-style: none;
  border-color: #dd6800;
}

.medium-text-3 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  color: #eee;
  flex-flow: column;
  flex: 0 auto;
  max-width: none;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.6;
  display: block;
}

.large-heading {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
}

.blue-gradient-text {
  color: #2d62ff;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(270deg, #8bc3ff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
}

.contact-wrapper {
  grid-column-gap: 3rem;
  grid-row-gap: 3rem;
  box-shadow: 0 40px 80px -60px var(--green-shadow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 3px solid #141414;
  border-radius: 10px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 50px 40px;
  display: flex;
  position: relative;
}

.heading-sub-container-2 {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  order: -9999;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  display: flex;
}

.contact-form-left-side {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 50%;
  display: flex;
  position: relative;
}

.small-text-2 {
  color: #fff;
  flex: 0 auto;
  width: auto;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
}

.button-icon-2 {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

.tiny-heading {
  color: #fff;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.1;
}

.tiny-heading.semi {
  font-weight: 500;
}

.contact-details-text {
  grid-column-gap: 9px;
  grid-row-gap: 9px;
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.contact-from-right-side {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: #1d1f2b;
  background-color: #1d1f2b73;
  border-radius: 10px;
  width: 50%;
  position: relative;
  overflow: hidden;
}

.section-container-2 {
  z-index: 3;
  width: 93%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
  position: relative;
}

.contact-form-wrapper {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: #0a0a0a;
  background-color: #0f0f0f;
  border-radius: 0;
  flex-flow: column;
  padding: 40px;
  display: flex;
}

.form-details-wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  display: flex;
}

.ikonik-xo0a8,
.ikonik-rcspej,
.ikonik-r58wg,
.ikonik-yjwobi,
.ikonik-b55jf {
  color: #fff;
}

.medium-icon {
  aspect-ratio: 1;
  color: var(--white);
  width: 35px;
  height: 35px;
  transition: all .25s;
}

.medium-icon:hover {
  color: var(--primary);
}

.ikonik-e0amoh {
  color: #fff;
}

.div-block-240 {
  margin-bottom: 40px;
}

.image-96 {
  width: 200px;
}

.icon-link-wrapper {
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.mask-5 {
  flex: 0 auto;
  align-self: auto;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.process-wrapper {
  grid-column-gap: 0rem;
  grid-row-gap: 0rem;
  flex-flow: column;
  display: flex;
}

.div-block-241 {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  flex-flow: column;
  display: flex;
}

.empty-state {
  display: none;
}

.empty-state-2 {
  display: block;
}

.smalll-heading-icon {
  aspect-ratio: 1;
  color: var(--primary);
  order: -9999;
  width: auto;
  height: 15px;
  font-size: 20px;
}

.smalll-heading-icon.rotate {
  transform: rotate(12deg);
}

.div-block-243 {
  z-index: 99;
  position: static;
}

.text-block-126 {
  color: #cecece;
  text-align: center;
  background-color: #0000;
  border: 1px solid #acacac4d;
  border-radius: 34px;
  padding: 4px 11px;
  font-family: Inter, sans-serif;
  font-size: .8rem;
  font-weight: 300;
  box-shadow: inset 0 -12px 20px -13px #ffffff14;
}

.services-points-wrapper {
  z-index: 99;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  white-space: normal;
  word-break: normal;
  flex-flow: wrap;
  grid-template: "."
    / 1fr 1fr 1fr;
  grid-auto-rows: 0;
  grid-auto-columns: 1fr;
  place-items: center;
  margin-top: 15px;
  display: flex;
  position: relative;
  overflow: visible;
}

.services-points-wrapper._2-colom {
  grid-template-columns: 1fr 1fr;
  place-items: center start;
  margin-top: 10px;
  display: flex;
}

.services-points-wrapper._5-margin-top {
  margin-top: 5px;
}

.ikonik-9bzvm {
  color: #fff;
}

.testimonial-text {
  color: var(--white);
  font-family: Inter, sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
}

.grid-bacgkorund {
  z-index: 1;
  pointer-events: none;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  outline-offset: 0px;
  border: 1px #fff;
  outline: 3px #333;
  grid-template: ". Area-4 Area-3 Area-2 Area"
    ". . . . ."
    ". . . . ."
    ". . . . ."
    ". . . . ."
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  display: grid;
  position: fixed;
}

.div-block-244 {
  aspect-ratio: 1;
  border: 1px solid #ffffff08;
  width: 100%;
  height: 55px;
}

.horizontal-grid-lines-wrapper {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.div-block-246 {
  border-top: 1px solid var(--gird-lines-grey);
  border-bottom: 1px solid var(--gird-lines-grey);
  height: 8px;
}

.my-project-wrapper {
  grid-column-gap: 35px;
  grid-row-gap: 35px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  margin-top: 40px;
  display: grid;
}

.project-thumbnail {
  aspect-ratio: 3 / 2;
  width: 100%;
}

.div-block-247 {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  background-color: var(--invert-bg-colour);
  flex-flow: column;
  padding: 15px 20px;
  display: flex;
}

.project-link {
  border-radius: 5px;
  text-decoration: none;
  transition: all .4s;
  overflow: hidden;
}

.project-link:hover {
  transform: translate(0, -10px);
}

.collection-list-wrapper {
  display: none;
}

@media screen and (min-width: 1280px) {
  .hero-section {
    width: 100%;
  }

  .my-projects {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .roadmap {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .reviews-container {
    width: 90%;
    max-width: 1200px;
  }

  .reviews-section {
    padding-top: 80px;
  }

  .main-heading {
    margin-left: 0;
  }

  .contact-container {
    max-width: 1200px;
    margin-bottom: 40px;
  }

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

  .services-2 {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-heading.centre {
    max-width: none;
  }

  .section-heading.white.small {
    font-size: 2.5rem;
  }

  .nav_title {
    font-size: 1rem;
  }

  .nav_link-list {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .nav_link {
    font-size: 1rem;
  }

  .hero-wrapper {
    max-height: 960px;
  }

  .small-text,
  .small-text.grey,
  .small-text.relative.grey,
  .small-text.semi-bold {
    font-size: 1.1rem;
  }

  .tiny-text {
    font-size: .9rem;
  }

  .hero-content-width-wrapper {
    max-width: 1350px;
  }

  .text-style-sub,
  .text-style-sub.is-2 {
    font-size: 1.1rem;
  }

  .section-container {
    max-width: 1350px;
  }

  .project-content-wrapper {
    background-color: var(--invert-bg-colour);
  }

  .medium-text-2.relative {
    font-family: Inter, sans-serif;
  }

  .step-block {
    height: 500px;
    min-height: auto;
  }

  .slider-image {
    aspect-ratio: 1;
  }

  .slider-card {
    justify-content: center;
    align-items: stretch;
  }

  .footer-link-three,
  .footer-legal-link {
    font-size: 1.1rem;
  }

  .form-text-field {
    padding-top: 12px;
    padding-bottom: 16px;
    font-size: 1.1rem;
    line-height: 1.7;
  }

  .form-text-field.input-message {
    font-size: 1.1rem;
  }

  .div-block-239 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .contact-text-wrapper {
    grid-row-gap: 45px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    margin-top: 40px;
  }

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

  .small-text-2 {
    font-size: 1rem;
  }

  .button-icon-2 {
    aspect-ratio: 1;
    width: 20px;
    height: 20px;
  }

  .form-details-wrapper {
    grid-column-gap: 26px;
    grid-row-gap: 26px;
  }

  .process-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
}

@media screen and (min-width: 1440px) {
  .hero-section {
    height: auto;
    padding-top: 60px;
    padding-bottom: 80px;
  }

  .logo-wrapper {
    width: 94%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

  .nav-link-text-block {
    font-size: 19px;
  }

  .hero-content {
    max-width: 900px;
    margin-top: 60px;
  }

  .heading-h1 {
    font-size: 45px;
  }

  .heading-h1.work,
  .heading-h1.contact {
    font-size: 110px;
  }

  .heading-h1.left-align {
    font-size: 45px;
  }

  .hero-text-block.work {
    width: 490px;
    font-size: 17px;
  }

  .hero-text-block.contact {
    font-size: 17px;
  }

  .heading-h2 {
    max-width: 780px;
    font-size: 14px;
    line-height: 22px;
  }

  .copyright-info {
    font-size: 12px;
  }

  .work-content-wrapper {
    max-width: 1800px;
  }

  .text-block {
    font-size: 60px;
    line-height: 50px;
  }

  .hero-content-wrapper,
  .div-block-3 {
    max-width: 1800px;
  }

  .top-div {
    width: 94%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
  }

  .text-block-3 {
    font-size: 14px;
  }

  .text-block-3.black {
    font-size: 15px;
  }

  .text-block-4 {
    font-size: 15px;
    line-height: 21px;
  }

  .text-block-5 {
    font-size: 1.2em;
  }

  .link-block-4 {
    top: 30px;
  }

  .div-block-10 {
    max-width: 1800px;
  }

  .heading {
    font-size: 110px;
    line-height: .8em;
  }

  .text-block-7 {
    box-sizing: content-box;
    font-size: 1em;
  }

  .text-block-8 {
    width: 55%;
    max-width: none;
    font-size: 15px;
  }

  .text-block-9 {
    margin-bottom: 60px;
    font-size: 17px;
  }

  .contatc-form {
    width: 55%;
    max-width: 55%;
  }

  .text-field {
    font-size: 16px;
  }

  .submit-button-2 {
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 17px;
  }

  .text-block-10 {
    width: 30%;
    font-size: 15px;
  }

  .footer-container {
    max-width: 1800px;
  }

  .heading-2 {
    font-size: 100px;
  }

  .section {
    padding-bottom: 30px;
  }

  .div-block-195 {
    background-image: linear-gradient(#fff, #e7f1ff 83%);
    border-color: #a5a5a5;
    justify-content: center;
    align-items: center;
  }

  .div-block-217._2.faqqq {
    margin-left: 0;
  }

  .text-block-112.faq {
    padding-top: 0;
    padding-bottom: 0;
  }

  .my-projects {
    background-image: none;
    padding-top: 40px;
  }

  .road-map-container {
    max-width: 1200px;
  }

  .image-89 {
    width: 35px;
  }

  .reviews-content {
    margin-left: auto;
    margin-right: auto;
    transform: translate(-133px);
  }

  .reviews-content._2nd-row {
    transform: translate(-133px);
  }

  .reviews-container {
    width: 90%;
    max-width: 1200px;
  }

  .main-heading.centre {
    margin-bottom: 15px;
    font-size: 45px;
  }

  .main-heading.white {
    font-size: 45px;
  }

  .sub-heading {
    width: auto;
    font-size: 15px;
  }

  .contact-container {
    height: auto;
  }

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

  .services-2 {
    background-image: none;
  }

  .section-heading.centre,
  .form-block-3 {
    max-width: none;
  }

  .nav_title,
  .nav_link {
    font-size: 1rem;
  }

  .hero-wrapper {
    max-height: 960px;
    position: relative;
  }

  .hero-heading {
    font-size: 4.5rem;
  }

  .small-text,
  .small-text.lime-green {
    font-size: 1rem;
  }

  .tiny-text {
    font-size: 1rem;
  }

  .medium-text {
    font-size: 1.2rem;
  }

  .work_link {
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  .section-container {
    max-width: 1350px;
  }

  .container-large {
    max-width: 1350px;
  }

  .collection-list {
    grid-column-gap: 2.2rem;
    grid-row-gap: 2.2rem;
  }

  .what-we-do-point-1 {
    padding: 40px;
  }

  .what-we-do-content {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .medium-text-2.relative {
    font-family: Inter, sans-serif;
  }

  .small-heading.relative {
    font-size: 1.4rem;
  }

  .step-block {
    height: 500px;
    min-height: auto;
  }

  .slider-author-wrapper {
    width: 100%;
  }

  .slider-card {
    justify-content: center;
    align-items: flex-start;
  }

  .name-number-input {
    margin-top: 20px;
  }

  .div-block-239 {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
  }

  .large-heading {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.1;
  }

  .contact-wrapper,
  .contact-form-left-side {
    justify-content: space-between;
    align-items: flex-start;
  }
}

@media screen and (min-width: 1920px) {
  .hero-section {
    height: auto;
    padding-bottom: 100px;
  }

  .hero-content {
    max-width: 1050px;
    margin-top: 50px;
  }

  .heading-h1 {
    font-size: 45px;
  }

  .heading-h1.larger {
    line-height: 125%;
  }

  .hero-text-block.work {
    width: 400px;
  }

  .heading-h2 {
    max-width: 780px;
    line-height: 155%;
  }

  .body {
    background-image: none;
  }

  .div-block-3 {
    margin-left: auto;
    margin-right: auto;
  }

  .text-block-3.black {
    font-size: 16px;
  }

  .div-block-6 {
    grid-column-gap: 44px;
    grid-row-gap: 44px;
  }

  .text-block-8 {
    max-width: 690px;
    line-height: 1.9em;
  }

  .div-block-19 {
    width: 11px;
  }

  .div-block-194 {
    margin-top: 60px;
  }

  .slide-1 {
    width: 450px;
  }

  .slider-4 {
    width: auto;
  }

  .div-block-217._2 {
    width: 260px;
  }

  .text-block-112 {
    font-size: 17px;
  }

  .my-projects {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .roadmap {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .road-map-container {
    max-width: 1400px;
  }

  .customer-name {
    font-size: 13px;
  }

  .reviews-container {
    max-width: 1200px;
    overflow: visible;
  }

  .reviews-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .main-heading {
    margin-bottom: 25px;
    font-size: 55px;
    line-height: 125%;
  }

  .main-heading.centre {
    letter-spacing: 0;
    font-size: 45px;
    line-height: 125%;
  }

  .main-heading.white {
    margin-bottom: 10px;
  }

  .sub-heading {
    font-size: 15px;
    line-height: 26px;
  }

  .sub-heading.centre-align {
    text-align: left;
    margin-top: 10px;
    font-weight: 400;
  }

  .contact-container,
  .contact-section-2 {
    padding-bottom: 0;
  }

  .button-2 {
    justify-content: center;
    align-items: center;
    width: 161.969px;
    font-size: 15px;
    display: flex;
  }

  .button-2.grey {
    border-radius: 29px;
    width: auto;
    padding: 9px 35px;
    font-size: 14px;
  }

  .services-2 {
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .container-2 {
    max-width: 1200px;
  }

  .container-large {
    max-width: 1550px;
  }

  .hero-wrapper {
    max-height: 960px;
  }

  .hero-heading {
    font-size: 5rem;
  }

  .small-text.lime-green,
  .small-text.larger {
    font-size: 1.2rem;
  }

  .tiny-text {
    font-size: .95rem;
  }

  .hero-content-width-wrapper {
    max-width: 1550px;
  }

  .work_link {
    grid-column-gap: .6em;
    grid-row-gap: .6em;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }

  .text-style-sub,
  .text-style-sub.is-2 {
    font-size: 1.2rem;
  }

  .work_link-svg {
    justify-content: center;
    align-items: center;
    width: .8rem;
    height: .8rem;
    display: flex;
  }

  .section-container {
    max-width: 1550px;
  }

  .what-we-do-content {
    grid-column-gap: 2.6rem;
    grid-row-gap: 2.6rem;
  }

  .small-heading.relative {
    font-size: 1.5rem;
  }

  .step {
    padding: 11%;
  }

  .slider-card {
    padding-left: 40px;
  }

  .contact-icon {
    height: 27px;
  }

  .div-block-239 {
    grid-column-gap: 3rem;
    grid-row-gap: 3rem;
  }

  .contact-text-wrapper {
    margin-top: 25px;
  }

  .button-4 {
    justify-content: center;
    align-items: center;
    width: 161.969px;
    font-size: 15px;
    display: flex;
  }

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

  .heading-sub-container-2 {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .small-text-2 {
    font-size: 1.05rem;
  }

  .link-block-18 {
    width: auto;
  }

  .tiny-heading {
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 991px) {
  .hero-section {
    padding-top: 60px;
    padding-bottom: 89px;
  }

  .logo-wrapper {
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

  .nav-link-text-block {
    font-size: 1.1em;
  }

  .grid {
    width: 610px;
  }

  .hero-content {
    width: 100%;
    margin-top: 40px;
    margin-left: 0;
  }

  .heading-h1 {
    width: auto;
    max-width: none;
    font-size: 40px;
    line-height: 1.1em;
  }

  .heading-h1.left-align {
    margin-left: 0;
    font-size: 35px;
  }

  .heading-h1.larger {
    width: 100%;
    font-size: 45px;
    line-height: 115%;
  }

  .hero-text-block.work,
  .hero-text-block.contact {
    line-height: 35px;
  }

  .paragraph.work,
  .paragraph.contact {
    width: auto;
  }

  .heading-h2 {
    width: auto;
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.7em;
  }

  .footer-block {
    left: 40px;
  }

  .footer-block.right {
    right: 30px;
  }

  .experience-content-wrapper {
    width: 570px;
  }

  .project-details-wrapper {
    width: 380px;
  }

  .project-details-wrapper.left {
    width: 400px;
  }

  .copyright-info {
    margin-bottom: 10px;
    position: static;
  }

  .footer-info-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-image {
    width: 430px;
    height: 320px;
  }

  .work-content-wrapper {
    width: 94%;
  }

  .contact-content-wrapper {
    width: 94%;
    max-width: none;
  }

  .body {
    background-color: var(--black-black);
  }

  .style-guide {
    margin-bottom: 30px;
    display: none;
  }

  .color-usage-column {
    padding-left: 0;
    padding-right: 0;
  }

  .color-wrapper {
    margin-bottom: 30px;
  }

  .style-guide-column {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0;
    display: flex;
  }

  .style-guide-main-text-wrapper._2 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .style-guide-section {
    padding-left: 50px;
    padding-right: 50px;
  }

  .color-usage-column-wrapper {
    margin-bottom: 0;
  }

  .style-guide-column-wrapper {
    margin-bottom: 30px;
    display: block;
  }

  .style-guide-heading-h1 {
    font-size: 60px;
    line-height: 70px;
  }

  .style-guide-heading-h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .style-guide-link-2 {
    text-align: left;
  }

  .separator {
    width: 100px;
    height: 1px;
  }

  .hero-content-wrapper {
    padding-top: 41px;
  }

  .div-block-3 {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 36px;
  }

  .social.media.no-margin {
    order: -1;
  }

  .text-block-3 {
    font-size: 13px;
  }

  .hero-contents {
    width: 90%;
  }

  .text-block-4 {
    width: 200px;
    font-size: 1.3em;
  }

  .div-block-6 {
    grid-column-gap: 1%;
    grid-row-gap: 1%;
  }

  .image-5 {
    width: 45%;
  }

  .image-6 {
    width: 100%;
  }

  .text-block-6 {
    font-size: 25px;
  }

  .text-block-6.gourmet-heading {
    font-size: 16px;
  }

  .text-block-6.gourmet-heading.black {
    font-size: 20px;
  }

  .text-block-6.gourmet-heading.resortia {
    font-size: 25px;
  }

  .text-block-6.barbell-b-header {
    font-size: 18px;
    font-weight: 400;
  }

  .text-block-6.celestia-head {
    font-size: 18px;
  }

  .text-block-6.paintopia-head {
    font-size: 22px;
  }

  .text-block-6.fxit-head {
    font-size: 24px;
  }

  .text-block-8 {
    font-size: 1.1em;
  }

  .text-block-9 {
    font-size: 1.3em;
    line-height: 35px;
  }

  .text-field {
    font-size: 1.2em;
  }

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

  .form-block {
    margin-bottom: 0;
  }

  .button {
    vertical-align: baseline;
    flex: 0 auto;
  }

  .button.none-margin {
    margin-left: 0;
  }

  .cta-s {
    justify-content: center;
    align-items: center;
  }

  .image-9 {
    margin-left: 0;
  }

  .image-9.larger {
    width: 160px;
  }

  .div-block-20 {
    right: 40px;
  }

  .div-block-194 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 75px;
  }

  .div-block-195 {
    padding-left: 25px;
    padding-right: 25px;
  }

  .heading-41 {
    font-size: 35px;
  }

  .text-block-102 {
    font-size: 12px;
    line-height: 150%;
  }

  .slide-1 {
    width: 350px;
    height: auto;
    overflow: hidden;
  }

  .mask-4 {
    width: auto;
    height: auto;
  }

  .slider-4 {
    width: auto;
    height: auto;
    margin-top: 0;
    overflow: visible;
  }

  .services-mask {
    margin-top: 0;
  }

  .div-block-215 {
    margin-bottom: 20px;
  }

  .div-block-217._2 {
    margin-left: 0;
  }

  .text-block-112 {
    white-space: nowrap;
    font-size: 1.9em;
  }

  .text-block-112.faq {
    text-align: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .8em;
  }

  .div-block-219 {
    width: 45px;
  }

  .my-projects {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .slider1_arrow-wrapper {
    display: none;
  }

  .image-88 {
    width: auto;
  }

  .roadmap {
    background-color: #fff;
  }

  .div-block-220 {
    grid-template-rows: auto auto;
    width: 100%;
    margin-bottom: 0;
  }

  .div-block-221 {
    top: -6px;
  }

  .div-block-221.bottom-blue-circle {
    bottom: -14px;
  }

  .text-block-119 {
    font-weight: 400;
    line-height: 165%;
  }

  .roadmap-text-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .image-89 {
    display: block;
  }

  .div-block-225 {
    margin-bottom: 40px;
  }

  .reviews-content {
    flex-flow: row;
    justify-content: center;
    align-items: stretch;
    margin-top: 20px;
  }

  .reviews-content._2nd-row {
    transform: translate(-124px);
  }

  .customer-name {
    font-size: 12px;
  }

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

  .sub-heading-italic {
    text-align: left;
    font-size: 12px;
  }

  .review-1 {
    justify-content: space-between;
    width: 330px;
    height: auto;
    min-height: 100%;
  }

  .reviews-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .image-57.small {
    width: 14px;
  }

  .customer-image {
    width: 35px;
  }

  .main-heading {
    text-align: center;
    max-width: none;
    margin-bottom: 10px;
    font-size: 55px;
    line-height: 120%;
  }

  .main-heading.centre {
    text-align: center;
    letter-spacing: 0;
    margin-bottom: 10px;
    font-size: 40px;
  }

  .main-heading.white {
    text-align: center;
    letter-spacing: 0;
    margin-bottom: 0;
    font-size: 40px;
  }

  .sub-heading {
    text-align: left;
    width: 95%;
    max-width: 650px;
    margin-left: 0;
    margin-right: auto;
    font-size: 13px;
  }

  .sub-heading.centre-align {
    text-align: center;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
  }

  .contact-container {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: auto;
    margin-bottom: 40px;
    padding-bottom: 0;
    padding-left: 0;
    display: flex;
  }

  .contact-text {
    margin-left: auto;
    margin-right: auto;
  }

  .contact-section-2 {
    padding-bottom: 0;
  }

  .button-2 {
    margin-top: 0;
  }

  .services-2 {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .section-heading.white.small {
    line-height: 1.3;
  }

  .image-77 {
    background-image: linear-gradient(180deg, white 14%, var(--blue-gradient-1));
  }

  .div-block-228.selected {
    background-color: var(--white);
    background-image: linear-gradient(180deg, var(--white) 71%, var(--blue-gradient-1));
  }

  .div-block-212 {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .div-block-214 {
    background-color: #f5f9ff00;
  }

  .contact-cards {
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
  }

  .card {
    justify-content: center;
    align-items: center;
    width: 301.125px;
  }

  .heading-43 {
    text-align: center;
    font-family: mustica;
    font-size: 40px;
  }

  .text-field-2 {
    margin-bottom: 15px;
  }

  .form-block-3 {
    width: 100%;
    max-width: none;
  }

  .div-block-231 {
    margin-bottom: 20px;
  }

  .container {
    position: relative;
  }

  .nav-menu {
    background-color: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 15px;
    flex-flow: row;
    justify-content: flex-start;
    align-items: center;
    width: 20%;
    height: auto;
    margin-right: 40px;
    padding-top: 0;
    padding-bottom: 20px;
    display: flex;
    position: static;
    inset: 72px 0% 0% auto;
  }

  .nav-link {
    text-align: center;
    position: static;
  }

  .text-block-124 {
    font-size: 15px;
  }

  .menu-button {
    padding-right: 0;
  }

  .menu-button.w--open {
    background-color: #fff;
  }

  .brand {
    justify-content: flex-start;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0% auto 0% 0%;
  }

  .icon {
    color: var(--black);
    font-size: 26px;
  }

  .container-2 {
    max-width: 90%;
    position: relative;
  }

  .menu-icon4_line-bottom {
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-2 {
    flex-flow: column;
    padding-top: 0;
    display: block;
  }

  .nav_logo-pic {
    max-width: 180px;
  }

  .menu-icon4_line-top {
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon_line-middle-base {
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
    position: absolute;
  }

  .menu-icon4_wrapper {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }

  .menu-icon4 {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
    position: relative;
  }

  .nav_menu {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .nav_left-wrapper {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 0;
    display: flex;
  }

  .nav_menu-button {
    margin-left: -.5rem;
    padding: 0;
  }

  .nav_menu-button.w--open {
    background-color: #0000;
  }

  .nav_logo-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .menu-icon_line-middle-top {
    z-index: 2;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
    position: absolute;
    inset: 0;
  }

  .menu-icon4_line-middle {
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
    position: static;
  }

  .hero-wrapper {
    justify-content: center;
    align-items: flex-end;
    height: 100vh;
    min-height: 720px;
    max-height: none;
    position: relative;
    overflow: hidden;
  }

  .image-93 {
    z-index: 0;
    object-fit: cover;
    max-width: none;
    position: absolute;
    inset: 0%;
  }

  .hero-background-image {
    z-index: 0;
    object-fit: cover;
    max-width: none;
    position: absolute;
    inset: 0%;
  }

  .hero-dark-overlay {
    z-index: 0;
    background-image: linear-gradient(#fff0 54%, #000 93%), linear-gradient(#00000096, #fff0), radial-gradient(circle, #0000, #0000009c 92%);
    height: 100%;
    position: absolute;
    inset: 0%;
  }

  .hero-heading {
    font-size: 3.5rem;
  }

  .small-text.none {
    display: none;
  }

  .hero-content-width-wrapper {
    z-index: 2;
    width: 93%;
    margin-bottom: 20px;
    inset: auto 0% 0%;
  }

  .medium-text {
    font-size: 1.1rem;
  }

  .work_link {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
  }

  .work_link-svg:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
    width: 1.2em;
    height: 1.2em;
  }

  .gallery_list {
    grid-column-gap: 2rem;
    grid-template-columns: 1fr 1fr;
  }

  .page-wrapper {
    height: auto;
    min-height: auto;
  }

  .section-container {
    width: 93%;
  }

  .container-large {
    width: 93%;
  }

  .image-94 {
    height: 100%;
  }

  .collection-item {
    justify-content: space-between;
  }

  .collection-list {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: 1fr 1fr;
    place-items: stretch stretch;
  }

  .website-image-link,
  .div-block-233 {
    height: 100%;
  }

  .heading-sub-container.centre {
    justify-content: flex-start;
    align-items: center;
  }

  .what-we-do-content {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .circle {
    top: 50%;
    left: 50%;
    right: 0;
  }

  .slider-card {
    padding-left: 25px;
  }

  .container-3 {
    max-width: none;
  }

  .footer-form-two {
    padding: 40px;
  }

  .footer-form-title {
    margin-right: 15px;
  }

  .footer-form-input {
    width: 400px;
    padding-right: 180px;
  }

  .footer-wrapper-three {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-social-block-three {
    margin-top: 40px;
    margin-left: 0;
  }

  .footer-legal-link.no-margin {
    margin-left: 0;
  }

  .website-link {
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
    display: flex;
  }

  .form-text-field {
    font-size: 1rem;
  }

  .form-text-field.input-message {
    font-size: 1rem;
    line-height: 1.6;
  }

  .name-number-input {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px;
  }

  .section-heading-3 {
    width: auto;
    font-size: 3.5rem;
  }

  .email-input {
    width: 100%;
  }

  .div-block-239 {
    flex-flow: column;
  }

  .form-block-wrapper {
    width: 100%;
  }

  .button-text-2 {
    font-size: .9rem;
  }

  .contact-details-wra {
    justify-content: center;
    align-items: flex-start;
  }

  .contact-text-wrapper {
    flex: 0 auto;
    width: auto;
  }

  .button-4 {
    border-width: 1px;
    margin-top: 0;
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .medium-text-3 {
    font-size: 1.1rem;
  }

  .contact-wrapper {
    grid-column-gap: 1.2rem;
    grid-row-gap: 1.2rem;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .small-text-2 {
    text-align: left;
    word-break: normal;
    overflow-wrap: normal;
    flex: 0 auto;
    font-size: .85rem;
  }

  .button-icon-2 {
    width: 17px;
    height: 17px;
    margin-left: 5px;
  }

  .tiny-heading {
    line-height: 1.2;
  }

  .contact-details-text {
    flex: 0 auto;
  }

  .contact-form-wrapper {
    padding: 30px;
  }

  .process-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .nav-menu-2 {
    border: 1px solid var(--light-background-colour);
    background-color: var(--black-black);
    border-radius: 10px;
    flex: 0 auto;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px;
    inset: 0% 0% auto;
    box-shadow: inset 0 0 40px #f2e7e733;
  }

  .div-block-242 {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
    flex-flow: column;
    display: flex;
  }

  .text-block-126 {
    text-align: left;
  }

  .my-project-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .hero-section {
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 0 0 60px;
  }

  .logo-wrapper {
    border-bottom-width: 2px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    top: 10px;
    left: 0;
    right: 0;
  }

  .nav-link-block,
  .nav-link-block:hover {
    padding-left: 5px;
    padding-right: 5px;
  }

  .nav-link-text-block {
    font-size: .9em;
  }

  .hero-content {
    grid-column-gap: .2rem;
    grid-row-gap: .2rem;
    width: auto;
    max-width: none;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-h1 {
    width: 90%;
    max-width: 700px;
    margin-bottom: 20px;
    font-size: 35px;
  }

  .heading-h1.work {
    font-size: 60px;
  }

  .heading-h1.contact {
    margin-bottom: 10px;
  }

  .heading-h1.left-align {
    font-size: 30px;
  }

  .heading-h1.larger {
    font-size: 40px;
    line-height: 120%;
  }

  .hero-text-block.work {
    border-bottom-width: 2px;
    width: 240px;
    font-size: 10px;
    line-height: 25px;
  }

  .hero-text-block.contact {
    width: 190px;
    margin-bottom: 20px;
    font-size: 10px;
    line-height: 25px;
  }

  .paragraph {
    font-size: 13px;
    line-height: 25px;
  }

  .paragraph.work {
    font-size: 14px;
  }

  .heading-h2 {
    width: 85%;
    max-width: 450px;
    margin-top: 0;
    font-size: 12px;
    line-height: 165%;
    position: static;
  }

  .footer-block {
    flex-direction: row;
    margin-bottom: 30px;
    position: absolute;
    bottom: 30px;
    left: 30px;
  }

  .footer-block.right {
    bottom: 30px;
  }

  .footer-block-line {
    display: none;
  }

  .email-link {
    margin-bottom: 0;
    transform: rotate(0);
  }

  .social-icon-wrapper {
    margin-bottom: 0;
  }

  .email-link-wrapper {
    justify-content: center;
    width: auto;
    height: 30px;
    display: flex;
  }

  .email-link-wrapper:hover {
    height: auto;
  }

  .experience-section,
  .work-section {
    padding-left: 30px;
    padding-right: 30px;
  }

  .project-wrapper.two {
    flex-flow: column;
    display: flex;
  }

  .contact-section {
    padding-top: 60px;
    padding-left: 0;
    padding-right: 0;
  }

  .copyright-info {
    margin-bottom: 0;
    font-size: 10px;
    line-height: 12px;
  }

  .project-image.two {
    order: -1;
  }

  .contact-content-wrapper {
    width: 95%;
  }

  .style-guide-text-4 {
    font-size: 12px;
  }

  .color-usage-column {
    padding-left: 0;
    padding-right: 0;
  }

  .color-description {
    margin-bottom: 25px;
  }

  .style-guide-column {
    margin-bottom: 20px;
  }

  .style-guide-section {
    padding: 100px 35px;
  }

  .style-guide-heading-h2 {
    font-size: 18px;
    line-height: 25px;
  }

  .style-guide-paragraph {
    font-size: 13px;
    line-height: 25px;
  }

  .style-guide-text-5 {
    font-size: 12px;
  }

  .style-guide-paragraph-3 {
    font-size: 12px;
    line-height: 20px;
  }

  .style-guide-link-2 {
    font-size: 12px;
  }

  ._404-page-wrapper {
    align-items: center;
    padding-left: 0;
  }

  .text-block {
    font-size: 30px;
    line-height: 26px;
  }

  .div-block {
    padding-top: 60px;
  }

  .hero-content-wrapper {
    margin-top: 80px;
    padding-top: 0;
  }

  .div-block-3 {
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .top-div {
    width: 95%;
  }

  .social.media {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    display: inline-flex;
  }

  .social.media.no-margin {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .linkedin {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    justify-content: center;
    align-items: center;
    width: auto;
    padding-top: 0;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-flex;
  }

  .linkedin.black {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .linkedin.less-margin {
    width: auto;
    padding-left: 20px;
  }

  .image-4 {
    width: 16px;
    max-width: none;
  }

  .text-block-3 {
    font-size: 12px;
  }

  .hero-contents {
    width: 100%;
    margin-top: 60px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
  }

  .text-block-4 {
    width: 65%;
    max-width: 300px;
    margin-left: auto;
    margin-right: 0;
    font-size: 10px;
    line-height: 1.7em;
    display: inline-block;
  }

  .div-block-5 {
    width: 2px;
  }

  .div-block-6 {
    grid-column-gap: 0.5%;
    grid-row-gap: 0.5%;
    grid-template-columns: 1fr;
    place-items: stretch center;
  }

  .text-block-5 {
    font-size: 1em;
  }

  .image-5 {
    width: 18px;
  }

  .image-6 {
    height: auto;
  }

  .text-block-6 {
    font-size: 27px;
  }

  .text-block-6.gourmet-heading {
    font-size: 3em;
    line-height: 1.6em;
  }

  .text-block-6.gourmet-heading.resortia {
    -webkit-text-stroke-width: .5px;
    font-size: 26px;
  }

  .text-block-6.barbell-b-header {
    font-size: 3em;
    line-height: 1.6em;
  }

  .text-block-6.celestia-head,
  .text-block-6.paintopia-head {
    font-size: 3.2em;
    line-height: 1.6em;
  }

  .text-block-6.fxit-head {
    font-size: 3.5em;
    line-height: 1.6em;
  }

  .div-block-9 {
    height: 2px;
  }

  .slide {
    height: 100%;
  }

  .text-span-3,
  .text-span-4,
  .text-span-5,
  .text-span-6,
  .text-span-7 {
    font-size: .9em;
  }

  .heading {
    font-size: 60px;
    line-height: 1em;
  }

  .div-block-11 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .image-7 {
    width: 18px;
  }

  .text-block-7 {
    font-size: 10px;
    line-height: 1em;
  }

  .div-block-12 {
    grid-column-gap: 11px;
    grid-row-gap: 11px;
  }

  .text-block-8 {
    width: 80%;
    font-size: 10px;
    line-height: 17px;
  }

  .text-block-9 {
    width: 190px;
    margin-bottom: 30px;
    font-size: 10px;
    line-height: 25px;
  }

  .contatc-form {
    width: 100%;
    max-width: none;
  }

  .text-field {
    margin-bottom: 15px;
    font-size: 1.7em;
  }

  .submit-button-2 {
    margin-top: 17px;
    font-size: 12px;
  }

  .div-block-15 {
    order: -1;
  }

  .text-block-10 {
    width: 90%;
    max-width: 500px;
    margin-bottom: 20px;
    font-size: 10px;
    position: static;
  }

  .div-block-16 {
    height: 150px;
  }

  .footer-container {
    border-top-width: 2px;
    width: 95%;
    padding-top: 10px;
  }

  .div-block-17 {
    justify-content: flex-end;
    align-items: center;
    display: flex;
  }

  .button {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 12px;
  }

  .button.bg-colour-change.lighter-outline {
    font-size: 12px;
  }

  .button.no-margin {
    font-size: 13px;
  }

  .button.none-margin.centre {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .text-block-11 {
    font-size: 12px;
  }

  .small-heading-wrapper {
    margin-bottom: 0;
  }

  .image-9 {
    margin-left: 5px;
  }

  .div-block-20 {
    width: 50px;
    right: -32px;
  }

  .div-block-194 {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    place-items: stretch stretch;
    width: 90%;
    max-width: 450px;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
  }

  .div-block-195 {
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .heading-41 {
    font-size: 35px;
  }

  .div-block-196,
  .text-block-102 {
    font-size: 12px;
  }

  .slider-button.left {
    width: 2.6rem;
    height: 1.6rem;
    top: -50px;
    right: 45px;
  }

  .next-button {
    width: 2.6rem;
    height: 1.6rem;
    top: -50px;
  }

  .div-block-217._2 {
    margin-left: 0;
    margin-right: auto;
  }

  .div-block-217._2.faqqq {
    text-align: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  .text-block-112 {
    font-size: 2.3em;
  }

  .my-projects {
    padding-top: 31px;
    padding-bottom: 40px;
  }

  .slider1_content {
    padding: 2rem;
  }

  .text-size-large {
    font-size: 1.25rem;
  }

  .heading-style-h5 {
    font-size: .875rem;
  }

  .heading-style-h4 {
    font-size: 1rem;
  }

  .testimonial_person {
    grid-column-gap: 1rem;
  }

  .roadmap {
    background-color: #fff;
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .road-map-container {
    padding-top: 0;
    padding-bottom: 0;
  }

  .div-block-220 {
    flex-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
    margin-top: 10px;
    display: flex;
  }

  .div-block-221 {
    display: none;
    inset: 0% 0% auto;
  }

  .road-map-top-container {
    padding-bottom: 0;
  }

  .road-map-bottom-container {
    padding-top: 0;
  }

  .div-block-222,
  .div-block-222.no-right-colour,
  .div-block-222.no-colour-left {
    display: none;
  }

  .roadmap-text-container {
    background-color: #fff;
    border: 2px solid #e6e6e65c;
    margin-bottom: 20px;
  }

  .image-89 {
    order: -1;
    display: block;
  }

  .roadmap-heading {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-flow: column;
  }

  .reviews-content {
    grid-column-gap: 17%;
    grid-row-gap: 17%;
    flex-flow: column;
    width: auto;
    margin-left: auto;
    margin-right: 0;
    transform: none;
  }

  .reviews-content._2nd-row {
    margin-top: 10px;
    display: none;
    transform: none;
  }

  .customer-name {
    font-size: 12px;
  }

  .reviews-container {
    width: 90%;
  }

  .sub-heading-italic {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    line-height: 165%;
  }

  .review-1 {
    flex-flow: column;
    width: auto;
    max-width: none;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 20px -10px #0003;
  }

  .customer-details {
    justify-content: center;
    align-items: center;
  }

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

  .customer-image {
    width: 40px;
  }

  .main-heading {
    text-align: center;
    -webkit-text-stroke-width: .6px;
    max-width: none;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 40px;
    line-height: 120%;
  }

  .main-heading.centre,
  .main-heading.white {
    letter-spacing: 0;
    -webkit-text-stroke-width: 0px;
    font-size: 35px;
  }

  .sub-heading {
    text-align: center;
    -webkit-text-stroke-width: 0px;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    line-height: 1.5em;
  }

  .sub-heading.centre-align {
    max-width: none;
    font-size: 12px;
    font-weight: 400;
  }

  .sub-heading.centre-display {
    font-size: 12px;
  }

  .contact-container {
    background-image: none;
    height: auto;
    margin-bottom: 20px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .contact-text {
    width: 100%;
    margin-bottom: 20px;
  }

  .button-2 {
    width: 135.578px;
    margin-top: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
  }

  .button-2.grey {
    width: auto;
    padding: 9px 30px;
    font-size: 12px;
    display: inline-flex;
  }

  .services-2 {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 0;
  }

  .section-heading.centre {
    max-width: 600px;
    font-weight: 500;
  }

  .section-heading.large {
    font-size: 3.5rem;
  }

  .div-block-227 {
    width: 90%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .image-77 {
    max-width: 80%;
  }

  .div-block-228.selected {
    background-image: linear-gradient(135deg, var(--white) 53%, var(--blue-gradient-1));
  }

  .heading-1 {
    font-size: 17px;
  }

  .div-block-212 {
    grid-template-columns: 1fr 1fr;
    width: 90%;
    padding-bottom: 40px;
  }

  .div-block-214 {
    background-color: var(--white);
    height: 50px;
  }

  .sub-heading-2 {
    font-size: 12px;
  }

  .contact-cards {
    flex-flow: column;
  }

  .card {
    flex-flow: row;
  }

  .form {
    padding: 30px;
  }

  .heading-43 {
    text-align: center;
    font-family: mustica;
    font-size: 35px;
  }

  .text-field-2 {
    margin-bottom: 13px;
  }

  .div-block-231 {
    width: 322px;
  }

  .nav-menu {
    width: 20%;
  }

  .nav-link {
    font-size: 12px;
  }

  .text-block-124 {
    font-size: 14px;
  }

  .menu-button {
    padding-right: 10px;
  }

  .brand {
    padding-left: 0;
  }

  .icon {
    font-size: 23px;
  }

  .padding-global {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .navbar-2 {
    z-index: 10;
    position: absolute;
  }

  .nav_menu-block {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
    background-color: #0000000d;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    padding: 1.25rem;
    display: grid;
  }

  .nav_logo-pic {
    max-width: 150px;
  }

  .nav_component {
    z-index: 10;
    position: relative;
  }

  .nav_menu {
    background-color: #fff0;
    margin-left: 1.25rem;
    margin-right: 1.25rem;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .nav_left-wrapper {
    grid-column-gap: 1.5rem;
    justify-content: space-between;
    display: flex;
  }

  .nav_logo-wrapper {
    grid-column-gap: .7rem;
    grid-row-gap: .7rem;
  }

  .hero-wrapper {
    justify-content: center;
    align-items: stretch;
    min-height: 700px;
  }

  .image-93 {
    height: 100%;
    min-height: auto;
    overflow: clip;
  }

  .hero-background-image {
    height: 100%;
    min-height: auto;
    overflow: clip;
  }

  .hero-dark-overlay {
    background-image: linear-gradient(#fff0 54%, #000 93%), linear-gradient(#00000096, #fff0), radial-gradient(circle, #0000, #0000009c 75%);
    flex: 0 auto;
    align-self: auto;
    height: auto;
    min-height: 100%;
  }

  .hero-heading {
    font-size: 3rem;
  }

  .small-text {
    font-size: .95rem;
  }

  .small-text.relative.grey {
    font-size: .9rem;
  }

  .hero-content-width-wrapper {
    width: 93%;
  }

  .button-group {
    grid-row-gap: 0rem;
  }

  .button-group.is-course {
    width: 100%;
    display: block;
  }

  .button-3.is-course {
    width: 100%;
    max-width: 20rem;
  }

  .medium-text {
    font-size: 1rem;
    line-height: 1.7;
  }

  .medium-text.centre {
    text-align: center;
  }

  .work_link:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
    grid-column-gap: .9em;
    grid-row-gap: .9em;
  }

  .work_link-svg:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
    flex: none;
    width: 2em;
    height: 2em;
  }

  .gallery_list {
    grid-row-gap: 2rem;
    grid-template-columns: 1fr;
  }

  .section-container {
    width: 93%;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .container-large {
    width: 93%;
  }

  .section-container.no-padding-top-and-bottom {
    padding-top: 0;
    padding-bottom: 0;
  }

  .collection-list {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
  }

  .what-we-do-point-1 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .what-we-do-content {
    grid-template-columns: 1fr 1fr;
  }

  .medium-heading.medium {
    font-size: 1.4rem;
  }

  .step-content-block {
    z-index: 2;
    order: -1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: static;
  }

  .img-block {
    z-index: 3;
    order: 3;
    width: auto;
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    position: absolute;
    inset: -30px 0% auto;
  }

  .dot {
    z-index: 99;
    order: 2;
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
    display: none;
    position: absolute;
    bottom: 31%;
  }

  .step {
    justify-content: center;
    align-items: center;
    padding: 8%;
    top: 0;
    box-shadow: inset 0 0 45px -30px #ffffff70, 0 1rem 80px -28px #1ff9905e;
  }

  .scoll-wrap {
    z-index: 1;
    height: 100%;
    display: none;
    bottom: 32%;
  }

  .content-wrap {
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    padding-bottom: 0;
  }

  .steps-clone {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .step-block {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: auto;
  }

  .scroll-animate {
    display: none;
  }

  .large-icon {
    height: 55%;
  }

  .circle {
    height: 65px;
  }

  .slider-arrow-right {
    width: 45px;
    min-width: auto;
    height: 45px;
    min-height: auto;
  }

  .slider-grid {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    flex-flow: column;
    grid-template-columns: 1fr;
    position: relative;
  }

  .slider-image {
    aspect-ratio: 3 / 2;
    flex: none;
    width: auto;
    height: 100%;
  }

  .slider-image.irmaks {
    aspect-ratio: 3 / 2;
    order: 9999;
  }

  .slider-image.tng {
    aspect-ratio: 3 / 2;
    width: auto;
  }

  .slider-wrapper {
    position: relative;
  }

  .slider-card {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
  }

  .slider-arrow-left {
    width: 45px;
    min-width: auto;
    height: 45px;
    min-height: auto;
  }

  .slider-button-wrapper {
    z-index: 2;
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    margin-right: 20px;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .speech-marks-icon {
    width: 70px;
    height: 70px;
  }

  .div-block-234 {
    height: 55px;
  }

  .footer-subscribe {
    padding-left: 0;
    padding-right: 0;
  }

  .footer-form-container-two {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-form-title {
    margin-right: 0;
  }

  .footer-form-block-two {
    width: 100%;
    margin-top: 20px;
  }

  .footer-form-input {
    width: 100%;
  }

  .footer-wrapper-three {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }

  .footer-block-three {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column wrap;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
    display: grid;
  }

  .footer-link-three {
    margin-bottom: 10px;
    margin-left: 0;
    font-size: .95rem;
  }

  .footer-social-block-three {
    margin-top: 10px;
  }

  .footer-divider-two {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-copyright {
    font-size: 14px;
    line-height: 20px;
  }

  .footer-legal-block {
    margin-top: 15px;
    margin-left: -24px;
  }

  .footer-legal-link {
    font-size: 14px;
    line-height: 20px;
  }

  .footer-legal-link.no-margin:hover {
    color: var(--primary);
  }

  .form-text-field,
  .form-text-field.input-message {
    font-size: .95rem;
  }

  .name-number-input {
    margin-top: 10px;
  }

  .section-heading-3 {
    width: auto;
    font-size: 3rem;
  }

  .email-input {
    font-size: .9rem;
  }

  .div-block-239 {
    flex-flow: column;
    width: 100%;
  }

  .form-block-wrapper {
    width: 100%;
  }

  .button-text-2 {
    font-size: .95rem;
  }

  .contact-text-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    place-items: start;
    width: 100%;
  }

  .button-4 {
    justify-content: center;
    align-items: center;
    width: auto;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 13px;
    display: inline-flex;
    position: static;
    inset: auto 0% 0% auto;
  }

  .medium-text-3 {
    font-size: 1rem;
  }

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

  .contact-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .contact-form-left-side {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .button-icon-2 {
    width: 18px;
    height: 18px;
  }

  .contact-from-right-side {
    width: 90%;
  }

  .medium-icon {
    width: 32px;
    height: 32px;
  }

  .image-96 {
    width: 180px;
  }

  .process-wrapper {
    grid-column-gap: 6rem;
    grid-row-gap: 6rem;
    flex-flow: column;
    display: flex;
  }

  .div-block-241 {
    grid-column-gap: 3px;
    grid-row-gap: 3px;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .my-project-wrapper {
    grid-column-gap: 25px;
    grid-row-gap: 25px;
  }

  .project-link {
    flex-flow: column;
    justify-content: space-around;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .hero-section {
    height: auto;
    padding: 40px 0;
    overflow: hidden;
  }

  .logo-wrapper {
    border-bottom-width: 2px;
    align-items: center;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
  }

  .nav-wrapper {
    flex-flow: row;
    align-items: flex-end;
  }

  .nav-link-block {
    height: auto;
    margin-bottom: 0;
  }

  .nav-link-text-block {
    font-size: 11px;
  }

  .grid-wrapper {
    display: none;
  }

  .hero-content {
    grid-column-gap: .3rem;
    grid-row-gap: .3rem;
    margin-top: 0;
  }

  .heading-h1 {
    width: auto;
    max-width: 390px;
    margin-bottom: 10px;
    font-size: 25px;
    line-height: 1.1em;
  }

  .heading-h1.work,
  .heading-h1.contact {
    font-size: 45px;
  }

  .heading-h1.left-align {
    max-width: 260px;
    font-size: 25px;
  }

  .heading-h1.small-size {
    font-size: 16px;
  }

  .heading-h1.larger {
    margin-bottom: 5px;
    font-size: 32px;
    line-height: 125%;
  }

  .hero-text-block {
    width: 120px;
    margin-left: 0;
    font-size: 10px;
  }

  .hero-text-block.experience {
    width: auto;
    font-size: 10px;
    line-height: 40px;
  }

  .hero-text-block.work {
    border-bottom-width: 2px;
    width: 220px;
    margin-left: 0;
    font-size: 9px;
  }

  .hero-text-block.contact {
    width: 170px;
    margin-left: 0;
    font-size: 9px;
  }

  .paragraph {
    font-size: 11px;
    line-height: 20px;
  }

  .paragraph.project,
  .paragraph.work {
    font-size: 12px;
  }

  .heading-h2 {
    width: auto;
    margin-top: 0;
    font-size: 11px;
    line-height: 175%;
  }

  .footer-block {
    bottom: 50px;
    left: 20px;
  }

  .footer-block.right {
    bottom: 10px;
    left: 20px;
    right: auto;
  }

  .experience-content-wrapper {
    width: 100%;
  }

  .accordion-header {
    flex-direction: column;
  }

  .heading-h3 {
    font-size: 15px;
  }

  .work-type {
    margin-top: 10px;
  }

  .work-type.green {
    margin-top: 0;
    font-size: 12px;
    display: block;
  }

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

  .project-wrapper {
    flex-direction: column;
  }

  .project-details-wrapper {
    width: 100%;
    margin-top: 30px;
    position: static;
  }

  .project-details-wrapper.left {
    width: 100%;
  }

  .copyright-info {
    font-size: 10px;
    line-height: 12px;
  }

  .footer-link {
    font-size: 11px;
  }

  .project-image {
    width: 100%;
    height: 250px;
  }

  .project-image.two {
    width: 100%;
  }

  .work-content-wrapper {
    width: 96%;
  }

  .contact-content-wrapper {
    width: 100%;
  }

  .nav-link-inner-wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }

  .body {
    overflow-x: clip;
  }

  .style-guide-text-4 {
    font-size: 10px;
  }

  .style-guide-column {
    margin-bottom: 40px;
    padding-right: 0;
  }

  .style-guide-section {
    padding: 100px 21px;
  }

  .style-guide-text {
    font-size: 10px;
  }

  .style-guide-column-wrapper {
    margin-bottom: 20px;
  }

  .style-guide-heading-h1 {
    font-size: 30px;
    line-height: 40px;
  }

  .style-guide-heading-h2 {
    font-size: 14px;
    line-height: 20px;
  }

  .style-guide-heading-h3 {
    font-size: 15px;
  }

  .style-guide-paragraph {
    font-size: 11px;
    line-height: 20px;
  }

  .style-guide-paragraph.project {
    font-size: 12px;
  }

  .style-guide-text-5 {
    font-size: 10px;
  }

  .style-guide-link-2 {
    font-size: 12px;
  }

  ._404-inner-wrapper {
    width: 80%;
  }

  .separator {
    display: none;
  }

  ._404-text {
    font-size: 12px;
  }

  .text-block {
    font-size: 7em;
  }

  .div-block-3 {
    flex-flow: column;
    width: 96%;
    margin-left: auto;
    margin-right: auto;
  }

  .social.media {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: auto;
    max-width: none;
    margin-top: 30px;
  }

  .linkedin {
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    width: auto;
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .linkedin.black {
    width: auto;
  }

  .linkedin.no-left-align {
    padding-left: 10px;
    padding-right: 10px;
  }

  .linkedin.less-margin {
    padding-left: 10px;
  }

  .image-4 {
    width: 13px;
  }

  .text-block-3 {
    font-size: 11px;
  }

  .hero-contents {
    margin-top: 40px;
  }

  .text-block-4 {
    width: 75%;
    max-width: 200px;
    font-size: 9px;
    line-height: 15px;
  }

  .div-block-5 {
    width: 2px;
    height: 200px;
  }

  .div-block-6 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    place-items: stretch stretch;
  }

  .project-container {
    background-image: none;
    background-size: auto;
  }

  .text-block-5 {
    font-size: 11px;
  }

  .image-5 {
    width: 17px;
  }

  .image-6 {
    aspect-ratio: auto;
    object-fit: cover;
    overflow: clip;
  }

  .text-block-6 {
    font-size: 4em;
  }

  .text-block-6.gourmet-heading.black {
    -webkit-text-stroke-width: .2px;
    font-size: 3.2em;
    font-weight: 300;
  }

  .text-block-6.gourmet-heading.resortia {
    font-size: 4.3em;
  }

  .text-block-6.barbell-b-header {
    font-size: 3.2em;
  }

  .visit-site-link {
    left: 20px;
  }

  .div-block-9 {
    width: 200px;
    height: 2px;
  }

  .link-block-4 {
    left: 20px;
  }

  .slide {
    width: auto;
    height: auto;
  }

  .heading {
    font-size: 45px;
  }

  .div-block-11 {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .image-7 {
    width: 13px;
  }

  .text-block-7 {
    font-size: 8px;
  }

  .div-block-12 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .text-block-8 {
    margin-bottom: 20px;
    font-size: 8px;
    line-height: 15px;
  }

  .div-block-14 {
    height: 120px;
  }

  .text-block-9 {
    width: 170px;
    margin-bottom: 20px;
    font-size: 9px;
  }

  .contatc-form {
    order: 1;
    width: 100%;
    max-width: none;
  }

  .text-field {
    font-size: 10px;
  }

  .submit-button-2 {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 10px;
  }

  .text-block-10 {
    order: -1;
    width: 90%;
    margin-bottom: 20px;
    font-size: 8px;
    line-height: 14px;
    position: static;
  }

  .div-block-16 {
    height: 50px;
  }

  .footer-container {
    border-top-width: 2px;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .button {
    margin-left: 0;
  }

  .button.no-margin {
    font-size: 12px;
  }

  .button.none-margin {
    font-size: 11px;
  }

  .button.none-margin.centre {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
  }

  .text-block-11 {
    font-size: 11px;
    font-weight: 400;
  }

  .div-block-19 {
    width: 7px;
  }

  .cta-s {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .image-9 {
    width: 90px;
    margin-left: 0;
    margin-right: auto;
  }

  .image-9.larger {
    width: 150px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-20 {
    width: 40px;
  }

  .image-10 {
    width: 25px;
  }

  .div-block-194 {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-columns: 1fr 1fr;
    max-width: none;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-195 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 11px;
  }

  .heading-41 {
    font-size: 28px;
  }

  .text-block-102 {
    font-size: 11px;
  }

  .slide-1 {
    width: 91vw;
    height: auto;
    min-height: 0;
    margin-right: 10px;
    position: static;
    overflow: visible;
  }

  .mask-4 {
    height: auto;
    overflow: visible;
  }

  .slider-4 {
    height: 100%;
  }

  .visit-website-div {
    margin-bottom: 10px;
  }

  .text-block-112 {
    font-size: 12px;
  }

  .text-block-118 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 20px;
    line-height: 30px;
  }

  .my-projects {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .image-88 {
    width: 100vw;
    height: auto;
  }

  .roadmap {
    padding-top: 50px;
    padding-bottom: 40px;
    overflow: hidden;
  }

  .text-block-119 {
    font-size: 11px;
    font-weight: 400;
    line-height: 155%;
  }

  .image-89 {
    width: 25px;
  }

  .div-block-225 {
    margin-bottom: 30px;
  }

  .reviews-content {
    grid-column-gap: 0%;
    grid-row-gap: 0%;
    flex-flow: column;
    margin-top: 20px;
  }

  .customer-name {
    font-size: 11px;
  }

  .reviews-container {
    width: 90%;
  }

  .text-block-120 {
    font-size: 11px;
    line-height: 155%;
  }

  .sub-heading-italic,
  .italic-text-9 {
    font-size: 11px;
  }

  .review-1 {
    background-image: linear-gradient(180deg, white 68%, var(--grey-bg));
    width: auto;
    margin-bottom: 10px;
  }

  .div-block-166 {
    justify-content: center;
    align-items: center;
  }

  .reviews-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .image-57 {
    width: 16px;
  }

  .main-heading {
    -webkit-text-stroke-width: .4px;
    max-width: none;
    margin-bottom: 20px;
    font-size: 35px;
    line-height: 125%;
  }

  .main-heading.centre {
    text-align: center;
    width: auto;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 25px;
  }

  .main-heading.white {
    letter-spacing: 0;
    -webkit-text-stroke-width: 0px;
    font-size: 25px;
  }

  .sub-heading {
    max-width: 350px;
    font-size: 11px;
  }

  .sub-heading.centre-align {
    font-size: 11px;
    font-weight: 400;
    line-height: 165%;
  }

  .sub-heading.centre-display {
    font-size: 11px;
  }

  .subscribe-container {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 3px;
  }

  .contact-container {
    background-image: none;
    height: auto;
    padding-top: 20px;
    padding-left: 0;
  }

  .contact-text {
    width: 95%;
    margin-bottom: 0;
  }

  .contact-section-2 {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .button-2 {
    width: 121px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
  }

  .button-2.grey {
    border-width: 1.7px;
    width: 110px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 11px;
  }

  .form-block-2 {
    margin-bottom: 0;
  }

  .services-2 {
    background-color: #fff;
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section-heading {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .section-heading.centre {
    max-width: none;
  }

  .section-heading.large {
    font-size: 2.8rem;
  }

  .div-block-227 {
    margin-bottom: 10px;
  }

  .image-77 {
    background-image: linear-gradient(180deg, white, var(--blue-gradient-1));
  }

  .div-block-228.selected {
    background-image: linear-gradient(180deg, white 69%, var(--blue-gradient-1));
    margin-bottom: 10px;
  }

  .heading-1 {
    font-size: 15px;
  }

  .div-block-212 {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }

  .div-block-214 {
    height: 50px;
  }

  .card {
    grid-column-gap: 13px;
    grid-row-gap: 13px;
    border-color: var(--grey-font);
    justify-content: center;
    align-items: center;
  }

  .text-block-122 {
    font-size: 13px;
  }

  .text-block-123 {
    font-size: 12px;
  }

  .div-block-229 {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .image-91 {
    height: 35px;
  }

  .form {
    border-color: var(--grey-font);
    padding: 20px;
  }

  .heading-43 {
    font-size: 25px;
    line-height: 125%;
  }

  .textarea-2 {
    font-size: 11px;
  }

  .text-field-2 {
    margin-bottom: 10px;
    font-size: 11px;
  }

  .container {
    justify-content: flex-end;
    align-items: center;
    display: flex;
    position: relative;
  }

  .nav-menu {
    margin-right: 20px;
  }

  .nav-link {
    padding: 15px 10px;
    font-size: 11px;
  }

  .text-block-124 {
    font-size: 14px;
  }

  .menu-button {
    padding: 10px 0 10px 10px;
  }

  .brand {
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    padding-left: 0;
    display: flex;
    position: absolute;
    inset: 0% auto 0% 0%;
  }

  .icon {
    font-size: 21px;
  }

  .bold-text-27 {
    font-weight: 600;
  }

  .link-block-11 {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .menu-icon4_line-bottom {
    width: 20px;
  }

  .padding-global {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .margin-bottom {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .nav_menu-block {
    grid-row-gap: 2rem;
    background-color: #00000024;
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .nav_logo-pic {
    max-width: 120px;
  }

  .menu-icon4_line-top,
  .menu-icon_line-middle-base {
    width: 20px;
  }

  .menu-icon4 {
    width: 40px;
    height: 40px;
  }

  .nav_menu {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  .padding-vertical {
    padding-left: 0;
    padding-right: 0;
  }

  .nav_left-wrapper {
    grid-row-gap: 40px;
    grid-template-columns: 1fr 1fr;
  }

  .nav_link-list {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    grid-template-rows: auto auto auto auto auto;
    grid-template-columns: 100%;
    grid-auto-columns: 100%;
    display: flex;
  }

  .menu-icon_line-middle-top,
  .menu-icon4_line-middle {
    width: 20px;
  }

  .hero-wrapper {
    height: 80vh;
    min-height: auto;
  }

  .hero-dark-overlay {
    background-image: linear-gradient(#fff0 43%, #000 93%), linear-gradient(#00000096, #fff0), radial-gradient(circle, #0000, #0000009c 76%);
    height: auto;
  }

  .hero-heading {
    font-size: 2.2rem;
    line-height: 1.2;
  }

  .small-text {
    font-size: .9rem;
  }

  .small-text.lime-green {
    font-size: .85rem;
  }

  .small-text.grey {
    font-size: .9rem;
    line-height: 1.7;
  }

  .small-text.semi-bold {
    font-size: .9rem;
  }

  .small-text.none {
    display: none;
  }

  .button-group.is-course {
    display: flex;
  }

  .button-3.is-course {
    max-width: none;
  }

  .medium-text {
    font-size: .9rem;
  }

  .work_link {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    padding: .4rem 1rem;
  }

  .work_link:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    justify-content: flex-start;
    align-items: center;
    padding-left: 0;
  }

  .text-style-sub,
  .text-style-sub.is-2 {
    font-size: .9rem;
  }

  .work_link-svg:where(.w-variant-f1e92d21-91a8-7094-65cb-1f6971d84684) {
    width: 3em;
    height: 3em;
  }

  .gallery_list {
    grid-template-columns: 1fr;
  }

  .section-container {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .section-container._2rem-bottom-padding {
    padding-bottom: 5rem;
  }

  .collection-list {
    grid-template-columns: 1fr;
  }

  .icon-wrapper {
    height: 47px;
  }

  .what-we-do-content {
    grid-template-columns: 1fr;
  }

  .medium-heading.medium {
    font-size: 1.2rem;
    line-height: 1.33;
  }

  .img-block {
    width: 90%;
    top: -27px;
  }

  .step {
    padding: 40px 30px 30px;
    box-shadow: inset 0 0 45px -30px #ffffff70, 0 1rem 80px -32px #1ff9905e;
  }

  .content-block {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .label {
    font-size: 1.1rem;
  }

  .steps-clone {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    display: flex;
    position: static;
  }

  .process-content-wrapper {
    margin-top: 20px;
    font-size: 20px;
  }

  .large-icon {
    height: 50%;
  }

  .circle {
    height: 55px;
  }

  .slider-author-wrapper {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    justify-content: flex-start;
    align-items: center;
  }

  .slider-testimonial {
    height: auto;
  }

  .slider-arrow-right {
    width: 40px;
    height: 40px;
  }

  .slider-grid {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: auto;
    display: flex;
  }

  .slider-image {
    width: auto;
    height: 100%;
  }

  .slider-image.irmaks {
    aspect-ratio: 3 / 2;
    order: 9999;
    width: 100%;
  }

  .slider-image.tng {
    width: 100%;
  }

  .slider-card {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    padding-top: 40px;
    padding-left: 0;
    padding-right: 0;
  }

  .slider-arrow-left {
    width: 40px;
    height: 40px;
  }

  .slider-button-wrapper {
    grid-column-gap: 7px;
    grid-row-gap: 7px;
    margin-bottom: 0;
    margin-right: 0;
  }

  .content-spacing {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .speech-marks-icon {
    width: 60px;
    height: 60px;
  }

  .div-block-234 {
    height: 48px;
  }

  .footer-subscribe {
    padding: 20px 0 30px;
  }

  .container-3 {
    max-width: none;
  }

  .footer-form-two {
    padding: 20px;
  }

  .footer-form-block-two {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-form-input {
    margin-bottom: 10px;
    padding-right: 20px;
  }

  .button-primary.footer-form-button {
    position: relative;
    right: 0;
  }

  .footer-block-three {
    grid-template-columns: 1fr 1fr;
    font-size: .9rem;
  }

  .footer-link-three {
    font-size: .9rem;
  }

  .footer-bottom {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .form-text-field {
    font-size: .9rem;
  }

  .form-text-field.input-message {
    font-size: .8rem;
  }

  .contact-icon {
    height: 22px;
  }

  .name-number-input {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-flow: column;
    width: 100%;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .section-heading-3 {
    width: auto;
    font-size: 2.5rem;
  }

  .email-input {
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }

  .div-block-239 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
  }

  .button-text-2 {
    font-size: .8rem;
  }

  .contact-text-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .button-4 {
    width: auto;
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 12px;
  }

  .medium-text-3 {
    font-size: .9rem;
  }

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

  .blue-gradient-text {
    white-space: normal;
    overflow-wrap: normal;
    display: inline-block;
  }

  .contact-wrapper {
    padding-top: 30px;
    padding-bottom: 20px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }

  .small-text-2 {
    font-size: .8rem;
  }

  .link-block-18 {
    font-size: 0;
  }

  .button-icon-2 {
    width: 16px;
    height: 16px;
    margin-left: 8px;
  }

  .tiny-heading {
    font-size: .9rem;
  }

  .contact-details-text {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
  }

  .section-container-2 {
    width: 92%;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .contact-form-wrapper {
    padding: 20px;
  }

  .image-96 {
    width: 159px;
  }

  .mask-5 {
    height: auto;
  }

  .process-wrapper {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
  }

  .nav-menu-2 {
    padding: 30px;
  }

  .testimonial-text {
    font-size: .9rem;
  }

  .my-project-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-columns: 1fr;
  }
}

#w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23248c-43e2a23c {
  grid-area: span 1 / span 3 / span 1 / span 3;
}

#w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23249f-43e2a23c,
#w-node-_1ecf30b2-c456-169a-fda8-47bb07f7f478-43e2a23c {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-e1b5729d-d00f-6178-901e-a53f81081ce1-43e2a23c {
  place-self: auto start;
}

#w-node-_77392527-b1b8-fd0f-e97b-6a83ff80ebd0-43e2a23c,
#w-node-aa717878-1591-0103-38a5-ee80a91efa87-43e2a23c,
#w-node-b31f608f-8504-3717-c458-9eb791626b0e-43e2a23c,
#w-node-f604fa37-8b27-6b96-854a-8a2bd2b5505a-43e2a23c,
#w-node-f604fa37-8b27-6b96-854a-8a2bd2b5505d-43e2a23c,
#w-node-_55439766-426d-554e-2cc5-243983f11ea3-43e2a23c,
#w-node-_55439766-426d-554e-2cc5-243983f11ea6-43e2a23c {
  grid-area: span 1 / span 1 / span 1 / span 1;
  place-self: auto;
}

@media screen and (max-width: 991px) {
  #w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23247e-43e2a23c {
    grid-area: 1 / 1 / 2 / 4;
  }
}

@media screen and (max-width: 767px) {
  #w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23247e-43e2a23c {
    grid-area: 1 / 1 / 2 / 3;
  }

  #w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23259d-43e2a23c,
  #w-node-_62ba4b2e-722f-459d-ed64-5ff5fd2325c3-43e2a23c {
    order: 9999;
  }
}

@media screen and (max-width: 479px) {
  #w-node-_62ba4b2e-722f-459d-ed64-5ff5fd23247e-43e2a23c {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }
}

/* ============================================
   MY PROJECTS - ANIMATIONS & HOVER EFFECTS
   ============================================ */

/* Initial state for slide-in animation */
.project-link {
  opacity: 0;
  transform: translateY(60px);
  transition:
    opacity 0.8s ease-in,
    transform 0.15s ease-in,
    box-shadow 0.15s ease-in;
}

/* Animated state when in view */
.project-link.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hover lift for animated cards - moves entire card up */
.project-link.animate-in:hover {
  transform: translateY(-10px);
}

/* Staggered delays for each project card - only for initial animation */
.my-project-wrapper .project-link:nth-child(1) {
  transition-delay: 0s;
}

.my-project-wrapper .project-link:nth-child(2) {
  transition-delay: 0.1s;
}

.my-project-wrapper .project-link:nth-child(3) {
  transition-delay: 0.2s;
}

.my-project-wrapper .project-link:nth-child(4) {
  transition-delay: 0.3s;
}

.my-project-wrapper .project-link:nth-child(5) {
  transition-delay: 0.4s;
}

.my-project-wrapper .project-link:nth-child(6) {
  transition-delay: 0.5s;
}

/* Remove delays after animation completes for instant hover effects */
.my-project-wrapper .project-link.animate-in {
  transition-delay: 0s !important;
}

/* Enhanced hover effects for project cards */
.project-link {
  position: relative;
  overflow: hidden;
}


/* Image hover effect */
.project-thumbnail {
  transition: transform 0.15s ease-in, filter 0.4s ease;
}

/* Glow effect on hover */
.project-link:hover {
  box-shadow: 0 20px 50px -15px rgba(46, 255, 165, 0.15);
}

/* Text content styling */
.div-block-247 {
  transition: transform 0.15s ease-in, background-color 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Category text color change on hover */
.div-block-247 .tiny-text {
  transition: color 0.3s ease;
}

.project-link:hover .div-block-247 .tiny-text {
  color: #2effa5;
}

/* ============================================
   SERVICES SECTION - ANIMATIONS & HOVER EFFECTS
   ============================================ */

/* Initial state for scroll animation */
.what-we-do-point-1 {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.6s ease-out,
    transform 0.3s ease-out,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

/* Animated state when in view */
.what-we-do-point-1.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays for service cards */
.what-we-do-content .what-we-do-point-1:nth-child(1) {
  transition-delay: 0s;
}

.what-we-do-content .what-we-do-point-1:nth-child(2) {
  transition-delay: 0.1s;
}

.what-we-do-content .what-we-do-point-1:nth-child(3) {
  transition-delay: 0.15s;
}

.what-we-do-content .what-we-do-point-1:nth-child(4) {
  transition-delay: 0.2s;
}

.what-we-do-content .what-we-do-point-1:nth-child(5) {
  transition-delay: 0.25s;
}

.what-we-do-content .what-we-do-point-1:nth-child(6) {
  transition-delay: 0.3s;
}

/* Remove delays after animation for instant hover */
.what-we-do-point-1.animate-in {
  transition-delay: 0s !important;
}

/* Hover effect - subtle lift and glow */
.what-we-do-point-1:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px -10px rgba(46, 255, 165, 0.1);
  border-color: rgba(46, 255, 165, 0.2);
}

/* Icon animation on hover */
.what-we-do-point-1 .icon-wrapper {
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.what-we-do-point-1:hover .icon-wrapper {
  transform: scale(1.1);
}

/* Icon color change on hover */
.what-we-do-point-1 .small-icon {
  transition: color 0.3s ease;
}

.what-we-do-point-1:hover .small-icon {
  color: #2effa5;
}

/* Service tags subtle animation */
.what-we-do-point-1 .div-block-243 {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.what-we-do-point-1:hover .div-block-243 {
  border-color: rgba(46, 255, 165, 0.3);
}

/* ============================================
   ANIMATED TEXT SECTION
   ============================================ */

.animated-text-section {
  background-color: var(--invert-bg-colour);
  position: relative;
  z-index: 10;
}

.animated-text-sticky .horizontal-grid-lines-wrapper {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.animated-text-scroll-spacer {
  height: 450vh;
  position: relative;
}

.animated-text-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--invert-bg-colour);
  padding: 0 2rem;
  overflow: hidden;
}

.spline-container {
  position: absolute;
  bottom: -15%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  border-radius: 0.5rem;
  opacity: 0.8;
}

.animated-text-sticky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(25% + 10px);
  background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.8) 20%, rgba(12, 12, 12, 0.4) 50%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.spline-container iframe {
  border-radius: 0.5rem;
}

.animated-text-content {
  text-align: center;
  width: 100%;
  max-width: 1200px;
  position: relative;
  min-height: 300px;
}

.animated-headline {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}

.animated-headline.first-sentence {
  opacity: 1;
  pointer-events: auto;
}

.headline-line {
  display: block;
  text-align: center;
}

.headline-char {
  display: inline;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.headline-char.highlight {
  color: #2effa5;
}

.animated-cta-wrapper {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

.animated-cta-wrapper .work_link {
  width: auto;
  display: inline-flex;
  white-space: nowrap;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transition: opacity 0.4s ease;
  padding-top: 5rem;
}

.scroll-indicator-text {
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.scroll-indicator-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator-icon svg {
  width: 18px;
  height: 18px;
}

@keyframes scrollBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }
}

/* Responsive - Animated Text Section */
@media screen and (max-width: 991px) {
  .animated-headline {
    font-size: clamp(2.8rem, 5.5vw, 4rem);
  }

  .animated-text-scroll-spacer {
    height: 400vh;
  }

  .animated-text-content {
    max-width: 90%;
    min-height: 250px;
  }

  .animated-cta-wrapper {
    bottom: -70px;
  }

  .scroll-indicator {
    padding-top: 4.5rem;
  }
}

@media screen and (max-width: 768px) {
  .animated-headline {
    font-size: clamp(3.2rem, 7vw, 4rem);
    line-height: 1.25;
  }

  .animated-text-scroll-spacer {
    height: 350vh;
  }

  .animated-text-sticky {
    padding: 0 1.25rem;
  }

  .animated-text-content {
    max-width: 95%;
    min-height: 200px;
  }

  .animated-cta-wrapper {
    bottom: -120px;
  }

  .scroll-indicator {
    padding-top: 4.5rem;
  }
}

@media screen and (max-width: 480px) {
  .animated-headline {
    font-size: clamp(2.8rem, 8vw, 3.4rem);
    line-height: 1.3;
  }

  .animated-text-scroll-spacer {
    height: 300vh;
  }

  .animated-text-sticky {
    padding: 0 1rem;
  }

  .animated-text-content {
    max-width: 100%;
    min-height: 180px;
  }

  .animated-cta-wrapper {
    bottom: -115px;
  }

  .scroll-indicator {
    padding-top: 4.25rem;
  }

  .headline-line {
    padding: 0 0.5rem;
  }
}

@media screen and (max-width: 375px) {
  .animated-headline {
    font-size: clamp(2.5rem, 7.5vw, 3rem);
    line-height: 1.35;
  }

  .animated-text-scroll-spacer {
    height: 280vh;
  }

  .animated-cta-wrapper {
    bottom: -110px;
  }

  .scroll-indicator {
    padding-top: 4rem;
  }
}

/* ============================================
   TESTIMONIALS SECTION - NEW LAYOUT
   ============================================ */

.testimonials-container {
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;
  padding: 0;
}

.testimonials-header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.testimonials-badge {
  justify-content: center;
  width: auto;
}

.testimonials-subtitle {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Client Logos Row */
.client-logos-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.19rem;
  margin: 3rem 0;
  flex-wrap: wrap;
  padding: 2rem 0;
}

.client-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #1a1a1a;
  transition: transform 0.3s ease, border-color 0.3s ease;
  background: #0f0f0f;
}

.client-logo:hover {
  transform: scale(1.1);
  border-color: #2effa5;
}

/* Testimonials Grid Wrapper */
.testimonials-grid-wrapper {
  position: relative;
  width: 98%;
  max-width: 1900px;
  margin: 3rem auto;
}

.testimonials-scroll-container {
  overflow: hidden;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

/* Gradient fade overlays */
.testimonials-grid-wrapper::before,
.testimonials-grid-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 10;
  pointer-events: none;
}

.testimonials-grid-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #0c0c0c 0%, #0c0c0c 20%, transparent 100%);
}

.testimonials-grid-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #0c0c0c 0%, #0c0c0c 20%, transparent 100%);
}

/* Testimonials Grid */
.testimonials-grid {
  display: flex;
  gap: 1.5rem;
  padding: 0 40px;
}

.testimonials-grid.initialized {
  transition: transform 0.5s ease;
}

.testimonial-card {
  background-color: #0f0f0f;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
  min-height: 300px;
  width: 420px;
  flex-shrink: 0;
  opacity: 1;
  pointer-events: auto;
}

.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(46, 255, 165, 0.3);
  box-shadow: 0 15px 40px -10px rgba(46, 255, 165, 0.1);
}

/* Active centered card */
.testimonial-card.active {
  transform: translateY(-5px);
  border-color: rgba(46, 255, 165, 0.3);
  box-shadow: 0 15px 40px -10px rgba(46, 255, 165, 0.1);
}

.testimonial-quote {
  font-size: 1rem;
  line-height: 1.7;
  color: #d4d4d4;
  margin-bottom: 1.5rem;
  font-family: 'Inter', sans-serif;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

.testimonial-logo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: contain;
  background: #1a1a1a;
  padding: 8px;
}

.testimonial-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2effa5;
  background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
  border: 1px solid #1f1f1f;
  padding: 0;
}

.testimonial-author-info {
  flex: 1;
}

.testimonial-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  margin-bottom: 0.25rem;
}

.testimonial-title {
  font-size: 0.85rem;
  color: #888;
  font-family: 'Inter', sans-serif;
}

/* Navigation Arrows */
.testimonials-navigation {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

.testimonial-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0f0f0f;
  border: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
}

.testimonial-arrow:hover {
  background: #1a1a1a;
  border-color: #2effa5;
  transform: scale(1.05);
}

.testimonial-arrow svg {
  width: 20px;
  height: 20px;
}

/* Responsive Design */
@media screen and (max-width: 1400px) {
  .testimonial-card {
    width: 380px;
  }
}

@media screen and (max-width: 1200px) {
  .testimonial-card {
    width: 350px;
    padding: 1.75rem 2rem;
  }

  .testimonials-grid {
    padding: 0 40px;
  }

  .testimonials-grid-wrapper::before,
  .testimonials-grid-wrapper::after {
    width: 40px;
  }

  .client-logos-row {
    gap: 1rem;
    padding: calc(2rem - 15px) 0;
  }

  .client-logo {
    width: 45px;
    height: 45px;
  }
}

@media screen and (max-width: 991px) {
  .testimonial-card {
    width: 340px;
    min-height: 300px;
  }

  .testimonials-grid {
    padding: 0 30px;
  }

  .testimonials-grid-wrapper::before,
  .testimonials-grid-wrapper::after {
    width: 30px;
  }
}

@media screen and (max-width: 768px) {
  .testimonial-card {
    width: 320px;
    padding: 1.75rem;
    min-height: auto;
  }

  .testimonial-quote {
    font-size: 0.95rem;
  }

  .testimonials-grid {
    padding: 0 20px;
    gap: 1rem;
  }

  .testimonials-grid-wrapper::before,
  .testimonials-grid-wrapper::after {
    width: 20px;
  }

  .client-logos-row {
    gap: 0.8rem;
    padding: 0;
  }

  .client-logo {
    width: 40px;
    height: 40px;
  }

  .testimonials-container {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 480px) {
  .testimonial-quote {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .testimonial-card {
    width: 290px;
    padding: 1.5rem;
    min-height: auto;
  }

  .testimonials-grid {
    padding: 0 15px;
  }

  .testimonials-grid-wrapper::before,
  .testimonials-grid-wrapper::after {
    width: 15px;
  }

  .client-logo {
    width: 35px;
    height: 35px;
  }
}

/* Testimonials Full Width Override */
.section-container.testimonials-section-container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

.testimonials-section-container .testimonials-container {
  width: 95%;
  max-width: none !important;
  margin: 0 auto;
}

/* Mobile Spline Container Height Fix */
@media screen and (max-width: 767px) {
  .spline-container {
    height: 110%;
    bottom: calc(-15% - 175px);
    top: auto;
  }

  .spline-container iframe {
    transform: none;
  }
}

/* Projects Page Styles */
.projects-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding: 4rem 0;
}

.project-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.project-row.reversed {
  grid-template-columns: 1fr 1.2fr;
}

.project-row.reversed .project-image-wrapper {
  order: 2;
}

.project-row.reversed .project-content {
  order: 1;
}

.project-image-wrapper {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.project-image-wrapper:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(46, 255, 165, 0.1);
  border-color: rgba(46, 255, 165, 0.2);
}

.project-image {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}

.project-image-wrapper:hover .project-image {
  transform: scale(1.03);
}

.project-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.project-category-label {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #2effa5;
  margin-bottom: 1rem;
  font-weight: 600;
}

.project-title {
  font-family: 'Poppins', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
  line-height: 1.1;
}

.project-description {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2.5rem;
  max-width: 600px;
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.project-tag {
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  cursor: default;
}

.project-tag:hover {
  background: rgba(46, 255, 165, 0.1);
  border-color: rgba(46, 255, 165, 0.4);
  color: #2effa5;
}

@media screen and (max-width: 991px) {

  .project-row,
  .project-row.reversed {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .project-row.reversed .project-image-wrapper {
    order: -1;
  }

  .projects-list-wrapper {
    gap: 6rem;
    padding-top: 0;
  }

  .project-title {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 480px) {
  .projects-list-wrapper {
    gap: 4rem;
  }

  .project-title {
    font-size: 2rem;
  }

  .project-tag {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }
}

/* ============================================
   PROJECTS PAGE - ENHANCED STYLES
   ============================================ */

/* Force Inter font on Projects Page */
.projects-hero,
.projects-hero *,
.projects-list-wrapper,
.projects-list-wrapper *,
.project-content,
.project-content * {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Liquid Cursor Background */
#liquid-cursor-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}

#liquid-cursor-bg.active {
  opacity: 1;
}

.projects-hero {
  position: relative;
  padding: 200px 0 0 0;
  z-index: 1;
}

.projects-hero-content {
  max-width: 900px;
}

.projects-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 12px;
  background: rgba(46, 255, 165, 0.08);
  border: 1px solid rgba(46, 255, 165, 0.2);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #2effa5;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: calc(2rem - 15px);
}

.label-dot {
  width: 8px;
  height: 8px;
  background: #2effa5;
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

.projects-hero-heading {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.05;
  margin-bottom: calc(2rem - 15px);
  padding-bottom: 8px;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.projects-hero-description {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.6);
  max-width: 650px;
  font-weight: 400;
}

/* Enhanced Project Link Button */
.project-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2.5rem;
  padding: 1rem 1.8rem;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.project-link-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2effa5 0%, #00d4aa 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.project-link-btn:hover {
  color: #000;
  border-color: #2effa5;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(46, 255, 165, 0.3);
}

.project-link-btn:hover::before {
  opacity: 1;
}

.project-link-btn svg {
  transition: transform 0.3s ease;
}

.project-link-btn:hover svg {
  transform: translate(4px, -4px);
}

/* Enhanced Project Title */
.project-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* Enhanced Project Description */
.project-description {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 2rem;
  max-width: 550px;
}

/* Enhanced Project Tags */
.project-tag {
  font-family: 'Inter', sans-serif !important;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.project-tag:hover {
  background: rgba(46, 255, 165, 0.1);
  border-color: rgba(46, 255, 165, 0.3);
  color: #2effa5;
  transform: translateY(-2px);
}

/* Enhanced Project Category Label */
.project-category-label {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #2effa5;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* Mobile Responsive for Projects Hero */
@media screen and (max-width: 768px) {
  .projects-hero {
    padding: 160px 0 60px 0;
  }

  .projects-hero-heading {
    font-size: 2.5rem;
  }

  .projects-hero-description {
    font-size: 1.1rem;
  }

  .project-title {
    font-size: 2rem;
  }

  .project-link-btn {
    padding: 0.9rem 1.5rem;
    font-size: 0.9rem;
  }
}

@media screen and (max-width: 480px) {
  .projects-hero {
    padding: 140px 0 40px 0;
  }

  .projects-hero-label {
    font-size: 0.75rem;
    padding: 6px 14px 6px 10px;
  }

  .projects-hero-heading {
    font-size: 2rem;
  }
}

/* Large Screen Hero Fix */
@media screen and (min-width: 1440px) {
  .hero-content {
    max-width: 1400px;
  }
}

/* Projects Hero Adjustments */
.projects-hero {
  padding-bottom: 0;
}

.projects-hero-heading {
  padding-bottom: 8px;
}

/* Hero Sub Text Size Adjustments */
.hero-sub-text.medium-text {
  font-size: 1.3rem;
}

@media screen and (min-width: 1280px) {
  .hero-sub-text.medium-text {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 991px) {
  .hero-sub-text.medium-text {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 767px) {
  .hero-sub-text.medium-text {
    font-size: 1rem;
  }

  .testimonials-navigation {
    margin-top: 0;
    padding: 0;
  }
}

@media screen and (max-width: 640px) {
  .contact-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
}

/* Contact Icon Background */
.contact-icon-bg {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  border-radius: 50%;
  background-color: #0f0f0f;
  border: 1px solid #1f1f1f;
  display: flex;
  align-items: center;
  justify-content: center;
  order: -9999;
  color: #fff;
  transition: all 0.3s ease;
}

.contact-icon-bg:hover {
  background-color: #1a1a1a;
  border-color: #2effa5;
  color: #2effa5;
}

.contact-icon-bg .contact-icon {
  width: 24px;
  height: 24px;
}

/* Tablet and Mobile Word Break Fix */
@media screen and (max-width: 991px) {

  .white-green-gradient,
  .hero-heading {
    word-break: keep-all;
    /* Changed from normal to keep-all */
    overflow-wrap: normal;
    /* Changed from break-word to normal */
    hyphens: none;
    /* Changed from auto to none */
  }

  /* Additional tweak to ensure text wraps nicely but doesn't break words unnaturally */
  .hero-heading {
    max-width: 100%;
    line-height: 1.2;
  }

  .desktop-only-break {
    display: none;
  }
}

/* Performance optimizations for hero section */
.hero-wrapper {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Optimize animations */
[data-w-id] {
  will-change: opacity, transform;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}