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

  .header {
    padding: 1.5rem 2rem;
  }

  section {
    padding: 1.5rem 2rem;
  }
}

@media (max-width: 786px) {
    #menu{
      display: inline-block;
    }

    .header .navbar-main{
      width: 30rem;
      position: absolute;
      right:0; 
      top:100%;
      padding: 1rem;
      background:#f7f7f7;
      border: 0.1rem solid #00a8e0;
      -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-main.active{
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }

  .header .navbar-main a{
      display: block;
      width: 70%;
      color: #00a8e0;
      padding: 1.5rem 0;
      margin: 1rem 0;
  }

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

  .navbar-main::-webkit-scrollbar-thumb{
      border-radius: 1rem;
      background-color: #00a8e0;
  }

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

  .review .container .info .image-container {
    /* width: 100px; */
    position: absolute;
    top: -5rem;
    left: 38%;
    right: 45%;
  }

  .review .container .info .content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }

  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%;
  }

  .review .container .info .image-container {
    position: absolute;
    top: -5rem;
    left: 34%;
    right: 45%;
  }

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

  .teacher .teacher-item .image{
    height: 45rem;
  }
  
  .header .navbar-main{
    width: 100%;
  }
}