:root {
    --paragraphs: #535c62;
    --heading: #101b22;
    --accent: #fdc23e;
    --background: #f0f6f8;
    --white: white;
    --paragraphs-dark: #95a3b2;
    --info-text: #778697;
    --border: #101b2233;
    --blue: #0082f3;
  }

  .section-space {
    padding: 110px 50px;

  }

  .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: var(--paragraphs);
    letter-spacing: .13px;
    flex-direction: column;
    align-items: center;
    padding: 14px;
    font-family: Barlow, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 170%;
    display: flex;
  }

  h1 {
    color: var(--heading);
    letter-spacing: -1.4px;
    margin-top: 0;
    margin-bottom: 28px;
    font-size: 70px;
    font-weight: 500;
    line-height: 100%;
  }

  h2 {
    color: var(--heading);
    letter-spacing: -1.4px;
    margin-top: 0;
    margin-bottom: 26px;
    font-size: 58px;
    font-weight: 500;
    line-height: 107%;
  }

  h3 {
    color: var(--heading);
    letter-spacing: -1.4px;
    margin-top: 0;
    margin-bottom: 22px;
    font-size: 46px;
    font-weight: 500;
    line-height: 110%;
  }

  h4 {
    color: var(--heading);
    letter-spacing: -1.2px;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 36px;
    font-weight: 500;
    line-height: 115%;
  }

  h5 {
    color: var(--heading);
    letter-spacing: -.8px;
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 26px;
    font-weight: 500;
    line-height: 120%;
  }

  h6 {
    color: var(--heading);
    letter-spacing: -.2px;
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
  }

  p {
    margin-bottom: 28px;
  }

  a {
    color: var(--heading);
    text-decoration: underline;
  }

  ul,
  ol {
    margin-top: 0;
    margin-bottom: 28px;
    padding-left: 34px;
  }

  li {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 7px;
  }

  strong {
    color: var(--heading);
    font-weight: 500;
  }



  h1 {
    /* text-align: center; */
  }

  .design-process-ul {
    --col-gap: 2rem;
    --row-gap: 2rem;
    --line-w: 0.25rem;
    display: grid;
    grid-template-columns: var(--line-w) 1fr;
    grid-auto-columns: max-content;
    column-gap: var(--col-gap);
    list-style: none;
    width: min(60rem, 90%);
    margin-inline: auto;
  }

  /* line */
  .design-process-ul::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 20;
    background: rgb(225, 225, 225);
    border-radius: calc(var(--line-w) / 2);
  }

  /* columns*/

  /* row gaps */
  .design-process-ul li:not(:last-child) {
    margin-bottom: var(--row-gap);
  }

  /* card */
  .design-process-ul li {
    grid-column: 2;
    --inlineP: 1.5rem;
    margin-inline: var(--inlineP);
    grid-row: span 2;
    display: grid;
    grid-template-rows: min-content min-content min-content;
  }

  /* date */
  .design-process-ul li .date {
    --dateH: 3rem;
    height: var(--dateH);
    margin-inline: calc(var(--inlineP) * -1);

    text-align: center;
    background-color: var(--accent);

    color: var(--heading);
    font-size: 1.25rem;

    display: grid;
    place-content: center;
    position: relative;

  }





  /* title descr */
  .design-process-ul li .title,
  .design-process-ul li .descr {
    background: var(--bgColor);
    position: relative;
    padding-inline: 1.5rem;
  }

  .design-process-ul li .title {
    overflow: hidden;
    padding-block-start: 1.5rem;
    padding-block-end: 1rem;
    font-weight: 500;
  }

  .design-process-ul li .descr {
    padding-block-end: 1.5rem;
  }

  /* shadows */
  .design-process-ul li .title::before,
  .design-process-ul li .descr::before {
    content: "";
    position: absolute;
    width: 90%;
    height: 0.5rem;
    left: 50%;
    border-radius: 50%;
    filter: blur(4px);
    transform: translate(-50%, 50%);
  }

  .design-process- ul li .title::before {
    bottom: calc(100% + 0.125rem);
  }

  .design-process-ul li .descr::before {
    z-index: -1;
    bottom: 0.25rem;
  }

  @media (min-width: 40rem) {
    .design-process-ul {
      grid-template-columns: 1fr var(--line-w) 1fr;
    }

    .design-process-ul::before {
      grid-column: 2;
    }

    .design-process-ul li:nth-child(odd) {
      grid-column: 1;
    }

    .design-process-ul li:nth-child(even) {
      grid-column: 3;
    }

    /* start second card */
    .design-process-ul li:nth-child(2) {
      grid-row: 2/4;
    }

    .design-process-ul li:nth-child(odd) .date::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%);
      left: 0;
    }

    .design-process-ul li:nth-child(odd) .date::after {
      transform: translate(-50%, -50%);
      left: calc(100% + var(--col-gap) + var(--line-w) / 2);
    }

    .design-process-ul li:nth-child(odd) .date {
      /* border-radius: 0 calc(var(--dateH) / 2) calc(var(--dateH) / 2) 0; */
    }
  }

  .credits {
    margin-top: 1rem;
    text-align: right;
  }

  .credits a {
    color: var(--color);
  }


  em {
    font-style: italic;
  }

  blockquote {
    border-left: 1px solid var(--accent);
    margin-bottom: 28px;
    margin-left: 15px;
    padding: 2px 24px;
    font-size: 20px;
    font-style: italic;
    line-height: 165%;
  }

  figure {
    margin-top: 36px;
    margin-bottom: 36px;
  }

  figcaption {
    text-align: center;
    letter-spacing: .08px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 160%;
  }

  .link-text {
    box-shadow: inset 0 -1px 0 0 var(--heading);
    color: var(--heading);
    text-decoration: none;
    transition: box-shadow .25s cubic-bezier(.215, .61, .355, 1);
    display: inline-block;
  }

  .link-text:hover {
    box-shadow: inset 0 -30px 0 0 var(--accent);
  }

  .rich-text-block a {
    box-shadow: inset 0 -1px 0 0 var(--heading);
    color: var(--heading);
    text-decoration: none;
    transition: box-shadow .25s cubic-bezier(.215, .61, .355, 1);
    display: inline-block;
  }

  .rich-text-block a:hover {
    box-shadow: inset 0 -30px 0 0 var(--accent);
  }

  .section-hero-a {
    z-index: 10;
    background-color: var(--background);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 85vh;
    margin-bottom: 14px;
    display: flex;
    position: relative;
  }

  .navbar {
    background-color: var(--white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    position: fixed;
    top: 28px;
    left: 28px;
    right: 28px;
    box-shadow: 0 10px 70px #101b2214;
  }

  .nav-block {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .nav {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .logo {
    height: 40px;
  }

  .brand {
    justify-content: center;
    align-items: center;
    margin-left: 18px;
    margin-right: 18px;
    padding: 10px;
    display: flex;
  }

  .nav-menu {
    align-items: center;
    display: flex;
  }

  .nav-link {
    opacity: 1;
    color: var(--heading);
    text-align: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 27px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
    transition: opacity .25s cubic-bezier(.215, .61, .355, 1);
    display: flex;
  }

  .nav-link:hover {
    opacity: .65;
  }

  .nav-link.w--current {
    color: var(--blue) !important;
  }

  .nav-button {
    background-color: var(--accent);
    justify-content: center;
    align-items: center;
    margin-left: 15px;
    padding: 27px 35px;
    text-decoration: none;
    display: flex;
  }

  .text-button {
    color: var(--heading);
    text-align: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
  }

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

  .icon-button {
    object-fit: contain;
    width: 4px;
    max-width: none;
    height: 8px;
    margin-left: 8px;
  }

  .dropdown-toggle {
    justify-content: center;
    align-items: center;
    padding: 27px 20px;
    display: flex;
  }

  .icon-dropdown {
    width: 8px;
    height: 4px;
    margin-left: 4px;
    display: block;
  }

  .dropdown-link {
    opacity: 1;
    color: var(--white);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
    transition: opacity .25s cubic-bezier(.215, .61, .355, 1);
  }

  .dropdown-link:hover {
    opacity: .65;
  }

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

  .dropdown-list {
    padding-bottom: 0;
  }

  .dropdown-list.w--open {
    background-color: var(--heading);
    overflow: hidden;
  }

  .dropdown-list-block {
    padding: 14px;
  }

  .hero-a {
    z-index: 20;
    width: 100%;
    max-width: 1200px;
  }

  .background-video {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0%;
  }

  .heading-hero {
    color: var(--white);
    max-width: 730px;
  }

  .heading-hero.size-vw {
    font-size: 3.5vw;
  }

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

  .grid-hero-services {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 80px;
  }

  .text-hero-service {
    color: var(--accent);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
  }

  .link-hero-service {
    width: 100%;
    text-decoration: none;
    position: relative;
  }

  .description {
    z-index: 50;
    background-color: var(--accent);
    width: 100%;
    position: absolute;
    overflow: hidden;
  }

  .line-block {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3px;
    display: flex;
    position: relative;
  }

  .line-1px {
    background-color: var(--white);
    width: 100%;
    height: 1px;
  }

  .line-1px.dark {
    background-color: var(--heading);
  }

  .line-1px.opacity {
    background-color: var(--heading);
    opacity: .2;
  }

  .line-full {
    background-color: var(--accent);
    width: 100%;
    position: absolute;
    inset: 0%;
  }

  .line-full.dark {
    background-color: var(--heading);
  }

  .paragraph-description {
    margin-bottom: 0;
  }

  .description-block {
    width: 100%;
    padding: 20px 32px 25px;
  }

  .hero-service {
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    display: flex;
  }

  .icon-arrow-a {
    width: 10px;
    max-width: none;
    height: 10px;
  }

  .icon-arrow {
    flex-direction: column;
    flex: none;
    justify-content: center;
    align-items: center;
    width: 10px;
    height: 10px;
    margin-left: 12px;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .icon-arrow-b {
    width: 10px;
    max-width: none;
    height: 10px;
    position: absolute;
    transform: translate(-120%, 120%);
  }

  .section {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    /* padding: 110px 50px; */
    display: flex;
  }

  .section.background {
    background-color: var(--background);
  }

  .section.padding {
    padding-top: 60px;
    padding-bottom: 70px;
  }

  .content {
    width: 100%;
    max-width: 1200px;
  }

  .content.slim {
    max-width: 770px;
  }

  .grid-2-columns {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
    width: 100%;
  }

  .grid-stats {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
  }

  .block-right {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 45px 3% 45px 10%;
    display: flex;
  }

  .button {
    background-color: var(--accent);
    justify-content: center;
    align-items: center;
    padding: 23px 35px;
    text-decoration: none;
    display: flex;
  }

  .button.dark {
    background-color: var(--heading);
  }

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

  .paragraph {
    max-width: 500px;
    margin-bottom: 36px;
  }

  .paragraph.white {
    color: var(--paragraphs-dark);
  }

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

  .subtitle {
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 8px;
    display: flex;
  }

  .line-subtitle {
    background-color: var(--heading);
    width: 27px;
    height: 1px;
  }

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

  .line-subtitle.center {
    width: 14px;
  }

  .text-subtitle {
    color: var(--heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-left: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
  }

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

  .text-subtitle.center {
    margin-right: 12px;
  }

  .heading {
    max-width: 700px;
  }

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

  .stats {
    background-color: var(--white);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 10px;
    display: flex;
  }

  .stats.full {
    background-color: var(--background);
    padding: 18px;
  }

  .heading-stats {
    max-width: 220px;
    margin-bottom: 0;
  }

  .numbers-stats {
    color: var(--heading);
    letter-spacing: -1.4px;
    margin-bottom: 12px;
    font-size: 58px;
    font-weight: 500;
    line-height: 100%;
  }

  .numbers-stats.full {
    font-size: 70px;
  }

  .icon-stats-block {
    background-color: var(--background);
    margin-bottom: auto;
    margin-left: auto;
    padding: 14px;
  }

  .icon-stats-block.white {
    background-color: var(--white);
  }

  .stats-block {
    margin: 18px;
  }

  .icon {
    object-fit: contain;
    width: 24px;
    height: 24px;
    display: block;
  }

  .block-left {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 45px 10% 45px 0%;
    display: flex;
  }

  .image-block {
    width: 100%;
    position: relative;
  }

  .image {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .image-absolute {
    object-fit: cover;
    width: 54%;
    height: 60%;
    position: absolute;
    inset: auto -3% -3% auto;
    box-shadow: 0 35px 120px #101b2240;
  }

  .section-full {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    display: flex;
  }

  .grid-full {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: var(--heading);
    grid-template-rows: auto;
    width: 100%;
  }

  .block-full {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 160px 17%;
    display: flex;
  }

  .block {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 550px;
    display: flex;
  }

  .image-bg-services {
    background-image: linear-gradient(270deg, var(--heading), transparent 30%), url('../images/img_3.jpg');
    background-position: 0 0, 50%;
    background-size: auto, cover;
    width: 100%;
    min-height: 670px;
  }

  .grid-3-columns-full {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }

  .image-gallery {
    object-fit: cover;
    width: 100%;
    height: 20vw;
  }

  .block-heading-text {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  .grid-4-columns {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
  }

  .block-heading {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    display: flex;
  }

  .block-heading.top {
    margin-bottom: 40px;
  }

  .block-heading-button {
    margin-bottom: 30px;
    margin-left: 25px;
  }

  .expertise {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .expertise.full {
    background-color: var(--background);
    padding: 13% 15%;
  }

  .heading-expertise {
    max-width: 210px;
  }

  .icon-expertise-block {
    background-color: var(--background);
    margin-bottom: 22px;
    padding: 14px;
  }

  .icon-expertise-block.white {
    background-color: var(--white);
  }

  .paragraph-expertise {
    max-width: 270px;
    margin-bottom: 0;
  }

  .image-bg-testimonials {
    background-image: linear-gradient(270deg, var(--heading), transparent 30%), url('../images/img_4.jpg');
    background-position: 0 0, 50%;
    background-size: auto, cover;
    min-height: 670px;
  }

  .paragraph-testimonials {
    color: var(--paragraphs-dark);
    max-width: 500px;
    margin-bottom: 36px;
    font-size: 20px;
    font-style: italic;
    line-height: 170%;
  }

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

  .logo-testimonials {
    object-fit: contain;
    height: 20px;
    margin-right: 28px;
  }

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

  .name-testimonials {
    color: var(--white);
    margin-bottom: 3px;
  }

  .position-testimonials {
    color: var(--info-text);
    font-size: 14px;
    line-height: 130%;
  }

  .collection-list-project {
    grid-column-gap: 30px;
    grid-row-gap: 55px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .link-image-project {
    width: 100%;
    margin-bottom: 25px;
    transition: opacity .35s cubic-bezier(.215, .61, .355, 1);
    display: block;
  }

  .link-image-project:hover {
    opacity: .8;
  }

  .image-project {
    object-fit: cover;
    width: 100%;
    height: 450px;
  }

  .image-project.large {
    height: 660px;
  }

  .link-block-project {
    width: 100%;
    text-decoration: none;
    display: block;
  }

  .block-project {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    display: flex;
  }

  .heading-project {
    max-width: 310px;
    margin-bottom: -5px;
  }

  .heading-project.large {
    max-width: 480px;
  }

  .text-project-type {
    color: var(--info-text);
    letter-spacing: 0;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 130%;
  }

  .empty-state {
    background-color: var(--background);
    padding: 14px 20px;
  }

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

  .text-message {
    color: var(--heading);
    font-size: 16px;
    line-height: 130%;
  }

  .collection-list-blog {
    grid-column-gap: 30px;
    grid-row-gap: 55px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .text-blog-date {
    color: var(--info-text);
    letter-spacing: 0;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 130%;
  }

  .link-block-blog {
    width: 100%;
    text-decoration: none;
    display: block;
  }

  .block-blog {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    display: flex;
  }

  .heading-blog {
    max-width: 310px;
    margin-bottom: -5px;
  }

  .heading-blog.large {
    max-width: 450px;
  }

  .paragraph-summary {
    max-width: 350px;
    margin-top: 10px;
    margin-bottom: 0;
  }

  .paragraph-summary.large {
    max-width: 500px;
  }

  .grid-2-columns-full {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    width: 100%;
  }


  .image-bg-banner {
    background-image: url('../images/company-imgs/office\ 1.jpeg');
    background-position: 50%;
    background-size: cover;
  }

  .block-banner {
    background-color: var(--accent);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 80px 17%;
    display: flex;
  }

  .heading-banner {
    max-width: 700px;
    margin-bottom: 38px;
  }

  .section-footer {
    background-color: var(--heading);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto;
    padding: 110px 50px 82px;
    display: flex;
  }

  .grid-footer {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 2fr 1fr 1.5fr;
    width: 100%;
  }

  .footer-down-block {
    border-top: 1px solid #2e404b;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 60px;
    padding-top: 26px;
    display: flex;
  }

  .footer-down {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .block-footer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
  }

  .logo-footer {
    height: 120px;
    margin-bottom: 30px;
  }

  .paragraph-footer {
    color: var(--paragraphs-dark);
    max-width: 350px;
  }

  .heading-footer {
    color: var(--white);
    text-align: left;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 3px;
    margin-bottom: 32px;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
  }

  .link-footer {
    color: var(--paragraphs-dark);
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    text-decoration: none;
    transition: color .25s cubic-bezier(.215, .61, .355, 1);
  }

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

  .text-footer-down {
    color: var(--paragraphs-dark);
    font-size: 16px;
    line-height: 130%;
  }

  .link-footer-down {
    color: var(--white);
    text-decoration: none;
    transition: color .25s cubic-bezier(.215, .61, .355, 1);
  }

  .link-footer-down:hover {
    color: var(--paragraphs-dark);
  }

  .grid-social {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
  }

  .icon-social {
    width: 20px;
    max-width: none;
    height: 20px;
  }

  .link-social {
    transition: opacity .25s cubic-bezier(.215, .61, .355, 1);
  }

  .link-social:hover {
    opacity: .5;
  }

  .block-hero-a {
    z-index: 20;
    background-image: linear-gradient(#0000, #000c);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 140px 50px 50px;
    display: flex;
    position: relative;
  }

  .section-hero-b {
    z-index: 10;
    background-color: #0000;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    min-height: 85vh;
    margin-bottom: 14px;
    display: flex;
    position: relative;
  }

  .grid-hero-b {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }

  .link-hero-b {
    width: 100%;
    height: 100%;
    text-decoration: none;
  }

  .image-hero-b {
    z-index: 10;
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .hero-b {
    z-index: 20;
    background-image: linear-gradient(to top, #000c, #0000);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    width: 100%;
    padding: 180px 40px 40px;
    display: flex;
    position: relative;
  }

  .block-hero-service {
    width: 100%;
    margin-top: 15px;
  }

  .block-hero-b {
    background-color: var(--background);
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
  }

  .extra {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
  }

  .heading-extra {
    max-width: 920px;
    margin-bottom: 34px;
    line-height: 140%;
  }

  .block-accent {
    background-color: var(--accent);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 160px 17%;
    display: flex;
  }

  .image-bg-accent {
    background-image: url('../images/img_5.jpg');
    background-position: 50%;
    background-size: cover;
    min-height: 670px;
  }

  .link-image-services {
    width: 100%;
    margin-bottom: 22px;
    transition: opacity .35s cubic-bezier(.215, .61, .355, 1);
    display: block;
  }

  .link-image-services:hover {
    opacity: .8;
  }

  .image-services {
    object-fit: cover;
    width: 100%;
    height: 350px;
  }

  .link-block-services {
    width: 100%;
    text-decoration: none;
    display: block;
  }

  .block-services {
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
    display: flex;
  }

  .heading-services {
    max-width: 310px;
    margin-bottom: -5px;
  }

  .section-hero-c {
    z-index: 10;
    background-color: #0000;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    min-height: 85vh;
    margin-bottom: 14px;
    display: flex;
    position: relative;
  }

  .grid-hero-c {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.3fr;
    width: 100%;
  }

  .block-hero-c {
    background-color: var(--background);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 160px 17% 70px;
    display: flex;
  }

  .hero-c {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 650px;
    display: flex;
  }

  .grid-image-hero-c {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: 1fr .25fr 1.2fr;
    grid-template-columns: 1.4fr 1fr;
  }

  .image-bg-hero-c1 {
    background-image: url('../images/hero_c_1.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-hero-c2 {
    background-image: url('../images/hero_c_2.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-hero-c3 {
    background-image: url('../images/hero_c_3.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-hero-c4 {
    background-image: url('../images/hero_c_4.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .section-top {
    z-index: 10;
    background-color: var(--background);
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin-bottom: 14px;
    padding: 200px 50px 110px;
    display: flex;
    position: relative;
  }

  .grid-services {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
  }

  .services-page {
    background-color: var(--white);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 8% 8%;
    display: flex;
  }

  .text-service-page {
    color: var(--heading);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
  }

  .block-services-page {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    display: flex;
  }

  .text-services-page {
    width: 100%;
  }

  .collection-list-blog-page {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .link-image-blog {
    width: 100%;
    transition: opacity .35s cubic-bezier(.215, .61, .355, 1);
  }

  .link-image-blog:hover {
    opacity: .8;
  }

  .image-blog {
    object-fit: cover;
    width: 100%;
    height: 360px;
  }

  .block-blog-page {
    background-color: var(--white);
    padding: 9% 11% 11%;
  }

  .collection-list-project-page {
    grid-column-gap: 30px;
    grid-row-gap: 80px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .text-field {
    border-style: none none solid;
    border-width: 1px;
    border-color: black black var(--white);
    background-color: var(--white);
    color: var(--heading);
    height: 52px;
    margin-bottom: 0;
    padding: 12px 20px;
    font-size: 18px;
    line-height: 130%;
    transition: border-color .35s cubic-bezier(.215, .61, .355, 1);
  }

  .text-field:focus {
    border-bottom-color: var(--accent);
  }

  .text-field::placeholder {
    color: #101b2280;
  }

  .form {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .form-block {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .textarea {
    border-style: none none solid;
    border-width: 1px;
    border-color: black black var(--white);
    background-color: var(--white);
    color: var(--heading);
    min-width: 100%;
    max-width: 100%;
    min-height: 150px;
    max-height: 350px;
    margin-bottom: 14px;
    padding: 12px 20px;
    font-size: 18px;
    line-height: 130%;
    transition: border-color .35s cubic-bezier(.215, .61, .355, 1);
  }

  .textarea:focus {
    border-bottom-color: var(--accent);
  }

  .textarea::placeholder {
    color: #101b2280;
  }

  .submit-button {
    background-color: var(--heading);
    color: var(--white);
    text-align: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 23px 35px;
    font-size: 14px;
    font-weight: 600;
    line-height: 130%;
    transition: color .35s cubic-bezier(.215, .61, .355, 1), background-color .35s cubic-bezier(.215, .61, .355, 1);
  }

  .submit-button:hover {
    background-color: var(--accent);
    color: var(--heading);
  }

  .success-message {
    background-color: #95daaa;
    padding: 24px;
  }

  .error-message {
    text-align: center;
    background-color: #ffaeae;
    margin-top: 16px;
    padding: 22px;
  }

  .image-bg-map {
    background-image: url('../images/contact_map.jpg');
    background-position: 50%;
    background-size: cover;
    min-height: 670px;
  }

  .link-contact {
    width: 100%;
    text-decoration: none;
  }

  .contact {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    display: flex;
  }

  .text-contact {
    text-align: right;
    margin-left: auto;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
  }

  .icon-contact {
    width: 18px;
    max-width: none;
    height: 18px;
    margin-right: 8px;
  }

  .info-contact {
    align-items: center;
    margin-right: 20px;
    display: flex;
  }

  .grid-contacts {
    grid-column-gap: 0px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .section-top-img {
    z-index: 10;
    background-color: var(--background);
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 70vh;
    margin-bottom: 14px;
    display: flex;
    position: relative;
  }

  .block-top-img {
    z-index: 20;
    background-image: linear-gradient(#0000, #000c);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 140px 50px 50px;
    display: flex;
    position: relative;
  }

  .background-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0%;
  }

  .grid-stats-full {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
  }

  .image-bg-about {
    background-image: url('../images/about_1.jpg');
    background-position: 50%;
    background-size: cover;
    min-height: 670px;
  }

  .grid-4-columns-full {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
  }

  .grid-image-about {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    width: 100%;
    height: 740px;
  }

  .image-bg-about-a1 {
    background-image: url('../images/about_a1.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-about-a2 {
    background-image: url('../images/about_a2.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-about-a3 {
    background-image: url('../images/about_a3.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .image-bg-about-a4 {
    background-image: url('../images/about_a4.jpg');
    background-position: 50%;
    background-size: cover;
  }

  .grid-project-page {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1.5fr;
    width: 100%;
    margin-bottom: 14px;
    position: relative;
  }

  .project-content {
    background-color: var(--background);
    padding: 200px 17% 75px;
  }

  .image-project-page {
    object-fit: cover;
    width: 100%;
    height: 98vh;
    position: sticky;
    top: 14px;
  }

  .utility-page-wrap {
    background-color: var(--background);
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 60vh;
    margin-bottom: 14px;
    padding: 200px 50px 110px;
    display: flex;
  }

  .utility-page-content {
    text-align: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 310px;
    display: flex;
  }

  .utility-page-form {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    place-items: stretch stretch;
    width: 100%;
    display: grid;
  }

  .space {
    background-color: var(--border);
    width: 100%;
    height: 1px;
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .grid-colors {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }

  .block-color {
    border: 1px solid var(--border);
    background-color: var(--white);
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 110px;
    padding: 18px;
    display: flex;
  }

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

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

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

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

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

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

  .block-color.info-text {
    background-color: var(--info-text);
  }

  .text-color {
    color: var(--heading);
    font-size: 16px;
    font-weight: 500;
    line-height: 140%;
  }

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

  .hex-color {
    opacity: .5;
    color: var(--heading);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 140%;
  }

  .hex-color.white {
    color: var(--white);
  }

  .template-info {
    background-color: var(--background);
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 20px 30px;
    display: flex;
  }

  .grid-button {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: auto;
    grid-auto-columns: auto;
    grid-auto-flow: column;
    place-items: center;
  }

  .paragraph-hero {
    color: var(--white);
    max-width: 700px;
  }

  .grid-licensing {
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    width: 100%;
  }

  .licensing {
    object-fit: cover;
    width: 100%;
    height: 300px;
  }

  .block-icon-licensing {
    width: 100%;
    display: inline-block;
  }

  .icon-licensing-bg {
    background-color: var(--background);
    margin-bottom: 18px;
    margin-right: 18px;
    display: inline-block;
  }

  .icon-licensing {
    object-fit: contain;
    width: 24px;
    height: 24px;
    margin: 16px;
    display: inline-block;
  }

  .template-font {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 25px;
  }

  @media screen and (max-width: 991px) {
    body {
      padding: 10px;
    }

    h1 {
      font-size: 60px;
    }

    h2 {
      font-size: 48px;
    }

    h3 {
      font-size: 38px;
    }

    h4 {
      font-size: 30px;
    }

    h5 {
      font-size: 24px;
    }

    .section-hero-a {
      margin-bottom: 10px;
    }

    .brand {
      margin-left: 10px;
      margin-right: 10px;
    }

    .nav-menu {
      background-color: var(--background);
    }

    .nav-link {
      padding: 20px 10px;
    }

    .nav-button {
      margin-left: 0;
      padding: 20px 10px;
    }

    .menu-button {
      background-color: var(--accent);
      color: var(--heading);
      padding: 20px;
      font-size: 22px;
      line-height: 100%;
      transition: color .25s cubic-bezier(.215, .61, .355, 1), background-color .25s cubic-bezier(.215, .61, .355, 1);
    }

    .menu-button.w--open {
      background-color: var(--heading);
      color: var(--white);
    }

    .dropdown-toggle {
      padding: 20px 10px;
    }

    .dropdown-link {
      text-align: center;
    }

    .heading-hero.size-vw {
      margin-bottom: 14px;
    }

    .grid-hero-services {
      grid-column-gap: 20px;
      grid-row-gap: 20px;
    }

    .section {
      margin-bottom: 10px;
      padding: 90px 30px;
    }

    .section.padding {
      padding-top: 40px;
      padding-bottom: 50px;
    }

    .grid-2-columns {
      grid-column-gap: 20px;
      grid-row-gap: 20px;
    }

    .grid-stats {
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      grid-template-columns: 1fr;
      grid-auto-flow: row;
    }

    .numbers-stats {
      font-size: 48px;
    }

    .numbers-stats.full {
      font-size: 58px;
    }

    .section-full {
      margin-bottom: 10px;
    }

    .block-full {
      padding: 120px 14%;
    }

    .grid-3-columns-full {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .grid-4-columns {
      grid-column-gap: 20px;
      grid-row-gap: 60px;
      grid-template-columns: 1fr 1fr;
    }

    .block-heading.top {
      margin-bottom: 30px;
    }

    .collection-list-project {
      grid-column-gap: 20px;
    }

    .image-project {
      height: 350px;
    }

    .image-project.large {
      height: 500px;
    }

    .collection-list-blog {
      grid-column-gap: 20px;
    }

    .grid-2-columns-full {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .block-banner {
      padding: 70px 14%;
    }

    .section-footer {
      padding-top: 90px;
      padding-bottom: 62px;
    }

    .block-hero-a {
      padding-bottom: 30px;
      padding-left: 30px;
      padding-right: 30px;
    }

    .section-hero-b {
      margin-bottom: 10px;
    }

    .grid-hero-b {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .hero-b {
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
    }

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

    .block-accent {
      padding: 120px 5%;
    }

    .section-hero-c {
      margin-bottom: 10px;
    }

    .grid-hero-c {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr;
    }

    .block-hero-c {
      padding: 100px 14%;
    }

    .grid-image-hero-c {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      min-height: 600px;
    }

    .section-top {
      margin-bottom: 10px;
      padding: 180px 30px 90px;
    }

    .grid-services,
    .collection-list-blog-page {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .collection-list-project-page {
      grid-column-gap: 20px;
      grid-row-gap: 60px;
    }

    .section-top-img {
      min-height: 50vh;
      margin-bottom: 10px;
    }

    .block-top-img {
      padding-bottom: 15px;
      padding-left: 40px;
      padding-right: 40px;
    }

    .grid-stats-full {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .grid-4-columns-full {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr 1fr;
    }

    .grid-image-about {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr 1fr;
      height: 900px;
    }

    .grid-project-page {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
      grid-template-columns: 1fr;
      margin-bottom: 10px;
    }

    .project-content {
      padding: 90px 14% 55px;
    }

    .image-project-page {
      height: 80vh;
      position: static;
    }

    .utility-page-wrap {
      min-height: 70vh;
      margin-bottom: 10px;
      padding: 180px 30px 90px;
    }
  }

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

    h2 {
      font-size: 40px;
    }

    h3 {
      font-size: 32px;
    }

    h4 {
      font-size: 26px;
    }

    h5 {
      font-size: 22px;
    }

    .heading-hero.size-vw {
      font-size: 6vw;
    }

    .grid-hero-services {
      grid-template-columns: 1fr;
      margin-top: 50px;
    }

    .description {
      display: none;
    }

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

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

    .grid-2-columns {
      grid-row-gap: 60px;
      grid-template-columns: 1fr;
    }

    .grid-stats {
      grid-column-gap: 10px;
      grid-row-gap: 10px;
    }

    .block-right {
      padding: 0 7%;
    }

    .numbers-stats.full {
      font-size: 40px;
    }

    .block-left {
      padding: 0 7%;
    }

    .grid-full {
      grid-template-columns: 1fr;
    }

    .block-full {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .image-bg-services {
      background-image: linear-gradient(to top, var(--heading), transparent 30%), url('../images/img_3.jpg');
      background-position: 0 0, 50%;
      background-size: auto, cover;
      min-height: 500px;
    }

    .grid-3-columns-full {
      grid-template-columns: 1fr;
    }

    .image-gallery {
      height: 40vw;
    }

    .block-heading {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .block-heading-button {
      margin-left: 0;
    }

    .image-bg-testimonials {
      background-image: linear-gradient(to top, var(--heading), transparent 30%), url('../images/img_4.jpg');
      background-position: 0 0, 50%;
      background-size: auto, cover;
      min-height: 500px;
    }

    .collection-list-project {
      grid-template-columns: 1fr;
    }

    .link-image-project {
      margin-bottom: 20px;
    }

    .image-project {
      height: 450px;
    }

    .heading-project {
      max-width: none;
    }

    .text-project-type {
      margin-bottom: 6px;
    }

    .collection-list-blog {
      grid-template-columns: 1fr;
    }

    .text-blog-date {
      margin-bottom: 6px;
    }

    .heading-blog,
    .paragraph-summary {
      max-width: none;
    }

    .grid-2-columns-full {
      grid-template-columns: 1fr;
    }

    .image-bg-banner {
      height: 300px;
    }

    .block-banner {
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .section-footer {
      padding: 70px 14% 50px;
    }

    .grid-footer {
      grid-row-gap: 50px;
      grid-template-columns: 1fr;
    }

    .footer-down-block {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
    }

    .footer-down {
      padding-top: 8px;
      padding-bottom: 8px;
    }

    .heading-footer {
      margin-bottom: 16px;
    }

    .grid-hero-b {
      grid-template-columns: 1fr 1fr;
    }

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

    .block-accent {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .image-bg-accent {
      min-height: 400px;
    }

    .image-services {
      height: 300px;
    }

    .block-hero-c {
      padding-top: 80px;
      padding-bottom: 80px;
    }

    .section-top {
      padding-top: 170px;
      padding-bottom: 70px;
    }

    .grid-services {
      grid-row-gap: 30px;
      grid-template-columns: 1fr;
    }

    .services-page {
      /* min-height: 550px; */
    }

    .collection-list-blog-page {
      grid-row-gap: 30px;
      grid-template-columns: 1fr;
    }

    .image-blog {
      height: 300px;
    }

    .collection-list-project-page {
      grid-row-gap: 55px;
      grid-template-columns: 1fr;
    }

    .form {
      grid-template-columns: 1fr;
    }

    .image-bg-map {
      min-height: 500px;
    }

    .grid-contacts {
      grid-row-gap: 30px;
    }

    .image-bg-about {
      min-height: 400px;
    }

    .grid-image-about {
      height: 700px;
    }

    .project-content {
      padding-top: 70px;
      padding-bottom: 40px;
    }

    .utility-page-wrap {
      padding-top: 170px;
      padding-bottom: 70px;
    }

    .grid-colors {
      grid-template-columns: 1fr 1fr;
    }

    .grid-button {
      grid-auto-flow: row;
    }

    .grid-licensing {
      grid-column-gap: 8px;
      grid-row-gap: 8px;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media screen and (max-width: 479px) {
    body {
      padding: 6px;
    }

    h1 {
      font-size: 42px;
    }

    h2 {
      font-size: 34px;
    }

    h3 {
      font-size: 28px;
    }

    h4 {
      font-size: 23px;
    }

    h5 {
      font-size: 20px;
    }

    h6 {
      font-size: 17px;
    }

    .section-hero-a {
      margin-bottom: 6px;
    }

    .navbar {
      top: 24px;
      left: 22px;
      right: 22px;
    }

    .heading-hero.size-vw {
      margin-bottom: 0;
    }

    .section {
      margin-bottom: 6px;
      padding: 55px 16px;
    }

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

    .grid-stats {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .numbers-stats {
      font-size: 40px;
    }

    .numbers-stats.full {
      font-size: 36px;
    }

    .section-full {
      margin-bottom: 6px;
    }

    .block-full {
      padding-top: 65px;
      padding-bottom: 65px;
    }

    .image-bg-services {
      min-height: 350px;
    }

    .grid-3-columns-full {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .grid-4-columns {
      grid-row-gap: 50px;
      grid-template-columns: 1fr;
    }

    .block-heading.top {
      margin-bottom: 20px;
    }

    .expertise.full {
      padding-left: 10%;
      padding-right: 10%;
    }

    .heading-expertise,
    .paragraph-expertise {
      max-width: none;
    }

    .image-project,
    .image-project.large {
      height: 350px;
    }

    .grid-2-columns-full {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .image-bg-banner {
      height: 250px;
    }

    .section-footer {
      padding-top: 55px;
      padding-bottom: 30px;
    }

    .footer-down-block {
      margin-top: 50px;
    }

    .paragraph-footer {
      margin-bottom: 10px;
    }

    .section-hero-b {
      margin-bottom: 6px;
    }

    .grid-hero-b {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .extra {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .block-accent {
      padding-top: 65px;
      padding-bottom: 65px;
    }

    .image-bg-accent {
      min-height: 350px;
    }

    .section-hero-c {
      margin-bottom: 6px;
    }

    .grid-hero-c {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .block-hero-c {
      padding-top: 55px;
      padding-bottom: 55px;
    }

    .grid-image-hero-c {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
      min-height: 450px;
    }

    .section-top {
      margin-bottom: 6px;
      padding-bottom: 55px;
      padding-left: 16px;
      padding-right: 16px;
    }

    .grid-services,
    .collection-list-blog-page {
      grid-row-gap: 16px;
    }

    .image-blog {
      height: 250px;
    }

    .image-bg-map {
      min-height: 400px;
    }

    .text-contact {
      font-size: 14px;
    }

    .section-top-img {
      margin-bottom: 6px;
    }

    .block-top-img {
      padding-bottom: 6px;
      padding-left: 30px;
      padding-right: 30px;
    }

    .grid-stats-full {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
      grid-template-columns: 1fr;
    }

    .image-bg-about {
      min-height: 350px;
    }

    .grid-4-columns-full {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
      grid-template-columns: 1fr;
    }

    .grid-image-about {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
    }

    .grid-project-page {
      grid-column-gap: 6px;
      grid-row-gap: 6px;
      margin-bottom: 6px;
    }

    .project-content {
      padding: 55px 8% 20px;
    }

    .image-project-page {
      height: 70vh;
    }

    .utility-page-wrap {
      margin-bottom: 6px;
      padding: 150px 16px 55px;
    }

    .grid-colors,
    .grid-licensing {
      grid-template-columns: 1fr;
    }
  }

  
  #w-node-e35e4e79-1266-7d53-01dd-20fb71a18d0e-e07e1ab0 {
    grid-area: 2 / 2 / 3 / 3;
  }

  #w-node-_3ff4c921-d7e6-192d-0b42-39979a3ee5c3-e07e1ab3,
  #w-node-_353f381d-86fc-d22e-fd6a-e520fa3eb49f-e07e1ab3 {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  #Message.w-node-_8b8621dc-09df-292f-d2ba-e39b8e47637e-e07e1ad9,
  #w-node-b4141052-95f1-638b-739d-5973369eda70-e07e1ad9 {
    grid-area: span 1 / span 2 / span 1 / span 2;
  }

  #w-node-_53255d6a-bdd3-0d0b-71f4-fcc53478e345-e07e1ada {
    grid-area: span 2 / span 2 / span 2 / span 2;
  }

  #w-node-_3bbdd4ff-270b-cef1-f67e-5479f9c783cb-e07e1ada {
    grid-area: span 2 / span 1 / span 2 / span 1;
  }

  @media screen and (max-width: 991px) {
    #w-node-e35e4e79-1266-7d53-01dd-20fb71a18d0e-e07e1ab0 {
      grid-area: span 1 / span 1 / span 1 / span 1;
    }
  }

  @media screen and (max-width: 767px) {
    #w-node-_9ed600c0-5f38-2aab-d429-11eac23a6307-e07e1a90 {
      order: -9999;
    }

    #w-node-ecc5ae15-cc47-5204-5171-01c77e132c17-e07e1ab2 {
      grid-area: span 1 / span 2 / span 1 / span 2;
    }

    #w-node-d4fba32c-31ea-808b-ce12-f4eff2c9e79a-e07e1ab3 {
      order: -9999;
    }

    #Message.w-node-_8b8621dc-09df-292f-d2ba-e39b8e47637e-e07e1ad9,
    #w-node-b4141052-95f1-638b-739d-5973369eda70-e07e1ad9 {
      grid-area: span 1 / span 1 / span 1 / span 1;
    }
  }


  * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  a {
    text-decoration: none;
    cursor: pointer;
    outline: 0;
  }

  .section-padding {
    padding-top: 10px;
  }

  .gallery-section {
    position: relative;
    z-index: 1;
  }

  .filter {
    text-align: center;
    max-width: 1050px;
    margin: auto;
  }

  .btn {
    padding: 10px 20px;
    margin: 5px 4px 4px 0;
    display: inline-block;
    color: #003;
    background: #eee;
    transition: all 0.4s;
    font-size: 16px;
    font-weight: 500;
  }

  .btn:hover,
  .btn-active {
    background: var(--accent);
    color: var(--heading);
    -webkit-transform: translateY(3px);
    -ms-transform: translateY(3px);
    transform: translateY(3px);
  }

  .gallery {
    display: flex;
    justify-content: center;
    width: fit-content;
    max-width: 1320px;
    flex-wrap: wrap;
    margin: 25px auto;
    /* gap: 14px; */
  }

  .gallery a {
    display: flex;
  }

  .gallery img {
    width: 400px;
    height: 320px;
    object-fit: cover;
    transition: 0.15s ease-in-out;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px 10px;
  }

  .gallery img:hover {
    /* transform: scale(1.1); */
  }

  .sets .hide,
  .sets .pophide {
    width: 0%;
    opacity: 0;
  }

  .closeBtn {
    position: absolute;
    right: 25px;
    top: 25px;
    color: white;
    padding: 2px 20px;
    background: var(--accent);
    outline-offset: -6px;
  }

  .closeBtn:hover {
    cursor: pointer;
  }

  .openDiv {
    width: 100%;
    height: 100vh;
    background: #000000e7;
    position: fixed;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 0;
    z-index: 9999;
  }

  .imgPreview {
    width: 70%;
    object-fit: scale-down;
    max-height: 40vw;
    height: auto;
  }

  .prevButton,
  .nextButton {
    padding: 6px 18px;
    font-size: 18px;
    border: none;
    color: white;
    background: #0005;
    border: 2px solid white;
    margin: 10px;
  }

  .prevButton:hover,
  .nextButton:hover {
    background: var(--accent);
    color: black;
  }

  .img-container {
    position: relative;
  }

  .img-details {
    position: absolute;
    top: 0;
    background: var(--background);
    margin: 10px 10px;
    width: 400px;
    height: 320px;
    opacity: 0;
    -webkit-transition: all 0.5 linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
  }

  .img-details:hover {
    opacity: 100;
  }

  .img-details p {
    color: var(--heading);
    bottom: 0;
    position: absolute;
    left: 30px;
  }

  @media screen and (max-width: 426px) {
    .img-details {
      width: 100%;
    }
  }




  /* resposive CSS Code */

  @media max-width: 1199px {
    .section-padding {
      padding-top: 70px;
    }
  }

  @media (max-width: 991px) {
    .section-padding {
      padding-top: 50px;
    }
  }

  @media (max-width: 767px) {
    .title {
      font-size: 36px;
    }

    .gallery img {
      margin: 0px;
      margin-bottom: 10px;
    }

    .img-details {
      margin: 0px;
      margin-bottom: 10px;
    }

    .closeBtn {
      padding: 6px 25px;
    }

    .prevButton,
    .nextButton {
      font-size: 18px;
      padding: 8px 25px;
    }
  }

  @media (max-width: 540px) {
    .section-padding {
      padding-top: 30px;
    }

    .gallery img {
      /* margin: 8px 6px;
        width: 180px; */
    }

    .closeBtn {
      font-size: 18px;
      border-radius: 15px;
    }

    .prevButton,
    .nextButton {
      font-size: 18px;
      padding: 6px 20px;
      border-radius: 10px;
      margin: 5px;
    }

    .imgPreview {
      width: 90%;
      max-height: 50vh;
      height: auto;
    }

  }