How do i have "--swiper-pagination-bottom": "50px",
        "--swiper-pagination-top": "auto",   for tailwinds breakpoint lg and below. And "--swiper-pagination-bottom": "0px",
        "--swiper-pagination-top": "auto", for breakpoint xl in the code: import {
  RxModulzLogo,
  RxBlendingMode,
  RxRocket,
  RxArrowTopRight,
} from "react-icons/rx";
import { BsRobot } from "react-icons/bs"; 
import { SiVisualstudiocode } from "react-icons/si";
import { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { BackgroundBeams } from "./ui/backgroundbeams";
import Link from "next/link";
import { motion } from "framer-motion";
import { fadeIn } from "../variants";


import "swiper/css";
import "swiper/css/free-mode";
import "swiper/css/pagination";

const serviceData = [
  {
    Icon: BsRobot,
    title: "AI Training",
    description: "Unleash the power of AI with this new cutting-edge service. Harness the potential of Large Language Models(LLMs) trained on your business data, automating tasks and enhancing the functionality of your website or enterprise. You can both automate physical business operations as well as online business operations using AI. Transform your business landscape, unearth deep insights, and achieve unprecedented efficiency. Let's collaborate to create a custom AI solution that will revolutionize your business.",
  },
  {
    Icon: SiVisualstudiocode,
    title: "Development",
    description: "Unleash the power of robust and dynamic modern web solutions. As a passionate web developer, I thrive on bug-solving, turning complex issues into seamless user experiences. Together, we can turn your idea into a fully operational online business. With a focus on efficiency, scalability, and security, every challenge is a new opportunity for innovation. Let us collaborate to create digital solutions that are not just functional, but also engaging and user-friendly. Let's build a website that truly reflects your brand and captivates your audience.",
  },
  {
    Icon: RxRocket,
    title: "SEO",
    description: "Unlock the power of online visibility with the organic SEO service that propels your website to the top of search results, driving traffic and reduce your customer acquisition cost. With the right SEO solution you can enhance discoverability and fuel organic growth. Beyond being just being found, your business becomes memorable while also reducing marketing costs and significantly boost your online market share. Let's collaborate to create a custom SEO strategy that will elevate your brand to new heights.",
  },
  {
    Icon: RxModulzLogo,
    title: "Branding",
    description: "Branding is the core essence of a business's identity, more than just a logo—it's an authentic, unique story that genuinely resonates with the target audience. This dedicated service is tailored to crafting a compelling brand narrative, designed to distinguish a business amidst the highly competitive global market. It's about creating a robust, significant presence that not only drives growth but also leaves a profound, lasting impact. Embark on the journey towards a powerful, world-class brand that captivates, endures, and thrives.",
  },
  {
    Icon: RxBlendingMode,
    title: "Design",
    description: "Having been involved with numerous projects catering to a broad and diverse customer base, understand that design is pivotal for fostering inclusivity and broad appeal. Design encapsulates frontend UI/UX development, where each minutiae is crafted with precision and care. The belief is that designs should be visually appealing and provide an intuitive, seamless user experience. Together we can transform your brand concepts into a distinctive digital reality, crafting a unique online presence that represents your brand essence.",
  },
];

const ServiceSlider = () => {
  return (
    <Swiper
      breakpoints={{
        320: {
          slidesPerView: 1,
          spaceBetween: 15,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 15,
          slidesPerGroup: 2,
        },
      }}
      pagination={{
        clickable: true,
      }}
      modules={[Pagination]}
      slidesPerGroup={1}
      className="xl:h-[640px] h-[550px] mb-2"
      style={{
        "--swiper-pagination-color": "#FFBA08",
        "--swiper-pagination-bullet-inactive-color": "#999999",
        "--swiper-pagination-bullet-inactive-opacity": "0.3",
        "--swiper-pagination-bullet-size": "15px",
        "--swiper-pagination-bullet-horizontal-gap": "6px",
        "--swiper-pagination-bottom": "50px",
        "--swiper-pagination-top": "auto",
      }}
    >
      {serviceData.map((item, i) => (
        <SwiperSlide key={i}>
          <div className="bg-matte h-max rounded-3xl border border-[#F13024] px-6 py-5 flex sm:flex-col flex-col sm:gap-x-0 group cursor-pointer transition-all duration-300">
            {/* icon */}
            <div className="text-4xl text-accent mb-4">
              <item.Icon aria-hidden />
            </div>

            {/* title & description */}
            <div className="mb-8">
              <div className="mb-2 text-sm xl:text-lg">{item.title}</div>
              <p className="w-full leading-normal text-sm xl:text-lg">{item.description}</p>
            </div>

            {/* arrow */}
            <div className="text-3xl">
              <Link
                href="/contact"
              >
                <RxArrowTopRight
                  className="group-hover:rotate-45 group-hover:text-accent transition-all duration-300"
                  aria-hidden
                />
              </Link>   
            <BackgroundBeams className="hidden xl:block" />
            </div>
           
          </div>
        </SwiperSlide>
      ))}
    </Swiper>
  );
};

export default ServiceSlider;