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

:where(
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   ul,
   ol,
   dl
):where([class]) {
   margin-block: 0;
}

html{
    height: 100%;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

html .is-lock {
    overflow: hidden;
}

html, body {
  height: 100%;
  margin: 0;
}

img,
video {
   display: block;
   max-width: 100%;
   height: auto;
}

input,
textarea,
select,
button {
   font: inherit;
}

button,
label {
   cursor: pointer;
}

#app {
  display: flex;
  flex-direction: column;
  min-height: 93vh; /* растягивает контейнер на всю высоту экрана */
}

#main {
  flex: 1; /* заставляет main занимать всё оставшееся пространство */
  
}

#footer {
  margin-top: auto; /* прижимает футер вниз */
}

p{
  margin: 0;
  padding: 0;
}

body{
  min-height: 100%;
  font-family: var(--font-family);
  color: var(--color-dark);
  font-size: clamp(16px, 1.5vw + 12px, 20px);
  line-height: 120%;
  display: flex;
  flex-direction: column; 
  /* background-color: var(--color-accent); */
  background-image: url('../image/bg.png');
  background-position: top center;
}

.container{
  max-width: calc(var(--container-width) + var(--container-padding-x) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}

/* Фон секций */
.bg-item{
  background-color: var(--color-accent);
  background-image: url('../image/bg-item.png');
  background-position: center center;
  padding-block: 105px;
  color: var(--color-white);
}

/*заголовки в секциях (проекты, галерея)*/
.view-header{
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.view-header .wrapper-btn{
  max-width: 245px;
  width: 100%;
}

.view-header h2{
  text-transform: uppercase;
  font-size: 40px;
  font-weight: 700;
  color: var(--color-dark);
  max-width: 690px;
  width: 100%;
  text-align: right;
}

/*Отступы отдельных секций*/
div#project-block{
  padding-block: 120px;
}


/* .block-title{
  font-size: ;
  font-weight: ;
  margin-bottom: ;
} */

@media (min-width: 1400px) {
  .container, 
  .container-lg, 
  .container-md, 
  .container-sm, 
  .container-xl, 
  .container-xxl {
    max-width: 1200px;
    width: 100%;
  }
}

/* @media screen and (max-width: 1200px) {
  header#header .block-menu ul.nav{
    gap: calc(15px + (70 - 15) * ((100vw - 320px) / (1200 - 320)));
  }
} */

/* Внутр. страницы */
.not-front .wr_content {
  padding-block: 30px;
}

.not-front h1{
  margin-bottom: 20px;
}


@media screen and (max-width: 1200px){
  .bg-item {
    padding-block: calc(50px + (105 - 50) * ((100vw - 320px) / (1200 - 320)));
  }
}
@media screen and (max-width: 1200px){
  .benefit-block-list .item-list ul li:nth-child(2) {
    padding-left: 85px;
  }
  .benefit-block-list .item-list ul li:nth-child(2)::before {
    width: 53px;
    left: 19px;
  }
}