@font-face{
	font-family:'TT Runs';
	src:url('../font/TT Runs Trial Bold.ttf') format('truetype');
	font-weight:700;
}
@font-face{
	font-family:'TT Runs';
	src:url('../font/TT Runs Trial Black.ttf') format('truetype');
	font-weight:800;
}
@font-face{
	font-family:'Ouvality';
	src:url('../font/Ouvality.ttf') format('truetype');
	font-weight:800;
}

@font-face{
	font-family:'TT Runs Italic';
	src:url('../font/TT Runs Trial Black Italic.ttf') format('truetype');
	font-weight:800;
	font-style:italic;
}
*{margin:0;padding:0;box-sizing:border-box}

body{
	font-family:'TT Runs', Arial;
	background:#ffffff;
	color:#111;
}

/* ===== HEADER ===== */
.container{
	width:100%;
	margin:0 auto;
}

header{
	background: white;
}

.header-inner{
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	align-items:center;
	padding:14px 0;
}

.logo{
	display:flex;
	align-items:center;
	gap:10px;
	font-weight:700;
}
.logo img
{
	height: 60px;
	margin: 10px;
}

.logo-box{
	width:34px;
	height:34px;
	background:#2b7ea1;
	border-radius:6px;
}

.header-right{
	display:flex;
	align-items:center;
	gap:16px;
	font-size:x-large;
	flex-wrap: wrap;
    justify-content: center;
}

.social div{
	width:100%;

	border-radius:6px;
	display:inline-block;
	margin-left:6px;
}
.social img{
	width:100%;
}
.social{
  display:flex;
}

.social a{
  background:#2b7ea1;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.25s ease;
  position:relative;
  overflow:hidden;
}
.social div a::before{
  content:"";
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
  transition:0.5s;
}

.social div a:hover::before{
  left:100%;
}
.phone{
    white-space: nowrap;
}

/* ===== HERO ===== */
.hero{
	height:32vw;
	min-height:300px;
	background:url('../img/bpla.jpg') top/cover no-repeat;
	position:relative;
}

.hero-content{
	position:absolute;
	left:190px;
	top:30px;
	color:#fff;
}

.hero h1{
	font-size:3.75vw;
	font-weight:900;
}
.hero h1::before{
	content:'\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0';
	display:block;
	position:absolute;
	text-decoration:underline;
	width:600px;
	overflow:hidden;
	padding-top:0.885vw;
}



.hero .lines{
    margin-top: 14px;
    font-size: 1.771vw;
    line-height: 1.05;
    font-weight: 800;
}

.hero .Ouvality{
	font-family:'Ouvality';
	color:#183e75;
	display:inline-block;
	transform:translateY(-6px);
	font-size: 4.167vw;
	position: absolute;    
	text-shadow: 0 0 4px white;
}

.hero .big{
position: absolute;
    left: 20.313vw;
    top: 2.604vw;
    font-size: 7.5vw;
    font-weight: 900;
    font-style: oblique;
}

/* Дополнительные стили для ограничения ширины content */
#content {
    max-width: 1160px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

/* Убедимся, что внутренние контейнеры не создают дополнительную ширину */
#content .container {
    width: 100%;
    max-width: 100%;
    margin: 5;
    padding: 5;
}

/* Для адаптивности на маленьких экранах */
@media (max-width: 1200px) {
    #content {
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    #content {
        padding: 0 16px;
    }
}



/* ===== BANNER ===== */
.banner{
	position:absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	bottom:2px;
	left:0px;
	height: 75px;
	padding:18px 24px;
	background:linear-gradient(90deg,#c62828,#d32f2f);
	color:#fff;
	box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.banner::after{
	content:"";
	position:absolute;
	right:-63px;
	top:0;
	width:80px;
	height:100%;
	background:inherit;
	transform:skewX(-25deg);
	border-radius:0 12px 0px 0;
}

/* ===== SECTIONS ===== */
.section{
	margin-top:80px;
}

.title{
	font-size:26px;
	font-weight:800;
	margin-bottom:18px;
}

.right-stack ul{
    padding:0 15px;
}

.card-shadow{
	box-shadow: 13px 0px 25px 0px rgb(0 0 0 / 4%);
}
.card{
	background:#ffffff;
	border-radius:20px;
	padding:24px;
}
ul{
	list-style:none;
}

ul li{
	font-size:18px;
	margin-bottom:10px;
	padding-left:18px;
	position:relative;
}

ul li::before{
	content:'★';
    position: absolute;
    left: -8px;
    top: -4px;
    color: #535826;
}

/* GRID */
.grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px;
}


/* STEPS */
.steps{
	background:#e6e2d8;
	border-radius: 20px 20px 0 0;
	padding:30px;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}

/* Стили для заголовка внутри steps — на всю ширину и по центру */
.steps-header {
    grid-column: 1 / -1;  /* растягиваем на все 3 колонки */
    text-align: center;
    margin-bottom: 10px;
}

.steps-header .title {
    margin-bottom: 0;
    font-size: 26px;
    font-weight: 800;
    text-align: center;
}

.step{
    position: relative;
    font-size: 14px;
    padding-top: 20px;
    z-index: 1;
    text-align: center;
    font-weight: 400;
}

.step::before{
    content: attr(data-n);
    position: absolute;
    bottom: 0px;  /* размещаем снизу */
    left: -3%;
    transform: translateX(-50%);
    font-size: 70px;
    color: #d5d0c6;
    font-weight: 800;
    z-index: -1;  /* отправляем на задний план */
    opacity: 0.6;
    pointer-events: none;
	font-family: Roboto;
}

/* PAYMENTS */
.payments{
	background:#e6e2d8;
	border-radius:20px;
	padding:30px;
	text-align:center;
}

.pay-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}

