@font-face {
    font-family: 'GoogleSans-Regular';
    src: url(../font/GoogleSans-Regular.ttf);
}

@font-face {
    font-family: 'GoogleSans-Bold';
    src: url(../font/GoogleSans-Bold.ttf);
}

@font-face {
    font-family: 'GoogleSans-Medium';
    src: url(../font/GoogleSans-Medium.ttf);
}

@font-face {
    font-family: 'GoogleSans-SemiBold';
    src: url(../font/GoogleSans-SemiBold.ttf);
}

html * {
    padding: 0;
    margin: 0;
}

body {
    background-color: #1A1E23;
    overflow-x: hidden;
}

h1 {
    font-family: 'GoogleSans-Regular';
    font-size: 64px;
    color: #ffffff;
    line-height: 120%;
    font-weight: 400;
}

h1 span {
    color: #C19E5A;
}

h2 {
    font-family: 'GoogleSans-Bold';
    font-size: 96px;
    color: #ffffff;
    line-height: 120%;
}

h3 {
    font-family: 'GoogleSans-Medium';
    color: #ffffff;
    font-size: 24px;
    line-height: 150%;
}

p, label {
    font-family: 'GoogleSans-Regular';
    color: #DBDBDB;
    font-size: 18px;
    line-height: 200%;
}

li {
    font-family: 'GoogleSans-Medium';
    color: #ffffff;
    font-size: 24px;
    list-style: none;
}

a {
    font-family: 'GoogleSans-SemiBold';
    text-decoration: none;
    color: #ffffff;
    font-size: 24px;
}

a:hover {
    color: #C19E5A;
}

.wrap {
    max-width: 1500px;
    padding: 0px 20px 0px 20px;
    margin: 0 auto;
}

.cta-button {
    font-family: 'GoogleSans-SemiBold';
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #ffffff;
    transition: all 300ms;
    font-size: 18px;
    position: relative;
    overflow: hidden;
    background-color: #008776;
}

button.cta-button:hover {
  transform: scale(1.1);
  box-shadow: 4px 5px 17px -4px #06af98;
  cursor: pointer;
}

