.book-collection-section {
	padding: 45px 0;
	@media (max-width: 1024px) {
		padding: 40px 0;
	}
	.container {
		max-width: 1680px;
		margin: 0 auto;
		padding: 0 40px;
		@media (max-width: 749px) {
			padding: 0 15px;
		}
	}

	.collection-conten-wrapper {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -40px;
		@media (max-width: 1366px) {
			margin: 0 -20px;
		}
		@media (max-width: 1199px) {
			margin: 0 -15px;
		}

		.left-content {
			flex: 0 0 72%;
			max-width: 72%;
			padding: 0 40px;
			@media (max-width: 1366px) {
				padding: 0 20px;
			}
			@media (max-width: 1199px) {
				padding: 0 10px;
			}
			@media (max-width: 991px) {
				flex: 0 0 100%;
				max-width: 100%;
				order:2;
			}
		}

		.right-content {
			flex: 0 0 28%;
			max-width: 28%;
			padding: 0 40px;
			margin-top: 73px;
			@media (max-width: 1366px) {
				padding: 0 20px;
			}
			@media (max-width: 1199px) {
				padding: 0 10px;
			}
			@media (max-width: 991px) {
				flex: 0 0 100%;
				max-width: 100%;
				order: 1;
                margin: 0 0 25px;
			}
		}

		.page-title {
			font-size: 30px;
			color: #000;
			font-weight: 700;
			font-family: "Barlow", sans-serif;
			margin: 0 0 26px;
			@media (max-width: 1199px) {
				font-size: 26px;
				margin: 0 0 20px;
			}
			@media (max-width: 767px) {
				font-size: 22px;
				margin: 0 0 15px;
			}
		}

		.look-book-content-wrapper {
			display: none;

			&.active {
				display: block;
			}
		}

		.navigation-buttons {
			display: flex;
			justify-content: center;
			.nav-buttons {
				display: flex;
				justify-content: center;
				gap: 20px;
				@media (max-width: 575px) {
					flex-direction: column;
				}
			}
			.custom-btn#prevBtn {
				padding: 10px 18px 10px 7px;
			}
			.custom-btn {
				text-transform: capitalize;
				font-size: 20px;
				font-weight: 600;
				border-radius: 10px;
				padding: 10px 7px 10px 18px;
				gap: 10px;
				@media (max-width: 767px) {
					font-size: 16px;
				}
				svg {
					width: 30px;
					height: 30px;
				}
				&:disabled {
					background: #f1f1f1;
					border-color: #f1f1f1;
					color: #999999;
				}
			}
		}
	} 

	.collection-section {
		margin: 0 0 55px;
		@media (max-width: 1199px) {
			margin: 0 0 40px;
		}
		h2 {
			font-size: 18px;
			color: #ffffff;
			font-weight: 700;
			font-family: "Barlow", sans-serif;
			background: #000000;
			border-radius: 10px;
			padding: 15px 18px;
			margin: 0 0 19px;
			@media (max-width: 767px) {
				font-size: 16px;
				margin: 0 0 12px;
			}
		}
		.img-outer {
			display: flex;
			flex-wrap: wrap;
			margin: 0 -9px -15px;
			.img-grid {
				flex: 0 0 50%;
				max-width: 50%;
				padding: 0 9px;
				margin-bottom: 15px;
				@media (max-width: 575px) {
					flex: 0 0 100%;
					max-width: 100%;
				}
				&.grid-full {
					flex: 0 0 100%;
					max-width: 100%;
				}
				img {
					max-width: 100%;
					width: 100%;
					height: auto;
				}
			}
		}
	}  

	.accordion {
		background: #f3f5f3;
		border-radius: 10px;
		padding: 16px 27px;
		position: sticky;
		top: 100px;
		@media (max-width: 991px) {
			padding: 10px 20px;
		}
		.accordion-item {
			.accordion-header {
				font-size: 18px;
				line-height: 36px;
				color: #000000;
				font-weight: 700;
				font-family: "Poppins", sans-serif;
				padding: 7px 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				cursor: pointer;
				@media (max-width: 767px) {
					font-size: 16px;
				}
				svg {
					position: absolute;
					right: 0;
					transform: rotate(0deg);
					transition: 0.3s all;
				}
			}
			&.active {
				.accordion-header {
					svg {
						transform: rotate(180deg);
					}
				}
				.accordion-body {
					display: block;
				}
			}
		}
		.accordion-body {
			display: none;
			padding: 0 20px;
			margin: -5px 0 10px;
			@media (max-width: 767px)  {
				padding: 0 10px;
			}
			.accordion-link {
				font-size: 16px;
				line-height: 36px;
				color: #000000;
				font-weight: 400;
				font-family: "Poppins", sans-serif;
				cursor: pointer;
			}
		}
	}    
}