/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body {
	margin: 0;
	padding: 0;
	/*font-family: "Inter", sans-serif;*/
	 font-family: "Plus Jakarta Sans", sans-serif;
}

:root {
	--white_bg: #ffffff;
	--border_radius: 7px;
	--border-top: 1px solid rgba(0, 0, 0, .05);
	--border-bottom: 1px solid rgba(0, 0, 0, .05);
	--border-left: 1px solid rgba(0, 0, 0, .05);
	--border-right: 1px solid rgba(0, 0, 0, .05);
	--border: 1px solid rgba(0, 0, 0, .05);
	--light_bg: #F9F9F9;
	--black_bg: #111111;
	--inactive_link: #999;
	--bg_success: #EEFCF3;
	--bg_danger: #FFEEEB;
	--bg_warning: #FFF5EB;
	--body_bg: #f7f8ff;
	--brand_color: #97CA3D;
	--secondary_color: #073BD9;
}

.mobile {
	display: none;
}

.skeleton-loader {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    /*background: #f7f7f7;*/
    border-radius: 12px;
}

.skeleton {
    background: #ddd;
    border-radius: 8px;
    animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-image {
    width: 100%;
    height: 250px;
}

.skeleton-text {
    width: 80%;
    height: 16px;
}

.skeleton-text.small {
    width: 60%;
    height: 14px;
}

.skeleton-button {
    width: 50%;
    height: 32px;
    border-radius: 6px;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}


.success_page {
	width: 100%;
	/*height: 100vh;*/
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.success_page.hero {
    /*padding: 15px;*/
}

.success_page .success_box {
	display: flex;
	flex-direction: column;
	gap: 30px;
	background-color: var(--white_bg);
  padding: 30px;
  box-shadow: 1px 3px 30px rgba(0, 0, 0, .06);
  border-radius: 1.5em;
  margin-top: 5em;
}

.success_page .success_box h2 {
	font-weight: 900;
	font-size: 1.5em;
	margin-bottom: 0;
}

.success_page .success_box i {
	font-size: 2em;
	margin-bottom: 20px;
	color: var(--brand_color);
}


.success_page .success_box .pay_info .item-box {
	display: flex;
	flex-direction: row;
	padding: 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.success_page .success_box .pay_info .item-box:last-child {
	border-bottom: none;
}

.success_page .success_box .pay_info .item-box .item-body {
	margin-left: auto;
}

.success_page .success_box p {
	font-weight: 500;
	font-size: .85em;
	margin-bottom: 0;
}

.success_page .success_box .home_btn a {
	background-color: var(--brand_color);
	color: #fff;
}

.nav_wrapper {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99;
	width: 100%;
	/* border-bottom: 1px solid rgba(0, 0, 0, .1); */
	box-shadow: 0 1px 300px #0003;
}

.nav_wrapper .navbar {
	padding: 20px 20px;
	/* backdrop-filter: blur(5px); */
	background-color: var(--white_bg);
	/* box-shadow: 0 0 3px 1px rgba(114, 135, 156, .15); */
}

.nav_wrapper .navbar a.navbar-brand {
	font-weight: 600;
	color: var(--black_bg);
	font-size: 1.5em;
}

.nav_wrapper .navbar .nav-item {
	margin: 0 1em;
}

.nav_wrapper .navbar .nav-item:last-child {
	margin-right: 0;
}

.nav_wrapper .navbar .nav-link {
	font-weight: 600;
	color: #3d3d3d;
	font-size: 11px;
	text-transform: uppercase;
}

.nav_wrapper .navbar .nav-link i {
	font-size: .7em;
}

.nav_wrapper .navbar ul.dropdown-menu {
	border: 1px solid rgba(231, 231, 233, 0.5);
	border-radius: 8px;
	box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, 0.1);
}

.nav_wrapper .navbar ul.dropdown-menu li {
	padding: 5px;
}

.nav-item.dropdown:hover .dropdown-menu {
	display: block;
	margin-top: 0;
}

.dropdown-menu {
	display: none;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.nav-item.dropdown:hover .dropdown-menu {
	opacity: 1;
}

.nav-link {
	transition: color 0.3s ease;
}

.nav_wrapper .navbar .nav-link.action {
	background-color: transparent;
	padding: 10px 25px;
	font-weight: 600;
	color: #78e183;
	font-size: 11px;
	border: 1px solid #78e183;
	border-radius: 2em
}

.nav_wrapper .navbar .nav-link.action.action-1 {
	background-color: #78e183;
	color: var(--white_bg);
}

.hero .pattern-box-1 {
	position: absolute;
	top: 40%;
	left: 30%;
}

.hero .pattern-box-2 {
	position: absolute;
	top: 20%;
	right: 20%;
}

.hero {
	padding: 100px 15px;
	background-image: linear-gradient(to left, rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url('https://img.freepik.com/free-vector/gradient-smooth-background_23-2148973055.jpg?t=st=1736032887~exp=1736036487~hmac=62c5a480325c47339c977e7b8271b09b7e222c6be12f553155551b44afd40840&w=2000');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.hero .text-data-box {
	margin-top: 10em;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
}

.hero .text-data-box h1{
	margin-bottom: 0;
	font-size: 4.5em;
	font-weight:700;
	letter-spacing: -1.5px;
	color: #111;
}

.hero .text-data-box span{
	color: #78e183;
}

.hero .text-data-box p{
	margin-bottom: 0;
	font-size: 16px;
	font-weight:400;
	color: #3d3d3d;
	padding: 0 150px;
	line-height: 30px;
}

.hero .text-data-box .d-flex{
	gap: 20px;
}

.hero .text-data-box .d-flex a.action-btn{
	background-color: #78e183;
	padding: 10px 25px;
	font-weight: 600;
	color: var(--white_bg);
	font-size: 16px;
	border: 1px solid #78e183;
	border-radius: 2em;
	text-decoration: none;
}


.hero .text-data-box .d-flex a.data-action{
	background-color: transparent;
	padding: 10px 25px;
	font-weight: 400;
	color: #78e183;
	font-size: 16px;
	border: 1px solid #78e183;
	border-radius: 2em;
	text-decoration: none;
}

.hero .img-data-box {
	width: 100%;
	height: 600px;
	margin-top: 50px;
}

.hero .img-data-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1.5em;
}

.metric-data {
	padding: 100px 15px;
	position: relative;
	background-color: var(--white_bg);
}

.metric-data  .pattern-box-1{
	position: absolute;
	top: 20%;
	right: 25%;
}

.metric-data .data-box {
	width: 100%;
	height: 350px;
	border-radius: 1em;
	background-color: #DBF4CD;
	display: flex;
	flex-direction: column;
	padding: 30px;
	justify-content: space-between;
	position: relative;
}

.metric-data .data-box .head-group .icon-box {
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #78e183;
	border-radius: 50%;
	margin-bottom: 15px;
}

.metric-data .data-box .head-group .icon-box i{
	color: var(--white_bg);
	font-size: 20px;
}


.metric-data .data-box .head-group h2 {
	margin-bottom: 0;
	font-size: 3em;
	font-weight:800;
	letter-spacing: -1.5px;
	color: var(--black_bg);
}

.metric-data .data-box .head-group span {
	text-transform: uppercase;
	font-size: .8em;
	font-weight:400;
	color: var(--black_bg);
}

.metric-data .data-box .bottom-group p {
	font-size: 16px;
	font-weight:400;
	color: var(--black_bg);
	margin-bottom: 0;
}

.metric-data .data-box .pattern-box-1 {
	position: absolute;
	right: 0;
	bottom: 0;
	top: auto;
}

.heading-data {
	margin-bottom: 100px;
	display: flex;
	flex-direction: column;
	/* width: 100%; */
	align-items: center;
	justify-content: center;
	gap: 30px;
	/* border-bottom: 1px solid #555;
	padding-bottom: 30px; */
	/* border-bottom: 1px solid var(--brand_color); */
}

.heading-data .top-value {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border: 1px solid rgba(0, 0, 0, .099);
	border-radius: 30px;
	gap: 10px;
}

.heading-data .top-value .circle{
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #78e183;
	display: block;
}


.heading-data .top-value .text span{
	font-size: 13px;
	color: #888;
}

.heading-data .heading-value h2 {
	color: var(--black_bg);
	font-size: 4em;
	font-weight: 700;
	margin-bottom: 0;
	text-align: center;
	letter-spacing: -1.5px;
}

.heading-data .subtext-value p {
	color: #3d3d3d;
	font-size: 16px;
	line-height: 30px;
	font-weight: 400;
	margin-bottom: 0;
	text-align: center;
	padding: 0 100px;
}

.focus-area {
	padding: 100px 15px;
	background-color: rgb(247, 251, 250);
}

.focus-area .data-box {
	background-color: #fff;
  border-radius: 1em;
  box-shadow: 1px 3px 30px rgba(0, 0, 0, .06);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  width: 100%;
  height: 400px;
}

.focus-area .data-box .img-box {
	width: 100%;
	height: 250px;
}

.focus-area .data-box .text-box {
	width: 100%;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px;
	gap: 10px;
}

.focus-area .data-box .text-box h2{
	margin-bottom: 0;
	font-size: 1.2em;
	font-weight: 600;
	color: var(--black_bg);
}

.focus-area .data-box .text-box p{
	margin-bottom: 0;
	font-size: 15px;
	font-weight: 400;
	color: #3d3d3d;
}

.focus-area .data-box .img-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.our-programs {
	padding: 100px 15px;
}

.our-programs  .swiper-container {
	padding: 100px 10px;
	/* padding-bottom: 0; */
  }

 .our-programs .swiper-container .swiper-button-next {
	background: url('data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTIuMDA3IDJjLTUuNTE4IDAtOS45OTggNC40OC05Ljk5OCA5Ljk5OCAwIDUuNTE3IDQuNDggOS45OTcgOS45OTggOS45OTdzOS45OTgtNC40OCA5Ljk5OC05Ljk5N2MwLTUuNTE4LTQuNDgtOS45OTgtOS45OTgtOS45OTh6bTEuNTIzIDYuMjFzMS41MDIgMS41MDUgMy4yNTUgMy4yNTljLjE0Ny4xNDcuMjIuMzM5LjIyLjUzMXMtLjA3My4zODMtLjIyLjUzYy0xLjc1MyAxLjc1NC0zLjI1NCAzLjI1OC0zLjI1NCAzLjI1OC0uMTQ1LjE0NS0uMzM1LjIxNy0uNTI2LjIxNy0uMTkyLS4wMDEtLjM4NC0uMDc0LS41MzEtLjIyMS0uMjkyLS4yOTMtLjI5NC0uNzY2LS4wMDMtMS4wNTdsMS45NzctMS45NzdoLTYuNjkzYy0uNDE0IDAtLjc1LS4zMzYtLjc1LS43NXMuMzM2LS43NS43NS0uNzVoNi42OTNsLTEuOTc4LTEuOTc5Yy0uMjktLjI4OS0uMjg3LS43NjIuMDA2LTEuMDU0LjE0Ny0uMTQ3LjMzOS0uMjIxLjUzLS4yMjIuMTkgMCAuMzguMDcxLjUyNC4yMTV6IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=') !important;
	  background-repeat: repeat;
	background-repeat: no-repeat !important;
	width: 50px !important;
	position: absolute;
	top: 20px;
	bottom: auto;
	z-index: 10;
	cursor: pointer;
	left: auto;
	right: 0px;
	margin-top: 0;
  }

 .our-programs .swiper-container .swiper-button-prev {
	background: url('data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTIuMDEyIDJjNS41MTggMCA5Ljk5NyA0LjQ4IDkuOTk3IDkuOTk4IDAgNS41MTctNC40NzkgOS45OTctOS45OTcgOS45OTdzLTkuOTk4LTQuNDgtOS45OTgtOS45OTdjMC01LjUxOCA0LjQ4LTkuOTk4IDkuOTk4LTkuOTk4em0tMS41MjMgNi4yMXMtMS41MDIgMS41MDUtMy4yNTUgMy4yNTljLS4xNDcuMTQ3LS4yMi4zMzktLjIyLjUzMXMuMDczLjM4My4yMi41M2MxLjc1MyAxLjc1NCAzLjI1NCAzLjI1OCAzLjI1NCAzLjI1OC4xNDUuMTQ1LjMzNS4yMTcuNTI2LjIxNy4xOTItLjAwMS4zODQtLjA3NC41MzEtLjIyMS4yOTItLjI5My4yOTQtLjc2Ni4wMDMtMS4wNTdsLTEuOTc3LTEuOTc3aDYuNjkzYy40MTQgMCAuNzUtLjMzNi43NS0uNzVzLS4zMzYtLjc1LS43NS0uNzVoLTYuNjkzbDEuOTc4LTEuOTc5Yy4yOS0uMjg5LjI4Ny0uNzYyLS4wMDYtMS4wNTQtLjE0Ny0uMTQ3LS4zMzktLjIyMS0uNTMtLjIyMi0uMTkgMC0uMzguMDcxLS41MjQuMjE1eiIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+') !important;
	  background-repeat: repeat;
	background-repeat: no-repeat !important;
	width: 50px !important;
	position: absolute;
	top: 20px;
	bottom: auto;
	z-index: 10;
	cursor: pointer;
	right: 50px;
	left: auto;
	margin-top: 0;
  }

 .our-programs .swiper-slide {
	width: 400px;
	height: auto;
	max-height: 450px;
	/* box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25); */
	/* border: var(--border); */
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	/* gap: 25px; */
	/* border-radius: .5em; */
	margin-right: 20px;
  }
  
  
 .our-programs .swiper-slide .item-box {
	width: 100%;
	height: auto;
  }

 .our-programs .swiper-slide .item-box a {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-decoration: none;
	color: #111111;
  }

 .our-programs .swiper-slide .item-box a .img-box {
	width: 100%;
	height: 300px;
	overflow: hidden;
	border-radius: 1em;
  }

  .our-programs .swiper-slide .item-box a .img-box img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1em;
  }


  .our-programs .item-box a .trailing  .box-2 span {
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 300;
  }

  .our-programs .item-box a .text-box h2 {
	font-size: 1em;
	font-weight: 600;
	margin-bottom: 0;
  }
  

  .our-programs .item-box a .category-box  {
	background-color: #78e183;
	border-radius: 5px;
	width: 200px;
	padding: 10px;
  }

  .our-programs .item-box a .category-box h3 {
	font-size: .7em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 0;
  }

  .faq {
	padding: 100px 15px;
  }


  .faq .card {
	border-radius:1em !important;
	padding: 15px 20px;
	border: 1px solid #adadad !important;
	/* box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .45); */
	transition: all .5s ease-in-out;
	  transition-property: all;
	  transition-duration: 0.5s;
	  transition-timing-function: ease-in-out;
	margin-bottom: 15px;
  }

  .faq .card .card-header {
	padding: 0;
  }

  .faq .card-header {
	background: transparent;
	border-bottom: none;
  }

  .faq .card .card-header button {
	text-decoration: none;
	color: var(--black_bg);
	font-size: .5em;
	font-weight: 600;
	display: flex;
	align-items: center;
  }

  .faq .card .card-header .card_header_icon {
	transition: all .3s ease-in-out;
	order: 1;
	margin-left: auto;
  }

  .faq .card .card-header .card_header_icon .bi-plus {
	font-size: 35px;
	transition: all .3s ease-in-out;
  }

  .rotate {
	transform: rotate(45deg);
  }

  .faq .card .card-body {
	font-weight: 400;
	color: var(--black_bg);
	font-size:.9em;
	margin: 5px 10px;
	border-left: 3px solid #F6F8FA;
	padding-top: 0;
	padding-bottom: 0;
	line-height: 30px;
  }


  .data-interlude {
	padding: 100px 15px;
  }

  .data-interlude .cta {
	background-color: #052A50;
	background: url('../assets/images/pattern.svg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 100px 0;
	border-radius: 1.5em;
  }

  .heading-data-fff {
	display: flex;
	flex-direction: column;
	/* width: 100%; */
	align-items: center;
	justify-content: center;
	gap: 30px;
	/* border-bottom: 1px solid #555;
	padding-bottom: 30px; */
	/* border-bottom: 1px solid var(--brand_color); */
}

.heading-data-fff .top-value {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 7px 10px;
	border: 1px solid #AACCEF;
	border-radius: 30px;
	gap: 10px;
}

.heading-data-fff .top-value .circle{
	content: "";
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: #AACCEF;
	display: block;
}


.heading-data-fff .top-value .text span{
	font-size: 15px;
	color: #AACCEF;
}

.heading-data-fff .heading-value h2 {
	color:var(--white_bg);
	font-size: 4em;
	font-weight: 700;
	margin-bottom: 0;
	text-align: center;
	letter-spacing: -1.5px;
}

.heading-data-fff .subtext-value p {
	color: #cdcdcd;
	font-size: 16px;
	font-weight: 400;
	line-height: 30px;
	margin-bottom: 0;
	text-align: center;
	padding: 0 100px;
}


.heading-data-fff .cta-btn {
	display: flex;
	gap: 20px;
}

.heading-data-fff .cta-btn .vol-btn {
	width: 200px;
	padding: 10px 10px;
	background-color:transparent;
	border-radius: 2em;
	text-decoration: none;
	color: #AACCEF;
	border: 1px solid #AACCEF;
	font-weight: 500;
}


.heading-data-fff .cta-btn .donate-btn {
	width: 200px;
	padding: 10px 10px;
	background-color: var(--white_bg);
	border: 1px solid var(--white_bg);
		border-radius: 2em;
	text-decoration: none;
	color: #052A50;
	font-weight: 500;
}

.data-footer {
	padding: 100px 15px;
	padding-bottom: 0;
  background-color: rgb(247, 251, 250);
  position: relative;
}

.data-footer .pattern-box-1 {
	position: absolute;
	right: 0;
	bottom: 0;
	opacity: .5;
}

.data-footer .logo-img {
	padding-right:30px;
}

.data-footer .logo-img p{
	font-size: 15px;
	font-weight: 400;
	color: #3d3d3d;
	line-height: 25px;
}

.data-footer .text-heading h3 {
	font-size: 15px;
	font-weight: 600;
}

.data-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.data-footer ul li a{
	text-decoration: none;
	color: #3d3d3d;
	font-size: 13px;
}

.data-footer ul li {
	padding: 7px 0;
}

.data-footer .bottom-row {
	border-top: 1px solid rgba(0, 0, 0, .15);
	padding: 50px;
	margin-top: 15px;
}

.data-footer .bottom-row p{
	margin-bottom: 0;
	color: #3d3d3d;
	font-size: 13px;
}

.value {
	padding: 100px 15px;
}

.value .data-box{
	background: url('../assets/images/value-card.svg');
    background-position-x: 0%;
    background-position-y: 0%;
    background-repeat: repeat;
    background-size: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 350px;
  border-radius: 1em;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.value .row {
	row-gap: 30px;
}

.value .data-box h2 {
	color: var(--white_bg);
	font-weight: 700;
	font-size: 3em;
	margin-bottom: 0;
}

.mission {
	padding: 100px 15px;
}

.mission .data-box {
	background-color: rgb(247, 251, 250);
	padding: 30px;
	border-radius: 1.5em;
}

.mission .data-box .img-box {
	width: 100%;
	height: 400px;
	border-radius: 1.5em;
}

.mission .data-box .img-box img{
	width: 100%;
	height: 100%;
	border-radius: 1.5em;
	object-fit: cover;
}

.mission .data-box .text-box {
	width: 100%;
	height: 400px;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	gap: 40px;
	padding: 30px;
}

.mission .data-box .text-box .heading-data {
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	align-items: start;
	justify-content: start;
	gap: 10px;
}

.mission .data-box .text-box .heading-data .subtext-value p {
	color: #3d3d3d;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 0;
	text-align: left;
	padding: 0;
}


  .our-programs.programs-data .swiper-slide {
	width: 100%;
	max-height: unset;
	margin-right: 0;
	padding: 0;
	display: block;
  }

  .our-programs.programs-data .row{
	row-gap: 50px;
  }


.contact-box {
	padding: 100px 15px;
}

.contact-box .text-box {
	padding: 0 30px;
}

.contact-box .text-box .box {
	margin-bottom: 30px;
	margin-top: 20px;
  }

  .contact-box .text-box .box span {
	font-size: 12px;
	color: #777;
	text-transform: uppercase;
  }

  .contact-box .text-box .box p {
	font-size: 14px;
	color: #333;
	margin-bottom: 0;
	margin-top: 10px;
  }

  .contact-box .text-box .box p a {
	font-size: 14px;
	color: #333;
	text-decoration: none;
  }

  .contact-box .text-box .box.socials a {
	text-decoration: none;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--black_bg);
	border-radius: 50%;
  }

  .contact-box .text-box .box.socials a i {
	color: #fff;
	position: absolute;
	font-size: 12px;
  }

  .contact-box .text-box .box.socials .social-icons {
	display: flex;
	flex-direction: row;
	align-items: start;
	gap: 20px;
	margin-top: 10px;
  }

  .contact-box .form-box h2 {
	font-size: 3em;
	font-weight: 700;
	color: #333;
  }

  .contact-box form {
	margin-top: 30px;
  }

  .contact-box  .form-box .form-group {
	margin-bottom: 20px;
  }

  .contact-box  .form-box input {
	font-size: 13px;
	color: #333;
	background: transparent;
	height: calc(3.5em + .75rem + 2px);
	border-radius: 1em;
  }

  .contact-box  .form-box textarea {
	font-size: 13px;
	color: #333;
	background: transparent;
	border-radius: 1em;
  }

  .contact-box .form-box button[type="submit"] {
	border: 1px solid var(--black_bg);
	border-radius: 1em;
	transition: all .5s ease-in-out;
	background: var(--black_bg);
	color: #fff;;
	font-size: 13px;
	height: calc(3.5em + .75rem + 2px);
  }

  .contact-box  .form-box label {
	font-size: 11px;
	color: #555;
	font-weight: 400;
	text-transform: uppercase;
  }

  .bank-details {
	padding: 100px 15px;
  }

  .bank-details .item-box {
	background-color: rgb(247, 251, 250);
  padding: 30px;
  border-radius: 1.5em;
  }

  .bank-details .item-box .data-box {
	width: 100%;
	height: 350px;
	border-radius: 1em;
	background-color: var(--white_bg);
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px;
	justify-content: center;
  box-shadow: 1px 3px 30px rgba(0, 0, 0, .06);
  }

  .bank-details .item-box .data-box .bottom-group p {
	font-size: 14px;
	font-weight: 400;
	color: var(--black_bg);
  }
  
  
  .bank-details .item-box .data-box .head-group  {
		display: flex;
	flex-direction: row;
	justify-content: space-between;
  }
  
   .bank-details .item-box .data-box .head-group  a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  border: 1px solid var(--black_bg);
  border-radius: 50%;
  color: var(--black_bg);
  text-decoration: none;
}

  .bank-details h2.h2 {
	font-size: 2.5em;
	margin-bottom: 30px;
	font-weight: 800;
  }


  .join {
	margin-top: 5em;
	padding: 100px 15px;
  }

  .join .text-box {
	background-color: rgb(247, 251, 250);
	padding: 30px;
	border-radius: 1.5em;
	display: flex;
	flex-direction: column;
	gap: 30px;
  }


  .join .text-box h2{
	font-size: 2.5em;
	margin-bottom: 0;	
	font-weight: 800;
  }

  .join .text-box p {
	margin-bottom: 0;
	font-size: 16px;
	font-weight: 400;
	color: #3d3d3d;
	line-height: 30px;
  }

  .join .text-box .img-box {
	width: 100%;
	height: 350px;
	border-radius: 30px;
	background-color: var(--white_bg);
  }

  .join .text-box .img-box img{
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

  .join  .form-box .form-group {
	margin-bottom: 20px;
  }

  .join  .form-box input {
	font-size: 13px;
	color: #333;
	background: transparent;
	height: calc(3.5em + .75rem + 2px);
	border-radius: 1em;
  }

  .join  .form-box select {
	font-size: 13px;
	color: #333;
	height: calc(3.5em + .75rem + 2px);
	border-radius: 1em;
  }

  .join  .form-box label {
	font-size: 11px;
	color: #555;
	font-weight: 400;
	text-transform: uppercase;
  }

  .join .form-box button[type="submit"] {
	border: 1px solid var(--black_bg);
	border-radius: 1em;
	transition: all .5s ease-in-out;
	background: var(--black_bg);
	color: #fff;;
	font-size: 13px;
	height: calc(3.5em + .75rem + 2px);
  }

  .volunteer {
	margin-top: 50px;
	background-color: var(--white_bg);
	padding: 30px;
	box-shadow: 1px 3px 30px rgba(0, 0, 0, .06);
	border-radius: 1.5em;
  }

  .volunteer.form-box .form-group {
	margin-bottom: 20px;
  }

  .volunteer.form-box input {
	font-size: 13px;
	color: #333;
	background: transparent;
	height: calc(3.5em + .75rem + 2px);
	border-radius: 1em;
  }

  .volunteer.form-box select {
	font-size: 13px;
	color: #333;
	height: calc(3.5em + .75rem + 2px);
	border-radius: 1em;
  }

  .volunteer.form-box label {
	font-size: 11px;
	color: #555;
	font-weight: 400;
	text-transform: uppercase;
  }

  .volunteer.form-box button[type="submit"] {
	border: 1px solid var(--black_bg);
	border-radius: 1em;
	transition: all .5s ease-in-out;
	background: var(--black_bg);
	color: #fff;;
	font-size: 13px;
	height: calc(3.5em + .75rem + 2px);
  }
  
  .upload-box {
    width: 100%;
    height: 200px;
    background-color: rgb(247, 251, 250);
    border: 1px solid #78e183;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    transition: 0.3s;
}

.upload-box.highlight {
    border: 2px dashed #78e183;
    background-color: #97CA3D;
}

.upload-content {
    text-align: center;
}

.upload-icon {
    font-size: 40px;
    color: var(--black_bg);
}

.browse-btn {
    display: inline-block;
    padding: 8px 20px;
    margin-top: 10px;
    font-size: 16px;
    background-color: #78e183;
    color: #78e183;
    font-weight: bold;
    border: 1px solid #78e183;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.browse-btn:hover {
    background-color: #78e183;
}

.upload-submit {
    display: none;
    background-color: #78e183;
    color: white;
    font-weight: bold;
    border: none;
    padding: 10px 0;
    margin-top: 10px;
}

.upload-submit:hover {
    background-color: #6f2a9d;
}

#file-name {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}



.form-data-box {
	display: flex;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .05);
	padding: 7px 10px;
	border-radius: 3em;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
	background-color: #f2f2f2;
	gap: 10px;
}

.form-data-box input {
	outline: none;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 3em;
	padding: 10px 20px;
	width: 100%;
	background-color: #424242;
	color: #EEFCF3;
}

.form-data-box button {
	width: 40px;
	height: 40px;
	background-color: var(--brand_color);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.article-body {
	margin-top: 120px;
}

.article-body .row.justify-content-center {
    row-gap: 30px;
}

.article-body .text-box {
    margin-top: 30px;
}

.article-body .post-img {
	width: 100%;
	height: 300px;
	padding: 0;
}

.article-body .post-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1em;
}

.article-body .post-body {
	margin-top: 40px;
}

.article-body .post-body .social-icons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 30px;
	margin-top: 30px;
}

.article-body .post-body .social-icons a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 35px;
	height: 35px;
	border: 1px solid var(--black_bg);
	border-radius: 50%;
	color: var(--black_bg);
	text-decoration: none;
}

.article-body .post-body .data-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.article-body .post-body .data-head span{
    font-size: .9em;
}


.article-body .post-body .data-profile {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: start;
	gap: 10px;
	margin: 20px 0;
}

.article-body .post-body .data-profile .img-box {
	width: 35px;
	height: 35px;
	border-radius: 50%;
}

.article-body .post-body .data-profile .img-box img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}

