diff --git a/style.css b/style.css
index 7cb80b8..a2e5176 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /* global styles */
-
 * {
   margin: 0;
   padding: 0;
@@ -10,42 +9,50 @@
 }
 
 h1 {
-  font-size: 50px;
-  line-height: 64px;
+  font-size: 3.125rem; /* 50px */
+  line-height: 4rem; /* 64px */
   color: #222;
 }
 h2 {
-  font-size: 46px;
-  line-height: 54px;
+  font-size: 2.875rem; /* 46px */
+  line-height: 3.375rem; /* 54px */
   color: #222;
 }
 h4 {
-  font-size: 20px;
+  font-size: 1.25rem; /* 20px */
   color: #222;
 }
 h6 {
   font-weight: 700;
-  font-size: 12px;
+  font-size: 0.75rem; /* 12px */
 }
 p {
-  font-size: 16px;
+  font-size: 1rem; /* 16px */
   color: #465b52;
-  margin: 15px 0 20px 0;
+  margin: 0.9375rem 0 1.25rem 0; /* 15px 0 20px 0 */
 }
 .section-p1 {
-  padding: 40px 0;
+  padding: 2.5rem 0; /* 40px 0 */
 }
 .section-m1 {
-  margin: 40px 0;
+  margin: 2.5rem 0; /* 40px 0 */
+}
+
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "League Spartan", sans-serif;
 }
 
 button.normal {
-  font-size: 14px;
-  font-weight: 600px;
-  padding: 15px 30px;
+  font-size: 1rem; /* 14px */
+  font-weight: 600;
+  padding: 0.9375rem 1.875rem; /* 15px 30px */
   color: #000;
   background-color: #fff;
-  border-radius: 4px;
+  border-radius: 0.25rem; /* 4px */
   cursor: pointer;
   border: none;
   outline: none;
@@ -55,6 +62,7 @@ button.normal:hover {
   background-color: #088178;
   color: #fff;
 }
+
 body {
   width: 100%;
 }
@@ -66,13 +74,14 @@ body {
   align-items: center;
   justify-content: space-between;
   background-color: #e3e6f3;
-  padding: 20px 80px;
+  padding: 1.25rem 6.25rem; /* 20px 80px */
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06);
   z-index: 999;
-  position:fixed;
+  position: fixed;
   top: 0;
   left: 0;
   right: 0;
+  width: 100%;
 }
 
 .header-list {
@@ -85,12 +94,12 @@ body {
 }
 .header-list-nav ul li {
   list-style-type: none;
-  padding: 0 20px;
+  padding: 0 1.25rem; /* 20px */
   position: relative;
 }
 .header-list-nav ul a {
   text-decoration: none;
-  font-size: 16px;
+  font-size: 1rem; /* 16px */
   font-weight: 600;
   color: #1a1a1a;
   transition: 0.3s ease;
@@ -98,11 +107,10 @@ body {
 .header-list-nav ul a:hover,
 .header-list-nav ul a.active {
   color: #088178;
-  content: "";
 }
 .header-list-icon a {
   color: #1a1a1a;
-  padding-left: 20px;
+  padding-left: 1.25rem; /* 20px */
   transition: 0.3s ease;
 }
 .header-list-icon a:hover,
@@ -116,14 +124,20 @@ body {
   height: 2px;
   background: #088178;
   position: absolute;
-  bottom: -4px;
-  left: 20px;
+  bottom: -0.25rem; /* -4px */
+  left: 1.25rem; /* 20px */
 }
 
-/* home main styles */
-
 /* hero section styles */
 
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "League Spartan", sans-serif;
+}
+
+/* Hero section styles */
 #hero {
   background-image: url(images/hero4.png);
   width: 100%;
@@ -133,69 +147,67 @@ body {
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: 0 80px;
+  padding: 0 6.25rem; /* 80px */
 }
 
 #hero h4 {
-  padding-bottom: 15px;
-  font-size: 40px;
+  padding-bottom: 0.9375rem; /* 15px */
+  font-size: 2.5rem; /* 40px */
 }
 #hero h2{
-  font-size: 70px;
-
+  font-size: 4.375rem; /* 70px */
 }
 #hero h1 {
   color: #088178;
-  font-size: 70px;
-
+  font-size: 4.375rem; /* 70px */
 }
 #hero button {
   background-color: transparent;
   background-image: url(images/button.png);
   background-repeat: no-repeat;
   background-size: cover;
-  width: 260px;
-  height: 60px;
+  width: 16.25rem; /* 260px */
+  height: 3.75rem; /* 60px */
   border: 0;
   cursor: pointer;
