/* CSS Document */

body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color:white/*#FFF8E1;*/
			scroll-behavior: smooth;
        }
.tabbar{
		    height: 50px;
            background-color:black; /*#5d4037;*/
			display: flex;
            align-items: center;
			padding-left:20px;
			gap:15px;
			max-width:100%;
   		}

.tabbar i{
	font-size:20px;
	 padding-left:5px;
	}
.dropdown {
	display: inline-block;
	position: absolute;
	right:170px;
	}
		/*.dropdown i{
			text-align-last:end;}*/
.dropdown button {
			 border: none;
			 cursor: pointer;
			 font-size: 1.25rem;
			 color:#E8E5DE;
			 border-radius: 6px;
			 cursor: pointer;
			 border: 1px solid transparent;
			 transition: 0.2s ease;
			 background:none;
        }
.dropdown button:hover{
		color:#FFF;
		}
.dropdown-content {
            display: none;
            position:absolute;
            background-color:Black; /*#5D4030;*/
            min-width: 150px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000;
			color:#FFC;
			border: 3px solid #fff;
			border-top:none;
			border-radius:10px;
			left:-10px;
        }
.dropdown:hover .dropdown-content {
            display: block;
        }
        .dropdown-content a{
            display:flex;
            font-size:14px;
            padding:4px 0;
            cursor: pointer;
			align-items:center;
			margin-left:10px;
			text-decoration: none;
			color:#fff;
			}            
.header{
	padding-bottom:3px;
	display:flex;
	justify-content:center;
	flex-warp:wrap;
}
		.logout-btn {
            background-color:black;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
        }
        .logout-btn:hover {
            background-color: #c9302c;
        }
		.container {
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            height: 400px;
            color: black;
            text-align: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: left;
            position: relative;
            padding: 20px;
			padding-top:10px;
        }
		
.logo {
	background-repeat: no-repeat;
	position: absolute;
	top: 10px;
	display: flex;
	border-radius: 15px;
	height: 96px;
	width: 138px;
	max-width:150px;
	background-size:contain;
    }
	
		.search-bar {
	position: absolute;
	top: 15px;
	right: 50px;
	display: flex;
	align-items: center;
	background: white;
	border-radius: 20px;
	padding: 5px 3px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	height: 20px;
	max-width: 400px;
	flex-grow:1;
        }
        .search-bar input {
            border: none;
            outline: none;
            padding: 5px;
            font-size: 16px;
            width: 360px;
            border-radius: 20px;
        }
        .search-bar button {
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 20px;
            cursor: pointer;
        }
		.container{
			padding-bottom:5px;
			}
        .kolka {
            background: black;/*#364C3B;*/
			min-height:3rem;
			text-align:center;
			background-image:url(Untitled%20design.png);
			background-position:center;
			background-size:contain;
			width:100%;
			position:relative;
		}
	
	.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 5px; /* Space between divs */
    width: 100%;
	text-align:right;
	padding-top:15px;
}

.grid-box h3{
	font-size:24px; 
	color:black; 
	padding-top:30px;
}

.grid-box {
    padding:0px;
    text-align:left;
    border:none;
}

.banner {
	overflow:hidden;
	max-height:300px;
	max-width:1500px;
	z-index:1;
	}
.banner img{
	max-height:300px;
	max-width:1500px;
}
	
.card-item{
	width:100%;
	max-width:250px;
	text-align:center;
	}	

.card-list .card-item {
 color: #fff;
 user-select:none;
 padding: 5px;
 padding-top:5px;
 display: flex;
 flex-direction:column;
 align-items: center;
  border-radius:8px;
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.card-list .card-item .user-image {
 width: 200px;
 height: 200px;
 margin-bottom: 5px;
 border: 3px solid #fff;
 padding: 4px;
}
.card-list .card-item .message-button {
font-size: 1.25rem;
padding: 10px 35px;
 color: black;
 border-radius: 6px;
 font-weight: 500;
 cursor: pointer;
 background:#FFF;
 border: 1px solid transparent;
 transition: 0.2s ease;
}
.card-list .card-item .message-button:hover {
background:grey;/*#4E6E58;*/
border: 1px solid #fff;
color: #fff;
}
	.grid-container_logo_search {
    display:grid;
    grid-template-columns: 1fr 2fr; /* Two equal columns */
    gap: 5px; /* Space between divs */
    width: 100%;
	text-align:right;
	padding-bottom:10px;
}

.grid-box_logo_search{
    padding:0px;
    text-align:left;
    border:none;
}

.categories-container{
	padding:15px;
	}
	
.categories-container h1{
	text-align:center;
	color:black;
}

/* Container for any book section */
.book-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Book Card */
.book-card {
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin: 5px;
  padding: 5px;
  flex: 0 1 calc(48% - 10px); /* 2 per row on mobile */
}
.book-card h2{
	color:red;
}

/* Responsive breakpoints */
@media (min-width: 600px) {
  .book-card {
    flex: 0 1 calc(33% - 10px); /* 3 per row on tablets */
  }
}

@media (min-width: 900px) {
  .book-card {
    flex: 0 1 calc(16% - 10px); /* 4 per row on desktops */
  }
}

/* Book image */
.book-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}


