/* ============================================================
   SUNDER SERVICE - RESPONSIVE STYLESHEET
   ============================================================
   Breakpoints:
   - X-Large (XL): ≥1200px (Desktop/Laptop)
   - Large (LG): 992px - 1199px (Tablet Landscape)
   - Medium (MD): 768px - 991px (Tablet Portrait)
   - Small (SM): 576px - 767px (Large Mobile)
   - X-Small (XS): <576px (Small Mobile)
   ============================================================ */

/* ==================== EXTRA LARGE DEVICES (1400px+) ==================== */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-section {
        min-height: 90vh;
    }
    
    .hero-title {
        font-size: 60px;
    }
    
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==================== LARGE DESKTOP (1200px - 1399px) ==================== */
@media (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
    
    .hero-content {
        padding-right: var(--spacing-lg);
    }
    
    .hero-title {
        font-size: 48px;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .premium-dropdown {
        min-width: 550px;
    }
    
    .floating-card {
        transform: scale(0.85);
    }
    
    .card-rating {
        right: -30px;
    }
    
    .card-customers {
        right: -50px;
    }
}

/* ==================== DESKTOP/LAPTOP (992px - 1199px) ==================== */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
    
    /* Top Bar */
    .top-bar-center {
        display: none;
    }
    
    .top-bar-left {
        font-size: 11px;
    }
    
    .top-bar-right {
        font-size: 11px;
        gap: 4px;
    }
    
    .social-icons-top {
        gap: 2px;
    }
    
    .social-icons-top a {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
    
    /* Header */
    .navbar-brand {
        margin-right: var(--spacing-md);
    }
    
    .navbar-nav .nav-link {
        padding: 8px 10px;
        font-size: 13px;
    }
    
    .btn-call-header span,
    .btn-whatsapp-header span {
        display: none;
    }
    
    .btn-call-header,
    .btn-whatsapp-header {
        padding: 10px 12px;
        font-size: 16px;
    }
    
    /* Premium Dropdown */
    .premium-dropdown {
        min-width: 500px;
    }
    
    .dropdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    /* Hero Section */
    .hero-section {
        padding: var(--spacing-4xl) 0 var(--spacing-3xl);
        min-height: auto;
    }
    
    .hero-row {
        flex-direction: column;
    }
    
    .hero-content {
        padding-right: 0;
        margin-bottom: var(--spacing-3xl);
        text-align: center;
    }
    
    .hero-badge {
        margin: 0 auto var(--spacing-lg);
    }
    
    .hero-description {
        margin: 0 auto var(--spacing-xl);
    }
    
    .hero-search-wrapper {
        max-width: 600px;
        margin: 0 auto var(--spacing-lg);
    }
    
    .hero-cta-buttons {
        justify-content: center;
    }
    
    .popular-services {
        justify-content: center;
    }
    
    .trust-indicators {
        justify-content: center;
        gap: var(--spacing-lg);
    }
    
    .hero-visual {
        max-width: 450px;
        margin: 0 auto;
    }
    
    .hero-illustration {
        min-height: 400px;
    }
    
    .technician-figure {
        width: 220px;
        height: 320px;
    }
    
    .floating-card {
        transform: scale(0.75);
    }
    
    .card-rating {
        top: 10px;
        right: -40px;
    }
    
    .card-customers {
        bottom: 80px;
        right: -60px;
    }
    
    .card-parts {
        bottom: 20px;
        left: -40px;
    }
    
    .card-service {
        top: 120px;
        left: -50px;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
    }
    
    /* Why Choose Us */
    .why-choose-illustration {
        min-height: 400px;
        margin-bottom: var(--spacing-3xl);
    }
    
    .why-choose-content {
        text-align: center;
    }
    
    .section-description {
        margin: 0 auto;
    }
    
    .why-feature-item {
        text-align: left;
    }
    
    /* Promo Banner */
    .promo-banner {
        padding: var(--spacing-2xl);
    }
    
    .promo-discount-circle {
        width: 140px;
        height: 140px;
    }
    
    .discount-percent {
        font-size: 36px;
    }
    
    /* How It Works */
    .col-lg-15 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        margin-bottom: var(--spacing-xl);
    }
    
    .timeline-line {
        display: none;
    }
    
    /* Stats */
    .col-lg-2-4 {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        margin-bottom: var(--spacing-xl);
    }
    
    .stat-number,
    .stat-number-static {
        font-size: 36px;
    }
    
    /* Brands */
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Service Areas */
    .areas-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* CTA */
    .cta-wrapper {
        text-align: center;
    }
    
    .cta-content {
        margin-bottom: var(--spacing-xl);
    }
    
    .cta-description {
        margin: 0 auto;
    }
    
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Footer */
    .footer-widget {
        margin-bottom: var(--spacing-xl);
    }
}

