From 3eed69b238e94a60a3b0cedb61de30a3ea78b966 Mon Sep 17 00:00:00 2001
From: Jiya Batra <jiyabatra2907@gmail.com>
Date: Sat, 2 Aug 2025 22:38:06 +0530
Subject: [PATCH] FIXED SHOP PAGE LINKS

---
 index.html | 2293 +++++++++++++++++++++++++++-------------------------
 shop.html  |   10 +-
 2 files changed, 1177 insertions(+), 1126 deletions(-)
diff --git a/index.html b/index.html
index 452df70..6d21264 100644
--- a/index.html
+++ b/index.html
@@ -1,1250 +1,1301 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>STYLÉKA</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+    />
     <style>
-        /* Import modern fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
-
-        /* Reset and base styles */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            line-height: 1.6;
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            min-height: 100vh;
-        }
-
+      /* Import modern fonts */
+      @import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");
+
+      /* Reset and base styles */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Inter", sans-serif;
+        line-height: 1.6;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        min-height: 100vh;
+      }
+
+      .section-p1 {
+        padding: 40px 80px;
+      }
+
+      .section-m1 {
+        margin: 40px 0;
+      }
+
+      /* Enhanced Header */
+      #header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 80px;
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(20px);
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+        position: sticky;
+        top: 0;
+        z-index: 999;
+        transition: all 0.3s ease;
+      }
+
+      .site-title {
+        font-family: "Playfair Display", serif;
+        font-size: 2.5rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        letter-spacing: 2px;
+      }
+
+      #navbar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        list-style: none;
+        gap: 30px;
+      }
+
+      #navbar li a {
+        text-decoration: none;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+        transition: all 0.3s ease;
+        padding: 12px 24px;
+        border-radius: 8px;
+        position: relative;
+        display: block;
+      }
+
+      #navbar li a:hover,
+      #navbar li a.active {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+      }
+
+      #lg-bag a {
+        font-size: 1.2rem;
+        color: #667eea;
+        transition: all 0.3s ease;
+      }
+
+      #lg-bag a:hover {
+        transform: scale(1.2);
+        color: #764ba2;
+      }
+
+      #mobile {
+        display: none;
+      }
+
+      #close {
+        display: none;
+      }
+
+      /* Enhanced Hero Section */
+      #Hero {
+        position: relative;
+        background: linear-gradient(
+            to bottom right,
+            rgba(0, 0, 0, 0.4),
+            rgba(0, 0, 0, 0.3)
+          ),
+          url("https://images.unsplash.com/photo-1718985342149-7178154e0aee?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D")
+            center/cover no-repeat;
+        height: 100vh;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 60px 10%;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+        overflow: hidden;
+      }
+
+      #Hero::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 1;
+      }
+
+      #Hero > * {
+        position: relative;
+        z-index: 2;
+      }
+
+      #Hero h4 {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        color: #f5d442;
+      }
+
+      #Hero h2 {
+        font-size: 2.5rem;
+        margin: 10px 0;
+      }
+
+      #Hero h1 {
+        font-size: 3.5rem;
+        font-weight: bold;
+        margin: 10px 0;
+        color: #ffecb3;
+      }
+
+      #Hero p {
+        font-size: 1.1rem;
+        margin: 20px 0 30px;
+        max-width: 500px;
+        line-height: 1.6;
+        color: #f0f0f0;
+      }
+
+      #Hero button {
+        background-color: #f5d442;
+        color: black;
+        font-weight: bold;
+        border: none;
+        width: 200px;
+        padding: 14px 30px;
+        font-size: 1rem;
+        border-radius: 30px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+      }
+
+      #Hero button:hover {
+        background-color: #fff176;
+        transform: scale(1.05);
+      }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translateY(30px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      /* Enhanced Feature Section */
+      #feature {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 20px;
+        background: white;
+        border-radius: 20px;
+        margin: 40px 80px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+      }
+
+      .fe-box {
+        width: 180px;
+        text-align: center;
+        padding: 25px 15px;
+        border-radius: 15px;
+        transition: all 0.3s ease;
+        background: white;
+      }
+
+      .fe-box:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+      }
+
+      .fe-box img {
+        width: 100%;
+        margin-bottom: 10px;
+        filter: hue-rotate(200deg);
+        transition: all 0.3s ease;
+      }
+
+      .fe-box:hover img {
+        transform: scale(1.1);
+        filter: hue-rotate(0deg);
+      }
+
+      .fe-box h6 {
+        display: inline-block;
+        padding: 9px 8px 6px 8px;
+        line-height: 1;
+        border-radius: 10px;
+        color: #667eea;
+        font-weight: 600;
+        background: rgba(102, 126, 234, 0.1);
+      }
+
+      /* Enhanced Product Sections */
+      #product1 {
+        text-align: center;
+        background: white;
+        border-radius: 20px;
+        margin: 40px 80px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+      }
+
+      #product1 h2 {
+        font-size: 3rem;
+        font-weight: 700;
+        color: #333;
+        margin-bottom: 15px;
+        font-family: "Playfair Display", serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+
+      #product1 p {
+        font-size: 1.2rem;
+        color: #666;
+        margin-bottom: 40px;
+      }
+
+      .pro-container {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 25px;
+        padding-top: 20px;
+      }
+
+      .pro {
+        width: 23%;
+        min-width: 250px;
+        padding: 20px 15px;
+        border: 1px solid rgba(102, 126, 234, 0.2);
+        border-radius: 20px;
+        cursor: pointer;
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        margin: 15px 0;
+        transition: all 0.3s ease;
+        background: white;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .pro::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(
+          135deg,
+          rgba(102, 126, 234, 0.05),
+          rgba(118, 75, 162, 0.05)
+        );
+        transition: all 0.3s ease;
+        z-index: 1;
+      }
+
+      .pro:hover::before {
+        left: 0;
+      }
+
+      .pro:hover {
+        transform: translateY(-10px);
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+      }
+
+      .pro > * {
+        position: relative;
+        z-index: 2;
+      }
+
+      .pro img {
+        width: 100%;
+        border-radius: 15px;
+        transition: all 0.3s ease;
+      }
+
+      .pro:hover img {
+        transform: scale(1.05);
+      }
+
+      .des {
+        text-align: start;
+        padding: 15px 0;
+      }
+
+      .des span {
+        color: #667eea;
+        font-size: 14px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
+
+      .des h5 {
+        padding: 7px 0;
+        color: #333;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .star {
+        color: #ffd700;
+        font-size: 14px;
+        margin: 5px 0;
+      }
+
+      .des h4 {
+        font-size: 18px;
+        font-weight: 700;
+        color: #667eea;
+      }
+
+      /* Enhanced Banner Sections */
+      #banner {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        background: linear-gradient(
+            135deg,
+            rgba(102, 126, 234, 0.9),
+            rgba(118, 75, 162, 0.9)
+          ),
+          url("https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")
+            center/cover;
+        width: 100%;
+        height: 40vh;
+        border-radius: 20px;
+        margin: 40px 80px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+      }
+
+      #banner::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+      }
+
+      #banner > * {
+        position: relative;
+        z-index: 2;
+      }
+
+      #banner h4 {
+        color: #fff;
+        font-size: 1.2rem;
+        font-weight: 400;
+        margin-bottom: 10px;
+      }
+
+      #banner h2 {
+        color: #fff;
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 20px;
+        font-family: "Playfair Display", serif;
+      }
+
+      #banner span {
+        color: #ff6b6b;
+        font-weight: bold;
+      }
+
+      .normal {
+        font-size: 16px;
+        font-weight: 600;
+        padding: 12px 30px;
+        color: #333;
+        background: white;
+        border-radius: 25px;
+        border: none;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+      }
+
+      .normal:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+      }
+
+      /* Enhanced Small Banner Section */
+      #sm-banner {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 30px;
+      }
+
+      .banner-box {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        background: linear-gradient(
+            135deg,
+            rgba(102, 126, 234, 0.9),
+            rgba(118, 75, 162, 0.9)
+          ),
+          url("https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")
+            center/cover;
+        min-width: 48%;
+        height: 50vh;
+        padding: 40px;
+        border-radius: 20px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .banner-box::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.4);
+      }
+
+      .banner-box > * {
+        position: relative;
+        z-index: 2;
+      }
+
+      .banner-box2 {
+        background: linear-gradient(
+            135deg,
+            rgba(255, 107, 107, 0.9),
+            rgba(238, 90, 36, 0.9)
+          ),
+          url("https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80")
+            center/cover;
+      }
+
+      .banner-box h4 {
+        color: #fff;
+        font-size: 1.1rem;
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
+
+      .banner-box h2 {
+        color: #fff;
+        font-size: 2.2rem;
+        font-weight: 700;
+        margin: 15px 0;
+        font-family: "Playfair Display", serif;
+      }
+
+      .banner-box span {
+        color: #fff;
+        font-size: 1rem;
+        margin-bottom: 20px;
+        opacity: 0.9;
+      }
+
+      .white {
+        background: white !important;
+        color: #333 !important;
+      }
+
+      /* Enhanced Banner3 Section */
+      #banner3 {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding: 0 80px;
+        gap: 20px;
+      }
+
+      #banner3 .banner-box {
+        min-width: 30%;
+        height: 30vh;
+        padding: 30px;
+      }
+
+      #banner3 .banner-box3 {
+        background: linear-gradient(
+            135deg,
+            rgba(238, 90, 36, 0.9),
+            rgba(255, 107, 107, 0.9)
+          ),
+          url("https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&auto=format&fit=crop&w=2064&q=80")
+            center/cover;
+      }
+
+      #banner3 h2 {
+        color: white;
+        font-weight: 900;
+        font-size: 1.8rem;
+        font-family: "Playfair Display", serif;
+      }
+
+      #banner3 h3 {
+        color: #ff6b6b;
+        font-weight: 800;
+        font-size: 1.1rem;
+        margin-top: 10px;
+      }
+
+      /* Enhanced Newsletter Section */
+      #newsletter {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        align-items: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 20px;
+        margin: 40px 80px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+      }
+
+      .newstext h4 {
+        font-size: 2rem;
+        font-weight: 700;
+        color: white;
+        font-family: "Playfair Display", serif;
+      }
+
+      .newstext p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: rgba(255, 255, 255, 0.9);
+        margin: 20px 0;
+      }
+
+      .newstext span {
+        color: #ff6b6b;
+        font-weight: 600;
+      }
+
+      .form {
+        display: flex;
+        width: 40%;
+        gap: 15px;
+      }
+
+      .form input {
+        height: 50px;
+        padding: 0 20px;
+        font-size: 16px;
+        width: 100%;
+        border: none;
+        outline: none;
+        border-radius: 25px;
+        background: rgba(255, 255, 255, 0.2);
+        color: white;
+        backdrop-filter: blur(10px);
+      }
+
+      .form input::placeholder {
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .form button {
+        background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+        color: white;
+        border: none;
+        padding: 15px 30px;
+        border-radius: 25px;
+        cursor: pointer;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 20px rgba(255, 107, 107, 0.3);
+      }
+
+      .form button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
+      }
+
+      /* Enhanced Footer - Dark Theme */
+      footer {
+        background: #e6e6fa; /* Changed to lilac color */
+        color: white;
+        padding: 40px 80px;
+        border-radius: 20px;
+        margin: 40px 20px 20px 20px;
+        position: relative;
+        border: none;
+        box-shadow: 0 0 30px rgba(230, 230, 250, 0.6),
+          inset 0 0 30px rgba(230, 230, 250, 0.2);
+      }
+
+      footer::before {
+        content: "";
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        right: -3px;
+        bottom: -3px;
+        background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff);
+        border-radius: 23px;
+        z-index: -1;
+        animation: outerGlow 3s ease-in-out infinite alternate;
+      }
+
+      .footer-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        width: 100%;
+        background-color: white;
+        color: #0066cc;
+        padding: 20px;
+        border-radius: 10px;
+        margin: 10px;
+        position: relative;
+        border: none;
+        box-shadow: 0 0 35px rgba(230, 230, 250, 0.6),
+          inset 0 0 25px rgba(230, 230, 250, 0.2);
+      }
+
+      .footer-container::before {
+        content: "";
+        position: absolute;
+        top: -3px;
+        left: -3px;
+        right: -3px;
+        bottom: -3px;
+        background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff);
+        border-radius: 13px;
+        z-index: -1;
+        animation: innerGlow 2.5s ease-in-out infinite alternate;
+      }
+
+      @keyframes outerGlow {
+        from {
+          box-shadow: 0 0 30px rgba(230, 230, 250, 0.6);
+        }
+        to {
+          box-shadow: 0 0 50px rgba(230, 230, 250, 0.9);
+        }
+      }
+
+      @keyframes innerGlow {
+        from {
+          box-shadow: 0 0 25px rgba(230, 230, 250, 0.6);
+        }
+        to {
+          box-shadow: 0 0 45px rgba(230, 230, 250, 0.9);
+        }
+      }
+
+      footer .col {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 20px;
+        flex: 1;
+        min-width: 250px;
+      }
+
+      /* Add spacing between STYLÉKA and Navigation columns */
+      footer .col:first-child {
+        margin-right: 40px;
+      }
+
+      footer h4 {
+        font-size: 1.3rem;
+        padding-bottom: 15px;
+        color: #007bff;
+        font-weight: 600;
+        margin-bottom: 15px;
+      }
+
+      footer p {
+        font-size: 14px;
+        margin: 5px 0 8px 0;
+        color: #0066cc;
+        line-height: 1.6;
+      }
+
+      footer a {
+        font-size: 14px;
+        text-decoration: none;
+        color: #0066cc;
+        margin-bottom: 8px;
+        transition: all 0.3s ease;
+      }
+
+      footer a:hover {
+        color: #007bff;
+        transform: translateX(5px);
+      }
+
+      .follow {
+        margin-top: 20px;
+      }
+
+      .follow .icon {
+        color: #007bff;
+        padding-right: 15px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 1.2rem;
+      }
+
+      .follow .icon:hover {
+        transform: scale(1.2);
+        color: #00d4ff;
+      }
+
+      .icon a {
+        color: #0066cc;
+        padding-right: 15px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 1.2rem;
+        text-decoration: none;
+      }
+
+      .icon a:hover {
+        transform: scale(1.2);
+        color: #00d4ff;
+      }
+
+      .install img {
+        margin: 10px 0 15px 0;
+        border-radius: 10px;
+        transition: all 0.3s ease;
+      }
+
+      .install img:hover {
+        transform: scale(1.05);
+      }
+
+      .copyright {
+        width: 100%;
+        text-align: center;
+        margin-top: 30px;
+        padding-top: 20px;
+        border-top: 1px solid rgba(0, 123, 255, 0.3);
+        color: #0066cc;
+      }
+
+      /* Responsive Design */
+      @media (max-width: 799px) {
         .section-p1 {
-            padding: 40px 80px;
-        }
-
-        .section-m1 {
-            margin: 40px 0;
-        }
-
-        /* Enhanced Header */
-        #header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 20px 80px;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(20px);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 999;
-            transition: all 0.3s ease;
-        }
-
-        .site-title {
-            font-family: 'Playfair Display', serif;
-            font-size: 2.5rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            letter-spacing: 2px;
+          padding: 40px 40px;
         }
 
         #navbar {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            list-style: none;
