*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@media (max-width: 850px) {
  #wpadminbar {
    display: none;
  }
}

html {
  margin-top: 0 !important;
}

body {
  font-family: var(--font-primary);
  padding-top: var(--header-height);
}

li {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  font: inherit;
  color: inherit;
}

.coverlink {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9;
  display: block;
  font-size: 0;
  max-width: unset;
}

input::-moz-placeholder {
  font: inherit;
  background-color: transparent;
  resize: none;
  border: none;
  outline: none;
}

input,
input::placeholder,
button,
textarea,
select {
  font: inherit;
  background-color: transparent;
  resize: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

.container {
  max-width: var(--container);
  width: 96%;
  padding-inline: 20px;
  margin-inline: auto;
}
@media (max-width: 850px) {
  .container {
    width: 100%;
  }
}

@media (max-width: 1150px) {
  body.navbar-active {
    overflow: hidden;
  }
}

a.golink {
  position: relative;
  display: inline-block;
}
a.golink::after {
  display: block;
  width: 0%;
  height: 1px;
  background-color: #000;
  content: "";
  position: absolute;
  bottom: -2px;
  transition: all ease-in-out 0.4s;
}
a.golink:hover::after {
  width: 100%;
}

:root {
  --font-primary: "Manrope", sans-serif;
  --color-black: #000;
  --color-gray: #636363;
  --color-primary: #3053A1;
  --container: 1520px;
  --header-height: 106px;
  --m-xl: 180px;
  --m-l: 100px;
  --m-m: 70px;
  --m-s: 50px;
}
@media (max-width: 1600px) {
  :root {
    --container: 1320px;
    --header-height: 86px;
    --m-xl: 130px;
    --m-l: 65px;
    --m-m: 45px;
    --m-s: 30px;
  }
}
@media (max-width: 1320px) {
  :root {
    --header-height: 70px;
    --m-xl: 100px;
    --m-l: 60px;
    --m-m: 35px;
    --m-s: 20px;
  }
}
@media (max-width: 850px) {
  :root {
    --m-xl: 70px;
    --m-l: 40px;
    --m-m: 20px;
    --m-s: 10px;
  }
}

.heading-primary {
  font-size: 46px;
  font-weight: 500;
  color: var(--color-black);
}
.heading-primary span, .heading-primary a {
  color: var(--color-gray);
}
@media (max-width: 1600px) {
  .heading-primary {
    font-size: 40px;
  }
}
@media (max-width: 1300px) {
  .heading-primary {
    font-size: 33px;
  }
}
@media (max-width: 800px) {
  .heading-primary {
    font-size: 29px;
  }
}

.heading-secondary {
  font-size: 40px;
  font-weight: 500;
  color: var(--color-black);
}
.heading-secondary span, .heading-secondary a {
  color: var(--color-gray);
}
@media (max-width: 1600px) {
  .heading-secondary {
    font-size: 36px;
  }
}
@media (max-width: 1300px) {
  .heading-secondary {
    font-size: 28px;
  }
}
@media (max-width: 800px) {
  .heading-secondary {
    font-size: 26px;
  }
}

.heading-tertiary {
  font-size: 32px;
  font-weight: 500;
  color: var(--color-black);
}
.heading-tertiary span, .heading-tertiary a {
  color: var(--color-gray);
}
@media (max-width: 1600px) {
  .heading-tertiary {
    font-size: 28px;
  }
}
@media (max-width: 1300px) {
  .heading-tertiary {
    font-size: 24px;
  }
}
@media (max-width: 800px) {
  .heading-tertiary {
    font-size: 21px;
  }
}

.link-primary {
  color: #000;
  font-size: 25px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-transform: capitalize;
  color: var(--color-black);
}
.link-primary span, .link-primary a {
  color: var(--color-gray);
}
@media (max-width: 1600px) {
  .link-primary {
    font-size: 22px;
  }
}
@media (max-width: 1300px) {
  .link-primary {
    font-size: 20px;
  }
}
@media (max-width: 800px) {
  .link-primary {
    font-size: 18px;
  }
}

.big-paragraph {
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media (max-width: 1600px) {
  .big-paragraph {
    font-size: 18px;
  }
}
@media (max-width: 1300px) {
  .big-paragraph {
    font-size: 16px;
  }
}
@media (max-width: 800px) {
  .big-paragraph {
    font-size: 15px;
  }
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.section-title-block {
  padding-block: var(--m-xl);
  display: flex;
  gap: var(--m-xl);
  align-items: flex-end;
}
@media (max-width: 850px) {
  .section-title-block {
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
  }
}
.section-title-block.align-center {
  align-items: center;
}
.section-title-block.align-start {
  align-items: start;
}
.section-title-block.l-padding-bottom {
  padding-bottom: var(--m-l);
}
.section-title-block div {
  max-width: 100%;
}
.section-title-block > div:first-child {
  min-width: 45%;
}

.header {
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  overflow: hidden;
  z-index: 999;
}
.header > .container {
  display: flex;
  padding-block: 34px;
  align-items: flex-end;
  justify-content: space-between;
}
@media (max-width: 1600px) {
  .header > .container {
    padding-block: 24px;
  }
}
@media (max-width: 1320px) {
  .header > .container {
    padding-block: 20px;
  }
}
@media (max-width: 850px) {
  .header > .container {
    align-items: center;
  }
}
.header-logo img {
  max-width: 135px;
  max-height: 100%;
}
@media (max-width: 1320px) {
  .header-logo img {
    width: 100px;
  }
}
.header-links {
  display: flex;
  gap: 90px;
}
@media (max-width: 1600px) {
  .header-links {
    gap: 60px;
  }
}
@media (max-width: 1320px) {
  .header-links {
    gap: 40px;
  }
}
@media (max-width: 850px) {
  .header-links {
    display: none;
  }
  .header-links.active {
    display: flex;
    position: fixed;
    top: var(--header-height);
    left: 0;
    background-color: white;
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% - var(--header-height));
  }
}
.header-links li a {
  color: #000;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  position: relative;
}
@media (max-width: 1600px) {
  .header-links li a {
    font-size: 18px;
  }
}
@media (max-width: 1320px) {
  .header-links li a {
    font-size: 16px;
  }
}
.header-links li a::after {
  display: block;
  width: 0%;
  height: 1px;
  background-color: #000;
  content: "";
  position: absolute;
  bottom: -2px;
  transition: all ease-in-out 0.4s;
}
.header-links li a:hover::after {
  width: 100%;
}
.header .mobile-nav-trigger {
  display: none;
}
@media (max-width: 850px) {
  .header .mobile-nav-trigger {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .header .mobile-nav-trigger span {
    width: 24px;
    height: 1px;
    background-color: #000;
    transition: all ease-in-out 0.3s;
  }
  .header .mobile-nav-trigger span:first-child {
    align-self: flex-end;
  }
  .header .mobile-nav-trigger span:first-child, .header .mobile-nav-trigger span:last-child {
    width: 17px;
  }
  .header .mobile-nav-trigger.active span:first-child, .header .mobile-nav-trigger.active span:last-child {
    width: 24px;
  }
}

footer {
  background-color: black;
  padding-top: var(--m-l);
  color: white;
}
footer .footer-top .container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
footer .footer-top .footer-top-right {
  display: flex;
  gap: var(--m-xl);
}
@media (max-width: 850px) {
  footer .footer-top .footer-top-right {
    gap: 20px;
  }
}
footer .footer-top .footer-top-right ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (max-width: 1320px) {
  footer .footer-top .footer-top-right ul {
    gap: 10px;
  }
}
footer .footer-top .footer-top-right ul li a {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
}
@media (max-width: 1600px) {
  footer .footer-top .footer-top-right ul li a {
    font-size: 18px;
  }
}
@media (max-width: 1320px) {
  footer .footer-top .footer-top-right ul li a {
    font-size: 15px;
  }
}
@media (max-width: 1320px) {
  footer .footer-top .footer-top-right ul li a {
    font-size: 13px;
  }
}
footer .footer-top .footer-top-right ul li:first-child a {
  font-size: 22px;
  font-weight: 600;
}
@media (max-width: 1600px) {
  footer .footer-top .footer-top-right ul li:first-child a {
    font-size: 20px;
  }
}
@media (max-width: 1320px) {
  footer .footer-top .footer-top-right ul li:first-child a {
    font-size: 17px;
  }
}
@media (max-width: 1320px) {
  footer .footer-top .footer-top-right ul li:first-child a {
    font-size: 15px;
  }
}
footer .footer-middle {
  padding-top: 55px;
  padding-bottom: 25px;
}
@media (max-width: 1320px) {
  footer .footer-middle {
    padding-top: 35px;
    padding-bottom: 15px;
  }
}
footer .footer-middle img {
  width: 100%;
}
footer .footer-bottom {
  border-top: 1px solid #fff;
}
footer .footer-bottom .container {
  padding-block: 25px;
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1600px) {
  footer .footer-bottom .container {
    padding-block: 20px;
  }
}
@media (max-width: 1320px) {
  footer .footer-bottom .container {
    font-size: 13px;
  }
}
@media (max-width: 1320px) {
  footer .footer-bottom .container {
    flex-wrap: wrap;
  }
}
footer .footer-bottom .container .gototop {
  color: #FFF;
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: capitalize;
  cursor: pointer;
}
footer .footer-bottom .container .gototop::after {
  content: url("data:image/svg+xml,%3Csvg width='10' height='14' viewBox='0 0 10 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.620171 4.50387L4.56203 0.562016C4.80392 0.320124 5.1961 0.320124 5.438 0.562016L9.37985 4.50387C9.62174 4.74577 9.62174 5.13795 9.37985 5.37984C9.13796 5.62173 8.74578 5.62173 8.50388 5.37984L5.61941 2.49537L5.61941 14L4.38061 14L4.38061 2.49537L1.49614 5.37984C1.25425 5.62173 0.862063 5.62173 0.62017 5.37984C0.378279 5.13795 0.378279 4.74576 0.620171 4.50387Z' fill='white'/%3E%3C/svg%3E%0A");
  margin-left: 5px;
}
@media (max-width: 1320px) {
  footer .footer-bottom .container .gototop {
    font-size: 13px;
  }
}

.showreel {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}
@media (max-width: 850px) {
  .showreel {
    width: 100%;
    height: auto;
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.showreel .mask {
  background-color: white;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: lighten;
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
}
.showreel .mask.colored {
  mix-blend-mode: unset;
  transition: all ease 0.3s;
}
.showreel .mask.colored h2 {
  color: var(--color-primary);
  letter-spacing: -2px;
}
.showreel .mask h2 {
  color: #000;
  font-size: 9vw;
  font-weight: 800;
  line-height: 8vw;
  scale: 240;
  padding-top: 45px;
  padding-left: 11vw;
}
@media (max-width: 850px) {
  .showreel .mask {
    display: none;
  }
}

#homepageVideo {
  min-width: 100%;
  height: auto;
  min-height: 100%;
}
@media (max-width: 850px) {
  #homepageVideo {
    width: 130%;
    height: auto;
    min-height: unset;
    min-width: unset;
  }
}

.home-brands {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: var(--m-l);
}
.home-brands .showall {
  color: #000;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}
.home-brands .showall::before {
  margin-right: 7px;
  content: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.3431 0.928932L23.7071 7.29289C24.0976 7.68342 24.0976 8.31658 23.7071 8.70711L17.3431 15.0711C16.9526 15.4616 16.3195 15.4616 15.9289 15.0711C15.5384 14.6805 15.5384 14.0474 15.9289 13.6569L20.5858 9H0V7H20.5858L15.9289 2.34315C15.5384 1.95262 15.5384 1.31946 15.9289 0.928932C16.3195 0.538408 16.9526 0.538408 17.3431 0.928932Z' fill='black'/%3E%3C/svg%3E%0A");
}
@media (max-width: 1600px) {
  .home-brands .showall {
    font-size: 21px;
  }
}
@media (max-width: 1320px) {
  .home-brands .showall {
    font-size: 17px;
  }
}
@media (max-width: 850px) {
  .home-brands .showall {
    font-size: 15px;
  }
}

.home-logos {
  background-color: #f1f1f1;
  padding-bottom: var(--m-l);
}
.home-logos .logo-flows {
  display: flex;
  gap: var(--m-l);
  flex-direction: column;
  overflow: hidden;
}
.home-logos .logo-flows .logo-flow {
  display: flex;
  width: auto;
  gap: 130px;
  align-items: center;
}
@media (max-width: 850px) {
  .home-logos .logo-flows .logo-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}
.home-logos .logo-flows .logo-flow img {
  width: auto;
  height: auto;
  filter: grayscale(1);
}
@media (max-width: 850px) {
  .home-logos .logo-flows .logo-flow img {
    width: 100%;
  }
}
.home-logos .logo-flows .logo-flow.row2 {
  direction: rtl;
}

.about-first {
  display: flex;
  gap: 60px;
  padding-block: var(--m-xl);
}
@media (max-width: 850px) {
  .about-first {
    flex-direction: column;
    gap: 30px;
  }
}
.about-first .left {
  width: 45%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 850px) {
  .about-first .left {
    flex-direction: column;
    gap: var(--m-xl);
    width: 100%;
  }
}
.about-first .left .rotate .text {
  animation: rotate 10s linear infinite;
  transform-origin: center;
}
.about-first .right {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: var(--m-s);
}
@media (max-width: 850px) {
  .about-first .right {
    flex-direction: column;
    width: 100%;
  }
}

.corporate-video {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  max-height: 177.7777777778vw;
}
@media (max-width: 850px) {
  .corporate-video {
    height: auto;
    max-height: unset;
  }
}
.corporate-video .inner {
  display: flex;
  gap: var(--m-l);
  position: absolute;
  width: 110%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
  transform: unset;
}
@media (max-width: 850px) {
  .corporate-video .inner {
    position: relative;
  }
}
.corporate-video .inner .col {
  width: 32%;
  display: flex;
  gap: var(--m-l);
  flex-direction: column;
}
@media (max-width: 850px) {
  .corporate-video .inner .col {
    display: none;
  }
}
.corporate-video .inner .col.wide {
  width: 46%;
}
@media (max-width: 850px) {
  .corporate-video .inner .col.wide {
    display: block;
    width: 100%;
  }
}
.corporate-video .inner .col.wide video {
  width: 100%;
  height: auto;
}
.corporate-video .inner .col img {
  width: 100%;
}
@media (max-width: 850px) {
  .corporate-video .inner .col img {
    display: none;
  }
}

.counters {
  display: flex;
  gap: 100px;
  justify-content: space-between;
}
@media (max-width: 1600px) {
  .counters {
    gap: 60px;
  }
}
@media (max-width: 1300px) {
  .counters {
    gap: 30px;
  }
}
@media (max-width: 850px) {
  .counters {
    gap: 20px;
  }
}
.counters .counter .digital {
  font-size: 63px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
@media (max-width: 1600px) {
  .counters .counter .digital {
    font-size: 45px;
  }
}
@media (max-width: 1320px) {
  .counters .counter .digital {
    font-size: 36px;
  }
}
@media (max-width: 850px) {
  .counters .counter .digital {
    font-size: 30px;
  }
}
.counters .counter .text {
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
}
@media (max-width: 1600px) {
  .counters .counter .text {
    font-size: 22px;
  }
}
@media (max-width: 1320px) {
  .counters .counter .text {
    font-size: 19px;
  }
}
@media (max-width: 850px) {
  .counters .counter .text {
    font-size: 14px;
    white-space: wrap;
  }
}

.corporate-logos {
  background-color: #f1f1f1;
}
.corporate-logos .logos {
  filter: grayscale(1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  align-items: center;
  justify-items: center;
}
@media (max-width: 850px) {
  .corporate-logos .logos {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

.brands-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 88px;
}
@media (max-width: 850px) {
  .brands-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.brands-list.home {
  margin-bottom: var(--m-l);
}
.brands-list .brand-card {
  border-radius: 15px;
  border: 1px solid #D9D9D9;
  padding: 8px;
}
@media (max-width: 850px) {
  .brands-list .brand-card {
    border-radius: 10px;
  }
}
.brands-list .brand-card .img-container {
  border-radius: 11px;
  overflow: hidden;
  width: 100%;
  position: relative;
}
@media (max-width: 850px) {
  .brands-list .brand-card .img-container {
    border-radius: 7px;
  }
}
.brands-list .brand-card .img-container img {
  width: 100%;
  scale: 1.05;
  transition: all ease-in-out 0.4s;
}
.brands-list .brand-card .img-container::after {
  content: url("data:image/svg+xml,%3Csvg width='96' height='96' viewBox='0 0 96 96' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='48' cy='48' r='48' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M57.3431 40.9289L63.7071 47.2928C64.0976 47.6834 64.0976 48.3165 63.7071 48.7071L57.3431 55.071C56.9526 55.4615 56.3195 55.4615 55.9289 55.071C55.5384 54.6805 55.5384 54.0473 55.9289 53.6568L60.5858 48.9999H32V46.9999H60.5858L55.9289 42.3431C55.5384 41.9526 55.5384 41.3194 55.9289 40.9289C56.3195 40.5384 56.9526 40.5384 57.3431 40.9289Z' fill='white'/%3E%3C/svg%3E%0A");
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  opacity: 0;
  transition: all ease-in-out 0.4s;
}
.brands-list .brand-card .img-container:hover img {
  scale: 1;
}
.brands-list .brand-card .img-container:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(-20deg);
}
.brands-list .brand-card .link-primary {
  padding-block: 16px;
  display: inline-block;
}
.brands-list .brand-card p {
  color: var(--color-gray);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
@media (max-width: 850px) {
  .brands-list .brand-card p {
    font-size: 12px;
  }
}
.brands-list .brand-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 15px;
}
@media (max-width: 850px) {
  .brands-list .brand-card .tags {
    gap: 5px;
    margin-top: 10px;
    margin-bottom: 5px;
  }
}
.brands-list .brand-card .tags a {
  color: #747474;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 33px;
  border: 1px solid #D9D9D9;
  padding: 5px 11px;
  white-space: nowrap;
  transition: all ease-in-out 0.3s;
  /*
  &:hover {
      background-color: black;
      border-color: black;
      color: white;
  }*/
}
@media (max-width: 850px) {
  .brands-list .brand-card .tags a {
    font-size: 12px;
    border-radius: 20px;
    border: 1px solid #D9D9D9;
    padding: 3px 6px;
  }
}

.skills-grid {
  display: flex;
  flex-direction: column;
  gap: var(--m-l);
  padding-bottom: var(--m-l);
}
.skills-grid .skill-box {
  border-radius: 15px;
  border: 1px solid #D9D9D9;
  padding: 50px;
  display: flex;
  gap: 40px;
  position: relative;
}
@media (max-width: 1600px) {
  .skills-grid .skill-box {
    padding: 30px;
  }
}
@media (max-width: 850px) {
  .skills-grid .skill-box {
    flex-direction: column;
    padding: 20px;
    padding-top: 70px;
  }
}
.skills-grid .skill-box .box-left {
  width: 50%;
}
@media (max-width: 850px) {
  .skills-grid .skill-box .box-left {
    width: 100%;
  }
}
.skills-grid .skill-box .box-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: var(--m-s);
}
@media (max-width: 850px) {
  .skills-grid .skill-box .box-right {
    width: 100%;
  }
}
.skills-grid .skill-box .box-right .icon {
  position: relative;
  width: 70px;
  height: 70px;
  align-self: flex-end;
  transition: all ease-in-out 0.5s;
}
@media (max-width: 850px) {
  .skills-grid .skill-box .box-right .icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
  }
}
.skills-grid .skill-box .box-right .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}
.skills-grid .skill-box .box-right .tags a {
  color: #747474;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 33px;
  border: 1px solid #D9D9D9;
  padding: 5px 11px;
  white-space: nowrap;
  /*transition: all ease-in-out .3s;
  &:hover {
      background-color: black;
      border-color: black;
      color: white;
  }*/
}
.skills-grid .skill-box:hover .icon {
  rotate: 180deg;
}

.contact-first {
  display: flex;
  gap: 60px;
  padding-block: var(--m-xl);
}
@media (max-width: 850px) {
  .contact-first {
    flex-direction: column;
    gap: 30px;
  }
}
.contact-first .left {
  width: 45%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
@media (max-width: 850px) {
  .contact-first .left {
    width: 100%;
  }
}
.contact-first .right {
  width: 55%;
  display: flex;
  flex-direction: column;
  gap: var(--m-s);
  padding-top: var(--m-s);
}
@media (max-width: 850px) {
  .contact-first .right {
    width: 100%;
  }
}

.contact-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2fr, 1);
  gap: 24px;
}
@media (max-width: 850px) {
  .contact-form {
    display: flex;
    flex-direction: column;
  }
}
.contact-form .selectservice {
  width: 100%;
  grid-column: span 2/span 2;
}
.contact-form .selectservice ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-form .selectservice span.title {
  font-weight: 600;
  font-size: 17px;
  color: var(--black-color);
  letter-spacing: 1.64px;
}
.contact-form .selectservice li {
  position: relative;
  display: inline-block;
}
.contact-form .selectservice li span {
  border-radius: 33px;
  border: 1px solid #D9D9D9;
  color: #000;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 7px 12px;
  display: inline-block;
}
.contact-form .selectservice li input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.contact-form .selectservice li input[type=checkbox]:checked + span {
  background-color: black;
  border-color: #000;
  color: white;
}
.contact-form .formitem {
  box-sizing: border-box;
  width: 100%;
}
.contact-form .formitem.w100 {
  grid-column: span 2/span 2;
}
.contact-form input[type=text] {
  border: 0;
  border-bottom: 2px solid #d8d8d8;
  background-color: var(--whitecolor);
  height: 50px;
  color: #4B5055;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
}
.contact-form input[type=email] {
  border: 0;
  border-bottom: 2px solid #d8d8d8;
  background-color: var(--whitecolor);
  height: 50px;
  color: #4B5055;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
}
.contact-form input[type=tel] {
  border: 0;
  border-bottom: 2px solid #d8d8d8;
  background-color: var(--whitecolor);
  height: 50px;
  color: #4B5055;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  box-sizing: border-box;
}
.contact-form textarea {
  border: 0;
  border-bottom: 2px solid #d8d8d8;
  color: #4B5055;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100% !important;
  box-sizing: border-box;
  height: 120px;
}
.contact-form .buttons {
  grid-column: span 2/span 2;
  position: relative;
  text-align: right;
}
.contact-form .submit1 {
  color: #000;
  font-size: 25px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.7071 8.70711C24.0976 8.31658 24.0976 7.68342 23.7071 7.29289L17.3431 0.928932C16.9526 0.538408 16.3195 0.538408 15.9289 0.928932C15.5384 1.31946 15.5384 1.95262 15.9289 2.34315L21.5858 8L15.9289 13.6569C15.5384 14.0474 15.5384 14.6805 15.9289 15.0711C16.3195 15.4616 16.9526 15.4616 17.3431 15.0711L23.7071 8.70711ZM0 9H23V7H0V9Z' fill='black'/%3E%3C/svg%3E%0A");
  padding-left: 28px;
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 20px;
}
@media (max-width: 1600px) {
  .contact-form .submit1 {
    font-size: 19px;
    background-size: 17px;
  }
}
@media (max-width: 1320px) {
  .contact-form .submit1 {
    font-size: 15px;
    background-size: 14px;
  }
}
.contact-form .hiddens {
  display: none;
}

.contact-map iframe {
  height: 55vh;
}

.work-header {
  padding-top: var(--m-xl);
  padding-bottom: var(--m-l);
  display: flex;
  justify-content: space-between;
}
@media (max-width: 850px) {
  .work-header {
    flex-direction: column;
  }
}
.work-header .header-left {
  width: 45%;
}
@media (max-width: 850px) {
  .work-header .header-left {
    width: 100%;
  }
}
.work-header .header-left .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
  margin-bottom: 15px;
}
.work-header .header-left .tags a {
  color: #747474;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 33px;
  border: 1px solid #D9D9D9;
  padding: 5px 11px;
  white-space: nowrap;
  /*transition: all ease-in-out .3s;
  &:hover {
      background-color: black;
      border-color: black;
      color: white;
  }*/
}
.work-header .header-right {
  width: 50%;
  padding-top: var(--m-s);
}
@media (max-width: 850px) {
  .work-header .header-right {
    width: 100%;
  }
}

.work-block-columns {
  display: flex;
  gap: 50px;
  margin-bottom: var(--m-l);
}
@media (max-width: 850px) {
  .work-block-columns {
    flex-direction: column;
  }
}
.work-block-columns img {
  width: 100%;
}
.work-block-columns h1, .work-block-columns h2, .work-block-columns h3, .work-block-columns h4, .work-block-columns h5, .work-block-columns h6 {
  margin-bottom: var(--m-s);
}
.work-block-columns .work-block-40 {
  width: 42%;
}
@media (max-width: 850px) {
  .work-block-columns .work-block-40 {
    width: 100%;
  }
}
.work-block-columns .work-block-60 {
  width: 57%;
}
@media (max-width: 850px) {
  .work-block-columns .work-block-60 {
    width: 100%;
  }
}
.work-block-columns.same-height-image img {
  -o-object-fit: cover;
     object-fit: cover;
  height: 100%;
}

.work-block-full {
  margin-bottom: var(--m-l);
}

.mirror-blocks {
  display: flex;
  gap: 24px;
  margin-bottom: var(--m-l);
}
@media (max-width: 850px) {
  .mirror-blocks {
    flex-direction: column;
  }
}
.mirror-blocks .block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--m-l);
  width: 50%;
}
@media (max-width: 850px) {
  .mirror-blocks .block {
    width: 100%;
  }
}
.mirror-blocks .block h1, .mirror-blocks .block h2, .mirror-blocks .block h3, .mirror-blocks .block h4, .mirror-blocks .block h5, .mirror-blocks .block h6 {
  margin-bottom: 0;
}/*# sourceMappingURL=main.css.map */