.help-animal{
    font-family:sans-serif;
    margin-top: 10ch;
}

.ha-hero{
  margin-top: 0ch;
  background-image: url("../images/help-animal-hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 73ch;
}

.ha-hero1{
  margin-top: 15ch;
  margin-left: 8ch;
}

.ha-container{
  margin: 0px 0ch;
}

.ha-head{
    font-size: 48px;
}

.ha_hero_main {
    margin: auto;
    display: table;
    margin-top: 3ch;
    width: 40ch;
}

.ha-hero1-para1{

word-spacing: 5px;
}

/*grid section*/

.grid-container{
  position: relative;
}

.hth-grid{
    margin: auto;
}

.how-to-help-main{
  width: 52ch;
  height: 67.5ch;
}

.grid-img{
  width: 60ch;
  border-radius: 20px;
}

.color-overlay img:hover{
  opacity: 0.5;
}

.color-overlay{
  background: rgba(253, 193, 97);
  border-radius: 16px;
  width: 59ch;
}

.grid-text-block h2{
  position: absolute;
  top: 2ch;
  left: 2ch;
  font-size: 30px;
  font-weight: 600;
  color: white;
}

.grid-text-block p{
  position: absolute;
  top: 10ch;
  left: 2ch;
  font-size: 16px;
  font-weight: 500;
  color: white;
  margin: 1ch;
}


.grid-text-block .volunteer_view_more{
  position: absolute;
  top: 24ch;
  left: 3ch;
  font-size: 16px;
  font-weight: 600;
  color: white;
}


/*.grid-text-block p:hover{
  position: absolute;
  top: 10ch;
  left: 2ch;
  font-size: 16px;
  font-weight: 600;
  color: white;
  opacity: 1 !important;
}*/

.grid-text-block a{
  color: #fff;
}

/**/

.ha-search-section{
  margin-top: 5ch;
}

.ha-search {
    margin: auto;
    font-size: 22px;
    font-weight: 600;
    display: table;
}

.ha-search-icon i{
  font-size: 3ch;
}

.ha-input {
  padding: 1ch;
width: 55ch !important;
border: 1px solid #D7DCE0;
border-radius: 9px 0px 0px 9px;
outline: none;
font-size: 16px;
box-shadow: 1px 3px 7px -3px #000;

}

.volunteer-form{
  box-shadow: 2px 3px 14px rgba(0, 0, 0, 0.05);
  margin: 4ch;
  font-size: 16px;
}

.volunteer-form h2{
  font-size: 18px;
}

.volunteer-form p{
  font-size: 13px;
}

.ha-search-icon {
  padding: 0.7ch;
  padding-bottom: 9px;
  width: 7ch;
  background: #1A5E6B;
  border-radius: 0px 9px 9px 0px;
  cursor: pointer;
  box-shadow: -1px 3px 6px -2px #000;
}


/*form*/

.radio-block{border: 2px solid #1A5E6B;padding: 5px 6px;width: 54px;justify-content: center;border-radius: 7px;}

.radio-block:hover{
  background: #1A5E6B;
  cursor: pointer;
}

.volunteer-btn{width: 114px;height: 36px;background: #1A5E6B;box-shadow: 0px 2.19142px 4.38284px rgba(0, 0, 0, 0.16);border-radius: 16px;margin: auto;display: table;}

.experience-radio{
  display: none;
}

/*social*/

.ha-social{
  background-image: url("../images/ha-social.png");
  height: 624px;
  padding-top: 5ch;
}

.ha-social-text{text-align: center;padding-top:5ch;}


.ha-social-icon a i{
  font-size: 20px;
  background: #FDC161;
  padding: 15px 18px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}


.ha-social-icon a{
  text-decoration: none;
  margin: 10px;
}

.ha-social p:nth-child(1){
  font-size: 22px;
}

.ha-social p:nth-child(3){
  font-size: 22px;
  font-weight: 700;
}




/***********media query**************/


@media only screen and (min-width: 650px) and (max-width: 1490px) {

  .grid-text-block h1 {
    position: absolute;
    top: 2ch;
    left: 2ch;
    font-size: 22px;
    font-weight: 600;
    color: white;
}

.grid-text-block p{
  margin: 0 2ch;
  position: absolute;
  top: 10ch;
  left: 2ch;
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin: 1ch;
}


  /******how to help*******/

  .how-to-help-main{
    width: 50ch;
    height: 62ch;
  }

  .grid-img{
    width: 52ch;
    margin: 1ch;
  }

  .color-overlay{
    background: none;
    margin-left: -1ch;
    width: 0ch;
  }


}


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

  .grid-text-block h1 {
    position: absolute;
    top: 2ch;
    left: 2ch;
    font-size: 25px;
    font-weight: 600;
    color: white;
}

  .ha-head{
  margin-bottom: 1ch;
  margin-left: 0.3ch;
  }

  .ha-hero1 {
    margin-top: 5ch;
    margin-left: 2ch;
    font-size: 14px;
}

.ha_hero_main{
  width: 280px;
  margin-top: -1ch;
  display: none;
}

/******how to help*******/

.hth-grid{
  margin-left: 1.5ch;
}

.how-to-help{
  padding-top: 3ch;
}

.how-to-help-main{
  width: 39ch;
  height: 46.5ch;
}

.grid-img{
  width: 40ch;
  margin: 1ch;
  height: 29ch;
}

.color-overlay{
  background: none;
  margin-left: 0ch;
}

/*********search***********/

.ha-search {
    margin: auto;
    font-size: 14px;
    font-weight: 600;
    display: table;
    margin-top: 5ch;
}

.ha-input {
    padding: 1ch;
    width: 30ch !important;
    border: 1px solid #D7DCE0;
    border-radius: 9px 0px 0px 9px;
    outline: none;
    font-size: 16px;
    box-shadow: 1px 3px 7px -3px #000;
}

.ha-search-icon {
    padding: 1ch;
    padding-bottom: 9px;
    width: 6ch;
    background: #1A5E6B;
    border-radius: 0px 9px 9px 0px;
    cursor: pointer;
    box-shadow: -1px 3px 6px -2px #000;
}

.ha-search-icon i {
    font-size: 2ch;
}

/**********social text**************/

.ha-social {
    background-image: url(../images/ha-social.png);
    height: 975px;
    padding-top: 5ch;
}

.ha-social-text{padding:5ch;padding-top: 0ch;}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social p:nth-child(1) {
    font-size: 22px;
}

.ha-social-icon a i{
  font-size: 14px;
  background: #FDC161;
  padding: 15px 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}
}

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

  .ha-head{
    width: 15ch;
    font-size: 35px;
  }

  .ha-hero1 {
    margin-top: 5ch;
    margin-left: 2ch;
    font-size: 14px;
}

.ha_hero_main{
  width: 280px;
  margin-top: -1ch;
  display: none;
}

/******how to help*******/

.how-to-help{
  padding-top: 3ch;
}

.how-to-help-main{
  width: 35ch;
  height: 46.5ch;
}

.grid-img{
  width: 38ch;
  margin: 1ch;
}

.color-overlay{
  background: none;
  margin-left: -1ch;
}

/*********search***********/

.ha-search {
    margin: auto;
    font-size: 14px;
    font-weight: 600;
    display: table;
    margin-top: 5ch;
}

.ha-input {
    padding: 1ch;
    width: 30ch !important;
    border: 1px solid #D7DCE0;
    border-radius: 9px 0px 0px 9px;
    outline: none;
    font-size: 16px;
    box-shadow: 1px 3px 7px -3px #000;
}

.ha-search-icon {
    padding: 1ch;
    padding-bottom: 9px;
    width: 6ch;
    background: #1A5E6B;
    border-radius: 0px 9px 9px 0px;
    cursor: pointer;
    box-shadow: -1px 3px 6px -2px #000;
}

.ha-search-icon i {
    font-size: 2ch;
}

/**********social text**************/

.ha-social {
    background-image: url(../images/ha-social.png);
    height: 975px;
    padding-top: 0ch;
}

.ha-social-text{
padding:5ch;
padding-top:5ch;
}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social-icon a i{
  font-size: 14px;
  background: #FDC161;
  padding: 15px 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}
}


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

  .ha-head{
    width:40ch;
  }

  .ha-hero1 {
    margin-top: 5ch;
    margin-left: 2ch;
    font-size: 14px;
}

.ha_hero_main{
  width: 280px;
  margin-top: -1ch;
}

/******how to help*******/

.how-to-help{
  padding-top: 3ch;
}

.how-to-help-main{
  width: 33ch;
  height: 42.5ch;
}

.grid-img{
  width: 37ch;
  margin: 1ch;
  height: 28ch;
}

.color-overlay{
  background: none;
  margin-left: -1ch;
}

/*********search***********/

.ha-search {
    margin: auto;
    font-size: 14px;
    font-weight: 600;
    display: table;
    margin-top: 5ch;
}

.ha-input {
    padding: 1ch;
    width: 30ch !important;
    border: 1px solid #D7DCE0;
    border-radius: 9px 0px 0px 9px;
    outline: none;
    font-size: 16px;
    box-shadow: 1px 3px 7px -3px #000;
}

.ha-search-icon {
    padding: 1ch;
    padding-bottom: 9px;
    width: 6ch;
    background: #1A5E6B;
    border-radius: 0px 9px 9px 0px;
    cursor: pointer;
    box-shadow: -1px 3px 6px -2px #000;
}

.ha-search-icon i {
    font-size: 2ch;
}

/**********social text**************/

.ha-social {
    background-image: url(../images/ha-social.png);
    height: 975px;
    padding-top: 5ch;
}

.ha-social-text{
padding:5ch;
padding-top:5ch;
}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social p:nth-child(1) {
    font-size: 22px;
}

.ha-social-icon a i{
  font-size: 14px;
  background: #FDC161;
  padding: 15px 20px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}

}

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

  .grid-text-block h1 {
    position: absolute;
    top: 2ch;
    left: 2ch;
    font-size: 28px;
    font-weight: 600;
    color: white;
}

  .ha-head{
    width: 36ch;
  }

  .ha-hero1 {
    margin-top: 5ch;
    margin-left: 2ch;
    font-size: 14px;
}

