@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;
  }
}
body.cases .ftco-section .col-12 > p {
  text-align: justify;
  text-justify: inter-word;
}


/* =========================
   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;
  }

}

body.page-products .ftco-section {
  margin-top: 40px;
}

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

/* 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 (min-width: 769px) {

  /* Move BOTH images down */
  body.cases .img.img-2 {
    margin-top: 0px;
  }

  /* Move FIRST image (inside <center>) further down */
  body.cases .img.img-2 center {
    display: block;
    margin-top: 50px;
  }
  body.cases .img.img-2 > img:last-child {
    margin-top: 170px;}
  
}



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

  /* Intro paragraph */
  body.cases .col-12 > p {
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 auto 24px;
  }

  /* Image column wrapper */
  body.cases .img.img-2 {
    padding-right: 0;
    margin: 0;                 /* kill container gap */
  }

  /* Images themselves */
  body.cases .img.img-2 img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 16px;       /* controlled spacing between images */
  }

  /* Remove bottom margin after last image */
  body.cases .img.img-2 img:last-child {
    margin-bottom: 0;
  }

  /* Text column wrapper */
  body.cases .wrap-about {
    padding: 0;
    margin: 0;
  }

  /* FIRST heading after images – kill top margin */
  body.cases .wrap-about > .heading-section:first-child h2 {
    margin-top: 0;
  }

  /* Safety: remove theme heading spacing */
  body.cases .heading-section {
    margin-top: 0;
  }

  /* CTA links */
  body.cases h2.mb-6 a {
    font-size: 15px;
  }
}

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



/*index*/

/* ================================
   HOME PAGE 
   ================================ */

body.page-home .hero-wrap {
  position: relative;
  overflow: hidden;
}

/* Video background */
body.page-home #bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;

  /* restore depth & contrast */
  filter: contrast(1.22) saturate(1.12) brightness(0.92);
}

/* Overlay – LESS GREY, MORE DEPTH */
body.page-home .hero-wrap .overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  /* darker blacks near text, transparent elsewhere */
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0.72) 0%,
      rgba(0,0,0,0.48) 38%,
      rgba(0,0,0,0.18) 65%,
      rgba(0,0,0,0.05) 100%
    );
}

/* Content above video */
body.page-home .hero-wrap .container {
  position: relative;
  z-index: 2;
}

/* Headline */
body.page-home .hero-wrap h1 {
  color: #ffffff;
  font-size: 60px !important;
  line-height: 1.2;
  font-weight: 00;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 6px 16px rgba(0,0,0,0.7);
}

/* Paragraph */
body.page-home .hero-wrap p {
  color: #ffffff;
  font-size: 23px !important;
  line-height: 1.6;
  margin-bottom: 18px;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.9),
    0 4px 12px rgba(0,0,0,0.7);
}

/* CTA */
body.page-home .hero-wrap .btn-primary {
  background: #f96d00;
  border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}

body.page-home .hero-wrap .btn-primary:hover {
  background: #ff7e1b;
}
/* ================================
   HERO NAV 
   ================================ */

/* Default nav links (except active/home) */
body.page-home .navbar-nav .nav-link {
  color: #f2f4f7; 
  text-shadow: 0 2px 3px rgba(0,0,0,0.85);
  transition: color 0.2s ease;
}

/* Hover state */
body.page-home .navbar-nav .nav-link:hover {
  color: #ffffff;
}
body.page-home .navbar-nav .nav-link:hover {
  text-shadow: none;
}

/* ACTIVE / HOME link – KEEP GREEN */
body.page-home .navbar-nav .nav-item.active .nav-link,
body.page-home .navbar-nav .nav-link.active {
  color: #3ad07a; 
  
}

body.page-home .navbar-nav .nav-link {
  font-size: 18px;
}

/* TeknTrash logo shadow */
body.page-home .navbar-brand img,
body.page-home .navbar-brand {
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}


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

  body.page-home #bg-video {
    filter: contrast(1.15) saturate(1.05) brightness(0.9) !important;
  }

  body.page-home .hero-wrap .overlay {
    background: rgba(0,0,0,0.8) !important;
  }

  body.page-home .hero-wrap .text {
    text-align: center !important;
    padding-bottom: 20px !important;
    padding-top: 20px !important;
    

    transform: translateY(-100px);
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
  }

  body.page-home .hero-wrap h1 {
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.2px !important;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 16px !important;
    padding: 8px 12px;
   
  }

  body.page-home .hero-wrap p {
    font-size: 20px !important;
    line-height: 1.2 !important;
    width: 100%
    max-width: 300px !important;
    margin: 0 auto 14px !important;
    padding: 6px 14px;
    
   
  }

  body.page-home .hero-wrap .btn-primary {
    display: inline-block !important;
  }
}