/* ============================================================
   RESPONSIVE.CSS
   Breakpoints: 480 / 768 / 1024 / 1280
   ============================================================ */

/* ---- Mobile (< 480px) ---- */
@media (max-width: 479px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; justify-content: center; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn-primary,
  .cta-actions .btn-secondary { width: 100%; justify-content: center; }
  .not-found-code { font-size: 4rem; }
}

/* ---- Phablet (≥ 480px) ---- */
@media (min-width: 480px) {
  .hero-capabilities { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; }
}

/* ---- Tablet (≥ 768px) ---- */
@media (min-width: 768px) {
  .section-base { padding-block: 6rem; }
  .section-sm   { padding-block: 5rem; }
  .section-hero {
    padding-top:    calc(5rem + 4rem);
    padding-bottom: 7rem;
  }
  .page-hero-inner {
    padding-top:    calc(5rem + 4rem);
    padding-bottom: 7rem;
  }
  .cta-banner { padding: 5rem 4rem; }
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Desktop (≥ 1024px) ---- */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; }
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Large (≥ 1280px) ---- */
@media (min-width: 1280px) {
  .service-card { padding: 2.5rem; }
  .project-card { padding: 2.5rem; }
}

/* ---- Print ---- */
@media print {
  .navbar, .footer, .nav-cta, .cta-banner { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
  .page-hero-inner { padding-top: 1rem; }
}



@media (max-width:991px){

.about-hero-flex{

    grid-template-columns:1fr;

    gap:48px;

}

.about-image{

    order:-1;

}

.about-content{

    max-width:100%;

}

.about-image img{

    max-width:100%;

    height:auto;

}

}

@media (max-width:480px){

.about-hero-flex .page-hero-title{

    font-size:clamp(2.1rem,9vw,2.8rem);

}

.about-image img{

    max-width:340px;

    margin-inline:auto;

}

}