/* ---------- ≤ 992 px ---------- */
@media(max-width:992px){
  .container{max-width:960px;}                         /* Slightly narrower container */
  h1{font-size:2.8rem;} h2{font-size:2rem;}             /* Shrink headings */
  .hero-title{font-size:3rem;}                          /* Smaller hero text */
  .hero-subtitle{font-size:1.2rem;}
  .about-content{grid-template-columns:1fr; text-align:center;} /* Stack about section, center text */
  .about-image{margin-top:30px; order:-1;}              /* Move image above text, add spacing */
  .about-image img{margin-inline:auto;}                 /* Center image */
  .contact-content{grid-template-columns:1fr;}          /* Stack contact section */
  .contact-info{margin-top:40px; text-align:center;}    /* Space and center contact info */
  .contact-info p{justify-content:center;}              /* Center inline content */
  .contact-info i{margin-right:10px;}                   /* Space icons */
}

/* ---------- ≤ 768 px ---------- */
@media(max-width:768px){
  html{font-size:15px;}                                 /* Smaller root font */
  .section-padding{padding:60px 0;}                     /* Reduce vertical padding */
  h1{font-size:2.5rem;} h2{font-size:1.8rem; margin-bottom:2rem;} /* Smaller headings, less margin */
  .hero-title{font-size:2.5rem;} .hero-subtitle{font-size:1.1rem;}

  /* nav collapse */
  .navbar{height:60px;}                                 /* Shorter navbar */
  .nav-menu{
    position:fixed; left:-100%; top:60px;               /* Hide menu offscreen */
    flex-direction:column;                              /* Vertical nav links */
    background:var(--white-color); width:100%;          /* Full width dropdown */
    text-align:left;                                    /* Left-align links */
    padding-left:24px;                                  /* Nice left padding */
    transition:left .3s;                                /* Smooth slide */
    box-shadow:0 10px 27px rgba(0,0,0,.1);              /* Stronger shadow */
    padding-bottom:10px;
  }
  .nav-menu.active{left:0;}                             /* Slide in menu when active */
  .nav-item{margin:0.8rem 0;}                           /* Tighter spacing between links */
  .nav-link{font-size:1.1rem;}                          /* Slightly larger nav text */
  .hamburger{display:block;}                            /* Show hamburger menu */

  /* submenu mobile toggle */
  .submenu{display:none !important;}    /* Completely hide dropdowns on mobile */
  .nav-item.dropdown.active .submenu{
    display:none !important;
  }

  .services-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));} /* Responsive services grid */
  .features-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
  .contact-form .form-group{grid-template-columns:1fr;} /* Stack form fields */

  /* --- Unify mobile main and secondary menu design --- */
  .mobile-secondary-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--white-color);
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 3000;
    display: flex; flex-direction: column;
    font-family: var(--font-primary);
    font-size: 1.1rem;
    color: var(--dark-color);
    box-shadow: 0 10px 27px rgba(0,0,0,.1);
  }
  .mobile-secondary-menu.active {
    transform: translateX(0);
  }
  .secondary-header {
    display: flex; align-items: center;
    padding: 20px 24px; border-bottom: 1px solid #eee;
    background: var(--white-color);
    text-align: left;
  }
  .secondary-header h3 {
    margin: 0; font-size: 1.2rem; color: var(--dark-color);
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .back-btn {
    background: none; border: none; font-size: 1rem;
    color: var(--primary-color); cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0; margin-right: 16px;
    font-weight: 500;
  }
  .secondary-items {
    flex: 1; overflow-y: auto; padding: 0; margin: 0;
    list-style: none;
    background: var(--white-color);
  }
  .secondary-items li {
    border-bottom: 1px solid #f0f0f0;
  }
  .secondary-items a {
    display: block;
    padding: 16px 24px;
    color: var(--dark-color);
    font-size: 1.1rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    font-weight: 500;
    letter-spacing: 0.1px;
  }
  .secondary-items a:hover {
    background: var(--light-color);
    color: var(--primary-color);
  }
  .explore-all-item {
    border-top: 2px solid var(--primary-color) !important;
    border-bottom: none !important;
  }
  .explore-all-item a {
    color: var(--primary-color) !important;
    font-weight: 600;
    background: rgba(var(--primary-color-rgb,0,86,179), 0.05);
  }
  .explore-all-item a:hover {
    background: rgba(var(--primary-color-rgb,0,86,179), 0.1) !important;
  }

  /* Mobile Language Menu */
  .mobile-lang-menu{
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:var(--white-color);
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:3000;
    display:flex; flex-direction:column;
  }
  .mobile-lang-menu.active{
    transform:translateX(0);
  }
  .lang-header{
    display:flex; align-items:center;
    padding:20px 24px; border-bottom:1px solid #eee;
    background:var(--white-color);
    text-align:left;
  }
  .lang-header .back-btn{
    background:none; border:none; font-size:1rem;
    color:var(--primary-color); cursor:pointer;
    display:flex; align-items:center; gap:8px;
    padding:8px 0; margin-right:16px;
  }
  .lang-header h3{
    margin:0; font-size:1.2rem; color:var(--dark-color);
  }
  .lang-items{
    flex:1; overflow-y:auto; padding:0; margin:0;
    list-style:none;
  }
  .lang-items li{
    border-bottom:1px solid #f0f0f0;
  }
  .lang-items a{
    display:flex; align-items:center; gap:12px;
    padding:16px 24px; color:var(--dark-color);
    font-size:1rem; text-decoration:none;
    text-align:left;
  }
  .lang-items a:hover{
    background:var(--light-color);
  }
  .lang-flag{
    font-size:1.2rem; width:24px;
  }
  .lang-name{
    flex:1; text-align:left;
  }

  /* Hide desktop language switcher behavior on mobile */
  .nav-item.lang-switch{
    order: 10; /* Move to bottom of nav menu */
  }
  .nav-menu .lang-switch{
    display:block !important;
    gap:0 !important;
    flex:0 !important;
    margin-left:0 !important;
    width:auto;
  }
  .nav-item.lang-switch .submenu{
    display: none !important; /* Hide desktop dropdown */
  }
  .nav-item.lang-switch .nav-link{
    text-align: left; /* Align with other nav items */
    padding-left: 0; /* Remove extra padding */
  }
}

/* ---------- ≤ 576 px ---------- */
@media(max-width:576px){
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  .container, .section, .bg-light, .glass-card, main, .contact-section, .about-section, .products-section, .projects-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }
  html{font-size:14px;}
  .hero-title{font-size:2.2rem;}
  .hero-subtitle{font-size:1rem;}
  .btn{padding:10px 20px; font-size:.9rem; width:100%;}
  .services-grid, .features-grid, .projects-grid, .products-grid{grid-template-columns:1fr;}
  .partners-logos, .testimonials-grid{flex-direction:column; gap:1.5rem; align-items:center;}
  .grid{gap:3rem;}
  .footer{font-size:.8rem;}
  .footer-content{flex-direction:column; gap:2rem; align-items:center;}
  .footer-column{width:100%; text-align:center;}
  .glass-card, .contact-content > *{max-width:100%; min-width:0;}
  .contact-content{flex-direction:column; gap:24px;}
  .contact-form input, .contact-form select, .contact-form textarea, .contact-form button{width:100%;}
  main > section, main > div{padding-bottom:48px;}
}