:root {
  --active-color: #2196f3;
  --grey-color: #757575;
  --light-grey-color: #f5f4fa;
  --dark-text-color: #212121;
  --icon-color: #afb1bb;
  --products-nav-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.12),
    0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 3px 1px 0px rgba(0, 0, 0, 0.1);
  --team-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --products-box-shadow: 1px 4px 6px 0px rgba(0, 0, 0, 0.16),
    0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
  --main-overlay: linear-gradient(rgba(47, 48, 58, 0.4), rgba(47, 48, 58, 0.4));
  --blue-btn-field-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
  --what-we-do-overlay: rgba(47, 48, 58, 0.8);
  --footer-color: #2f303a;
  --dark-icon-color: rgba(255, 255, 255, 0.1);
  --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --light-btn: hsl(0, 100%, 100%);
  --line-color: #ececec;
  --product-box-border-color: #eee;
  --transparent-blue: rgba(33, 150, 243, 0.9);
  --transition-bot-to-top: 900ms ease-in-out;
  --transition-slower: 900ms cubic-bezier(0.4, 0, 0.2, 1);
  --backdrop: rgba(0, 0, 0, 0.2);
  --window-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --close-btn-stroke: rgba(0, 0, 0, 0.1);
  --transition-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1);
  --subs-field-border: rgba(255, 255, 255, 0.3);
  --subs-placeholder: rgba(255, 255, 255, 0.6);
  --grey-border: solid rgba(33, 33, 33, 0.2);
  --comments-placeholder: rgba(117, 117, 117, 0.5);
  --selected-blue-btn-color: #188ce8;
}

body {
  font-family: "Roboto", sans-serif;
  /* padding: 0 0.94rem;
  width: 100rem;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2348px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 100rem;
  height: 146.75rem;
  display: inline-block;
  text-align: center;
  width: 100%; */
}

/* body > div {
  width: 100rem;
  display: inline-block;
  vertical-align: middle;
  width: 100rem;
} */

/* .studio-page {
  height: 146.75rem;
} */

/* .navigation {
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  display: inline-block;
  text-align: center;
  margin: auto;
  width: 100rem;
  width: fit-content;
  height: fit-content;
  background-color: #ffffff;
  margin-top: 24px;
  background-color: black; 
  padding-top: 24px;
  margin-bottom: -24px;
  padding: 1.5rem 13.44rem;
mobile  box-sizing: border-box;
} */

/* mobile menu */

.mobile-menu-icon {
  width: 2.5rem;
  height: 2.5rem;
  fill: currentColor;
  /* background-color: aquamarine; */
}

.mobile-menu-icon:focus,
.mobile-menu-icon:hover {
  fill: var(--active-color);
  transition: fill var(--transition);
  cursor: pointer;
}

.mobile-menu-content {
  width: 100%;
  height: 100%;
  background-color: white;
  padding: 3rem 2rem;
}

.mobile-menu-open,
.mobile-menu-close-btn {
  position: absolute;
  top: 0.62rem;
  right: 0.94rem;
  border: none;
  background-color: white;
}

.js-menu-container {
  display: none;
}