.article-body .post-body .data-profile .text-box h4 {
	font-size: .9em;
	font-weight: 600;
	margin-bottom: 0;
	line-height: 1;
}

.article-body .post-body .data-profile .text-box span {
	font-size: .8em;
	font-weight: 400;
	margin-bottom: 0;
	color: var(--inactive_link);
}

.article-body .post-body h2 {
	font-size: 2.5em;
	font-weight: 700;
	margin-top: 30px;
	color: var(--black_bg);
}

.article-body .post-body p {
	font-size: 1em;
	font-weight: 400;
	color: var(--black_bg);
	line-height: 35px;
}

.article-body .post-body ul li {
	font-size: 1.2em;
}

.article-body .post-body img {
	width: 100%;
	height: 60vh;
	object-fit: cover;
	border-radius: 1em;
	margin: 20px 0;
}

.article-body .post-body ol li {
	font-size: 1.2em;
}

.article-body .post-body .comment-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: var(--border-bottom);
	border-top: var(--border-top);
	padding: 20px 0;
}

.article-body .post-body .comment-box .box-1 {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 30px;
}

.article-body .post-body .comment-box .box-1 span.num {
	font-weight: 600;
	font-size: 1.5em;
}

.article-body .post-body .comment-box .box-2 span.num {
	font-weight: 600;
	font-size: 1.5em;
}

