/* base safety */
#fwslider{position:relative;}
#fwslider .slide img{width:100%;height:auto;display:block;}

/* phones/tablets: one caption layer only */
@media (max-width:800px){
  /* hide per-slide captions that caused duplicates */
  #fwslider .slide_content{display:none !important;}

  /* shared mobile caption */
  #mobileCaption{
    position:absolute; left:4%; right:4%; bottom:12%;
    display:block;
    z-index:30;
    color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.6);
    pointer-events:none;   /* lets swipes through */
  }

  #mobileCaption .title{
    font-size:clamp(22px,7.5vw,34px);
    line-height:1.1;
    margin:0;
  }

  /* completely hide buttons on mobile */
  #mobileCaption .button,
  #fwslider .slide_content_wrap .button{
    display:none !important;
  }

  /* arrows smaller + vertically centered, under caption */
  #fwslider .slidePrev,#fwslider .slideNext{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:20 !important; width:44px; height:44px;
  }
  #fwslider .slidePrev{ left:10px !important; }
  #fwslider .slideNext{ right:10px !important; }
  #fwslider .slidePrev span,#fwslider .slideNext span{
    position:absolute;
    left:50%; top:50%;
    width:72px; height:128px;               /* native sprite size */
    transform:translate(-50%,-50%) scale(.34);
    transform-origin:center;
    display:block;
  }
}

/* 2x2 Client Examples grid on small/medium screens */
@media (max-width: 992px) {
    .row.team_box {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;                     /* padding between items */
      margin: 0;                     /* reset bootstrap row negative margins */
    }
  
    .row.team_box .team1 {
      width: calc(50% - 10px);       /* 2 columns with gap */
      padding: 10px;                 /* inner padding like other sections */
      box-sizing: border-box;
      background: #f9f9f992;           /* optional: light background like cards */
      border-radius: 6px;            /* optional: match site style */
    }
  
    .row.team_box .team1 img {
      width: 100%;
      height: auto;                  /* keep original aspect ratio */
      display: block;
      border-radius: 4px;            /* optional: soften image corners */
    }
  
    .row.team_box .team1 h4.m_5 {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.2;
      text-align: center;            /* center the labels under each image */
    }
  }
  
  /* For very small phones, tighten spacing a bit */
  @media (max-width: 480px) {
    .row.team_box { gap: 14px; }
    .row.team_box .team1 { width: calc(50% - 7px); padding: 6px; }
  }