/* Karma AI responsive compatibility layer
   Additive overrides only: preserves existing content, colours and visual identity. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { max-width: 100%; overflow-x: clip; }
img, video, iframe, canvas, svg { max-width: 100%; }
img { height: auto; }
.container, .container-fluid { min-width: 0; }
.row { --bs-gutter-x: clamp(1rem, 2.2vw, 2rem); }
input, select, textarea, button { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; }
a, p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
section, header, footer, main, article, aside { min-width: 0; }
iframe { border: 0; }

/* 13–14 inch laptops and compact desktop viewports (including 125%/150% scaling). */
@media (min-width: 1200px) and (max-width: 1440px) {
  .container { max-width: min(1140px, calc(100% - 48px)); }
  .at-header-area .container, .header-14 .container { max-width: calc(100% - 48px); }
  .at-header-area .at-header-logo img, .header-14 .at-header-logo img { max-width: 190px; height: auto; }
  .at-header-area nav, .header-14 nav { min-width: 0; }
  .at-header-area .at-header-menu, .header-14 .at-header-menu { min-width: 0; }
  .at-header-area .at-header-menu > nav > ul, .header-14 .at-header-menu > nav > ul { gap: clamp(10px, 1.15vw, 18px); }
  .at-header-area .at-header-menu > nav > ul > li > a,
  .header-14 .at-header-menu > nav > ul > li > a { font-size: clamp(12px, .92vw, 14px); }
  .at-btn, .at-btn-circle { max-width: 100%; }
  .row > [class*="col-"] { min-width: 0; }
}

/* Laptop screens at 1024–1199 CSS pixels. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .container { max-width: calc(100% - 40px); }
  .at-header-area .container, .header-14 .container { max-width: calc(100% - 40px); }
  .at-header-area .at-header-logo img, .header-14 .at-header-logo img { max-width: 170px; height: auto; }
  .row > [class*="col-"] { min-width: 0; }
}

/* Tablet and smaller: prevent fixed-width elements from forcing horizontal scrolling. */
@media (max-width: 991.98px) {
  .container, .container-fluid { max-width: 100%; }
  .row { margin-left: calc(var(--bs-gutter-x, 1.5rem) * -.5); margin-right: calc(var(--bs-gutter-x, 1.5rem) * -.5); }
  .at-header-area .container, .header-14 .container { max-width: 100%; }
  .at-header-area .at-header-logo img, .header-14 .at-header-logo img { width: auto; max-width: min(180px, 52vw); height: auto; }
  .at-btn, .at-btn-circle { white-space: normal; }
  .swiper, .swiper-wrapper, .swiper-slide { min-width: 0; }
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Phones and narrow tablet portrait. */
@media (max-width: 767.98px) {
  .container, .container-fluid { padding-left: 18px; padding-right: 18px; }
  .row { --bs-gutter-x: 1.25rem; }
  h1 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.12; }
  h2 { font-size: clamp(1.65rem, 6.5vw, 2.4rem); line-height: 1.18; }
  h3 { font-size: clamp(1.25rem, 5vw, 1.8rem); line-height: 1.25; }
  p { overflow-wrap: anywhere; }
  .at-btn, .at-btn-circle { max-width: 100%; }
  .at-header-area .at-header-logo img, .header-14 .at-header-logo img { max-width: min(160px, 48vw); }
  .footer-8__nav-link { overflow-wrap: anywhere; }
  .sec-4-about-form__input, input, select, textarea { width: 100%; min-width: 0; }
}

/* Small phones. */
@media (max-width: 399.98px) {
  .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
  .row { --bs-gutter-x: 1rem; }
  .at-btn { padding-left: 18px; padding-right: 18px; }
  .at-header-area .at-header-logo img, .header-14 .at-header-logo img { max-width: 138px; }
}

/* Landscape phones: keep navigation and hero content inside the viewport. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 991.98px) {
  .at-header-area, .header-14 { position: relative; }
}
