/* === CSS ДЛЯ КОНЦЕПЦИИ "КАСПИЙСКИЙ ВЕКТОР" === */
/* --- 1. Базовые настройки, переменные и шрифт --- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }



:root {
    --font-family: 'Manrope', -apple-system, sans-serif;
    --color-bg: #0D1B2A;
    --color-bg-alt: #1B263B;
    --color-surface: #2a3a5e;
	
	--color-surface: rgba(27, 38, 59, 0.6);
    --color-surface-hover: rgba(42, 58, 94, 0.7);
	
    --color-text: #E0E1DD;
    --color-text-muted: #778DA9;
    --color-primary: #80FFDB;
    --color-secondary: #415A77;
    --color-border: #415a774d;
    --shadow: 0 10px 30px -15px rgba(2,12,27,0.7);
    --border-radius: 12px;
    --transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    --color-dark-blue: #0A192F;
    --color-navy: #1C2B4D;
    --color-light-navy: #303C55;
    --color-slate: #8892B0;
    --color-light-slate: #A8B2D1;
    --color-white: #FFFFFF;
    --color-primary: #64FFDA;
    --color-primary-tint: rgba(100, 255, 218, 0.1);
    --border-radius: 8px;
	
	--color-text-dark: #8892b0; /* Темный текст на светлом фоне */
    --color-text-light: #E0E7ED; /* Светлый текст на темном фоне */
    --color-text-muted: #6B7280; /* Приглушенный текст на светлом фоне */
    --color-text-light-muted: #9CA3AF; /* Приглушенный текст на темном фоне */
	
	--border-color-dark: #2A3C5B; /* Бордеры на темном фоне */
    --border-color-light: #304b67; /* Бордеры на светлом фоне */
	
	--color-dark-bg: #0B132B;
    --color-light-bg: #F5F7FA;
    --color-dark-text: #1A253C;
    --color-light-text: #8C98B8;
    --color-white: #FFFFFF;
    --color-accent: #4F46E5;
    --color-accent-light: #C7D2FE;
	
	--color-accent-blue: #007BFF;
    --color-accent-blue-hover: #0056b3;
	--color-accent-blue-alpha: rgba(0, 123, 255, 0.1);
	
	--color-text-secondary: #8892B0;
	--color-text-primary: #E6F1FF;

	--sidebar-width: 280px;
	
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

.goog-te-banner-frame {
    display: none !important;
}

html { scroll-behavior: smooth; font-size: 16px; }
body {
    font-family: var(--font-family); background-color: var(--color-bg);
    color: var(--color-text); -webkit-font-smoothing: antialiased;
	
	padding-top:80px;
	top: 0px !important;
}

body > .skiptranslate {
    display: none !important;
}

font, font font {user-select: none;}


#scrollable {
	min-width:80%;
	margin-right: 0px;
    margin-top: 0px;
}


.app-layout {
    display: flex;
}
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: relative; /*fixed;*/
    top: 10px; left: 0;
    background-color: rgba(27, 38, 59, 0.3); /* Легкий фон для стекла */
    backdrop-filter: blur(16px);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 0;
}

.main-content-wrapper {
    flex-grow: 1;
    /*margin-left: var(--sidebar-width);*/
    display: flex;
    flex-direction: column;
}
main#content {
    flex-grow: 1;
    padding: 2rem;
    position: relative;
}

.main-navigation {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
	width: 280px;
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
	color: var(--color-text-secondary);    
    transition: var(--transition);
}
.nav-link span{
	color: var(--color-text-secondary);   
	}

.nav-link svg {
    width: 24px; height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
.nav-link:hover {
    color: var(--color-text-primary);    
	background-color: var(--color-surface);
	}
.nav-link:hover span{
	color: var(--color-text-primary);    	
}

.nav-link.active {
    color: var(--color-text-primary);
    background-color: var(--color-accent-blue);
    box-shadow: 0 0 15px rgba(100, 255, 218, 0.4);
}
.nav-link.active span{
	color: var(--color-text-primary);
}

.nav-link.active:hover{background-color: var(--color-accent-blue:hover);}

.nav-link.active svg {
    stroke: var(--color-bg);
}





.language {
    position: fixed;
    right: 10px;
    top: 0%;
    transform: translateY(0%);
    z-index: 2199;
    display: flex;
    flex-direction: row;
}
.language__img {margin: 2px; cursor: pointer; opacity: .3;}
.language__img:hover, .language__img_active {opacity: 1;}

#site-wrapper { position: relative; overflow-x: hidden; }
.container { max-width: 1920px; margin: 0 auto; padding: 0 2rem; }
.section-title {
    font-size: 2.8rem; font-weight: 800; color: var(--color-text);
    margin-bottom: 3rem; text-align: center;
}
.btn {
    text-decoration:none; padding: 0.8rem 1.75rem; border-radius:8px;
    font-weight: 700; transition: var(--transition);
}
.btn-primary {
    background: var(--color-primary); color: #000;
}
.btn-primary:hover { background: var(--color-text); box-shadow: 0 0 20px var(--color-primary); }

/* --- 2. Header с новым элементом "Личный кабинет" --- */
header {
    background-color: rgba(13, 27, 42, 0.7); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border); padding: 1.25rem 0;
    z-index: 2000;
	position: fixed;
    right: 0;
    left: 0;
    top: 0;
}
header .container { display: flex; justify-content: space-between; align-items: center; }
.dmlogo a { display: flex; align-items: center; text-decoration: none; }
.dmlogo img { height: 48px; }
.logo-text { line-height: 1; margin-left: 0.75rem; }
.logo-text strong { font-size: 1.3rem; font-weight: 800; color: var(--color-text); }
.logo-text small { color: var(--color-text-muted); font-weight: 600;}
.hMenu ul { list-style: none; display: flex; gap: 1.5rem; }
.hMenu a {
    text-decoration: none; color: var(--color-text-muted); font-weight: 600;
    transition: var(--transition);
}
.hMenu a:hover, .hMenu a.active { color: var(--color-primary); }
.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.investor-link {
    display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted);
    text-decoration: none; font-weight: 600; transition: var(--transition);
}
.investor-link:hover { color: var(--color-text); }
.investor-link svg { width: 22px; height: 22px; stroke-width: 2; }

