.cal-title{
  font-size: 24px;
  font-family: "Poppins";
  color: rgb(22, 90, 47);
  line-height: 1.283;
  text-align: center;
  font-weight:500;
 
}

.grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.cal-card {
  background-color: rgb(255, 255, 255);
  padding: 20px;
  border-radius: 0;
  border-width: 1.25px;
  border-color: rgb(200, 217, 206);
  border-style: solid;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
}
 

.cal-card.active {
  background-color: rgb(45, 171, 86);
  color: #fff;
  border-color: rgb(45, 171, 86);
} 

.cal-card.active .cal-card-title
{
	  color: #fff;
}
.cal-card.active .count, .count
{
  font-size: 14px;
  color: rgb(50, 50, 50);
}
 

.cal-card .cal-card-title {
  font-size: 16px;
  font-family: "Poppins";
  line-height: 1.5;
  text-align: center;
   color: rgb(22, 90, 47);
  font-weight:500;
  margin-bottom:20px;
min-height: calc(16px * 1.5 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}


.cal-img {
  height: 43px;
 

  margin: 0 auto 20px auto ;
  display: block;
}
.counter {
 
  justify-content: center;
  align-items: center;
  gap: 12px;
 display: inline-flex;
    justify-content: center;
    margin: auto;
  border-width: 1.25px;
  border-color: rgb(200, 217, 206);
  border-style: solid;
  background-color: rgb(255, 255, 255);
  border-radius:20px;
  min-width:100px;

}
 
 

.cal-card.active .counter button
{
	  color: rgb(22, 90, 47);

}
.counter button {
  width: 28px;
  height: 28px;
  color: rgb(22, 90, 47);

  border: none;
  cursor: pointer;
  background: transparent;
  font-size: 18px;
}

.impact-btn {
  margin-top: 40px;
  padding: 12px 30px;
  font-size: 16px;
  background: #2fb36c;
  color: white;
  border: none;
  border-radius: 50px;
  cursor: pointer;
}
#resultBox {
  margin-top: 20px;
  font-size: 18px;
  padding: 20px;
}

 
.grid1 {
 padding-top:16px;
 padding-bottom:40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.totla-text {
  font-size: 24.464px;
  font-family: "Poppins";
  color: rgb(50, 50, 50);
  line-height: 1.723;
  text-align: left;
  
}
.totla-text span
{
	   color: rgb(22, 90, 47); font-weight:500;
}


.cal-card .cal-card-title1 {
  font-size: 16px;
  font-family: "Poppins";
  line-height: 1.5;
  text-align: left;
   color: rgb(22, 90, 47);
  font-weight:500;
 
 
    white-space: normal;
    word-break: break-word;
}

.totalsave{
  font-size: 46px;
  font-family: "Poppins";
  color: rgb(22, 90, 47);
  font-weight: bold;
line-height: 1.5;
  text-align: center; 
}
.totalsave1{
  font-size: 20px;
  font-family: "Poppins";
  color: rgb(22, 90, 47);
	font-weight:600;
 line-height: 1.5;
  text-align: center; 
}
.totalsave2
{
font-size:20px;
	    font-family: "Poppins";
    color: rgb(22, 90, 47);
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
   @media only screen and (max-width: 992px) {
   .grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.grid1 {
 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}
.totalsave
{ 
	font-size: 40px;
	line-height: 1;
}
}
@media only screen and (max-width: 768px) {
   .grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.grid1 {
 
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

}