-            gap: 30px;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-start;
+          position: fixed;
+          top: 0;
+          right: -300px;
+          height: 100vh;
+          width: 300px;
+          background: white;
+          box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
+          padding: 80px 0 0 10px;
+          transition: 0.3s;
         }
 
-        #navbar li a {
-            text-decoration: none;
-            font-size: 16px;
-            font-weight: 500;
-            color: #333;
-            transition: all 0.3s ease;
-            padding: 12px 24px;
-            border-radius: 8px;
-            position: relative;
-            display: block;
+        #navbar.active {
+          right: 0px;
         }
 
-        #navbar li a:hover,
-        #navbar li a.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        #navbar li {
+          margin-bottom: 25px;
         }
 
-        #lg-bag a {
-            font-size: 1.2rem;
-            color: #667eea;
-            transition: all 0.3s ease;
+        #mobile {
+          display: flex;
+          align-items: center;
         }
 
-        #lg-bag a:hover {
-            transform: scale(1.2);
-            color: #764ba2;
+        #mobile i {
+          color: #333;
+          font-size: 24px;
+          padding-left: 20px;
+          cursor: pointer;
         }
 
-        #mobile {
-            display: none;
+        #close {
+          display: initial;
+          position: absolute;
+          top: 30px;
+          left: 30px;
+          color: #333;
+          font-size: 24px;
+          cursor: pointer;
         }
 
