@import url("./fonts.css");
:root {
  --dark-blue: #080828;
  --white: #fff;
  --black: #000;
  --text-color: #19191e;
  --body-text-color: #5e5e61;
  --gold: #c89d66;
  --gold-dark: #b8905e;
}
.flex {
  display: flex;
}

.hidden {
  display: none;
}

.active {
  display: block;
}

.close {
  position: relative;
  display: none;
  width: 40px;
  height: 40px;
  border: 3px solid var(--white);
  border-radius: 50%;
}

.close::before,
.close::after {
  content: "";
  position: absolute;
  width: 3px;
  top: 4px;
  left: 16px;
  height: 28px;
  background-color: var(--white);
}

.close::after {
  transform: rotate(45deg);
}

.close::before {
  transform: rotate(-45deg);
}

.flex-between {
  justify-content: space-between;
}

.hidden {
  display: none !important;
}

.offer__swiper {
  display: none;
}

.partners__swiper {
  display: none;
}

.product__swiper {
  /* background-color: #080828; */
  display: none;
}

.btn {
  background: var(--gold);
  border-radius: 2px;
  padding: 16px 56px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--white);
}

.btn:hover {
  background-color: var(--gold-dark);
}

html {
  box-sizing: border-box;
}

*,
::before,
::after {
  box-sizing: inherit;
}

body {
  min-width: 320px;
  font-weight: 400;
  font-family: "Mardoto", sans-serif;
}

img {
  max-width: 100%;
}

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

button {
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin: 0;
}

.section__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color);
}

.section__title {
  color: var(--text-color);
  font-size: 48px;
  line-height: 56px;
  margin-bottom: 24px;
  text-align: center;
}

.section__descr {
  color: var(--text-color);
  font-size: 20px;
  line-height: 150%;
  text-align: center;
  max-width: 668px;
  margin-bottom: 24px;
}

.section {
  padding: 92px 0;
}

.container {
  max-width: 1396px;
  padding: 0px 15px;
  margin: 0 auto;
}

.mobile,
.tablet {
  display: none;
  cursor: pointer;
}
.tablet-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tablet-item {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  font-size: 30px;
  color: var(--gold);
  font-weight: 900;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 10px;
}

.tablet-item:active {
  background-color: rgba(255, 255, 255, 0.1);
}

.hidden-as-language {
  display: none !important;
}

.mobile-call-btn {
  width: 52px;
  height: 52px;
  border-radius: 100px;
  background-color: var(--gold);
  color: var(--white);
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 999;
}

.mobile-call-btn:hover {
  background-color: var(--gold-dark);
}

/*header*/

.homepage-logo-link {
  color: var(--white);
}

.catalog-logo-link {
  color: var(--black);
}

.burger__list {
  display: none;
}

.mobile__block {
  width: 78px;
  height: 31px;
  background-color: var(--white);
}

.mail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-grow: 1;
}

.mail .header__contact.mail {
  text-decoration: none;
}

.header__contact {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--white);
}

