/*********************************************
DF LAW UI KIT
Версия 1.0
**********************************************/

:root{

--df-red:#d62828;
--df-black:#111111;
--df-text:#303030;
--df-gray:#666;
--df-border:#ececec;
--df-bg:#ffffff;

--radius:18px;

--shadow:
0 15px 45px rgba(0,0,0,.06);

--transition:.28s cubic-bezier(.2,.8,.2,1);

}

/**********************
Контейнер
**********************/

.df-container{

max-width:1180px;

margin:auto;

padding:0 20px;

}

/**********************
Секция
**********************/

.df-section{

padding:90px 0;

position:relative;

}

/**********************
Заголовки
**********************/

.df-title{

font-size:52px;

font-weight:700;

line-height:1.05;

letter-spacing:-1px;

color:var(--df-black);

margin:0 0 24px;

}

.df-subtitle{

font-size:22px;

line-height:1.6;

color:var(--df-gray);

margin-bottom:40px;

}

/**********************
Текст
**********************/

.df-text{

font-size:18px;

line-height:1.75;

color:var(--df-text);

}

/**********************
Кнопка
**********************/

.df-button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:14px;

background:var(--df-red);

color:#fff;

font-size:16px;

font-weight:600;

text-decoration:none;

transition:var(--transition);

box-shadow:

0 10px 35px rgba(214,40,40,.25);

}

.df-button:hover{

transform:translateY(-3px);

box-shadow:

0 18px 45px rgba(214,40,40,.30);

}

/**********************
Карточки
**********************/

.df-card{

background:#fff;

border-radius:18px;

padding:34px;

border:1px solid var(--df-border);

transition:var(--transition);

}

.df-card:hover{

transform:translateY(-6px);

box-shadow:var(--shadow);

}

/**********************
Цифры
**********************/

.df-number{

font-size:42px;

font-weight:700;

color:var(--df-black);

margin-bottom:10px;

}

.df-small{

font-size:15px;

line-height:1.5;

color:#777;

}

/**********************
Плавное появление
**********************/

.df-fade{

opacity:0;

transform:translateY(30px);

transition:.7s;

}

.df-fade.visible{

opacity:1;

transform:none;

}

/**********************
Мобильная версия
**********************/

@media(max-width:980px){

.df-section{

padding:60px 0;

}

.df-title{

font-size:38px;

}

.df-subtitle{

font-size:20px;

}

}

@media(max-width:640px){

.df-container{

padding:0 18px;

}

.df-title{

font-size:32px;

line-height:1.1;

}

.df-subtitle{

font-size:18px;

}

.df-text{

font-size:16px;

}

.df-button{

width:100%;

padding:18px;

}

.df-card{

padding:24px;

}

.df-number{

font-size:34px;

}

}

</style>