// Sass modules
@use "sass:math";

//google font
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Sora:wght@100..800&family=Hanken+Grotesk:wght@100..900&family=IBM+Plex+Sans:wght@100..900&family=Manrope:wght@100..900&display=swap");

// _common.scss
// Layout 1: Starts
.better-payment.better-payment-campaign {
	.bp-team-social_links-wrapper {
		margin-top: 10px;
		gap: 10px;

		a {
			text-decoration: none;
			cursor: pointer;
			margin-right: 5px;

			svg {
				height: 20px;
				fill: #00000080;
				line-height: 20px;
			}

			&:hover {
				svg {
					fill: #000000;
				}
			}
		}
	}

	// _structure.scss
	// Container
	.bp-container {
		max-width: 1320px;
		margin: 0 auto;
		padding: 0 12px;
		z-index: 999;
		position: relative;
	}

	.bp-hero_container {
		max-width: 1460px;
		margin: 0 auto;
		padding: 0 12px;
		z-index: 999;
		position: relative;
	}

	// Row
	.bp-row {
		display: flex;
		flex-wrap: wrap;
		margin-left: -12px;
		margin-right: -12px;
	}

	// Column
	.bp-col {
		padding-left: 12px;
		padding-right: 12px;
		flex: 1; // Default behavior
	}

	// Grid Columns (12 Columns)
	@for $i from 1 through 12 {
		.bp-col_#{$i} {
			flex: 0
				0
				math.percentage(math.div($i, 12)); // Calculate column width
			max-width: math.percentage(math.div($i, 12));
		}
	}

	.bp-pro-banner {
		max-width: 100%;
		height: auto;
		border-radius: 16px;
	}

	.better-payment_campaign-layout_1 {
		padding: 70px 0;

		@media (max-width: 900px) {
			padding: 30px 0;
		}

		.bp-donation_thoughts-section {
			background-color: #fcf8fa;
			padding-bottom: 85px;

			@media (max-width: 900px) {
				padding-bottom: 60px;
			}

			.bp-image_wrapper-left {
				width: 100%;
				min-height: 1px;

				.bp-left-img-wrapper {
					margin-top: 75px;
				}
			}

			.bp-text_wrapper {
				max-width: 720px;
				margin: 0 auto;

				.bp-text_primary {
					margin-bottom: 32px;

					@media (max-width: 1200px) {
						font-size: 46px;
						margin-bottom: 22px;
					}

					@media (max-width: 900px) {
						font-size: 40px;
						margin-bottom: 20px;
						padding: 0 40px;
					}

					@media (max-width: 500px) {
						font-size: 36px;
						padding: 0;
					}
				}

				.bp-text_secondary {
					margin-bottom: 32px;

					@media (max-width: 1200px) {
						margin-bottom: 22px;
					}

					@media (max-width: 900px) {
						margin-bottom: 20px;
						padding: 0 40px;
					}

					@media (max-width: 500px) {
						margin-bottom: 20px;
						padding: 0;
					}
				}

				.bp-share_box {
					span {
						font-size: 18px;
						font-weight: 500;
						text-decoration-skip-ink: none;
						color: #1d2939;
					}

					.bp-social_media {
						width: 40px;
						height: 40px;
						margin: 10px;

						@media (max-width: 900px) {
							width: 30px;
							height: 30px;
							margin: 5px 5px 25px 5px;
						}
					}
				}
			}

			.bp-image_wrapper-right {
				width: 100%;
				min-height: 1px;

				.bp-right-img-wrapper {
					margin-top: 65px;
				}
			}
		}

		.bp-charity_raised-section {
			margin-bottom: 50px;

			.bp-charity_raised-card {
				background-color: #f8f2ff;
				border: 1px solid #f2ebfb;
				border-radius: 20px;
				overflow: hidden;

				.bp-charity_raised-img-wrapper {
					height: 100%;
					width: 100%;

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

				.bp-form_wrapper {
					padding: 40px 60px 40px 16px;
					display: flex;
					flex-direction: column;
					height: 100%;

					@media (max-width: 1200px) {
						padding: 10px 10px 10px 0px;
					}

					@media (max-width: 900px) {
						padding: 20px;
					}

					.bp-form_header {
						margin-bottom: 32px;

						@media (max-width: 1200px) {
							margin-bottom: 22px;
						}

						@media (max-width: 900px) {
							margin-bottom: 10px;
						}
					}

					form {
						.bp-form_top {
							margin-bottom: 6px;

							span {
								margin: 5px;
							}

							.bp-aamount {
								color: #9125ff;
							}

							.bp-progress_output {
								color: #4b5d7b;
							}
						}

						.bp-progress_bar {
							appearance: none;
							width: 100%;
							height: 12px;
							background-color: #eaddf8;
							border-radius: 9px;
							overflow: hidden;
							margin-bottom: 20px;

							@media (max-width: 1200px) {
								margin-bottom: 12px;
							}
						}

						.bp-progress_bar::-webkit-progress-bar {
							background-color: #eaddf8;
						}

						.bp-progress_bar::-webkit-progress-value {
							background-color: #b66fff;
							transition: width 0.3s ease;
						}

						/* For Mozilla (Firefox) */
						.bp-progress_bar::-moz-progress-bar {
							background-color: #b66fff;
							border-radius: 6px;
							transition: width 0.3s ease;
						}

						.bp-donate_amounts {
							flex-wrap: wrap;
							gap: 12px;
							margin-bottom: 20px;
						}

						.bp-radio_label {
							display: inline-flex;
							align-items: center;
							justify-content: center;
							background-color: #f6eeff;
							border: 1px solid #eddcff;
							border-radius: 8px;
							color: #141320;
							outline: none;
							text-align: center;
							padding: 20px;
							width: 100%;
							/* Make it flexible for responsiveness */
							max-width: 123px;
							height: 48px;
							font-size: 20px;
							font-weight: 500;
							cursor: pointer;
							transition: all 0.3s ease;

							input[type="radio"] {
								display: none;
							}

							@media (max-width: 1200px) {
								margin-bottom: 12px;
							}

							@media (max-width: 900px) {
								padding: 0px;
								font-size: 16px;
							}

							&:last-child {
								margin-right: 0;
							}
						}

						.bp-radio_label input[type="radio"]:checked {
							background-color: #d3b3ff;
						}

						.bp-radio_label:hover {
							background-color: #f1d8ff;
						}

						.bp-radio_active {
							background-color: #f1d8ff;
						}

						.campaign-custom-amount {
							background-color: #f6eeff;
							border: 1px solid #eddcff;
							width: 100%;
							padding: 20px;
							border-radius: 8px;
							outline: none;
							font-size: 17px;
							font-weight: 500;
							color: #48506d;
							margin-bottom: 32px;

							@media (max-width: 1200px) {
								margin-bottom: 22px;
							}

							@media (max-width: 900px) {
								padding: 15px;
							}

							&::placeholder {
								font-size: 17px;
								font-weight: 500;
								color: #48506d;
								opacity: 1;
							}
						}

						.bp-donate_btn {
							padding: 20px 32px 20px 32px;
							font-size: 20px;
							font-weight: 500;

							@media (max-width: 900px) {
								padding: 15px 25px;
								font-size: 15px;
							}
						}
					}
				}
			}
		}

		.bp-content_navigation-section {
			background-color: #fcf8fa;
			margin-bottom: 20px;

			.bp-tab_navigation {
				gap: 60px;

				@media (max-width: 500px) {
					gap: 30px;
				}

				.bp-tab_button {
					border: none;
					cursor: pointer;
					transition: background-color 0.3s;
					background-color: transparent;
					position: relative;
					display: inline-block;
					text-decoration: none;
					margin-bottom: 55px;
					padding: 8px 2px;

					@media (max-width: 1200px) {
						margin-bottom: 22px;
					}

					@media (max-width: 900px) {
						margin-bottom: 20px;
					}

					@media (max-width: 500px) {
						padding: 0;
					}

					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 0;
						height: 3px;
						background-color: #9125ff;
						transition: width 0.3s ease;
						border-radius: 8px;
					}

					&:hover::after {
						width: 80%;
						border-radius: 8px;
					}

					&:focus::after {
						width: 80%;
						border-radius: 8px;
					}

					&.bp-active::after {
						width: 80%;
					}
				}
			}

			.bp-tab_content {
				.bp-tab_pane {
					display: none;

					&.bp-active {
						display: block;
					}

					&#overview {
						.bp-overview_text {
							max-width: 1081px;
							margin-bottom: 55px;

							@media (max-width: 1200px) {
								margin-bottom: 22px;
								padding: 0;
							}

							@media (max-width: 900px) {
								margin-bottom: 20px;
							}

							// bp-text_primary responsive 900 px
							@media (max-width: 500px) {
								padding: 0;
							}
						}

						.bp-overview_image-wrapper {
							margin-bottom: 55px;

							@media (max-width: 700px) {
								display: flex;
								flex-direction: column;
								gap: 6px;
							}

							.bp-overview_img-1 {
								margin-bottom: 24px;

								@media (max-width: 700px) {
									margin-bottom: 0px;
								}
							}
						}

						.bp-overview_text-wrapper {
							max-width: 1081px;
							margin-bottom: 55px;

							.bp-overview_list {
								padding: 20px 0;

								@media (max-width: 1200px) {
									padding: 10px;
								}

								.bp-overview_list-item {
									span {
										margin: 6px;
										line-height: 0;

										@media (max-width: 900px) {
											margin: 3px;
										}

										svg {
											@media (max-width: 900px) {
												height: 20px;
												width: 20px;
											}
										}
									}

									p {
										margin: 6px;
										color: #48506d;
										font-weight: 300;

										@media (max-width: 900px) {
											margin: 3px;
										}
									}
								}
							}
						}

						.bp-overview_team-wrapper {
							.bp-tram_section-header {
								margin-bottom: 24px;

								@media (max-width: 700px) {
									margin-bottom: 20px;
								}
							}

							.img-box {
								margin-bottom: 16px;
								max-width: 312px;
								margin-bottom: 16px;

								img {
									object-fit: cover;
								}

								@media (max-width: 700px) {
									margin-bottom: 14px;
								}
							}

							.member-name {
								font-size: 20px;
								font-weight: 400;

								@media (max-width: 700px) {
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
	}

	// Layout 1: Ends

	// Layout 2: Starts
	.better-payment_campaign-layout_2 {
		.bp-donation_hero-section {
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			padding: 159px 0;
			transition: background-image 1s ease-in-out;
			margin-bottom: 55px;
			position: relative;
			height: 100vh;

			@media (max-width: 1200px) {
				padding: 100px 0;
				height: auto;
			}

			@media (max-width: 900px) {
				padding: 80px 0;
				margin-bottom: 100px;
			}

			@media (max-width: 600px) {
				height: auto;
				margin-bottom: 50px;
			}

			@media (max-width: 500px) {
				background-image: none !important;
				background-color: #ed4961;
				padding: 40px 0;
			}

			.bp-text_wrapper {
				max-width: 740px;
				width: 100%;

				@media (max-width: 900px) {
					margin-bottom: 25px;
				}

				.bp-text_primary {
					margin-bottom: 40px;

					@media (max-width: 1200px) {
						font-size: 60px;
						margin-bottom: 35px;
					}

					@media (max-width: 900px) {
						margin-bottom: 30px;
						font-size: 46px;
					}

					@media (max-width: 500px) {
						margin-bottom: 25px;
						font-size: 32px;
					}
				}

				.bp-text_xm {
					color: #f2f4f7;
					line-height: 1.8;
					margin-bottom: 24px;
				}

				.bp-donate_btn {
					padding: 20px 24px;
				}
			}

			.bp-progress_bar-card {
				background-color: #ffffff;
				border-radius: 16px;
				padding: 21px 31px;
				width: 100%;
				margin-bottom: 16px;

				.card-tag {
					font-size: 16px;
					font-weight: 600;
					color: #d97706;
					background-color: #fffbeb;
					padding: 4px 12px 4px 12px;
					border-radius: 27px;
					margin-bottom: 10px;
				}

				.card-header {
					margin-bottom: 24px;
				}

				form {
					.bp-progress_bar {
						width: 100%;
						appearance: none;
						border-radius: 9px;
						overflow: hidden;
						margin-bottom: 12px;
						background-color: #f3f3f3;
						height: 20px;
						color: #d6421d;

						&::-webkit-progress-bar {
							background-color: #f3f3f3;
						}

						&::-webkit-progress-value {
							background-color: #d6421d;
							transition: width 0.3s ease;
						}

						&::-moz-progress-bar {
							background-color: #d6421d;
							transition: width 0.3s ease;
						}

						&::-ms-fill {
							background-color: #d6421d;
						}
					}

					label.bp-donations {
						margin-bottom: 24px;
						gap: 3px;
					}

					.card-raised_btn {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						border: 1px solid #d0d5dd;
					}
				}
			}

			.bp-image_gallery-wrapper {
				.image-gallery {
					.img-wrapper {
						margin: 3px;
						width: 100%;
						max-width: 132px;
						height: 64px;
						border-radius: 6px;
						overflow: hidden;
						cursor: pointer;

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

					.image_overlay {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						background-color: #00000080;
						z-index: 4;
					}
				}
			}

			.bp-hero_overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.4);
				z-index: 1;
			}
		}

		.bp-content_navigation-section {
			background-color: #fcf8fa;
			padding-bottom: 55px;

			.bp-tab_navigation {
				gap: 60px;

				@media (max-width: 500px) {
					gap: 30px;
				}

				.bp-tab_button {
					border: none;
					cursor: pointer;
					transition: background-color 0.3s;
					background-color: transparent;
					position: relative;
					display: inline-block;
					text-decoration: none;
					margin-bottom: 55px;
					padding: 8px 2px;

					@media (max-width: 1200px) {
						margin-bottom: 22px;
					}

					@media (max-width: 900px) {
						margin-bottom: 20px;
					}

					// bp-text_primary responsive 900 px
					@media (max-width: 500px) {
						padding: 0;
					}

					&::after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 0;
						width: 0;
						height: 3px;
						background-color: #ed4961;
						transition: width 0.3s ease;
						border-radius: 8px;
					}

					&:hover::after {
						width: 80%;
						border-radius: 8px;
					}

					&:focus::after {
						width: 80%;
						border-radius: 8px;
					}

					&.bp-active::after {
						width: 80%; // Ensure active state is distinct
					}
				}
			}

			.bp-tab_content {
				.bp-tab_pane {
					display: none;

					&.bp-active {
						display: block;
					}

					&#overview {
						.share-icon_wrapper {
							justify-content: flex-end;
							align-items: flex-end;
							height: 100%;
							width: 100%;

							@media (max-width: 900px) {
								justify-content: center;
								align-items: center;
							}

							.share-header {
								color: #1d2939;
								margin-bottom: 12px;

								@media (max-width: 900px) {
									width: 100%;
									text-align: center;
									margin-top: 12px;
								}
							}

							.bp-socal_media-wrapper {
								gap: 20px;

								.bp-social_media {
									height: 40px;
									width: 40px;

									@media (max-width: 700px) {
										height: 30px;
										width: 30px;
									}
								}
							}

							.bp-overview_text {
								max-width: 771px;

								@media (max-width: 1200px) {
									margin-bottom: 22px;
									padding: 0;
								}

								@media (max-width: 900px) {
									margin-bottom: 20px;
								}

								// bp-text_primary responsive 900 px
								@media (max-width: 500px) {
									padding: 0;
								}
							}

							.bp-overview_image-wrapper {
								margin-bottom: 55px;

								@media (max-width: 700px) {
									display: flex;
									flex-direction: column;
									gap: 6px;
								}

								.bp-overview_img-1 {
									margin-bottom: 24px;

									@media (max-width: 700px) {
										margin-bottom: 0px;
									}
								}
							}

							.bp-overview_text-wrapper {
								max-width: 1081px;
								margin-bottom: 55px;

								.bp-overview_list {
									padding: 20px 0;

									@media (max-width: 1200px) {
										padding: 10px;
									}

									.bp-overview_list-item {
										span {
											margin: 6px;
											line-height: 0;

											@media (max-width: 900px) {
												margin: 3px;
											}

											svg {
												@media (max-width: 900px) {
													height: 20px;
													width: 20px;
												}
											}
										}

										p {
											margin: 6px;
											color: #48506d;
											font-weight: 300;

											@media (max-width: 900px) {
												margin: 3px;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.bp-donate_section {
			padding-bottom: 40px;

			.bp-donate_section-wrapper {
				background-color: #ed4961;
				border-radius: 32px;
				padding: 72px;

				@media (max-width: 1200px) {
					padding: 42px;
				}

				@media (max-width: 900px) {
					padding: 32px;
				}

				@media (max-width: 500px) {
					padding: 20px;
				}

				.bp-section_top-wrapper {
					.bp-text_wrapper {
						max-width: 609px;

						@media (max-width: 900px) {
							margin-bottom: 30px;
						}

						.bp-donate_section-header {
							font-size: 48px;
							font-weight: 800;
							color: #f9fafb;
							margin-bottom: 32px;

							@media (max-width: 1200px) {
								margin-bottom: 20px;
								font-size: 38px;
							}

							@media (max-width: 900px) {
								font-size: 26px;
							}
						}

						.bp-donate_section-sub_header {
							color: #eaecf0;
							font-weight: 300;
							margin-bottom: 24px;

							@media (max-width: 1200px) {
								font-size: 20px;
							}

							@media (max-width: 900px) {
								font-size: 18px;
							}
						}

						.bp-donate_btn {
							padding: 20px 24px;

							span {
								font-size: 16px;
							}
						}
					}

					.img-wrapper {
						border-radius: 20px;
						overflow: hidden;
						line-height: 0;

						img {
							object-fit: cover;
						}
					}
				}

				.bp-section_bottom-wrapper {
					margin-top: 132px;

					@media (max-width: 1200px) {
						-webkit-margin-bottom-collapse: 100px;
					}

					@media (max-width: 900px) {
						margin-top: 80px;
					}

					@media (max-width: 500px) {
						margin-top: 40px;
					}

					.bottom-wrapper_header {
						color: #f9fafb;
						margin-bottom: 12px;
						font-weight: 500;
					}

					.card-wrapper {
						background-color: #ffffff;
						border-radius: 12px;
						overflow: hidden;
						margin-top: 20px;

						@media (max-width: 1200px) {
							flex-direction: column;
							align-items: center;
						}

						@media (max-width: 700px) {
							margin-bottom: 20px;
							flex-direction: row;
						}

						.card-img_box {
							border-radius: 12px;
							overflow: hidden;
							margin: 12px;
							height: 140px;
							width: 50%;

							@media (max-width: 1200px) {
								width: 100%;
								padding: 0 12px;

								img {
									border-radius: 8px;
								}
							}

							@media (max-width: 700px) {
								padding: 0;
								width: 50%;
							}

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

						.card-text_box {
							height: 100%;
							max-width: 182px;
							display: flex;
							flex-direction: column;
							gap: 10px;
							padding-right: 12px;

							@media (max-width: 1200px) {
								padding: 6px;
								max-width: 100%;
								width: 100%;
							}

							.card-header {
								font-size: 18px;
								font-weight: 500;
								color: #1d2939;
								margin-bottom: 32px;
								max-width: 182px;
								height: 50px;
								margin: 20px 0;

								@media (max-width: 1200px) {
									font-size: 16px;
									margin-bottom: 24px;
									height: auto;
									margin: 0;
									max-width: 100%;
								}

								@media (max-width: 900px) {
									font-size: 14px;
									margin-bottom: 10px;
								}
							}

							.card-btn {
								width: 32px;
								height: 32px;
								border-radius: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
								border: 0.6px solid #d0d5dd;
								margin: 6px;
								cursor: pointer;
							}
						}
					}
				}
			}
		}
	}

	// Layout 2: Ends

	// Layout 3: Starts
	.better-payment_campaign-layout_3 {
		.bp-donation_hero-section {
			margin-bottom: 80px;

			@media (max-width: 900px) {
				margin-bottom: 40px;
			}

			.bp-hero_wrapper {
				border-bottom: 2px solid #dbd8e5;
				padding: 80px 0;

				@media (max-width: 1200px) {
					padding: 60px 0;
				}

				@media (max-width: 900px) {
					padding: 40px 0;
				}

				@media (max-width: 500px) {
					padding: 20px 0;
				}

				.bp-text_wrapper {
					max-width: 570px;
					width: 100%;

					@media (max-width: 900px) {
						max-width: 100%;
						margin-bottom: 25px;
					}

					.bp-hero_header {
						padding-bottom: 32px;
						border-bottom: 2px solid #dbd8e5;

						@media (max-width: 1200px) {
							padding-bottom: 20px;
							font-size: 40px;
						}

						@media (max-width: 900px) {
							font-size: 50px;
						}

						@media (max-width: 500px) {
							font-size: 35px;
						}
					}

					.bp-hero_secondary-text {
						@media (max-width: 1200px) {
							margin-bottom: 20px;
						}
					}

					.bp-share_icon-wrapper {
						margin-bottom: 85px;

						@media (max-width: 1200px) {
							margin-bottom: 20px;
						}

						.share-icon_header {
							font-size: 18px;
							font-weight: 500;
							color: #1d2939;
							margin-right: 6px;
						}

						.share-icons {
							.bp-social_media {
								margin: 0 6px;
								height: 24px;
								width: 24px;
								cursor: pointer;
								position: relative;
								z-index: 999;
							}
						}
					}

					.bp-payment_item {
						margin-bottom: 24px;
						gap: 12px;

						@media (max-width: 1200px) {
							justify-content: center;
							gap: 10px;
						}

						.bp-payment_item_bg {
							background-color: #fbfbff;
							border: 1px solid #dedde7;
							border-radius: 8px;
							max-width: 133px;
							min-width: 100px;
							width: 100%;
							cursor: pointer;
							padding: 20px 0px;
							text-align: center;
							color: #141320;

							@media (max-width: 1200px) {
								padding: 13px 0px;
							}

							&.active_border {
								border: 1px solid #4e36e9;
								background-color: #ffffff;
								color: #2b2748;
							}

							.logo {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 100%;
								height: 100%;
								width: 100%;
								padding: 16px;

								img {
									height: 32px;
									object-fit: contain;
								}
							}
						}
					}

					.bp-payment_form {
						.input-fild {
							border-bottom: 2px dashed #dbd8e5;

							.layout-3-currency {
								color: #48506d;
							}

							.bp-payment_form-input {
								border: none;
								padding: 0;
								outline: none;
								font-size: 56px;
								color: #1d2939;
								width: calc(100% - 45px);
								appearance: none;
								-webkit-appearance: none;
								-moz-appearance: none;

								@media (max-width: 900px) {
									font-size: 40px;
								}

								@media (max-width: 500px) {
									font-size: 35px;
								}

								&::-webkit-inner-spin-button,
								&::-webkit-outer-spin-button {
									appearance: none;
									-webkit-appearance: none;
									margin: 0;
								}

								&::placeholder {
									font-size: 56px;
									color: #1d2939;

									@media (max-width: 900px) {
										font-size: 40px;
									}

									@media (max-width: 500px) {
										font-size: 35px;
									}
								}
							}
						}

						.bp-donation_btn {
							padding: 20px 26px;

							@media (max-width: 900px) {
								margin: 0 auto;
								padding: 20px;
							}

							span {
								margin: 0 6px;
							}
						}
					}
				}

				.bp-img_wrapper {
					width: 100%;
					overflow: hidden;

					@media (max-width: 900px) {
						max-width: 550px;
						margin: 0 auto;
					}

					img {
						object-fit: cover;
						border-radius: 40px;
					}
				}
			}
		}

		.bp-help_section {
			.bp-help_wrapper {
				.bp-img_gallery {
					display: grid;
					grid-template-columns: repeat(2, 1fr);
					grid-auto-rows: 1fr;
					gap: 32px;
					margin-bottom: 55px;
					margin-top: 55px;

					@media (max-width: 700px) {
						gap: 10px;
					}

					.bp-img_wrapper {
						width: 100%;
						height: auto;
						border-radius: 12px;
						overflow: hidden;

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

					.bp-img_wrapper:nth-child(3) {
						grid-column: 1 / -1;
					}
				}
			}
		}
	}
	// Layout 3: Ends

	// Layout 1 and layout 2 common
	.better-payment_campaign-layout_1,
	.better-payment_campaign-layout_2 {
		background-color: #fcf8fa;
	}

	// _base.scss
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		text-decoration: none;
	}

	p {
		line-height: 1.5;
	}

	img {
		width: 100%;
		height: auto;
	}

	span {
		display: inline-block;
	}

	a {
		display: block;
		cursor: pointer;
		z-index: 999;
		position: relative;
	}

	.bp-position_reletive {
		position: relative;
	}

	.bp-sora_font {
		font-family: "Sora", serif;
		font-optical-sizing: auto;
		font-style: normal;
	}

	.bp-inter_font {
		font-family: "Inter", serif;
		font-optical-sizing: auto;
		font-style: normal;
	}

	.bp-hanken_font {
		font-family: "Hanken Grotesk", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}

	.bp-ibm_font {
		font-family: "IBM Plex Sans", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}

	.bp-manrope_font {
		font-family: "Manrope", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
	}

	.bp-text_align-center {
		text-align: center;
	}

	.bp-text_align-left {
		text-align: left;
	}

	.bp-text_align-right {
		text-align: right;
	}

	.bp-line_height-0 {
		line-height: 0;
	}

	.bp-flex {
		display: flex;
	}

	.bp-justify_content-center {
		justify-content: center;
	}

	.bp-align_items-center {
		align-items: center;
	}

	.bp-justify_content-space_between {
		justify-content: space-between;
	}

	.bp-display_none {
		display: none;
	}

	.bp-flex_wrap {
		flex-wrap: wrap;
	}

	@media (max-width: 900px) {
		.bp-col_100-active_900 {
			flex: 0 0 100%;
			max-width: 100%;
			padding: 0 12px;
		}

		.bp-left_right-image_style-active_900 {
			display: none;
		}

		.bp-d_none-ctive_900 {
			display: none;
		}
	}

	@media (max-width: 700px) {
		.bp-justify_content-center_active-700 {
			justify-content: center;
		}
		.bp-flex_direction-reverse_active-700 {
			flex-direction: column-reverse;
		}

		.bp-col_100-active_700 {
			flex: 0 0 100%;
			max-width: 100%;
			padding: 0 12px;
		}

		.bp-col_50-active_700 {
			flex: 0 0 49%;
			max-width: 49%;
			padding: 6px;

			@media (max-width: 400px) {
				padding: 3px;
			}
		}
	}

	// Layout 1: Font-size , button style starts
	.better-payment_campaign-layout_1 {
		// 1. Text Primary
		.bp-text_primary {
			font-size: 56px;
			font-weight: 600;
			color: #1d2939;
		}

		// 2. Text Secondary
		.bp-text_secondary {
			font-size: 24px;
			font-weight: 300;
			color: #48506d;

			// bp-text_secondary responsive 1200 px
			@media (max-width: 1200px) {
				font-size: 20px;
			}

			// bp-text_secondary responsive 900 px
			@media (max-width: 900px) {
				font-size: 18px;
			}
		}

		.bp-text_xxl {
			font-size: 32px;
			font-weight: 600;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 28px;
			}

			@media (max-width: 900px) {
				font-size: 25px;
			}

			@media (max-width: 500px) {
				font-size: 23px;
			}
		}

		.bp-text_xl {
			font-size: 28px;
			font-weight: 600;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 24px;
			}

			@media (max-width: 900px) {
				font-size: 20px;
			}
		}

		.bp-text_l {
			font-size: 24px;
			font-weight: 600;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 22px;
			}

			@media (max-width: 900px) {
				font-size: 18px;
			}

			@media (max-width: 500px) {
				font-size: 16px;
			}
		}

		.bp-text_m {
			font-size: 18px;
			font-weight: 500;
			color: #1d2939;

			@media (max-width: 900px) {
				font-size: 15px;
			}
		}

		.btn-1 {
			border-radius: 8px;
			background-color: #9125ff;
			color: #ffffff;
			border: none;
			cursor: pointer;

			&:hover {
				background-color: #9125ff;
				color: #ffffff;
			}
		}
	}
	// Layout 1: Font-size , button style ends

	// Layout 2: Font-size , button style starts
	.better-payment_campaign-layout_2 {
		// 1. Text Primary
		.bp-text_primary {
			font-size: 64px;
			font-weight: 600;
			color: #f9fafb;
		}

		// 2. Text Secondary
		.bp-text_secondary {
			font-size: 24px;
			font-weight: 300;
			color: #48506d;

			// bp-text_secondary responsive 1200 px
			@media (max-width: 1200px) {
				font-size: 20px;
			}

			// bp-text_secondary responsive 900 px
			@media (max-width: 900px) {
				font-size: 18px;
			}
		}

		.bp-text_xxl {
			font-size: 32px;
			font-weight: 600;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 28px;
			}

			@media (max-width: 900px) {
				font-size: 25px;
			}

			@media (max-width: 500px) {
				font-size: 23px;
			}
		}

		.bp-text_xl {
			font-size: 28px;
			font-weight: 400;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 24px;
			}

			@media (max-width: 900px) {
				font-size: 20px;
			}
		}

		.bp-text_l {
			font-size: 24px;
			font-weight: 600;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 22px;
			}

			@media (max-width: 900px) {
				font-size: 18px;
			}

			@media (max-width: 500px) {
				font-size: 16px;
			}
		}

		.bp-text_xm {
			font-size: 20px;
			font-weight: 500;

			@media (max-width: 900px) {
				font-size: 15px;
			}
		}

		.bp-text_m {
			font-size: 16px;
			font-weight: 500;
			color: #475467;

			@media (max-width: 900px) {
				font-size: 15px;
			}
		}

		.btn-2 {
			border-radius: 1000px;
			background-color: #ffffff;
			color: #344054;
			border: none;
			cursor: pointer;
			font-weight: 500;

			&:hover {
				background-color: #ffffff;
				color: #344054;
			}
		}
	}
	// Layout 2: Font-size , button style ends

	// Layout 3: Font-size , button style starts
	.better-payment_campaign-layout_3 {
		// 1. Text Primary
		.bp-text_primary {
			font-size: 56px;
			font-weight: 500;
			color: #1d2939;
		}

		// 2. Text Secondary
		.bp-text_secondary {
			font-size: 20px;
			font-weight: 300;
			color: #48506d;

			// bp-text_secondary responsive 1200 px
			@media (max-width: 1200px) {
				font-size: 18px;
			}

			// bp-text_secondary responsive 900 px
			@media (max-width: 900px) {
				font-size: 16px;
			}
		}

		.bp-text_xxl {
			font-size: 40px;
			font-weight: 500;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 28px;
			}

			@media (max-width: 900px) {
				font-size: 25px;
			}

			@media (max-width: 500px) {
				font-size: 23px;
			}
		}

		.bp-text_xl {
			font-size: 28px;
			font-weight: 600;
			color: #2b2748;

			@media (max-width: 1200px) {
				font-size: 24px;
			}

			@media (max-width: 900px) {
				font-size: 20px;
			}
		}

		.bp-text_l {
			font-size: 20px;
			font-weight: 500;
			color: #1d2939;

			@media (max-width: 1200px) {
				font-size: 22px;
			}

			@media (max-width: 900px) {
				font-size: 18px;
			}

			@media (max-width: 500px) {
				font-size: 16px;
			}
		}

		.bp-text_xm {
			font-size: 20px;
			font-weight: 500;

			@media (max-width: 900px) {
				font-size: 15px;
			}
		}

		.bp-text_m {
			font-size: 16px;
			font-weight: 300;
			color: #48506d;

			@media (max-width: 900px) {
				font-size: 15px;
			}
		}

		.btn-3 {
			border-radius: 12px;
			background-color: #4e36e9;
			color: #ffffff;
			border: none;
			cursor: pointer;
			font-weight: 500;
			font-size: 18px;

			&:hover {
				background-color: #4e36e9;
				color: #ffffff;
			}
		}

		.margin-bottom_32 {
			margin-bottom: 32px;
			@media (max-width: 1200px) {
				margin-bottom: 24px;
			}

			@media (max-width: 900px) {
				margin-bottom: 20px;
			}
		}
	}
	// Layout 3: Font-size , button style ends
}