.header__languages {
  margin-left: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header__top {
  background-color: #0b0b0c;
  padding-top: 6px;
  padding-bottom: 6px;
}

.header__bottom {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  padding: 14px 0;
  z-index: 2;
}

.header__bottom > .flex {
  align-items: center;
}

.header__block {
  width: 203px;
  height: 52px;
  background-color: var(--white);
}

.header__list {
  display: flex;
  gap: 32px;
}

.header__item {
  color: var(--white);
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
}

.header__item.active {
  text-decoration: underline;
}

.header__number {
  cursor: pointer;
  line-height: 8px;
}
/*main*/

/* General */
.general {
  position: relative;
  background-image: url("../assets/images/general-background-1920.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 240px 0 190px 0;
  max-width: 1920px;
  margin: 0 auto;
}

.general__background {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
  height: max-content;
}

.general__block {
  max-width: 668px;
}

.general__title {
  font-weight: 700;
  font-size: 80px;
  line-height: 94px;
  color: var(--white);
  margin-bottom: 32px;
}

.general__descr {
  font-weight: 400;
  font-size: 20px;
  line-height: 150%;
  color: var(--white);
  margin-bottom: 56px;
}

.general__button {
  background: #c89d66;
  border-radius: 2px;
  padding: 16px 56px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--white);
}

/* Offer */

.offer__list {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  gap: 32px;
}

.offer__item {
  box-shadow: 0px 3px 15px -3px rgba(0, 0, 0, 0.1);
  padding: 42px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
  min-width: 275px;
}

.offer__block {
  width: 87px;
  height: 87px;
  margin-bottom: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.offer__name {
  font-size: 20px;
  line-height: 150%;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 12px;
}

.offer__text {
  font-size: 16px;
  line-height: 150%;
  text-align: center;
  color: var(--body-text-color);
}

/* Partners */
.partners {
  padding: 82px 0;
  background-color: #f4f4f5;
}

.partners__list {
  display: flex;
  justify-content: center;
}

.partners__item {
  padding: 21px 35.4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Products */
.products:not(:last-child) {
  padding-bottom: 0;
}

.products > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product__list {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 42px;
  flex-wrap: wrap;
}

.product__item {
  padding: 46px;
  max-width: 434px;
  display: flex;
  flex-direction: column;
}

.product__image {
  height: 484px;
  align-self: center;
  margin-bottom: 52px;
}

.product__image1 {
  height: 484px;
  align-self: center;
  margin-bottom: 12px;
}

.product__name {
  font-size: 24px;
  line-height: 28px;
  color: var(--text-color);
  white-space: nowrap;
  margin-bottom: 10px;
}

.rating {
  max-width: 140px;
  display: flex;
  gap: 10px;
}

.star {
  width: 19px;
  height: 19px;
}

.product__flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 12px;
}

.product__descr {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product__descr .show-more-btn {
  margin-top: 12px;
  text-align: center;
}

.col {
  display: flex;
  gap: 12px;
}

.product__key {
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-color);
  white-space: nowrap;
}

.product__ceilling,
.product__wall,
.product__floor {
  max-width: 272px;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: var(--body-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* About us */
.aboutus {
  position: relative;
  z-index: -1;
  padding: 168px;
  background-image: url("../assets/images/about-us-1920.png");
  background-position: 40% top;
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 1920px;
  margin: 0 auto;
}

.aboutus__filter {
  z-index: -1;
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.aboutus__box {
  z-index: 1000;
  max-width: 667px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aboutus__title,
.aboutus__descr {
  color: var(--white);
}

.aboutus__descr {
  margin-bottom: 0;
}

/* works */
.gallery {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 1fr);
}

.gallery .item {
  position: relative;
  cursor: pointer;
}

.gallery .item:not(:first-of-type) {
  min-height: 300px;
  min-width: 300px;
}

.gallery .item:last-of-type {
  display: none;
}

.gallery .item:first-of-type {
  grid-row: 1 / span 2;
  grid-column: 1 / span 2;
}

.gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.gallery .item .zoom {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
}

.gallery .item .zoom svg {
  pointer-events: none;
}

.gallery .item .zoom:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--white);
}

/*
 *  Gallery modal
 */

#gallery-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 999;
  display: none;
  flex-direction: column;
}

#gallery-modal.is-open {
  display: flex;
}

#gallery-modal .header {
  display: flex;
  justify-content: flex-end;
  padding: 18px;
}

#gallery-modal .images {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 18px;
  padding-right: 18px;
}

#gallery-modal .images .current-image {
  max-height: 100%;
  height: 100%;
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#gallery-modal .images .current-image #info .name,
#gallery-modal .images .current-image #info .location,
#gallery-modal .images .current-image #info .elevators-count,
#gallery-modal .images .current-image #info .types,
#gallery-modal .images .current-image #info .date {
  display: flex;
  align-items: center;
  gap: 4px;
}

#gallery-modal .images .current-image img {
  max-height: calc(100vh - 156px);
  min-width: 60%;
  object-fit: contain;
}

#gallery-modal .images .current-image #info {
  position: absolute;
  width: 100%;
  bottom: 18px;
  left: 18px;
  color: var(--white);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#gallery-modal .images .slider-arrow:disabled {
  opacity: 0.45;
  cursor: default;
}

/*------------------*/

.our-works {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.our-works__item {
  position: relative;
  cursor: pointer;
  max-width: 328px;
  min-width: 296px;
}

.our-works__item img {
  object-fit: contain;
  height: 100%;
  object-position: center center;
}

.our-works__item__zoom {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
}

.our-works__item__zoom:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: var(--white);
}

.works {
  padding-bottom: 65px;
}

.works__album {
  height: 700px;
  width: 100%;
  background-color: #080828;
  display: flex;
}

.work__main {
  width: 50%;
  background-color: #5e5e61;
}

.work__images {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
}

