/* ============================================================
   RESPONSIVE STYLES - Optimized for Modern Design
   ============================================================ */

/* ---------- Mobile First (max-width: 576px) ---------- */
@media only screen and (max-width: 576px) {
    .wn-hero h1 {
        font-size: 24px;
    }

    .wn-hero-lead {
        font-size: 14px;
    }

    .wn-hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .wn-hero-actions .wn-btn {
        width: 100%;
        justify-content: center;
    }

    .wn-hero-stats {
        flex-direction: column;
        gap: 10px;
    }

    .wn-services-grid,
    .wn-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .wn-section-header h2 {
        font-size: 22px;
    }

    .wn-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .wn-mockup-body {
        grid-template-columns: 1fr;
    }

    .wn-float-card {
        display: none;
    }

    /* Legacy support */
    .main-banner .hero-content h1 {
        font-size: 26px;
    }

    .section-title h2 {
        font-size: 22px;
    }

    .contact-info-box {
        margin-bottom: 20px;
    }
}

/* ---------- Small Mobile (max-width: 767px) ---------- */
@media only screen and (max-width: 767px) {
    .wn-hero {
        padding: 50px 0 60px;
    }

    .wn-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .wn-hero-badge {
        display: inline-flex;
    }

    .wn-hero-actions,
    .wn-hero-stats {
        justify-content: center;
    }

    .wn-hero-visual {
        max-width: 480px;
        margin: 0 auto;
    }

    .wn-section {
        padding: 60px 0;
    }

    .wn-section-header {
        margin-bottom: 40px;
    }

    .wn-menu {
        display: none !important;
    }

    .wn-burger {
        display: flex !important;
    }

    .wn-header-actions .wn-btn-cta {
        display: none;
    }

    .wn-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }

    .wn-footer-bottom {
        margin-top: 40px;
    }

    /* Legacy support */
    .btn {
        font-size: 14px;
        padding: 14px 27px;
    }

    .ptb-100 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .section-title {
        margin-bottom: 40px;
    }

    .section-title h2 {
        font-size: 24px;
    }

    .main-banner {
        height: 100%;
        padding-top: 120px;
        padding-bottom: 80px;
    }

    .main-banner .hero-content h1 {
        font-size: 28px;
    }

    .main-banner .app-image {
        margin-top: 30px;
        text-align: center;
    }

    .main-banner .app-image img {
        max-width: 200px;
    }

    .partner-area {
        padding: 30px 0;
    }

    .features-area .row {
        text-align: center;
    }

    .single-features-box {
        margin-bottom: 30px;
    }

    .how-app-work .row {
        text-align: center;
    }

    .single-app-works {
        margin-bottom: 30px;
    }

    .contact-info-box {
        text-align: center;
        padding: 20px;
    }

    .footer-area .row {
        text-align: center;
    }

    .single-footer-widget {
        margin-bottom: 30px;
    }

    .copyright-area {
        text-align: center;
    }

    .copyright-area ul {
        justify-content: center;
        margin-top: 15px;
    }

    /* Hide desktop nav, show mobile */
    .crake-nav {
        display: none !important;
    }

    .crake-mobile-nav {
        display: block !important;
    }

    /* Tab Services - Mobile */
    .tab {
        padding: 20px 15px;
        overflow: visible;
    }

    .tab .tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
        margin-bottom: 30px;
    }

    .tab .tabs li {
        flex: none;
        max-width: 100%;
        padding: 0;
    }

    .tab .tabs li:first-child {
        padding-left: 0;
        padding-right: 0;
    }

    .tab .tabs li:last-child {
        padding-right: 0;
    }

    .tab .tabs li a {
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 15px 8px;
        background: #f8f9fa;
        border-radius: 10px;
        border: 1px solid #eee;
        transition: 0.3s;
    }

    .tab .tabs li a i {
        width: 44px;
        height: 44px;
        line-height: 44px;
        font-size: 20px;
        margin-bottom: 0;
    }

    .tab .tabs li a:hover,
    .tab .tabs li.current a {
        background: rgba(0, 143, 131, 0.08);
        border-color: #13c4a1;
        color: #13c4a1;
    }

    /* Project grid */
    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Tablet (768px - 991px) ---------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .wn-hero-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .wn-hero-actions,
    .wn-hero-stats {
        justify-content: center;
    }

    .wn-hero-visual {
        max-width: 500px;
        margin: 0 auto;
    }

    .wn-services-grid,
    .wn-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .wn-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Tab Services - Tablet */
    .tab .tabs {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tab .tabs li {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }

    div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Legacy support */
    .main-banner .hero-content h1 {
        font-size: 34px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .partner-area {
        padding: 40px 0;
    }

    .features-area .features-inner-area {
        padding: 50px 0;
    }
}

/* ---------- Desktop (992px - 1199px) ---------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .wn-hero-inner {
        gap: 40px;
    }

    .wn-services-grid,
    .wn-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .wn-footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Legacy support */
    .main-banner .hero-content h1 {
        font-size: 40px;
    }

    .section-title h2 {
        font-size: 34px;
    }
}

/* ---------- Large Desktop (1200px - 1350px) ---------- */
@media only screen and (min-width: 1200px) and (max-width: 1350px) {
    .wn-hero-inner {
        gap: 50px;
    }

    .wn-services-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .wn-stats-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .wn-footer-grid {
        grid-template-columns: 1.2fr 1fr 1fr 1fr !important;
    }
}

/* ---------- Ultra Wide (min-width: 1910px) ---------- */
@media only screen and (min-width: 1910px) {
    .container {
        max-width: 1400px;
    }

    .wn-hero h1 {
        font-size: 60px;
    }
}

/* ---------- Print Styles ---------- */
@media print {
    .wn-header,
    .wn-footer,
    .whatsapp,
    .back-to-top,
    .preloader-area {
        display: none !important;
    }

    .wn-hero {
        padding: 20px 0;
    }

    .wn-section {
        padding: 20px 0;
    }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .wn-float-card,
    .wn-mockup-chart span,
    .wn-hero-badge .pulse {
        animation: none !important;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}