@import url(libs.css);
@import url(variables.css);

.accordion__title,
.blogAuthor,
.btn,
.employeeCardText a,
.employeeCardText h6,
.ff-poppins,
.footerSearch input,
.footer_title,
.fundraiserSection p,
.involvedCard button span,
.menu-list li a,
.secondary-link-button,
.section_label,
.small_title,
.thin-link,
.waysCardBody h6,
.waysCardHeader h6,
.waysToDonateCard ul li,
body,
p {
	font-family: var(--ff-poppins)
}

.accordion__panel,
.bigCount,
.bottomHeaderLogo,
.custom-select-group>input,
.delayed-section,
.hidden,
.loader,
.postid-153 .videoStorySection,
.postid-188 .videoStorySection,
.postid-199 .videoStorySection,
.section_text.mb-4.mb-lg-5.pb-lg-5.text-center.mx-auto,
.slick-dots li button::before,
.valueHoverList li img,
.valueHoverList li:hover i,
body.postid-326 .fundraiseCta,
section.testiSection .slider-for .item p br {
	display: none
}

.btn-lg,
img {
	max-width: 100%
}

.btn,
.lh-normal,
.navList>li>a,
.section_label,
p {
	line-height: normal
}

.rfMobileMenuButton i.icon,
body {
	-webkit-font-smoothing: antialiased
  scroll-padding-top: 100px; 
}

.headerLogo,
.place-content-center {
	place-content: center
}

.blogCard img,
.currentAppealCard img {
	object-position: center;
	object-fit: cover
}

.footer_list li a:hover,
.headerInfolist a:hover,
.hover-underline:hover,
.strong-link,
.thin-link {
	text-decoration: underline
}

.gridItem,
.zakat-section-5 .col-sm-6:nth-child(2) {
	align-self: start
}

*,
ol,
ul {
	margin: 0;
	padding: 0
}

*,
::after,
::before {
	box-sizing: border-box
}

a,
a:hover {
	color: #000;
	text-decoration: none
}

body,
html {
	scroll-behavior: smooth
}

#main {
	overflow-x: hidden
}

body {
	margin-top: 126px !important
}

section {
	padding: var(--section-padding)
}

input[type=number].hide-arrow::-webkit-inner-spin-button {
	appearance: none
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px
}

.slick-slide,
img {
	height: auto
}

::-webkit-scrollbar-thumb {
	background: var(--clr-secondary);
	border-radius: 4px
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
	background: #e0e0e0
}

iframe {
	width: 100%;
	height: 100%
}

button {
	background: 0 0;
	outline: 0;
	border: none
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	padding: 0;
	margin-bottom: 0
}

p {
	font-size: var(--fs-16);
	font-weight: 400;
	color: var(--clr-grey-700)
}

.bannerHeading,
.ff-clash,
.menu-title,
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ff-clash)
}

::placeholder {
	color: #9d9d9d
}

:disabled {
	background: gray
}

input.disabled {
	background: #ddd;
	border: 1px solid #fff;
	cursor: not-allowed
}

.valueCards,
input[type=checkbox],
input[type=radio],
label {
	cursor: pointer
}

input.disabled:hover {
	box-shadow: none !important
}

.shadow-md,
.valueHoverList li:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15)
}

input {
	outline: 0;
	width: 100%
}

label {
	display: block;
	padding-top: 15px
}

.slick-dots li {
	padding: 0;
	margin: 0;
	height: auto;
	width: auto
}

.mb-10,
.menu-text-box p {
	margin-bottom: 10px
}

.slick-dots li button {
	--_size: 6px;
	display: block;
	background: rgba(236, 36, 39, .53);
	height: 6px;
	width: var(--_size);
	border-radius: 6px;
	margin: 0 3px;
	padding: 0;
	transition: width 250ms cubic-bezier(.165, .84, .44, 1);
	transform-origin: center
}

.slick-dots li button:hover,
.slick-dots li.slick-active button {
	--_size: 35px;
	background: var(--clr-secondary)
}

:has(> .loader.center) {
	position: relative
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0)
	}

	100% {
		-webkit-transform: rotate(360deg)
	}
}

@keyframes loader {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

.loader {
	--size: 50px;
	height: var(--size);
	width: var(--size);
	border: calc(var(--size) * .16) solid #f3f3f3;
	border-radius: 100%;
	border-top: calc(var(--size) * .16) solid var(--clr-secondary);
	animation: 2s linear infinite loader
}

.loader.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%)
}

.grid-auto-flow-dense {
	grid-auto-flow: dense
}

.grid {
	display: grid
}

.grid-column-3 {
	grid-template-columns: repeat(3, 1fr)
}

.flex-1 {
	flex: 1
}

.gap-5 {
	gap: 5px
}

.gap-10 {
	gap: 10px
}

.gap-15,
.hover-gallery-section .row {
	gap: 15px
}

.gap-20 {
	gap: 20px
}

.gap-25 {
	gap: 25px
}

.appealGalleryCards .row,
.gap-30 {
	gap: 30px
}

.gap-40 {
	gap: 40px
}

.gap-50 {
	gap: 50px
}

.gap-60 {
	gap: 60px
}

.footerInfoList li:not(:last-child),
.mb-15 {
	margin-bottom: 15px
}

.bannerSubTitle,
.mb-20,
.menu-text-box .menu-title,
.seperate {
	margin-bottom: 20px
}

.mb-25 {
	margin-bottom: 25px
}

.mb-30 {
	margin-bottom: 30px
}

.mb-35 {
	margin-bottom: 35px
}

.mb-40 {
	margin-bottom: 40px
}

.mb-45 {
	margin-bottom: 45px
}

.mb-50,
.valueHoverList li {
	margin-bottom: 50px
}

.mb-60 {
	margin-bottom: 60px
}

.util__panel {
	display: flex;
	justify-content: space-between;
	align-items: center
}

@media only screen and (max-width:992px) {
	.util__panel {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px
	}


	.bottomHeader.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		padding: 20px 5px 0 0 !important;
		background: #fff;
		justify-content: space-between !important;
		gap: 4rem;
		border-bottom: 1px solid #e7e7e7;
		z-index: 5;
		width: 100%;
		display: block !important
	}
}

.btn,
.label-before {
	display: inline-flex;
	align-items: center
}

@media only screen and (min-width:1560px) {
	.container:not(.container-small) {
		--size: 1431px;
		max-width: var(--size);
		width: 100%
	}

	.container.container-small {
		--size: 1188px;
		max-width: var(--size);
		width: 100%
	}

	.container.container-left,
	.container.container-right {
		max-width: calc(var(--size) + ((100% - var(--size))/ 2))
	}

	.container.container-small.container-left,
	.container.container-small.container-right {
		--size: 530px
	}

	.container.container-left {
		margin-right: 0;
		margin-left: auto
	}

	.container.container-right {
		margin-left: 0;
		margin-right: auto
	}

	#gridMain .container {
		--size: 1570px
	}
}

.btn {
	padding: 14px 28px;
	border-radius: 5px;
	justify-content: center;
	font-size: var(--fs-17);
	font-weight: 700;
	transition: 250ms;
	border: none;
	text-transform: capitalize !important;
	position: relative;
	z-index: 9
}

header .btn {
	text-transform: uppercase !important
}

.btn-lg,
.eventsCard img,
.formatContent img,
.headerInfolist,
.memberCard img,
.menu-text-box,
.menu-text-box>img,
.reportCard img {
	width: 100%
}

.btn:is(:focus, :active, :hover) {
	outline: 0;
	box-shadow: none !important;
	border: none;
	background: var(--clr-primary-700);
	color: #fff
}

.btn-primary {
	background: var(--clr-primary-700);
	color: #fff
}

.btn-primary:is(:hover, :focus) {
	background: var(--clr-secondary)
}

.btn-secondary,
.presetAmounts input:checked+label {
	background: var(--clr-secondary);
	color: #fff
}

.btn-secondary:is(:hover, :focus) {
	background: var(--clr-primary-700)
}

.btn-grey {
	background: #333133;
	color: #fff
}

.btn-grey:is(:hover, :focus) {
	background: var(--clr-secondary)
}

.section_label {
	color: var(--clr-primary-variant-1);
	font-size: var(--fs-13);
	font-weight: 700;
	text-transform: uppercase
}

.label-before::before {
	content: "";
	display: block;
	height: 1px;
	width: 50px;
	background: currentColor;
	margin-right: 10px
}

.section_heading {
	font-size: var(--fs-section-heading);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 15px;
	text-transform: capitalize;
	color: var(--clr-dark-400)
}

.section_heading :where(span) {
	color: var(--clr-dark-400);
	text-transform: capitalize
}

.section_text .section_label {
	margin-bottom: 0
}

.section_text.small {
	max-width: 569px;
	width: 100%
}

.grey_main {
	padding: 50px 0;
	background: #fafafa
}

.column-span-two,
.row-span-two {
	grid-column: span 2
}

.error {
	outline: red solid 1px
}

:has(> .error_message) {
	position: relative
}

:has(> .success_message) {
	position: relative
}

.error_message,
.success_message {
	position: absolute;
	bottom: -18px;
	left: 10px;
	font-size: 11px;
	display: none;
	font-weight: 700
}

.error_message {
	color: #dc143c
}

.success_message {
	color: green
}

.fixed,
.stickyTop {
	position: fixed
}

.lines-count-1,
.lines-count-2,
.lines-count-3 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden
}

.bottomHeader.fixed .bottomHeaderLogo,
.custom-select-option.active,
.error+.error_message {
	display: block
}

.border-right {
	border-right: 1px solid var(--fc-accent);
	padding-right: 10px
}

.border-right+* {
	padding-left: 10px
}

i.icon.white-arrow-right::after {
	content: url(../images/icons/white-arrow-right.svg)
}

@media only screen and (min-width:1550px) {
	.text-md-nowrap {
		text-wrap: nowrap
	}
}

.stickyTop {
	top: 0
}

.absoluteBottom {
	position: absolute;
	bottom: 0;
	top: unset
}

.lines-count-1 {
	-webkit-line-clamp: 1
}

.eventCardText p,
.lines-count-2 {
	-webkit-line-clamp: 2
}

.lines-count-3 {
	-webkit-line-clamp: 3
}

.border-r-2 {
	border-radius: 2rem
}

.bdr-10,
.blogDate,
.custom-select,
.otherAppealCard,
.reportCard,
.statisticCard {
	border-radius: 10px
}

.fc-white,
.headerInfolist a:hover,
.hover-white:hover {
	color: #fff
}

.bg-texture-grey-1 {
	background-image: url(../images/texture-gray.png);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat
}

.secondary-link-button {
	text-transform: uppercase;
	color: var(--clr-secondary);
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: normal;
	display: inline-flex;
	align-items: center;
	gap: 1em
}

.aboutAppealPill h6,
.bannerHeading,
.bigCount,
.blogAuthor,
.blogTitle {
	text-transform: capitalize
}

.custom-select {
	min-height: 61px;
	padding: 10px 10px 10px 25px;
	box-shadow: 0 4px 17px rgba(0, 0, 0, .2);
	font-size: var(--fs-16);
	color: #000;
	font-weight: 400;
	width: 100%;
	border: none;
	outline: 0;
	background-image: url(../images/icons/custom-select-bg.svg);
	background-repeat: no-repeat;
	background-position-x: 98%;
	background-position-y: center;
	text-align: left
}

.custom-select:is(:hover, :focus) {
	outline: 1px solid var(--clr-primary-400)
}

.custom-select:not(.selected) {
	color: rgba(132, 132, 132, .6)
}

.custom-select-group,
.has-menu {
	position: relative
}

.form-style-1 .error,
input.error+.custom-select {
	border-bottom: 1px solid red
}

.custom-select-option {
	list-style-type: none;
	padding: 0;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
	border-radius: 15px;
	background-color: #fff;
	position: absolute;
	top: 70px;
	overflow-y: scroll;
	width: 100%;
	display: none;
	max-height: 270px;
	position: relatove;
	z-index: 55
}

.bottomHeader.fixed,
.rfMobileMenu {
	top: 0;
	position: fixed;
	background: #fff
}

.custom-select-option::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

.custom-select-option button {
	font-weight: 400;
	color: #848484;
	padding: 12px 15px;
	border-block: 1px solid rgba(181, 181, 181, 0.5);
	transition: 250ms;
	text-align: left;
	display: block;
	width: 100%
}

.custom-select-option button.selected,
.custom-select-option button:is(:hover, :focus) {
	background-color: #e7e7e7;
	color: var(--clr-primary-400);
	font-weight: 500
}

.custom-select-option li:first-of-type button {
	padding-top: 15px;
	border-top: none
}

.custom-select-option li:last-of-type button {
	border-bottom: none;
	padding-bottom: 15px
}

.inherit-style>* {
	font: inherit !important;
	color: inherit !important;
	line-height: inherit !important;
	margin: inherit
}

.fw-300,
.navList>li>a {
	font-weight: 300
}

.inherit-style>:is(h1, h2, h3, h4, h5, h6) {
	font-size: var(--fs-30) !important;
	color: var(--clr-dark) !important;
	font-weight: 700 !important;
	line-height: normal !important
}

.inherit-style :is(img) {
	width: 100%;
	margin: inherit
}

.child-pt-0>* {
	padding-top: 0 !important
}

.bg-transparent {
	background: 0 0
}

.bg-white {
	background: #fff
}

.bg-black {
	background: #000
}

.bg-primary-300 {
	background: var(--clr-primary-300)
}

.bg-primary-400,
.dots-white .slick-dots li.slick-active button,
.stockStepCards:hover {
	background: var(--clr-primary-400)
}

.bg-primary-700,
.footerInfoList a:hover .icon_wrap {
	background: var(--clr-primary-700)
}

.bg-primary-variant-1 {
	background: var(--clr-primary-variant-1)
}

.bg-secondary {
	background: var(--clr-secondary) !important
}