.work__img {
  position: relative;
  width: 50%;
  height: 50%;
  background-color: #c89d66;
  border: 1px solid #080828;
}

.last {
  width: 100%;
  height: 100%;
}

.images__link {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 118px 93px;
  background-color: rgba(0, 0, 0, 0.7);
  text-align: center;
  font-weight: 700;
  font-size: 80px;
  line-height: 94px;
  color: #ffffff;
}

.link__text {
  margin-top: 6px;
  font-size: 16px;
  line-height: 19px;
  text-transform: capitalize;
  text-decoration-line: underline;
  color: #ffffff;
  display: block;
}

/*
  Catalog
*/

.catalog {
  padding-bottom: 48px;
}

.catalog-container {
  display: flex;
  justify-content: space-between;
}

#elevator-types-form .title {
  font-weight: 600;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

#elevator-types-form .title .arrow {
  color: var(--body-text-color);
  pointer-events: none;
}

#elevator-types-form .title .arrow.up {
  transform: rotate(180deg);
}

.catalog__block {
  background-color: var(--black);
}

.catalog__nav .header__item {
  color: var(--black);
}

.catalog__filters {
  width: 23.5%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter__block {
  padding: 32px;
  border: 1px solid rgba(184, 182, 182, 0.5);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  max-width: 320px;
  width: 100%;
}

.label {
  display: flex;
  align-items: center;
  column-gap: 12px;
  cursor: pointer;
}

.catalog-filter-property.hidden {
  display: none;
}

.custom__radio {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gold);
}

.custom__radio-selected::before {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  right: 2.5px;
  bottom: 2.5px;
  border-radius: 50%;
  content: "";
  background-color: var(--gold);
}

.custom__checkbox {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(89, 89, 107, 0.5);
  border-radius: 2px;
}

.custom__checkbox-checked {
  background-color: var(--gold);
  border-radius: var(--gold);
}

.custom__checkbox-checked::before {
  position: absolute;
  content: "";
  right: 4px;
  top: 3px;
  height: 9px;
  width: 2px;
  border-radius: 2px;
  background-color: #fff;
  transform: rotate(40deg);
}

.custom__checkbox-checked::after {
  position: absolute;
  content: "";
  height: 7px;
  left: 5px;
  top: 5.5px;
  border-radius: 2px;
  width: 2px;
  background-color: #fff;
  transform: rotate(-45deg);
}

.price__block {
  display: flex;
  gap: 12px;
}

.rect {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #433535;
}

.color__name {
  font-size: 16px;
  line-height: 150%;
  color: #19191e;
}

.colors {
  display: flex;
  gap: 18px;
}

.color {
  position: relative;
  width: 31px;
  height: 31px;
  border-radius: 50%;
}

.color-selected {
  border: 1px solid var(--gold);
}

.black::before,
.brown::before,
.red::before,
.yellow::before,
.green::before {
  position: absolute;
  content: "";
  top: 3px;
  left: 3px;
  right: 3px;
  border-radius: 50%;
  bottom: 3px;
}

.black::before {
  background-color: black;
}

.brown::before {
  background-color: brown;
}

.red::before {
  background-color: red;
}

.yellow::before {
  background-color: yellow;
}

.green::before {
  background-color: green;
}

.catalog__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 75%;
  max-width: 1020px;
  row-gap: 50px;
  justify-content: space-evenly;
}

.catalog__item {
  max-width: 320px;
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.catalog__item .product__image1 {
  object-fit: scale-down;
}

.catalog__item .product__box {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.catalog__item .divider {
  flex-grow: 1;
}

.catalog__item .product__box .btn {
  margin-top: 18px;
  text-align: center;
  white-space: nowrap;
}

.pagination__list {
  position: absolute;
  display: flex;
  gap: 8px;
  right: 30px;
  bottom: -72px;
}

.pagination__item {
  padding: 12px 16px;
  border-radius: 2px;
  color: #848389;
}

.pagination__item-selected {
  color: var(--white);
  background: var(--gold);
}

/* Footer */

.footer__top {
  background-color: #f4f4f5;
  padding: 32px 0 43px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer__text {
  text-transform: capitalize;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
  color: var(--text-color);
}

.social {
  display: flex;
  gap: 14.4px;
}

.social__media {
  width: 40.7px;
  height: 40.7px;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer__bottom {
  display: flex;
  justify-content: center;
  padding: 14px 0;
}

.bottom__text {
  font-size: 12px;
  line-height: 150%;
  color: #19191e;
  opacity: 0.7;
}

/*
  Product modal
*/

#product-modal {
  padding: 16px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.65);
  height: 100vh;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9;
  cursor: pointer;
}

#product-modal .content {
  max-width: 864px;
  width: 100%;
  max-height: 100%;
  height: max-content;
  background-color: var(--white);
  position: relative;
  padding: 46px;
  cursor: default;
}

#product-modal .content .close-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  height: 32px;
  width: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#product-modal .content .product-info {
  min-height: 576px;
  height: 100%;
  display: flex;
  gap: 28px;
}