.newarrival{
  backdrop-filter: blur(30px);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
  text-align:center;
  }
	
.box-container{
display: flex;
flex-wrap: wrap;
gap:0.5rem;
}
.box-container .box{
flex:1 1 20rem;
border-radius: .5rem;
border: 1px solid transparent;
box-shadow: 0 .2rem .2rem rgba(0,0,0,1);
position: relative;
height:32rem;
}
.box-container .box .image{
	position:relative;
	text-align:center;
	padding-top:2rem;
	overflow:hidden;
	max-width:80%;
	right:10%;
	left:10%;
	}
.box-container .box .image img{
	height:25rem;
    }
.box-container .box:hover .image img{
	transform:scale(1.1);
	}
.box-container .box .image .icons{
	position:absolute;
	left:0;
	right:0;
	display:none;
	max-height:10%;
	}
.box-container .box:hover .image .icons{
	bottom:0;
	display:flex;
	}
.box-container .box .image .icons a{
	line-height:3rem;
	font-size:1.5rem;
	width:30%;
	background:black; /*#4E6E58;*/
	color:#fff;
	text-decoration:none;
	}
.box-container .box .image .icons .cart-btn{
	border-left:.1rem solid #fff7;
	border-right:.1rem solid #fff7;
	width:50%;
	}
.box-container .box .image .icons a:hover{
	bottom:0;
	background:#333;
	}
.box-container .box .content{
	padding:0.5rem;
	text-align:center;
	}	
.box-container .box .content .message-button {
font-size: 1.25rem;
padding: 10px 35px;
 color: #000; /*#5d4037;*/
 border-radius: 6px;
 font-weight: 500;
 cursor: pointer;
 background:#fff;
 border: 1px solid transparent;
 transition: 0.2s ease;
 }
.box-container .box .content .message-button:hover {
	 background:grey;/*#5d4037;*/
	 border: 1px solid #fff;
	 color: #fff;
}
.box-container .box .content .message-button a{
	color:black;/*#030728;*/
	text-decoration:none;
	}
.box-container .box .content .message-button a:hover{
	color:#fff;
	}
.message-button {
font-size: 1.25rem;
padding: 10px 35px;
 color: black;
 border-radius: 6px;
 font-weight: 500;
 cursor: pointer;
 background:#FFF;
 border: 1px solid transparent;
 transition: 0.2s ease;
 }
.message-button:hover {
	 background:grey;/*#E1B250;*/
	 border: 1px solid #fff;
	 color: #fff;
}
.message-button a{
	color: black; /*#030728;*/
	text-decoration:none;
	}
.message-button a:hover{
	color:#fff;
	}


.footer{
	width:100%;
	}
.footer .footer_container{
min-height:40%;
max-width:100%;
background-color:black;
color:white;
padding:10px;
}
.footer_container .button{
	display:inline;
	padding:10px;
	}
