/* ==========================================================================
   NanoRa Technologies — Responsive Stylesheet
   Contains ONLY breakpoint-specific overrides. Base styles live in style.css.
   Breakpoints: 1600 / 1400 / 1200 / 992 (desktop/tablet, unchanged)
                768 (single mobile source of truth, consolidated below)
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤1600px — Large desktop
   -------------------------------------------------------------------------- */
@media (max-width: 1600px) {
  .container { max-width: 1140px; }
}

/* --------------------------------------------------------------------------
   ≤1400px — Small desktop / large laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .container { max-width: 1020px; }
  .tech-grid { grid-template-columns: repeat(6, 1fr); }
}

/* --------------------------------------------------------------------------
   ≤1200px — Laptop
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .container { max-width: 920px; padding: 0 24px; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .projects-grid { grid-template-columns: repeat(2, 1fr); }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    row-gap: 40px;
  }
}

/* --------------------------------------------------------------------------
   ≤992px — Tablet: nav collapses, hero stacks (unchanged, not a phone layout)
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  section { padding: 90px 0; }

  .nav-links {
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 12px 24px 24px;
    background: rgba(6, 8, 22, 0.97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s var(--ease);
  }
  .nav-links.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav-links a { width: 100%; padding: 14px 0; border-bottom: 1px solid var(--border); }
  .navbar-actions .btn-sm { display: none; }
  .hamburger { display: flex; }

  .hero-inner { grid-template-columns: 1fr; text-align: center; row-gap: 44px; }
  .hero-right { order: -1; }
  .hero-left { order: 2; }
  .hero-desc { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .hero-visual { max-width: 420px; margin: 0 auto; }
  .fc-1, .fc-2, .fc-3 { left: 0; right: 0; }
  .fc-1 { top: 4%; left: 4%; }
  .fc-2 { bottom: 18%; right: 4%; }
  .fc-3 { display: none; }
  .code-block { right: 4%; }

  .about-inner, .why-inner { grid-template-columns: 1fr; gap: 50px; }
  .about-image, .why-image { order: 1; }
  .about-content, .why-content { order: 2; text-align: center; }
  .why-list li { text-align: left; }
  .about-glass { position: static; margin-top: 24px; width: 100%; }
  .about-counters { justify-content: center; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .tech-grid { grid-template-columns: repeat(4, 1fr); }
  .projects-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ≤768px — MOBILE (single source of truth for phone layout)
   Desktop (>768px) is completely untouched above this point.
   Every mobile-specific rule for every section lives in this one block.
   ========================================================================== */
