diff --git a/src/css/content-development.css b/src/css/content-development.css
index e981bcfb..7d6a44dd 100644
--- a/src/css/content-development.css
+++ b/src/css/content-development.css
@@ -1,76 +1,88 @@
 *{
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: 'DM Sans', sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  font-family: 'DM Sans', sans-serif;
 }
 
 body {
-  height: 100vh;
-  background-color: #FCF6E4;
+height: 100vh;
+background-color: #FCF6E4;
 }
 
 header {
-  position: relative;
-  padding: 0 2rem;
+position: relative;
+padding: 0 2rem;
+z-index: 1;
+background-color: #FCF6E4;
+height: 60px;
 }
 
 .navbar {
-  width: 80%;
-  height: 60px;
-  max-width: 1400px;
-  margin: 0 auto;
-  margin-top: 2%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  cursor: pointer;
+z-index: 1;
+width: 80%;
+height: 60px;
+/* max-width: 1440px; */
+margin: 0 auto;
+margin-top: 2%;
+display: flex;
+align-items: center;
+justify-content: space-between;
+cursor: pointer;
+
 }
 
 li {
-  list-style: none;
+list-style: none;
 }
 
 a {
-  text-decoration: none;
-  color: #000000;
-  font-size: 14px;
+text-decoration: none;
+color: #000000;
+font-size: 14px;
 }
 
 .logo-img {
-  width: 153px;
-  height: 65px;
-  color: #000000;
-  filter: brightness(0%) contrast(100%);
+width: 153px;
+height: 65px;
+color: #000000;
+filter: brightness(0%) contrast(100%);
 }
 
+/* Navbar link hover styles */
 .nav_2_links:hover {
   text-decoration: underline;
 }
 
+/* /This one goes to the web screen/larger screens/ */
 .navbar .links {
   display: flex;
   gap: 2rem;
 }
 
+/* Navbar toggle button styles */
 .navbar .toggle_btn {
   color: #000000;
   font-size: 24px;
-  display: none;
+  display: none; 
 }
 
+/* Action button styles */
 .action_btn {
   background-color: #2D2E52;
   padding: 5px 10px;
+  width: 15%;
   border: none;
   outline: none;
   border-radius: 20px;
   color: #FFFFFF;
   font-size: 12px;
-  line-height: 22px;
+  line-height: 22px; 
   transition: scale 0.2 ease;
+  text-align: center; 
 }
 
