* {box-sizing: border-box;
  font-family: 'Manrope', sans-serif;
  }
div {
  border: 0px red solid;
  min-height: 0px;

  } /*это временное правило, которое потом нужно ОБЯЗАТЕЛЬНО удалить. Чтобы один контент не накладывадся на другой, нужно задать не фиксированную высоту блока height, а минимальную min-height*/

.content {
  width: 1140px; /*1140 - стандартная ширина экрана компьютера*/
  margin: 0 auto; /*для выравнивания посередине*/
  /*min-height: 500px; после того, как блоки будут созданы, минимальную высоту надо убрать*/
}

div.block{
  display: flex;
    justify-content: space-evenly;
}


div.color {
  width: 34px;
  height: 34px;
  border: 1px #a3a3a3 solid;
  display: block;
  border-radius: 50%;
  margin-bottom: 40px;
  padding: 3px;
  margin-top: 20px;

}

div.color div {
  width: 26px;
  height: 26px;
  border: 1px #e4d1b0 solid;
  border-radius: 50%;
}

a.button-white, a.button-black {
  text-decoration: none; /*none убрал подчеркивание внутри кнопок*/
  display: inline-block;
  /* height: 50px; */
  font-weight: 700;
  padding: 15px 25px;
  border-radius: 5px;
}

a.button-white:link,
a.button-white:active,
a.button-white:visited {
  background: #ffffff;
  color: #4dd8cb;
  border: 2px #4dd8cb solid;
}
a.button-white:hover {
  background: #4dd8cb;
  color:#ffffff;
  border: 2px #4dd8cb solid;
}

a.button-black:link,
a.button-black:active,
a.button-black:visited {
  background: #4dd8cb;
  color:#ffffff;
  border: 2px #4dd8cb solid;

}
a.button-black:hover {
  background: #ffffff;
  color: #4dd8cb;
  border: 2px #4dd8cb solid;

}

/*Стили меню*/
.section-navigation {
  height: 100px;
  position: sticky;
  top:0px;
    background: #eef2f5;
  z-index: 99999;
}

.section-navigation .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: space-between;
}

.section-navigation-logo {
  width: calc(100% / 12);
  background: url(images/Group_1521.svg);
      background-position: center;
      background-repeat: no-repeat;
      width: 80px;
      height: 100px;
      background-size: contain;

}
.section-navigation-link {
  width: calc(100% / 3)
}
.section-navigation-contact {
  width: calc(100% / 7);
      text-align: end;
}

.section-navigation-link a {
  text-decoration: none;
  font-weight: 600;
  padding: 0px 20px;}
.section-navigation-link a:link,
.section-navigation-link a:active,
.section-navigation-link a:visited { color: black;}
.section-navigation-link a:hover   { color: black;}


.section-navigation-contact a {
  text-decoration: none;
  font-weight: 600 }
