* {
  margin: 0;
  padding: 0;
}

html,
body {
  overflow-x: hidden !important;
}

body {
  font-family: "Archivo", sans-serif !important;
}

ul,
li,
ol {
  padding: 0 !important;
  margin: 0 !important;
}

.top_header {
  background: black;
  padding: 10px;
}

.two_align {
  display: flex;
  gap: 50px;
}

.socail_links ul {
  list-style: none;
  display: flex;
  gap: 20px;
  position: relative;
}

img{

  max-width: 100%;
  height: auto;
}

p {
  margin: 0;
}
.basket-item-card h5 {
    font-size: 12px;
    color: #00000066;
    font-weight: 400;
    font-family: 'Archivo';
}
.basket-item-card h6 {
    font-size: 21px;
    font-family: 'Barlow';
    font-weight: 700;
}

.top_header ul li a {
  color: white;
  transition: 0.3s;
}

.top_header .get_in_touch_link p {
  color: white;
  font-size: 16px;
}

.top_header .get_in_touch_link p a {
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

a.a_link_direct {
  color: #59a752;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  justify-content: flex-end;
}

a.a_link_direct:hover {
  color: white;
}

.top_header .socail_links {
  position: relative;
}

.top_header .socail_links ul::after {
  content: "";
  width: 1px;
  background-color: white;
  height: 100%;
  position: absolute;
  right: -30px;
  top: 0px;
}

.top_header .get_in_touch_link p a:hover {
  color: #59a752;
}

.top_header ul li a:hover {
  color: #59a752;
}

header {
  padding: 20px 0;
}

header .three-boxs-align {
  display: flex;
  justify-content: space-between;
}

header .three-boxs-align .box ul {
  display: flex;
  gap: 10px;
  list-style: none;
}

header .three-boxs-align .box ul li a {
  color: black;
  font-size: 18px;
  text-decoration: none;
  font-weight: 500;
}

header .three-boxs-align .box ul li.down_link ul {
  background-color: red;
  padding: 20px !important;
  border-radius: 10px;
  display: flex;
  width: 580px;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  position: absolute;
  z-index: 9;
  top: 40px;
  left: 0;
}

header .three-boxs-align .box ul li.down_link ul li {
  width: 48% !important;
}

header li.down_link {
  position: relative;
}
header .three-boxs-align .box ul li.down_link ul h6 {
  width: 100%;
}
.what_we_do_sec .slider-box-img img {
    width: 100% !important;
    height: 540px;
}


header li.down_link {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.hero_section {
  position: relative;
  background-size: cover;
  height: 870px;
}

/* Dropdown hidden by default */
header .three-boxs-align .box ul li.down_link ul {
  background-color: #ffffff;
  padding: 20px !important;
  border-radius: 10px;
  width: 580px;
  flex-direction: row;
  flex-wrap: wrap;
  height: fit-content;
  position: absolute;
  z-index: 9;
  top: 40px;
  left: 0;
  display: none; /* hide by default */
  box-shadow: 0px 0px 10px 0px #0000001f;
}

/* Show when "active" class added */
header .three-boxs-align .box ul li.down_link.active ul {
  display: flex;
}

/* Basic structure CSS remains same */
header li.down_link {
  position: relative;
}
header .three-boxs-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .three-boxs-align .box ul {
  display: flex;
  gap: 15px;
  list-style: none;
}

header .three-boxs-align .box ul li a {
  color: black;
  font-size: 16px;
  text-decoration: none;
  font-weight: 500;
}

header .three-boxs-align .box ul li.down_link ul li {
  width: 48% !important;
  border-bottom: 1px solid #00000021;
}
header .three-boxs-align .box ul li.down_link ul h6 {
  width: 100%;
  color: #59A752;
  font-size: 18px;
  font-weight: 700;
  padding-left: 10px;
  margin: 0;
}

/* Smooth rotate animation */
li.down_link i {
  transition: transform 0.3s ease;
}

/* When dropdown open (active) */
li.down_link.active i {
  transform: rotate(180deg);
}

header .box.box-width {
  width: 17%;
}

.box.box-width.align-btns {
  display: flex;
  gap: 20px;
}

.box.box-width.align-btns .cart-box a {
  background-color: #59a75224;
  border: 1px solid #59a752;
  border-radius: 10px;
  padding: 10px;
  color: #59a752;
  text-decoration: none;
  font-size: 25px;
  width: 57px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.box.box-width.align-btns .cart-box a span {
  background-color: #764723;
  color: white;
  border-radius: 100%;
  padding: 5px;
  font-size: 8px;
  position: absolute;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 10px;
  right: 10px;
}

.t-btn.t-btn-brown {
  padding: 12px 30px;
  background-color: #764723 !important;
  display: inline-flex;
  text-decoration: none;
  color: white;
  gap: 10px;
  font-size: 12px;
  border-radius: 5px;
  transition: 0.3s;
}

.t-btn.t-btn-brown:hover {
  background-color: black !important;

}

i {
  line-height: 1.5 !important;
}

.t-btn.t-btn-brown:hover {
  background-color: #59a752;
}

.form-box .form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.form-box .form-row select {
  width: 16%;
  padding: 12px;
}

.form-box .tabs {
  display: flex;
  margin-bottom: 15px;
  padding: 3px;
  border: 1px solid #00000038;
  border-radius: 5px;
}

.form-box .tab-btn {
  flex: 1;
  padding: 17px 10px;
  cursor: pointer;
  border: none;
  background: #ffffff;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.form-box .tab-btn.active {
  background: #59a752;
  color: #fff;
}

.form-box .tab-content {
  display: none;
}

.form-box .tab-content.active {
  display: block;
}

.form-box .amount-boxes {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  justify-content: space-between;
  margin: 25px 0;
}

.form-box .amount {
  padding: 12px 20px;
  border: 1px solid #ccc;
  background: #F7F5F5;
  cursor: pointer;
  width: 23%;
  transition: .3s;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
}



.form-box #customAmount {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
}

.text h1 {
  font-size: 80px;
  color: #59a752;
  font-weight: 900;
}

.text h3 {
  font-size: 50px;
  font-weight: 600;
}

.hero_section h3 {
  color: white;
}

.text p {
  font-size: 20px;
}

.text p span {
  color: #dd7238;
  font-weight: 500;
}

.hero_section .text p {
  color: white;
}

.form-box {
  background-color: white;
  border-radius: 5px;
  padding: 30px 20px;
  width: 85%;
  float: right;
}

 p.friday_icon_box {
  background-color: #7c4a25;
  display: inline-flex;
  padding: 10px 15px;
  border-radius: 50px;
  align-items: center;
  align-content: center;
  gap: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: white !important;
  font-size: 10px !important;
}

 p.friday_icon_box img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.form-box .text h2 {
  font-size: 36px;
  margin: 20px 0;
  font-weight: 800;
}

.form-box .text h2 span {
  color: #59a752;
}

.form-box .text p {
  color: #505050;
  font-size: 14px;
}

.t-btn.t-btn-brown.t-btn-brown-gradient {
  background: #dd7238;
  background: linear-gradient(
    90deg,
    rgba(221, 114, 56, 1) 0%,
    rgba(166, 86, 41, 1) 100%
  );
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-top: 20px;
  transition: 0.3s;
}

.t-btn.t-btn-brown.t-btn-brown-gradient:hover {
  background-color: red;
  background: #59a752;
  background: linear-gradient(
    90deg,
    rgba(89, 167, 82, 1) 0%,
    rgba(9, 77, 0, 1) 100%
  );
}

.hero_section,
.hero_section .container,
.hero_section .container .row {
  height: 870px;
}

.form-box .text {
  padding-right: 15%;
  margin-bottom: 20px;
}

.form-box select {
  border: none;
  padding: 0;
  width: 30%;
  font-weight: 600;
  font-size: 13px;
}

.form-box .form-row {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.form-box .form-row label {
  position: absolute;
  font-size: 12px;
  top: -2px;
}
.form-box .form-row select.first_select {
  margin-left: 30px;
}

.form-box .form-row select:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}

.form-box .form-row select:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none;
}
.form-box .tab-btn:hover {
  background-color: #59a752;
  color: white;
}

.form-box .tab-btn.active img {
    filter: invert(1);
}

.form-box .tab-btn:hover img {
    filter: invert(1);
}

.form-box .amount:hover, .form-box .amount.active  {
    background-color: #59A752;
    color: white;
}

.form-box button.t-btn.t-btn-brown {
    width: 100% !important;
    max-width: 100% !important;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
}

.t-btn.t-btn-green.t-btn-green-outline {
    width: 100%;
    display: flex;
    border: 1px solid #59A752;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 13px;
    color: #59A752;
    padding: 12px 30px;
    margin-top: 10px;
    font-weight: 600;
    text-transform: uppercase;
    transition: .3s;
    gap: 15px;
}

.t-btn.t-btn-green.t-btn-green-outline:hover {
    background-color: #59A752;
    color: white;
}

header .three-boxs-align .box ul li.down_link ul a {transition: .3s;position: relative;}

header .three-boxs-align .box ul li.down_link ul a:hover {
    color: #59A752;
    padding-left: 10px;
}

header .three-boxs-align .box ul li.down_link ul a::after {
    content: "";
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #59A752;
    display: none;
    transition: .3s;
}

header .three-boxs-align .box ul li.down_link ul a:hover::after {
    display: block;
}

footer {
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

footer .text p {
    font-size: 18px;
    color: white;
    margin: 20px 0;
}

footer .text h6 {
    color: white;
    font-size: 25px;
    font-weight: 800;
    margin-bottom: 30px;
}

footer .text .footer_menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

footer .text .footer_menu ul li a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: .3s;
    display: flex;
    gap: 10px;
    align-items: center;
}

footer .text .footer_menu ul li a:hover {
    color: #59A752;
}

footer .text .footer_menu ul li a i {
    color: #59A752;
}


footer .socail_links ul li a {
    color: white;
    font-size: 22px;
    transition: .3s;
}

footer .socail_links ul li a:hover {
    color: #59a752;
}

footer .form_box_footer form {
    position: relative;
}

footer .form_box_footer form input {
    border: 1px solid white;
    border-radius: 5px;
    background-color: transparent;
    height: 60px;
    text-indent: 10px;
    font-size: 16px;
    width: 100% !important;
    color: white;
    padding-right: 50px;
}

footer .form_box_footer form button {
    background-color: #59A752;
    border: none;
    width: 50px;
    height: 50px;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: white;
    transition: .3s;
    right: 5px;
    top: 4px;
}

footer .form_box_footer form button:hover {
    background-color: #7C4A25;
}

footer .row .col-md-3:nth-child(2) {
    padding-left: 100px;
}

footer .footer_large_menu {
    border: 1px solid white;
    border-radius: 5px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
}

footer .footer_large_menu ul {
    list-style: none;
    display: flex;
    gap: 30px;
}

footer .footer_large_menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: .3s;
}

footer .footer_large_menu a.t-btn.t-btn-white.t-btn-img {
    background-color: white;
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: #7C4A25;
    font-size: 18px;
    font-weight: 600;
    align-items: center;
    transition: .3s;
}

footer .footer_large_menu a.t-btn.t-btn-white.t-btn-img:hover {
    background-color: #59A752;
    color: white;
}

footer .footer_large_menu a.t-btn.t-btn-white.t-btn-img:hover img {
    filter: invert(1) brightness(20.5);
}

footer .footer_large_menu ul li a:hover {
    color: #59a752;
}

.copy_right {
    background-color: #191919;
    padding: 20px 0;
}

.copy_right .text p {
    color: #6D6D6D;
    font-size: 18px;
}

.copy_right .text ul {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    gap: 40px;
}

.copy_right .text ul li a {
    color: #6D6D6D;
    text-decoration: none;
    transition: .3s;
}

.copy_right .text ul li a:hover {
    color: white;
}

.copy_right .text ul li {
    position: relative;
}

.copy_right .text ul li:nth-child(1)::after {
    content: "";
    background-color: #6D6D6D;
    width: 1px;
    height: 40%;
    position: absolute;
    right: -20px;
    top: 7px;
}

.footer_top_sec_three_box .hover_box {
    height: 500px;
    display: flex;
    align-items: center;
    padding: 80px;
    position: relative;
    transition: .4s ease;
    background-size: cover;
}

.footer_top_sec_three_box .hover_box::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #000000a3;
    inset: 0;
    transition: background-color .5s ease;
}

/* TEXT */
.footer_top_sec_three_box .hover_box .text {
    z-index: 9;
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
}

.footer_top_sec_three_box .hover_box .text h5 {
    color: white;
    font-size: 40px;
    font-weight: 600;
    margin: 0;
}

.footer_top_sec_three_box .hover_box .text p {
    color: white;
    font-size: 18px;
}

/* BUTTON – pehle hidden but smooth */
.footer_top_sec_three_box .hover_box .text a.t-btn.t-btn-brown {
    padding: 12px 30px;
    opacity: 0;
    transform: translateY(20px);
    transition: all .5s ease;
    pointer-events: none;
}

/* HOVER EFFECTS */
.footer_top_sec_three_box .hover_box:hover::after {
    background-color: #0f7606bd;
}

.footer_top_sec_three_box .hover_box:hover a.t-btn.t-btn-brown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.what_we_do_sec {
    padding: 50px 0;
}

.text h6 {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.text h2 {
    font-size: 50px;
    font-weight: 900;
}

.text h2 span {
    color: #59A752;
}

.what_we_do_sec .short_event_box {
    display: flex;
    margin: 25px 0px;
    gap: 15px;
    align-items: center;
}

.what_we_do_sec .short_event_box .text h6 {
    font-size: 18px;
    text-transform: capitalize;
}

.what_we_do_sec .short_event_box .text h6 span {
    color: #59A752;
    text-transform: uppercase;
}

.what_we_do_sec .short_event_box .text h5 {font-size: 20px;font-weight: 700;}


 .two-btns-align {
    display: flex;
    gap: 20px;
    align-items: center;
}

 .two-btns-align a {
    width: max-content !important;
    margin: 0 !important;
}

a.t-btn-large-text{
  font-size: 18px !important;
}

.captalize_text {
    text-transform: capitalize !important;
}

/* slick default arrow content remove */
.slick-prev::before,
.slick-next::before {
  content: none !important;
}

/* custom arrow */
.custom-arrow {
  background: #000;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: none;
}

.custom-arrow i {
  color: #fff;
  font-size: 18px;
}

.slick-prev { left: -55px; }
.slick-next { right: -55px; }


.arrow_styling button.custom-arrow.slick-arrow {
    position: absolute !important;
    right: 30px !important;
    left: auto;
    bottom: -10px !important;
    top: auto !important;
    z-index: 99999 !important;
}

.arrow_styling button.slick-prev.custom-arrow.slick-arrow {
    right: 100px !important;
}

.what_we_do_sec .slider-box-img img {
    width: 100% !important;
}

button.custom-arrow.slick-arrow {
    background-color: #ffffff00 !important;
    border: 2px solid white;
    transition: .3s;
}

button.custom-arrow.slick-arrow:hover {
    background-color: #59A752 !important;
    border-color: #59A752;
}

.event-sec {
    padding: 50px 0;
    background-color: #FDF8F5;
}

.text.text_gaping p {
    margin-bottom: 10px;
}

.event-sec .text h5 {
    font-size: 25px;
    color: #59A752;
    font-weight: 600;
    margin-bottom: 0px;
    margin-top: 15px;
}

.event-sec .text h5 span {
    color: #7C4A25;
}

.event-sec .two-btns-align {
    margin-top: 20px;
}

.progress {
	background-color: #d8d8d8;
	border-radius: 0px;
	position: relative;
	margin: 15px 0;
	height: 10px;
	width: 100%;
}

.progress-done {
	background: linear-gradient(to left, #59A752, #053a00);
	box-shadow: 0 3px 3px -5px #59A752, 0 2px 5px #053a00;
	border-radius: 0px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
}

.appeals_sec {
    padding: 50px 0;
}

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

.two_align_box_full_gap a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    width: auto;
}

.appeals_sec .img-box {
    border: 1px solid #00000069;
    border-radius: 5px;
}

.appeals_sec .img-box .text {
    padding: 20px;
}

.appeals_sec .img-box .text h3 {
    font-size: 25px;
    font-weight: 700;
}

.appeals_sec .img-box .text .number-box-donation p {
    font-size: 18px;
    color: #9C9C9C;
}

.appeals_sec .img-box .text .number-box-donation .two-text-align {
    display: flex;
    justify-content: space-between;
}

.appeals_sec .img-box .text .number-box-donation .two-text-align p span {
    color: black;
}

.appeals_sec .img-box img {
    width: 100% !important;
    height: 270px;
    object-fit: cover;
}

.appeals_sec .img-box .text p.detail_content {
    margin: 15px 0;
    color: #505050;
    font-size: 16px;
}

.appeals_sec .img-box .text a.t-btn.t-btn-brown.t-btn-large-text.uppercase_text {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 12px !important;
    text-transform: uppercase;
}

 .two_align_box_full_gap {
    margin-bottom: 20px;
}

.progress-done {
  font-size: 0;   /* just in case */
}

.need_your_help {
    padding: 50px 0;
    background-color: #E7F2E7;
}

.need_your_help .text.text-center {
    margin-bottom: 40px;
}

.need_your_help .text.text-center h6 {
    margin: 0;
}

.need_your_help .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.need_your_help .text h4 {
    font-size: 30px;
    color: #141414;
    font-weight: 600;
}

.need_your_help .img img {
    width: 100%;
    height: 550px !important;
}

.need_your_help  .vertical_align_space_btw {
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.need_your_help .vertical_align_space_btw h5 {
    font-size: 28px;
    color: #7C4A25;
    font-weight: 600;
}

.need_your_help .vertical_align_space_btw .img img {
    height: initial !important;
}
.need_your_help a.t-btn.t-btn-brown {
    width: max-content;
    font-size: 13px;
    padding: 10px 30px;
}

header .box.box-width.align-btns a.t-btn.t-btn-brown {
    padding: 17px 25px;
}
.appeals_sec a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    padding: 12px 40px;
}

.need_your_help .text a.t-btn.t-btn-brown.t-btn_uppercase {
    text-transform: uppercase;
    margin-top: 5px;
}

.food_pack_sec {
    padding: 100px 0;
}

.food_pack_sec .food_pack_box_large {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.food_pack_sec .food_pack_box_large .box_content {
    background-color: white;
    padding: 50px 30px;
    border-radius: 5px;
    width: 60%;
    max-width: 400px !important;
}

.food_pack_sec .food_pack_box_large .box_content .text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

.food_pack_sec .food_pack_box_large .box_content .text h3 {
    font-size: 30px;
    font-weight: 700;
}

.food_pack_sec .food_pack_box_large .box_content .text p {
    font-size: 14px;
    color: #505050;
}

.food_pack_sec .food_pack_box_large .box_content .two-btns-align {
    gap: 10px;
}

.food_pack_sec .food_pack_box_large .box_content .two-btns-align a {
    font-size: 13px !important;
    text-transform: uppercase !important;
    padding: 15px 25px;
}

.food_pack_sec .food_pack_box_large .text_box .text h2 {
    color: white;
    font-size: 50px;
    padding-right: 20%;
    padding-bottom: 70px;
}

.food_pack_sec .food_pack_box_large .box_content .two-btns-align a.t-btn.t-btn-green.t-btn-green-outline.t-btn_style_none.t-btn-large-text.captalize_text {
    border: none;
    text-decoration: underline;
}

.slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
    position: absolute;
    right: 400px !important;
    left: 0 !important;
    margin: auto;
    bottom: 80px !important;
}

.slider_box_food.arrow_styling button.slick-next.custom-arrow.slick-arrow {
    right: 280px !important;
}

.for_every_spend {
    padding: 50px 0;
}


.for_every_spend .col-md-12 .text p {
    width: 60%;
    margin-bottom: 20px;
    margin: auto;
    margin-bottom: 20px;
    color: #505050;
    font-size: 16px;
}

.for_every_spend .col-md-12 .text h2 {
    font-size: 55px;
    font-weight: 600;
}

.for_every_spend .row.two_align_spend {
    gap: 0;
    margin-top: 30px;
}

.for_every_spend .row.two_align_spend .col-md-6 {
    padding: 0;
}

.for_every_spend .row.two_align_spend .col-md-6:nth-child(2) {
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 70px 50px 50px;
}

.for_every_spend .row.two_align_spend .col-md-6:nth-child(2) .text h3 {
    font-size: 30px;
}

.for_every_spend .row.two_align_spend .col-md-6:nth-child(2) .text p {
    font-size: 16px;
    color: #505050;
    margin: 20px 0;
}
.uppercase_text{

  text-transform: uppercase;
}

.start_donation_sec {
    padding: 50px 0;
}

.start_donation_sec .image-box {
    background-color: #F6F6F6;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 25px;
}

.start_donation_sec .image-box .img img {
    width: 100% !important;
    height: 260px;
    object-fit: cover;
}

.start_donation_sec .image-box .text {
    padding: 30px 30px;
    position: relative;
}

.start_donation_sec .image-box .text h6 {
    position: relative;
    font-size: 11px;
    color: black;
    padding-left: 20px;
}

.start_donation_sec .image-box .text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.start_donation_sec .image-box .text h6::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #59A752;
    position: absolute;
    left: 0;
    border-radius: 50px;
    top: 2px;
}