@media (max-width: 768px) {

  .container { padding: 0 20px; }

  /* ---- Global rhythm ---- */
  section { padding: 56px 0; }
  .section-header { margin-bottom: 36px; }
  .section-desc { font-size: 15px; }

  /* ---- Performance: cheapest possible background on mobile ---- */
  .blob { filter: blur(55px); opacity: 0.22; }
  .blob-1, .blob-2, .blob-3 { animation: none; }

  /* ---- Hero: desktop hero fully replaced by immersive mobile hero ---- */
  .hero { padding-top: 0; align-items: stretch; min-height: 0; }
  .hero-inner { display: none; }
  .scroll-indicator { display: none; }

  .hero-mobile {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
  }
  .hero-mobile-bg { position: absolute; inset: 0; }
  .hero-mobile-img { width: 100%; height: 100%; object-fit: cover; }
  .hero-mobile-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,8,22,0.25) 0%, rgba(6,8,22,0.55) 50%, rgba(6,8,22,0.97) 94%);
  }
  .hero-mobile-content {
    position: relative;
    z-index: 2;
    padding: 24px 20px calc(30px + env(safe-area-inset-bottom, 0px));
  }
  .hero-mobile-content .badge { margin-bottom: 14px; font-size: 12.5px; padding: 8px 14px; }
  .hero-mobile-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(28px, 8vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1.16;
    margin-bottom: 12px;
  }
  .hero-mobile-desc {
    color: var(--subtext);
    font-size: 15px;
    margin-bottom: 20px;
    max-width: 440px;
  }
  .hero-mobile-cta .btn { width: 100%; justify-content: center; }

  /* ---- Trust bar ---- */
  .trust-bar { padding: 28px 0; }

  /* ---- About / Why Us ---- */
  .about-inner, .why-inner { grid-template-columns: 1fr; gap: 34px; }
  .about-image, .why-image { order: 1; }
  .about-content, .why-content { order: 2; text-align: center; }
  .why-list li { text-align: left; }
  .about-img-main, .why-img { height: 300px; }
  .about-glass { position: static; margin-top: 20px; width: 100%; }
  .about-counters { justify-content: center; grid-template-columns: repeat(2, auto); gap: 18px; margin: 22px 0; }

  /* ---- Services: compact 3-col icon+title, tap opens bottom sheet ---- */
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    max-width: none;
    margin: 0;
  }
  .service-card {
    padding: 18px 10px;
    text-align: center;
    border-radius: var(--radius-md);
    cursor: pointer;
  }
  .service-card p,
  .service-card .card-link { display: none; }
  .service-icon {
    width: 44px; height: 44px;
    margin: 0 auto 10px;
    font-size: 17px;
    border-radius: 12px;
  }
  .service-card h3 { font-size: 12.5px; margin-bottom: 0; line-height: 1.3; }
  .service-card:hover { transform: none; box-shadow: none; }
  .service-card:active { transform: scale(0.96); }

  .service-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .service-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
  .service-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(6,8,22,0.7);
    backdrop-filter: blur(4px);
  }
  .service-modal-sheet {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: var(--card-solid);
    border: 1px solid var(--border);
    border-radius: 24px 24px 0 0;
    padding: 14px 26px calc(30px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.35s var(--ease);
  }
  .service-modal.active .service-modal-sheet { transform: translateY(0); }
  .service-modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 0 auto 20px; }
  .service-modal-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--grad-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
  }
  .service-modal-sheet h3 { font-size: 19px; margin-bottom: 10px; }
  .service-modal-sheet p { color: var(--subtext); font-size: 14.5px; margin-bottom: 22px; }

  /* ---- Why Choose Us ---- */
  .check-anim { width: 30px; height: 30px; font-size: 12px; }

  /* ---- Process: compact 3-col grid, icon+title only ---- */
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: none; margin: 0; }
  .timeline-item { padding: 14px 8px; }
  .timeline-icon { width: 38px; height: 38px; font-size: 15px; margin: 0 auto 10px; }
  .timeline-item h4 { font-size: 11px; margin-bottom: 0; }
  .timeline-item p { display: none; }

  /* ---- Technology stack: 3-col, tighter padding ---- */
  .tech-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .tech-item { padding: 18px 8px; }
  .tech-item i { font-size: 24px; margin-bottom: 6px; }
  .tech-item span { font-size: 11px; }

  /* ---- Projects: image stays dominant, card shrinks around it ---- */
  .projects-grid { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
  .project-img-wrap { height: 200px; }
  .project-info { padding: 16px 18px; }
  .project-info h4 { font-size: 15.5px; margin-bottom: 4px; }
  .project-info p { font-size: 13px; }
  .project-badge { padding: 5px 12px; font-size: 11px; }

  /* ---- Testimonials: touch-drag swipe, comfortable card ---- */
  .testimonial-slider { touch-action: pan-y; }
  .testimonial-card { padding: 26px 20px; cursor: grab; }
  .testimonial-card p { font-size: 16px; margin-bottom: 20px; }
  .testimonial-dots { margin-top: 22px; }

  /* ---- Stats ---- */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-box { padding: 22px 12px; }
  .stat-box h3 { font-size: 28px; }

  /* ---- FAQ ---- */
  .faq-list { gap: 10px; }
  .faq-question { padding: 18px 20px; font-size: 14.5px; }
  .faq-answer p { padding: 0 20px 18px; }

  /* ---- Contact CTA ---- */
  .cta-inner { padding: 46px 20px; }

  /* ---- Footer ---- */
  .footer { padding: 56px 0 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; padding-bottom: 40px; text-align: center; }
  .footer-brand p { margin-left: auto; margin-right: auto; }
  .social-links { justify-content: center; }
  .footer-col a:hover { transform: none; }
  .newsletter-form { max-width: 340px; margin: 0 auto; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

  /* ---- Misc ---- */
  .back-to-top { width: 42px; height: 42px; bottom: 20px; right: 20px; }
}

/* --------------------------------------------------------------------------
   ≤320px — Extra small mobile, minor type/grid clamps only
   -------------------------------------------------------------------------- */
@media (max-width: 320px) {
  .container { padding: 0 16px; }
  .section-title { font-size: 26px; }
  .about-counters { grid-template-columns: 1fr 1fr; gap: 14px; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
}


@media (max-width:768px){

    .logo-img{
        height:40px;
    }

}

@media (max-width:420px){

    .logo-img{
        height:34px;
    }

}


/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .breadcrumb-list {
    font-size: 11.5px;
    gap: 8px;
    margin-bottom: 16px;
  }
  .breadcrumb-list li {
    gap: 8px;
  }
  .breadcrumb-bar--bare {
    padding: 100px 0 2px;
  }
}