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

html, body {
  width: 100%;
  height: 100%;
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

.frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url('./img/background_top.jpg');
  background-size: 165%;
  background-position: center;
  padding: 0px;
  margin-top: 0px;
  gap: 20px;
}

/* Обёртка для черного фона */
.header-container {
  width: 100%;
  background: url('./img/background_top.jpg') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
}

/* Сама стальная линия */
.header {
  width: 64%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1.3% 20px;
}

.header, .footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }

.email {
  font-size: 24px;
  cursor: pointer;
  color: #000;
}

.telegram {
  width: 128px;
  height: 128px;
}

/* Разделительная чёрная линия */
.separator {
  width: 100%;
  height: 1px;
  background-color: rgb(0, 0, 0);
}

.welcome-our-work-is {
  text-align: center;
  font-size: 48px;
  color: #000;
  line-height: 1.5;
}

.span {
  font-weight: bold;
  font-style: italic;
  display: block;
  font-size: 64px;
  margin-bottom: 20px;
}

.text-wrapper-2, .text-wrapper-3, .text-wrapper-4, .text-wrapper-5, .text-wrapper-6, .text-wrapper-7 {
  font-style: italic;
  font-size: 24px;
  display: inline;
}

.element,
.element-4 {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.element-3{
  border: 2px solid black;
}

.img,
.element-2,
.element-5,
.element-6,
.element-7,
.element-8,
.element-9,
.element-10 {
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-bottom: 2px solid black;
  border-top: 2px solid black;
}

.frame-wrapper {
  width: 90%;
  display: flex;
  justify-content: center;
  padding: 0px 0;
}

.side-images {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.element-3 {
  width: 65%;
  object-fit: cover;
}

.element-4 {
  width: 30%;
  object-fit: cover;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0px;
}

a.telegram-link {
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .header, .footer {
    flex-direction: column;
    align-items: flex-end;
    gap: 0px;
  }

  .header {
  width: 68%;
  }

  .email {
    font-size: 12px;
  }

  .telegram {
    width: 48px;
    height: 48px;
  }

  .welcome-our-work-is {
    font-size: 32px;
  }

  .span {
    font-size: 48px;
  }

  .text-wrapper-2,
  .text-wrapper-3,
  .text-wrapper-4,
  .text-wrapper-5,
  .text-wrapper-6,
  .text-wrapper-7 {
    font-size: 18px;
  }

  .side-images {
    flex-direction: line;
    align-items: center;
    gap: 20px;
  }

  .element-3 {
    width: 65%;
    object-fit: cover;
  }

  .element-4 {
    width: 30%;
    object-fit: cover;
  }
}

@media screen and (min-width: 1440px) {
  .frame{
    gap: 50px;
  }
  .header {
  width: 62%;
  }

  .email {
    font-size: 48px;
  }

  .telegram {
    width: 256px;
    height: 256px;
  }
}