const SectionTitle = ({
  title,
  description,
  className,
}: {
  title: string |  React.ReactNode;
  description: string | React.ReactNode;
  className?: string;
}) => {
  return (
    <div className={`flex w-full text-dark overflow-visible  ${className || ""}`}
    data-aos="fade-up"
    data-aos-duration="1500"
    data-aos-delay="100">
      <div className=" flex flex-col md:flex-row justify-between items-center w-full gap-3 px-4 md:px-5 lg:p-0">
        <span className="text-[25px] md:text-[20px]  xl:text-[40px] lg:text-[30px] font-normal 2xl:w-[40%] md:w-1/3 lg:w-1/2 uppercase">
          {title}
        </span>
        <span className=" text-paragraph text-[14px] font-light  2xl:w-[49%] md:w-1/2  lg:text-[18px] xl:text-[20px] 2xl:leading-10">
          {description}
        </span>
      </div>
    </div>
  );
};

export default SectionTitle;