Enable smooth scrolling on testimonial section

src/components/Testimonials.tsx

@@ -30,9 +30,9 @@ const Testimonials = () => (
         <h4 className="text-gradient font-semibold lg:font-bold text-4xl">We Got Something For Everyone</h4>
         <p>Our organization has something for everyone. Whether you&apos;re a seasoned pro or just starting out, we offer a range of opportunities to help you grow and develop.</p>
       </div>
-      <div className="flex overflow-x-scroll text-white">
+      <div className="flex overflow-x-scroll text-white scroll-smooth" style={{scrollSnapType: 'x mandatory'}}>
         {testimonials.map((t, idx, arr)=>(
-          <div key={`testimonial-${t.name}`} className="flex flex-shrink-0 w-screen px-8  lg:px-32 xl:px-48 relative">
+          <div key={`testimonial-${t.name}`} className="flex flex-shrink-0 w-screen px-8 snap-start lg:px-32 xl:px-48 relative">
             <span id={`testimonial-${idx}`} className="absolute -top-6 right-0 w-full h-0"/>
             <div className="bg-royal rounded-3xl flex-shrink-0 flex flex-col md:flex-row w-fit items-center md:items-center text-center gap-8 p-8 font-medium md:text-lg md:justify-start">
                 <Image className="md:w-2/5 lg:w-1/3" src={t.image} alt={t.name} />