@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400..900&display=swap");
:target {
  scroll-margin-top: 100px;
}

.fancybox__container {
  z-index: 1999;
}

.fancybox__track,
.fancybox__content,
.carousel__track {
  direction: ltr !important;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: #f3f3f3;
}

::-webkit-scrollbar-thumb {
  background: #f3f3f3;
  height: 300px;
}

* {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Outfit", sans-serif;
}

body {
  background-color: #f3f3f3;
  overflow-x: hidden;
  position: relative;
}

section:not(.event-section) {
  position: relative;
  background-color: transparent;
  overflow: hidden;
}
section:not(.event-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/bg.png);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -3;
}

html[lang=ar] {
  direction: rtl;
}
html[lang=ar] .slider-dots {
  right: 200px;
}
html[lang=ar] main .hero-section .slide .container .text-box {
  text-align: start;
}

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

a {
  text-decoration: none;
}

button,
input,
textarea, select {
  border: none;
  outline: none;
  background: none;
}

.row {
  margin: 0;
  padding: 0;
}

header {
  padding: 10px 0px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
@media screen and (max-width: 768px) {
  header {
    padding: 12px;
  }
}
header nav {
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease-in-out;
  padding: 10px 42px !important;
  background: #f3f3f3;
}
@media screen and (max-width: 768px) {
  header nav {
    padding: 10px 10px !important;
  }
}
header nav .logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
header nav .logo img {
  height: 58px;
}
@media screen and (max-width: 768px) {
  header nav .logo img {
    height: 40px;
  }
}
header nav .nav_links {
  gap: 32px;
  transition: 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 40%;
}
header nav .nav_links a {
  color: black;
  font-size: 1.1rem;
}
header nav .nav_links a.active {
  right: -16px;
  color: #938556;
}
header nav .nav_links a:hover {
  color: #938556;
}
@media screen and (max-width: 768px) {
  header nav .nav_links {
    position: absolute;
    top: -16px;
    bottom: -16px;
    right: calc(-50% - 16px);
    height: calc(100vh + 16px);
    flex-direction: column;
    background: #f3f3f3;
    width: 50%;
    padding: 48px 32px;
    align-items: start;
    justify-content: start;
  }
  header nav .nav_links a {
    color: #8a8989;
  }
  header nav .nav_links.active {
    right: -16px;
    color: #938556;
  }
}
header nav .actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 16px;
}
header nav .actions .toggler {
  display: none;
  color: black;
}
@media screen and (max-width: 768px) {
  header nav .actions .toggler {
    display: flex;
  }
}
header nav.sticky {
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  header nav.sticky {
    padding: 10px !important;
  }
}