-        #close {
-            display: none;
+        #lg-bag {
+          display: none;
         }
 
-        /* Enhanced Hero Section */
         #Hero {
-    position: relative;
-    background: 
-      linear-gradient(to bottom right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)),
-      url('https://images.unsplash.com/photo-1718985342149-7178154e0aee?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') 
-      center/cover no-repeat;
-    height: 100vh;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    padding: 60px 10%;
-    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-    overflow: hidden;
-  }
-
-
-        #Hero::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.3);
-            z-index: 1;
+          padding: 0 40px;
+          height: 70vh;
         }
 
-        #Hero > * {
-            position: relative;
-            z-index: 2;
+        #Hero h1 {
+          font-size: 3rem;
         }
 
-        #Hero h4 {
-    font-size: 1.2rem;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    color: #f5d442;
-  }
-
         #Hero h2 {
-    font-size: 2.5rem;
-    margin: 10px 0;
-  }
-
-        #Hero h1 {
-    font-size: 3.5rem;
-    font-weight: bold;
-    margin: 10px 0;
-    color: #ffecb3;
-  }
-
-        #Hero p {
-    font-size: 1.1rem;
-    margin: 20px 0 30px;
-    max-width: 500px;
-    line-height: 1.6;
-    color: #f0f0f0;
-  }
-
-  #Hero button {
-    background-color: #f5d442;
-    color: black;
-    font-weight: bold;
-    border: none;
-    width: 200px;
-    padding: 14px 30px;
-    font-size: 1rem;
-    border-radius: 30px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-  }
-
-       #Hero button:hover {
-    background-color: #fff176;
-    transform: scale(1.05);
-  }
-
-
-        @keyframes fadeInUp {
-            from {
-                opacity: 0;
-                transform: translateY(30px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
+          font-size: 2.5rem;
         }
 
-        /* Enhanced Feature Section */
         #feature {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            gap: 20px;
-            background: white;
-            border-radius: 20px;
-            margin: 40px 80px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-        }
-
-        .fe-box {
-            width: 180px;
-            text-align: center;
-            padding: 25px 15px;
-            border-radius: 15px;
-            transition: all 0.3s ease;
-            background: white;
+          justify-content: center;
+          margin: 20px 40px;
         }
 
-        .fe-box:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+        #feature .fe-box {
+          margin: 15px;
         }
 
