From a199d8ca64922d7dbc28cac9c85b53fc016bc371 Mon Sep 17 00:00:00 2001
From: faatima_abidi <faatima.abidi24@gmail.com>
Date: Sat, 16 Nov 2024 03:39:58 -0500
Subject: [PATCH 1/2] fixed issue by modifying css of wrapper and using h3 for
 subtitle

Signed-off-by: faatima_abidi <faatima.abidi24@gmail.com>
---
 .../Careers-Programs-grid/ProgramGrid.style.js       | 12 ++++++++++--
 src/sections/Careers/Careers-Programs-grid/index.js  |  3 ++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
index f520ef66df3c..ae66f6734e08 100644
--- a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
+++ b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
@@ -1,7 +1,15 @@
 import styled from "styled-components";
 export const ProgramsPageWrapper = styled.div`
-    
-    margin-top: -2rem;
+
+    h3 {
+        color: ${(props) => props.theme.whiteSixToGreen3C494F};
+        margin: 0;
+        padding: 0;
+        font-weight: 500;
+        text-align: center;
+        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
     h1{
         color: ${props => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
diff --git a/src/sections/Careers/Careers-Programs-grid/index.js b/src/sections/Careers/Careers-Programs-grid/index.js
index b772affc749b..df7283cbd932 100644
--- a/src/sections/Careers/Careers-Programs-grid/index.js
+++ b/src/sections/Careers/Careers-Programs-grid/index.js
@@ -57,7 +57,8 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
 
   return (
     <ProgramsPageWrapper>
-      <PageHeader title="Open Source Internship Programs" subtitle="Build Your Career at Layer5" path={path} />
+      <PageHeader className="title" title="Open Source Internship Programs" path={path} />
+      <h3>Build Your Career at Layer5</h3>
       <div className={sub_section ? "sub-header_wrapper" : "programs-page-wrapper"}>
         <Container>
           <div className="program-grid-wrapper">

From 860d443b057a479a6f7c5702d0f358633ab3d376 Mon Sep 17 00:00:00 2001
From: faatima_abidi <faatima.abidi24@gmail.com>
Date: Wed, 18 Dec 2024 23:33:44 -0500
Subject: [PATCH 2/2] Fixed the issue by adding the h3 css to the pageHeader
 component and fixed the header margin issue on the open source internship
 programs page.

Signed-off-by: faatima_abidi <faatima.abidi24@gmail.com>
---
 src/reusecore/PageHeader/pageHeader.style.js          |  9 +++++++++
 .../Careers-Programs-grid/ProgramGrid.style.js        | 11 +----------
 src/sections/Careers/Careers-Programs-grid/index.js   |  3 +--
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/reusecore/PageHeader/pageHeader.style.js b/src/reusecore/PageHeader/pageHeader.style.js
index afa8d7f5827d..b3d7c1666b54 100644
--- a/src/reusecore/PageHeader/pageHeader.style.js
+++ b/src/reusecore/PageHeader/pageHeader.style.js
@@ -24,6 +24,15 @@ const PageHeaderWrapper = styled.div`
 
                 }
             }
+            h3 {
+                color: ${(props) => props.theme.whiteSixToGreen3C494F};
+                margin-top: 2rem;
+                padding: 0;
+                font-weight: 500;
+                text-align: center;
+                transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+            }
+
         }
         
         .feature-image{
diff --git a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
index ae66f6734e08..a1eb588640af 100644
--- a/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
+++ b/src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js
@@ -1,15 +1,6 @@
 import styled from "styled-components";
 export const ProgramsPageWrapper = styled.div`
-
-    h3 {
-        color: ${(props) => props.theme.whiteSixToGreen3C494F};
-        margin: 0;
-        padding: 0;
-        font-weight: 500;
-        text-align: center;
-        transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-    }
-
+    
     h1{
         color: ${props => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
diff --git a/src/sections/Careers/Careers-Programs-grid/index.js b/src/sections/Careers/Careers-Programs-grid/index.js
index df7283cbd932..b772affc749b 100644
--- a/src/sections/Careers/Careers-Programs-grid/index.js
+++ b/src/sections/Careers/Careers-Programs-grid/index.js
@@ -57,8 +57,7 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
 
   return (
     <ProgramsPageWrapper>
-      <PageHeader className="title" title="Open Source Internship Programs" path={path} />
-      <h3>Build Your Career at Layer5</h3>
+      <PageHeader title="Open Source Internship Programs" subtitle="Build Your Career at Layer5" path={path} />
       <div className={sub_section ? "sub-header_wrapper" : "programs-page-wrapper"}>
         <Container>
           <div className="program-grid-wrapper">