@media (min-width: 319px) and (max-width: 883px) {
  /* =========================== start  general style ============================= */
  html,
  body {
    overflow-x: hidden;
  }
  main {
    width: 100%;
    padding-inline: 4%;
  }
  /* =========================== end  general style ============================= */

  /* =========================== start  aside style ============================= */
  aside {
    display: none;
  }
  /* =========================== end  aside style ============================= */

  /* =========================== start  header style ============================= */
  header {
    width: 100%;
    margin: 20px auto;
  }
  .header-parent {
    display: block;
  }
  .h-logo {
    margin-bottom: 20px;
  }
  .first-child {
    order: 1;
    width: 100%;
  }
  .left-child {
    order: 2;
  }
  .middel-child {
    order: 3;
  }
  .left-data-info {
    display: none;
  }
  .left-not {
    justify-self: center;
    align-self: flex-end;
  }
  .left-data {
    justify-self: center;
    align-self: flex-start;
    margin-right: 30px;
  }
  /* =========================== end  header style ============================= */

  /* =========================== start  first section  style ============================= */
  .f-s-parent {
    display: block;
  }
  .f-s-child {
    margin-bottom: 20px;
  }
  .f-s-child-h3 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.5rem;
    color: #101828;
  }
  .date-column,
  .status-column,
  .money-column {
    display: none;
  }
  /* =========================== end  first section  style ============================= */

  /* =========================== start  second section  style ============================= */
  .sec-section-parent {
    display: block;
  }
  .section2-grid-parent {
    display: grid;
    grid-template-columns: 60% 40%;
  }

  /* =========================== end  second section  style ============================= */

  /* ================================================== start   third section   style ========================================================== */
  .third-section-parent {
    display: block;
  }
  /* ================================================== end   third section   style ========================================================== */

  /* ================================================== start   fourth section   style ========================================================== */
  .flibcard {
    width: 100%;
    /* margin-bottom: 70px; */
    position: relative;
    transform-style: preserve-3d;
    transition: 0.5s;
    height: 200px;
  }
  .flibcard img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
    .sec3-f-ch-p-child {

    width: 100%;
  }
  /* ================================================== end   fourth section   style ========================================================== */
}
@media (min-width: 884px) and (max-width: 1104px) {
  aside {
    width: 10%;
    visibility: visible;
  }
  main {
    width: 90%;
    padding-inline: 3%;
  }
  .aside-container {
    height: 100vh;
    padding: 18px;
    overflow-y: auto;
  }
  .aside-header {
    display: block;
  }
  .aside-header-data h1,
  .aside-h-d-p,
  .icn-span,
  .btn-span,
  .aside-links-2-h2 {
    display: none;
  }
  .aside-header-icon {
    width: 50px;
    height: 50px;
    background-color: #2954f4;
    border-radius: 15px;
    color: #fff;
    font-size: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  .aside-btn {
    padding: 0px;
    margin-bottom: 12px;
    width: 50px;

    transition: 0.2s;
    border-radius: 10px;
  }
  .btn-icon {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    font-size: 1rem;
  }
  .aside-link a i {
    color: gray;
  }
  .home a i {
    color: #1447e6;
  }
  /* =========================== start  first section  style ============================= */

  .f-s-child-h3 {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.5rem;
    color: #101828;
  }
  /* =========================== end  first section  style ============================= */

  /* =========================== start  second section  style ============================= */
  .sec-section-parent {
    display: block;
  }
  .sec-section-right {
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 2%;
  }

  /* =========================== end  second section  style ============================= */
  /* =========================== start  third section  style ============================= */
  .third-section-parent {
    display: grid;
    grid-template-areas:
      "area2 area3   "
      "area1 area4   "
      ".      area4   ";
    gap: 10px;
  }
  .sec3-4-ch-card-parent {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }
  .sec3-fourth-child {
    height: fit-content;
  }
  /* =========================== end  third section  style ============================= */
}