.section-navigation-contact a:link,
.section-navigation-contact a:active,
.section-navigation-contact a:visited { color: #4dd8cb}
.section-navigation-contact a:hover { color: red}

.section-navigation-contact span {
  font-size: 0.8em;
  font-weight: 600 }

.section-navigation-btn {
  width: calc(100% / 4.5);
  text-align: end;
}


/*Стили главного блока*/
.section-main {
  height: 100vh;
  background: #eef2f5;
  position: relative;
}
.section-main-line {
  background: url(images/Frame_1.svg);
  background-position: bottom;
  background-size: 70%;
  height: 100vh;
  background-position-x: right;
  background-position-y: bottom;
  background-repeat: no-repeat;
}

.section-main-bg {
  background: url(images/female-hands-disposa.png);
  background-position: bottom;
  background-size: 50%;
  height: 100vh;
  background-position-x: right;
  background-position-y: bottom;
  background-repeat: no-repeat;
}

.section-main .content {height: 100vh}
.section-main-content {
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  position: absolute;

  top:0;
  bottom: 0;
  margin: auto 0;
  height: 550px;

}
.section-main-title {
  font-size: 68px;
  line-height: 0.95;
  font-weight: 400;
  margin: 0px;

}
.section-desc-l,
.section-desc-r {
  width: 50%;
  padding-left: 30px;
  padding-right:  30px;
}

.section-desc-r::before,/*before Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.
after- Псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.*/
.section-desc-l::before {
  content: " ";
  width: 14px;
  height: 14px;
  background: #4dd8cb;
  position: absolute;
  border-radius: 50%;
  margin-left: -30px;
  margin-top: 10px;
}

.section-href {
  width: 100%;
}

/*Стили товара*/
.section-price /*секция со всеми товарами*/{
}

.section-price-header /*Блок заголовок*/
  {display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;}

  h2
  {font-size: 50px;
   font-weight: 400;}

.section-price-item,
.section-recomendations-item /*секция с группой товаров*/ /*сюда же добавляем карточки других секций, т.к. они аналогичные*/{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.section-price-item .price-item, .section-recomendations-item .recomendations-item /*секция каждого товара*/{
background: #eef2f5;
border-radius: 15px;
width: calc((100% / 3) - 30px); /*-20px - для горизонтального расстояния между карточками*/
margin-bottom: 30px; /*для вертикального расстояния между карточками*/
min-height: 540px; /*значение минимальной высоты, которую гарантирует браузер*/
padding: 15px;
}

.section-price-item .price-item img{
  width: calc(100% + 30px);
      height: 250px;
      object-fit: cover;
      margin: -15px 0px 0px -15px;
      border: 3px #eef2f5 solid;
      border-radius: 15px 15px 0px 0px;
}


/*Стили прайслист*/
.section-pricelist {

}

.section-pricelist .content {
  min-height: 550px;
  border-radius: 15px;
  background: rgb(54,173,161);
  background: linear-gradient(135deg, rgba(54,173,161,1) 0%, rgba(79,220,207,1) 100%);
  position: relative;
}

.section-pricelist-bg1 /*bg1- первый слой*/{
  position: absolute;
  background: url(images/Vector_1.svg);
  top: 0;
  bottom: 0;
  width: 100%; /*такая длинная конструкция нужна для того, чтобы перекрыть слой блока другим цветом*/
  background-position-x: right;
  background-repeat: no-repeat;
}

.section-pricelist-bg2 /*bg1- первый слой*/{
  position: absolute;
  background: url(images/iphone-x-line-button.webp);
  top: 0;
  bottom: 0;
  width: 100%; /*такая длинная конструкция нужна для того, чтобы перекрыть слой блока другим цветом*/
  background-size: contain;
  background-position-x: 80%;
  background-repeat: no-repeat;
}

.font-white {
    font-size: 55px;
    color: white;
    font-weight: 300;}

/*Стили рекомендации*/
.section-recomendations{}
.section-recomendations-item img{
width: calc(100% + 30px);
height: 250px;
object-fit: cover; /*параметр, который уберет искажение картинок*/
margin: -15px 0px 0px -15px;
border: 3px #eef2f5 solid;
border-radius: 15px 15px 0px 0px;

}
/*Стили компания*/
.section-company{
  background: rgb(238,242,245);
  background: linear-gradient(180deg, rgba(238,241,245,1)0%, rgba(255,255,255,1) 100%);
  height: 1745px;
  position: relative; /*чтобы вписать один блок в другой, надо применять связку position relative + position absolute top 0 bottom 0*/
}

.section-company-bg1 /*фон картинки руки с перчатками*/
    {    position: absolute;
    /* top: 0; */
    bottom: 0;
    width: 100%;
    background: url(images/pixlr-bg-result.webp);
    background-repeat: no-repeat;
    background-position-y: bottom;
    background-size: 135%;
    background-position-x: center;
    }

  .section-company-info /*блок с информацией о компании*/
    {display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 75px;}

  .w-30  /*блок со словом о компании*/
   {width: 30%;
    padding-top: 60px;}

    .w-70  /*2ой блок с описанием с 3 частями*/
    {width: 75%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    }

    .w-50  /*2 блока с описанием компании*/
    {width: 50%;
    padding: 0px 45px 0px 10px;}

.section-company-info span /*2заливка слова медиал-мед*/
    {background: #37ab9e;
    border-radius: 5px;
    font-size: 50px;
    font-weight: 400;
    color: #ffffff;}

.section-company-service /*блок с картинками 6 шт (квадратами).*/{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 300px;
}

.section-company-service-item /*блок с отдельно 1 картинкой (квадрата), свойства картинки*/
  {background: #ffffff;
  border-radius: 15px;/*закругление углов*/
  width: calc((100% / 3) - 20px);
  margin-bottom: 30px;/*промежуток между картинка посередине*/
  height: 270px;/*высота картинки*/
  border: 2px #eef2f5 solid;/*серая рамочка вокруг картинок*/
  padding: 30px;/*внутренние отступы в квадратике*/
  position: relative;/*внешний блок, куда входить внутренний*/
  z-index: 2; /*вся карточка находится над кругами, круги находятся под карточкой, а фон за карточкой*/

  }

/*Свойства картинок (сгруппированные маленькие рисунки наверху слева)*/
.service-item-1,
.service-item-2,
.service-item-3,
.service-item-4,
.service-item-5,
.service-item-6 {
  height: 70px;
  background-repeat: no-repeat !important; /*important делает правила главными*/
  background-position: left !important;
  background-size: 40px !important;
  background-position-y: top !important}

  .price-item-skidka
  {position: absolute;
    background: #f40f0f;
    color: white;
    border-radius: 55px;
    height: 40px;
    width: 50px;
    padding: 11px 5px;
    font-size: 12px;
    top: 885px;
    right: 500px;}


.oval-0 {/*1/4 часть круга1, маленький*/
  z-index: -1;
  background: #cfdce5;
  height: 200px;
  width: 200px;
  position: absolute; /*внутренний блок, который входит во внешний*/
  top: 0px;
  left: 0px;
  border-radius: 15px 0px 200px 0px;/*закругление углов*/
  animation-delay: 1s
}
.oval-1 {/*1/4 часть круга2, большой*/
  background: #bddfed;
   height: 130px;
   width: 130px;
   border-radius: 15px 0px 200px 0px;
   z-index: -2;  /*показывает порядок элемента,т.е. накладываются друг на друга в определенном порядке*/
   animation-delay: 5s;}

.service-item-1 {background: url(images/fi-rr-credit-card.svg)}
.service-item-2 {background: url(images/fi-rr-truck-side.svg)}
.service-item-3 {background: url(images/fi-rr-shield-check.svg)}
.service-item-4 {background: url(images/fi-rr-earnings.svg)}
.service-item-5 {background: url(images/fi-rr-shopping-cart-.svg)}
.service-item-6 {background: url(images/fi-rr-user.svg)}

.section-company-service-item:hover .oval-0 {background: #6dd9ce; animation-delay: 1s;}
.section-company-service-item:hover .oval-1 {background: #4ad2c5; animation-delay: 1s;}

/*Стили карты*/
.section-map {
  height: 500px;
  background-color: blue; /************/
}
/*Стили контакты*/
.section-contacts {
  background: rgb(54,173,161);
  background: linear-gradient(135deg, rgba(54,173,161,1) 0%, rgba(79,220,207,1) 100%);
  position: relative; /*чтобы вписать один блок в другой, надо применять связку position relative + position absolute top 0 bottom 0*/
  height: 550px;
}

.section-contacts-bg1 {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background: url(images/Vector_1.svg);
background-position-x: right;
background-repeat: no-repeat;
}

.section-contacts-content
    {display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;}

  .section-contacts-skrepka /*окно со скрепкой*/
  {height: 415px;
  width: 50%;
  background: white;
  border-radius: 20px;
  margin: 60px 70px 96px;
}

.contacts-skrepka
    {width: 37px;
    height: 81px;
    margin: -19px 21px 0px 446px;
}

.contact-forma /*белое окно с анкетой*/
    {display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;}

  .section-contacts-text /*окно с текстом*/
  {width: 50%;
   padding: 10px 80px;
   color:white;
   text-align:left;
  }

.section-contacts-text-Zagolovok2
    {font-size: 40px;
    line-height: 0.95;
    font-weight: 400;}

  .inp
  {border: 1px #5fc8be solid;
  padding: 10px 40px;
  border-radius: 10px;
  outline: none;
  resize: none;
  width: 300px;
  margin-bottom: -20px;

}

input[type='submit']:hover {
background: #3dbbae;
border:1px #3dbbae  solid;
border-radius: 10px;
}

input[type='submit'] {
background: #99dcd6;
border:1px #99dcd6  solid;
border-radius: 10px;
}

.section-contacts-text span
{font-size: 0.7em;
    font-weight: 300;
    color: #36f3e1;
    margin-top: 7px;}