main .hero-bottom-shape {
  width: 100%;
  height: 130px;
  background: url("../images/header.png") no-repeat center top;
  background-size: 100% 100%;
  margin-top: -1px;
  z-index: 5;
  position: relative;
}
@media screen and (max-width: 768px) {
  main .hero-bottom-shape {
    height: 100px;
  }
}
main .hero-section {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background-color: #938556;
  color: #fff;
  padding: 50px;
  z-index: 3;
}
main .hero-section .slider-dots {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  justify-content: flex-start;
  position: absolute;
  bottom: 50px;
  left: 200px;
  z-index: 5;
}
@media (max-width: 991px) {
  main .hero-section .slider-dots {
    max-width: 420px;
    left: 35%;
  }
}
main .hero-section .slider-dots .dot {
  display: block;
  width: 30px;
  height: 3px;
  background: rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
  border-radius: 2px;
}
main .hero-section .slider-dots .dot.active {
  background: #938556;
  width: 40px;
}
main .hero-section::before {
  content: "";
  background: url("../images/herobg.png");
  filter: brightness(0) invert(0);
  opacity: 0.03;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
main .hero-section .slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-color);
  color: white;
  text-align: left;
  transition: opacity 1s ease, transform 1.2s ease;
  opacity: 0;
  z-index: 0;
  padding: 0 50px;
}
main .hero-section .slide.active {
  opacity: 1;
  z-index: 1;
}
main .hero-section .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  opacity: 0.3;
  z-index: 0;
}
main .hero-section .slide .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 15px;
}
main .hero-section .slide .container .text-box {
  flex: 1 1 50%;
  padding-right: 30px;
  text-align: start;
}
main .hero-section .slide .container .text-box h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  font-weight: 700;
}
@media (max-width: 991px) {
  main .hero-section .slide .container .text-box h1 {
    font-size: 2.1rem;
  }
}
main .hero-section .slide .container .text-box p {
  font-size: 1.3rem;
  max-width: 700px;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  main .hero-section .slide .container .text-box p {
    font-size: 1rem;
  }
}
main .hero-section .slide .container .text-box .btn-warning {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid white;
  border-radius: 15x;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: #938556;
  z-index: 1;
  background-color: white;
}
main .hero-section .slide .container .text-box .btn-warning::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(147, 133, 86, 0.3);
  transform: skewX(-30deg);
  transition: all 0.5s ease-in-out;
}
main .hero-section .slide .container .text-box .btn-warning:hover::before {
  left: 100%;
}
main .hero-section .slide .container .image-box {
  flex: 1 1 40%;
  display: flex;
  justify-content: center;
}
main .hero-section .slide .container .image-box .slide-img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 768px) {
  main .hero-section .slide .container {
    flex-direction: column;
  }
  main .hero-section .slide .container .text-box,
  main .hero-section .slide .container .image-box {
    flex: 1 1 100%;
    padding: 0;
    text-align: center;
  }
  main .hero-section .slide .container .text-box {
    margin-bottom: 20px;
  }
}
main .about-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
main .about-section h2 {
  color: #938556;
  margin-bottom: 50px;
}
main .about-section .story-content p {
  font-size: 1.125rem;
  color: #8a8989;
  margin-bottom: 25px;
  line-height: 1.9;
  text-align: justify;
}
main .about-section .story-content p strong {
  color: #938556;
  font-weight: 600;
}
main .about-section .image-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: -100px;
}
@media (max-width: 576px) {
  main .about-section .image-wrapper {
    justify-content: center;
  }
}
main .about-section .image-wrapper .swiper {
  width: 80%;
  -webkit-mask-image: url("../images/about3.png");
  -webkit-mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("../images/about3.png");
  mask-size: cover;
  mask-repeat: no-repeat;
  overflow: hidden;
}
@media (max-width: 576px) {
  main .about-section .image-wrapper .swiper {
    width: 100%;
  }
}
main .about-section .image-wrapper .swiper .swiper-slide img {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  transition: transform 1s ease;
}
main .about-section .image-wrapper .swiper .swiper-slide img:hover {
  transform: scale(1.05);
}
main .features {
  padding: 10px 0 60px 0;
}
main .features h2 {
  color: #938556;
  margin-bottom: 50px;
}
main .features .feature-lead {
  /* max-width: 650px; */
  margin-bottom: 2rem;
  color: #222;
  font-size: 1.25rem;
  border-left: 5px solid #938556;
  padding: 1.25rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(29, 143, 110, 0.07);
}
@media (max-width: 576px) {
  main .features .feature-lead {
    font-size: 1rem;
    padding: 1rem;
  }
}
main .features .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
main .features .about-card {
  position: relative;
  background: #f3f3f3;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 12px rgba(147, 133, 86, 0.15);
}
main .features .about-card .card-img {
  overflow: hidden;
}
main .features .about-card .card-img img {
  width: 100%;
  height: 230px;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  border-bottom: 1px solid #dfdfdf;
}
main .features .about-card .card-content {
  padding: 20px;
  color: black;
}
main .features .about-card .card-content h5 {
  font-size: 1.2rem;
  color: #938556;
  margin-bottom: 10px;
  font-weight: 700;
}
main .features .about-card .card-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: #221f14;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
main .features .about-card .card-content .register-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid #938556;
  color: #fff;
  padding: 0.3rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  background: #938556;
}
main .features .about-card .card-content .register-btn i {
  transition: transform 0.3s ease;
}
main .features .about-card .card-content .register-btn:hover {
  background: transparent;
  color: #938556;
}
main .features .about-card .card-content .register-btn:hover i {
  transform: translateX(4px);
}
main .features .about-card .card-content .progress-bar {
  background: #ddd;
  border-radius: 10px;
  overflow: hidden;
  height: 10px;
  margin-bottom: 10px;
  width: 100%;
}
main .features .about-card .card-content .progress {
  background: #938556;
  height: 100%;
  width: 0;
  transition: width 2s ease;
  border-radius: 10px 0 0 10px;
}
main .features .about-card .card-content .fund-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #433c27;
}
main .features .about-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(147, 133, 86, 0.5);
}
main .features .about-card:hover .card-img img {
  transform: scale(1.03);
  filter: brightness(1.05);
}
main .event-section {
  position: relative;
  padding: 60px 0;
  background-image: url("../images/eventbg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  margin: 20px 0 60px 0;
}
main .event-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.685);
  z-index: 1;
}
main .event-section .container {
  position: relative;
  z-index: 2;
}
main .event-section a {
  color: #938556;
  font-weight: 700;
  text-decoration: underline;
}
main .event-section .event-content {
  color: #fff;
}
main .event-section .event-content .sub-title {
  color: #938556;
  font-weight: 500;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}
