/* ==========================================
   Linkersdo Modular CSS v1.0 — Synchronized with index.css
   FILE: responsive.css
   PURPOSE: Breakpoints for grids, social icons, tabs, nav, containers, testimonials, case grid
   ========================================== */
@media (max-width:960px) {
   .grid-3 {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width:640px) {

   .grid-3,
   .grid-2 {
      grid-template-columns: 1fr
   }
}

@media (max-width:1024px) {
   .top-right.social-icons img {
      width: 24px;
      height: 24px
   }

   .top-right.social-icons {
      gap: .6rem
   }
}

@media (max-width:768px) {
   .top-right.social-icons img {
      width: 20px;
      height: 20px
   }

   .top-right.social-icons {
      gap: .5rem
   }
}

@media (max-width:768px) {
   .testimonials-section .grid {
      grid-template-columns: 1fr !important;
      text-align: center
   }

   .testimonials-section blockquote {
      margin-inline: auto;
      max-width: 90%
   }
}

@media (max-width:1024px) {
   #services-overview .grid {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (max-width:640px) {
   #services-overview .grid {
      grid-template-columns: 1fr
   }

   .tab-button {
      font-size: .9rem;
      padding: 8px 16px
   }
}

@media (max-width:768px) {
   .nav-toggle {
      display: flex
   }

   @media (max-width:768px) {
      .nav-container {
         flex-direction: row !important;
         /* switch back to row on mobile */
         align-items: center !important;
         /* vertically center logo + burger */
         justify-content: space-between !important;
      }

      .logo-text {
         display: flex;
         align-items: center;
         margin: 0;
      }

      .logo-text .logo-img {
         height: 48px;
         /* reduce logo height for mobile */
         margin: 0 8px 0 0;
         /* space between logo and text */
      }

      .nav-toggle {
         display: flex !important;
         align-items: center;
         justify-content: center;
         margin: 0;
         height: 40px;
         width: 36px;
      }

      .nav-toggle .bar {
         height: 3px;
         width: 100%;
         background-color: #0f172a;
         border-radius: 2px;
      }

      .nav-menu {
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         flex-direction: column;
         align-items: flex-start;
         background: #fff;
         border-top: 1px solid #e2e8f0;
         display: none;
         padding: 1rem;
         z-index: 1000;
      }

      .nav-menu.show {
         display: flex
      }

      .nav-menu li {
         width: 100%;
         padding: 8px 0
      }

      .nav-toggle.active .bar:nth-child(1) {
         transform: rotate(45deg) translateY(7px)
      }

      .nav-toggle.active .bar:nth-child(2) {
         opacity: 0
      }

      .nav-toggle.active .bar:nth-child(3) {
         transform: rotate(-45deg) translateY(-7px)
      }
   }

   @media (max-width:1024px) {
      .case-grid {
         grid-template-columns: 1fr;
         gap: 2.5rem
      }

      .funnel-container {
         max-width: 90%
      }
   }

   .container {
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
      padding: 0 16px
   }

   @media (min-width:768px) {
      .container {
         max-width: 720px
      }
   }

   @media (min-width:992px) {
      .container {
         max-width: 960px
      }
   }

   @media (min-width:1200px) {
      .container {
         max-width: 1140px
      }
   }

   @media (min-width:1400px) {
      .container {
         max-width: 1320px
      }
   }

   @media (max-width:768px) {
      .advertisement-bar {
         font-size: .9rem;
         padding: 4px 0
      }
   }


   /* For services.css service cards/*
/* =========================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================= */

   /* ---------- Large tablets / mid desktops (≤1200px) ---------- */
   @media (max-width: 1200px) {
      #services-overview {
         padding: 50px 20px;
      }

      #services-overview .grid {
         gap: 20px;
      }
   }

   /* ---------- Tablets (≤992px) ---------- */
   @media (max-width: 992px) {
      #services-overview .grid {
         grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      }

      #services-overview .card-img img {
         height: 200px;
      }
   }

   /* ---------- Mobile Landscape / Large Phones (≤768px) ---------- */
   @media (max-width: 768px) {
      #services-overview {
         padding: 40px 16px;
      }

      #services-overview .grid {
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 18px;
      }

      #services-overview .service-card {
         padding: 16px;
      }

      #services-overview .card-img img {
         height: 180px;
      }

      #services-overview .service-card h3 {
         font-size: 1rem;
      }

      #services-overview .card .card-icon {
         font-size: clamp(28px, 9vw, 50px);
      }
   }

   /* ---------- Small Phones (≤480px) ---------- */
   @media (max-width: 480px) {
      #services-overview {
         padding: 32px 12px;
      }

      #services-overview .grid {
         grid-template-columns: 1fr;
         /* always single column */
         gap: 16px;
      }

      #services-overview .service-card {
         border-radius: 12px;
         padding: 14px;
      }

      #services-overview .card-img img {
         height: 160px;
      }
   }

   /* =========================================================*/



   /* ------------- service story section  ------------- */
   @media (max-width: 992px) {
      #services-story .services-story-wrapper {
         grid-template-columns: 1fr;
         text-align: center;
      }

      #services-story .story-visual img {
         max-width: 400px;
         margin: 0 auto 30px;
      }

      #services-story .story-highlights {
         grid-template-columns: 1fr 1fr;
      }
   }

   @media (max-width: 600px) {
      #services-story .story-highlights {
         grid-template-columns: 1fr;
      }
   }