/* --- 3. Hero Section (сохранено успешное решение) --- */
.hero-section {
    height: 90vh; min-height: 720px; position: relative;
    background-size: cover; background-position: center;
}
.hero-overlay { position: absolute; inset:0; background: linear-gradient(75deg, rgba(13, 27, 42, 0.95) 20%, rgba(13, 27, 42, 0.2) 100%); }
.hero-section .container { height: 100%; display: flex; align-items: center; position: relative; z-index: 2; }
.hero-content-box { max-width: 650px; }
.hero-tabs { display: flex; border-bottom: 1px solid var(--color-border); margin-bottom: 1.5rem; }
.hero-tab {
    background: none; border: none; color: var(--color-text-muted); font-family: inherit;
    font-size: 1.1rem; font-weight: 700; padding: 0.75rem 1.75rem; margin: 0;
    cursor: pointer; position: relative; transition: var(--transition);
}
.hero-tab::after { content: ''; position: absolute; bottom: -1px; left:0; right:0; height: 2px; background: var(--color-primary); transform: scaleX(0); transition: var(--transition); }
.hero-tab.active { color: var(--color-text); }
.hero-tab.active::after { transform: scaleX(1); }
.hero-tab-content { display: none; }
.hero-tab-content.active { display: block; animation: fadeIn 0.5s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.hero-tab-content h1 { font-size: 4rem; font-weight: 800; color: var(--color-text); line-height: 1.1; margin-bottom: 1.5rem; }
.hero-tab-content p { font-size: 1.2rem; color: var(--color-text-muted); line-height: 1.7; margin-bottom: 2.5rem; max-width: 550px; }
.btn-cta { background-color: var(--color-primary); color: #000; padding: 1rem 2rem; font-size: 1.1rem; box-shadow: 0 0 25px rgba(128, 255, 219, 0.3); }

/* --- 4. Интерактивная карта с Hotspots --- */
.map-preview-section { background-color: var(--color-bg-alt); padding: 0rem 0; overflow: hidden; 
	margin:2rem;
	}
.map-layout { 	
	display: grid; grid-template-columns: 2fr 1.5fr; gap: 4rem; align-items: center; 
	background: var(--color-dark-blue) url('/images/map.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
	padding:2rem;
	}
.map-layout::before {
    content:''; position: absolute; top:0; left:0; right:0; bottom:0;
    background-color: rgba(4, 12, 40, 0.8);
}	
	
.map-section {
    padding: 6rem 0;
    background: var(--color-dark-blue) url('images/16.jpg') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}
.map-section::before {
    content:''; position: absolute; top:0; left:0; right:0; bottom:0;
    background-color: rgba(28, 37, 65, 0.9);
}


.map-info { position:relative;}
.map-info .section-title { text-align: left; }
.map-info p { color: var(--color-text-muted); font-size: 1.1rem; margin-bottom: 2rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; }
.legend-item { font-weight: 600; padding-left: 1.25rem; position: relative; }
.legend-item::before { content:''; width: 12px; height: 12px; border-radius: 50%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.legend-item.industrial::before { background-color: #F7B801; }
.legend-item.tourism::before { background-color: #80FFDB; }
.legend-item.transport::before { background-color: #A9B6FF; }
.map-visual { position: relative; aspect-ratio: 4/3; }
.map-visual img {	
	width: 100%;
    /* height: 100%; */
    object-fit: contain;
    filter: brightness(0.7) contrast(1.1);
    border-radius: 30px;
	}
.hotspot { position: absolute; width: 20px; height: 20px; cursor: pointer; }
.hotspot-pulse { width: 100%; height: 100%; border-radius: 50%; background-color: var(--color-primary); transform-origin: center; animation: pulse 2s infinite; }
.hotspot.industrial .hotspot-pulse { background-color: #F7B801; }
.hotspot.tourism .hotspot-pulse { background-color: #80FFDB; }
.hotspot.transport .hotspot-pulse { background-color: #A9B6FF; }
.hotspot-tooltip {
    position: absolute; bottom: 150%; left: 50%; transform: translateX(-50%);
    background: var(--color-bg); padding: 0.5rem 1rem; border-radius: 6px;
    border: 1px solid var(--color-border); white-space: nowrap; font-weight: 600;
    opacity: 0; visibility: hidden; transition: var(--transition);
}
.hotspot:hover .hotspot-tooltip { opacity: 1; visibility: visible; bottom: 170%; }
@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(128,255,219,0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(128,255,219,0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(128,255,219,0); }
}

/* --- 5. Шаги Инвестора (Timeline) --- */
.investor-path-section { padding: 6rem 0; }
.investor-path-section .section-title { margin-bottom: 4rem; }
.timeline {
    position: relative; max-width: 800px; margin: 0 auto;
}
.timeline::after {
    content:''; position: absolute; width: 3px; background-color: var(--color-bg-alt);
    top: 0; bottom: 0; left: 30px;
}
.timeline-item { position: relative; padding-left: 80px; padding-bottom: 50px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-icon {
    position: absolute; left: 0; top: 0; z-index: 1;
    width: 64px; height: 64px; border-radius: 50%; background-color: var(--color-surface);
    display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--color-bg); box-shadow: var(--shadow);
}
.timeline-icon svg { width: 32px; height: 32px; fill: var(--color-primary); }
.timeline-content h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; }
.timeline-content p { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; }

/* --- 6. Витрина Проектов (Masonry) --- */
.projects-showcase-section { padding: 6rem 0; background: var(--color-bg-alt); }
.section-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 3rem;
}
.section-header .section-title { text-align: left; margin: 0; }
.projects-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 1.5rem;
}
.project-showcase-card {
    position: relative; overflow: hidden; border-radius: var(--border-radius);
    grid-row: span 1;
}
.project-showcase-card { grid-row: auto / span calc(100 * var(--aspect-ratio, 0.5)); }
.project-showcase-card:nth-child(1) { grid-row: span 3; }
.project-showcase-card:nth-child(2) { grid-row: span 2; }
.project-showcase-card:nth-child(3) { grid-row: span 2; }
.project-showcase-card:nth-child(4) { grid-row: span 3; }
.project-showcase-card:nth-child(5) { grid-row: span 2; }
.project-showcase-card::after {
    content:''; position: absolute; inset:0; z-index: 1;
    background: linear-gradient(to top, rgba(13,27,42,0.9) 0%, transparent 50%);
    opacity: 0.8; transition: var(--transition);
}
.project-showcase-card:hover::after { opacity: 1; background: linear-gradient(to top, rgba(13,27,42,1) 0%, transparent 70%);}
.project-showcase-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-showcase-card:hover img { transform: scale(1.05); }
.project-card-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.5rem; color: var(--color-text); z-index: 2;
    transform: translateY(10px); opacity: 0; transition: var(--transition);
}
.project-showcase-card:hover .project-card-info { transform: translateY(0); opacity: 1; }
.project-card-info h4 { font-size: 1.2rem; font-weight: 700; }
.project-card-info span { font-weight: 600; color: var(--color-primary); }

/* --- 7. Блок "Прямая линия" (доработка) --- */
.direct-line { padding: 8rem 0; }
.direct-line-card {
    max-width: 900px; margin: 0 auto; position: relative;
    border-radius: var(--border-radius); display: flex; align-items: center;
    gap: 3rem; padding: 0 3rem; background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}
.direct-line-person { text-align: center; margin-top: -3rem; }
.direct-line-person img {
    width: 140px; height: 140px; border-radius: 50%;
    border: 4px solid var(--color-bg); object-fit: cover; box-shadow: var(--shadow);
}
.direct-line-person h4 { color: var(--color-text); font-size: 1.2rem; font-weight: 700; margin-top: 1rem; }
.direct-line-person span { font-size: 0.9rem; color: var(--color-text-muted); }
.direct-line-content { padding: 3rem 0; }
.direct-line-content h2 { font-size: 2.25rem; font-weight: 800; color: var(--color-text); margin-bottom: 1rem; }
.direct-line-content p { font-size: 1.1rem; margin-bottom: 2rem; }

/* --- 8. Футер --- */
.footer-glow { position: absolute; z-index:1000; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-accent-blue), transparent); }
.main-footer-section { padding: 4rem 0 2rem; background-color: var(--color-navy);  }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
.footer-column h5 { font-size: 1.1rem; font-weight: 700; color: var(--color-text); margin-bottom: 1.5rem; }
.footer-column ul { list-style: none; }
.footer-column ul li { margin-bottom: 0.75rem; }
.footer-column a { text-decoration: none; color: var(--color-text-muted); transition: var(--transition); }
.footer-column a:hover { color: var(--color-primary); }
.footer-column p, .footer-column a { font-weight: 600; }

/* --- 4. Блок "Инфраструктура Роста" --- */
.growth-infrastructure { padding: 2rem 0; }
.infrastructure-panel {
    display: grid; grid-template-columns: repeat(4, 1fr);
    background-color: var(--color-navy); border: 1px solid var(--color-light-navy);
    border-radius: var(--border-radius); box-shadow: 0 10px 30px -15px rgba(2,12,27,0.7);
}
.infra-item {
    padding: 2rem; display: flex; align-items: center; gap: 1rem;
    border-right: 1px solid var(--color-light-navy); cursor: help;
}
.infra-item:last-child { border-right: none; }
.infra-icon { color: var(--color-primary); flex-shrink: 0; }
.infra-icon svg { width: 36px; height: 36px; }
.infra-text h3 { color: var(--color-white); font-size: 1.1rem; font-weight: 600; margin-bottom: 0.1rem; }
.infra-text span { font-size: 0.9rem; color: var(--color-slate); }

/* --- 5. Приоритетные направления (асимметричная сетка) --- */
.priority-directions { padding: 6rem 0; }
.section-title { text-align: left; font-size: 2.5rem; color: var(--color-white); margin-bottom: 2rem; }
.directions-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem; height: 500px;
}
.direction-card {
    background-color: var(--color-navy); border-radius: var(--border-radius);
    padding: 2rem; text-decoration: none; color: var(--color-slate);
    border: 1px solid var(--color-light-navy); display: flex; flex-direction: column;
    transition: var(--transition); position: relative;
}
.direction-card:hover { transform: translateY(-5px); border-color: var(--color-primary); }
.direction-icon { color: var(--color-primary); margin-bottom: auto; }
.direction-text h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.5rem; }
.direction-text span { color: var(--color-primary); font-weight: 600; }
.direction-card.accent { grid-column: 1 / 2; grid-row: 1 / 3; }
.direction-card:nth-child(2) { grid-column: 2 / 4; grid-row: 1 / 2; }
.direction-card:nth-child(3) { grid-column: 2 / 4; grid-row: 2 / 3; }
.direction-card:nth-child(2) .direction-text, .direction-card:nth-child(3) .direction-text { flex-direction: row; align-items: center; justify-content: space-between; }
.direction-card:nth-child(2) .direction-icon, .direction-card:nth-child(3) .direction-icon { display: none; }
.direction-card:nth-child(2) p, .direction-card:nth-child(3) p { display: none; }



/* --- 6. Карусель проектов --- */
.focus-projects { padding: 3rem 0; overflow: hidden; border-top: 1px solid var(--color-border);}
.projects-carousel {
    display: flex; gap: 1.5rem; width: max-content;
    /* Можно добавить JS-логику или CSS анимацию для прокрутки */
    animation: scroll 40s linear infinite;
}
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.project-card {
    width: 400px; height: 500px; position: relative; border-radius: var(--border-radius);
    overflow: hidden; flex-shrink: 0; transition: var(--transition);
}
.project-card::after {
    content:''; position: absolute; inset:0;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.9) 20%, transparent 60%);
    z-index: 1;
}
.project-card img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.project-card-overlay {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem;
    color: var(--color-white); z-index: 2; transform: translateY(50%); opacity: 0; transition: var(--transition);
}
.project-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; }
.project-card p { font-size: 1rem; color: var(--color-light-slate); margin-bottom: 0.5rem; }
.project-card span { font-size: 0.9rem; font-weight: 600; color: var(--color-primary); }
.project-card:hover .project-card-overlay { transform: translateY(0); opacity: 1; }
.project-card:hover img { transform: scale(1.05); }

