/* сброс:: 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: 'Roboto';
  src: url('../fonts/RobotoRegular.woff2'),
  url('../fonts/RobotoRegular.woff');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

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

/* ГЛОБАЛЬНЫЕ переменные */
:root{
--color-dark:#000 ;
--color-light:#fff;
--color-accent:#ff7143;

--gap16:16px; /*отступ для формулы calc() */
--gap18:18px; /*отступ для формулы calc() */

}

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

/* для скрытия элмента */
.visually-hidden{
position: absolute;
width: 1px;
height: 1px;
margin: 1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0); /*что это ?*/
}

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

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

border: none;
border-radius: 6px;
padding: 12px 36px;
font-size: 16px;
font-weight: 700;
line-height: 24px; /* 150% */

color: var(--color-dark);
background-color: var(--color-light);

text-align: center;
/* font-family: Roboto; */
cursor: pointer;
}

.btn--accent{
background-color: var(--color-accent);
}

.btn--accent:hover{
background-color: #fb8964;
}

.btn--accent:active{
background-color: #fb4e16;
}

/* ========  шапка  =========== */
.container{
max-width: 1310px; /*1280 + 15+15*/
padding: 0 15px; /*обычно 15…20 рх*/
margin: 0 auto;

}


.header{/*бэм блок  */
color: var(--color-light);
background-color: var(--color-dark);
padding: 16px 0;
}


.header__container{/* бэм-элемент */
display: flex;
align-items: center;
}

/* навигация в шапке*/
.nav__list{
display: flex;
align-items: center;
gap: 23px ; /*-- timeCode::  30 мин - */
}



.nav__link{
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
color: var(--color-light);

/* Обводка outline, в основном классе */
outline: 1px solid transparent; /*обесцвеченная обводка*/
outline-offset: 6px;/* границы обводки offset */

transition: color 0.45s linear, outline-color .35s ease-in-out;
}

.nav__link:focus-visible{
outline-color:var(--color-accent);
color: var(--color-light);
}

.nav__link:hover{
color: var(--color-accent);
}

.nav__link:active{
outline-color:var(--color-accent);
color: var(--color-accent);
}

.header__logo{/* бэм-элемент */
margin-right: 65px;
}

.email{
border-radius: 4px;
padding: 4px 10px;
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
color: var(--color-light);

background: rgba(255, 255, 255, 0.12);
transition: color 0.5s ease-in-out;

outline: 1px solid transparent;
outline-offset: 6px;
}

.header__email{
margin-right: auto; /*для автоотступа при мобил.верс*/
}
.header__email:focus-visible{
outline-color: var(--color-accent);
color: var(--color-light);
}

.header__email:hover{
color: var(--color-accent);
}

.header__email:active{
outline-color: var(--color-accent);
}

.header__nav{
margin-right: 191px; /*от nav до кнопки*/
}

.header--position{
position: relative;
z-index: 5;
}


/* ========  main-->section HERO =========== */
.hero{
background-color: var(--color-accent);
}

.hero__container{
display: flex;
align-items: center;
justify-content: space-between;
}

.hero__wrapper{
padding-left: 23px;
}

.hero__content {
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 0;
max-width: 587px;
}
.hero__title {
margin: 0; /*сброс*/
margin-bottom: 26px;

font-size: 72px;
font-weight: 700;
line-height: 72px; /* 100% */
text-align: center;
color: var(--color-dark);
}
.hero__descr {
margin: 0; /*сброс*/
margin-bottom: 21px;

text-align: center;
font-size: 18px;
font-weight: 400;
line-height: 27px; /* 150% */
color: var(--color-dark);
}
.hero__btns {
display: flex;
align-items: center;
gap: 8px;

margin-bottom: 7px; /*подгон под pixel perf*/
letter-spacing: 0.46px; /*подгон под pixel perf*/
}

