* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}
.read-btn{
  background: #ff3333 !important;
  border-radius: 10px;
}

/* ===== TOP HEADER ===== */

.top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  height: 128px;
  position: relative;
  overflow: hidden;
}


/* LEFT LOGO AREA */

.header-left {
  display: flex;
  align-items: center;
  padding-left: 116px;
  z-index: 2;
}

.title-img {
  height: 90px;
}


/* RIGHT CURVE AREA */

.header-right {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 48%;
  background: #4b4b4b;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom-left-radius: 130px;
}


/* CONTACT */

.contact {
  display: flex;
  gap: 40px;
  color: white;
  font-size: 18px;
  font-weight: 600;
}

.contact i {
  color: #E36955;
}


/* ===== NAVBAR ===== */

.navbar {
  background: #000;
  width: 100%;
}

.nav-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}


/* MENU */

.menu {
  display: flex;
  list-style: none;
  gap: 25px;
  padding-left: 50px;
}

.menu li a {
  color: white;
  text-decoration: none;
  font-size: 17px;
  font-weight: 700;
  transition: 0.3s;
}
.modal-content {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 10;
}
/* .menu li a:hover,
.menu li a.active {
  color: #ff6a00;
} */


/* DONATE BUTTON */

.donate-btn {
  background: #004f51 !important;
  color: white;
  padding: 12px 26px !important;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
  border: 1px solid #fff !important;
}

.donate-btn:hover {
  background: #e65c00;
}
/* .menu li a:hover {
  color: #ff6a00;
  cursor: pointer;
} */
/* .dropdown-menu li a:hover {
  background: #f2f2f2;
  color: #ff6a00;
  cursor: pointer;
} */
.menu li a {
  cursor: pointer;
}

/* Dropdown */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #f5f5f5;
  width: 230px;
  display: none;
  list-style: none;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.dropdown-menu li {
  border-bottom: 1px solid #ddd;
}

.dropdown-menu li a {
  display: block;
  padding: 12px 15px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
}

.dropdown-menu li a:hover {
  background: #eee;
  color: #ff6a00;
}

/* Show dropdown on hover */

.dropdown:hover .dropdown-menu {
  display: block;
}

/* ===== RESPONSIVE ===== */

@media(max-width:900px) {

  .header-right {
    position: relative;
    width: 100%;
    border-radius: 0;
    height: auto;
    padding: 15px;
  }

  .top-header {
    flex-direction: column;
    height: auto;
  }

  .header-left {
    padding: 15px;
  }

  .contact {
    flex-direction: column;
    gap: 10px;
  }

  .nav-container {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .menu {
    flex-wrap: wrap;
    justify-content: center;
  }

}

/* ----------------- Footer Start------------- */

.footer {
  background: #000;
  color: #fff;
  padding-top: 60px;
}

.footer-container {
  padding-bottom: 40px;
}

.footer-logo {
  width: 260px;
  margin-bottom: 20px;
}

.footer-col h3 {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 700;
}

.footer-col h3::after {
  content: "........";
  display: block;
  letter-spacing: 4px;
  font-size: 18px;
  margin-top: 5px;
}

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

.footer-col ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  line-height: 2.2;
  font-size: 17px;
}
.footer-col ul li i {
  /* color: #ff6a00; */
  font-size: 14px;
}
/* 
.footer-col ul li:hover {
  color: #ff6a00;
} */

.about p {
  line-height: 1.7;
  margin-bottom: 20px;
}

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

.social a {
  width: 40px;
  height: 40px;
  background: #fff;
  color: #ff6a00;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
}

.social a:hover {
  background: #ff6a00;
  color: #fff;
}


/* Bottom Footer */

.footer-bottom {
  background: #7a7a7a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 40px;
  flex-wrap: wrap;
  gap: 120px;
}
.footer-bottom p{
  font-size: 21px;
  font-weight: 700;
  margin: 0;
}
.footer-links {
  display: flex;
  gap: 25px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 17px;
}

.footer-links a:hover {
  color: #ff6a00;
}
.footer-contact {
  /* display: flex; */
  gap: 40px;
  color: white;
  font-size: 16px;
  /* font-weight: 600; */
}

/* Cookie Button */

