/* RESPONSIVE STYLES */

@media (max-width: 1024px) {
    .hero-title { font-size: 2.5rem; }
    .product-row { gap: 30px; }
    .circle-bg { width: 250px; height: 250px; }
    .social-container { gap: 30px; }
    .phone-img { max-height: 400px; }
}

@media (max-width: 768px) {
    .desktop-nav { display: none; }
    .mobile-menu-btn { display: flex; }
    
    .hero-container { flex-direction: column; text-align: center; }
    .hero-image { text-align: center; margin-top: 30px; }
    .hero-title { font-size: 2.2rem; }
    
    .product-row, .product-row.reverse {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        margin-bottom: 60px;
    }
    
    .product-text-col {
        text-align: center !important;
    }
    
    .cta-container { flex-direction: column; text-align: center; }
    .cta-image { text-align: center; margin-top: 30px; }
    
    .social-container { flex-direction: column-reverse; text-align: center; }
    .social-image { text-align: center; width: 100%; }
    .phone-img { margin-left: auto; margin-right: auto; max-height: 450px; }
    .social-text { text-align: center; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
    .social-list { width: 100%; display: flex; flex-direction: column; align-items: center; }
    .social-list li { justify-content: center; text-align: center; }
    
    .product-row, .product-row.reverse {
        flex-direction: column !important; /* Force column, not column-reverse */
        text-align: center;
        gap: 20px;
        margin-bottom: 60px;
    }
    
    .product-image-col { order: 1; } /* Image always on top */
    .product-text-col { order: 2; text-align: center !important; } /* Text always below image */
    
    .location-grid { flex-direction: column; margin-right: 0; gap: 40px; margin-top: 40px; }
    .location-card { margin-right: 0; margin-top: 0; margin-bottom: 0; padding: 30px; }
    .location-map { min-height: 400px; height: 400px; width: 100%; display: block; }
    .circle-bg { width: 220px; height: 220px; }
    .product-img { max-width: 90%; margin: 0 auto; display: block; }
    .xicara-img { max-width: 75%; }
    .product-title { font-size: 1.5rem; }
    .phone-number { font-size: 2.2rem; }
    .hero-top-logo { max-width: 250px !important; }
}

@media (max-width: 480px) {
    .section-title { font-size: 2rem; }
    .hero-title { font-size: 1.8rem; }
    .circle-bg { width: 200px; height: 200px; }
    .product-title { font-size: 1.5rem; }
    .phone-number { font-size: 1.8rem; }
}