.start_donation_sec .image-box .text h5 {
    font-size: 27px;
}

.start_donation_sec .image-box .text p {
    color: #505050;
    font-size: 16px;
}
a.t-btn.t-btn-green.t-btn-underline {
    color: #59a752;
    font-size: 17px;
    font-weight: 600;
    transition: .3s;
}

a.t-btn.t-btn-green.t-btn-underline:hover {
    color: black;
}

.your_donation_sec {
    padding: 100px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.your_donation_sec .text h2 {
    font-size: 60px;
    color: white;
    font-weight: 400;
}

.your_donation_sec .text h2 span {
    font-weight: 600;
}

.your_donation_sec div#counter {
    display: flex;
    width: 90% !important;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
}

.your_donation_sec div#counter .item {
    width: 33%;
    position: relative;
    padding-right: 20px;
}
}

.your_donation_sec div#counter .item .counter_align_text {
    display: flex;
}

.your_donation_sec div#counter .item .counter_align_text h1 {
    color: white;
    font-size: 60px;
    font-weight: 700;
    margin: 0;
}

.your_donation_sec div#counter .item h3.text {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 400;
}

.your_donation_sec div#counter .item::after {
    content: "";
    width: 1px;
    height: 90%;
    background-color: #ffffff40;
    position: absolute;
    top: 10px;
    right: 30px;
}

.your_donation_sec div#counter .item:last-child::after {
    display: none;
}

.your_donation_sec button.btn.btn-primary {
    background-color: #ff000000;
    border: none;
    border-radius: 0;
}

.zoom-animate img {
  animation: zoomPulse 2s ease-in-out infinite;
}

@keyframes zoomPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.modal-body iframe {
    width: 100%;
    height: 350px;
}

.how_your_support {
    padding: 100px 0;
}

.how_your_support  .two_align_box_full_gap p {
    width: 68%;
    margin-bottom: 10px;
}

.blog_slider_boxes .blog-box {
    position: relative;
    border: 1px solid #00000052;
    border-radius: 30px;
    overflow: hidden;
    transition: .3s;
    margin: 0 10px;
    min-height: 650px;
}

.blog_slider_boxes .blog-box .img-box {position: relative;}

.blog_slider_boxes .blog-box .img-box .img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.blog_slider_boxes .blog-box .img-box .blog_categorie {
    position: absolute;
    top: 15px;
    left: 15px;
}

.blog_slider_boxes .blog-box .img-box .blog_categorie p {
    background-color: #FFAC00;
    padding: 10px 20px;
    border-radius: 50px;
    color: white;
    font-size: 16px;
    letter-spacing: 1px;
}

.blog_slider_boxes .blog-box .img-box .blog_date {
    position: absolute;
    right: 30px;
    bottom: -30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #59A752;
    width: 75px;
    height: 75px;
    border-radius: 50px;
    gap: 0;
}

.blog_slider_boxes .blog-box .img-box .blog_date h6 {
    margin: 0;
    color: white;
    font-size: 35px;
    font-weight: 500;
    margin-bottom: -8px;
}

.blog_slider_boxes .blog-box .img-box .blog_date p {
    color: white;
    margin: 0;
    font-size: 18px;
}

.blog_slider_boxes .blog-box .text {
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.blog_slider_boxes .blog-box .text h6 {
    font-size: 14px;
    color: #9F9F9F;
}

.blog_slider_boxes .blog-box .text h3 {font-size: 25px;}

.blog_slider_boxes .blog-box .text p {
    color: #505050;
    font-size: 18px;
}

.blog_slider_boxes .blog-box .text a.t-btn.t-btn-brown {
    font-size: 18px;
    color: white;
    margin-top: 15px;
}

.slick_dots_styling .slick-dots li button:before {
    color: #59A752;
    width: 15px;
    height: 10px;
    background-color: #59A752;
    font-size: 0;
    content: "";
    border-radius: 20px;
}

.slick_dots_styling .slick-dots li button,.slick_dots_styling .slick-dots li {
    width: 20px !important;
    height: 20px;
    margin: 0px 5px !important;
}

.slick_dots_styling .slick-dots li.slick-active button:before, .slick_dots_styling .slick-dots li.slick-active button, .slick_dots_styling .slick-dots li.slick-active {
    width: 30px !important;
}

.hero_slider.slick_dots_styling ul.slick-dots {
    position: absolute;
    bottom: 50px;
    left: 0 !important;
    display: flex;
    justify-content: flex-start;
    left: 16% !important;
}

.hero_slider.slick_dots_styling ul.slick-dots .slick_dots_styling .slick-dots li button:before {
    background: white !important;
    background-color: white !important;
}

.hero_slider.slick_dots_styling ul.slick-dots li button:before {
    background-color: white !important;

}


.hero_slider.slick_dots_styling ul.slick-dots li, .hero_slider.slick_dots_styling ul.slick-dots li button,.hero_slider.slick_dots_styling ul.slick-dots li button::before {
    width: 80px !important;
}

.hero_slider.slick_dots_styling ul.slick-dots li button::before {
    height: 5px;
}

.hero_slider.slick_dots_styling ul.slick-dots li.slick-active button::before {
    background-color: #59A752 !important;
}

.blog_categorie.blog_categorie_donation p {
    background-color: #EF3739 !important;
}

.page_title_sec {
    padding: 200px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page_title_sec .text h2 {
    color: white;
}

.page_title_sec .text p {
    color: white;
    width: 50%;
}

.t-btn-border-radius-none {
    border-radius: 0 !important;
}

.what_we_do_sec.about_sec_01 div#counter {
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #0000001f;
    padding-top: 20px;
}

.what_we_do_sec.about_sec_01 div#counter .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.what_we_do_sec.about_sec_01 div#counter .item .counter_align_text {
    display: flex;
}

.what_we_do_sec.about_sec_01 div#counter .item .counter_align_text h1 {
    font-size: 50px;
    color: #7C4A25;
    font-weight: 800;
    margin: 0;
}

.what_we_do_sec.about_sec_01 div#counter .item h3.text {
    font-size: 16px;
    color: #828282;
}

.what_we_do_sec.about_sec_01 div#counter .item:nth-child(2) {
    background-color: #ff000000;
    border-right: 1px solid;
    border-left: 1px solid;
    padding: 0 30px;
    border-color: #0000001f;
}

.what_we_do_sec.about_sec_01 div#counter .item {
    padding: 0 20px;
}

.what_we_do_sec.about_sec_01 .two-btns-align {
    margin: 30px 0 20px;
}

.who_are_we div#nav-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 999;
    position: relative;
    border: none !important;
    gap: 25px;
    margin-left: 50px;
}

.who_are_we nav {
    position: relative;
}

.who_are_we div#nav-tab button {
    background-color: #ff000000;
    border: none;
    padding: 0;
}

.who_are_we div#nav-tabContent {
    position: absolute;
    top: 40px !important;
    background-color: #ff000000 !important;
    padding: 0 !important;
    border: none !important;
    right: -200px;
}

.who_are_we {
    position: relative;
    padding: 100px 0;
}

.who_are_we div#nav-tab button img {
    border: 2px solid white;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #00000078;
}

.who_are_we .text {
    text-align: right;
}

.who_are_we .two-btns-align {
    display: flex;
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.helping_each_sec {
    background-color: #F6F6F6;
}

.helping_each_sec .all_text_right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    padding: 10px 10px 10px 10px;
}

.helping_each_sec .all_text_right h2 {
    text-transform: capitalize;
}

.helping_each_sec .t-btn {
    background-color: #59A752;
    color: white;
    font-size: 20px;
    text-decoration: none;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 20px;
    transition: .3s;
}

.helping_each_sec .t-btn:hover {
    background-color: black;
    color: white;
}

a.t-btn.t-btn-gray {
    background-color: #EEF2EE;
    color: #59A752;
}

.helping_each_sec .two-btns-align {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #00000014;
    padding-bottom: 25px;
}

 .tick_listing {
    position: relative;
}

 .tick_listing ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px !important;
    list-style: none;
}

 .tick_listing  ul li {
    position: relative;
    padding-right: 25px !important;
    margin-right: 30px !important;
}

.helping_each_sec .img-box {
    padding-left: 40px;
}

 .tick_listing ul li::after {
    content: "";
    background-image: url(../images/check_icon.png);
    width: 20px;
    height: 20px;
    position: absolute;
    right: -5px;
    background-repeat: no-repeat;
    background-size: contain;
}
h2{

    text-transform: capitalize;

}

.values_sec {
    padding: 50px 0;
}

.values_sec .text.text-center {
    width: 65%;
    margin: auto;
    margin-bottom: 50px;
}

.values_sec .img-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 10px;
    transition: .3s;
    border-radius: 10px;
    height: 300px;
    margin-bottom: 20px;
}

.values_sec .img-box img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.values_sec .img-box h6 {
    font-size: 20px;
    line-height: 1.5em;
    transition: .3s;
}

.values_sec .img-box p {
    font-size: 16px;
    color: #505050;
    transition: .3s;
}

.values_sec .img-box:hover {
    background-color: #51984B;
    color: white !important;
    padding: 30px;
    box-shadow: 0px 0px 10px 10px #0000001a;
}

.values_sec .img-box:hover img {
    filter: brightness(30.5);
}

.values_sec .img-box:hover p {
    color: white;
}

