.templateContainer {
	position:relative;
	max-width: 1124px;
	margin:75px auto 0;
	.header {
		.title {
			color: #757575;
			margin-bottom: 10px;
		}
		.divider {
			height: 1px;
			background: #d8d8d8;
			margin-bottom: 15px;
		}
		.description {
			line-height: 2;
			color: #757575;
			text-align: center;
			margin-bottom: 16px;
		}
	}
	.searchBoxBar {
		padding:0 20px;
	}
	.searchBoxContainer {
		position: relative;
		max-width: 600px;
		margin: 0 auto;
		padding-bottom: 24px;
		.searchBox {
			width: 100%;
			height: 32px;
			border-radius: 5px;
			border: 1px solid #cccccc;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			.label {
				display: flex;
				align-items: center;
				justify-content: center;
				line-height: 1.5;
				gap: 5px;
				.caretIcon {
					position: absolute;
					right: 10px;
				}
			}
		}
		.selectedTagsContainer {
			margin-top: 8px;
			display: flex;
			color: #757575;
			font-size: 12px;
			position: relative;
			.filteredBy {
				margin-right: 8px;
				display: flex;
				align-items: center;
				height: 32px;
			}
			.selectedTags {
				display: flex;
				gap: 8px;
				max-width: 480px;
				height: fit-content;
				flex-wrap: wrap;
				.selectedTag {
					display: flex;
					gap: 10px;
					align-items: center;
					background: #f9f9f9;
					border: 1px solid #cccccc;
					padding: 9px 12px;
					border-radius: 5px;
					cursor: pointer;
					height: 32px;
				}
			}
			.clearAll {
				text-decoration: underline;
				position: absolute;
				right: 0;
				top: 8px;
				cursor: pointer;
			}
		}
	}
}
.templateFilterOptions {
	position: absolute;
    top: 133px;
    left: 50%;
    transform: translate(-50%, 0);
	width: 600px;
	height: 344px;
	border-radius: 5px;
	border: 1px solid #cccccc;
	padding: 16px 24px 24px;
	background: #fff;
	z-index: 99;
	.title {
		font-weight: 700;
		line-height: 1.71;
		text-transform: uppercase;
		color: #000;
	}
	.selectShootType {
		width: 70%;
	}
	.filterOptions {
		display: flex;
		font-size: 14px;
		.options {
			height: 230px;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
		}
	}
	.option {
		height: 32px;
		flex-shrink: 0;
		color: #1e1f22;
		display: flex;
		align-items: center;
		gap: 8px;
		flex-grow: 0;
		font-weight: 600;
		cursor: pointer;
	}
	.buttons {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 5px;
		font-size: 14px;
		font-weight: 600;
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 24px;
		}
		.apply {
			padding: 10px 24px;
			border-radius: 5px;
			background: #ff5a00;
			color: #fff;
		}
	}
	.selectStyle {
		.options {
			.title {
				font-size: 16px;
				text-transform: none;
				margin: 3px 0;
			}
		}
	}
}
.templateFilterOptions {
	display: none;
}
.templateList {
	max-width: 1124px;
	margin: 100px auto 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Default to 3 columns */
	gap: 140px 40px; /* Row and column gap */
	min-height: 1000px;
	padding-bottom: 100px;
	
	@media (max-width: 1024px) {
		grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
	}
	
	@media (max-width: 768px) {
		grid-template-columns: 1fr; /* 1 column for mobile */
	}
	.templateListItem {
		width: 100%;
		max-width: 350px;
		margin:0 auto;
		min-height: 650px;
		height: fit-content;
		background: #f9f9f9;
		border-radius: 5px;
		padding-top: 16px;
		padding-bottom: 16px;
		cursor: pointer;
		position:relative !important;
		.previewImageContainer {
			height: 426px;
			position: relative;
			.previewImage {
				width: 100%;
				height: 490px;
				position: absolute;
				top: -76px;
				border-radius: 5px;
				img {
					width: 323px;
					margin: 0 auto;
					display: block;
				}
			}
			.overlay {
				width: 100%;
				height: 100%;
				background: transparent;
				position: absolute;
				top: 0;
				border-radius: 5px;
				transition: background .2s ease-in-out;
				.buttonsWrapper {
					display: none;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					.preview {
						background: #fff;
						margin-bottom: 11px;
						font-size: 14.4px;
						font-weight: 700;
						width: 108px;
						height: 40px;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 3px;
						a {
							color: #000000 !important;
						}
					}
					.demo {
						background: #ff5a00;
						font-size: 14.4px;
						font-weight: 700;
						width: 108px;
						height: 40px;
						border-radius: 4px;
						display: flex;
						align-items: center;
						justify-content: center;
						padding-bottom: 3px;
						a {
							color:#ffffff !important;
						}
					}
				}
			}	
		}
		.templateDescription {
			padding-left: 24px;
			padding-right: 24px;
			.name {
				font-family: "Brygada 1918", sans-serif;
				font-size: 24px;
				text-align: center;
			}
			.description {
				font-size: 14px;
				font-weight: 600;
				color: #757575;
				text-align: center;
				line-height: 1.4;
				margin-top: 16px;
				height: 80px;
			}
			.tags {
				display: flex;
				gap: 8px;
				flex-wrap: wrap;
				.tag {
					font-size: 12px;
					font-weight: 600;
					color: #757575;
					padding: 8px 12px;
					border: 1px solid #cccccc;
					border-radius: 5px;
					cursor: pointer;
				}
			}
		}
	}	
}
.templateListItem:hover .overlay {
	background-color: #000000a6 !important;
}

.templateListItem:hover .buttonsWrapper {
	display: block !important;
}
.templateListItem .preview:hover {
	background: #ececec !important;
}
.templateListItem .demo:hover {
	background: #d44900 !important;
}
.templateListItem .tag:hover {
	background: #ccc3 !important;
}

@media (max-width: 767px), (max-width: 1024px) and (max-height: 480px) {
	.templateSelectorContent .searchBoxContainer {
		width: 100%;
		padding: 0 8px;
	}
	.searchBox {
		width: 100%;
		height: 32px;
	}
	.templateFilterOptions {
		width: calc(100% - 16px);
		padding: 0 8px;
		top:188px;
	}
}