.cookie-btn {
  position: fixed;
  bottom: 18px;
  left: 18px;
  width: 60px;
  height: 60px;
  background: #5a5a5a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}

/* ----------------- Footer End ------------- */


.menu-toggle {
  display: none;
  font-size: 26px;
  color: white;
  cursor: pointer;
}
@media(max-width:768px) {

  .header-right {
    display: none;
  }

  .title-img {
    height: 60px;
  }

    .footer-col {
      margin-bottom: 30px;
      text-align: left;
    }

  .footer-links {
    flex-direction: column;
    gap: 10px;
    padding-left: 0;
  }

}
.footer-contact li {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.hero {
  position: relative;
}

.hero-img {
  height: 600px;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  top: 40%;
  left: 3%;
  color: #fff;
  max-width: 500px;
}

.hero-overlay h1 {
  font-size: 60px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.4);
  padding: 10px 20px;
}

.tag {
  background: rgba(0, 0, 0, 0.4);
  padding: 6px 12px;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 10px;
}

.hero-btn {
  background: #000;
  color: #fff;
  padding: 12px 25px;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
}
.carousel-control-prev,
.carousel-control-next {
  opacity: 0;
  transition: 0.3s;
}

.hero:hover .carousel-control-prev,
.hero:hover .carousel-control-next {
  opacity: 1;
}
.donation-banner {
  background: #ff765d;
  /* padding: 80px 0; */
  margin-top: -70px;
  position: relative;
  z-index: 5;

  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
}

.donation-banner .container {
  max-width: 1400px;
}

.banner-left {
  background: #ffb845;
    padding: 120px 20px !important;
  color: #fff;
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;

  height: 100%;
  padding: 60px;
}

.banner-left:after {
  content: "";
  position: absolute;
  top: 0;
  right: -50px;
  width: 100px;
  height: 100%;
  background: #ff765d;
  transform: skewX(-15deg);
}

.banner-left h2 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
}
.banner-middle h3 {
  font-size: 40px;
  color: #fff;
}

.progress {
  height: 10px;
  background: #eee;
  border-radius: 0;
}
.banner-middle p{
  padding-top: 10px;
  color: #fff;
  font-size: 19px;
}
.progress-bar {
  background: #e4a63f;
}
.banner-right {
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.banner-right h3 {
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 10px;
}
.donation-banner {
  opacity: 0;
  transition: 1s;
}
.banner-middle {
  padding-left: 80px;
}
@media(max-width:768px) {

  .banner-left:after {
    display: none;
  }

  .banner-left {
    margin-bottom: 30px;
  }

  .banner-middle {
    padding-left: 0;
  }
}
.ngo-section {
  /* background: #efefef; */
  padding: 100px 0;
}


/* image */

.ngo-img img {
  width: 100%;
  height: 600px;
   object-fit: cover; 
  border-radius: 6px;
}

/* card */

.ngo-card {
  background: #fff;
  padding: 60px 50px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  border-radius: 8px;
}

/* heart */

.heart {
  color: #e4a63f;
  font-size: 18px;
  display: block;
  margin-bottom: 15px;
}

/* heading */

.ngo-card h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #333;
  line-height: 1.3;
}

/* paragraph */

.ngo-card p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
}

/* responsive */

@media(max-width:991px) {

  .ngo-img img {
    height: auto;

  }

  .ngo-card {
    margin-top: 30px;
    padding: 40px 30px;
  }

  .ngo-card h2 {
    font-size: 30px;
  }

}
.cause-section {
  background: #efefef;
  padding: 80px 0;
}

/* card */
.cause-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0px 0px 1px 1px;
}

.cause-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.4s;
}
.memberhead
{
  font-size: 18px;
    color:black;
    text-align: center;
    padding-top: 10px;
   
    scroll-behavior: smooth;
    font-family: Poppins, sans-serif;

}
/* blur effect */

.cause-card:hover img {
  /*filter: blur(3px);*/
  transform: scale(1.05);
}

/* overlay text */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  opacity: 0;
  transition: 0.4s;
  padding: 20px;
  z-index: 2;
}

/* hover show text */

.cause-card:hover .overlay {
  opacity: 1;
}

/* overlay color */

.cause-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.4s;
  z-index: 1;
}

.color1:before {
  background: #3ec7c6;
}

.color2:before {
  background: #ff6f61;
}

.color3:before {
  background: #f7a531;
}

.color4:before {
  background: #ff3c57;
}

.cause-card:hover:before {
  opacity: 0.6;
}

/* text style */

.overlay h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

.overlay p {
  font-size: 14px;
}
.cause-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* image */

.cause-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.5s;
}

/* blur effect */

.cause-card:hover img {
  filter: blur(2px);
  transform: scale(1.05);
}

/* overlay */

.cause-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.4s;
}

/* color overlays */

.color1:before {
  background: #3ec7c6;
}

.color2:before {
  background: #ff6f61;
}

.color3:before {
  background: #f7a531;
}

.color4:before {
  background: #ff3c57;
}

.cause-card:hover:before {
  opacity: 0.45;
}

