@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&display=swap');
*{
    margin:0;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}
body{
    background-color: #F6F6F6;
}
.logo{
    color:black;
   font-size: 18px;
   font-weight: bold;
}
.mode{
    padding:15px;
    border-radius: 50%;
    background-color: rgb(199, 200, 201);
}
header{
    padding:0px 50px;
    margin-bottom: 10px;
   
}
nav{
    padding:10px 20px;
    display: flex;
    justify-content: space-between;
    border: 1px solid hsl(0, 0%, 16%);
    border-radius: 10px;
    background-color: white;
    align-items: center;
    
}
main{
    display: flex;
}
.sidebar{
    width: 20%;
    display: flex;
    flex-direction: column;
    /* border:2px solid grey; */

}
.categories_container{
    padding:10px;
    display: flex;
    flex-direction: column;
    height:500px;
    gap:12px;
    overflow-y: scroll;
    color:#11111159;
}
.categories_container p{
    font-size: 18px;
    margin:5px;
    
   
    
}
.categories_container p:hover{
    font-size: 20px;
    color:#6f24f1;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s linear;

    
}
.categories_container p:focus{
    font-size: 20px;
    color:#6f24f1;
    font-weight: 500;
    text-transform: uppercase;
    /* transition: .3s linear; */

    
}
.categoryBooks_container{
    display: flex;
    gap:20px;
    flex-wrap: wrap;
}


.book_info{
    text-align: center;
   width: 18%;
   padding:5px;
   /* border:1.5px solid grey; */
   object-fit: contain;
   position: relative;
   transition:All 1s linear;
   overflow: hidden;
    
}
.main_content_container{
    width: 80%;
    padding:20px;
    display: flex;
    flex-direction: column;

}
.heading{
    font-size: 40px;
}
.heading span{
    color:blue;
}
.book_category_container{
    /* border:2px solid grey; */
    padding:10px;
    border-radius: 20px;
    margin:5px;
    display: flex;
    flex-direction: column;
}