.footer_container .button a{
text-decoration:none;
color:white;
font-size:20px;
}
.button_social {
    display: grid;
    grid-template-columns: 1.5fr 0.2fr; /* Two equal columns */
    gap: 5px; /* Space between divs */
    width: 100%;
	padding-top:15px;
}
.footer .social{
float:left;
text-align:right;
display:flex;
gap:15px;
}

		@media (max-width: 768px) {
			html{
				font-size:90%;
				}
				.tabbar{
					font-size:16px;
            gap: 10px;
			padding-left:10px;

					 }
            .search-bar {
                position:inherit;
                margin-top: 10px;
                width: 90%;
            }
            .search-bar input {
                width: 100%;
            }
            .categories {
                flex-direction: column;
                align-items: center;
            }
			.logo{
				max-width:140px;
				margin-bottom:10px;
				}
			.grid-container{
              gap: 2px; /* Space between divs */
              width: 100%;
	          text-align:right;
	           padding-top:15px;
				}
	
.grid-box h3{
	font-size:20px; 
	color:black; 
	padding-top:20px;
}
				
.grid-box {
    padding:0px;
	justify-content:center;
    border:none;
}
				
	.slider-wrapper {
	overflow:hidden;
	max-height:260px;
	max-width:500px;
	margin:0 15px 5px;
				}
    .slider-wrapper .swiper-slide-button-prev{
				display:run-in;
 				}
    .slider-wrapper .swiper-slide-button-next{
				display:none;
 				}
				
				.slider-wrapper .swiper-slide-button{
	color:black;/*#5d4037;*/
	margin-top:-50px;
	transition: 0.2s ease;
}
.slider-wrapper .swiper-slide-button:hover{
	color:grey; /* #E0D4B8;*/
}
				
	.slider-wrapper .swiper-pagination-bullet{
    height:15 px;
	width:15 px;
	background-color:black;
	}
		}

		@media (max-width: 480px) {
			html{
				font-size:80%;
				}
				
			.tabbar{
				min-width:100%;
			}
					 				 
	.tabbar i{
		font-size:16px;
		gap:0px;
				}
		.container{
			padding:10px;
			}
			.dropdown {
	display: inline-block;
	position: absolute;
	right:160px;
	}
			.search-bar {
                position:relative;
                margin-top: 10px;
                max-width: 90%;
				left:10%;
            }
            .search-bar input {
                width: 100%;
            }
            .categories {
                flex-direction: column;
                align-items: center;
            }
			.logo{
				max-width:inherit;
				margin-bottom:10px;
				}
			.grid-container{
				display:table-row;
			   gap: px; /* Space between divs */
              width: 100%;
	          text-align:right;
	           padding-top:5px;
				}
				
.grid-box h3{
	font-size:18px; 
	color:black; 
	padding-top:15px;
}

.card-item{
	width:100%;
	max-width:300px;
	text-align:center;
	}

.card-list .card-item .user-image {
 width: 150px;
 height: 100px;
 }
					.slider-wrapper {
	             max-height:200px;
	              max-width:250px;
	              margin:0 10px 5px;
				}
				.slider-wrapper .swiper-slide-button-next{
				display:run-in;
 				}
			.slider-wrapper .swiper-pagination-bullet{
    height:5 px;
	width:5 px;
	background-color:black;
	}	
}
		
/* popular cate */

.category-wrapper {
  padding: 20px;
}

.category-wrapper h1 {
  padding-bottom: 3px;
  margin-bottom: 5px;
  text-align:center;
}

.category-slider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding:12px;
  margin:10px;
}

.p_categories {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding:10px 20px 0px 20px;
  scrollbar-width: none; /* Firefox */
  
}

.p_categories::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.category {
  text-align: center;
  flex: 0 0 auto;
  width: 200px;
  margin: 5px;
  text-decoration:none;
}

.category img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.category p {
  margin-top: 10px;
  color: Black;
  font-size: 20px;
  text-decoration:none;
}

.category-scroll-prev,
.category-scroll-next {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 20px;
  z-index: 5;
  color: black;
}

@media (max-width: 768px) {
	.category-wrapper {
  padding: 20px;
}

  .category-slider {
    gap: 4px;
  }

  .category {
    width: 120px;
  }

  .category img {
    width: 100px;
    height: 100px;
  }

.category-slider {
	flex-direction:row;
}
  .category-scroll-prev,
  .category-scroll-next {
    font-size: 24px;
	padding:20px 0px 20px 0px;
  }
  
.banner {
	max-height:300px;
	max-width:800px;
	}
	.banner img{
	max-height:300px;
	max-width:800px;
}
}

@media (max-width: 480px) {
	.category-wrapper {
  padding: 10px;
}
.grid-box{
	justify-content: center;
}
.banner {
	max-height:250px;
	max-width:100vw;
	justify-content: center;
	}
.banner img{
	max-height:250px;
	max-width:100vw;
	justify-content: center;
}
  .category-slider {
    gap: 2px;
	display:flex;
  }

  .category {
    width: 120px;
  }

  .category img {
    width: 100px;
    height: 100px;
  }

  .category p {
    font-size:1.25rem;
  }

  .category-scroll-prev,
  .category-scroll-next { 
  font-size: 24px;
  padding: 20px 0px;
  background: transparent;
  flex-shrink: 0;
  }
}