.deco-devops {
  scale: 1.2;
  top: 80%;
  right: -10%;
  display: none;
}
.deco-arrow {
  top: 60%;
  left: 10%;
  display: none;
}
.strat-container {
  grid-template-columns: repeat(autofit, minmax(100px, 1fr));
  grid-template-rows: repeat(autofit, minmax(100px, 1fr));
  & #strat-app {
    grid-area: 1/1/4/3;
    position: relative;
    & .bento-img-container {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -80%);
    }
  }
  & #strat-tech {
    grid-area: 1/3/4/6;
  }
  & #strat-db {
    grid-area: 4/1/6/5;
    position: relative;
    & .bento-img-container {
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-65%);
    }
  }
  & #strat-ex {
    grid-area: 4/5/6/6;
    align-content: center;
    padding: 0 !important;
  }
  & #strat-dep {
    grid-area: 1/6/3/9;
  }
  & #strat-dev {
    grid-area: 3/6 /6/9;
    position: relative;
    & .bento-img-container {
      top: 100%;
      left: 50%;
      transform: translate(-50%, -65%);
    }
  }
  & ul li {
    list-style-type: disc;
    margin-left: 20px;
  }
}
@media only screen and (max-width: 1300px) {
  .strat-container {
    & #strat-app {
      & .bento-img-container {
        max-height: 30%;
      }
    }
    & #strat-db {
      & .bento-img-container {
        max-height: 50%;
      }
    }
    & #strat-dev {
      & .bento-img-container {
        max-height: 44%;
      }
    }
  }
}
@media only screen and (max-width: 1100px) {
  .strat-deco {
    display: flex;
  }
  .strat-container {
    & #strat-app {
      & .bento-img-container {
        display: none;
      }
    }
    & #strat-db {
      grid-area: 4/1/6/6;
      & .bento-img-container {
        display: none;
      }
    }
    & #strat-ex {
      display: none;
    }
    & #strat-dev {
      & .bento-img-container {
        display: none;
      }
    }
  }
}
@media only screen and (max-width: 900px) {
  .strat-container {
    grid-template-columns: repeat(autofit, minmax(100px, 1fr));
    grid-template-rows: repeat(autofit, minmax(100px, 1fr));
    & #strat-app {
      grid-area: 1/1/4/4;
    }
    & #strat-tech {
      grid-area: 1/4/4/9;
    }
    & #strat-db {
      grid-area: 4/1/7/5;
    }
    & #strat-dep {
      grid-area: 4/5/7/9;
    }
    & #strat-dev {
      grid-area: 7/1 /9/9;
    }
  }
}
@media only screen and (max-width: 750px) {
  .content-bento {
    padding: 50px;
    & .bento-item {
      padding: 20px 24px !important;
    }
  }
}
@media only screen and (max-width: 640px) {
  .strat-container {
    & .bento-item {
    }
    & #strat-app {
      grid-area: 1/1/2/2;
    }
    & #strat-db {
      grid-area: 2/1/3/2;
    }
    & #strat-tech {
      grid-area: 3/1/4/2;
    }
    & #strat-dep {
      grid-area: 4/1/5/2;
    }
    & #strat-dev {
      grid-area: 5/1/6/2;
    }
  }
  .deco-devops {
    display: none;
  }
}

.dm-milestone {
  width: 100%;
  height: 500vh;
  position: relative;
  /* background-image: url(../asset/wavy_bg1.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; */
  display: flex;
  flex-direction: column;
  & .scrollline {
    height: 100% !important;
    width: auto;
    z-index: 2;
  }
  & .milestone-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-image: url(../asset/wavy_bg1.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  & .milestone-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    & #milestone-title {
      opacity: 0;
      text-align: center;
      max-width: 60%;
    }
    & .glass-card {
      z-index: 2;
      opacity: 0;
    }
    & .milestone-number {
      z-index: 1;
      position: absolute;
      min-width: 200px;
      min-height: 200px;
      width: 30vw;
      height: 30vh;
      top: 50%;
      left: 50%;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    & .milestone-fadein {
      animation: opacityIn 800ms ease-in-out forwards;
    }
  }
}

.scrollline {
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}