Responsiveness update

frontend/src/pages/Careers.jsx

@@ -342,7 +342,7 @@ export default function Careers({ forwardedRef }) {
               </p>
               <div className="w-full py-48p lg:py-72p">
                 <iframe
-                  className="m-auto w-[300px] h-[220px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[450px] lg:w-[960px] lg:h-[540px]"
+                  className="m-auto w-4/5 h-[250px] sm:w-[500px] sm:h-[350px] md:w-[600px] md:h-[450px] lg:w-[960px] lg:h-[540px]"
                   src={cntCareers.diligent_life.heading_section.link}
                   title="YouTube video player"
                   frameBorder="0"
@@ -357,7 +357,10 @@ export default function Careers({ forwardedRef }) {
             <p className="paragraph w-full lg:w-3/4">
               {cntCareers.diligent_life.CTO.cto_paragraph}
             </p>
-            <button className="btn-secondary min-w-fit" onClick={() => link('/diligentlife')}>
+            <button
+              className="btn-secondary min-w-fit"
+              onClick={() => link('/diligentlife')}
+            >
               {cntCareers.diligent_life.CTO.cto_button}
             </button>
           </div>
@@ -396,7 +399,7 @@ export default function Careers({ forwardedRef }) {
               id="steps-image"
               src={ImgStep1}
               alt="Image not found"
-              className="absolute top-1/4 left-3/5 sm:left-1/2 w-2/5 bg-fixed"
+              className="hidden sm:block absolute top-1/4 left-1/2 w-2/5 bg-fixed"
             />
 
             {cntCareers.selection_process.steps.map((item, index) => (
@@ -404,19 +407,21 @@ export default function Careers({ forwardedRef }) {
                 {/* Section */}
                 <div
                   id={item.id}
-                  className="relative flex flex-row items-start justify-center gap-16 min-h-[54vh] max-h[100vh]"
+                  className="relative flex flex-col sm:flex-row items-start justify-center sm:gap-16 min-h-fit max-h[100vh] mb-28 md:mb-56"
                 >
                   {/* Line */}
                   <hr className="bg-gray-400 w-full absolute -left-1/2 rotate-90" />
+
                   {/* Dot */}
                   <div className="z-10 p-[0.36rem] rounded-full bg-white border-solid border border-dg-primary-900 absolute -left-[0.63%] top-[1%]"></div>
-                  <div className="w-1/2 ml-8">
+
+                  <div className="sm:w-1/2 ml-8">
                     <h3 className="h3-heading">{item.heading}</h3>
                     <p className="text-sm text-dark-gray dark:text-white mt-4">
                       {item.paragraph}
                     </p>
                     {item.cto != null && (
-                      <button className="btn-secondary mt-6">{item.cto}</button>
+                      <button className="btn-secondary mt-6 min-w-fit">{item.cto}</button>
                     )}
                   </div>
                   <div className="w-1/2"></div>
@@ -456,7 +461,9 @@ export default function Careers({ forwardedRef }) {
         <Wrapper bg padding={' py-90p'}>
           <section id="values" className="flex flex-row items-center justify-center">
             <div className="my-8 flex flex-col justify-center items-start w-full max-w-custom m-auto">
-              <h2 className="heading text-dg-secondary">{cntCareers.benefits_heading.heading}</h2>
+              <h2 className="heading text-dg-secondary">
+                {cntCareers.benefits_heading.heading}
+              </h2>
               <div className="grid grid-cols-1 gap-16 w-full mt-8">
                 {cntCareers.benefits_card.map((item, index) => (
                   <CardValues