.bg-secondary-700 {
	background: var !important
}

.bg-grey-400 {
	background-color: var(--clr-grey-400)
}

.bg-grey-600 {
	background: var(--clr-grey-600)
}

.bg-grey-ececec {
	background: #ececec
}

.bg-silver-gradient {
	background: var(--clr-silver-gradient)
}

.bg-gradient-mix {
	background: var(--clr-gradient-mix)
}

.bg-gradient-mix-inverse {
	background: var(--clr-gradient-mix-inverse)
}

.bannerHeading span,
.ff-kaushan {
	font-family: var(--ff-kaushan)
}

.blogCard:hover .blogDate *,
.blogCard:hover h5,
.blogCard:hover h6,
.bottomHeader.fixed .navList>li>a,
.fc-black,
.singlePageFooter a:hover {
	color: #000
}

.fc-primary-300 {
	color: var(--clr-primary-300)
}

.fc-primary-400 {
	color: var(--clr-primary-400)
}

.fc-primary-700 {
	color: var(--clr-primary-700)
}

.fc-primary-dark {
	color: var(--clr-primary-dark)
}

.fc-primary-variant-1 {
	color: var(--clr-primary-variant-1)
}

.fc-secondary {
	color: var(--clr-secondary-solid)
}

.fc-dark-400 {
	color: var(--clr-dark-400)
}

.fc-dark-600 {
	color: var(--clr-dark-600)
}

.fc-dark-700,
.footer_list li a:hover {
	color: var(--clr-dark-700)
}

.fc-dark {
	color: var(--clr-dark)
}

.clr-silver-gradient {
	color: transparent;
	background: var(--clr-silver-gradient);
	-webkit-background-clip: text;
	background-clip: text
}

.fc-silver-400 {
	color: var(--clr-silver-400)
}

.fw-400 {
	font-weight: 400
}

.fw-500,
.thin-link {
	font-weight: 500
}

.fw-600 {
	font-weight: 600
}

.fw-700,
.navList>Li>a.active {
	font-weight: 700
}

.fw-800 {
	font-weight: 800
}

.fw-900 {
	font-weight: 900
}

.lh-1 {
	line-height: 1
}

.lh-1-1 {
	line-height: 1.1
}

.lh-1-2 {
	line-height: 1.2
}

.lh-1-3 {
	line-height: 1.3
}

.lh-1-4 {
	line-height: 1.4
}

.lh-1-5 {
	line-height: 1.5
}

.lh-2 {
	line-height: 2
}

.lts-1 {
	letter-spacing: 1px
}

.-lts-1,
.impactHorizontalCardNumber p {
	letter-spacing: -.84px
}

.fs-10 {
	font-size: var(--fs-10)
}

.fs-11 {
	font-size: var(--fs-11)
}

.fs-12 {
	font-size: var(--fs-12)
}

.fs-13 {
	font-size: var(--fs-13)
}

.fs-14 {
	font-size: var(--fs-14)
}

.fs-16 {
	font-size: var(--fs-16)
}

.appealImpactCards p,
.fs-18,
.navList>li>a {
	font-size: var(--fs-18)
}

.fs-20 {
	font-size: var(--fs-20)
}

.fs-22 {
	font-size: var(--fs-22)
}

.appealImpactCards h6,
.fs-24 {
	font-size: var(--fs-24)
}

.fs-25 {
	font-size: var(--fs-25)
}

.fs-28 {
	font-size: var(--fs-28)
}

.fs-30 {
	font-size: var(--fs-30)
}

.fs-35 {
	font-size: var(--fs-35)
}

.fs-40 {
	font-size: var(--fs-40)
}

.fs-45 {
	font-size: var(--fs-45)
}

.fs-48 {
	font-size: var(--fs-48)
}

.fs-50 {
	font-size: var(--fs-50)
}

.fs-55 {
	font-size: var(--fs-55)
}

.fs-60 {
	font-size: var(--fs-60)
}

.fs-65 {
	font-size: var(--fs-65)
}

.fs-70 {
	font-size: var(--fs-70)
}

.fs-80 {
	font-size: var(--fs-80)
}

.fs-100,
.fs-90 {
	font-size: var(--fs-90)
}

.headerLogo {
	max-width: 180px;
	width: 100%;
	text-align: center;
	border-radius: 0 0 5px 5px;
	display: grid
}

.topHeader {
	padding-block: 7px
}

.bottomHeader {
	padding-right: 0;
	transition: 70ms
}

.bottomHeader.fixed {
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 1rem 0;
	justify-content: center !important;
	gap: 4rem;
	border-bottom: 1px solid #e7e7e7;
	z-index: 5
}

header nav {
	max-width: 557px;
	width: 100%
}

.headerInfolist i {
	font-size: 17px;
	margin-right: 10px
}

.headerSocialList a {
	font-size: 16px;
	border-radius: 100%;
	color: #fff;
	width: 26.107px;
	height: 26.265px;
	background: var(--clr-secondary);
	display: flex;
	align-items: center;
	justify-content: center
}

.headerSocialList a:hover {
	color: var(--clr-secondary);
	background: #fff
}

.navList>li>a {
	color: #222122;
	font-style: normal
}

.navList>li>a:where(:focus, :hover) {
	font-weight: 700;
	color: var(--clr-secondary-solid)
}

.burgerButton {
	width: 30px;
	padding: 2px !important;
	border: 1px solid #e7e7e7;
	border-radius: 5px;
	display: none
}

.rfInnerMobileMenuList,
.rfMobileMenuButton,
.rfMobileMenuHeader {
	border-bottom: 1px solid #e3e4e6
}

.rfMobileMenu {
	display: none;
	height: 100vh;
	padding: 0;
	width: 100%;
	border-right: 1px solid #e7e7e7;
	transform: translateX(-100%);
	transition: transform .2s;
	z-index: 12000;
	overflow-y: scroll
}

.banner,
.chaptersCta,
.currentAppealCard,
.eventsCard,
.fundraiseCta,
.hospitalCards,
.involvedCard,
.memberCard,
.otherAppealCard,
.patientSuccessCards,
.pillWithBackground,
.valueCards,
.waysToDonateCard,
.zakat-section-2,
.zakat-section-3,
aside {
	overflow: hidden
}

.rfMobileMenu::-webkit-scrollbar {
	width: 4px
}

.rfMobileMenu.active {
	transform: translateX(0)
}

.rfMobileMenuHeader {
	display: flex;
	justify-content: space-between;
	padding: 15px;
	margin: 0
}

.rfInnerMobileMenuButton,
.rfMobileMenuButton {
	padding-inline: 1.5rem;
	width: 100%;
	display: flex
}

.rfMobileMenuClose i {
	color: #000;
	font-size: 2rem
}

.rfMobileMenuButton {
	font-size: 19px;
	font-weight: 600;
	color: #555;
	padding-block: 1rem;
	align-items: center;
	justify-content: space-between
}

.rfMobileMenuButton.active {
	background: #f4f5f6
}

.rfMobileMenuButton i.icon {
	font-family: remixicon !important;
	font-style: normal;
	-moz-osx-font-smoothing: grayscale
}

.rfMobileMenuButton i.icon::before {
	content: "\ea4e"
}

.rfInnerMobileMenuList {
	padding-block: 0.25rem
}

.rfInnerMobileMenuButton {
	font-size: 16px;
	padding-block: 12px;
	font-weight: 500;
	align-items: center;
	justify-content: space-between
}

@media only screen and (max-width:1172px) {
	.headerButtons .btn:nth-of-type(2) {
		display: none !important
	}

	.headerButtons .btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px
	}
}

.has-menu::after,
.mega-menu {
	position: absolute;
	display: none
}

.has-menu::after {
	content: "";
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	height: 20px;
	width: 20px;
	background: #fff;
	border-radius: 40px 30px 0 0;
	top: 45px;
	left: 30px
}

.has-menu:is(:hover, :focus)::after {
	display: block
}

.has-menu:is(:hover, :focus) .mega-menu {
	display: block
}

.mega-menu {
	min-width: max-content;
	width: 100%;
	padding-top: 36px;
	left: -40px
}

.mega-menu-container {
	background: #fff;
	padding: 32px 28px;
	border-radius: 10px;
	display: flex;
	width: 100%;
	--_gap: 15px;
	gap: var(--_gap);
	box-shadow: 0 4px 15px rgba(0, 0, 0, .15)
}

.menu-box {
	min-width: 290px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 50px
}

.menu-list li a,
.menu-title {
	line-height: 1;
	align-items: center;
	color: #000
}

.mega-menu-container>.menu-box:nth-of-type(2n) {
	border-left: 1px solid #a5a5a5;
	padding-left: var(--_gap)
}

.mega-menu-container>.menu-box:nth-of-type(2n):has(+ .menu-box) {
	border-right: 1px solid #a5a5a5;
	padding-right: var(--_gap)
}

.menu-title {
	display: flex;
	gap: 6px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: var(--fs-24)
}

.menu-title img {
	flex-grow: 0
}

.menu-list {
	list-style-type: none
}

.menu-list li a {
	font-size: var(--fs-16);
	font-weight: 500;
	display: block;
	width: 100%;
	padding: 13px 0 10px;
	border-bottom: 1px solid #1f4999;
	display: flex;
	gap: 10px
}

.banner .slick-dots,
.big_icon,
.fundraiseCta,
.zakat-section-1 {
	align-items: center;
	display: flex
}

.menu-list li a:is(:hover, :active, :focus, .active) {
	color: var(--clr-secondary-solid)
}

.menu-list li:first-child a,
.otherAppealSection~.newsletterSection {
	padding-top: 0
}

.menu-list li:last-child a {
	padding-bottom: 0;
	border-bottom: none
}

.menu-list li a::before {
	content: url(../images/icons/menu-list-prop.svg);
	display: none
}

.menu-text-box p {
	color: #000;
	font-size: var(--fs-16);
	font-weight: 400;
	line-height: 1.3
}

.bannerHeading span,
.bannerSlider .bannerHeading span,
.form-style-1 label>span,
.otherAppealCard:hover button,
.otherAppealSlider .item.slick-active+.item+.item+.item+.item .otherAppealCardText button {
	color: var(--clr-secondary-solid)
}

.menu-options-box+.menu-text-box {
	margin-top: 30px
}

.banner {
	padding: 0;
	position: relative;
	margin-top: -60px
}

.bannerImage img {
	width: 100%;
	height: 100%;
	border-radius: 0 0 0 330px;
	object-fit: cover;
	top: 20px;
	position: relative
}

.bannerTextMain {
/* 	padding-top: 10%; */
	min-height: 800px;
	left: 0;
	padding-left: 0;
	margin: 0 0 0 -20px
}

.bannerTextWrapper {
	max-width: 430px;
	width: 100%;
	background-position: center center;
	background-size: 100%
}

.big_icon,
.valueCards:hover .icon_wrap {
	background: var(--clr-secondary)
}

.bannerHeading {
	color: #000;
	font-size: var(--fs-50);
	font-weight: 700;
	line-height: normal;
	margin-bottom: 10px
}

.bannerSubTitle,
.small_title {
	font-weight: 600;
	font-style: normal
}

.bannerHeading span {
	font-size: var(--fs-70);
	font-weight: 400;
	line-height: 1
}

.bannerSubTitle {
	color: #000;
	font-family: Poppins;
	font-size: 16px;
	line-height: 24px
}

.bannerSlider {
	margin-bottom: 0 !important
}

.banner .slick-dots {
	position: absolute;
	bottom: 40px;
	right: 0;
	left: 0;
	max-width: 1171px;
	width: 100%;
	margin: 0 auto;
	counter-reset: slick-counter;
	justify-content: flex-end;
	gap: 2px
}

@media only screen and (min-width:1100px) {
	.banner .slick-dots {
		padding-right: 80px
	}
}

.banner ul.slick-dots li {
	counter-increment: slick-counter
}

.banner ul.slick-dots li button,
.banner ul.slick-dots li button:focus,
.banner ul.slick-dots li button:hover {
	background: 0 0;
	outline: 0;
	display: flex;
	align-items: end;
	justify-content: center;
	gap: 2px;
	height: 100%;
	width: 100%;
	cursor: pointer;
	opacity: 1;
	margin: 0
}

.banner ul.slick-dots li button:hover::before,
.banner ul.slick-dots li.slick-active button::before {
	color: #fff;
	opacity: 1
}

.banner ul.slick-dots li button::before {
	content: counter(slick-counter);
	display: block;
	color: #fff;
	font-family: var(--ff-poppins);
	font-size: 25px;
	font-weight: 700;
	opacity: .4;
	height: auto;
	width: auto;
	position: relative;
	line-height: .6
}

.banner ul.slick-dots li button::after {
	content: "";
	height: 3px;
	border-radius: 54px;
	margin-right: 4px;
	background: #fff;
	display: block;
	width: 0;
	transition: 320ms
}

.banner ul.slick-dots li.slick-active button::after {
	width: 46px
}

.big_icon {
	height: 66px;
	width: 66px;
	justify-content: center;
	border-radius: 100%;
	color: #fff;
	font-size: 32px
}

.currentAppealCard {
	border-radius: 10px;
	transition: .1s cubic-bezier(.165, .84, .44, 1)
}

.currentAppealCard:hover {
	box-shadow: 0 4px 24px rgba(0, 0, 0, .4)
}

.currentAppealCard:hover .currentAppealCardText .icon_wrap {
	color: #fff;
	background: var(--clr-secondary)
}

.currentAppealCard img {
	width: 100%;
	min-height: 250px
}

@media (min-width:1440px) {
	.currentAppealCard {
		max-width: 358px;
		width: 100%;
		margin-inline: auto
	}
}

.small_title {
	color: var(--clr-dark-700);
	font-size: var(--fs-16);
	line-height: 1;
	margin-bottom: 14px
}

.currentAppealCardText {
	border: 1px solid #eee;
	padding: 24px 20px;
	border-radius: 0 0 10px 10px;
	min-height: 163px
}

