/* Spacing */
/* Grid settings */
/* Row inner box */
/* Breakpoint options */
/* Calculated variables - do not edit unless you are a space cowboy */
:root {
  --col-1: 5.5833333333%;
  --col-2: 14.1666666667%;
  --col-3: 22.75%;
  --col-4: 31.3333333333%;
  --col-5: 39.9166666667%;
  --col-6: 48.5%;
  --col-7: 57.0833333333%;
  --col-8: 65.6666666667%;
  --col-9: 74.25%;
  --col-10: 82.8333333333%;
  --col-11: 91.4166666667%;
  --col-12: 100%;
}

/* Split colours - set colours when using .row.split */
/* Overlays - for modals, cookie popups */
/* Type */
/* Quotes */
/* Icons - see font-awesome.scss for more info */
/* Buttons */ /* Woocommerce */ /* Notifications */ /* Pagination */ /* Logo */ /* Header */
/* Header navigation */
/* Footer */
/* Mobile menu */ /* Cookie bar */ /* Social links */ /* Transitions */ /* Loader */ /* Modals */ /* Dots */
/* Tables */
.row-type-our_approach {
  overflow: visible !important;
  padding-top: 25vh;
  padding-bottom: 25vh;
}
.row-type-our_approach .our_approach__left {
  display: flex;
}
.row-type-our_approach .number-box {
  --size: 60px;
  width: var(--size);
  height: var(--size);
  border-radius: 100%;
  color: inherit !important;
  line-height: calc(var(--size) - 4px);
  text-align: center;
  border: 1px solid var(--black);
  font-size: var(--step-3);
  font-family: light;
  transform: translate(-15px, 78%);
}
.row-type-our_approach .frame-box {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
}
.row-type-our_approach .frame-box .frame {
  background-color: transparent;
  height: 300px;
  border: 1px solid var(--aquamarine);
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  z-index: 10;
}
.row-type-our_approach .frame-box .frame:after {
  content: "";
  height: 16px;
  width: 16px;
  background-color: var(--main-light);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  border: solid 1px var(--aquamarine);
  border-radius: 100%;
}
.row-type-our_approach .frame-box .frame .screen {
  background-color: transparent;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  position: absolute;
  width: 100%;
  height: 275px;
  left: 0;
  bottom: calc(-100% - 1px);
}
.row-type-our_approach .frame-box .frame .screen.top {
  bottom: initial;
  display: none;
  top: calc(-100% - 1px);
}
.row-type-our_approach .content-box {
  aspect-ratio: 1/1;
  padding: var(--space-s);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.row-type-our_approach .content-box:after {
  content: "";
  height: 16px;
  width: 16px;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  border: solid 1px var(--main-dark);
  border-radius: 100%;
}
.row-type-our_approach .content-box:before {
  content: "";
  height: 1px;
  width: 36px;
  background-color: var(--main-dark);
  position: absolute;
  top: 50%;
  left: -8px;
  transform: translate(-100%, -50%);
  pointer-events: none !important;
}
.row-type-our_approach .video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: 60px;
  row-gap: 200px;
}
.row-type-our_approach .video-container .video-box {
  position: relative;
  flex-grow: 1;
  width: 50%;
  aspect-ratio: 1/1;
  padding: var(--space-s);
}
.row-type-our_approach .video-container .video-box video {
  width: 90%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.row-type-our_approach .screen__curved {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -20px;
  top: -20px;
  border-radius: 96px;
  border: 20px solid transparent;
  box-sizing: content-box;
  opacity: 0.5;
  clip-path: inset(0 0 0 0);
  geometry-box: stroke-box;
  display: none;
}
.row-type-our_approach .text-box-frame {
  display: none;
}
.row-type-our_approach .text-box {
  display: none;
}

@media (max-width: 1025px) {
  .row-type-our_approach {
    padding: 0 !important;
  }
  .number-box {
    display: none;
  }
  .frame {
    display: none;
  }
  .frame-box {
    display: none;
  }
  .content-box:before, .content-box:after {
    display: none;
  }
  .content-box-icon {
    display: none;
  }
  .content-box {
    aspect-ratio: initial !important;
    padding: 0 !important;
    background-color: transparent !important;
  }
  .text-box {
    display: block !important;
    margin-bottom: var(--space-m);
    background-color: white;
    padding: var(--space-m);
  }
  .text-box-frame {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 190px;
    border: solid 1px var(--aquamarine);
    margin-bottom: var(--space-m);
    border-radius: 50px;
    padding: var(--space-m);
    padding-top: var(--space-xs);
  }
}
@media (max-width: 1025px) and (max-width: 1025px) {
  .text-box-frame {
    height: 300px;
  }
}
@media (max-width: 1025px) and (max-width: 768px) {
  .text-box-frame {
    height: 190px;
  }
}
@media (max-width: 1025px) {
  .text-box-frame video {
    width: 45%;
  }
}
body.dark .number-box {
  border-color: var(--white);
}
body.dark .content-box {
  border-color: var(--white);
}
body.dark .content-box:after {
  background-color: var(--black);
  border-color: var(--white);
}
body.dark .content-box:before {
  background-color: var(--white);
}
body.dark .frame:after {
  background-color: var(--black) !important;
}