@media(max-width: 992px){
  .header{
    padding: 1.3rem 5%;
  }
}

@media (max-width: 425px){
  #logo img {
    width: 50px;
    height: 50px;
}
html, body {
  overflow-x: hidden;
}

.header{
  max-width: 100vw;
}

.icons {
    display: inline-flex;
}

#check:checked ~ .icons #menu-icon {
    display: none;
}

.icons #close-icon {
    display: none;
}

#check:checked ~ .icons #close-icon {
    display: block;
}

.navbar {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: rgba(0, 0, 0, 0.1); /* Fallback background color */
    backdrop-filter: blur(50px); /* The desired blur effect */
    -webkit-backdrop-filter: blur(50px); /* Safari-specific prefix */
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: .3s ease;
}

#check:checked ~ .navbar {
    height: 17.7rem;
}

.navbar a {
    display: block;
    font-size: 1.1rem;
    margin: 1.5rem 0;
    text-align: center;
    transform: translateY(-50px);
    opacity: 0;
    transition: .3s ease;
}

#check:checked ~ .navbar a {
    transform: translateY(0);
    opacity: 1;
    transition-delay: calc(.15s * var(--i));
}

   #logo{
    font-size: 1rem;
        color: var(--header-color);
    }
 
#main-body{
    padding: 50px 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#comm-body{
    padding: 50px 50px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#main-bodyV2{
    padding: 0 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
}


#main-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}
#main-headV2{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  align-items: center;
}

#head-text{
  width: 330px;
  font-size: 25px;
  text-align: center;

}
#head-text h1{
  width: 330px;
  
}
#collage{
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
#collage2{
  padding-left: 2rem;
  padding-right: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#collage2 div{
  padding-bottom: 10px;
}
#c-pics1{
  display: none;
}
#collage2 img{
  width: 261px;
  height: 272px;
}
.c-img1{
  width: 148px;
  height: 130px;
  margin-bottom: 39px;
}
.c-img2{
  width: 160px;
  height: 130px;
  margin-bottom: 39px;
}
.c-img3{
  width: 370px;
  height: 288px;
  margin-bottom: 39px;
}
.c-img4{
  width: 185px;
  height: 210px;
  margin-bottom: 39px;
}

.c-img6{
  width: 124px;
  height: 210px;
  margin-bottom: 39px;
}

#c-pics2-main #c-pics2{
  display: flex;
  flex-direction: column-reverse;
  /* background-color: rgb(13, 35, 230); */
}
#c-pic2-1{
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
}
#c-pic2-11, #c-pic2-12{
  width: 45%;
}
#c-pic2-12{
  margin-top: 0;
}
#c-pic2-2 {
  margin-left: 0;
  margin-top: 50px;
}
#c-pics3{
  display: flex;
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;

}
#c-pics3-3{
  margin-top: 0;
}
#c-img5{
  display: none;
}

#about-body{
  padding: 3rem 5rem;
}

#about-collage{
  display: flex;
  flex-direction: column;
}
#about-collage div{
  margin-bottom: 30px;
}
#about-collage div img{
  width: 261px;
  height: 272px;
}
#about-header{
  width: 100%;
}
#about-header h1{
  font-size: 25px;
  text-align: left;
}

.about-head{
  display: none;
}

#about-header h1{
  font-size: 30px;
}

#who h1{
  font-size: 30px;
  padding-bottom: 24px;
}
#who p{
  font-size: 20px;
  line-height: 30px;
}
#what p, #what a {
  word-break: break-word;
  overflow-wrap: break-word;
}
#what h1{
  font-size: 30px;
  padding-bottom: 25px;
}
#what p{
  font-size: 20px;
  line-height: 30px;
  color: #E87D04;
}

#how{
  padding-bottom: 50px;
}
#how-content h1{
  font-size: 30px;
  padding-bottom: 17px;
  
} 
#how-content p{
  width: 270px;
  font-size: 20px;
  line-height: 30px;
  text-align: center;
}

#off-pics img{
  width: 281px;
  height: 337px;
}

.leaders-head{
  width: 290px;
}

.leaders-head h1{
  font-size: 40px;
}
.leaders-head p{
  font-size: 20px;
  line-height: 30px;
  text-align: left;
}

.goals{
  display: flex;
  justify-content: center;
  width: 311px;
  padding-bottom: 52px;
 }
.goals h1{
  font-size: 30px;
}

#certs{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 58px;
  margin-top: 0;
}
#btn-1{
    display: none;
}
#head-text{
  width: 264px;
}
#head-text h1{
    font-size: 35px;
   
}

