/* ====== ТВОЙ БОЛЬШОЙ ЗАГОЛОВОК (как был) ====== */
.main-title-container { float: left; margin: 0; padding: 0; width: 50%; display: flex; align-items: center; justify-content: flex-start; }
.main-title {
font-size: 42px;
font-weight: 700;
color: #2c3e50;
margin: 0;
padding: 20px 0;
text-align: left;
position: relative;
font-family: 'Georgia', 'Times New Roman', serif;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.1;
}
.title-text {
display: block;
background: linear-gradient(45deg, #3498db, #2c3e50);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
padding-bottom: 10px;
}
.title-underline {
display: block;
width: 150px;
height: 4px;
background: linear-gradient(to right, #3498db, #2c3e50);
margin-top: 8px;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.wave-title { position: relative; display: inline-block; background: linear-gradient(45deg, #3498db, #2c3e50); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all 0.3s ease; }
.main-title:hover .wave-title {
background: linear-gradient(90deg, #1a237e 0%, #283593 25%, #3949ab 50%, #283593 75%, #1a237e 100%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: waveText 2s linear infinite;
background-position: 0% center;
}
@keyframes waveText { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
.main-title:hover .title-underline {
background: linear-gradient(90deg, #1a237e 0%, #283593 25%, #3949ab 50%, #283593 75%, #1a237e 100%);
background-size: 200% auto;
animation: waveLine 2s linear infinite;
width: 180px;
transition: all 0.3s ease;
}
@keyframes waveLine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

.article-title { font-size: 36px; color: #2c3e50; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.article-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100px; height: 3px; background: linear-gradient(to right, #3498db, #2c3e50); }
.article-title:hover { color: #1a237e; }
.article-title:hover::after { background: linear-gradient(to right, #1a237e, #3949ab); width: 120px; transition: all 0.3s ease; }

@media (max-width: 1200px) { .main-title { font-size: 36px; } .main-title-container { width: 45%; } .article-title { font-size: 32px; } }
@media (max-width: 992px) { .main-title { font-size: 32px; padding: 15px 0; } .main-title-container { width: 40%; } .article-title { font-size: 28px; } }
@media (max-width: 768px) { .main-title { font-size: 28px; letter-spacing: 1px; padding: 10px 0; } .main-title-container { width: 35%; } .title-underline { width: 120px; height: 3px; } .article-title { font-size: 24px; } }
@media (max-width: 576px) {
.main-title { font-size: 24px; padding: 8px 0; letter-spacing: 0.5px; }
.main-title-container { width: 100%; text-align: center; justify-content: center; float: none; margin-bottom: 10px; }
.title-text { text-align: center; }
.title-underline { margin: 8px auto 0; }
.article-title { font-size: 20px; }
}
@media (max-width: 480px) {
.main-title { font-size: 20px; }
.title-underline { width: 100px; }
.article-title { font-size: 18px; }
.main-title:hover .wave-title { animation: none; background: #1a237e; -webkit-text-fill-color: #1a237e; }
}