+/* /Dropdown menu/ */
 .navbar_dropdown_menu {
   position: absolute;
   right: 2rem;
@@ -78,15 +90,15 @@ a {
   height: 0;
   width: 500px;
   background: #F9F8F4;
+  opacity: 1;
   border-radius: 10px;
   overflow: hidden;
   display: none;
-  /* transition: height 0.2s cubic-biezer(0.175, 0.885, 0.32, 1.275); */
 }
 
 .navbar_dropdown_menu.open {
   height: 100vh;
-  transition: transform .3s ease-in-out, opacity .3s ease-in-out;
+  transition: transform .3s ease-in-out,opacity .3s ease-in-out;
 }
 
 .navbar_dropdown_menu li {
@@ -106,293 +118,340 @@ a {
   margin-left: 10%;
   border: none;
   outline: none;
-  border-radius: 30px;
+  border-radius: 30px;   
 }
 
 .navbar_dropdown_menu .dropdown_action_btn a {
   color: #FFFFFF;
   font-size: 16px;
-  line-height: 22px;
-}
- .home_contact {
-background-color: #000000;
-color: solid rgb(255, 255, 255);
-border: none;
-text-align:left;
-top:786;
-left:251;
-border-radius: 22px;
-cursor: pointer;
-width: 157px;
-height: 41px;
-font:normal normal normal 16px/42px DM Sans;
-letter-spacing: 0px;
-opacity: 1;
-} */
-  h1{
-    margin-top: -10px;
-    font-family: DM Sans,Bold -72px;
-    size: 100px;
-    font-weight: 1300;
-    opacity: 100%;
-  }
-  h2{
-    margin-top: -20px ;
-    font-family: DM Sans,serif;
-    size: 32px;
-    font-weight: 800;
-  }
-.home-container {
-  background-color: #FCF6E4;
-  width: 100%;
+  line-height: 22px; 
 }
 
-.home_content {
-  width: 100%;
-  padding: 0px 0px 10px 30px;
+/* Center the text and arrow vertically */
+.arrow-circle {
+display: flex;
+align-items: center;
 }
-
-.home_content h1 {
-  font-size: 28px;
-  color: black;
-  line-height: 40px;
-  text-align: left;
-  font-weight: 400;
+.content-containerss{
+height: 30vh;
+margin-top: 200px;
+margin-left: 20px;
+width: 360px; 
+display:flex;
+position:absolute;
+/* z-index: 1; */
 }
+.circle1{
+position:space-between;
+background-color:#F2CF73;
+margin-top: 150px;
+left: 3vw;
+width: 120px;
+height: 180px;
+background:transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
+mix-blend-mode:multiply;
+border-radius: 600px;
+opacity:1;
 
-
-
-.home_content h2 {
-  font-size: 20px;
-  color: black;
-  line-height: 24px;
-  text-align: left;
-  font-weight: 100;
-  padding-top: 20px;
-  padding-bottom: 20px;
+}
+.circle2{
+position:absolute;
+background-color:#F2CF73;
+/* margin-left: 630px;*/
+margin-top: 50px; 
+/* top:   504px;*/
+left:  30vw; 
+width: 120px;
+height: 260px;
+background:transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
+mix-blend-mode: multiply;
+border-radius: 600px;
+opacity:1;
+}
+.circle3{
+justify-content: center;
+position:absolute;
+display: flex;
+background-color:transparent#F2CF73;
+margin-top: -50px;  
+left: 60vw;
+width: 120px;
+height: 370px;
+background: transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
+mix-blend-mode: multiply;
+border-radius: 600px;
+opacity: 1;
+}
+.content-container{
+width: unset;  
+padding-top: 35px;
+}
+.content-properties{
+position: absolute;
+z-index: 1;
 }
 
-.home_img_section {
-  height: auto;
-  width: 100%;
-  padding: 30px;
-
+.content_content{
+width: 100%;
+padding: 0px 20px 10px 30px;
+/* background-color: #ffffff; */
 }
 
-#home_img {
-  max-height: 350px;
-  max-width: 300px;
+.content_content h1{
+margin-top: 20px ;
+margin-right: 20%;
+margin-bottom: 20px;
+font-size: clamp(1.5625rem,.8745rem + 2.572vw,2.925rem);
+color: black;
+line-height: 40px;
+text-align: left;
+font-weight: 700;  
 }
 
-/* Style for the anchor */
-.home_contact {
-  text-decoration: none;
-  color:#FCF6E4;
-  /* Change the text color to black */
-  font-size: 10px;
-  /* Adjust font size as needed */
-  display: flex;
-  align-items: center;
-  background: #000000 0% 0% no-repeat padding-box;
-  border-radius: 29px;
-  opacity: 1;
-  margin-top: 70;
+.content_content h2{
+font-size: clamp(1rem,.387rem + .9739vw,1.4rem);
+color: black;
+line-height: 24px;
+text-align: left;
+font-weight: 100;
+padding-bottom: 20px;
+margin-right: 100px;
 }
+.content_contact {
+margin-left: 20px;
+position: absolute;
+text-decoration: none;
+color: #FFFFFF; /* Change the text color to black */
+font-size: 16px; /* Adjust font size as needed */
+display: flex;
+background-color: #000000; /* Circular background color */
+width: 65%;
+padding: 8px; /* Adjust padding as needed */
+border-radius: 30px;
 
-.home_contact img {
-  /* Align the image vertically with the text */
-  width: 10px;
-  /* Adjust arrow size as needed */
-  height: 20px;
-  /* Adjust arrow size as needed */
-  margin-left: 5px;
-  font-weight: 700;
-  /* Add space between text and arrow */
-  background-color: #FCF6E4;
-  border-radius: 50%;
-  /* Make it circular */
-  top: 20px;
-  left: 20px;
-  width: 20px;
-  height: 20px;
 }
 
-/* Center the text and arrow vertically */
-.arrow-circle {
-  display: flex;
-  align-items: center;
+/* Style for the arrow image */
+.content_contact img {
+display: inline-block;
+vertical-align: middle; /* Align the image vertically with the text */
+width: 25px; /* Adjust arrow size as needed */
+height: 20px; /* Adjust arrow size as needed */
+margin-left: 5px; /* Add space between text and arrow */
+background-color: #FFFFFF;
+border-radius: 50%; /* Make it circular */
 }
 
 
+/* /ReSPONSIVE DESIGN/ */
+/* Header responsive designs for tablet */
 @media (max-width:768px) {
-  .navbar {
-    width: 100%;
-    margin-top: 10px;
-  }
-
-  .navbar .links,
-  .navbar .action_btn {
-    display: none;
-  }
-
-  .navbar .toggle_btn {
-    display: block;
-  }
-
-  .navbar_dropdown_menu {
-    display: block;
-    width: unset;
-    left: 40%;
-    top: 300px;
-  }
-
-
-
-  .navbar_dropdown_menu a {
-    align-items: center;
-    font-size: 30px;
-  }
+    /* Navbar adjustments for mobile screens */
+    .navbar {
+        width: 100%;
+        margin-top: 10%;
+    }   
+
+    /* Hide destop navbar elements */
+    .navbar .links,
+    .navbar .action_btn {
+        display: none;
+    }
+
+    /* Show mobile toggle button */
+    .navbar .toggle_btn {
+        display: block;
+    }
+
+    /* Adjust dropdown menu width and position */
+    .navbar_dropdown_menu {
+        display: block;
+        width: 768px;
+        left: 1rem;
+        top: 60px;
+    }
+
+    /* center dropdown menu elements */
+    .navbar_dropdown_menu.open{
+        padding-top: 30%; 
+        padding-left: 30%;
+    }
+
+    .navbar_dropdown_menu a {
+        align-items: center;
+        font-size: 40px;
+    }
 }
 
+/* Additional adjustments for smaller screens(header)(if needed) */
 @media (max-width: 360px) {
-  .navbar_dropdown_menu {
-    left: 1rem;
-    top: 10px;
-    width: 200px;
-  }
+    .navbar_dropdown_menu {      
+        width: 100%;  
+        z-index: 5;           
+    }
 
-  .navbar_dropdown_menu.open {
-    padding-top: 10%;
-    padding-left: 0%;
-  }
+    .navbar_dropdown_menu.open{
+        padding-left: 20%;
+    }
 
-  .logo-img {
-    width: 110px;
-    height: 50px;
-  }
+    .logo-img{
+        width: 110px;
+        height: 50px;
+    }
 
-  /* .navbar_dropdown_menu li */
+    .navbar_dropdown_menu a {
+        font-size: 30px;
+    }
+
+    /* .navbar_dropdown_menu li */
 }
 
-@media only screen and (min-width: 768px) {
-  .home-container {
-    width: 550px;
-    margin: 0 auto;
-    padding-top: 30px;
-    padding-left: 40px;
+@media only screen and (min-width: 768px) { 
+  .content-container{
+    width: unset;
+    margin: 50px;
+    padding-top: 20%; 
+    
   }
 
-  .home_content {
-    padding: 0;
+  .content_content{
+    padding: 1px;
+    width: -100%;
+    justify-content: left;
   }
 
-  .home_content h1 {
+  .content_content h1{
     font-size: 36px;
     line-height: 48px;
   }
 
-  .home_content h2 {
-    /* font-size: 22px; */
-    line-height: 34px;
+  .content_content h2{
+    padding: 20px 200px 20px 0px;
+    line-height: 24px;
   }
 
-  #home_img {
-    max-height: 450px;
-    max-width: 400px;
+  
+  .content_contact {
+    font-size: 16px; /* Adjust font size as needed */
+    display: flex;
+    background-color: #000000; /* Circular background color */
+    width: 210px;
+    padding: 8px; /* Adjust padding as needed */
+  }
+  
+  /* Style for the arrow image */
+  .content_contact img {
+    width: 25px; /* Adjust arrow size as needed */
+    height: 25px; /* Adjust arrow size as needed */
+    margin-left: 5px; /* Add space between text and arrow */
+    background-color: #FFFFFF;
+    border-radius: 50%; /* Make it circular */
+  } 
+  .content-containerss{
+    margin-top: 300px;
+    margin-left: 0px;
+
+    }
+  .circle1{
+    left: 8vw; 
+    width: 200px;
+    height: 300px;
+   
+   }
+   .circle2{
+    left:  36vw; 
+    width: 220px;
+    height: 540px;
+   }
+  .circle3{
+    left: 69vw;
+    width: 220px;
+    height: 662px;
+    
+   }
+   .content-container{
+   width: unset;  
+   padding-top: 35px;
+  }
+  .content-properties{
+    position: absolute;
+    z-index: 1;
   }
-
 }
 
 @media only screen and (min-width: 900px) {
-  .home-container {
-    width: 80%;
-    margin: 0 auto;
-    padding-top: 6%;
-    /* background-color: blueviolet; */
-  }
+.content-container{
+  width: unset;
+  margin: 50px;
+  margin-top: 7% ; 
+  padding-left: 7%;
+  
+  
+}
+.content_content{
+  width: 100%;
+}
 
-  .home_content {
-    width: 50%;
-    float: left;
-    margin-top: 10%;
-  }
+.content_content h1{
+  line-height: 48px;
+  font-weight: 700;
+  font-size: 50px;
+  letter-spacing: 2px;
+}
 
-  .home_content h1 {
-    font-size: 42px;
-    line-height: 50px;
-  }
+.content_content h2{
+  padding-right: 50%;
+  line-height: 30px;
+}
 
-  .home_content h2 {
-    font-size: 24px;
-    line-height: 27px;
-    margin-right: 20%;
-  }
 
-  .home_img_section {
-    padding: 2%;
-    width: 50%;
-    float: right;
-    /* background-color: aqua; */
-  }
+.content_contact {
+  font-size: 16px; /* Adjust font size as needed */
+  display: flex;
+  background-color: #000000; /* Circular background color */
+  width: 210px;
+  padding: 8px; /* Adjust padding as needed */
+}
+
+/* Style for the arrow image */
+.content_contact img {
+  width: 25px; /* Adjust arrow size as needed */
+  height: 25px; /* Adjust arrow size as needed */
+  margin-left: 5px; /* Add space between text and arrow */
+  background-color: #FFFFFF;
+  border-radius: 50%; /* Make it circular */
+} 
+.content-containerss{
+  margin-top: -10%;
+  margin-left: 0px;
 
-  #home_img {
-    max-height: 500px;
-    max-width: 450px;
   }
+.circle1{
+  left: 8vw; 
+  width: 700px;
+  height: 350px;
+  margin-top:380px;
  
-  /*circles*/
-  .containerss{
-   border-radius:600px;
-   top: 0px;
-   left: 0px;
-   width: 1920px;
-   height: 1082px;
-  /* UI Properties */
-  background: #FCF6E4 0% 0% no-repeat padding-box;
-  opacity: 1;
-   }
- .circle1{
-  position:space-between;
-  background-color:#F2CF73;
-  margin-top: -30px;
-  margin-left: 1130px;
-  top:   276px;
-  left:  1369;
-  width: 390px;
-  height: 700px;
-  background:transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
-  mix-blend-mode:multiply;
-  border-radius: 600px;
-  opacity:1;
-
  }
  .circle2{
-  position:space-between;
-  background-color:#F2CF73;
-  margin-left: 630px;
-  margin-top: -520px;
-  top:   504px;
-  left:  830;
-  width: 450px;
-  height: 540px;
-  background:transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
-  mix-blend-mode: multiply;
-  border-radius: 600px;
-  opacity:1;
+  left:  30vw; 
+  width: 350px;
+  height: 650px;
+  margin-top:80px;
  }
 .circle3{
-  justify-content: center;
-  position:absolute;
-  display: flex;
-  background-color:transparent#F2CF73;
-  margin-top: -108px;
-  top:   600px;
-  left:  150px;
-  width: 430px;
-  height: 450px;
-  background: transparent linear-gradient(180deg, #F2CF73 0%, #F2CF7300 100%) 0% 0% no-repeat padding-box;
-  mix-blend-mode: multiply;
-  border-radius: 600px;
- opacity: 1;
+  left: 60vw;
+  width: 350px;
+  height: 700px;
+  /* margin-top:px; */
+  
  }
+ .content-container{
+ width: unset;  
+ padding-top: 35px;
+}
+.content-properties{
+  position: absolute;
+  z-index: 1;
+}
 }
\ No newline at end of file
diff --git a/src/features/pages/content-development-page-hero-section.html b/src/features/pages/content-development-page-hero-section.html
index a219c3f5..54c53dc0 100644
--- a/src/features/pages/content-development-page-hero-section.html
+++ b/src/features/pages/content-development-page-hero-section.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -13,7 +14,7 @@
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Oswald&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../../css/content-development.css">
 
-   <script defer type="module" src="dist\out-tsc\index.js"></script>
+   <script defer type="module" src="/dist/out-tsc/index.js"></script>
 </head>
 
 <body>
@@ -53,28 +54,23 @@
 
       
    </header>
-
-   <div class="home-container">
-      <article class="home_content">
+   <div class="content-container">
+      <div class="content-properties">
+      <article class="content_content">
          <h1>Content development</h1>
          <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor dolorem ipsum quia dolor sit Eos qui ratione voluptatem sequi nesciunt.</h2>
-   
-   
+    </article>
          <!-- button -->
-         <button class="home_contact">Unlock your potential <img
+         <button class="content_contact">Unlock your potential <img
                src="https://res.cloudinary.com/dyl3rncv3/image/upload/v1695972080/elewa-education-website/Shared/toRightArrow_tlcdnk.svg"
                alt="Arrow">
          </button>
-      </article>
-      <div> <div class="background-div"></div></div>
    </div>
-
-<div>
-   <div class="containerss">
-   <div class="circle1"></div>
-   <div class="circle2"></div>
-   <div class="circle3"></div>
+     <div class=" content-containerss">
+         <div class="circle1"></div>
+         <div class="circle2"></div>
+         <div class="circle3"></div>
+     </div>
    </div>
-</div>
 </body>
 </html>
\ No newline at end of file