.js-menu-container.is-open {
  display: block;
  position: fixed;
  z-index: 1;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.mobile-menu-nav-btn {
  color: var(--dark-text-color);
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.05rem;
}

.active-page {
  color: var(--active-color);
}

.mobile-menu-nav-btn:focus,
.mobile-menu-nav-btn:hover,
.mobile-menu-email-btn:hover,
.mobile-menu-email-btn:focus {
  color: var(--active-color);
  transition: color var(--transition);
  cursor: pointer;
}

.mobile-menu-contacts {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.mobile-menu-phone-btn {
  color: var(--active-color);
  font-size: 2.125rem;
  font-weight: 500;
  letter-spacing: 0.0425rem;
}

.mobile-menu-email-btn {
  color: var(--grey-color);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.03rem;
}

.mobile-menu-phone-btn:focus,
.mobile-menu-phone-btn:hover {
  cursor: pointer;
}

.mobile-menu-social-links {
  display: flex;
  flex-direction: column;
}

.mobile-menu-social-link {
  padding: 0 0.62rem;
  color: var(--active-color);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.375rem;
  /* letter-spacing: 0.0225rem; */
}

.mobile-menu-social-link.first {
  padding-left: 0;
}

.mobile-menu-social-link.end {
  padding-right: 0;
}

.mobile-menu-social-link.second {
  border-left: 0.0625rem var(--grey-border);
}

.mobile-menu-social-link.third {
  border-right: 0.0625rem var(--grey-border);
  padding-left: 0;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* small mobile screen version */

.navigation-menu {
  /* display: inline-block;
  width: 100vw;
  width: fit-content;
  height: fit-content;
  margin: auto; */
  padding: 0 0.94rem;
  /* box-sizing: border-box; */
  position: relative;
}

.navigation-buttons {
  /* display: flex;
  flex-direction: row;
  list-style-type: none;
  align-items: center; */
  display: flex;
  justify-content: baseline;
  align-items: center;
  /* overflow: hidden;
  grid-template-columns: 9.06rem 8.43rem 6.39rem 6.45rem 32.49rem 9.56rem;
  grid-template-columns: auto auto auto;
  height: 5rem;
  width: 73.12rem;
  column-gap: 3.12rem;
  justify-self: center;
  align-self: center;
  text-align: center;
  display: inline-block;
  text-align: center;
  justify-content: center; */
}

.navigation-button {
  padding: 1rem 0;
}

/* .menuButtons {
    padding-top: 24px;
} */

.home-page-button {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: black;
  letter-spacing: 0.045rem;
  /* margin-left: 215px;
  margin-left: 215px;
  vertical-align: middle; */
}

.menu-button {
  font-size: 0.875rem;
  color: var(--dark-text-color);
  font-weight: 500;
  /* padding-bottom: 2rem;
  display: grid;
  grid-template-columns: auto;
  row-gap: 1.75rem;
  justify-self: center;
  align-self: center;
  margin-left: 3.13rem;
  border-bottom: 0.25rem solid white;
  padding-bottom: 1.75rem;
  margin-top: 2rem;
  box-sizing: border-box;
  height: 4.75rem; */
  display: block;
  padding: 2rem 0;
  position: relative;
}

.current-page::after {
  border-bottom: 0.25rem solid var(--active-color);
  content: "";
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}

.tablet {
  display: none;
}

.menu-buttons-list {
  display: flex;
  /* grid-template-columns: auto auto auto; */
  gap: 3.12rem;
  /* box-sizing: content-box; */
  /* padding-left: 5.81vw;
  padding-right: 20.62vw; */
  padding: 0 7.12rem 0 5.81rem;
  /* border: 0.25rem solid var(--active-color); */
}

/* .box {
  width: 100%;
  padding-bottom: 1.75rem;
  margin-top: 2rem;
  background-color: green;
  border-bottom: 0.25rem solid white;
  box-sizing: border-box;
} */

/* .menu-button-box {
  display: grid;
  grid-template-columns: auto;
  row-gap: 1.75rem;
} */

/* .navigation-button.menu-buttons {
  align-self: end;
} */

.contact-button {
  font-size: 0.875rem;
  color: var(--grey-color);
  font-weight: 500;
  display: flex;
  /* grid-template-columns: auto auto; */
  gap: 0.62vw;
  /* align-self: center;
  justify-self: center;
  margin-left: 2.5rem;
  padding-left: 0.62rem; */
  /* justify-content: center; */
  align-items: center;
}

.contact-buttons {
  display: flex;
  /* grid-template-columns: auto auto; */
  /* column-gap: 2.5rem; */
  flex-direction: column;
  row-gap: 0.62rem;
  /* align-items: center;
  justify-content: center; */
  flex-wrap: wrap;
}

svg {
  fill: currentColor;
  /* width: 1rem;
  height: 0.74975rem;
  box-sizing: content-box;
  text-align: end;
  margin: 0;
  padding: 0; */
}

/* .contact-button-icon {
  margin-right: 0.62rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  justify-self: center;
} */

.contact-button-icon.mail {
  width: 1rem;
  height: 0.74975rem;
  /* fill: currentColor;
  margin-left: 0.62rem;
  display: inline-block; */
}

.contact-button-icon.smartphone {
  /* fill: currentColor; */
  width: 0.625rem;
  height: 1rem;
}

/* .contact-button-icon-miniature {
  width: 100%;
  height: 100%;
} */

.blue {
  color: var(--active-color);
}

/* .first-menu-button {
  margin-left: 93px;
} */

/* .first-contact-button {
  margin-left: 385px;
} */

/* .menu-button.first-button {
  margin-left: 5.81rem;
} */

/* .contact-button.first-button {
  margin-left: 24.06rem;
} */

.main-sec {
  /* background-color: #2f303a;
  height: 37.5rem; */
  /* text-align: center; */
  display: flex;
  /* align-items: center; */
  justify-content: center;
  align-items: center;
  /* padding: 0;
  box-sizing: border-box;
  padding: 12.5rem 28.25rem;
  display: inline-block;
  width: 43.5rem;
  background-image: var(--main-overlay);
  background-repeat: repeat-y; */
}

.main-content {
  /* width: 43.5rem; */
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.main-box {
  /* width: 100rem; */
  background-image: var(--main-overlay),
    url(../images/small-mobile-screen-vers/bg-pic-main.jpg);
  /* background-color: lightgray;
  background-position-x: 0px;
  background-position-y: -147.517px;
  background-size: 100% 170.667%;
  background-repeat: no-repeat;
  display: inline-block;
  text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-sizing: border-box;
  padding: 12.5rem 28.25vw;
  max-width: 100%; */
  width: 100vw;
  height: 39.06vh;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden;
  /* margin: auto; */
}

.main-title {
  /* vertical-align: middle;
  padding-top: 200px;
  text-align: center; */
  color: white;
  font-weight: 900;
  font-size: 1.625rem;
  letter-spacing: 0.0975rem;
  line-height: 2.625rem;
  /* text-align: center;
  width: 43.5rem;
  display: inline-block; */
}

.mobile {
  display: block;
}

.desktop {
  display: none;
}

.blue-btn {
  background-color: var(--active-color);
  color: white;
  height: 3.125rem;
  width: 12.5rem;
  border-radius: 0.25rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  line-height: 1.875rem;
  letter-spacing: 0.06rem;
}

.request-service-btn {
  /* text-align: center; */
  margin-top: 1.87rem;
  /* overflow: hidden; */
  /* display: block; */
}

/* .our-offer {
  display: grid;
  grid-template-columns: auto;
  height: 48.06rem;
  row-gap: 5.88rem;
  box-sizing: border-box;
  padding: 5.88rem 0;
  width: 100rem;
  background-color: #000000;
  margin: 5.88rem 0;
  margin: auto;
} */

.content-spacing {
  padding: 3.75rem 0.94rem;
}

.our-offer-box {
  /* height: 48.06rem;
  box-sizing: border-box;
  padding: 5.88rem 0;
  display: grid;
  grid-template-columns: auto;
  row-gap: 5.88rem; */
  display: block;
  margin: auto;
  /* width: 100rem;
  height: 48.06rem;
  box-sizing: border-box; */
}

.out-offer-content {
  /* display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 48.06rem; */
  display: flex;
  /* grid-template-columns: auto; */
  gap: 9.16vh;
  flex-direction: column;
  /* align-content: space-evenly;
  align-items: center; */
}

/* .strong-points {
  display: flex;
  align-items: end;
  justify-content: center;
  box-sizing: border-box;
  height: 70%;
  margin-bottom: 5.88rem;
} */

.strong-points-list {
  /* text-align: center;
  margin-top: 94px;
  height: 12.18rem;
  display: flex;
  align-items: end;
  justify-content: center; */
  display: flex;
  justify-content: center;
  /* flex-direction: column; */
  /* grid-template-columns: auto auto auto auto;
  column-gap: 1.88rem;
  display: inline-block;
  background-color: #2196f3;
  width: 73.125rem;
  height: 6.3125rem; */
  row-gap: 1.88rem;
  /* row-gap: 2.92vh; */
  flex-wrap: wrap;
}

.strong-point-box {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: auto;
  grid-template-rows: 0fr; */
  /* width: 16.875rem; */
  gap: 1.88rem;
  width: 100%;
}

.strong-point-frame-icon {
  /* width: 16.875rem; */
  height: 7.5rem;
  border-radius: 0.25rem;
  /* box-sizing: border-box; */
  background-color: var(--light-grey-color);
  /* align-self: center;
  justify-self: center; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* display: block;
  margin-left: auto;
  margin-right: auto; */
}

.strong-point-icon {
  display: block;
  width: 4.375rem;
  height: 4.375rem;
}

/* .strong-point-details {
  height: 6.3125rem;
  width: 16.875rem;
  display: inline-block;
  vertical-align: middle;
  margin-left: 1.88rem;
  background-color: antiquewhite;
} */

.what-we-do-photos {
  /* text-align: center;
  margin-top: 50px; */
  display: flex;
  justify-content: center;
  /* grid-template-columns: auto auto auto; */
  gap: 1.87rem;
  flex-wrap: wrap;
}

.desc-title {
  text-align: left;
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 0.62rem;
  letter-spacing: 0.02625rem;
  color: var(--dark-text-color);
}

.grey-text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--grey-color);
  text-align: left;
  /* line-height: 1.5rem; */
  letter-spacing: 0.02625rem;
}

.section-title {
  font-weight: 700;
  font-size: 1.75rem;
  /* margin-bottom: 3.12rem;
  font-family: "roboto";
  box-sizing: border-box;
  padding-bottom: 3.12rem;
  padding: 0;
  font-style: normal;
  line-height: normal; */
  letter-spacing: 0.0525rem;
  /* text-align: center; */
  color: var(--dark-text-color);
}

.what-we-do-overlay {
  width: 100%;
  height: 4.375rem;
  position: absolute;
  bottom: 0;
  background-color: var(--what-we-do-overlay);
  display: flex;
  justify-content: center;
  align-items: center;
}

.what-we-do-text {
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02625rem;
}

.our-team {
  /* height: 648px; */
  background-color: var(--light-grey-color);
  /* padding-top: 94px;
  margin-top: 47px; */
  text-align: center;
  /* display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0; */
}

.our-team-box {
  /* width: 100rem; */
  background-color: var(--light-grey-color);
  /* display: inline-block;
  box-sizing: border-box;
  height: 40.5rem; */
}

.our-team-content {
  /* display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 28.76rem; */
  display: flex;
  flex-direction: column;
  /* grid-template-columns: auto; */
  /* gap: 4.875vh; */
}

.title-spacing {
  gap: 1.88rem;
}

.what-we-do-box {
  /* margin-top: 94px;
  margin-bottom: 3.13rem;
  height: 35.88rem;
  display: flex;
  align-items: center;
  justify-content: center; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* grid-template-columns: auto; */
  gap: 3.12rem;
  position: relative;
}

.person-box {
  /* width: 16.875rem;
  height: 26.75rem; */
  background-color: white;
  /* box-sizing: border-box; */
  display: flex;
  flex-direction: column;
  /* grid-template-columns: auto;
  grid-template-rows: 0fr auto;
  text-align: center;
  margin-left: 10rem;
  margin-left: 0;
  text-align: center;
  margin-left: 1.87rem;
  margin-bottom: 94px;
  justify-content: space-between; */
  gap: 1.87rem;
  align-items: center;
  border-radius: 0rem 0rem 0.25rem 0.25rem;
  box-shadow: var(--team-box-shadow);
  /* text-align: left; */
}

.person-image {
  /* height: 28.75rem; */
  width: 100%;
}

.person-boxs {
  /* width: 73.125rem;
  display: flex;
  justify-content: space-between; */
  display: flex;
  /* grid-template-columns: auto auto auto auto; */
  gap: 1.87rem;
  flex-wrap: wrap;
  justify-content: center;
}

.person-text {
  font-weight: 500;
  font-size: 1rem;
  /* margin-bottom: 0.63rem;
  line-height: 1.188rem; */
  letter-spacing: 0.03rem;
  /* height: fit-content; */
  color: var(--dark-text-color);
}

.person-position {
  font-weight: 400;
  /* font-size: 1rem; */
  color: var(--grey-color);
  /* line-height: 1.188rem;
  height: fit-content; */
}

.social-icon-frame {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  /* display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--active-color);
  display: flex;
  justify-content: center;
  align-items: center; */
}

.social-icon {
  width: 2.75rem;
  height: 2.75rem;
  fill: var(--icon-color);
  /* display: block; */
  padding: 0.75rem;
  /* box-sizing: border-box; */
}

.social-icons {
  display: flex;
  /* grid-template-columns: auto auto auto auto; */
  gap: 0.62rem;
  /* grid-template-rows: 0fr 0fr;
  box-sizing: border-box;
  padding-top: 1rem; */
}

/* .regular-customers-box {
  width: 100rem;
  display: block;
  margin: auto;
} */

.regular-customers-content {
  display: flex;
  /* grid-template-columns: auto; */
  flex-direction: column;
  align-items: center;
  /* gap: 2.93vh; */
}

.clients-list {
  display: flex;
  /* grid-template-columns: auto auto auto auto auto auto; */
  gap: 1.85rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* .client {
  width: 10.625rem;
  height: 5.75rem;
  box-sizing: border-box;
  border: 1px solid var(--icon-color);
  border-radius: 0.25rem;
  padding: 1rem 2rem;
} */

.client-frame-logo {
  /* display: flex;
  justify-content: center;
  align-items: center; */
  padding: 1rem 3.2rem;
  /* width: 100%;
  height: 5.75rem; */
  box-sizing: border-box;
  border: 1px solid var(--icon-color);
  border-radius: 0.25rem;
  /* flex-wrap: wrap; */
}

.client-logo {
  fill: var(--icon-color);
  width: 6.625rem;
  height: 3.75rem;
  /* padding: 0 calc(50% - 6.625rem);
  margin: auto;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  align-self: center; */
}

.footer-sec {
  background-color: var(--footer-color);
  /* height: 15.6875rem;
  margin-top: 47px;
  text-align: center;
  box-sizing: border-box;
  padding: 3.75rem 0 3.75rem 13.44rem;
  width: 100rem; */
}

.footer-box {
  /* text-align: left; */
  display: flex;
  justify-content: center;
}

.footer-content {
  /* width: 100rem; */
  background-color: var(--footer-color);
  padding: 3.75rem 0.94rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 3.75rem;
  justify-content: center;
  /* grid-template-columns: auto auto auto; */
}

.footer-contact-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  row-gap: 3.75rem;
}

/* .footer-groups-spacing {
  padding-top: 0.31rem;
} */

.social-icons-box {
  display: flex;
  /* grid-template-columns: 0fr;
  grid-template-rows: 0fr 0fr; */
  flex-direction: column;
  align-items: center;
  row-gap: 1.25rem;
}

.footer-contacts {
  /* padding-left: 13.44rem;
  padding-top: 60px;
  background-color: #2f303a;
  height: 15.6875rem;
  box-sizing: border-box;
  width: 100rem;
  display: inline-block;
  padding: 3.75rem 13.44rem; */
  display: flex;
  flex-direction: column;
  /* grid-template-columns: auto; */
  gap: 1.75rem;
  align-items: center;
  /* width: fit-content;
  padding: 5.85vh 0; */
}

.footer.home-page-button {
  /* font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 1.625rem; */
  color: white;
  /* letter-spacing: 0.04875rem;
  height: 1.9375rem;
  display: inline-block;
  line-height: 1.9375rem;
  display: inline-block;
  height: 1.9375rem; */
}

/* .footer-home-page-button span {
  line-height: 1.9375rem;
} */

.contacts {
  /* margin-top: 28px; */
  font-style: normal;
  /* display: block;
  height: 4.5rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* grid-template-columns: auto; */
  gap: 0.75rem;
  width: 14.4375rem;
}

.contact {
  color: var(--grey-color);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1rem;
  /* margin-top: 0.75rem; */
  /* display: inline-block; */
}

.address {
  color: white;
  /* margin-top: 1.75rem; */
  /* display: grid;
  grid-template-columns: auto;
  row-gap: 0.75rem; */
}

.footer.desc-title {
  color: white;
  /* font-size: 0.875rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.02625rem; */
  text-transform: uppercase;
  margin: 0;
}

.footer.social-icon-frame {
  background-color: var(--dark-icon-color);
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

* {
  margin: 0;
  padding: 0;
}

/* .strong-points > div:first-of-type {
  margin-left: 0;
  background-color: burlywood;
} */

/* .what-we-do-photos > img:first-of-type {
  margin-left: 0;
} */

/* .person-boxs > div:first-of-type {
  margin-left: 0rem;
} */

.person-about {
  /* height: 6.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #000000; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 1.5rem;
  /* flex: 2 1 20px;
  justify-self: center;
  grid-template-rows: 0fr;
  justify-self: center;
  align-self: flex-end;
  grid-template-columns: auto; */
}

.person-about-desc {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: auto; */
  gap: 0.62rem;
}

/* .footer {
  display: flex;
  align-items: center;
  text-align: left;
  justify-content: center;
} */

.menu-button:hover,
.menu-button:focus {
  /* cursor: pointer; */
  /* box-sizing: border-box; */
  color: var(--active-color);
  /* border-bottom: 0.25rem solid currentColor; */
  transition: color var(--transition);
}

/* .box:hover,
.box:focus {
  border-bottom: 0.25rem solid var(--active-color);
  color: green;
  cursor: pointer;
} */

.active:focus,
.active:hover {
  /* fill: var(--active-color); */
  color: var(--active-color);
  transition: color var(--transition);
}

.blue-btn:focus,
.blue-btn:hover {
  cursor: pointer;
  box-shadow: var(--blue-btn-field-shadow);
  transition: box-shadow var(--transition), background-color var(--transition);
  background-color: var(--selected-blue-btn-color);
  /* transition: 250ms cubic-bezier(0.4, 0, 0.2, 1); */
}

.social-icon-frame:focus,
.social-icon-frame:hover {
  background-color: var(--active-color);
  transition: background var(--transition);
}

.social-icon:hover,
.social-icon:focus {
  cursor: pointer;
  fill: var(--light-btn);
  transition: fill var(--transition);
}

/* .client:hover,
.client:focus {
  border-color: var(--active-color);
} */

.client-frame-logo:hover,
.client-frame-logo:focus {
  border-color: var(--active-color);
  transition: border var(--transition);
}

.client-frame-logo:hover .client-logo,
.client-frame-logo:focus .client-logo {
  fill: var(--active-color);
  cursor: pointer;
  transition: fill var(--transition);
}

/* .extended-line {
  height: 0.0625rem;
  background-color: var(--line-color);
} */

.line {
  height: 0.0625rem;
  background-color: var(--line-color);
  /* width: 100rem; */
}

/* .product {
  width: 23.125rem;
  height: 25.25rem;
  display: inline-block;
  display: grid;
  width: 23.125rem;
  height: 25.25rem;
  border: 1px solid #eee;
  margin-right: 1.88rem;
  margin-bottom: 1.88rem;
  box-sizing: border-box;
} */

.product-box > img {
  /* height: 18.375rem;
  box-sizing: border-box; */
  width: 100%;
  /* height: 100%;
  margin: 0;
  padding: 0; */
}

.product-image {
  width: 100%;
}

.product-about-content > h4 {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--dark-text-color);
  line-height: 2.25rem;
}

.product-about-content > p {
  color: var(--grey-color);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.875rem;
}

.products-list {
  /* display: flex;
  flex-direction: row;
  display: inline-block;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  width: 10rem; */
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 1.88rem;
  row-gap: 1.88rem;
}

/* .products > div {
  width: 73.375rem;
  display: grid;
  background-color: #000000;
} */

/* .products {
  display: flex;
  align-items: center;
  justify-content: center;
  display: grid;
  background-color: #000000;
  margin-right: 0;
  margin-bottom: 0;
} */

.products-page-content {
  /* width: 73.125rem;
  height: 85rem;
  display: inline-block; */
  width: fit-content;
  height: fit-content;
}

.products-navigation-menu {
  /* display: flex;
  align-items: baseline;
  justify-content: center;
  height: 5.5rem; */
  height: fit-content;
  /* box-sizing: border-box; */
  padding: 0 20.44rem 3.13rem 20.44rem;
}

.products-menu-buttons {
  /* display: flex;
  flex-direction: row;
  list-style-type: none; */
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  column-gap: 0.5rem;
  /* box-sizing: border-box;
  padding: 0.38rem 1.37rem; */
}

.products-menu-button {
  /* width: 4rem;
  height: 2.375rem; */
  background-color: var(--light-grey-color);
  /* margin-left: 0.5rem; */
  border-radius: 0.25rem;
  /* outline: none; */
  border: none;
  /* box-sizing: border-box; */
  padding: 0.38rem 1.37rem;
  /* font-size: 1rem; */
  font-weight: 500;
  line-height: 1.625rem;
  letter-spacing: 0.03rem;
  /* font-family: "Roboto", sans-serif; */
}

/* .products-menu-buttons > li:first-of-type button {
  margin-left: 0;
  background-color: #000000;
} */

.products-menu-button:hover,
.products-menu-button:focus {
  background-color: var(--active-color);
  color: var(--light-btn);
  box-shadow: var(--products-nav-shadow);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition),
    box-shadow var(--transition);
}

.products-page {
  /* display: flex;
  align-items: center;
  justify-content: center;
  height: 96.75rem;
  background-color: #000000;
  margin: 0; */
  text-align: center;
  /* box-sizing: border-box;
  padding: 5.88rem 13.44rem;
  width: 100rem;
  height: 96.75rem;
  display: inline-block; */
}

.products-page-box {
  /* text-align: center; */
  display: inline-block;
  /* box-sizing: border-box; */
  padding: 5.88rem 13.44rem;
  /* width: 100rem;
  height: 96.75rem; */
  width: fit-content;
  height: fit-content;
}

/* .products-page > div {
  height: 85rem;
  background-color: #000000;
} */

.product-box {
  width: 23.125rem;
  height: 25.25rem;
  border: 1px solid var(--product-box-border-color);
  box-sizing: border-box;
  /* justify-items: stretch;
  justify-self: auto;
  width: 100%;
  height: 100%;
  margin-right: 1.88rem;
  margin-bottom: 1.88rem;
  background-color: #000000;
  display: inline-block; */
  position: relative;
  overflow: hidden;
}

.product-content {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0fr;
}

.product-overlay {
  width: 100%;
  height: 18.3175rem;
  top: 0;
  left: 0;
  background-color: var(--transparent-blue);
  position: absolute;
  color: white;
  padding: 3.94rem 1.5rem 0;
  transform: translateY(100%);
}

.product-desc {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.03375rem;
  text-align: left;
}

.product-box:hover .product-overlay {
  transform: translateY(0);
  transition: transform var(--transition-bot-to-top);
}

/* .products-list {
  display: inline-block;
  text-align: center;
  display: grid;
  grid-row: 3;
  grid-column: 3;
} */

.product-about {
  /* text-align: left; */
  display: flex;
  align-items: center;
  height: 6.88rem;
  /* box-sizing: border-box; */
  /* width: 23.125rem; */
  flex-direction: column;
  justify-content: center;
  /* margin-left: 1.5rem;
  box-sizing: border-box;
  padding: 1.25rem;
  display: flex;
  text-align: left; */
  z-index: 1;
  background-color: white;
}

.product-about-content {
  /* height: 6.87rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; */
  display: flex;
  width: 20.125rem;
  height: 4.325rem;
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
}

/* .product-3,
.product-6,
.product-9 {
  margin-right: 0rem;
} */

/* .product-7,
.product-8,
.product-9 {
  margin-bottom: 0rem;
} */

.contact:hover,
.contact:focus {
  color: var(--active-color);
  transition: color var(--transition);
}

.product:hover,
.product:focus {
  cursor: pointer;
  /* box-shadow: 0px 2px 2px 0px, rgba(0, 0, 0, 0.12),
    0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 3px 1px 0px rgba(0, 0, 0, 0.1); */
  box-shadow: var(--products-box-shadow);
  transition: box-shadow var(--transition-slower);
}

.product-box:hover,
.product-box:focus {
  color: var(--transparent-blue);
  transition: color 250ms ease-in-out;
  z-index: -1;
}

.current-page {
  color: var(--active-color);
}

/* .current-page.box {
  border-bottom: 0.25rem solid var(--active-color);
} */

.products-current-filter {
  background-color: var(--active-color);
  color: var(--light-btn);
  box-shadow: var(--products-nav-shadow);
}

/* .product-1 {
  display: grid;
  grid-row: 3;
} */

/* .products-page div {
  background-color: #000000;
} */

.hidden {
  display: none;
}

/* .products-page-box.web-site,
.products-page-box.marketing,
.products-page-box.apps,
.products-page-box.design,
.products-page-content.web-site,
.products-page-content.apps,
.products-page-content.marketing,
.products-page-content.design {
  height: 43.2rem;
  align-items: baseline;
  box-sizing: border-box;
  padding: 5.88rem 0 0 0;
  height: fit-content;
  width: fit-content;
} */

/* .products-page-box.web-site > div,
.products-page-box.marketing > div,
.products-page-box.apps > div,
.products-page-box.design > div {
  height: fit-content;
} */

/* .products-page.apps {
  height: 50.3rem;
} */

/* .product-page.design {
  height: 50.3rem;
} */

/* .product-page.marketing {
  height: 50.3rem;
} */

/* body.studio {
  height: 100rem;
  width: 146.75rem;
} */

/* body.portfolio {
  height: 1879;
  width: ;
} */

/* .navigation-menu,
.main-box {
  width: 100rem;
  height: 146.75rem;
  display: inline-block;
} */

/* .studio-page {
  height: 146.75rem;
  width: 100rem;
  display: flex;
} */

/* window */

.window {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--backdrop);
  transition: opacity var(--transition-slow);
}

