#my-booking button {
  cursor: pointer;
  
}
#my-booking {
  /* border: 1px solid black; */
  padding: 20px;
}
ul,
ol {
  list-style: none;
}
#article-top {
  width: 600px;
  margin: 0px auto;
  background-color: rgb(226, 220, 220,.1);
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 1.3em;
}

#article-top ul {
  display: flex;
  height: inherit;
  padding: 10px;
  justify-content: space-around;
}
#article-bottom {
  margin: 0px auto;
  background-color: rgb(255, 255, 255);
  background-color: rgb(226, 220, 220,.4);
  background-color: rgb(226, 220, 220,.1);


  border: 1px solid rgb(0, 0, 0, 0.2);
  border-radius: 4px;
  width: 600px;
  padding: 4px 8px;
  height: 200px;
  visibility:hidden;
  font-size: 1.3em;

 
}
#article-bottom ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#article-bottom > ul > li:first-of-type {
  /* background-color: red; */
  display: flex;
  color: white;
}


#article-bottom > ul > li:first-of-type button {
  margin-left: auto;
}
#article-bottom ol {
  text-transform: capitalize;
  display: flex;
  align-items: center;
  gap: 10px;
}

#article-bottom ol li:first-of-type{
  color: white;
}

#about-price li {
  display: flex;
  background-color: rgb(239, 233, 233);
  margin-top: 4px;
  /* width: 90%; */
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  padding: 1px;

  
}
#about-price li p {
  /* background-color/: blue; */
  width: 200px;
}
#about-price li span {
  display: block;
  width: 100px;
  /* background-color: red; */
}

#about-price button{
  all: unset;
  text-transform: capitalize;
  color: white;
  background-color: blue;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

/* confirm */
/* confirm */

#confirm {
  position: fixed;
  top: 5%;
  left: 40%;
  /* display: none; */
  background-color: rgb(248, 249, 251);
  border-radius: 4px;
  z-index: 100;
}

.pop {
  transform: scale(0);
  /* transform: scale(1); */
  /* transform: translateY(-290px); */
  background:rgba(0,0,0,0.5); z-index:999;
  transition: all 1s;

}

.big {
  transform: scale(1);
  background:rgba(0,0,0,0.5); z-index:999;
  /* transform: translateY(0px); */

  transition: all 1s;
  
}

#confirm table {
  border: 1px solid black;

  padding: 25px;
  padding-bottom: 0px;
  width: 350px;
  border-radius: 4px;
  text-transform: capitalize;
}
#confirm table tr td {
  padding: 15px;
}
#confirm table tr td {
  border-bottom: 1px solid rgb(0, 0, 0, 0.2);
}

#confirm table tr td span {
  font-weight: bold;
}
#confirm table tr:last-of-type td {
  /* background-color: red; */
  text-align: center;
  padding: 20px 10px;
  border-bottom: none;
}

#confirm table tr button {
  all: unset;
  margin-right: 30px;
  /* border: 1px solid black; */
  border-radius: 4px;
  padding: 6px 8px;
  background-color: blue;
  color: white;
  cursor: pointer;

  transition: background-color 0.3s;
}

#confirm table tr button:hover {
  background-color: black;
  transition: all 0.3s;
}
/* ========== */

#article-top {
  /* background-color: rgb(120, 63, 63); */
  margin-bottom: 10px;
}

#article-top ul {
  display: flex;
  height: inherit;
  padding: 10px;
  justify-content: space-around;
}

#article-top ul li figure{
  /* width: 500px;
 height: 100px; */
 /* background-color: white; */
}
#article-top ul li img{
  /* width: 100% ; */
  /* height: 100%; */
  border: 1px solid;
}

#article-top ul li button {
 all: unset;
 /* width: 150px; */
 text-transform: capitalize;
 color: white;
 /* background-color: blue; */
 padding: 6px 8px;
 border-radius: 4px;
 border: 1px solid rgb(255, 255, 255,.3);
 cursor: pointer;
}

