/* main @::start */
main {
	& .v-clr {
		color: var(--primary-clr);
		font-weight: 500;
	}
	& section {
		padding-block: 4rem;
	}
	.v-divider {
		padding: 1.3rem 0;
		background-color: var(--primary-clr-opacity-0);
	}
	& .v-hero-top {
		row-gap: 1.2rem;
	}
	& .v-cat {
		background-color: var(--primary-clr);
		display: flex;
		align-items: center;
		gap: 10px;
		color: var(--white);
		border-radius: 6px;
		padding: 1rem 1.5rem;
		font-size: 0.9rem;
		font-weight: 500;

		.v-zzzz & {
			background-color: var(--black);
			width: max-content;

			&:hover {
				background-color: var(--black);
			}
		}

		&.v-variant {
			width: max-content;
			margin-inline: auto;
		}

		&:hover {
			background-color: var(--primary-clr-dark);
		}

		& svg {
			--size: 1.2rem;
			height: var(--size);
			width: var(--size);
		}
	}

	& #v-search-event {
		@media all and (max-width: 400px) {
			& {
				row-gap: 1rem;
				flex-wrap: wrap !important;

				& .v-submit-btn {
					font-size: 0.9rem;
					width: 100%;
					text-align: center;
					padding: 0.7rem;
					border-radius: 4px;
					min-height: 0;
				}

				& .form-control {
					&:focus {
						border-right-color: var(--primary-clr-opacity-3);
					}
				}
			}
		}
		& .form-input {
			& .dropdown {
				position: absolute;
				right: 0;
				top: 50%;
				translate: -30% -50%;
				z-index: 1;

				& .v-dropdown {
					display: flex;
					align-items: center;
					gap: 4px;
					font-size: 0.96rem;
					font-weight: 500;
				}

				& .dropdown-menu {
					transition: 200ms ease;
					right: 0;
					translate: -50% 1rem;
					box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
					min-height: 7rem;
					height: auto;
					padding-inline: 5px;

					& .dropdown-item {
						padding-block: 0.73rem;
						font-weight: 500;
						font-size: 0.88rem;
						transition: background-color 300ms ease, color 300ms ease;
						border-radius: 3px;

						&:hover {
							background-color: var(--primary-clr-opacity-1);
							color: var(--primary-clr);
						}
					}
				}
			}
		}
		& :is(.form-control, .v-submit-btn) {
			min-height: 3rem;
			height: 100%;
			position: relative;
		}
		& .form-control {
			border-radius: 0;
			border-width: 1.5px;
			border-right-color: transparent;
			border-color: var(--border-clr);

			&:focus {
				border-color: var(--primary-clr-opacity-3);
				box-shadow: none;
			}
			&::placeholder {
				font-size: 0.9rem;
				opacity: 0.8;
			}
		}
		& .v-submit-btn {
			background-color: var(--primary-clr);
			padding: 0.3rem 1.2rem;
			color: var(--white);

			&:hover {
				background-color: var(--primary-clr-dark);
			}
		}
	}
	& .v-ssss {
		& .v-text {
			font-size: 0.9rem;
			white-space: nowrap;
		}
	}
	& .v-inner {
		height: 100%;
	}
	& :is(.v-span-card, .v-right-small-card) {
		padding: 1.5rem;
		height: 100%;
	}

	& .v-grid-span-container {
		display: grid;
		gap: 2rem 1.5rem;

		@media all and (min-width: 1024px) {
			& {
				grid-template-columns: 1fr 1fr 1fr;

				& .v-card-one {
					grid-column: 1 / 3;
				}
			}
			& :is(.v-span-card, .v-right-small-card) {
				padding: 1.7rem 2rem 1.7rem 2rem;
			}
		}
	}

	& .v-span-card {
		background-color: var(--primary-clr);
		color: var(--white);
		border-radius: 4px;
		row-gap: 2rem;

		& .v-content {
			row-gap: 1.2rem;

			& .v-pre-title {
				font-weight: 500;
			}

			& .v-title {
				font-weight: 700;
			}
			& .v-subcontent {
				line-height: 1.6;
				font-size: 0.9rem;
			}
		}
	}
	& .v-right-small-card {
		background-color: var(--primary-clr);
		display: flex;
		flex-direction: column;
		row-gap: 1.6rem;
		border-radius: 4px;
		color: var(--white);

		& .v-title {
			font-weight: 700;
			word-spacing: 5px;
			line-height: 1;
		}

		& .sm-text {
			font-size: 0.8rem;
		}

		& .v-subcontent {
			line-height: 1.2;
			font-size: 0.9rem;
		}
	}

	.v-image-row {
		display: flex;
		align-items: center;
		gap: 2rem;
		justify-content: space-evenly;

		& .v-c-image {
			width: 110px;
		}
	}
	& .v-trust {
		background-color: #f5f5f5;
		overflow: hidden;
	}

	& .v-card-grid-container {
		& .v-card-grid-container-inner {
			row-gap: 1rem;
			& .v-each-card {
				& .v-each-card-inner {
					background-color: var(--white);
					border-radius: 0.7rem;
					padding: 1rem 0.7rem 0.8rem;
					display: flex;
					flex-direction: column;
					box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 10px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
					row-gap: 0.9rem;
					transition: scale 300ms ease, box-shadow 300ms ease, translate 200ms ease;
					color: var(--black);
					will-change: scale, box-shadow;

					@media all and (min-width: 768px) {
						&:hover {
							box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
							scale: 1.02;
							translate: 0 -1rem;
						}
					}

					& .v-image-container {
						border-radius: 0.7rem;
						overflow: hidden;
						aspect-ratio: 16/9;
					}

					& .v-card-body {
						display: flex;
						flex-direction: column;
						row-gap: 0.8rem;
					}

					& .v-part {
						& .v-part-inner {
							display: flex;
							flex-direction: column;
							row-gap: 3px;

							& :is(.v-top, .v-bottom) {
								display: flex;
								align-items: center;
								flex-wrap: nowrap;
								gap: 6px;
							}
							& .v-top {
								& .v-card-about {
									color: var(--black-opacity-1);
									font-size: 0.88rem;
								}
								& svg {
									--size: 1.1rem;
									height: var(--size);
									width: var(--size);
									color: var(--primary-clr);
								}
							}
							& .v-bottom {
								& .v-text {
									font-size: 0.8rem;
									letter-spacing: -0.2px;
								}
								& svg {
									--size: 1.05rem;
									height: var(--size);
									width: var(--size);
									color: var(--black-opacity-2);
								}
							}
							& .v-card-title {
								font-size: 1.09rem;
								font-weight: 600;
								line-height: 1;
							}
						}

						& .v-icons-part {
							display: flex;
							align-items: center;
							justify-content: flex-end;
							gap: 8px;
							& svg {
								--size: 1.2rem;
								width: var(--size);
								height: var(--size);
								color: var(--black);
							}
						}

						&.v-part-four {
							display: flex;
							flex-direction: column;
							row-gap: 1rem;
							padding: 0.6rem;
							background-color: #f8f9fd;
							border-radius: 0.27rem;
						}
						& .v-title {
							display: flex;
							align-items: center;
							justify-content: space-between;

							& > span {
								opacity: 0.9;
								font-weight: 500;
								font-size: 0.74rem;
								color: var(--black);
							}
						}
						& .v-content {
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-direction: row !important;
							row-gap: 1rem;

							& .v-price {
								color: var(--primary-clr);
								font-weight: 600;
								font-size: 0.9rem;
								letter-spacing: -0.4px;
							}
							& .v-date {
								color: var(--black-opacity-1);
								font-size: 0.73rem;
								font-weight: 500;
								letter-spacing: -0.3px;
							}
						}
					}
				}
			}
		}

		& .v-see-more {
			margin-top: 3rem;
		}
	}

	& .v-grid-items-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: repeat(5, 1fr);

		@media all and (min-width: 991px) {
			& {
				grid-template-columns: repeat(5, 1fr);
				grid-template-rows: 1fr 1fr;
			}
			& .v-grid-item {
				padding: 2rem;
				&:last-child {
					grid-column: -2/-1;
					grid-row: 1/3;
				}
			}
		}

		& .v-grid-item {
			background-color: transparent;
			color: var(--black);
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			padding-block: 1.8rem;
			border: 1px solid var(--border-clr);
			text-align: center;
			transition: background-color 300ms ease-in-out, color 300ms ease-in-out;

			&:hover {
				& .v-text-d {
					margin-left: -1.5rem;
				}
			}

			& .v-text-d {
				line-height: 1.4;
				margin-left: 0;
				transition: margin-left 300ms ease;
			}

			@media all and (max-width: 990.5px) {
				&:last-child {
					grid-column: 1/-1;
				}
			}
			@media all and (max-width: 400px) {
				& {
					font-size: 0.8rem;
					padding-block: 1rem;
				}
				& svg {
					display: none;
				}
			}

			&:hover {
				background-color: var(--primary-clr);
				color: var(--white);

				& svg {
					transition: 300ms ease;
					scale: 1;
				}
			}

			& svg {
				--size: 1.4rem;
				width: var(--size);
				color: var(--white);
				height: var(--size);
				scale: 0;
			}
		}
	}

	& :is(.v-events-around, .v-popular-events) {
		padding-block: 3rem;
		& .v-top-container {
			& a {
				background-color: var(--primary-clr);
				color: var(--white);
				padding: 1rem 1.8rem;
				border-radius: 3px;
				font-size: 0.9rem;
				font-weight: 500;
				white-space: nowrap;

				&:hover {
					background-color: var(--primary-clr-dark);
				}
			}
			& .v-title {
				font-weight: 800;
			}
		}
		& .v-bottom-container {
			& .v-top-links {
				gap: 6px;
				overflow-x: scroll;
				scroll-snap-type: x mandatory;
				height: 80px;
				margin-inline: 1rem;

				& li {
					scroll-snap-align: start;
					transition: filter 300ms ease-in-out;
				}

				@media all and (min-width: 1024px) {
					& {
						overflow: hidden;
						height: auto;
					}
					&:hover > li:hover a {
						font-weight: 600;
					}
					&:hover > li:not(:hover) a:not(.active) {
						filter: blur(1.9px);
						scale: 1.04;
					}
				}

				& li {
					margin-block: 1rem;
				}

				& a {
					white-space: nowrap;
					padding: 0.8rem 1.8rem;
					font-size: 0.83rem;
					border-radius: 3px;
					font-weight: 500;
					transition: all 300ms ease;
					color: var(--black-opacity-1);
					&:hover {
						background-color: var(--primary-clr-opacity-1);
						color: var(--primary-clr);
					}
					&.active {
						background-color: var(--primary-clr);
						color: var(--white);
						&:hover {
							background-color: var(--primary-clr-dark);
							color: var(--white);
						}
					}
				}
			}
		}
	}

	&.v-variant :is(.v-events-around, .v-popular-events) {
		background-color: #fbfbfb;
	}

	& .v-popular-services {
		padding-block: 5rem;
		& .v-scroll-container-title {
			& .v-title {
				font-weight: 700;
			}
		}
		& .v-scroll-container {
			margin-top: 3rem;
			display: flex;
			align-items: stretch;
			gap: 2rem;
		}

		& .v-each-scroll-item {
			position: relative;
			overflow: hidden;
			border-radius: 3px;
			width: 247px;
			height: 345px;

			& .v-image-overlay {
				position: absolute;
				inset: 0;
				height: 100%;

				& img {
					height: 100%;
					width: 100%;
					object-fit: cover;
					object-position: center center;
				}
			}
			& .v-item-inner {
				position: relative;
				inset: 0;
				padding: 1rem;
				color: var(--white);
				height: 100%;
				transition: background-color 400ms ease-in-out;
				background-color: rgb(0 0 0 /0.2);

				&:hover {
					background-color: transparent;
				}
				& .v-title-container {
					display: flex;
					flex-direction: column;
					row-gap: 5px;

					& .v-subcontent {
						font-size: 0.9rem;
					}
					& .v-title {
						letter-spacing: 0.3px;
						font-weight: 600;
					}
				}
			}
		}
		& .slick-arr {
			background-color: var(--white);
			border-radius: 50%;
			padding: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
			height: max-content;
			z-index: 1;
			top: 50%;
			position: absolute;

			&.slick-prev {
				left: 0;
				translate: 2rem -50%;

				@media all and (min-width: 768px) {
					& {
						translate: -25px -50%;
					}
				}
			}
			&.slick-next {
				right: 0;
				translate: -2rem -50%;
			}
			@media all and (min-width: 768px) {
				& {
					translate: 25px -50%;
				}
			}
		}
	}

	& .empower-bizz {
		padding-block: 4rem;
		& .v-title-container {
			& .v-title {
				font-weight: 800;
			}
		}
		& .nav-pills {
			justify-content: space-evenly;
			row-gap: 0.8rem;

			& .nav-link {
				font-weight: 600;
				font-size: 1.05rem;
				text-decoration: underline;
				color: var(--black-opacity-1);
				text-decoration-thickness: 2.2px;
				text-underline-offset: 10px;
				text-decoration-color: transparent;
				transition: text-decoration 300ms ease, color 300ms ease, font-weight 200ms ease;

				&.active {
					background-color: transparent;
					text-decoration-color: var(--primary-clr);
					color: var(--black);
					font-weight: 900;
				}
			}
		}
		& .tab-content {
			& .v-each-tab-pane-content {
				margin: 3.5rem 0 0;
				row-gap: 2rem;

				& .v-content {
					display: flex;
					flex-direction: column;
					row-gap: 1.4rem;

					& .v-title {
						font-weight: 800;
					}
					& .v-subcontent {
						font-size: 1.06rem;
						line-height: 1.3;
					}
				}

				& .v-image-container {
					border-radius: 0.3rem;
					overflow: hidden;
				}
				& .v-cat {
					width: max-content;
				}
			}
		}
	}

	& .v-grid-icon-container {
		padding-block: 5rem;

		& .v-title {
			font-weight: 700;
			color: var(--black-opacity-1);
		}

		& .v-grid-icon-container-inner {
			display: grid;
			margin-top: 3rem;
			grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
			padding: 1.5rem 1rem;
			gap: 1.7rem 1.5rem;

			@media all and (min-width: 768px) {
				& {
					grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
					padding: 1.5rem;
				}
			}

			& .v-each-grid-item {
				& .image-icon {
					max-width: 4rem;
					width: 100%;
					margin-inline: auto;
					scale: 0.85;
					height: 4rem;
					display: flex;
					align-items: center;
					position: relative;

					&::before {
						content: "";
						position: absolute;
						width: 90%;
						height: 2.3px;
						margin-inline: auto;
						background-color: var(--black-opacity-2);
						bottom: -1rem;
						right: 0;
						left: 0;
						opacity: 0.7;
						transform-origin: center;
						transition: scale 400ms ease, background-color 300ms ease;
					}
				}
				&:hover {
					& .image-icon::before {
						scale: 1.8 1;
						background-color: var(--primary-clr);
					}
				}
				& a {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					row-gap: 1.8rem;
					align-items: center;
					text-align: center;

					& .grid-title {
						color: var(--black);
						font-weight: 500;
					}
				}
			}
		}
	}

	.customer-details {
		& .v-title {
			font-weight: 700;
		}
		& .v-customer {
			display: flex;
			align-items: center;
			gap: 0.6rem;
			margin-top: 1rem;

			& .v-customer-name {
				font-weight: 600;
				font-size: 0.9rem;
			}
			& .v-customer-pos {
				font-size: 0.78rem;
			}
		}
		& div.row:has(> .v-card) {
			row-gap: 1rem;
		}
		& .v-card {
			padding: 0 0.4rem;

			& .v-card-container {
				height: 100%;
				min-height: 330px;
				background-color: rgb(6 119 51 / 3%);
				padding: 1.7rem 1.2rem;
				border-radius: 7px;
				display: flex;
				flex-direction: column;
				row-gap: 1rem;
				justify-content: space-evenly;

				& .v-image-logo {
					width: 100px;
				}

				& .v-text-content {
					font-size: 0.9rem;
					line-height: 1.5;
					word-spacing: 1px;
				}
				& div:has(.v-text-content) {
					flex-grow: 1;
					margin-top: 1rem;
				}
				& .v-image-container {
					border-radius: 50%;
					width: 45px;
					overflow: hidden;
					aspect-ratio: 1/1;
				}
			}
		}

		.v-cat {
			display: flex;
			align-items: center;
			gap: 10px;
			justify-content: center;
			background-color: var(--primary-clr);
			width: max-content;
			margin-inline: auto;
			color: var(--white);
			padding: 0.8rem 1.5rem;
			font-size: 0.9rem;
			border-radius: 5px;

			&:hover {
				background-color: var(--primary-clr-dark);
			}
		}
	}
}

