import Underline from "../../assets/Underline.svg";
import ServiceCardContainer from "./ServiceCardContainer";

const Services = () => {
  return (
    <div className="mt-20 lg:mt-60 text-4xl md:text-7xl xl:text-8xl text-center">
      <h1>
        We've got your{" "}
        <span className="relative inline-block">
          footprint{" "}
          <img
            src={Underline}
            alt="underline"
            className="absolute bottom-0 left-0"
          />
        </span>{" "}
      </h1>
      <h1>
        bullsh
        <span className="bg-clip-text text-transparent bg-gradient-to-br from-gold-light to-gold-dark">
          *
        </span>
        t covered
      </h1>

      <h2 className="italic font-thin hidden md:block md:text-2xl mt-2">
        Unlock the full potential of your business with our services.
      </h2>

      <ServiceCardContainer />
    </div>
  );
};
export default Services;