#head-text p{
    font-size: 20px;
    line-height: 30px;
    
}
#head-img{
    width: 20.313rem;
    height: 20.313rem;
    padding-top: 1rem;
}
#head-img1{
    width: 8.125rem;
    height: 14.5rem;
}
#head-img2{
    width: 11.688rem;
    height: 7.188rem;
}
#head-img3{
    width: 11.688rem;
    height: 6.388rem;
}
#known-scams-head{
    padding-top: 2rem;
}
#known-scams-head h1{
    font-size: 1.563rem;
}
#known-scams-head p{
    display: none;
 }

 #featured-form{
    display: flex;
    flex-direction: column;
 }
 #featured-text p{
    font-size: 30px;
 }
 #featured-img{
  width: 250px;
  height: 170px;
}

#form-text{
  display: flex;
  flex-direction: column;
}
.form-text input{
  width: 326px; 
  height: 55px;
  margin: 5px; 
  
}
#form-inputs h1{
  padding-top: 10px
}

.hug-pic{
  width: 320px;
  height: 334px;
}

#comm-head{
  display: flex;
  flex-direction: column-reverse;
  align-items: center ;
}
#profile-main, #app-link{
  display: none;
}
#comm-text h1{
  font-size: 38px;
  text-align: center;
}
#comm-text h1{
  font-size: 20px;
  text-align: left;
  line-height: 30px;
}
#comm-text{
  width: 340px;
  padding-bottom: 40px;
  padding-top: 40px;
}
#comm-img img{
  width: 92px;
  height: 188px;
}

#education p, #food p, #train p, #health p, #empower p, #testify-span p, #TTTP p, #events p, #f-health p, #skill p, #what-donate p{
  font-size: 20px;
  line-height: 30px;
  padding-bottom: 15px;
 }
 #testify-span div span{
  font-size: 20px;
 }
 #food h1, #train h1, #skill h1, #testify h1, #f-health h1, #health h1, #empower h1, #TTTP h1,  #events h1{
  font-size: 40px;
  padding: 10px 0;
 }

 #what-donate {
  width: 350px;
 }

 #supp-meth h1, #what-donate h1{
  font-size: 40px;
  
 }
 #supp-meth p{
  font-size: 14px;
  line-height: 25px;
 }

 #comm-text h1{
  font-size: 55px;
  padding: 10px 0;
  line-height: 50px;
  text-align: center;
 }
 #comm-text p{
  font-size: 20px;
  line-height: 30px;
 }
 #food , #train , #health , #empower , #TTTP , #events {
  width: 100%;
 }

 #f-health, #skill{
  width: 100%;
 }
 
 #skill-img{
  display: flex;
  flex-direction: column;
 }
 #skill-img img{
  width: 317px;
  height: 434px;
  padding-bottom: 20px;
 }
 #skill-img div img{
  width: 318px;
  height: 240px;
  padding-bottom: 20px;
 }

 #education h1{
  font-size: 45px;
  text-align: center;
 }
 #food-img{
  display: flex;
  flex-direction: column;
 }

 #health-img img{
  margin-bottom: 20px;
  width: 300px;
  height: 440px;
 }


 #food-img img{
  width: 300px;
  height: 337px;
  padding-bottom: 20px;
 }
#offer-img{
  display: none;
 
}
#offers-title{
  width: 100%;
  text-align: center;
}
#offer-points {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 40px;
}
 #footer-top-col{
  display: flex;
  flex-direction: column;
 }
 #col1, #col2, #col3{
  width: 100%;
 }
#footer-col{
  margin: 0 50px;
}
#footer-top-col{
  padding: 30px;
}
#col3 h3{
  text-align: center;
}
#col2 div{
  padding-left: 20px;
}
#col2 div:first-child {
  padding-left: 0; /* Ensure the first image doesn't have a negative margin */
}
#col1{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* width: 400px; */
}
#col-social{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* About us */

#about-us-body{
  padding-top: 1rem;
}

#contact-card{
  display: none;
}

#about-us-banner{
  margin-top: 49px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  
  width: 100%;
}
#about-us-img{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}
#about-us-intro{
  width: 300px;
}
#about-us-intro div{
  width: 277px;
}
 #about-us-img img{
  width: 261px;
  height: 247px;
} 

#call-to-action{
  display: flex;
  flex-direction: column-reverse;
}

.holding-pic{
  width: 261px;
  height: 247px;
}
#about-us-intro p{
  font-size: 13px;
  line-height: 1.5;
}

