/* Mobile spacing tweaks
   - Add vertical spacing between CTA and following images on small screens
   - Stack CTA buttons in hero for better spacing and touch targets
   - Scope changes to hero / portfolio / about sections only
*/
@media (max-width: 768px) {
  /* Make CTA buttons stack and occupy full width for simpler spacing */
  .parallax-hero .btn-custom,
  .about-section .btn-custom,
  .portfolio-section .btn-custom,
  .services-section .btn-custom {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    margin: 0 0 1.25rem 0 !important; /* spacing below CTA */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* If there are multiple CTA buttons next to each other, give bottom spacing to each
     and a small gap when they remain side-by-side on slightly larger mobile widths */
  .parallax-hero .btn-custom + .btn-custom,
  .portfolio-section .btn-custom + .btn-custom,
  .about-section .btn-custom + .btn-custom {
    margin-top: 0.5rem !important;
  }

  /* Extra spacing between CTA and the next media block (images / cards) */
  .parallax-hero .btn-custom + img,
  .parallax-hero .btn-custom + .img-fluid,
  .portfolio-section .btn-custom + img,
  .portfolio-section .btn-custom + .portfolio-card,
  .about-section .btn-custom + img,
  .about-section .btn-custom + .img-fluid {
    margin-top: 1.25rem !important;
  }

  /* Ensure thumbnails / cards below CTAs don't visually "touch" the button edges */
  .portfolio-card,
  .featured-card,
  .blog-card,
  .project-card {
    margin-top: 1rem !important;
  }

  /* Small visual tweak: increase space between feature-list and stacked CTAs in hero */
  .parallax-hero .feature-list {
    margin-top: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
}
/* About section: ensure space between CTA and image when columns stack */
@media (max-width: 768px) {
  /* Make CTA full-width and add bottom spacing */
  .about-section .btn-custom,
  .container.my-5 .btn-custom,
  .about-section .btn,
  .container.my-5 .btn {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.25rem !important; /* space below CTA */
    box-sizing: border-box;
  }

  /* When two columns stack, add top margin to the second column's image */
  .about-section .row > .col-md-6 + .col-md-6 img,
  .container.my-5 .row > .col-md-6 + .col-md-6 img,
  .about-section .row > [class*="col-"] + [class*="col-"] img,
  .container.my-5 .row > [class*="col-"] + [class*="col-"] img {
    margin-top: 1.25rem !important;
    display: block;
  }

  /* If image uses .img-fluid inside the second column */
  .about-section .row > .col-md-6 + .col-md-6 .img-fluid,
  .container.my-5 .row > .col-md-6 + .col-md-6 .img-fluid {
    margin-top: 1.25rem !important;
  }

  /* Neutralize possible negative top offsets on stacked columns */
  .about-section .row > .col-md-6 + .col-md-6,
  .container.my-5 .row > .col-md-6 + .col-md-6 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}