.currentAppealCardText .icon_wrap {
	border-radius: 100%;
	border: 1px solid #eee;
	height: 40px;
	width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-24);
	color: var(--clr-primary-300)
}

.valueCards {
	display: flex;
	align-items: center;
	justify-content: start;
	border-radius: 8.098px;
	border: 1px solid rgba(112, 112, 112, .15);
	gap: 22px;
	background: #fff;
	transition: .1s;
	min-height: 133px
}

.asideList li a,
.play-icon {
	display: flex;
	align-items: center
}

.play-icon,
.valueHoverList li {
	transition: 250ms;
	cursor: pointer
}

.valueCards p {
	padding-right: 59px
}

.valueCards .icon_wrap {
	padding: 26px 23px;
	transition: 250ms cubic-bezier(.165, .84, .44, 1)
}

.valueCards:hover {
	box-shadow: 0 4px 40px 0 rgba(0, 0, 0, .15)
}

.valueCards:hover img {
	filter: brightness(200)
}

.successStoryMain {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%
}

.storySlider .item {
	margin-right: 30px;
	border-radius: 10px
}

.play-icon {
	opacity: 0;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	border-radius: 13px
}

.relatedAppealCard:hover .relatedAppealOverlay,
.storyCard:hover .play-icon,
.storySlider .item.slick-active .play-icon {
	opacity: 1
}

.storySlider .item img {
	border-radius: 20px;
	margin: 0 auto
}

.storySliderButtons button {
	width: 68.645px;
	height: 69.654px;
	display: grid;
	place-content: center;
	background: #fff;
	border: 1px solid #fff;
	border-radius: 100%
}

.storySliderButtons button:hover {
	background: rgba(255, 255, 255, .4)
}

.involvedCardText {
	max-width: 535px;
	width: 100%;
	border-radius: 10px;
	background: var(--clr-silver-gradient);
	padding: 26px 28px;
	position: absolute;
	bottom: -66px;
	left: -190px
}

.newsletterInput input:not([type=submit]) {
	padding: 17px 27px;
	border-radius: 5px;
	background: #f1f1f1;
	outline: 0;
	border: none;
	font-family: Poppins;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
	max-width: 397px;
	width: 100%
}

.newsletterInput input::placeholder {
	color: #a1a1a1
}

.newsletterInput input[type=submit] {
	padding: 20px 14px;
	max-width: 200px;
	border-radius: 4px;
	border: none;
	background: var(--clr-primary-700);
	color: #fff;
	font-weight: 700;
	margin-left: 15px
}

.footerInfoList li a,
.footer_list li a {
	font-size: var(--fs-16);
	font-weight: 500;
	color: var(--clr-silver-400)
}

.newsletterInput input[type=submit]:where(:hover, :active) {
	outline: #FFF solid 1px !important;
	background: 0 0 !important
}

.newsletterInput .es_subscription_message.success {
	font-size: 18px;
	font-weight: 700;
	color: #fff
}

footer {
	padding-top: 61px
}

.bottomFooter {
	padding: 13px 0 16px;
	border-top: 1px solid rgba(0, 0, 0, .2)
}

.topFooter {
	margin-bottom: 27px
}

.footerInfoList li a {
	display: flex;
	gap: 13px;
	line-height: 28.8px
}

.footerInfoList .icon_wrap {
	width: 30px;
	height: 30px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	background: var(--clr-secondary-solid);
	color: #fff;
	flex-shrink: 0
}

.aboutAppealPill,
.appealImpactCards .icon_wrap,
.footerSearch button,
.otherAppealCardText,
.statisticCard,
.videoPlayButton {
	display: grid;
	place-content: center
}

.footer_title {
	color: #111;
	font-size: var(--fs-18);
	font-weight: 700;
	margin-bottom: 20px
}

.footer_list {
	padding-left: 20px
}

.footer_list li a {
	font-style: normal;
	line-height: 2
}

.footer_list li::marker {
	color: var(--clr-silver-400)
}

.footer_list li {
	color: var(--clr-grey-700);
	list-style: disc
}

.footerSearch {
	max-width: 367px
}

.footerSearch .d-flex {
	box-shadow: 0 4px 8.6px rgba(0, 0, 0, .1);
	background: #fff;
	border-radius: 6px
}

.footerSearch :where(input, button) {
	min-height: 54px
}

.footerSearch input {
	padding: 10px 18px;
	border-radius: 6px 0 0 6px;
	font-size: var(--fs-14);
	font-weight: 400;
	border: none;
	outline: 0
}

.footerSearch input::placeholder {
	color: #b6b6b6
}

.footerSearch button {
	width: 70px;
	padding: 5px;
	background: #c80d0a;
	border-radius: 6px;
	font-size: var(--fs-16);
	color: #fff;
	font-weight: 700
}

.footerSearch button:where(:hover, :focus) {
	background: var(--clr-secondary)
}

@media only screen and (min-width:1440px) {
	.footerInfoList {
		max-width: 310px
	}
}

.appealCardText {
	padding: 33px 25px 21px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 5px 40px 0 rgba(0, 0, 0, .05);
	max-width: 331.188px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	top: -20px
}

.appealCardText p {
	min-height: 64px
}

@media (min-width:1240px) {
	.bannerTextWrapper {
		padding-top: 80px
	}

	.appealCards {
		max-width: 360px;
		width: 100%;
		margin-inline: auto
	}
}

.appealCards:hover .appealCardText,
.relatedAppealCard:hover .relatedAppealText {
	background: var(--clr-secondary)
}

.appealCards :where(h6, p a) {
	transition: .1s
}

.appealCards:hover :where(h6, p, a) {
	color: #fff
}

.aboutAppealPill {
	border-radius: 50px 50px 50px 0;
	background: var(--clr-silver-gradient);
	max-width: 250px;
	min-height: 184.636px;
	text-align: center;
	padding-inline: 25px;
	width: 100%;
	position: absolute;
	bottom: -7px;
	left: 30px
}

.aboutAppealPill h6 {
	color: #fff;
	font-size: var(--fs-40);
	font-weight: 700;
	line-height: 70px
}

.aboutAppealPill p {
	color: #fff;
	text-align: center;
	font-size: 12px;
	font-style: normal;
	font-weight: 400
}

.relatedAppealCard {
	max-width: 276px;
	width: 100%;
	margin: 0 auto
}

.relatedAppealText {
	padding: 16px 24px;
	background: #111;
	transition: 150ms cubic-bezier(.175, .885, .32, 1.275);
	min-height: 95px
}

.relatedAppealOverlay {
	opacity: 0;
	transition: opacity 150ms cubic-bezier(.175, .885, .32, 1.275);
	background: rgba(0, 0, 0, .4)
}

.hospitalCardText,
.hospitalCards,
.patientSuccessCards,
.patientSuccessCardsText {
	transition: .1s cubic-bezier(.165, .84, .44, 1)
}

.appealImpactCards {
	margin-bottom: 20px;
	cursor: pointer
}

@media (min-width:992px) {
	.appealImpactCards {
		margin-bottom: 40px
	}
}

.appealImpactCards .icon_wrap {
	width: 80px;
	height: 78px;
	border: 1px solid var(--clr-secondary);
	background: #3735A0;
	flex-shrink: 0;
	border-radius: 100%;
	margin: 0 auto;
}

.new-btn {
    text-align: center;
    padding-top: 20;
}
.appealImpactCards {
    align-items: center;
    display: grid;
    text-align: center;
    justify-content: center;
}

.appealImpactCards:hover .icon_wrap {
	background: var(--clr-secondary);
	border: 1px solid var(--clr-primary-400)
}

.donateSection {
	--offset: 100px
}

.donationMain {
	padding-top: var(--offset)
}

.donationImage {
	position: absolute;
	right: 0;
	z-index: -1
}

.donationImage img {
	min-height: 652px
}

.donationFormContainer {
	padding: 44px 30px;
	border-radius: 20px;
	background: #1f4999;
	box-shadow: 0 -3px 18px 0 rgba(0, 0, 0, .25);
	position: relative;
	top: calc(var(--offset) * -1)
}

.progressContainer {
	height: 4px;
	display: block
}

.bannerTextWrapper span,
.blogCard,
.cs-progress,
.pillWithBackground:hover::before,
.valueHoverList li:hover img,
.valueHoverList li:hover::before,
.zakatSection1Container span {
	display: block
}

.otherAmountContainer {
	border-radius: 5px;
	background: #e7e7e7
}

.donationFormContainer .otherAmountContainer .icon_wrap {
	color: #fff;
	font-size: var(--fs-25);
	font-weight: 800;
	border-radius: 5px;
	background: var(--clr-secondary);
	flex-shrink: 0;
	min-height: 50px;
	display: grid;
	place-content: center;
	flex-shrink: 0;
	max-width: 44px;
	width: 100%
}

.donationFormContainer .otherAmountContainer input {
	height: 100%;
	padding: 11px;
	color: #333133;
	font-family: Poppins;
	font-size: var(--fs-22);
	font-weight: 500;
	line-height: 30px;
	min-height: 50px;
	border: none;
	border-radius: inherit
}

.presetAmounts label {
	flex: 0 0 100px;
	border-radius: 5px;
	border: 1px solid #fff;
	text-align: center;
	padding: 6px 10px;
	color: #e7e7e7;
	font-size: var(--fs-20);
	font-weight: 500;
	line-height: 30px;
	cursor: pointer
}

.asideList li a,
.fundraiserSection p {
	font-weight: 400;
	font-size: var(--fs-16)
}

.presetAmounts label:last-of-type {
	flex: 0 0 140px
}

.presetAmounts label:not(input:checked + label):where(:hover) {
	background: #cf2023;
	border: 1px solid var(--clr-secondary);
	outline: 0
}

.donationFormContainer input {
	color: var(--clr-dark-400);
	font-size: var(--fs-14);
	font-weight: 400;
	line-height: 30px;
	padding: 12px 15px;
	border-radius: 5px;
	background: #e7e7e7;
	border: none
}

.donationFormContainer input:not(#otherAmount):where(:hover, :focus) {
	outline: #FFF solid 1px
}

.gridContainer {
	display: grid;
	grid-template-columns: 320px 936px;
	row-gap: 36px;
	justify-content: space-between;
	max-width: 1302px;
	width: 100%;
	margin: 0 auto
}

.gridItem {
	position: sticky;
	top: 93px
}

@media (min-width:1700px) {
	.gridItem.stickyAside {
		position: static;
		top: 0;
		align-self: auto
	}
}

aside {
	border-radius: 6px 6px 0 0
}

.asideMain {
	padding: 13px 15px
}

.hospitalCardText,
aside .asideMain:first-of-type {
	padding-bottom: 0
}

.gridItem.stickyAside aside.stickyTop {
	position: fixed;
	top: 93px
}

.gridItem.stickyAside aside.absoluteBottom {
	position: absolute;
	top: unset;
	bottom: 0
}

.asidelabel {
	color: var(--clr-primary-400);
	font-size: var(--fs-16);
	font-weight: 600;
	line-height: normal;
	border-radius: 5px;
	background: #fff;
	text-align: center;
	padding: 10px
}

.asideList,
.postCategories {
	list-style: none
}

.asideList li a {
	justify-content: space-between;
	width: 100%;
	color: #fff;
	font-style: normal;
	line-height: 1;
	padding: 24px 0 20px;
	border-bottom: 1px solid #fff
}

.asideList li a img {
	opacity: 0;
	transition: 150ms cubic-bezier(.23, 1, .32, 1)
}

.asideList li a:where(.active, :hover, :focus) img {
	opacity: 1
}

.asideList li a:where(.active, :hover, :focus) {
	font-weight: 600
}

.asideList li:last-child a {
	border-bottom: none
}

.asideBottom {
	min-height: 130.187px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	background: linear-gradient(180deg, #03016b, #3735a0);
	display: grid;
	place-content: center
}

.asideBottom button:hover {
	opacity: .8
}

.pillWithBackground {
	padding: 41px 70px;
	border-radius: 20px;
	position: relative
}

.pillWithBackground::before,
.valueHoverList li::before {
	content: " ";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, #ec2427, #8e0604);
	z-index: 0;
	display: none;
	opacity: .75
}

.pillWithBackground:hover,
.valueHoverList li:hover {
	background: url(../images/redbg.png) center/cover no-repeat
}

.pillWithBackground:hover {
	box-shadow: 0 2px 14px 0 rgba(0, 0, 0, .15)
}

.pillWithBackground:hover * {
	color: #fff;
	position: relative;
	z-index: 2
}

.pillWithBackground:hover .before-theme-check-red::before,
.pillWithBackground:hover i.icon-theme-check-red::after {
	content: url(../images/bullet-icon.png);
	filter: brightness(100)
}

.bigCount {
	color: rgba(0, 24, 55, .08);
	font-size: var(--fs-55);
	font-weight: 800;
	line-height: 1
}

.eventDate,
.valueHoverList li:hover p {
	color: #fff
}

.valueHoverList li {
	border-radius: 10px;
	max-width: 616px;
	position: relative
}

.valueHoverList li strong {
	font-weight: 700;
	color: #000
}

.valueHoverList li :is(i, img, p) {
	position: relative
}

.valueHoverList li:hover {
	padding: 16px 0 16px 48px;
	max-width: 748px
}

:has(> [class^=icon]:not(.icon_wrap)) {
	display: flex;
	align-items: center
}

i[class^=icon] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1
}

.border-prop,
.pointCards p {
	line-height: 1.7
}

i.icon-theme-check-white::after {
	content: url(../images/icons/theme-check-grey.svg)
}

.before-theme-check-red::before,
i.icon-theme-check-red::after {
	content: url(../images/bullet-icon.png)
}

.banner-caption,
.before-theme-check-red,
.zakat-section-2,
.zakat-section-4,
div#map {
	position: relative
}