.right_action_box {
	width: 35%;
	height: 100vh;
	overflow: auto;
	overflow-x: hidden;
	scrollbar-color: rgba(0, 0, 0, .1) #f2f2f2;
	scrollbar-width: thin;
	scroll-behavior: smooth;
	position: fixed;
	background: #fff;
	z-index: 9999;
	top: 0;
	right: -100%;
	transition: all .6s ease-in-out;
	box-shadow: 0 -10px 30px 5px rgba(0, 0, 0, .2);
}

.right_action_box::-webkit-scrollbar {
	width: 6px;
	background-color: #f2f2f2;
}

.right_action_box::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .1);
	border-radius: 50px;
}

.right_action_box::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #f2f2f2;
	border-radius: 50px;
}

.right_action_box.active {
	right: 0 !important;
	transition: all .6s ease-in-out;
}

.right_action_box .close_btn {
	cursor: pointer;
}

.right_action_box .modal_header {
	padding: 15px 15px;
	border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.right_action_box .modal_footer {
	padding: 10px 15px;
	border-top: 1px solid rgba(0, 0, 0, .1);
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: #fff;
}

.right_action_box .modal_body {
	padding: 10px 15px;
	/* border-top: 1px solid rgba(0,0,0,.1); */
	position: absolute;
	left: 0;
	top: 70px;
	width: 100%;
	height: 80vh;
	overflow: auto;
	overflow-x: hidden;
	scrollbar-color: rgba(0, 0, 0, .1) #f2f2f2;
	scrollbar-width: thin;
	scroll-behavior: smooth;
	/* border: 1px solid #333; */
}

.right_action_box .modal_body::-webkit-scrollbar {
	width: 6px;
	background-color: #f2f2f2;
}

.right_action_box .modal_body::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, .1);
	border-radius: 50px;
}