#product-modal .content .product-info .image-container {
  max-width: 339px;
  width: 100%;
}

#product-modal .content .product-info .image-container img {
  object-fit: cover;
  object-position: center center;
  height: 100%;
}

#product-modal .content .product-info .description {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#product-modal .content .product-info .description .name {
  color: var(--text-color);
  font-size: 32px;
  font-weight: 700;
  padding-bottom: 16px;
  border-bottom: 1px solid #c7c5c5;
}

#product-modal .content .product-info .description .properties {
  display: flex;
  padding-top: 16px;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex-grow: 1;
}

#product-modal
  .content
  .product-info
  .description
  .properties::-webkit-scrollbar,
#product-modal
  .content
  .product-info
  .description
  .properties::-webkit-scrollbar-thumb {
  width: 4px;
  border-radius: 4px;
}

#product-modal
  .content
  .product-info
  .description
  .properties::-webkit-scrollbar {
  background: transparent;
}

#product-modal
  .content
  .product-info
  .description
  .properties::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

#product-modal .content .product-info .description .properties .property {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#product-modal
  .content
  .product-info
  .description
  .properties
  .property
  .label {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
  white-space: nowrap;
}

#product-modal .content .product-info .description #product-modal-qr-code {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

#product-modal
  .content
  .product-info
  .description
  .properties
  .property
  .property-content {
  color: var(--body-text-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

/*
  Mobile menu
*/

#mobile-menu {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: var(--black);
  display: none;
  flex-direction: column;
}

#mobile-menu.opened {
  display: flex;
}

#mobile-menu .header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 56px;
  position: sticky;
  top: 0;
}

#mobile-menu .header .logo {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

#mobile-menu .header .close-btn {
  position: absolute;
  right: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mobile-menu .navigation {
  color: var(--white);
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
}

#mobile-menu .navigation .link {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  padding-top: 8px;
  padding-bottom: 8px;
}

#mobile-menu .navigation .link.active {
  text-decoration: underline;
}

#mobile-menu .languages {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 18px;
}

#mobile-menu .languages .language {
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

/*
  Media queries
*/

@media only screen and (max-width: 1536px) {
  .general {
    background-image: url("../assets/images/general-background-1536.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-1536.png");
  }
}

@media (max-width: 1350px) {
  .product__item {
    padding: 10px;
  }
}

@media only screen and (max-width: 1280px) {
  .general {
    background-image: url("../assets/images/general-background-1280.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-1280.png");
  }
}

@media (max-width: 1100px) {
  .product__box {
    padding: 10px;
  }

  .works__album {
    height: 600px;
  }

  .images__link {
    padding: 70px 49px;
    font-size: 65px;
    line-height: 65px;
  }

  .catalog-container {
    flex-direction: column;
  }

  .catalog__list {
    width: 100%;
  }
  .catalog__filters {
    width: 100%;
    margin-top: 32px;
  }

  #elevator-types-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: unset;
    gap: 32px;
  }

  #elevator-types-form .title {
    grid-column: 1 / span 3;
  }
}

@media only screen and (max-width: 1024px) {
  .general {
    background-image: url("../assets/images/general-background-1024.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-1024.png");
  }
}

@media (max-width: 990px) {
  .product__list {
    width: 100%;
    justify-content: space-around;
  }

  .product__item:nth-child(3) {
    display: none;
  }

  .partners__list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: center;
  }
}

@media only screen and (max-width: 980px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }

  .gallery .item:last-of-type {
    display: initial;
  }

  .gallery .item:first-of-type {
    grid-row: unset;
    grid-column: unset;
  }
}

@media (max-width: 900px) {
  .work__main {
    display: none;
  }

  .work__images {
    width: 100%;
  }

  #elevator-types-form {
    grid-template-columns: repeat(2, 1fr);
  }

  #elevator-types-form .title {
    grid-column: 1 / span 2;
  }
}