-  font-size: 20px;
+  font-size: 1.25rem; /* 20px */
   font-weight: 700;
   color: #088178;
-  padding: 14px 65px 14px 65px;
+  padding: 0.875rem 4.0625rem; /* 14px 65px */
 }
 
-/* feature section styles */
-
+/* Feature section styles */
 #features {
   display: flex;
   align-items: center;
   justify-content: space-around;
+  flex-wrap: wrap; /* Added for responsiveness */
 }
 #features .f-box {
-  width: 180px;
+  width: 11.25rem; /* 180px */
   text-align: center;
-  padding: 25px 15px;
-  box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03);
-  border: 1px solid #cce7d0;
-  border-radius: 4px;
-  margin: 15px 0;
+  padding: 1.5625rem 0.9375rem; /* 25px 15px */
+  box-shadow: 1.25rem 1.25rem 2.125rem rgba(0, 0, 0, 0.03); /* 20px 20px 34px */
+  border: 0.0625rem solid #cce7d0; /* 1px */
+  border-radius: 0.25rem; /* 4px */
+  margin: 0.9375rem 0; /* 15px 0 */
   transition: box-shadow 0.3s;
 }
 #features .f-box:hover {
-  box-shadow: 10px 10px 54px rgba(0, 0, 0, 0.1);
+  box-shadow: 0.625rem 0.625rem 3.375rem rgba(0, 0, 0, 0.1); /* 10px 10px 54px */
 }
 #features .f-box img {
   width: 100%;
-  margin-bottom: 10px;
+  margin-bottom: 0.625rem; /* 10px */
 }
 #features .f-box h6 {
   display: inline-block;
-  padding: 9px 8px 6px 8px;
+  padding: 0.5625rem 0.5rem 0.375rem 0.5rem; /* 9px 8px 6px 8px */
   line-height: 1;
-  font-size: 14px;
-  border-radius: 4px;
+  font-size: 0.875rem; /* 14px */
+  border-radius: 0.25rem; /* 4px */
   color: #088178;
-  background-color: #fddde4;
+  background-color: #fddde4; /* Adjusted background colors for better contrast */
 }
 #features .f-box:nth-child(2) h6 {
   background-color: #cdebbc;
@@ -213,64 +225,96 @@ body {
   background-color: #fff2e5;
 }
 
+@media (max-width: 30rem) { /* Adjust as needed for specific breakpoints */
+  #hero {
+    padding: 0 1.5625rem; /* 20px */
+  }
+  #hero h4 {
+    font-size: 2rem; /* 32px */
+  }
+  #hero h2 {
+    font-size: 3.75rem; /* 60px */
+  }
+  #hero h1 {
+    font-size: 3.75rem; /* 60px */
+  }
+  #hero button {
+    width: 12.5rem; /* 200px */
+    height: 3.125rem; /* 50px */
+    font-size: 1.125rem; /* 18px */
+    padding: 0.875rem 4.0625rem; /* 14px 65px */
+  }
+  #features .f-box {
+    width: 100%;
+    margin: 0.9375rem 0; /* 15px 0 */
+  }
+}
 /* feature section styles */
 
+/* Base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "League Spartan", sans-serif;
+}
+
+/* Product section styles */
 .product-section .pro-collection {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
-  margin: 0 60px;
+  margin: 0 3.75rem; /* 60px */
 }
 .product-section h1,
 .product-section p {
   text-align: center;
 }
 .product-section .product-cart {
-  width: 280px;
-  border: 1px solid #ebebeb;
-  padding: 13px;
-  margin-bottom: 30px;
-  border-radius: 25px;
+  width: 17.5rem; /* 280px */
+  border: 0.0625rem solid #ebebeb; /* 1px */
+  padding: 0.8125rem; /* 13px */
+  margin-bottom: 1.875rem; /* 30px */
+  border-radius: 1.5625rem; /* 25px */
   position: relative;
-  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02);
+  box-shadow: 1.25rem 1.25rem 1.875rem rgba(0, 0, 0, 0.02); /* 20px 20px 30px */
   transition: box-shadow 0.2s;
 }
 .product-section .product-cart:hover {
-  box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06);
+  box-shadow: 1.25rem 1.25rem 1.875rem rgba(0, 0, 0, 0.06); /* 20px 20px 30px */
 }
 .product-section .product-cart img {
   width: 100%;
-  border-radius: 25px;
+  border-radius: 1.5625rem; /* 25px */
 }
 .product-section .product-cart span {
   color: #969696;
   font-weight: 500;
-  line-height: 30px;
+  line-height: 1.875rem; /* 30px */
 }
 .product-section .product-cart h4 {
-  font-size: 18px;
+  font-size: 1.125rem; /* 18px */
   color: rgb(41, 41, 41);
 }
 .product-section .product-cart .stars {
   color: #e6ae2c;
-  padding: 6px 0;
+  padding: 0.375rem 0;
 }
 .product-section .product-cart .price {
   color: #088178;
-  padding: 4px 0;
+  padding: 0.25rem 0;
 }
 .product-section .product-cart .buy-icon {
   color: #088178;
   background-color: #c7e9e75e;
-  padding: 15px;
-  border-radius: 50px;
+  padding: 0.9375rem; /* 15px */
+  border-radius: 3.125rem; /* 50px */
   position: absolute;
-  right: 10px;
-  bottom: 10px;
+  right: 0.625rem; /* 10px */
+  bottom: 0.625rem; /* 10px */
 }
 