main .event-section .event-content .title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 20px;
}
main .event-section .event-content .event-info {
  font-size: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 80px;
  margin-bottom: 20px;
}
@media (max-width: 992px) {
  main .event-section .event-content .event-info {
    gap: 30px;
  }
}
main .event-section .event-content .event-info i {
  color: #938556;
  margin-right: 6px;
}
main .event-section .event-content .event-message {
  font-size: 16px;
  margin-bottom: 25px;
  line-height: 1.6;
  color: #eee;
}
main .event-section .event-content .event-message strong {
  color: #938556;
}
main .event-section .event-content .countdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}
main .event-section .event-content .countdown .time-box {
  text-align: center;
}
main .event-section .event-content .countdown .time-box h3 {
  font-size: 38px;
  margin: 0;
  color: #938556;
}
main .event-section .event-content .countdown .time-box p {
  font-size: 14px;
  margin: 0;
}
main .donation_section {
  padding: 120px 0px;
}
@media (max-width: 991px) {
  main .donation_section {
    padding: 20px 0px;
  }
}
main .donation_section .donation {
  position: relative;
  overflow: visible;
}
main .donation_section .donation::before {
  content: "";
  position: absolute;
  top: -27%;
  left: 50%;
  width: 30%;
  height: 400px;
  background-size: cover;
  z-index: 3;
  transform: translateX(-50%);
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 526.16 600"><path d="M526.24,211.95c0,77.96-0.02,155.92,0.08,233.88c0,3.17-0.29,4.23-3.96,4.22c-172.75-0.12-345.49-0.12-518.24,0c-3.67,0-3.96-1.06-3.96-4.23c0.1-78.29,0.08-156.59,0.08-234.88c7.78-21.03,24-30.67,45.27-33.16c4.2-0.49,4.67-2.73,4.73-6.06c0.39-22.14,11.45-37.76,30.17-48.43c13.24-7.55,27.66-10.46,42.81-9.64c3.82,0.21,6.11-0.96,7.84-4.54c12.26-25.31,31.61-43.43,56.98-55.22c10.88-5.06,22.06-9.46,32.54-15.35c17.31-9.75,33.26-21.04,43.66-38.6c0.33,0,0.67,0,1,0c5.68,10.26,13.77,18.33,22.99,25.38c13.75,10.51,28.97,18.42,44.9,24.92c29.09,11.87,51.54,30.88,65.42,59.38c1.45,2.98,3.4,4.05,6.67,3.91c8.56-0.36,16.95,0.89,25.16,3.31c27.38,8.06,46.93,30.09,45.2,55.68c-0.25,3.63,1.71,4.76,5.12,5.2C502.31,180.5,518.75,190.31,526.24,211.95z" fill="%23000000"/></svg>') no-repeat center top;
}
main .donation_section .donation::after {
  content: "";
  position: absolute;
  bottom: -20%;
  left: 0;
  width: 100%;
  height: 70px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571 568"><path d="M0,285c0-0.67,0-1.33,0-2c8.61-5.65,15.18-13.46,21.86-21.08c12.95-14.78,24.65-30.67,38.92-44.27c12.39-11.81,26.05-21.27,43.81-23.07c5.21-0.53,7.8-3.85,8.14-9.17c0.14-2.32,0-4.67,0.07-7c0.61-20.09,8.49-36.79,23.69-49.91c13.47-11.63,29.32-16.72,47-16.55c8.94,0.08,11.26-1.9,12.49-10.58c1.22-8.56,4.35-16.37,9-23.63c10.24-15.99,24.68-27.83,38.95-39.88C258.17,25.84,273.4,14.89,285,0c0.33,0,0.67,0,1,0c6.55,8.74,14.71,15.85,22.97,22.88c15.09,12.85,31.11,24.65,44.7,39.18c10.15,10.85,18.56,22.71,21.11,37.84c1.86,11.03,3.11,11.91,14.23,12.05c22.71,0.29,41.49,8.96,55.43,27.06c10.02,13.02,14.41,27.95,13.81,44.42c-0.26,7.06,2.42,10.55,8.64,11.21c13.63,1.46,25.04,7.58,35.44,16.05c16.03,13.05,28.27,29.59,41.62,45.12c8.35,9.71,16.32,19.82,27.04,27.18c0,0.67,0,1.33,0,2c-3.95,2-6.83,5.29-9.91,8.32c-14.07,13.8-25.61,29.82-38.79,44.4c-15.6,17.24-31.93,33.31-56.87,35.93c-4.4,0.46-6.9,3.84-7.16,8.41c-0.14,2.49,0.01,5-0.07,7.5c-0.6,20.1-8.54,36.79-23.69,49.92c-13.73,11.91-29.96,16.89-48,16.59c-7.18-0.12-10.55,2.32-11.23,8.56c-1.41,12.92-7.15,23.81-15.07,33.76c-9.61,12.09-21.44,21.85-33.15,31.75c-14.23,12.03-29.54,22.9-41.07,37.86c-0.33,0-0.67,0-1,0c-6.7-8.83-14.98-16.06-23.36-23.19c-15.09-12.85-31.09-24.66-44.67-39.22c-10.99-11.78-19.64-24.78-21.33-41.43c-0.53-5.23-3.87-7.84-9.15-8.09c-1.83-0.09-3.67,0.06-5.5-0.01c-27.59-1.15-48.35-13.34-61.23-38.08c-5.52-10.6-7.38-21.98-7.04-33.87c0.19-6.69-2.56-10.1-8.63-10.75c-13.62-1.47-25.03-7.59-35.44-16.06c-16.04-13.04-28.3-29.56-41.61-45.12C18.72,302.43,10.67,292.41,0,285z" fill="%23000000"/></svg>') no-repeat center bottom;
  background-size: cover;
  z-index: 3;
}
main .donation_section .donation .container {
  background-color: black;
  color: #fff;
  border-radius: 30px;
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 50px;
  z-index: 3;
}
main .donation_section .donation .container::before {
  content: "";
  background: url("../images/pattern.png");
  opacity: 0.2;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
}
main .donation_section .donation .container h2 {
  font-size: 36px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
main .donation_section .donation .container p {
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
main .donation_section .donation .container .progress-area {
  margin: 20px 0;
  position: relative;
  z-index: 1;
}
main .donation_section .donation .container .progress-area .progress {
  height: 20px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
main .donation_section .donation .container .progress-area .progress .progress-bar {
  background-color: #938556;
  height: 100%;
  transition: width 0.5s ease;
}
main .donation_section .donation .container .progress-area .progress-info {
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: space-between;
}
main .donation_section .donation .container .btn-donate {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #938556;
  border-radius: 5px;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: white;
  z-index: 1;
  background-color: #938556;
}
main .donation_section .donation .container .btn-donate::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transform: skewX(-30deg);
  transition: all 0.5s ease-in-out;
}
main .donation_section .donation .container .btn-donate:hover::before {
  left: 100%;
}
@media (max-width: 991px) {
  main .donation_section .donation::before {
    top: -15%;
  }
  main .donation_section .donation::after {
    bottom: -10%;
  }
}
@media (max-width: 767.98px) {
  main .donation_section .donation {
    padding: 40px 20px;
  }
  main .donation_section .donation .container {
    padding: 30px;
  }
  main .donation_section .donation::before {
    top: 0;
  }
  main .donation_section .donation::after {
    bottom: 0;
  }
}
main .donate-form {
  position: relative;
  padding: 20px 0 60px 0;
}
main .donate-form h2 {
  color: #938556;
  font-weight: 700;
}
main .donate-form .donate-form {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(147, 133, 86, 0.06);
}
main .donate-form .donate-form h4 {
  color: #938556;
  margin-bottom: 24px;
  font-weight: 700;
  font-size: 1.5rem;
}
main .donate-form .donate-form .form-group {
  position: relative;
  margin-bottom: 24px;
}
main .donate-form .donate-form .form-group label {
  position: absolute;
  top: 12px;
  left: 0;
  color: #999;
  font-size: 0.95rem;
  font-weight: 500;
  pointer-events: none;
  transition: 0.3s ease;
}
main .donate-form .donate-form .form-group .form-control {
  border: none;
  border-bottom: 2px solid #eee;
  border-radius: 0;
  padding: 12px 0 8px 0;
  font-size: 0.95rem;
  background: transparent;
  transition: all 0.3s ease;
  box-shadow: none;
  width: 100%;
}
main .donate-form .donate-form .form-group .form-control:focus {
  border-color: #938556;
  outline: none;
}
main .donate-form .donate-form .form-group .form-control:not(:-moz-placeholder-shown) + label {
  top: -12px;
  font-size: 0.8rem;
  color: #938556;
}
main .donate-form .donate-form .form-group .form-control:focus + label, main .donate-form .donate-form .form-group .form-control:not(:placeholder-shown) + label {
  top: -12px;
  font-size: 0.8rem;
  color: #938556;
}
main .donate-form .donate-form .form-group textarea.form-control {
  resize: vertical;
  min-height: 100px;
}
main .donate-form .donate-form .btn-donate {
  display: inline-block;
  padding: 14px 28px;
  border: none;
  border-radius: 50px;
  background-color: #938556;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
main .donate-form .donate-form .btn-donate::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-30deg);
  transition: all 0.5s ease-in-out;
  z-index: 0;
}
main .donate-form .donate-form .btn-donate:hover::before {
  left: 100%;
}
main .donate-form .donate-form .btn-donate:hover {
  background-color: #80744b;
}
main .donate-form .payment-methods h5 {
  color: #938556;
  font-weight: 700;
  margin-bottom: 16px;
  font-size: 1.2rem;
}
main .donate-form .payment-methods .payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
main .donate-form .payment-methods .payment-options .payment-item {
  background: #fff;
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  flex: 1 1 calc(50% - 16px);
  max-width: calc(50% - 16px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(147, 133, 86, 0.05);
  text-decoration: none;
  border: 1px solid #eee;
}
main .donate-form .payment-methods .payment-options .payment-item:hover {
  background: #938556;
  color: #fff;
  transform: translateY(-3px);
}
main .donate-form .payment-methods .payment-options .payment-item img {
  max-height: 36px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}
@media (max-width: 576px) {
  main .donate-form .payment-methods .payment-options .payment-item img {
    max-height: 26px;
  }
}
main .donate-form .payment-methods .payment-options .payment-item span {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: black;
  transition: color 0.3s ease;
}
@media (max-width: 576px) {
  main .donate-form .payment-methods .payment-options .payment-item span {
    font-size: 0.7rem;
  }
}
main .donate-form .payment-methods .payment-options .payment-item:hover span {
  color: #fff;
}
main .help-section {
  position: relative;
  padding: 20px 0 60px 0;
}
main .help-section h2 {
  color: #938556;
  font-weight: 700;
}
main .help-section .help-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
}
@media (max-width: 992px) {
  main .help-section .help-wrapper {
    flex-direction: column;
  }
}
main .help-section .help-column {
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex: 1;
}
main .help-section .help-column .help-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
main .help-section .help-column .help-item .help-icon {
  position: relative;
  overflow: hidden;
  font-size: 40px;
  color: #fff;
  width: 70px;
  height: 70px;
  padding: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #938556;
  transition: transform 0.3s ease, color 0.3s ease;
  z-index: 1;
  mask-image: url("../images/aboutbg.svg");
  -webkit-mask-image: url("../images/aboutbg.svg");
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
@media (max-width: 768px) {
  main .help-section .help-column .help-item .help-icon {
    font-size: 30px;
    width: 70px;
    height: 70px;
    padding: 40px;
  }
}
main .help-section .help-column .help-item .help-icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.4s ease;
  z-index: 0;
}
main .help-section .help-column .help-item .help-icon i {
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}
main .help-section .help-column .help-item .help-icon:hover::before {
  transform: translate(-50%, -50%) scale(1);
}
main .help-section .help-column .help-item .help-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}
main .help-section .help-column .help-item .help-icon:hover i {
  color: #938556;
}
main .help-section .help-column .help-item .help-text h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
main .help-section .help-column .help-item .help-text p {
  font-size: 14px;
  color: #666;
  max-width: 280px;
}
main .help-section .help-center {
  flex-shrink: 0;
  position: relative;
  width: 450px;
  height: 450px;
}
@media (max-width: 992px) {
  main .help-section .help-center {
    width: 350px;
    height: 350px;
  }
}
main .help-section .help-center img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main .help-section .help-center:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}
main .contact-section {
  padding: 50px 0;
  position: relative;
}
main .contact-section .contact-form {
  background: #fff;
  padding: 35px;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(147, 133, 86, 0.06);
}
@media (max-width: 991px) {
  main .contact-section .contact-form {
    margin-top: 20px;
  }
}
main .contact-section .contact-form .form-label {
  font-weight: 500;
  color: black;
  margin-bottom: 4px;
  display: block;
}
main .contact-section .contact-form .form-control {
  border: none;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  padding: 10px 0;
  background: transparent;
  font-size: 15px;
  transition: all 0.3s ease;
}
main .contact-section .contact-form .form-control:focus {
  border-color: #938556;
  box-shadow: none;
  background: transparent;
}
main .contact-section .contact-form select.form-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent url("data:image/svg+xml;charset=UTF8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='gray' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: 16px 16px;
  padding-right: 30px;
}
main .contact-section .contact-form textarea.form-control {
  resize: vertical;
  min-height: 120px;
}
main .contact-section .contact-form button {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 30px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  color: white;
  background-color: #938556;
  font-weight: 600;
}
main .contact-section .contact-form button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.2);
  transform: skewX(-30deg);
  transition: all 0.5s ease-in-out;
}
main .contact-section .contact-form button:hover::before {
  left: 100%;
}
main .contact-section .contact-form button:hover {
  background-color: #83764d;
}
main .contact-section .contact-info h2 {
  font-size: 30px;
  font-weight: bold;
  color: #938556;
}
main .contact-section .contact-info .contact-details {
  list-style: none;
  padding: 30px 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
main .contact-section .contact-info .contact-details li {
  display: flex;
  align-items: start;
  gap: 12px;
  font-size: 1.1rem;
  padding: 8px 0;
}
main .contact-section .contact-info .contact-details li img {
  height: 35px;
  width: auto;
}
main .contact-section .contact-info .contact-details li div {
  display: flex;
  flex-direction: column;
}
main .contact-section .contact-info .contact-details li div a {
  font-size: 1rem;
  color: gray;
}
main .contact-section .contact-info .contact-details li div a:hover {
  color: #938556;
}
main .contact-section .contact-info .contact-details li div p {
  margin: 0;
  color: #8a8989;
  font-size: 1rem;
}
@media (max-width: 768px) {
  main .contact-section .contact-info .contact-details {
    grid-template-columns: 1fr;
  }
}
main .contact-section .contact-info h5 {
  margin-top: 20px;
  color: #938556;
}
main .contact-section .contact-info .social-icons {
  display: flex;
  gap: 15px;
  padding: 20px 0px;
}
main .contact-section .contact-info .social-icons li {
  list-style: none;
}
main .contact-section .contact-info .social-icons li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: transparent;
  color: black;
  font-size: 1.2rem;
  transition: 0.3s;
}
main .contact-section .contact-info .social-icons li a:hover {
  background-color: black;
  color: white;
}