.right_action_box .modal_body::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
	background-color: #f2f2f2;
	border-radius: 50px;
}

.right_action_box .modal_header h2 {
	font-weight: 600;

	font-size: 1.2em;
	margin-bottom: 0;
}

.right_action_box .modal_header i {
	font-size: 1.5em;
}

.right_action_box .modal_footer .main_action_btn {

	color: #fff;
	font-size: 12px;
	border: 2px solid #78e183;
	background: #78e183;
}


.right_action_box .form_box {
	/* padding-bottom: 20px; */
	/* border-bottom: 1px solid rgba(0,0,0,.1); */
}

.right_action_box .item_response label {

	color: #555;
	font-size: 12px;
}

.right_action_box .item_response h2 {

	color: #111;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 0;
}

.right_action_box .item_response span {

	color: #aeaeae;
	font-size: 12px;
}

.right_action_box .item_response .para {
	margin-top: 20px;
}

.right_action_box .item_response .para p {

	color: #222;
	font-size: 13px;
	line-height: 20px;
	margin-bottom: .5rem;
}

.right_action_box .item_response ul li {

	color: #222;
	font-size: 13px;
	margin-bottom: 10px;
	/* line-height: 20px */
}

.right_action_box .item_response ol li {

	color: #222;
	font-size: 13px;
	margin-bottom: 10px;
	/* line-height: 20px */
}