@media (max-width: 780px) {
  .catalog-logo-link {
    color: var(--white);
  }

  .mobile-call-btn {
    display: flex;
  }

  .header__top {
    background-color: unset;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header__top #controls {
    display: none;
  }

  .header__bottom {
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
    padding: 0;
  }

  .header__bottom .header__list {
    display: none;
  }

  .burger {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
  }

  .tablet {
    display: block;
  }
  .burger::before {
    content: "";
    position: absolute;
    width: 21px;
    height: 2px;
    background-color: var(--gold);
    top: 11px;
    right: 0;
  }

  .burger::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background-color: var(--gold);
    bottom: 11px;
    right: 0;
  }

  .header__nav {
    position: relative;
  }

  .burger__list {
    position: fixed;
    z-index: 10000;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.9);
  }

  .header__item {
    padding: 20px 82px;
    cursor: pointer;
    border: 0.5px solid var(--text-color);
    color: var(--white);
    font-weight: 400;
    font-size: 20px;
    line-height: 150%;
  }

  .close {
    display: block;
    margin: 20px 20px 20px auto;
  }

  .header__item:active {
    background-color: var(--text-color);
  }

  #gallery-modal .images .current-image {
    align-items: flex-start;
  }

  #gallery-modal .images .current-image #info {
    left: 0;
    gap: 12px;
  }

  #gallery-modal .images .current-image #info .name,
  #gallery-modal .images .current-image #info .location,
  #gallery-modal .images .current-image #info .elevators-count,
  #gallery-modal .images .current-image #info .types,
  #gallery-modal .images .current-image #info .date {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media only screen and (max-width: 918px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
  }
}

@media (max-width: 750px) {
  #product-modal .content .product-info .image-container img {
    max-height: 279px;
  }

  #gallery-modal .images {
    padding-left: 12px;
    padding-right: 12px;
  }

  #gallery-modal .images .slider-arrow svg {
    width: 32px;
    height: 32px;
  }

  .gallery .item .zoom:hover {
    background-color: transparent;
    color: transparent;
  }

  .general__title {
    font-size: 44px;
    line-height: 60px;
  }

  .offer__swiper {
    display: block;
    position: relative;
    height: 100%;
  }

  swiper-container {
    width: 100%;
    height: 100%;
    padding-bottom: 24px;
  }

  swiper-slide {
    padding: 24px 16px;
    box-shadow: 0px 4px 30px rgba(89, 89, 107, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  swiper-slide {
    width: 60%;
  }

  .partners__swiper {
    display: block;
  }

  .partners__swiper > swiper-slide {
    box-shadow: none;
  }

  .product__swiper {
    display: block;
  }

  .product__image,
  .product__image1 {
    width: initial;
    height: initial;
  }

  .works__descr {
    display: none;
  }

  .work__images {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .work__img {
    width: 100%;
    min-height: 300px;
  }

  .aboutus {
    padding: 72px 30px;
  }

  .aboutus__title {
    font-size: 30px;
  }

  .aboutus__descr {
    font-size: 14px;
  }

  #product-modal {
    padding: 0;
    height: 100%;
  }

  #product-modal .content {
    max-height: unset;
    height: 100vh;
    padding: 24px;
    padding-top: 64px;
    overflow-y: auto;
  }

  #product-modal .content .product-info {
    flex-direction: column;
  }

  #product-modal .content .product-info .image-container {
    max-width: unset;
    display: flex;
    justify-content: center;
  }

  #product-modal .content .product-info .description .properties .property {
    flex-direction: column;
    gap: 4px;
  }
}

@media only screen and (max-width: 768px) {
  .general {
    background-image: url("../assets/images/general-background-768.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-768.png");
  }
}

@media only screen and (max-width: 650px) {
  .gallery {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(6, 1fr);
  }
}

@media only screen and (max-width: 640px) {
  .general {
    background-image: url("../assets/images/general-background-640.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-640.png");
  }
}

