@media screen and (max-width: 768px) {
  /* Transition from multi-column grids to single-column phone layouts */

  .glimpsebg .row {
        display: flex;
        flex-wrap: wrap;
    }

    .glimpsebg .video-col {
        order: 1;
    }

    .glimpsebg .content-col {
        order: 2;
    }

    .glimpsebg .col-6 {
        width: 100%;
    }


  /* ---------- HEADER ---------- */
  .mainheader {
    height: 72px;
    padding: 10px 50px;
  }
/* 
  .leftside svg {
    width: 180px;
    height: 54px;
  } */

  /* ---------- HERO ---------- */
  .herosectionbg {
    height: 100svh;
    min-height: 520px;
  }

  .hero-morph-svg {
    width: 680px;
    height: 680px;
  }

  .hero-morph-caption {
    padding: 0 16px;
  }

  .hero-text {
    font-size: 72px;
  }

  .the-text {
    font-size: 72px;
  }

  .collective-text {
    font-size: 72px;
  }

  .hero-line {
    display: none;
  }

  /* ---------- SERVICES / VISION ---------- */
  .horizontal-panel {
    padding: 0 24px;
  }

  .visiontitle2 {
    font-size: 90px;
    line-height: 1.1;
  }

  .visiontitle1 {
    font-size: 16px;
  }

  .card-text {
    font-size: 90px;
  }

  .vision-card-image img {
    min-width: 0;
    min-height: 0;
  }

  /* ---------- CURIOUS / OUR STORY ---------- */
  .curiousbg {
    min-height: 560px;
    padding: 48px 20px;
  }

  .curious-image {
    width: min(1268px, 100vw);
  }

  .curious-title2,
  .green-word {
    font-size: 64px;
  }

  .desktop-break {
    display: none;
  }

  .main-curious-desc {
    width: 100%;
    max-width: 100%;
  }

  .main-curious-desc p,
  .main-curious-desc span {
    font-size: 18px;
  }

  /* ---------- BRANDS ---------- */
  .brandsbg {
    min-height: 420px;
  }

  .brandstitle2,
  .brandsothertext {
    font-size: 45px;
  }

  .brandslogosbox{
    gap: 25px;
  }

  .brands-marquee {
    height: 80px;
  }

  .brands-set {
    gap: 50px;
    padding: 0 20px;
  }

  .row-left .brand-logo,
  .row-right .brand-logo {
    transform-origin: center;
  }

  .leftbrandsgrediant,
  .rightbrandsgrediant {
    width: 90px;
  }

  /* ---------- DESIGNED WELL ---------- */
  .designedwellbg {
    min-height: 340px;
  }

  .designedtext,
  .designedothertext {
    font-size: 90px;
  }

  .invertedicon {
    font-size: 2.2rem;
    top: -2.4rem;
  }

  /* ---------- BLACK SPACER ---------- */
  .blackboxbg {
    height: 80px;
  }

  /* ---------- VERTICAL SLIDER ---------- */
  .verticalslidertrack {
    gap: 6px;
    grid-template-columns: repeat(3, minmax(0, 230px));
  }

  .verticalimg {
    border-radius: 8px;
  }

  /* ---------- FOOTER ---------- */
  .mainfooterbg {
    height: auto;
    padding-bottom: 32px;
  }

  .extra-footer-padding {
    padding: 24px 9px 0;
  }

  .footertitle,
  .extraordinarybg {
    font-size: 48px;
    width: auto;
  }

  .footertitle {
    max-width: 100%;
  }

  .emailtext {
    font-size: 32px;
  }

  .footerleftbox {
    gap: 24px;
    padding-bottom: 50px;
  }

  .footerrightbox {
    max-width: 100%;
  }

  /* .footerrightsbox {
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 40px;
    padding: 0 20px;
  } */

  /* .footerline {
    order: 3;
    width: 100%;
    flex: 0 0 100%;
  } */
   #work > .container > .row:nth-child(3) > [class*="col-"]:first-child > article,
    #work > .container > .row:nth-child(5) > [class*="col-"]:first-child > article {
        align-items: flex-start !important;
        min-width:auto;
        left: 0px;
    }
    #work .glimpsegrediant, #work .glimpsegrediant3, #work .glimpsegrediant2, #work .glimpsegrediant4{
        background: unset;
    }
}