diff --git a/index.html b/index.html
index 332c57b..f8537e1 100644
--- a/index.html
+++ b/index.html
@@ -32,7 +32,7 @@
   </head>
   <body class="bg-white text-white font-dm">
     <!-- Header Section -->
-    <header id="header" class="z-10">
+    <header id="header" class="z-10 hidden lg:block">
       <nav
         class="py-[15px] px-[80px] flex justify-between items-center font-dm text-[18px] bg-blue"
       >
@@ -126,7 +126,7 @@
     <!-- Section 1: Landing -->
     <section
       id="sec1"
-      class="hero flex w-full justify-center py-24 border-b-2 md:border-b-0"
+      class="hero flex w-full justify-center py-24 border-b-2 lg:border-b-0"
     >
       <div
         class="sec1container flex flex-wrap justify-center flex-col items-center"
@@ -138,7 +138,7 @@
             src="./public/sjij-logo.svg"
             alt="Sheikh Jamal Innovation Grant
         Logo"
-            class="block md:h-[370px] scaleup"
+            class="block h-28 md:h-48 lg:h-[370px] scaleup"
             draggable="false"
             loading="lazy"
           />
@@ -152,7 +152,9 @@
       class="flex justify-center items-center py-10 text-black"
     >
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           SHEIKH JAMAL INNOVATION GRANT 2023 AT A GLANCE
         </div>
@@ -185,7 +187,9 @@
       class="flex flex-col justify-center items-center py-10 text-white"
     >
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           OBJECTIVE
         </div>
@@ -198,7 +202,9 @@
           prosperous Bangladesh.
         </div>
       </div>
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           ROADMAP
         </div>
@@ -229,7 +235,9 @@
       class="flex justify-center items-center py-10 text-black"
     >
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           WHO CAN APPLY?
         </div>
@@ -250,7 +258,9 @@
       class="flex justify-center items-center py-10 text-black"
     >
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           Selection Process and Steps
         </div>
@@ -278,7 +288,9 @@
     <!-- Section 7: TERMS AND CONDITIONS -->
     <section id="sec7" class="flex justify-center items-center py-10">
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           TERMS AND CONDITIONS
         </div>
@@ -357,7 +369,9 @@
       class="flex justify-center items-center py-10 text-black"
     >
       <!-- Container for content -->
-      <div class="content flex flex-col gap-5 justify-between mx-72 py-10">
+      <div
+        class="content flex flex-col gap-5 justify-between mx-4 md:mx-8 lg:mx-72 py-10"
+      >
         <div class="text-left text-[40px] font-normal font-square uppercase">
           PITCH DECK GUIDELINE
         </div>
@@ -432,10 +446,10 @@
     </section>
 
     <!-- Section 9 -->
-    <section id="sec9" class="flex justify-center items-center md:h-auto py-16">
+    <section id="sec9" class="flex justify-center items-center lg:h-auto py-16">
       <!-- Container for content with a flex layout -->
       <div
-        class="flex flex-col justify-center items-center w-full px-4 md:w-[836px]"
+        class="flex flex-col justify-center items-center w-full px-4 lg:w-[836px]"
       >
         <div
           class="font-bahn text-base mb-5 max-w-[602px] text-center px-[72px]"
@@ -448,7 +462,7 @@
           id="apply"
           href="./apply"
           target="_blank"
-          class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl md:text-2xl font-bold font-bahn uppercase"
+          class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl lg:text-2xl font-bold font-bahn uppercase"
         >
           Apply Now
         </a>
@@ -459,21 +473,21 @@
     <section class="bg-blue">
       <footer
         id="footer"
-        class="bg-green bg-opacity-30 flex flex-col justify-center items-center py-3 md:py-5"
+        class="bg-green bg-opacity-30 flex flex-col justify-center items-center py-3 lg:py-5"
       >
         <div
-          class="text-[18px] md:text-[40px] font-square font-bold pb-3 md:pb-5 uppercase tracking-[4px]"
+          class="text-[18px] md:text-2xl lg:text-[40px] font-square font-bold pb-3 lg:pb-5 uppercase tracking-[4px]"
         >
           Sheikh Jamal Innovation Grant
         </div>
-        <div class="flex gap-4 pb-3 md:pb-5">
+        <div class="flex gap-4 pb-3 lg:pb-5">
           <a href="https://www.facebook.com/drmcitclub" target="_blank">
             <img
               src="./public/fb_icon.svg"
               alt="Facebook Icon"
               draggable="false"
               loading="lazy"
-              class="h-[26px] md:h-auto"
+              class="h-[26px] lg:h-auto"
             />
           </a>
           <a href="https://www.instagram.com/drmcitclub" target="_blank">