.tag{
	display:inline-block;
	background:#6f8f3d;
	color:#fff;
	padding:6px 12px;
	border-radius:6px;
	margin-top:6px;
	font-size:22pt;
	font-weight:800;

}

/* CONTACTS */
.contacts{
	text-align:center;
	margin-top:40px;
}

.qr{
	display:flex;
	justify-content:center;
	gap:40px;
	margin-top:20px;
}

.qr div{
	width:100px;
	height:100px;
	background:#fff;
	border-radius:10px;
}
.contacts-section{

  padding:60px 0;
}

.contacts-title{
  text-align:center;
  font-size:22px;
  font-weight:700;
  margin-bottom:40px;
}

.contacts-content{
  display:flex;
  justify-content:space-around;
  align-items:center;
}

/* LEFT */
.contacts-left{
  text-align:left;
}
/* center */
.contacts-center{
  text-align:center;
}
.phones{
  font-size:18px;
  font-weight:800;
  margin-bottom:12px;
}

.address{
  font-size:14px;
  color:#333;
}

/* RIGHT */
.contacts-right{
  display:flex;
  gap:40px;
}

.qr-item{
  text-align:center;
}

.qr-item img{
  width:110px;
  height:110px;
  background:#fff;
}

.qr-text{
  margin-top:10px;
  font-size:12px;
  color:#333;
}

/* MOBILE */
@media(max-width:768px){

.contacts-content{
  flex-direction:column;
  gap:30px;
  text-align:center;
}

.contacts-left{
  text-align:center;
}

.contacts-right{
  justify-content:center;
}

}
/* FOOTER */
.footer{
	text-align:center;
	font-size:12px;
	color:#555;
	margin:40px auto;
	max-width:800px;
}

/* ===== НОВАЯ КОМПОНОВКА: СПЕЦУСЛОВИЯ СЛЕВА, ЛЬГОТЫ + ДОЛЖНОСТИ СПРАВА (ДРУГ НА ДРУГЕ) ===== */
/* Двухколоночный контейнер: левая колонка — спецусловия, правая — вертикальный стек льгот и должностей */
.layout-duo {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-top: 80px;      /* стандартный отступ как у .section */
}

/* Левая колонка — специальные условия (один блок) */
.left-special {
    flex: 1;
}

/* Правая колонка — объединяет федеральные льготы и должности вертикально */
.right-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Полностью сохраняем стили карточек, никаких изменений внутри */
.left-special .card,
.right-stack .card {
    height: -webkit-fill-available;
    margin: 0;
	
}

/* Адаптация под мобильные — возвращаем исходную вертикальную последовательность (спецусловия сверху или в потоке, но порядок: сначала спецусловия, потом льготы и должности) */
@media (max-width: 768px) {
    .layout-duo {
        flex-direction: column;
        gap: 20px;
        margin-top: 60px;
    }
    .left-special {
        width: 100%;
    }
    .right-stack {
        width: 100%;
    }
}

/* Остальные мобильные стили из исходника сохраняем без изменений */
@media(max-width:768px){
.step::before{
    content: attr(data-n);
    position: absolute;
    bottom: -17px;  /* размещаем снизу */
    left: 0%;
    transform: translateX(-50%);
    font-size: 70px;
    color: #d5d0c6;
    font-weight: 800;
    z-index: -1;  /* отправляем на задний план */
    opacity: 0.6;
    pointer-events: none;
	font-family: Roboto;
}


.container{
	width:100%;
	padding:0 16px;
}

.hero{
	height:40vw;
	min-height:300px;
}

.hero-content{
	position:relative;
	left:auto;
	top:auto;
	padding:40px 0;
	font-size: 10px !important;
}


.hero .big{
    left: 20%;
    top: 37%;
    font-size: 7.5vw;
		}
		
.hero .lines {
	margin-top: 0.729vw;
	margin-left: 0.729vw;
	font-size: 1.771vw;
	line-height: 1.55;
	font-weight: 800;
}

.hero .h1 {

	margin-left: 0.729vw;
  
}

.hero h1::before{
	content:'\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0\a0';
	display:block;
	position:absolute;
	text-decoration:underline;
	width:100%;
	overflow:hidden;
	padding-top:1%;
}
.banner{
	width:100%;
	position: absolute;
	height: 5hw;
	overflow: hidden;
}

.grid,.pay-grid{
	grid-template-columns:1fr;
}

.steps{
	grid-template-columns:1fr;
}

.layout-duo {
    flex-direction: column;
}
/* на мобильных заголовок steps тоже корректен */
.steps-header {
    grid-column: 1 / -1;
}
}



@media(max-width:360px){

.hero h1 {
    font-size: 6.75vw;
    font-weight: 900;
}
.hero h3 {
    font-size: 3.75vw;
    font-weight: 900;
}
.hero p {
    font-size: 2.75vw;
}

.hero .lines {
     margin-top: 0.729vw;
     margin-left: 0.729vw;
    font-size: 5.771vw;
    line-height: 1.05;
    font-weight: 800;
}
		
.hero .Ouvality {
    font-family: 'Ouvality';
    color: #183e75;
    display: inline-block;
    transform: translateY(-6px);
    font-size: 12.167vw;
    position: absolute;
}	

.hero .big {
    left: 47%;
    top: 39%;
    font-size: 10.5vw;
    }

}


.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}