:root {
    --primary-color: #2c3e50;
    --secondary-color: #e74c3c;
    --accent-color: #3498db;
    --light-bg: #f8f9fa;
    --dark-text: #333;
    --light-text: #7f8c8d;
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
}
/* Убедитесь, что body занимает всю высоту и ширину */
body {
margin: 0; /* Убираем отступы по умолчанию */
height: 100vh; /* Высота на весь экран */


}
.main-conteyner {
display: flex;
max-width: 1600px;

margin-left: auto;
margin-right: auto;
}

.contayner-article {
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: var(--dark-text);
background-color: #fff;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;

height: 1500px; /* Пример высоты для прокрутки */
overflow-y: auto; /* Включаем вертикальную прокрутку */
}

.contayner-article {
    /* Для Firefox */
    height: 1500px; /* Пример высоты для прокрутки */
overflow-y: auto; /* Включаем вертикальную прокрутку */
   }



.soderzhanie {
    
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.soderzhanie-open {
display: non;
}

.reclama-article {
position: sticky;
top: 0; /* Позиция от верхней части окна */
margin-left: 5px; /* Отступ слева */
margin-right: 10px;
}

.box-req {
display: block;
margin-top: 30px;
height: 1450px;
}

.box-req-1,
.box-req-2,
.box-req-3,
.box-req-4 {
width: 220px;
height: 350px;

margin-top: 10px;
border: #3f3e3e00 1px solid; 
border-radius: 8px;
margin-left: 0px;

}

article {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    margin: 30px 0;
}

h1, h2, h3, h4 {
    color: var(--primary-color);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

h1 {
    font-size: 2.2rem;
    border-bottom: 2px solid var(--secondary-color);
    padding-bottom: 10px;
}

.h1-direcrtory {
    font-size: 1.5rem;
    border-bottom: none;
    
   
}

h2 {
    font-size: 1.8rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
}

h3 {
    font-size: 1.4rem;
}

h4 {
    font-size: 1.2rem;
}

p {
    
    font-size: 1.05rem;
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

ul, ol {
    margin-bottom: 1.5em;
    padding-left: 1.5em;
}

li {
    margin-bottom: 0.5em;
    font-size: 1.05rem;
}

.img_formula {
    background: var(--light-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.img_formula img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.formula-container {
    background: var(--light-bg);
    padding: 15px;
    border-left: 3px solid var(--accent-color);
    margin: 20px 0;
    overflow-x: auto;
    font-size: 1.05rem;
}

.table_formula {
    font-size: 1.5rem; 
}

.note {
    background-color: #e3f2fd;
    border-left: 4px solid var(--accent-color);
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.warning {
    background-color: #fff3e0;
    border-left: 4px solid #ffa000;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.section {
    margin-bottom: 40px;
}

.toc {
    background: var(--light-bg);
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
}

.toc h3 {
    margin-top: 0;
}

.toc ul {
    list-style-type: none;
    padding-left: 0;
}

.toc li {
    margin-bottom: 8px;
}

.toc  {
    display: block;
    padding: 5px 0;
}




@media (max-width: 772px) {
  
    
    article {
        padding: 20px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    .reclama-article {
        display: none;
    }
}

.vid-gv {
    font-size: 1.5rem;
}

.hero {
    
   
    padding: 1rem 1rem;
    text-align: center;
}

.hero {
    font-size: 1rem;
    
}

.cta-button {
    background-color: var(--accent-red);
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
   
	transition: background-color 0.3s ease;
}

	/* Mobile Adaptation */


/* Стили для модального окна */
.modal2 {
display: none; /* Скрыто по умолчанию */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон */
justify-content: center;
align-items: center;
}



.modal-content2 {
background-color: white;
padding: 2rem;
border-radius: 10px;
text-align: center;
max-width: 800px;
width: 100%;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
position: relative; /* Для позиционирования крестика */
}

.modal2 {
margin-bottom: 1rem;
color: var(--primary-blue);
}

.button-container {
display: flex;
gap: 1rem; /* Расстояние между кнопками */
justify-content: center;
}

.modal-button {
background-color: var(--primary-blue);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;
flex: 1; /* Равномерное распределение ширины */
}

#soderzhanie {
    border: none;
    background-color: #3498db00;
    color: #e74c3c;
    cursor: pointer;
}

.h3-s {
    color: #c04646;
}

.h3-s:hover {
    color: rgb(75, 182, 89);
}

#uuu {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none; 
}
@media (max-width: 474px) {
    .modal-button {
        font-size: 0.8rem;
		padding: 0.7rem 1rem;
    }

    article {
        padding: 10px;
    }
    
    .contayner-article {

margin: 0 auto;
padding: 0 5px;

}

}



.modal-button:hover,
.cta-button:hover {
background-color: #1A3A53; /* Темный оттенок основного цвета */
}

.close {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 1.5rem;
cursor: pointer;
color: var(--dark-gray);
}

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