.before-theme-check-red::before {
	position: absolute;
	left: -50px
}

.border-prop {
	position: relative;
	padding-left: 10px
}

.accordion__title,
.eventDate {
	line-height: 1.4;
	font-size: var(--fs-18)
}

.border-prop.right {
	padding-left: 0;
	padding-right: 10px;
	position: relative
}

.border-prop::before {
	content: url(../images/border-prop.png);
	position: absolute;
	left: -10px;
	top: 0
}

.border-prop.right::before {
	right: -10px;
	left: unset
}

.hospitalCards {
	border-radius: 22px;
	max-width: 370px;
	width: 100%;
	display: block;
	background: #fff
}

.hospitalCardText {
	opacity: 1;
	padding: 30px 10px 38px 20px
}

.hospitalCards:where(:hover, :focus) {
	background: var(--clr-secondary)
}

.pointCards .icon_wrap,
.reportCard.red:hover {
	background: var(--clr-secondary-700)
}

.hospitalCards:where(:hover, :focus) * {
	color: #fff
}

.horizontalCardSlider .slick-track,
.oneSideSlider .slick-track,
.slider-type-3 .slick-track,
.slider-type-4 .slick-track {
	display: flex;
	gap: 30px
}

.ambassadorForm .section_heading,
.contactUsSection .section_heading,
.dots-md .slick-dots,
.hidden,
.oneSideSlider:not(.with-dots) .slick-dots {
	display: none !important
}

.horizontalCardSlider .slick-dots {
	bottom: -45px
}

.horizontalHoverCards {
	--controller: 250px;
	display: flex;
	align-items: center;
	position: relative;
	border-radius: 20px;
	max-width: 270px;
	transition: 250ms
}

.horizontalHoverCards img,
.involvedCard {
	border-radius: 15px
}

.horizontalHoverCardsText {
	min-width: 352px;
	width: 100%;
	position: absolute;
	min-height: 217px;
	display: grid;
	place-content: center;
	border-radius: 0 15px 15px 0;
	right: calc((var(--controller) + 40px) * -1);
	background: #333133;
	padding-left: 80px;
	padding-right: 20px;
	z-index: -1;
	opacity: 0;
	transition: 190ms ease-in;
	pointer-events: none
}

.horizontalHoverCards:where(:hover, :focus) {
	margin-right: calc(var(--controller) + 70px)
}

.horizontalHoverCards:where(:hover, :focus) .horizontalHoverCardsText {
	opacity: 1
}

.impactHorizontalCards {
	max-width: 870px;
	width: 100%;
	min-height: auto;
	border-radius: 15px;
	overflow: hidden;
	background: #c80d0a;
	margin-bottom: 30px
}

.impactHorizontalCardNumber {
	display: grid;
	place-content: center;
	min-width: 270px;
	padding: 15px 8px;
	position: relative
}

.impactHorizontalCardNumber::after {
	content: url(../images/impact-card-prop.svg);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0
}

.impactHorizontalCardNumber.left::after {
	left: 0
}

.impactHorizontalCardText {
	padding: 14px 24px 15px 23px;
	display: grid;
	place-content: center
}

.pointSlider .item {
	padding-top: 50px
}

.pointCards {
	display: block;
	max-width: 380px;
	width: 100%;
	background: #fff;
	border-radius: 29px;
	display: grid;
	text-align: center;
	min-height: 249px;
	position: relative;
	padding-bottom: 30px;
	transition: .1s;
	padding-top: 80px
}

.pointCards .icon_wrap {
	height: 109px;
	width: 109px;
	display: grid;
	place-content: center;
	border-radius: 100%;
	border: 4px solid #ececec;
	margin: 0 auto;
	position: absolute;
	top: -50px;
	left: 0;
	right: 0;
	transition: .1s
}

.pointCards .icon_wrap img,
.statisticCard:hover img {
	filter: brightness(100)
}

.pointCards:where(:hover, :focus) {
	background: var(--clr-primary-700)
}

.pointCards:where(:hover, :focus) .icon_wrap {
	background: #fff
}

.pointCards:where(:hover, :focus) * {
	color: #fff
}

.pointCards:where(:hover, :focus) .icon_wrap img {
	filter: brightness(1)
}

.eventsContainer {
	max-width: 1423px;
	width: 100%;
	margin: 0 auto
}

.eventsCard {
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
	display: block
}

.eventsCard,
.eventsCard * {
	transition: .1s cubic-bezier(.215, .61, .355, 1)
}

.fundraiserSection p {
	line-height: normal;
	color: var(--clr-grey-700);
	margin-bottom: 15px
}

.eventDate {
	top: 25px;
	right: 18px;
	min-height: 51;
	padding: 15px;
	background: var(--clr-secondary);
	font-weight: 500;
	box-shadow: 0 4px 7.8px rgba(0, 0, 0, .79)
}

.eventCardText {
	padding: 25px 54px 25px 25px
}

.eventCardText i {
	margin-right: 5px
}

.eventsCard:where(:hover, :focus) * {
	color: #fff
}

.eventsCard:where(:hover, :focus) {
	background: var(--clr-secondary)
}

.eventsCard:where(:hover, :focus) .eventDate {
	background: #fff;
	color: #000
}

.accordion {
	max-width: 775px;
	margin: 0 auto
}

.accordion__container {
	padding: 24px 21px;
	margin-bottom: 15px;
	width: 100%;
	margin-inline: auto;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
	background: #fff;
	border-radius: 6px
}

.blogCard,
.videoCard {
	width: 100%;
	margin: 0 auto
}

.accordion__container:where(:has(.active), :hover, :focus) {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .31);
	outline: 0
}

.accordion__button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer
}

.accordion__button i.icon::after {
	content: url(../images/icons/acc-open.svg)
}

.accordion__button.active i.icon::after {
	content: "";
	display: inline-block;
	width: 18px; /* Adjust as needed */
	height: 18px;
	background-image: url(../images/icons/acc-close-new.png);
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 4px;
}

.accordion__panel {
	padding-top: 12px
}

.accordion__panel ol li {
    color: #FFFF;
}

.accordion__title {
	font-weight: 600;
	color: #262626
}

@media (min-width:1201px) {
	.videoStorySection .container {
		--size: 1418px
	}
}

.videoCard {
	border-radius: 15px;
	max-width: 394px;
	transition: 250ms
}

.item.slick-active .videoCard {
	max-width: 568px;
	width: 100%
}

.videoStorySlider .item.slick-active iframe {
	width: 560px;
	height: 315px
}

.videoStorySlider iframe {
	width: 394px;
	height: 200px;
	border-radius: 8px;
	border: 2px solid #e7e7e7
}

.videoPlayButton {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .2);
	border-radius: inherit;
	opacity: 0
}

#getInvolvedSliderSection .slick-next:hover,
#getInvolvedSliderSection .slick-prev:hover,
.involvedCard:hover button svg,
.item.slick-active .videoPlayButton,
.otherAppealCard:hover .otherAppealCardText,
.otherAppealSlider .item.slick-active+.item+.item+.item+.item .otherAppealCardText,
.stockStepCards:hover .count,
.videoCard:hover .videoPlayButton {
	opacity: 1
}

.videoStorySection .slick-track {
	display: flex;
	align-items: center;
	gap: 19px;
	min-height: 371px
}

.otherAppealCardText {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
	padding-inline: 40px;
	opacity: 0;
	transition: 150ms
}

.otherAppealSlider .item {
	margin-right: 28px
}

.memberCard {
	border-radius: 30px 30px 10px 10px;
	background-color: #fff;
	box-shadow: 0 4px 7.7px rgba(0, 0, 0, .35);
	min-height: 460px
}

.boardMemberText {
	padding: 18px 35px 18px 25px
}

.reportCard {
	background: #fff;
	box-shadow: 0 4px 11.3px rgba(0, 0, 0, .15);
	transition: 250ms
}

.employeeStepCards .stepName.blue::after,
.employeeStepCards .stepName.blue::before,
.reportCard:hover {
	background: var(--clr-primary-700)
}

.reportCard:hover h6,
.statisticCard:hover * {
	color: #fff
}

.reportCardText {
	text-align: center;
	padding: 22px 17px 20px
}

.statisticCard {
	background: #fff;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .18);
	padding: 19px 60px 32px;
	min-height: 257px;
	transition: 250ms
}

.statisticCard:hover {
	background: linear-gradient(180deg, #ec2427, #3735a0)
}

.blogAuthor,
.blogTitle {
	font-weight: 600;
	letter-spacing: .5px;
	margin-bottom: 4px
}

.blogCardText {
	padding-block: 30px
}

.blogTitle {
	color: #333;
	font-size: var(--fs-20)
}

.blogAuthor {
	color: #ec2427;
	font-size: var(--fs-16)
}

.blogExcerpt {
	font-weight: 400;
	font-size: var(--fs-16);
	color: #777
}

.blogDate {
	height: 80px;
	width: 80px;
	display: grid;
	place-content: center;
	background-color: rgba(133, 133, 132, .4);
	flex-shrink: 0
}

.blogCard:hover .blogDate {
	background-color: #fff;
	outline: 1px solid var(--clr-secondary-solid)
}

.singlePageGrid {
	display: grid;
	grid-template-columns: auto 458px;
	gap: 30px
}

.postCategories li {
	position: absolute;
	top: 18px;
	left: 23px;
	font-size: var(--fs-18);
	color: #fff;
	font-weight: 700;
	background-color: var(--clr-secondary-700);
	border-radius: 5px;
	padding: 12px 21px
}

.formatContent :is(h1, h2, h3, h4, h5, h6) {
	color: var(--clr-dark);
	font-size: var(--fs-35);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 1rem
}

.formatContent :is(p) {
	font-size: var(--fs-18);
	color: #4e4e4e;
	font-weight: 400;
	margin-bottom: 1.8rem
}

.formatContent ul {
	margin-left: 25px;
	margin-bottom: 1.8rem
}

.formatContent li {
	font-size: var(--fs-18);
	color: #4e4e4e;
	font-weight: 400
}

.formatContent :is(strong, i) {
	color: var(--clr-primary-400)
}

.singlePageFooter {
	padding-top: 20px;
	border-top: 1px solid rgba(133, 133, 132, .6)
}

.singlePageFooter i {
	color: var(--clr-silver-400)
}

.singlePageFooter a {
	color: #1f4999;
	font-weight: 500;
	font-size: var(--fs-15)
}

.getInvolvedSection .container {
	--size: 1320px
}

.involvedText {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .75);
	display: grid;
	place-content: center;
	padding-inline: 1rem;
	opacity: 0;
	transition: 250ms;
	border-radius: 10px;
	text-align: center
}

.involvedCard:hover .involvedText {
	opacity: 1;
	outline: 10px solid var(--clr-primary-400)
}

.involvedCard button :is(span, svg) {
	transition: 120ms ease-in;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%
}

.involvedCard button {
	max-width: 264px;
	width: 100%;
	min-height: 64px;
	display: grid;
	place-content: center;
	border-radius: 5px;
	background: var(--clr-dark-400);
	position: relative;
	margin: 0 auto;
	transition: 250ms
}

.involvedCard button span {
	opacity: 1;
	font-weight: 700;
	color: #fff;
	font-size: var(--fs-18);
	line-height: 1.14;
	text-transform: uppercase
}

.involvedCard button svg,
.involvedCard:hover button span {
	opacity: 0
}

.involvedCard:hover button {
	background-color: var(--clr-primary-400)
}

.reversePanels .row:nth-of-type(2n),
.stepStockCardContainer>div:nth-of-type(2n) {
	flex-direction: row-reverse
}

.fundraiseCta {
	min-height: 366px;
	max-width: 1190px;
	margin: 0 auto;
	width: 100%;
	border-radius: 33px
}

.fundraiseCta img {
	position: absolute;
	bottom: 0;
	left: 0
}

.form-style-1 label,
.form-style-2 label {
	color: #262626;
	font-weight: 500;
	font-size: var(--fs-18);
	margin-bottom: 1rem;
	line-height: 1
}

.form-style-1 :is(input, select, textarea) {
	min-height: 61px;
	padding: 10px 10px 10px 25px;
	box-shadow: 0 4px 17px rgba(0, 0, 0, .2);
	font-size: var(--fs-16);
	color: #000;
	font-weight: 400;
	border-radius: 10px;
	background-color: #fff;
	width: 100%;
	border: none;
	outline: 0
}

.form-style-1 :is(input, select, textarea):is(:hover, :focus) {
	outline: 1px solid var(--clr-primary-400)
}

.form-style-1 :is(input, select, textarea)::placeholder {
	color: rgba(132, 132, 132, .6)
}

.form-style-1 textarea {
	padding-top: 20px
}

i.check-icon::after {
	content: url(../images/icons/radio-unchecked.svg)
}

input:checked+i.check-icon::after {
	content: url(../images/icons/radio-checked.svg)
}

.dots-white .slick-dots li button {
	background: #ffff
}

.otherAppealSection {
	background: url(../images/other-appeal-bg.jpg) center/100% 120% no-repeat
}

.zakat-section-1 {
	min-height: 406px
}

.zakatSection1Container {
	max-width: 961px;
	width: 100%;
	margin: 0 auto
}

.zakat-section-2::after {
	content: url(../images/zakat-3-prop.png);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	display: none;
	width: 60%
}

@media (min-width:1550px) {
	.zakat-section-2::after {
		display: block
	}
}

.zakat-section-3 {
	min-height: 520px;
	display: flex;
	align-items: center;
	position: relative;
}

/* .zakat-section-3::after {
	content: url(../images/zakat-section-3-prop.png);
	position: absolute;
	bottom: -290px;
	left: -80px
} */