.right_action_box .item_response a {

	color: #222;
	font-size: 13px;
	line-height: 20px
}

.right_action_box .item_response i {

	color: #222;
	font-size: 13px;
	line-height: 20px
}

.right_action_box .item_response {
	padding: 15px 15px;
	background: var(--white_bg);
	box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25);
	border: var(--border);
	margin-bottom: 20px;
	border-radius: .6rem;
}

.right_action_box .reply_panel {
	display: none;
	margin-top: 15px;
	transition: all .5s ease-in-out !important;
	padding: 15px 15px;
	background: var(--white_bg);
	box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25);
	border: var(--border);
	border-radius: .6rem;
}

.right_action_box .reply_panel input {
	border: var(--border);
	border-radius: .6rem;
	padding: 20px 20px;

	box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25);
	font-weight: 300;
	color: var(--black_bg);
}

.right_action_box .reply_panel input::placeholder {

	font-size: 12px;
	color: #666;
}

.right_action_box .reply_panel.reply_panel_active {
	display: block;
	transition: all .5s ease-in-out;
}

.right_action_box .rep_btn {

	color: #222;
	font-size: 14px;
	margin-bottom: 0;
	cursor: pointer;
	transition: all .5s ease-in-out;
}

.right_action_box .rep_btn i {
	font-size: 10px;
}

/*.right_action_box .rep_btn:hover {*/
/*	text-decoration: underline;*/
/*}*/

.right_action_box .form_box label {
	font-family: 'Space Grotesk', sans-serif;
	color: #555;
	font-size: 11px;
	font-weight: 400;
}

.right_action_box .form_box input {
	border: var(--border);
	border-radius: .6rem;
	padding: 20px 20px;

	box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25);
	font-weight: 300;
	color: var(--black_bg);
}

.right_action_box .form_box input::placeholder {

	font-size: 12px;
	color: #666;
}

.right_action_box .repond_active {

	color: #fff;
	font-size: 14px;
	border: 2px solid var(--black_bg);
	background: var(--black_bg);
	border-radius: .6rem;
}

.right_action_box .show_reply_toggle {
	display: none;
}

.right_action_box .show_reply_toggle.show_reply_toggle_active {
	display: block;
}

.right_action_box .reply_panel textarea {

	font-size: 12px;
	border-radius: 0;
}

.right_action_box .no_comment {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	margin-top: 30px;
}

.right_action_box .no_reply {
	font-size: 12px;
	font-weight: 600;
}

.reply_item_response {
	border-left: var(--border);
	margin-bottom: 0px;
	padding: 15px 15px;
	background: var(--white_bg);
	box-shadow: 0 1.5px 0 0 rgba(114, 135, 156, .25);
	border: var(--border);
	margin-top: 15px;
	border-radius: .6rem;
	transition: all .5s ease-in-out !important;
}

.reply_item_response h3 {
	color: #222;
	font-size: 13px;
	margin-bottom: 0;
}

.reply_item_response p {
	color: #444;
	font-size: 13px;
	margin-top: 10px;
	margin-bottom: 0;
}

.right_action_box .alert p {
	font-size: 12px;
}

.fixed_bg {
	width: 100%;
	height: 100%;
	position: fixed;
	background: rgba(0, 0, 0, .4);
	z-index: 999;
	display: none;
	top: 0;
	left: 0;
}

.alert {
	display: none;
	box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, .15);
}

.alert p {
	margin-bottom: 0;
	font-size: 13px;
	/*text-transform: capitalize;*/
}

.alert-container {
	position: fixed;
	top: 20%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999999999;
}


/*******Alert*******/
.overlay {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999999999;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, .5);
	display: none;
}

