:root {
  --white: #ffffff;

  --black: #000000;

  --nav-blue: #2b2d42;

  --gray: #ececec;

  --red: #ff693c;

  --marquee-width: 100vw;

  --offset: 0;

  --move-initial: calc(-25% + var(--offset));

  --move-final: calc(-50% + var(--offset));

  /*--light-gray:#EDE8E5;*/

  --light-gray: #f5f5f5;

  --light-white: #f5f5f5;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
var,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
ul,
li {
  margin: 0;

  padding: 0;

  border: 0;

  outline: 0;

  font-size: 100%;

  vertical-align: baseline;

  background: transparent;

  list-style: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

*,
*:before,
*:after {
  margin: 0;

  padding: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  -o-box-sizing: border-box;

  box-sizing: border-box;

  outline: none;

  position: relative;
}

.clearfix:after {
  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;
}

.clearfix {
  display: block;
}

html,
body {
  width: 100%;

  height: 100%;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  overflow-x: hidden;
}

body {
  font-family: basic-sans, sans-serif;

  font-weight: 400;

  font-size: 18px;

  line-height: 24px;

  color: var(--nav-blue);

  padding: 0;

  margin: 0;

  text-size-adjust: none;

  -webkit-text-size-adjust: none;

  background: var(--nav-blue);
}

img {
  display: block;

  max-width: 100%;

  margin: 0 auto;
}

a {
  display: inline-block;

  color: var(--white);
  color: var(--nav-blue);

  text-decoration: none;

  text-transform: uppercase;
}

a:hover {
  color: var(--white);
}

h1,
h2,
h3 {
  font-family: ivypresto-display, serif;

  font-weight: 400;

  font-style: normal;

  /*letter-spacing:5px;*/
}

h1 {
  font-size: 70px;

  line-height: 90px;
}

h2 {
  font-size: 46px;

  line-height: 65px;
}

h3 {
  font-size: 32px;

  line-height: 50px;
}

h4,
h5,
h6 {
  font-family: basic-sans, sans-serif;

  font-weight: 400;

  font-style: normal;
}

h4 {
  font-size: 28px;

  line-height: 38px;
}

h5 {
  font-size: 20px;

  line-height: 28px;
}

h6 {
  font-size: 24px;

  line-height: 38px;
}

.container {
  width: 100%;

  max-width: 1240px;

  margin: 0 auto;
}

.dc-section {
  display: block;

  padding: 150px 0;

  padding: 50px 0 60px;
}

.dc-nav-blue-section {
  color: var(--nav-blue);

  background: var(--light-gray);
}

.dc-gray-section {
  color: var(--white);

  background: var(--gray);
}

.dc-red-section {
  color: var(--white);

  background: var(--red);

  color: #2b2d42;

  background: #eed5d5;
  background: var(--light-white);
}

.dc-white-section {
  color: var(--nav-blue);

  background: var(--white);
}

.hover,
.hover_img {
  transform-style: preserve-3d;
}

.hover span,
.hover_img span {
  overflow: hidden;

  display: block;

  transition: all 0.15s ease-out;

  transform: rotateX(0deg) rotateY(0deg) scale(1);

  perspective-origin: 0 0;
}

/*

.cursor {

	position: fixed;

	width: 30px;

	height: 30px;

	border-radius: 50%;

	background-color: #ffffff;

	pointer-events: none;

	mix-blend-mode: difference;

	z-index: 999;

	transition: transform 0.2s;

  }



html,

* {

	cursor: none;

}

*/

header {
  position: fixed;

  left: 0;

  top: 0;

  padding: 20px;

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  background-color: transparent;

  z-index: 1;
}

.header-nav,
.header-logo,
.header-contact {
  width: 33.33%;
}

.header-nav {
  text-align: left;
}

.hamburger {
  position: relative;

  margin-top: -8px;
}

.hamburger::after {
  content: "";

  position: absolute;

  top: -19px;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: 0.5px solid var(--nav-blue);

  width: 48px;

  height: 48px;

  transform-origin: center;

  -webkit-transition: all 0.4s ease-in;

  -moz-transition: all 0.4s ease-in;

  -o-transition: all 0.4s ease-in;

  transition: all 0.4s ease-in;
}

.header_open_menu .hamburger::after {
  border: 0.5px solid var(--light-gray);
}

.hamburger:hover::after {
  width: 60px;
  height: 60px;
  top: -24px;

  left: -6px;
}

.hamburger span {
  display: block;

  width: 48px;

  height: 2px;

  background: #ffffff;

  margin: 8px 0;
  background: var(--nav-blue);

  width: 30px;

  height: 2px;

  margin: 8px 9px;
}

.header-logo {
  text-align: center;
}

.header-logo img {
  width: auto;

  max-width: inherit;

  height: 80px;

  transition: all 0.5s ease;

  -webkit-transition: all 0.5s ease;

  -moz-transition: all 0.5s ease;
}

/* .header-logo img{

	height:50px;

} */

.social-link {
  display: inline-block;
  vertical-align: top;
  margin-right: 0px;
  position: relative;
}

.social-link li:last-child:after {
  height: 14px;

  background: #fff;

  width: 1px;

  display: inline-block;

  vertical-align: top;

  content: "";

  margin-left: 15px;

  margin-top: 4px;
}

.social-link li {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
}

.social-link li a i,
.header_menu-main li.social-link_formobile a i {
  font-size: 22px;

  position: relative;

  color: #fff;
  color: var(--nav-blue);

  opacity: 1;

  visibility: visible;

  width: auto;

  height: auto;

  -webkit-transform: translate3d(0px, 0px, 0);

  -ms-transform: translate3d(0px, 0px, 0);

  -moz-transform: translate3d(0px, 0px, 0);

  transform: translate3d(0px, 0px, 0);
}

.header_menu-main li.social-link_formobile {
  margin-top: 30px !important;
}

.header_menu-main li.social-link_formobile a {
  padding-right: 20px;
  font-weight: normal;
}

.header_menu-main li.social-link_formobile a i {
  font-size: 28px;
  font-weight: normal;
}

.header-contact {
  text-align: right;
}

.header-contact a span {
  font-size: 18px;

  font-weight: 600;

  color: var(--white);

  padding-right: 25px;

  background: url(../images/link-arrow-white.svg) right center no-repeat;

  background: url(../images/link-arrow.svg) right center no-repeat;

  background-size: 14px;
}

main {
  position: relative;

  z-index: 0;
}

.dc-home-banner {
  display: flex;

  justify-content: center;

  align-items: center;

  height: 80vh;
  padding: 200px 0 100px;
  padding-bottom: 0;
}

.dc-home-banner .container {
  max-width: 1180px;
}

.dc-home-banner h1 {
  /* margin-bottom:50px;

	perspective:600px;

	-webkit-perspective:600px */
}

.dc-home-banner h1 span {
  display: block;

  opacity: 0;

  transform: translateY(100%) rotateX(-80deg);

  transform-origin: center top;

  transform-style: preserve-3d;

  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dc-home-banner h1 span:first-child {
  transition-delay: 0.1s;
}

.dc-home-banner h1 span:nth-child(2) {
  transition-delay: 0.2s;
}

.dc-home-banner h1.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.dc-home-banner h6 {
  text-align: right;

  white-space: nowrap;

  letter-spacing: 50px;

  opacity: 0;

  transform: translate(100%, 0);

  transition: all 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dc-home-banner h6.is-inview {
  letter-spacing: 0px;

  opacity: 1;

  transform: translate(0, 0);

  transition-duration: 1s;

  transition-delay: 0.5s;
}

.dc-home-about {
  position: relative;
}

.dc-home-about p {
  font-display: optional;
}

.dc-home-about-graphics {
  position: absolute;

  right: -650px;

  bottom: -325px;

  width: 1300px;

  height: 650px;

  background: url(../images/chevaal-icon-colorful.svg) center no-repeat;
}

.dc-home-about h2 {
  margin-bottom: 50px;

  perspective: 600px;

  -webkit-perspective: 600px;
}

.dc-home-about h5 {
  margin-left: 25%;

  margin-bottom: 50px;

  margin-left: 10%;
}

.dc-home-about p {
  margin-left: 25%;

  margin-left: 10%;
}

.dc-home-about a span {
  font-size: 24px;

  font-weight: 600;

  color: var(--nav-blue);

  padding-right: 30px;

  background: url(../images/link-arrow.svg) right center no-repeat;
}

.dc-home-process {
  position: relative;

  background: var(--gray) url(../images/dots.png) center center repeat;
}

.dc-home-process-graphics {
  position: absolute;

  right: -650px;

  top: -325px;

  width: 1300px;

  height: 650px;

  background: url(../images/chevaal-icon-colorful.svg) center no-repeat;
  display: none;
}

.dc-home-process-graphics2 {
  position: absolute;

  left: -300px;

  top: -150px;

  width: 600px;

  height: 500px;

  background: url(../images/processes-graphics.svg) center no-repeat;
}

.process-step {
  margin-bottom: 100px;
}

.process-step:last-child {
  margin-bottom: 0px;
}

.process-step-reverse {
  text-align: right;
}

.dc-home-process {
  color: var(--black);
}

.dc-home-process a {
  color: var(--black);
}

.dc-home-process h4 {
  margin-bottom: 100px;
}

.dc-home-process h3 {
  margin-bottom: 50px;

  perspective: 600px;

  -webkit-perspective: 600px;
}

.dc-home-process h3 span {
  display: block;

  opacity: 0;

  transform: translateY(100%) rotateX(-80deg);

  transform-origin: center top;

  transform-style: preserve-3d;

  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dc-home-process h3 span:first-child {
  transition-delay: 0.3s;
}

.dc-home-process h3 span:nth-child(2) {
  transition-delay: 0.4s;
}

.dc-home-process h3.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.dc-home-process h6 {
  margin-left: 25%;

  padding: 0 10%;

  margin-bottom: 50px;
}

.dc-home-process .process-step:last-child h6 {
  margin-left: 10%;

  margin-right: 15%;

  padding: 0 10%;

  margin-bottom: 50px;
}

.dc-home-process .process-step-reverse h6 {
  padding-right: 0;
}

.dc-home-process p {
  margin-left: 25%;

  padding: 0 10%;
}

.dc-home-process .process-step:last-child p {
  margin-left: 10%;

  margin-right: 15%;

  padding: 0 10%;

  margin-bottom: 50px;
}

.dc-home-process .process-step-reverse p {
  padding-right: 0;
}

.dc-home-process a span {
  font-size: 24px;

  font-weight: 600;

  padding-right: 30px;

  background: url(../images/link-arrow.svg) right center no-repeat;
}

.dc-home-services {
  position: relative;
}

.dc-home-services h2 {
  /*color: #d64c33;*/
  position: relative;
}

.dc-home-services h2 i {
  /*position:absolute; left:0;*/
  margin-right: 10px;
}

.dc-home-services h2 span:nth-child(2) {
  margin-left: 45px;
}

.dc-home-services-graphics {
  position: absolute;

  left: -650px;

  top: 0;

  width: 1300px;

  height: 650px;

  background: url(../images/chevaal-icon-colorful.png) center no-repeat;
}

.dc-home-services-graphics2 {
  position: absolute;

  right: -250px;

  top: -150px;

  width: 700px;

  height: 500px;

  background: url(../images/services-graphics.svg) center no-repeat;
}

.dc-home-services h4 {
  margin-left: 25%;

  /* margin-bottom: 100px; */
}

.dc-home-services h2 {
  margin-bottom: 25px;

  perspective: 600px;

  -webkit-perspective: 600px;
}

.dc-home-services h2 span {
  display: block;

  opacity: 0;

  transform: translateY(100%) rotateX(-80deg);

  transform-origin: center top;

  transform-style: preserve-3d;

  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dc-home-services h2 span:first-child {
  transition-delay: 0.1s;
}

.dc-home-services h2 span:nth-child(2) {
  transition-delay: 0.2s;
}

.dc-home-services h2.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.dc-home-services h5 {
  max-width: 75%;
}

.service {
  margin-bottom: 100px;
}

.service:last-child {
  margin-bottom: 0px;
}

.service-reverse {
  text-align: right;
}

.dc-home-services .service-reverse h5 {
  margin-left: 25%;
}

.dc-home-projects {
  position: relative;
}

.dc-home-projects-graphics {
  position: absolute;

  right: -650px;

  top: 35%;

  width: 1300px;

  height: 650px;

  background: url(../images/chevaal-icon-colorful.svg) center no-repeat;
  display: none;
}

.dc-home-projects h2 {
  margin-bottom: 100px;

  perspective: 600px;

  -webkit-perspective: 600px;
}

.dc-home-projects h2 span {
  display: block;

  opacity: 0;

  transform: translateY(100%) rotateX(-80deg);

  transform-origin: center top;

  transform-style: preserve-3d;

  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dc-home-projects h2 span:first-child {
  transition-delay: 0.1s;
}

.dc-home-projects h2 span:nth-child(2) {
  transition-delay: 0.2s;
}

.dc-home-projects h2 span:nth-child(3) {
  transition-delay: 0.3s;
}

.dc-home-projects h2.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.all-projects {
  display: inline-block;

  width: 100%;
}

.project {
  display: inline-block;

  width: 55%;

  margin-top: 100px;

  margin-bottom: 100px;
  position: relative;
}

.hover_project_section {
  position: absolute;

  /*top: 20px;*/

  left: 1px;

  right: 1px;

  top: 1px;

  background: var(--light-white);

  text-align: center;

  padding: 20px 20px;
  opacity: 1;
  display: flex;

  align-items: center;

  height: 50%;

  -webkit-transition: all 0.2s ease-in;

  -moz-transition: all 0.2s ease-in;

  -o-transition: all 0.2s ease-in;

  transition: all 0.2s ease-in;

  background: linear-gradient(
    0deg,
    rgba(245, 245, 245, 0) 0%,
    rgba(245, 245, 245, 1) 41%,
    rgba(245, 245, 245, 1) 100%
  );
}

.hover_proto_dd {
  opacity: 0;
  height: 0;
  overflow: hidden;
  position: unset;
}

.hover_project_section > div {
  display: inline-block;
  width: 100%;
}

.project:hover .hover_project_section,
.project_cl_r:hover .hover_project_section {
  height: auto !important;
  background: var(--light-white);
  bottom: 1px;
}

.project:hover .hover_proto_dd,
.project_cl_r:hover .hover_proto_dd,
.dc_portfolio-item:hover .hover_proto_dd {
  height: auto;
  opacity: 1;
}

.all-projects.row {
  display: flex;
}

.all-projects.row .project {
  width: 100%;
  margin-bottom: 50px;
}

.project-image {
  transform-style: preserve-3d;
}

.project img {
  /*margin-bottom:25px;*/
}

.project h3 {
  margin-bottom: 15px;

  perspective: 600px;

  -webkit-perspective: 600px;
  font-size: 32px;

  line-height: 36px;
}

.project h3 span {
  display: block;

  opacity: 0;

  transform: translateY(100%) rotateX(-80deg);

  transform-origin: center top;

  transform-style: preserve-3d;

  transition: opacity 0s cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 0s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.project h3 span:first-child {
  transition-delay: 0.1s;
}

.project h3 span:nth-child(2) {
  transition-delay: 0.2s;
}

.project h3 span:nth-child(3) {
  transition-delay: 0.3s;
}

.project h3.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.project h5 {
  margin-left: 0%;
  font-size: 20px;

  line-height: 30px;
}

.project-reverse {
  margin-left: 45%;
}

.dc-home-contact {
  padding: 40px 0;

  position: relative;

  background: var(--white);

  color: var(--black);
}

.dc-home-contact-graphics {
  position: absolute;

  left: -650px;

  bottom: 20%;

  width: 1300px;

  height: 650px;

  background: url(../images/chevaal-icon-graylines.svg) center no-repeat;
}

.dc-home-contact h2 {
  display: flex;

  justify-content: center;

  align-items: center;

  width: 100vw;

  margin-bottom: 50px;

  position: relative;

  white-space: nowrap;
}

.marquee {
  width: 100vw;

  overflow: hidden;

  color: var(--red);

  color: #eed5d5;
}

.contact-block {
  margin-left: 25%;
}

.contact-block h3 {
  margin-bottom: 15px;

  perspective: 600px;

  -webkit-perspective: 600px;
}

.contact-block h3 span {
  display: block;

  /*opacity:0;

	transform:translateY(100%) rotateX(-80deg);

	transform-origin:center top;

	transform-style:preserve-3d;

	transition:opacity 0s cubic-bezier(.215,.61,.355,1),transform 0s cubic-bezier(.215,.61,.355,1)*/
}

.contact-block h3 span:first-child {
  transition-delay: 0.1s;
}

.contact-block h3.is-inview span {
  opacity: 1;

  transform: none;

  transition-duration: 0.8s;
}

.contact-block h4 {
  margin-bottom: 10px;
}

.contact-block ul {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;
}

.contact-block ul li {
  width: calc(50% - 25px);

  margin-bottom: 15px;
}

.contact-block ul li:last-child {
  margin-bottom: 0;
}

.contact-block ul li.full {
  width: 100%;
}

.contact-block ul li label {
  display: block;

  margin-bottom: 5px;
}

.contact-block ul li input[type="text"],
.contact-block ul li input[type="password"],
.contact-block ul li input[type="email"],
.contact-block ul li textarea {
  font-family: basic-sans, sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 18px;

  color: var(--nav-blue);

  line-height: 38px;

  padding: 5px 0px;

  width: 100%;

  border: 0;

  background: transparent;

  border-radius: 0px;

  -webkit-border-radius: 0px;

  -moz-border-radius: 0px;

  border-bottom: var(--black) 1px solid;
}

.contact-block ul li input:focus,
.contact-block ul li textarea:focus {
  border-bottom: var(--red) 2px solid;
}

.a_link_common,
.contact-block ul li input[type="submit"],
.contact-block ul li button {
  cursor: pointer;

  margin-top: 30px;

  border: 0;

  background: none;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;
}

.a_link_common span,
.contact-block ul li button span {
  font-family: basic-sans, sans-serif;

  font-weight: 400;

  font-style: normal;

  font-size: 20px;

  color: var(--white);

  line-height: 38px;

  padding: 7px 40px;

  background: var(--nav-blue);

  border-radius: 50px;

  -webkit-border-radius: 50px;

  -moz-border-radius: 50px;

  cursor: pointer;
}

footer {
  padding: 30px 0;
}

footer .container {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  flex-wrap: wrap;
}

.footer-block {
  width: 33.33%;
}

.footer-block:nth-child(3) {
  text-align: right;
}

.footer-block a {
  text-transform: none;
}

.footer-block p {
  margin-bottom: 0px;
}

.footer-block ul li {
  margin-bottom: 10px;
}

.footer-bottom {
  font-size: 14px;

  color: rgb(255, 255, 255, 0.5);

  margin-top: auto;

  text-align: center;
}

.hide {
  display: none;
}

.show {
  display: block;
}

@media screen and (max-width: 2000px) {
  h1 {
    font-size: 70px;

    line-height: 90px;
  }

  h2 {
    font-size: 46px;

    line-height: 65px;
  }

  h3 {
    font-size: 32px;

    line-height: 44px;
  }

  .dc-home-about-graphics,
  .dc-home-process-graphics {
    width: 1000px;

    height: 450px;

    right: -500px;

    background-size: auto 100%;
  }

  .dc-home-about-graphics {
    bottom: -225px;
  }

  .dc-home-process-graphics {
    top: -225px;
    top: -100px;
  }

  .dc-home-process-graphics2 {
    left: -50px;

    top: -100px;

    width: 500px;

    height: 415px;

    background-size: auto 100%;
  }

  .dc-home-services-graphics {
    width: 1000px;

    height: 450px;

    left: -650px;

    background-size: auto 100%;
  }

  .dc-home-services-graphics2 {
    right: -50px;

    top: -100px;

    width: 600px;

    height: 400px;

    background-size: auto 100%;
  }

  .dc-home-projects-graphics {
    width: 1000px;

    height: 450px;

    right: -500px;

    background-size: auto 100%;
  }

  .dc-home-contact-graphics {
    width: 1000px;

    height: 450px;

    left: -650px;

    background-size: auto 100%;

    z-index: 1;
  }

  .project {
    width: 45%;

    margin-top: 0;

    margin-bottom: 50px;
  }

  .project:last-child {
    margin-bottom: 0px;
  }

  .project-reverse {
    margin-left: 55%;
  }
}

@media screen and (max-width: 1366px) {
  .header_menu-cont {
    padding-top: 100px;
  }

  .header_menu-main li {
    margin: 0px !important;
  }

  .header_menu-main li a {
    font-size: 8vh !important;
  }

  .header_menu-main li a::after {
    font-size: 8vh !important;
  }

  .header_menu-second li {
    margin-bottom: 7vh !important;
  }

  .header_menu-second li a i {
    font-size: 25px !important;
  }

  .header_menu-second li a {
    font-size: 18px !important;
  }

  .header_menu-second li:last-child {
    margin-bottom: 0vh !important;
  }

  h1 {
    font-size: 80px;

    line-height: 100px;
  }

  h2 {
    font-size: 60px;

    line-height: 80px;
  }

  h3 {
    font-size: 40px;

    line-height: 50px;
  }

  h4 {
    font-size: 38px;

    line-height: 48px;
  }

  h5 {
    font-size: 22px;

    line-height: 28px;
  }

  .dc-home-banner {
    padding: 220px 0 80px 0;
  }

  .dc-home-about-graphics,
  .dc-home-process-graphics {
    width: 750px;

    height: 350px;

    right: -375px;

    background-size: auto 100%;
  }

  .dc-home-about-graphics {
    bottom: -175px;
  }

  .dc-home-process-graphics {
    top: -175px;
  }

  .dc-home-services-graphics,
  .dc-home-contact-graphics {
    width: 750px;

    height: 350px;

    left: -475px;
  }

  .dc-home-projects-graphics {
    width: 750px;

    height: 350px;

    right: -475px;
  }

  .container,
  .dc-home-banner .container {
    max-width: 1240px;

    padding: 0 100px;
  }

  .contact-block ul li input[type="submit"],
  .contact-block ul li button {
    margin-top: 10px;
  }

  .contact-block ul li button span {
    font-size: 20px;
    line-height: 32px;
  }

  .contact-block h4 {
    margin-bottom: 0;
    font-size: 24px;
    line-height: 30px;
  }
}

@media screen and (max-width: 1100px) {
  .dc-section {
    padding: 100px 0;
  }

  .dc-home-process h4 {
    margin-bottom: 50px;
  }

  .dc-home-process h3,
  .dc-home-process h6,
  .dc-home-process .process-step:last-child h6 {
    margin-bottom: 25px;
  }

  .dc-home-process .process-step:last-child h6 {
    margin-right: 0;
  }

  .project h5 {
    margin-left: 0;
  }

  .dc-home-contact h2 {
    margin-bottom: 50px;
  }

  .contact-block h4 {
    margin-bottom: 25px;
  }

  footer {
    padding: 50px 0;
  }

  .footer-bottom {
    padding-top: 25px;
  }
}

@media screen and (max-width: 1080px) {
  h1 {
    font-size: 70px;

    line-height: 85px;
  }

  h2 {
    font-size: 45px;

    line-height: 60px;
  }

  h3 {
    font-size: 40px;

    line-height: 55px;
  }

  h4 {
    font-size: 30px;

    line-height: 40px;
  }

  h5 {
    font-size: 24px;

    line-height: 34px;
  }

  h6 {
    font-size: 20px;

    line-height: 30px;
  }

  .container,
  .dc-home-banner .container {
    padding: 0 25px;
  }

  .header-logo img {
    height: 60px;
  }

  .dc-home-banner h1 span,
  .dc-home-about h2 span,
  .dc-home-projects h2 span,
  .dc-home-services h2 span {
    display: contents;
  }

  .dc-home-about h5,
  .dc-home-about p,
  .dc-home-process h6,
  .dc-home-process p,
  .dc-home-process .process-step-reverse h6,
  .dc-home-process
    .process-step-reverse
    p
    .dc-home-process
    .process-step:last-child
    h6,
  .dc-home-process .process-step:last-child p {
    margin-left: 0%;
  }

  .dc-home-about {
    padding-bottom: 50px;
  }

  .dc-home-about-graphics {
    width: 90vw;

    height: 45vw;

    right: 50%;

    bottom: -15vw;

    transform: translate(50%, 0) !important;
  }

  .dc-home-process {
    padding-bottom: 50vw;
  }

  .dc-home-process-graphics2 {
    width: 100vw;

    height: 50vw;

    right: 50%;

    left: inherit;

    top: inherit;

    bottom: 0;

    transform: translate(50%, 0) !important;
  }

  .dc-home-process h4 {
    margin-right: 10%;
  }

  .dc-home-process .process-step-reverse h6,
  .dc-home-process .process-step-reverse p {
    margin-right: 10%;
  }

  .dc-home-process .process-step:last-child p {
    margin-bottom: 0;
  }

  .process-step {
    margin-bottom: 50px;
  }

  .dc-home-services {
    padding-bottom: 50vw;
  }

  .dc-home-services-graphics2 {
    width: 100vw;

    height: 50vw;

    right: 50%;

    top: inherit;

    bottom: 0;

    transform: translate(50%, 0) !important;
  }

  .service {
    margin-bottom: 50px;
  }

  .dc-home-services h4 {
    margin-left: 0;

    margin-bottom: 50px;
  }

  .dc-home-projects {
    padding-bottom: 35vw;
  }

  .dc-home-projects-graphics {
    width: 90vw;

    height: 45vw;

    right: 50%;

    top: inherit;

    bottom: -15vw;

    transform: translate(50%, 0) !important;
  }

  .project {
    width: 60%;
  }

  .project-reverse {
    margin-left: 40%;
  }

  .dc-home-contact {
    padding-bottom: 35vw;
  }

  .dc-home-contact-graphics {
    width: 90vw;

    height: 45vw;

    right: 50%;

    left: inherit;

    top: inherit;

    bottom: -15vw;

    transform: translate(50%, 0) !important;
  }

  .contact-block {
    margin-left: 0;
  }

  .tablet-hide {
    display: none;
  }

  .tablet-show {
    display: block;
  }

  .footer-block:nth-child(2) {
    text-align: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    font-size: 16px;

    line-height: 22px;

    overflow-x: scroll;
  }

  .has-scroll-smooth body {
    overflow: scroll;
  }

  .dc-home-banner {
    height: 60vh;
  }

  header {
    padding: 15px 30px;

    flex-direction: row-reverse;

    background: var(--nav-blue);
  }

  .header_menu-top {
    padding: 0px;
  }

  .header-logo img {
    height: 50px !important;
  }

  .dc-home-banner {
    padding: 86px 0 0px 0;
  }

  .dc-home-process h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .project-image > span::before {
    content: none !important;
  }

  .project h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .contact-block h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .contact-block h4 {
    font-size: 24px;
    line-height: 36px;
  }
}

@media screen and (max-width: 767px) {
  .dc-home-process h4 {
    margin-right: 0;
  }

  .dc-home-process h6,
  .dc-home-process p,
  .dc-home-process .process-step:last-child h6,
  .dc-home-process .process-step:last-child p {
    padding: 0;

    margin-left: 0;
  }

  .process-step-reverse {
    text-align: left;
  }

  .dc-home-process .process-step-reverse h6,
  .dc-home-process .process-step-reverse p {
    margin-right: 0;
  }

  .service-reverse {
    text-align: left;
  }

  .dc-home-services h5,
  .dc-home-services .service-reverse h5 {
    max-width: 100%;

    margin-left: 0;
  }

  .dc-home-projects h2 {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 636px) {
  body {
    font-size: 16px;

    line-height: 22px;

    overflow-x: scroll;
  }

  .has-scroll-smooth body {
    overflow: scroll;
  }

  .dc-home-banner {
    height: 70vh;
  }

  h1 {
    font-size: 50px;

    line-height: 60px;

    letter-spacing: 3px;
  }

  h2 {
    font-size: 38px;

    line-height: 48px;

    font-size: 32px;

    line-height: 42px;

    letter-spacing: 3px;
  }

  h3 {
    font-size: 32px;

    line-height: 42px;

    letter-spacing: 3px;
  }

  h4 {
    font-size: 26px;

    line-height: 36px;
  }

  h5 {
    font-size: 22px;

    line-height: 32px;
  }

  h6 {
    font-size: 20px;

    line-height: 30px;
  }

  h1 br,
  h2 br,
  h3 br,
  h4 br,
  h5 br,
  h6 br {
    display: none;
  }

  .dc-home-banner .container {
    padding: 0 25px;
  }

  .dc-section {
    padding: 50px 0;
  }

  header {
    padding: 15px 30px;

    flex-direction: row-reverse;

    background: var(--light-gray);
  }

  .header_menu-top {
    padding: 0px;
    flex-direction: row-reverse;
  }

  .header-logo img {
    height: 50px !important;
  }

  .header-nav,
  .header-logo,
  .header-contact {
    width: auto;
  }

  .header-contact {
    display: none;
  }

  .dc-home-banner {
    padding: 86px 0 0px 0;
  }

  .dc-home-banner h1 {
    margin-bottom: 25px;
  }

  .dc-home-banner h6 {
    text-align: left;
  }

  .dc-home-about {
    padding-bottom: 20px;
  }

  .dc-home-about h2 {
    margin-bottom: 25px;
  }

  .dc-home-about a span {
    font-size: 22px;
  }

  .dc-home-process {
    padding-bottom: 50vw;
  }

  .dc-home-process a span {
    font-size: 22px;
  }

  .dc-home-services {
    padding-bottom: 50vw;
  }

  .dc-home-projects {
    padding-bottom: 35vw;
  }

  .project {
    width: 100%;
  }

  .project-reverse {
    margin-left: 0;
  }

  .project h3 {
    margin-bottom: 5px;
  }

  .dc-home-contact {
    padding-bottom: 35vw;
  }

  .dc-home-services h2 {
    position: relative;
    padding-left: 23px;
  }

  .dc-home-services h2 i {
    margin-right: 0;
    position: absolute;

    top: 5px;

    left: 0;
  }

  /*.dc-home-services h2 span:nth-child(2):before{content:''; width:30px; display:inline-block; height:15px;}*/

  .contact-block ul li {
    width: 100%;

    margin-bottom: 15px;
  }

  .contact-block ul li input[type="text"],
  .contact-block ul li input[type="password"],
  .contact-block ul li input[type="email"],
  .contact-block ul li textarea {
    font-size: 18px;
  }

  .contact-block ul li input[type="submit"],
  .contact-block ul li button {
    font-size: 18px;

    margin-top: 0;
  }

  .contact-block ul li button span {
    font-size: 18px;
  }

  .footer-block,
  .footer-block:nth-child(3) {
    width: 100%;

    text-align: center;

    margin-bottom: 20px;
  }

  .footer-block p {
    margin-bottom: 10px;
  }

  .footer-bottom {
    margin-top: 0;

    padding-top: 15px;

    text-align: center;
  }

  .dc-home-process h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .project-image > span::before {
    content: none !important;
  }

  .project h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .contact-block h3 span {
    opacity: 1;
    transform: none;
    transition-duration: 0.8s;
  }

  .contact-block h4 {
    font-size: 24px;
    line-height: 36px;
  }
}

#particles-js {
  position: absolute;

  height: 100%;

  width: 100%;

  top: 0px;
}

.dc-home-contact .container {
  position: relative;
  z-index: 1;
}

.view_project_link {
  text-align: center;
  margin-top: 20px;
}

.view_project_link a span {
  font-size: 24px;
  font-weight: 600;
  padding-right: 30px;
  background: url(../images/link-arrow-white.svg) right center no-repeat;
}

.dc-section_about.dc-section {
  /*padding-top:0*/
}

.client-logo {
  margin-bottom: 25px;

  border: 1px solid #efefef;

  text-align: center;
  background: #fff;
}

.backtotop {
  position: fixed;
  bottom: 20px;
  right: 110px;
  z-index: 1;
  opacity: 0;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  right: 95px;
}

.backtotop.is-active-arrow {
  opacity: 1;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
}

.backtotop a {
  display: block;
  width: 50px;
  height: 50px;
  background: var(--nav-blue);
  font-size: 0px;
  text-align: center;
  color: #fff;
  padding: 22px 0 12px 0;
  border-radius: 5px;
  background: url(../images/link-arrow.svg) center center no-repeat;
  transform: rotate(-48deg);
}

.backtotop a i {
  font-size: 16px;
  position: absolute;
  top: 8px;
  left: 19px;
  font-size: 0px;
}

.dc-404-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 250px 0px 150px 0;
  position: relative;
}

.dc-404-banner canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  opacity: 0.7;
}

.dc-nav-blue-section canvas > * {
  color: var(--nav-blue);
}

.dc-404-banner .content-area {
  position: relative;
  z-index: 11;
  max-width: 589px;
  text-align: center;
  padding: 0 30px;
}

.dc-404-banner .content-area img {
  width: 100%;
}

.dc-404-banner .content-area h1 {
  text-align: center;
  font-size: 70px;
  line-height: 70px;
  letter-spacing: 1px;
  margin: 30px 0;
}

.dc-404-banner .content-area a {
  cursor: pointer;
  margin-top: 0px;
  border: 0;
  background: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.dc-404-banner .content-area a span {
  font-family: basic-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  color: var(--white);
  line-height: 38px;
  padding: 10px 50px;
  background: var(--red);
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  cursor: pointer;
}

@media screen and (max-width: 636px) {
  .dc-404-banner .content-area h1 {
    font-size: 40px;
    line-height: 50px;
  }

  .dc-404-banner .content-area a span {
    padding: 10px 30px;
    font-size: 15px;
  }
}