@media (max-width: 768px) {

  /* Remove forced full-height sections */
  .js-fullheight,
  .hero-wrap,
  .hero-wrap-2 {
    height: auto !important;
    min-height: auto !important;
  }

  /* Disable flex layouts that cause overlap 
  .row,
  .d-flex,
  .align-items-stretch {
    display: block !important;
  } */

  /* Force Bootstrap columns to stack vertically 
  .col-md-5,
  .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }*/

  .order-md-last {
    order: 0 !important;
  }

  /* Image section must take real vertical space */
  .img {
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 0 15px !important;
  }

  .img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Text section must flow AFTER image */
  .wrap-about {
    width: 100% !important;
    padding: 15px !important;
    margin-top: 0 !important;
  }

  /* Fix text overlapping */
  .wrap-about p,
  .img p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

  /* Headings */
  h2 {
    font-size: 20px !important;
    margin: 20px 0 12px !important;
  }

  /* Hero text */
  .hero-wrap-2 h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    padding: 0 12px !important;
  }

  .breadcrumbs {
    font-size: 12px !important;
  }

  /* Section spacing 
  .ftco-section {
    padding: 30px 0 !important;
  }*/
}
/*@media (max-width: 768px) {

  
  .col-md-7.d-flex {
    display: block !important;
    height: auto !important;
  }

  
  .img.img-2 {
    height: auto !important;
    min-height: auto !important;
    position: static !important;
    overflow: visible !important;
  }

  
  .img.img-2 h2 {
    margin-top: 20px !important;
  }

  .img.img-2 p {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
  }

  
  .img.img-2 a {
    display: block !important;
    margin-top: 20px !important;
  }

  .img.img-2 a img {
    max-width: 100% !important;
    height: auto !important;
  }
}*/


@media (max-width: 768px) {

  /* 1. Push hero content slightly down from the top */
  .hero-wrap-2 .slider-text {
    padding-top: 20px !important;
  }

  /* Also give breadcrumbs breathing room */
  .breadcrumbs {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
  }

  /* 2. Make MENU look like a button */
  .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
  }

  .navbar-toggler span,
  .navbar-toggler {
    color: #ffffff !important;
  }
}

/* =========================
   ALPHA PAGE – MOBILE
   ========================= */
@media (max-width: 768px) {

  /* Remove forced full-height sections */
  .page-alpha .js-fullheight,
  .page-alpha .hero-wrap,
  .page-alpha .hero-wrap-2 {
    height: auto !important;
    min-height: auto !important;
  }

  /* Disable flex layouts that cause overlap */
  .page-alpha .row,
  .page-alpha .d-flex,
  .page-alpha .align-items-stretch {
    display: block !important;
  }

  /* Force Bootstrap columns to stack vertically */
  .page-alpha .col-md-5,
  .page-alpha .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .page-alpha .order-md-last {
    order: 0 !important;
  }

  /* Image section */
  .page-alpha .img {
    width: 100% !important;
    margin-bottom: 20px !important;
    padding: 0 15px !important;
  }

  .page-alpha .img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Text section */
  .page-alpha .wrap-about {
    width: 100% !important;
    padding: 15px !important;
    margin-top: 0 !important;
  }

  /* Text spacing */
  .page-alpha .wrap-about p,
  .page-alpha .img p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
  }

  /* Headings */
  .page-alpha h2 {
    font-size: 20px !important;
    margin: 20px 0 12px !important;
  }

  /* Hero text */
  .page-alpha .hero-wrap-2 h1 {
    font-size: 20px !important;
    line-height: 1.25 !important;
    padding: 0 12px !important;
  }

  /* Breadcrumbs */
  .page-alpha .breadcrumbs {
    font-size: 12px !important;
    margin: 10px 0 !important;
  }

  /* Section spacing */
  .page-alpha .ftco-section {
    padding: 30px 0 !important;
  }

  /* Critical img-2 fix */
  .page-alpha .col-md-7.d-flex {
    display: block !important;
    height: auto !important;
  }

  .page-alpha .img.img-2 {
    height: auto !important;
    min-height: auto !important;
    position: static !important;
    overflow: visible !important;
  }

  .page-alpha .img.img-2 h2 {
    margin-top: 20px !important;
  }

  .page-alpha .img.img-2 p {
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
  }

  .page-alpha .img.img-2 a {
    display: block !important;
    margin-top: 20px !important;
  }

  .page-alpha .img.img-2 a img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hero spacing from navbar */
  .page-alpha .hero-wrap-2 .slider-text {
    padding-top: 20px !important;
  }

  /* Mobile menu button */
  .page-alpha .navbar-toggler {
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
  }

  .page-alpha .navbar-toggler,
  .page-alpha .navbar-toggler span {
    color: #ffffff !important;
  }
}