.ha_hero_main{
  width: 280px;
  margin-top: -1ch;
}

/******how to help*******/

.how-to-help{
  padding-top: 3ch;
}

.how-to-help-main{
  width: 29ch;
  height: 42.5ch;
}

.grid-img{
  width: 32ch;
  margin: 1ch;
}

.color-overlay{
  background: none;
  margin-left: -1ch;
}

/*********search***********/

.ha-search {
    margin: auto;
    font-size: 13px;
    font-weight: 600;
    display: table;
    margin-top: 5ch;
}

.ha-input {
    padding: 1ch;
    width: 27ch !important;
    border: 1px solid #D7DCE0;
    border-radius: 9px 0px 0px 9px;
    outline: none;
    font-size: 16px;
    box-shadow: 1px 3px 7px -3px #000;
}

.ha-search-icon {
    padding: 1ch;
    padding-bottom: 9px;
    width: 6ch;
    background: #1A5E6B;
    border-radius: 0px 9px 9px 0px;
    cursor: pointer;
    box-shadow: -1px 3px 6px -2px #000;
}

.ha-search-icon i {
    font-size: 2ch;
}

/**********social text**************/

.ha-social {
    background-image: url(../images/ha-social.png);
    height: 975px;
    padding-top: 5ch;
}

.ha-social-text{
padding:5ch;
padding-top:5ch;
}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social p:nth-child(1) {
    font-size: 18px;
}