/* main @::end */

/* ==== variants of index.css ==== */
/* All Search pages ==> search.html */
/* Events_discover.html @::start */
.v-hero-top {
	& .v-149qf {
		row-gap: 3rem;
	}
	& .v-content {
		display: flex;
		flex-direction: column;
		row-gap: 1.5rem;

		& .v-subcontent {
			line-height: 1.4;
			font-size: 0.88rem;
		}
		& .v-tabs {
			display: flex;
			align-items: center;
			gap: 0.5rem;
			flex-wrap: wrap;

			& .v-pill-button {
				background-color: #f8f7fa;
				padding: 0.68rem 1.27rem;
				font-weight: 500;
				border-radius: var(--rounded-pill);
				font-size: 0.83rem;
				&:hover {
					background-color: #e8e7e9;
				}
				&.active {
					background-color: #eeedf2;
				}
			}
		}
		.v-pre {
			font-size: 0.95rem;
			font-weight: 500;
		}

		& .v-location-form {
			& .v-element {
				--size: 1rem;
				display: flex;
				align-items: center;
				gap: 1rem;
				color: #4b4d61;

				& > svg {
					--svg-size: calc(var(--size));
					height: var(--svg-size);
					width: var(--svg-size);
					scale: 1.5;
				}

				& .form-input {
					flex-grow: 1;
					position: relative;
					max-width: 250px;

					&:focus-within {
						& .v-dropdown {
							user-select: auto;
							pointer-events: all;
							opacity: 1;
							visibility: visible;
							translate: 0 0;
						}
					}

					& .v-dropdown {
						user-select: none;
						pointer-events: none;
						opacity: 0;
						visibility: hidden;
						translate: 0 -10px;
						transition: all 300ms ease;
						width: 100%;
						position: absolute;
						box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
						top: 100%;
						z-index: 2;
						background-color: var(--white);
						right: 0;
						left: 0;
						display: block;
						min-height: 120px;
						display: flex;
						flex-direction: column;
						padding-block: 5px;

						& .v-dropdown-item {
							padding: 1rem 1.2rem;
							color: var(--black-opacity-1);
							font-size: 0.85rem;
							font-weight: 500;
							background-color: transparent;
							gap: 1rem;
							transition: background-color 300ms ease-in-out, color 280ms ease-in-out;
							display: flex;
							align-items: center;

							& svg {
								--size: 1.2rem;
								height: var(--size);
								width: var(--size);
							}

							&:hover {
								background-color: #f8f7fa;
							}
						}
					}

					& .form-control {
						border: none;
						color: var(--primary-clr);
						line-height: 0;
						padding: 0;
						font-weight: 700;
						letter-spacing: 0.3px;
						overflow: hidden;
						border-radius: 0;
						border-bottom: 1px solid var(--black-opacity-2);
						font-size: calc(var(--size) * 1.2);

						&::placeholder {
							font-weight: 700;
							font-size: calc(var(--size) * 1.5);
						}

						@media all and (max-width: 450px) {
							& {
								font-size: calc(var(--size) * 1);
							}
						}
					}
				}
			}
		}

		&.v-main .v-location-form {
			& .v-element {
				--size: 3rem;
				color: var(--primary-clr);

				& .form-input {
					max-width: 100%;

					& .form-control {
						&::placeholder {
							color: var(--primary-clr);
						}
					}

					& .v-dropdown-item {
						font-size: 0.93rem;
					}
				}
				& > svg {
					--svg-size: calc(var(--size) * 1.3);
				}
			}
		}
	}
	& .v-cards-board {
		padding: 1rem 1rem 0;
		background-color: var(--primary-clr-opacity-1);
		position: relative;
		border-radius: 0.5rem;

		& .v-green {
			color: var(--primary-clr);
		}

		& .v-card-grid-container-inner {
			margin: 0;
			translate: 0 3rem;

			& .v-each-card {
				scale: 0.92 0.88;

				@media all and (max-width: 450px) {
					& {
						scale: 1;
					}
				}
			}
		}
	}
}
/* Search.html @::end */

