@media (max-width: 768px) {
  /* font-size */

  .font-size-16 {
    font-size: 16px;
    line-height: 20px;
  }

  .font-size-20 {
    font-size: 20px;
    line-height: 24px;
  }

  .font-size-24 {
    font-size: 24px;
    line-height: 26px;
  }

  .font-size-26 {
    font-size: 22px;
    line-height: 26px;
  }

  .font-size-48 {
    font-size: 40px;
    line-height: 46px;
  }

  .font-size-64 {
    font-size: 54px;
    line-height: 60px;
  }

  /* home  */

  .section-2 {
    padding: 40px 0;
  }

  .section-2-1 {
    gap: 20px;
  }

  .section-2-2-1 {
    gap: 20px;
  }
  .section-2-2-2 {
    flex-direction: column !important;
    gap: 16px;
  }

  .section-2-2-2-1 {
    gap: 16px;
    padding: 16px;
  }

  /* about */

  .section-3 {
    padding: 40px 0;
  }

  .section-3-1 {
    gap: 20px;
  }

  .section-3-2 {
    margin-top: 50px;
    gap: 16px;
  }

  .section-3-3 {
    margin-top: 50px;
    gap: 20px;
  }

  .section-3-2-1 {
    flex-direction: column !important;
    gap: 16px;
  }

  .section-3-2-1-1 {
    gap: 16px;
    padding: 16px;
  }

  /* services */

  .section-4 {
    padding: 40px 0;
  }

  .section-4-2 {
    margin-top: 60px;
    gap: 20px;
    flex-direction: column !important;
  }

  .section-4-2-1 {
    gap: 16px;
    padding: 16px;
  }
}

@media (max-width: 576px) {
  body {
    padding: 0 16px !important;
  }

  /* font-size */

  .font-size-20 {
    font-size: 18px;
    line-height: 23px;
  }

  .font-size-26 {
    font-size: 18px;
    line-height: 18px;
  }

  .font-size-48 {
    font-size: 35px;
    line-height: 39px;
  }

  .font-size-64 {
    font-size: 40px;
    line-height: 46px;
  }

  .scrolled {
    position: relative;
    top: 0;
    width: 100%;
    background: #0000008d; /* Solid when scrolling */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 5;
    padding: 0 !important;
  }

  .navbar-1-2 {
    display: none;
  }

  .section-2-1-2 {
    padding: 0 40px;
  }

  .section-2-2 {
    margin-top: 50px;
    gap: 30px;
  }
  
  .btn{
      --bs-btn-font-size: 0.7rem !important;
  }

  .section-2-2-1 {
    gap: 16px;
  }

  .section-2-1-2 {
    padding: 0 40px;
}
}