programs.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

.srujna-programs {
  height: 500vh;
  width: 100vw;
}

.srujna-programs-mainpic {
  font-family: 'Hind Madurai', sans-serif;
  height: 21%;
  width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.848), rgba(0, 0, 0, 0.741)),
    url("https://www.srujna.org/wp-content/uploads/2019/03/programs-banner-1.jpg");
  background-position: left top;
  background-repeat: no-repeat;
  /* backdrop-filter:contrast(5%); */
  background-size: 100% 105%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: center;
}

.mainpic-content {
  height: 68%;
  width: 90%;
  color: #fff;
}
#content {
  font-size: 28px;
  margin-bottom: 40px;
  line-height: 40px;
}
#heading {
  font-size: 63px;
  margin-bottom: 6px;
  font-weight: bolder;
}
#btnn {
  height: 11%;
  width: 15%;
  font-size: 15px;
  font-weight: bold;
  background-color: transparent;
  color: #fff;
  border: #fff 1.5px solid;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.srujna-programs-content {
  height: 68.6%;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding-right: 1%;
  padding-top: 7%;
  padding-bottom: 6%;
}

.the-problem {
  height: 22%;
  width: 85%;
  border: 2px solid #e2e2e2;
  padding: 4%;
  font-family: 'Hind Madurai', sans-serif;
}

#head-1 {
  font-size: 38px;
  color: #e10982;
  margin-bottom: 9px;
}

#the-problems-p {
  font-size: 18px;
  line-height: 33px;
}

.the-solution {
  height: 44%;
  width: 85%;
  border: 2px solid #e2e2e2;
  padding: 4%;
  font-family: 'Hind Madurai', sans-serif;
}

#the-solution-p {
  font-size: 18px;
  line-height: 33px;
}

.divpic {
  margin-top: 30px;
  height: 44%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pics {
  height: 100%;
  width: 55%;
  background-image: url(https://www.srujna.org/wp-content/uploads/2023/01/unnamed.png);
  background-repeat: no-repeat;
}

.our-impact {
  height: 25%;
  width: 85%;
  border: 2px solid #e2e2e2;
  padding-left: 4%;
  padding-top: 3%;
  font-family: 'Hind Madurai', sans-serif;
}

#ul {
  line-height: 33px;
}

#ul li {
  font-size: 18px;
  margin-left: 3%;
}

.srujna-programs-footer {
  height: 15.4%;
  width: 100%;
  /* height: 75vh;
    width: 100%; */
  background-color: #313030;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Varela Round', sans-serif;
}
.footer_col {
  font-size: 14px;
  line-height: 24px;
  color: white;
  height: 80%;
  width: 85%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* color: #555555; */
.content-1 {
  height: 100%;
  width: 45%;
  padding-top: 3%;
}

.content-1 ul {
  list-style: none;
}

.content-1 ul li {
  text-decoration: none;
  margin-top: 10px;
}

.content-1 ul li a {
  text-decoration: none;
  color: white;
}

.joinus {
  margin-top: 10%;
  margin-bottom: 3%;
}

.joinus_list a {
  color: white;
  font-size: large;
  padding: 5%;
  margin-left: -5%;
  text-decoration: none;
}

.content-2 {
  height: 100%;
  width: 25%;
  padding-top: 3%;
}

.content-2 ul {
  list-style: none;
}

.content-2 ul li {
  text-decoration: none;
  margin-top: 10px;
}

.content-2 ul li a {
  text-decoration: none;
  color: white;
}

.content-3 {
  height: 100%;
  width: 25%;
  padding-top: 3%;
}

.content-3 ul {
  list-style: none;
}

.content-3 ul li {
  text-decoration: none;
  margin-top: 10px;
}

.content-3 ul li a {
  text-decoration: none;
  color: white;
}

.content-4 {
  height: 100%;
  width: 25%;
  padding-top: 3%;
}

h6 {
  margin-top: 4%;
  font-size: small;
}

.content-4 form {
  text-decoration: none;
  margin-top: 8%;
}

.footer_form input[type="text"] {
  color: #fff;
  width: 40%;
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
}

.footer_form input[type="email"] {
  color: #fff;
  width: 82%;
  background: transparent;
  border: none;
  border-bottom: 2px solid white;
}

.footer_form label[for="fname"] {
  font-size: small;
}

.footer_form label[for="lname"] {
  margin-left: 28%;
  font-size: small;
}

.submit {
  border: none;
  margin-top: 15%;
  border-radius: 25px;
  height: 40px;
  width: 90px;
  color: white;
  background-color: #e10982;
  cursor: pointer;
}

.submit:hover {
  background-color: #d34c98;
}