@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300&display=swap");

:root {
  --primary: #1c1e3b;
  --secondary: #323565;
  --specialcl: #7e8ab84e;
  --primarybg: #ffffff;
  --secondarybg: #fafafa;
  --specialbg: #f5f5f5;
  --progressbarcont: #d8d8d8;
  --primarytext: #1d1d1d;
  --secondarytext: #989898;
  --simpletext: #8a8a8a;
  --btncolor: #213430;
  --bordercl: #dddddd;

  --specialfont: "Rubik", sans-serif;
  --fontfamily: "Outfit", sans-serif;
  --fontfamily: "Montserrat", sans-serif;;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--fontfamily);
}

html {
  font-size: 12px !important;
}

main {
  max-width: 1600px;
  margin: 0 auto;
  min-height: calc(100vh - 700px);
  /* Center the container horizontally */
}
#bankReferenceStatement {
  display: block; /* Display by default */
}
.login-heading,
.contact-quote {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: var(--primary);
  font-family: var(--fontfamily);
}
.login-form {
  /* background-color: var(--secondarybg); */
  color: var(--primary);
  /* border: 1px solid var(--primary); */
  border-radius: 10px;
  padding: 15px;
  max-width: 500px;
  margin: 20px auto;
}

.cardsection{
  min-height: calc(100vh - 700px);
}

.forget-text {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fontfamily);
  color: var(--secondarytext);
}
.light-text {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--fontfamily);
  color: var(--secondarytext);
}
.Imp-text {
  font-size: 16px;
  font-weight: 800;
  font-family: var(--fontfamily);
  color: var(--primary);
}

.imo .horizontal {
  display: flex;
  align-items: center;
}

.horizontal {
  display: flex;
  flex-direction: row;
}
.horizontal_flex {
  display: flex;
  flex-direction: row;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.space-between {
  justify-content: space-between;
}

.fullwidth {
  width: 100%;
}
.halfwidth {
  width: 50%;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.vertical {
  display: flex;
  flex-direction: column;
}
.paddingY {
  padding: 40px 0px;
}
.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.marginbottom {
  margin-bottom: 20px;
}

.topdiv {
  padding: 15px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary);
  color: white;
}

.topdiv .address {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.address span {
  display: flex;
  gap: 5px;
}

.topdiv .sociallinks {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.sociallinks a {
  text-decoration: none;
  color: white;
}

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

nav a,
.navflex a {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--fontfamily);
  color: var(--primary);
  text-decoration: none;
}

nav a:hover {
  color: var(--primarytext);
  font-weight: 700;
}

.nav-linksmd {
  width: 70%;
  align-items: center;
  justify-content: space-between;
}

nav ul,
nav ul li,
nav ul li a,
.navbarsm ul,
.navbarsm ul li,
.navbarsm ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: var(--primary);
  list-style: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--fontfamily);
  cursor: pointer;
}

.navbtn {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--primary);
  font-family: var(--fontfamily);
  border-radius: 5px;
  border: 1px solid var(--primary);
  background-color: transparent;
}

nav ul li .navbtn:hover {
  background-color: var(--primary);
  color: var(--primarybg);
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown button {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--fontfamily);
  background-color: transparent;
  color: var(--primary);
  border: none;
  cursor: pointer;
}

.dropdown button svg {
  font-size: 12px;
  font-weight: 500;
}

.accordion_menu button svg {
  font-size: 12px;
  font-weight: 500;
}

.dropdown-content {
  display: none;
  width: 150px;
  position: absolute;
  background-color: #f9f9f9;
  color: var(--primary);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 30;
}

.dropdown-content a {
  color: var(--primary);
  padding: 12px 16px;
  display: block;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

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

.dialog_header {
  background-color: var(--primary);
  color: white;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px 10px 0px 0px;
}

.dialog_header h1 {
  font-family: var(--simplefont);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--primarybg);
}

.dialog_header button {
  background-color: var(--primary);
  border: none;
  padding: 5px 10px;
}

.dialog_header button:hover {
  background-color: var(--primarybg);
}

.dialog_header button svg {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.dialog_header button:hover svg {
  color: var(--primary);
}

.dialog_content {
  background-color: #fff;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 0px 0px 10px 10px;
}

/* Landing Section */
.landingsection {
  position: relative;
  z-index: 500;
}

.landingdiv {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  z-index: 999999 !important;
}

.halfwidth {
  width: 50%;
}

.leftdiv .innerdiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 25px;
}

.importanttext {
  font-size: 16px;
  font-family: var(--fontfamily);
  color: var(--primary);
  font-weight: 600;
  line-height: 20px;
}

.innerdiv .mainhead {
  color: var(--primarytext);
  font-size: 48px;
  font-family: var(--specialfont);
  font-weight: 500;
  line-height: 56px;
}

.innerdiv .mainhead span {
  color: var(--primary);
}

.simpletext {
  font-size: 14px;
  font-family: var(--fontfamily);
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 10px;
  color: #989898;
}

.herobtn {
  border: none;
  border-radius: 10px 10px 0px 10px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 20px 40px 20px 40px;
  height: 60px;
  box-sizing: border-box;
}

.herobtn:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.rightdiv .hero_maincard {
  position: relative;
  min-width: 410px;
  z-index: 9;
}

.Hero_card {
  width: 100%;
  background-color: var(--primarybg);
  box-shadow: 0px 10px 25px 0px #21343014;
  border-radius: 10px;
  z-index: 10;
  padding: 20px 20px;
}

.icon_div {
  background-color: var(--primary);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: absolute;
  right: -10%;
  top: -15%;
  padding: 10px;
  z-index: 10;
}

.mainbtn {
  border: none;
  border-radius: 8px 8px 0px 8px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 10px 20px;
  height: 45px;
  box-sizing: border-box;
  transition: cubic-bezier(0.55, 0.055, 0.675, 0.19) 2s ease-in;
  cursor: pointer;
  min-width: 150px;
  display: block;
  text-align: center;
  /* margin: 0 auto; */
}

.mainbtn:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.textdiv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

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

.mainhead_2 {
  color: var(--primary);
  font-size: 27px;
  font-family: var(--fontfamily);
  font-weight: 600;
  line-height: 32px;
}

