.amount-btn {
	color: #707070;
	transition: all 0.2s ease;
	background-color: #f5f5f5;
	font-weight: 600;
	border: 1px solid #b7b7b7 !important;
}

.amount-btn.active {
	background-color: #1bbe9e;
	color: #fff;
}

.charity-img {
	max-width: 300px;
	border-radius: 10px;
	margin-bottom: 20px;
}


.card {
	border: 1px solid #b7b7b7 !important;
	box-shadow: unset !important;
	padding: 38px 26px !important;
	width: 100%;
	max-width: 506px;
}

.price-inp {
	background-color: #ffffff;
	border: 1px solid #b7b7b7;
	min-height: 50px;
}

.phone-inp {
	background-color: #ffffff;
	border: 1px solid #b7b7b7;
	padding: 11px 20px !important;
	min-height: 50px;
	font-size: 16px !important;
}

.phone-inp::placeholder {
	text-align: right !important;
	font-size: 14px !important;
}

.number-counter {
	background-color: #fff;
	border: 1px solid #b7b7b7;
	;
}

.amount-btn:hover {
	background-color: #1bbe9e;
	color: #fff;
}

.description {
	color: rgb(255, 255, 255);
	font-size: 17px;
}

.active-btn {
	background-color: #3b7d54 !important;
	border-color: #3b7d54 !important;
	color: white !important;
}

.submit-btn {
	background-color: #1bbe9e;
	color: white;
	border-radius: 8px;
	font-weight: 500;
	transition: background-color 0.2s ease;
}

.submit-btn:hover {
	background-color: #178871;
	color: white;
}

.form-control:focus {
	box-shadow: none;
	border-color: #3b7d54;
}

.logoImg {
	max-width: 70px;
}

.progress {
	background-color: #dbdbdb;
}

.main {
	position: relative;
	min-height: 100vh;

}

.content-box {
	position: relative;
	z-index: 9999;
}

.content-box h1 {
	color: #fff;
}

.content-img-box {
	margin-bottom: 35px;
}

.content-img-box img {
	width: 100%;
	border-radius: 15px;
}

.share_btn{
	max-width: 150px;
	padding: 8px 0;
	border: 1px solid  #1bbe9e;
	border-radius: 10px;
	background-color: #fff;
}

#copy-msg {
	position: absolute;
	top: 0%;
	right: -15%;
	color: #000000;
	background-color: #fff;
	padding: 10px 16px;
	border-radius: 20px;
}

/* //////////////////////////////////////?    icons and share      ///////////////// */


	.interaction-section {
		border-top: 1px solid rgba(255, 255, 255, 0.55);
		overflow: hidden;
	}


	.share-btn-modern:hover {
		background-color: #1bbe9e;
		border-color: #1bbe9e;
		color: #ffffff;
		box-shadow: 0 4px 15px rgba(27, 190, 158, 0.4);
		transform: translateY(-2px);
	}


	.copy-tooltip {
		position: absolute;
		top: -45px;
		left: 50%;
		transform: translateX(-50%);
		background-color: #1bbe9e;
		color: #fff;
		padding: 6px ;
		border-radius: 8px;
		font-size: 13px;
		font-weight: bold;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		min-width: 110px;
	}

	.copy-tooltip.show {
		opacity: 1;
		visibility: visible;
		left: -50px;
	}

	.ttm-custom {
		padding: 20px;
		border-radius: 16px;
	}



	.social-icons-wrapper {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
	}

	.social-icon {
		width: 45px;
		height: 45px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.social-icon img,
	.social-icon svg {
		width: 35px !important;
		height: 35px !important;
		transition: all .3s;
	}

	.social-icon:hover {
		transform: translateY(-3px);
	}

	.social-icon:hover img,
	.social-icon:hover svg {
		transform: scale(1.15);
	}


	.ussd-section {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.ussd-box {
		display: inline-flex;
		align-items: center;
		gap: 12px;
		background: rgba(255, 255, 255, 0.35);
		padding: 9px 18px;
		border-radius: 50px;
		border: 1px dashed rgba(255, 255, 255, 0.6);
		cursor: pointer;
	}

	.ussd-label {
		color: #ffffff;
		font-size: 1.06rem;

	}

	.ussd-code {
		color: #ffffff;
		font-weight: 700;
		font-size: 1.2rem;
		letter-spacing: 2px;
	}

	@media (max-width:992px) {

		.ussd-code {
			color: #13b065;
		}

		.share-btn-modern{
			font-size: 13px;
			max-width: 100px;
			padding: 10px;
		}
	}

/* //////////////////////////////////////?    icons and share      ///////////////// */


.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
}

.btn-check:checked + .amount-btn,
.amount-btn.active {
    background-color: #1bbe9e;
    color: #fff;
    border-color: #1bbe9e !important;
}

.amount-btn {
    color: #707070;
    transition: all 0.2s ease;
    background-color: #f5f5f5;
    font-weight: 600;
    border: 1px solid #b7b7b7 !important;
    cursor: pointer;
}

.amount-btn:hover {
    background-color: #1bbe9e;
    color: #fff;
}


@media (min-width:1800px) {
	.main .container {
		max-width: 1700px;
	}
}

@media(min-width:992px) {
	.description {
		width: 80%;
	}

	.main {
		background-image: url('../../../base_theme/nazdikpay/images/charityb.webp');
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover
	}

	.backgroundEffect {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.541);
	}
}

@media (max-width:768px) {

	.backgroundEffect {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: rgba(58, 98, 56, 0.453);
	}

	.main {
		min-height: max-content;
		padding: 10px 0;
	}
}