/* =====================================================================
   COSMOS BIONICS — RESPONSIVE LAYOUT OVERRIDES (TABLET & MOBILE)
   ===================================================================== */

@media (max-width: 1199px) {
  /* Reduce excessive section paddings */
  .sectionpy-20,
  .sectionpy-12,
  .sectionpy-122,
  .sectionpy-123,
  .sectionpy-202,
  .sectionpy-203,
  .sectionpy-204,
  .sectionpy-205,
  .sectionpy-206,
  .sectionpy-207 {
    padding-left: 48px !important;
    padding-right: 48px !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 900px) {
  /* Flatten layout grids and flex rows to stack vertically */
  .divgrid, 
  .divgrid2, 
  .divgrid3, 
  .divgrid5, 
  .divgrid6,
  .divflex,
  .divflex2 {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 24px !important;
  }

  /* Reset fixed min-widths and widths that cause horizontal scroll */
  .divspace-y-6,
  .divrelative,
  .divbg-gradient-to-br,
  .divbg-white,
  .divrounded-2xl,
  .divspace-y-8,
  .divrelative-icon2,
  .divrelative-icon,
  .divbg-gray-50,
  .divbg-gray-502,
  .divbg-gray-503,
  .divbg-gray-504,
  .divbg-gray-100,
  .divbg-gray-1002 {
    min-width: 100% !important;
    width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  /* Contact page specific absolute-grid overrides: Make relative vertical stack & center contents */
  .divgrid4 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 16px !important;
    min-width: 100% !important;
    width: 100% !important;
  }
  .divbg-gray-50, 
  .divbg-gray-502, 
  .divbg-gray-503, 
  .divbg-gray-504 {
    position: relative !important;
    inset: auto !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid4 .divw-12-icon {
    display: block !important;
    margin: 0 auto 12px auto !important;
  }
  .divgrid4 .h3text-lg {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid4 .interested-in-partnering {
    text-align: center !important;
    width: 100% !important;
  }
  .divgrid4 .h4font-semibold {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid4 .cairo-egypt {
    text-align: center !important;
    width: 100% !important;
  }

  /* Center headings on responsive stacks */
  .h1text-4xl,
  .h2text-4xl,
  .h2text-4xl2,
  .h2text-4xl3,
  .ptext-lg,
  .ptext-lg3,
  .ptext-lg6,
  .divtext-center,
  .divtext-center3 {
    width: 100% !important;
    max-width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .get-in-touch-container,
  .restoring-mobility-transformi-container,
  .the-lightest-device-container,
  .robotic-technology-for-container {
    text-align: center !important;
  }

  /* Center About Us Page "Our Impact" Cards on Mobile/Tablet */
  .divgrid5 .divrounded-2xl {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .divgrid5 .divtext-cosmos-orange {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 12px 0 !important;
  }
  .divgrid5 .about-card-icon-orange {
    display: block !important;
    margin: 0 auto !important;
  }
  .divgrid5 .episode-funding {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .divgrid5 .divtext-3xl,
  .divgrid5 .divtext-3xl5,
  .divgrid5 .divtext-sm {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .divgrid5 h2,
  .divgrid5 .m,
  .divgrid5 .egp-raised {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Center About Us Page "Shark Tank" Cards on Mobile/Tablet */
  .divflex {
    align-items: center !important;
    justify-content: center !important;
  }
  .divbg-gray-100, 
  .divbg-gray-1002 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 24px 16px !important;
  }
  .divtext-2xl,
  .divtext-2xl2,
  .divtext-sm6,
  .divtext-sm7 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .our-vision,
  .egp-raised {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* =====================================================================
     NEWS PAGE SPECIFIC MOBILE/TABLET OVERRIDES
     ===================================================================== */
  /* Remove min-widths that cause horizontal scroll */
  .divp-8,
  .divflex2 .div,
  .component-6,
  .component-62,
  .component-63,
  .component-64,
  .component-65,
  .component-66 {
    min-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Reset layout constraints and center filter sections */
  .divmax-w-7xl {
    padding: 0 16px !important;
    box-sizing: border-box !important;
    gap: 32px !important;
  }
  
  /* Feature article padding and alignment overrides */
  .divp-8 {
    padding: 24px 16px !important;
  }
  .cosmos-bionics-featured,
  .the-egyptian-startup {
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Video Gallery Responsive Styles */
  .divgrid2 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    gap: 24px !important;
  }
  .component-4 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    height: auto !important;
    padding-bottom: 16px !important;
  }
  .component-4 .divrelative {
    width: 100% !important;
    max-width: 100% !important;
  }
  .component-4 .shark-tank-egypt-full-pitch {
    height: 200px !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .component-4 .h3font-bold {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
  .component-4 .shark-tank-egypt {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  /* Video Gallery Header Centering */
  .divflex2 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .divflex2 .div {
    min-width: 100% !important;
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divflex2 .h4font-semibold,
  .divflex2 .ptext-gray-600 {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .divflex2 .watch-our-latest {
    text-align: center !important;
  }
  .divflex2 .component-3 {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }

  /* Latest News Header & Filters Centering */
  .divflex3 {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }
  .div4 {
    height: auto !important;
    align-items: center !important;
    text-align: center !important;
  }
  .h2text-3xl3 {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ptext-gray-6002 {
    align-items: center !important;
    text-align: center !important;
  }
  .divflex4 {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Latest News Articles absolute grid override (stack vertically) */
  .divgrid3 {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 24px !important;
  }
  .component-6,
  .component-62,
  .component-63,
  .component-64,
  .component-65,
  .component-66 {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    border-radius: 16px !important;
  }
  .divrelative-icon2 {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }
  .divp-6 {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 16px !important;
  }
  .cosmos-bionics-receives {
    max-width: 100% !important;
    text-align: left !important;
  }
  .we-are-proud {
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Media bottom section overrides */
  .divflex11 {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
  .component-28,
  .component-56 {
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Center Contact Page "Partnership Models" Cards on Mobile/Tablet */
  .contact-page-main .divgrid5 .divbg-white2,
  .contact-page-main .divgrid5 .frame {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  .contact-page-main .divgrid5 .divbg-white2 {
    align-self: center !important;
    max-width: 450px !important;
  }
  .contact-page-main .divgrid5 .divw-14-icon {
    display: block !important;
    margin: 0 auto 12px auto !important;
  }
  .contact-page-main .divgrid5 .h3text-xl,
  .contact-page-main .divgrid5 .ptext-gray-60011,
  .contact-page-main .divgrid5 .ptext-gray-60012 {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .contact-page-main .divgrid5 .healthcare-institutions,
  .contact-page-main .divgrid5 .hospitals-rehabilitation-cent {
    text-align: center !important;
    width: 100% !important;
  }
  .contact-page-main .divgrid5 .ulspace-y-2,
  .contact-page-main .divgrid5 .ulspace-y-22 {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .contact-page-main .divgrid5 .liflex,
  .contact-page-main .divgrid5 .liflex2,
  .contact-page-main .divgrid5 .liflex7 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
  }
}

@media (max-width: 768px) {
  /* Mobile padding and sizing overrides */
  .sectionpy-20,
  .sectionpy-12,
  .sectionpy-122,
  .sectionpy-123,
  .sectionpy-202,
  .sectionpy-203,
  .sectionpy-204,
  .sectionpy-205,
  .sectionpy-206,
  .sectionpy-207 {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  /* Responsive image scaling */
  .divrelative-icon,
  .divrelative-icon2 {
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
  }

  /* Grid spacing and padding adjustments */
  .divbg-white {
    padding: 24px 16px 32px !important;
  }
  .divw-14-wrapper {
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
  }

  /* Product page layout adjustments */
  .product-showcase {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .product-image-container {
    height: 280px !important;
    padding: 16px !important;
  }
  .specs-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  .states-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Shrink Products Page Tabs Bar on Mobile (Full Width, No Scroll, Clean Wrap) */
  .tabs-container {
    margin-bottom: 24px !important;
    overflow-x: hidden !important; /* Disable horizontal scroll */
    display: block !important;
    padding: 0 16px !important; /* Margin from screen edges */
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .tabs-container::-webkit-scrollbar {
    display: none;
  }
  .tabs-list {
    display: flex !important;
    width: 100% !important; /* Fill container width */
    margin: 0 !important;
    gap: 4px !important;
    padding: 4px !important;
    box-sizing: border-box !important;
  }
  .tab-btn {
    flex: 1 !important; /* Equal width distribution */
    padding: 8px 4px !important; /* Compact padding */
    font-size: 11px !important; /* Fits long text */
    line-height: 1.2 !important;
    white-space: normal !important; /* Allow wrapping */
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important; /* Equal height for all tabs */
    box-sizing: border-box !important;
  }

  /* Adjust huge headings */
  .h1text-4xl h1, 
  .get-in-touch-container, 
  .restoring-mobility-transformi-container {
    font-size: 36px !important;
    line-height: 44px !important;
  }
  .h2text-4xl, 
  .robotic-technology-for-container, 
  .the-lightest-device-container {
    font-size: 28px !important;
    line-height: 34px !important;
  }



  /* Ensure mobile nav links are always dark and visible on the white drawer background */
  .site-header .nav-links .nav-link {
    color: var(--ebony) !important;
  }
  .site-header .nav-links .nav-link:hover,
  .site-header .nav-links .nav-link.active {
    color: var(--orange) !important;
  }

  /* Center About Us Page "What We Do" Cards on Mobile */
  .divgrid3 .divbg-white {
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid3 .divw-14-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 0 12px 0 !important;
  }
  .divgrid3 .h3text-xl-parent {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid3 .h3text-xl, 
  .divgrid3 .ptext-gray-600 {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  .divgrid3 .innovation,
  .divgrid3 .pushing-the-boundaries {
    text-align: center !important;
    width: 100% !important;
  }


}

@media (max-width: 480px) {
  /* Extra compact overrides for tiny screens */
  .sectionpy-20,
  .sectionpy-12,
  .sectionpy-122,
  .sectionpy-123,
  .sectionpy-202,
  .sectionpy-203,
  .sectionpy-204,
  .sectionpy-205,
  .sectionpy-206,
  .sectionpy-207 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .specs-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 576px) {
  .btn-header-contact {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .hero-photo img {
    object-position: 80% top !important;
  }
}