#cont>div{
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
      
  }
  .pera{
      font-size: large;
      font-weight: bold;
      padding-left: 10px;
  }
  #cont{
      width: 90%;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(4,1fr);
      grid-gap: 20px;
      margin-top: 1%;
      padding-bottom: 1%;
  }
  #checkoutdiv{
      display: flex;
      /* justify-content: space-between; */
      box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
      width: 90%;
      margin: auto;
      margin-bottom: 5%;
  }
  #productimage{
      width: 100%;
  }
  #title{
      font-family: sans-serif;
      padding-left: 10px;
      padding-right: 10px;
  }
  #first{
      display: flex;
      justify-content: space-between;
      align-items: center;
      
  }
  .price{
      font-size: larger;
      font-weight: bold;
      padding-left: 10px;
      font-family: sans-serif;
  }
  .btn{
      margin-right:40px;
      background-color: rgb(1,136,73);
      color: white;
      border: 0px;
      line-height: 25px;
      font-family: sans-serif;
      font-weight: 600;
    

  }
  #pagetitle{
      font-family: sans-serif;
      font-size: 25px;
      padding: 20px 0 0 80px;
  }
  #total{
    font-family: sans-serif;
    font-size: 25px;
    padding: 40px 0 40px 80px;
    margin-left: 20%;
    margin-right: 80px;
  }
  button{
      font-size: 20px;
      background-color: green;
      color: white;
      font-family: sans-serif;
      padding: 10px;
      border-radius: 5px;
      border-color: none;
      margin-left: 100%;
      width: 100%;
      margin-top: 30px;
      
  }
  @media only screen and (min-width: 421px) and (max-width: 720px) {
    #cont {
      display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows:auto;
    grid-gap: 10px;
    }
    /* #teachers{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(2);
    grid-gap: 10px;
  } */
  }