/* ========= глобальные общие стили ::: start =========== */

/* сброс:: start */
html {
  box-sizing: border-box;
}

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

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* сброс:: end*/


/* шрифты */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-regular.woff2') ;
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-700.woff2') ;
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

/* ГЛОБАЛЬНЫЕ переменные */
:root {
  --black:#000 ;
  --gray-brown:#414141;
  --dull-gray:#666;
  --light-gray: #CACACA;
  --color-light:#fff;

  --green: #97EE3F;
  --yellow-orange: #E1670E;
  --orange: #FFB84D;
  --signal-orange:#FF9900;

}

.page {
  min-width: 320px; /**/ /* для адаптивности */
  font-family: "Montserrat", sans-serif;
}

/* стиль сброса для СПИСКА ul*/
.list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* кнопка - общий стиль всех кнопок сайта*/
.btn {
  display: inline-block;/*для кнопки и для кнопки-ссылки*/
  padding: 19px 38px;

  border: none;
  border-radius:16px;

  text-align: center;
  color: var(--color-light);
  font-weight: 700;

  cursor: pointer;
}

.container {
  max-width: 1920px; /*75 + 1770 +75*/ /*75= 2х отступы по макету; 1770 - подгон до 1920*/
  padding: 0 75px; /*обычно 15…20 рх*/
  margin: 0 auto;
/*  outline: 1px solid green;*/
}
/* ========= глобальные общие стили ::: end =========== */


/* =============== HEADER::: start ========== */

.header--decor {
  margin-bottom: 50px;

  border-radius: 0px 0px 32px 32px;
  background: #FFF;
  box-shadow: 0px 5px 40px 0px rgba(0, 0, 0, 0.10);
}

.header__container {
  padding-top: 14px;
  padding-bottom: 11px;

  display: flex;
  align-items: center;

}

.header__logo {
  margin-right: auto;
}

.logo-style {
  width: 225px;
}

.header__nav {
  margin-right: 85px;
}

.header__list {
  padding: 0px 1px 3px 0px; /*подгон по РРerfect*/

  display: flex;
  align-items: center;
  gap: 85px;
}

.nav__top-link{
  position: relative;

  font-size: 18px;
  font-weight: 600;
  line-height: 36px;
  color: var(--black);

  text-decoration: none;
  outline: 2px solid transparent;
  outline-offset: 4px;

  transition: color 0.25s ease-in-out, outline-color 0.25s ease-in-out ;/*  */
}

.nav__top-link:focus {
  outline-color:var(--signal-orange);
}

/* плавное подчеркивание ссылки при :hover :::start*/
.nav__top-link::before  {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%;

  transition: transform .25s ease-in-out;
  transform-origin: left;
  transform: scaleX(0); transition-delay: 0s;
}