.donate_us_sec_bank {
    padding: 50px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.donate_us_sec_bank .bank_details_box {
    background-color: white;
    width: 500px;
    border-radius: 10px;
    overflow: hidden;
}

.donate_us_sec_bank .bank_details_box .text {
    padding: 25px;
}

.donate_us_sec_bank .bank_details_box .text p.friday_icon_box {
    background-color: #FAD241;
    color: black !important;
    margin-bottom: 15px;
}

.donate_us_sec_bank .bank_details_box .text p.friday_icon_box img {
    filter: invert(1);
}

.donate_us_sec_bank .bank_details_box .text .img-box {
    display: flex;
    align-items: center;
    gap: 10px;
}

.donate_us_sec_bank .bank_details_box .text .img-box h3 {
    font-size: 30px;
    margin: 0;
}

.donate_us_sec_bank .bank_details_box .text .img-box h3 span {
    color: #59A752;
}

.donate_us_sec_bank .bank_details_box .details_box_ul {
    background-color: #ff000000;
}

.donate_us_sec_bank .bank_details_box .details_box_ul ul {
    display: flex;
    flex-direction: column;
    gap: 0px;
    list-style: none;
}

.donate_us_sec_bank .bank_details_box .details_box_ul ul li {
    display: flex;
    padding: 15px 5px !important;
}

.donate_us_sec_bank .bank_details_box .details_box_ul ul li p {
    width: 48%;
    font-size: 14px;
    font-weight: 600;
}

.donate_us_sec_bank .bank_details_box .details_box_ul ul li:nth-child(2n+1) {
    background-color: #DEEDDC;
}

.donate_us_sec_bank .bank_details_box .details_box_ul ul li p:nth-child(2) {color: #59A752;font-weight: 700;}

.donate_us_sec_bank .bank_details_box .details_box_ul ul li p:nth-child(1) {
    padding-left: 25px;
}

.padding-50 {
    padding: 50px 0;
}



.padding-80 {
    padding: 80px 0;
}

.clean_water_sec {}

.clean_water_sec .tick_listing {
    margin: 30px 0;
}

.clean_water_sec .tick_listing li {
    padding: 0 !important;
    padding-left: 35px !important;
}

.clean_water_sec .tick_listing li::after {
    left: 0;
    top: 2px;
}

.clean_water_sec .clean_water_sec_imgBox {
    border: 1px solid #00000026;
    border-radius: 10px;
    padding: 15px 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    width: fit-content;
}

.clean_water_sec .clean_water_sec_imgBox .content_box h5 {
    font-size: 32px;
    color: #59A752;
    font-weight: 800;
}

.clean_water_sec .clean_water_sec_imgBox .content_box h6 {
    font-size: 20px;
}

.clean_water_sec .clean_water_sec_imgBox .content_box p {
    color: #747474;
    font-size: 14px;
}

.clean_water_sec .clean_water_sec_imgBox .content_box {
    border-left: 4px solid #7C4A25;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.food_pack_sec {
    background-repeat: no-repeat;
    background-size: cover;
}

.food_pack_sec {background-repeat: no-repeat;background-size: cover;}

.friday_giving_slider_sec .food_pack_sec {
    padding-bottom: 0;
}

.friday_giving_slider_sec .form-box {
    width: 550px;
    margin-bottom: -150px;
}

.friday_giving_slider_sec .form-box .text {
    padding: 0;
}

.friday_giving_slider_sec button.custom-arrow.slick-arrow {
    bottom: 50px !important;
}


.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider button.custom-arrow.slick-arrow {
    bottom: 0 !important;
}

.photo_gallery_sec {
    padding: 150px 0 100px;
}

.photo_gallery_sec .img-box img {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    margin-top: 20px;
}

.photo_gallery_sec a.t-btn.t-btn-brown.t-btn_uppercase {
    text-transform: uppercase;
    margin-top: 20px;
    display: inline-flex;
}

/* Project page css */
.category_sidebar {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 5px 4px 12px -7px #00000080;
}
.category_sidebar h3 {
    color: #141414;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 14px;
}

.category_tabs .nav-link {
    color: #1D1D1D;
    border-bottom: 1px solid #D2D2D2;
    padding: 12px 0;
    font-weight: 500;
    font-size: 18px;
}
.category_section .tab-content hr {
    color: #D2D2D2;
}

.category_tabs .nav-link.active {
    color: #28a745;
    border-left: 3px solid #28a745;
    padding-left: 10px;
}

.donation-card-row {
    display: flex;
    gap: 20px;
    background: #fff;
    margin-bottom: 30px;
    align-items: center;
}

.card-text {
    flex: 1; 
}
.donation-card-row .card-img { 
    flex: 0 0 431px; 
}
.card-img img { 
    width: 100%; 
    border-radius: 10px; 
}
.category_section .number-box-donation .progress {
    height: 8px;
    background: #EAEAEA;
    margin: 10px 0;
    width: 79%;
}
.number-box-donation .progress .progress-done {
    height: 100%;
    background: #59A752;
}

.two-text-align {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}
.category_section .donation-card-row .card-text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}
.category_section .donation-card-row .card-text h3 {
    color: #141414;
    font-weight: 700;
    font-size: 25px;
    font-family: 'Archivo';
}
.category_section .donation-card-row .card-text p {
    color: #171717;
    font-size: 18px;
    width: 83%;
}

.category_section .donation-card-row .card-text p {
    text-align: left;
}


.category_section .donation-card-row .card-text .number-box-donation {
    width: 100%;
}
.card-text .number-box-donation .amount {
    color: #9C9C9C !important;
    font-size: 18px;
    font-family: 'Archivo';
    font-weight: 500;
}
.two-text-align span {
    color: #141414;
    font-weight: 600;
    font-size: 18px;
}
.two-text-align p {
    color: #9C9C9C !important;
    font-weight: 600;
}
.donation-card-row .learn-more-btn {
    border: 1px solid #59A752;
    width: fit-content;
    padding: 7px 44px;
    color: #59A752;
    text-decoration: none;
    font-size: 18px;
    margin-top: 15px;
    font-weight: 700;
    border-radius: 5px;
}
.sidebar-below-box .sidebar-box-wrapper {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.sidebar-box-wrapper h3 {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-weight: 600;
}
.sidebar-box-wrapper p {
    color: #fff;
    font-size: 19px;
    text-align: center;
    line-height: 1.2;
    font-weight: 600;
}
.sidebar-box-wrapper a {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.category_section .col-md-3 {
    padding-right: 26px;
}
.logo-round img {
    width: 110px;
    object-fit: cover;
    height: 110px;
    margin-bottom: 10px;
}
.category_section {
    padding: 100px 0;
}

/* Volunteer page css */
.volunteer_section {
    padding: 80px 0;
    position: relative;
}

.volunteer_content h6 {
    color: #141414;
    font-weight: 700;
    margin-bottom: 15px;
    font-size: 18px;
}

.volunteer_content h2 {
    font-size: 46px;
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1.1;
    color: #141414;
    font-family: "Barlow";
}

.volunteer_content h2 span {
    color: #5cb85c; 
}

.volunteer_images {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.volunteer_images img {
    width: 50%;
    border-radius: 12px;
    object-fit: cover;
}

.volunteer_list {
    list-style: none;
    padding: 0;
}

.volunteer_list li {
    margin-bottom: 10px;
    font-weight: 500;
    font-family: 'Nunito sans';
    color: #4A4A4A;
}

.volunteer_list li i {
    color: #59A752;
    margin-right: 10px;
    font-size: 20px;
}

.volunteer_form_card {
    background: #fff;
    padding: 0px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: -250px;
    position: relative;
    z-index: 10;
}

.volunteer_form_card .badge_box {
    background: #7C4A25;
    color: #fff;
    display: inline-block;
    padding: 9px 15px;
    border-radius: 5px;
    font-size: 12px;
    margin-bottom: 20px;
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}
.volunteer_form_card label {
    color: #141414;
    font-weight: 600;
    padding-bottom: 5px;
    font-size: 15px;
}

.form_subtext {
    font-size: 16px;
    color: #141414;
    margin-bottom: 25px;
}

.form-control, .form-select {
    background-color: #E5E5E5;
    border: 1px solid #E5E5E5;
    padding: 12px;
}
.volunteer_form_card .form-control:focus {
    border: none;
    background: #E5E5E5;
    box-shadow: none;
}

.btn_send {
    background-color: #5cb85c;
    color: white;
    width: 100%;
    border: none;
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.3s;
    font-size: 12px;
}

.btn_send:hover {
    background: #7c4a25;
}
.volunteer_section .volunteer_content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.volunteer_content p {
    color: #171717;
    font-size: 18px;
    margin-bottom: 18px;
}
.fundraise_section {
    background-color: #F6F6F6;
    overflow: hidden;
    padding: 100px 0;
}

.image_stack {
    position: relative;
    padding-bottom: 50px;
}

.image_stack .img_large {
    position: relative;
    width: 80%;
}

.image_stack .img_small {
    position: absolute;
    bottom: 21%;
    right: 50px;
    width: 50%;
    z-index: 2;
}

.active_members_badge {
    position: absolute;
    top: 12%;
    left: -49px;
    background: white;
    padding: 29px 27px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 3;
}
.active_members_badge .icon_box img {
    border-radius: 0 !important;
    width: 60px;
    object-fit: cover;
}
.active_members_badge .icon_box {
    color: #28a745;
    font-size: 2rem;
}

.active_members_badge h4 {
    margin: 0;
    font-weight: 800;
    color: #59A752;
    font-size: 45px;
    font-family: 'Nunito Sans';
}

.active_members_badge p {
    margin: 0;
    font-size: 14px;
    color: #59A752;
    font-weight: 600;
}

.volunteer_stats h3 {
    color: #7C4A25;
    font-size: 50px;
    font-weight: 700;
    font-family: Archivo;
}

.btn-outline-success {
    border-color: #59A752;
    color: #59A752;
    font-size: 18px;
    padding: 11px 26px;
}

.btn-outline-success:hover {
    background-color: #59A752;
    color: white;
}
.image_stack .img_large img {
    border-radius: 22px;
}
.fundraise_content h6 {
    color: #141414;
    font-size: 18px;
    font-family: Archivo;
}
.fundraise_content h2 {
    font-size: 55px;
    font-weight: 800 !important;
    color: #141414;
    font-family: barlow;
}
.fundraise_content h2 span {
    color: #59A752;
}
.fundraise_content p {
    color: #171717;
    font-size: 18px;
    font-family: 'Archivo';
}
.fundraise_content {
    display: flex;
    flex-direction: column;
    gap: 13px;
}
.fundraiser-points p {
    color: #4A4A4A;
    font-size: 16px;
    font-weight: 400 !important;
}
.fundraiser-points i {
    font-size: 20px;
    color: #59A752 !important;
}
.fundraiser-bottom-testi-box {
    gap: 30px;
}
.volunteer_stats {
    gap: 17px;
}
.volunteer_stats p {
    font-size: 16px;
    color: #828282 !important;
}

.events_section {
    background-color: #ffffff;
    padding: 100px 0;
}

.date_badge {
    background: #59A752;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    width: 77px;
    height: 77px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1;
    bottom: -38px !important;
}

.date_badge .day {
    font-size: 30px;
    font-weight: 800;
    font-family: 'Barlow';
}

.date_badge .month {
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Barlow';
}

.main_event_card {
    transition: transform 0.3s ease;
}

.main_event_card:hover {
    transform: translateY(-5px);
}

.event_item h5 {
    font-size: 22px;
    line-height: 1.4;
    color: #000;
}

.events-desc-wrapper .btn-outline-success {
    border-color: #59A752;
    color: #59A752;
    border-radius: 5px;
    font-weight: 500;
    padding: 8px 20px;
}
.event_item pl {
    color: #171717;
    font-size: 18px;
}

.events-desc-wrapper .btn-outline-success:hover {
    background-color: #59A752;
    border-color: #59A752;
    color: #fff;
}

.benefit-items-list .border-bottom {
    border-color: #020d1918 !important;
}
.main_event_card .badge {
    background: #FFAC00;
    border-radius: 50px;
    font-size: 16px;
    font-family: 'Barlow';
    font-weight: 600;
}
.events-desc-wrapper {
    padding: 34px 20px !important;
}
.events-desc-wrapper h4 {
    font-size: 24px;
    color: #000000;
    font-family: 'Archivo';
}
.events-desc-wrapper p {
    color: #171717 !important;
    font-size: 18px;
}
.event_list {
    justify-content: space-around;
    gap: 27px;
    padding-top: 28px;
}
.event_item a.btn.btn-outline-success.btn-sm.px-4.mt-2 {
    padding: 8px 20px;
    width: fit-content;
}
.event_item {
    display: inline-flex;
    flex-direction: column;
    gap: 16px;
}


/* Zakat page css */
.donation-hero-section { 
    padding: 80px 0; 
}
.hero-content-zakat .zakat-tag {
    font-weight: bold;
    color: #141414;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: 'Archivo';
}
.hero-content-zakat .hero-title {
    font-size: 55px;
    font-weight: 800;
    margin: 15px 0;
    color: #141414;
    font-family: 'Barlow';
}
.green-text { 
    color: #59A752; 
}

.hero-content-zakat .hero-desc {
    color: #171717;
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 18px;
    font-family: 'Archivo';
    width: 75%;
}

.left-tabs .tab-btn {
    border: none;
    background: none;
    padding: 12px 20px;
    font-size: 11px;
    transition: 0.3s;
    color: #141414;
    font-weight: 600;
    display: flex;
    gap: 5px;
    align-items: center;
}

.left-tabs .tab-btn.active {
    background: #59A752;
    color: #fff;
    border-color: #59A752;
    border-radius: 3px;
}

.custom-progress-bar { 
    position: relative; 
    width: 100%; 
    max-width: 400px;
    height: 8px; 
    background: #eee; 
    border-radius: 10px; 
}
.custom-progress-bar input { 
    position: absolute; 
    width: 100%; 
    top: -5px; 
    z-index: 5; 
    opacity: 0; 
    cursor: pointer; 
}

.progress-fill { 
    position: absolute; 
    height: 100%; 
    background: #0B3624; 
    border-radius: 10px; 
    width: 30%; 
}
.progress-box .progress-amt {
    font-size: 30px;
    font-weight: 700;
    color: #141414;
    font-family: 'Barlow';
}

.donation-form-card {
    padding: 30px;
    margin-top: -276px;
}
.form-tabs-row { 
    border: 1px solid #eee; 
    border-radius: 5px; 
    overflow: hidden; 
}
.f-tab { 
    border: none; 
    padding: 12px; 
    background: #fff; 
    font-size: 13px; 
    font-weight: bold; 
    color: #333; }
.f-tab.active { 
    background: #5cb85c; 
    color: #fff; 
}

.amount-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
}
.amt-btn { 
    border: none; 
    background: #f8f9fa; 
    padding: 12px; 
    border-radius: 5px; 
    font-weight: bold; 
    transition: 0.3s; 
}
.amt-btn.active { 
    background: #5cb85c;
    color: #fff; 
}

.btn-donate {
    background: #7C4A25;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    font-size: 12px;
    text-align: left;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn-donate:hover {
    background: #7C4A25;
    color: #fff;
}

.btn-cart-outline {
    border: 1px solid #59A752;
    color: #59A752;
    font-weight: 700;
    background: #fff;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    font-size: 12px;
    font-family: 'Archivo';
}
.btn-cart-outline:hover {
    background: #59A752;
    color: #fff;
}
.total-row {
    position: relative;
}

.total-row .total-label {
    color: #59A752;
    font-size: 20px;
    font-family: 'Barlow';
    font-weight: 600;
    left: 27px;
    top: 15px;
}

.donation-basket-popup .total-row.d-flex.justify-content-between.align-items-center.mb-3 {
    padding: 0 30px;
    margin-bottom: -35px !important;
    display: flex;
    align-items: flex-end !important;
    top: 183px;
}
.basket-footer {
    position: relative;
}

.total-badge-circle {
    right: 12px;
    background: #59A752;
    color: #fff;
    width: 65px;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 21px;
    font-weight: 700;
    font-family: 'Barlow';
}
.zakat-form-box {
    border: 1px solid #ddd;
    box-shadow: 2px 15px 10px -3px #ddd;
    border-radius: 6px;
}

.zakat-form-box .input-group {
    margin-bottom: 6px;
}
.input-group .input-group-text {
    background: #59A752;
    padding: 5px 23px;
    font-size: 22px;
    font-weight: 500;
    font-family: Barlow;
    height: 50px;
}
#donationForm .input-group {
    display: flex;
    flex-wrap: nowrap;
}
.zakat-form-box .form-control {
    background: #E5E5E5;
    color: #999999;
    font-size: 14px;
}
.form-row select {
    background: transparent;
    padding: 0 !important;
    position: relative;
}
.donation-form-card .form-row select {
    background: transparent;
    position: relative;
    color: #141414;
    font-size: 13px;
}
.zakat-form-box .form-row select {
    width: 16%;
}
.zakat-form-box .amount {
    border: 1px solid #E5E5E5;
    background: #E5E5E5;
    color: #141414;
    font-family: 'Archivo';
}
.zakat-form-box select {
    background: #E5E5E5;
    color: #999999;
    font-size: 14px;
    font-weight: 600;
}
.form-check .form-check-label {
    color: #666666;
    font-size: 14px;
}
.form-check a {
    text-decoration: none;
    font-weight: 500;
}
.left-tabs.d-flex {
    border: 1px solid #E5E5E5;
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
}


.progress-fill {
    transition: width 0.1s linear;
}
.custom-progress-bar {
    position: relative;
    height: 8px;
    background: #e9ecef;
    border-radius: 48px;
    display: flex;
    align-items: center;
}

.zakat-benefits-section {
    background-color: #0e870e03;
    padding: 100px 0;
}

.sub-title-zakat {
    color: #141414;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600;
    font-family: 'Archivo';
}

.section-title-zakat {
    font-size: 55px;
    color: #020D19;
    line-height: 1;
    font-weight: 800;
    font-family: 'Barlow';
}

.section-title-zakat .text-success {
    color: #59A752 !important;
}

.benefit-image-wrapper {
    position: relative;
    padding-right: 50px;
    padding-bottom: 50px;
}

.benefit-image-wrapper .main-img-card {
    position: relative;
    border-radius: 20px;
}

.main-img-card img {
    width: 100%;
    height: 700px;
    object-fit: cover;
}

.donate-now-vertical {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    background-color: #d17a43; 
    color: white;
    padding: 20px 10px;
    border-radius: 10px;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.overlap-img {
    position: absolute;
    bottom: 21%;
    right: -49px;
    width: 274px;
    height: 267px;
    z-index: 2;
    border-radius: 50%;
}

.overlap-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.benefit-item {
    transition: all 0.3s ease;
}

.benefit-text h4 {
    font-size: 20px;
    color: #020D19;
}

.benefit-text p {
    font-size: 16px;
    line-height: 1.6;
    color: #828282 !important;
    width: 81%;
    margin-top: 12px;
    font-weight: 400;
}
.zakat-benefits-section .benefit-content {
    padding-left: 53px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.main-img-card a.t-btn.t-btn-brown.t-btn-brown-gradient.t-btn-border-radius-none {
    position: absolute;
    right: -68px;
    top: 14%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    background-color: #d17a43;
    padding: 32px 13px;
    border-radius: 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
}
.benefit-icon-box img {
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.emergency-fund-section {
    background-color: #ffffff;
    padding: 100px 0;
}

.emergency-fund-section h2 {
    color: #141414;
    line-height: 1;
    font-size: 55px;
    font-family: 'Barlow';
    font-weight: 800;
}
.section-header p {
    color: #171717;
    font-size: 18px;
    font-family: 'Archivo';
    font-weight: 400;
}
.emergency-fund-section .text-success {
    color: #5cb85c !important;
}

.gallery-img-wrapper img, 
.col-12 img {
    transition: transform 0.3s ease;
    display: block;
}

.gallery-img-wrapper img:hover, 
.col-12 img:hover {
    transform: scale(1.02); 
}

.description-content p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #171717;
    font-family: 'Archivo';
    width: 94%;
}

.btn-donate-custom {
    background-color: #835233; 
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 1px;
    transition: background 0.3s ease;
}

.btn-donate-custom:hover {
    background-color: #6d442a;
    color: #fff;
}
.section-header span {
    color: #141414;
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Archivo';
    font-weight: 700;
}
.emergency-btn a {
    display: flex;
    align-items: center;
    width: 29%;
    justify-content: space-between;
    font-size: 12px;
    font-family: 'Archivo';
    text-transform: uppercase;
}

/* zakat culcalation page css */
.phone-icon-bg {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.calculator-form-container input {
    border: 1px solid #eee;
    padding: 12px;
    font-size: 14px;
}

.calculator-form-container input:focus {
    box-shadow: none;
    border-color: #5cb85c;
}

.btn-donate-brown {
    background-color: #7C4A25;
    border: none;
    border-radius: 6px;
    width: 45%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-donate-brown:hover {
    background-color: #7C4A25;;
}
.result-container .btn-outline-success {
    border-color: #59A752;
    color: #59A752;
    font-size: 18px;
    padding: 11px 26px;
    width: 45%;
}
.result-container .btn-outline-success:hover {
    color: #fff !important;
}

.input-group-text {
    border: none;
}
.zakat-calculator-section {
    padding: 100px 0;
}
.contact-card {
    position: relative;
    overflow: hidden;
    height: 334px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contact-card::before {
    content: '';
    position: absolute;
    background-image: url(../images/globe-img.png);
    width: 373px;
    height: 300px;
    left: -182px;
    top: 46%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
.contact-card h3 {
    font-size: 35px;
    font-weight: 900;
    font-family: 'Barlow';
}
.phone-icon-bg img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}
.contact-card p {
    font-size: 17px;
    font-family: 'Barlow';
    font-weight: 500;
    margin-top: 20px;
}
.contact-card h4 {
    font-size: 45px;
    font-family: 'Barlow';
    font-weight: 700 !important;
}
.info-card h6 {
    font-size: 23px;
    font-family: 'Archivo';
    color: #000;
}
.info-card p.text-muted.small {
    color: #171717 !important;
    font-size: 18px;
    margin: 10px 2px;
}
.info-card .btn-outline-success {
    border-color: #59A752;
    color: #59A752;
    font-size: 18px;
    padding: 7px 56px;
    border-radius: 5px;
    margin-top: 12px;
}
.info-card .btn-outline-success:hover {
    background-color: #59A752;
    color: #fff !important;
}
.calculator-form-container {
    background: #59a7520d !important;
    border-radius: 10px;
}
.calculator-form-container span {
    color: #141414;
    font-size: 18px;
    font-family: 'Archivo';
}
.calculator-form-container h2 {
    font-size: 50px;
    color: #141414;
    font-family: 'Barlow';
}
.calculator-form-container p {
    color: #171717;
    font-size: 18px;
    font-family: 'Archivo';
    line-height: 1.2;
}
.calculation-form-zakat h5 {
    font-size: 44px;
    color: #141414;
    font-family: 'Barlow';
}
.calculation-form-zakat p {
    color: #1717176B;
    font-size: 16px;
    font-family: 'Archivo';
}
.calculation-form-zakat label {
    color: #1F1F1F;
    font-size: 17px;
    font-family: 'Archivo';
    margin-bottom: 7px !important;
}
.calculation-form-zakat input {
    background: #fff;
    border: 1px solid #DBDBDB;
}
.calculation-form-zakat span {
    background: #59A752 !important;
}
.calculation-form-zakat button {
    BACKGROUND: #59A752;
    padding: 15px;
    color: #fff;
    border-radius: 5px;
}
.calculation-form-zakat button:hover {
    background: #000;
    color: #fff;
}
.result-container h3.fw-bold {
    font-size: 55px;
    color: #141414;
    font-family: 'Barlow';
    font-weight: 700;
}
.result-container {
    border: 1px solid #dddddd82;
}
.result-container h1 {
    color: #59A752;
}


/* checkout page css */
.checkout-wrapper {
  padding: 60px 0;
}

.checkout-form-card {
    padding: 20px 0;
}

.checkout-steps {
    display: inline-flex;
    gap: 10px;
    background: #fff;
    padding: 10px 16px;
    border-radius: 10px;
    box-shadow: 12px 4px 34px #59A7524D;
    align-items: center;
}

.checkout-steps .step {
    font-size: 17px;
    color: #8F8F8F;
}

.checkout-steps .step.active {
  color: #59A752;
  font-weight: 600;
}

.checkout-form-card .checkout-title {
    font-size: 55px;
    margin: 20px 0 30px;
    color: #141414;
    font-weight: 700;
    font-family: Barlow;
}

.checkout-title span {
  color: #59A752;
}

.checkout-form-card label {
    font-size: 17px;
    font-weight: 500;
    color: #1F1F1F;
    margin-bottom: 5px;
    font-family: 'Archivo';
}
.checkout-form-card .form-control:focus {
    box-shadow: none;
    border-color: #5fae4e;
}

.checkout-form-card .form-control {
    border-radius: 10px;
    border-color: #AAAAAAAA;
    background: #fff;
}

.checkout-form-card .btn-green {
    background: #59A752;
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
    padding: 11px;
    font-family: 'Archivo';
    font-size: 18px;
}
.checkout-form-card .btn-green:hover {
    background: #000;
    color: #fff;
}
.donation-summary-card {
    background: #59A752;
    border-radius: 10px;
    padding: 25px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 482px;
    max-width: 100%;
    margin-top: 118px;
    margin-left: 28px;
}

.donation-summary-card .summary-item {
    background: #EEF6EE2E;
    border-radius: 16px;
    padding: 24px 15px;
    display: flex;
    gap: 15px;
    position: relative;
}

.summary-item img {
    width: 165px;
    height: 150px;
    border-radius: 12px;
    object-fit: cover;
}

.summary-content h3 {
    font-size: 35px;
    font-weight: 700;
    font-family: Barlow;
}

.summary-content .purpose {
    font-size: 12px;
    font-family: 'Archivo';
    font-weight: 400;
}

.summary-content .type {
    font-size: 12px;
    color: #ffffffd6;
    font-family: 'Archivo';
}

.summary-item .remove {
    position: absolute;
    top: -9px;
    right: 0px;
    background: #F72F1A;
    width: 24px;
    height: 23px;
    border-radius: 50%;
    /* text-align: center; */
    cursor: pointer;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-appeals .two_align_box_full_gap {
    flex-direction: row-reverse;
}
.checkout-steps .general-info-steps {
    display: flex;
    align-items: center;
    gap: 8px;
}
.general-info-steps img {
    background: #59A752;
    border-radius: 50%;
    object-fit: cover;
    padding: 5px 10px;
    width: 27px;
    height: 25px;
}
.genral-payment-step img {
    border: 1px solid #59A752;
    width: 33px;
    height: 31px;
    border-radius: 50%;
    padding: 8px 7px;
    object-fit: contain;
}
.checkout-steps span.arrow {
    font-size: 23px;
    color: #A8A8A8;
    margin-right: 15px;
}
.checkout-steps .genral-payment-step {
    display: flex;
    align-items: center;
    gap: 10px;
}
.donation-summary-card h4 {
    font-size: 24px;
    font-family: 'Archivo';
    font-weight: 600;
    border-bottom: 1px solid #B4B4B43D;
    padding-bottom: 6px;
}

.gift-aid-desc {
    font-size: 18px;
    margin-bottom: 20px;
    color: #666666;
}

.gift-aid-highlight {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    text-align: center;
    color: #000;
}

.gift-aid-checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.gift-aid-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: #59A752;
}

.gift-aid-checkbox label {
    font-size: 13px;
    color: #666666;
    line-height: 1.5;
    font-family: 'Archivo';
    margin-bottom: 0;
    font-style: italic;
}

.gift-aid-note {
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    font-family: 'Archivo';
}
.zakat-form-box select:focus {
    border-color: #59A752 !important;
    box-shadow: none;
}
.zakat-form-box .form-control:focus {
    box-shadow: none;
    border-color: #59a752;
}

.payment-step .payment-tabs {
    display: flex;
    background: #f8f9fa;
    border-radius: 0;
    overflow: hidden;
    margin-top: 20px;
}

.payment-tabs .pay-tab-btn {
    flex: 1;
    padding: 15px;
    border: none;
    background: #fff;
    color: #59A752;
    font-weight: 500;
    font-size: 20px;
    font-family: 'Archivo';
}

.pay-tab-btn.active {
    background: #59A752;
    color: #fff;
    border-radius: 10px;
}
.payment-method-box {
    border: 1px solid #59A752;
    border-radius: 20px;
    padding: 20px;
    background: #59a75515;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 22px;
}

.method-card {
    border: 1px solid #E4E4E4;
    padding: 15px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 13px !important;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-direction: row;
}
.method-card.active {
    border-color: #59A752;
    background: #fff;
    color: #59A752;
}
.payment-method-box .field-title {
    font-size: 20px;
    font-weight: bold;
    color: #1F1E23;
    font-family: 'Archivo';
}
.payment-tabs .pay-tab-btn.active img {
    filter: brightness(100);
}
.checkout-agreements .form-check .form-check-label {
    color: #666666;
    font-size: 16px;
}
.checkout-agreements .form-check .form-check-label a {
    color: #59a752;
}
.payment-step p {
    color: #666666;
    font-size: 14px;
}
.payment-step a {
    color: #59a752;
    text-decoration: none;
}
.payment-method-box .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 100%;
}
.express-payment-box {
    padding: 29px;
}
.express-payment-box button {
    background: #fff;
    padding: 12px !important;
}
.express-payment-box .btn.active-payment {
    border-color: #59A752 !important;
    border-width: 1px;
}

/* Thankyou modal css */
.custom-thanks-modal {
    border-radius: 15px;
    border: none;
    position: relative;
}

.close-modal-btn {
    position: absolute;
    right: -15px;
    top: -15px;
    background: #ffffff;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 1056;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal-btn i {
    color: #59A752;
    font-size: 18px;
    font-weight: bold;
}

.modal-body .thanks-title {
    font-size: 34px;
    font-weight: 700;
    color: #000;
    font-family: 'Archivo';
}

.thanks-title span {
    color: #59A752;
}

.thanks-subtitle {
    font-weight: 600;
    color: #202020;
    margin-bottom: 20px;
    font-size: 14px;
    font-family: 'Archivo';
}

.thanks-desc {
    color: #5E5E5E;
    font-size: 14px;
    line-height: 1.6;
    max-width: 634px;
    margin: 0 auto 30px auto;
    font-family: 'Archivo';
    font-weight: 400;
}
.thanks-action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.btn-home {
    text-decoration: none;
    color: #59A752;
    border: 1px solid #59A752;
    padding: 12px 19px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
    font-family: 'Archivo';
    font-size: 18px;
}

.btn-home:hover {
    background: #59A752;
    color: #fff;
}
.thanks-action-buttons a {
    margin-top: 0 !important;
}
.thanks-icon-wrapper img {
    width: 116px;
    height: 116px;
    object-fit: cover;
}

/* Cart basket css */
.donation-basket-popup {
    position: absolute;
    top: 58px;
    right: 0;
    width: 575px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 10px 10px 30px 9px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 9999;
    padding: 0px;
    height: auto;
    overflow-y: auto;
}
.donation-basket-popup::-webkit-scrollbar {
    width: 5px; 
}

.donation-basket-popup::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.donation-basket-popup::-webkit-scrollbar-thumb {
    background: #59A752;
    border-radius: 10px;
}

.donation-basket-popup::-webkit-scrollbar-thumb:hover {
    background: #468c40; 
}

.donation-basket-popup {
    scrollbar-width: thin;
    scrollbar-color: #59A752 #f1f1f1;
}

.donation-basket-popup .cart_inner_body {
    padding: 25px;
}


.donation-basket-popup.active {
    display: block;
}

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 1040;
}

.cart-overlay.active {
    display: block;
}

.basket-header h2 span { 
    color: #59A752; 
}
.close-basket {
    background: #59a75218;
    border: none;
    font-size: 28px;
    color: #59A752;
    cursor: pointer;
    position: absolute;
    top: 14px;
    right: 20px;
    border-radius: 50%;
    width: 31px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.basket-item-card {
    background: #EEF6EE;
    border: 1px solid #EEF6EE;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    margin-bottom: 21px;
}

.item-price-circle {
    background: #59A752;
    color: #fff;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: absolute;
    top: -21px;
    right: -1px;
    font-size: 21px;
    font-family: 'Barlow';
}


.total-badge {
    background: #59A752;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

.gift-aid-box {
    border: 1px solid #59A752;
    border-radius: 10px;
    padding: 18px;
    display: flex;
    gap: 21px;
    margin: 15px 0 112px;
    align-items: flex-start;
}
.gift-aid-box strong {
    color: #59A752;
    font-size: 14px;
    font-family: 'Archivo';
    font-weight: 500;
}
.gift-aid-box p {
    color: #7B7B7B;
    font-size: 12px;
    width: 80%;
}
.gift-aid-box input {
    width: 21px;
    height: 30px;
}
.basket-actions {
    display: flex;
    gap: 10px;
    padding: 50px 30px 30px 30px;
    background: #E7FBE7;
    width: 100%;
    border-radius: 0 0 10px 10px;
    margin-top: 182px;
}
.basket-header span {
    font-size: 44px;
    color: #59A752;
    background: none;
    font-weight: 700;
}
.basket-header h2 {
    font-size: 44px;
    font-weight: 700;
    font-family: 'Barlow';
    line-height: 1;
    color: #141414;
}

.btn-donate-now {
    background: #BC6C33;
    color: white;
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
}

.btn-another-donation {
    border: 1px solid #59A752;
    color: #59A752;
    flex: 1;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    text-decoration: none;
}
.basket-body .basket-item-card img {
    width: 181px;
    border-radius: 10px;
    object-fit: cover;
    height: 150px;
}
.basket-items-wrapper p.d-block {
    font-size: 12px;
    color: #00000088;
    font-family: 'Archivo';
    margin-bottom: 5px;
}
.basket-item-card .cart-btn-grp .t-btn {
    width: 144px !important;
    font-size: 14px !important;
    color: #fff !important;
    font-family: 'Archivo';
    border: none !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    margin: 0;
    height: 0 !important;
    padding: 22px 7px !important;
}
.cart-btn-grp button {
    padding: 10px;
    width: 131px;
    border: 1px solid #F72F1A;
    color: #F72F1A;
    font-size: 14px;
    font-family: 'Archivo';
    font-weight: 500;
}
.cart-btn-grp button:hover {
    background: #000;
    color: #fff;
}
.cart-btn-grp {
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 20px;
}
.basket-actions .btn-another-donation {
    font-size: 17px !important;
    color: #59a752;
    font-family: 'Archivo';
    font-weight: 500;
    background: transparent !important;
}
.basket-actions .t-btn {
    width: 214px !important;
    margin: 0 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 17px !important;
    font-family: 'Archivo';
}

/* mu_css_start */


.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider {
    overflow: visible !important;
}

.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider .slick-list.draggable {
    overflow: visible;
}

.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider .form-box {
    box-shadow: 0px 0px 15px 5px #00000024;
}

.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider .text_box .text h2 {
    padding-bottom: 150px;
}

.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider button.custom-arrow.slick-arrow {
    bottom: 50px !important;
}

.photo_gallery_sec {
    padding: 220px 0 100px;
}

.building_hope_sec {
    padding: 50px 0;
}

.building_hope_sec .imge-box {
    display: flex;
    gap: 20px;
}

.building_hope_sec .three_imge_boxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 50px;
}

.building_hope_sec .three_imge_boxes .imge-box:nth-child(2) {
    background-color: #ff000000;
    border: 1px solid #00000024;
    border-right: 0;
    border-left: 0;
    padding: 30px 0;
    margin: 15px 0;
}

.building_hope_sec .imge-box .img {
    width: 22%;
}

.building_hope_sec .imge-box .text h5 {
    font-size: 20px;
    font-weight: 600;
}

.building_hope_sec .text h2 {
    margin-bottom: 30px;
}

.building_hope_sec .imge-box .text p {
    font-size: 16px;
    color: #828282;
}

.building_hope_sec .right_img_with_btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.building_hope_sec .right_img_with_btn img.img_01_right,.building_hope_sec .right_img_with_btn img.img_02_right {
    position: absolute;
}


.building_hope_sec .right_img_with_btn img.img_02_right {
    right: -50px;
    top: 50px;
}

.building_hope_sec .right_img_with_btn img.img_01_right {
    bottom: 100px;
    left: 0px;
}

.building_hope_sec .right_img_with_btn .btn {
    position: absolute;
    transform: rotate(-90deg);
    left: -70px;
    top: 200px;
    padding: 0;
}

.building_hope_sec .right_img_with_btn .btn a.t-btn.t-btn-brown.t-btn_uppercase {
    text-transform: uppercase;
    width: 250px;
    display: flex;
    justify-content: space-between;
}

.clean_water_sec.padding-80 {
    background-color: #F8FBF8;
}



.clean_water_sec.padding-80 .imges_box .text-box {
    position: absolute;
}

.clean_water_sec.padding-80 .imges_box img {
    border-radius: 25px;
}


.clean_water_sec.padding-80 .imges_box {
    display: flex;
    width: 100%;
    align-items: flex-end;
    position: relative;
    gap: 20px;
}

.clean_water_sec.padding-80 .imges_box .text-box {
    position: absolute;
}

.clean_water_sec.padding-80 .imges_box .text-box {
    top: 20px;
    background-color: #59A752;
    border-radius: 20px;
    padding: 40px;
    border: 5px solid #E7F3E7;
    width: 75%;
}

.clean_water_sec.padding-80 .imges_box .text-box img {
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.clean_water_sec.padding-80 .imges_box .text-box p {
    color: white;
    font-size: 18px;
    font-weight: 500;
}
.clean_water_sec img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* FIX: images column se bahar na jayen */
.clean_water_sec.padding-80 .imges_box {
    overflow: hidden;
}

.clean_water_sec.padding-80 .imges_box .image_large {
    width: 56%;
    max-width: 100%;
    height: 600px;
}

.clean_water_sec.padding-80 .text {
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
}

.clean_water_sec.padding-80 .text p {
    font-size: 18px;
}

.t-btn_uppercase{

    text-transform: uppercase;
}

.clean_water_sec.padding-80 .text p.bold_p_link_p {
    font-size: 16px;
}


.clean_water_sec.padding-80 .text p.bold_p_link_p a {
    color: black;
    font-weight: 600;
    transition: .3s;
}

.clean_water_sec.padding-80 .text p.bold_p_link_p a:hover {
    color: #59a752;
}


.helping_each_other_sec.padding-80 .img-box {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100%;
    align-items: center;
}

.helping_each_other_sec.padding-80 .img-box .img,.helping_each_other_sec.padding-80 .img-box .img img {
    width: 95%;
    height: 320px;
    object-fit: cover;
    border-radius: 30px;
}

.helping_each_other_sec.padding-80 .img-box .item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-right: 30%;
}

.helping_each_other_sec.padding-80 .img-box .item .counter_align_text {
    display: flex;
}

.helping_each_other_sec.padding-80 .img-box .item .counter_align_text h1 {
    color: #7C4A25;
    font-size: 55px;
    font-weight: 700;
    margin: 0;
}

.helping_each_other_sec.padding-80 .img-box .item h3.text {
    font-size: 20px;
    font-weight: 700;
}

.helping_each_other_sec.padding-80 .img-box .item p {
    font-size: 16px;
    color: #828282;
}

header .hamburger_menu_box {
    display: none;
}

.appeals_sec .img-box {
    margin-bottom: 20px;
}

.menu-close-btn {
        display: none; /* Desktop pe hide */
        font-size: 40px;
        cursor: pointer;
        text-align: right;
        padding: 10px 20px;
        color: #000;
        line-height: 1;
      }
      
      .basket-actions.d-flex.gap-2 a {
    width: 48% !important;
}

.basket-actions.d-flex.gap-2 {
    gap: 20px !important;
}

.contact_form_css button.t-btn.btn.w-100.mt-4.fw-bold {
    background-color: #59A752;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 400 !important;
    transition: .3s;
}

.contact_form_css button.t-btn.btn.w-100.mt-4.fw-bold:hover {
    background-color: black !important;
}

.detail_content_privacy .text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/*work for good page css*/
.arf-section {
    padding: 80px 0;
}

.custom-col {
    flex: 1;
    min-width: 300px; 
}

.arf-section .row {
    align-items: center;
}
.image-side .main-graphic {
    max-width: 100%;
    height: auto;
    display: block;
}

.custom-col .sub-heading {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #141414;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-family: 'Archivo';
}

.custom-col .main-title {
    font-size: 55px;
    line-height: 1.1;
    font-weight: 800;
    color: #141414;
    margin-bottom: 25px;
    font-family: 'Archivo';
}

.custom-col .description {
    font-size: 18px;
    line-height: 1.6;
    color: #171717;
    margin-bottom: 30px;
    font-family: 'Archivo';
    width: 543px;
}

.custom-col .green-text {
    color: #59A752;
}

.impact-section {
    background-image: url(../images/sudan-back.png);
    background-size: cover;
    background-position: center;
    position: relative;
    color: white;
    margin-bottom: 213px;
}


.impact-overlay {
    padding: 80px 0 49px 0;
}

.impact-header {
    margin-bottom: 74px;
}

.impact-title {
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    font-family: 'Archivo';
}

.impact-subtitle {
    font-size: 18px;
    max-width: 842px;
    margin: 0 auto;
    line-height: 1.5;
    text-align: center;
}

.custom-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: -188px;
}

.impact-card {
    background-color: white;
    padding: 40px 20px;
    border-radius: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 303px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: #505050;
}

.card-number {
    width: 56px;
    height: 55px;
    border: 1px solid #59A752;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #59A752;
    font-weight: bold;
    font-size: 22px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    font-family: 'Archivo';
}

.card-text {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.impact-card:hover, 
.impact-card.active {
    background-color: #59A752;
    color: white;
    transform: translateY(-10px); 
}

.impact-card:hover .card-number,
.impact-card.active .card-number {
    border-color: white;
    color: white;
}



.start_donation_sec.blogs_sec .image-box {
    background-color: transparent;
    border: 1px solid #00000045;
}

.start_donation_sec.blogs_sec .image-box .text {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.start_donation_sec.blogs_sec .image-box .text a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    width: auto;
}

.start_donation_sec.blogs_sec .image-box .text h4 {
    font-size: 16px;
    color: #17171763;
}

.start_donation_sec.blogs_sec .image-box .text h5 {
    font-size: 25px;
    font-weight: 700;
}

.start_donation_sec.blogs_sec .image-box .text p {
    line-height: 1.7em;

}

.blogs_details_sec .user_align_etc {
    width: 170px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.blogs_details_sec .user_align_etc p {
    font-size: 16px;
}


.blogs_details_sec  .two_align_box_full_gap .text h6 {
    font-size: 24px;
    color: #171717b5;
    font-weight: 400;
}

.blogs_details_sec {
    position: relative;
}


.blogs_details_sec .large_box_full_details .img-box img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
}

.blogs_details_sec .large_box_full_details .text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
    align-items: flex-start;
}

.blogs_details_sec .large_box_full_details .text h3 {
    font-size: 25px;
    margin: 0;
}

.blogs_details_sec .large_box_full_details .text a.t-btn.t-btn-brown.uppercase_text {
    width: 30%;
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.events_sec {
    position: relative;
}

.events_sec .events_form_large_box {
    position: relative;
}

.events_sec .events_form_large_box .line_box {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
}

.events_sec .events_form_large_box .line_box p {
    width: 100px;
    font-size: 18px;
}

.events_sec .events_form_large_box .line_box .line {
    background-color: #D2D2D2;
    width: 100%;
    height: 1px;
}

.events_sec .events_form_large_box .event_parent_box {
    display: flex;
    justify-content: space-between;
    margin: 25px 0 40px;
    position: relative;
    padding: 60px 0 20px;
}

.events_sec .events_form_large_box .event_parent_box .text-box {
    display: flex;
    width: 60%;
    flex-direction: row;
    flex-wrap: wrap;
}

.events_sec .events_form_large_box .event_parent_box .img_box {
    width: 40%;
}

.events_sec .events_form_large_box .event_parent_box .text-box .date_box {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box {
    width: 80%;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text p.date_time_etc {
    font-size: 16px;
    color: #17171763;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text h3 {
    font-size: 25px;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text ul {
    list-style: none;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text ul li {
    display: flex;
    gap: 10px;
    color: #764723DB;
    font-size: 16px;
    align-items: center;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text ul li i {
    font-size: 20px;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text p {
    font-size: 18px;
}

.events_sec .events_form_large_box .event_parent_box .text-box .content_box .text a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    display: flex;
    width: auto;
}

.events_sec .events_form_large_box .event_parent_box .text-box .date_box p {
    font-size: 16px;
    color: #17171763;
}

.events_sec .events_form_large_box .event_parent_box .text-box .date_box h6 {
    font-size: 25px;
    font-weight: 700;
}

.events_sec .events_form_large_box .event_parent_box .img_box img {
    width: 100%;
    height: 280px;
    border-radius: 10px;
    object-fit: cover;
}

.events_sec form.events_filter_form {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.events_sec form.events_filter_form .one_large_box_search {
    width: 75%;
    position: relative;
}

.events_sec form.events_filter_form .one_large_box_search input {
    width: 100%;
    height: 50px;
    padding: 20px;
    text-indent: 30px;
    border-radius: 10px;
    border: 1px solid #00000063;
}

.events_sec form.events_filter_form .one_large_box_search button.find_events_btn {
    position: absolute;
    right: 0;
    height: 50px;
    background-color: #764723;
    color: white;
    border: none;
    border-radius: 0px 10px 10px 0px;
    padding: 0px 25px;
    transition: .3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.events_sec form.events_filter_form .one_large_box_search button.find_events_btn i {
    font-size: 14px;
    margin: 0;
    padding: 0;
    margin-top: 1px !important;
}

.events_sec form.events_filter_form .one_large_box_search button.find_events_btn:hover {
    background-color: #59a76e;
}

.events_sec form.events_filter_form .tow_selects_evnets_inline {
    display: flex;
    gap: 20px;
    position: relative;
}

.events_sec form.events_filter_form .tow_selects_evnets_inline .filter_item select {
    border: none;
    font-size: 15px;
    width: max-content;
}

.events_sec form.events_filter_form .tow_selects_evnets_inline .filter_item:nth-child(1)::after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    right: -10px;
    background-color: black;
}

.events_sec form.events_filter_form .tow_selects_evnets_inline .filter_item {
    position: relative;
}

.events_sec form.events_filter_form .tow_selects_evnets_inline .filter_item select:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.events_sec form.events_filter_form i.fa-solid.fa-magnifying-glass {
    position: absolute;
    left: 20px;
    top: 13px;
}

.blogs_details_sec.events_details_sec .text h5 {
    text-transform: uppercase;
    font-size: 18px;
}

.blogs_details_sec.events_details_sec .user_align_etc {
    width: 200px;
}

.blogs_details_sec.events_details_sec .user_align_etc a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text i {
    transform: rotate(-180deg);
}

.annual-reports-sec {
    position: relative;
}

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

a.download_btn {
    background: linear-gradient(90deg, rgba(221, 114, 56, 1) 0%, rgba(166, 86, 41, 1) 100%);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 0px;
    transition: 0.3s;
    color: white;
    text-decoration: none;
    padding: 20px 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
}

a.download_btn:hover {
    background: linear-gradient(90deg, rgba(89, 167, 82, 1) 0%, rgba(9, 77, 0, 1) 100%);
}

.annual-reports-sec .two-things-align {
    margin-bottom: 15px;
}

.annual-reports-sec .main-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.annual-reports-sec .main-box .img-box {
    width: 35%;
}

.annual-reports-sec .main-box .text.text-box {
    width: 61%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.annual-reports-sec .main-box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.annual-reports-sec .main-box .text.text-box p {
    font-size: 18px;
}

.annual-reports-sec .main-box .text.text-box h4 {
    font-weight: 700;
}


.annual-reports-sec .annual-reports-boxes .annual-reports-box {
    border-bottom: 1px solid #00000024;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.annual-reports-sec .annual-reports-boxes .annual-reports-box:last-child {
    border: none;
}

.two-radio-img-styling {
    display: flex;
    gap: 40px;
}

.two-radio-img-styling .radio-box {
    position: relative;
}

.two-radio-img-styling .radio-box input {
    display: none;
}

.two-radio-img-styling .radio-box label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.two-radio-img-styling .radio-box label .inline {
    display: flex;
    flex-direction: column;
    background-color: #ff000000;
}

.two-radio-img-styling .radio-box label .inline span {
    background-color: #ff000000 !important;
}

.two-radio-img-styling .radio-box input:checked+label img {
    filter: none !important;
}

.two-radio-img-styling .radio-box img {
    filter: grayscale(1) !important;
}


.two-radio-img-styling .radio-box input:checked+label .inline span.name-of-thing {
    color: #59A752;
}

.two-radio-img-styling .radio-box  .inline span.name-of-thing {
    font-weight: 600;
    font-size: 20px;
}

.two-radio-img-styling .radio-box .inline span.price {
    font-size: 18px;
    color: #171717a6;
}

button.t-btn.t-btn-green {
    background-color: #59A752;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: white;
    padding: 15px;
}

button.t-btn.t-btn-green:hover {
    background-color: black;
}

.aqeeqah-sec-03 {
    position: relative;
}

.aqeeqah-sec-03 .table-box,.aqeeqah-sec-03 .table-box table {
    width: 100%;
    border: 1px solid #0000001c;
    border-radius: 10px;
    overflow: hidden;
}

.aqeeqah-sec-03 .table-box tr th,.aqeeqah-sec-03 .table-box tr td {
    padding: 10px !important;
    text-align: center;
}

.aqeeqah-sec-03 .table-box tr th {
    background-color: #59A752;
    color: white;
    font-size: 25px;
    font-weight: 700;
}

.aqeeqah-sec-03 .table-box tr td {
    font-size: 25px;
    color: #363636;
}

.aqeeqah-sec-03 .table-box table tr {
    border-bottom: 1px solid #00000014;
}

.donate-your-clothes-sec-01 .text h2 {
    font-size: 45px;
}

.donate-your-clothes-sec-01 .text p:last-child {
    margin-top: 15px;
}

.building_hope_sec.donate-your-clothes-sec-02 .imge-box {
    gap: 0;
    padding: 0 !important;
    padding: 20px !important;
    border: 1px solid #0000002e !important;
    border-right: 0 !important;
    border-left: none !important;
    display: flex;
    align-items: center;
    border-top: none !important;
    margin: 0 !important;
}

.building_hope_sec.donate-your-clothes-sec-02 {
    background-color: #F6F6F6;
}

.building_hope_sec.donate-your-clothes-sec-02 .imge-box .img {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px;
}

.fundraise_section.give-hopes-sec-01 {
    background-color: white;
}

.give-hopes-sec-04 {
    padding-bottom: 300px;
}

.deployments-sec-01 .col-lg-4 .text h3 {
    font-size: 34px;
    font-weight: 600;
}

.deployments-sec-01 .col-lg-4 .text ul {
    margin-bottom: 25px !important;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 20px !important;
}

.deployments-sec-01 .col-lg-4 .text ul li {
    font-size: 18px;
}

.two-radio-align-yes-no {
    display: flex;
    gap: 20px;
    margin: 10px 0;
}

.two-radio-align-yes-no .form-check.form-check-inline {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}

.two-radio-align-yes-no .form-check.form-check-inline input {
    width: 15px !important;
    height: 15px !important;
    margin: 0;
    border: 1px solid #00000075;
    padding: 8px;
}

/* Hide default radio appearance */
.two-radio-align-yes-no .form-check-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  outline: none;
  margin-right: 8px;
}

/* Circle fill when checked */
.two-radio-align-yes-no .form-check-input:checked {
  border-color: #59A752;
  background-color: #59A752;
}

/* Optional: inner dot for better look */
.two-radio-align-yes-no .form-check-input:checked::after {
  content: '';
  width: 10px;
  height: 10px;
  background: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.deployments-form-box .many-checkbox-align {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    column-gap: 20px;
}

.deployments-form-box .many-checkbox-align .form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.deployments-form-box .many-checkbox-align .form-check input {
    margin: 0;
    width: 20px;
    height: 20px;
    padding: 0;
}

.deployments-form-box .many-checkbox-align .mt-2 {
    width: 100%;
}

.deployments-form-box .white-box-form {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid #00000024;
}

.deployments-form-box .white-box-form h5 {
    font-size: 20px;
}

/*.deployments-form-box .white-box-form label {*/
/*    margin-top: 15px;*/
/*}*/

.deployments-form-box .white-box-form textarea {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    height: 120px;
}

.deployments-form-box .many-checkbox-align-vertical {
    display: flex;
    flex-direction: column;
}

.what_we_do_sec.helping_each_sec.about_sec_01.deployments-sec-03 {
    background-color: white;
}
.values_sec.deployments-sec-04 {
    background-color: #F6F6F6;
}

.values_sec.deployments-sec-04 .img-box {
    height: 200px;
}

.fundraise-with-us-sec-01 .text h5 {
    margin: 30px 0 20px;
    font-size: 22px;
    font-weight: 600;
}

.fundraise-with-us-sec-01 .text ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 20px !important;
}

.fundraise-with-us-sec-01 .text ul li {
    font-size: 18px;
}

.fundraise-with-us-sec-02 .text.text-right {
    border-bottom: 1px solid #59a75247;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.fundraise-with-us-sec-02 .text p.new-p {
    margin-bottom: 20px;
}


.fundraise-with-us-sec-03 .image-box {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #0000002b;
    padding: 30px 15px;
    transition: .3s;
}

.fundraise-with-us-sec-03 .image-box .text h4 {
    font-size: 25px;
    transition: .3s;
}

.fundraise-with-us-sec-03 .image-box .text p {
    color: #505050;
    font-size: 16px;
    transition: .3s;
}

.fundraise-with-us-sec-03 .image-box:hover {
    background-color: #59A752;
    box-shadow: 1px 1px 10px 4px #59a75233;
    border-color: #59A752;
}

.fundraise-with-us-sec-03 .image-box:hover img {
    filter: brightness(10.5);
}

.fundraise-with-us-sec-03 .image-box:hover h4,.fundraise-with-us-sec-03 .image-box:hover p {
    color: white;
}

.fundraise-with-us-sec-03 .image-box img {
    transition: .3s;
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.padding-b-0{
    padding-bottom: 0 !important;
}

.our-impact-sec-02 {
    padding: 80px 0;
    background-repeat: no-repeat;
    background-size: cover;
}

.our-impact-sec-02 div#counter {
    display: flex;
    justify-content: space-between;
}

.our-impact-sec-02 div#counter h1,.our-impact-sec-02 div#counter h3 {
    color: white;
}

.our-impact-sec-02 div#counter .item {
    display: flex;
    flex-direction: column;
    width: 17%;
    position: relative;
}

.our-impact-sec-02 div#counter .item .counter_align_text {
    display: flex;
}

.our-impact-sec-02 div#counter .item .counter_align_text h1 {
    font-size: 60px;
    font-weight: 700;
}

.our-impact-sec-02 div#counter .item h3.text {
    font-size: 20px;
    font-weight: 400;
}

.our-impact-sec-02 div#counter .item::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #ffffff40;
    position: absolute;
    right: -20%;
}

.our-impact-sec-02 div#counter .item:last-child::after {
    display: none;
}

.our-impact-sec-03 {
    position: relative;
}

.our-impact-sec-03 .img-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 0px;
}

.our-impact-sec-03 .img-box img {
    width: 100%;
    border-radius: 20px;
    height: 400px;
    object-fit: cover;
}

.our-impact-sec-03 .img-box  .text {
    position: absolute;
    bottom: 0;
    z-index: 9;
    padding: 20px;
}

.our-impact-sec-03 .img-box .text h4 {
    color: white;
    font-size: 20px;
}

.our-impact-sec-03 .img-box .text p {
    color: #CDCDCD;
    font-size: 16px;
    font-weight: 400;
}

.our_impact_sec_slider.blog_slider .col-md-4 {
    margin: 0 10px;
}

.our_impact_sec_slider.blog_slider ul.slick-dots {
    bottom: -50px;
}

.work-for-good-sec-01 {
    padding-top: 0 !important;
    background-color: #66339900;
}

.work-for-good-sec-01 .fundraiser-points .col-md-6 {
    width: 100% !important;
}

.work-for-good-sec-01 a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    width: max-content;
}

section.our-impact-sec-03.padding-80.work-for-good-sec-02 {
    background-color: #F6F6F6;
}

section.building_hope_sec.work-for-good-sec-03 .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

section.building_hope_sec.work-for-good-sec-03 .text h2 {
    margin: 0;
}

section.building_hope_sec.work-for-good-sec-03 .text p.hight-lited-text {
    color: #81bb7c;
}

section.building_hope_sec.work-for-good-sec-03 .text a.t-btn.t-btn-green.t-btn-green-outline.t-btn-large-text.captalize_text {
    max-width: max-content;
}

.slick_dots_styling ul.slick-dots {
    bottom: -45px;
}

.mission-vision-wrapper .mv-content {
    display: none !important;
}

.mission-vision-wrapper .mv-content.active {
    display: block !important;
}

.appeals_sec .row {
    margin-bottom: 12px;
}

.appeals_sec .img-box {
    height: 100%;
}

.appeals_sec .col-md-4 {
    padding-bottom: 20px;
}

.appeals_sec .img-box {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.appeals_sec .img-box .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.how_your_support .two_align_box_full_gap a.t-btn.t-btn-brown.t-btn-brown-outline.t-btn-large-text.captalize_text {
    width: 250px;
}

.item-purpose-head {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.2;
    font-family: Barlow;
}

#what_we_do_sec05 .row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.summary-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

 span.required_fields_mark {
    color: red;
}

 span.un-required_fields_mark {
    color: #00000000;
}

.clean_water_sec.padding-80 .text ul {
    margin-left: 20px !important;
}
.volunteer_section .volunteer_form_card {
    margin-left: 20px;
}


.volunteer_section .volunteer_form_card .calculator-form-container {
    padding: 30px !important;
}

.volunteer_section .volunteer_form_card .calculator-form-container h2.fw-bold.my-3 {
    margin-top: 0 !important;
}

.volunteer_section .volunteer_form_card .calculator-form-container h5 {
    font-weight: 600;
}

.volunteer_section .volunteer_form_card .calculator-form-container .white-box-form p {
    margin: 10px 0;
}

.volunteer_section .volunteer_form_card .calculator-form-container .white-box-form p.selection_of_things {
    margin-bottom: -5px;
    margin-top: 20px;
    color: #00000040;
}

.volunteer_section .volunteer_form_card .calculator-form-container .white-box-form.data-protection p {
    font-size: 14px;
    color: #000000b0;
}

.volunteer_section .volunteer_form_card .calculator-form-container .white-box-form.data-protection p.select_one_options_01 {
    font-size: 18px;
    color: black;
    margin-bottom: -5px;
    margin-top: 20px;
}

.volunteer_section .volunteer_form_card .calculator-form-container .form-check {
    display: flex;
    align-items: center;
    padding: 0;
    gap: 10px;
}


.volunteer_section .volunteer_form_card .calculator-form-container .form-check input.form-check-input {
    margin: 0;
    width: 20px;
    height: 20px;
}

.volunteer_section .volunteer_form_card .calculator-form-container .many-checkbox-align {
    gap: 10px !important;
    row-gap: 5px !important;
    margin-top: 15px;
    margin-bottom: 10px;
}
.volunteer_section .volunteer_form_card .calculator-form-container .many-checkbox-align label {
    display: flex;
    gap: 5px;
    margin: 0;
}

.deployments-form-box .white-box-form .row {
    row-gap: 20px;
}

.volunteer_section .volunteer_form_card .calculator-form-container .many-checkbox-align label {
    font-size: 16px;
    font-weight: 400;
    color: #0000009e;
}

label.form-check-label.label-light {
    font-weight: 400;
}

/*#fixed-header {*/
/*  background: #fff;*/
/*  box-shadow: 0 2px 10px rgba(0,0,0,.3);*/
/*  width: 100%;*/
/*  height: 80px;*/
/*  position: fixed;*/
/*  top: 0;*/
/*  left: 0;*/
/*  z-index: 1000;*/
/*  transform: translateY(-80px);*/
/*  transition: transform 0.3s ease;*/
/*}*/

#fixed-header {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
    width: 100%;
    position: fixed; 
    top: 0;
    left: 0;
    z-index: 1000;
    transform: translateY(0); 
    transition: background 0.3s ease;
}

#fixed-header.is-sticky {
  position: fixed !important;
  top: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.donation-summary-card .total-count-amount {
    display: flex;
    gap: 13px;
    align-items: center;
}

.checkout-steps .step.active, 
.checkout-steps .active span.step {
    color: #59A752 !important;
}

.checkout-steps .arrow.active {
    color: #59A752;
}

.stories-section {
    padding: 100px 0;
    background-color: #0E870E08;
}

.content-side {
     flex: 1; 
}

.content-side .title {
    font-size: 55px;
    color: #141414;
    margin-bottom: 30px;
    font-weight: 800;
    font-family: 'Barlow';
}

.content-side .title .highlight {
    color: #59A752; 
}

.tab-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.content-side .btn-tab {
    padding: 12px 25px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 18px;
    font-family: 'Barlow';
}

.content-side .btn-tab.active {
    background-color: #59A752;
    color: white;
}

.content-side .btn-tab:not(.active) {
    background-color: #59A7520D;
    color: #59A752;
}

.story-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #171717;
    font-family: 'Archivo';
    font-weight: 600;
}

.story-content p {
    line-height: 1.2;
    color: #171717;
    margin-bottom: 38px;
    max-width: 501px;
    font-size: 17px;
    font-family: 'Archivo';
}


.image-side {
    flex: 1;
    position: relative;
}

.main-img-wrapper {
    position: relative;
    width: 100%;
    max-width: 450px;
}

.main-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 22px;
}

.overlay-img-wrapper {
    position: absolute;
    bottom: 40px;
    right: -112px;
    width: 280px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.overlay-img {
    width: 100%;
    display: block;
}

.take-action-section {
    padding: 100px 0;
    background-color: #fff;
}

.action-image-container {
    position: relative;
    padding-bottom: 50px;
}

.img-main {
    width: 80%; 
    border-radius: 20px;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.img-overlay-box {
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 50%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.img-small {
    width: 100%;
    display: block;
}

.action-content .action-title {
    font-size: 55px;
    font-weight: 800;
    color: #141414;
    margin-bottom: 40px;
    font-family: 'Barlow';
}


.content-block {
    margin-bottom: 39px;
}

.take-action-section .content-block h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #171717;
    font-family: 'Archivo';
}

.content-block p {
    font-size: 18px;
    color: #171717;
    margin: 0;
    font-family: 'Archivo';
}

.supporters-section {
    padding: 100px 0;
    background-color: #0E870E08;
}

.supporters-text {
    padding-right: 20px;
}

.supporters-text .main-heading {
    font-size: 55px;
    font-weight: 800;
    color: #000;
    margin-bottom: 35px;
    line-height: 1;
    font-family: 'Barlow';
}

.info-block {
    margin-bottom: 25px;
}

.supporters-text .info-block h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #171717;
    font-family: 'Archivo';
}

.info-block p {
    font-size: 18px;
    color: #171717;
    line-height: 1.5;
    margin: 0;
    font-family: 'Archivo';
}

.supporters-text .final-call {
    font-size: 22px;
    margin: 25px 0;
    color: #171717;
    font-family: 'Archivo';
}

.btn-sponsor-global {
    display: inline-flex;
    align-items: center;
    background-color: #835532;
    color: white;
    text-decoration: none;
    padding: 12px 28px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 13px;
    transition: 0.3s;
}

.btn-sponsor-global span {
    margin-left: 10px;
    font-size: 20px;
}

.supporters-image-wrapper {
    position: relative;
    display: flex;
}

.supporters-image-wrapper .img-square-main {
    width: 74%;
    height: 629px;
    object-fit: cover;
    border-radius: 20px;
}

.circle-img-overlay {
    position: absolute;
    bottom: 167px;
    right: -20px;
    width: 280px;
    height: 280px;
    border: 8px solid white;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

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






@media only screen and (max-width: 1600px){

.text h1 {
    font-size: 65px;
}

.text h3 {
    font-size: 35px;
}

.text h2 {
    font-size: 40px;
}

.text p {
    font-size: 18px;
}

.appeals_sec .img-box .text h3 {
    font-size: 22px;
}

.need_your_help .text h4 {
    font-size: 25px;
}

.food_pack_sec .food_pack_box_large .text_box .text h2 {
    font-size: 40px;
    padding-right: 20%;
    padding-bottom: 70px;
}

.food_pack_sec .food_pack_box_large .box_content .text h3 {
    font-size: 25px;
}

.for_every_spend .col-md-12 .text h2 {
    font-size: 40px;
}

.start_donation_sec .image-box .text h5 {
    font-size: 22px;
}
.your_donation_sec .text h2 {
    font-size: 45px;
}

.your_donation_sec div#counter .item .counter_align_text h1 {
    font-size: 45px;
}

.footer_top_sec_three_box .hover_box .text h5 {
    font-size: 30px;
}

footer .text h6 {
    font-size: 20px;
}
footer .row .col-md-3:nth-child(2) {
    padding-left: 60px;
}

.footer_top_sec_three_box .hover_box {
    height: 450px;
    padding: 50px;
}

.need_your_help .vertical_align_space_btw h5 {
    font-size: 25px;
}

.page_title_sec {
    padding: 150px 0;
}

.what_we_do_sec.about_sec_01 div#counter .item .counter_align_text h1 {
    font-size: 40px;
}

.who_are_we div#nav-tabContent {
    right: -400px;
}

.who_are_we div#nav-tabContent img {
    width: 80%;
    height: 700px;
}
.donate_us_sec_bank .bank_details_box .text .img-box h3 {
    font-size: 25px;
    margin: 0;
}

.values_sec .img-box h6 {
    font-size: 18px;
    line-height: 1.5em;
}


.donation-hero-section h1.hero-title, .donation-hero-section h1.hero-title span {
    font-size: 45px !important;
}
.section-title-zakat {
    font-size: 45px;
}

.emergency-fund-section {
    padding: 50px 0;
}

.zakat-benefits-section {
    padding: 50px 0;
}

.zakat-calculator-section {
    padding: 50px 0;
}

.zakat-calculator-section h2.fw-bold.my-3, .zakat-calculator-section h2.fw-bold.my-3 span , .zakat-calculator-section h3.fw-bold, .zakat-calculator-section h5.fw-bold.mb-3, .zakat-calculator-section h1.display-3.fw-bold.my-3 {
    font-size: 40px !important;
}

.zakat-calculator-section h3.mb-4, .zakat-calculator-section h4.fw-bold {
    font-size: 30px;
}

.info-card h6 {
    font-size: 16px;
}

.info-card p.text-muted.small {
    font-size: 14px;
}

.checkout-wrapper h2.checkout-title, .checkout-wrapper h2.checkout-title span {
    font-size: 40px;
}



}

@media only screen and (max-width: 1400px){


header .three-boxs-align .box ul li a {
    font-size: 14px;
}

header .three-boxs-align .box ul {
    gap: 10px;
}

header .box.box-width {
    width: 19%;
}

header {
    padding: 15px 0;
}

header img {
    width: 150px;
}

.hero_slider.slick_dots_styling ul.slick-dots {
    bottom: 50px;
    left: 4% !important;
}

.form-box .text h2 {
    font-size: 30px;
    margin: 20px 0;
}

.text h1 {
        font-size: 55px;
    }

    .text h3 {
        font-size: 30px;
    }

        .text h2 {
        font-size: 35px;
    }

    .t-btn.t-btn-brown {
    padding: 10px 25px;
    gap: 10px;
    font-size: 12px;
}

.t-btn.t-btn-green.t-btn-green-outline {
    font-size: 12px;
    color: #59A752;
    padding: 10px 25px;
    margin-top: 10px;
    gap: 15px;
}

.appeals_sec .img-box .text p.detail_content {
    font-size: 14px;
}

.slider_box_food.arrow_styling button.slick-next.custom-arrow.slick-arrow {
    right: 0px !important;
}

.slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
    right: 200px !important;
    bottom: 80px !important;
}

.your_donation_sec div#counter .item .counter_align_text h1 {
        font-size: 35px;
    }

    .your_donation_sec {
    padding: 70px 0;
}