.zakat-section-3-text {
	max-width: 540px;
	width: 100%;
	text-align: center;
	background: linear-gradient(to bottom, #EC2427 0%, #3735A0 100%);
	padding: 50px 0 30px 0;
	border-radius: 20px;
}

@media (min-width:1400px) {
	.zakat-section-3-text {
		max-width: 660px;
	}
}

@media (max-width:1660px) {
	.zakat-section-3::after {
		left: -160px
	}
}

@media (max-width:1366px) {
	.zakat-section-3::after {
		display: none
	}
}

.zakat-section-4 .prop {
	position: absolute;
	bottom: -107px;
	left: 0;
	height: 330px;
	z-index: -2
}

.employeeStepCards .icon,
.employeeStepCards .stepName {
	position: absolute;
	left: 50%;
	transform: translateX(-50%)
}

@media (max-width:1450px) {
	.zakat-section-4 .prop {
		display: none
	}
}

.zakat-section-5 {
	background: var(--clr-gradient-mix);
	min-height: 594px;
	display: flex;
	align-items: center
}

.zakat-section-7 {
	display: flex;
	align-items: center;
	min-height: 520px
}

@keyframes gradientAnimation {

	0%,
	100% {
		background-position: 0 50%
	}

	50% {
		background-position: 100% 50%
	}
}

.calculateZakatCards {
	padding: 30px 40px;
	border-radius: 20px;
	transition: background 250ms;
	background: linear-gradient(45deg, var(--clr-primary-400), var(--clr-secondary-solid));
	background-size: 200% auto;
	animation: 3s infinite gradientAnimation
}

.calculateZakatCards:hover {
	cursor: pointer;
	animation: none;
	background: var(--clr-gradient-mix)
}

.zakat-section-9 {
	min-height: 515px;
	display: flex;
	align-items: center
}

@media (min-width:1401px) {
	.involvedCard {
		max-width: 427px;
		width: 100%;
		margin: 0 auto
	}

	.calculateZakatCards {
		min-height: 403px;
		padding-right: 50px
	}

	.zakat-section-9 {
		background-position: 0 0 !important
	}
}

.border-b-silver {
	border-bottom: rgba(133, 133, 132, .4)
}

.border-b-2 {
	border-bottom-width: 2px;
	border-bottom-style: solid
}

.border-t-silver {
	border-top: rgba(133, 133, 132, .4)
}

.border-t-2 {
	border-top-width: 2px;
	border-top-style: solid
}

.form-style-2 :is(input, select, textarea) {
	min-height: 66px;
	padding: 5px 5px 5px 19px;
	font-size: var(--fs-16);
	color: #000;
	font-weight: 400;
	border-radius: 5px;
	background-color: #ddd;
	width: 100%;
	border: none;
	outline: 0
}

.form-style-2 :is(input, select, textarea):is(:focus, :hover) {
	outline: 1px solid var(--clr-primary-400)
}

.form-style-2 :is(input, select, textarea)::placeholder {
	color: #5e5e5e
}

.zakat-faq-section {
	background: #edf3ff
}

@media only screen and (min-width:1240px) {
	.zakat-section-12 {
		background: url('../images/zakat-12-bg.png') right top/90% no-repeat
	}
}

@media only screen and (max-width:1240px) {
	.zakat-section-12 * {
		color: #000 !important
	}

	.zakat-section-12 .btn {
		color: #fff !important
	}
}

.no-padding-newsletter~.newsletterSection {
	padding-top: 0;
	margin-top: -1px
}

.patientSuccessCards {
	border-radius: 15px;
	width: 100%;
	display: block;
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25)
}

.patientSuccessCardsText {
	opacity: 1;
	padding: 20px 5px 33px 18px
}

.patientSuccessCards:where(:hover, :focus) {
	background: var(--clr-secondary)
}

.patientSuccessCards:where(:hover, :focus) * {
	color: #fff
}

.chaptersCta {
	min-height: 366px;
	max-width: 1190px;
	margin: 0 auto;
	width: 100%;
	border-radius: 33px;
	display: flex;
	align-items: center;
	padding: 20px 40px 20px 20px
}

.chaptersCta img {
	position: absolute;
	bottom: 0;
	left: 40px
}

.waysToDonateCard {
	box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
	border-radius: 10px;
	min-height: 542px
}

.waysCardHeader {
	background: var(--clr-primary-700);
	padding: 24px 24px 30px
}

.row div[class*=col]:nth-of-type(2n) .waysCardHeader {
	background: var(--clr-secondary)
}

.waysCardHeader h6 {
	color: #fff;
	font-size: var(--fs-20);
	font-weight: 700;
	line-height: 1.3;
	margin: 0
}

.employeeCardText h6,
.wayCardTitle {
	color: #000;
	text-transform: uppercase;
	font-weight: 700
}

.waysCardBody {
	padding: 25px 23px
}

.wayCardTitle {
	font-size: var(--fs-20);
	margin-bottom: 20px
}

.waysCardBody .img_wrap {
	margin-bottom: 22px
}

.strong-link,
.thin-link {
	font-family: var(--ff-clash);
	color: #c80d0a;
	font-size: var(--fs-20);
	font-weight: 700;
	text-transform: uppercase;
	display: block
}

.waysToDonateCard ul {
	padding-left: 24px
}

.waysToDonateCard ul li {
	font-weight: 400;
	font-size: var(--fs-18);
	color: var(--clr-dark-400)
}

.flexed-input input:is(:hover, :focus) {
	outline: 0
}

.flexed-input input {
	min-height: 44px;
	border-radius: 0;
	border: none;
	font-size: var(--fs-13)
}

.employerStepsSection {
	min-height: 790px
}

.employeeStepCards {
	background: linear-gradient(#fff, #dfe0e0);
	padding: 17px;
	border-radius: 25px;
	box-shadow: 5px 5px 6px rgba(0, 0, 0, .75)
}

.chapterLinkContainer a,
.partners-map-slider {
	background-position: center;
	background-repeat: no-repeat
}

.employeeStepCards .stepName {
	top: -20px;
	padding: 20px;
	min-height: 77px;
	max-width: 220px;
	width: 100%;
	color: #fff;
	background: url(../images/step-bg.png) 100% no-repeat;
	text-align: center
}

.employeeStepCards .stepName::after,
.employeeStepCards .stepName::before {
	content: "";
	height: 20px;
	width: 20px;
	position: absolute;
	right: -19px;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	background: #c80d0a;
	top: 0
}

.employeeStepCards .stepName::before {
	left: -19px;
	right: unset;
	transform: rotate(-90deg)
}

.employeeStepCards .stepName.blue {
	background: url(../images/step-bg-blue.png) 100% no-repeat
}

.employeeCardText {
	border: 8px solid #333;
	border-radius: 20px;
	padding: 10px;
	min-height: 415px;
	display: grid;
	place-content: center;
	text-align: center;
	width: 100%
}

.employeeCardText h6 {
	font-size: var(--fs-25);
	line-height: 1.5
}

.employeeCardText a {
	color: var(--clr-primary-400);
	font-size: var(--fs-18);
	font-weight: 700;
	margin-top: 15px
}

.employeeStepCards .icon {
	bottom: -90px;
	border-radius: 100%;
	padding: 40px;
	outline: #333 solid 10px;
	background-color: #fff
}

.partner-map-list.right,
div#map::after {
	bottom: 0;
	right: 0
}

.employeeStepCards .icon.red {
	outline: 10px solid var(--clr-secondary-solid)
}

.employeeMatchBox {
	min-height: 412px;
	display: flex;
	flex-direction: column;
	padding: 44px 20px 30px;
	max-width: 900px;
	width: 100%;
	margin: 0 auto;
	justify-content: center
}

.employeeMatchBoxText {
	max-width: 667px;
	width: 100%;
	margin: 0 auto
}

.stockStepCards {
	padding: 23px 10px;
	border-radius: 10px;
	transition: 250ms;
	position: relative
}

.stockStepCards .count {
	position: absolute;
	left: -6px;
	top: 13px;
	font-family: var(--ff-clash);
	font-size: clamp(30px, 10vw, 102px);
	font-weight: 700;
	color: rgba(255, 255, 255, .09);
	line-height: 1;
	writing-mode: vertical-lr;
	letter-spacing: 3px;
	opacity: 0
}

.stockStepCards:hover svg * {
	fill: var(--clr-primary-400)
}

.stockStepCards .icon_wrap {
	min-height: 143px;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 143px;
	width: 100%;
	margin: 0 auto 10px;
	position: relative;
	top: -80px
}

.stockStepCards .text_wrap {
	position: relative;
	top: -49px
}

.stockStepCards li {
	color: #fff;
	font-weight: 400;
	font-size: var(--fs-20);
	margin: 0 auto;
	list-style: none
}

.chapterLinkContainer a,
.partner-map-list li {
	font-family: var(--ff-clash);
	font-weight: 700;
	font-size: var(--fs-24);
	color: #333133
}

.partners-map-slider {
	pointer-events: none;
	background-image: url(../images/partners-map/partner-bg.png)
}

.partners-map-slider .img_wrap {
	width: max-content;
	margin: 0 auto
}

.partner-map-list {
	position: absolute;
	z-index: 3
}

.partner-map-list.left {
	left: 0;
	top: 0
}

.partner-map-list li {
	gap: 10px;
	margin-bottom: 27px
}

.partner-map-list li .icon {
	padding: 15px;
	border-radius: 100%
}

.partner-map-list li .icon.pink {
	background: #b824ec
}

.partner-map-list li .icon.green {
	background: #1f992b
}

.partner-map-list li .icon.orange {
	background: #ff5c00
}

.pointer-events-none {
	pointer-events: none
}

.chapterLinkContainer {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 33px;
	flex-wrap: wrap;
	justify-content: center
}

.chapterLinkContainer a {
	flex: 0 0 auto;
	padding: 26px 33px;
	background-color: #fff;
	box-shadow: 0 2px 23px rgba(0, 0, 0, .25);
	border-radius: 5px;
	text-align: center;
	letter-spacing: -.84px;
	line-height: 1;
	transition: .1s;
	background-size: cover
}

.chapterLinkContainer a:hover {
	background-image: url(../images/chapter-links-bg.png);
	color: #ffff
}

.hover-gallery-section img {
	cursor: pointer;
	transition: 180ms ease-in
}

.hover-gallery-section img:hover {
	transform: scale(1.1);
	box-shadow: 0 14px 26px rgba(0, 0, 0);
	border-radius: 4px
}

.panelSectionTextBasic p {
	font-size: var(--fs-20);
	font-weight: 400;
	font-family: var(--ff-poppins);
	line-height: 1.5;
	margin-bottom: 20px
}

.panelSectionTextBasic li {
	font-size: var(--fs-18);
	font-weight: 600;
	font-family: var(--ff-poppins);
	list-style: none;
	color: #333133;
	display: flex;
	align-items: start;
	margin-bottom: 15px
}

.panelSectionTextBasic li::before {
	content: url("https://resourcepad.io/indus-us-wp/wp-content/uploads/2024/03/list-marker-purple.png");
	margin-right: 15px
}

.policiesContent :is(p, li) {
	color: #5b5b5b;
	font-size: var(--fs-20);
	margin-bottom: 30px
}

.policiesContent :is(li) {
	margin-bottom: 10px
}

.policiesContent :is(ul, ol) {
	padding-left: 30px
}

.policiesContent :is(a) {
	color: var(--clr-primary-400);
	font-size: var(--fs-20);
	text-decoration: underline;
	font-weight: 500
}

.policiesContent :is(strong) {
	color: var(--clr-primary-400);
	font-size: var(--fs-20);
	font-weight: 500
}

.policiesContent :is(h1, h2, h3, h4, h5, h6) {
	color: var(--clr-primary-400);
	font-size: var(--fs-30);
	letter-spacing: -.84px;
	line-height: 1.1;
	margin-bottom: 30px;
	font-weight: 600
}

div#map::after {
	content: "";
	position: absolute;
	width: 400px;
	display: block;
	background: #fffF;
	height: 40px;
	z-index: 1231231231
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%
}

@media only screen and (min-width:1200px) {
	.slide-paragraph-right p:nth-of-type(2n) {
		position: relative;
		right: -70px
	}
}

.select-arrow {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(../images/arrow-bottom.png);
	background-position: 95%;
	background-repeat: no-repeat;
	max-width: 430px;
	width: 100%
}

.doubleGiftSection .gif {
	position: relative;
	height: 180px;
	left: 0;
	z-index: -1;
	scale: 3;
	width: auto
}

@media only screen and (max-width:992px) {
	header {
		position: relative
	}


	.video-panel{
		margin-bottom: 30px;
	}
	
	header .container {
		padding: 0
	}

	.headerLogo {
		min-height: auto;
		max-width: 120px
	}

	.burgerButton,
	.rfMobileMenu {
		display: block
	}

	.headerMainContainer {
		flex-direction: column-reverse;
		width: 100%
	}

	.mobileContainer {
		padding: 10px 15px;
		background: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%
	}

	.bottomHeader {
		display: flex !important;
		padding: 15px 0;
		justify-content: end !important
	}

	header nav {
		max-width: 500px;
		display: none
	}

	.headerContainer>* {
		padding-left: 13px;
		padding-right: 2px
	}

	.headerInfolist {
		max-width: 303px
	}

	.headerInfolist a {
		font-size: 12px
	}

	.topHeader {
		padding-inline: 5px;
		flex-wrap: wrap;
		justify-content: center !important;
		gap: 10px
	}

	.otherAppealCard:hover .otherAppealCardText,
	.otherAppealSlider .item.slick-active .otherAppealCardText {
		opacity: 1
	}

	.otherAppealCard:hover button,
	.otherAppealSlider .item.slick-active .otherAppealCardText {
		color: var(--clr-secondary-solid)
	}

	.doubleGiftSection {
		overflow: hidden
	}

	.doubleGiftSection .gif {
		scale: 1.8
	}
}

div#map_access {
	DISPLAY: NONE !important
}

.slider-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	padding-inline: 50px;
	height: 0
}

.slider-arrow {
	padding: 10px;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	transition: 250ms
}