.content .progressbardiv {
  margin-top: 10px;
  padding: 0px 15px;
  background: var(--specialbg);
  width: 100%;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.progress-container {
  width: 100%;
  background-color: #d8d8d8;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar {
  width: 0;
  height: 10px;
  background-color: var(--primary);
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

.progress-value {
  text-align: center;
  line-height: 30px;
  color: var(--primarytext);
  font-weight: bold;
}

.progressbardiv .progresstext {
  padding: 10px 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.progresstext p {
  font-size: 14px;
  font-family: var(--fontfamily);
  font-weight: 600;
  line-height: 20px;
}

.progresstext p span {
  color: #6f7775;
  font-size: 14px;
  font-family: var(--fontfamily);
  font-weight: 400;
  line-height: 20px;
}

.content .btndiv {
  display: flex;
  justify-content: space-around;
}

.btndiv .paybtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background-color: white;
  color: var(--btncolor);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--fontfamily);
  line-height: 22px;
  border: 1px solid var(--bordercl);
  text-align: center;
  margin-top: 10px;
  border-radius: 10px 10px 0px 10px;
}

.rightdiv .hero_maincard .bgbox {
  width: 40%;
  height: 85%;
  position: absolute;
  background-color: var(--primary);
  border-radius: 10px;
  z-index: -1;
}

.rightdiv .hero_maincard .bgbox1 {
  left: -10px;
  top: -10px;
}

.rightdiv .hero_maincard .bgbox2 {
  right: -10px;
  bottom: -10px;
}

/* Who We Are Section */
.Whowearesection {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left_div {
  position: relative;
}

.over_lay {
  position: relative;
}

.left_div .over_lay .bgimg {
  width: 100%;
  height: auto;
}

.right_div {
  width: 100%;
  padding: 0px 10px;
}

.left_div .over_lay .frontimg {
  border-radius: 10px;
  position: absolute;
  display: flex;
  justify-content: end;
  bottom: -20px;
  right: -15px;
  z-index: 5;
}

.frontimg img {
  width: 50%;
  height: auto;
}

.mainhead_3 {
  color: var(--primary);
  font-size: 40px;
  font-family: var(--fontfamily);
  font-weight: 600;
  line-height: 46px;
}

.listpart {
  margin-bottom: 10px;
}

.listpart p {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  font-family: var(--fontfamily);
  line-height: 26px;
}

.fa-circle-check {
  background-color: white;
  color: var(--primary);
}

/* Our Campaign Section */

/* .ourcampaign {
   background-color: var(--secondarybg); 
} */

.ourappeal img {
  width: 100%;
  height: 100%;
  max-width: 350px;
  max-height: 300px;
}

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

.cardcampaign {
  display: flex;
  flex-direction: column;
  background-color: var(--primarybg);
  max-width: 300px;
  border-radius: 10px;
  border: 1px solid var(--bordercl);
}

.cardcampaign img {
  width: 100%;
  /* height: 100%; */
  min-height: 200px;
  max-height: 250px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 10px;
  /* object-fit: cover; */
  border-bottom: 3px solid var(--bordercl);
}

.cardinnerdiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

.cardtext {
  height: 50%;
  font-size: 22px;
  font-weight: 500;
  font-family: var(--fontfamily);
  line-height: 28px;
  color: var(--primarytext);
  padding: 10px;
}

.cardinnerdiv .progressbartext {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progressbar .boldtext {
  font-size: 20px;
  font-weight: 500;
  font-family: var(--fontfamily);
  line-height: 26px;
  color: var(--primarytext);
}

.progressbar .simpletext {
  font-size: 18px;
  font-weight: 400;
  font-family: var(--fontfamily);
  line-height: 22px;
  color: var(--simpletext);
}

.buttondiv a .mainbtn {
  border: none;
  border-radius: 10px 10px 0px 10px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 10px 10px;
  height: 50px;
  box-sizing: border-box;
}

.buttondiv a {
  text-decoration: none;
  color: var(--primarybg);
}

.buttondiv .mainbtn:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
  height: 50px;
  box-sizing: border-box;
}

.buttondiv .simplebtn {
  border: none;
  background-color: white;
  color: var(--primary);
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 600;
}

.gp {
  padding-bottom: 20px;
}

/* Beneficiary */
.Bngrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 10px 0px;
}

.ben-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.bnhead {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--fontfamily);
}

.bntext {
  font-size: 12px;
  font-weight: 400;
  font-family: var(--fontfamily);
}

.bnmaintext {
  font-size: 18px;
  font-weight: 400;
  /* padding: 0 10px; */
  /* text-align: ; */
  font-family: var(--simplefont);
  max-height: 149px;
  overflow: hidden;
}

.bnimg {
  min-width: calc(90% / 3);
  /* background-color: red; */
}

.bnimg img {
  width: 85px;
  height: 85px;
}

a {
  text-decoration: none;
  color: black;
}

.brcontent {
  /* border: 1px solid var(--bordercl); */
  border: 1px solid black;
  border-radius: 10px;
  padding: 10px;
}

.brcontent-light {
  border: 1px solid var(--bordercl);
  /* border: 1px solid black; */
  border-radius: 10px;
  padding: 10px;
}

.seemore a {
  margin-top: 20px;
  text-decoration: none;
  color: red;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fontfamily);
}

.youtubevideo {
  width: 100%;
  /* height: 300px; */
  min-height: 270px;
  border: 1px solid var(--bordercl);
  border-radius: 10px;
}

.youtubevideo video,
.youtubevideo iframe {
  width: 100%;
  min-height: 270px;
  height: 200px;
  border-radius: 10px;
  object-fit: fill;
}

/* Latest News Section */

.latestnews {
  background-color: #ffffff;
  position: relative;
}

.newstextdiv {
  display: flex;
  padding: 20px 0px;
  gap: 15px;
  justify-content: space-between;
}

.flexsect button {
  border: 1px solid var(--specialcl);
  color: var(--specialcl);
  background-color: white;
  padding: 5px 30px;
  border-radius: 20px;
}

.flexsect .view-all-button {
  border: 1px solid var(--primary);
  color: var(--primary);
  background-color: white;
  padding: 5px 30px;
  border-radius: 20px;
}

.main_news_div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.cardnews {
  display: flex;
  flex-direction: column;
  background-color: var(--secondarybg);
  border-radius: 22px;
  padding-bottom: 20px;
  border: 1px solid var(--bordercl);
}