@@ -482,7 +496,7 @@
               alt="Instagram Icon"
               draggable="false"
               loading="lazy"
-              class="h-[26px] md:h-auto"
+              class="h-[26px] lg:h-auto"
             />
           </a>
           <a
@@ -494,11 +508,11 @@
               alt="GitHub Icon"
               draggable="false"
               loading="lazy"
-              class="h-[26px] md:h-auto"
+              class="h-[26px] lg:h-auto"
             />
           </a>
         </div>
-        <div id="copyright" class="text-[7px] md:text-[10px]">
+        <div id="copyright" class="text-[7px] lg:text-[10px]">
           © Copyright
           <span class="font-bold uppercase">Sheikh Jamal Innovation Grant</span>
           . All Rights Reserved
@@ -511,7 +525,7 @@
         id="apply"
         href="./apply"
         target="_blank"
-        class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl md:text-2xl font-bold font-bahn uppercase"
+        class="px-3 py-2 bg-emerald-900 bg-opacity-100 shadow-inner border border-white backdrop-blur-[10px] text-white text-xl lg:text-2xl font-bold font-bahn uppercase"
       >
         Apply Now
       </a>
diff --git a/output.css b/output.css
index 014966c..a4db241 100644
--- a/output.css
+++ b/output.css
@@ -610,9 +610,9 @@ video {
   z-index: 10;
 }
 
-.mx-72 {
-  margin-left: 18rem;
-  margin-right: 18rem;
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
 }
 
 .mx-\[82px\] {
@@ -653,6 +653,10 @@ video {
   display: none;
 }
 
+.h-28 {
+  height: 7rem;
+}
+
 .h-\[26px\] {
   height: 26px;
 }
@@ -1283,6 +1287,21 @@ body {
   background-size: 500px, cover;
 }
 
+@media screen and (max-width: 1024px) {
+  #sec1 {
+    background-color: var(--blue);
+    background-image: none;
+    background-position: bottom right;
+    background-repeat: no-repeat;
+    background-size: 500px, cover;
+  }
+
+  #sec9 {
+    background-color: var(--blue);
+    background-image: none;
+  }
+}
+
 #copyright {
   color: var(--green);
   opacity: 0.7;
@@ -1600,12 +1619,17 @@ body * {
 }
 
 @media (min-width: 768px) {
-  .md\:h-\[172px\] {
-    height: 172px;
+  .md\:mx-8 {
+    margin-left: 2rem;
+    margin-right: 2rem;
   }
 
-  .md\:h-\[370px\] {
-    height: 370px;
+  .md\:h-48 {
+    height: 12rem;
+  }
+
+  .md\:h-\[172px\] {
+    height: 172px;
   }
 
   .md\:h-\[376px\] {
@@ -1690,10 +1714,6 @@ body * {
     font-size: 32px;
   }
 
-  .md\:text-\[40px\] {
-    font-size: 40px;
-  }
-
   .md\:backdrop-blur-sm {
     --tw-backdrop-blur: blur(4px);
     -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1701,6 +1721,55 @@ body * {
   }
 }
 
+@media (min-width: 1024px) {
+  .lg\:mx-72 {
+    margin-left: 18rem;
+    margin-right: 18rem;
+  }
+
+  .lg\:block {
+    display: block;
+  }
+
+  .lg\:h-\[370px\] {
+    height: 370px;
+  }
+
+  .lg\:h-auto {
+    height: auto;
+  }
+
+  .lg\:w-\[836px\] {
+    width: 836px;
+  }
+
+  .lg\:border-b-0 {
+    border-bottom-width: 0px;
+  }
+
+  .lg\:py-5 {
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .lg\:pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
+  .lg\:text-2xl {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+
+  .lg\:text-\[10px\] {
+    font-size: 10px;
+  }
+
+  .lg\:text-\[40px\] {
+    font-size: 40px;
+  }
+}
+
 .peer:focus ~ .rtl\:peer-focus\:left-auto:where([dir="rtl"], [dir="rtl"] *) {
   left: auto;
 }
diff --git a/style.css b/style.css
index dbd225f..f548348 100644
--- a/style.css
+++ b/style.css
@@ -133,6 +133,21 @@ body {
   background-size: 500px, cover;
 }
 
+@media screen and (max-width: 1024px) {
+  #sec1 {
+    background-color: var(--blue);
+    background-image: none;
+    background-position: bottom right;
+    background-repeat: no-repeat;
+    background-size: 500px, cover;
+  }
+
+  #sec9 {
+    background-color: var(--blue);
+    background-image: none;
+  }
+}
+
 #copyright {
   color: var(--green);
   opacity: 0.7;
