adjust the spacing between the paginaitions dots and cards, also adjust the spacing between cards and arrows, also ajust the ui since in laptop i can see 4 cards at a time, but in phone only 1, i want 3 in phone  as well. make the necessary changes and modifications and enhancements "// src/components/sections/certifications.js

import React, { useEffect } from 'react';
import styled, { css, keyframes } from 'styled-components';
import { srConfig } from '@config';
import sr from '@utils/sr';
import { usePrefersReducedMotion } from '@hooks';

// Import Swiper React components
import { Swiper, SwiperSlide } from 'swiper/react';

// Import Swiper modules
import {
  Navigation,
  Pagination,
  A11y,
  Autoplay,
  EffectCoverflow,
  Mousewheel,
} from 'swiper/modules';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel';

// Optional: Define FadeIn Animation for future use
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// Dummy Certification Data (10 Certifications)
const certifications = [
  {
    id: 1,
    name: 'Certified React Developer',
    issuer: 'React Training',
    image: 'https://via.placeholder.com/300x200',
    date: 'June 2023',
    description:
      'Completed advanced React development training covering hooks, state management, and performance optimization.',
    url: 'https://example.com/certificates/react-developer',
  },
  {
    id: 2,
    name: 'Full Stack Web Development',
    issuer: 'Udemy',
    image: 'https://via.placeholder.com/300x200',
    date: 'March 2023',
    description:
      'Comprehensive course on full stack development including Node.js, Express, MongoDB, and React.',
    url: 'https://example.com/certificates/full-stack-web-development',
  },
  {
    id: 3,
    name: 'AWS Certified Solutions Architect',
    issuer: 'Amazon Web Services',
    image: 'https://via.placeholder.com/300x200',
    date: 'January 2023',
    description:
      'Validated expertise in designing and deploying scalable systems on AWS.',
    url: 'https://example.com/certificates/aws-certified-solutions-architect',
  },
  {
    id: 4,
    name: 'Google Analytics IQ',
    issuer: 'Google',
    image: 'https://via.placeholder.com/300x200',
    date: 'December 2022',
    description:
      'Certified in using Google Analytics for data analysis and decision-making.',
    url: 'https://example.com/certificates/google-analytics-iq',
  },
  {
    id: 5,
    name: 'Certified Scrum Master',
    issuer: 'Scrum Alliance',
    image: 'https://via.placeholder.com/300x200',
    date: 'November 2022',
    description:
      'Certified to lead Agile teams using Scrum framework effectively.',
    url: 'https://example.com/certificates/certified-scrum-master',
  },
  {
    id: 6,
    name: 'Data Science Professional',
    issuer: 'Coursera',
    image: 'https://via.placeholder.com/300x200',
    date: 'October 2022',
    description:
      'Completed a professional program in data science covering Python, machine learning, and statistical analysis.',
    url: 'https://example.com/certificates/data-science-professional',
  },
  {
    id: 7,
    name: 'Certified Kubernetes Administrator',
    issuer: 'Cloud Native Computing Foundation',
    image: 'https://via.placeholder.com/300x200',
    date: 'September 2022',
    description:
      'Demonstrated proficiency in Kubernetes cluster administration and management.',
    url: 'https://example.com/certificates/certified-kubernetes-administrator',
  },
  {
    id: 8,
    name: 'Professional Data Engineer',
    issuer: 'Google Cloud',
    image: 'https://via.placeholder.com/300x200',
    date: 'August 2022',
    description:
      'Certified to design, build, operationalize, secure, and monitor data processing systems.',
    url: 'https://example.com/certificates/professional-data-engineer',
  },
  {
    id: 9,
    name: 'Certified React Developer',
    issuer: 'React Training',
    image: 'https://via.placeholder.com/300x200',
    date: 'June 2023',
    description:
      'Completed advanced React development training covering hooks, state management, and performance optimization.',
    url: 'https://example.com/certificates/react-developer',
  },
  {
    id: 10,
    name: 'Full Stack Web Development',
    issuer: 'Udemy',
    image: 'https://via.placeholder.com/300x200',
    date: 'March 2023',
    description:
      'Comprehensive course on full stack development including Node.js, Express, MongoDB, and React.',
    url: 'https://example.com/certificates/full-stack-web-development',
  },
];

// Styled Components