.footer {
  color: white;
  padding: 50px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: #000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url("../images/foeterbg.png");
  background-size: cover;
  background-repeat: repeat;
  background-position: center;
}
.footer .logo img {
  height: 70px;
  margin-bottom: 30px;
}
.footer h4 {
  font-size: 18px;
  margin-bottom: 15px;
}
.footer .footer-links {
  list-style: none;
  padding: 0;
}
.footer .footer-links li {
  margin-bottom: 10px;
}
.footer .footer-links a {
  color: #8a8989;
  text-decoration: none;
  transition: 0.3s;
}
.footer .footer-links a:hover {
  color: #938556;
}
.footer .info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.footer .info-box i {
  margin-bottom: 15px;
  font-size: 18px;
  color: #938556;
}
.footer .info-box a {
  color: #8a8989;
  text-decoration: none;
}
.footer .info-box a:hover {
  color: #938556;
}
.footer .social-icons a {
  display: inline-block;
  font-size: 20px;
  color: #8a8989;
  margin-right: 15px;
  transition: 0.3s;
}
.footer .social-icons a:hover {
  color: #938556;
}
.footer .footer-bottom {
  padding-top: 20px;
  font-size: 14px;
  color: #8a8989;
}
.footer .footer-bottom span {
  color: #938556;
}/*# sourceMappingURL=style.css.map */