.your_donation_sec img {
    width: 150px;
}

.blog_slider_boxes .blog-box .img-box .blog_date h6 {
    font-size: 25px;
}

.blog_slider_boxes .blog-box .img-box .blog_categorie p {
    padding: 5px 15px;
    font-size: 14px;
}

.blog_slider_boxes .blog-box .img-box .blog_date h6 {
    font-size: 25px;
}

.blog_slider_boxes .blog-box .text h3 {
    font-size: 20px;
}

.blog_slider_boxes .blog-box .text a.t-btn.t-btn-brown {
    font-size: 14px;
    margin-top: 10px;
}

.blog_slider_boxes .blog-box .text p {
    font-size: 16px;
}

.footer_top_sec_three_box .hover_box .text p {
    font-size: 16px;
}

.footer_top_sec_three_box .hover_box {
        height: 400px;
        padding: 40px;
    }

    footer .text p {
    font-size: 14px;
    margin: 15px 0;
}

footer .footer_large_menu ul li a {
    font-size: 16px;
}

a.t-btn-large-text {
    font-size: 16px !important;
}

.what_we_do_sec.about_sec_01 div#counter .item h3.text {
    font-size: 13px;
}

    .who_are_we div#nav-tabContent img {
        width: 75%;
        height: 650px;
    }

    .helping_each_sec .t-btn {
    font-size: 16px;
    padding: 10px 20px;
}


