@media (max-width:370px){
  .home .video-container video{
    position: absolute;
    top:0px; 
    left: 0;
    z-index: -1;
    width:100%;
    object-fit: cover;
    .caption {
      font-size: 20px;
      padding: 5px;
    }
    video {
      object-fit: contain;
      width: 100%;
    }
  }
}

@media (max-width: 600px) { 
  header { background-color: #814caf; color: white; } nav ul { display: flex; flex-direction: column; padding: 0; } nav ul li { margin-bottom: 10px; } nav ul li a { background-color: #f4f4f4; display: block; padding: 10px; text-decoration: none; } main section { margin-bottom: 20px; } footer { background-color: #eee; padding: 10px; } } 
 
  /* Desktop styles */ 
  @media (min-width: 601px) { 
    nav ul { display: flex; justify-content: center; } nav ul li { margin: 0 10px; } nav ul li a { padding: 10px; text-decoration: none; color: #333; }
} 
 
/* media queries  */

@media (max-width:1200px){

  html{
    font-size: 55%;
  }

}

@media (max-width:991px){

  header{
    padding:2rem;
  }

  section{
    padding:2rem;
  }

}

@media (max-width:768px){
  .carousel12 {
    width: 100%;
  }
  #menu-bar{
    display: initial;
  }

  header .navbar{
    position: absolute;
    top:100%; right:0; left: 0;
    background: #333;
    border-top: .1rem solid rgba(255,255,255,.2);
    padding:1rem 2rem;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }

  header .navbar.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }

  header .navbar a{
    display: block;
    border-radius: .5rem;
    padding:1.5rem;
    margin:1.5rem 0;    
    background:#222;
    text-decoration: none;
  }

}

@media (max-width:450px){

  html{
    font-size: 50%;
  }

  .heading span{
    font-size: 2.5rem;
  }

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

}