.cardnews .newsimgdiv {
  position: relative;
  z-index: 0;
}

.cardnews .newsimgdiv button {
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 5;
  border: none;
  border-radius: 10px 10px 0px 10px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 5px 15px;
}

.cardnews .newsimgdiv img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.textnewsdiv {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.textnewsdiv h2 {
  font-size: 24px;
  font-weight: 600;
  font-family: var(--fontfamily);
  line-height: 30px;
  color: var(--primarytext);
}

.textnewsdiv .progress-container {
  width: 100%;
  background-color: var(--progressbarcont);
  height: 4px;
  border-radius: 5px;
  overflow: hidden;
}

/* Style the progress bar */
.textnewsdiv .progress-container .progress-bar {
  width: 0;
  height: 4px;
  background-color: #333333;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

.textnewsdiv p {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--fontfamily);
  line-height: 22px;
  color: var(--primarytext);
}

.emailsect {
  background-color: #fafafa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
}

.emailtext h2 {
  font-family: var(--fontfamily);
  font-size: 40px;
  font-weight: 600;
  line-height: 48px;
  letter-spacing: -1px;
  text-align: left;
  color: #1d1d1d;
}

.emailtext p {
  color: #40404080;
  font-family: var(--fontfamily);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: left;
}

.inputsect {
  padding: 20px;
  display: flex;
  gap: 10px;
}

.inputsect input {
  padding: 15px 10px;
  width: auto;
  border-radius: 8px;
  border: 1px solid #dadada;
  background-color: #ffffff;
}

.inputsect button {
  border: none;
  border-radius: 10px 10px 0px 10px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 10px 20px;
  height: 50px;
  box-sizing: border-box;
}

.inputsect button:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--primary);
  width: 500px;
  border-radius: 10px;
  cursor: default;
  z-index: 1000 !important;
}

::backdrop {
  backdrop-filter: blur(10px);
}

.subscribe_dialog_content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 20px;
}

.subscribe_dialog_content h1 {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--fontfamily);
}

/* Testimonial Section */
.testimonialsection {
  background-color: var(--secondarybg);
  position: relative;
  overflow-x: hidden;
}