.helping_each_other_sec.padding-80 .img-box .item .counter_align_text h1 {
    font-size: 45px;
}


.photo_gallery_sec .img-box img {
    width: 100%;
    height: 300px;
    margin-top: 20px;
}


.gift-aid-box {
    padding: 15px;
    gap: 20px;
    margin: 15px 0 50px;
    align-items: flex-start;
}

.category_section .donation-card-row .card-text h3 {
    font-size: 20px;
}

.category_section .donation-card-row .card-text p {
    font-size: 16px;
}

.category_section {
    padding: 50px 0;
}

.sidebar-below-box .sidebar-box-wrapper {
    padding: 20px;
    border-radius: 10px;
    gap: 10px;
}


.category_tabs .nav-link {
    padding: 10px 0;
    font-size: 16px;
}



.fundraise_content h2 {
    font-size: 40px;
}

.active_members_badge {
    top: 12%;
    left: -30px;
    padding: 20px;
    gap: 10px;
}

.fundraise_content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.fundraiser-points p {
    font-size: 12px;
}

.fundraiser-bottom-testi-box {
    gap: 20px;
    display: flex !important;
    flex-direction: column-reverse;
}

.fundraise_section {
    padding: 50px 0;
}

.fundraise_section .col-lg-6.ps-lg-5 {
    padding-left: 20px !important;
}