-        .fe-box img {
-            width: 100%;
-            margin-bottom: 10px;
-            filter: hue-rotate(200deg);
-            transition: all 0.3s ease;
-        }
-
-        .fe-box:hover img {
-            transform: scale(1.1);
-            filter: hue-rotate(0deg);
-        }
-
-        .fe-box h6 {
-            display: inline-block;
-            padding: 9px 8px 6px 8px;
-            line-height: 1;
-            border-radius: 10px;
-            color: #667eea;
-            font-weight: 600;
-            background: rgba(102, 126, 234, 0.1);
-        }
-
-        /* Enhanced Product Sections */
         #product1 {
-            text-align: center;
-            background: white;
-            border-radius: 20px;
-            margin: 40px 80px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
-        }
-
-        #product1 h2 {
-            font-size: 3rem;
-            font-weight: 700;
-            color: #333;
-            margin-bottom: 15px;
-            font-family: 'Playfair Display', serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        #product1 p {
-            font-size: 1.2rem;
-            color: #666;
-            margin-bottom: 40px;
+          margin: 20px 40px;
         }
 
-        .pro-container {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            gap: 25px;
-            padding-top: 20px;
+        #product1 .pro-container {
+          justify-content: center;
         }
 
-        .pro {
-            width: 23%;
-            min-width: 250px;
-            padding: 20px 15px;
-            border: 1px solid rgba(102, 126, 234, 0.2);
-            border-radius: 20px;
-            cursor: pointer;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-            margin: 15px 0;
-            transition: all 0.3s ease;
-            background: white;
-            position: relative;
-            overflow: hidden;
+        #product1 .pro {
+          margin: 15px;
         }
 
-        .pro::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
-            transition: all 0.3s ease;
-            z-index: 1;
-        }
-
-        .pro:hover::before {
-            left: 0;
-        }
-
-        .pro:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
-        }
-
-        .pro > * {
-            position: relative;
-            z-index: 2;
-        }
-
-        .pro img {
-            width: 100%;
-            border-radius: 15px;
-            transition: all 0.3s ease;
-        }
-
-        .pro:hover img {
-            transform: scale(1.05);
-        }
-
-        .des {
-            text-align: start;
-            padding: 15px 0;
-        }
-
-        .des span {
-            color: #667eea;
-            font-size: 14px;
-            font-weight: 600;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .des h5 {
-            padding: 7px 0;
-            color: #333;
-            font-size: 16px;
-            font-weight: 600;
-        }
-
-        .star {
-            color: #ffd700;
-            font-size: 14px;
-            margin: 5px 0;
-        }
-
-        .des h4 {
-            font-size: 18px;
-            font-weight: 700;
-            color: #667eea;
-        }
-
-        /* Enhanced Banner Sections */
         #banner {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
-                        url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
-            width: 100%;
-            height: 40vh;
-            border-radius: 20px;
-            margin: 40px 80px;
-            color: white;
-            position: relative;
-            overflow: hidden;
-        }
-
-        #banner::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.3);
-        }
-
-        #banner > * {
-            position: relative;
-            z-index: 2;
-        }
-
-        #banner h4 {
-            color: #fff;
-            font-size: 1.2rem;
-            font-weight: 400;
-            margin-bottom: 10px;
-        }
-
-        #banner h2 {
-            color: #fff;
-            font-size: 2.5rem;
-            font-weight: 700;
-            margin-bottom: 20px;
-            font-family: 'Playfair Display', serif;
-        }
-
-        #banner span {
-            color: #ff6b6b;
-            font-weight: bold;
-        }
-
-        .normal {
-            font-size: 16px;
-            font-weight: 600;
-            padding: 12px 30px;
-            color: #333;
-            background: white;
-            border-radius: 25px;
-            border: none;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .normal:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Enhanced Small Banner Section */
-        #sm-banner {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            gap: 30px;
-        }
-
-        .banner-box {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
-                        url('https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
-            min-width: 48%;
-            height: 50vh;
-            padding: 40px;
-            border-radius: 20px;
-            color: white;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .banner-box::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.4);
-        }
-
-        .banner-box > * {
-            position: relative;
-            z-index: 2;
+          height: 30vh;
+          margin: 20px 40px;
         }
 
-        .banner-box2 {
-            background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(238, 90, 36, 0.9)),
-                        url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover;
+        #sm-banner .banner-box {
+          min-width: 100%;
+          height: 30vh;
         }
 
-        .banner-box h4 {
-            color: #fff;
-            font-size: 1.1rem;
-            font-weight: 400;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .banner-box h2 {
-            color: #fff;
-            font-size: 2.2rem;
-            font-weight: 700;
-            margin: 15px 0;
-            font-family: 'Playfair Display', serif;
-        }
-
-        .banner-box span {
-            color: #fff;
-            font-size: 1rem;
-            margin-bottom: 20px;
-            opacity: 0.9;
-        }
-
-        .white {
-            background: white !important;
-            color: #333 !important;
-        }
-
-        /* Enhanced Banner3 Section */
         #banner3 {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            padding: 0 80px;
-            gap: 20px;
+          padding: 0 40px;
         }
 
         #banner3 .banner-box {
-            min-width: 30%;
-            height: 30vh;
-            padding: 30px;
+          min-width: 100%;
         }
 
