/* Responsive Design */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .about-content,
    .hero-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .main-nav {
        display: none;
    }
    
    .menu-toggle {
        display: flex;
    }
    
    .header-contact .phone-link {
        display: none;
    }
    
    .hero {
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .section-header h2 {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .stats {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-info {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .social-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .service-content {
        padding: 1.5rem;
    }
    
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .brand-logo {
        padding: 1.5rem;
    }
    
    .cta-content h2 {
        font-size: 2rem;
    }
    
    .logo-title {
        font-size: 1.3rem;
    }
    
    .logo-icon {
        width: 35px;
        height: 35px;
    }
}
/* ===== RESPONSIVE FOR SERVICE PAGES ===== */

@media (max-width: 768px) {
    /* Порядок элементов на мобильных */
    .service-details-grid {
        display: flex;
        flex-direction: column;
    }
        .service-hero-content{
        grid-template-columns: 1fr;
    }
    /* details-main идет ПЕРВЫМ */
    .details-main {
        order: 2;
    }
    
    /* details-sidebar идет ВТОРЫМ */
    .details-sidebar {
        order: -1 !important;
    }
    
    /* Исправляем отступы */
    .service-details {
        padding: 40px 0;
    }
    
    .details-main h2 {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .details-main > p {
        text-align: center;
        font-size: 1rem;
        margin-bottom: 30px;
    }
    
    .problem-list h3,
    .repair-process h3,
    .brands-we-repair h3,
    .types-of-irons h3 {
        text-align: center;
        font-size: 1.4rem;
    }
    
    .problems-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .problem-card {
        text-align: center;
        padding: 20px;
    }
    
    .problem-card i {
        margin: 0 auto 15px;
    }
    
    .process-steps {
        gap: 20px;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 15px;
    }
    
    .step-number {
        margin: 0;
    }
    
    .brands-list {
        justify-content: center;
    }
    
    .types-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .type-item {
        text-align: center;
        padding: 20px;
    }
    
    .type-item i {
        margin: 0 auto 15px;
    }
}

@media (max-width: 576px) {
    .service-hero-content {
        gap: 30px;
        grid-template-columns: 1fr;
    }
    
    .service-hero-text h1 {
        font-size: 1.8rem;
        text-align: center;
    }
    
    .service-subtitle {
        font-size: 1rem;
        text-align: center;
        line-height: 1.5;
    }
    
    .service-badges {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .badge {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    .service-cta {
        flex-direction: column;
        width: 100%;
        gap: 15px;
        align-items: center;
    }
    
    .service-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Виджеты в сайдбаре */
    .price-widget,
    .contact-widget,
    .advantages-widget {
        text-align: center;
    }
    
    .contact-info .contact-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 10px;
    }
    
    .contact-info .contact-item i {
        margin-bottom: 5px;
    }
    
    .advantages-list {
        align-items: center;
    }
    
    .advantage-item {
        justify-content: center;
        text-align: center;
    }
}