/* --- 7. Блок "Прямая линия" --- */
.direct-line { padding: 8rem 0; }
.direct-line-card {
    max-width: 900px; margin: 0 auto;
    background-color: var(--color-navy); border-radius: var(--border-radius);
    border: 1px solid var(--color-light-navy);
    display: flex; align-items: center; gap: 3rem; padding: 3rem;
    text-align: left;
}
.direct-line-person { text-align: center; flex-shrink: 0; }
.direct-line-person img {
    width: 120px; height: 120px; border-radius: 50%;
    border: 3px solid var(--color-primary); object-fit: cover;
    margin-bottom: 1rem;
}
.direct-line-person h4 { color: var(--color-white); font-size: 1.1rem; font-weight: 600; }
.direct-line-person span { font-size: 0.9rem; }
.direct-line-content h2 { font-size: 2.25rem; font-weight: 800; color: var(--color-white); margin-bottom: 1rem; }
.direct-line-content p { font-size: 1.1rem; margin-bottom: 2rem; }



/* --- News Section (СВЕТЛЫЙ ФОН) --- */
.news-section { background-color: var(--color-light-primary); padding: 2rem 0; border-top: 1px solid var(--color-border);}
.section-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2rem; }
.btn-secondary {
    background: transparent; border: 2px solid var(--color-accent-blue);
    color: var(--color-text-light); padding: 0.75rem 1.5rem; border-radius: var(--border-radius);
    font-weight: 600; transition: var(--transition);
}
.btn-secondary:hover { background: var(--color-accent-blue); color: var(--color-light-primary); border-color: var(--color-accent-blue); transform: translateY(-2px); box-shadow: var(--shadow-md); }

.news-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 3rem; }
.main-news-card {
	position:relative;
    display: flex; flex-direction: column; text-decoration: none; color: var(--color-text-dark);
    background: var(--color-light-secondary); border: 1px solid var(--border-color-light);
    border-radius: var(--border-radius); overflow: hidden;
    height: 100%; box-shadow: var(--shadow-sm); transition: var(--transition);
}
.main-news-card a{text-decoration:none;}
/*.main-news-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }*/
.main-news-image { height: 300px; padding-top: 50%; background-size: cover; background-position: center; }
.main-news-content { padding: 1.5rem; }
.news-date { font-size: 0.85rem; color: var(--color-accent-blue); margin-bottom: 1rem; display: block; }
.main-news-content h3 { font-size: 1.5rem; color: var(--color-text-dark); font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; }
.main-news-content p,
.main-news-content ul,
.main-news-content ol { font-size: 1rem; color: var(--color-text-muted); }

.news-list { display: flex; flex-direction: column; }
.news-list-item {
    display: flex; flex-direction: column; text-decoration: none;
    padding: 1.25rem 0; border-bottom: 1px solid var(--border-color-light);
    color: var(--color-text-dark);
}
.news-list-item:last-child { border-bottom: none; }
.news-date { font-size: 0.8rem; color: var(--color-accent-blue); margin-bottom: 0.5rem; }
.news-date h4 { color: var(--color-text-dark); font-size: 1.1rem; font-weight: 600; line-height: 1.4; transition: var(--transition); }
.news-date:hover h4 { color: var(--color-accent-blue); }



.section-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}
.dark-to-light .shape-fill { fill: var(--color-light-bg); }
.light-to-dark .shape-fill { fill: var(--color-navy); }
.light-to-dark {transform: rotate(180deg);}



.promo{
	display: block;
    position: relative;
    background-color: rgba(244, 244, 244, 0.25);
    max-width: 1400px;
    opacity: 1;
    height:auto;
    transition: all 0.1s ease-in-out 0s;	
	margin: 0 2rem;
    border-radius: 10px;
	}	