.btn--big {
padding: 20px 37px;
font-size: 18px;
line-height: 24px;

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

.btn--big:hover{
color: var(--color-accent);
}

.btn--dark:hover{
background-color: #483b3b ;
}


.btn--dark {
color: var(--color-light);
background-color: var(--color-dark);
}

.btn--white:hover{
background-color: #fce7e7 ;
}

.hero__image{
margin-top: -80px;
}

/* ==== секция "Benefits" преимущества ====== */
.benefits {
padding: 80px 0;
}
 
.list-reset {
}
.benefits__list {
--offsets: 2; /*текущее кол-во отступов*/
display: flex;
flex-wrap: wrap;
gap: 16px;
}

.benefits__item {
display: flex;
align-items: center;
/*width: calc((100% - 32px) / 3);*/ /*простая формула*/
width: calc((100% - ( var(--gap16) * var(--offsets))) / (var(--offsets) + 1)); /*адаптивная формула*/
}

/*для квадратиков справа*/
.benefits__item::before{
content: '';
display: block;
flex-shrink: 0;/*чтоб flex не сжимал блок ПРИНУДИТЕЛЬНО*/
margin-right: 24px;
width: 100px;
height: 100px;
background-color: #FDE7DA;

/* расположение фоновых картинок */
background-position: center;
background-size: 48px 48px;
background-repeat: no-repeat;
}


/* для чего нужна адаптивная формула? Ответ: для @media */
@media(max-width: 992px){
  .benefits__list{
    --offsets: 1; /*один зазор, к примеру*/
  }
}
@media(max-width: 576px){
  .benefits__list{
    --offsets: 0; /*0 зазоров, к примеру*/
  }
}

.benefits__text {
}

.benefits__subtitle {

margin: 0;
margin-bottom: 13px;
font-size: 24px;
font-weight: 700;
line-height: 32px; /* 133.333% */

color: var(--color-dark);
}
.benefits__descr {

font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
margin: 0;
color: var(--color-dark);
}

.benefits__item--speed::before {
background-image: url('../img/feature-one.png');
}
.benefits__item--disign::before  {
background-image: url('../img/feature-two.png');
}
.benefits__item--modularity::before  {
background-image: url('../img/feature-three.png');
}

.benefits__item:hover::before {
/* rotate: 180deg; */
transform:  rotate(270deg) skewX(5deg);
box-shadow: -2px 0px 12px 0px #fb8f2c42, 1px 2px 14px 0px #da566838;
}


/* =====  слайдер ====== */
.new {
background-color: var(--color-dark);
padding: 100px 0 111px 0;
margin-bottom: 100px;

}

.new__slider {

}
.swiper{

}

.swiper-wrapper {

}

.swiper-slide {

}

.new__text {
display: flex;
align-items: center;
flex-direction: column;
}
.new__svg {
padding-bottom: 39px;
width: 100px;
}
.new__decr {
margin: 0;
margin-bottom: 41px;

text-align: center;
font-size: 40px;
font-weight: 400;
line-height: 48px;


max-width: 576px;
color: var(--color-light);
/* color: rgb(35, 212, 26); */
}
.new__personal {
margin: 0;
text-align: center;

font-size: 18px;
font-weight: 700;
line-height: 27px;
color: var(--color-light);
/* color: rgb(35, 212, 26); */
}
.personal-info {
text-align: center;

font-size: 16px;
font-weight: 400;
line-height: 24px;
color: rgba(255, 255, 255, 0.70);
/* color: rgb(35, 212, 26); */
}

.new__pagination {

}
.swiper-pagination {
position: initial;
padding-top: 29px;

}

.swiper-pagination-bullet {
height: 16px;
width: 16px;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.40);
opacity: 1;
}

.swiper-pagination-bullet-active { /*нажатая кнопка*/
background-color: var(--color-light);
}

/* секция Landing page */

.landing {
padding-bottom: 95px;
}


.landing__title {
font-size: 40px;

font-weight: 700;
line-height: 48px;
color: var(--color-dark);
margin: 0;
padding-bottom: 24px;
}
.landing__list {
--offsets:2; /*кол-во пространств между 3 мя карточками*/

display: flex;
flex-wrap: wrap;
column-gap: 18px;
row-gap: 15px;
}

.landing__item {
/* 1- test: передача ссылки на обводку всей картинки */
position: relative;

display: flex;
flex-direction: column;
border-radius: 6px;
/*overflow: auto; чтоб углоки картинки не торчали*/
width: calc((100% - ( var(--gap18) * var(--offsets))) / (var(--offsets) + 1)) ;

/* 2- test: передача ссылки на обводку всей картинки */
outline: 1px solid transparent; /*обесцвеченная обводка*/
outline-offset: 3px;/* границы обводки offset */
transition: all .3s ease-in-out; /*скорость срабатывания*/
}