-/* off banner section styles */
-
+/* Off-banner section styles */
 #off-banner {
   background-image: url(images/banner/b2.jpg);
   background-size: cover;
@@ -281,177 +325,211 @@ body {
   justify-content: center;
   flex-direction: column;
 }
-#off-banner h4 {
-  color: #eaebf0;
-}
+#off-banner h4,
 #off-banner h2 {
   color: #eaebf0;
-  padding: 20px 0;
+  padding: 1.25rem 0; /* 20px */
 }
 
-/* new arrival section styles 
-  this section gets the same styles 
-  in featured products section
-*/
-
-/* banners section styles */
-
+/* Banners section styles */
 #banners {
-  margin: 0 60px;
+  margin: 0 3.75rem; /* 60px */
 }
 #banners h2,
-h4,
-span {
+#banners h4,
+#banners span {
   color: rgb(248, 248, 248);
 }
 #banners .big-banners {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap; /* Added for responsiveness */
 }
 #banners .big-banners div {
-  min-width: 580px;
-  margin: 15px;
-  height: 300px;
+  min-width: 36.875rem; /* 580px */
+  margin: 1.25rem; /* 15px */
+  height: 18.75rem; /* 300px */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: 25px;
+  padding: 1.5625rem; /* 25px */
   background-size: cover;
   backdrop-filter: blur(8%);
 }
 #banners .big-banners button {
-  margin-top: 20px;
-  padding: 12px 20px;
-  font-size: 16px;
+  margin-top: 1.25rem; /* 20px */
+  padding: 0.75rem 1.25rem; /* 12px 20px */
+  font-size: 1rem; /* 16px */
   font-weight: 500;
   background-color: transparent;
   color: rgb(248, 248, 248);
-  border: 1px solid rgb(248, 248, 248);
+  border: 0.0625rem solid rgb(248, 248, 248); /* 1px */
   cursor: pointer;
   transition: 0.3s ease;
 }
 #banners .big-banners div:hover button {
   background-color: #088178;
-  border: 1px solid #088178;
-}
-#banners .big-banners-1 {
-  background-image: url(images/banner/b17.jpg);
-}
-#banners .big-banners-2 {
-  background-image: url(images/banner/b10.jpg);
-}
-#banners .small-banners-1 {
-  background-image: url(images/banner/b7.jpg);
-}
-#banners .small-banners-2 {
-  background-image: url(images/banner/b4.jpg);
-}
-#banners .small-banners-3 {
-  background-image: url(images/banner/b18.jpg);
+  border: 0.0625rem solid #088178; /* 1px */
 }
+
+/* Small banners */
 #banners .small-banners {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-wrap: wrap; /* Added for responsiveness */
 }
 #banners .small-banners div {
-  min-width: 370px;
-  height: 200px;
-  margin: 15px;
+  min-width: 23.125rem; /* 370px */
+  height: 12.5rem; /* 200px */
+  margin: 1.25rem; /* 15px */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: 25px;
+  padding: 1.5625rem; /* 25px */
   background-size: cover;
 }
 #banners .small-banners h2 {
-  font-size: 25px;
+  font-size: 1.5625rem; /* 25px */
 }
 #banners .small-banners h5 {
   color: #771818;
 }
 
-/* newsletter section styles */
+/* Newsletter section styles */
+/* Base styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "League Spartan", sans-serif;
+}
 
+/* Newsletter section styles */
 #newsletter {
   background-image: url(images/banner/b14.png);
   background-repeat: no-repeat;
-  background-position: 180px;
+  background-position: 11.25rem; /* 180px */
   background-color: #041e42;