/* bottom color strip */

.color-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12px;
  transform: skewX(-20deg);
}

/* strip colors */

.color1 .color-strip {
  background: #3ec7c6;
}

.color2 .color-strip {
  background: #ff6f61;
}

.color3 .color-strip {
  background: #f7a531;
}

.color4 .color-strip {
  background: #ff3c57;
}
.impact-section {
  background: #efefef;
  padding-bottom: 40px;
}

/* LEFT HEADING */

.impact-title {
  font-size: 42px;
  line-height: 1.4;
  font-weight: 500;
  color: #333;
}

.impact-title span {
  color: #ff6f61;
  font-weight: 700;
}

/* RIGHT TEXT */

.impact-text {
  font-size: 17px;
  line-height: 1.9;
  color: #666;
}

/* responsive */

@media(max-width:991px) {

  .impact-title {
    font-size: 32px;
    margin-bottom: 25px;
  }

}

.donor-section {
  /* background: #efefef; */
  padding: 100px 0;
  text-align: center;
}

.donor-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 60px;
}

.donor-logo {
  max-height: 70px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: 0.3s;
}

.donor-logo:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* arrows hidden */

.donor-carousel .carousel-control-prev,
.donor-carousel .carousel-control-next {
  opacity: 0;
  transition: 0.3s;
}

/* arrows show on hover */

.donor-carousel:hover .carousel-control-prev,
.donor-carousel:hover .carousel-control-next {
  opacity: 1;
}

/* hide default icon */

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: none;
}

/* arrow container */

.donor-prev,
.donor-next {
  width: 60px;
  height: 40px;
  background: #e8a23a;
  opacity: 0;
  transition: 0.3s;
  border: none;
}

/* skew shape */

.donor-prev {
  transform: skewX(-20deg);
  left: -20px;
}

.donor-next {
  transform: skewX(-20deg);
  right: -20px;
}

/* arrow icon */

.arrow-icon {
  color: #fff;
  background: #000;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transform: skewX(20deg);
}

/* show arrows on hover */

.donor-carousel:hover .donor-prev,
.donor-carousel:hover .donor-next {
  opacity: 1;
}

.project-section {
  padding: 100px 0;
}

/* IMAGE */

.project-img img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 4px;
}

/* CARD */

.project-card {
  background: #fff;
  padding: 60px 50px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  position: relative;
}

/* HEART */

.project-heart {
  color: #f3a742;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

/* TITLE */

.project-card h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #333;
  font-family: serif;
}

/* TEXT */

.project-card p {
  font-size: 17px;
  line-height: 1.9;
  color: #555;
}

/* RESPONSIVE */

@media(max-width:991px) {

  .project-img img {
    height: auto;
  }

  .project-card {
    margin-top: 30px;
    padding: 40px;
  }

  .project-card h2 {
    font-size: 32px;
  }

}

.stats-section {
  background: #55aeb3;
  padding: 70px 0;
  color: #fff;
}

.stat-box {
  padding: 20px;
}

.stat-icon {
  font-size: 50px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.stat-box h2 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.stat-box p {
  font-size: 20px;
  font-weight: 600;
}

.impacts-section {
  background: url("assets/imgs/bg-3.jpg") center/cover no-repeat;
  position: relative;
  padding: 120px 0;
  color: #fff;
}

.impacts-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: #efefef; */
}

.impacts-section .container {
  position: relative;
  z-index: 2;
}

/* heading */

.impacts-section h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  font-family: serif;
}

.subtitle {
  color: #f3a742;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.impacts-section p {
  line-height: 1.8;
  margin-bottom: 30px;
  color: #ddd;
}

/* heart */