const StyledCertificationsSection = styled.section`
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;

  h2.numbered-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 5vw, var(--fz-heading));
    width: 100%;
    margin: 40px 0;

    &::before,
    &::after {
      content: '';
      flex: 1;
      border-bottom: 1px solid SlateGray;
      margin: 0 15px;
    }
  }

  .heading {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    position: relative;
    color: var(--green);

    &::after {
      content: '';
      width: 60px;
      height: 3px;
      background: var(--green);
      display: block;
      margin: 0.5rem auto 0;
      border-radius: 2px;
    }
  }

  /* Swiper Navigation and Pagination Styles */
  .swiper-button-prev,
  .swiper-button-next {
    color: var(--green);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &::after {
      font-size: 20px;
      font-weight: bold;
    }

    &:hover {
      background: var(--navy);
      color: var(--light-green);
    }
  }

  .swiper-pagination-bullet {
    background: var(--green);
    opacity: 0.7;
    width: 12px;
    height: 12px;
  }

  .swiper-pagination-bullet-active {
    background: var(--light-green);
    opacity: 1;
  }
`;

// CertificationCard styled component
const CertificationCard = styled.a`
  display: flex;
  flex-direction: column;
  background: var(--lightest-navy);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  transition: transform 0.3s ease, background 0.3s ease,
    box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100%;
  transform: scale(1);

  opacity: 0;
  transform: translateY(20px);

  ${props =>
    !props.prefersReducedMotion
      ? css`
          animation: ${fadeIn} 0.5s ease-in-out forwards;
        `
      : css`
          opacity: 1;
          transform: translateY(0);
        `}

  &:hover,
  &:focus {
    background: var(--navy);
    transform: scale(1.05) translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--green);
  }

  &:hover .image-container img,
  &:focus .image-container img {
    transform: scale(1.05);
  }

  .image-container {
    width: 100%;
    height: 150px;
    margin-bottom: 1rem;
    overflow: hidden;
    border-radius: var(--border-radius);
    background: #fff;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      transition: transform 0.3s ease;
    }
  }

  .details {
    flex: 1;
    display: flex;
    flex-direction: column;

    .header {
      display: flex;
      flex-direction: column;
      margin-bottom: 0.5rem;

      .title {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 0.3rem;
        color: var(--green);
      }

      .issuer {
        font-size: 0.9rem;
        color: var(--slate);
      }
    }

    .date {
      font-size: 0.85rem;
      color: var(--light-slate);
      margin-bottom: 0.5rem;
    }

    .description {
      font-size: 0.85rem;
      color: var(--light-slate);
      line-height: 1.4;
      /* Limit to 3 lines */
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }
`;

// Swiper styled component without fixed width
const CertificationsCarousel = styled(Swiper)`
  width: 100%;
  padding: 2rem 0;

  .swiper-slide {
    display: flex;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .swiper-slide-active {
    z-index: 2;
  }

  .swiper-slide-next,
  .swiper-slide-prev {
    z-index: 1;
  }

  /* Optional: Add shadow to next and prev slides for depth effect */
  .swiper-slide-next,
  .swiper-slide-prev {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
`;

const CertificationsListComponent = () => {
  const prefersReducedMotion = usePrefersReducedMotion();

  useEffect(() => {
    if (prefersReducedMotion) {
      return;
    }

    sr.reveal('.certification-card', srConfig());
  }, [prefersReducedMotion]);

  return (
    <StyledCertificationsSection id="certifications">
      <h2 className="numbered-heading">About Me</h2>
      <div className="heading">Certifications</div>
      <CertificationsCarousel
        modules={[
          Navigation,
          Pagination,
          A11y,
          Autoplay,
          EffectCoverflow,
          Mousewheel,
        ]}
        effect="coverflow"
        grabCursor={true}
        centeredSlides={true}
        slidesPerView="auto"
        loop={true}
        coverflowEffect={{
          rotate: 50,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        }}
        pagination={{ clickable: true }}
        navigation
        autoplay={{
          delay: 5000,
          disableOnInteraction: false,
        }}
        mousewheel={{
          forceToAxis: true,
        }}
        breakpoints={{
          320: {
            slidesPerView: 1.2,
            spaceBetween: 20,
          },
          480: {
            slidesPerView: 1.5,
            spaceBetween: 30,
          },
          768: {
            slidesPerView: 2.5,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween: 50,
          },
        }}
      >
        {certifications.map(cert => (
          <SwiperSlide key={cert.id}>
            <CertificationCard
              href={cert.url}
              target="_blank"
              rel="noopener noreferrer"
              className="certification-card"
              prefersReducedMotion={prefersReducedMotion}
            >
              <div className="image-container">
                <img src={cert.image} alt={`${cert.name} logo`} />
              </div>
              <div className="details">
                <div className="header">
                  <h3 className="title">{cert.name}</h3>
                  <span className="issuer">{cert.issuer}</span>
                </div>
                <div className="date">{cert.date}</div>
                <div className="description">{cert.description}</div>
              </div>
            </CertificationCard>
          </SwiperSlide>
        ))}
      </CertificationsCarousel>
    </StyledCertificationsSection>
  );
};

export default CertificationsListComponent;"