/* сайт Lionica (самбо) . На github  */

/* ====== подключение шрифтов ======= */

@font-face {
font-family: "OpenSans";
src: local(OpenSans-Regular),
url("../fonts/OpenSansRegular.woff2") format(woff2),
url("../fonts/OpenSansRegular.woff") format(woff);
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {  
font-family: "OpenSans";
src: local(OpenSans-Ligth),
url("../fonts/OpenSansLight.woff2") format(woff2),
url("../fonts/OpenSansLight.woff") format(woff);
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {   
font-family: "OpenSans";
src: local(OpenSans-Semibold),
url("../fonts/OpenSansSemiBold.woff2") format(woff2),
url("../fonts/OpenSansSemiBold.woff") format(woff);
font-weight: 600;
font-style: normal;
font-display: swap;
}

/* ==== default-style ==== */

html{
box-sizing: border-box;
}

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

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

img{
max-width: 100%;
}

body{
/* min-width: 1200px; */
min-width: 320px; /*для адаптива*/
font-family: 'OpenSans', sans-serif;
font-weight: 400;
}

/* Переменные */
:root{
--gap: 30px; /*переменная gap = 30рх*/
}

/* ==== default-style: СПИСКИ, КНОПКИ, FLEX ==== */

.list-reset{
margin: 0;
padding: 0;
list-style: none;
}

.btn-reset{
padding: 0;
border: none;
background-color: transparent;
cursor: pointer;
}

.flex{
display: flex;
}

.container{
max-width: 1200px; /*лимит по макс.ширине*/
padding: 0 15px;
margin: 0 auto;
width: 100%; /* фишка: 1200рх = 100%*/
}

.section-title{
margin: 0;
margin-bottom: 40px;
}

.section-descr{
margin: 0;
margin-bottom: 50px;
font-size: 16px;
line-height: 22px;
}

.section-offset{
padding-top: 87px;
padding-bottom: 160px;
}



/* ===== шапка ======= */

.header{
padding: 36px 0;
border-bottom: 1px solid #c4c4c4;
background-color: #fff;
}

.header-container{
align-items: center;
}

.header-logo{
margin-right: auto;
}

.header-nav{
margin-right: 52px;
}

/* .header-list-item{
position: relative;
} */

.header-list-item:not(:last-child){
margin-right: 52px;
}

.header-link{
position: relative;
font-weight: 600;
color: #1c1c1c;
font-size: 15px;

transition: color 0.3s ease-in-out;
}

/* при клике обводит ссылку рамкой */
.header-link:focus{
outline-offset: 2px;
outline: 1px solid #71A7E2;
}

/* цвет ссфлки при наведении */
.header-link:hover{
color: #71A7E2;
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 1, SB-видео 10.8)*/
.header-link::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #3474BA;
opacity: 0;

transition: opacity 0.3s ease-in-out; /*плавность показа стиля*/
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 2, SB-видео 10.8)*/
.header-link:active{
color: #3172b9;
outline: none;
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 3, SB-видео 10.8)*/
.header-link:active::after{
opacity: 1;
}

/* кнопка БУРГЕР скрыта для размеров экрана - до 992рх */
.burger {
  display: none;
}
 


/* ====== кнопки и стили кнопок ========= */

.btn{
position: relative;
outline: none;

font-weight: 600;
font-size: 15px;
font-family: inherit; /*наследование*/
text-transform: uppercase;
padding: 15px 35px;
background-color: #3172b9;
color: #fff;
border-radius: 4px;

transition: background-color 0.3s ease-in-out;
}

/* псевдоэлменты... */
.btn::after{
content: "";
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;

border-radius: inherit;  /*наследование от родителя = 4px*/
border: 1px solid #3172b9;
outline: none;

opacity: 0; /*скрыт - до момента наведения / клика */

transition: opacity 0.3s ease-in-out; /* плавность показа*/
}

.btn:focus::after{
opacity: 1;
}

.btn:hover{
background-color: #71A7E2;
}

.btn:active{
background-color: #0E3B6c;
}

.btn:active::after{
opacity: 0;
}


/* ========  HERO ========== */

.hero{
padding: 100px 0 150px 0;

background-image: url(../img/hero-bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

.hero-content{
max-width: 50%;
flex-direction: column;
align-items: flex-start;
}

.hero-title{
margin: 0;
margin-bottom: 25px;
font-weight: 300;
font-size: 40px;
line-height: 130%;
}

.hero-descr{
/* width: 471px; */
margin: 0;
margin-bottom: 34px;
font-size: 16px;
line-height: 155%;
color: #787878;
}

.hero-btn{
margin-bottom: 14px;
min-width: 250px;
padding: 20px 0 20px 0;
}

.hero-wrapper{
display: flex;
flex-direction: column;
align-items:center;
}

.hero-secure{
font-size: 11px;
line-height: 155%;
color: #787878;
text-transform: uppercase;
background-image: url(../svg/secure.svg);
background-position: left center;
background-repeat: no-repeat;
background-size: 14px 17px;
padding-left: 30px;
}

/* ========= SERVICES ============ */
.services{
border-bottom: 1px solid #DADADA;
}

.services-title{
text-align: center;
margin-bottom: 40px;
font-weight: 300;
font-size: 36px;
line-height: 130%;
color: #1c1c1c;
}

.services-descr{
text-align: center; 
}

.services-items{
--offsets: 3; /*кол-во отступов между 4мя карточкам*/
gap:var(--gap);/* 30px */
flex-wrap: wrap;
}



.services-item{
border: 1px solid #e4e4e4;
border-radius: 5px;
flex-direction: column;
align-items: center;
padding: 60px 30px;
/* width: 270px; */ /*до применения адаптива к верстке*/
/* width: calc((100% - (30px * 3)) / 4);*/ /* вариант 1: calc с цифрами*/
width: calc((100% - (var(--gap) * var(--offsets))) / (var(--offsets) + 1)); /* вариант 2: calc с var()*/

transition: background-color  0.3s ease-in-out,  border-color 0.3s ease-in-out; /*плавность показа*/; /*плавность показа*/

} 

/* навдение мышкой, sb 8.10 */
.services-item:hover{
background-color: #317289;

}
 
/* svg-иконки: борцы, сердце, карты, молот */
.services-item-icon{
fill: #3172B9; /* включить цвет, вместо fill:none в html'e*/
margin-bottom: 25px;

transition: fill 0.3s ease-in-out; /*плавность показа*/
}

/* окрас svg-иконки в белый цвет (при наведении) */
.services-item:hover .services-item-icon{
fill: #fff;
}


.services-item-title{
margin: 0;
margin-bottom: 15px;

text-align: center;
font-weight: 600;
font-size: 20px;
line-height: 130%;
color: #1c1c1c;

transition: color 0.3s ease-in-out; /*плавность показа*/
}

/* при наведении  текст станет белым */
.services-item:hover .services-item-title{
color: #fff;
}

.services-item-descr{
margin: 0;
text-align: center;
font-size: 14px;
line-height: 150%;
color: #787878;

transition: color 0.3s ease-in-out; /*плавность показа*/
}

/* при наведении  описание станет белым */
.services-item:hover .services-item-descr{
color: #fff;
}


/* ========= ARTICLES ============ */
.articles{
border: 1px solid #DADADA;
}

.articles-list{ 
flex-wrap: wrap;
/*для адаптива 2х2 карточек*/
--offsets: 1; /*м/у 2мя карточками 1 разрыв*/
gap:var(--gap); /*=30px*/
}

.articles-item{
/* width: 570px; было до адаптива*/
width: calc((100% - (var(--gap) * var(--offsets))) / (var(--offsets) + 1));
margin-bottom: 30px;
}

/* .articles-item:not(:nth-child(2n)){
margin-right: 30px;
} т.к. ест адаптив */


.blog-preview{
overflow: hidden;
border: 1px solid #e4e4e4;
border-radius: 6px;
height: 100%; /*чтоб картинка с животными не сжимались при экране <992px*/
}

.blog-preview-link{
display: flex;
position: relative;
width: 100%;

transition: background-color 0.3s ease-in-out; /*плавность показа*/
}

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

.blog-preview-link:hover{
background-color: #3172B9;
}

.blog-preview-link:hover .blog-preview-title{
color: #fff;
}

.blog-preview-link:hover .blog-preview-descr{
color: #fff;
}
.blog-preview-link:hover .blog-preview-time{
color: #fff;
}

/* псевдоклассы focus при наведении на карточки */

.blog-preview-link:focus{
background-color: #71A7E2;
}

.blog-preview-link:focus .blog-preview-title{
color: #fff;
}

.blog-preview-link:focus .blog-preview-descr{
color: #fff;
}
.blog-preview-link:focus .blog-preview-time{
color: #fff;
}

/* псевдоклассы active при наведении на карточки */

.blog-preview-link:active{
background-color: #0E3B6c;
}

.blog-preview-link:active .blog-preview-title{
color: #fff;
}

.blog-preview-link:active .blog-preview-descr{
color: #fff;
}
.blog-preview-link:active .blog-preview-time{
color: #fff;
}

 

.blog-preview-time{
display: block;
margin-bottom: 5px;
color: #787878;
font-size: 10px;
font-weight: 400;
line-height: 150%;  

transition: color 0.3s ease-in-out; /*плавность показа*/
}

.blog-preview-title{
margin: 0 0 15px 0;
color: #1C1C1C;
font-size: 20px;
font-weight: 600;
line-height: 130%; 

transition: color 0.3s ease-in-out; /*плавность показа*/
}

.blog-preview-descr{
margin: 0;
max-width: 210px;
color: #787878; 
font-size: 14px; 
font-weight: 400;
line-height: 150%; /* 21px */

transition: color 0.3s ease-in-out; /*плавность показа*/
}

.blog-preview-image{
/* чтоб картинки заполнили весь свой блок */
/* object-fit: cover; */
aspect-ratio: 1/1;
}

.blog-preview-text{
padding: 30px;
}

.blog-preview-time{
display: block;
margin-bottom: 5px;
}

.blog-preview-title{
margin: 0;
margin-bottom: 15px;
}

.blog-preview-descr{
margin: 0;
}


/* ========= Clients ============ */

.clients{
border-bottom: 1px solid #DADADA;
}

.clients-list{ /*обертка для 3х карточек*/
--offsets: 2; /*2 промежутка м/у 3 карточками*/
flex-wrap: wrap;
gap: var(--gap); /*--gap === 30px*/
}

.clients-item{
flex-direction: column;
/*  width: 370px; т.к. вставим адаптив*/
width: calc((100% - (var(--gap) * var(--offsets))) / (var(--offsets) + 1));

padding: 50px 36px;
padding-bottom: 30px;
border: 1px solid #e4e4e4;
border-radius: 6px;
 
}

/* .clients-item:not(:nth-child(3n)){
margin-right: 30px;
} тк создан адаптив и это условие не нужно */

.clients-item-descr{
margin: 0;
margin-bottom: 30px;

color: #787878;
font-size: 14px; 
line-height: 180%; /* 25.2px */

}

.clients-user{
margin-top: auto; /*для прибивки юзера к низу*/
align-items: center;
padding-top: 28px;
border-top: 1px solid #DADADA;
width: 100%;
}

.clients-avatar{ /*стиль картинки аватара*/
flex-shrink: 0;
width: 67px;
margin-right: 17px;
border-radius: 100%;
}

.clients-name{
margin-bottom: 5px;
color: #1C1C1C;
font-size: 17px;
font-weight: 600;
line-height: 180%; /* 30.6px */
}

.clients-post{
color: #787878;
font-size: 14px;
font-weight: 400;
line-height: 180%; /* 25.2px */
}
 
 /* ====== Contacts ============== */
.contacts{
border-bottom: 1px solid #DADADA;
}
  
.contacts-address{
font-style: normal;
}

.contacts-list{
flex-wrap: wrap;

/*для адаптива 3 карточек в ряд*/
--offsets: 2; /*м/у 3мя карточками 2 разрыва*/
gap:var(--gap); /*=30px*/

}

.contacts-item{
flex-direction: column;

/* width: 370px; т.к. прикрутили адаптивную ширину*/
width: calc((100% - (var(--gap) * var(--offsets))) / (var(--offsets) + 1));

background-position: left top;
background-repeat: no-repeat;
background-size: 29px 29px;
padding-top: 48px;
}

/* .contacts-item:not(:nth-child(3n)){
margin-right: 30px;
} */

.contacts-item-link {
 font-size: 14px;
 line-height: 180%;
 color: #787878;

transition: color 0.3s ease-in-out; 
}
/* focus hover active  для Контактов*/
.contacts-item-link:focus{
outline: 1px solid #71A7E2;
}
.contacts-item-link:hover{
color: #71A7E2;
}
.contacts-item-link:active{
outline: none;
color: #71A7E2;
}


.contacts-item-address{
background-image: url(../svg/location.svg);
}

.contacts-item-call{
background-image: url(../svg/phone.svg);
}

.contacts-item-mail{
background-image: url(../svg/mail-top.svg);
}


.contacts-item-caption{
margin-bottom: 30px;

color: #1C1C1C;
font-size: 17px;
 
line-height: 180%; /* 30.6px */
}

.contacts-item-text{
margin: 0;
max-width: 215px;

color: #787878; 
font-size: 14px; 
 
line-height: 180%; /* 25.2px */
}




/* .contacts-item-link:not(:last-child){
margin-bottom: 5px;
} */

/* ========= JOIN US (модуль 9.8) ============ */

.join-us{
border-bottom: 1px solid #c4c4c4;
}

.join-us-title{
text-align: center;
}

.join-us-descr{
text-align: center;
margin-bottom: 30px;
}

.form{
padding: 0 55px;
} 

.form-top{
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}

/* левые input'ы в "Написать нам"  */
.form-left{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 49%;

gap: 14px; 
}

.form-right{
width: 49%;
}

.form-input{
width: 250px;
height: 60px;
border: 1px solid #DADADA;
border-radius: 50px;
box-sizing: border-box;
padding: 16px 28px;

transition: background-color 0.3s ease-in-out, border-color 0.3s;
}

/* отступы м\у input в "Написать нам" */
/* .form-input:nth-child(-n+2){
margin-bottom: 19px; 
} */

/* focus hover active Для ввода форма */

.form-input:focus{
outline: none;
border-color: #71A7E2;
background-color: rgba(113, 167, 226, 0.2);
}
.form-input:hover{
border-color: #71A7E2;
}
.form-input:active{
border-color: #71A7E2;
}

.form-select{
width: 250px;
height: 60px;
border: 1px solid #DADADA;
border-radius: 50px;
box-sizing: border-box;
padding: 16px 28px;

transition: background-color 0.3s ease-in-out, border-color 0.3s; /*плавность показа*/
}

.form-select:focus{
outline: none;
border-color: #71A7E2;
background-color: rgba(113, 167, 226, 0.2);
}
.form-select:hover{
border-color: #71A7E2;
}
.form-select:active{
border-color: #0E3B6c;
}

.form-textarea{
width: 100%;
height: 100%;
border: 1px solid #DADADA;
border-radius: 20px;
box-sizing: border-box;
resize: none;
padding: 16px 28px;

transition: background-color 0.3s ease-in-out, border-color 0.3s;
}

.form-textarea:focus{
outline: none;
border-color: #71A7E2;
background-color: rgba(113, 167, 226, 0.2);
}
.form-textarea:hover{
border-color: #71A7E2;
}
.form-textarea:active{
border-color: #71A7E2;
}


.form-bottom{
display: flex;
justify-content: flex-end;

}

.form-wrapper{
display: flex;
flex-direction: column;
align-items: center;

}

.form-btn{
min-width: 230px;
padding: 20px 0;
border-radius: 50px;
margin-bottom: 10px;
}

.form-check{
font-size: 12px;
line-height: 16px;
color: #787878;
}

.form-check input{
margin-right: 8px;
}

.form-check a{
color: #3172b9;
border-bottom: 1px solid#3172b9 ;
}

/* ========= FOOTER (модуль 6.9) ============ */



.footer{
padding: 42px 0;


}

.footer-container{
align-items: center;
justify-content: space-between;
}

.footer-left,
.footer-right{
align-items: center;
}

.footer-logo{
margin-right: 25px;
}

.footer-copy{
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #787878;

}
 
/*focus active hover на слова в футере*/
.footer-item{
position: relative;
font-weight: 600;
color: #1c1c1c;
font-size: 15px;

transition: color 0.3s ease-in-out;
}

/* при клике обводит ссылку рамкой */
.footer-item:focus{
outline-offset: 2px;
outline: 1px solid #71A7E2;
}

/* цвет ссфлки при наведении */
.footer-item:hover{
color: #71A7E2;
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 1, SB-видео 10.8)*/
.footer-item::after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #3474BA;
opacity: 0;

transition: opacity 0.3s ease-in-out; /*плавность показа стиля*/
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 2, SB-видео 10.8)*/
.footer-item:active{
color: #3172b9;
outline: none;
}

/* нижнее ПОДЧЕРКИВАНИЕ при клике (шаг 3, SB-видео 10.8)*/
.footer-item:active::after{
opacity: 1;
}

.footer-item:not(:last-child){
margin-right: 28px;
}

.footer-nav{
margin-right: 56px;
}

/*три иконки соц.сетей: Х in mail*/
.social{
align-items: center;
}

.social-item:not(:last-child){
margin-right: 32px;
}

.social-link{
width: 24px;
height: 24px;

display: flex;
align-items: center;
justify-content: center;


/* display: block; */

/* background-position: center;
background-size: contain ;
background-repeat: no-repeat; */
}

/* стили для svg-иконок */
.social-link svg{
fill: #000;
/* плавность наведения*/
transition: fill 0.3s ease-in-out, stroke 0.3s ease-in-out;
}

.social-link-tw{
/* background-image: url('../svg/twitter.svg'); */
}
.social-link-linkedin{
/* background-image: url('../svg/linkedin.svg'); */
}
.social-link-mail{
/* background-image: url('../svg/mail.svg'); */
fill: transparent;
stroke: #000;
}

.social-link:focus{
outline-offset: 2px;
outline: 1px solid #71A7E2;
}


.social-link:hover svg{
fill:  #71A7E2;
}

.social-link-mail:hover svg{
fill: transparent;
stroke: #71A7E2;
}


.social-link:active svg{
fill:  #3172B9;
}

.social-link-mail:active svg{
fill: transparent;
stroke: #3172B9;
}