.bg-image {
    width: 100%;
  }
  #top-div > div {
    border: 0 solid red;
    width: 100%;
    height: auto;
    margin: auto;
    display: grid;
    grid-template-columns: 40% 40%;
    grid-template-rows: auto;
    justify-content: center;
    gap: 30px;
  }
  #top-div > div > div {
    border: 0 solid green;
    display: flex;
    justify-content: end;
    flex-direction: column;
  }
  #top-div > div > div > div {
    border: 0 solid red;
    height: 50%;
  }
  #top-div > div > div:first-child {
    background-color: #ffff;
    opacity: 0.9;
  }
  #top-div > div > div:first-child > ul {
    list-style: none;
  }
  #top-div > div > div:first-child > ul li::before {
    content: "✓";
  }
  #top-div > div > div:first-child > * {
    margin: auto;
    width: 60%;
  }
  #left-mid {
    width: 80%;
    height: auto;
    display: flex;
    justify-content: space-around;
  }
  #left-mid > button {
    border-radius: 30px;
    background-color: #25cf60;
    padding: 10;
    font-size: 15px;
    font-weight: bold;
  }
  .visible {
    background-color: #ffff;
    visibility: visible;
    opacity: 0.9;
    transition: opacity 2s linear;
    margin-bottom: 30px;

  }
  .visible>img{
    width:15%;
    display: block;
  }
  .visible *{
    width: 70%;
    margin: auto;
    margin-bottom: 5px;
  }
  @media all and (min-width:768px) and (max-width:1024px){
    
    .bg-image {
      width: 100%;
    }
    #top-div > div {
      border: 0 solid red;
      width: 100%;
      height: 95%;
      margin: auto;
      display: grid;
      grid-template-columns: 40% 50%;
      grid-template-rows: auto;
      justify-content: center;
      gap: 10px;
      
    }
    #top-div > div > div {
      border: 0px solid green;
      display: flex;
      justify-content: end;
      flex-direction: column;
      padding: 20px;
    }
    #free{
      margin-top: auto;
      
    }

   




  }
  @media all and (min-width:280px) and (max-width:768px){

    .bg-image {
      width: 100%;
      margin: auto;
      
      
    
    }
    #top-div > div {
      border: 0 solid red;
      width: 100%;
      height: auto;
      margin: auto;
      display: grid;
      grid-template-columns: 80% ;
      grid-template-rows:auto ;
      justify-content: center;
      gap: 10px;
      
      
    }
    #top-div > div > div:nth-child(2) {
     display: none;
    }
    #left-mid {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-around;
    }
    body>div{
      margin: auto;
    }
    #top-div > div > div:first-child > * {
      margin: auto;
      width: 100%;
    }





}