@font-face {
  font-family: 'Roboto Medium';
  src: local('Roboto Medium'),
       url('fonts/Roboto-Medium.woff2') format('woff2'),
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Condensed Medium';
  src: local('Roboto Condensed Medium'),
       url('fonts/Roboto_Condensed-Medium.woff2') format('woff2'),
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Black';
  src: local('Roboto Black'),
       url('fonts/Roboto-Black.woff2') format('woff2'),
  font-weight: black;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Medium';
  src: local('Montserrat Medium'),
       url('fonts/Montserrat-Medium.woff2') format('woff2'),
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat Regular';
  src: local('Montserrat Regular'),
       url('fonts/Montserrat-Regular.woff2') format('woff2'),
  font-weight: 400;
  font-style: normal;
}

a {
  text-decoration: none;
}

* {
    margin: 0;
    padding: 0;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: inherit; /* Наследует размер шрифта родителя */
    font-weight: normal; /* Убирает жирность */
    line-height: inherit; /* Сбрасывает межстрочный интервал */
}

@keyframes step-rotate {
  0% { transform: rotate(0deg); }
  2.5% { transform: rotate(18deg); }
  5.0% { transform: rotate(36deg); }
  7.5% { transform: rotate(54deg); }
  10.0% { transform: rotate(72deg); }
  12.5% { transform: rotate(90deg); }
  15.0% { transform: rotate(108deg); }
  17.5% { transform: rotate(126deg); }
  20.0% { transform: rotate(144deg); }
  22.5% { transform: rotate(162deg); }
  25.0% { transform: rotate(180deg); }
  27.5% { transform: rotate(180deg); } /* шаг 11 */
  30.0% { transform: rotate(180deg); }
  32.5% { transform: rotate(180deg); }
  35.0% { transform: rotate(180deg); }
  37.5% { transform: rotate(180deg); }
  40.0% { transform: rotate(180deg); }
  42.5% { transform: rotate(180deg); }
  45.0% { transform: rotate(180deg); }
  47.5% { transform: rotate(180deg); }
  50.0% { transform: rotate(180deg); }
  52.5% { transform: rotate(180deg); } /* шаг 21 */
  55.0% { transform: rotate(180deg); }
  57.5% { transform: rotate(180deg); }
  60.0% { transform: rotate(180deg); }
  62.5% { transform: rotate(180deg); }
  65.0% { transform: rotate(180deg); }
  67.5% { transform: rotate(180deg); }
  70.0% { transform: rotate(180deg); }
  72.5% { transform: rotate(180deg); }
  75.0% { transform: rotate(180deg); }
  77.5% { transform: rotate(180deg); } /* шаг 31 */
  80.0% { transform: rotate(180deg); }
  82.5% { transform: rotate(180deg); }
  85.0% { transform: rotate(180deg); }
  87.5% { transform: rotate(180deg); }
  90.0% { transform: rotate(180deg); }
  92.5% { transform: rotate(180deg); }
  95.0% { transform: rotate(180deg); }
  97.5% { transform: rotate(180deg); }
  100% { transform: rotate(180deg); } /* шаг 40 */
}

/* ------------------------------------------------------------------------------------- */
.header-box {
  position: relative;
  max-width: 100%;
  height: 250px;
  background-color: #f7941d; /* Цвет фона */
}

/* ------------------------------------------------------------------------------------- */
.header-logo0 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 250px;
  height: 250px;
  animation-name: step-rotate;
  animation-duration: 4s;
  animation-timing-function: steps(40); /* 40 шагов */
  animation-iteration-count: infinite;
}

.header-logo0 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------------------------- */
.phone {
  position: absolute;
  top: 25px;
  right: 25px;
  font-family: 'Roboto Medium', sans-serif;
  font-weight: 500;
  font-size: 37px;
}

.phone a {
  color: black;
}

/* ------------------------------------------------------------------------------------- */
.mail {
  position: absolute;
  top: 65px;
  right: 25px;
  font-family: 'Roboto Condensed Medium', sans-serif;
  font-weight: 500;
  font-size: 37px;
}

.mail a {
  color: black;
}

/* ------------------------------------------------------------------------------------- */
.t {
  position: absolute;
  bottom: 20px;
  right: 150px;
  width: 110px;
  height: 110px;
}

.t img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------------------------- */
.vk {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 110px;
  height: 110px;
}

.vk img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ------------------------------------------------------------------------------------- */
.header-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Roboto Black', sans-serif;
  font-weight: black;
  top: 9px;
  font-size: 60px;
  line-height: 65px;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
}

/* ------------------------------------------------------------------------------------- */
.header-buildings {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 567px;
  height: 100px;
  bottom: 0px;
}

.header-buildings img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

h2 {
  font-family: 'Montserrat Medium', sans-serif;
  font-weight: 500;
  color: #404040; /* Установка цвета текста */
  font-size: 28px;
  text-align: center;
  margin-top: 7px;
  margin-bottom: 15px; /* Установка нижнего отступа */
}

h3 {
  font-family: 'Montserrat Medium', sans-serif;
  font-weight: 500;
  color: #404040; /* Установка цвета текста */
  font-size: 22px;
  margin-left: 25px;
  margin-right: 25px;
 }

h4 {
  font-family: 'Montserrat Regular', sans-serif;
  font-weight: 400;
  color: #404040; /* Установка цвета текста */
  font-size: 20px;
  margin-left: 25px;
  margin-right: 25px;
  margin-top: 7px;
  margin-bottom: 15px;
 }
 
@media screen and (max-width:1536px){
  .phone {
    font-size: 32px;
  }
  .mail {
    font-size: 32px;
  }
}

@media screen and (max-width:1440px){
  .phone {
    font-size: 27px;
  }
  .mail {
    font-size: 27px;
  }
  .header-text {
    top: 11px;
    font-size: 45px;
    line-height: 50px;
  }
}

@media screen and (max-width:1200px){
  .header-box {
    height: 200px;
  }
  .header-logo0 {
    width: 200px;
    height: 200px;
  }
  .phone {
    font-size: 23px;
  }
  .mail {
    font-size: 23px;
  }
  .t {
    bottom: 25px;
    right: 115px;
    width: 65px;
    height: 65px
  }
  .vk {
    bottom: 25px;
    right: 25px;
    width: 65px;
    height: 65px
  }
  .header-text {
    top: 13px;
    font-size: 38px;
    line-height: 42px;
  }
}

@media screen and (max-width:900px){
  .phone {
    font-size: 18px;
  }
  .mail {
    font-size: 18px;
  }
  .header-text {
    top: 14px;
    font-size: 32px;
    line-height: 36px;
  }
  .header-buildings {
    width: 397px;
    height: 70px;
  }
}

@media screen and (max-width:749px){
  .header-box {
    height: 350px;
  }
  
  .mail {
    top: 55px;
  }	
	
  .t {
    top: 99px;
    right: 115px;
  }
  
  .vk {
    top: 99px;
    right: 25px;
  }
  
  .header-text {
    top: 204px;
  }	
}

@media screen and (max-width:399px){
  .header-buildings {
    width: 340px;
    height: 60px;
  }
}

@media screen and (max-width:379px){
  .t {
    width: 55px;
    height: 55px;
    right: 105px;
  }
  
  .vk {
    width: 55px;
    height: 55px;
    right: 25px;
  }
}