.prev .slider-arrow {
	rotate: 180deg
}

.slider-arrow::after {
	content: url('../images/slider-arrow.svg')
}

button:hover>.slider-arrow {
	background: #ddd
}

.slider-arrow.inverse {
	border: 1px solid #b8b8b8;
	background: #f6f6f6
}

.stockDonationCards {
	display: flex;
	flex-direction: column
}

.stockDonationCards.even {
	flex-direction: column-reverse
}

.stockDonationCards .text {
	padding: 40px 20px;
	background: #fff;
	border-radius: 25px;
	box-shadow: 0 -3px 17.1px rgba(0, 0, 0, .25);
	transition: 250ms
}

.stockDonationCards .text p {
	color: #757575;
	font-weight: 400;
	font-size: var(--fs-18);
	letter-spacing: -.84px;
	text-align: center
}

.stockDonationCards .text h6 {
	font-weight: 700;
	font-family: var(--ff-poppins);
	font-size: 26px;
	color: #111;
	text-align: center;
	margin-bottom: 16px
}

.stockDonationCards .number h6 {
	color: #fff;
	font-size: var(--fs-35);
	font-weight: 700
}

.stockDonationCards .number {
	width: 90%;
	margin: 0 auto;
	background: linear-gradient(45deg, #1c11f1 -10%, #ec2427 70%);
	padding: 19px;
	text-align: center;
	--r: 144px;
	border-radius: var(--r) var(--r) 0 0;
	padding-top: calc(var(--r)/ 3);
	display: flex;
	flex-direction: column
}

.stockDonationCards.odd .number {
	background: linear-gradient(45deg, #ec2427 38%, #1c11f1 90%);
	flex-direction: column-reverse;
	border-radius: 0 0 var(--r) var(--r);
	padding-bottom: calc(var(--r)/ 3);
	padding-top: 23px
}

.stockDonationCards .number h5 {
	font-size: var(--fs-90);
	color: #fff;
	margin: 0;
	line-height: .8;
	font-weight: 700
}

.stockDonationCards:hover .text {
	background: #e7e7e7
}

.stockDonationCards.odd:hover .text {
	transform: translateY(20px)
}

.stockDonationCards.even:hover .text {
	transform: translateY(-20px)
}

.accordion__container a {
	font-weight: 700;
	color: var(--clr-primary-400)
}

.videoPopupContainer {
	padding: 40px;
	background: 0 0
}

.videoPopupContainer iframe {
	width: 620px;
	height: 400px
}

button.fancybox-button.fancybox-close-small {
	font-size: 12px;
	background: #fff;
	color: #000;
	border-radius: 100%
}

@media only screen and (max-width:768px) {
	.calculateZakatCards img {
		margin-right: 15px
	}

	.calculateZakatCards {
		display: flex;
		gap: 15px
	}
}

@media only screen and (max-width:621px) {
	.videoPopupContainer iframe {
		width: 320px;
		height: 280px
	}
}

.appealImpactCards .icon_wrap img {
	height: auto;
	width: 23px
}

@media only screen and (min-width:1000px) {
	section.currentAppeal {
		position: relative;
		top: -20px
	}
}

.headerInfolist a {
	font-size: var(--fs-15)
}

.valueCards h6 {
	font-size: var(--fs-28);
	margin-bottom: 5px !important;
	line-height: 1.2
}

.successStoryMain .section_heading+p {
	font-size: var(--fs-18);
	font-weight: 700;
	text-wrap: balance
}

.pointCardText h6 {
	font-size: var(--fs-22);
	font-weight: 700
}

.hospitalCards h6 {
	min-height: 50px
}

.hospitalCards p {
	min-height: 103px
}

.pointCardText {
	padding-inline: 10px
}

.patientSuccessCardsText h6 {
	min-height: 40px
}

.patientSuccessCards img {
	width: 100%;
	min-height: 250px;
	object-fit: cover
}

.bottomHeaderLogo img,
.footerLogo img {
	max-width: 121px
}

.headerLogo {
	min-height: 86px
}

.bottomHeaderLogo img {
	max-width: 90px;
	scale: 1.2;
	position: relative;
	top: -3px
}

.mobileLogo img {
	width: 160px
}

a.reportCard.d-block {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	height: 100%
}

.appealCards {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100%
}

.appealCardText {
	min-height: 209px
}

body.appeal-template-zakat p.bannerSubTitle {
	font-size: 16px !important
}

.bannerTextMain {
	width: 100%;
	display: flex;
	align-items: center;
	background: url(https://resourcepad.io/indus-us-wp/wp-content/uploads/2024/05/Group-28851-1.png) left top/cover no-repeat
}

.bannerImage {
	position: absolute;
	right: 0;
	top: 0;
	width: 1150px;
	height: 800px
}

.bannerTextWrapper {
	padding: 20px
}

@media (max-width:1700px) {
	.bannerImage {
		width: 950px !important
	}
}

@media (max-width:1440px) {
	.bannerImage {
		width: 750px !important
	}
}

@media (max-width:1300px) {
	.bannerImage {
/* 		width: 750px !important */
		width: 690px !important;
	}

	.bannerTextWrapper {
		padding: 20px 20px 20px 25px;
		position: relative;
		left: 0
	}
}

@media (max-width:1200px) {
	.bannerTextMain {
		min-height: 600px
	}

	.bannerImage img {
		height: 600px;
		
/* 		height: 520px !important; */
	}

/* 	.bannerImage {
		width: 650px !important
	} */
	
	.bannerImage {
        width: 52% !important;
/*         height: auto;
        top: 0;
        right: 0; */
    }

	.bannerSubTitle {
		margin-bottom: 20px;
		width: 390px
	}
}

@media (max-width:1170px) {
	.bannerTextMain {
		min-height: 500px
	}

	.bannerImage img {
		height: 500px
	}

	.bannerImage {
		width: 550px !important
	}
}

@media (max-width:992px) {

	.bannerImage,
	.bannerTextMain,
	p.bannerSubTitle.mb-20 {
		width: 100%
	}

	.reversePanels .row:nth-of-type(2n),
	.reversePanels .row:nth-of-type(odd) {
		border: 0 !important
	}

	.bannerTextWrapper {
		padding: 17% 0 0;
		text-align: center;
		max-width: 100% !important
	}

	.bannerTextMain {
		background: no-repeat;
		padding: 0;
		margin: 0;
		display: block;
		align-items: unset !important;
		min-height: auto
	}

	h1.bannerHeading br {
		display: none
	}

	.bannerTextWrapper span {
		display: inline
	}

	.bannerImage {
		width: 100% !important;
		position: relative;
		height: auto;
		margin: -25px 0 0
	}

	section.banner.p-0 {
		display: flex;
		flex-direction: column-reverse
	}

	.bannerImage img {
		min-height: auto;
		object-fit: cover;
		height: auto
	}

	.headerButtons.d-flex.align-items-center.justify-content-end.gap-20 {
		display: none !important
	}
}

@media (max-width:700px) {
	.bannerTextWrapper {
		min-height: 370px;
		padding: 27% 0 0
	}

	.bannerImage img {
		min-height: auto;
		object-fit: contain;
		height: auto
	}
}

section.homeAboutSection.bg-texture-grey-1.bg-grey-400 {
	background-image: none;
	background-color: #f9f9f9
}

.otherAppealSliderButton {
	display: flex;
	align-items: center;
	justify-content: end;
	gap: 10px
}

.otherAppealSliderButton button:is(:hover, :focus) {
	outline: #e7e7e7 solid 1px;
	background: var(--clr-primary-300);
	color: #fff
}

.otherAppealSliderButton button {
	background: #fff;
	border-radius: 100%;
	padding: .3em;
	line-height: 1;
	font-size: var(--fs-22)
}

.page-template-about-us .pageContent i {
	position: relative;
	top: -15px;
	left: -6px
}

.page-template-about-us .pageContent .valueHoverList i {
	position: relative;
	top: 0;
	left: 3px;
	scale: 1
}

.pageContent .pillWithBackground:nth-child(3) ::before {
	left: -29px;
	top: 5px
}

@media only screen and (min-width:992px) {
	.bottomHeader.fixed {
		padding: 0
	}

	.appealGalleryCards img {
		max-width: 421px;
		width: 100%;
		min-height: 310px
	}
}

:is(h1, h2, h3, h4, h5, h6)>:is(strong, b) {
	font-size: var(--fs-35);
	color: #242424 !important;
	font-weight: 700 !important
}

.formatContent :is(strong, i) {
	color: #242424;
	font-weight: 700
}

.formatContent li {
	margin-bottom: 14px
}

.accordion__panel ol {
	padding-left: 19px
}

.testiSection .slider-nav-container {
	position: absolute;
	bottom: 20px;
	left: 10px;
	max-width: 700px;
	width: 100%;
	z-index: 1000
}

.testiSection .slider-nav-container .slick-current img {
	border: 2px solid var(--clr-primary-dark);
	border-radius: 5px
}

.testiSection .nav-buttons {
	position: absolute;
	top: 40%;
	display: flex;
	justify-content: space-between;
	z-index: 1;
	transform: translateY(-50%);
	height: 0;
	width: 108%;
	left: -39px
}

.testiSection .nav-buttons .next,
.testiSection .nav-buttons .prev {
	background-color: #e8ebf0;
	border: none;
	cursor: pointer;
	height: 45px;
	width: 45px;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 150ms
}

.testiSection .nav-buttons .next i,
.testiSection .nav-buttons .prev i {
	font-size: 24px;
	line-height: 1
}

.testiSection .nav-buttons button:is(:hover, :focus) {
	outline: #EC2427 solid 1px;
	background: var(--clr-primary-700);
	color: #fff
}

section.testiSection .slider-for .item p {
	font-size: var(--fs-20);
	line-height: 2;
	letter-spacing: -.84px
}

@media only screen and (max-width:1366px) {
	.testiSection .slider-nav-container .item {
		padding-inline: 2px
	}

	.testiSection .slider-nav-container {
		position: relative;
		margin-top: 10px;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column-reverse;
		gap: 10px;
		z-index: 1
	}

	section.testiSection .position-relative {
		display: flex;
		flex-direction: column-reverse
	}

	.testiSection .nav-buttons {
		position: static;
		display: flex;
		justify-content: center;
		z-index: 1;
		height: auto;
		width: 100%;
		gap: 10px;
		transform: unset
	}

	.testiSection .nav-buttons button {
		background: #e7e7e7 !important;
		height: 30px !important;
		width: 30px !important
	}

	section.testiSection .slider-for .item p {
		font-size: var(--fs-14);
		line-height: normal;
		margin-bottom: 10px
	}

	section.testiSection .slider-for .item {
		padding-inline: 0px
	}

	section.testiSection .slider-for .item .col-lg-6 {
		padding: 0
	}
}

section.testiSection iframe,
section.testiSection video {
	min-height: 691px;
	max-width: 100%;
	margin-left: auto;
	display: block
}

@media only screen and (max-width:767px) {
	.otherAppealSliderButton {
		padding-top: 12px;
		justify-content: center
	}

	.formatContent ol {
		padding-left: 10px
	}

	div#map {
		min-height: 270px
	}
}

.testiSection .container {
	--size: 1328px
}

.testiCard {
	background: #fff;
/* 	border: 1px solid #ddd; */
	border-radius: 4px;
	padding: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.testiCardVideoWrapper {
	width: 100%;
/* 	padding-bottom: 56.25%; */
	position: relative;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .5);
	border: 10px solid #fff;
	border-radius: 10px;
	transition: .3s
}

.testiCardVideoWrapper:is(:hover, :isFocus) {
	border-color: red
}

.testiCardVideoWrapper iframe {
/* 	position: absolute;
	top: 0;
	left: 0; */
	width: 100%;
	height: 100%
}

.testiCardName {
	font-family: Poppins, sans-serif;
	font-size: 20px;
	margin-top: 15px;
	font-weight: 700;
	line-height: 50px;
	text-align: left;
/* 	padding-bottom: 60px */
}

.newTestiSection .container {
	--size: 1435px !important
}

.newTestiSection .section_heading {
	margin-bottom: 40px !important
}

#contactBanner .bannerHeading {
	display: flex;
	align-items: center
}

.contactUsHeadingWrapper {
	max-width: 850px;
	width: 100%;
	margin-bottom: 20px
}

.contactUsMainImg {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #1f4999 0, #03016b 100%);
	height: 82px;
	width: 82px
}

.contactUsMainContent {
	max-width: 320px;
	width: 100%
}

.contactUsCard {
	display: flex;
	align-items: center;
	gap: 30px;
	margin-bottom: 50px
}

.contactMapWrapper {
	min-height: 483px
}

.contactUsMainContent h5 {
	margin-bottom: 10px
}

.contactMapWrapper>div {
	align-items: stretch;
	height: 50%
}

header .btn-secondary {
	background: #1f4999 !important
}

header .btn-secondary:is(:hover, :focus) {
	background-color: #be1516 !important
}

.c-link {
	font-weight: 700 !important
}

.banner a[href="mailto:friend@foihus.org"] {
	font-weight: 700 !important;
	color: #22489b !important
}

.testiCardWrapper>div.row {
	justify-content: center
}

.hasMenu a:has(+ .mega-menu ul li a.active) {
	color: #ec2427 !important
}

li.has-menu:has(.active)>a {
	font-weight: 800;
	color: #eb2225
}

.active {
	color: #ec2427 !important
}

.valueCards .icon_wrap {
	height: 133px;
	display: flex;
	align-items: center;
	min-width: 110px !important
}

.eventFilterDropDown,
.eventfilterYears {
	align-items: center;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, .1)
}

header {
	right: 0;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20
}

.currentAppealCard .icon_wrap,
footer .icon_wrap {
	min-height: 30px !important;
	min-width: 30px !important
}

.currentAppealText .icon_wrap {
	min-height: 66px;
	min-width: 66px
}

.iframeButton {
	min-width: 238px
}