.heart {
  color: #f3a742;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

/* button */

.impacts-btn {
  display: inline-block;
  background: #004f51;
  color: #fff;
  padding: 14px 35px;
  text-decoration: none;
  font-weight: 600;
  /*transform: skewX(-15deg);*/
  border-radius: 10px;
}

.impacts-btn:hover {
  background: #e69c2d;
}

/* video */

.video-box iframe {
  width: 100%;
  height: 320px;
  border: none;
  border-radius: 4px;
}

/* responsive */

@media(max-width:991px) {

  .impacts-section {
    padding: 80px 0;
    text-align: center;
  }

  .impacts-section h2 {
    font-size: 38px;
  }

  .video-box iframe {
    height: 250px;
  }

}

.causes-section {
  background: #f5f5f5;
  padding: 100px 0;
}

.cause-title {
  font-size: 52px;
  font-weight: 700;
  font-family: serif;
}

.cause-sub {
  color: #6c3fc9;
  letter-spacing: 2px;
}

.heart {
  color: #f3a742;
  display: block;
  margin-bottom: 10px;
}


/* CARD */

.cause-card {
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.cause-img {
  position: relative;
}

.cause-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.badge-progress {
  position: absolute;
  bottom: -12px;
  left: 20px;
  background: #f3a742;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
}

.cause-content {
  padding: 40px 30px;
}

.cause-content h3 {
  font-family: serif;
  font-size: 28px;
  margin-bottom: 15px;
}

.goal span {
  color: #ff5733;
}

.raised span {
  color: #ff5733;
}


/* button */

.cause-btn {
  display: inline-block;
  margin-top: 20px;
  background:  #004f51;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 5px;
  /*transform: skewX(-15deg);*/
  border: none;
}
.gallery-section {
  background: #cc9966;
  padding: 60px 0;
  position: relative;
}

.gallery-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.gallery-section .container {
  position: relative;
  z-index: 2;
}

.gallery-title {
  font-size: 52px;
  color: #fff;
  font-family: serif;
}

.gallery-sub {
  color: #ddd;
  letter-spacing: 2px;
  margin-bottom: 50px;
}

.gallery-heart {
  color: #f3a742;
  display: block;
  margin-bottom: 10px;
}

/* image */

.gallery-card {
  position: relative;
  overflow: hidden;
}

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

/* overlay */

.overlay {
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: rgba(0, 200, 200, 0.6);
  transition: 0.4s;
  transform: skewX(-20deg);
}

.gallery-card:hover .overlay {
  left: 0;
}

/* arrows */

.gallery-prev,
.gallery-next {
  width: 50px;
  height: 40px;
  background: #f3a742;
  opacity: 0;
  transition: 0.3s;
  border: none;
}

.gallery-prev {
  left: -60px;
  transform: skewX(-20deg);
}

.gallery-next {
  right: -60px;
  transform: skewX(-20deg);
}

.gallery-slider:hover .gallery-prev,
.gallery-slider:hover .gallery-next {
  opacity: 1;
}

/*.arrow-icon {*/
/*  color: #fff;*/
/*  font-size: 20px;*/
/*  transform: skewX(20deg);*/
/*}*/

/* button */

.gallery-btn {
  display: inline-block;
  margin-top: 40px;
  background: #004f51;
  color: #fff;
  padding: 12px 35px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
}

/* responsive */

@media(max-width:991px) {

  .gallery-title {
    font-size: 38px;
  }

  .gallery-card img {
    height: 200px;
  }

  .gallery-prev,
  .gallery-next {
    display: none;
  }

}

.welfare-section {
  background: #f4f4f4;
  padding: 120px 0;
}

/* title */

.welfare-title {
  font-size: 52px;
  font-weight: 700;
  font-family: serif;
  margin-bottom: 25px;
}

.heart {
  color: #f3a742;
  display: block;
  margin-bottom: 10px;
}

/* images */

.welfare-images {
  display: flex;
  gap: 20px;
  margin-bottom: 25px;
}

.welfare-images img {
  width: 48%;
  height: 140px;
  object-fit: cover;
}

/* text */

.welfare-text {
  line-height: 1.8;
  color: #666;
  margin-bottom: 25px;
}

/* button */

.welfare-btn {
  display: inline-block;
  background: #ff3333;
  color: #fff;
  padding: 12px 30px;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
}

/* cards */

.welfare-card {
  background: #fff;
  padding: 40px 30px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  height: 100%;
}

/* tag */

.card-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: #ff3333;
  color: #fff;
  padding: 10px 25px;
  font-size: 13px;
  font-weight: 600;
  /*transform: skewX(-20deg);*/
}

/* list */

.welfare-card ul {
  list-style: none;
  padding: 40px 0 20px 0;
}

.welfare-card ul li {
  margin-bottom: 15px;
  color: #666;
}

/* responsive */

@media(max-width:991px) {

  .welfare-title {
    font-size: 36px;
  }

  .welfare-images img {
    height: 120px;
  }

}

.volunteer-section{
padding:120px 0;
background:#f5f5f5;
}

/* heading */

.vol-title{
font-size:52px;
font-family:serif;
font-weight:700;
margin-bottom:10px;
}

.vol-sub{
color:#7c3aed;
letter-spacing:2px;
margin-bottom:60px;
}

.vol-heart{
color:#f3a742;
display:block;
margin-bottom:10px;
}


/* map */

.world-map{
background:url("assets/imgs/world-map.png") center no-repeat;
background-size:contain;
height:500px;
position:relative;
}


/* volunteer images */

.volunteer{
position:absolute;
width:60px;
height:60px;
border-radius:6px;
object-fit:cover;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}


/* positions */

.v1{ top:40px; left:25%; }

.v2{ top:60px; left:45%; }

.v3{ top:30px; right:20%; }

.v4{ top:150px; right:10%; }

.v5{ top:200px; left:50%; }

.v6{ top:250px; left:35%; }

.v7{ bottom:80px; left:20%; }

.v8{ bottom:40px; right:15%; }


/* responsive */

@media(max-width:991px){

.world-map{
height:350px;
}

.volunteer{
width:45px;
height:45px;
}

.vol-title{
font-size:36px;
}

}
/* ========== Contact Page =========== */
.contact-header {
  background: #e9e6e2;
  padding: 120px 0;
  text-align: center;
}

/* heart icon */

.contact-heart {
  color: #f3a742;
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
}

/* title */

.contact-title {
  font-size: 60px;
  font-family: serif;
  font-weight: 700;
  color: #333;
  margin-bottom: 10px;
}

/* subtitle */

.contact-sub {
  color: #7c3aed;
  letter-spacing: 2px;
  font-size: 14px;
}

/* tablet */

@media(max-width:992px) {

  .contact-header {
    padding: 90px 0;
  }

  .contact-title {
    font-size: 44px;
  }

}

/* mobile */

@media(max-width:576px) {

  .contact-header {
    padding: 70px 0;
  }

  .contact-title {
    font-size: 32px;
  }

  .contact-sub {
    font-size: 12px;
  }

}

.contact-section {
  padding: 80px 0;
  background: #f8f8f8;
}

.contact-title {
  font-size: 42px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact-sub {
  color: #7a4df3;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 600;
}

.contact-text {
  color: #666;
  line-height: 28px;
  margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
  background: #eee;
  border: none;
  padding: 15px;
  width: 100%;
  margin-bottom: 20px;
}

.contact-form textarea {
  height: 160px;
  resize: none;
}

.send-btn {
  background: #ff3333;
  border-radius: 10px;
  padding: 12px 40px;
  color: white;
  font-weight: 600;
  border:none;
}

.social-icons a {
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: white;
  border-radius: 5px;
}

.fb {
  background: #3b5998;
}

.tw {
  background: #1da1f2;
}

.ig {
  background: #000;
}

.li {
  background: #0a66c2;
}

.contact-info-section {
  padding: 80px 0;
  background: #f5f5f5;
}

.info-box {
  color: white;
  padding: 60px 40px;
  text-align: center;
  /*clip-path: polygon(8% 0, 100% 0, 92% 100%, 0% 100%);*/
}

.info-box h3 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
}

.info-box p {
  font-size: 18px;
  line-height: 28px;
  margin: 0;
}

.address {
  background: #de644f;
}

.phone {
  background: #e6a33f;
}

.email {
  background: #53a9ad;
}

/* mobile fix */

@media(max-width:991px) {

  .info-box {
    margin-bottom: 30px;
    clip-path: none;
    border-radius: 8px;
  }

}

.map-responsive {
  overflow: hidden;
  padding-bottom: 0;
  position: relative;
  height: 500px;
}

.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============== Donate ========== */

body {
  background: #f3f4f6;
  font-family: Arial;
}

/* container */

.checkout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* min-height: 100vh; */
}