.landing__img {
background-color: var(--color-dark);
border-radius: 9px 9px 0 0;
}
.landing__descr {

margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 28px;
color: var(--color-dark);
padding: 25px 0 25px 31px;

border: 1px solid #9f9f9f;
border-top-color: transparent;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;

outline: none;

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

/*убрать глюк при :hover с единственной карточкой в ряду*/
.landing-hidden,
.img-hidden,
.descr-hidden{ 
visibility: hidden;
 
}
 

/* 3- test: передача ссылки на обводку всей картинки */
.landing__descr::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;

/* !тест: должно закрасить всею картинку */
/* background-color: rgb(237, 218, 71);   */
}

/* 4- test:  стиль для :focus  когда встаем TAB на картинку */
.landing__descr::after{
content: '';
position: absolute;
outline: 2px solid var(--color-accent);
outline-offset: 5px;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
opacity: 0;

border-radius: 10px;
padding: 2px 2px;
}

/* 5- test:  стиль для :focus  когда встаем TAB на картинку */
.landing__descr:focus-within::after{
opacity: 1;
}

/* .landing__descr:focus-visible{
outline: none;
} */

/* 7 - test: передача ссылки на обводку всей картинки */
.landing__descr:hover {
/* gap: 15px; */
position: absolute;
inset: 0;

outline: 2px solid var(--color-accent);
outline-offset: 5px;
border-radius: inherit;
display: flex;
align-items: flex-end; /*ссылку прибить вниз*/

outline: 2px solid var(--color-accent);
outline-offset: 5px;
border-radius: 10px;
}
 
.landing__descr:active {
color: var(--color-accent);
/* outline-color: transparent; */
}
 
/* footer */

.footer {
background-color: var(--color-dark);
}
 
.footer__top__company {
display: flex;
justify-content: space-between;
align-items: center;

padding: 64px 0 64px 0;
}

.footer__logo{
padding-top: 6px;

outline: 2px solid transparent;
outline-offset: 5px;
}

.footer__logo:focus-visible{
outline-color: var(--color-accent);
}

.footer__logo:hover{
outline-color: var(--color-accent);
}



.btn--footer{

text-align: center;
font-size: 16px;
font-weight: 700;
line-height: 24px; /* 150% */
padding: 12px 36px;

color: var(--color-dark);

}

.btn--footer:hover{
background-color: var(--color-accent) ;
}


.footer__top__links {
display: flex;
justify-content: space-between;
align-items: center;

padding-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.nav__link--text{

color: var(--color-light);

outline: 1px solid transparent;
outline-offset: 6px;
transition: color 0.5s ease-in-out;
}
.nav__link--text:focus-visible{
outline-color:var(--color-accent);
color: var(--color-light);
}

.nav__link--text:hover{
color: var(--color-accent);
}

.nav__link--text:active{
outline-color:var(--color-accent);
color: var(--color-accent);
}


.social {
display: flex;
align-items: center;
gap: 8px;
}
.social_icon {
width: 48px;
height: 48px;
border: 1px solid rgba(0, 0, 0, 0.16);
background: rgba(255, 255, 255, 0.10);
text-align: center;
line-height: 48px;

outline: 1px solid transparent;
outline-offset: 5px;
}

.social_icon:focus-visible{
outline-color: var(--color-accent);
}

.social_icon:hover  {
background-color: var(--color-accent);
}

.social_icon:active{
background-color: inherit;
outline-color: transparent;
}

.social_icon:active svg path{
fill: var(--color-accent)
}



.footer_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}

.footer_bottom_links {
display: flex;
gap: 12px;
align-items: center;
padding: 29px 4px;
}
.bottom-text{
margin: 0;

font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
color: var(--color-light);
}
.bottom-text-by{
font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
color:var(--color-accent);

outline: 1px solid transparent;
outline-offset: 5px;
}

.bottom-text-by:focus-visible{
outline-color: var(--color-accent);
}

.bottom-svg{
outline: 1px solid transparent;
outline-offset: 5px;
}

.bottom-svg:focus-visible{
outline-color: var(--color-accent);
}

.bottom-svg:hover{
outline-color: var(--color-accent);
}


.footer_bottom_contact {
}

.bottom-text-contact{
margin: 0;

font-size: 16px;
font-weight: 400;
line-height: 24px; /* 150% */
color: var(--color-light);

padding-right: 4px;

outline: 1px solid transparent;
outline-offset: 5px;
transition:  color .35s ease-in-out;
}

.bottom-text-contact:focus-visible{
outline-color: var(--color-accent);
}

.bottom-text-contact:hover{
color: var(--color-accent);
}

.bottom-text-contact:active{
outline-color: transparent; 
}