.promotitle{display:block; 
	position:relative; 
	top:0px; left:0px; right:0; 
	font-size:1em; 
	color:#171a1e; 
	margin:0; 
	padding: 10px; 	
	font-weight:normal; 
	background-color: var(--color-bg-alt);
	border-radius:0px;
	width:inherit;
    /*
	overflow: hidden;
    white-space: nowrap;
	*/
	z-index: 100;
	}
	
.rubric{
	display: block;
    vertical-align: top;
	height:inherit;
    /*
	position: absolute;
    left: 10px;
    top: 80px;
    bottom: 10px;
	*/
	width: auto;
    z-index: 1000;
    overflow: auto;
	}
.rubric ul{display:block;}
.rubric li{display:inline-block; border-bottom: 3px solid transparent;}
.rubric a{
	font-size:0.5em;
	display: inline-block;
	
	border: 2px solid #000;
    box-sizing: border-box;
	
    font-size: 1.0em;
    margin: 5px;
    padding: 0px;
    color: #2c3136;
    text-decoration: none;
    transition: all 0.1s ease-out 0s;
    box-sizing: border-box;
	border-radius: 10px;	
	
	color: var(--color-accent-blue);
    border: 1px solid var(--color-accent-blue);
	}
.rubric a:hover{
	border: 1px solid #F13C6D;
	text-shadow:none;
    color: #fff;
	background: var(--color-accent-blue-alpha);
	}
.rubric a span{display:block; padding: 10px;}	
.rubric a.sel {background-color:#F13C6D; color:#fff; border: 1px solid #F13C6D;}

.sections{background-color: var(--color-bg-alt); padding:5px; border-radius:5px; overflow-y: auto;}
.sections ul{
	margin: 30px;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 3fr));
    /*grid-template-rows: repeat(3, 320px);*/
	transition: all 0.3s;
	}
	
.sections ul li {
	width: 100%;
    height: 140px;
    padding: 10px 40px 24px 40px;
	box-sizing: border-box;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 16px;
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
	font-weight: 500;
	font-size:1.2em;
	transition: all 0.3s;
	background-color: var(--color-navy);
	color: var(--color-light-text);
	}
.sections ul li:hover{
	background: var(--color-accent-blue-alpha);
	border: 1px solid var(--color-primary);
	color:#fff;
	transform: translateY(-5px);
	}

.industry-card:hover { transform: translateY(-5px); }
.sections ul li:hover::before { border: 1px solid var(--primary); }	
	

.sections ul li img{
	position: absolute;
    bottom: 20px;
    right: 20px;
    max-width: 50px;
    max-height: 50px;
    user-select: none;
    background-color: #edf2fe;
    border-radius: 40px;
    pointer-events: none;
	}

.sections ul li a{
	display: block;
	position:relative;
	padding: 10px;
	box-sizing: border-box;
	height:100%;
	color: var(--color-light-text);
	text-decoration:none; 
	text-transform:uppercase;
	font-size:0.9em;
	font-weight: 600;
	line-height:1.3em;
	padding-right: 30px;
	overflow: hidden;
	z-index:2;
	}
.sections ul li a small {font-size:0.7em; line-height:1.1;}
.sections ul li a small b{white-space:inherit;}	
.sections ul li .icon-sec{
	display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    /* background-size: 13px; */
    pointer-events: none;
    bottom: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    margin-top: -20px;
    background-size: 90% 90%;
    background-position: center center;
    background-color: var(--color-secondary);
    border-radius: 50%;
    -webkit-box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 10%);
    -webkit-transition: -webkit-box-shadow .2s ease-out;
    transition: -webkit-box-shadow .2s ease-out;
    transition: box-shadow .2s ease-out;
    transition: box-shadow .2s ease-out, -webkit-box-shadow .2s ease-out;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
	}