@media (max-width: 768px) {

  /* =========================
     ABOUT PAGE ONLY
     ========================= */

  .page-about html,
  .page-about body {
    overflow-x: hidden !important;
  }

  .page-about img,
  .page-about video {
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Navbar + hero spacing */
  .page-about .hero-wrap-2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .page-about .hero-wrap-2 .slider-text {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  .page-about .breadcrumbs {
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    font-size: 12px;
  }

  .page-about .hero-wrap-2 h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
    padding: 0 12px;
  }

  /* Kill flex overlap (ABOUT only) */
  .page-about .row,
  .page-about .d-flex,
  .page-about .align-items-stretch {
    display: block !important;
  }

  .page-about .col-md-5,
  .page-about .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .page-about .order-md-last {
    order: 0 !important;
  }

  /* Video block */
  .page-about .img.img-2 {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
    padding: 0 15px;
  }

  .page-about video#bg-video {
    width: 100% !important;
    height: auto !important;
  }

  /* Text content */
  .page-about .wrap-about {
    padding: 15px !important;
  }

  .page-about .wrap-about h2 {
    font-size: 20px !important;
    margin-bottom: 12px;
  }

  .page-about .wrap-about p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 12px;
  }

  .page-about .wrap-about a img {
    max-width: 70% !important;
    margin-top: 15px;
  }

  /* Bootstrap row overflow fix */
  .page-about .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1368px) {

  /* ALPHA – constrain ONLY the robot image */
  .page-alpha img[src*="robot"] {
    max-width: 520px !important;
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}


@media (min-width: 768px) and (max-width: 1199px) {

  /* ABOUT page – keep video within readable width */
  .page-about video#bg-video {
    max-width: 600px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* =========================
   CASES PAGES – MOBILE FIX
   ========================= */
@media (max-width: 768px) {

  .page-cases .row,
  .page-cases .d-flex,
  .page-cases .align-items-stretch {
    display: block !important;
  }

  .page-cases .col-md-5,
  .page-cases .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .page-cases .order-md-last {
    order: 0 !important;
  }

  /* Media column */
  .page-cases .img.img-2 {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    margin-bottom: 20px !important;
    padding: 0 15px !important;
  }

  /* Video + image */
  .page-cases video,
  .page-cases img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Text column */
  .page-cases .wrap-about {
    padding: 15px !important;
  }
}

/* =========================
   PRESS / BLOG ARTICLE
   ========================= */

/* Images must never be fixed width */
.page-press-article img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin: 20px auto;
}

/* Tablet & small desktop – widen article */
@media (min-width: 768px) and (max-width: 1199px) {
  .page-press-article .col-md-8 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

/* =========================
   PRESS PAGE – FIX HERO OVERLAP
   ========================= */

.page-press-article .hero-wrap-2 .slider-text {
  padding-top: 140px !important;
}

/* =========================
   PRESS ARTICLE – HERO TITLE
   ========================= */

.page-press-article .hero-wrap-2 h1 {
  font-size: 48px !important;
  line-height: 1.15 !important;
}

/* Small desktop / laptop */
@media (max-width: 1200px) {
  .page-press-article .hero-wrap-2 h1 {
    font-size: 40px !important;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .page-press-article .hero-wrap-2 h1 {
    font-size: 32px !important;
  }
}

@media (max-width: 768px) {

  /* PRESS PAGE: stop forcing flex layout */
  .press-page .row.d-flex,
  .press-page .col-md-10.d-flex {
    display: block !important;
  }

  /* each card becomes full width + spaced */
  .press-page .blog-entry {
    width: 100% !important;
    margin-bottom: 22px !important;
  }

  /* optional: ensure image block behaves */
  .press-page .blog-entry .block-20 {
    width: 100% !important;
    display: block !important;
  }

  /* optional: small gap between image and heading */
  .press-page .blog-entry .heading {
    margin-top: 10px !important;
  }
}

/*Products Page*/
@media (max-width: 768px) {

  /* PRODUCTS PAGE — kill flex stretch that causes overlap */
  .page-products .col-md-7.d-flex {
    display: block !important;
    height: auto !important;
  }

  /* Ensure image container grows naturally */
  .page-products .img.img-2 {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Images must push content down, not overlap */
  .page-products .img.img-2 img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 16px !important;
  }

  /* Stack text column properly */
  .page-products .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
  }

}

/* =========================
   CASES PAGE – DESKTOP / TABLET
   ========================= */
.cases .ftco-section {
  padding-top: 60px;
  padding-bottom: 60px;
}

.cases .row {
  row-gap: 40px; /* vertical rhythm without <br> */
}

/* Intro paragraph */
.cases .col-12 > p {
  max-width: 900px;
  margin: 0 auto 40px auto;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
  color: #333;
}

/* Image column */
.cases .img.img-2 {
  padding-right: 20px;
}

.cases .img.img-2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Text column */
.cases .wrap-about {
  padding-left: 20px;
}

.cases .wrap-about h2 {
  margin-top: 0;
  margin-bottom: 16px;
}

.cases .wrap-about p,
.cases .wrap-about {
  line-height: 1.7;
}

@media (max-width: 768px) {
  .cases .col-12 > p {
    text-align: left;
    margin-bottom: 30px;
    font-size: 14px;
  }

  .cases .img.img-2 {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .cases .wrap-about {
    padding-left: 0;
  }
}

/* Cases page – CTA links */
.cases h2.mb-6 a {
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .cases h2.mb-6 a {
    font-size: 15px;
  }
}