@media (max-width: 991px) {
  html {
    font-size: 55%;
  }

  .header {
    padding: 1.5rem 2rem;
  }

  section {
    padding: 1.5rem 2rem;
  }
}

@media (max-width: 786px) {

    #menu-btn{
      display: inline-block;
    }

    .header .navbar{
      width: 30rem;
      position: absolute;
      left:0; 
      top:100%;
      padding: 0rem 2rem;
      background:#f7f7f7;
      border: 0.1rem solid #F7B32B;
      -webkit-transition: 0.2s linear;
      -moz-transition: 0.2s linear;
      -o-transition: 0.2s linear;
      transition: 0.2s linear;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      height: calc(100vh - 6rem);
      overflow-y: auto;
      -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
      box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  }

  .header .navbar.active{
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }

  .header .navbar a{
      display: block;
      color: #0a0903;
      padding: 1.5rem 0;
      margin: 1rem 0;
  }

  .navbar::-webkit-scrollbar{
      width: 0.8rem;
  }

  .navbar::-webkit-scrollbar-thumb{
      border-radius: 1rem;
      background-color: #0a0903;
  }

  .navbar::-webkit-scrollbar-track{
      background: transparent;
  }

  section, .header{
    padding: 2rem;
  }

  .home .content{
      width: 100%;
  }
}

@media (max-width: 450px) {
  html {
    font-size: 50%;
  }
  
  section, .header{
    padding: 1rem;
  }

  .contact .form{
      width: 100%;
  }

  .contact form .inputBox input {
    width: 100%;
  }

  .about-info{
    flex-wrap: wrap;
  }

  .header .navbar{
    width: 100%;
  }

  .book-table .form .input-box .box{
    width: 100%;
  }

}