.currentAppealCard p {
	min-height: 63px !important
}

.gridSection .active {
	color: #fff !important
}

.contactUsHeadingWrapper p {
	font-weight: 800 !important
}

.blogCard img {
	min-height: 283px !important;
	object-fit: fill !important;
	width: 100%
}

.bannerTextMain {
	background-image: url('https://foihus.org/wp-content/uploads/2024/07/indus-4.png')
}

.eventDate,
.eventsCard:hover .eventCardText,
.eventsCard:hover .eventDate {
	background: #191781 !important
}

.formatContent li::marker {
	font-weight: 700
}

.slick-track {
	max-height: 500px !important
}

.allAppeals .appealCardText p {
	min-height: 84px !important
}

.eventsSection .secondary-link-button {
	gap: 7px !important
}

.eventCardText p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: calc(2 * 1.4em)
}

.eventDate {
	position: static !important;
	max-width: 100% !important;
	width: 100%;
	text-align: center;
	border-radius: 0
}

.eventsCard:hover .eventDate {
	color: #fff
}

.eventsCard:hover {
	background: #fff !important
}

.eventsCard .eventCardText {
	background-color: #191781 !important;
	color: #fff !important
}

.eventCardWrap .img_wrap img,
.eventsCard {
	border-radius: 0 !important
}

.headerInfolist {
	max-width: 250px !important
}

.eventCardWrap {
	overflow: hidden;
	border-radius: 8px
}

.eventFilterMainText {
	font-family: var(--ff-secondary);
	font-size: 18px;
	font-weight: 500;
	color: #000
}

.eventfilterYears,
.eventfilterYears button {
	font-family: var(--ff-clash);
	color: #ec2427;
	font-weight: 800;
	font-size: 20px;
	line-height: 1
}

.eventfilterYears {
	position: relative;
	display: inline-flex;
	justify-content: center;
	border: 1px solid #d4d4d4;
	width: 123px;
	height: 36px;
	border-radius: 5px
}

.eventFilterDropDown {
	display: flex;
	justify-content: center;
	flex-direction: column;
	position: absolute;
	background-color: #fff;
	top: 50px;
	left: 0;
	z-index: 10;
	width: 100%;
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer
}

.eventfilterYears button {
	padding-block: 5px;
	border-bottom: 1px solid #d4d4d4;
	width: 100%;
	transition: .1s
}

.eventFilterDropDown button:last-child {
	border: none
}

.eventfilterYears button:is(:hover, :active, :focus) {
	background-color: #ec2427;
	color: #fff
}

.eventButtonActive {
	background: #ec2427;
	color: #fff !important;
	border-color: #ec2427 !important
}

.reversePanels .row:nth-of-type(2n),
.reversePanels .row:nth-of-type(odd) {
	display: flex
}

#getInvolvedSliderSection .slick-next,
#getInvolvedSliderSection .slick-prev {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: 50px;
	height: 50px;
	background-color: #000;
	color: #fff;
	border: none;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: .7;
	transition: opacity .3s
}

#getInvolvedSliderSection .slick-prev {
	left: -60px
}

#getInvolvedSliderSection .slick-next {
	right: -60px
}

#getInvolvedSliderSection .slick-next i,
#getInvolvedSliderSection .slick-prev i {
	font-size: 24px
}

@media (max-width:768px) {
	#getInvolvedSliderSection .slick-prev {
		left: 10px
	}

	#getInvolvedSliderSection .slick-next {
		right: 10px
	}
}

@media (max-width:480px) {

	#getInvolvedSliderSection .slick-next,
	#getInvolvedSliderSection .slick-prev {
		position: absolute;
		top: 37%;
		transform: translateY(0);
		z-index: 10;
		width: 50px;
		height: 50px;
		background-color: #000;
		color: #fff;
		border: none;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: .7;
		transition: opacity .3s
	}

	#getInvolvedSliderSection .slick-next i,
	#getInvolvedSliderSection .slick-prev i {
		font-size: 18px
	}
}

.bannerTextMain {
	height: 55% !important
}

.involvedCard button {
	top: -75px !important
}

.googleMapWrapper {
	min-height: 396px;
	max-width: 692px;
	width: 100%;
}

.googleMapWrapper>* {
	height: 100%;
	width: 100%;
}

#pastEventSection .eventCardWrap {
	min-height: 340px;
	max-width: 340px;
	width: 100%;
}

#pastEventSection .eventCardWrap * {
	height: 100%;
}

#pastEventSection .eventCardWrap img {
	height: 100%;
	width: 100%;
}

/* 
.single .bannerTextWrapper .btn {
	display: none !important;
}

.appealImpactSection .btn.btn-secondary {
	display: none !important;
}

.fundraiseCta .Fundraiser {
	display: none !important;
}
 */
.delayed-section {
	display: block !important;
}

.bannerSlider:not(.slick-initialized) .item:not(:first-child) {
    display: none;
}


/* OTHER PAGES BANNER CSS  */

/* .bannerMainContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	flex-direction: row-reverse;
	max-width: 1180px;
	width: 100%;
	margin-left: auto;
}

.bannerImage {
	position: static !important;
	min-width: 1180px;
} */

/* .otherPageBannerContainer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row-reverse;
	max-width: 1500px;
	width: 100%;
	margin-left: auto !important;
	padding-bottom: 50px;
}

.otherPageBannerContainer .bannerImage,
.otherPageBannerContainer .bannerImage img {
	position: static;
	margin: 0px !important;
}

.otherPageBannerContainer .bannerTextMain {
	background-image: none;
	background-color: transparent !important;
	width: auto !important;
}

.otherPageBannerContainer .bannerTextWrapper {
	min-height: auto !important;
}
 */

/* .banner {
	background-color: #F0F6FF;
} */


.appeal-template-zakat .bannerImage img {
	height: 800px !imporant;
	width: 1150px !important;
}

.testiCardVideoWrapper iframe {
    height: 300px;
    width: 300px;
}

/* .successStorySection .storyCard img {
	height: 370px !important;
	width 309px !important;
	object-fit: cover;
}  */

.successStorySection .storySlider .storyCard img:not(.play-icon img) {
	height: 370px !important;
	width: 309px !important;
	object-fit: cover !important;
} 

.successStorySection .storyImage {
	max-width: 764px;
	width: 100%;
	overflow: hidden;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
	height: 493px;
}

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

.play-icon img {
	height: auto !important;
	width: auto !important;
}


.header-fundraiser-btn.header-fundraiser-btn {
	 background: var(--clr-secondary) !important;
    color: #fff;
}

.header-fundraiser-btn:is(:active, :hover, :focus) {
    background: var(--clr-primary-700) !important;  
	color: #fff;
} 

body {
  scroll-padding-top: 100px; /* Adjust the top padding when scrolling */
}

#gender,
input[name="country"],
input[name="volunteer_time"],
input[name="support indus hospital"] {
    display: none !important;
}

div[data-name="gender"] input {
	display: none !important;
}


/* SINGLE EVENT BANNER START */

.single-event-wrapper {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	min-height: 493px;
}

.single-event-wrapper article {
	margin: auto;
}

.single-event-wrapper .text_wrap h1 {
	font-size: 52px;
	color: #fff;
	font-family: var(--ff-clash);
	font-weight: 700;
	line-height: 1;
}

.single-event-wrapper p span {
	font-size: var(--fs-22);
	font-weight: 500;
	color: #fff;
}

.single-event-wrapper p span:nth-child(2) {
	border-left: 2px solid #fff;
	border-right: 2px solid #fff;
	padding-inline: 8px;
	margin-inline: 3px;
}

.single-event-wrapper .text_wrap > span {
	color: #fff;
	font-weight: 500;
	font-size: var(--fs-22);
}

.single-event-wrapper button.btn {
	background: #fff;
	color: #1F4999;
	max-width: 218px;
	width: 100%;
}


.single-event-even-col .single-event-info-card:nth-child(2) {
    border-left: 2px solid #DEDEDE;
	border-right: 2px solid #DEDEDE;
}

.single-event-info-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0px;
	flex-direction: column;
	max-width: 400px;
	width: 100%;
	min-height: 410px;
	border: 2px solid #DEDEDE;
	padding-inline: 20px;
}

.single-event-info-card .icon_wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 77.58px;
	width: 77.58px;
	border-radius: 50%;
	background-color: #1F4999;
	margin-bottom: 20px;
}

.single-event-info-card .text_wrap h4 {
	color: #000;
	font-size: var(--fs-25);
	font-weight: 600;
	margin-bottom: 10px;
	text-align: center;
}

.single-event-info-card .text_wrap p {
	font-size: var(--fs-23);
	font-weight: 400;
	color: #626262;
	line-height: 1.4;
	text-align: center;
	margin-bottom: 15px;
}

.single-event-info-card .button_wrap a {
	font-size: var(--fs-18);
	color: #1F4999;
	font-weight: 500;
	line-height: 1;
}

.single-event-content-section .text_wrap {
	max-width: 1190px;
	width: 100%;
	margin-inline: auto;
}

.single-event-content-section .heading_wrap h5 {
	font-size: var(--fs-35);
	font-family: var(--ff-clash);
	margin-bottom: 20px;
	font-weight: 600;
	line-height: 1;
	color: #000;
}

.single-event-content-section p {
	font-size: var(--fs-18);
	font-weight: 300;
	color: #535353;
	line-height: 1.8;
}

.single-event-content-section .button_wrap button {
	min-width: 292px;
	width: 100%;
}

/* SINGLE EVENT BANNER END */

/* UTILS */

.ticket_modal_sub_heading {
  font-size: var(--fs-22);
  font-family: var(--ff-clash);
  font-weight: 600;
  line-height: 1;
  color: var(--clr-black);
  margin-bottom: 25px;
}

.max-w-100 {
  max-width: 100% !important;
  width: 100%;
}

/* UTILS */

/* TICKET MODAL STYLES */

.ticket-modal-wrapper {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  inset: 0;
  isolation: isolate;
  background-color: rgba(0, 0, 0, 0.4);
}

.ticket-modal-wrapper li {
	list-style: none;
}

.ticket-modal-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ticket-modal {
  position: relative;
  background-color: var(--clr-white);
  max-width: 1218px;
  padding-bottom: 20px;
  min-height: 737px;
  width: 100%;
  z-index: 999;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.ticket-modal .ticket-modal-header {
  border-bottom: 2px solid #eae6e6;
  padding-bottom: 15px;
  padding-top: 90px;
  margin-bottom: 35px;
}

.ticket-modal-logo .img_wrap {
  position: absolute;
  top: -10%;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  width: 142px;
  height: 142px;
  background-color: var(--clr-white);
  border: 2px solid #1f4999;
  border-radius: 50%;
}

.ticket-modal-logo .img_wrap img {
  height: auto;
  width: auto;
}

.ticket-modal .text_wrap .ticket-modal-heading {
  font-family: var(--ff-clash);
  font-size: var(--fs-22);
  font-weight: 800;
  color: var(--clr-black);
  margin-bottom: 13px;
  line-height: 1;
}

.ticket-modal-event-info span {
  color: #7a7a7a;
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: 1;
}

.ticket-modal-event-info span:nth-child(2) {
  padding-inline: 8px;
  border-left: 2px solid #7a7a7a;
  border-right: 2px solid #7a7a7a;
}

.ticket-modal .ticket-modal-location {
  font-size: var(--fs-20);
  color: #7a7a7a;
  font-weight: 400;
  line-height: 1;
}

#even-col-one-wrapper {
  padding-left: 60px;
  padding-right: 25px;
}

.step-active {
  background-color: #1f4999 !important;
  color: #fff !important;
}

.ticket-modal-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 523px;
  width: 100%;
  margin-bottom: 35px;
}

.ticket-modal-stepper .ticket-modal-stepper-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ececec;
  height: 39.25px;
  width: 39.25px;
  border-radius: 50%;
  font-size: var(--fs-18);
  font-weight: bold;
  color: #404040;
  line-height: 1;
}

.ticket-modal-stepper-count.step-active + .stepper-line {
	background-color: #1f4999;
}

.ticket-modal-stepper .stepper-line {
  background-color: #ececec;
  border-radius: 5px;
  height: 5px;
  flex-grow: 1;
}

.ticket-modal-cart-item {
  border-bottom: 1px solid #ececec;
  padding-bottom: 25px;
  margin-bottom: 25px;
}

.ticket-modal-cart-item h5 {
  font-size: var(--fs-18);
  font-family: var(--ff-poppins);
  font-weight: 500;
  color: #7a7a7a;
  line-height: 1;
  margin-bottom: 5px;
}

.ticket-modal-cart-item button span {
  font-size: var(--fs-16);
  font-weight: 400;
  color: #7a7a7a;
  line-height: 1;
}

.ticket-modal-cart-item .icon_wrap {
  height: 35px;
  width: 35px;
  margin-bottom: 0px;
  overflow: hidden;
}

.ticket-modal-cart-item .icon_wrap img {
  height: 100%;
  width: 100%;
}

.cart-summary-wrapper {
  max-width: 448px;
  width: 100%;
  height: 100%;
  background-color: var(--clr-white);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding-bottom: 20px;
}

.cart-order-summary-header {
  padding-block: 20px;
  padding-inline: 20px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 25px;
}

.cart-order-summary-header .heading_wrap h5 {
  font-family: var(--ff-clash);
  font-size: var(--fs-20);
  color: var(--clr-black);
  line-height: 1;
  font-weight: 600;
}

.cart-summary-list {
  padding-inline: 20px;
  border-bottom: 4px solid #eaeaea;
  margin: 0px;
}

.cart-summary-list-item {
  margin-bottom: 30px;
}

.cart-summary-list li span:first-child {
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 1;
  color: #4e4e4e;
}

.cart-summary-list-item .cart-list-item-price {
  color: #1f4999;
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 1;
}

.cart-summary-total {
  padding-inline: 20px;
  padding-top: 15px;
}