@media (max-width: 500px) {
  #elevator-types-form {
    grid-template-columns: 1fr;
  }

  #elevator-types-form .title {
    grid-column: 1 / span 1;
  }

  .catalog__list {
    padding-top: 24px;
  }

  .header__item {
    padding: 40px 20px;
    font-size: 30px;
  }

  .header__contact,
  .mail,
  .header__languages {
    display: none;
  }

  .header__top > .container {
    align-items: center;
  }

  .section {
    padding: 100px 0;
  }

  .works.section {
    padding: 72px 0;
  }

  .section__title {
    font-size: 40px;
    line-height: 40px;
    text-align: center;
  }

  .product__ceilling,
  .product__floor,
  .product__wall,
  .product__key {
    font-size: 14px;
  }

  .product__box {
    padding: 0;
  }

  .product__key {
    white-space: nowrap;
  }

  .general {
    padding: 100px 0;
  }

  .general__btn {
    width: 100%;
  }

  .swiper-side {
    width: 75%;
  }
}

@media only screen and (max-width: 480px) {
  .general {
    background-image: url("../assets/images/general-background-480.png");
  }

  .aboutus {
    background-image: url("../assets/images/about-us-480.png");
  }

  .offer__list::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }

  .offer__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: initial;
    padding: 10px;
  }

  .offer__item {
    box-shadow: 0px 3px 15px -3px rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 395px) {
  .gallery {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .gallery::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }

  #gallery .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gallery .item {
    border-radius: 6px;
    overflow: hidden;
  }

  .gallery .item:last-of-type {
    margin-right: 18px;
  }

  .gallery .item:not(:first-of-type) {
    height: 256px;
    min-width: 256px;
  }

  .container {
    padding: 0 20px;
  }

  .general {
    padding: 142px 0 162px 0;
  }

  .general__title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 24px;
  }

  .general__descr {
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 56px;
  }

  .general__btn {
    font-size: 16px;
    line-height: 150%;
    padding: 12px;
  }

  .offer {
    padding: 52px 0 52px 0;
  }

  .section__title {
    font-size: 24px;
    line-height: 28px;
  }

  .offer__title {
    margin-bottom: 16px;
  }

  .section__descr {
    font-size: 14px;
    line-height: 150%;
    text-align: center;
    opacity: 0.7;
  }

  .offer > .section__descr {
    margin-bottom: 42px;
  }

  swiper-slide {
    max-width: 234px;
    padding: 24px 16px;
  }

  .offer__block {
    max-width: 61px;
    max-height: 61px;
    margin-bottom: 32px;
  }

  .offer__name {
    font-size: 18px;
    line-height: 150%;
    margin-bottom: 12px;
  }

  .offer__text {
    font-size: 14px;
    line-height: 150%;
  }

  .offer__swiper > swiper-slide {
    box-shadow: 0px 4px 30px rgba(89, 89, 107, 0.08);
  }

  .partners {
    padding: 47px 0 51px 0;
  }

  .partners > .section__title {
    margin-bottom: 12px;
  }

  .section__descr {
    margin-bottom: 51px;
  }

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

  #products2,
  #products3 {
    display: none;
  }

  .products > .section__title {
    margin-bottom: 12px;
  }

  .product__swiper > swiper-slide {
    padding: 0;
  }

  .product__image1 {
    margin-bottom: 24px;
  }

  .product__box {
    padding: 10px 16px;
  }

  .product__flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .product__descr {
    gap: 12px;
  }

  .col {
    flex-direction: column;
    gap: 4px;
  }

  .product__key,
  .product__ceilling,
  .product__floor,
  .product__wall {
    font-size: 14px;
    line-height: 150%;
  }

  .product__swiper {
    margin-bottom: 65px;
  }

  .btn {
    width: 100%;
  }

  .aboutus {
    padding: 192px 0 60px 0;
  }

  .aboutus__filter {
    background-color: rgba(0, 0, 0, 0.5);
  }

  .work__img:last-child {
    display: none;
  }

  .catalog__list {
    row-gap: 0;
  }

  #products-list {
    overflow-x: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 18px;
    justify-content: unset;
    align-items: unset;
  }

  #products-list .catalog__item:nth-last-child(-n + 2) {
    display: initial;
  }

  #products-list::-webkit-scrollbar {
    display: none;
    width: 0 !important;
  }

  #products-list .catalog__item {
    padding: 18px;
    min-width: 232px;
  }

  #products-list .catalog__item .product__descr .col {
    display: none;
  }

  #products-list .catalog__item .product__flex {
    margin-bottom: 0;
  }

  #products-list .catalog__item img {
    max-height: 256px;
    width: 100%;
    margin-bottom: 8px;
  }

  #products-list .catalog__item .product__box {
    padding: 0;
  }

  .products.section .container {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 200px) {
  .container {
    padding: 0 5px;
  }
}