/* =====================================================================
   Stream1 Wireless — mobile / responsive fixes
   Loaded right after assets/css/style.css (see style.php).
   No wording is changed and the desktop design is unchanged; sizing
   changes are limited to phone / small-tablet widths.
   ===================================================================== */

/* 1. Stop sideways scrolling / "zoomed-out" pages on phones.
      Decorative banner text (.staff-text), corner shapes and wide embeds
      pushed the page wider than the screen. Setting this on <body> only
      (not <html>) keeps normal window scrolling and the fixed headers working. */
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

/* 2. Media never wider than its column */
.ser-detail img,
.about-img img,
.faq-img img,
.neural-img img,
.blog-img img,
.accordion-body img,
.test-block2 img,
.clients img {
  max-width: 100%;
  height: auto;
}
iframe,
video {
  max-width: 100%;
}

/* Contact page map has width="600" in the markup -> overflowed every phone */
.googel-map iframe {
  width: 100%;
  display: block;
}

/* 3. Mobile menu (hamburger, below 1201px): white full-screen panel.
      Logo bar on top like the site header, close button where the
      hamburger sits, links below the logo. The logo is drawn by CSS,
      so menu.php is unchanged. Desktop menu is not affected. */
@media (max-width: 1201px) {
  .side-menu2 {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 0;
    border: 0;
    background: #fff;
    color: #111;
    font-family: Manrope, Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
  }
  .side-menu2.active {
    right: 0;
    opacity: 1;
    visibility: visible;
  }

  /* logo bar: same logo and position as the white site header */
  .side-menu2 .menu-btns {
    position: sticky;
    top: 0;
    right: auto;
    left: auto;
    z-index: 2;
    flex: 0 0 auto;
    min-height: 95px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 30px 15px 19px;
    background: #fff url(../images/logo-s1w-dark.png) no-repeat 19px center / 250px auto;
    border-bottom: 1px solid #ececec;
  }
  /* close button (id rule in style.css made it a lime icon on black) */
  .side-menu2 #mobileCloseBtn2 {
    position: relative;
    top: auto;
    right: auto;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    transform: none;
    border: 1.5px solid #111;
    border-radius: 50%;
    background-color: #fff;
    transition: background-color .2s ease;
  }
  .side-menu2 #mobileCloseBtn2::before,
  .side-menu2 #mobileCloseBtn2::after {
    content: "" !important;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background: #111;
    border-radius: 2px;
    font: inherit;
  }
  .side-menu2 #mobileCloseBtn2::before { transform: translate(-50%, -50%) rotate(45deg); }
  .side-menu2 #mobileCloseBtn2::after  { transform: translate(-50%, -50%) rotate(-45deg); }
  .side-menu2 #mobileCloseBtn2:hover,
  .side-menu2 #mobileCloseBtn2:active {
    background-color: #d8ff41;
  }

  /* main links: full-width rows, gentle staggered entrance */
  .side-menu2 > ul {
    padding: 8px 24px 20px;
    margin: 0;
    border-bottom: 0;
  }
  .side-menu2 > ul > li {
    border-bottom: 1px solid #ececec;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .side-menu2.active > ul > li {
    opacity: 1;
    transform: none;
  }
  .side-menu2.active > ul > li:nth-child(2)  { transition-delay: .03s; }
  .side-menu2.active > ul > li:nth-child(3)  { transition-delay: .06s; }
  .side-menu2.active > ul > li:nth-child(4)  { transition-delay: .09s; }
  .side-menu2.active > ul > li:nth-child(5)  { transition-delay: .12s; }
  .side-menu2.active > ul > li:nth-child(6)  { transition-delay: .15s; }
  .side-menu2.active > ul > li:nth-child(7)  { transition-delay: .18s; }
  .side-menu2.active > ul > li:nth-child(8)  { transition-delay: .21s; }
  .side-menu2.active > ul > li:nth-child(9)  { transition-delay: .24s; }
  .side-menu2.active > ul > li:nth-child(10) { transition-delay: .27s; }
  /* menu.php has an unclosed <li> before Home: hide the empty item */
  .side-menu2 > ul > li:not(:has(a)) {
    display: none;
  }
  /* exactly the homepage menu type: Manrope bold, 14px, capitals */
  .side-menu2 > ul > li > a {
    height: auto;
    line-height: 1.3;
    padding: 17px 36px 17px 0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #111;
  }
  .side-menu2 > ul > li > a.active,
  .side-menu2 > ul > li.active > a,
  .side-menu2 > ul > li > a:hover {
    color: #111 !important;
  }
  .side-menu2 > ul > li > a.active {
    text-decoration: none;
  }

  /* chevron only on items with a sub-list (Solutions) */
  .side-menu2 > ul > li > a::before {
    display: none;
  }
  .side-menu2 > ul > li > a[aria-haspopup]::before,
  .side-menu2 > ul > li:has(> ul) > a::before {
    content: "" !important;
    display: block;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #111;
    border-bottom: 2px solid #111;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .25s ease;
  }
  .side-menu2 > ul > li.active > a[aria-haspopup]::before,
  .side-menu2 > ul > li.active:has(> ul) > a::before {
    transform: translateY(-30%) rotate(-135deg);
  }

  /* Solutions sub-list: soft grey card. Height is auto, so two-line
     items ("Event Hi-Speed Fibre Internet") no longer overlap. */
  .side-menu2 > ul > li > ul {
    display: none;
    opacity: 1;
    visibility: visible;
    height: auto;
    margin: 0 0 14px;
    padding: 6px 0;
    background: #f6f7f9;
    border: 0;
    border-radius: 12px;
  }
  .side-menu2 > ul > li.active > ul {
    display: block;
  }
  .side-menu2 > ul ul li a {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 12px 16px 12px 30px;
    line-height: 1.35;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: uppercase;
    color: #1f2328;
  }
  .side-menu2 > ul ul li a::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #c4c8cf;
    transform: translateY(-50%);
  }
  /* current page / tapped sub-link: dark text on a white pill with a green dot.
     !important because style.css (.side-menu2 > ul ul .active .active)
     colours it lime, which is unreadable on the light card. */
  .side-menu2 > ul ul li a:hover,
  .side-menu2 > ul ul li a.active {
    color: #111 !important;
  }
  .side-menu2 > ul ul li a.active {
    font-weight: 700;
    background: #fff;
    border-radius: 8px;
    margin: 0 6px;
    padding-left: 24px;
  }
  .side-menu2 > ul ul li a.active::before {
    left: 10px;
  }
  .side-menu2 > ul ul li a:hover::before,
  .side-menu2 > ul ul li a.active::before {
    background: #7a9a00;
  }

  /* contact: two clear buttons right under the links (no empty gap) */
  .side-menu2 .menu-contact {
    margin-top: 8px;
    padding: 20px 24px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .side-menu2 .menu-contact span,
  .side-menu2 .menu-links span,
  .side-menu2 .menu-contact a {
    font-family: inherit;
  }
  .side-menu2 .menu-contact span,
  .side-menu2 .menu-links span {
    display: block;
    margin: 0 0 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8f98;
  }
  .side-menu2 .menu-contact a {
    display: block;
    margin: 0;
    padding: 14px 16px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
  }
  /* call button: dark, so it reads clearly on any phone screen */
  .side-menu2 .menu-contact a.nmbr {
    background: #111;
    color: #fff !important;
  }
  .side-menu2 .menu-contact a.gmail {
    background: #fff;
    color: #111;
    border: 1px solid #dcdfe4;
  }
  .side-menu2 .menu-links {
    padding: 14px 24px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .side-menu2 .menu-links span {
    margin: 0;
  }
  .side-menu2 .menu-links ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
  }
  .side-menu2 .menu-links ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #111;
  }
}