-        #banner3 .banner-box3 {
-            background: linear-gradient(135deg, rgba(238, 90, 36, 0.9), rgba(255, 107, 107, 0.9)),
-                        url('https://images.unsplash.com/photo-1576566588028-4147f3842f27?ixlib=rb-4.0.3&auto=format&fit=crop&w=2064&q=80') center/cover;
-        }
-
-        #banner3 h2 {
-            color: white;
-            font-weight: 900;
-            font-size: 1.8rem;
-            font-family: 'Playfair Display', serif;
-        }
-
-        #banner3 h3 {
-            color: #ff6b6b;
-            font-weight: 800;
-            font-size: 1.1rem;
-            margin-top: 10px;
-        }
-
-        /* Enhanced Newsletter Section */
         #newsletter {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            align-items: center;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border-radius: 20px;
-            margin: 40px 80px;
-            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
-        }
-
-        .newstext h4 {
-            font-size: 2rem;
-            font-weight: 700;
-            color: white;
-            font-family: 'Playfair Display', serif;
-        }
-
-        .newstext p {
-            font-size: 1rem;
-            font-weight: 400;
-            color: rgba(255, 255, 255, 0.9);
-            margin: 20px 0;
-        }
-
-        .newstext span {
-            color: #ff6b6b;
-            font-weight: 600;
-        }
-
-        .form {
-            display: flex;
-            width: 40%;
-            gap: 15px;
+          flex-direction: column;
+          margin: 20px 40px;
         }
 
-        .form input {
-            height: 50px;
-            padding: 0 20px;
-            font-size: 16px;
-            width: 100%;
-            border: none;
-            outline: none;
-            border-radius: 25px;
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
-            backdrop-filter: blur(10px);
+        #newsletter .form {
+          width: 100%;
+          margin-top: 20px;
         }
 
-        .form input::placeholder {
-            color: rgba(255, 255, 255, 0.7);
-        }
-
-        .form button {
-            background: linear-gradient(135deg, #ff6b6b, #ee5a24);
-            color: white;
-            border: none;
-            padding: 15px 30px;
-            border-radius: 25px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 5px 20px rgba(255, 107, 107, 0.3);
-        }
-
-        .form button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
-        }
-
-                        /* Enhanced Footer - Dark Theme */
         footer {
-            background: #E6E6FA; /* Changed to lilac color */
-            color: white;
-            padding: 40px 80px;
-            border-radius: 20px;
-            margin: 40px 20px 20px 20px;
-            position: relative;
-            border: none;
-            box-shadow: 0 0 30px rgba(230, 230, 250, 0.6),
-                        inset 0 0 30px rgba(230, 230, 250, 0.2);
-        }
-
-        footer::before {
-            content: '';
-            position: absolute;
-            top: -3px;
-            left: -3px;
-            right: -3px;
-            bottom: -3px;
-            background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff);
-            border-radius: 23px;
-            z-index: -1;
-            animation: outerGlow 3s ease-in-out infinite alternate;
-        }
-
-        .footer-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            width: 100%;
-            background-color: white;
-            color: #0066cc;
-            padding: 20px;
-            border-radius: 10px;
-            margin: 10px;
-            position: relative;
-            border: none;
-            box-shadow: 0 0 35px rgba(230, 230, 250, 0.6), 
-                        inset 0 0 25px rgba(230, 230, 250, 0.2);
-        }
-
-        .footer-container::before {
-            content: '';
-            position: absolute;
-            top: -3px;
-            left: -3px;
-            right: -3px;
-            bottom: -3px;
-            background: linear-gradient(45deg, #007bff, #00d4ff, #007bff, #00d4ff);
-            border-radius: 13px;
-            z-index: -1;
-            animation: innerGlow 2.5s ease-in-out infinite alternate;
-        }
-
-
-
-        @keyframes outerGlow {
-            from {
-                box-shadow: 0 0 30px rgba(230, 230, 250, 0.6);
-            }
-            to {
-                box-shadow: 0 0 50px rgba(230, 230, 250, 0.9);
-            }
-        }
-
-        @keyframes innerGlow {
-            from {
-                box-shadow: 0 0 25px rgba(230, 230, 250, 0.6);
-            }
-            to {
-                box-shadow: 0 0 45px rgba(230, 230, 250, 0.9);
-            }
-        }
-
-        footer .col {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            margin-bottom: 20px;
-            flex: 1;
-            min-width: 250px;
-        }
-
-        /* Add spacing between STYLÉKA and Navigation columns */
-        footer .col:first-child {
-            margin-right: 40px;
+          padding: 40px 40px;
         }
+      }
 
