/* ================= GLOBAL MOBILE CENTER FIX ================= */

*{
  box-sizing:border-box;
}

html, body{
  width:100%;
  overflow-x:hidden !important;
}

/* MAIN CONTAINER FIX */
@media (max-width:768px){

  .doc-container{
    margin:100px auto 60px !important;
    padding:0 18px !important;
  }

  .doc-header{
    text-align:center !important;
  }

  .doc-title{
    font-size:28px !important;
    line-height:1.2 !important;
  }

  .doc-pfp{
    width:85px !important;
  }

  /* SECTION BOX */
  .section-box{
    padding:20px !important;
    border-radius:16px !important;
  }

  .section-title{
    font-size:18px !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .doc-text{
    font-size:14px !important;
  }

  /* GRID FIX */
  .perks-scroll{
    grid-template-columns:1fr !important;
  }

  /* BUTTON FIX */
  .action-btns{
    flex-direction:column !important;
    gap:15px !important;
  }

  .btn-pay,
  .btn-contact{
    width:100% !important;
    text-align:center !important;
  }

  /* MODAL FIX */
  .modal-content{
    width:92% !important;
    max-width:92% !important;
  }

}