@charset "UTF-8";
/* CSS Document */

/* -----------------------------
           Mobile
----------------------------- */

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

	.case-study-layout {
    padding: 20px;
    max-width: 90vw;
  }

  .image-grid-main,
  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .white-box-para {
    font-size: 1rem;
    padding: 0 20px;
    line-height: 1.5;
    text-align: left;
  }
	
  .white-box-wrapper {
    max-width: 95vw;
    padding: 20px;
  }
	
  .white-box-para2 {
    max-width: 90vw;
    font-size: 1rem;
  }

	.white-box-header {
    font-size: clamp(2rem, 10vw, 3rem);
    text-align: left;
  }

 .buffer {
    min-height: auto;
    height: auto;
    padding: 60px 0;
  }

  .buffer-header {
  font-size: 18vw;
  text-align: center;
  display: block;
  width: 100%;
  line-height: 1.1;
}

  .buffer-subtext {
    font-size: 5vw;
  }

  .image-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

  .image-grid img {
    width: 100%;
  }


  .tile-wrapper {
    width: 80vw;
  }

  .slider div img {
    max-width: 80vw;
  }

  .important-text {
    font-size: 12vw;
  }

  .subtext {
    font-size: 5vw;
  }

.section-modal {
  align-items: flex-start;
  overflow-y: auto;
  padding: 15px;
}

.section-modal video,
.section-modal img {
  max-width: 100%;
  max-height: 70vh;
}

  .scroll-track {
    animation: scroll-left 50s linear infinite; /* slow it down */
  }

}