.nav__top-link:hover::before {
  border-bottom: 1px solid var(--signal-orange, #F90);
  padding-bottom: 7px;
  outline: none;

  transform: scaleX(1); transition-delay: .25s;
}

/* плавное подчеркивание ссылки при :hover :::end*/

.nav__top-link:active::before {
  border-color: transparent; /*убрать двойное подчеркивание */
}

.nav__top-link:active {
  border-bottom: 1.5px solid var(--yellow-orange, #E1670E);
  padding-bottom: 3px;
  color: var(--yellow-orange, #E1670E);

}

/*лупа (кнопка)*/
.header__search-link {
  padding: 0;

  background-color: transparent;
  border: none;

  outline: 1px solid transparent;
  outline-offset: 4px;

  transition: outline-color 0.25s ease-in-out;
}

svg,
svg path,
svg rect {
  transition: fill .3s ease-in-out, stroke .3s ease-in-out ;
}

.header__search-link:focus-within {
  outline-color:var(--signal-orange);/* */
}

.header__search-icon:hover path {
  stroke: var(--signal-orange, #F90);
}


.header__search-icon:hover rect {
  fill: var(--signal-orange, #F90); /* */
  stroke: var(--signal-orange, #F90) ;
}

.header__search-icon:hover .header__search-link { /*убрать обводку при :hover*/
  outline: none;
}
.header__search-link:hover {
  outline: none;
}

.header__search-icon:active path {
  stroke: var(--black, #000);
}

.header__search-icon:active rect {
  fill: var(--black, #000); /* */
  stroke: var(--black, #000) ;
}

.header__search-link:active {
  outline: none;
}

/* =============== HEADER ::: end ========== */



/* =============== section HERO ::: start ========== */

.hero {
  margin-bottom: 50px;
}

.hero__container {
  min-height: 620px;

  border-radius: 32px;
  background-position: 0px -1px;
  background-image: url(../img/hero-balcon.png);
  background-repeat: no-repeat;
  background-size: cover;

}

.hero__content {
  padding: 103px 850px 100px 81px;
  margin-bottom: 24px;

}

.hero__title {
  margin: 0 0 28px 0;

  color: var(--color-light);
  font-size: 71px;
  font-weight: 800;
  letter-spacing: 0.05px;
}

.hero__descr {
  margin-bottom: 90px;
  color: var(--color-light);
  font-size: 24px;
  font-weight: 700;

}

.hero__btn {
  padding: 27px 39px;
  font-size: 23px;

  background-color: var(--signal-orange, #F90) ;
  outline: none;

  transition: background-color .35s ease-in-out;
}

.hero__btn:focus {
  background-color: var(--orange, #FFB84D);
}

.hero__btn:hover {
  background-color: var(--orange);
}

.hero__btn:active {
  background-color: var(--yellow-orange, #E1670E);
}

/* =============== section HERO ::: end ========== */


/* =============== section ABOUT ::: start ========== */


.about {
  margin-bottom: 103px;
}

.about__title {
  margin: 0;
  padding-bottom: 20px;

  color: var(--black, #000);
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
}

/* о нас: верхний текст */
.about__descr {
  margin: 0;
  padding-top: 1px;
  padding-bottom: 49px;
  max-width: 1235px;

  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  color: var(--black, #000);
}

/* рабочая зона ===== подблок с ФотоСтроитель + 2Блока ==== */

  /* разбивка на 2 секции: фото + 2блока */
.about__bottom {
  display: flex;
  gap: 32px;

  /* outline: 1px solid red; */
}

/* блок: фотоСтроитель */
.about__bottom-img {

  /* width: 50%; */ /*нормально */
  width: calc(50% - 17px);  /*test под РРerfect */
  min-height: 622px;
  display: flex;
  align-items: flex-end;
  background: center / cover url("../img/about-worker.png");

}



/* Блок внутри внизу фото: поп-ап */
.about__bottom-popup {

  display: flex;
  align-items: center;

  bottom: 0px;
  padding: 50px 50px 50px 50px;
  color: var(--color-light);
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;

  border-radius: 30px;
  background-color: rgba(0,0,0,0.50);
}

.about__bottom-descr {
  margin: 0;
  padding-right: 105px;
}

.about__btn-detail {

  padding: 11px 35px;
  border: 3px solid var(--signal-orange, #F90);

  font-size: 16px;

  outline: none;
  transition: background-color .3s linear;
}

.about__btn-detail:focus {
  background-color: var(--signal-orange, #F90);
}

.about__btn-detail:hover {
  background-color: var(--signal-orange, #F90);
}

.about__btn-detail:active {
  background-color: var(--yellow-orange, #E1670E);
  border-color: var(--yellow-orange );
}

.about__bottom-right {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
}

.about__bottom-info {
  max-width: 870px;
  border: 1px solid var(--light-gray, #CACACA);
  border-radius: 32px;
}

.about__bottom-info--cube {
  background-position: 59px 64px;
  padding: 65px 75px 65px 300px;

  background-image: url('../img/about-cube.png');
  background-repeat: no-repeat;

  background-size: auto;
}

.about__bottom-info--gear {

  background-position: 59px 63px;

  padding: 64px 75px 65px 300px;
  background-image: url('../img/about-gear.png');
  background-repeat: no-repeat;

  background-size: auto;
}

.about__bottom-title {
  margin: 0;
  margin-bottom: 8px;

  color: var(--black, #000);
  font-size: 24px;
  font-weight: 700;
}

/*текст около фотоСтроитель*/
.about__descript {
  margin: 0;

  color: var(--black, #000);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
}

/* =============== section ABOUT ::: end ========== */


/* =============== section HOW ::: start ========== */

.how {
  margin-bottom: 104px;
}

.how__title {
  padding-bottom: 34px;
  margin: 0;

  color: var(--black, #000);
  font-size: 48px;
  font-weight: 400;
}

.how__consult {

   width: 100%;
}

/* для адаптации текста слева и картинки справа */
.how__img {
  position: relative;
  height: auto;
  width: calc(50% - 125px);

  display: flex;
  flex-direction: column;
  /* align-items: center;
  padding: 15px; */
}

.how__img::before {
    content: '';
    position: absolute;
    top: 9px;
    /* рпсположить картинку под PixePerfect 1920рх */
    left: calc(100% + 140px);
    width: calc(100% + 110px);
    height: calc(100% - 9px);

    border-radius: 32px;
    background: #CACACA center /cover url(../img/how-img.png);
}


.how__left-title {
  margin-top: 0;
  margin-bottom: 8px;

  font-size: 24px;
  font-weight: 700;
  line-height: 32px; /* 133.333% */
}

.how__left-descr {
  margin-bottom: 18px;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 200% */
}

.how__action {
  display: flex;
  gap:32px;
}

.how__detail {
  padding: 20px 39px 20px 38px;

  border-radius: 16px;
  background-color: var(--signal-orange, #F90);

  outline: none;
  transition: background-color .3s ease-in-out;
}

.how__detail:focus {
  background-color: var(--orange, #FFB84D);
}

.how__detail:hover {
  background-color: var(--orange);
}

.how__detail:active {
  background-color: var(--yellow-orange, #E1670E);
}


.how__contract {
  padding: 19px 33px 19px 38px;

  border-radius: 16px;
  border: 1px solid var(--dull-gray);

  color: var(--black);

  outline: none;
  transition: background-color .3s ease-in-out, color .3s ease-in-out;
}


.how__contract:focus {
  color: var(--color-light, #FFFFFF);
  background-color: var(--dull-gray, #666666);
}

.how__contract:hover {
  color: var(--color-light, #FFFFFF);
  background-color: var(--dull-gray, #666);
}

.how__contract:active {
  color: var(--color-light);
  background-color: var(--black);
  border-color: var(--black);
}

/* =============== section HOW ::: end ========== */


/* =============== section FAQ::: start ========== */

.faq {
  margin-bottom: 99px;
}

.faq__title {
  padding-bottom: 32px;
  margin: 0;

  color: var(--black);
  font-size: 48px;
  font-weight: 400;
}

.faq__item h3 {
  margin: 0;
}

.faq__item {
  padding: 66px 58px 65px 59px;
  margin-right: 30px;

  display: inline-block;
  max-width: 567px;
  border: 1px solid var(--light-gray);
  border-radius: 32px;
  background: var(--color-light);
}

.faq__item:nth-child(3n) {
  margin-right: 0px;
}

.faq__item-title {
  padding-bottom: 8px;

  color: var(--black);
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
}

.faq__item-descr {
  margin: 0;
  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
}

/* =============== section FAQ ::: end ========== */

/* =============== footer ::: start ========== */


.footer {
  background-color: var(--black, #000);
}

.footer__flex {
  padding: 51px 0 45px 0;
  display: flex;
  justify-content: space-between;
}

.footer__logo {
  width: 224px;
  padding-bottom: 16px;
}

.footer__nav {
  padding-bottom: 90px;
}

.nav__ftr-link {
  color: var(--light-gray, #CACACA);
  font-size: 18px;
  font-weight: 600;
  line-height: 36px;

  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: color 0.25s ease-in-out, outline-color 0.25s ease-in-out ;
}

.nav__ftr-link:focus {
  outline-color: var(--signal-orange);
}

.nav__ftr-link:hover {
  color: var(--signal-orange);
  /* outline: none; */ /*убрал мигание outline 'ом*/
}

.nav__ftr-link:active {
  color: var(--yellow-orange);
  /* outline: none; */
}

/* иконки соц.сетей */
.footer__social {
  display: flex;
  gap: 25px;
}

.footer__social-link {
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color 0.25s ease-in-out;
}

.footer__social-link:focus {
  outline-color:var(--signal-orange);/* */
}

.footer__social-link:hover {
  outline: none;
}

.soc__icon:hover path {
  fill: var(--signal-orange);
}

.soc__icon:active path {
  fill: var(--yellow-orange);
}


.footer__middle {
  padding: 2px 1px 1px 125px;
}

.footer__middle-title {
  padding-bottom: 26px;

  color: var(--light-gray, #CACACA);
  font-size: 48px;
  font-weight: 400;
}

/*form*/
.form__input {
  width: 570px;
  height: 60px;
  padding: 14px 24px;

  display: block;
  border-radius: 16px;
  resize: none;
  border: none;
  color: var(--color-light);

  background-color: var(--gray-brown, #414141);
  outline: none;

  transition: background-color .3s ease-in-out;
}

.form__input:focus {
  background-color: var(--dull-gray);
}
.form__input:hover {
  background-color: var(--dull-gray);
}
.form__input:active {
  background-color: var(--dull-gray);
}

.form__input--user {
  margin-bottom: 25px;
}

.form__input--mail {
  margin-bottom: 25px;
}

.form__input--message {
  height: 150px;
  margin-bottom: 33px;
}

::placeholder {
  padding: 0px 0px;

  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  color: var(--light-gray, #CACACA);
}

.form__submit {
  display: flex;
  gap: 12px;
}

.form__btn {
  padding: 20px 52px 19px 52px;

  font-size: 16px;
  background-color: var(--signal-orange, #F90);
  outline: none;

  transition: background-color .25s ease-in-out ;
}

.form__btn:focus {
  background-color: var(--orange);
}

.form__btn:hover {
  background-color: var(--orange);
}

.form__btn:active {
  background-color: var(--yellow-orange);
}

.footer__right {
  padding-top: 87px;
}

.footer__right-descr {
  margin: 0;
  width: 363px;

  font-size: 16px;
  color: var(--light-gray);
  font-weight: 400;
  line-height: 32px;
}

/* кастомный чекБокс */
.footer__label {
  display: flex;
  align-items: center;
  padding: 5px 10px;

  color: var(--light-gray, #CACACA);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;

  cursor: pointer;
}

.footer__input[type="checkbox"] {
  position: absolute;
  z-index: -5;
  width: 0;
  height: 0;

}

.footer__span {
  position: relative;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid var(--light-gray, #CACACA);

  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: outline-color 0.2s ease-in-out ;
}

.footer__span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: no-repeat center/ contain url('../svg/checked.svg');

  opacity: 0;
}

.footer__input:checked + .footer__span:after {
  opacity: 1
}

/* вариант для border */
.footer__input:focus + .footer__span {
  border-color: var(--yellow-orange);
}

  .footer__label {

  }

/* =============== footer::: end ========== */


/* ===== При каких @media Меняем padding ====== */

@media (max-width: 1919px) {
  .container {
    padding: 0 50px;  /* отступы слева-справа = 50рх */
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 15px;  /*  отступы слева-справа = 15рх */
  }
}