fix: responsive issues for Benefits Card (#435)

Co-authored-by: Tushar Mathur <[email protected]>

src/components/home/BenefitsCard.tsx

@@ -8,7 +8,7 @@ const BenefitsCard = (): JSX.Element => {
       <div className="md:flex md:flex-wrap justify-center gap-10 w-[100%]">
         {benefits.map((item) => (
           <a
-            className="group border border-solid border-tailCall-border-dark-300 rounded-3xl md:w-[40%] lg:w-[45%] md:px-10 px-4 py-2 pt-4 lg:flex benefits-drop-shadow hover:border-[#FDEA2E] md:mb-0 mb-6 cursor-pointer hover:no-underline"
+            className="group border border-solid border-tailCall-border-dark-300 rounded-3xl md:w-[40%] lg:w-[45%] md:px-10 px-4 py-2 pt-4 lg:flex benefits-drop-shadow hover:border-[#FDEA2E] md:mb-0 mb-6 cursor-pointer hover:no-underline flex flex-col lg:flex-row"
             key={item.id}
             href={item.redirection_url}
             target="_blank"