/* main card */

.checkout-card {
  width: 950px;
  display: flex;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
}

/* left */

.left-panel {
  width: 35%;
  background: #f7f7f7;
  padding: 40px;
  border-left: 6px solid #1f7a65;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand img {
  width: 40px;
}

.brand h6 {
  margin: 0;
  font-weight: 600;
}

.secure {
  font-size: 14px;
  color: #666;
}

/* right */

.right-panel {
  width: 65%;
  padding: 50px;
  position: relative;
  background: white;
}

/* form */

.payment-form {
  max-width: 420px;
}

.payment-title {
  font-size: 13px;
  letter-spacing: 1px;
  color: #777;
  margin-bottom: 25px;
}

.payment-form label {
  display: block;
  margin-top: 15px;
  margin-bottom: 5px;
}

.payment-form input {
  width: 100%;
  height: 45px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  padding-left: 10px;
}

/* amount */

.amount-box {
  display: flex;
}

.currency {
  background: #e9ecef;
  border: 1px solid #dcdcdc;
  border-right: 0;
  padding: 10px 15px;
  border-radius: 6px 0 0 6px;
}

.amount-box input {
  border-left: 0;
}

/* button */

.pay-btn {
  width: 100%;
  background: #1f7a65;
  border: none;
  padding: 12px;
  margin-top: 25px;
  color: white;
  font-weight: 600;
  border-radius: 6px;
}