/* Корневые переменные: */
:root {
  --font: "Montserrat", Helvetica, Arial, sans-serif;
  /* базовый размер шрифта 16px. */
  --red: #bc2539;
  --grey: #f6f6f6;
  --pink: #f6f0f0;
  --popup-top: 0px;
  --popup-left: 0px;
}

/* Общие стили: */
body {
  font-family: var(--font);
}
.container {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}
.center {
  width: 100%;
  padding-left: calc(50% - 50rem);
  padding-right: calc(50% - 50rem);
}
.bold-text {
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}
.small-text {
  font-weight: normal;
  font-size: 1.5rem;
  line-height: 1;
}
button:hover,
a:hover {
  cursor: pointer;
}

/* Секции: */
section h1 {
  font-size: 3rem;
  font-weight: 700;
  text-align: left;
  color: var(--red);
  line-height: 1;
}
section h2 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}
section h3,
section p,
section li {
  font-size: 2.25rem;
  font-weight: 700;
  text-align: left;
  line-height: 1.3;
}
section h4 {
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
section span {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

/* Системная интеграция: */
.system-integration {
  margin-top: 4.4rem;
}
.system-integration__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.system-integration__text {
  max-width: 52rem;
}
.system-integration__text h2,
.system-integration__text h3 {
  color: var(--red);
}
.system-integration__text h3 {
  margin-top: 4.85rem;
}
.system-integration__text p {
  margin-top: 3.875rem;
  line-height: 1.3;
}
.system-integration__image {
  width: 100%;
  right: 0%;
}
.system-integration__image img {
  max-width: 100%;
}

/* Отрасли: */
.industries {
  font-size: 2.25rem;
  font-weight: 700;
  margin-top: 2.8125rem;
  padding: 0;
}
.industries__list {
  margin-top: 2.8rem;
  list-style: none;
}
.industries__list .building {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
}
.industries__list li {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.75rem;
  padding-left: 5rem;
}
.industries__list li img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 3.125rem;
  height: 3.125rem;
  margin-right: 1rem;
  transform: translateY(-50%);
}

/* Работы: */
.works {
  display: flex;
  align-items: center;
  margin-top: 7rem;
  padding-bottom: 5.7rem;
  background-color: var(--pink);
}
.works__list {
  margin-top: 5.2rem;
  padding-left: 1rem;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  max-height: 35.625rem;
}
.works__list-column {
  max-width: 50%;
  list-style: none;
}
.works__list-column li {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 2.8rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.625rem;
  padding-left: 3.5rem;
  position: relative;
}
.works__list-column li::before {
  content: "";
  display: inline-block;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("../images/system_integration/works-list-marker.svg");
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.works__list-column li img {
  margin-right: 0.7rem;
  height: 1.25rem;
  display: none;
}

/* Решения: */
.works__note {
  font-size: 1.75rem;
}
.solutions {
  padding-top: 5.3125rem;
  padding-bottom: 5.3125rem;
  background-color: var(--grey);
}
.solutions__works {
  margin-top: 3.3125rem;
  display: flex;
  place-content: center;
  flex-wrap: wrap;
}
.solutions__works .bold-text {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.solutions__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  list-style: none;
  padding: 0;
}
.solutions__list li {
  position: relative;
  margin-top: 3rem;
  padding-left: 6.25rem;
}
.solutions__list li::before {
  content: "";
  display: inline-block;
  width: 3.75rem;
  height: 3.75rem;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.solutions__list li:nth-child(1)::before {
  background-image: url("../images/system_integration/solutions-icon-1.svg");
}
.solutions__list li:nth-child(2)::before {
  background-image: url("../images/system_integration/solutions-icon-2.svg");
}
.solutions__list li:nth-child(3)::before {
  background-image: url("../images/system_integration/solutions-icon-3.svg");
}
.solutions__list li img {
  margin-right: 0.625rem;
  height: 1.25rem;
  display: none;
}

/* Клиенты: */
.customers h2 {
  text-align: center;
}
.customers__list {
  margin-top: 5.7rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.customer-card {
  display: flex;
  position: relative;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;
  overflow: hidden;
  width: 22.5rem; /* 360px / 16px */
  height: 22.5rem; /* 360px / 16px */
  border: 1px solid #eee;
  padding: 1.375rem; /* 22px / 16px */
  border-radius: 1.25rem; /* 20px / 16px */
  cursor: pointer;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.customer-card-description {
  margin-top: 1.5rem;
}
.customer-card-description:nth-child(1) h4 {
  margin-top: 1.5rem;
}
.customer-card-description p {
  font-size: 1.125rem;
  color: darkgrey;
  text-align: center;
}
.customer-card:hover {
  border: 1px solid black;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.5);
}
.customer-card:hover h4,
.customer-card:hover p {
  color: var(--red);
}

/* Попапы: */
.popup-container {
  display: none;
  position: absolute;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}
.popup {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: white;
  width: 100%;
  max-width: 63rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translate(1.25rem, 1.25rem);
  border-radius: 8px;
  pointer-events: auto;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 5rem;
  box-sizing: border-box;
  top: var(--popup-top);
  left: var(--popup-left);
}
.popup.active {
  opacity: 1;
  transform: translate(0, 0);
}
.popup__content img {
  display: block;
  position: relative;
  max-width: 100%;
  height: auto;
}
.popup__content h2 {
  position: absolute;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  max-width: 50%;
}
#data-center-popup h2 {
  top: 26%;
}
#atom-popup h2 {
  top: 40%;
}
#miac-popup h2 {
  top: 24%;
}
.popup h2 {
  font-size: 1.7rem;
  text-align: left;
  line-height: 1.4;
  color: #fff;
}
.popup p {
  margin-top: 2.75rem;
  font-size: 1.5rem;
  line-height: 1.4;
}
.popup li {
  margin-top: 2.685rem;
  margin-left: 1.1rem;
  font-size: 1.5rem;
  line-height: 1.4;
}
.works__note,
.popup p,
.popup li {
  max-width: 97%;
  font-weight: normal;
  text-align: justify;
  word-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Медиа-запросы: */
@media (max-width: 1600px) {
  .container {
    padding: 0 7rem;
  }
  .center {
    padding-left: calc(50% - 43rem);
    padding-right: calc(50% - 43rem);
  }
  .bold-text {
    font-size: 1.4375rem;
  }
  .small-text {
    font-weight: 500;
    font-size: 1.25rem;
  }
  section h1,
  section h2 {
    font-size: 2.5rem;
  }
  section h3,
  section p,
  section li {
    font-size: 1.875rem;
  }
  section h4 {
    font-size: 1.25rem;
  }
  section span {
    font-size: 1.75rem;
  }
  .system-integration__image img {
    max-width: 110%;
  }
  .works {
    margin-top: 4.35rem;
    padding-bottom: 4.65rem;
  }
  .works__list {
    align-content: center;
  }
  .works__list-column li {
    font-size: 1.4375rem;
  }
  .works__list-column li::before {
    width: 1.5625rem;
    height: 1.5625rem;
  }
  .works__note {
    font-size: 1.4375rem;
  }
  .solutions__works .bold-text {
    font-size: 1.4375rem;
  }
  .customer-card {
    width: 18.75rem; /* 300px / 16px */
    height: 18.75rem; /* 300px / 16px */
  }
  .customer-card img {
    max-width: 90%;
  }
  .customer-card-description p {
    font-size: 1rem;
  }
  .popup p {
    margin-top: 3.5rem;
    font-size: 1.25rem;
  }
  #miac-popup h2 {
    top: 28%;
  }
  .popup li {
    margin-top: 2.5rem;
    font-size: 1.25rem;
  }
}
@media (max-width: 1480px) {
  .container {
    padding: 0 5rem;
    max-width: 92.5rem;
  }
  .center {
    padding-left: calc(50% - 42rem);
    padding-right: calc(50% - 42rem);
  }
}
@media (max-width: 1160px) {
  .container {
    max-width: 69.5rem;
    padding: 0 3rem;
  }
  .center {
    padding-left: calc(50% - 34rem);
    padding-right: calc(50% - 34rem);
  }
  .system-integration__image img {
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  .container {
    max-width: 61rem;
    padding: 0 3rem;
  }
  .center {
    padding-left: calc(50% - 30rem);
    padding-right: calc(50% - 30rem);
  }
  .works__list {
    max-height: 50rem;
  }
  .popup {
    left: 5%;
    transform: translateX(-50%);
    top: var(--popup-top);
    max-width: 90%;
    padding: 3rem;
  }
  .popup h2 {
    font-size: 1.4rem;
    line-height: 1.3;
    margin-bottom: 0.8rem;
  }
  #rosseti-popup h2 {
    top: 25%;
  }
  #data-center-popup h2,
  #miac-popup h2 {
    top: 30%;
  }
  .popup p {
    font-size: 1.125rem;
    line-height: 1.2;
    margin-top: 1.85rem;
    margin-bottom: 0.8rem;
  }
  .popup li {
    font-size: 1.125rem;
  }
}
@media (max-width: 768px) {
  .container {
    max-width: 45rem;
    padding: 0 1rem;
  }
  .center {
    padding-left: calc(50% - 22.5rem);
    padding-right: calc(50% - 22.5rem);
  }
  .bold-text {
    font-size: 1.4375rem;
  }
  .small-text {
    font-weight: 500;
    font-size: 1.25rem;
  }
  section h1,
  section h2,
  section h3 {
    font-size: 1.8125rem;
    text-align: center;
  }
  section p,
  section li {
    font-size: 1.3125rem;
    text-align: center;
  }
  section h4 {
    font-size: 1.25rem;
    text-align: center;
  }
  section span {
    font-size: 1.75rem;
  }
  .system-integration__image img {
    max-width: 95%;
  }
  .system-integration__text h3 {
    margin-top: 1.9rem;
  }
  .system-integration__text p {
    margin-top: 1.9rem;
  }
  .industries {
    margin-top: 1.8rem;
  }
  .industries__list li img {
    margin-right: 0rem;
  }
  .works {
    flex-direction: column;
  }
  .works h2 {
    margin-bottom: 1.4rem;
  }
  .works__list {
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    max-height: 100rem;
  }
  .works__list-column li {
    width: 40rem;
    text-align: left;
    margin-top: 1.0625rem;
  }
  .works__note {
    max-width: 95%;
    font-size: 1.4375rem;
  }
  .solutions {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
  .solutions__works .bold-text {
    font-size: 1.4375rem;
  }
  .solutions__list {
    max-width: 95%;
  }
  .solutions__list li {
    margin-top: 2.3125rem;
    padding-left: 5rem;
    text-align: left;
  }
  .customers__list {
    flex-direction: column;
  }
  .customer-card {
    width: 19.7rem;
    height: 19.875rem;
  }
  .system-integration__content {
    flex-direction: column;
  }
  .system-integration__text,
  .system-integration__image {
    width: 90%;
  }
  .system-integration__text {
    display: flex;
    flex-direction: column;
    text-align: center;
  }
  .popup__content img {
    width: 100%;
  }
  .popup h2 {
    font-size: 1rem;
  }
  #rosseti-popup h2 {
    top: 30%;
  }
  #data-center-popup h2,
  #miac-popup h2 {
    top: 32%;
  }
  .popup p {
    margin-top: 1rem;
    font-size: 0.825rem;
    line-height: 1.1;
  }
  .popup li {
    margin-top: 1rem;
    font-size: 0.825rem;
    line-height: 1.1;
  }
}
@media (max-width: 425px) {
  .container {
    max-width: 23.5rem;
    padding: 0 1.5rem;
  }
  .center {
    padding-left: calc(50% - 13.3rem);
    padding-right: calc(50% - 13.3rem);
  }
  section h1 {
    font-size: 1.8125rem;
  }
  section h2 {
    font-size: 1.8125rem;
  }
  section h3,
  section p,
  section li {
    font-size: 1.3125rem;
  }
  section h4 {
    font-size: 1.125rem;
  }
  .bold-text {
    font-size: 1.3125rem;
  }
  .small-text {
    font-size: 0.9375rem;
    text-align: left;
  }
  section span {
    font-size: 1.25rem;
  }
  .system-integration__text p {
    line-height: 1.25;
  }
  .system-integration__image img {
    max-width: 100%;
  }
  .industries h3 {
    font-size: 1.8125rem;
    line-height: 1.4rem;
    text-align: center;
  }
  .industries__list {
    margin-top: 2rem;
    margin-left: 2rem;
  }
  .industries__list li {
    margin-bottom: 1.5rem;
  }
  .industries__list li img {
    width: 2.5rem;
    height: 2.5rem;
  }
  .works {
    margin-top: 1.75rem;
    padding-bottom: 3.715rem;
  }
  .works h2 {
    margin-bottom: 1.4rem;
  }
  .works__list-column li {
    margin-left: 1rem;
    font-size: 1.3125rem;
    max-width: 23rem;
  }
  .works__list-column li::before {
    width: 1.52rem;
    height: 1.52rem;
    top: 25%;
  }
  .works__note {
    font-size: 1.0625rem;
    line-height: 1.2;
    word-wrap: break-word;
  }
  .works__note .bold-text {
    font-size: 1.0625rem;
  }
  .solutions__list {
    margin-left: 1.5rem;
  }
  .solutions__works .bold-text {
    font-size: 1rem;
  }
  .solutions__list .bold-text {
    font-size: 1.3125rem;
    line-height: 1;
  }
  .solutions__list li {
    margin-top: 1.25rem;
  }
  .solutions__list li::before {
    width: 3.125rem;
    height: 3.125rem;
  }
  .customers h2 {
    margin-top: 1rem;
  }
  .customer-card {
    width: 19.78rem;
    height: 19.68rem;
  }
  .customers > .container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
  }
  .customers h2 {
    font-size: 1.8125rem;
    max-inline-size: 12rem;
    text-align: center;
  }
  .customers__list {
    margin-top: 2.34rem;
    gap: 1.6rem;
  }
  .customer-card h4 {
    margin-top: 1.2rem;
    font-size: 1.36875rem;
  }
  .customer-card-description {
    margin-top: 1.2rem;
  }
  .customer-card-description p {
    font-size: 1.0625rem;
  }
  .popup {
    width: 90%;
  }
  .popup__content h2 {
    position: absolute;
    text-align: center;
    margin-top: 2.2rem;
    font-size: 1rem;
    line-height: 1;
    color: #000;
  }
  .popup__content-description {
    margin-top: 6rem;
  }
  .popup p {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1;
  }
  .popup li {
    margin-top: 1rem;
    font-size: 0.875rem;
    line-height: 1;
  }
  #rosseti-popup h2 {
    top: 25%;
  }
  #data-center-popup h2,
  #miac-popup h2 {
    top: 28%;
  }
  #atom-popup h2 {
    top: 42%;
  }
  #rosseti-popup p,
  #miac-popup p {
    margin-top: 11rem;
  }
}
@media (max-width: 390px) {
  .container {
    max-width: 22.78rem;
    padding: 0 1.3rem;
  }
  .center {
    padding-left: calc(50% - 12.5rem);
    padding-right: calc(50% - 12.5rem);
  }
  .works__list-column li {
    max-width: 22.5rem;
  }
  #rosseti-popup h2 {
    top: 24%;
  }
  #data-center-popup h2 {
    top: 28%;
  }
  #atom-popup h2 {
    top: 42%;
  }
  #miac-popup h2 {
    top: 26%;
  }
  #rosseti-popup p {
    margin-top: 11rem;
  }
  #atom-popup p {
    margin-top: 7rem;
  }
}
@media (max-width: 320px) {
  .container {
    max-width: 18rem;
    padding: 0 1rem;
  }
  .center {
    padding-left: calc(50% - 9rem);
    padding-right: calc(50% - 9rem);
  }
  .bold-text {
    font-size: 1.4375rem;
  }
  .small-text {
    font-size: 0.8125rem;
  }
  section h1,
  section h2,
  section h3 {
    font-size: 1.5rem;
  }
  section p,
  section li {
    font-size: 1.125rem;
  }
  section h4 {
    font-size: 1.25rem;
  }
  section span {
    font-size: 1.75rem;
  }
  .industries h3 {
    font-size: 1.5rem;
  }
  .industries__list {
    margin-top: 2rem;
    margin-left: 0.125rem;
  }
  .industries__list li {
    margin-bottom: 1.125rem;
  }
  .system-integration__text p {
    margin-top: 1.6rem;
  }
  .works__list {
    text-align: left;
    max-height: 150rem;
  }
  .works__list-column li {
    font-size: 1rem;
    margin-left: 0.05rem;
    padding-left: 2rem;
    max-width: 18rem;
    word-break: break-all;
    white-space: normal;
  }
  .works__list-column li::before {
    width: 1.2rem;
    height: 1.2rem;
    top: 25%;
  }
  .works__note {
    font-size: 0.875rem;
  }
  .works__note .bold-text {
    font-size: 0.875rem;
  }
  .solutions__works .bold-text {
    font-size: 1.125rem;
  }
  .solutions__list li {
    margin-top: 1rem;
    padding-left: 4rem;
  }
  .customers h2 {
    font-size: 1.5rem;
  }
  .customer-card {
    width: 16.2rem;
    height: 16.2rem;
  }
  .customer-card h4 {
    margin-top: 0.5rem;
    font-size: 1.125rem;
    line-height: 1;
  }
  .customer-card-description p {
    margin-top: 0.1rem;
    font-size: 0.875rem;
    line-height: 0.9;
  }
  .popup h2 {
    font-size: 0.9rem;
  }
  .popup p {
    font-size: 0.8rem;
  }
  .popup li {
    font-size: 0.8rem;
  }
  .popup__content-description {
    margin-top: 4rem;
  }
  #rosseti-popup h2 {
    top: 17%;
  }
  #data-center-popup h2 {
    top: 21%;
  }
  #atom-popup h2 {
    top: 35%;
  }
  #miac-popup h2 {
    top: 20%;
  }
  #rosseti-popup p {
    margin-top: 9rem;
  }
  #data-center-popup p {
    margin-top: 1rem;
  }
  #atom-popup p {
    margin-top: 6rem;
  }
  #miac-popup p {
    margin-top: 9rem;
  }
}