/* `xxl` applies to x-large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
}

/* `xl` applies to large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  section.welcome .container > div.first-cards > img {
    max-width: 500px;
  }
}

/* `lg` applies to medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
  /* } */

  /* `md` applies to small devices (landscape phones, less than 768px) */
  /* @media (max-width: 767.98px) {
} */

  /* `sm` applies to x-small devices (portrait phones, less than 576px) */
  /* @media (max-width: 575.98px) { */
  /* SECTION - WELCOME */
  section.welcome {
    margin-bottom: 0;
    padding: 0;
    height: calc(100vh - 140px); /* 67px */
    background-image: url("/assets/imgs/welcome-mobile.webp") !important;
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
  }
  section.welcome .container {
    height: 100%;
    justify-content: flex-end;
    gap: 60px;

    padding: 10px 10px;

    backdrop-filter: blur(6px) brightness(0.6);
    -webkit-backdrop-filter: blur(6px) brightness(0.6);
  }

  section.welcome .container > div.title span:first-of-type,
  section.welcome .container > div.title > div .effect-ball {
    display: none;
  }

  /* SECTION - WELCOME - BOX PAGE TITLE */
  section.welcome .container > div.page-title {
    display: flex;
  }

  /* SECTION - WELCOME - BOX PAGE TITLE */
  section.welcome .container > div.page-title {
    border-radius: 3px;
    border: 1px solid #8c96a5;
    padding: 40px 30px;

    background: rgba(0, 0, 0, 0.5);
  }
  section.welcome .container > div.page-title h2 {
    font-size: 24px;
    line-height: 31px;
    letter-spacing: 1.68px;
  }

  /* SECTION - WELCOME - SCROLL TO SEE */
  section.welcome .scroll-to-see {
    display: none;
  }

  /* SECTION - OVERVIEW */
  section.overview {
    margin-bottom: 0;
  }
  section.overview .container {
    padding: 0;
    flex-direction: column;
  }

  /* SECTION - OVERVIEW - CARD */
  section.overview .card {
    gap: 60px;
    padding: 10px 10px 30px 10px;
    border-radius: 0;
  }

  /* SECTION - SCOPE/DEVELOPMENT */
  section.scope,
  section.development {
    padding: 30px 0;
  }

  /* SECTION - SCOPE/DEVELOPMENT - CARD SKILL */
  section.scope .skills,
  section.development .skills {
    display: flex;
    flex-direction: column;
  }

  /* SECTION - HOW WE DO */
  section.how-we-do .tools {
    grid-template-columns: repeat(2, 1fr);
  }
  section.how-we-do .tools > div {
    height: 167px;
    min-height: auto;
    padding: 20px;
  }
  section.how-we-do .tools > div img {
    object-fit: contain;
  }
  section.how-we-do .tools > div h5 {
    white-space: nowrap;
  }

  /* SECTION - PROTOTYPE */
  section.prototype.image-effect {
    margin-bottom: -50px; /* IMAGE EFFECT */
  }
  section.prototype .container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  /* SECTION - PROTOTYPE - CONTENT - LIST */
  section.prototype .content ul li {
    padding: 0 24px;
  }

  /* SECTION - A LOT OF FEATURES */
  section.lot-of-features .features {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* SECTION - BIG IDEAS */
  section.big-ideas .container > img {
    bottom: 150px;
    right: 0;
  }

  /* SECTION - BIG IDEAS - TWO CARD */
  section.big-ideas .two-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  /* SECTION - BIG IDEAS - DESIGN-SPRINT */
  section.big-ideas .container .design-sprint > img {
    bottom: -335px;
    top: inherit;
    right: 0;
  }

  /* SECTION - BIG IDEAS - BLUR CARD */
  section.big-ideas .card-blur {
    backdrop-filter: blur(50px) brightness(0.5);
    -webkit-backdrop-filter: blur(50px) brightness(0.5);

    margin-top: 180px; /* IMAGE EFFECT */
  }
  section.big-ideas .card-blur > div {
    flex-direction: column;
    gap: 26px;
  }

  /* SECTION - WHY DESIGN SPRINT */
  section.why-design-sprint {
    margin-bottom: 30px;
  }
  section.why-design-sprint .container {
    flex-direction: column;
  }
  section.why-design-sprint .card > div {
    margin: 0 -20px 15px -30px;
    padding: 15px 20px 15px 30px;

    background: var(--black);
  }
}