/* МОБИЛЬНЫЕ (0px - 1023.99px) */
        @media (max-width: 1023.99px) {
			.container.header-container{padding: 0 20px;}
            .container { padding: 0 10px; max-width: 100%; }

            /* Лого */
            .logo-svg { width: 80%;height: auto; }

            /* Скрываем сложный центральный блок десктопа */
            .header-center {
                display: none; 
            }

            /* Показываем мобильные элементы */
            .header-center-mobile {
                display: flex !important;
                justify-content: flex-end;
                align-items: center;
                gap: 10px;
                flex-grow: 1;
                margin: 0 10px;
            }
            
            .mobile-buttons-wrapper {
                display: flex !important;
                gap: 10px;
            }

            .header-right {
                visibility: visible;
                width: auto;
            }
            .burger-btn { display: flex; }
			.desktop-callback {
				display: none;
			}
			.mob-btn {
				width: 50px; height: 50px; border-radius: 50%;
				display: flex; align-items: center; justify-content: center;
			}
			 .hero {
			margin-top: 10px;
			padding: 20px;
			/* На мобильных часто делают радиус чуть меньше, но оставим 30px, если не указано иное */
		}
		.hero-wrapper {
        flex-direction: column; /* Блоки друг под другом */
        gap: 0;
    }

    .hero-left {
        padding: 0;
        width: 100%;
        text-align: center; /* H2 по центру по ТЗ */
    }
    
    .hero-left h1 { 
        font-size: 32px; 
        text-align: center; /* Обычно на мобильном тоже центрируют, если не указано иное, но сделаем по логике */
    }
    
    .hero-divider {
        width: 100%; /* Линия на всю ширину */
        margin: 30px auto; /* Центрируем линию и задаем отступы */
    }
    
    .hero-left h2 { 
        font-size: 22px; 
        text-align: center;
    }
    
    .hero-btn {
        margin: 30px auto 0; /* Центрируем кнопку */
        width: 100%;
        max-width: 100%;
        min-width: auto;
        font-size: 18px; /* Чуть уменьшим для мобильных, если нужно, или оставим 20 */
        padding: 15px 20px;
    }

    /* Правый блок мобильный */
    .hero-right {
        width: 100%;
        max-width: 100%;
        padding: 15px;
        margin-top: 30px; /* Отступ от H2 сверху (учитывая структуру) */
        background: rgba(255, 255, 255, 0.25);
    }
    
    .hero-right h3 { 
        font-size: 20px; 
        text-align: center;
    }
    
    .hero-form {
        gap: 15px;
        margin-top: 15px;
    }
    
    .hero-form input {
        font-size: 14px;
        padding: 0 15px;
    }
    
    .form-submit {
        font-size: 16px;
    }
	.hero-btn{
		display: none;
	}
	section-cloud {
        padding-top: 188px; /* Высота облака остается неизменной */
        padding-bottom: 40px;
    }

    .section-cloud h2 {
        font-size: 36px;
        font-weight: 800;
        color: #383673;
        margin: 0;
        text-align: center;
        margin-top: -4px; 
        line-height: 1.2;
    }
	.about-content {
        flex-direction: column; /* Колонки друг под другом */
        gap: 30px; /* Отступ между блоками */
    }

    /* Добавляем паддинги боковым сторонам */
    .about-text {
        padding: 0 20px;
        text-align: center; /* Центрирование текста */
    }
    
    .about-text p {
        font-size: 16px;
    }

    .about-gallery {
        padding: 0 20px;
        width: 100%;
    }

    .gallery-main {
        max-height: none; /* Убираем ограничение высоты, ширина 100% решит все */
        width: 100%;
    }

    .gallery-thumbs {
        margin-top: 20px; /* Чуть меньше отступ на мобильном */
        /* На мобильном тоже распределяем равномерно, но они будут мелкими. 
           Или можно сделать скролл? В ТЗ сказано "распределить равномерно". 
           Оставляем space-between, они станут узкими полосками. 
           Если нужно сеткой - скажи, но пока по ТЗ "равномерно на ширину". */
    }
	.why-us-section {
        margin-top: 30px;
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 20px;
    }

    .why-us-container {
        flex-direction: column;
		padding:20px 0 0 0;
    }

    .why-us-left {
        position: static; /* Убираем липкость на мобильном */
        width: 100%;
        padding: 20px;
        text-align: center;
    }

    .why-us-left h2 {
        font-size: 36px;
        text-align: center;
    }

    .why-us-text {
        margin-top: 20px;
        text-align: center;
        font-size: 14px;
    }

    .why-us-right {
        width: 100%;
        padding-top: 0;
        align-items: center; /* Центрируем карточки */
        margin-top: 20px; /* Отступ от левого блока */
    }

    .advantage-card {
        width: 100%; /* На мобильном 100% ширины правого блока */
        padding: 30px 20px;
        margin-bottom: 75px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Центрируем контент внутри */
    }

    /* Нумерация на мобильном: центр круга на верхней границе карточки */
    .card-number {
        position: relative; /* Меняем с absolute на relative для потока или оставляем absolute но меняем трансформ */
        /* По ТЗ: "Верхняя граница карточки пересекает центр круга" */
        /* Это значит круг висит наполовину снаружи сверху. */
        /* Если карточка flex-column, проще сделать margin-bottom отрицательным или absolute */
        
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%); /* Центр круга точно на линии верха */
        
        width: 85px;
        height: 85px;
        font-size: 36px;
    }

    .advantage-card h3 {
        margin-top: 50px; /* Отступ чтобы не наехать на круг */
        font-size: 28px; /* Адаптируем размер, 64 будет слишком много */
        color: #4EB1A9;
        text-align: center;
    }
    
    .card-list {
        width: 100%;
        text-align: left;
    }
    
    .card-list li {
        font-size: 14px;
        gap: 10px;
    }
    
    .check-icon {
        width: 24px;
        height: 24px;
    }
        
	/* Отступы секции */
    .services-price-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .services-price-section h2 {
        font-size: 36px; /* Адаптируем размер заголовка, если нужно, или оставляем 48 */
        margin-top: 80px;
        margin-bottom: 45px;
    }

    .services-description {
        font-size: 16px;
        margin-bottom: 45px; /* Отступ до сетки */
    }

    .services-wrapper {
        padding: 0; /* Убираем лишние паддинги, управляем через grid */
        margin: 0;
        overflow: visible; /* Важно: не скрываем溢出, чтобы стрелки были видны */
    }

    .services-grid {
        display: flex; /* Меняем грид на флекс для скролла */
        flex-direction: row;
        overflow-x: auto; /* Горизонтальный скролл */
        scroll-snap-type: x mandatory; /* Прилипание */
        gap: 20px;
        margin-top: 20px;
        padding: 20px 10px; /* Паддинг чтобы тень карточки не обрезалась */
        margin-left: -10px; /* Компенсация, чтобы первая карточка начиналась ровно */
        margin-right: -10px;
        
        /* Скрываем полосу прокрутки */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none;  /* IE/Edge */
    }
    
    .services-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    .service-card {
        flex: 0 0 100%; /* Ширина 100% от контейнера */
        scroll-snap-align: center; /* Центрирование при скролле */
        min-width: 100%;
        box-sizing: border-box;
    }

    /* Показываем стрелки */
    .slider-arrow {
        display: flex;
    }

    /* Позиционирование стрелок: утоплены на 15px за экран */
    .prev-arrow {
        left: -35px;
    }

    .next-arrow {
        right: -35px;
    }
    
    /* Корректировка размеров элементов карточки на мобильном */
    .card-img { height: 200px; }
    .service-card h3 { font-size: 20px; }
    .price-new { font-size: 28px; }
    .list-icon-placeholder { width: 30px; height: 30px; }
    .service-list li { font-size: 14px; gap: 10px; }


	.circle-4, .circle-6 {
        opacity: 0.15; /* Делаем бледнее */
    }
    .circle-2 {
        display: none; /* Можно скрыть лишние детали на маленьком экране */
    }
	 .specialists-section {
        box-shadow: none;
        border-radius: 0;
        padding: 20px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .specialists-section h2 {
        font-size: 36px;
    }

    .specialists-description {
        font-size: 16px;
        margin-top: 45px; /* Отступ на мобильном */
    }

    .specialists-wrapper {
        padding: 0;
        margin: 20px -20px 0; /* Вынос за пределы padding секции для стрелок */
        overflow: visible;
    }

    .specialists-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 20px;
        padding: 20px 20px 40px; /* Паддинг снизу для тени/скролла */
        margin-left: 0;
        margin-right: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .specialists-grid::-webkit-scrollbar { display: none; }

    .spec-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        min-width: 100%;
        border-radius: 20px;
        padding: 30px;
        flex-direction: column; /* Все друг под другом */
        align-items: center;
        text-align: center;
    }

    /* Фото на мобильном */
    .spec-photo {
        max-width: 300px;
        width: 100%;
        margin: 0 auto;
        display: block;
    }

    .spec-info {
        width: 100%;
        align-items: center; /* Центрируем контент внутри info */
        margin-top: 20px;
    }

    /* ФИО по центру */
    .spec-info h3 {
        font-size: 22px;
        text-align: center;
        margin-bottom: 10px;
    }

    /* Должность и стаж по центру */
    .spec-position {
        font-size: 18px;
        text-align: center;
        margin-bottom: 10px;
    }

    .spec-experience {
        font-size: 18px;
        color: #383673;
        text-align: center;
        margin-bottom: 30px;
    }

    /* Кнопка на мобильном */
    .spec-btn {
        width: 100%;
        max-width: 300px;
        height: 55px;
        font-size: 18px;
        margin: 0 auto;
    }

    /* Показываем стрелки */
    .slider-arrow {
        display: flex;
    }

    .spec-prev { left: -15px; }
    .spec-next { right: -15px; }
	
	
	.how-step.step-odd,.how-step.step-even{
		background-image:none;
	}	

	.how-section {
		padding: 20px; /* Отступы внутри секции */
		margin-top: 0; /* Сбрасываем отрицательный отступ, если он был глобально, или оставляем логику выше */
		background: #BC9BEA; /* Цвет фона секции остается */
	}
	.how-steps {
		gap:0;
	}
	/* Карточка шага */
	.how-step {
		position: relative;
		min-height: auto; /* Высота по контенту */
		margin-bottom: 60px; /* Отступ между карточками снизу (под стрелку) */
		padding-top: 40px; /* Место сверху, чтобы круг не наезжал на текст внутри */
		
		/* Новые стили фона */
		background: #FFFFFF !important; /* Белый фон */
		border-radius: 20px;
		box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Опционально: легкая тень для объема */
		min-height: 600px;
	}

	/* Убираем облака на мобильных */
	.how-step.step-odd,
	.how-step.step-even {
		background-image: none !important;
	}

	/* Нумерация (Круг) */
	.step-number {
		position: absolute;
		top: -20px; /* Выступает вверх на 20px */
		left: -10px; /* Отступ слева 8px от края карточки */
		
		width: 77px;
		height: 77px;
		
		background: #FFFFFF;
		border: 2px solid #FDA23E;
		border-radius: 50%;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		font-size: 36px;
		font-weight: 700;
		color: #FDA23E;
		
		z-index: 10;
		transform: none; /* Сбрасываем центрирование с десктопа */
	}

	/* Стрелка вниз (через ::before у номера, как просил) */
	.step-number::before {
		content: '';
		position: absolute;
		top: 100%; /* Начинается сразу под кругом */
		left: 50%;
		transform: translateX(-50%);
		
		width: 23px; /* Ширина стрелки (можно подогнать под SVG) */
		height: 582px; /* Высота из ТЗ */
		
		background: url('../img/how/arrow-bottom-mobile.svg') no-repeat center top;
		background-size: contain;
		
		z-index: 1; /* Стрелка позади контента, но внутри карточки */
		pointer-events: none;
	}

	/* Контейнер контента (Картинка + Текст) */
	.step-content {
		display: flex;
		flex-direction: column; /* Картинка сверху, текст снизу */
		align-items: flex-start;
		gap: 20px;
		
		padding-top: 0; /* Сбрасываем паддинг с десктопа */
		padding-left: 60px; /* Отступ слева, чтобы не наехать на стрелку/круг */
		padding-right: 20px;
		padding-bottom: 20px;
		
		position: relative;
		z-index: 2; /* Контент поверх стрелки */
	}

	/* Блок с картинкой */
	.step-image {
		flex: 0 0 auto;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.step-image img {
		max-width: 100%;
		height: auto;
		display: block;
		/* Ограничение высоты картинки, если нужно, чтобы не была гигантской */
		max-height: 250px; 
		object-fit: contain;
	}

	/* Текстовый блок */
	.step-text {
		flex: 0 0 auto;
		width: 100%;
		padding: 0; /* Сбрасываем паддинги лево/право с десктопа */
		color: #383673;
	}

	.step-text h3 {
		font-size: 22px; /* Адаптивный размер */
		margin-bottom: 15px;
		color: #383673;
		line-height: 1.3;
	}

	.step-text p {
		font-size: 16px; /* Адаптивный размер */
		line-height: 1.4;
		margin-bottom: 10px;
		color: #383673;
	}

	/* Скрываем стрелку у последнего элемента */
	.how-step:last-child .step-number::before {
		display: none;
	}

	/* Сброс специфичных стилей четности для мобилок, чтобы не ломали верстку */
	.step-odd .step-content,
	.step-even .step-content {
		flex-direction: column; /* Всегда колонка на мобильных */
	}
	.how-step .step-text {
		padding-left: 20px !important;
	}
	.reviews-section {
        padding: 60px 20px 40px;
		top:0;
		border-radius:0;
		box-shadow:none;
    }

    .reviews-slider-container {
        padding:0;
    }

    .reviews-arrow {
        /* Стили как у специалистов */
        width: 34px;
        height: 103px;
        left: -15px; /* Утоплена */
        right: auto;
    }
    
    .reviews-arrow-right {
        left: auto;
        right: -15px;
    }

    .review-card {
        flex: 0 0 100%;
        padding: 30px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .review-header {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0;
    }

    .review-avatar {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }

    .review-info {
        margin-left: 0;
        margin-top: 0;
        width: 100%;
    }

    .review-author {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .review-date {
        font-size: 16px;
        margin-top: 0;
    }

    .review-stars {
        margin-left: 0;
        margin-top: 15px; /* Ниже ФИО на 10+5? ТЗ: ФИО, ниже на 10 строка, звезды размером 35. Отступ от строки до звезд не указан явно, но логично 15-20. ТЗ: "звезды размером 35x35". */
        margin-bottom: 20px;
        justify-content: center;
        gap: 4px; /* В ТЗ для моб не указан gap звезд, оставим как на деск или чуть больше. Пусть 4px. */
    }
    
    .review-stars svg {
        width: 35px;
        height: 35px;
    }

    .review-text {
        font-size: 18px;
        margin-top: 20px; /* Ниже звезд на 20px */
        width: 100%;
    }

    .reviews-dots {
        margin-top: 20px; /* Ниже карточки на 20px */
    }

    .review-dot {
        width: 15px;
        height: 15px;
    }
	.contacts-section{
		width:95%;
		margin:60px auto;
	}
	 .contacts-section {
        width: 95%;
        margin: 60px auto;
        padding: 30px 20px;
    }
    
    .contacts-section h2 {
        font-size: 26px;
    }
    
    .contacts-description p {
        font-size: 16px;
    }
    
    .contacts-wrapper {
        flex-direction: column;
    }
    
    .contacts-info {
        width: 100%;
        order: 1;
    }
    
    .contacts-actions {
        width: 100%;
        order: 2;
        margin-top: 30px;
    }
    
    .contact-item {
        gap: 12px;
    }
    
    .contact-icon {
        width: 28px;
        height: auto;
    }
    
    .contact-text {
        font-size: 18px;
    }
    
    .route-button {
        width: 100%;
        max-width: 250px;
    }
    
    .messengers {
        flex-direction: row;
        justify-content: center;
        gap: 12px;
        margin-top: 30px;
    }
    
    .messenger-link {
        width: 56px;
        height: 56px;
    }
	.footer {
    height: auto;
    padding: 30px 20px;
  }
  
  .footer__container {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  
  .footer__copyright {
    font-size: 14px;
    order: 2;
  }
  
  .footer__logo {
    order: 1;
  }
  
  .footer__social {
    order: 3;
    justify-content: center;
  }
   .back-to-top {
        width: 64px;
        height: 64px;
        bottom: 20px;
        right: 20px;
    }
    
    .back-to-top svg {
        width: 28px;
        height: 28px;
    }
	
	.modal-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-submit {
        width: 100%;
        margin-top: 10px;
    }

    .modal-agreement {
        font-size: 9px;
    }
	
	.modal-window {
		max-width: 95%;
		max-height: 100%;
		background: #FFFFFF;
		box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
		border-radius: 20px;
		padding: 10px;
		width: 95%;
	}
	.modal-title {
		color: #383673;
		font-size: 25px;
		font-weight: normal;
		text-align: center;
		margin: 0 0 20px 0;
	}
	.modal-input {
		font-size:18px;
	}
	.modal-inner {
		padding:10px;
	}
	.modal-close-form {
		top: 5px;
		right: 10px;
	}
	.spec-quote {
        flex-direction: column; /* На мобильном кавычка сверху по центру или слева */
        align-items: center;
        text-align: center;
        background-color: transparent; /* Убираем фон на мобильном для чистоты */
        padding: 10px 0;
    }

    .quote-icon {
        font-size: 40px;
        margin-bottom: 5px;
        margin-top: 0;
        display: block;
    }

    .spec-quote p {
        font-size: 15px;
    }
}
		
		
		
		
		
		
		
		
		
		
		
		
		
		@media (max-width: 768px) {
    .modal-prev, .modal-next {
        display: none;
    }
	.map-container {
    height: 300px;
    max-height: 300px;
    border-radius: 8px;
  }
}

@media (max-width: 480px) {
  .map-section {
    padding:0;
  }
  .map-container {
    height: 250px;
    max-height: 250px;
  }
}