/* ==================== TABLET LANDSCAPE (768px - 991px) ==================== */
@media (max-width: 991px) {
    .container {
        max-width: 720px;
    }
    
    /* Top Bar */
    .header-top-bar {
        display: none;
    }
    
    /* Header */
    .main-header {
        padding: 0;
    }
    
    .navbar {
        padding: 10px 0;
    }
    
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 350px;
        height: 100vh;
        background: var(--white);
        padding: var(--spacing-xl);
        z-index: var(--z-modal);
        transition: left var(--transition-smooth);
        box-shadow: var(--shadow-2xl);
        overflow-y: auto;
    }
    
    .navbar-collapse.show {
        left: 0;
    }
    
    .navbar-collapse::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
        opacity: 0;
        transition: opacity var(--transition-smooth);
    }
    
    .navbar-collapse.show::before {
        opacity: 1;
    }
    
    .navbar-nav {
        gap: 2px;
        margin-bottom: var(--spacing-lg);
    }
    
    .navbar-nav .nav-link {
        font-size: 15px;
        padding: 10px 16px;
    }
    
    .search-wrapper {
        margin-bottom: var(--spacing-lg);
    }
    
    .search-dropdown {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding: 0;
    }
    
    .search-dropdown .search-input {
        width: 100%;
    }
    
    .header-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn-call-header,
    .btn-whatsapp-header {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
    
    .btn-call-header span,
    .btn-whatsapp-header span {
        display: inline;
    }
    
    /* Premium Dropdown Mobile */
    .premium-dropdown {
        min-width: auto;
        padding: var(--spacing-md);
        box-shadow: none;
        border: none;
        margin-top: 0;
    }
    
    .dropdown-grid {
        grid-template-columns: 1fr;
    }
    
    .dropdown-item {
        padding: 8px 12px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: var(--spacing-3xl) 0 var(--spacing-2xl);
    }
    
    .hero-title {
        font-size: 36px;
    }
    
    .hero-description {
        font-size: 15px;
    }
    
    .hero-search {
        flex-direction: column;
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
        border-radius: var(--radius-lg);
    }
    
    .search-icon {
        display: none;
    }
    
    .hero-search-input {
        width: 100%;
        text-align: center;
        padding: 12px;
    }
    
    .btn-search-cta {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    .hero-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary-hero,
    .btn-outline-hero {
        width: 100%;
        justify-content: center;
    }
    
    .trust-indicators {
        gap: var(--spacing-md);
    }
    
    .trust-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-xs);
    }
    
    .hero-visual {
        max-width: 350px;
    }
    
    .hero-illustration {
        min-height: 350px;
    }
    
    .technician-figure {
        width: 200px;
        height: 280px;
    }
    
    .floating-card {
        transform: scale(0.65);
    }
    
    .card-rating {
        top: 0;
        right: -50px;
    }
    
    .card-customers {
        bottom: 60px;
        right: -70px;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .service-card-inner {
        padding: var(--spacing-lg);
    }
    
    .service-card-title {
        font-size: 18px;
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .product-image-wrapper {
        height: 180px;
    }
    
    /* Why Choose Us */
    .why-choose-illustration {
        min-height: 350px;
    }
    
    .why-shield-icon {
        width: 150px;
        height: 150px;
        font-size: 60px;
    }
    
    .why-shield-icon::after {
        width: 180px;
        height: 180px;
    }
    
    .why-float {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    
    /* Promo Banner */
    .promo-banner {
        padding: var(--spacing-xl);
        text-align: center;
    }
    
    .promo-description {
        margin: 0 auto var(--spacing-lg);
    }
    
    .timer-digits {
        justify-content: center;
    }
    
    .promo-illustration {
        margin-top: var(--spacing-xl);
    }
    
    .promo-discount-circle {
        width: 120px;
        height: 120px;
    }
    
    .discount-percent {
        font-size: 30px;
    }
    
    .discount-text {
        font-size: 14px;
    }
    
    .promo-tech-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        bottom: 10px;
        right: 10px;
    }
    
    /* How It Works */
    .col-lg-15 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    /* Stats */
    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .stat-number,
    .stat-number-static {
        font-size: 32px;
    }
    
    /* Brands */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Service Areas */
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Testimonials */
    .testimonials-slider-wrapper {
        max-width: 100%;
    }
    
    .testimonial-next,
    .testimonial-prev {
        display: none;
    }
    
    /* FAQ */
    .faq-wrapper {
        max-width: 100%;
    }
    
    /* Blogs */
    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* CTA */
    .cta-wrapper {
        padding: var(--spacing-2xl) var(--spacing-xl);
    }
    
    .cta-title {
        font-size: 32px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-cta-primary,
    .btn-cta-outline,
    .btn-cta-whatsapp {
        width: 100%;
    }
    
    /* Footer */
    .footer-bottom-links {
        text-align: center;
        margin-top: var(--spacing-sm);
    }
}

/* ==================== TABLET PORTRAIT / LARGE MOBILE (576px - 767px) ==================== */
@media (max-width: 767px) {
    .container {
        max-width: 540px;
    }
    
    /* Section Headers */
    .section-header {
        margin-bottom: var(--spacing-2xl);
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section-description {
        font-size: 15px;
    }
    
    .section-badge {
        font-size: 12px;
        padding: 6px 14px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: var(--spacing-2xl) 0 var(--spacing-xl);
    }
    
    .hero-title {
        font-size: 30px;
    }
    
    .hero-description {
        font-size: 14px;
    }
    
    .hero-badge {
        font-size: 12px;
        padding: 6px 14px;
    }
    
    .hero-cta-buttons {
        gap: var(--spacing-sm);
    }
    
    .popular-services {
        gap: 6px;
    }
    
    .service-chip {
        font-size: 11px;
        padding: 4px 12px;
    }
    
    .trust-indicators {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .hero-visual {
        max-width: 300px;
    }
    
    .hero-illustration {
        min-height: 300px;
    }
    
    .technician-figure {
        width: 180px;
        height: 250px;
    }
    
    .tech-head {
        width: 60px;
        height: 70px;
        top: 15px;
    }
    
    .tech-cap {
        width: 55px;
        height: 28px;
    }
    
    .tech-face {
        width: 50px;
        height: 45px;
    }
    
    .tech-torso {
        width: 120px;
        height: 140px;
        top: 85px;
    }
    
    .tech-badge {
        font-size: 10px;
        padding: 4px 10px;
    }
    
    .tech-toolbox {
        width: 60px;
        height: 45px;
        font-size: 20px;
        bottom: 20px;
    }
    
    .floating-card {
        transform: scale(0.55);
    }
    
    .card-rating {
        top: -10px;
        right: -60px;
    }
    
    .card-customers {
        bottom: 50px;
        right: -80px;
    }
    
    .card-parts {
        bottom: 10px;
        left: -50px;
    }
    
    .card-service {
        top: 100px;
        left: -60px;
    }
    
    /* Services Grid */
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .service-card-inner {
        padding: var(--spacing-lg);
    }
    
    .service-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    
    .service-card-title {
        font-size: 17px;
    }
    
    .service-card-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .btn-service-book {
        width: 100%;
        justify-content: center;
    }
    
    /* Products Grid */
    .products-grid {
        grid-template-columns: 1fr;
    }
    
    .product-image-wrapper {
        height: 200px;
    }
    
    .product-footer {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: flex-start;
    }
    
    .btn-product-enquiry {
        width: 100%;
        text-align: center;
    }
    
    /* Why Choose Us */
    .why-choose-illustration {
        min-height: 280px;
    }
    
    .why-shield-icon {
        width: 120px;
        height: 120px;
        font-size: 48px;
    }
    
    .why-shield-icon::after {
        width: 150px;
        height: 150px;
    }
    
    .why-feature-item {
        flex-direction: column;
        text-align: center;
        padding: var(--spacing-md);
    }
    
    .why-feature-icon {
        margin: 0 auto;
    }
    
    .why-feature-item:hover {
        transform: translateY(-4px);
    }
    
    /* Promo Banner */
    .promo-banner {
        padding: var(--spacing-lg);
        border-radius: var(--radius-xl);
    }
    
    .promo-title {
        font-size: 24px;
    }
    
    .promo-description {
        font-size: 14px;
    }
    
    .timer-number {
        font-size: 24px;
        min-width: 48px;
        padding: 6px 8px;
    }
    
    .timer-separator {
        font-size: 24px;
    }
    
    .timer-unit {
        font-size: 10px;
    }
    
    .btn-promo-cta {
        width: 100%;
        justify-content: center;
        font-size: 14px;
        padding: 14px 24px;
    }
    
    .promo-discount-circle {
        width: 100px;
        height: 100px;
    }
    
    .discount-percent {
        font-size: 26px;
    }
    
    .discount-text {
        font-size: 12px;
    }
    
    .promo-tech-icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    
    /* How It Works */
    .col-lg-15 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .timeline-step {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        text-align: left;
        padding: var(--spacing-md);
    }
    
    .step-number-wrapper {
        width: 70px;
        height: 70px;
        min-width: 70px;
        margin: 0;
    }
    
    .step-icon {
        font-size: 26px;
    }
    
    .step-number {
        width: 26px;
        height: 26px;
        font-size: 10px;
        top: -8px;
        right: -8px;
    }
    
    .step-content-wrapper {
        flex: 1;
    }
    
    /* Stats */
    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .stat-number,
    .stat-number-static {
        font-size: 28px;
    }
    
    .stat-icon-wrapper {
        width: 52px;
        height: 52px;
        font-size: 22px;
    }
    
    .stat-label {
        font-size: 12px;
    }
    
    /* Brands */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
    
    .brand-card {
        padding: var(--spacing-md);
    }
    
    .brand-icon {
        font-size: 28px;
    }
    
    .brand-card span {
        font-size: 12px;
    }
    
    /* Service Areas */
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .area-card-inner {
        padding: var(--spacing-lg);
    }
    
    .area-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }
    
    .area-card-inner h3 {
        font-size: 15px;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: var(--spacing-lg);
    }
    
    .testimonial-text {
        font-size: 14px;
    }
    
    /* FAQ */
    .premium-accordion .accordion-button {
        font-size: 14px;
        padding: 16px 20px;
    }
    
    .premium-accordion .accordion-body {
        font-size: 13px;
        padding: 16px 20px;
    }
    
    /* Blogs */
    .blogs-grid {
        grid-template-columns: 1fr;
    }
    
    .blog-image-wrapper {
        height: 180px;
    }
    
    .blog-title {
        font-size: 16px;
    }
    
    /* CTA */
    .cta-wrapper {
        padding: var(--spacing-xl);
        border-radius: var(--radius-xl);
    }
    
    .cta-title {
        font-size: 26px;
    }
    
    .cta-description {
        font-size: 14px;
    }
    
    /* Footer */
    .footer-top {
        padding: var(--spacing-3xl) 0 var(--spacing-xl);
    }
    
    .footer-widget-title {
        font-size: 15px;
        margin-bottom: var(--spacing-md);
    }
    
    .footer-links a {
        font-size: 13px;
    }
    
    .footer-about-text {
        font-size: 13px;
    }
    
    .footer-contact li {
        font-size: 13px;
    }
    
    .copyright-text {
        font-size: 12px;
        text-align: center;
    }
    
    .footer-bottom-links {
        font-size: 12px;
        text-align: center;
    }
    
    /* Back to Top */
    .back-to-top {
        bottom: 90px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* ==================== SMALL MOBILE (<576px) ==================== */
@media (max-width: 575px) {
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Section Headers */
    .section-title {
        font-size: 24px;
    }
    
    .section-description {
        font-size: 14px;
    }
    
    .section-badge {
        font-size: 11px;
        padding: 5px 12px;
    }
    
    /* Header */
    .logo-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .logo-name {
        font-size: 18px;
    }
    
    .logo-subtitle {
        font-size: 10px;
        letter-spacing: 2px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: var(--spacing-xl) 0 var(--spacing-lg);
    }
    
    .hero-title {
        font-size: 26px;
    }
    
    .hero-description {
        font-size: 13px;
    }
    
    .hero-badge {
        font-size: 11px;
        padding: 5px 12px;
        margin-bottom: var(--spacing-md);
    }
    
    .badge-icon {
        font-size: 14px;
    }
    
    .badge-dot {
        width: 6px;
        height: 6px;
    }
    
    .hero-search-input {
        font-size: 13px;
        padding: 10px;
    }
    
    .btn-search-cta {
        font-size: 13px;
        padding: 12px 20px;
    }
    
    .hero-cta-buttons {
        gap: var(--spacing-sm);
    }
    
    .btn-primary-hero,
    .btn-outline-hero {
        font-size: 14px;
        padding: 14px 24px;
    }
    
    .popular-services {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .popular-label {
        font-size: 11px;
    }
    
    .service-chip {
        font-size: 11px;
        padding: 4px 10px;
    }
    
    .trust-indicators {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .trust-icon-wrapper {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .trust-number {
        font-size: 14px;
    }
    
    .trust-label {
        font-size: 10px;
    }
    
    .trust-stars {
        font-size: 9px;
    }
    
    .hero-visual {
        max-width: 250px;
    }
    
    .hero-illustration {
        min-height: 250px;
    }
    
    .technician-figure {
        width: 150px;
        height: 210px;
    }
    
    .tech-head {
        width: 50px;
        height: 58px;
        top: 10px;
    }
    
    .tech-cap {
        width: 44px;
        height: 22px;
    }
    
    .tech-face {
        width: 40px;
        height: 38px;
    }
    
    .tech-torso {
        width: 100px;
        height: 115px;
        top: 70px;
        border-radius: 22px 22px 16px 16px;
    }
    
    .tech-badge {
        font-size: 9px;
        padding: 3px 8px;
    }
    
    .tech-toolbox {
        width: 50px;
        height: 38px;
        font-size: 16px;
        bottom: 15px;
    }
    
    .floating-card {
        transform: scale(0.45);
    }
    
    .card-rating {
        top: -20px;
        right: -70px;
    }
    
    .card-customers {
        bottom: 40px;
        right: -90px;
    }
    
    .card-parts {
        bottom: 0;
        left: -60px;
    }
    
    .card-service {
        top: 80px;
        left: -70px;
    }
    
    /* Services Section */
    .services-grid {
        gap: var(--spacing-md);
    }
    
    .service-card-inner {
        padding: var(--spacing-md);
    }
    
    .service-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }
    
    .service-card-title {
        font-size: 16px;
    }
    
    .service-card-description {
        font-size: 13px;
    }
    
    .service-price {
        font-size: 14px;
    }
    
    .btn-service-book {
        font-size: 12px;
        padding: 8px 14px;
    }
    
    .btn-view-all {
        font-size: 14px;
        padding: 12px 24px;
    }
    
    /* Why Choose Us */
    .why-choose-illustration {
        min-height: 220px;
    }
    
    .why-shield-icon {
        width: 100px;
        height: 100px;
        font-size: 38px;
    }
    
    .why-shield-icon::after {
        width: 125px;
        height: 125px;
    }
    
    .why-float {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    
    .why-feature-item {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    
    .why-feature-icon {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }
    
    .why-feature-text h4 {
        font-size: 15px;
    }
    
    .why-feature-text p {
        font-size: 13px;
    }
    
    /* Promo Banner */
    .promo-banner {
        padding: var(--spacing-md);
    }
    
    .promo-title {
        font-size: 22px;
    }
    
    .promo-description {
        font-size: 13px;
    }
    
    .timer-digits {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .timer-number {
        font-size: 20px;
        min-width: 40px;
        padding: 5px 6px;
    }
    
    .timer-separator {
        font-size: 20px;
    }
    
    .timer-unit {
        font-size: 9px;
    }
    
    .btn-promo-cta {
        width: 100%;
        justify-content: center;
        font-size: 13px;
        padding: 12px 20px;
    }
    
    .promo-discount-circle {
        width: 80px;
        height: 80px;
    }
    
    .discount-percent {
        font-size: 22px;
    }
    
    .discount-text {
        font-size: 10px;
    }
    
    .promo-tech-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        bottom: 5px;
        right: 5px;
    }
    
    /* Products */
    .product-image-wrapper {
        height: 160px;
    }
    
    .product-placeholder-icon {
        font-size: 50px;
    }
    
    .product-info {
        padding: var(--spacing-md);
    }
    
    .product-name {
        font-size: 15px;
    }
    
    .product-price {
        font-size: 18px;
    }
    
    .product-price small {
        font-size: 12px;
    }
    
    .btn-product-enquiry {
        font-size: 12px;
        padding: 8px 16px;
    }
    
    /* How It Works */
    .timeline-step {
        gap: var(--spacing-md);
        padding: var(--spacing-sm);
    }
    
    .step-number-wrapper {
        width: 56px;
        height: 56px;
        min-width: 56px;
    }
    
    .step-icon {
        font-size: 22px;
    }
    
    .step-number {
        width: 22px;
        height: 22px;
        font-size: 9px;
        top: -6px;
        right: -6px;
    }
    
    .step-title {
        font-size: 14px;
    }
    
    .step-description {
        font-size: 12px;
    }
    
    /* Stats */
    .col-lg-2-4 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 0 8px;
    }
    
    .stat-item {
        padding: var(--spacing-sm);
    }
    
    .stat-number,
    .stat-number-static {
        font-size: 24px;
    }
    
    .stat-plus {
        font-size: 18px;
    }
    
    .stat-star {
        font-size: 16px;
    }
    
    .stat-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    
    .stat-label {
        font-size: 11px;
    }
    
    /* Brands */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .brand-card {
        padding: var(--spacing-sm);
    }
    
    .brand-icon {
        font-size: 24px;
        margin-bottom: 4px;
    }
    
    .brand-card span {
        font-size: 11px;
    }
    
    /* Testimonials */
    .testimonial-card {
        padding: var(--spacing-md);
    }
    
    .testimonial-header {
        flex-wrap: wrap;
    }
    
    .testimonial-avatar {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .testimonial-user h4 {
        font-size: 14px;
    }
    
    .testimonial-user span {
        font-size: 11px;
    }
    
    .testimonial-platform {
        font-size: 16px;
    }
    
    .testimonial-stars {
        font-size: 13px;
    }
    
    .testimonial-text {
        font-size: 13px;
    }
    
    /* Service Areas */
    .areas-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .area-card-inner {
        padding: var(--spacing-md);
    }
    
    .area-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .area-card-inner h3 {
        font-size: 14px;
    }
    
    .area-status {
        font-size: 10px;
        padding: 3px 10px;
    }
    
    /* FAQ */
    .premium-accordion .accordion-button {
        font-size: 13px;
        padding: 14px 16px;
    }
    
    .premium-accordion .accordion-body {
        font-size: 12px;
        padding: 14px 16px;
    }
    
    /* Blogs */
    .blog-image-wrapper {
        height: 150px;
    }
    
    .blog-placeholder-icon {
        font-size: 45px;
    }
    
    .blog-content {
        padding: var(--spacing-md);
    }
    
    .blog-meta {
        font-size: 11px;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
    .blog-title {
        font-size: 14px;
    }
    
    .blog-excerpt {
        font-size: 12px;
    }
    
    .blog-read-more {
        font-size: 13px;
    }
    
    /* CTA */
    .cta-wrapper {
        padding: var(--spacing-lg);
    }
    
    .cta-title {
        font-size: 22px;
    }
    
    .cta-description {
        font-size: 13px;
    }
    
    .btn-cta-primary,
    .btn-cta-outline,
    .btn-cta-whatsapp {
        font-size: 14px;
        padding: 12px 20px;
    }
    
    /* Footer */
    .footer-top {
        padding: var(--spacing-2xl) 0 var(--spacing-lg);
    }
    
    .footer-logo .logo-name {
        font-size: 18px;
    }
    
    .footer-widget-title {
        font-size: 14px;
    }
    
    .footer-links a,
    .footer-contact li {
        font-size: 12px;
    }
    
    .footer-about-text {
        font-size: 12px;
    }
    
    .footer-social a {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }
    
    .newsletter-input {
        font-size: 12px;
        padding: 10px 44px 10px 14px;
    }
    
    .newsletter-btn {
        width: 32px;
        height: 32px;
        right: 3px;
        top: 3px;
    }
    
    .copyright-text {
        font-size: 11px;
    }
    
    .footer-bottom-links {
        font-size: 11px;
    }
    
    /* Back to Top */
    .back-to-top {
        bottom: 80px;
        right: 16px;
        width: 38px;
        height: 38px;
        font-size: 14px;
    }
    
    /* Mobile Bottom Bar */
    .mobile-bottom-bar {
        padding: 6px 8px;
        gap: 6px;
    }
    
    .mobile-bar-btn {
        font-size: 12px;
        padding: 10px 6px;
        gap: 4px;
    }
    
    .mobile-bar-btn i {
        font-size: 14px;
    }
}

/* ==================== EXTRA SMALL MOBILE (<400px) ==================== */
@media (max-width: 399px) {
    /* Hero */
    .hero-title {
        font-size: 22px;
    }
    
    .hero-badge {
        font-size: 10px;
        padding: 4px 10px;
    }
    
    .hero-search-input {
        font-size: 12px;
    }
    
    .btn-search-cta {
        font-size: 12px;
        padding: 10px 16px;
    }
    
    .btn-primary-hero,
    .btn-outline-hero {
        font-size: 13px;
        padding: 12px 20px;
    }
    
    .trust-indicators {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }
    
    .trust-number {
        font-size: 13px;
    }
    
    .trust-label {
        font-size: 9px;
    }
    
    .hero-visual {
        max-width: 200px;
    }
    
    .technician-figure {
        width: 130px;
        height: 180px;
    }
    
    .tech-head {
        width: 42px;
        height: 50px;
    }
    
    .tech-cap {
        width: 36px;
        height: 18px;
    }
    
    .tech-face {
        width: 34px;
        height: 32px;
    }
    
    .tech-torso {
        width: 85px;
        height: 100px;
        top: 60px;
    }
    
    .tech-badge {
        font-size: 8px;
        padding: 2px 6px;
    }
    
    .tech-toolbox {
        width: 42px;
        height: 32px;
        font-size: 14px;
        bottom: 12px;
    }
    
    .floating-card {
        transform: scale(0.38);
    }
    
    /* Section Titles */
    .section-title {
        font-size: 22px;
    }
    
    /* Services */
    .service-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .service-card-title {
        font-size: 15px;
    }
    
    /* Stats */
    .stat-number,
    .stat-number-static {
        font-size: 20px;
    }
    
    .stat-icon-wrapper {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    
    /* Brands */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Areas */
    .areas-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    /* CTA */
    .cta-title {
        font-size: 20px;
    }
}

/* ==================== LANDSCAPE MODE ON MOBILE ==================== */
@media (max-width: 991px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }
    
    .hero-illustration {
        min-height: 250px;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .navbar-collapse {
        width: 60%;
        max-width: 320px;
    }
}

/* ==================== HIGH DPI SCREENS (RETINA) ==================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-icon {
        -webkit-font-smoothing: antialiased;
    }
    
    .gradient-text {
        -webkit-font-smoothing: antialiased;
    }
}

/* ==================== DARK MODE PREFERENCES ==================== */
@media (prefers-color-scheme: dark) {
    /* Future dark mode support placeholder */
    /* Currently maintaining light theme as per design requirements */
}

/* ==================== REDUCED MOTION PREFERENCES ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .floating-icon,
    .floating-card,
    .shape {
        animation: none !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .header-top-bar,
    .main-header,
    .mobile-bottom-bar,
    .back-to-top,
    .hero-wave-divider,
    .hero-bg-shapes,
    .floating-icon,
    .floating-card,
    .promo-timer,
    .swiper-button-next,
    .swiper-button-prev,
    .swiper-pagination {
        display: none !important;
    }
    
    .hero-section {
        background: none !important;
        min-height: auto;
        padding: 20px 0;
    }
    
    .gradient-text {
        -webkit-text-fill-color: var(--text-primary);
        background: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    .section-title,
    .service-card-title,
    .product-name,
    .blog-title {
        color: #000;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ==================== TOUCH DEVICE OPTIMIZATIONS ==================== */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets */
    .navbar-nav .nav-link,
    .dropdown-item {
        padding: 12px 16px;
    }
    
    .btn-call-header,
    .btn-whatsapp-header {
        padding: 12px 16px;
    }
    
    /* Disable hover animations on touch */
    .service-card-inner:hover,
    .product-card-inner:hover,
    .blog-card-inner:hover,
    .area-card-inner:hover {
        transform: none;
    }
    
    /* Show hover states as active states */
    .service-card-inner:active,
    .product-card-inner:active,
    .blog-card-inner:active {
        transform: scale(0.98);
    }
}

/* ==================== SAFE AREA INSETS (iPhone X+) ==================== */
@supports (padding: max(0px)) {
    .mobile-bottom-bar {
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    
    .back-to-top {
        bottom: max(90px, calc(env(safe-area-inset-bottom) + 60px));
    }
}

/* ==================== BOOTSTRAP OVERRIDES FOR RESPONSIVE ==================== */
@media (max-width: 991px) {
    .navbar-collapse.collapse:not(.show) {
        display: block;
        left: -100%;
    }
    
    .navbar-collapse.collapse.show {
        left: 0;
    }
    
    .navbar-collapse.collapsing {
        height: 100vh !important;
        transition: left var(--transition-smooth);
        left: -100%;
    }
}