/* ========== HERO-БЛОК ДЛЯ СТРАНИЦЫ КОНТАКТЫ ========== */ .hero-contacts { width: 100%; background: #eef5fa; padding: 60px 0; margin-bottom: 60px; border-radius: 30px; box-sizing: border-box; overflow: hidden; } .hero-contacts-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 50px; } .hero-contacts-text { flex: 1.2; min-width: 300px; } .hero-contacts-text h1 { font-size: 42px; font-weight: 800; margin-bottom: 20px; color: #1a1a1a; line-height: 1.2; } .hero-contacts-text p { font-size: 18px; color: #2c3e4e; margin-bottom: 30px; } .hero-contacts-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 35px; } .contacts-feature { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 500; color: #2c3e4e; background: transparent; padding: 0; box-shadow: none; } .contacts-feature i { color: #E67817; font-size: 18px; width: 24px; flex-shrink: 0; } .hero-contacts-buttons { display: flex; flex-wrap: wrap; gap: 20px; } .btn-contacts-call, .btn-contacts-max { display: inline-block; padding: 14px 36px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.2s; box-sizing: border-box; text-align: center; } .btn-contacts-call { background: #E67817; color: white; box-shadow: 0 4px 12px rgba(230,120,23,0.3); } .btn-contacts-call:hover { background: #c55a0f; transform: translateY(-2px); } .btn-contacts-max { background: linear-gradient(135deg, #3B82F6, #8B5CF6); color: white; box-shadow: 0 4px 12px rgba(59,130,246,0.3); } .btn-contacts-max:hover { transform: translateY(-2px); filter: brightness(1.02); } .hero-contacts-image { flex: 0.8; text-align: center; } .hero-contacts-image img { max-width: 100%; max-height: 400px; width: auto; height: auto; border-radius: 24px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); object-fit: contain; transition: transform 0.3s ease; } .hero-contacts-image img:hover { transform: scale(1.02); } /* ========== АДАПТАЦИЯ ДЛЯ ПЛАНШЕТОВ ========== */ @media (max-width: 1000px) { .hero-contacts-container { max-width: 100%; gap: 40px; } .hero-contacts-text h1 { font-size: 36px; } .hero-contacts-image img { max-height: 350px; } } /* ========== МОБИЛЬНАЯ ВЕРСИЯ (ПО ТЗ) ========== */ @media (max-width: 800px) { .hero-contacts { padding: 40px 0 0 0; margin-bottom: 40px; border-radius: 30px; } .hero-contacts-container { flex-direction: column; text-align: left; gap: 30px; padding: 0; } .hero-contacts-text { padding: 0 24px; min-width: auto; } .hero-contacts-text h1 { font-size: 32px; text-align: left; } .hero-contacts-text p { text-align: left; font-size: 16px; } .hero-contacts-features { align-items: flex-start; width: 100%; } .hero-contacts-buttons { justify-content: flex-start; width: 100%; } .hero-contacts-buttons .btn-contacts-call, .hero-contacts-buttons .btn-contacts-max { padding: 14px 24px; } .hero-contacts-image { display: flex; justify-content: center; width: 100%; margin-top: 10px; } .hero-contacts-image img { max-width: 100%; width: 100%; max-height: none; border-radius: 0 0 30px 30px; display: block; object-fit: cover; box-shadow: none; } } /* ========== ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (ДО 550px) ========== */ @media (max-width: 550px) { .hero-contacts-text { padding: 0 20px; } .hero-contacts-text h1 { font-size: 28px; } .hero-contacts-text p { font-size: 15px; } .hero-contacts-features { gap: 10px; } .contacts-feature { font-size: 14px; } .hero-contacts-buttons { flex-direction: column; width: 100%; gap: 12px; } .hero-contacts-buttons .btn-contacts-call, .hero-contacts-buttons .btn-contacts-max { width: 100%; padding: 14px 16px; font-size: 16px; } .hero-contacts-image img { border-radius: 0 0 30px 30px; } } /* ========== ЭКРАНЫ ДО 380px ========== */ @media (max-width: 380px) { .hero-contacts-text { padding: 0 16px; } .hero-contacts-text h1 { font-size: 26px; } .hero-contacts-buttons .btn-contacts-call, .hero-contacts-buttons .btn-contacts-max { padding: 12px 12px; font-size: 15px; } } /* ========== ХОВЕР ЭФФЕКТ ДЛЯ ДЕСКТОПА ========== */ @media (min-width: 801px) { .hero-contacts-image img:hover { transform: scale(1.03); } }