.testimonialmaindiv {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.testimonialimgdiv {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 5;
}

.Main-Bg {
  display: flex;
  justify-content: center;
  width: 100%;
  /* height: 70vh; */
  height: 600px;
  background-color: var(--primary);
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
}

.Main-Bg img {
  width: 90%;
  height: 100%;
  position: absolute;
}

.testimonialtextdiv {
  color: #1d1d1d;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  width: 55%;
  z-index: 5;
}

.testimonialtextdiv h1 span {
  color: var(--primary);
}

.testimonialtextdiv .authorname {
  font-family: var(--fontfamily);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
  color: #232323;
}

.testimonialtextdiv .designation {
  font-family: var(--fontfamily);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #696969;
}

.right_img {
  position: absolute;
  /* right: -5%; */
  right: 0;
  top: 15%;
  width: 15%;
  height: 30%;
  background-image: url(../media/Group\ 8.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

.left_img {
  position: absolute;
  left: -5%;
  bottom: 20%;
  width: 15%;
  height: 30%;
  background-image: url(../media/Group\ 10.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
}

/* Counter Section */
.countersection {
  background-color: var(--secondary);
  position: relative;
  margin-top: 150px;
  gap: 0;
}

.upperdiv {
  padding: 65px;
  background-color: #ffffff;
  background-image: url(../media/element.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  box-shadow: black 0px 1px 60px -19px;
  z-index: 100;
}

.upperdiv .innerdiv {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.borderbt {
  width: 70px;
  border-bottom: 2px solid var(--primary);
}

.counterpart {
  padding: 20px 0px;
  display: flex;
  justify-content: space-between;
}

.flexpart {
  gap: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flexpart h2 {
  font-family: var(--fontfamily);
  font-size: 54px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
}

.flexpart p {
  font-family: var(--fontfamily);
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0em;
  text-align: center;
  color: white;
}

/* Need Help Section */
.NeedHelpsect {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.innerdiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.right_bg {
  position: absolute;
  right: -5%;
  top: 15%;
  width: 15%;
  height: 30%;
  background-image: url(../media/CombinedShape\ right.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.left_bg {
  position: absolute;
  left: -5%;
  bottom: 20%;
  width: 15%;
  height: 30%;
  background-image: url(../media/CombinedShape.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}

.mainaccordian {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.accordion-item {
  border-radius: 5px;
  margin-bottom: 8px;
}

.accordion-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  background-color: #f5f5f5;
  /* Default background color when closed */
  z-index: 10;
}

.accordion-header .main_head {
  font-size: 20px;
  line-height: 26px;
  font-family: var(--fontfamily);
  font-weight: 600;
  color: var(--primarytext);
}

.accordion-item.active .accordion-header,
.accordion-item.active .accordion-header .main_head {
  background-color: var(--secondary);
  /* Background color when open */
  color: var(--primarybg);
}

.accordion-header .toggle-sign {
  font-size: 24px;
  font-family: var(--fontfamily);
  font-weight: 600;
  color: var(--secondary);
}

.accordion-item.active .accordion-header .toggle-sign {
  color: var(--primarybg);
}

.accordion-content {
  display: none;
  padding: 8px;
}

.accordion-item.active .accordion-content {
  display: block;
  position: relative;
  z-index: 10;
}

.footer_main {
  background-color: var(--secondarybg);
  display: flex;
  justify-content: space-between;
}
.logo_img {
  width: 180%;
  max-width: 200px;
  max-height: 200px;
  object-fit: contain;
}
.logo_div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
}

.logo_div h2 {
  font-family: var(--fontfamily);
  font-size: 25px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: start;
}

.logo_div p {
  font-family: var(--fontfamily);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: left;
  color: #6f7775;
}

.logo_div .sociallinks {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.logo_div .sociallinks a {
  text-decoration: none;
  color: var(--primary);
}

.logo_div .sociallinks i {
  font-size: 30px;
  margin-right: 30px;
}

.footer_links h2,
.contactinfo_div h2 {
  width: 100%;
  font-family: var(--fontfamily);
  font-size: 20px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: 0em;
  text-align: left;
}

.footer_main .footer_links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer_main .footer_linkss,
.footer_main .contactinfo_div {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer_linkss a {
  text-decoration: none;
  color: #6f7775;
  font-family: var(--fontfamily);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
}

.contact_info {
  display: flex;
  gap: 10px;
}

.contact_info .bggreen {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--primary);
  padding: 10px;
  border-radius: 50%;
  height: 50px;
  width: 50px;
}

.bggreen svg {
  color: var(--primarybg);
}

.contact_info .text_info {
  display: flex;
  flex-direction: column;
}

.text_info .bold_text {
  font-family: var(--fontfamily);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--primarytext);
}

.text_info .simple_text {
  font-family: var(--fontfamily);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0em;
  text-align: left;
  color: #6f7775;
}

.copyright {
  padding: 10px;
  background-color: var(--primary);
  color: var(--primarybg);
}

.copyright p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0em;
  text-align: center;
}

/* Contact Us */

.contactus_div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}

.contact_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}

.contactpart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
}

.contactpart label {
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.contactpart input,
.contactpart textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #3c3c432e;
  border-radius: 10px 10px 0px 10px;
}

.text_part h4 {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--fontfamily);
  line-height: 22px;
  color: var(--primarytext);
}

.text_part p {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--fontfamily);
  line-height: 22px;
  color: #727272;
}

.contactpart .text_part {
  display: flex;
  flex-direction: column;
}

.cardsdiv {
  display: flex;
  z-index: 20 !important;
  justify-content: center;
  align-items: center;
}

.cardsect {
  position: relative;
  overflow: hidden;
}

.cards_div .quotes {
  font-family: "Sora", sans-serif;
  font-size: 80px;
  font-weight: 600;
  line-height: 80px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--primary);
}

.cards_div .cardtext_head {
  font-family: "Sora", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 35px;
  letter-spacing: 0em;
  text-align: left;
  color: var(--primarytext);
}

.cards_div .cardtext_para {
  margin-bottom: 30px;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #454545;
}

.cards_div {
  background-color: #ffffff;
  z-index: 9999 !important;
  padding: 10px;
  border: 1px solid #1c1e3b;
}

.cards_div_width {
  min-width: 300px;
  min-width: 300px;
  width: 100%;
  min-height: 350px;
}


.mainflex .flex_part h4 {
  font-family: "Sora", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: left;
  color: #454545;
}

.mainflex .flex_part p {
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
  color: #454545;
}

.mainflex .flex_part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0px;
}

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

/* Our Campaign Page */

.Campaignbg {
  display: flex;
  background-image: url(../media/map.png);
  background-repeat: no-repeat;
  background-size: cover;
  max-height: 65vh;
}

.Campaign_img img {
  width: 100%;
  max-height: 550px;
  object-fit: contain;
}

.Campaignbg .Campaigntext h1 {
  font-family: var(--specialfont);
  font-size: 48px;
  font-weight: 700;
  line-height: 57px;
  letter-spacing: 0em;
  text-align: left;
}

.Campaignbg .Campaigntext h1 span {
  color: var(--primary);
}

.headflex {
  display: flex;
  margin-bottom: 20px;
}

.brr {
  border-right: 2px solid var(--primary);
}

.mainheading {
  padding: 0px 10px;
  color: var(--primary);
}

.mainCardUpper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 20px;
  row-gap: 20px;
}

.mainCardUpper a {
  text-decoration: none;
  color: #1d1d1d;
}

.card {
  position: relative;
  transition: 0.5s;
}

.cardservice {
  background-color: var(--primarybg);
  box-shadow: 0px 4px 12px 0px #00c89c4d;
  border-radius: 10px;
  padding: 20px;
  z-index: 10;
  min-height: 265px;
}

.cardservice:hover {
  background-color: #eee;
  /* color: white; */
}

.card:hover {
  /* background-color: #000; */
  transform: translateY(-10px);
}

.bgbox {
  width: 90%;
  height: 90%;
  position: absolute;
  right: -5px;
  bottom: -5px;
  background-color: var(--primary);
  border-radius: 10px;
  z-index: -10;
}

.smalldiv {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
  padding: 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.title {
  margin-top: 10px;
  margin-bottom: 0px;
}

.buttonupper {
  display: flex;
  justify-content: end;
}

.card_para {
  font-size: 14px;
  font-weight: 500;
  font-family: var(--fontfamily);
  line-height: 24px;
  margin-top: 11px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 200px;
}

.aboutus {
  position: relative;
  display: flex;
  overflow-x: hidden;
}

.left_about,
.right_about {
  position: relative;
}

.right_imgsect {
  position: absolute;
  right: -3%;
  top: 35% !important;
  width: 200px;
  height: 250px;
  background-image: url(../media/Group\ 8.png);
  background-repeat: no-repeat;
  background-size: 200px 250px;
  z-index: 0;
}

.left_imgsect {
  position: absolute;
  left: -5%;
  bottom: 15% !important;
  width: 200px;
  height: 250px;
  background-image: url(../media/Group\ 10.png);
  background-repeat: no-repeat;
  background-size: 200px 250px;
  z-index: 0;
  padding-bottom: 10rem;
}

.main_innerdiv {
  position: relative;
  display: flex;
  justify-content: center;
}

.inner_div {
  background: url(../media/Group383.png) no-repeat;
  background-size: cover;
}

.right_about {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.main_headp {
  color: #1c1e3b;
  font-family: "Sora", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0em;
  text-align: left;
}

.main_headd {
  color: #000504;
  font-family: "Sora", sans-serif;
  font-weight: 600;
  line-height: 58px;
  letter-spacing: 0em;
  text-align: left;
}

.small_text {
  color: #454545;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}

.flex_div {
  display: flex;
  border: 2px solid var(--primary);
  margin-bottom: 10px;
}

.left_side {
  width: 50%;
}

.right_side {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: end;
}

.text_head {
  color: #000504;
  font-family: "Work Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0em;
  text-align: left;
}

.price_text {
  color: #000504;
  font-family: "Sora", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0em;
  text-align: left;
}

.donatebtn {
  border: none;
  border-radius: 10px 10px 0px 10px;
  background-color: var(--primary);
  color: white;
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 500;
  padding: 10px 25px;
  height: 45px;
  box-sizing: border-box;
}

.donatebtn:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

/* Donate Now Page */
.modal {
  background-color: var(--primarybg);
  margin: 20px 0px;
  width: 100%;
}
.modalform {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.table_modal {
  border: 1px solid var(--bordercl);
  border-radius: 10px;
  padding: 10px;
}
.modalform h2 {
  color: var(--primary);
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: 0em;
  text-align: left;
  margin-bottom: 20px;
}

.main_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.input_flex {
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.input_flex label {
  width: 50%;
  font-family: "Work Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.input_flex input[type="checkbox"] {
  width: 10%;
}

.input_flex input,
.input_flex select {
  width: 100%;
  padding: 10px;
  border: 2px solid #3c3c432e;
  border-radius: 10px 10px 0px 10px;
}

.Gift_card {
  border: 5px solid var(--primary);
  border-radius: 10px;
  background-color: var(--primarybg);
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.input_flex .first_head {
  font-size: 24px;
  font-family: var(--fontfamily);
  font-weight: 800;
}

.input_flex .main_heading {
  font-size: 30px;
  font-family: var(--fontfamily);
  font-weight: 900;
  color: var(--primary);
}

.input_flex .small_text {
  font-size: 14px;
  font-family: var(--fontfamily);
  font-weight: 600;
  color: var(--primary);
}

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

.check_input_flex {
  display: flex;
  gap: 10px;
}

.div_input_flex .simple_text {
  font-size: 14px;
  font-family: var(--fontfamily);
  font-weight: 400;
  color: var(--secondarytext);
  margin-bottom: 15px;
}

.div_input_flex .main_simple_text {
  font-size: 16px;
  font-family: var(--fontfamily);
  font-weight: 400;
}

.center_div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_form p {
  font-family: "Work Sans", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0em;
  text-align: left;
}

.main_form p span {
  color: var(--primary);
}

/* cart page  */
.cart_main {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  min-height: calc(100vh - 546px);
}

.cart_head,
.emptycart {
  font-family: var(--fontfamily);
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
}
.table_cart {
  width: 100%;
  border: 1px solid var(--primary);
  padding: 0;
  border-collapse: 0;
  border-spacing: 0px;
}
.table_cart th {
  background-color: var(--primary);
  color: white;
  padding: 10px;
  text-align: center;
  /* color: var(--primary); */
  font-size: 18px;
  font-family: var(--fontfamily);
  font-weight: 800;
}
.table_cart td {
  text-align: center;
  padding: 10px;
  color: var(--primary);
  font-weight: 600;
  font-size: 16px;
  font-family: var(--fontfamily);
}
.cart_table {
  width: 100%;
  border: 1px solid var(--primary);
  border-radius: 5px;
  padding: 0;
  border-collapse: 0;
  border-spacing: 0px;
}

.table_head {
  background-color: var(--primary);
  color: var(--primarybg);
}

.table_head th {
  width: 200px !important;
  padding: 10px;
  font-size: 18px;
  font-family: var(--fontfamily);
  font-weight: 800;
  border: none;
}

.table_body td {
  padding: 10px;
  text-align: center;
  color: var(--primary);
  font-weight: 600;
  font-size: 16px;
  font-family: var(--fontfamily);
}

.remove_btn {
  width: 100px;
  height: 45px;
  background-color: var(--primary);
  color: white;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  font-weight: 700;
  font-family: var(--fontfamily);
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  transition-delay: 0.5ms;
  box-sizing: border-box;
}

.remove_btn:hover {
  background-color: var(--primarybg);
  color: var(--primary);
  border: 1px solid var(--primary);
}

.Total_amount td {
  padding: 10px;
  text-align: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 800;
  font-family: var(--fontfamily);
}

.gapY {
  gap: 20px;
}

.input_hidden {
  display: none;
  width: 100%;
}

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

.blogs_grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
  padding: 10px;
  /* border: 1px solid var(--bordercl); */
  /* border-radius: 10px; */
}

.blogs_imgs img {
  width: 100%;
  height: 280px;
  /* max-width: 350px;
  max-height: 350px; */
}

/* Gallery */
.gallery_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px 0px;
}
.gallery_img img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  /* min-width: 280px;
  min-height: 280px; */
  object-fit: fill;
  object-fit: cover;
  border-radius: 10px;
}
.donate_form {
  width: 65%;
}
.donate_table {
  width: 35%;
}

.thankyou-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--white);
  border-radius: 5px;
  margin: 20px 0;
}
.thankyou-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background-color: var(--white);
  border-radius: 5px;
  box-shadow: var(--shadow-small);
  margin: 20px 0;
  gap: 20px;
  width: 100%;
  max-width: 500px;
  text-align: center;
}
.thankyou-heading {
  font-size: 24px;
  font-weight: 600;
  color: var(--black-light);
  /* margin-bottom: 20px; */
}

.thanks-img {
  height: 250px;
}

.sticky-checkout {
  position: sticky;
  top: 50px;
  position: -webkit-sticky;
  padding: 10pxvb;
}
/* Responsivenes */
@media screen and (max-width: 600px) {
  .horizontal{
    flex-direction: column;
  }
  .sticky-checkout {
    position: relative;
    top: 0;
  }
  .donate_form,
  .donate_table {
    width: 100%;
  }
  .modalform {
    display: flex;
    flex-direction: column;
  }
  .gallery_grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .modal_form {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    border-radius: 10px;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    top: 0;
    left: 0;
    padding: 0px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Modal content */
  .modal_content {
    background-color: transparent;
    margin: 50% auto;
    /* 15% from the top and centered */
    /* padding: 20px; */
    border: 1px solid #888;
    width: 100%;
    border-radius: 10px !important;
    /* Could be more or less, depending on screen size */
  }

  /* Close button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .blogs_grid,
  .Bngrid {
    grid-template-columns: repeat(1, 1fr);
  }

  .halfwidth {
    width: 100%;
  }

  .innerdiv .mainhead {
    font-size: 32px;
  }

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

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

  .main_form {
    width: 100%;
  }

  .input_flex {
    flex-direction: column;
  }

  .input_flex label {
    width: 100%;
  }

  .testimonialimgdiv {
    display: none;
  }

  nav {
    padding: 20px;
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .navflex {
    display: flex;
    align-items: center;
    gap: 115px;
    margin-bottom: 10px;
  }

  .navbarsm {
    display: none;
    width: 70%;
    height: 100%;
  }

  .nav-linksmd {
    display: none;
  }

  .dropdown {
    display: none;
  }

  .navbarsm.active {
    padding: 40px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f9f9f9;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1005 !important;
  }

  .navbarsm ul {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    text-align: center;
  }

  /* Styles for the accordion */
  .accordion-btn {
    text-align: left;
    background-color: #f9f9f9;
    color: var(--primary);
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--fontfamily);
  }

  .accordion-content {
    display: none;
    width: 100%;
    padding: 10px 65px;
    background-color: #ddd;
  }

  .accordion-content a {
    width: 100%;
    display: block;
    padding: 8px;
    text-decoration: none;
    color: var(--primary);
  }

  .menu-toggle {
    color: var(--primary);
    display: block;
    cursor: pointer;
    font-size: 24px;
    margin-right: 10px;
  }

  .accordion_menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Style for the close button */
  .close-btn {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
    margin-top: 10px;
  }

  .landingdiv {
    flex-direction: column;
    gap: 20px;
  }

  .landingsection {
    padding: 40px 20px;
  }

  .content .btndiv {
    flex-direction: column;
  }

  .icon_div {
    width: 65px;
    height: 65px;
  }

  .rightdiv .hero_maincard .Hero_card .charity_icon {
    right: -15px;
    top: -40px;
  }

  .solids_icon {
    position: absolute;
    left: -15px;
    top: -40px;
    z-index: 10;
  }

  .icon_div img {
    width: 35px;
    height: 35px;
  }

  .btndiv .paybtn {
    padding: 10px 65px;
  }

  .Whowearesection {
    flex-direction: column;
    gap: 20px;
    padding: 40px 20px;
  }

  .frontimg img {
    width: 50%;
    height: auto;
  }

  .left_div .over_lay .frontimg {
    bottom: -20px;
    right: -15px;
    z-index: 5;
  }

  .ourcampaign,
  .latestnews,
  .NeedHelpsect {
    padding: 40px 20px;
  }

  .testimonialsection {
    padding: 200px 20px;
  }

  .cardcampaign,
  .cardnews {
    width: 100%;
  }

  .cardsdiv,
  .main_news_div,
  .emailsect,
  .inputsect {
    gap: 20px;
    flex-direction: column;
  }

  .testimonialmaindiv {
    flex-direction: column;
  }

  .testimonialimgdiv {
    position: relative;
    width: 100%;
  }

  .testimonialtextdiv {
    width: 100%;
  }

  .countersection {
    padding: 30px 20px;
  }

  .upperdiv {
    flex-direction: column;
    gap: 20px;
    transform: translateY(-25%);
  }

  .counterpart {
    flex-direction: column;
    gap: 20px;
  }

  .accordion {
    width: 100%;
  }

  .footer_main {
    padding: 40px 20px;
    background-color: var(--secondarybg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .logo_div {
    width: 100%;
  }

  .footer_links {
    width: 100%;
  }

  .contactinfo_div {
    width: 100%;
  }

  .footer_main {
    background-color: var(--secondarybg);
    display: flex;
    gap: 20px;
  }

  /* COntact Us Page */
  .contactus {
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
  }

  .img_div {
    width: 100%;
  }

  .img_div img {
    width: 100%;
  }

  .contactus_div {
    padding: 0px 10px;
  }

  .contactus_div {
    width: 100%;
  }

  .cardsect {
    padding: 40px 20px;
  }

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

  .mainflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .table_div {
    overflow-x: auto;
  }

  /* Our Campaign Page */
  .Campaignbg {
    padding: 40px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .Campaigntext {
    width: 100%;
  }

  .Campaign_img img {
    width: 100%;
    object-fit: contain;
  }

  .mainCardUpper {
    flex-direction: column;
  }

  .cardsection {
    padding: 20px 20px;
  }

  .aboutus {
    padding: 60px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }

  .left_about {
    padding: 0px 20px;
  }

  .flex_div {
    padding: 5px 0px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .left_about,
  .right_about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 90%;
  }

  .main_innerdiv {
    position: relative;
    display: flex;
    justify-content: center;
  }

  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 215px 380px;
    width: 215px;
    height: 380px;
  }

  .upperimg {
    position: absolute;
    width: 150px;
    height: 190px;
    top: -25px;
    left: -50px;
    z-index: 10;
  }

  .lowerimg {
    position: absolute;
    width: 150px;
    height: 190px;
    right: -50px;
    bottom: -25px;
    z-index: 10;
  }

  .main_headd {
    font-size: 32px;
  }

  .left_side {
    border-bottom: 1px solid var(--primary);
  }

  .left_side,
  .right_side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .donatebtn {
    width: 60%;
  }

  /* DOnate Page CSS */
  .short_inputs {
    flex-direction: column;
    gap: 10px;
  }

  .modal {
    padding: 20px;
  }
}

@media screen and (min-width: 375px) {
  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 245px 380px;
    width: 245px;
    height: 380px;
  }

  .donatebtn {
    width: 50%;
  }
}

@media screen and (min-width: 425px) {
  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 245px 380px;
    width: 245px;
    height: 380px;
  }

  .donatebtn {
    width: 40%;
  }
}

@media screen and (min-width: 768px) {
  .modalform {
    display: flex;
    flex-direction: row;
  }
  .gallery_grid {
    grid-template-columns: repeat(3, 1fr);
  }
  #Login_sm {
    display: none;
  }

  .input_flex {
    flex-direction: row;
  }

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

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

  .horizontal_flex {
    flex-direction: row;
  }

  .main_form {
    width: 100%;
  }
  .table_modal {
    width: 50%;
  }
  /*  DOnate Now  Page*/
  .modal {
    padding: 20px 40px;
  }

  .testimonialimgdiv {
    display: block;
  }

  .short_inputs {
    flex-direction: row;
    gap: 40px;
  }

  /* HomePage */
  .accordion_menu {
    display: none;
  }

  .navbarsm,
  .menu-toggle {
    display: none;
  }

  .topdiv {
    flex-direction: row;
  }

  .dropdown {
    display: inline-block;
  }

  .nav-linksmd {
    display: flex;
  }

  nav {
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .landingsection {
    padding: 40px 40px;
  }

  .content .btndiv {
    flex-direction: row;
  }

  .rightdiv .main_card_div .card .charity_icon {
    right: -40px;
    top: -40px;
  }

  .solids_icon {
    left: -40px;
    top: -40px;
  }

  .icon_div {
    width: 90px;
    height: 90px;
  }

  .icon_div img {
    width: 50px;
    height: 50px;
  }

  .btndiv .paybtn {
    padding: 10px 25px;
  }

  .Whowearesection {
    gap: 40px;
    flex-direction: row;
    padding: 80px 40px;
  }

  .left_div .over_lay .frontimg {
    bottom: -30px;
    right: -30px;
    z-index: 5;
  }

  .ourcampaign,
  .latestnews,
  .countersection,
  .NeedHelpsect {
    padding: 40px 40px;
  }

  .testimonialsection {
    padding: 160px 40px;
  }

  .cardsdiv,
  .main_news_div,
  .emailsect,
  .inputsect {
    gap: 20px;
    flex-direction: row;
  }

  .testimonialmaindiv {
    flex-direction: row;
  }

  .testimonialimgdiv {
    position: relative;
    width: 35%;
  }

  .testimonialtextdiv {
    width: 55%;
  }

  .upperdiv {
    flex-direction: row;
    transform: translateY(-45%);
  }

  .counterpart {
    flex-direction: row;
    gap: 80px;
  }

  .accordion {
    width: 700px;
  }

  /* contact us page */
  .cardsdiv {
    gap: 10px;
  }

  .contactus {
    padding: 80px 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .contactus_div {
    padding: 0px 10px;
  }

  .cardsect {
    padding: 80px 30px;
  }

  .cardsdiv {
    display: flex;
    flex-direction: row;
  }

  .mainflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  /* Our Campaign Page */
  .Campaignbg {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .Campaignbg,
  .aboutus {
    padding: 80px 40px;
  }

  .aboutus {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mainCardUpper {
    flex-direction: row;
  }

  .cardsection {
    padding: 40px 30px;
  }

  .card {
    width: 45%;
  }

  .flex_div {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .main_innerdiv {
    position: relative;
  }

  .left_about,
  .right_about {
    display: flex;
    justify-content: center;
    width: 90%;
    padding: 0px 40px;
  }

  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 280px 380px;
    width: 280px;
    height: 380px;
  }

  .upperimg {
    position: absolute;
    width: 200px;
    height: 265px;
    top: -50px;
    left: 55px;
    z-index: 10;
  }

  .lowerimg {
    position: absolute;
    width: 200px;
    height: 265px;
    right: 50px;
    bottom: -25px;
    z-index: 10;
  }

  .left_side {
    border-bottom: none;
    border-right: 1px solid var(--primary);
  }

  .donatebtn {
    width: 30%;
  }
}

@media screen and (min-width: 1024px) {
  /*  DOnate Now  Page*/

  .Bngrid {
    grid-template-columns: repeat(4, 1fr);
  }

  .landingdiv {
    flex-direction: row;
  }

  .modal {
    padding: 20px 80px;
  }

  /* homepage */
  nav {
    padding: 20px 80px;
    justify-content: space-between;
  }

  .landingsection {
    padding: 40px 80px;
  }

  .btndiv .paybtn {
    padding: 10px 45px;
  }

  .Whowearesection {
    padding: 80px 80px;
  }

  .frontimg img {
    width: 65%;
    height: auto;
  }

  .ourcampaign,
  .latestnews,
  .countersection,
  .NeedHelpsect {
    padding: 40px 80px;
  }

  .testimonialsection {
    padding: 180px 80px;
  }

  .upperdiv {
    transform: translateY(-60%);
  }

  .footer_main {
    padding: 80px 40px;
    background-color: var(--secondarybg);
    display: flex;
    justify-content: space-between;
  }

  .logo_div {
    width: 33.3%;
  }

  .footer_links .contactinfo_div {
    width: 16.65%;
  }

  .footer_main {
    padding: 80px 40px;
    background-color: var(--secondarybg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .logo_div {
    width: 25%;
  }

  .footer_links {
    width: 20%;
  }

  .contactinfo_div {
    width: 25%;
  }

  .footer_main {
    background-color: var(--secondarybg);
    display: flex;
    gap: 20px;
  }

  /* contact us page */
  .cardsdiv {
    gap: 20px;
  }

  .contactus {
    padding: 80px 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .contactus_div {
    padding: 0px 10px;
  }

  .mainflex {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 10px;
  }

  .cardsect {
    padding: 80px 40px;
  }

  /* Our Campaign Page  */
  .Campaignbg {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .Campaignbg,
  .aboutus {
    padding: 80px 80px;
  }

  .aboutus {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .cardsection {
    padding: 40px 60px;
  }

  .card {
    width: 30%;
  }

  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 305px 435px;
    width: 305px;
    height: 435px;
  }

  .left_about {
    width: 45%;
    display: block;
    padding: 0px;
  }

  .right_about {
    width: 45%;
    padding: 0px 10px;
  }

  .upperimg {
    position: absolute;
    width: 205px;
    height: 290px;
    top: -73px;
    left: -40px;
    z-index: 10;
  }

  .lowerimg {
    position: absolute;
    width: 205px;
    height: 290px;
    right: -20px;
    bottom: -35px;
    z-index: 10;
  }

  .donatebtn {
    width: 40%;
  }
}

@media screen and (min-width: 1440px) {
  /*  DOnate Now  Page*/

  .Bngrid {
    grid-template-columns: repeat(5, 1fr);
  }

  .modal {
    padding: 20px 120px;
  }

  /* HomePage */
  nav {
    padding: 20px 120px;
  }

  .landingsection {
    padding: 40px 120px;
  }

  .btndiv .paybtn {
    padding: 10px 65px;
  }

  .Whowearesection,
  .ourcampaign,
  .latestnews,
  .countersection,
  .NeedHelpsect {
    padding: 80px 120px;
  }

  .testimonialsection {
    padding: 200px 120px;
  }

  .upperdiv {
    transform: translateY(-75%);
  }

  .footer_main {
    padding: 80px 120px;
  }

  .logo_div {
    width: 33.3%;
  }

  /* .footer_links {
    /* width: 16.65%; */
  /* } */
  */

  /* COntact Us page */

  .cardsdiv {
    gap: 30px;
  }

  .contactus {
    padding: 80px 120px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .contactus_div {
    padding: 0px 40px;
  }

  .mainflex {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    gap: 10px;
  }

  .cardsect {
    padding: 80px 60px;
  }

  /* Our Campaign Page */
  .Campaignbg {
    flex-direction: row;
  }

  .Campaignbg,
  .aboutus {
    padding: 80px 120px;
  }

  .card {
    width: 30%;
  }

  .left_about {
    width: 45%;
    display: block;
    padding: 0px 60px;
  }

  .inner_div {
    background: url(../media/Group383.png) no-repeat;
    background-size: 325px 435px;
    width: 330px;
    height: 435px;
  }

  .upperimg {
    position: absolute;
    width: 268px;
    height: 310px;
    top: -76px;
    left: -100px;
    z-index: 10;
  }

  .lowerimg {
    position: absolute;
    width: 268px;
    height: 310px;
    right: -72px;
    bottom: -40px;
    z-index: 10;
  }

  .donatebtn {
    width: 30%;
  }
}

.testimonialdivflex {
  display: flex;
  align-items: center;
  gap: 50px;
}

.bggreen i {
  color: white;
  font-size: 20px;
}

.fa {
  font-size: 13px;
}

.topdiv i {
  font-size: 20px;
}

.QuickDonate {
  width: 100%;
  max-width: 1450px;
  padding: 50px 20px;
  margin: 0 auto;
  /* padding: 40px 120px; */
  font-family: var(--fontfamily);
}

.quik_donate_wrapper {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  position: relative;
  border: var(--primary) 2px solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.quickDonationHeading {
  position: absolute;
  top: -20px;
  left: 10px;
  padding: 0px 10px;
  background-color: white;
  color: #1c1e3b;
  font-size: 20px;
  font-weight: 600;
  /* width: 50px; */
}

.custom-input-field {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  border-radius: 8px;
  border: 1px solid #1c1e3b;
  padding: 5px;
  outline: #1c1e3b !important;
}

.custom-datalist-container {
  position: relative;
}

#amount {
  position: absolute;
  width: 100%;
  background-color: white;
  /* Adjust as needed */
  border: 1px solid #1c1e3b;
  border-radius: 8px;
  margin-top: 5px;
  /* Adjust as needed */
}

/* Style datalist options */
#amount option {
  padding: 5px;
  border-bottom: 1px solid #1c1e3b;
}

.dropdown-container-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.fa-shopping-cart {
  font-size: 22px !important;
}

.fa-shopping-cart:hover {
  color: #1c1e3b;
}

small {
  font-size: 16px;
  color: #1c1e3b;
  font-weight: 600;
  position: absolute;
  right: -10px;
  top: -10px;
  background-color: white;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px var(--secondary) solid;
}

.table_div {
  width: 80%;
  min-width: 400px;
}

.Total_amount {
  border-top: 1px solid grey !important;
}

a {
  text-decoration: none !important;
}

.textnewsdiv h2 {
  height: 35px;
  overflow: hidden;
  /* text-overflow: ellipsis; */
  /* width: 300px; */
}

@media screen and (max-width: 768px) {
  .rightdiv .hero_maincard {
    /* width: 80vw !important; */
    min-width: 280px !important;
  }

  .quik_donate_wrapper {
    flex-direction: column;
  }

  .cardnews {
    align-items: center;
  }
}

.hompage-card-des {
  height: 20px;
  overflow: hidden;
}

.hidden_filed {
  display: none;
}

.appeal-wrapper-ves {
  /* background-color: red; */
  align-items: center;
  box-shadow: 1px 1px 10px 0px #00000030;
}

.appeal-text-wrapper-ves {
  min-height: 401px;
  padding: 20px;
  gap: 40px;
  background-color: white;
  /* border: 1px solid #00000030; */
  box-shadow: 0px 0px 50px 0px #00000030;
  /* border-left: 0px;   */
  /* margin: 0 50px; */
  justify-content: flex-start;
  align-items: flex-start;
}

.appeal-img-wrapper-ves {
  height: 401px;
  min-width: 500px;
  width: 100%;
  /* border: 1px solid #00000030; */
  border: none;
  padding: 0;
  border-radius: 0;
  object-fit: cover;
  background-color: white;
}

.appeal-img-wrapper-ves img {
  /* width: 10%; */
  /* height: 50%; */
  object-fit: cover;
  border-radius: 0;
}

.appeal-img-contanier-vs {
  width: 100%;
}

.mainhead_2 span {
  font-size: 15px;
  color: #333;
}

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


  .custom-quote-font{
    line-height: 20px;
    max-width: 250px;
    font-size: 16px;
  }

  .pc-landing{
    display: none !important;
  
  }

.mobile-landing{
  display: flex !important;
}
  /*  DOnate Now  Page*/
  .appeal-wrapper-ves {
    flex-direction: column;
    padding: 10px;
  }

  .appeal-text-wrapper-ves {
    width: 100%;
    padding: 20px;
  }

  .appeal-img-wrapper-ves {
    width: 100%;
    min-width: auto;
    height: 300px;
  }

  .flex-revers {
    flex-direction: column-reverse;
  }
}
.sidebar::-webkit-scrollbar{
  display: none !important;
}
/* body::-webkit-scrollbar{
  display:  none;
}
 */


.custom-contact-quote{
  height: 100%;
 /* width: 100%; */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 20px;
  align-items: flex-start;
  gap: 10px;
  border: #1c1e3b 2px solid;
  border-radius: 10px;
}



.custom-contact-quote p{
  font-size: 18px;
  font-weight: 400;
  color: #1c1e3b;
  gap: 20px;
  display: flex;
  padding: 10px;
  padding-left:30px ;
}

.custom-contact-quote .fa{
  font-size: 20px;
  color: #1c1e3b;
}

.custom-contact-quote .mainhead_2{
  /* font-size: 25px; */
  font-weight: 600;
  color: #1c1e3b;
  padding: 10px;
  padding-left:30px ;
  margin-top: 20px;
  width: 100%;
  text-align: center;
}