#signup{
    padding:15px 20px;
    background-color: blue;
    color:white;
    border-radius: 14px;
    border: none;

}
#signup:hover{
    padding:15px 20px;
    background-color: rgb(242, 193, 31);
    color:white;
    border-radius: 14px;
    border: none;

}
.category_name{
    color:grey;
    margin:20px;
}
.show_All_btn{
 padding:10px 20px;
 color:blue;
 border:2px solid blue;
 background: transparent;
 border-radius: 20px;
 align-self: flex-end;
 margin:0px 50px;
 text-transform: uppercase;

}
.show_All_btn:hover{
    padding:10px 20px;
    color:rgb(230, 230, 239);
    border:2px solid blue;
    background:blue;
    border-radius: 20px;
    cursor: pointer;
   
   
   }

   .book-title{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
   }
   .author-name{
    font-size: 12px;
    color:rgb(145, 144, 144);
   }
   .book_info img::before{
    content:"Quick view";
    background-color: rgb(250, 188, 18);
    padding:20px;

   }
   .quick-view{
   
    background-color: rgb(243, 218, 33);
    position: absolute;
    width: 100%;
    height:0px;
    bottom: 0%;
    transition:All .4s linear;
    color:black;
    /* display: none; */
   }
   .book_info:hover{
    cursor: pointer;
   }
   
   .book_info:hover .quick-view{
    display: block;
    cursor: pointer;
    /* bottom: 20%; */
    height:auto;
    padding: 20px;

   }
   .images{
    height: 78%;
    overflow: hidden;
    position: relative;
    border-radius: 15px;
   }
   .images img{
    width: 100%;
    height: 100%;
  }
  .donation{
    background: linear-gradient(rgb(141, 50, 238),blue);
    margin:10px;
    padding:20px;
    border-radius: 20px;
    color: white;
    text-align: center;
   
  }
  ol{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:center;
    gap:20px;
  }
  .dialog_box_container{
   
    height:100vh;
    width: 100vw;
    background-color: rgba(40, 40, 40, 0.44);
    display: none;

  }

  #dialog_box{
     position:fixed;
    background-color: white;
    height: auto; 
    z-index: 45;
    transform: translate(100%,50%);
   width: 550px;
   padding:20px;
   border-radius: 20px;
  }

  .info_container{
    display: flex;
    padding:10px;
    gap:20px;
    /* position: absolute; */
    z-index: 4;



  }
  .book_image{
    height:300px ;
    min-width: 35%;
    object-fit: cover;
    width: 35%;

  }
  .book_image img{
    width: 100%;
    height: 80%;
    
  }
  .book-title{
    display: flex;
    flex-direction: column;
    gap:15px;
    padding:20px;
}
.add-to-cart{
    padding:15px 50px;
    border-radius: 25px;
    border: 2px solid blue;
    color:blue;
    position: absolute;
    bottom: 20px;
    right:30%;
}
.add-to-cart:hover{
   background-color: blue;
   color:white;
}
.dialog_box_container{
    position:fixed;
    top:0px;
    
    z-index: 42;
    display: none;
}
.close{
    color:red;
    font-weight: 900;
    position: absolute;
    top:20px ;
    right: 20px;
}
.all-categories{
    font-size: 20px;
    color:#6f24f1;
    font-weight: 500;
    text-transform: uppercase;
}
.shopping-sites a img:hover{
    transform: scale(1.1);
    

}
.shopping-sites a{
    margin:20px

}
.des{
    text-transform: capitalize;
    font-weight: 400;
}
a:hover{
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 10px;
  }
  

  ::-webkit-scrollbar-track {
   /* box-shadow: inset 0 0 5px grey; */
    border-radius: 10px;
  }
   

  ::-webkit-scrollbar-thumb {
    background: grey; 
    border-radius: 10px;
  }
  
 
  ::-webkit-scrollbar-thumb:hover {
    background: #8c8a8a; 
  }
  footer{
    padding:20px;
    text-align: center;
    background-color: grey;
    color:black;

  }

  .signup-section{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items:center;
    background-color: #6f24f1;
    display: none;

  }
  .form-container{
   
    max-width: 600px;
    display: flex;
    flex-direction: column;
    background-color:white;
    gap:20px;
    padding-bottom: 30px;
    
  }
  .btns_container{
    display: flex;
  }
  .btns_container button{
    flex-grow: 1;
    padding:10px;
    background-color: rgb(251, 219, 41);
    font-weight: 600;
    border-color: white;
    /* color:white; */
  }
  form{
    display: flex;
    flex-direction: column;
    gap:20px;
    padding:0px 30px;

  }
  input{
    padding:10px;
    background: transparent;
    color:white;
    outline: none;
    border: 2px solid white;
    /* border-radius: 15px; */
    width: 350px;
    border-bottom: 2px solid #6f24f1;
  }
  input:hover{
    border-color: #6f24f1;
  }
  #backTomain{
    background-color: red;
    color:white;
    max-width: 26px;
  }

  @media screen  and (max-width:1100px){
     main{
        flex-direction: column;
     }
     .main_content_container{
        width: 100%;

     }
     .sidebar{
        flex-direction: row;
        width: 100%;
     }
  }
  @media screen  and (max-width:900px){
    main{
       flex-direction: column;
    }
    .main_content_container{
       width: 100%;

    }
    .sidebar{
       flex-direction: column;
       width: 100%;
    }
    .book_info{
        min-width: 200px;
    }
    header{
        padding: 0%;
    }
    #dialog_box{
        transform: translate(0,0);
        width: 90%;
        height: auto;
        margin:10px;
        height: 500px;
        overflow-y: scroll;
    }
    .info_container{
        flex-direction: column;
        padding: 5px;
    }
    .book_image{
        width: 80%;
    }
    .book-title{
        width: 100%;
        padding: 5px;
    }
    .add-to-cart{
        position: relative;
        bottom: unset;
        right: unset;

    }
 }