-        footer h4 {
-            font-size: 1.3rem;
-            padding-bottom: 15px;
-            color: #007bff;
-            font-weight: 600;
-            margin-bottom: 15px;
-        }
-
-        footer p {
-            font-size: 14px;
-            margin: 5px 0 8px 0;
-            color: #0066cc;
-            line-height: 1.6;
-        }
-
-        footer a {
-            font-size: 14px;
-            text-decoration: none;
-            color: #0066cc;
-            margin-bottom: 8px;
-            transition: all 0.3s ease;
-        }
-
-        footer a:hover {
-            color: #007bff;
-            transform: translateX(5px);
-        }
-
-        .follow {
-            margin-top: 20px;
+      @media (max-width: 477px) {
+        .section-p1 {
+          padding: 20px;
         }
 
-        .follow .icon {
-            color: #007bff;
-            padding-right: 15px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1.2rem;
+        #header {
+          padding: 10px 30px;
         }
 
-        .follow .icon:hover {
-            transform: scale(1.2);
-            color: #00d4ff;
+        .site-title {
+          font-size: 2rem;
         }
 
-        .icon a {
-            color: #0066cc;
-            padding-right: 15px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1.2rem;
-            text-decoration: none;
+        #Hero {
+          padding: 0 20px;
         }
 
-        .icon a:hover {
-            transform: scale(1.2);
-            color: #00d4ff;
+        #Hero h1 {
+          font-size: 2.5rem;
         }
 
-        .install img {
-            margin: 10px 0 15px 0;
-            border-radius: 10px;
-            transition: all 0.3s ease;
+        #Hero h2 {
+          font-size: 2rem;
         }
 
-        .install img:hover {
-            transform: scale(1.05);
+        #product1 h2 {
+          font-size: 2rem;
         }
 
-        .copyright {
-            width: 100%;
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid rgba(0, 123, 255, 0.3);
-            color: #0066cc;
+        #feature,
+        #product1,
+        #banner,
+        #newsletter {
+          margin: 20px;
         }
 
-        /* Responsive Design */
-        @media (max-width: 799px) {
-            .section-p1 {
-                padding: 40px 40px;
-            }
-
-            #navbar {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                justify-content: flex-start;
-                position: fixed;
-                top: 0;
-                right: -300px;
-                height: 100vh;
-                width: 300px;
-                background: white;
-                box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
-                padding: 80px 0 0 10px;
-                transition: 0.3s;
-            }
-
-            #navbar.active {
-                right: 0px;
-            }
-
-            #navbar li {
-                margin-bottom: 25px;
-            }
-
-            #mobile {
-                display: flex;
-                align-items: center;
-            }
-
-            #mobile i {
-                color: #333;
-                font-size: 24px;
-                padding-left: 20px;
-                cursor: pointer;
-            }
-
-            #close {
-                display: initial;
-                position: absolute;
-                top: 30px;
-                left: 30px;
-                color: #333;
-                font-size: 24px;
-                cursor: pointer;
-            }
-
-            #lg-bag {
-                display: none;
-            }
-
-            #Hero {
-                padding: 0 40px;
-                height: 70vh;
-            }
-
-            #Hero h1 {
-                font-size: 3rem;
-            }
-
-            #Hero h2 {
-                font-size: 2.5rem;
-            }
-
-            #feature {
-                justify-content: center;
-                margin: 20px 40px;
-            }
-
-            #feature .fe-box {
-                margin: 15px;
-            }
-
-            #product1 {
-                margin: 20px 40px;
-            }
-
-            #product1 .pro-container {
-                justify-content: center;
-            }
-
-            #product1 .pro {
-                margin: 15px;
-            }
-
-            #banner {
-                height: 30vh;
-                margin: 20px 40px;
-            }
-
-            #sm-banner .banner-box {
-                min-width: 100%;
-                height: 30vh;
-            }
-
-            #banner3 {
-                padding: 0 40px;
-            }
-
-            #banner3 .banner-box {
-                min-width: 100%;
-            }
-
-            #newsletter {
-                flex-direction: column;
-                margin: 20px 40px;
-            }
-
-            #newsletter .form {
-                width: 100%;
-                margin-top: 20px;
-            }
-
-            footer {
-                padding: 40px 40px;
-            }
+        #banner3 {
+          padding: 0 20px;
         }
 
-        @media (max-width: 477px) {
-            .section-p1 {
-                padding: 20px;
-            }
-
-            #header {
-                padding: 10px 30px;
-            }
-
-            .site-title {
-                font-size: 2rem;
-            }
-
-            #Hero {
-                padding: 0 20px;
-            }
-
-            #Hero h1 {
-                font-size: 2.5rem;
-            }
-
-            #Hero h2 {
-                font-size: 2rem;
-            }
-
-            #product1 h2 {
-                font-size: 2rem;
-            }
-
-            #feature,
-            #product1,
-            #banner,
-            #newsletter {
-                margin: 20px;
-            }
-
-            #banner3 {
-                padding: 0 20px;
-            }
-
-            footer {
-                padding: 20px;
-            }
+        footer {
+          padding: 20px;
         }
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <section id="header">
-        <span class="site-title">STYLÉKA</span>
-
-        <div>
-            <ul id="navbar">
-                <li><a class="active" href="Index.html">Home</a></li>
-                <li><a href="shop.html">Shop</a></li>
-                <li><a href="blog.html">Blog</a></li>
-                <li><a href="about.html">About</a></li>
-                <li><a href="contact.html">Contact</a></li>
-                <li><a href="register.html">Register</a></li>
-                <li id="lg-bag"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
-                <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
-            </ul>
-        </div>
-
-        <div id="mobile">
-            <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a> 
-            <i id="bar" class="fas fa-outdent"></i>
-        </div>
+      <span class="site-title">STYLÉKA</span>
+
+      <div>
+        <ul id="navbar">
+          <li><a class="active" href="Index.html">Home</a></li>
+          <li><a href="shop.html">Shop</a></li>
+          <li><a href="blog.html">Blog</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="contact.html">Contact</a></li>
+          <li><a href="register.html">Register</a></li>
+          <li id="lg-bag">
+            <a href="cart.html"
+              ><i class="fa fa-shopping-cart" aria-hidden="true"></i
+            ></a>
+          </li>
+          <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
+        </ul>
+      </div>
+
+      <div id="mobile">
+        <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
+        <i id="bar" class="fas fa-outdent"></i>
+      </div>
     </section>
 
     <section id="Hero">
-        <div class="left">
+      <div class="left">
         <h4>Trade-in-offer</h4>
         <h2>Super value deals</h2>
         <h1>On all products</h1>
         <p>Save more with coupons & upto 70% off !</p>
         <button>Shop Now</button>
-        </div>
-        
+      </div>
     </section>
 
     <section id="feature" class="section-p1">
-        <div class="fe-box">
-            <img src="images/f1.svg" alt="free shipping">
-            <h6>Free Shipping</h6>
-        </div>
-        <div class="fe-box">
-            <img src="images/f2.svg" alt="online order">
-            <h6>Online Order</h6>
-        </div>
-        <div class="fe-box">
-            <img src="images/f3.svg" alt="save money">
-            <h6>Save Money</h6>
-        </div>
-        <div class="fe-box">
-            <img src="images/f4.jpg" alt="promotions">
-            <h6>Promotions</h6>
-        </div>
-        <div class="fe-box">
-            <img src="images/f5.svg" alt="happy Sell">
-            <h6>Happy Sell</h6>
-        </div>
-        <div class="fe-box">
-            <img src="images/f6.png" alt="24/7 Support">
-            <h6>24/7 Support</h6>
-        </div>
+      <div class="fe-box">
+        <img src="images/f1.svg" alt="free shipping" />
+        <h6>Free Shipping</h6>
+      </div>
+      <div class="fe-box">
+        <img src="images/f2.svg" alt="online order" />
+        <h6>Online Order</h6>
+      </div>
+      <div class="fe-box">
+        <img src="images/f3.svg" alt="save money" />
+        <h6>Save Money</h6>
+      </div>
+      <div class="fe-box">
+        <img src="images/f4.jpg" alt="promotions" />
+        <h6>Promotions</h6>
+      </div>
+      <div class="fe-box">
+        <img src="images/f5.svg" alt="happy Sell" />
+        <h6>Happy Sell</h6>
+      </div>
+      <div class="fe-box">
+        <img src="images/f6.png" alt="24/7 Support" />
+        <h6>24/7 Support</h6>
+      </div>
     </section>
 
     <section id="product1" class="section-p1">
