/* ==========================================================================
   RESPONSIVE — tablet & mobile
   ========================================================================== */

@media (max-width: 1080px){
  .cat-card{ height:440px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .masonry{ column-count:3; }
}

@media (max-width: 960px){
  .nav-links, .nav-tools .lang-select, .nav-tools .icon-btn.search-toggle{ display:none; }
  .hamburger{ display:block; }
  .mobile-panel{ display:block; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-3d-card{ display:none; }
  .hero{ min-height:88vh; align-items:center; }

  .split, .split.offset-60-40, .split.offset-40-60{ grid-template-columns:1fr; }
  .split-content, .split-content.order-1{ padding:36px 6px 6px; order:2 !important; }
  .split-media{ order:1 !important; }
  .split-media img{ height:200px; }
  .split-media .accent-chip, .split-media.reverse .accent-chip{ right:16px; left:auto; bottom:16px; }

  .cat-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-media{ min-height:300px; }
  .contact-panel{ padding:32px 26px; }

  .two-col-text{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .masonry{ column-count:2; }
}

@media (max-width: 640px){
  .container{ padding:0 18px; }
  .section{ padding:64px 0; }
  .toolbar{ position:static; flex-direction:column; align-items:stretch; }
  .filter-chips{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; padding-bottom:34px; }
  .masonry{ column-count:1; }
  .map-wrap iframe{ height:300px; }
  .whatsapp-float{ width:52px; height:52px; right:14px; bottom:14px; }
  .back-to-top{ right:14px; bottom:76px; width:40px; height:40px; }
  .crop-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:14px; }
  .crop-tile{ height:160px; }
  .hero-heading{ font-size:2rem; }
  .lightbox-prev, .lightbox-next{ width:40px; height:40px; }
}
/* =========================================================
   WHY CHOOSE US - RESPONSIVE CSS
   ========================================================= */


/* =========================================================
   TABLET
   992px - 1199px
   ========================================================= */

   @media (max-width: 1199px) {

    .why-section {
      padding: 75px 0 85px;
      background-attachment: scroll;
    }
  
    .why-heading-box {
      margin-bottom: 45px;
    }
  
    .why-title {
      font-size: 36px;
    }
  
    .why-subtitle {
      font-size: 15px;
    }
  
    .why-section .col-lg-4,
    .why-section .col-md-6 {
      width: 50%;
    }
  
    .why-card {
      min-height: 180px;
      padding: 25px 22px;
    }
  
    .why-card .icon-box {
      width: 58px;
      height: 58px;
      flex-basis: 58px;
    }
  
    .why-card .icon-box i {
      font-size: 24px;
    }
  
    .why-card .content h4 {
      font-size: 18px;
    }
  
    .why-card .content p {
      font-size: 14px;
    }
  }
  
  
  /* =========================================================
     MOBILE LARGE
     768px - 991px
     ========================================================= */
  
  @media (max-width: 991px) {
  
    .why-section {
      padding: 65px 0 70px;
    }
  
    .why-heading-box {
      padding: 0 15px;
      margin-bottom: 40px;
    }
  
    .why-tag {
      padding: 7px 17px;
      font-size: 13px;
    }
  
    .why-title {
      font-size: 32px;
    }
  
    .why-subtitle {
      font-size: 15px;
      line-height: 1.7;
    }
  
    .why-section .row {
      margin-left: -10px;
      margin-right: -10px;
    }
  
    .why-section .col-lg-4,
    .why-section .col-md-6 {
      width: 50%;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 20px;
    }
  
    .why-card {
      gap: 16px;
      min-height: 175px;
      padding: 23px 20px;
      border-radius: 16px;
    }
  
    .why-card .icon-box {
      width: 55px;
      height: 55px;
      flex-basis: 55px;
      border-radius: 14px;
    }
  
    .why-card .icon-box i {
      font-size: 22px;
    }
  
    .why-card .content h4 {
      font-size: 17px;
      margin-bottom: 8px;
    }
  
    .why-card .content p {
      font-size: 13px;
      line-height: 1.65;
    }
  
    /* Disable big movement on touch devices */
    .why-card:hover {
      transform: translateY(-4px);
    }
  }
  
  
  /* =========================================================
     MOBILE
     576px - 767px
     ========================================================= */
  
  @media (max-width: 767px) {
  
    .why-section {
      padding: 55px 0 60px;
  
      background-image:
        linear-gradient(
          rgba(247, 250, 242, 0.94),
          rgba(247, 250, 242, 0.96)
        ),
        url("../assets/why.webp");
  
      background-position: center center;
      background-attachment: scroll;
    }
  
    .why-heading-box {
      margin-bottom: 32px;
    }
  
    .why-tag {
      font-size: 12px;
      padding: 7px 15px;
    }
  
    .why-title {
      font-size: 28px;
      line-height: 1.3;
    }
  
    .why-subtitle {
      font-size: 14px;
      line-height: 1.7;
    }
  
    .why-section .row {
      margin-left: -8px;
      margin-right: -8px;
    }
  
    .why-section .col-lg-4,
    .why-section .col-md-6 {
      width: 100%;
      padding-left: 8px;
      padding-right: 8px;
      margin-bottom: 16px;
    }
  
    .why-card {
      min-height: auto;
      padding: 22px 20px;
      gap: 16px;
    }
  
    .why-card .icon-box {
      width: 54px;
      height: 54px;
      flex-basis: 54px;
    }
  
    .why-card .icon-box i {
      font-size: 22px;
    }
  
    .why-card .content h4 {
      font-size: 17px;
    }
  
    .why-card .content p {
      font-size: 13px;
      line-height: 1.65;
    }
  }
  
  
  /* =========================================================
     SMALL MOBILE
     Below 576px
     ========================================================= */
  
  @media (max-width: 575px) {
  
    .why-section {
      padding: 48px 0 50px;
    }
  
    .why-heading-box {
      padding: 0 10px;
      margin-bottom: 28px;
    }
  
    .why-tag {
      margin-bottom: 12px;
      font-size: 11px;
      padding: 6px 13px;
    }
  
    .why-title {
      font-size: 25px;
    }
  
    .why-subtitle {
      font-size: 13px;
      line-height: 1.65;
    }
  
    .why-section .row {
      margin-left: 0;
      margin-right: 0;
    }
  
    .why-section .col-lg-4,
    .why-section .col-md-6 {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 14px;
    }
  
    .why-card {
      padding: 20px 17px;
      gap: 14px;
      border-radius: 14px;
    }
  
    .why-card .icon-box {
      width: 50px;
      height: 50px;
      flex-basis: 50px;
      border-radius: 13px;
    }
  
    .why-card .icon-box i {
      font-size: 20px;
    }
  
    .why-card .content h4 {
      font-size: 16px;
      line-height: 1.35;
    }
  
    .why-card .content p {
      font-size: 12.5px;
      line-height: 1.6;
    }
  }
  
  
  /* =========================================================
     VERY SMALL DEVICES
     Below 400px
     ========================================================= */
  
  @media (max-width: 399px) {
  
    .why-section {
      padding: 42px 0 45px;
    }
  
    .why-title {
      font-size: 23px;
    }
  
    .why-subtitle {
      font-size: 12.5px;
    }
  
    .why-card {
      padding: 18px 15px;
      gap: 12px;
    }
  
    .why-card .icon-box {
      width: 46px;
      height: 46px;
      flex-basis: 46px;
    }
  
    .why-card .icon-box i {
      font-size: 18px;
    }
  
    .why-card .content h4 {
      font-size: 15px;
    }
  
    .why-card .content p {
      font-size: 12px;
    }
  }
  .developer-credit {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    font-size: 0.85rem;
  }
  
  .developer-credit span {
    color: #fff;
  }
  
  .developer-credit a {
    color: #fff;
    text-decoration: none;
  }
  
  .developer-credit a:hover {
    text-decoration: underline;
  }