.window-content {
  /* width: 33rem;
  height: 36.3125rem; */
  background-color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0.25rem;
  box-shadow: var(--window-shadow);
  transition: transform var(--transition-slow);
}

.close-btn {
  cursor: pointer;
  outline: none;
  width: 1.875rem;
  height: 1.875rem;
  padding: 0;
  border: none;
  background-color: white;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

.is-hidden {
  visibility: hidden;
  pointer-events: auto;
  opacity: 0.8;
}

.is-hidden .window-content {
  transform: scale(0.8);
}

.close-icon {
  width: 1.125rem;
  height: 1.125rem;
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  fill: currentColor;
}

.close-btn-stroke {
  stroke-width: 1px;
  stroke: var(--close-btn-stroke);
  fill: white;
  width: 1.875rem;
  height: 1.875rem;
}

.close-icon-frame {
  width: 100%;
  height: 100%;
}

.close-btn-stroke:hover + .close-icon,
.close-btn-stroke:focus + .close-icon,
.close-icon:hover,
.close-icon:focus {
  fill: var(--active-color);
  transition: fill var(--transition);
}

/* Subscribe form */

.subs-form {
  /* padding: 0.31rem 0 0 5.81rem; */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: center;
  /* padding: 0; */
}

.subs-group {
  display: flex;
  column-gap: 0.75rem;
  row-gap: 1.25rem;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}

.subs-btn {
  position: relative;
  text-align: left;
  padding: 0 2.69rem;
}

.subs-btn-icon {
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  top: 0.81rem;
  left: 9.25rem;
}

.subs-field {
  background-color: transparent;
  width: calc(100vw - 0.92rem * 2);
  height: 3.125rem;
  border-radius: 0.25rem;
  border: 1px solid var(--subs-field-border);
  padding: 0.94rem 1rem;
  color: white;
}

.subs-field::placeholder {
  color: var(--subs-placeholder);
}

.subs-field:hover,
.subs-field:focus {
  box-shadow: var(--blue-btn-field-shadow);
  transition: box-shadow var(--transition);
}

/* Request service form */

.req-serv {
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
}

.field-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  position: absolute;
  top: 50%;
  left: 0.75rem;
}