-        <h2>Featured Products</h2>
-        <p>New Designs Added</p>
-        <div class="pro-container">
-            <div class="pro">
-                <img src="img/Products/adicolor-classics-3-stripes-tee.avif" alt="">
-                <div class="des">
-                    <span>Adidas</span>
-                    <h5>White tee with black stripes</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹2000</h4>
-                </div>
+      <h2>Featured Products</h2>
+      <p>New Designs Added</p>
+      <div class="pro-container">
+        <div class="pro">
+          <img src="img/Products/adicolor-classics-3-stripes-tee.avif" alt="" />
+          <div class="des">
+            <span>Adidas</span>
+            <h5>White tee with black stripes</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/f1.jpg" alt="">
-                <div class="des">
-                    <span>Zara</span>
-                    <h5>Printed Shirt</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹5000</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹2000</h4>
+          </div>
+        </div>
+        <div class="pro">
+          <img src="img/Products/f1.jpg" alt="" />
+          <div class="des">
+            <span>Zara</span>
+            <h5>Printed Shirt</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/f2.jpg" alt="">
-                <div class="des">
-                    <span>Gucci</span>
-                    <h5>Flower print exclusive shirt</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹14999</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹5000</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img src="img/Products/f2.jpg" alt="" />
+          <div class="des">
+            <span>Gucci</span>
+            <h5>Flower print exclusive shirt</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+            </div>
+            <h4>₹14999</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img
+            src="img/Products/1000011878477-White-White-1000011878477_01-2100.jpg"
+            alt=""
+          />
+          <div class="des">
+            <span>Puma</span>
+            <h5>One8 Shoes By Virat</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/1000011878477-White-White-1000011878477_01-2100.jpg" alt="">
-                <div class="des">
-                    <span>Puma</span>
-                    <h5>One8 Shoes By Virat</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹5999</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹5999</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img src="img/Products/images.jpg" alt="" />
+          <div class="des">
+            <span>Puma</span>
+            <h5>Ferrari Sports Hoodie</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/images.jpg" alt="">
-                <div class="des">
-                    <span>Puma</span>
-                    <h5>Ferrari Sports Hoodie</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹8999</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹8999</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img src="img/Products/f6.jpg" alt="" />
+          <div class="des">
+            <span>Zara</span>
+            <h5>Dual Color Shirt</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/f6.jpg" alt="">
-                <div class="des">
-                    <span>Zara</span>
-                    <h5>Dual Color Shirt</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹4000</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹4000</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img src="img/Products/f7.jpg" alt="" />
+          <div class="des">
+            <span>HnM</span>
+            <h5>Printed Women Trouser</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/f7.jpg" alt="">
-                <div class="des">
-                    <span>HnM</span>
-                    <h5>Printed Women Trouser</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹1599</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+            <h4>₹1599</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
+        </div>
+        <div class="pro">
+          <img src="img/Products/f8.jpg" alt="" />
+          <div class="des">
+            <span>HnM</span>
+            <h5>Exclusive Purple Women t-shirts</h5>
+            <div class="star">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
             </div>
-            <div class="pro">
-                <img src="img/Products/f8.jpg" alt="">
-                <div class="des">
-                    <span>HnM</span>
-                    <h5>Exclusive Purple Women t-shirts</h5>
-                    <div class="star">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                    <h4>₹2999</h4>
-                </div>
-                <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
-            </div>    
+            <h4>₹2999</h4>
+          </div>
+          <!-- <a href="#"><i class="fas fa-shopping-cart cart"></i></a> -->
         </div>
+      </div>
     </section>
 
-
     <section id="banner" class="section-m1">
-        <h3>Repair Service</h3>
-        <h2>Up to <span>70% Off</span> - All t-shirts & Accessories</h2>
-        <button class="normal">Explore More</button>
+      <h3>Repair Service</h3>
+      <h2>Up to <span>70% Off</span> - All t-shirts & Accessories</h2>
+      <button class="normal">Explore More</button>
     </section>
 
     <section id="sm-banner" class="section-p1">
-        <div class="banner-box">
-            <h4>crazy deals</h4>
-            <h2>buy 1 get 1 free</h2>
-            <span>The best classic dress is on sale at styleka</span>
-            <button class="white">Learn More</button>
-        </div>
-        <div class="banner-box banner-box2">
-            <div class="rightban">            
-            <h4>summer/spring</h4>
-            <h2>upcoming season</h2>
-            <span>The best classic dress is on sale at styleka</span>
-            <button class="green">Collection</button>
-            </div>
+      <div class="banner-box">
+        <h4>crazy deals</h4>
+        <h2>buy 1 get 1 free</h2>
+        <span>The best classic dress is on sale at styleka</span>
+        <button class="white">Learn More</button>
+      </div>
+      <div class="banner-box banner-box2">
+        <div class="rightban">
+          <h4>summer/spring</h4>
+          <h2>upcoming season</h2>
+          <span>The best classic dress is on sale at styleka</span>
+          <button class="green">Collection</button>
         </div>
+      </div>
     </section>
 
     <section id="banner3">
-        <div class="banner-box ">
-            <h2 >SEASONAL SALE</h2>
-            <h3 class="winter">Winter Collection -50% OFF</h3>
-        </div>
-        <div class="banner-box banner-box2">
-            <h2 class="foot">NEW FOOTWEAR COLLECTION</h2>
-            <h3>Spring / Summer 2022</h3>
-        </div>
-        <div class="banner-box banner-box3">
-            <h2 class="tshirt">T-SHIRTS</h2>
-            <h3 class="subtshirt">New Trendy Prints</h3>
-        </div>
+      <div class="banner-box">
+        <h2>SEASONAL SALE</h2>
+        <h3 class="winter">Winter Collection -50% OFF</h3>
+      </div>
+      <div class="banner-box banner-box2">
+        <h2 class="foot">NEW FOOTWEAR COLLECTION</h2>
+        <h3>Spring / Summer 2022</h3>
+      </div>
+      <div class="banner-box banner-box3">
+        <h2 class="tshirt">T-SHIRTS</h2>
+        <h3 class="subtshirt">New Trendy Prints</h3>
+      </div>
     </section>
 
     <section id="newsletter" class="section-p1 section-m1">