button.cta-button::before {
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #06af98;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}

button.cta-button:hover::before {
  width: 250%;
}


.cta-btn:hover::before {
  width: 250%;
}

.header {
    padding: 50px 0px;
}

.header-wrap {
    display: flex;
    justify-content: space-between;
}

.header-menu-main-page {
    display: none;
}

.burger {
  position: relative;
  width: 40px;
  height: 30px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #C19E5A;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}

.burger-active {
    display: none;
}

.header-menu ul {
    display: flex;
    justify-content: space-between;
}

.header-menu ul li {
    padding-top: 10px;
}

.header-menu-li {
    margin-left: 120px;
}

.first-screen {
    display: flex;
    justify-content: space-between;
    padding-bottom: 200px;
}

.first-screen-text {
    width: 49%;
    padding-top: 120px;
    order: -1;
}

.first-screen-text p {
    padding-top: 40px;
    padding-bottom: 60px;
    width: 80%;
}

.first-screen-animation {
    width: 40%;
    padding-top: 80px;
}

.container-loader {
  --size: 500px;
  width: var(--size);
  height: var(--size);
  position: relative;
  left: 300px;
  top: 200px;
  zoom: 0.5;
  transform: translateX(-50%);

  .ball {
    position: absolute;
    width: calc(var(--size) + var(--i));
    height: calc(var(--size) + var(--i));
    background-color: var(--color);
    border-radius: 50%;
    animation: move 5s linear infinite;
    transform-origin: var(--size);
    mix-blend-mode: hard-light;
    animation-duration: var(--d);
    filter: blur(100px);

    &:nth-child(even) {
      animation-direction: reverse;
    }
  }
}

@keyframes move {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.big-words-block {
    padding-top: 40px;
    padding-bottom: 120px;
}

.big-words-block h2 {
    font-size: 64px;
    display: block;
}

.big-word-one {
    padding-left: 15%;
    display: flex;
    justify-content: flex-start;
}

.big-word-two {
    padding-left: 10%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    bottom: 32px;
}

.big-word-three {
    padding-left: 25%;
    display: flex;
    justify-content: flex-start;
    position: relative;
    bottom: 64px;
}

.big-word-one-img, .big-word-two-img, .big-word-three-img, .big-word-four-img  {
    width: 132px;
    height: 132px;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 300ms;
    opacity: 0;
    position: relative;
    bottom: 32px;
}

.big-word-one-img {
    background-image: url("../img/CSL1.jpg");
    margin-left: 24px;
    background-position: 30% 50%;
}

.big-word-two-img {
    background-image: url("../img/CSL2.jpg");
    margin-right: 24px;
    background-position: 50% 50%;
}

.big-word-three-img {
    background-image: url("../img/CSL3.jpg");
    margin-left: 24px;
    background-position: 60% 50%;
}

.big-word-one:hover, .big-word-two:hover, .big-word-three:hover {
    cursor: default;
}

.big-word-one:hover .big-word-one-img {
    opacity: 1;
}

.big-word-two:hover .big-word-two-img {
    opacity: 1;
}

.big-word-three:hover .big-word-three-img {
    opacity: 1;
}

.big-word-four:hover .big-word-four-img {
    opacity: 1;
}

.core-services-header {
    padding-bottom: 80px;
}

.slider-crew-wrapper {
    position: relative;
}

.slider-crew-reset, .slider-crew-btn, .quiz-left-btn, .quiz-right-btn {
    background-color: #ffffff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    box-shadow: 0px 4px 20px rgba(0,0,0,0.05);
    border: none;
    cursor: pointer;
}

.slider-crew-reset:hover, .slider-crew-btn:hover {
    box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
}

.slider-crew-main {
    width:100%; 
    overflow:hidden;
}

.crew-info-slider-slides {
    display: flex;
    justify-content: flex-start;
    transition: all 500ms ease-in-out;
}

.crew-info-slider-slides-item {
    padding-right: 24px;
}

.crew-info-slider-slides-item img {
    width: 620px;
}

.crew-info-slider-slides-item h3 {
    padding-top: 24px;
}

.crew-info-slider-slides-item p {
    padding-top: 16px;
}

.crew-info-slider-arrows {
        padding-left: 0%;
}

.left-arrow {
    position: absolute;
    top: calc(50% - 40px);
    left: 20px;
    z-index: 50;
    visibility: hidden;
}

.right-arrow {
    position: absolute;
    top: calc(50% - 40px);
    right: 20px;
    z-index: 50;
}

.help {
    padding-top: 300px;
    padding-bottom: 340px;
}

.help-header {
    float: left;
}

.help-items {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    cursor: default;
}

.help-items-item {
    padding: 12px 24px 12px 20px;
    border: 1px solid #4F4F4F;
    border-radius: 8px;
    display: flex;
    justify-content: flex-start;
    background-color: #1A1E23;
    z-index: 2;
}

.help-items-item-circle {
    width: 8px;
    height: 8px;
    border-radius: 50px;
    background-color: #E9E9E9;
    margin-right: 16px;
    margin-top: 13px;
}

.help-items-divider {
    padding-top: 18px;
}

.help-items-content-one, .help-items-content-two, .help-items-content-three, .help-items-content-four {
    background-color: #ffffff;
    padding: 12px 24px;
    border-radius: 0px 0px 8px 8px;
}

.help-items-content-one p, .help-items-content-two p, .help-items-content-three p, .help-items-content-four p {
    color: #1A1E23;
}

.help-items-dropdown-one, .help-items-dropdown-two, .help-items-dropdown-three, .help-items-dropdown-four {
    position: relative;
    transition: all 300ms;
    display: flex;
}

.help-items-item-one {
    width: 140px;
}

.help-items-item-two {
    width: 142px;
}

.help-items-item-three {
    width: 140px;
}

.help-items-item-four {
    width: 242px;
}

.help-items-content-one {
    width: 138px;
}

.help-items-content-two {
    width: 140px;
}

.help-items-content-three {
    width: 138px;
}

.help-items-content-four {
    width: 240px;
}

.help-items-content-one, .help-items-content-two, .help-items-content-three, .help-items-content-four {
    opacity: 0;
    position: absolute;
    top: 52px;
    z-index: 1;
}

.help-items-dropdown-one:hover .help-items-content-one {
    opacity: 1;
}

.help-items-dropdown-one:hover .help-items-dropdown-one-text {
    color: #ffffff;
}

.help-items-dropdown-one:hover .help-items-item-circle-one {
    background-color: #ffffff;
}

.help-items-dropdown-one:hover .help-items-item-circle-one {
    background-color: #ffffff;
}

.help-items-dropdown-one:hover .help-items-item-one {
    border: 1px solid #bcbcbc;
}

.help-items-dropdown-two:hover .help-items-content-two {
    opacity: 1;
}

.help-items-dropdown-two:hover .help-items-dropdown-two-text {
    color: #ffffff;
}

.help-items-dropdown-two:hover .help-items-item-circle-two {
    background-color: #ffffff;
}

.help-items-dropdown-two:hover .help-items-item-circle-two {
    background-color: #ffffff;
}

.help-items-dropdown-two:hover .help-items-item-two {
    border: 1px solid #bcbcbc;
}

.help-items-dropdown-three:hover .help-items-content-three {
    opacity: 1;
}

.help-items-dropdown-three:hover .help-items-dropdown-three-text {
    color: #ffffff;
}

.help-items-dropdown-three:hover .help-items-item-circle-three {
    background-color: #ffffff;
}

.help-items-dropdown-three:hover .help-items-item-circle-three {
    background-color: #ffffff;
}

.help-items-dropdown-three:hover .help-items-item-three {
    border: 1px solid #bcbcbc;
}

.help-items-dropdown-four:hover .help-items-content-four {
    opacity: 1;
}

.help-items-dropdown-four:hover .help-items-dropdown-four-text {
    color: #ffffff;
}

.help-items-dropdown-four:hover .help-items-item-circle-four {
    background-color: #ffffff;
}

.help-items-dropdown-four:hover .help-items-item-circle-four {
    background-color: #ffffff;
}

.help-items-dropdown-four:hover .help-items-item-four {
    border: 1px solid #bcbcbc;
}

.spinner {
  background-image: linear-gradient(rgb(0, 135, 118) 35%,rgb(193, 158, 90));
  width: 330px;
  height: 330px;
  animation: spinning82341 1.7s linear infinite;
  text-align: center;
  border-radius: 500px;
  filter: blur(5px);
  box-shadow: 0px -5px 20px 0px rgb(0, 135, 118), 0px 5px 20px 0px rgb(193, 158, 90);
}

.spinner1 {
  background-color: rgb(26, 30, 35);
  width: 330px;
  height: 330px;
  border-radius: 500px;
  filter: blur(50px);
}

@keyframes spinning82341 {
  to {
    transform: rotate(360deg);
  }
}

.why {
    padding-bottom: 250px;
}

.why-spinner {
    position: relative;
    top: 40px;
}

.why-spinner p {
    font-size: 32px;
    color: #ffffff;
}

.why-spinner-text {
    position: absolute;
    left: 70px;
    top: 190px;
    z-index: 10;
}

.spinner-circle {
    position: absolute;
    right: -110px;
    top: -12px;
    z-index: 11;
    transition: all 300ms;
    scale: 0.9;
}

.why-divider, .services-divider {
    display: none;
    background-color: #E9E9E9;
    width: 8px;
    height: 8px;
    border-radius: 50px;
}

.why-text-one {
    order: -1;
}

.why-option h3 {
    padding-bottom: 8px;
}

.why-content {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-top: 120px;
}

.why-option-one {
    width: 270px;
    padding-right: 120px;
    transition: all 300ms;
}

.why-option-two {
    width: 280px;
    padding-left: 110px;
    position: relative;
    bottom: 24px;
    transition: all 300ms;
    scale: 1.1;
}

.why-option-three {
    width: 280px;
    position: relative;
    top: 120px;
    right: 50px;
    transition: all 300ms;
}

.why-option-four {
    width: 345px;
    padding-left: 147px;
    padding-top: 220px;
    transition: all 300ms;
}

.why-option-five {
    width: 280px;
    transition: all 300ms;
    position: relative;
    left: -250px;
    top: 80px;
}

.quiz {
    display: flex;
    padding-bottom: 270px;
}

.quiz-header {
    width: 50%;
}

.quiz-content {
    width: 50%;
}

.quiz-content-descr {
    width: 70%;
}

.quiz-content p {
    padding-bottom: 24px;
}

.quiz-content-arrows {
    display: flex;
    padding-top: 80px;
    padding-bottom: 60px;
}

.quiz-left-arrow {
    padding-right: 40px;
    opacity: 0.5;
}

.quiz-right-arrow {
    padding-left: 40px;
}

.quiz-content-arrows p {
    padding-top: 20px;
}

.quiz-body h3 {
    padding-bottom: 16px;
    display: block;
    width: 85%;
}

.checkbox-wrapper-4 * {
  box-sizing: border-box;
  color: #DBDBDB;
}

.checkbox-wrapper-4 {
    margin-top: 24px;
}

.checkbox-wrapper-4 .cbx {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.2s ease;
  display: inline-block;
}

.checkbox-wrapper-4 .cbx:not(:last-child) {
  margin-right: 6px;
}

.checkbox-wrapper-4 .cbx:hover {
  background: rgba(0, 135, 118,0.06);
}

.checkbox-wrapper-4 .cbx span {
  float: left;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.2s ease;
  box-shadow: 0 1px 1px rgba(0, 135, 118, 0.05);
}

.checkbox-wrapper-4 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}

.checkbox-wrapper-4 .cbx span:last-child {
  padding-left: 8px;
  line-height: 21px;
}

.checkbox-wrapper-4 .cbx:hover span:first-child {
  border-color: #008776;
}

.checkbox-wrapper-4 .inp-cbx {
  position: absolute;
  visibility: hidden;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child {
  background: #008776;
  border-color: #008776;
  animation: wave-4 0.4s ease;
}

.checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}

.checkbox-wrapper-4 .inline-svg {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

@media screen and (max-width: 640px) {
  .checkbox-wrapper-4 .cbx {
    width: 100%;
    display: inline-block;
  }
}

@-moz-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@-webkit-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@-o-keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

@keyframes wave-4 {
  50% {
    transform: scale(0.9);
  }
}

.quiz-email {
    display: none;
}

.quiz-email-text p {
    padding-top: 60px;
    padding-bottom: 48px;
    display: block;
    width: 90%;
    font-family: 'GoogleSans-Medium';
    color: #ffffff;
}

.inputGroup {
  width: 400px;
  position: relative;
}

.inputGroup-quiz {
    float: left;
    margin-right: 24px;
}

.inputGroup input {
  font-size: 100%;
  padding: 16px;
  outline: none;
  border: 1px solid #DBDBDB;
  background-color: transparent;
  border-radius: 4px;
  width: 364px;
  color: #ffffff;
  font-size: 18px;
}

.inputGroup label {
  font-size: 18px;
  position: absolute;
  left: 0;
  top: -3px;
  padding: 0.8em;
  margin-left: 0.5em;
  pointer-events: none;
  transition: all 0.3s ease;
  color: #ffffff;
}

.inputGroup :is(input:focus, input:valid)~label {
  transform: translateY(-40%) scale(.9);
  margin: 0em;
  margin-left: 1.3em;
  padding: 2px 8px;
  background-color: #1A1E23;
}

.inputGroup :is(input:focus, input:valid) {
  border-color: #008776;
}

.quiz-btn {
    position: relative;
    top: 2px;
}

.form {
    width: 50%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 200px;
}

.form h2 {
    padding-bottom: 40px;
}

.form p {
    padding-bottom: 64px;
}

.inputGroup-form {
    margin: 0 auto;
    padding-bottom: 24px;
    width: 600px;
}

.inputGroup-form input {
    width: 564px;
}

.form-btn {
    margin-top: 56px;
}

.footer {
    display: flex;
    justify-content: space-between;
    padding-bottom: 24px;
}

.footer-descr {
    width: 25%;
}

.footer-descr-bold {
    font-family: 'GoogleSans-Medium';
    padding-bottom: 16px;
}

.footer-phone-desktop p, .footer-phone-mobile a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'GoogleSans-Bold';
    font-size: 32px;
}

.footer-phone-mobile {
    display: none;
}

/* адаптив */

@media screen and (max-width: 1410px) {
    .big-word-one {
        padding-left: 5%;
    }

    .big-word-two {
        padding-left: 0%;
    }

    .big-word-three {
        padding-left: 15%;
    }

    .help-header {
        float: none;
    }

    .help-items {
        padding-top: 80px;
        justify-content: space-between;
        width: 100%;
    }
    .help-items-dropdown-one, .help-items-dropdown-two, .help-items-dropdown-three, .help-items-dropdown-four {
        width: 100%;
    }

    .help-items-divider {
        margin: 0 auto;
    }

    .quiz-content-descr {
        width: 80%;
    }

    .quiz-body h3 {
        width: 90%;
    }

    .quiz-header {
        width: 35%;
    }

    .quiz-content {
        width: 65%;
    }
}

@media screen and (max-width: 1400px) {
    .wrap {
        padding: 0px 40px 0px 40px;
    }

    .form {
        width: 60%;
    }

    .first-screen-animation {
        width: 60%;
    }

    .footer-descr {
        width: 40%;
    }
}

@media screen and (max-width: 1315px) {
    .why-option-three {
        right: 0px;
    }

    .why-option-four {
        padding-left: 110px;
    }

    .big-words-block h2 {
        font-size: 60px;
    }
}

@media screen and (max-width: 1275px) {
    .big-words-block h2 {
        font-size: 48px;
    }

    .big-word-three {
        padding-left: 25%;
    }

    .first-screen-text {
        width: 60%;
    }

    .big-words-block {
        padding-bottom: 80px;
    }

    .help {
        padding-top: 270px;
    }
}

@media screen and (max-width: 1225px) {
    h2 {
        font-size: 64px;
    }

    .why-option-one {
        padding-right: 0px;
    }

    .spinner-circle {
        display: none;
    }

    .why-option-two {
        padding-left: 40px;
        bottom: 0px;
    }

    .why-option-four {
        padding-left: 40px;
        padding-top: 120px;
    }

    .why-content {
        padding-top: 80px;
        justify-content: space-between;
    }
    
    .help {
        padding-bottom: 270px;
    }

    .quiz {
        display: block;
        padding-bottom: 200px;
    }

    .quiz-header {
        width: 60%;
    }

    .quiz-content {
        padding-top: 80px;
    }
}

@media screen and (max-width: 1158px) {
    .first-screen-text {
        width: 80%;
    }

    .first-screen-animation {
        width: 60%;
    }

    .container-loader {
        --size: 400px;
        top: 300px;
        left: 200px;
    }

    .quiz-content {
        width: 100%;
    }

    .quiz-content-descr {
        width: 60%;
    }
}

@media screen and (max-width: 1070px) {
    .first-screen {
        display: block;
    }

    .first-screen-animation {
        width: 90%;
        display: flex;
        justify-content: flex-end;
    }

    .container-loader {
        top: 150px;
        left: -100px;
    }

    .first-screen-text {
        padding-top: 0px;
        position: relative;
        top: -100px;
    }

    .first-screen {
        padding-bottom: 80px;
    }

    .big-word-one-img, .big-word-two-img, .big-word-three-img, .big-word-four-img {
        display: none;
    }

    .big-word-one, .big-word-two, .big-word-three {
        padding-left: 0px;
        padding-bottom: 40px;
        display: block;
        text-align: center;
    }

    .help-items {
        display: block;
    }

    .help-items-item {
        width: 600px;
    }

    .help-items-content-one, .help-items-content-two, .help-items-content-three, .help-items-content-four {
        opacity: 1;
        position: relative;
        top: -8px;
        width: 598px;
    }

    .help-items-dropdown-one, .help-items-dropdown-two, .help-items-dropdown-three, .help-items-dropdown-four {
        display: block;
        width: 600px;
        margin: 0 auto;
    }

    .help-items-divider {
        padding-top: 0px;
        width: 60px;
        height: 60px;
        position: relative;
        top: -8px;
        transform: rotate(90deg);
    }

    .why-content {
        display: block;
        padding-top: 60px;
    }

    .why-option {
        margin: 0 auto;
    }

    .why-option-one {
        width: 50%;
        padding-bottom: 24px;
    }

    .why-text-one {
        padding-top: 80px;
    }

    .why-option-three {
        width: 50%;
        top: 0px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .why-option-two {
        width: 50%;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-left: 0px;
        scale: 1;
    }

    .why-option-four {
        width: 50%;
        padding-left: 0px;
        padding-top: 24px;
    }

    .why-option-five {
        width: 50%;
        padding-left: 0px;
        padding-top: 24px;
    }

    .why-divider {
        display: block;
        margin: 0 auto;
    }

    .why-spinner {
        top: 0px;
        margin: 0 auto;
        width: 330px;
    }

    .why {
        padding-bottom: 200px;
    }

    .quiz-header {
        width: 80%;
    }

    .help {
        padding-bottom: 200px;
    }

    .quiz-content-descr {
        margin: 0 auto;
    }

    .quiz-content-arrows {
        justify-content: center;
    }

    .checkbox-wrapper-4 {
        margin-top: 48px;
    }

    .quiz-body h3 {
        width: 60%;
        text-align: center;
        margin: 0 auto;
    }

    .quiz-body-options {
        padding-left: 15%;
    }

    .header-menu-li {
        margin-left: 80px;
    }

    .quiz-email {
        width: 60%;
        margin: 0 auto;
    }

    .quiz-email-text p {
        text-align: center;
    }

    .inputGroup-quiz {
        float: none;
        margin: 0 auto;
    }

    .quiz-input {
        text-align: center;
    }

    .quiz-btn {
        top: 0px;
        margin-top: 40px;
    }

    .inputGroup-form {
        width: 400px;
    }

    .inputGroup-form input {
        width: 364px;
    }
}

@media screen and (max-width: 970px) {
    .footer {
        display: block;
    }

    .footer-descr, .footer-phone-desktop, .footer-phone-mobile {
        padding-bottom: 64px;
    }

    .footer-bee {
        text-align: center;
    }

    .container-loader {
        --size: 300px;
    }
}

@media screen and (max-width: 890px) {
    .container-loader {
        --size: 200px;
        top: 10px;
    }

    .big-words-block h2 {
        font-size: 40px;
    }

    .first-screen-text {
        top: 0px;
        padding-bottom: 100px;
    }

    .help {
        padding-top: 200px;
    }

    .why-option-one, .why-option-three, .why-option-two, .why-option-four, .why-option-five {
        width: 70%;
    }

    .quiz-content-descr, .quiz-body h3 {
        width: 70%;
    }

    .quiz-body-options {
        padding-left: 10%;
    }

    .quiz-email {
        width: 80%;
    }

    .footer-descr {
        width: 60%;
    }

    .header-menu-li {
        margin-left: 40px;
    }

    .checkbox-wrapper-4 .cbx span:last-child {
        width: 95%;
    }

    .form {
        width: 70%;
    }
}

@media screen and (max-width: 768px) {
    .help-items-item {
        width: calc(100% - 40px);
    }

    .help-items-content-one, .help-items-content-two, .help-items-content-three, .help-items-content-four {
        width: calc(100% - 40px);
    }

    .help-items-dropdown-one, .help-items-dropdown-two, .help-items-dropdown-three, .help-items-dropdown-four {
        width: calc(100% - 42px);
    }

    .quiz-header {
        width: 100%;
    }

    .quiz-content-descr, .quiz-body h3 {
        width: 100%;
    }

    .quiz-body-options {
        padding-left: 0px;
    }

    .checkbox-wrapper-4 .cbx span:last-child {
        width: 90%;
    }

    .quiz-email {
        width: 100%;
    }

    .form {
        width: 90%;
    }

    .big-words-block h2 {
        font-size: 32px;
        text-align: left;
    }

    .header-menu {
        padding-top: 4px;
    }

    .burger-active {
        display: block;
    }

    .burger {
        z-index: 20;
    }

    .header-menu ul {
        display: none;
        width: 100%;
        height: 100vh;
        background-color: #1A1E23;
        position: absolute;
        top: 0px;
        right: 0px;
        z-index: 10;
        padding-top: 120px;
        padding-right: 40px;
        text-align: right;
    }

    .header-menu ul li {
        padding-top: 48px;
    }

    .header-menu-main-page {
        display: block;
    }

    .header-menu-main-page-active a {
        color: #C19E5A;
    }

    .container-loader {
        top: -80px;
    }

    .first-screen {
        padding-bottom: 0px;
    }

    .big-words-block {
        padding-bottom: 40px;
    }

    .footer-phone-mobile {
        display: block;
    }

    .footer-phone-desktop {
        display: none;
    }
}

@media screen and (max-width: 687px) {
    .first-screen-text {
        width: 100%;
        top: 60px;
    }

    .first-screen-text p {
        width: 100%;
    }
}

@media screen and (max-width: 620px) {
    .big-words-block h2 {
        font-size: 24px;
    }

    h1 {
        font-size: 48px;
    }

    h2 {
        font-size: 48px;
    }

    .first-screen-text {
        padding-bottom: 80px;
    }

    .big-words-block {
        padding-bottom: 40px;
    }

    .help {
        padding-top: 120px;
        padding-bottom: 170px;
    }

    .why-option-one, .why-option-three, .why-option-two, .why-option-four, .why-option-five {
        width: 90%;
    }

    .quiz, .form {
        padding-bottom: 120px;
    }

    .footer-descr {
        width: 80%;
    }

    .form {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    h1 {
        font-size: 40px;
    }

    .why-option-one, .why-option-three, .why-option-two, .why-option-four, .why-option-five {
        width: 100%;
    }

    .quiz-content, .quiz-content-arrows {
        padding-top: 48px;
    }
    
    .checkbox-wrapper-4 .cbx span:last-child {
        width: 95%;
    }

    .why {
        padding-bottom: 120px;
    }  

    .wrap {
        padding: 0px 24px 0px 24px;
    }

    .right-arrow, .left-arrow {
        top: 40px;
    }
}

@media screen and (max-width: 450px) {
    .container-loader {
        --size: 150px;
        top: -120px;
        .ball {
            filter: blur(50px);
        }
    }

    .first-screen-text {
        top: 0px;
        padding-bottom: 48px;
    }

    .big-words-block h2 {
        font-size: 18px;
    }

    .first-screen-text p {
        padding-top: 24px;
        padding-bottom: 48px;
    }

    .first-screen, .big-words-block {
        padding-bottom: 0px;
    }

    .help {
        padding-bottom: 120px;
        padding-top: 100px;
    }

    .help-items {
        padding-top: 48px;
    }

    .inputGroup {
        width: 350px;
    }

    .inputGroup input {
        width: 304px;
    }

    .checkbox-wrapper-4 .cbx span:last-child {
        width: 90%;
    }

    .cta-button {
        width: 100%;
    }

    .spinner {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .spinner1 {
        width: 200px;
        height: 200px;
        filter:blur(20px)
    }

    .why-spinner p {
        font-size: 24px;
    }

    .why-spinner-text {
        top: 110px;
        left: 100px;
    }

    .why-text-one {
        padding-top: 60px;
    }

    .core-services-header {
        padding-bottom: 48px;
    }

    .quiz-content-arrows {
        padding-bottom: 40px;
    }

    .footer-descr {
        width: 100%;
    }
}

@media screen and (max-width: 376px) {
    .inputGroup {
        width: 300px;
    }

    .inputGroup input {
        width: 264px;
    }

    h2 {
        font-size: 40px;
    }

    h1 {
        font-size: 32px;
    }

    .quiz-right-arrow {
        padding-left: 24px;
    }

    .quiz-left-arrow {
        padding-right: 24px;
    }
}






/* About us page */

.header-menu-active {
    color: #C19E5A;
}

.header-menu-underline {
    width: 100%;
    height: 4px;
    background-color: #C19E5A;
}

.about-first-screen {
    background-image: url('../img/about-bg.jpg');
    background-repeat: no-repeat;
    position: relative;
    background-size: 100%;
    background-position: 50% 50%;
    width: 100%;
    height: 980px;
}

.about-first-screen-human-hand {
    position: absolute;
    right: 0px;
    top: 180px;
}

.about-first-screen-human-hand img {
    transform: scale(0.9);
    transform-origin: right;
}

.about-first-screen-robot-hand img {
    transform: scale(0.9);
    transform-origin: left;
}

.about-first-screen-text {
    width: 30%;
    padding-top: 100px;
}

.about-first-screen-text h1 {
    padding-bottom: 40px;
}

.who-we-are-block {
    width: 45%;
    padding-bottom: 170px;
    padding-top: 24px;
    margin: 0 auto;
}

.who-we-are-block h1 {
    padding-bottom: 40px;
}

.who-we-are-text {
    padding-bottom: 24px;
}

.how-we-work {
    padding-bottom: 270px;
}

.how-we-work-mobile {
    display: none;
}

.how-we-work-arrow-seven {
        display: none;
    }

.how-we-work-b2b {
    text-align: center;
}

.how-we-work-b2b img {
    width: 80%;
}

.how-we-work-item {
    border: 1px solid #C19E5A;
    border-radius: 8px;
    padding: 24px;
    width: 287px;
}

.how-we-work-item img {
    padding-bottom: 16px;
}

.how-we-work-item h3 {
    padding-bottom: 16px;
}

.how-we-work-item:hover {
    box-shadow: 10px 5px 50px rgba(193, 158, 90, 0.2);
}

.how-we-work-item:hover .how-we-work-item-text {
    color: #ffffff;
}

.how-we-work-arrow {
    width: 100%;
    text-align: center;
    padding-top: 64px;
    padding-bottom: 64px;
}

.how-we-work-arrow-six {
    transform: rotate(180deg);
}

.how-we-work-arrow-five {
    transform: rotate(120deg);
    position: absolute;
    bottom: 200px;
    left: 120px;
}

.how-we-work-arrow-two {
    transform: rotate(-60deg);
    position: absolute;
    top: 200px;
    right: 120px;
}

.how-we-work-arrow-four {
    transform: rotate(60deg);
    position: absolute;
    bottom: 200px;
    right: 120px;
}

.how-we-work-block {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
}

.how-we-work-item-one, .how-we-work-item-four {
    margin: 0 auto;
}

.how-we-work-item-six, .how-we-work-item-two {
    margin-top: 340px;
}

.how-we-work-second-col, .how-we-work-four-col {
    position: relative;
}

@media screen and (max-width: 1600px) {
    .about-first-screen {
        background-position: 50% 0%;
        height: 800px;
    }
}

@media screen and (max-width: 1568px) {
    .about-first-screen-text {
        width: 40%;
    }
}

@media screen and (max-width: 1450px) {
    .about-first-screen-human-hand img, .about-first-screen-robot-hand img {
        transform: scale(0.7);
    }

    .how-we-work-block {
        padding-top: 60px;
    }
}

@media screen and (max-width: 1400px) {
    .how-we-work-item-six, .how-we-work-item-two {
        margin-top: 200px;
    }

    .how-we-work-arrow-five {
        bottom: 100px;
        left: 80px;
    }

    .how-we-work-arrow-two {
        right: 80px;
        top: 80px;
    }

    .how-we-work-arrow-four {
        right: 80px;
        bottom: 100px;
    }

    .about-first-screen {
        height: 700px;
    }
}

@media screen and (max-width: 1320px) {
    .about-first-screen-robot-hand img {
        position: relative;
        top: -60px;
    }

    .about-first-screen-human-hand {
        top: 150px;
    }

    .how-we-work-item {
        width: 220px;
    }

    .how-we-work-arrow-five {
        left: 100px;
    }

    .how-we-work-arrow-four, .how-we-work-arrow-two {
        right: 100px;
    }
}

@media screen and (max-width: 1250px) {
    .about-first-screen-human-hand img, .about-first-screen-robot-hand img {
        transform: scale(0.6);
    }

    .who-we-are-block {
        width: 60%;
    }

    .how-we-work {
        padding-bottom: 200px;
    }

    .about-first-screen {
        background-position: 50% 50%;
        height: 700px;
    }
}

@media screen and (max-width: 1225px) {
    .why-option-five {
        top: 120px;
        left: -300px;
    }
}

@media screen and (max-width: 1200px) {
    .how-we-work-arrow-five {
        left: 80px;
        bottom: 130px;
    }

    .how-we-work-arrow-four {
        right: 80px;
        bottom: 130px;
    }

    .how-we-work-arrow-two {
        right: 80px;
    }

    .how-we-work-b2b {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

@media screen and (max-width: 1150px) {
    .how-we-work-item {
        width: 200px;
    }
}

@media screen and (max-width: 1070px) {
    .why-option-five {
        top: 0px;
        left: 0px;
    }

    .how-we-work-arrow-four {
        right: 60px;
        bottom: 170px;
    }

    .how-we-work-arrow-two {
        right: 60px;
    }

    .how-we-work-arrow-five {
        left: 60px;
        bottom: 170px;
    }

    .how-we-work-arrow {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .how-we-work-item-six, .how-we-work-item-two {
        margin-top: 180px;
    }

    .how-we-work-b2b {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .how-we-work-arrow-two {
        top: 90px;
    }

    .about-first-screen-human-hand {
        top: 180px;
    }

    .about-first-screen-human-hand img, .about-first-screen-robot-hand img {
        transform: scale(0.5);
    }

    .about-first-screen-text {
        width: 50%;
    }
}

@media screen and (max-width: 1025px) {
    .how-we-work-arrow-four {
        right: 50px;
        bottom: 130px;
    }

    .how-we-work-arrow-two {
        right: 50px;
    }

    .how-we-work-arrow-five {
        left: 50px;
        bottom: 130px;
    }

    .about-first-screen {
        background-position: 50% 80%;
        height: 600px;
    }
}

@media screen and (max-width: 940px) {
    .about-first-screen-text {
        width: 60%;
    }

    .about-first-screen-human-hand {
        top: 200px;
    }

    .about-first-screen-human-hand img, .about-first-screen-robot-hand img {
        transform: scale(0.4);
    }

    .how-we-work-b2b {
        display: none;
    }

    .how-we-work-item {
        width: 100%;
        box-sizing: border-box;
    }

    .how-we-work-block {
        display: block;
    }

    .how-we-work-item-six, .how-we-work-item-two {
        margin-top: 0px;
    }

    .how-we-work-arrow {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .how-we-work-arrow-six {
        transform: rotate(0deg);
    }

    .how-we-work-arrow {
        margin: 0 auto;
    }

    .how-we-work-arrow-two {
        display: none;
    }

    .how-we-work-arrow-five, .how-we-work-arrow-four {
        position: relative;
        left: 0px;
        bottom: 0px;
        transform: rotate(0deg);
    }

    .how-we-work-arrow-seven {
        display: block;
    }

    .how-we-work-mobile {
        display: block;
    }
    .how-we-work-desktop {
        display: none;
    }

    .about-first-screen {
        background-position: 50% 100%;
    }

}

@media screen and (max-width: 850px) {
    .who-we-are-block {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .who-we-are-block {
        width: 100%;
    }

    .about-first-screen-text {
        padding-top: 60px;
    }

    .about-first-screen-text {
        width: 80%;
    }

    .header-menu-underline {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .about-first-screen-text {
        width: 90%;
        box-sizing: border-box;
    }

    .about-first-screen {
        height: 500px;
    }

    .about-first-screen-text {
        padding-top: 40px;
    }

    .who-we-are-block, .how-we-work, .why {
        padding-bottom: 120px;
    }

    .about-first-screen {
        background-position: 50% 80%;
    }
}

@media screen and (max-width: 400px) {
    .about-first-screen {
        height: 400px;
    }

    .about-first-screen-text {
        padding-top: 24px;
    }

    .who-we-are-block, .how-we-work, .why {
        padding-bottom: 80px;
    }

    .about-first-screen {
        background-position: 50% 90%;
    }
}




/* Services hub page */

.services-intagration {
    display: flex;
    justify-content: flex-start;
}

.services-h1-mobile {
    display: none;
}

.services-intagration-img {
    width: 50%;
    height: 450px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.services-intagration-img-one {
    background-image: url('../img/CSL1.jpg');
}

.services-intagration-img-two {
    background-image: url('../img/CSL2.jpg');
}

.services-intagration-img-three {
    background-image: url('../img/CSL3.jpg');
}

.services-intagration-img-four {
    background-image: url('../img/CSL4.jpg');
}

.services-intagration-img-last {
    order: 2;
}

.services-intagration-text {
    width: 50%;
}

.services-intagration-text h1 {
    padding-top: 40px;
    padding-bottom: 48px;
}

.services-intagration-text h3 {
    padding-bottom: 24px;
}

.services-intagration-text-last {
    padding-top: 120px;
    padding-left: 120px;
    box-sizing: border-box;
}

.services-intagration-text-first {
    padding-top: 120px;
    padding-right: 80px;
    box-sizing: border-box;
}

.services-form {
    padding-top: 270px;
}

@media screen and (max-width: 1200px) {
    .services-intagration-text-last {
        padding-top: 80px;
        padding-left: 60px;
    }

    .services-intagration-text-first {
        padding-top: 80px;
        padding-right: 60px;
    }
}

@media screen and (max-width: 1024px) {
    .services-intagration-text-last {
        padding-top: 60px;
        padding-left: 48px;
    }

    .services-intagration-text-first {
        padding-top: 60px;
        padding-right: 40px;
    }

    .services-form {
        padding-top: 200px;
    }

    .services-intagration-text h1 {
        padding-top: 0px;
        padding-bottom: 32px;
    }

    .services-intagration-img {
        height: 400px;
    }
}

@media screen and (max-width: 1000px) {
    .services-intagration {
        display: block;
    }

    .services-divider {
        display: block;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .services-h1-mobile {
        display: block;
        padding-bottom: 60px;
    }

    .services-h1-desktop {
        display: none;
    }

    .services-intagration-img {
        width: 100%;
        height: 600px;
    }

    .services-intagration-text h3 {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .services-intagration-text {
        padding-bottom: 60px;
        width: 100%;
    }

    .services-intagration-text-last {
        padding-top: 0px;
        padding-left: 0px;
    }

    .services-intagration-text-first {
        padding-top: 0px;
        padding-right: 0px;
    }

    .services-form {
        padding-top: 120px;
    }
}

@media screen and (max-width: 880px) {
    .services-intagration-img {
        height: 500px;
    }
}

@media screen and (max-width: 768px) {
    .services-h1-mobile {
        padding-top: 48px;
    }

    .services-intagration-img {
        height: 400px;
    }
}

@media screen and (max-width: 600px) {
    .services-intagration-img {
        height: 300px;
    }

    .services-h1-mobile {
        padding-top: 24px;
    }
}

@media screen and (max-width: 500px) {
    .services-intagration-img {
        height: 250px;
    }

    .services-form {
        padding-top: 80px;
    }

    .services-h1-mobile {
        padding-bottom: 40px;
    }

    .services-divider {
        margin: 24px auto;
    }
}

@media screen and (max-width: 400px) {
    .services-intagration-img {
        height: 200px;
    }

    .services-form {
        padding-top: 60px;
    }
}






/* Contact us page */

.contact-content-block {
    display: flex;
    justify-content: space-between;
    padding-bottom: 120px;
    padding-top: 80px;
}

.contact-content-map {
    width: 60%;
}

.contact-content-text h1 {
    padding-bottom: 80px;
}

.contact-content-phone img, .contact-content-map-text img {
    padding-right: 16px;
    float: left;
    position: relative;
    top: 8px;
}

.contact-content-phone p, .contact-content-email a, .contact-content-map-text-p, .contact-content-phone-mobile a {
    color: #ffffff;
    font-family: 'GoogleSans-SemiBold';
    padding-left: 8px;
    font-size: 18px;
}

.contact-content-email {
    padding-top: 40px;
}

.contact-content-email img {
    padding-right: 16px;
    float: left;
    position: relative;
    top: 5px;
}

.contact-content-map-text-p {
    padding-bottom: 16px;
}

.contact-content-map-block {
    padding-top: 24px;
}

.contact-content-phone-mobile {
    display: none;
}

@media screen and (max-width: 1024px) {
    .contact-content-block {
        display: block;
        padding-top: 60px;
    }

    .contact-content-map {
        width: 100%;
        padding-top: 40px;
    }
}

@media screen and (max-width: 768px) {
    .contact-content-phone-desktop {
        display: none;
    }

    .contact-content-phone-mobile {
        display: block;
    }

    .contact-content-block {
        padding-top: 40px;
    }
}

@media screen and (max-width: 620px) {
    .contact-content-block {
        padding-top: 24px;
    }

    .contact-content-text h1 {
        padding-bottom: 60px;
    } 
}