.events-desc-wrapper h4 {
    font-size: 20px;
}

.donation-hero-section {
    padding: 40px 0;
}

.emergency-fund-section h2, .emergency-fund-section h2 span {
    font-size: 45px !important;
}

    .zakat-calculator-section h2.fw-bold.my-3, .zakat-calculator-section h2.fw-bold.my-3 span, .zakat-calculator-section h3.fw-bold, .zakat-calculator-section h5.fw-bold.mb-3, .zakat-calculator-section h1.display-3.fw-bold.my-3 {
        font-size: 35px !important;
    }
    
    .zakat-calculator-section h3.mb-4, .zakat-calculator-section h4.fw-bold {
        font-size: 25px;
    }
    
    

}

@media only screen and (max-width: 1199px){

a.a_link_direct {
    font-size: 14px;
}

.top_header .get_in_touch_link p {
    font-size: 14px;
}

.socail_links ul {
    gap: 15px;
}

    header .box.box-width {
        width: 15%;
    }
    header .box.box-width.align-btns a.t-btn.t-btn-brown {
    padding: 10px 15px;
    font-size: 11px;
    gap: 5px;
}

.box.box-width.align-btns {
    display: flex;
    gap: 5px;
}
header .three-boxs-align .box ul li a {
        font-size: 12px;
    }

    header li.down_link i {
    font-size: 12px;
}

    header .three-boxs-align .box ul {
        gap: 10px;
        display: flex;
        align-items: center;
    }

    header .three-boxs-align .box.box-width.align-btns {
    width: 20%;
}

header .three-boxs-align .box.box-width.align-btns {
    width: 20%;
    display: flex;
    align-items: center;
}

.form-box {
    padding: 20px 20px;
    width: 95%;
}

.text h1 {
        font-size: 45px;
    }
        .text h3 {
        font-size: 25px;
    }

    .hero_section, .hero_section .container, .hero_section .container .row {
    height: 750px;
}

.text h2 {
        font-size: 30px;
    }

    .hero_slider.slick_dots_styling.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 0px;
}

.text p {
        font-size: 16px;
    }
    .what_we_do_sec .short_event_box .text h6 {
    font-size: 16px;
}
.what_we_do_sec .short_event_box .text h5 {
    font-size: 16px;

}

.what_we_do_sec .slider-box-img img {
    height: 450px;

}

.event-sec .text h5 {
    font-size: 20px;
    margin-top: 10px;
}

.appeals_sec .img-box img {
    width: 100% !important;
    height: 200px;
}

.appeals_sec .img-box .text h3 {
        font-size: 20px;
    }

    .appeals_sec .img-box .text .number-box-donation p {
    font-size: 14px;
}

.two-text-align span {
    font-size: 14px;
}

.progress {
    margin: 5px 0;
    height: 10px;
    width: 100%;
}

.need_your_help .text h4 {
        font-size: 20px;
    }
    .need_your_help .img img {
    width: 100%;
    height: 450px !important;
}

.need_your_help .vertical_align_space_btw h5 {
        font-size: 20px;
    }

        .food_pack_sec .food_pack_box_large .text_box .text h2 {
        font-size: 30px;
        padding-right: 5%;
        padding-bottom: 70px;
    }
        .slider_box_food.arrow_styling button.slick-next.custom-arrow.slick-arrow {
        right: -200px !important;
    }

        .slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
        right: 0px !important;
        bottom: 30px !important;
    }

    .food_pack_sec {
    padding: 50px 0;
}
.for_every_spend .col-md-12 .text h2 {
        font-size: 35px;
    }

    .for_every_spend .row.two_align_spend .col-md-6:nth-child(2) .text h3 {
    font-size: 25px;
}
.for_every_spend img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.start_donation_sec .image-box .img img {
    width: 100% !important;
    height: 200px;
    object-fit: cover;
}

.start_donation_sec .image-box .text h5 {
        font-size: 18px;
    }

    .start_donation_sec .image-box .text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.start_donation_sec .image-box .text p {
    color: #505050;
    font-size: 14px;
}

.your_donation_sec div#counter {
    width: 90% !important;
    margin-bottom: 20px;
}

.your_donation_sec div#counter .item h3.text {
    font-size: 16px;

}

    .your_donation_sec .text h2 {
        font-size: 35px;
    }

    .how_your_support {
    padding: 50px 0;
}

.how_your_support .two_align_box_full_gap a.t-btn.t-btn-brown.t-btn-brown-outline.t-btn-large-text.captalize_text {
    width: 200px;
}

footer .footer_large_menu ul {
    gap: 20px;
}

.copy_right .text p {
    font-size: 14px;
}

.copy_right .text ul li a {
    font-size: 14px;
}

.values_sec .img-box h6 {
    font-size: 16px;
}

.who_are_we div#nav-tabContent img {
        width: 65%;
        height: 550px;
    }

    .who_are_we div#nav-tab {
    gap: 15px;
    margin-left: 30px;
}

.who_are_we div#nav-tab button img {
    width: 200px;
}

.who_are_we div#nav-tabContent {
        right: -350px;
    }

    .what_we_do_sec.about_sec_01 div#counter .item {
    padding: 0 10px;
}

.helping_each_other_sec.padding-80 .img-box .img, .helping_each_other_sec.padding-80 .img-box .img img {
    width: 95%;
    height: 200px;
    object-fit: cover;
    border-radius: 30px;
}

.helping_each_other_sec.padding-80 .img-box .item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    padding-right: 20%;
}

.clean_water_sec.padding-80 .imges_box .image_large {
    width: 60%;
    max-width: 100%;
    height: 450px;
    border-radius: 30px;
}

.clean_water_sec.padding-80 .imges_box img {
    border-radius: 25px;
    height: 200px;
}

.clean_water_sec.padding-80 .imges_box .text-box p {
    font-size: 16px;
}

.clean_water_sec.padding-80 .imges_box .text-box img {
    width: 50px;
    height: 50px;
    border-radius: 0;
    object-fit: contain;
}

.padding-80 {
    padding: 50px 0;
}

.box.box-width.align-btns .cart-box a {
    padding: 8px;
    font-size: 20px;
    width: 45px;
    height: 42px;
}

    header .three-boxs-align .box.box-width.align-btns {
        width: 20%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
    .basket-header h2, .basket-header h2 span {
    font-size: 30px !important;
}


.basket-body .basket-item-card img {
    width: 150px;
    height: 150px;
}

.cart-btn-grp {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-top: 20px;
    display: flex !important;
}


section.category_section .donation-card-row .card-text {
    width: 60% !important;
    max-width: 60% !important;
}

section.category_section .donation-card-row .card-img {
    width: 45% !important;
    max-width: 45% !important;
}

section.category_section .donation-card-row {
    display: flex !important;
    flex-direction: row;
}

.category_sidebar {
    padding: 15px;
}

.category_tabs .nav-link {
    font-size: 14px;
}

.sidebar-box-wrapper p {
    font-size: 16px;
}

.donation-card-row .learn-more-btn {
    padding: 5px 30px;
    font-size: 14px;
    margin-top: 10px;
    border-radius: 5px;
}


.category_sidebar h3 {
    font-size: 20px;
    margin-bottom: 10px;
}


.category_section .donation-card-row .card-text {
    gap: 10px;
}


.volunteer_content h2 {
    font-size: 35px;
}

.events_section {
    padding: 50px 0;
}

.event_item h5 {
    font-size: 18px;
}

.donation-hero-section .form-box.donation-form-card.zakat-form-box {
    width: 100%;
}

    .donation-hero-section h1.hero-title, .donation-hero-section h1.hero-title span {
        font-size: 35px !important;
    }
    
        .section-title-zakat {
        font-size: 35px;
    }
    
        .emergency-fund-section h2, .emergency-fund-section h2 span {
        font-size: 35px !important;
    }
    
    .description-content p {
    font-size: 14px;
    width: 100%;
}

.section-header p {
    font-size: 16px;
}

.hero-content-zakat .hero-desc {
    margin-bottom: 15px;
    font-size: 16px;
    width: 85%;
}


    .zakat-calculator-section h2.fw-bold.my-3, .zakat-calculator-section h2.fw-bold.my-3 span, .zakat-calculator-section h3.fw-bold, .zakat-calculator-section h5.fw-bold.mb-3, .zakat-calculator-section h1.display-3.fw-bold.my-3 {
        font-size: 30px !important;
    }
    
    .calculator-form-container p {
    font-size: 16px;
    margin-bottom: 15px !important;
}




    
}

@media only screen and (max-width: 1024px){
    
    .menu-close-btn { display: block; } /* Mobile pe show */
    .menu-toggle { display: block !important; }
  .mobile_menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: #fff;
    overflow-y: auto;
    transition: 0.4s ease;
    z-index: 999999;
    padding: 20px;
  }

  .mobile_menu.active {
    right: 0;
  }

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

  .mobile_menu li {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
  }

  .mobile_menu .down_link > ul {
    display: none;
    padding-left: 15px;
  }

  .mobile_menu .down_link.active > ul {
    display: flex;
    flex-direction: column !important;
  }

  .mobile_menu ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    align-content: flex-start !important;
}

.mobile_menu ul li {
    display: flex;
    align-items: flex-start;
    text-align: left;
}

.mobile_menu ul {
    align-items: flex-start !important;
}

 .menu-close {
    font-size: 30px;
    cursor: pointer;
    text-align: right;
    margin-bottom: 20px;
  }

    header .three-boxs-align .box ul li.down_link.active ul {
        display: flex;
        flex-direction: column;
        width: 290px;
    }

    header .three-boxs-align .box ul li.down_link ul li {
    width: 70% !important;
}

