/* =====================================================
   RESPONSIVE SYSTEM – YASH.DEV
===================================================== */

/* =========================
 LARGE TABLETS (≤ 1024px)
========================= */
@media (max-width: 1024px) {

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 32px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .hero-image {
    order: -1;
  }

  .services-grid,
  .features-grid,
  .work-grid,
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section {
    padding: 80px 0;
  }
}

/* =========================
 TABLETS & SMALL LAPTOPS (≤ 900px)
========================= */
@media (max-width: 900px) {

  .hero-title {
    font-size: 38px;
  }

  .hero-subtitle {
    font-size: 17px;
  }

  .hero-actions {
    flex-wrap: wrap;
  }

  .hero-actions .btn {
    width: auto;
  }
}

/* =========================
 MOBILE DEVICES (≤ 768px)
========================= */
@media (max-width: 768px) {

  /* Typography */
  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 22px;
  }

  p {
    font-size: 15px;
  }

  /* Header spacing fix */
  .hero-section {
    padding-top: 130px;
    padding-bottom: 90px;
  }

  /* Grids → Single column */
  .services-grid,
  .features-grid,
  .work-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  /* Cards spacing */
  .service-card,
  .feature-box,
  .pricing-card {
    padding: 28px;
  }

  /* Hero alignment */
  .hero-content {
    text-align: center;
  }

  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions {
    justify-content: center;
  }

  /* Images */
  .hero-image img {
    border-radius: 14px;
  }

  /* CTA section */
  .cta-section {
    padding: 90px 20px;
  }

  .cta-section h2 {
    font-size: 30px;
  }
}

/* =========================
 SMALL PHONES (≤ 480px)
========================= */
@media (max-width: 480px) {

  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 24px;
  }

  .hero-badge {
    font-size: 13px;
  }

  .btn {
    width: 100%;
  }

  .hero-actions {
    gap: 12px;
  }

  .pricing-card {
    padding: 24px;
  }
}
@media (max-width: 768px) {
  .hero-trust {
    justify-content: center;
  }

  .hero-visual {
    margin-bottom: 20px;
  }
}
@media (max-width: 1024px) {
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .trust-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .conversion-inner {
    flex-direction: column;
    text-align: center;
  }

  .conversion-actions {
    justify-content: center;
  }
}




















@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .footer-brand p {
    margin: 0 auto;
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}
@media (max-width: 768px) {
  .footer-socials {
    justify-content: center;
  }
}











@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 768px) {
  .about-hero {
    padding: 130px 0 90px;
  }

  .about-hero-title {
    font-size: 34px;
  }

  .about-hero-trust {
    justify-content: center;
  }

  .about-hero-inner {
    text-align: center;
  }
}
@media (max-width: 1024px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-hero-image {
    order: -1;
  }
}

@media (max-width: 768px) {
  .about-hero {
    padding: 130px 0 90px;
  }

  .about-hero-title {
    font-size: 34px;
  }

  .about-hero-content {
    text-align: center;
  }

  .about-hero-trust {
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .about-visual-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about-visual-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .services-page-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .services-advanced-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-fit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services-advanced-grid,
  .services-fit-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .service-case-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .services-hero-image {
    order: -1;
  }
}

@media (max-width: 768px) {
  .services-hero {
    padding: 140px 0 90px;
  }

  .services-hero-title {
    font-size: 34px;
  }

  .services-hero-content {
    text-align: center;
  }

  .services-hero-actions {
    justify-content: center;
  }
}


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

@media (max-width: 768px) {
  .services-overview-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-detail-grid.reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .fit-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .work-detail-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .work-hero-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .work-hero-image {
    order: -1;
  }
}

@media (max-width: 768px) {
  .work-hero {
    padding: 140px 0 90px;
  }

  .work-hero-title {
    font-size: 34px;
  }

  .work-hero-content {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .work-hero-actions {
    justify-content: center;
  }
}
@media (max-width: 1024px) {
  .pricing-compare {
    grid-template-columns: 1fr;
  }

  .compare-column {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }

  .compare-column.features {
    display: none;
  }

  .compare-header {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .maintenance-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .maintenance-features {
    text-align: left;
    max-width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .work-values-grid {
    grid-template-columns: 1fr;
  }
}