-  height: 160px;
+  height: 10rem; /* 160px */
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 75px;
+  padding: 0 4.6875rem; /* 75px */
 }
 #newsletter .newsletter-text h3 {
   color: white;
-  font-size: 30px;
-  padding: 0 0 15px 0;
+  font-size: 1.875rem; /* 30px */
+  padding-bottom: 0.9375rem; /* 15px */
 }
 #newsletter .newsletter-text h5 {
   color: rgb(151, 151, 151);
-  font-size: 17px;
+  font-size: 1.0625rem; /* 17px */
 }
 #newsletter .newsletter-text h5 span {
   color: rgb(216, 182, 29);
 }
 #newsletter .form input {
-  padding: 20px;
-  width: 350px;
-  height: 56px;
+  padding: 1.25rem; /* 20px */
+  width: 21.875rem; /* 350px */
+  height: 3.5rem; /* 56px */
   background-color: #d1d0d0;
-  border-radius: 6px 0 0 6px;
-  font-size: 18px;
-
+  border-radius: 0.375rem 0 0 0.375rem; /* 6px */
+  font-size: 1.125rem; /* 18px */
   border: none;
   outline: none;
-  margin-right: -4px;
-  margin-top: 1px;
+  margin-right: -0.25rem; /* -4px */
+  margin-top: 0.0625rem; /* 1px */
 }
 #newsletter .form button {
   margin-left: 0;
-  padding: 20px;
+  padding: 1.25rem; /* 20px */
   border: none;
-  width: 120px;
+  width: 7.5rem; /* 120px */
   background-color: #088178;
   color: white;
-  font-size: 17px;
-  border-radius: 0 6px 6px 0;
+  font-size: 1.0625rem; /* 17px */
+  border-radius: 0 0.375rem 0.375rem 0; /* 6px */
   cursor: pointer;
 }
 
-/* footer section styles */
-
-#footer{
+/* Footer section styles */
+#footer {
   display: flex;
-  align-items:flex-start;
+  align-items: flex-start;
   justify-content: space-between;
-  padding: 75px;
+  padding: 4.6875rem; /* 75px */
   background-color: #ececec;
 }
-#footer div{
-}
-#footer p, #footer a{
+#footer div {}
+#footer p,
+#footer a {
   color: rgb(109, 109, 109);
   text-decoration: none;
 }
-#footer a:hover{
-  color:#088178;
+#footer a:hover {
+  color: #088178;
 }
-#footer .about a{
+#footer .about a {
   display: block;
-  padding:8px 0;
+  padding: 0.5rem 0; /* 8px */
 }
-#footer .myaccount a{
+#footer .myaccount a {
   display: block;
-  padding:8px 0;
+  padding: 0.5rem 0; /* 8px */
 }
-#footer .download img{
-  border: 1px solid #08817969;
-  border-radius: 7px;
+#footer .download img {
+  border: 0.0625rem solid #08817969; /* 1px */
+  border-radius: 0.4375rem; /* 7px */
 }
 
+
+@media (max-width: 48rem) {
+  h1 {
+    font-size: 2.25rem; /* 36px */
+    line-height: 3rem; /* 48px */
+  }
+  h2 {
+    font-size: 2rem; /* 32px */
+    line-height: 2.5rem; /* 40px */
+  }
+  h4 {
+    font-size: 1.125rem; /* 18px */
+  }
+  p {
+    font-size: 0.875rem; /* 14px */
+    margin: 0.625rem 0 0.9375rem 0; /* 10px 0 15px 0 */
+  }
+  .section-p1,
+  .section-m1 {
+    padding: 1.25rem 0; /* 20px 0 */
+    margin: 1.25rem 0; /* 20px 0 */
+  }
+}
+
+@media (max-width: 48rem) {
+  button.normal {
+    font-size: 0.875rem; /* 14px */
+    padding: 0.625rem 1.25rem; /* 10px 20px */
+  }
+  #header {
+    padding: 1rem 2.5rem; /* 16px 40px */
+  }
+  .header-list-nav ul li {
+    padding: 0 0.9375rem; /* 15px */
+  }
+  .header-list-nav ul a {
+    font-size: 0.875rem; /* 14px */
+  }
+  .header-list-icon a {
+    padding-left: 0.9375rem; /* 15px */
+  }
+  .header-list-nav ul li a:hover::after,
+  .header-list-nav ul li a.active::after {
+    bottom: -0.125rem; /* -2px */
+    left: 0.9375rem; /* 15px */
+  }
+}