/* ============================================================
   responsive.css — Mobile First Breakpoints
   Author  : Touhid Aktar
   Method  : Mobile First (min-width)
   Default : xs — Extra Small (0px → 575px) — No query needed
   ============================================================ */

/* ============================================================
   [sm] Small — min-width: 576px
   📱 Large mobile / Portrait tablet
   ============================================================ */
@media (min-width: 576px) {
   .sp-services-main {
      flex-direction: row;
      flex-wrap: wrap;
   }

   .sp-services-item {
      flex: 1 1 calc(50% - 10px);
   }
}

/* ============================================================
   [md] Medium — min-width: 768px
   📟 Tablet / Landscape mobile
   ============================================================ */
@media (min-width: 768px) {
   .banner {
      display: flex;
      align-items: center;
   }

   .banner-left p {
      padding-top: 15px;
      padding-bottom: 50px;
   }

   .services-item.active .description {
      max-height: 1045px;
   }

   .about-main {
      display: flex;
      align-items: center;
      gap: 25px;
   }

   .about-bottom {
      display: flex;
      align-items: center;
      gap: 25px;
   }

   .about-bottom-left {
      margin-bottom: 0px;
   }

   .audit-main {
      display: flex;
      align-items: center;
      gap: 25px;
   }

   .audit-left {
      width: 31%;
   }

   .audit-right {
      width: 63%;
   }

   .cta-main {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 45px;
   }

   .cta-left {
      width: 50%;
   }

   .cta-right {
      width: 50%;
      padding: 50px;
      margin-bottom: 25px;
   }

   .sub-banner-main {
      display: flex;
      gap: 25px;
      align-items: center;
   }

   .sub-banner-left {
      width: 50%;
   }

   .sub-banner-left p {
      margin: 20px 0px;
   }

   .sub-banner-left a {
      padding: 7px 15px;
   }

   .sub-banner-right {
      width: 50%;
   }

   #sp-services {
      padding-top: 60px;
   }

   .sp-services-item {
      padding: 25px;
   }

   .oes-solution-item {
      flex: 1 1 calc(45% - 10px);
   }

   .counter-main {
      display: flex;
      gap: 15px;
      padding: 45px 35px 25px 35px;
      align-items: center;
      justify-content: space-between;
      border-radius: 25px;
   }

   .counter-item {
      margin: 0px;
   }

   .our-process-item {
      flex: 1 1 calc(45% - 10px);
   }

   .oes-cta-main {
      display: flex;
      gap: 25px;
      align-items: center;
   }

   .oes-cta-left {
      width: 50%;
   }

   .oes-cta-right {
      width: 50%;
   }

   .footer-top,
   .footer-menu,
   .footer-bottom {
      flex-direction: row;
      justify-content: space-between;
   }
}

/* ============================================================
   [lg] Large — min-width: 992px
   💻 Small laptop / Desktop
   ============================================================ */
@media (min-width: 992px) {
   .nav-link {
      position: relative;
      display: inline-block;
      padding: 0px 16px;
      text-decoration: none;
   }

   .nav-link::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--primary_color);
      transition: width 0.4s ease;
   }

   .nav-link span::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 0;
      background: var(--primary_color);
      transition: height 0.4s ease;
   }

   .nav-link::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 0;
      height: 2px;
      background: var(--primary_color);
      transition: width 0.4s ease;
   }

   .nav-link span::after {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      width: 2px;
      height: 0;
      background: var(--primary_color);
      transition: height 0.4s ease;
   }

   .nav-link:hover::after,
   .nav-link:hover::before,
   .nav-link.active::after,
   .nav-link.active::before {
      width: 40%;
   }

   .nav-link:hover span::after,
   .nav-link:hover span::before,
   .nav-link.active span::after,
   .nav-link.active span::before {
      height: 40%;
   }

   .banner-bottom {
      flex-direction: row;
      gap: 50px;
   }

   .services-main {
      display: flex;
      flex-direction: row;
      gap: 25px;
      align-items: center;
   }

   .services-heading {
      width: 42%;
   }

   .services-tabs {
      width: 58%;
      margin-top: 0px;
   }

   .services-heading img {
      width: 100%;
      height: auto;
      display: block;
      margin-top: 20px;
      border: 1px solid #e0e0e0;
      border-radius: 25px;
      object-fit: cover;
   }

   .description-image {
      display: none;
   }

   .audit-left {
      width: 50%;
   }

   .audit-right {
      width: 46%;
   }

   .work-main {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
   }

   .work-heading {
      width: 42%;
   }

   .work-carousel {
      width: 58%;
      margin-top: 0px;
   }

   .cta-main {
      justify-content: space-between;
      gap: 50px;
   }

   .cta-left {
      width: 39%;
   }

   .cta-right {
      width: 50%;
   }

   .sub-banner-left p {
      margin: 25px 0px;
   }

   .sub-banner-left a {
      padding: 9px 20px;
   }

   .sp-services-item {
      flex: 1 1 calc(33.333% - 15px);
   }

   .oes-solution-item {
      flex: 1 1 calc(32.33% - 14px);
   }

   .our-process-item {
      flex: 1 1 calc(32.33% - 14px);
   }

   .social-icons {
      margin-right: 100px;
   }
}

/* ============================================================
   [xl] Extra Large — min-width: 1200px
   🖥️ Large desktop
   ============================================================ */
@media (min-width: 1200px) {
   .banner {
      display: flex;
      align-items: center;
   }

   .banner-left {
      width: 50%;
   }

   .banner-right {
      width: 50%;
   }

   .banner-right img {
      width: 255px;
      height: auto;
      border-radius: 25px;
   }

   .sp-services-item {
      padding: 30px;
      transition: 0.3s;
   }

   .sp-services-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
   }
}

/* ============================================================
   [xxl] 2X Large — min-width: 1400px
   🖥️ Widescreen / 4K monitor
   ============================================================ */
@media (min-width: 1400px) {}