#CTA-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 0;
  width: 300px;
  height: 280px;
}
#CTA-text h1{
  font-size: 30px;
  text-align: center;
  padding: 17px;
}
#CTA-text p{
  font-size: 20px;
  line-height: 25px;
}
#hidden{
  display: none;
}

#job_process{
  display: flex;
  flex-direction: column;
  align-items: center;
 
}
#steps{
  width: 100%;
}

 
#offer-pics{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
#offer-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 330px;
  text-align: center;
  padding-bottom: 35px;
}
#offer-text h1{
  font-size: 35px;
  text-align: center;
  width: 100%;
}
#offer-text div{
  width: 70%;
}
#offer-text, #offer-pics div{
  padding: 10px;
}
#offer-points{
  display: flex;
  align-items: center;
}
#text-point{
  width: 80%;
}
#bullet-points {
  width: 100%;
}
#bullet-points div{
  margin-bottom: 5px;
}
.review p{
  display: none;
}
#testimonial-col{
  display: flex;
  flex-direction: column;
}
#offer-img img{
  width: 306px;
  height: 252px;
}
#news-panel1{
  display: none;
}
#ngo-faq{
  display: none;
}
#comm-text{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
#supp-method{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
#ngo-projects{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}
#ngo-1 img{
  width: 325px;
  height: 232px;
}
#ngo-1 {
  width: 325px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 30px;
 
}
.supp-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.supp-btn button {
  width: 170px;
  height: 100px;
  margin-left: 10px;
}
.supp-btn button:first-child{
  margin-left: 0;
}

#sup-img{
  display: none;
}
#supp-meth{
  padding-top: 5rem;
}
#support-collage {
  width: 70%;
}
#support-collage img{
  width: 97px;
  height: 97px;
}

#founders{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}
#founder-text{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
}
#founder-text h3{
  font-size: 25px;
}
#founder-text h1{
  font-size: 35px;
}
#founder-text p{
  text-align: left;
  font-size: 14px;
  line-height: 25px;
}

#founder-pic img{
  width: 250px;
  height: 220px;
}
#leaders{
  padding-bottom: 0;
}

#members h1{
  font-size: 35px;
  padding-bottom: 30px;
}

#board{
  display: flex;
  flex-direction: column;
}
#board-body{
  padding-top: 50px;
}
#office-board{
  width: 100%;
  margin-bottom: 20px;
}

#opportunities h1{
  font-size: 30px;
}
#opportunities h3{
  font-size: 20px;
}
#opportunities p{
  font-size: 10px;
}

/* Project */

#home{
  height: 100px;
}

#project-live{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}
.project-title p{
  font-size: 30px;
}
#project-body{
  display: flex;
  align-items: center;
}
.project-img{
  width: 250px;
  height: 250px;
}

/* Contact */

#contact-heading{
  width: 333px;
  height: 132px;
}
#contact-heading h1{
  font-size: 28px;
}
#contact-info-cards{
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}
#contact-info-cards div{
  width: 258px;
  margin: 30px;
}

/* getting started */

#getting-started-pic{
  display: none;
}

#review{
  text-align: center;
  display: flex;
  flex-direction: column;
}

#scam-body{
  margin: 0;
  margin-top: 30px;
  padding: 1rem;
}
#scam-body h1{
  font-size: 20px;
}
#scam-info-head h1{
  line-height: 1.5;
  font-size: 20px;
}
#scam-info-head p{
  display: none;
}

.test-profile1{
  width:357px;
  height: 400px;
}

#test-profile{
  width: 357px;
  height: 600px;
}
#test-p {
  padding: 54px 38px 0 46px;
}

#stories-pics div{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#firstP p{
  font-size: 14px;
  line-height: 2;
}
#firstP img{
  width: 180px;
  height: 300;
}
/* Donate */
#donate{
  width: 295px;
  height: 389px;
}
#donate-sp{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

}
#sponsor-img{
  display: none;
}
/* Mobile Version */
#donate-box {
  border: 2px solid #ccc;
  padding: 20px;
  width: 300px;
  text-align: center;
  margin: 0 auto;
}

#donate-sub {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

#one-time, #monthly {
  flex: 1;
  padding: 10px;
  background-color: #d35400;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

#monthly {
  background-color: #2c3e50;
}

#donate-input {
  margin-bottom: 20px;
  position: relative;
}

#donate-input label {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
}

#donate-input input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 14px;
}

#donate-input .currency {
  position: absolute;
  right: 10px;
  top: 45px;
  font-size: 14px;
}

#donate-submit {
  background-color: #d35400;
  color: white;
  padding: 10px;
  width: 100%;
  border: none;
  cursor: pointer;
  font-size: 14px;
}


}