:root {
			--primary-color: #2c3e50;
			--secondary-color: #4ecdc4;
			--accent-color: #3498db;
			--light-bg: #f8f9fa;
			--dark-text: #2c3e50;
			--light-text: #7f8c8d;
			--border-radius: 5px;
			--hover-color: darkorange;
		}

		* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		html,
		body {
			overflow-x: hidden;
			width: 100%;
			max-width: 100%;
			position: relative;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			background-color: var(--light-bg);
			color: #333;
			line-height: 1.6;
			scroll-behavior: smooth;
		}

		.container {
			max-width: 1300px;
			margin: 0 auto;
			padding: 0 15px;
			width: 100%;
		}

		/* Header Styles */
		header {
			background: white;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1000;
			padding: 0;
		}

		.header-container {
			max-width: 1300px;
			margin: 0 auto;
			padding: 0 15px;
		}

		.navbar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70px;
		}

		.navbar-brand {
			font-weight: 700;
			color: var(--primary-color);
			font-size: 1.6rem;
			text-decoration: none;
			letter-spacing: -0.7px;
			flex-shrink: 0;
		}

		.nav-center {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-grow: 1;
		}

		.nav-tabs {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			padding: 0;
		}

		.nav-link {
			border: none;
			background: none;
			color: var(--light-text);
			font-weight: 500;
			padding: 10px 20px;
			border-radius: var(--border-radius);
			margin: 0 5px;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.3s;
			white-space: nowrap;
		}

		.nav-link.active {
			color: var(--primary-color);
			background-color: rgba(78, 205, 196, 0.1);
			border-bottom: 3px solid var(--secondary-color);
		}

		.nav-link:hover {
			color: var(--primary-color);
			background-color: rgba(78, 205, 196, 0.1);
		}

		.nav-right {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.mobile-menu-toggle {
			display: none;
			background: none;
			border: none;
			font-size: 1.5rem;
			color: var(--primary-color);
			cursor: pointer;
			padding: 5px;
			border-radius: var(--border-radius);
			transition: all 0.3s;
		}

		.mobile-menu-toggle:hover {
			background-color: rgba(78, 205, 196, 0.1);
		}

		.tab-content {
			background: var(--light-bg);
			padding: 30px 20px;
			min-height: 70vh;
			margin-top: 80px;
		}

		/* Hero Section */
		.hero-section {
			padding: 40px 0;
		}

		.hero-content {
			display: flex;
			align-items: center;
			gap: 40px;
			justify-content: space-between;
		}

		.hero-text {
			flex: 1;
			text-align: left;
		}

		.hero-logo {
			width: 80%;
			max-width: 400px;
			margin-bottom: 20px;
			display: block;
		}

		.hero-title {
			color: #1c6b72;
			font-weight: 500;
			font-size: 1.5rem;
			margin-bottom: 20px;
			line-height: 1.3;
		}

		.hero-image {
			flex: 1;
			text-align: center;
			position: relative;
		}

		.hero-image img {
			width: 100%;
			max-width: 600px;
		}

		.btn-primary {
			background-color: var(--secondary-color);
			border: none;
			padding: 12px 12px;
			border-radius: var(--border-radius);
			color: black;
			font-weight: 500;
			font-size: 1rem;
			cursor: pointer;
			transition: all 0.3s ease;
			margin: 10px 0;
			display: inline-block;
			text-decoration: none;
			padding-left: 12px;
	
		}

		.btn-primary:hover {
			background-color: darkorange;
			transform: translateY(-3px);
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		}

		.btn-secondary {
			background-color: #6c757d;
			border: none;
			padding: 10px 20px;
			border-radius: var(--border-radius);
			color: white;
			font-weight: 500;
			font-size: 0.9rem;
			cursor: pointer;
			transition: all 0.3s ease;
			margin: 5px;
			display: inline-block;
			text-decoration: none;
		}

		.btn-secondary:hover {
			background-color: #5a6268;
			transform: translateY(-2px);
		}

		/* Section Titles */
		.section-title {
			text-align: center;
			margin-bottom: 20px;
		}

		.section-title h2 {
			font-size: 2.2rem;
			color: var(--primary-color);
			margin-bottom: 15px;
			position: relative;
			display: inline-block;
		}

		.section-title h2:after {
			content: '';
			position: absolute;
			width: 60%;
			height: 3px;
			background: var(--secondary-color);
			bottom: -10px;
			left: 20%;
		}

		.section-title p {
			color: var(--light-text);
			font-size: 1rem;
			margin: 10px 0;
		}

		/* Services Section */
		.services-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 25px;
			margin-bottom: 50px;
		}

		.service-card {
			background-color: #fff;
			border-radius: var(--border-radius);
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
			transition: transform 0.3s, box-shadow 0.3s;
			text-align: center;
			padding: 25px;
			border-left: 4px solid var(--secondary-color);
		}

		.service-card:hover {
			transform: translateY(-5px);
			box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
			border-left: 4px solid var(--hover-color);
		}

		.service-icon {
			font-size: 40px;
			color: var(--secondary-color);
			margin-bottom: 20px;
			transition: color 0.3s;
		}

		.service-card:hover .service-icon {
			color: var(--hover-color);
		}

		.service-card h3 {
			font-size: 1.3rem;
			margin-bottom: 15px;
			color: var(--dark-text);
		}

		.service-card p {
			color: var(--light-text);
		}

		/* About Section */
		.about-content {
			display: flex;
			align-items: center;
			gap: 40px;
			margin-bottom: -15px;
		}

		.about-text {
			flex: 1;
		}

		.about-text h2 {
			text-align: center;
			font-size: 1.4rem;
			color: var(--dark-text);
			margin-bottom: 5px;
		}

		.about-text p {
			text-align: justify;
			text-indent: 20px;
			margin-bottom: 7px;
			color: #555;
		}

		.about-image {
			flex: 1;
			border-radius: var(--border-radius);
			overflow: hidden;
		}

		.about-image img {
			height: auto;
			display: block;
			max-height: 500px;
			object-fit: contain;
		}

		/* School Section */
		.school-section {
			background-color: white;
			padding: 50px;
			border-radius: var(--border-radius);
			margin-bottom: 50px;
			margin-top: 30px;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
		}

		/* Стили для чередования изображений */
		.school-content.default-layout {
			display: flex;
			align-items: flex-start;
			gap: 40px;
			position: relative;
		}

		.school-content.image-left {
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			gap: 40px;
			position: relative;
		}

		.school-content.image-right {
			display: flex;
			flex-direction: row-reverse;
			align-items: flex-start;
			gap: 40px;
			position: relative;
		}

		.school-text {
			flex: 1;
			position: relative;
			z-index: 1;
		}

		.school-text h2 {
			font-size: 1.4rem;
			color: var(--dark-text);
			margin-bottom: 10px;
		}

		.school-text p {
			text-indent: 20px;
			text-align: justify;
			margin-bottom: 7px;
			color: #555;
			line-height: 1.5rem;
		}

		.school-image {
			flex: 1;
			border-radius: var(--border-radius);
			overflow: visible;
			position: relative;
			z-index: 2;
		}

		.school-image img {
			width: 100%;
			height: auto;
			display: block;
			position: relative;
			z-index: 2;
			border-radius: 5px;
		}

		/* Для секции "Интерес-Навигатор" */
		.interest-navigator .school-content.image-left {
			display: flex;
			align-items: flex-start;
			gap: 20px;
			position: relative;
		}

		.interest-navigator .dual-images-container {
			flex: 0 0 50%;
			position: relative;
			max-width: 50%;
		}

		.interest-navigator .school-text {
			flex: 0 0 50%;
			position: relative;
			z-index: 1;
			max-width: 50%;
			display: flex;
			flex-direction: column;
		}

		.interest-navigator .dual-images-container img {
			width: 100%;
			margin: 25px 0;
		}

		.dual-images-container {
			position: relative;
			width: 100%;
		}

		.dual-images-container img {
			width: 100%;
			margin-bottom: 10px;
		}

		.dual-images-container img:first-child {
			margin-bottom: 20px;
		}

		/* Contact Section */
		.contact-layout {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 40px;
			margin-bottom: 50px;
		}

		.contact-info h2,
		.contact-form h2 {
			margin-bottom: 20px;
			color: var(--primary-color);
		}

		.contact-info p {
			margin-bottom: 20px;
			color: var(--light-text);
		}

		/* Контактная сетка */
		.contacts-grid {
			display: grid;
			gap: 15px;
			margin: 25px 0 35px 0;
		}

		.contact-row {
			display: grid;
			grid-template-columns: 50px 130px 1fr;
			align-items: center;
			gap: 15px;
			padding: 12px 15px;
			background: #f8f9fa;
			border-radius: 10px;
			transition: all 0.3s ease;
			animation: fadeInUp 0.5s ease forwards;
			opacity: 0;
		}

		.contact-row:hover {
			background: #f0f8f7;
			transform: translateY(-2px);
		}

		.contact-icon {
			flex-shrink: 0;
			transition: all 0.3s;
			width: 40px;
			height: 40px;
			background: #4ecdc4;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 16px;
		}

		.contact-row:hover .contact-icon {
			background: #3db4ab;
			transform: scale(1.05);
		}

		.contact-details h4 {
			font-size: 1.1rem;
			margin-bottom: 5px;
			color: var(--dark-text);
		}

		.contact-details p {
			color: var(--light-text);
		}

		.contact-label {
			font-weight: 600;
			color: #333;
			font-size: 16px;
			white-space: nowrap;
		}

		.contact-value {
			color: #555;
			font-size: 16px;
			line-height: 1.4;
		}

		.contact-value a {
			color: #1c6b72;
			text-decoration: none;
			font-weight: 500;
			transition: color 0.3s, transform 0.2s;
		}

		.contact-value a:hover {
			color: #3db4ab;
			text-decoration: underline;
			transform: translateY(-1px);
		}

		/* Документы */
		.documents-section {
			margin-top: 40px;
			padding-top: 25px;
			border-top: 2px solid #e0e0e0;
		}

		.documents-section h3 {
			color: #333;
			margin-bottom: 20px;
			font-size: 22px;
		}

		.documents-grid {
			display: grid;
			gap: 12px;
			margin-top: 15px;
		}

		.doc-item {
			display: grid;
			grid-template-columns: 50px 1fr 30px;
			align-items: center;
			gap: 15px;
			padding: 15px;
			background: white;
			border: 1px solid #e0e0e0;
			border-radius: 10px;
			text-decoration: none;
			color: inherit;
			transition: all 0.3s ease;
			animation: fadeInUp 0.5s ease forwards;
			opacity: 0;
		}

		.doc-item:hover {
			border-color: var(--secondary-color);
			background: #f0f8f7;
			transform: translateY(-2px);
			box-shadow: 0 5px 15px rgba(78, 205, 196, 0.15);
		}

		.doc-icon {
			transition: all 0.3s;
			width: 40px;
			height: 40px;
			background: #e0f7f6;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #4ecdc4;
			font-size: 18px;
		}

		.doc-item:hover .doc-icon {
			background: var(--secondary-color);
			color: white;
		}

		.doc-content {
			display: flex;
			flex-direction: column;
		}

		.doc-title {
			font-weight: 600;
			color: #333;
			font-size: 15px;
			margin-bottom: 3px;
		}

		.doc-subtitle {
			color: #666;
			font-size: 13px;
		}

		.doc-download {
			color: black;
			font-size: 16px;
			transition: all 0.3s;
		}

		.doc-item:hover .doc-download {
			color: var(--secondary-color);
			transform: translateX(3px);
		}

		/* Контактная форма */
		.contact-form .form-group {
			margin-bottom: 20px;
		}

		.contact-form label {
			display: block;
			margin-bottom: 5px;
			font-weight: 500;
			color: var(--dark-text);
		}

		.contact-form input,
		.contact-form textarea,
		.contact-form select {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			font-size: 16px;
			font-family: inherit;
		}

		.contact-form textarea {
			min-height: 150px;
			resize: vertical;
		}

		.contact-form select {
			background-color: white;
			cursor: pointer;
		}

		/* Footer */
		footer {
			background-color: #2c3e50;
			color: white;
			padding: 50px 0 20px;
		}

		.footer-content {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 40px;
			margin-bottom: 30px;
		}

		.footer-logo h2 {
			font-size: 1.8rem;
			margin-bottom: 15px;
		}

		.footer-logo span {
			color: var(--secondary-color);
		}

		.footer-about p {
			margin-bottom: 20px;
			color: #ecf0f1;
		}

		.footer-links h3,
		.footer-newsletter h3 {
			font-size: 1.2rem;
			margin-bottom: 20px;
			position: relative;
			padding-bottom: 10px;
		}

		.footer-links h3:after,
		.footer-newsletter h3:after {
			content: '';
			position: absolute;
			left: 0;
			bottom: 0;
			width: 40px;
			height: 2px;
			background-color: var(--secondary-color);
		}

		.footer-links ul {
			list-style: none;
			padding: 0;
		}

		.footer-links li {
			margin-bottom: 10px;
		}

		.footer-links a {
			color: #ddd;
			text-decoration: none;
			transition: color 0.3s;
		}

		.footer-links a:hover {
			color: var(--secondary-color);
		}

		.footer-newsletter p {
			margin-bottom: 15px;
			color: #ddd;
		}

		.newsletter-form {
			display: flex;
			gap: 10px;
		}

		.newsletter-form input {
			flex: 1;
			padding: 10px 15px;
			border: none;
			border-radius: var(--border-radius);
		}

		.newsletter-form button {
			background-color: var(--secondary-color);
			color: white;
			border: none;
			padding: 0 20px;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: background-color 0.3s;
		}

		.newsletter-form button:hover {
			background-color: #3cb4ac;
		}

		.footer-social {
			display: flex;
			gap: 15px;
			margin-top: 20px;
		}

		.social-icon {
			width: 40px;
			height: 40px;
			background-color: rgba(255, 255, 255, 0.1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			text-decoration: none;
			transition: all 0.3s;
		}

		.social-icon:hover {
			background-color: var(--secondary-color);
			transform: translateY(-3px);
		}

		.copyright {
			text-align: center;
			padding-top: 20px;
			border-top: 1px solid #3a4a5e;
			color: #ddd;
			font-size: 0.9rem;
		}

		/* Tab Panes */
		.tab-pane {
			display: none;
		}

		.tab-pane.active {
			display: block;
		}

		/* Modal Login Styles */
		.modal {
			display: none;
			position: fixed;
			z-index: 2000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			animation: fadeIn 0.3s;
		}

		.modal-content {
			background-color: white;
			margin: 5% auto;
			padding: 30px;
			border-radius: 10px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
			animation: slideDown 0.3s;
			position: relative;
		}

		.close {
			position: absolute;
			right: 20px;
			top: 15px;
			font-size: 28px;
			font-weight: bold;
			color: #aaa;
			cursor: pointer;
			transition: color 0.3s;
		}

		.close:hover {
			color: #333;
		}

		.modal h2 {
			text-align: center;
			margin-bottom: 25px;
			color: var(--primary-color);
		}

		.modal .form-group {
			margin-bottom: 20px;
		}

		.modal label {
			display: block;
			margin-bottom: 8px;
			color: #555;
			font-weight: 500;
		}

		.modal input {
			width: 100%;
			padding: 12px 15px;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			font-size: 16px;
			transition: border-color 0.3s;
		}

		.modal input:focus {
			outline: none;
			border-color: var(--secondary-color);
		}

		.modal-buttons {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-top: 20px;
		}

		.forgot-password {
			text-align: center;
			margin-top: 15px;
		}

		.forgot-password a {
			color: var(--accent-color);
			text-decoration: none;
			font-size: 0.9rem;
		}

		.forgot-password a:hover {
			text-decoration: underline;
		}


/* Блок согласия в форме */
.consent-block {
    margin: 18px 0 22px 0;
    padding: 12px 16px;
    background: rgba(58, 197, 187, 0.05);
    border-left: 3px solid var(--accent, #3ac5bb);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.consent-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted, #5a6a7a);
}

.consent-icon {
    color: var(--accent, #3ac5bb);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.consent-text {
    flex: 1;
}

.consent-link {
    color: var(--accent, #3ac5bb);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.2s;
    border-bottom: none;
}

.consent-link:hover {
    opacity: 0.7;
    text-decoration: none;
}
		.modal-message {
			padding: 10px;
			margin: 10px 0;
			text-align: center;
			display: none;
			transition: opacity 0.5s ease;
		}

		.modal-message.error {
			background-color: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
			display: block;
		}

		.modal-message.success {
			background-color: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
			display: block;
		}

		@keyframes fadeIn {
			from {
				opacity: 0;
			}

			to {
				opacity: 1;
			}
		}

		@keyframes slideDown {
			from {
				transform: translateY(-50px);
				opacity: 0;
			}

			to {
				transform: translateY(0);
				opacity: 1;
			}
		}

		@keyframes fadeInUp {
			from {
				opacity: 0;
				transform: translateY(20px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Форма восстановления пароля */
		#forgotPasswordForm {
			display: none;
		}

		/* Стили для уведомлений формы */
		.form-message {
			padding: 15px;
			margin: 15px 0;
			border-radius: var(--border-radius);
			display: none;
			transition: opacity 0.5s ease;
		}

		.form-message.success {
			background-color: #d4edda;
			color: #155724;
			border: 1px solid #c3e6cb;
			display: block;
		}

		.form-message.error {
			background-color: #f8d7da;
			color: #721c24;
			border: 1px solid #f5c6cb;
			display: block;
		}

		.form-message.loading {
			background-color: #d1ecf1;
			color: #0c5460;
			border: 1px solid #bee5eb;
			display: block;
		}

		.features-list {
			list-style: none;
			padding-left: 0;
			margin: 20px 0;
		}

		.features-list li {
			padding: 5px 0;
			padding-left: 28px;
			position: relative;
		}

		.features-list li:before {
			content: "";
			position: absolute;
			left: 0;
			top: 8px;
			width: 18px;
			height: 18px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232ecc71'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
		}

		.dual-benefit {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 20px;
			margin: 25px 0;
		}

		.benefit-for {
			padding: 20px;
			background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
			border-radius: 10px;
			border: 1px solid #dee2e6;
		}

		.benefit-icon {
			font-size: 32px;
			margin-bottom: 10px;
		}

		.benefit-for h3 {
			margin-top: 0;
			color: #2c3e50;
			font-size: 18px;
			border-bottom: 2px solid #3498db;
			padding-bottom: 8px;
			margin-bottom: 15px;
		}

		.benefit-for:nth-child(2) h3 {
			border-bottom-color: #2ecc71;
		}

		.cta-buttons {
			display: flex;
			gap: 15px;
			margin-top: 0px;
			justify-content: space-around;
		}

		/* Mobile Navigation */
		.mobile-nav {
			position: fixed;
			top: 70px;
			left: 0;
			right: 0;
			background: white;
			box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
			display: none;
			flex-direction: column;
			z-index: 999;
		}

		.mobile-nav.active {
			display: flex;
		}

		.mobile-nav-link {
			padding: 15px 20px;
			border-bottom: 1px solid #eee;
			color: var(--dark-text);
			text-decoration: none;
			transition: background 0.3s;
			text-align: center;
			font-size: 1rem;
			font-weight: 500;
		}

		.mobile-nav-link.active {
			background: rgba(78, 205, 196, 0.1);
			color: var(--primary-color);
			border-left: 4px solid var(--secondary-color);
		}

		.mobile-nav-link:hover {
			background: rgba(78, 205, 196, 0.1);
		}

		/* Анимации для контактных элементов */
		.contact-row:nth-child(1) {
			animation-delay: 0.1s;
		}

		.contact-row:nth-child(2) {
			animation-delay: 0.2s;
		}

		.contact-row:nth-child(3) {
			animation-delay: 0.3s;
		}

		.contact-row:nth-child(4) {
			animation-delay: 0.4s;
		}

		.doc-item:nth-child(1) {
			animation-delay: 0.5s;
		}

		.doc-item:nth-child(2) {
			animation-delay: 0.6s;
		}

		.doc-item:nth-child(3) {
			animation-delay: 0.7s;
		}

		/* Responsive Styles */
		@media (max-width: 992px) {
			.hero-content {
				flex-direction: column-reverse;
				text-align: center;
			}

			.hero-text {
				text-align: center;
			}

			.hero-section {
				padding-top: 10px;
			}

			.hero-logo {
				margin: 0 auto 20px;
			}

			.hero-title {
				font-size: 1.6rem;
			}

			.contact-layout {
				grid-template-columns: 1fr;
			}

			.newsletter-form button {
				padding: 10px 20px;
				width: 20%;
			}
		}

		@media (max-width: 768px) {
			.navbar {
				height: 60px;
			}

			.tab-content {
				margin-top: 85px;
			}

			.mobile-menu-toggle {
				display: block;
			}

			.nav-center {
				display: none;
			}

			.about-content {
				flex-direction: column-reverse;
			}

			.about-image {
				width: 100%;
				margin-bottom: 30px;
			}

			.about-text {
				width: 100%;
			}

			.about-image img {
				margin-top: 20px;
				width: 100%;
			}

			.hero-title {
				font-size: 1.4rem;
			}

			.hero-section {
				padding-top: 5px;
			}

			.section-title h2 {
				font-size: 1.8rem;
			}

			.school-content.default-layout,
			.school-content.image-left,
			.school-content.image-right {
				flex-direction: column;
			}

			.school-content .school-image,
			.school-content .school-text {
				width: 100%;
				max-width: 100%;
			}

			/* Для секции Интерес-Навигатор на мобильных */
			.interest-navigator .school-content.image-left {
				flex-direction: column;
				display: flex;
			}

			.interest-navigator .dual-images-container,
			.interest-navigator .school-text {
				flex: 0 0 100%;
				max-width: 100%;
				width: 100%;
				order: unset;
			}

			.interest-navigator .dual-images-container img {
				margin: 15px 0;
			}

			/* На мобильных устройствах используем flexbox для переупорядочивания */
			.interest-navigator .school-content {
				display: flex;
				flex-direction: column;
			}

			/* Сначала идет intro-text */
			.interest-navigator .intro-text {
				order: 1;
			}

			/* Затем изображения */
			.interest-navigator .dual-images-container {
				order: 2;
				margin: 0px 0;
			}

			/* Затем блоки "Для клиентов/организаций" */
			.interest-navigator .dual-benefit {
				order: 3;
				margin: 20px 0;
			}

			/* Затем остальной текст */
			.interest-navigator .rest-text {
				order: 4;
				margin: 0px 0;
			}

			/* Затем кнопки */
			.interest-navigator .cta-buttons {
				order: 5;
				margin-top: 20px;
			}

			/* Убираем display: flex у .school-text на мобильных, чтобы порядок работал */
			.interest-navigator .school-text {
				display: contents;
			}

			.services-grid {
				grid-template-columns: 1fr;
				gap: 15px;
			}

			.service-card {
				padding: 20px;
				margin: 0 10px;
			}

			.school-section {
				margin-top: 30px;
				padding: 20px;
			}

			.footer-content {
				grid-template-columns: 1fr;
				gap: 30px;
			}

			.newsletter-form {
				flex-direction: row;
			}

			.modal-content {
				width: 95%;
				margin: 10% auto;
				padding: 20px;
			}

			.newsletter-form button {
				padding: 10px 20px;
				width: 20%;
			}

			.dual-benefit {
				grid-template-columns: 1fr;
				gap: 15px;
			}

			.cta-buttons {
				flex-direction: column;
				gap: 10px;
			}

			.nav-right .btn-primary {
				padding: 6px 12px;
				font-size: 0.9rem;
				text-align: center;
			}

			.contact-row {
				grid-template-columns: 45px 1fr;
				grid-template-rows: auto auto;
				gap: 10px;
				padding: 12px;
			}

			.contact-icon {
				grid-row: span 2;
				align-self: start;
				width: 38px;
				height: 38px;
			}

			.contact-label {
				font-size: 15px;
				align-self: end;
				padding-top: 2px;
			}

			.contact-value {
				grid-column: 2;
				font-size: 15px;
			}

			.doc-item {
				grid-template-columns: 45px 1fr 25px;
				gap: 12px;
				padding: 12px;
			}

			.doc-title {
				font-size: 14px;
			}

			.doc-subtitle {
				font-size: 12px;
			}
		}

		@media (max-width: 480px) {
			.navbar-brand {
				margin-top: 5px;
				font-size: 1.4rem;
			}

			.about-image img {
				margin-top: 20px;
				width: 100%;
			}

			.about-text h2 {
				font-size: 1.5rem;
			}

			.hero-title {
				font-size: 1.2rem;
			}

			.section-title h2 {
				font-size: 1.5rem;
			}

			.btn-primary {
				padding: 10px 25px;
				font-size: 0.9rem;
				text-align: center;
			}

			.hero-section {
				padding-top: 2px;
			}

			#pic2 {
				display: none;
			}

			.newsletter-form button {
				padding: 10px 20px;
				width: 20%;
			}

			.contact-row {
				grid-template-columns: 40px 1fr;
				padding: 10px;
				gap: 8px;
			}

			.contact-icon {
				width: 35px;
				height: 35px;
				font-size: 14px;
			}

			.contact-label,
			.contact-value {
				font-size: 14px;
			}

			.contact-value a {
				font-size: 14px;
			}

			.doc-item {
				grid-template-columns: 40px 1fr 25px;
				gap: 10px;
				padding: 10px;
			}

			.doc-icon {
				width: 35px;
				height: 35px;
				font-size: 16px;
			}

			.doc-title {
				font-size: 13px;
			}

			.doc-subtitle {
				font-size: 11px;
			}

			.mobile-nav {
				top: 60px;
			}

			.interest-navigator .dual-images-container img {
				margin: 10px 0;
			}

			.school-content.default-layout,
			.school-content.image-left,
			.school-content.image-right {
				gap: 20px;
			}
		}