import React from "react";
import Heading from "../Heading/Heading";
export default function Reasons({ image, content, title }) {
  return (
    <>
      <div className="">
        <div
          className="text-center"
          style={{
            backgroundColor: "#ECF3FF",
            borderRadius: "10px",
          }}
        >
          <img
            src={image}
            className="shadow"
            style={{
              maxWidth: "60%",
              marginBottom: "-50px",
              marginTop: "50px",
              borderRadius: "10px",
            }}
            alt=""
          />
        </div>
        <div
          style={{
            marginTop: "80px",
          }}
        >
          <ul>
            <li>
              <Heading fontFamily="semibold" fontSize="20px" title={title} />
            </li>
          </ul>
          <p
            style={{
              paddingLeft: "20px",
              paddingRight: "20px",
              fontSize: "14px",
            }}
          >
            {content}
          </p>
        </div>
      </div>
    </>
  );
}
