.button1{
width: 131px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 12px 10px 12px 10px;
border-radius: 999px;
background:  rgba(250, 204, 21, 1);
color: rgba(21, 128, 61, 1);
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
}

.button2 {
    width: 131px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 10px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 1);
    color: rgba(21, 128, 61, 1);
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    transition: all 0.3s ease;
}



.bannerHead {
    color: rgb(0, 0, 0);
    font-family: Inter, sans-serif;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.bannerP {
    color: rgba(31, 41, 55, 1);
    font-family: Inter, sans-serif;
    font-weight: 400;
    text-align: center;
}

@media (max-width: 770px) {
    .button2 {
        width: 100px;
        height: 32px;
        font-size: 12px;
        padding: 10px 8px;
    }
}


 .plantDiscription{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: undefined;
 }


 .plantHead{
color: rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 32px;
font-weight: 600;
line-height: 40px;
letter-spacing: 0%;
text-align: center;
 }

 .plantAbout{
color: rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
 }


 .pointbox{
width: 400px;
height: 156px;
padding: 40px;
border-radius: 12px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06),0px 1px 3px 0px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 1);
 }

 .pointHead{
color:rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 32px;
font-weight: 600;
line-height: 40px;
letter-spacing: 0%;
text-align: center;
 }

 .pointboxPoint{
    color: rgba(21, 128, 61, 1);
font-family: Inter;
font-size: 32px;
font-weight: 600;
line-height: 40px;
letter-spacing: 0%;
 }

 .pointboxParagraph{
color:rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
 }

 .footerbutton {
    padding:5px 5px;
    border-radius: 999px;
    background: rgba(250, 204, 21, 1);
    color: rgba(21, 128, 61, 1);
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    
}

.footertext{
    color:rgba(255, 255, 255, 1);

font-family: Inter;
font-size: 32px;
font-weight: 600;
line-height: 40px;
letter-spacing: 0%;
text-align: center;
}


@media  (max-width: 1275px) and (min-width: 768px) {
  .pointer-events {
width: 100%;
height: 156px;
  }
} 

@media  (max-width: 1090px) and (min-width: 1024px) {
  .with{
width:fit-content;
} 
}

/* ....................fuction part.............................. f */


.choosePlant{

    color:rgba(31, 41, 55, 1);
    font-family: Inter;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
}

.plantCat{
color: rgba(0, 0, 0, 1);
font-family: Inter;
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0%;
text-align: left;
padding-bottom: 5px;
}

.plant{
    line-height: 25px;
}


.treeName{
    /* Badge */
height: 28px;
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:4px 12px 4px 12px;
border-radius:  400px;
background: rgba(220, 252, 231, 1);
color: rgba(21, 128, 61, 1);

font-family: Geist;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0%;
text-align: left;

}

.treeConst{
color:  rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 14px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0%;
text-align: right;
}

.treeButton{
    /* Frame 2 */
/* width:298px; */
height: 40px;
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: undefined;
padding: 12px 20px 12px 20px;
border-radius: 999px;
background:  rgba(21, 128, 61, 1);


}


.active{
  background-color: #15803D;
  color: white;
}

.card-section{
    color: rgba(0, 0, 0, 1);
    font-family: Inter;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: 0%;
    text-align: left;
    padding-top: 15px;
    padding-left: 10px ;
    margin-bottom: 20px;
}


.moneySection{
color:rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0%;
text-align: left;
opacity: 50%;
}

.cardbg{
    border-radius: 8px;
background: rgba(240, 253, 244, 1);

}


.total{
    color:  rgba(31, 41, 55, 1);
font-family: Inter;
font-size: 16px;
font-weight: 500;
line-height: 100%;
letter-spacing: 0%;
text-align: left;
}