.v-featured-organizers {
	margin-block: 4rem;
	& .v-feature-title-container {
		& .v-left {
			display: flex;
			flex-direction: column;
			row-gap: 0.1rem;

			& .v-title {
				font-weight: 700;
			}
			& .v-subcontent {
				font-size: 0.85rem;
			}
		}
	}
}
.v-scrollable-container {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	gap: 2rem;
	margin-top: 2rem;
	overflow-x: auto;
	padding: 1rem;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 2rem;

	& > li {
		height: 100%;
		scroll-snap-align: start;

		& .v-each-scrollable-card {
			border-radius: 5px;
			height: 100%;
			box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			text-align: center;
			justify-content: space-between;
			row-gap: 1.4rem;
			padding: 1.3rem 2rem;
			border-radius: 5px;
			min-width: 250px;

			& .v-scrollable-title {
				display: flex;
				flex-direction: column;
				row-gap: 0.8rem;
			}

			& .v-image-container {
				--size: 5rem;
				width: var(--size);
				height: var(--size);
				border: 1px solid var(--border-clr);
				aspect-ratio: 1/1;
				border-radius: 50%;
				overflow: hidden;
				margin-inline: auto;
			}
			& .v-close {
				display: flex;
				align-items: center;
				justify-content: end;
			}

			& .v-cat {
				width: max-content;
				margin-inline: auto;
				padding: 0.8rem 2rem;

				&.v-outline {
					background-color: var(--white);
					border: 1.5px solid var(--primary-clr);
					color: var(--primary-clr);

					&:hover {
						background-color: var(--primary-clr);
						color: var(--white);
					}
				}
			}

			& .v-followers {
				opacity: 0.7;
				font-size: 0.9rem;
			}
		}
	}
}
.v-recent-searches {
	display: flex;
	flex-direction: column;
	row-gap: 2rem;

	& .v-title {
		font-weight: 700;
	}

	& .v-searches-container {
		display: flex;
		flex-direction: column;
		row-gap: 1.8rem;
	}
	& li {
		& a.v-search-item {
			display: flex;
			align-items: center;
			white-space: nowrap;
			font-weight: 500;
			font-size: 0.9rem;
			gap: 1rem;
			width: max-content;
			color: var(--black-opacity-2);

			& svg {
				--size: 1.1rem;
				height: var(--size);
				width: var(--size);
				opacity: 0.6;
			}
		}
	}
}
.v-search-page-content {
	:is(&, & .v-93HSB, & .v-child-content) {
		display: flex;
		flex-direction: column;
	}
	& {
		row-gap: 2.3rem;
	}
	& .v-93HSB {
		row-gap: 1rem;

		& .v-93HSB-title {
			& .v-title {
				font-size: 1.2rem;
			}
		}

		& .v-child-content {
			row-gap: 0.8rem;

			& .v-each-gory-item {
				display: flex;
				align-items: center;
				max-width: 20rem;
				cursor: pointer;
				justify-content: space-between;
			}
			& .form-check {
				display: flex;
				align-items: center;
			}
			& .v-text {
				margin-top: 4px;
				font-weight: 500;
				font-size: 0.97rem;
				margin-left: 10px;
				opacity: 0.8;
			}
			& .form-check-input {
				--size: 1.2rem;
				height: var(--size);
				width: var(--size);
				transition: all 300ms ease;
				cursor: pointer;
				&:active {
					background-color: var(--primary-clr-opacity-2);
				}
				&:is(:checked, :focus) {
					box-shadow: 0 0 0 0.25em var(--primary-clr-opacity-1);
					border-color: var(--primary-clr);
				}
				&:checked {
					background-color: var(--primary-clr);
				}
			}
		}
	}
}
.v-right-content {
	& .v-right-content-top {
		& .v-right-title {
			font-weight: 700;
		}
		& .v-right-navigation {
			position: relative;
			display: flex;
			align-items: center;
			gap: 5px;
			justify-content: center;

			& .v-nav-push {
				position: relative;
				border: 1px solid var(--border-clr);
				border-radius: 4px;
				aspect-ratio: 1/1;
				padding: 5px 10px;
				height: auto;
				color: var(--black);
				opacity: 1;
				transition: all 300ms ease;

				&:hover {
					border-color: var(--primary-clr);
					background-color: var(--primary-clr-opacity-1);
					color: var(--primary-clr);
				}

				& svg {
					--size: 1.3rem;
					height: var(--size);
					opacity: 0.5;
					width: var(--size);
					scale: 2;
				}
			}
		}
	}
	& .v-item-container {
		display: flex;
		flex-direction: column;
		row-gap: 1rem;

		& .v-item-content {
			display: flex;
			flex-direction: column;
			row-gap: 1rem;

			& .v-num-of-event {
				font-weight: 600;
				font-size: 1.05rem;
				color: var(--primary-clr);
			}
			& .v-ash93 {
				font-size: 0.9rem;
				font-style: italic;
				opacity: 0.8rem;
				line-clamp: 3;
				-webkit-line-clamp: 3;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: hidden;
				-webkit-box-orient: vertical;
				line-height: 1.4;
				opacity: 0.9;
			}
		}
		& .v-image-container {
			border-radius: 1rem;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			aspect-ratio: 16/9;
			border: 1px solid var(--border-clr);
		}
		& .v-company {
			& .v-company-logo {
				--size: 3rem;
				border: 1px solid var(--border-clr);
				border-radius: 50%;
				max-width: var(--size);
				width: 100%;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center center;
				}
			}

			& .v-company-text {
				font-size: 0.9rem;
				font-weight: 500;
			}
		}
	}
}