/* INVODENT mobile layout aligned to DentalX responsive behavior */
@media (max-width: 767.98px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  img { max-width:100%; height:auto; }

  /* Remove desktop outside margins */
  .ml-70 { margin-left:0 !important; }
  .mr-70 { margin-right:0 !important; }

  /* Mobile section spacing */
  .pt-100 { padding-top:60px !important; }
  .pb-70 { padding-bottom:40px !important; }
  .pb-48 { padding-bottom:35px !important; }
  .mb-60 { margin-bottom:35px !important; }

  /* Keep header logo + menu icon side by side */
  .vl-header-are3a { margin-left:0 !important; margin-right:0 !important; }
  .vl-header-are3a .vl-logo img { max-width:145px; height:auto; }
  .vl-header-action-item { text-align:right; }

  /* HERO: stack content and image */
  .vl-banner-are3a-bg { margin-left:0 !important; margin-right:0 !important; }
  .vl-banner-are3a-bg .row > [class*="col-"] { width:100%; max-width:100%; flex:0 0 100%; }
  .vl-banner-area-content3 { padding-left:0 !important; padding-right:0 !important; }
  .vl-banner-area-content3 .title {
    font-size:38px !important; line-height:46px !important;
  }
  .vl-banner-area-content3 .para br,
  .vl-section-title3 .title br,
  .vl-section-title3 .para br { display:none; }
  .vl-banner-thum3b { position:relative !important; inset:auto !important; margin:25px auto 0 !important; }
  .vl-banner-thum3b img { display:block; margin:auto; max-width:100%; height:auto; }

  /* SERVICES: exactly ONE CARD PER ROW on mobile */
  #service > .container > .row:last-child {
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
  }
  #service > .container > .row:last-child > [class*="col-"] {
    width:100% !important;
    max-width:100% !important;
    flex:0 0 100% !important;
    display:block !important;
  }
  #service .vl-single-service-box3 {
    width:100% !important;
    padding:22px !important;
    margin:0 0 8px !important;
  }
  #service .vl-single-service-box3 .title {
    font-size:22px !important; line-height:30px !important;
  }
  #service .vl-single-service-box3 .para {
    font-size:15px !important; line-height:24px !important;
  }
  #service .vl-service-thumb3,
  #service .vl-service-thumb3.sm-thumb { width:100% !important; }
  #service .vl-service-thumb3 img,
  #service .vl-service-thumb3.sm-thumb img {
    width:100% !important; height:auto !important; min-height:0 !important;
    aspect-ratio:16/10; object-fit:cover;
  }
  /* Touch screens have no hover: make service CTA available */
  #service .vl-service-btn3 {
    opacity:1 !important; visibility:visible !important;
    top:auto !important; bottom:14px !important;
    transform:none !important;
  }

  /* Make common content columns stack vertically like DentalX */
  main .row > .col-md-6,
  section .row > .col-md-6:not(.col-6),
  section .row > .col-md-5,
  section .row > .col-md-7,
  section .row > .col-md-8,
  section .row > .col-md-4 {
    width:100%; max-width:100%; flex:0 0 100%;
  }

  /* Forms */
  input, select, textarea, .nice-select { max-width:100% !important; width:100%; }
  .vl-appintment-content { margin-left:0 !important; margin-right:0 !important; padding:25px 18px !important; }

  /* Footer columns one below another */
  footer .row > [class*="col-"] {
    width:100% !important; max-width:100% !important; flex:0 0 100% !important;
    margin-bottom:28px;
  }
}

@media (max-width: 420px) {
  .container { padding-left:15px !important; padding-right:15px !important; }
  .vl-banner-area-content3 .title { font-size:32px !important; line-height:39px !important; }
  #service .vl-single-service-box3 { padding:18px !important; }
}