import Image from "next/image";

const SlideSeven = () => {
  return (
    <div>
      <div className="relative min-h-[50vh] sm:min-h-[60vh] md:min-h-[60vh] lg:min-h-[80vh] xl:min-h-[100vh]">
        {/* <div className="absolute right-0"> */}
        {/* <div className="relative w-[40vw] min-h-[50vh] sm:min-h-[60vh] md:min-h-[60vh] lg:min-h-[80vh] xl:min-h-[100vh]"> */}
        <Image
          src="/s7.jpeg"
          objectPosition="center top"
          layout="fill"
          objectFit="cover"
        />
        {/* </div> */}
        {/* </div> */}
        <div className="absolute top-0 left-0 h-full w-full">
          <div className="absolute top-1/2 transform -translate-y-1/2 w-[90%] lg:w-[85%] xl:w-[60%]">
            <div className="tracking-tight ml-[10%] text-xs sm:text-lg md:text-2xl md:leading-8 lg:text-4xl  text-primary-dark  lg:leading-tight p-2 space-y-5">
              <h3 className="text-[2em]">Our Philosophy</h3>
              <p>
                We nurture self belief, positive values, soft skills and
                personal imprinting to build self aware and confident Mavens in
                whose hands the fate of Africa and her future is assured by
                continuity of excellence.
              </p>

              <div className="pt-5">
                <span className="font-semibold">
                  The Maven philosophy sits on three main pillars:
                </span>
                <ul className="text-[.9em] ml-6 list-disc">
                  <li>
                    We support the teen to believe in themselves and enhance
                    their Self Esteem
                  </li>
                  <li>We organize knowledge by exposure and job shadowing</li>
                  <li>Growing by doing</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SlideSeven;
