Styling changes for consistency

src/pages/services.js

@@ -20,10 +20,10 @@ const ServicesPage = () => (
       <PageIntro
         tiltImage
         buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
-        headline="Agile Practitioners"
+        headline="Agile practitioners"
         text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
         image={IntroImage}
-        imgClasses="-mb-12 border-white border-8 rounded-lg"
+        imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
       />
     </Fade>
     <section className="px-4 py-16">
@@ -37,7 +37,7 @@ const ServicesPage = () => (
             />
 
             <SectionIntro
-              h2Classes="text-4xl md:text-5xl saburly-color font-medium"
+              h2Classes="text-4xl md:text-5xl saburly-color font-light"
               classes="my-20 max-w-lg"
               headline="Design services"
               text="We offer consistent quality design that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -90,7 +90,7 @@ const ServicesPage = () => (
           <div className="lg:flex">
             <div>
               <SectionIntro
-                h2Classes="font-medium saburly-color text-4xl md:text-5xl"
+                h2Classes="font-light saburly-color text-4xl md:text-5xl"
                 headline="Software development"
                 text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
               />