/* ============================================
   BUSINESS PRO X - RESPONSIVE STYLES
   ============================================ */

/* Extra Small Devices (Phones) */
@media (max-width: 575.98px) {
    .container {
        padding: 0 15px;
    }
    
    .section {
        padding: 40px 0;
    }
    
    .section-title {
        font-size: 1.6rem;
    }
    
    .hero-professional {
        padding: 100px 0 40px;
    }
    
    .hero-professional-title {
        font-size: 2rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 10px;
    }
    
    .stat-item {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    
    .stat-number {
        font-size: 1.2rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
        margin-top: 0;
    }
    
    .clients-grid {
        gap: 15px;
    }
    
    .client-logo {
        font-size: 11px;
    }
    
    .about-experience {
        position: relative;
        bottom: 0;
        right: 0;
        margin-top: 15px;
    }
}

/* Small Devices (Tablets) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        padding: 0 20px;
    }
    
    .section {
        padding: 50px 0;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .hero-professional-title {
        font-size: 2.5rem;
    }
    
    .hero-stats {
        gap: 20px;
    }
}

/* Medium Devices (Small Laptops) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-title {
        font-size: 2.2rem;
    }
    
    .hero-professional-title {
        font-size: 3rem;
    }
    
    .hero-stats {
        gap: 30px;
    }
}

/* Large Devices (Desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .section-title {
        font-size: 2.5rem;
    }
    
    .hero-professional-title {
        font-size: 3.5rem;
    }
}

/* Extra Large Devices */
@media (min-width: 1200px) {
    .container {
        padding: 0 40px;
    }
}

/* Print Styles */
@media print {
    .site-header,
    .site-footer,
    .menu-toggle,
    .hero-professional-buttons,
    .blog-cta,
    .cta-section,
    .newsletter-section {
        display: none !important;
    }
    
    .hero-professional {
        min-height: auto !important;
        padding: 50px 0 !important;
    }
}