/* 4. Long e-mail addresses / phone numbers wrap instead of overflowing */
.gmail,
.nmbr,
.menu-contact a,
.call-center2 a,
.call-center2 p,
.location-widget4 p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5. Mobile menu: page behind it no longer scrolls (class set by main.js),
      and the menu itself scrolls on short phones / landscape. */
html.s1-menu-open,
html.s1-menu-open body {
  overflow: hidden;
}
.side-menu2.active {
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 6. Video pop-up fits the phone screen */
@media (max-width: 767.98px) {
  .video-modal-content {
    width: calc(100vw - 32px);
    max-width: 100%;
  }
  .video-modal-content iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* 7. Smooth-scroll library (desktop only, see main.js) — standard Lenis CSS */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* 9. Homepage hero on phones / small tablets.
      The theme fixes the slide height (775-804px), pins the text 134px
      from the top and pins the "1,500+" box to the bottom, so longer text
      ran underneath the box: the paragraph was cut off and the
      "Discover" button was hidden. Here the slide grows with its text and
      the box sits below it. The photo still fills the whole slide. */
@media (max-width: 769px) {
  .hero-style2 .hero-content2 {
    height: auto;
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 25px;
    overflow: hidden;
  }
  .hero-style2 .hero-content2 > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .hero-style2 .hero-text2 {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding-top: 110px; /* room for the logo + menu button */
    z-index: 2;
  }
  .hero-style2 .hero-sec-info2 {
    margin-top: 0;
    /* keep text clear of the white slide-arrow notch on the right edge */
    padding-right: 46px;
  }
  .hero-style2 .hero-sec-info2 p {
    margin-bottom: 24px;
  }
  .hero-style2 .hero-btn2 {
    margin-bottom: 20px;
  }
  .hero-style2 .exp-box {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin: 0 0 20px 20px;
    max-width: calc(100% - 40px);
    z-index: 2;
  }
}
@media (max-width: 480px) {
  /* the video thumbnail is ~140px wide; the theme reserved 220px for it */
  .hero-style2 .exp-box {
    padding-left: 160px;
  }
  /* phone-sized type so the whole first screen (headline, text, button)
     fits instead of running to ~1,100px */
  .hero-style2 .hero-sec-info2 .title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 14px;
  }
  .hero-style2 .hero-sec-info2 p {
    font-size: 15px;
    line-height: 25px;
  }
}
@media (max-width: 390px) {
  .hero-style2 .exp-box {
    margin: 0 0 11px 11px;
    max-width: calc(100% - 22px);
  }
  /* theme narrows the hero text to 241-269px on small phones,
     which made it very tall; use the available width instead */
  .hero-style2 .hero-sec-info2,
  .hero-style2 .hero-sec-info2 p {
    max-width: none;
  }
}

/* 9b. Header logo: the logo image is 250px wide, which ran into the menu
       button on 360-400px phones. Scale it down to leave room.
       The logo in the mobile menu bar (section 3) follows the same sizes. */
@media (max-width: 420px) {
  .header-logo img {
    width: 200px;
    height: auto;
  }
  .side-menu2 .menu-btns {
    background-size: 200px auto;
  }
}
@media (max-width: 350px) {
  .header-logo img {
    width: 170px;
  }
  .side-menu2 .menu-btns {
    background-size: 170px auto;
  }
}

/* 9c. Inner-page banner (About, Solutions, Brands, Clients, Case Studies):
       the title is white and sits on assets/images/bg/hero8.png. If that
       image is missing or slow on mobile data, the title was white on
       white. A dark fallback colour keeps it readable; when the image
       loads it still covers this exactly as before. */
.page-banner11 {
  background-color: #10243a;
}

/* 9d. Clients page: 36 logos stacked one per row made a very long page
       on phones. Show them two per row. */
@media (max-width: 767px) {
  .clients-widget .row > .col-lg-3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 12px;
  }
  .clients-widget .row > .col-lg-3 > .clients {
    margin: 0 !important;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .clients-widget .clients img {
    width: 100%;
    max-width: 230px;
  }
  /* same 640px white fade as the testimonials: shorter on phones */
  .clients-widget::before {
    height: 220px;
    pointer-events: none;
  }
}

/* 9e. Small phones (320-390px): two things were wider than the screen,
       which makes Chrome widen and shift the whole page:
       - the breadcrumb strip under the banner on service pages
       - Google's reCAPTCHA box on the contact form (fixed 304px) */
@media (max-width: 390px) {
  .breadcrumbs {
    padding-left: 24px;
    padding-right: 24px;
    max-width: calc(100% - 20px);
  }
}
@media (max-width: 374px) {
  /* "zoom" shrinks the box in the layout too (transform: scale does not),
     so the 304px widget fits the ~222px form on 320px phones */
  .g-recaptcha {
    zoom: 0.72;
  }
}

/* 10. Testimonials: the theme lays a 680px white fade over the bottom of
       the section. On a one-column phone layout that hid about two whole
       testimonial cards. Keep the fade, but shorter on phones. */
@media (max-width: 767px) {
  .testimonial-sec2::before {
    height: 220px;
    pointer-events: none;
  }
}

/* 11. Homepage logo sliders: client logos (.brand, 400x200 images) and
       partner logos (.brand2, 277x81 images) showed at different sizes.
       Both now sit in the same 2:1 box, centred in each slide:
       200x100 on desktop, 140x70 on phones. Applies on all screen sizes. */
.brand .swiper-slide,
.brand2 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand .swiper-slide > a,
.brand2 .swiper-slide > a {
  display: block;
  width: 100%;
  max-width: 200px;
}
.brand .swiper-slide img,
.brand2 .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}
@media (max-width: 767px) {
  .brand .swiper-slide > a,
  .brand2 .swiper-slide > a {
    max-width: 140px;
  }
}

/* 8. Respect "reduce motion" on phones that ask for it */
@media (prefers-reduced-motion: reduce) {
  #s1-bubble::after {
    animation: none;
  }
}