#slider{
    margin:0 auto;
    /* width:80%; */
    overflow:hidden;
  }
  
  .slides{
    overflow:hidden;
    animation-name:fade;
    animation-duration:1s;
    display:none;
  }
  
  img{
    width:100%;
  }
  
  #dot{
    margin:0 auto;
    text-align:center;
  }
  .dot{
    display:inline-block;
    border-radius:50%;
    background:#d3d3d3;
    padding:8px;
    margin:10px 5px;
  }
  
  .active{
    background:black;
  }
  
  @media (max-width:567px){
    #slider{
      width:100%;
  
    }
  }
  
  #heading{
    display:block;
    text-align:center;
    font-size:2em;
    margin:10px 0px;
  
  }