.sections ul li em{position:absolute; right:0; top:0; background-color:#fff; padding:0 2px; font-size:0.8em; font-style:normal;}

.sections ul li .images{
    width: 100%;
    height: auto;
    object-fit: cover;
	}
.sections ul li.manager{background-color:#367fff;}	
.sections ul li.manager a{color:#fff;}	
.sections ul li.admin{background-color:#94081b;}	
.sections ul li.admin a{color:#fff;}	


.sections ul li.disabled{background-color:#eee;}	
.sections ul li.disabled a{color:#999;}	
.sections ul li.disabled i {opacity:0.3;}	





.news .news_column{
display:block;
border-bottom: 5px solid #f4f4f4;
padding:10px 0;
}

.news .news_date{
	position:absolute;
	display:inline;
	margin:0px;
	font-size:0.9em;
	font-weight:normal;
	padding:1px;
	line-height:15px;
	color:#fff;
	top: 10px;
	right: auto;
	left:10px;
	background: rgba(78, 100, 139, 0.78)
	}	
	
.news .news_cell{
	display:table;
	position:relative;	
	margin: 0;
	padding: 10px;
	}

.news .news_cell .img{
display: table-cell;
float: left;
margin: 0 15px 10px 0;
width: 280px;
height: 180px;
background-repeat:no-repeat;
background-position:center center;
background-size: contain;
border: 0;
/*
border: 1px solid #BDBDBD;
padding: 4px;
background-color: #fff;
*/
}

.news .news_cell h4{
display:table-cell;
margin: 0 0 10px 0;
line-height: 1.3;
font-size:1.3em;
outline: 0;
padding: 0;
vertical-align: top;
}


.news .news_cell h4 a,
.news .news_cell h4 a:visited{
color: var(--color-light-slate);
font-weight:bold;
text-decoration:none;
}
.news .news_cell h4 a:hover{color: var(--color-text-primary);}

.news .news_cell h4 .date{display:block; font-size:1em; padding:5px 0;  font-weight:normal; text-decoration:none;} 
.news .news_cell h4 .date b{display:block; font-weight:normal; font-size:1.5em; line-height:0.5em; padding:0; margin:0; color:#777;} 
.news .news_cell h4 .date small{font-size:0.7em; padding:0; color:#999;} 
.news .news_cell h4 span{display:block;
    color: #555;
	font-size:0.85em;
    text-transform: uppercase;
	}
.news .news_cell small{
    color: #CCC;
	font-size:0.7em;
    text-transform: uppercase;
	}	
.news .news_cell h4 .marker{
	display: inline-block;
    position: relative;
    width: 10px;
    height: 10px;
    margin: 0 7px -1px 0;
    border-radius: 3px;
	}
	
.news .news_cell h4 .marker:after{
	content: '';
    position: absolute;
    right: -7px;
    top: 1px;
	}
.news .news_cell .description{color: var(--color-secondary);}
.news .news_column {
    display: block;
    border-bottom: 5px solid var(--color-bg-alt);
    padding: 10px 0;
}




.main_box{
	font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
	border:none;
	}

.main_box h1{
	font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    padding-bottom: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--color-border);	
}

.sfolders {margin-bottom:3rem;}


.sfolders li.run{
    box-shadow: none;
	background: var(--color-surface, rgba(27, 38, 59, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border, rgba(136, 146, 176, 0.2));
    border-radius: var(--border-radius, 12px);
    transition: var(--transition, all 0.3s ease);
}

.sfolders li.run:hover {
    background-color: var(--color-surface-hover);
	
}

.sfolders li.run a{
	color: var(--color-text-secondary, #8892B0);
	padding: 1em 2em 1em 1em;
	font-weight: 700;
	
}

.sfolders dt{padding:0px 5px;}
.sfolders dt.row{background-color:#f0f0f0;}
.sfolders dt.arow{background-color:#fff;}
.sfolders dt a,
.sfolders dt a:visited{
	display: block;
    position: relative;
    vertical-align: middle;
    color: var(--color-accent-blue);
    text-decoration: none;
    padding-left: 50px;
    margin: 10px 20px 20px 20px;

    text-align: left;	
	
	font-weight: 300;
	box-shadow: none;
	background: var(--color-surface, rgba(27, 38, 59, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border, rgba(136, 146, 176, 0.2));
    border-radius: var(--border-radius, 12px);
    transition: var(--transition, all 0.3s ease);
	color: var(--color-text-secondary, #8892B0);

	}
.sfolders dt a:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 15px;
    top: 10px;
    width: 30px;
    height: 30px;
    z-index: 1;
    opacity: 0.3;
    background-image: url(/images/svg/num-r.svg);
    background-repeat: no-repeat;
    background-size: cover;
	background-size: 30px 30px;
	}


.sfolders dt a:hover{background-color: var(--color-surface-hover); color:#fcfcfc;}
.sfolders dt a b{padding-left: 50px; padding-left: 50px; text-transform: uppercase;}
.sfolders dt a .icon{opacity:0;}
.sfolders .alink{line-height: 2em; padding:10px;
	line-height: 2em;
    border-radius: 5px;
    color: var(--color-text-secondary, #8892B0);
    text-decoration: none;
    width: auto;
	}

.documents a {
    cursor: pointer;
    overflow: hidden;
    letter-spacing: normal;
    line-height: 22px;
    padding: 20px;
    box-shadow: none;
    position: relative;
    display: block;
    text-decoration: none;
    color: #555;
    padding-right: 60px;
	margin-bottom: 10px;
    font-size: 1.3em;
	background: var(--color-surface, rgba(27, 38, 59, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border, rgba(136, 146, 176, 0.2));
    border-radius: var(--border-radius, 12px);
    transition: var(--transition, all 0.3s ease);
	color: var(--color-text-secondary, #8892B0);
	}
.documents a:hover{background-color: var(--color-surface-hover); color:#fcfcfc;}

.documents .icon {
    display: block;
    position: absolute;
    bottom: inherit;
    right: 20px;
    top: 25%;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin: 0;
    width: auto;
    text-align: center;
    padding: 3px;
	background-color:#2a3a5e;
    line-height: 30px;
	border:5px solid #2a3a5e;
}

.documents .icon .extension {
    display: block;
    opacity: 0.5;
	}


.main_box .content{
	font-size: 1.3rem;
    color: var(--color-text-secondary);
    margin: -1.5rem 0 2.5rem 0;
}

.main_box .documents{
	background-color:inherit;
}









.catalog {
    background-color: inherit;
    border-bottom: 5px solid #eee;
}
.catalog  ul{
    display: grid;
    grid-gap: 50px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 30%));
	grid-template-rows: repeat(1, 580px);
	grid-auto-rows: 580px; /
	}
	
.catalog  ul li {
	position:relative;
	list-style:none;
	flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    box-shadow: var(--shadow-glow, 0 0 25px -5px rgba(100, 255, 218, 0.15));
    border-radius: 16px;
	background: var(--color-surface, rgba(27, 38, 59, 0.6));
	backdrop-filter: blur(10px);
	border: 1px solid var(--color-border, rgba(136, 146, 176, 0.2));
	transition: var(--transition);
	}




.catalog  ul li .otrasl{position:absolute; bottom:15px; left:15px; font-size:0.8em; font-width:300;}
.catalog  ul li a,
.catalog  ul li a:visited{
	display:block; 
	background-size:cover;
	background-position: center center;
	padding: 2px 5px;
	margin: 3px 3px;
	color: rgb(92, 107, 139);
	font-size: 1em;
	text-decoration: none;
	border-radius: 4px;
	min-height:250px;
	}
.catalog  ul li a:hover{color:#000; text-decoration:none; }
.catalog  ul li a b{display:block; 
	position:absolute;
	top:260px;
	padding:10px; font-weight:600;
	color:#000;
	font-size:0.8em;	
	overflow:hidden;

	font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary, #E6F1FF);
    line-height: 1.3;

	}


.catalognote {
    background-color: inherit;
    padding: 5px;
    border-radius: 5px;
    overflow-y: auto;
    font-size: 0.9em;
}

.catalognote ul {
    margin: 20px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 3fr));
    grid-template-rows: repeat(1, 120px);
    grid-auto-rows: 1fr;
    transition: all 0.3s;
}
.catalognote ul li .icon-sec{
	background-color: inherit;
}

.catalog .description {
    letter-spacing: normal;
    line-height: 22px;
    box-shadow: none;
    position: relative;
    display: block;
    text-decoration: none;
    color: #555;
    padding-right: 60px;
    line-height: 1.3em;
    font-weight: 300;

	background: var(--color-surface);
    backdrop-filter: blur(10px);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    padding: 1rem;
    font-size: 1.05rem;
    color: var(--color-text-secondary);
	margin:1.5rem;

}


hr.hr{background-color: var(--color-bg-alt) !important;
    height: 10px;
    border: none;
    margin: 10px;}


.main_multi_slider {
    background: inherit;
	width: 100%;
    padding: 1rem;
    position: relative;
	background-color: var(--color-bg-alt);
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
	margin-bottom: 30px;
}
.main_multi_slider .btn_r {
    right: 50px;
    padding-right: 5px;
    text-align: right;
}

.main_multi_slider a {
    display: inline-block; /* Элементы в ряд */
    max-width: 100%; /* Ограничение по ширине */
}

.main_multi_slider a, .main_multi_slider a:visited {
    display: inline-block;
    padding: 0;
    margin: 0;
    border: 5px solid var(--color-accent-blue-alpha);
    position: relative;
    width: auto;
	max-width: 100%;
    line-height: 0;
    height: auto;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-transition: border 250ms ease-in-out;
    -moz-transition: border 250ms ease-in-out;
    -o-transition: border 250ms ease-in-out;
    transition: border 250ms ease-in-out;
}

.middle_item h1 a, .middle_item h1 a:visited {
    display: inline;
    line-height: 1.1em;
    text-decoration: none;
    color: var(--color-light-bg);
    -webkit-transition: color 250ms ease-in-out;
    -moz-transition: color 250ms ease-in-out;
    -o-transition: color 250ms ease-in-out;
    transition: color 250ms ease-in-out;
}




.main_multi_slider .main_multi_slider_overflow {
    margin: 0 50px;
    width: calc(100% - 100px); /* Ширина минус боковые отступы */
    overflow-x: auto; /* Горизонтальный скролл только внутри контейнера */
    overflow-y: hidden;
    white-space: nowrap; /* Элементы в одну строку */
}

.main_multi_slider .multi_slider {
    width: auto !important; /* Отменяет инлайновый width:1800px */
    display: inline-block; /* Для корректного nowrap */
    white-space: nowrap;
    transition: none; /* Отключает анимацию, если мешает */
}


.main_multi_slider a img {
    max-width: 100%; /* Ограничение по ширине */
    height: auto; /* Сохраняет пропорции */
}


.mesul{margin:0 5px; transition: all .3s ease-out;}
.mesul ul, .mesul ol{counter-reset: li;
	display: block;
    margin: 10px 0 10px 10px;
	}
.mesul ol li, 
.mesul ul li{
	display: block;
    flex-grow: 1;
    font-size: 22px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: normal;
    line-height: 22px;
    /* padding: 32px; */
    margin-top: 10px;
	margin-bottom: 40px;
	transition: all .3s ease-out;
	}
	
.mesul ol li a, 
.mesul ul li a,
.mesul ul li p{
	letter-spacing :normal;
	line-height :22px;
	padding:32px;	
	box-shadow:none;	
	position: relative;
    display: block;
    text-decoration:none;
	padding-right: 60px;
	color: var(--color-text-secondary);
	border-bottom: 1px solid var(--color-text-muted);
	}
.mesul ul li a svg{position:absolute; right:20px; top:25px; pointer-events: none;}
.mesul ul li .stepul{display:none; padding:10px 0px 20px 0px; font-size:0.9em; color:#999; background:inherit;
	transition: all .3s ease-out;
	}	
.mesul ol li a:hover, 
.mesul ul li a:hover,
.mesul ul li p:hover {
    color: var(--color-text-secondary);
}

.stepul{margin:0 30px;}
.stepul ul, .stepul ol{counter-reset: li;
	display: block;
    margin: 10px 0 10px 10px;
	}
.stepul ol li,
.stepul ul li{
    position: relative;
    display: block;
    padding: 0.4em 0.4em 0.4em 2em;
	line-height: 25px;
    margin: 0.5em 0;
    background: #fff;
    color: #212121;
    text-decoration: none;
    -moz-border-radius: .3em;
    -webkit-border-radius: 0.3em;
    border-radius: 0.3em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
	box-shadow: 0px 6px 36px #EBECF2;
	margin:30px 0;
	word-break: break-word;
	
	
	
	
	display: block;
    position: relative;
    vertical-align: middle;
    color: var(--color-accent-blue);
    text-decoration: none;
    padding-left: 50px;
    margin: 10px 20px 20px 20px;

    text-align: left;	
	
	font-weight: 300;
	box-shadow: none;
	background: var(--color-surface, rgba(27, 38, 59, 0.6));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border, rgba(136, 146, 176, 0.2));
    border-radius: var(--border-radius, 12px);
    transition: var(--transition, all 0.3s ease);
	color: var(--color-text-secondary, #8892B0);
	
	}
.stepul ol li:before, .stepul ul li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1em;
    top: 50%;
    top: 28px;
    margin-top: -1.3em;
    color: #fff;
    background: #235cc5;
    height: 2em;
    width: 2em;
    line-height: 1.4em;
    border: 0.3em solid #0056b3;
    text-align: center;
    font-weight: bold;
    -moz-border-radius: 2em;
    -webkit-border-radius: 2em;
    border-radius: 2em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

.stepul ul li a{color:#266db0; text-decoration:none;}
.stepul ul li a:hover{color:#fcfcfc	;}
.stepul ul li:before {content: '✔';}

.stepul ul li ul, .stepul ol li ol{
	counter-reset: li;
	display: block;
    margin: 10px 0 10px 20px;
	}
.stepul ol li ol li{box-shadow: inherit; margin:inherit;}
.stepul ol li ol li:before,
.stepul ul li ul li:before{
	content: '';
	/*border: 1px solid #fff;*/
	background: #235cc5;
    height: 1em;
    width: 1em;
	left: 0.5em;
    top: 10px;
	padding:0 0 0 0px;
    margin: 0 0 5px 0px;
	}

.stepul ol li a{color:#2196F3; text-decoration:none;}
.stepul ol li a:hover{text-decoration:underline;}

.stepul ol li ol li ul,
.stepul ul li ul li ul{
	padding:0;
	margin:0;
	}

.stepul ol li ol li ul li,
.stepul ul li ul li ul li{
	padding:5px 5px 0 20px;
	margin:0;
	font-size:0.9em;
	color:#212121;
	}

.stepul ol li ol li ol li:before,
.stepul ul li ul li ul li:before{
	content: '';
	border: 1px solid #fff;
	background: #999;
    height: 0.5em;
	border-radius: 0em;
    width: 0.5em;
	left: 0.5em;
    top: 12px;
	padding:0 0 0 0px;
    margin: 0 0 5px 0px;
	}

.stepul blockquote{display: block; border-left:3px solid #ccc; font-size:0.9em; line-height:1.5em; padding:0 10px; 
	margin:10px 0 0px 0;
	color:#555;
	}


.stepul div{color: var(--color-text-light-muted) !important}

.stepul hr{border-color: var(--color-slate);
    margin: 10px 0;}

.fixedlink{display:block; padding:10px;}
.fixedlink ul {border-bottom: 1px solid #c8c7cc; padding-bottom:20px; padding:5px;}
.fixedlink ul li.header{font-weight:bold;}
.fixedlink ul li{
	display:block;
	margin-top: 15px;
	color:#333;
	font-weight:bold;
	}
.fixedlink ul li a{
    color: #0173c1;
	box-sizing: border-box; background: 0px 0px; text-decoration-line: none; cursor: pointer; line-height: 20px; font-size: 15px; border-bottom: 1px dashed;
	font-weight:normal;
	}	


	





.mainframe h2 {
    display: block;
    position: relative;
    font-size: 1.8em;
    line-height: 1.1em;
    padding: 10px;
    margin: 0px;
    color: var(--color-text-muted);
    font-weight: 200;
}


.content table {
    display: block;
    overflow: hidden;
    font-size: 0.9em;
    line-height: 1.3em;
    border: none !important;
    width: 100%;
}
.content table th {
    background-color: var(--color-surface-hover);
    padding: 5px;
    border: 1px solid var(--color-text-muted);
}
.content table tr {
    border-bottom: 1px solid var(--color-text-muted);
}



.buybtn {
    background: #C63828;
    background: -moz-linear-gradient(top, #C63828 0%, #DC4C3B 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C63828), color-stop(100%, #DC4C3B));
    background: -webkit-linear-gradient(top, var(--color-accent-blue) 0%, var(--color-accent) 100%);
    background: -o-linear-gradient(top, #C63828 0%,#DC4C3B 100%);
    background: -ms-linear-gradient(top, #C63828 0%,#DC4C3B 100%);
    background: linear-gradient(top, #C63828 0%,#DC4C3B 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C63828', endColorstr='#DC4C3B',GradientType=0 );
    border: 1px solid var(--border-color-dark);
    border-radius: 10px;
    color: #fff !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}



.param_filters {
    display: none;
    background-color: var(--color-bg-alt);
    padding: 0px;
    font-size: 1em;
    color: #3c4c5d;
}



.param_filters ul {
    display: block;
    border-radius: 10px;
    border: rgba(92, 107, 139, 1);
}
.param_filters ul li {
    display: inline-block;
    position: relative;
    vertical-align: top;
    list-style: none;
    border-radius: 6px;
    min-width: 110px;
    background-color: inherit;
    margin: 5px;
    padding: 10px 0 10px 10px;
}

.param_filters .licaption {
    display: block;
    position: relative;
}

.param_filters ul li div {
    display: inline-block;
    color: #4483c5;
    font-size: 1em;
    font-weight: normal;
    margin: auto 0;
}
.param_filters ol {
    display: block;
    margin: 10px 0 0 0px;
    line-height: 1.1em;
    width: 95%;
    box-sizing: border-box;
}
.param_filters ol li {
    display: block;
    padding: 0;
    margin: 0;
    border: none;
    line-height: 1.5em;
    box-sizing: border-box;
}
.param_filters ol li label {
    cursor: pointer;
    font-weight: normal;
    padding: 3px;
    box-sizing: border-box;
    display: inline-block;
    margin: 0px;
    color: var(--color-slate);
}
.param_filters input {
    margin: 0 10px;
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
}

.param_filters ul li div b {
    font-weight: 400;
    text-transform: uppercase;
    margin-right: 60px;
    border-bottom: 1px dotted #999;
    font-size: 0.9em;
    line-height: 100%;
    cursor: pointer;
}
.param_filters ul li .open b {
    color: var(--color-text-primary);
}



.detail{
	display: block;
    color: #000;
    line-height: 1.6em;
    /*overflow: auto;*/
    font-size: 1.2em;
	padding-left: 10px;
	pointer-events: none;
	}
.detail ul {display:block; margin: 10px; padding:0; list-style:none; margin-left:0px;}
.detail ul li {display:inline-block; margin:10px 10px 0 0; padding:2px 10px; border:1px solid #b0bec5; border-radius:25px;}
.detail ul li span{color:#333; font-size:0.8em;  font-weight:normal; text-transform: uppercase;}
.detail ul li a{text-decoration:none; color: #333; border-bottom: 1px dotted #333;}
.detail ul li a:hover{border:none;}

.detail nav {display:inline-block; margin:10px 10px 0 0; padding:2px 10px; border:1px solid #b0bec5; border-radius:25px; font-size:0.6em; line-height:1.5em; pointer-events: none; color: var(--color-text-muted);
border-color: var(--color-accent-blue) !important;
}



.content img, .content_main img {
    display: block;
    margin: 10px;
    max-width: 100%;
    height: auto !important;
}




.passport{margin:0 5px; transition: all .3s ease-out;}
.passport .razdels a {
    display: inline-block;
    margin: 10px 10px 0 0;
    padding: 2px 10px;
    border: 1px solid var(--color-secondary);
    text-decoration: none;
    border-radius: 25px;
    font-size: 0.8em;
    line-height: 1.5em;
    color: var(--color-light-slate);
}

.passport table{display:block; font-size:11px; font-weight:300;}
.passport table td:nth-child(1) {font-size:0.9em;text-align:left;}
.passport table td:nth-child(2) {font-size:0.9em;text-align:left;font-weight:400;}
.passport table td:nth-child(3) {font-size:0.9em;text-align:center;}
.passport table td:nth-child(4) {font-size:0.9em;text-align:right;}
.passport table td:nth-child(5) {font-size:0.9em;text-align:right;}
.passport table td:nth-child(6) {font-size:0.9em;text-align:right;}
.passport table td:nth-child(7) {font-size:0.9em; font-weight:400; text-align:right; color:#999999;}




.pages a, .pages a:visited {
    display: inline-block;
    font-size: 1.1em;
    color: var(--color-accent-light);
    text-decoration: none;
    background: var(--color-light-text);
    padding: 6px 10px;
    width: 55px;
    height: 55px;
    border: 1px solid rgb(235, 220, 220);
    margin-right: 1px;
    border-radius: 50%;
}
.pages b {
    color: var(--color-white);
    font-weight: bold;
	}

.path a {
    display: inline-block;
    position: relative;
    background: inherit;
    color: var(--color-secondary);
    padding: 3px;
    margin: 0;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding-right: 20px;
}

.path a:hover{color:color: var(--color-slate);}

.langmenu{display:block;}
.language {position: fixed; right: 10px; top: 0%;transform: translateY(0%); z-index: 3000; display: flex; flex-direction: row;}
.language__img {margin: 2px; cursor: pointer; opacity: .3;}
.language__img:hover, .language__img_active {opacity: 1;}

.content {
    display: block;
    padding: 0 20px;
    line-height: 2em;
    color: var(--color-text-light-muted);
    font-size: 1.3em;
    font-weight: 400;
}


/* --- 9. Адаптивность --- */
@media (max-width: 1200px) {
    header .container { justify-content: center; }
	.map-layout { grid-template-columns: 1fr; }
    .map-info { text-align: center; }
    .map-info .section-title { text-align: center; }
    .map-legend { justify-content: center; }
    .projects-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .project-showcase-card, .project-showcase-card:nth-child(n) { grid-row: span 1; aspect-ratio: 1 / var(--aspect-ratio, 1); }
}
@media (max-width: 768px) {
    .section-title { font-size: 2.2rem; }
    .hMenu, .header-actions .investor-link { display: none; } /* Для бургер-меню */
    
    .hero-tab-content h1 { font-size: 2.5rem; }
    .timeline::after { left: 18px; }
    .timeline-item { padding-left: 55px; }
    .timeline-icon { width: 40px; height: 40px; left: 0; }
    .timeline-icon svg { width: 20px; height: 20px; }
    .projects-grid { grid-template-columns: 1fr; }
    .direct-line-card { flex-direction: column; text-align: center; padding: 2rem; }
    .direct-line-person { margin-top: -4rem; }
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
	
	.stepul {margin: 0;}
	.stepul ol li:before, .stepul ul li:before {margin-top: -2.5em;left: -1.5em;}
	.stepul ol li, .stepul ul li {padding-left: 0px; margin-left:0;}
	.stepul ol li ol li:before, .stepul ul li ul li:before {left: -2em;}
	.stepul ol li ol li ol li:before, .stepul ul li ul li ul li:before {left: -1.5em;}
	
	
	.mesul ol li a, .mesul ul li a, .mesul ul li p {padding: 2px 10px;}
}










/* =================================================================== */
/* === АДАПТИВНЫЕ СТИЛИ И МОБИЛЬНАЯ НАВИГАЦИЯ (добавлено) === */
/* =================================================================== */

/* --- 1. Стили для мобильного меню (бургер и оверлей) --- */

.mobile-nav-toggle {
    display: none; /* Скрыто по умолчанию, появится на мобильных */
    position: fixed;
    top: 15px;
    left: 1rem;
    z-index: 5000; /* Выше хедера, но ниже сайдбара */
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: var(--color-surface-hover);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition);
}

.mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-primary);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

.mobile-nav-toggle span:not(:last-child) {
    margin-bottom: 5px;
}

.sidebar-open .mobile-nav-toggle {
    background-color: var(--color-accent-blue);
}

.sidebar-open .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.sidebar-open .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
}
.sidebar-open .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.sidebar-overlay {
    display: none; /* Скрыто по умолчанию */
    position: fixed;
    inset: 0;
    background-color: rgba(13, 27, 42, 0.7);
    z-index: 2400; /* Между сайдбаром и контентом */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
}

.sidebar-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
}




/* =================================================================== */
/* === АДАПТИВНЫЕ СТИЛИ ДЛЯ КАТАЛОГА (добавлено) === */
/* =================================================================== */

/* --- 1. Базовые стили для карточек каталога (переопределение) --- */

/* Контейнер-сетка */
.catalog ul {
    display: grid;
    /* Используем auto-fit для автоматического подбора количества колонок. 
       Минимальная ширина карточки - 320px */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem; /* Отступы между карточками */
    
    /* Сбрасываем старые жесткие значения высоты */
    grid-template-rows: auto;
    grid-auto-rows: auto;
}

/* Стилизация самой карточки проекта */
.catalog ul li {
    display: flex;
    flex-direction: column; /* Элементы внутри карточки будут в столбец */
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Скрываем все, что выходит за рамки */
    transition: var(--transition);
    height: auto; /* Высота определяется контентом */
    box-shadow: none; /* Убираем старую тень */
}

.catalog ul li:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--color-primary-tint);
}

/* Ссылка-картинка внутри карточки */
.catalog ul li a {
    display: block;
    width: 100%;
    min-height: 220px; /* Минимальная высота для изображения */
    background-size: cover;
    background-position: center;
    margin: 0;
    border-radius: 0;
    padding: 0;
    flex-shrink: 0; /* Чтобы картинка не сжималась */
}

/* Контентная часть карточки */
.catalog ul li .otrasl,
.catalog ul li a b {
    position: static;
    background-color: var(--color-surface);
    display: block;
    padding: 1rem;
    text-align: left;
}

/* Заголовок проекта */
.catalog ul li a b {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    padding-bottom: 0.5rem;
}

/* Описание (инициатор, муниципалитет и т.д.) */
.catalog ul li .otrasl {
    margin-top: auto; /* Прижимает этот блок к низу карточки */
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.6;
}
.catalog ul li .otrasl b {
    font-weight: 600;
    color: var(--color-slate);
}
.catalog ul li .otrasl small {
    display: inline-block;
    margin-top: 0.5rem;
    color: var(--color-text-muted);
}


















/* --- 2. Основные медиа-запросы --- */

/* Планшеты и небольшие десктопы (до 1200px) */
@media (max-width: 1200px) {
    .header-actions{display:none;}
	
	/* --- Основная структура и сайдбар --- */
    .app-layout {
        display: block; /* Убираем flex, чтобы сайдбар не занимал место */
    }

    .sidebar {
        position: fixed;
        top: 80px;
        left: 0;
        height: 100vh;
        z-index: 2500;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: var(--shadow);
    }
    
    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    .main-content-wrapper {
        margin-left: 0; /* Контент занимает всю ширину */
        padding-left:0;
    }
    #scrollable {
        margin-left:0;
        margin-right:0;
    }

    .mobile-nav-toggle,
    .sidebar-overlay {
        display: block;
    }
    
    /* --- Хедер --- */
    header .hMenu {
        display: none;
    }

    /* --- Сетки --- */
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .catalog ul {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    .sfolders ul, .sfolders ol {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Планшеты в портретной ориентации (до 992px) */
@media (max-width: 992px) {
    /* --- Общие секции --- */
    .section-title {
        font-size: 2.5rem;
    }
    main#content, .main-content-wrapper {
        padding: 1rem;
    }
    body {
        padding-top: 70px; /* Уменьшаем отступ под хедер */
    }
    header{
        padding: 0.8rem 0;
    }
    .dmlogo img{
        height: 40px;
    }
    
    /* --- Карта --- */
    .map-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }
    .map-info {
        text-align: center;
    }
    .map-info .section-title {
        text-align: center;
    }
    .map-legend {
        justify-content: center;
    }

    /* --- Сетки --- */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    .news-layout {
        grid-template-columns: 1fr;
    }
    .infrastructure-panel {
        grid-template-columns: repeat(2, 1fr);
    }
    .infra-item:nth-child(2) {
        border-right: none;
    }
    
    /* --- Элементы слайдера --- */
    .main_multi_slider .main_multi_slider_overflow {
        margin: 0 40px;
        width: calc(100% - 80px);
    }
    .main_multi_slider .btn_l, .main_multi_slider .btn_r {
        width: 40px;
        font-size: 4em;
    }
    
    .news .news_cell {
        display: block;
    }
    .news .news_cell .img {
        float: none;
        width: 100%;
        height: 200px;
        margin-bottom: 1rem;
    }
	
	.catalog ul {
        /* Можно оставить auto-fit или жестко задать 2 колонки */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
}


/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    /* --- Типографика и отступы --- */
    .section-title {
        font-size: 2rem;
    }
    .hero-tab-content h1 {
        font-size: 2.8rem;
    }
    .direct-line-content h2 {
        font-size: 1.8rem;
    }
    .promo, .main_box, .mainframe, .middle_item {
        margin: 0 0rem;
    }

    /* --- Структурные блоки --- */
    .hero-section {
        height: 80vh;
        min-height: 600px;
    }
    .hero-overlay {
        background: linear-gradient(75deg, rgba(13, 27, 42, 0.98) 40%, rgba(13, 27, 42, 0.3) 100%);
    }
    .projects-grid {
        grid-template-columns: 1fr;
    }
    .project-showcase-card, .project-showcase-card:nth-child(n) {
        grid-row: span 1;
        aspect-ratio: 4 / 3;
    }
    .infrastructure-panel,
    .directions-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .infra-item {
        border-right: none !important;
        border-bottom: 1px solid var(--color-light-navy);
    }
    .infra-item:last-child {
        border-bottom: none;
    }
    .directions-grid {
        height: auto;
    }
    .direction-card, .direction-card:nth-child(n) {
        grid-column: auto;
        grid-row: auto;
    }

    /* --- Конкретные элементы --- */
    .direct-line-card {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1.5rem;
    }
    .direct-line-person {
        margin-top: -4rem;
    }
    .main_multi_slider .main_multi_slider_overflow {
        margin: 0 20px;
        width: calc(100% - 40px);
    }
     .main_multi_slider .btn_l, .main_multi_slider .btn_r {
        width: 20px;
        line-height: 150px;
    }
    .catalog ul, .catalognote ul {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-rows: auto;
    }
    .sections ul {
        grid-template-columns: 1fr;
        margin: 15px;
        gap: 15px;
    }
    
    /* --- Старая верстка (bidframe.css) --- */
    .mainframe {
       padding: 0;
    }
    .cabinet_form, .profile_form, .box {
        margin-left: 0;
        padding: 10px;
    }
	
	.catalog ul {
        grid-template-columns: auto;
    }
	
	.catalog ul {
        /* На мобильных всегда одна колонка */
        grid-template-columns: 1fr;
    }
    
    .main_box h1 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
	
	.news .news_cell{display:block;}
	.news .news_cell h4{display:block;}
	.news .news_cell .img{
		display: block;
		margin:5px 0;
		float: inherit;
		width: auto;
		height: 0;
		padding: 0;
		padding-bottom: 50%;
		background-position: center center;
		background-size: 100%;
		background-repeat: no-repeat;
		}
}


/* Маленькие мобильные устройства (до 576px) */
@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
    .hero-tab-content h1 {
        font-size: 2.2rem;
    }
    .hero-tab-content p {
        font-size: 1rem;
    }
    .btn {
        padding: 0.7rem 1.25rem;
        font-size: 0.9rem;
    }
    .hero-tabs {
        flex-wrap: wrap;
    }
    .hero-tab {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    .main_box h1 {
        font-size: 1.5rem;
    }
    .sfolders dt a, .documents a {
        font-size: 1.1em;
        padding: 15px;
        padding-right: 40px;
    }
	
	
}




@media screen and (max-width: 480px) {
    .middle_item ul {
        margin: 0;
    }
	
	.news .news_cell{display:block;}
	.news .news_cell h4{display:block;}
	.news .news_cell .img{
		display: block;
		margin:5px 0;
		float: inherit;
		width: auto;
		height: 0;
		padding: 0;
		padding-bottom: 50%;
		background-position: center center;
		background-size: 100%;
		background-repeat: no-repeat;
		}
}