.req-serv-title {
  color: var(--dark-text-color);
  /* text-align: center; */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.0375rem;
  /* align-self: center;
  line-height: normal; */
  text-align: center;
}

.req-serv-fields {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  margin: 0.75rem 0 1.25rem;
  width: 100%;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.field-text {
  color: var(--grey-color);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.0075rem;
  /* line-height: normal; */
}

.field-box {
  width: 100%;
  padding: 0 0.75rem 0 2.62rem;
  height: 2.5rem;
  border-radius: 0.25rem;
  border: 1px var(--grey-border);
  color: black;
}

.comments .field-box {
  height: 6rem;
  padding: 0.75rem 1rem;
  overflow: hidden;
  resize: none;
}

.comments .field-box::placeholder {
  color: var(--comments-placeholder);
}

.field-box:focus + .field-icon,
.field-box:hover + .field-icon {
  fill: var(--active-color);
  transition: fill var(--transition);
}

.field-box:focus,
.field-box:hover {
  border-color: var(--active-color);
  transition: border var(--transition);
}

/* terms and conditions checkbox */

.t-and-c {
  margin-bottom: 1.87rem;
  position: relative;
  cursor: pointer;
  /* display: flex; */
  align-self: baseline;
  /* margin-left: 2.25rem; */
}

.t-and-c-tick {
  width: 1rem;
  height: 0.9375rem;
  display: inline-block;
  position: absolute;
  top: 0.2rem;
  /* left: 0.655rem; */
}

.tick-icon {
  width: inherit;
  height: inherit;
}

.t-and-c-link {
  text-decoration: underline;
  color: var(--active-color);
}

.t-and-c-checkbox {
  display: none;
}

.t-and-c-text {
  margin: 0 0.62rem 0 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.0225rem;
  /* align-self: flex-start; */
}

.unticked {
  opacity: 1;
}

.ticked {
  opacity: 0;
}

.t-and-c-checkbox:checked ~ .unticked {
  opacity: 0;
  transition: opacity var(--transition);
  /* color: var(--active-color); */
}

.t-and-c-checkbox:checked ~ .ticked {
  opacity: 1;
  transition: opacity var(--transition);
}

/* .t-and-c-checkbox:checked ~ .t-and-c-text {
  color: var(--active-color);
} */

/* mobile version */

@media screen and (min-width: 428px) {
  .main-box {
    background-image: var(--main-overlay),
      url(../images/mobile-vers/bg-pic-main.jpg);
  }

  .person-image {
    width: 24.87rem;
  }

  .subs-field {
    width: 24.87rem;
  }

  .mobile-menu-social-links {
    flex-direction: row;
  }

  .mobile-menu-social-link.third {
    padding-left: 0.62rem;
    border-left: 0.0625rem var(--grey-border);
  }
}

/* tablet version*/

@media screen and (min-width: 768px) {
  .main-box {
    background-image: var(--main-overlay),
      url(../images/tablet-vers/bg-pic-main.jpg);
  }

  .strong-point-box {
    width: calc(50% - 1.88rem / 2);
  }

  .strong-points-list {
    column-gap: 1.87rem;
  }

  .navigation-buttons {
    justify-content: center;
  }

  .navigation-button {
    padding: 0;
  }

  .person-image {
    /* height: 23.375rem; */
    width: 22.125rem;
  }

  .client-frame-logo {
    padding: 1rem 3.7rem;
  }

  .social-icons-box {
    padding: 0.31rem 0 0 10.31rem;
  }

  .footer-content {
    padding: 3.75rem 4.75rem;
    /* flex-direction: row; */
  }

  .subs-field {
    width: 28.125rem;
  }

  .footer-contact-group {
    flex-direction: row;
  }

  .mobile {
    display: none;
  }

  .tablet {
    display: block;
  }
}

/* laptop version */

@media screen and (min-width: 1158px) {
  .contact-buttons {
    column-gap: 2.5rem;
    flex-direction: row;
  }

  .menu-buttons-list {
    padding: 0 21.19vw 0 5.81vw;
    gap: 3.12vw;
  }

  .main-box {
    height: 58.59vh;
    background-image: var(--main-overlay),
      url(../images/laptop-vers/bg-pic-main-small.jpg);
  }

  .main-title {
    font-size: 2.75rem;
    letter-spacing: 0.165rem;
    line-height: 3.75rem;
  }

  .tablet {
    display: none;
  }

  .desktop {
    display: block;
  }

  .strong-point-box {
    width: 16.875rem;
  }

  .content-spacing {
    padding: 5.87rem 0.94rem;
  }

  .title-spacing {
    gap: 3.12rem;
  }

  .section-title {
    letter-spacing: 0.0675rem;
    font-size: 2.25rem;
  }

  .person-image {
    /* height: 16.25rem; */
    width: 16.875rem;
  }

  .person-about {
    padding-bottom: 1.88rem;
  }

  .client-frame-logo {
    width: 10.625rem;
    padding: 1rem 2rem;
  }

  .subs-field {
    width: 22.375rem;
  }

  .home-page-button {
    font-size: 1.625rem;
    letter-spacing: 0.04875rem;
  }

  .t-and-c-text {
    margin: 0 0 0 2.25rem;
    font-size: 0.875rem;
    letter-spacing: 0.02625rem;
  }

  .t-and-c-tick {
    top: 0.1rem;
    left: 0.655rem;
  }

  .footer-content {
    padding-left: 0.48rem;
    padding-right: 0.48rem;
  }
}

/* desktop version */

@media screen and (min-width: 1280px) {
  .contacts,
  .footer-contacts,
  .social-icons-box,
  .subs-form {
    align-items: baseline;
  }

  .subs-group {
    flex-direction: row;
  }

  .subs-form {
    padding: 0.31rem 0 0 5.81rem;
  }

  .footer-content {
    flex-direction: row;
  }
}