@media(max-width: 768px) {
    .nav-links-menu {
        display: none;
    }
}

@media(max-width:900px) {
  .story-inner,
  .subs-grid,
  .testi-grid {
    grid-template-columns: 1fr
  }
  .story-inner {
    gap: 48px
  }
  .values-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:768px) {
  .stats-bar,
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  .page-hero {
    padding: calc(var(--nav-h)+48px) 20px 60px
  }
  .cta-banner,
  .story-section,
  .subs-section,
  .testi-section,
  .values-section {
    padding: 60px 20px
  }
  .stats-bar-inner {
    grid-template-columns: 1fr 1fr
  }
  .stat-cell:nth-child(2) {
    border-right: none
  }
  .values-grid {
    grid-template-columns: 1fr
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media (max-width:1024px) {
  .featured-post {
    grid-template-columns: 1fr
  }
  .featured-image {
    min-height: 240px
  }
  .posts-grid {
    grid-template-columns: repeat(2,1fr)
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }
  .newsletter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px
  }
}

@media (max-width:768px) {
  .filter-bar,
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  .page-header {
    padding: calc(var(--nav-h) + 48px) 20px 56px
  }
  .blog-section {
    padding: 48px 20px 72px
  }
  .featured-content {
    padding: 32px 28px
  }
  .footer-top,
  .posts-grid {
    grid-template-columns: 1fr
  }
  .newsletter-strip {
    padding: 48px 0;
  }
  .newsletter-input {
    width: 100%
  }
  .cta-banner {
    padding: 56px 20px
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }
}

@media(max-width:768px) {
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  .page-hero {
    padding: calc(var(--nav-h)+48px) 20px 56px
  }
  .main-section,
  .offices-section {
    padding: 56px 20px
  }
  .offices-grid {
    grid-template-columns: 1fr
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media (max-width:1024px) {
  .hero-inner,
  .nearshore-grid {
    grid-template-columns: 1fr
  }
  .hero-visual {
    display: none
  }
  .nearshore-grid {
    gap: 40px
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px
  }
}

@media (max-width:768px) {
  .trust-bar,
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  section {
    padding: 64px 20px
  }
  .hero {
    padding: calc(var(--nav-h) + -15px) 0px 39px;
  }
  .trust-bar-inner {
    grid-template-columns: repeat(2,1fr)
  }
  .trust-item:nth-child(2) {
    border-right: none
  }
  .footer-top,
  .services-grid,
  .testi-grid {
    grid-template-columns: 1fr
  }
  .verso-inner {
    flex-direction: column;
    align-items: flex-start
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center
  }
}

@media(max-width:1024px) {
  .main-inner {
    grid-template-columns: 1fr
  }
  .form-wrap {
    position: static
  }
  .coverage-grid,
  .delivery-grid,
  .global-grid,
  .page-hero-inner {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .comparison-visual {
    display: none
  }
}

@media(max-width:768px) {
  .footer-top,
  .stats-bar-inner {
    grid-template-columns: 1fr 1fr
  }
  .stats-bar,
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  .cta-banner,
  section {
    padding: 60px 20px
  }
  .page-hero {
    padding: calc(var(--nav-h)+48px) 20px 60px
  }
  .stat-cell:nth-child(2) {
    border-right: none
  }
  .footer-top {
    gap: 28px
  }
}

@media(max-width:900px) {
  .section-grid,
  .section-grid.reverse {
    grid-template-columns: 1fr;
    direction: ltr;
    gap: 40px
  }
  .qa-metrics {
    grid-template-columns: 1fr
  }
}

@media(max-width:768px) {
  .main-layout,
  .service-section,
  .testi-section {
    padding: 56px 20px
  }
  .partner-types-bar {
    padding: 16px 20px
  }
  .proof-stats {
    grid-template-columns: 1fr 1fr
  }
  .testi-grid {
    grid-template-columns: 1fr
  }
  .service-tabs,
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  .page-hero {
    padding: calc(var(--nav-h)+48px) 20px 56px
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
  .cta-banner {
    padding: 60px 20px
  }
}

@media(max-width:1024px) {
  .main-inner,
  .vp-grid {
    grid-template-columns: 1fr
  }
  .form-wrap {
    position: static
  }
  .hero-inner,
  .origin-inner {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .verso-visual {
    display: none
  }
  .features-grid,
  .who-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:768px) {
  nav {
    padding: 0 20px
  }
  /* .nav-links display hidden rule removed */
  /* .hero {
    padding: calc(var(--nav-h)+48px) 20px 60px
  } */
  .cta-section,
  .features-section,
  .origin-section,
  .who-section {
    padding: 60px 20px
  }
  .features-grid,
  .who-grid {
    grid-template-columns: 1fr
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px
  }
}

@media (max-width: 768px) {
    .single-post-hero .post-title {
        font-size: 2rem;
    }
}
/* ==========================================
   UNIFIED MOBILE RESPONSIVENESS OVERRIDES
   ========================================== */

/* Navbar Mobile Toggle Button & Layering */
nav.navbar {
  z-index: 2000 !important; /* Bring header and dropdown to the very front */
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
  z-index: 2001;
}

.mobile-menu-toggle .hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--white);
  transition: all 0.3s ease;
  border-radius: 2px;
}

/* Micro-animations for Hamburger to X transformation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 991px) {
  nav.navbar {
    z-index: 2000 !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }
  
  .navbar > .container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
  }
  
  .nav-links {
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--navy) !important;
    padding: 24px 20px !important;
    border-bottom: 2px solid var(--blue);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    z-index: 1999 !important; /* Place just below navbar toggler but above page content */
    gap: 16px;
    margin: 0;
  }
  
  .nav-links.active {
    display: flex !important;
  }
  
  .nav-links-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin-right: 0 !important;
    gap: 8px !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  .nav-links-menu li {
    width: 100% !important;
    margin: 0 !important;
  }
  
  .nav-links-menu li a {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border-radius: 6px !important;
    color: var(--white) !important;
    background: transparent !important;
    transition: background 0.2s !important;
  }
  
  .nav-links-menu li a:hover,
  .nav-links-menu li.current-menu-item a {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #5BA8F0 !important;
  }
  
  .nav-cta {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 12px !important;
    font-size: 16px !important;
    margin: 10px 0 0 0 !important;
    border-radius: 8px !important;
  }
}

/* ==========================================
   SITEMAP & INNER PAGES RESPONSIVENESS
   ========================================== */

@media (max-width: 768px) {
  /* 1. Global Page Header Overlaps & Margins */
  
  
  /* 2. Footer Responsive Alignment */
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: left !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 16px !important;
    text-align: center !important;
  }
  
  /* 3. Services Page - Tab headers layout wrap */
  .service-tabs {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
    padding: 0 20px !important;
  }
  .tab-link {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    padding: 12px 16px !important;
  }
  
  /* 4. Nearshore Page - Columns wrapping */
  .nearshore-grid, .coverage-grid, .delivery-grid, .global-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .ns-card, .ps-card {
    padding: 24px 20px !important;
  }
  
  /* 5. Partners & Contact Pages - Form wrapping and input columns stacking */
  .proof-stats {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  
  .form-row-2 {
    grid-template-columns: 1fr !important; /* Stack first & last name fields vertically on mobile */
    gap: 16px !important;
  }
  
  /* Contact / Partner Forms */
  .form-row, .row {
    flex-direction: column !important;
  }
  .form-row .col, .row .col, .row .col-md-6, .row .col-6 {
    width: 100% !important;
    margin-bottom: 12px !important;
  }
  
  /* 6. About Page - Stats grid layout & Timeline */
  .values-grid, .features-grid, .who-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .milestone {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .ml-left {
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
  }
  .ml-line {
    display: none !important; /* Hide vertical timeline line on mobile */
  }
  .ml-year {
    width: auto !important;
    padding: 4px 12px !important;
    background: rgba(26,95,168,0.1) !important;
    border-radius: 4px !important;
  }
  .ml-content {
    padding-left: 0 !important;
    padding-bottom: 20px !important;
  }
  
  /* 7. Blog Page - Category filters wrapping */
  .filter-bar-inner {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 0 !important;
  }
  .filter-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }
  
  /* 8. Verso / 404 Page - Button wrapping */
  .verso-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  .verso-btn {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }
}