.your_donation_sec img {
        width: 100px;
    }

        .blog_slider_boxes .blog-box .text p {
        font-size: 14px;
    }

    footer .form_box_footer form input {
    font-size: 13px;
}

    .footer_top_sec_three_box .hover_box .text h5 {
        font-size: 25px;
    }

    .footer_top_sec_three_box .hover_box {
        height: 350px;
        padding: 30px;
    }

    .footer_top_sec_three_box .hover_box .text {
    gap: 15px;
}

.start_donation_sec {
    padding: 50px 0;
    padding-top: 0;
}

.food_pack_sec .food_pack_box_large .box_content .text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}


.page_title_sec {
        padding: 100px 0;
    }

        header .box.box-width.align-btns a.t-btn.t-btn-brown {
        padding: 12px;
        font-size: 11px;
        gap: 5px;
    }
.clean_water_sec.padding-80 .text {
    gap: 10px;
}

.photo_gallery_sec .img-box img {
        width: 100%;
        height: 250px;
        margin-top: 20px;
    }

    .photo_gallery_sec {
    padding: 200px 0 50px;
}

.building_hope_sec .right_img_with_btn img.img_01_right, .building_hope_sec .right_img_with_btn img.img_02_right {
    position: absolute;
    width: 200px;
    height: 150px;
}

.building_hope_sec .right_img_with_btn img.img_03_right {
    width: 350px;
}

.building_hope_sec .right_img_with_btn img.img_02_right {
    right: 0px;
    top: 50px;
}

.building_hope_sec .right_img_with_btn .btn a.t-btn.t-btn-brown.t-btn_uppercase {
    text-transform: uppercase;
    width: 200px;
    display: flex;
    justify-content: space-between;
}


.building_hope_sec .right_img_with_btn .btn {
    position: absolute;
    transform: rotate(-90deg);
    left: -90px;
    top: 110px;
    padding: 0;
}

.helping_each_other_sec.padding-80 .img-box .item h3.text {
    font-size: 16px;
}

.helping_each_other_sec.padding-80 .img-box .item p {
    font-size: 14px;
}

.clean_water_sec.padding-80 .text p {
    font-size: 14px;
}

    .clean_water_sec.padding-80 .imges_box .image_large {
        width: 60%;
        max-width: 100%;
        height: 400px;
        border-radius: 30px;
    }

    .clean_water_sec.padding-80 .imges_box .text-box {
    top: 10px;
    padding: 30px;
    border: 3px solid #E7F3E7;
    width: 75%;
}


    .menu-toggle {
        right: 0 !important;
        top: 8% !important;
    }
    
    header .three-boxs-align .box.box-width.align-btns {
        padding-right: 40px !important;
        width: 22%;
        position: relative;
    }



.total-badge-circle {
    right: 12px;
    width: 50px;
    height: 50px;
    font-size: 18px;
}


.volunteer_content p {
    font-size: 16px;
    margin-bottom: 10px;
}

.btn-outline-success {
    font-size: 16px;
    padding: 10px 20px;
}


.volunteer_stats h3 {
    font-size: 35px;
}

.image_stack .img_small {
    bottom: 20%;
    right: 20px;
    width: 40%;
}

.active_members_badge {
        top: 5%;
        left: -20px;
        padding: 15px;
        gap: 10px;
    }
    
    .active_members_badge h4 {
    font-size: 35px;
}
.active_members_badge .icon_box img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.donation-summary-card {
    padding: 20px;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    margin-top: 100px;
    margin-left: 0px;
}




}

@media only screen and (max-width: 991px){

        header .three-boxs-align .box.box-width.align-btns {
        width: 30%;
        display: flex;
        align-items: center;
    }



.form-box .text {
    padding-right: 0%;
    margin-bottom: 10px;
}

.text h1 {
        font-size: 35px;
    }

    .text h3 {
        font-size: 22px;
    }

    .t-btn.t-btn-brown.t-btn-brown-gradient {
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 15px;
}

.form-box .tab-btn {
    padding: 10px 5px;
    font-size: 10px;
    letter-spacing: 0.5px;
    gap: 5px;
}

.form-box .amount {
    padding: 5px;
    width: 23%;
    font-size: 14px;
}

    .what_we_do_sec .slider-box-img img {
        height: 350px;
    }

    .arrow_styling button.custom-arrow.slick-arrow {
    position: absolute !important;
    right: 30px !important;
    left: auto;
    bottom: auto;
    top: 300px;
    z-index: 99999 !important;
}

.two-btns-align {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-direction: column;
}

.what_we_do_sec .short_event_box img {
    height: 100px;
    object-fit: cover;
    border-radius: 20px;
}

.appeals_sec .img-box .text {
    padding: 15px;
}

    .appeals_sec .img-box .text .number-box-donation p {
        font-size: 12px;
    }
    .two-text-align span {
        font-size: 12px;
    }
    .appeals_sec .img-box .text h3 {
        font-size: 18px;
    }
        .need_your_help .img img {
        width: 100%;
        height: 350px !important;
    }

    .food_pack_sec .food_pack_box_large .box_content {
    padding: 30px 20px;
    border-radius: 5px;
    width: 100%;
    max-width: 400px !important;
}
.food_pack_sec .food_pack_box_large .box_content .two-btns-align {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
    .slider_box_food.arrow_styling button.slick-next.custom-arrow.slick-arrow {
        right: -300px !important;
    }
        .slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
        right: -100px !important;
        bottom: 30px !important;
    }

    .slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
    top: 450px;
}

.for_every_spend .row.two_align_spend .col-md-6:nth-child(2) {
    padding: 25px;
}

    .your_donation_sec div#counter {
        width: 100% !important;
        margin-bottom: 20px;
    }

        .how_your_support .two_align_box_full_gap a.t-btn.t-btn-brown.t-btn-brown-outline.t-btn-large-text.captalize_text {
        width: 250px;
    }

    .blog_slider_boxes .blog-box .img-box .img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog_slider_boxes .blog-box .img-box .blog_date {
    right: 15px;
    bottom: -20px;
    width: 55px;
    height: 55px;
}

.blog_slider_boxes .blog-box .img-box .blog_date p {
    font-size: 14px;
}
.blog_slider_boxes .blog-box .img-box .blog_date h6 {
        font-size: 20px;
    }
        .blog_slider_boxes .blog-box .text h3 {
        font-size: 16px;
    }

        .footer_top_sec_three_box .hover_box .text h5 {
        font-size: 20px;
    }

    footer {
    padding: 40px 0;
}

footer .row .col-md-3 {
    width: 48%;
}

footer .row {
    gap: 20px;
}

footer .row .col-md-3:nth-child(2) {
    padding-left: 10px;
}

footer .footer_large_menu {
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    flex-direction: column;
    gap: 20px;
}

.copy_right .text p {
        font-size: 12px;
    }

    .copy_right .text ul li a {
        font-size: 12px;
    }

        footer .text h6 {
        font-size: 18px;
    }

        header img {
        width: 150px;
        max-width: 150px;
    }

.two_align {
    display: flex;
    gap: 30px;
    align-items: center;
}



.top_header .socail_links ul::after {
    right: -15px;
}

    .top_header .get_in_touch_link p {
        font-size: 12px;
    }
    .top_header .socail_links ul li a {
    font-size: 12px;
}
    a.a_link_direct {
        font-size: 12px;
    }


        .form-box .text h2 {
        font-size: 25px;
        margin: 10px 0;
    }

    .donate_us_sec_bank .bank_details_box {
    width: 500px;
    border-radius: 10px;
    display: block;
    margin: auto;
}

.values_sec .text.text-center {
    width: 80%;
    margin: auto;
    margin-bottom: 30px;
}

.values_sec .col-md-3 {
    width: 48% !important;
    max-width: 48% !important;
    margin-bottom: 20px;
}

section.what_we_do_sec.helping_each_sec.about_sec_01 .two-btns-align {
    display: flex;
    flex-direction: row;
}

    .helping_each_sec .t-btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .who_are_we div#nav-tab button img {
        width: 150px;
    }

        .who_are_we div#nav-tabContent img {
        width: 75%;
        height: 450px;
    }

    .what_we_do_sec.about_sec_01 div#counter {
    margin: 20px 0;
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
    flex-direction: column;
}

.what_we_do_sec.about_sec_01 div#counter .item:nth-child(2){

    border: none;
}


.clean_water_sec .clean_water_sec_imgBox .content_box h5 {
    font-size: 20px;
}

.clean_water_sec .clean_water_sec_imgBox {
    padding: 10px;
    gap: 20px;
}

.building_hope_sec .imge-box .img {
    width: 50%;
}
.building_hope_sec .imge-box .text h5 {
    font-size: 16px;
    font-weight: 600;
}

.building_hope_sec .right_img_with_btn img.img_03_right {
    width: 250px;
}

    .building_hope_sec .right_img_with_btn img.img_01_right, .building_hope_sec .right_img_with_btn img.img_02_right {
        position: absolute;
        width: 150px;
        height: 100px;
    }

    .building_hope_sec .right_img_with_btn img.img_01_right {
    bottom: 20px;
    left: 0px;
}

.building_hope_sec .imge-box .text p {
    font-size: 14px;
}

    .clean_water_sec.padding-80 .imges_box img {
        border-radius: 25px;
        height: 150px;
    }

    .clean_water_sec.padding-80 .imges_box .text-box {
    border-radius: 20px;
    padding: 20px;
    border: 5px solid #E7F3E7;
    width: 85%;
}


    .menu-toggle {
        top: 0px !important;
        right: 0px !important;
    }
    
    
    
    .donation-basket-popup {
    top: 50px;
    width: 500px;
    right: -150px !important;
}

    .cart-btn-grp {
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        padding-top: 0px;
        display: flex !important;
        flex-direction: column;
    }
    
    .cart-btn-grp a.t-btn.t-btn-brown.t-btn-brown-gradient, .cart-btn-grp button
 {
    margin: 0;
    font-size: 12px !important;
    width: 150px !important;
}


.logo-round img {
    width: 80px;
    object-fit: contain;
    height: 80px;
    margin-bottom: 10px;
}

.category_section .col-md-3 {
    padding-right: 15px;
}

    .category_section .donation-card-row .card-text h3 {
        font-size: 18px;
    }

    .category_section .donation-card-row .card-text p {
        font-size: 14px;
    }
    
    .volunteer_form_card {
    padding: 0px;
    margin-top: 30px;
    z-index: 10;
}

.fundraise_section .row {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
}

.fundraise_section .row img{
    margin-top:30px;
    
}

    .active_members_badge .icon_box img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        margin: 0 !important;
    }
    
        .donation-hero-section .form-box.donation-form-card.zakat-form-box {
        width: 100%;
        margin: 0;
        margin-top: 20px;
    }
    
        .section-title-zakat {
        font-size: 25px;
        margin: 0 !important;
    }
    
    .zakat-benefits-section .benefit-items-list.mt-5 .benefit-item .benefit-text p {
    font-size: 14px;
    width: 100%;
    margin-top: 5px;
}

.main-img-card img {
    width: 100%;
    height: 450px;
    object-fit: cover;
}

.overlap-img img {
    width: 70%;
    height: 70%;
}

.main-img-card a.t-btn.t-btn-brown.t-btn-brown-gradient.t-btn-border-radius-none {
    right: -68px;
    top: 14%;
    padding: 25px 10px;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.emergency-fund-section .gallery-img-wrapper.h-100 img {
    height: 340px;
}
  .zakat-benefits-section .benefit-content {
    padding-left: 20px;
}

.zakat-calculator-section .info-card, .zakat-calculator-section .info-card img {
    width: 100% !important;
    max-width: 100% !important;
}

.calculator-form-container {
    margin-top: 35px !important;
}

.result-container .btn-outline-success {
    width: 45%;
}

button.btn.btn-donate-brown.px-5.py-2.text-white.fw-bold {
    font-size: 14px;
}

.container.checkout-wrapper {
    padding: 40px 0;
}

.checkout-steps.mb-4 {
    margin: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donation-summary-card {
    margin: 0 !important;
}

.custom-col .main-title {
    font-size: 35px;
    margin-bottom: 15px;
}

.custom-col .description {
    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;
}

.impact-title {
    font-size: 35px;
    margin-bottom: 10px;
}

.card-text {
    font-size: 16px;
}

.impact-card {
    padding: 30px 15px;
    min-width: 180px;
    max-width: 180px;
}

.our-impact-sec-02 div#counter .item .counter_align_text h1 {
    font-size: 35px;
}

.our-impact-sec-02 div#counter .item h3.text {
    font-size: 14px;
}

.our-impact-sec-02 {
    padding: 40px 0;
}

}

@media only screen and (max-width: 767px){

    header .three-boxs-align .box.box-width.align-btns {
        width: 40%;
        display: flex;
        align-items: center;
    } 
    
    .helping_each_other_sec.padding-80 .img-box .item p {
        font-size: 14px;
        text-align: center;
    }
    
    .basket-actions.d-flex.gap-2 {
    gap: 10px !important;
}


    .form-box {
        padding: 20px 20px;
        width: 100%;
    }

    .hero_section, .hero_section .container, .hero_section .container .row {
        height: 850px;
    }

        .hero_slider.slick_dots_styling ul.slick-dots {
        bottom: 50px;
        left: 0% !important;
        top: auto;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .hero_section, .hero_section .container, .hero_section .container .row {
        height: 850px;
        gap: 30px;
        display: flex;
        align-content: center;
    }

    .what_we_do_sec .row {
    display: flex;
    flex-direction: column-reverse;
    gap: 30px;
}

    .two-btns-align {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-direction: column;
    }

    .event-sec .row img {
    margin-top: 20px;
}

.two_align_box_full_gap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}


.appeals_sec .img-box {
    border: 1px solid #00000069;
    border-radius: 5px;
    margin-bottom: 20px;
}

.need_your_help .text.text-center {
    margin-bottom: 20px;
}

.need_your_help img {
    margin: 15px 0;
}
.food_pack_sec .food_pack_box_large {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-direction: column;
}

    .food_pack_sec .food_pack_box_large .box_content {
        padding: 30px 20px;
        border-radius: 5px;
        width: 100%;
        max-width: 100% !important;
    }

    .food_pack_sec .food_pack_box_large .text_box .text h2 {
        font-size: 25px;
        padding-right: 0%;
        padding-bottom: 50px;
    }

    .slider_box_food.arrow_styling button.custom-arrow.slick-arrow {
        right: 100px !important;
        bottom: 30px !important;
    }

    .slider_box_food.arrow_styling button.slick-next.custom-arrow.slick-arrow {
        right: -100px !important;
    }

    .for_every_spend .col-md-12 .text p {
    width: 90%;
    margin-bottom: 20px;
    margin: auto;
    font-size: 14px;
}


    .your_donation_sec {
        padding: 40px 0;
    }

    .your_donation_sec button.btn.btn-primary.zoom-animate {
    display: block;
    margin: auto;
}

.how_your_support .two_align_box_full_gap p {
    width: 100%;
    margin-bottom: 10px;
}

    footer .footer_large_menu ul li a {
        font-size: 12px;
    }

    footer .footer_large_menu ul {
        gap: 10px;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

        .copy_right .text p {
        font-size: 12px;
        text-align: center;
    }

    .copy_right .text ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 30px;
    align-items: center;
}

footer .text .footer_menu ul li a {
    font-size: 14px;
    gap: 10px;
}

footer .footer_large_menu a.t-btn.t-btn-white.t-btn-img {
    padding: 10px 20px;
    gap: 10px;
    font-size: 14px;
}

    .footer_top_sec_three_box .hover_box {
        height: 300px;
        padding: 30px;
    }

    footer ul li a {
    font-size: 14px !important;
}

    .two_align {
        display: flex;
        gap: 30px;
        align-items: center;
        justify-content: center;
    }

    a.a_link_direct {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

        .page_title_sec {
        padding: 60px 0;
    }

    .page_title_sec .text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.page_title_sec .text p {
    color: white;
    width: 100%;
    text-align: center;
}

section.what_we_do_sec.who_are_we.about_sec_01.about_sec_02 .row {
    display: flex;
    flex-direction: column;
}

section.what_we_do_sec.who_are_we.about_sec_01.about_sec_02 .row .col-md-6 {
    position: relative;
}

    .who_are_we div#nav-tab {
        gap: 15px;
        margin-left: 0px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .who_are_we div#nav-tabContent {
        right: 0px;
        position: relative;
        top: 0;
    }

    .who_are_we div#nav-tabContent img {
        width: 100%;
        height: 350px;
    }

    section.what_we_do_sec.helping_each_sec.about_sec_01 .row {
    display: flex;
    flex-direction: column;
}

footer .footer_large_menu ul li a {
    font-size: 12px !important;
}

.values_sec .img-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    transition: .3s;
    border-radius: 10px;
    height: 370px;
}

.values_sec .img-box p {
    font-size: 14px;
}

.values_sec .img-box:hover {
    padding: 20px;
}

    .values_sec .img-box {
        gap: 10px;
        padding: 10px;
        height: 300px;
    }

        .who_are_we div#nav-tabContent {
        right: 0px;
        position: relative;
        top: 0 !important;
    }

    .who_are_we {
    position: relative;
    padding: 40px 0;
}
    header .box.box-width.align-btns a.t-btn.t-btn-brown {
        padding: 17px 15px;
    }

        .menu-toggle {
        top: 92px !important;
    }

    .who_are_we .text {
    text-align: left;
}

.what_we_do_sec.about_sec_01 .two-btns-align {
    margin: 20px 0;
    display: flex;
    justify-content: flex-end;
}

.helping_each_sec .all_text_right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 10px 10px 10px 10px;
}


.tick_listing ul li {
    position: relative;
    padding-right: 25px !important;
    margin-right: 30px !important;
    margin-bottom: 10px !important;
}

.tick_listing ul li::after {
    left: -10px;
}

section.what_we_do_sec.helping_each_sec.about_sec_01 .two-btns-align {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

        .what_we_do_sec.about_sec_01 div#counter {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        flex-direction: row;
    }

    section.what_we_do_sec.about_sec_01 .two-btns-align {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}


section.clean_water_sec.padding-80 .row {
    display: flex;
    flex-direction: column-reverse;
    gap: 40px;
}

.clean_water_sec .clean_water_sec_imgBox {
        padding: 10px;
        gap: 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .friday_giving_slider_sec .form-box {
    width: 100%;
    margin-bottom: 0px;
}

.slider_box_food.friday_giving_slider_sec.arrow_styling.slick-initialized.slick-slider .text_box .text h2 {
    padding-bottom: 150px;
}

    .photo_gallery_sec {
        padding: 50px 0;
    }

    .photo_gallery_sec .col-md-8, .photo_gallery_sec .col-md-4 {
    width: 48%;
}

.photo_gallery_sec .img-box img {
        width: 100%;
        height: 200px;
        margin-top: 20px;
    }

    .building_hope_sec .right_img_with_btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
}

