body {
  direction: rtl; /* To support right-to-left languages */
  background-image: repeating-radial-gradient(  #e2d4c6d7 80%,hsl(25, 11%, 61%) 90%,#a79c92 90%);
  background-size: 65px 65px;

}
.title-container{
  background-color: #a18d81;
  padding:30px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.title-container h1{
  font-size: 30px;
  color: rgb(0, 0, 0);
}
.breadcrumb {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 20px;
}
.breadcrumb a {
  color: #2e527e;
  margin: 10px;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: white;
}
.top-container{
  padding: 30px;
  background-color: #e8e4e1;
  border-radius: 5px;
}
.top-container-dir{
  display: flex;
  flex-direction: row;
}
.image-container, .book-info-container, .book-details {
  border: 1px solid #dee2e6;
  padding: 20px;
  border-radius: 5px;
  text-align: right;
}

.image-container {
  
  display: flex;
  align-items: center;
  margin-right: -10px;

}
.book-info-container{
  margin-right: 20px;
}
.book-info-container, .image-container{
  background-color: #f1eeec;
}

.book-image {
  max-width: 300px;
  margin: 0 auto;
}

.book-image img {
  width: 260px; /* Adjust to fit the container */
  height: auto; 
  border-radius: 5px;
}

.inf-book-title {
  margin: 20px;
  border-bottom: 1px solid #00a1e1;
}
.inf-book-title h5{
  display: flex;
  justify-content: center;
  color: #00a1e1;
  margin: 15px;
  font-size: 18px;
}
.book-info{
  padding: 20px;
  background-color: #ffffff;
}
.book-info i {
  font-size: 20px;
  margin-left: 5px;
}
.inf-book-item h6,.inf-book-item p{
  font-size: 15px;
}
.inf-book-list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inf-book-item h6 {
  margin: 0;
}
.inf-book-item p {
 margin: 0;
}

.cost {
  color: #d00a0a;
  text-align: center;
  margin: 20px;
}

.btn-list {
  display: flex;
  justify-content: center;
  text-align: center;
}
.list-group {
  margin: 0 auto;
  max-width: 400px;
  
  padding: 0;
}
.nav-text{
  color: #456a97;
  margin: 0;
  display: flex;
  align-items: center;
}
.nav-text i{
  font-size: 20px;
  margin-left: 5px;
}
.nav-exp{
  background-color: #e8e4e1;
  font-size: 15px;
  font-weight: bold;
  padding: 10px;
}
.tab-content-container{
  background-color:#e8e4e1 ;
  padding: 30px 20px;
  border-radius: 5px 0 5px 5px;
}
.tab-content>.tab-pane {
 border: none;
  padding: 50px;
  border-radius: 5px;
  background-color: #ffffff;
}
.tab-content>.tab-pane>p{
  font-size: 20px;
  text-align: justify;
  line-height: 50px;
}
.book-content{
  margin-bottom: 30px;
  padding: 0;
}
.book-details h5{
  font-weight: bold;
  padding: 15px 0;
}
#bookTab {
  padding: 0;
  border: none;
}
/* ?Button styles */
.button-addcard {
  padding: 10px 15px;
  background: none;
  border: 2px solid #fff;
  font-size: 13px;
  color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  background-color: #008e2f;
  font-weight: bolder;
  box-shadow: 0 2px 0 2px #000;
  margin: 5px;
}

.button-addcard i, .button-preview i {
  font-size: 22px;
}

.button-addcard p, .button-preview p {
  margin: 0;
  display: flex;
}

.button-addcard:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 120%;
  background-color: #aaf2ff;
  top: 50%;
  transform: skewX(30deg) translate(-150%, -50%);
  transition: all 0.5s;
}

.button-addcard:hover {
  background-color: #4cc9f0;
  color: #000000;
  box-shadow: 0 2px 0 2px #0d3b66;
}

.button-addcard:hover::before {
  transform: skewX(30deg) translate(300%, -50%);
  transition-delay: 0.1s;
}

.button-addcard:active {
  transform: scale(0.9);
}

.button-preview {
  padding: 10px 15px;
  background: none;
  border: 2px solid #fff;
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  background-color: #0091d0;
  font-weight: bolder;
  box-shadow: 0 2px 0 2px #000;
  margin: 5px;
}

.button-preview:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 120%;
  background-color: #ffd889;
  top: 50%;
  transform: skewX(30deg) translate(-150%, -50%);
  transition: all 0.5s;
}

.button-preview:hover {
  background-color: #ffb53f;
  color: #000000;
  box-shadow: 0 2px 0 2px #0d3b66;
}

.button-preview:hover::before {
  transform: skewX(30deg) translate(300%, -50%);
  transition-delay: 0.1s;
}

.button-preview:active {
  transform: scale(0.9);
}
/* ? end Button styles */
.modal-body img {
 max-height: 500px;
  height: auto;
  border-radius: 5px;
}
.modal-header{
  border: none;
}
button.close{
  background: none;
  border: none;
  position: absolute;
  right: 20px;
  font-size: 40px;
  font-weight: bold;
  color: #aaa;
}
.modal{
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  backdrop-filter: blur(5px);
}
.modal-content{
  background-color: #a18d81;
  border-radius: 5px;
  padding: 20px;
  height: 90%;
  width: 100%;
  max-height: 700px;
  margin:15% auto;
}
/* Responsive spacing */
@media (max-width: 768px){
  .top-container-dir{
    display: flex;
    flex-direction: column;
  }
  .image-container, .book-info-container{
    margin: 0 auto;
  }
  .book-info-container{
    margin-top: 20px;
  }
  .title-container h1{
    font-size: 20px;
  }
  .breadcrumb{
    font-size: 13px;
  }
  .tab-content>.tab-pane>p{
    font-size: 15px;
    line-height: 38px;
  }
  .book-details h5{
    font-size: 17px;
  }
  .modal-content{
    width: 90%;
  }
}
@media (max-width: 493px){
  .breadcrumb{
    font-size: 10px;
  }
}

@media (max-width: 473px){
  .inf-book-item h6,.inf-book-item p{
    font-size: 13px;
  }
  .inf-book-title h5{
    font-size: 15px;
  }
  .button-addcard,.button-preview{
    font-size: 10px;
  }
  .button-addcard i, .button-preview i{
    font-size: 18px;
  }
  .tab-content>.tab-pane>p{
    font-size: 13px;
    line-height: 35px;
  }
  .book-details h5{
    font-size: 15px;
  }
  .cost h4{
    font-size: 18px;
  }
}
@media (max-width:428px){
  .title-container h1{
    font-size: 15px;
  }
  .book-info i {
    font-size: 18px;
  }
  .breadcrumb{
    font-size: 9px;
  }
  .button-addcard,.button-preview{
    font-size: 8px;
  }
  .button-addcard i, .button-preview i{
    font-size: 15px;
  }
  .tab-content>.tab-pane{
    padding: 50px 35px;
  }
}
@media (max-width:395px){
  .title-container{
    padding: 30px 15px;
  }
  .inf-book-item h6,.inf-book-item p{
    font-size: 11px;
  }
  .inf-book-title h5{
    font-size: 12px;
  }
  .book-info i {
    font-size: 16px;
  }
  .button-addcard,.button-preview{
    font-size: 6px;
  }
  .button-addcard i, .button-preview i{
    font-size: 12px;
  }
  .cost h4{
    font-size: 15px;
  }
  .book-details h5{
    font-size: 13px;
  }
  .tab-content>.tab-pane{
    padding: 50px 30px;
  }
  .tab-content>.tab-pane>p{
    font-size: 11px;
  }
}