.alert_body {
	position: fixed;
	bottom: 10%;
	left: -100%;
	transform: translate(0, 0);
	z-index: 9999999999;
	width: 20%;
	height: auto;
	background: #fff;
	transition: all .5s ease-in-out;
	border-radius: 15px;
	padding: 50px 20px;
	text-align: center;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.alert_body.active {
	left: 5%;
}


.alert_body .close-modal {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: lightgray;
    color: #000;
    cursor:pointer;
}

.alert_body .close-modal i{
   font-size: 13px;
    color: #000;
}

.alert_body .close_alert {
	background: var(--success);
	color: #fff;
	font-size: 12px;
}

.alert_body .back_btn {
	background: var(--success);
	color: #fff;
	font-size: 12px;
	margin: 0 5px;
}

.alert_body .close_alert_inactive {
	background: #fff;
	color: var(--success);
	font-size: 12px;
	border: 1px solid var(--success);
	margin: 0 5px;
}

.alert_body .para p {
	color: #000;
	font-size: 13px;
}

.alert_body .icon_box.success i {
	color: var(--success);
	font-size: 30px;
}

.alert_body .icon_box.danger i {
	color: var(--danger);
	font-size: 30px;
}

.alert_body .icon_box {
	margin-bottom: 10px;
}


.loader {
	width: 20px;
	height: 20px;
	border: 4px solid #FFF;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}

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


@media screen and (max-width:567px) {
	.right_action_box {
		width: 100% !important;
		height: 90vh !important;
		top: auto;
		right: 0;
		bottom: -100%;
		box-shadow: 0 -10px 30px 5px rgba(0, 0, 0, .2);
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	.right_action_box.active {
		bottom: 0 !important;
		transition: all .6s ease-in-out;
	}

	.right_action_box .modal_header h2 {
		font-size: 1em;
	}

	.right_action_box .item_response h2 {
		font-size: 14px;
	}

	.right_action_box .item_response .para p {
		font-size: 12px;
		line-height: 23px;
	}

	.reply_item_response {
		padding: 10px 10px;
		margin-left: 0;
		margin-bottom: 0;
	}

	.reply_item_response p {
		font-size: 12px;
		margin-top: 5px;
	}

	.right_action_box .reply_panel {
		padding: 0px 10px;
		margin-left: 0;
		margin-top: 10px;
	}

	.right_action_box .item_response .para {
		margin-top: 10px;
	}

	.right_action_box .rep_btn {
		color: #222;
		font-size: 12px;
	}
}

.app-body {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	padding: 20px;
}

.app-body .img-box {
	width: 100%;
	height: calc(100vh - 3vh);
}

.app-body .img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 1em;
}

.app-body .form-box {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 20px;
	gap: 30px;
}

.app-body .form-box form label {
	font-size: .8em;
	margin-left: 10px;
}

.app-body .form-box form input {
	height: calc(2.5em + .75rem + 2px);
	color: var(--black_bg);
	border-radius: 1em;
	padding-left: 20px;
}

.app-body .form-box form input::placeholder {
	font-size: .9em;
}

.app-body .form-box form button {
	height: calc(2.5em + .75rem + 2px);
	color: var(--white_bg);
	background-color: var(--brand_color);
	border-radius: 1em;
}

.app-body .form-box .route a,
.app-body .form-box .form-group a {
	color: var(--brand_color);
	text-decoration: none;
	font-size: .9em;
}

.app-body .form-box .route span {
	color: var(--inactive_link);
	font-size: .9em;
}


.category-title {
	padding: 150px 15px;
	background-image: linear-gradient(to left, rgba(0,0,0,.8), rgba(0,0,0,.8)), url('https://img.freepik.com/free-photo/medium-shot-greek-goddess-posing-nature_23-2150261196.jpg?t=st=1737274729~exp=1737278329~hmac=841705c828fefe3d57e4777f62b415f8461422418af27a8dc3c9e7c92033d246&w=1380');
	background-position: center;
	background-size: cover;
	margin-top: 90px;
	text-align: center;
}

.category-title h2 {
	font-size: 5em;
	font-weight: 600;
	color: var(--white_bg);
	margin-bottom: 0;
}

.focus-area .beta-row {
	row-gap: 30px;
  }

@media screen and (max-width:1440px){
	.hero {
		padding: 70px 15px;
	}
	.hero .text-data-box h1 {
		font-size: 3.3em;
	  }

	  .hero .text-data-box p {
		font-size: 15px;
		padding: 0 50px;
		line-height: 30px;
	  }

	  .hero .img-data-box {
		width: 100%;
		height: 500px;
		margin-top: 50px;
	  }

	  .hero .pattern-box-1 {
		left: 20%;
	  }

	  .hero .text-data-box .d-flex a.action-btn {
		padding: 10px 20px;
		font-size: 14px;
	  }

	  .hero .text-data-box .d-flex a.data-action {
		padding: 10px 20px;
		font-size: 16px;
	  }

	  .heading-data .heading-value h2 {
		font-size: 3em;
		font-weight: 700;
	  }

	  .heading-data .subtext-value p {
		font-size: 16px;
		font-weight: 400;
		padding: 0 50px;
	  }

	  .heading-data {
		margin-bottom: 50px;
		gap: 15px;
	  }

	  .hero .text-data-box {
		margin-top: 7em;
	  }

	  .metric-data {
		padding: 70px 15px;
	  }

	  .metric-data .data-box .head-group .icon-box {
		width: 40px;
		height: 40px;
		margin-bottom: 10px;
	  }

	  .metric-data .data-box .head-group .icon-box i {
		font-size: 15px;
	  }

	  .metric-data .data-box .bottom-group p {
		font-size: 15px;
	}

	.metric-data .data-box .head-group h2 {
		font-size: 2.5em;
		/*font-weight: 700;*/
	  }

	  .metric-data .data-box {
		height: 300px;
		padding: 25px;
	  }

	  .focus-area {
		padding: 70px 15px;
		background-color: rgb(247, 251, 250);
	  }

	  .focus-area .data-box {
		height: 350px;
	  }

	  .focus-area .data-box .img-box {
		height: 200px;
	  }

	  .focus-area .data-box .text-box {
		padding: 20px;
	  }

	  .focus-area .data-box .text-box h2 {
		font-size: 1em;
		font-weight: 700;
	  }

	  .focus-area .data-box .text-box p {
		font-size: 12.5px;
	  }


	  .our-programs {
		padding: 70px 15px;
	  }

	  .our-programs .swiper-slide {
		width: 350px;
		height: auto;
	  }

	  .our-programs .swiper-slide .item-box a .img-box {
		width: 100%;
		height: 250px;
	  }

	  .our-programs .item-box a .text-box h2 {
		font-size: .9em;
	  }

	  .our-programs .swiper-container {
		padding: 70px 10px;
		padding-bottom: 0;
	  }

	  .our-programs .swiper-container .swiper-button-prev {
		top: 2.5px;
		right: 70px;
	  }

	  .our-programs .swiper-container .swiper-button-next {
		top: 2.5px;
	  }

	  .our-programs .item-box a .category-box {
		width: 180px;
		padding: 6px;
	  }

	  .our-programs .swiper-slide .item-box a {
		gap: 15px;
	  }
	  

	  .faq {
		padding: 70px 15px;
	  }

	  .faq .card .card-header button {
		font-size: .5em;
		font-weight: 600;
	  }
	  
	          .faq .card {
  border-radius: .8em !important;
  padding: 5px 20px;
}

	  .data-interlude {
		padding: 50px 15px;
	  }

	  .heading-data-fff .heading-value h2 {
		font-size: 3em;
	  }

	  .data-interlude .cta {
		padding: 50px 0;
		border-radius: 1.5em;
	  }

	  .heading-data-fff .subtext-value p {
		color: #cdcdcd;
		font-size: 16px;
		font-weight: 400;
		margin-bottom: 0;
		text-align: center;
		padding: 0 0px;
	  }

	  .data-footer .bottom-row {
		border-top: 1px solid rgba(0, 0, 0, .15);
		padding: 30px;
	  }

	  .data-footer .logo-img {
		padding-right: 15px;
	  }

	  .data-footer .logo-img p {
		font-size: 14px;
	  }

	  .data-footer ul li {
		padding: 4px 0;
	  }

	  .mission .data-box .text-box .heading-data .subtext-value p {
		font-size: 14px;
	  }
	  
	  .mission .data-box .text-box {
  gap: 20px;
  padding: 15px;
}

	  .mission .data-box {
		padding: 20px;
		border-radius: 1.5em;
	  }

	  .mission .data-box .img-box img {
		border-radius: 1.5em;
	  }

	  .mission {
		padding: 70px 15px;
	  }

	  .value {
		padding: 70px 15px;
	  }

	  .value .data-box {
		height: 300px;
	  }

	  .value .data-box h2 {
		font-size: 2em;
	  }

	  .focus-area.data-about .data-box .img-box {
		height: 250px;
	  }

	  .focus-area.data-about .data-box .text-box {
		height: 100px;
		padding: 20px;
		gap: 5px;
	  }

	  .upload-box {
		width: 100%;
		height: 150px;
	  }

	  .upload-box p {
		margin-bottom: 0;
	  }

	  #file-name {
		margin-top: 0;
		font-size: 13px;
	  }

	  .contact-box {
		padding: 50px 15px;
	  }

	  .join .text-box h2 {
		font-size: 2em;
	  }

	  .join .text-box {
		padding: 30px;
		border-radius: 1.5em;
		gap: 20px;
	  }

	  .join .text-box .img-box {
		width: 100%;
		height: 250px;
	  }


	  .join .text-box p {
		font-size: 15px;
		line-height: 30px;
	  }

	  .bank-details .item-box .data-box {
		width: 100%;
		height: 300px;
		padding: 20px;
	  }

	  .bank-details h2.h2 {
		font-size: 2em;
		margin-bottom: 20px;
		font-weight: 600;
	  }

	  .bank-details {
		padding: 50px 15px;
		padding-bottom: 0;
	  }

	  .join {
		padding-bottom: 0;
	  }

	  .volunteer.form-box input {
		height: calc(3em + .75rem + 2px);
	  }

	  .volunteer.form-box select {
		height: calc(3em + .75rem + 2px);
	  }

	  .volunteer.form-box button[type="submit"] {
		height: calc(3em + .75rem + 2px);
	  }

	  .join .form-box input {
		height: calc(3em + .75rem + 2px);
	  }

	  .join .form-box select {
		height: calc(3em + .75rem + 2px);
	  }

	.join .form-box button[type="submit"] {
	  height: calc(3em + .75rem + 2px);
	}

	.contact-box .form-box h2 {
		font-size: 2.5em;
	  }

	.contact-box .form-box input {
		height: calc(3em + .75rem + 2px);
	  }
	  
	  
	  .contact-box .form-box button[type="submit"] {
		height: calc(3em + .75rem + 2px);
	  }

	  .article-body .post-body h2 {
		font-size: 3em;
	  }
	  .article-body .post-body .comment-box .box-1 span.num {
		font-size: 1em;
	  }
	  .article-body .post-body .comment-box .box-2 p {
		font-size: 1em;
	  }


	 
	 
	  .article-body .post-body p {
		font-size: 1em;
	  }
	  
	  
	  	  .alert_body.active {
	width: 30%;
        }


}

@media screen and (max-width:1366px){
    .right_action_box {
  width: 50%;
}

	.hero .text-data-box h1 {
		font-size: 3em;
	  }

	  .hero .text-data-box {
		margin-top: 5em;
	  }

	  .hero .text-data-box p {
		padding: 0 30px;
	  }

	  .heading-data .heading-value h2 {
		font-size: 2.7em;
	  }

	  .heading-data .subtext-value p {
		font-size: 15px;
		font-weight: 400;
		padding: 0 30px;
	  }

	  .focus-area .data-box .text-box h2 {
		font-size: .9em;
		font-weight: 600;
	  }

	  .value .data-box {
		height: 250px;
	  }

	  .value .data-box h2 {
		font-size: 1.7em;
	  }

	  .focus-area.data-about .data-box {
		height: 300px;
	  }

	  .focus-area.data-about .data-box .img-box {
		height: 200px;
	  }

	  .focus-area .data-box .text-box p {
		font-size: 12px;
	  }

	  .article-body .post-body h2 {
		font-size: 2.5em;
	  }

	  .nav_wrapper .navbar .nav-link.action {
		padding: 7px 20px;
	  }
	  .alert_body.active {
	width: 30%;
        }
          .focus-area .data-box .text-box {
    padding: 14px;
  }
}

@media screen and (max-width:1280px){
	.hero .img-data-box {
		height: 450px;
	  }
	  .metric-data .data-box .bottom-group p {
		font-size: 13px;
	  }

	  .metric-data .data-box {
		height: 250px;
		padding: 20px;
	  }

	  .metric-data .data-box .head-group h2 {
		font-size: 2em;
	  }  

	  .faq .card {
		padding: 10px 20px;
	  }

	  .our-programs .item-box a .text-box h2 {
		font-size: .9em;
	  }

	  .volunteer.form-box .form-group {
		margin-bottom: 15px;
	  }

	  .volunteer.form-box input {
		height: calc(2.7em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .volunteer.form-box select {
		height: calc(2.7em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .contact-box .form-box input {
		height: calc(2.7em + .75rem + 2px);
	  }

	  .contact-box .text-box .box.socials .social-icons {
		gap: 10px;
	  }

	  .volunteer.form-box button[type="submit"] {
		height: calc(2.5em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .contact-box .form-box button[type="submit"] {
		height: calc(2.5em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .join .form-box button[type="submit"] {
		height: calc(2.5em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .join .form-box input {
		height: calc(2.7em + .75rem + 2px);
		border-radius: .7em;
	  }

	  .join .form-box select {
		height: calc(2.7em + .75rem + 2px);
		border-radius: .7em;
	  }

	.article-body .post-body h2 {
		font-size: 2.5em;
	  }
	  .footer .mid-data-flex-row .box-2 ul {
		gap: 20px;
	  }
	  .footer .mid-data-flex-row .box-2 ul li a {
		font-size: 1em;
	  }
	  .footer .mid-data-flex-row .box-1 a {
		width: 30px;
		height: 30px;
	  }
	  	  .alert_body.active {
	width: 30%;
        }
        
}

@media screen and (max-width:1024px){
	.nav_wrapper .navbar .nav-item {
		margin: 0 .5em;
	  }
	  .nav_wrapper .navbar .nav-link {
		font-size: 11px;
	  }
	  .nav_wrapper .navbar .nav-link.action {
		font-size: 11px;
	  }
	  .heading-data .heading-value h2 {
		font-size: 2em;
	  }

	  .heading-data .subtext-value p {
		font-size: 15px;
		padding: 0 0px;
	  }
	

	  .focus-area .data-box .img-box {
		height: 250px;
	  }

	  .focus-area .data-box .text-box {
		height: 100px;
	  }

	  .heading-data-fff .cta-btn .donate-btn {
		border-radius: .7em;
	  }

	  .heading-data-fff .cta-btn .vol-btn {
		border-radius: .7em;
	  }

	  .heading-data-fff .heading-value h2 {
		font-size: 2.5em;
		font-weight: 700;
	  }

	  .heading-data-fff .subtext-value p {
		font-size: 15px;
		line-height: 25px;
	  }
	  
	    .mission .data-box {
    padding: 20px;
    border-radius: 1em;
  }
	    .mission .data-box .text-box {
    gap: 10px;
    padding: 0px;
    height: 500px;
  }
  .mission .data-box .img-box {
  height: 500px;
  border-radius: 1em;
}
  .mission .data-box .img-box img {
    border-radius: 1em;
  }

	  .data-footer .logo-img {
		padding-right: 0;
	  }

	  .data-footer .logo-img p {
		font-size: 13px;
		margin-bottom: 0;
		line-height: 20px;
	  }

	  .data-footer ul li {
		padding: 2px 0;
	  }

	  .data-footer {
		padding: 100px 50px;
		padding-bottom: 0;
	  }

	  .our-programs .swiper-slide .item-box a .img-box {
		width: 100%;
		height: 300px;
	  }

	  .contact-box .text-box .box {
		margin-bottom: 15px;
		margin-top: 10px;
	  }

	  .contact-box .text-box {
		padding: 0 0;
	  }

	  .contact-box .form-box {
		margin-top: 30px;
	  }

	  .contact-box .form-box h2 {
		font-size: 2em;
	  }

	  .bank-details .item-box .data-box {
		width: 100%;
		height: 270px;
		padding: 15px;
	  }

	  .bank-details .item-box .data-box .bottom-group p {
		margin-bottom: .5em;
	  }

	  /* .bank-details .item-box .data-box .head-group img{
		width: 100px;
		height: auto;
	  } */

	  .focus-area.data-about .data-box .img-box {
		height: 250px;
	  }
	  .focus-area.data-about .data-box {
		height: 350px;
	  }

	.article-body .post-body h2 {
		font-size: 2em;
	  }
	  .article-body .post-body img {
		width: 100%;
		height: 40vh;
		margin: 20px 0;
	  }
	  .article-body .post-body .social-icons a {
		width: 30px;
		height: 30px;
	  }
	  .article-body .post-body .social-icons {
		gap: 20px;
	  }
	  	  .alert_body.active {
	width: 35%;
        }
}

@media screen and (max-width:992px){
	.desktop {
		display: none;
	  }
	  .mobile {
		display: block;
	  }
	  .nav_wrapper .navbar .nav-link.action.action-1 {
		text-align: center;
	  }
	  .hero .text-data-box h1 {
		font-size: 2.5em;
		font-weight: 700;
	  }
	  .hero .img-data-box {
		height: 350px;
	  }
	  .nav_wrapper .navbar {
		padding: 10px 20px;
	  }
	  .hero .text-data-box .d-flex a.action-btn {
		font-size: 14px;
	  }
	  .hero .text-data-box .d-flex a.data-action {
		font-size: 14px;
	  }
	  .metric-data .data-box .bottom-group p {
		font-size: 12px;
	  }

	  .metric-data .data-box .head-group span {
		font-size: .7em;
		font-weight: 500;
	  }

	  .our-programs .swiper-slide {
		width: 300px;
		height: auto;
	  }

	  .our-programs .swiper-slide .item-box a .img-box {
		width: 100%;
		height: 250px;
	  }
	  .data-footer {
		padding: 100px 20px;
		padding-bottom: 0;
	  }
	  .mission .data-box .text-box {
		width: 100%;
		height: 350px;
		gap: 20px;
		padding: 0px;
	  }

	  .heading-data .top-value {
		padding: 5px 7px;
	  }

	  .heading-data .top-value .circle {
		width: 25px;
		height: 25px;
	  }

	  .value .data-box {
		height: 200px;
	  }

	  .value .data-box h2 {
		font-size: 1.5em;
		font-weight: 600;
	  }

	  .mission .data-box .text-box .heading-data .subtext-value p {
		font-size: 14px;
	  }

	  .mission .data-box .img-box {
		width: 100%;
		height: 350px;
		border-radius: 1.5em;
	  }

	  .mission .data-box {
		padding: 15px;
		border-radius: 1.5em;
	  }
	  .heading-data {
		margin-bottom: 50px;
		gap: 15px;
	  }

	  .join .form-box {
		margin-top: 30px;
	  }
	  .bank-details .item-box {
		background-color: rgb(247, 251, 250);
		padding: 15px;
		border-radius: 1.5em;
	  }

	  .bank-details h2.h2 {
		font-size: 1.5em;
	  }
	  .bank-details .item-box .data-box {
		width: 100%;
		height: 250px;
		padding: 15px;
	  }
	  .bank-details .item-box .data-box .bottom-group p {
		margin-bottom: .5em;
		font-size: 13px;
	  }
	  .join {
		padding-bottom: 0;
		padding-top: 50px;
	  }
	  	  .alert_body.active {
	width: 50%;
	left: 50% !important;
	transform: translate(-50%, 0);
        }
}

@media screen and (max-width:576px){
    	  .alert_body.active {
	width: 95%;
	left: 50% !important;
	transform: translate(-50%, 0);
        }
	  .nav_wrapper .navbar {
		padding: 10px 15px;
	  }
	
	  .hero .text-data-box h1 {
		font-size: 2em;
		font-weight: 700;
	  }

	  .hero {
		padding-bottom: 0;
	  }

	  .metric-data .beta-row {
		row-gap: 20px;
	  }

	  .metric-data .data-box .bottom-group p {
		font-size: 14px;
	  }

	  .metric-data .pattern-box-1 {
		opacity: .4;
	  }

	  .our-programs .swiper-container .swiper-button-prev {
		top: 2.5px;
		right: auto;
	  }

	  .our-programs {
		padding: 50px 15px;
	  }

	  .faq {
		padding: 50px 15px;
	  }

	  .faq .card .card-header button {
		font-size: .4em;
		padding: 0;
		font-weight: 500;
	  }

	  .faq .card .card-header .card_header_icon .bi-plus {
		font-size: 25px;
	  }

	  .heading-data-fff .cta-btn .donate-btn {
		width: 150px;
		padding: 10px 10px;
		border-radius: .7em;
		font-size: 13px;
	  }

	  .heading-data-fff .cta-btn .vol-btn {
		width: 150px;
		padding: 10px 10px;
		border-radius: .7em;
		font-size: 13px;
	  }

	  .data-footer {
		padding: 30px 20px;
		padding-bottom: 0;
	  }

	  .data-footer .logo-img {
		margin-bottom: 30px;
	  }

	  .data-footer .contact-heading {
		margin-top: 30px;
	  }

	  .data-interlude .cta {
		padding: 30px 15px;
		border-radius: 1em;
	  }

	  .value .data-box h2 {
		font-size: 1em;
	  }

	  .value .data-box {
		height: 150px;
	  }

	  .value .row {
		row-gap: 20px;
	  }

	  .value {
		padding: 50px 15px;
	  }

	  .mission {
		padding: 50px 15px;
	  }

	  .mission .data-box .img-box img {
		border-radius: 1em;
	  }

	  .mission .data-box .text-box {
		height: auto;
    margin-top: 50px;
	  }
	  .upload-box p {
		font-size: 12px;
	  }

	  .volunteer {
		margin-top: 50px;
		padding: 20px;
		border-radius: 1em;
	  }

	  .join .text-box {
		padding: 15px;
		border-radius: 1em;
		gap: 10px;
	  }

	  .bank-details .beta-row {
		row-gap: 15px;
	  }

	  .bank-details .item-box .data-box .bottom-group p {
		margin-bottom: .7em;
		font-size: 14px;
	  }

	  .heading-data {
		margin-bottom: 30px;
	  }

	  .focus-area {
		padding: 50px 15px;
	  }

	  .hero .pattern-box-1 {
		left: 15%;
		top: 55%;
		opacity: .4;
	  }

	  .hero .pattern-box-2 {
		position: absolute;
		top: 10%;
		right: 15%;
		opacity: .4;
	  }

	  .heading-data-fff .heading-value h2 {
		font-size: 2em;
		font-weight: 700;
	  }

	  .heading-data-fff {
		gap: 20px;
	  }

	  .hero .text-data-box {
		gap: 20px;
	  }

	  .hero .text-data-box p {
		padding: 0 0px;
		font-size: 14px;
	  }

	  .hero .img-data-box img {
		border-radius: 1em;
	  }

	  .hero .img-data-box {
		margin-top: 30px;
	  }

	  .nav_wrapper .navbar .nav-item {
		margin: 5px .5em;
	  }
	  .nav_wrapper .navbar .nav-link.action {
		text-align: center;
	  }
	  .article-body .post-img {
		width: 100%;
		height: 300px;
		/*padding: 10px;*/
		/*margin-top: 80px;*/
	  }
        .article-body .post-body .social-icons {
        flex-direction: row;
        justify-content: start;
        margin-bottom: 0px;
        margin-top: 0px;
        }
        .article-body .post-body h2 {
        font-size: 1.5em;
        }
        
        .article-body .post-body .data-head {
        display: block;
        margin-bottom: 30px;
        }
        
        .article-body .post-body .data-head span{
        width: 100%;
        display: block;
        font-size: .8em;
        margin: 4px 0;
        }
        .article-body .post-body p {
        font-size: .9em;
        line-height: 2;
        }

	  .article-body .post-body .comment-box .box-1 span.num {
		font-size: 1em;
	  }
	  .article-body .post-body .comment-box .box-2 span.num {
		font-size: 1em;
	  }

	  .article-body .post-body .comment-box .box-1 .bi-heart,  .article-body .post-body .comment-box .box-1 .bi-bookmark {
		font-size: .8em;
	  }

	  .article-body .post-body .data-profile .text-box h4 {
		font-size: 1.1em;
	  }
}