.ha-social-icon a i{
  font-size: 14px;
  background: #FDC161;
  padding: 15px 15px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
  border-radius: 30px;
  color: #fff;
  font-weight: 600;
}

}

/*Donate*/


.ha-donate{
  position: relative;
  margin-top: 4ch;
  background-image: url("../images/donate-head.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 73ch;
}

.ha-donate-head{
  color: #fff;
}

.donate-heading {
    padding-left: 1ch;
    font-size: 48px;
    font-weight: 600;
    text-align: center;
    margin: 1ch 0ch 0ch 0ch;
}

.pg-donate-comma{
    position: absolute;
    bottom: 7ch;
    left: 7ch;
    width: 4ch;
}

/***************/

.stray-program{
  text-align: center;
  background-image: url("../images/Rectangle 238.png");
  background-size: cover;
}

.stray-program .card-title{

font-weight: 600;

font-size: 24px;
}

.stray-program .card{
  color:#fff;
  align-items: center;
  margin-bottom: 10ch;
}

.price-span{
  font-size: 40px;
font-weight: 600;color: #fff;}

.donate-btn-main {
    border: 1px solid #FDC161;
    padding: 1ch;
    border-radius: 5px;
    background: #FDC161;
    color: #fff;
}

.donate-btn-program {
    border: 1px solid #FDC161;
    padding: 1ch;
    border-radius: 5px;
    background: #1A5E6B;
    color: #fff;
    width: 50%;
}

.donate-btn-main:hover{
    color: #fff;
}

.donate-btn{

border: 1px solid #fff;

padding: 1ch;

border-radius: 5px;
}

.stray-program .card a{
  font-size: 16px;
  color: #fff;
}

.stray-program .card a:hover{
  font-size: 16px;
  background-color: #fff;
  color: #000;
}

/**************************/
.vaccinate-program{
  text-align: center;
}

.simple-radio {
  display: table;
  width: 100%;
}

.simple-radio ul {
  counter-reset: section;
}

.simple-radio li {
  display: block;
  line-height: 1.2em;
  width: 100%;
  color: #1B5E6B;
  font-weight: 600;
  border: 1px solid #ccc;
  counter-increment: section;
  cursor: pointer;
  margin: .5em .5em .5em 0;
  padding: .4em .4em .4em 1.8em;
}



.simple-radio li:hover:before, .simple-radio li.checked:before {
  color: #fff;
}



.simple-radio .check {
  display: inline-flex;
  text-align: center;
  width: 1.5em;
  line-height: 1em;
  padding-top: .2em;
  float: left;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.simple-radio input,
.simple-radio li .check .yes,
.simple-radio li.checked .check .no {
  display: none;
}

.simple-radio li:hover,
.simple-radio li.checked {
  background-color: #FDC161;
  color: #ffffff;
  padding: 3ch;
}

.simple-radio li .check .no,
.simple-radio li.checked .check .yes {
  display: table;
}


.vaccinate-program ul li{
  list-style: none;
  border: 3px solid;
  margin: 2ch;
  display: block;
  padding: 3ch;
}

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

  .stray-program .card{
    color:#fff;
    align-items: center;
    margin: auto;
    margin-bottom: 2ch;
  }


}