.helping_each_other_sec.padding-80 .col-md-4:nth-child(3) .img-box {
    display: flex;
    flex-direction: column-reverse;
    /* background-color: red; */
}

.helping_each_other_sec.padding-80 .img-box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    justify-content: center;
}

    .helping_each_other_sec.padding-80 .img-box .item {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0px;
        width: 100%;
        padding-right: 0%;
        align-items: center;
        justify-content: center;
    }

    .helping_each_other_sec.padding-80 .col-md-4 {
    margin-bottom: 20px;
}
.building_hope_sec .three_imge_boxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 0px;
}

.building_hope_sec .imge-box .img {
        width: 20%;
    }

.menu-toggle {
        top: 0px !important;
        right: 0px !important;
    }
    
        header .box.box-width.align-btns a.t-btn.t-btn-brown {
        padding: 12px;
    }
    
        .basket-header h2, .basket-header h2 span {
        font-size: 25px !important;
        margin: 0 !important;
        margin-bottom: 5px !important;
    }
    
    .basket-actions.d-flex.gap-2 a {
    font-size: 14px !important;
}
.total-row .total-label {
    font-size: 16px;
}


.category_sidebar ul#myTab {
    display: flex;
    flex-direction: row !important;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.category_sidebar ul#myTab li {
    width: max-content;
}

.category_sidebar h3 {
        font-size: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .category_tabs .nav-link {
        font-size: 14px;
        padding: 5px 0;
    }
    
    .category_section div#myTabContent {
    margin-top: 30px;
}

    section.category_section .donation-card-row {
        display: flex !important;
        flex-direction: column;
    }


    section.category_section .donation-card-row .card-text {
        width: 100% !important;
        max-width: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    
    .category_section div#myTabContent {
    margin-top: 30px;
}

section.category_section .donation-card-row .card-text .number-box-donation {
    width: 60%;
}

section.category_section .donation-card-row .card-text .number-box-donation .progress {
    width: 100%;
}

section.category_section .donation-card-row .card-text .number-box-donation p.amount {
    width: 100% !important;
}

    section.category_section .donation-card-row .card-img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: auto;
        display: flex !important;
        height: 200px !important;
        min-height: 200px !important;
        flex: 0 0 200px;
    }
    
    .volunteer_section {
    padding: 40px 0;
}

.volunteer_content h6 {
    margin-bottom: 5px;
    font-size: 15px;
}

.volunteer_content h2 {
        font-size: 25px;
    }
    
        .fundraise_content h2 {
        font-size: 25px;
    }
    
    .fundraise_content h6 {
    font-size: 15px;
}

.donation-hero-section h1.hero-title, .donation-hero-section h1.hero-title span {
        font-size: 25px !important;
    }
    
    .donation-hero-section h1.hero-title br, .donation-hero-section h1.hero-title span br {
        display:none !important;
    }
    
        .hero-content-zakat .hero-desc {
        margin-bottom: 10px;
        font-size: 14px;
        width: 100%;
    }


.zakat-benefits-section .row {
    display: flex;
    flex-direction: column-reverse;
}

    .zakat-benefits-section .benefit-content {
        padding-left: 0px;
    }
    
    .benefit-items-list .border-bottom {
    margin-bottom: 20px !important;
}
.benefit-image-wrapper {
    position: relative;
    padding-right: 60px;
    padding-bottom: 0px;
    margin-top: 50px;
}
    .emergency-fund-section h2, .emergency-fund-section h2 span {
        font-size: 25px !important;
    }
.emergency-fund-section img {
    width: 100% !important;
    height: 250px !important;
}

section.emergency-fund-section {
    padding-top: 0;
}

.contact-card {
    height: 300px;
    margin-bottom: 10px !important;
}
    .zakat-calculator-section h2.fw-bold.my-3, .zakat-calculator-section h2.fw-bold.my-3 span, .zakat-calculator-section h3.fw-bold, .zakat-calculator-section h5.fw-bold.mb-3, .zakat-calculator-section h1.display-3.fw-bold.my-3 {
        font-size: 25px !important;
    }

    .checkout-wrapper h2.checkout-title, .checkout-wrapper h2.checkout-title span {
        font-size: 30px;
    }
    
    section.appeals_sec.checkout-appeals .two_align_box_full_gap {
    display: flex;
    flex-direction: column;
}

.payment-method-box {
    display: flex !important;
    flex-direction: column !important;
}

.payment-method-box .cstm-payment-icons {
    width: 100%;
}

.payment-method-box div#card-element-container {
    width: 100%;
}

.arf-section.work-for-good-sec-first {
    padding: 40px 0;
}

.arf-section.work-for-good-sec-first .row {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
}

.custom-col .sub-heading {
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

    .custom-col .main-title {
        font-size: 25px;
        margin-bottom: 15px;
    }
    .impact-title {
        font-size: 25px;
        margin-bottom: 10px;
    }
    
    .impact-subtitle {
    font-size: 16px;
    max-width: 100%;
}

    .impact-card {
        padding: 20px 15px;
        min-width: 48%;
        max-width: 48%;
    }
    
    .card-number {
    width: 45px;
    height: 45px;
    font-size: 18px;
    margin-bottom: 15px;
}

    .card-text {
        font-size: 14px;
    }
    
    .custom-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: -188px;
}

.our-impact-sec-03.padding-80.work-for-good-sec-02 .row {
    gap: 20px;
}

.our-impact-sec-02 div#counter .item {
    display: flex;
    flex-direction: column;
    width: 19%;
    position: relative;
}

}

@media only screen and (max-width: 575px){
    .summary-item img {
        width: 100%;
        height: 217px;
    }
        .two_align {
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: center;
    }
        .socail_links ul {
        gap: 5px;
    }

        header img {
        width: 120px;
        max-width: 120px;
    }

    header .box.box-width.align-btns .btn-box {
    display: none;
}

.box.box-width.align-btns .cart-box a {
    padding: 8px;
    font-size: 20px;
    width: 45px;
    height: 45px;
}

    .hero_section, .hero_section .container, .hero_section .container .row {
        height: auto;
        gap: 30px;
        display: flex;
        align-content: center;
    }

    .hero_section {
    padding: 60px 0;
}

    .text h1 {
        font-size: 25px;
    }

        .text h3 {
        font-size: 20px;
    }

    .text p {
        font-size: 14px;
    }

    .form-box .text h2 {
        font-size: 20px;
        margin: 10px 0;
    }

    .form-box .text p {
    font-size: 13px;
}

.form-box .tab-btn {
        padding: 10px 5px;
        font-size: 9px;
        letter-spacing: 0.5px;
        gap: 5px;
    }

    .form-box .amount {
        padding: 5px;
        width: 23%;
        font-size: 12px;
    }


    .form-box .amount-boxes {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    justify-content: space-between;
    margin: 15px 0;
}

.text h6 {
    font-size: 16px;
}

.text h2 {
        font-size: 22px;
    }

    .what_we_do_sec .short_event_box {
    display: flex;
    margin: 20px 0px;
    gap: 15px;
    align-items: center;
    flex-direction: column;
}

.hero_section {
    padding: 60px 0;
}

.what_we_do_sec .short_event_box .img-box {
    width: 100%;
}

.what_we_do_sec .short_event_box .img-box img {
    width: 100%;
    height: 150px;
    object-fit: cover;
}

    a.t-btn-large-text {
        font-size: 14px !important;
    }

        a.t-btn-large-text {
        font-size: 14px !important;
    }

        .what_we_do_sec .slider-box-img img {
        height: 250px;
    }

    .text h2 br {
    display: none;
}

.event-sec .text h5 {
        font-size: 16px;
        margin-top: 10px;
    }

        .need_your_help .vertical_align_space_btw h5 {
        font-size: 18px;
    }

    .food_pack_sec .food_pack_box_large .box_content .text h3 {
        font-size: 20px;
    }

    .food_pack_sec .food_pack_box_large .text_box .text h2 {
        font-size: 22px;
        padding-right: 0%;
        padding-bottom: 50px;
    }

        .for_every_spend .col-md-12 .text h2 {
        font-size: 25px;
    }

    .for_every_spend .col-md-12 .text p {
        width: 100%;
        margin-bottom: 20px;
        margin: auto;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .for_every_spend {
    padding: 30px 0;
}
.for_every_spend .row.two_align_spend {
    gap: 0;
    margin-top: 15px;
    padding: 15px;
}
.for_every_spend .row.two_align_spend .col-md-6:nth-child(2) .text h3 {
        font-size: 20px;
    }

    .for_every_spend .row.two_align_spend .col-md-6:nth-child(2) .text p {
    font-size: 14px;
    margin: 15px 0;
}
.your_donation_sec .text h2
 {
        font-size: 25px;
    }

    .your_donation_sec div#counter {
        width: 100% !important;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        justify-content: center;
    }

    .your_donation_sec div#counter .item {
    width: 100%;
    position: relative;
}

.your_donation_sec div#counter .item::after{

    display: none;
}
    .your_donation_sec div#counter .item {
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .your_donation_sec a.t-btn.t-btn-brown.uppercase_text {
    display: block;
    margin: auto;
    width: 50%;
}

    footer .row .col-md-3 {
        width: 100%;
    }
        footer .footer_large_menu ul {
        gap: 5px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-direction: column;
        align-items: center;
    }


        .what_we_do_sec.about_sec_01 div#counter .item .counter_align_text h1 {
        font-size: 30px;
    }

        .donate_us_sec_bank .bank_details_box .text .img-box h3 {
        font-size: 20px;
        margin: 0;
    }

        section.what_we_do_sec.about_sec_01 .two-btns-align {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

        .what_we_do_sec.about_sec_01 div#counter {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        padding-top: 15px;
        flex-direction: column;
    }

    .what_we_do_sec .row {
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }

    section.what_we_do_sec.who_are_we.about_sec_01.about_sec_02 div#nav-tab {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.who_are_we div#nav-tabContent img {
        width: 100%;
        height: 250px;
    }
        .tick_listing ul li {
        position: relative;
        padding-right: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        margin-left: 20px !important;
        font-size: 14px;
    }

        .tick_listing ul li::after {
        left: -10px;
        width: 15px;
        height: 15px;
    }

    .values_sec .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    .values_sec .img-box {
        gap: 10px;
        padding: 10px;
        height: 250px;
    }

    .donate_us_sec_bank .bank_details_box .details_box_ul ul li p:nth-child(1) {
    padding-left: 10px;
}

.donate_us_sec_bank .bank_details_box .text .img-box h3 {
        font-size: 17px;
        margin: 0;
    }

    .donate_us_sec_bank .bank_details_box {
        width: auto;
        border-radius: 10px;
        display: block;
        margin: auto;
    }

    .donate_us_sec_bank .bank_details_box .details_box_ul ul li p {
    width: 50%;
    font-size: 11px;
    font-weight: 600;
}
    .values_sec .text.text-center {
        width: 100%;
        margin: auto;
        margin-bottom: 30px;
    }
    

    
        header .three-boxs-align .box.box-width.align-btns {
        width: 35%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 40px !important;
    }
    
        .menu-toggle {
        top: 20px !important;
        right: 15px !important;
    }
    
    .box.box-width.align-btns .cart-box a img {
    width: 20px;
    height: 20px;
}

    .box.box-width.align-btns .cart-box a {
        padding: 8px;
        font-size: 20px;
        width: 35px;
        height: 35px;
    }
    
    .box.box-width.align-btns .cart-box a span {
    padding: 4px;
    font-size: 7px;
    width: 15px;
    height: 15px;
    top: -5px;
    right: 0px;
}


.menu-toggle {
        top: 7px !important;
        right: 5px !important;
        font-size: 25px !important;
        line-height: 1;
    }
    
        .donation-basket-popup {
        top: 50px;
        width: 300px;
        right: -30px !important;
    }
    
    .basket-item-card.d-flex.gap-3 {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px !important;
}

    .basket-body .basket-item-card img {
        width: 100% !important;
        height: 150px;
        max-width: 100%;
    }
    
    .basket-actions.d-flex.gap-2 {
    display: flex;
    flex-direction: column;
}

.basket-actions.d-flex.gap-2 a {
    width: 100% !important;
}

p#basketItemCount {
    font-size: 14px;
}

    .gift-aid-box {
        padding: 10px;
        gap: 10px;
        margin: 15px 0 50px;
        align-items: flex-start;
    }
    
    .gift-aid-box {
        padding: 10px;
        gap: 10px;
        margin: 15px 0 0px;
        align-items: flex-start;
    }
    
    
    .category_section .donation-card-row .card-text p {
        font-size: 14px;
        width: 100%;
    }
    
    section.category_section .donation-card-row .card-text .number-box-donation {
        width: 100%;
    }
    
    .category_section {
        padding: 50px 0;
        padding-bottom: 20px;
    }
    
    .volunteer_images {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

.volunteer_content p {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .volunteer_list li {
    font-size: 14px;
}


.volunteer_list li i {
    color: #59A752;
    margin-right: 10px;
    font-size: 16px;
}

.fundraise_content p {
    font-size: 14px;
    margin: 0 !important;
    margin-bottom: 10px !important;
}

.fundraiser-points p {
    margin: 0 !important;
}

.fundraiser-points i {
    font-size: 16px;
}

.volunteer_stats {
    gap: 10px;
    display: flex !important;
    flex-direction: column;
}
    .fundraise_section .row img {
        margin-top: -10px;
    }

.fundraise_section .row .image_stack {
    margin-top: 30px;
    margin-bottom: 0px !important;
    padding-bottom: 0 !important;
}

.active_members_badge {
        top: 5%;
        left: 0px;
        padding: 15px;
        gap: 10px;
        right: 0;
        margin: auto;
        width: 80%;
    }
    
        .image_stack .img_small {
        bottom: -5%;
        right: 20px;
        width: 40%;
    }
    
    h2.display-6.fw-bold {
    font-size: 20px;
}
.events-desc-wrapper h4 {
        font-size: 16px;
    }
    
    .events-desc-wrapper p {
    color: #171717 !important;
    font-size: 14px;
}

    .donation-hero-section h1.hero-title, .donation-hero-section h1.hero-title span {
        font-size: 22px !important;
        margin-top: 0;
    }

    .benefit-items-list .border-bottom {
        margin-bottom: 15px !important;
        gap: 15px !important;
    }
    
    .benefit-icon-box img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.benefit-items-list .border-bottom h4.fw-bold.mb-1 {
    font-size: 16px;
}

.benefit-items-list .border-bottom p {
    font-size: 13px !important;
}
.benefit-items-list.mt-5 {
    margin-top: 20px !important;
}
    .main-img-card img {
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
        .overlap-img img {
        width: 60%;
        height: 60%;
        bottom: 0;
        top: auto;
    }
    
    .overlap-img {
    position: absolute;
    bottom: -20%;
    right: -80px;
    width: 274px;
    height: 267px;
    z-index: 2;
    border-radius: 50%;
}
.emergency-fund-section h2, .emergency-fund-section h2 span {
        font-size: 20px !important;
    }
    .section-header p {
        font-size: 14px;
    }
    section.emergency-fund-section .section-header.mb-5 {
    margin-bottom: 20px !important;
}
section.emergency-fund-section .section-header.mb-5 {
    margin-bottom: 20px !important;
}

.text-start.emergency-btn.mt-4 a {
    width: 100% !important;
}
.emergency-fund-section img {
        width: 100% !important;
        height: 150px !important;
    }
    .sub-title-zakat {
    font-size: 14px;
}
.hero-content-zakat .zakat-tag {
    font-size: 14px;
}

span.progress-amt {
    font-size: 20px !important;
}

.result-container.p-5.rounded-4.mt-4.text-center {
    padding: 20px !important;
}
.result-container.p-5.rounded-4.mt-4.text-center .d-flex.gap-3.justify-content-center.mt-4 {
    display: flex;
    flex-direction: column;
}

.result-container.p-5.rounded-4.mt-4.text-center .d-flex.gap-3.justify-content-center.mt-4 button {
    width: 100%;
}

    .zakat-calculator-section h2.fw-bold.my-3, .zakat-calculator-section h2.fw-bold.my-3 span, .zakat-calculator-section h3.fw-bold, .zakat-calculator-section h5.fw-bold.mb-3, .zakat-calculator-section h1.display-3.fw-bold.my-3 {
        font-size: 20px !important;
    }
    
    
    button#calculateBtn {
    font-size: 14px;
}

    .calculator-form-container p {
        font-size: 13px;
        margin-bottom: 15px !important;
    }
    
    .zakat-calculator-section h3.mb-4, .zakat-calculator-section h4.fw-bold {
        font-size: 20px;
    }
    
    .checkout-steps .general-info-steps span {
    font-size: 14px !important;
}

.container.checkout-wrapper {
    padding: 40px 15px;
}

button.btn.btn-green.w-100.mt-4 {
    font-size: 14px;
}
.gift-aid-desc {
    font-size: 14px;
}

.gift-aid-highlight {
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
}

.payment-step .payment-tabs button img {
    width: 20px;
}
.checkout-steps .step {
    font-size: 14px;
}

.container.checkout-wrapper button.pay-tab-btn {
    padding: 10px;
}

.container.checkout-wrapper button.pay-tab-btn img {
    width: 20px;
    height: 20px;
}

.container.checkout-wrapper button.pay-tab-btn {
    font-size: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.express-payment-box {
    padding: 20px;
}

.payment-method-box .row .col-6 {
    width: 100% !important;
    margin-bottom: 10px;
}

.summary-item {
    display: flex;
    flex-direction: column;
}

.summary-content h3 {
    font-size: 25px;
    font-weight: 700;
    font-family: Barlow;
}
.item-price-circle {
    font-size: 16px;
}

.contact_form_css button.t-btn.btn.w-100.mt-4.fw-bold {
    font-size: 14px;
}

.our-impact-sec-02 div#counter {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 20px;
}



.our-impact-sec-02 div#counter .item {
    display: flex;
    flex-direction: column;
    width: 48%;
    position: relative;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.our-impact-sec-02 div#counter .item .counter_align_text h1 {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 5px;
}

.our-impact-sec-02 div#counter .item h3.text {
    font-size: 12px;
}

.our-impact-sec-02 div#counter .item::after {
    content: "";
    width: 1px;
    height: 100%;
    background-color: #ffffff40;
    position: absolute;
    right: -5%;
}

.our-impact-sec-02 div#counter .item:nth-child(2)::after {
    display: none;
}

section.our-impact-sec-03.padding-80 .row {
    gap: 20px;
}

    
}







/* mu_css_end */