/* Responsive overrides - do not change existing visuals, only adjust layout */

/* Hero/banner: prevent image overflow and keep left alignment on mobile */
.hero-grid img{
  max-width:100%;
  height:auto;
  display:block;
}

@media(max-width:767px){
    .btns{grid-template-columns: repeat(1, 1fr);text-align: center;}
    .hero {
    padding: 25px 0;
    }
    .chip{
      font-size: 14px;
    }
}


/* Left-align banner block on mobile so it doesn't go out of screen */
@media(max-width:768px){
  .header{background:#fff}
  .header .container{justify-content:flex-start}
  .hero-grid{gap:25px}
  .hero-grid > div:last-child{justify-self:start}
}


/* ------------------ Complete RO Solutions (service tiles) ------------------ */
/* 1 card on mobile, 2 cards on tablet */
@media(max-width:768px){
  #service .services{grid-template-columns:1fr !important}
}
@media(min-width:769px) and (max-width:991px){
  #service .services{grid-template-columns:repeat(2,1fr) !important}
}

/* ------------------ Pointers below service section ------------------ */
/* Make each pointer show as a single info in one line on mobile */
@media(max-width:768px){
  .feature .bottom{
    grid-template-columns:1fr;
  }
  .feature .bottom .point{
    border-right:none !important;
    padding:10px 0 !important;
    justify-content:flex-start;
    width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

/* ------------------ Stats / features pointer cards ------------------ */
/* Your requirement says: 2 cards in each row in mobile for the 4 pointers area */
@media(max-width:768px){
  .stats{grid-template-columns:repeat(2,1fr) !important;}
}
  .header .logo img{max-width:200px; width:100%; height:auto;}
/* ------------------ Why Choose Us: features section as 2 cards per row on mobile */
@media(max-width:768px){

  /* Logo + header */
  .header .logo img{max-width:200px; width:100%; height:auto;}
  .header .btn{padding:12px 14px; font-size:14px; display:flex; align-items:center; gap:8px;}
  .header .btn i{font-size:18px; margin:0;}

  /* Mobile navigation: hide desktop links, show menu button */
  nav{display:block;}
  header.header nav{
    position:fixed;
    top:0;
    right:0;
    height:100vh;
    width:85vw;
    max-width:360px;
    background:#ffffff;
    padding:70px 20px 20px;
    display:none;
    z-index:9999;
    border-left:1px solid #d9d9d9;
    overflow:auto;
  }
  header.header nav.is-open{display:block;}

  /* Sidebar menu links: one item per line */
  header.header nav a{
    display:block;
    width:100%;
    padding:12px 0;
    margin:0;
    white-space:nowrap;
  }

  /* Sidebar close button */
  header.header nav::before{
    content:"\00D7";
    position:fixed;
    right:calc(15vw + 10px);
    top:18px;
    font-size:30px;
    font-weight:700;
    color:#0a2f68;
    background:#fff;
    border:1px solid #d9d9d9;
    width:42px;
    height:42px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:10000;
  }

  /* Prevent pseudo close overlay from blocking clicks on links */
  header.header nav::after{content:""; position:fixed; right:0; top:0; left:0; height:0; width:0;}


  .header .container{gap:12px; position:relative;}

  /* Hide call button in mobile */
  .header .btn{display:none;}

  /* Menu button + hamburger icon */
  .header .menu-btn{
    display:block;
    width:46px;
    height:40px;
    border-radius:10px;
    background:transparent;
    border:1px solid #cfcfcf;
    position:absolute;
    right:0;
    top:-6px;
    padding:0;
  }
  .header .menu-btn::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:22px;
    height:2px;
    background:#0a79e8;
    transform:translate(-50%,-50%);
    box-shadow: 0 -6px 0 #0a79e8, 0 6px 0 #0a79e8;
    border-radius:2px;
  }



  /* Why Choose Us (service tiles inside .why): 2 cards per row on mobile */
  #why .why{grid-template-columns:repeat(1,1fr) !important; display:grid !important; gap:18px; justify-content:center;}
  #why .service{border-right:none !important; min-height:0 !important;}

  /* Why Choose Us (feature cards inside .features): 2 cards per row on mobile */
  #why .features{grid-template-columns:repeat(2,1fr) !important;}
  #why .feature{border-right:none !important; min-height:0 !important; padding:0 10px;}
  #why .feature i{margin-bottom:12px;}
  #why .feature h4{max-width:none; justify-content:center;}
  #why .feature p{max-width:none;}
}





/* ------------------ Contact alignment on mobile ------------------ */
@media(max-width:768px){
  #contact .bottom{grid-template-columns:1fr !important;}
  #contact .contact{
    background-position:center bottom !important;
    padding:28px !important;
    font-size:18px !important;
  }
  #contact .contact .item{margin-bottom:18px}
  #contact .contact{overflow:hidden}
}