/* GLOBAL MOBILE RULES */
html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  margin: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

img, video, iframe, svg {
  max-width: 100%;
}

img {
  height: auto;
}

a, button {
  -webkit-tap-highlight-color: transparent;
}

/* MAIN CONTAINER FIXES */
@media (max-width: 767px) {
  .container, .ns-container, .tech-container, .academy-container, .wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 360px) {
  .container, .ns-container, .tech-container, .academy-container, .wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* MOBILE TYPOGRAPHY & OVERFLOW FIXES */
@media (max-width: 767px) {
  h1 { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(24px, 6vw, 34px) !important; line-height: 1.2 !important; }
  h3 { font-size: 19px !important; line-height: 1.3 !important; }
  p { font-size: 15px !important; line-height: 1.65 !important; }
  
  h1, h2, h3, h4, h5, h6, p, span, a, div, li, ul, button {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  .small-label { font-size: 12px !important; }
}

@media (max-width: 360px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 24px !important; }
}

/* HEADER / NAVIGATION */
@media (max-width: 991px) {
  .navbar {
    top: 0 !important;
  }
  
  .navbar.scrolled {
    padding: 10px 0 !important;
  }
  
  .navbar .brand img {
    max-width: 140px !important;
    height: auto !important;
  }
  
  .nav-toggle {
    width: 42px !important;
    height: 42px !important;
    pointer-events: auto !important;
    z-index: 100000 !important;
    position: relative !important;
  }
  
  .nav-toggle span {
    background-color: #000000 !important;
  }
  
  .nav-links {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;
    overflow-x: hidden !important;
  }
  
  .nav-links li a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }
  
  .mega-dropdown {
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .mega-dropdown-inner.three-col,
  .mega-dropdown-inner.four-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
}

/* HERO SECTIONS */
@media (max-width: 767px) {
  .hero, .ns-hero, .tech-hero, .academy-hero {
    min-height: auto !important;
    padding: 70px 16px 50px !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .hero h1, .ns-hero h1, .tech-hero h1, .academy-hero h1 {
    font-size: clamp(30px, 8vw, 42px) !important;
  }
  
  .hero p, .ns-hero p, .tech-hero p, .academy-hero p {
    max-width: 100% !important;
    font-size: 15px !important;
  }
  
  .hero-actions, .ns-hero-actions, .tech-hero-actions, .academy-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  
  .ns-hero, .tech-hero-grid, .academy-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }
}

/* BUTTONS */
@media (max-width: 767px) {
  .btn, .ns-btn, .tech-btn, .academy-btn {
    min-height: 42px !important;
    padding: 11px 16px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    border-radius: 8px !important;
    width: auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

@media (max-width: 360px) {
  .btn, .ns-btn, .tech-btn, .academy-btn {
    padding: 9px 13px !important;
    font-size: 12px !important;
  }
}

/* SERVICES PAGE FIXES */
@media (max-width: 767px) {
  .services-grid, .service-grid, .cards-grid, .ns-services-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .service-card, .ns-service-card, .card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
  }
  
  .tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .process-grid, .ns-process-grid, .process-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .faq-item, .ns-faq-item, .tech-faq-item, .academy-faq-item {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  .faq-question, .ns-faq-question, .tech-faq-question, .academy-faq-question {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }
  
  .faq-question span, .ns-faq-question span, .tech-faq-question span, .academy-faq-question span {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
  }
}

/* TECHNOLOGIES PAGE FIXES */
@media (max-width: 767px) {
  .technology-grid, .tech-grid, .tech-item-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .technology-card, .tech-card, .tech-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
  
  .category-tabs, .tech-tabs, .nav-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .tech-map-grid, .disciplines-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  
  .tech-map-grid img, .disciplines-grid img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  
  .principles-grid, .tech-principles {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
}

/* ACADEMY PAGE FIXES */
@media (max-width: 767px) {
  .course-grid, .academy-course-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  
  .course-card, .academy-course-card {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  .course-card img, .academy-course-card img {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
  
  .course-card .btn, .academy-course-card .btn, .course-card .ns-btn, .academy-course-card .academy-btn {
    width: auto !important;
    display: inline-flex !important;
  }
}

/* TABLET FIXES (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .services-grid, .service-grid, .cards-grid, .ns-services-grid,
  .technology-grid, .tech-grid, .tech-item-grid,
  .course-grid, .academy-course-grid,
  .footer-grid, .site-footer .container, .footer-inner {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  
  .tech-map-grid, .disciplines-grid, .process-grid, .ns-process-grid, .process-steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* FOOTER FIXES */
@media (max-width: 767px) {
  .footer-grid, .site-footer .container, .footer-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* LOGIN / REGISTER MODAL & FORMS */
@media (max-width: 767px) {
  .modal, .login-modal, .register-modal {
    width: min(92%, 500px) !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }
  
  .form-group {
    width: 100% !important;
  }
  
  input, select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
  }
}

/* IMAGES & ICONS & FLEXBOX GLOBALS */
.card img, .ns-service-card img, .tech-card img, .course-card img, .academy-course-card img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
}

.icon, .mega-icon {
  flex-shrink: 0 !important;
}

.icon-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

@media (max-width: 767px) {
  .flex-row, .d-flex {
    flex-wrap: wrap !important;
  }
  
  .label-text, .service-title {
    min-width: 0 !important;
  }
  
  section, .ns-section, .tech-section, .academy-section {
    padding-top: 55px !important;
    padding-bottom: 55px !important;
  }
  
  .floating-button, .whatsapp-btn, .scroll-top {
    width: 44px !important;
    height: 44px !important;
    right: 14px !important;
    bottom: 14px !important;
  }
}

/* ==================================================
   MOBILE ACADEMY PORTAL FIXES
   ================================================== */
@media (max-width: 767px) {
    /* PAGE SCROLLING FIXES */
    html, body {
        width: 100% !important;
        min-height: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    
    body {
        position: relative !important;
    }

    /* Remove full-height locking on main wrappers */
    .academy-wrapper, main, .ns-wrapper, .wrapper {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        position: relative !important;
    }

    /* HEADER & NAVIGATION VISIBILITY */
    /* Only target the actual site header/nav, not all <header> tags like the hero */
    .navbar, .site-header, .top-bar {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        z-index: 9998 !important;
    }
    
    /* Ensure the mobile nav covers the screen properly but doesn't get pushed out */
    .nav-links.open {
        position: fixed !important;
        top: 60px !important; /* adjust based on header height */
        left: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 60px) !important;
        overflow-y: auto !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 9999 !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    }

    /* Keep the hero sections securely under the navigation */
    .tech-hero, .hero, .ns-hero, .academy-hero {
        z-index: 1 !important;
    }

    /* AUTH MODAL & BUTTONS */
    .auth-modal-overlay, .modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 9999 !important;
    }
    
    /* Hide the modal if it doesn't have an active class (if JS uses it) */
    .auth-modal-overlay:not(.active), .modal-overlay:not(.active) {
        display: none !important;
    }

    .auth-modal-card, .login-modal, .register-modal, .modal-content {
        position: relative !important;
        width: min(92vw, 500px) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        margin: 0 auto !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
}

/* ==================================================
   TECHNOLOGIES PAGE MOBILE FIXES
   ================================================== */
@media (max-width: 900px) {
    /* 1. Gap for the 'Built around the job' animation section */
    .tech-section#stack .vertical-dial-layout {
        margin-top: 40px !important;
        gap: 32px !important; /* Increase gap between dial buttons and tech cards */
    }

    /* 2. Fix the AI Automation / Security Q&A ticker overlapping with tiles */
    .tech-ticker {
        position: relative !important;
        z-index: 10 !important;
        display: block !important;
        width: 100% !important;
        overflow: hidden !important;
        background: #fff !important;
        min-height: 50px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .tech-ticker-track {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    .tech-stats {
        position: relative !important;
        z-index: 5 !important;
        margin-top: 10px !important;
        background: #fff !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    
    .tech-stack-orbit {
        margin-bottom: 30px !important;
    }

    /* 3. Fix the Close (X) button disappearing behind the mobile menu */
    .nav-toggle, .nav-cta {
        position: relative !important;
        z-index: 10000 !important;
    }

    /* 4. Fix touch area overlap between 'Get in touch' and Hamburger (X) */
    .nav-cta {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important; /* Slightly reduced gap to make room for larger logo */
        pointer-events: auto !important;
    }
    
    .nav-cta .btn {
        pointer-events: auto !important;
        flex-shrink: 0 !important; /* Prevent button from expanding over the X */
        padding: 5px 10px !important; /* More compact 'Get in touch' */
        font-size: 0.75rem !important;
    }
    
    .nav-toggle {
        pointer-events: auto !important;
        flex-shrink: 0 !important; /* Never squish the hamburger */
        margin: 0 !important;
        /* Ensure the click target is strictly defined by its bounds */
        width: 44px !important; 
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 5. Hide Submenus on Mobile Navigation */
    .has-dropdown .mega-dropdown {
        display: none !important;
    }
    
    .has-dropdown .dropdown-arrow {
        display: none !important;
    }

    /* 6. Refine Header Proportions (Logo and Top Bar Button) */
    .navbar .brand img {
        max-width: 160px !important; 
        transform: scale(1.4) !important; /* Increase visual size by 40% */
        transform-origin: left center !important; /* Keep left alignment */
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    .top-bar {
        padding: 4px 0 !important; /* Make the black bar vertically smaller */
    }

    .top-bar-contact .btn {
        padding: 4px 10px !important; /* Extremely compact */
        font-size: 0.65rem !important;
        line-height: 1 !important;
        min-height: auto !important;
        height: auto !important;
        box-shadow: none !important; /* Remove shadow to reduce visual weight */
        letter-spacing: 0 !important;
    }

    /* 7. Academy Mobile Cards Compactness */
    .card-3d-block {
        padding: 16px !important;
        margin-bottom: 20px !important;
    }
    .card-3d-block img {
        margin-bottom: 12px !important;
        height: 140px !important;
        object-fit: cover !important;
    }
    .card-3d-title {
        font-size: 1.15rem !important;
        margin-bottom: 8px !important;
    }
    .card-3d-desc {
        font-size: 0.85rem !important;
    }
    
    .magnetic-card {
        flex: 0 0 280px !important;
    }
    .magnetic-card > div {
        padding: 16px !important;
    }
    .magnetic-card h4 {
        font-size: 1.1rem !important;
        margin-bottom: 8px !important;
    }
    .magnetic-card p {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
    }
    .magnetic-card img {
        height: 140px !important;
    }
    
    .course-card .course-thumb {
        aspect-ratio: 16/9 !important;
    }
    .course-card .course-body {
        padding: 16px !important;
    }
    .course-card h3 {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }
    .course-card p {
        font-size: 0.85rem !important;
        margin-bottom: 12px !important;
        min-height: auto !important;
    }
    .course-card .course-foot {
        padding-top: 10px !important;
    }
    
    .levitate-card, .glass-card-pro {
        padding: 20px 16px !important;
    }
}

/* 8. Compact Mobile Footer Redesign */
@media (max-width: 767px) {
    .footer {
        padding: 30px 0 20px !important;
    }
    
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0px !important;
    }
    
    .footer-grid > div {
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    
    .footer-grid > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        margin-bottom: 15px !important;
    }
    
    .footer-brand {
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
        display: inline-block !important;
    }

    .footer-brand img {
        height: 42px !important;
        max-height: 42px !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
    
    .footer p.desc {
        flex: 1 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        text-align: right !important;
    }
    
    .footer-brand ~ div[style*="display: flex"] {
        margin-bottom: 8px !important;
    }
    
    .footer h5 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    
    .footer ul li {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .footer ul a, .footer ul li strong {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }
    
    .footer ul li a.btn {
        display: none !important;
    }
    
    .footer-social {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 10px !important;
        gap: 12px !important;
    }
    
    .footer-social a {
        width: 32px !important;
        height: 32px !important;
    }
    
    .footer-bottom {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding-top: 16px !important;
        margin-top: 10px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    .footer-bottom > div:nth-child(1) {
        order: 2 !important;
        text-align: center !important;
        font-size: 11px !important;
        color: var(--text-secondary) !important;
    }
    
    .footer-bottom > div:nth-child(2) {
        order: 1 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px 16px !important;
        justify-content: start !important;
    }
    
    .footer-bottom > div:nth-child(2) a {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* Footer Accordion Styles */
    .footer-col-collapsible h5 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0 !important; /* Overrides the 8px margin when collapsed */
        padding: 4px 0;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        user-select: none;
    }
    
    .footer-col-collapsible h5::after {
        content: '+';
        font-size: 18px;
        font-weight: 300;
        color: var(--text-secondary);
        transition: transform 0.2s;
    }
    
    .footer-col-collapsible ul {
        display: none;
        padding-top: 10px;
    }
    
    .footer-col-collapsible.active h5 {
        border-bottom: none;
        margin-bottom: 4px !important;
    }
    
    .footer-col-collapsible.active h5::after {
        content: '\2212'; /* minus sign */
    }
    
    .footer-col-collapsible.active ul {
        display: block;
    }

    /* 9. Mobile Google Drive Video Player Fix */
    .gdrive-player-wrapper iframe {
        top: 0 !important; /* Remove desktop -56px crop that caused black overlays */
        left: 0 !important;
        width: 150% !important; /* Trick to shrink controls by rendering larger... */
        height: 150% !important; /* ...then scaling down */
        transform: scale(0.666667) !important; /* 1 / 1.5 = 0.666667 */
        transform-origin: top left !important;
        pointer-events: auto !important; /* Ensure native tap-to-show controls work */
    }
}