#cancel-booking-btn{
  all: unset;
  text-transform: capitalize;
  color: white;
  background-color: red;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
}

#article-bottom {

 
  /* visibility:hidden; */

}

#article-bottom ol li button{
  all: unset;
  text-transform: capitalize;
  /* background-color: #333333; */
  border: 1px solid rgb(255, 255, 255,.3);

  color: white;
  /* border: 1px solid rgb(0, 0, 0); */
  /* background-color: rgb(233, 2, 2); */
 border: 1px solid rgb(255, 255, 255,.3);

  padding: 6px 20px;
  border-radius: 4px;
  cursor: pointer;
}

#article-bottom ul li:first-of-type p span{
  font-weight: bold;
  font-size: 1.1em;
  color: white;
  /* color: rgb(255, 255, 0,.85); */
  background-color: rgb(0, 0, 0,.5);
  background-color: green;
  text-decoration: underline;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
}




/* ========= from chat pgpt= */

#article-top,
#article-bottom {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

#article-top ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

#article-top ul li button{
  padding:8px 14px;
  font-size:24px;
  font-size: 21px;

}

#article-bottom{
  min-height:200px;
  height:auto;
}

#about-price li {
  display: flex;
  flex-wrap: wrap;
  gap:10px;
  justify-content: space-between;
  align-items:center;
}


#confirm {
  left:50%;
  transform:translateX(-50%);
}

#about-price button{
  all: unset;
  display:block;
  width:100%;
  text-align:center;
  color:white;
  background-color:blue;
  padding:10px;
  border-radius:4px;
  cursor:pointer;
}

@media (max-width:768px){

  #article-top ul{
  flex-direction:column;
  align-items:center;
  }
  
  #article-top ul li{
  width:100%;
  text-align:center;
  }
  
  #article-top ul li button{
  width:100%;
  }
  
  #article-bottom{
  padding:15px;
  font-size:1rem;
  }
  
  #about-price li{
  flex-direction:column;
  align-items:flex-start;
  }
  
  #about-price button{
  width:96.5%;
  text-align:center;
  }
 
  
  #confirm table{
  width:100%;
  }
  
  }

  @media (max-width:480px){

    #article-top,
    #article-bottom{
    padding:10px;
    }

    #article-top ul li button{
font-size: .8em;
    }
    
    #article-bottom ul li:first-of-type{
    flex-direction:column;
    gap:10px;
    }
    
    #cancel-booking-btn{
    width:100%;
    }
    #about-price button{
      width:95%;
      text-align:center;
      }
      #article-bottom ol li button{
        /* font-size: 9px; */
        padding: 5px 10px;
      }
 
    }

    /* footer start */
    .site-footer{
      background:#111;
      color:#fff;
      padding:50px 20px 20px;
      margin-top:50px;
    }
    
    .footer-container{
      max-width:1200px;
      margin:auto;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:30px;
    }
    
    .footer-col{
      flex:1;
      min-width:220px;
    }
    
    .footer-col h3{
      margin-bottom:15px;
      color:#f34d4d;
    }
    
    .footer-col p{
      font-size:14px;
      line-height:1.6;
    }
    
    .footer-col ul{
      list-style:none;
      padding:0;
    }
    
    .footer-col ul li{
      margin-bottom:10px;
    }
    
    .footer-col ul li a{
      color:#ccc;
      text-decoration:none;
      transition:0.3s;
    }
    
    .footer-col ul li a:hover{
      color:#fff;
    }
    
    .social-icons{
      display:flex;
      gap:15px;
      margin-top:10px;
    }
    
    .social-icons a{
      color:#fff;
      font-size:18px;
      background:#333;
      padding:10px;
      border-radius:50%;
      transition:0.3s;
    }
    
    .social-icons a:hover{
      background:#f34d4d;
    }
    
    .footer-bottom{
      text-align:center;
      border-top:1px solid #333;
      margin-top:30px;
      padding-top:15px;
      font-size:14px;
      color:#aaa;
    }

    
    /* footer end */

    /* updated  */