/* Mobile Devices (max-width: 425px) */

@media (max-width: 425px) {
    body {
      /* font-size: 188px; */
    }

    .my-button{
      padding:  12px 28px;
    }

    .desktop{
        display: none;
    }

    .phone{
        display: block !important;
    }

    /*LOGIN PAGE*/
    .login-house{
        padding-top: 10vh;
    }
  
    .login-holder{
        width: 80%;
    }

    /* Dashboard */
    .div-padding{
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }

    .my-pb{
      padding-bottom: 1rem !important;
    }

    .sub-header{
      font-size: 18px;
    }

    /* Menu */
    .grid-container-student-menu-list{
      display: grid;
      gap: 0.5rem;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .menu-div h5{
      font-size: 1rem;
    }
  
    .menu-img-holder{
      width: 80%;
      height: auto;
      margin-bottom: 0.5rem;
    }

  /* Notice board & events */
  .grid-container-notice{
      display: block;
  }

  .announcement-div{
      display: grid;
      gap: 1rem !important;
      padding: 1rem 1.5rem 0 0.5rem !important;
      grid-template-columns: 10% 90%;
  }

  .announce-icon{
      width: 30px;
      height: 30px;
      padding-top: 0.7rem;
  }

  .announcement-details h5{
    font-size: 16px;
  }

  .announcement-details p{
    font-size: 12px;
  }
  
  /* SUBJECT PAGE */
  .level-select{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .subject-list{
    display: block;
  }

  /* TOPIC PAGE */
  .subject-topics-div{
      display: block;
  }

  .topic-div{
      gap: 0.5rem;
      grid-template-columns: 10% 75% 8%;
      padding: 0.4rem;
  }

  .topic-details h5{
    font-size: 0.8rem;
  }

  .lock{
    font-size: 1.3rem;
  }

  /* LESSON */
  .lesson-content-div{
    padding: 2rem var(--div-padding);
  }

  .video-div .video-player{
    height: 11.25rem;
  }

  .control-button .my-button{
    min-width: 14px !important;
    padding: 1rem 0.7rem !important;
    font-size: 0.9rem;
  }

  /* TASKS PAGE */
  .task-holder-div{
    padding-left: var(--div-padding);
    padding-right: var(--div-padding);
  }








  
}

/* Phone landscape mode */
@media (min-width: 426px) and (max-width: 739px) {
  /* body {
    font-size: 16px;
  } */

  .sub-header{
    font-size: 18px;
  }

  .announcement-div{
    display: grid;
    gap: 1rem !important;
    padding: 1rem 1.5rem 0 0.5rem !important;
    grid-template-columns: 10% 90%;
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.10);
  }

  .announce-icon{
      width: 30px;
      height: 30px;
      padding-top: 0.7rem;
  }

  .announcement-details h5{
    font-size: 16px;
  }

  .announcement-details p{
    font-size: 12px;
  }

  /* SUBJECT PAGE */
  .level-select{
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  
  .subject-list{
    display: grid;
    gap: 1.0rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* TOPIC PAGE */
  .topic-div{
      gap: 0.5rem;
      grid-template-columns: 10% 75% 8%;
      padding: 0.4rem;
  }

  .topic-details h5{
    font-size: 0.8rem;
  }

  .lock{
      font-size: 1.3rem;
  }
  
  .lesson-content-div{
    padding: 2rem var(--div-padding);
  }

  /* TASKS PAGE */
  .task-holder-div{
    padding-left: var(--div-padding);
    padding-right: var(--div-padding);
  }



  

}
  
  /* Tablets (min-width: 768px) and (max-width: 1024px) */
  @media (min-width: 740px) and (max-width: 1024px) {
    /* body {
      font-size: 16px;
    } */

  .sub-header{
    font-size: 18px;
  }

  .announcement-div{
    display: grid;
    gap: 1rem !important;
    padding: 1rem 1.5rem 0 0.5rem !important;
    grid-template-columns: 10% 90%;
    box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.10);
  }

  .announce-icon{
      width: 30px;
      height: 30px;
      padding-top: 0.7rem;
  }

  .announcement-details h5{
    font-size: 16px;
  }

  .announcement-details p{
    font-size: 12px;
  }
  
  /* SUBJECT PAGE */
  .level-select{
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }

  .subject-list{
    display: grid;
    gap: 1.0rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* TOPIC PAGE */

  .topic-div{
      gap: 0.5rem;
      grid-template-columns: 10% 76% 8%;
      padding: 0.4rem;
  }

  .topic-details h5{
    font-size: 0.8rem;
  }

  .lock{
      font-size: 1.3rem;
  }

  /* LESSON */
  .lesson-content-div{
    padding: 2rem var(--div-padding);
  }

  .video-div .video-player{
    height: 11.25rem;
  }

  /* TASKS PAGE */
  .task-holder-div{
    padding-left: var(--div-padding);
    padding-right: var(--div-padding);
  }

    
  
    

  


  }
  
  /* Desktops (min-width: 1280px) */
  
  @media (min-width: 1280px) {
    /* body {
      font-size: 18px;
    } */
  }