.cart-summary-total span:first-child {
  color: #4e4e4e;
  font-size: var(--fs-18);
  line-height: 1;
  font-weight: 400;
}

.cart-summary-total #cart-total-price {
  font-size: var(--fs-20);
  font-weight: 400;
  color: #1f4999;
}

/* div.button_wrap:has(> .ticket-modal-btn) {
  padding-left: 60px;
} */

.ticket-modal-btn {
  background: var(--clr-primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  max-width: 293px;
  width: 100%;
  height: 62px;
  font-size: var(--fs-16);
  font-weight: bold;
  color: var(--clr-white);
  line-height: 1;
  text-transform: uppercase;
}

.ticket-modal-btn:is(:hover, :active, :focus) {
  background: var(--clr-secondary);
}

/* TICKET MODAL USER DETAILS */

.form_heading {
  font-size: var(--fs-16);
  font-weight: 700;
  color: #5b5b5b;
  line-height: 1;
  margin-bottom: 0px !important;
}

.form-even-col {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.custom-input {
  position: relative;
  border: 1px solid #aab6bc;
  background-color: white;
  max-width: 331px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  min-height: 51px;
}

.custom-input label {
  position: absolute;
  left: 15px;
  top: 0px;
  font-size: var(--fs-14);
  color: #5e5e5e;
  font-weight: 400;
  transition: all 150ms ease;
}

.custom-input .input_wrap input {
  padding-top: 20px; 
  padding-bottom: 5px; 
  padding-inline: 12px;
  min-height: 50px;
  width: 100%;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: var(--fs-12);
  font-weight: 400;
  color: #5e5e5e;
}

.custom-select .custom-select-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
  color: #4e4e4e;
  border-radius: 10px;
/*   padding-inline: 15px; */
  padding-block: 7px;
  transition: all 150ms ease;
  background-image: none !important;
}

.ticket-modal .custom-select {
	position: relative;
	background: none !important;
} 

.custom-select .custom-select-button i {
  font-size: 30px;
}

.custom-select-options-list {
  border: 1px solid #dadada;
  background-color: #fff;
  padding: 0px;
  margin: 0px;
  border-radius: 10px;
  overflow-y: scroll;
  position: absolute;
  max-height: 160px;
  width: 100%;
  left: 50%;
  right: 50%;
  top: 115%;
  transform: translateX(-50%);
  z-index: 10;
}

.custom-select-options-list li {
  padding-inline: 15px;
  padding-block: 5px;
  border-bottom: 1px solid #dadada;
  transition: all 150ms ease;
}

.custom-select-options-list li:is(:hover, :active, :focus) {
  background-color: #dadada;
  color: #000;
}

.select-option-active {
  background-color: #dadada;
  color: #000;
}

#user-details-form .form-helper-text {
  font-size: var(--fs-14);
  font-weight: 400;
  color: #5e5e5e;
}

.user-address-info-wrapper .custom-input {
  max-width: 218px;
  width: 100%;
}

label[for="address-field"] {
  max-width: 97% !important;
}

.custom-check-box {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  width: 100%;
}

.custom-check-box input[type="checkbox"] {
  height: 25px;
  width: 25px;
  border-radius: 10px;
}

.custom-check-box label {
  font-size: var(--fs-16);
  color: #5b5b5b;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0px;
}

/* TICKET MODAL USER DETAILS */

/* TICKET MODAL ATTENDE DETAILS */

.attende-form-wrapper {
  background-color: #f7f8f9;
  padding-inline: 15px;
  padding-block: 11px;
  overflow: hidden;
  border-radius: 5px;
}

#attende-form > .text_wrap span {
  color: #4e4e4e;
  font-size: var(--fs-14);
}

.attende-form-wrapper .custom-input {
  max-width: 320px;
  width: 100%;
}

.attende-form-wrapper .form-even-col label {
  max-width: 92% !important;
  width: 100%;
}

.attende-form-wrapper label[for="attende-phone-field"] {
  max-width: 96% !important;
  width: 100%;
}

.attende-form-wrapper label[for="attende-email-field"] {
  max-width: 96%;
  width: 100%;
}

.attende-tickets-wrapper .icon_wrap {
  height: 40px;
  width: 40px;
}

.attende-ticket-card strong {
  color: #000;
}

.attende-ticket-card p span {
  color: #5e5e5e;
}

.attende-details-check-wrapper {
  background-color: #f7f8f9;
  padding-inline: 15px;
  padding-block: 11px;
  overflow: hidden;
  border-radius: 5px;
}

.custom-input label.label-effect {
	padding-top: 3px;
	font-size: 10px !important;
}

/* TICKET MODAL ATTENDE DETAILS */

/* TICKER MODAL THANK YOU */

.ticket-thank-wrapper .ticket-thank-wrapper-header {
  margin-bottom: 50px;
}

.ticket-thank-wrapper-header .img_wrap {
  height: 50px;
  width: 375px;
  margin-inline: auto;
}

.ticket-thank-wrapper-header .img_wrap img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.ticket-thank-wrapper .text_wrap p {
  color: #1f4999;
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: 1;
}

.ticket-thank-wrapper .ticket-user-info-wrapper {
  display: flex;
  align-items: start;
  justify-content: center;
  gap: 35px;
  background-color: #e5eeff;
  min-height: 322px;
  width: 100%;
  padding-block: 40px;
  padding-inline: 32px;
  overflow: hidden;
  border-radius: 10px;
}

.ticket-user-info-wrapper .ticket-number-wrap {
  gap: 10px;
}

.ticket-number-wrap span {
  color: #5b5b5b;
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 5px;
}

.ticket-number-wrap h6 {
  color: var(--clr-black);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
}

.ticket-thank-wrapper .qr-code-wrapper h5 {
  font-size: var(--fs-16);
  margin-bottom: 10px;
  color: #1f4999;
  font-weight: 400;
  text-align: center;
}

.qr-code-wrapper .img_wrap {
  height: 158px;
  width: 158px;
}

.qr-code-wrapper .img_wrap img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.order-date-wrap span {
  color: #5b5b5b;
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 5px;
}

.order-date-wrap h6 {
  color: var(--clr-black);
  font-size: var(--fs-20);
  font-weight: 700;
  line-height: 1;
}

.input-error {
	border: 1px solid red !important;
}

.input-error label {
	color: red !important;
}

/* TICKER MODAL THANK YOU */

.credit-card-form .custom-input .img_wrap img {
	width: 85px;
}

/* TICKET MODAL STYLES */

/* General background color for all browsers */

html:has(.single-event) {
	margin-top: 0px !important;
}
/* Target Safari specifically */


/* SORT CSS START */
.sortable-list {
   list-style-type: none;
   padding: 0;
   margin: 0;
   width: 300px;
}

.sortable-item {
   padding: 10px;
   margin: 5px 0;
   background-color: #f0f0f0;
   border: 1px solid #ccc;
   cursor: grab;
}

.sortable-item:active {
   cursor: grabbing;
}
/* SORT CSS END */

div[data-not-show="true"] {
	display: none !important;
}

section#newsletter-section {
    padding-top: 0;
}

.custom-form-input {
	    min-height: 61px;
    padding: 10px 10px 10px 25px;
    box-shadow: 0 4px 17px rgba(0, 0, 0, .2);
    font-size: var(--fs-16);
    color: #000;
    font-weight: 400;
    border-radius: 10px;
    background-color: #fff;
    width: 100%;
    border: none;
    outline: 0;
}

.bg-gradient-mix {
   background: var(--clr-gradient-mix) !important;
}

.zakat-sec-three-card h4 {
	color: #fff;
	font-weight: 600;
	margin-bottom: 30px;
	line-height: 1;
}

.banner {
	isolation: isolate;
}

.bannerTextWrapper {
	position: relative;
	z-index: 10;
}

	.ticket-modal-btn {
display: block !important;
}

.banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15); /* 15% opacity */;
    /* z-index: -1; */
}

.ticket-modal-body {
    overflow-y: scroll;
    max-height: 60vh;
}


data-screen-count] {
    display: block !important;
    border-block: 1px solid #ddd;
    padding-block: 25px !important;
}


#layout-shift-loader {
	  position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
}

.selected-for-duplicate{
	border: 2px solid #1f4999;
}


.my-sec {
    padding: 0px;
}
.othersec h1 {
    font-size: 30px;
    font-weight: 600;
}
.othersec ul li {
    margin-bottom: 20px;
}



.dhul-hijjah-section {
  background: linear-gradient(90deg, #6c3483, #a93226);
  color: white;
  padding: 60px 20px !important;
  text-align: center;
}

.dhul-hijjah-section .container {
  max-width: 1000px;
  margin: 0 auto;
}

.dhul-hijjah-section .intro-text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
}

.dhul-hijjah-section .section-heading {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 40px;
}

.dhul-hijjah-section .icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
}


.dhul-hijjah-section .icon-boxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
}

.dhul-hijjah-section .box {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 15px;
  width: 100%;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.dhul-hijjah-section .box i {
  font-size: 60px;
  color: white;
}

.dhul-hijjah-section .box p {
  font-size: 16px;
  margin: 0;
}

.dhul-hijjah-section .box:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.2);
}

.dhul-hijjah-section .box.highlight {
  color: #ffd700;
}


.dhul-hijjah-section .icon-item:hover .box {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.2);
}

.dhul-hijjah-section .icon-text {
  margin-top: 10px;
  font-size: 16px;
  color: white;
}

.dhul-hijjah-section .icon-item.highlight .icon-text {
  color: #ffd700;
}

.gif-donation-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff;
}

.section-intro h4 {
  font-size: 20px;
  color: #7b2cbf;
  margin-bottom: 0;
}

.section-intro h2 {
  font-size: 36px;
  font-weight: bold;
  color: #000;
  margin: 10px 0 30px;
}

.gif-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.gif-card {
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.gif-card-title-box {
  background: linear-gradient(90deg, #1F4999, #EC2528);
  color: #fff;
  border-radius: 12px;
  /* height:85px; */
  padding: 15px;
}

.gradient-text-container {
  background-color: #f0f0f0; /* Light gray background */
  padding: 1rem; 
    border-radius: 12px;            /* Optional: adds space around text */
}

.gradient-text {
  background: linear-gradient(to left, #EC2427 40%, #1F499A 72%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  background-clip: text; /* Optional for Firefox */
  color: transparent;
}
.gif-card-title-box h5 {
  font-size: 20px;
  margin: 0;
  font-family:var(--ff-poppins);
  line-height: 1.4;
}

.gif-card-image-box {
  background: #f4f4f4;
  border-radius: 12px;
  padding: 10px;
  /* height:270px; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.gif-card-image-box img {
  max-width: 100%;
  border-radius: 8px;
}

.gif-card img {
  max-width: 100%;
  border-radius: 12px;
}
  .dashed-heading {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
  }

  .dashed-heading::before,
  .dashed-heading::after {
    content: "";
    flex: 1;
    border-top: 1px dashed #e92529;
  }

  .dashed-heading::before {
    margin-right: 20px;
  }

  .dashed-heading::after {
    margin-left: 20px;
  }


 @media (max-width: 768px) {
    .center-mobile-wrapper {
      text-align: center;
    }
    .center-mobile {
      display: inline-block;
      margin: 0 auto;
    }
  }

  @media (max-width: 768px) {
  /* Container and text adjustments */
  .section-intro h2,
  .dashed-heading {
    font-size: 1.4rem;
    padding: 0 10px;
  }

  .intro-text,
  .section-heading {
    font-size: 1rem;
    text-align: center;
    padding: 0 10px;
  }

  /* Stack icon boxes vertically */
  .icon-boxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .icon-item {
    width: 90%;
    max-width: 300px;
  }

  .icon-image {
    max-width: 80px;
  }

  .icon-text {
    font-size: 1rem;
    margin-top: 10px;
  }

  /* Adjust gif cards to stack vertically */
  .gif-cards {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .gif-card {
    width: 90%;
    max-width: 320px;
  }

  .gif-card-title-box {
    padding: 12px;
  }

  .gif-card-title-box h5 {
    font-size: 1.1rem;
  }

  .gif-card-image-box {
    height: auto;
    padding: 10px;
  }

  .gif-card-image-box img {
    width: 100%;
    height: auto;
  }

  /* Center the button */
  .btn.header-fundraiser-btn {
    font-size: 1rem;
    padding: 10px 20px;
  }

  /* Fix dashed heading spacing */
  .dashed-heading::before,
  .dashed-heading::after {
    border-top: 1px dashed #e92529;
    flex: 1;
  }

  .dashed-heading {
    font-size: 1.3rem;
    padding: 10px 0;
  }
}

  @media (max-width: 768px) {

    
  .container{
    padding:20px;
  }
  
  }
  .blue-section {
  background-color: #003b8f;
  color: white;
  padding: 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blue-icons {
  width: 820px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.icon-box {
  width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-box .icon-circle {
  width: 80px;
  height: 80px;
  border: 3px solid red;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.icon-box img {
  height: 40px;
}

.icon-box p {
  margin-top: 10px;
  color: white;
  font-size:12px
}

/* Blue Section Button */
.blue-section .header-fundraiser-btn {
  display: inline-block;
  background-color: red;
  color: white;
  padding: 10px 25px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  margin-top: 20px;
}

/* White Section */
.white-section {
  background-color: white;
  color: #333;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
  text-align: center;
}

/* White Section Text */
.white-section .section-text {
  width: 450px;
  flex: 0 1 auto;
  text-align: left;
}

/* Payment Image */
.white-section .payment-image {
  width: 308px;
  flex: 0 1 auto;
}

.white-section .payment-image img {
  height: 50px;
}

/* Donate Button */
.white-section .donate-button {
  flex: 0 1 auto;
}

.white-section .donate-button a {
 
  display: block;
  background-color: #003b8f;
  color: white;
  padding: 10px 25px;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
}


.banner{
 margin-top:0px;   
}