-        <div class="newstext">
-            <h4>Sign Up For Newsletter</h4>
-            <p>Get E-mail updates about ourlatest shop and <span>special offers.</span></p>
-        </div>
-        <div class="form">
-            <input type="text" placeholder="Your email address">
-            <button class="normal">Sign Up</button>
-        </div>
+      <div class="newstext">
+        <h4>Sign Up For Newsletter</h4>
+        <p>
+          Get E-mail updates about ourlatest shop and
+          <span>special offers.</span>
+        </p>
+      </div>
+      <div class="form">
+        <input type="text" placeholder="Your email address" />
+        <button class="normal">Sign Up</button>
+      </div>
     </section>
 
     <footer class="section-p1">
-        <div class="footer-container">
-            <div class="col">
-                <h4>STYLÉKA</h4>
-                <p>Where fashion meets innovation and style transcends boundaries. STYLÉKA is your premier destination for curated fashion that speaks to the modern individual. From streetwear to haute couture, we blend contemporary trends with timeless elegance, offering a shopping experience that's as unique as your personal style. Discover collections that celebrate diversity, sustainability, and the art of self-expression.</p>
-            </div>
-
-            <div class="col">
-                <h4>Navigation</h4>
-                <a href="index.html">Home</a>
-                <a href="shop.html">Shop</a>
-                <a href="about.html">About</a>
-                <a href="contact.html">Contact</a>
-                <a href="blog.html">Blog</a>
-            </div>
+      <div class="footer-container">
+        <div class="col">
+          <h4>STYLÉKA</h4>
+          <p>
+            Where fashion meets innovation and style transcends boundaries.
+            STYLÉKA is your premier destination for curated fashion that speaks
+            to the modern individual. From streetwear to haute couture, we blend
+            contemporary trends with timeless elegance, offering a shopping
+            experience that's as unique as your personal style. Discover
+            collections that celebrate diversity, sustainability, and the art of
+            self-expression.
+          </p>
+        </div>
 
-            <div class="col">
-                <h4>Contact</h4>
-                <p>Address: Guru Nanak Dev University, Amritsar</p>
-                <p>Phone: (+91)-8507566667</p>
-                <p>Hours: 10:00-18:00, Mon-Sat</p>
-                <h4>Follow us</h4>
-                <div class="icon">
-                    <a href="https://facebook.com" target="_blank"><i class="fa-brands fa-facebook"></i></a>
-                    <a href="https://linkedin.com" target="_blank"><i class="fa-brands fa-linkedin"></i></a>
-                    <a href="https://instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
-                    <a href="https://twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
-                </div>
-            </div>
+        <div class="col">
+          <h4>Navigation</h4>
+          <a href="index.html">Home</a>
+          <a href="shop.html">Shop</a>
+          <a href="about.html">About</a>
+          <a href="contact.html">Contact</a>
+          <a href="blog.html">Blog</a>
+        </div>
 
-            <div class="col">
-                <h4>Install App</h4>
-                <div class="icon">
-                    <a href="https://play.google.com" target="_blank"><i class="fab fa-google-play"></i></a>
-                </div>
-                <h4>Secure Payment Gateways</h4>
-                <div class="icon">
-                    <a href="https://razorpay.com" target="_blank"><i class="fas fa-credit-card"></i></a>
-                </div>
-            </div>
+        <div class="col">
+          <h4>Contact</h4>
+          <p>Address: Guru Nanak Dev University, Amritsar</p>
+          <p>Phone: (+91)-8507566667</p>
+          <p>Hours: 10:00-18:00, Mon-Sat</p>
+          <h4>Follow us</h4>
+          <div class="icon">
+            <a href="https://facebook.com" target="_blank"
+              ><i class="fa-brands fa-facebook"></i
+            ></a>
+            <a href="https://linkedin.com" target="_blank"
+              ><i class="fa-brands fa-linkedin"></i
+            ></a>
+            <a href="https://instagram.com" target="_blank"
+              ><i class="fa-brands fa-instagram"></i
+            ></a>
+            <a href="https://twitter.com" target="_blank"
+              ><i class="fa-brands fa-twitter"></i
+            ></a>
+          </div>
         </div>
-        
-        <div class="copyright">
-            <p>© 2025 , Powered By STYLÉKA</p>
+
+        <div class="col">
+          <h4>Install App</h4>
+          <div class="icon">
+            <a href="https://play.google.com" target="_blank"
+              ><i class="fab fa-google-play"></i
+            ></a>
+          </div>
+          <h4>Secure Payment Gateways</h4>
+          <div class="icon">
+            <a href="https://razorpay.com" target="_blank"
+              ><i class="fas fa-credit-card"></i
+            ></a>
+          </div>
         </div>
+      </div>
+
+      <div class="copyright">
+        <p>© 2025 , Powered By STYLÉKA</p>
+      </div>
     </footer>
 
     <script src="script.js"></script>
-</body>
-
+  </body>
 </html>
diff --git a/shop.html b/shop.html
index 1a1a1a2..8d821ff 100644
--- a/shop.html
+++ b/shop.html
@@ -738,11 +738,11 @@
         <div class="site-title">STYLÉKA</div>
         <div>
             <ul id="navbar">
-                <li><a class="active" href="#">Home</a></li>
-                <li><a href="#">Shop</a></li>
-                <li><a href="#">Blog</a></li>
-                <li><a href="#">About</a></li>
-                <li><a href="#">Contact</a></li>
+                <li><a class="active" href="index.html">Home</a></li>
+                <li><a href="shop.html">Shop</a></li>
+                <li><a href="blog.html">Blog</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="contact.html">Contact</a></li>
                 <li id="lg-bag"><a href="#"><i class="far fa-shopping-bag"></i></a></li>
                 <a href="#" id="close"><i class="far fa-times"></i></a>
             </ul>
