diff --git a/styles.css b/styles.css
index bd06d81..4d1d1fd 100644
--- a/styles.css
+++ b/styles.css
@@ -244,217 +244,113 @@ Navigation
 Navigation Media Query
 ======================
 */
+/* Styles for screens with a maximum width of 768px */
 @media only screen and (max-width: 768px) {
+  /* Navigation menu styles */
   .nav__menu {
-    position: fixed;
-    top: 0;
-    left: -30rem;
-    width: 0;
-    background-color: var(--white);
-    z-index: 9990;
-    height: 100%;
-    transition: all 0.5s;
+    position: fixed; /* Keeps the menu in a fixed position */
+    top: 0; /* Aligns the menu to the top of the screen */
+    left: -30rem; /* Hides the menu off-screen to the left */
+    width: 0; /* Initially sets the menu width to 0 */
+    background-color: var(--white); /* Sets the background color */
+    z-index: 9990; /* Ensures the menu appears on top */
+    height: 100%; /* Sets the menu height to 100% of the viewport */
+    transition: all 0.5s; /* Animates all changes over 0.5 seconds */
   }
 
+  /* Styles when the menu is open */
   .nav__menu.open {
-    left: 30rem;
-    width: 30rem;
+    left: 30rem; /* Moves the menu into view */
+    width: 30rem; /* Sets the menu width */
   }
 
+  /* Logo styles */
   .nav__logo {
-    width: 50%;
+    width: 50%; /* Sets the logo width to 50% of its container */
   }
 
+  /* Hamburger menu styles */
   .nav__hamburger {
-    display: block;
+    display: block; /* Displays the hamburger menu */
   }
 
+  /* Menu top section styles */
   .menu__top {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: var(--orange);
-    padding: 1.8rem 1rem;
+    display: flex; /* Uses flexbox for layout */
+    align-items: center; /* Centers items vertically */
+    justify-content: space-between; /* Spaces items apart */
+    background-color: var(--orange); /* Sets the background color */
+    padding: 1.8rem 1rem; /* Adds padding */
   }
 
+  /* SVG icon styles in the menu top section */
   .menu__top svg {
-    height: 1.6rem;
-    width: 1.6rem;
-    fill: var(--primaryColor);
+    height: 1.6rem; /* Sets the icon height */
+    width: 1.6rem; /* Sets the icon width */
+    fill: var(--primaryColor); /* Sets the fill color */
   }
 
+  /* Navigation category styles */
   .nav__category {
-    color: var(--white);
-    font-size: 2.3rem;
-    font-weight: 700;
+    color: var(--white); /* Sets the text color */
+    font-size: 2.3rem; /* Sets the font size */
+    font-weight: 700; /* Sets the font weight */
   }
 
+  /* Navigation list styles */
   .nav__list {
-    flex-direction: column;
-    align-items: start;
-    padding: 1.6rem 1rem;
+    flex-direction: column; /* Stacks items vertically */
+    align-items: start; /* Aligns items to the start */
+    padding: 1.6rem 1rem; /* Adds padding */
   }
 
+  /* Styles for each navigation item */
   .nav__item:not(:last-child) {
-    margin-right: 0;
+    margin-right: 0; /* Removes right margin for all items except the last one */
   }
 
+  /* Styles for navigation items */
   .nav__item {
-    width: 100%;
+    width: 100%; /* Sets the item width to 100% */
   }
 
+  /* Styles for navigation links */
   .nav__list .nav__link:link,
   .nav__list .nav__link:visited {
-    padding: 1.6rem 0;
-    width: 100%;
-    color: var(--grey2);
+    padding: 1.6rem 0; /* Adds vertical padding */
+    width: 100%; /* Sets the link width to 100% */
+    color: var(--grey2); /* Sets the link color */
   }
 
+  /* Styles for the body element when the menu is active */
   body.active::before {
-    content: "";
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 110%;
-    background: var(--black) none no-repeat 0 0;
-    opacity: 0.7;
-    z-index: 999;
-    transition: 0.8s;
+    content: ""; /* Adds an empty content */
+    position: fixed; /* Fixes the position */
+    top: 0; /* Aligns to the top */
+    left: 0; /* Aligns to the left */
+    width: 100%; /* Sets the width to 100% */
+    height: 110%; /* Sets the height to 110% */
+    background: var(--black) none no-repeat 0 0; /* Sets the background color */
+    opacity: 0.7; /* Sets the opacity */
+    z-index: 999; /* Ensures it appears below the menu */
+    transition: 0.8s; /* Animates the changes over 0.8 seconds */
   }
 }
 
+/* Styles for screens with a maximum width of 568px */
 @media only screen and (max-width: 568px) {
+  /* Icon styles */
   .nav__icons .icon__item svg {
-    width: 1.4rem;
-    height: 1.4rem;
+    width: 1.4rem; /* Sets the icon width */
+    height: 1.4rem; /* Sets the icon height */
   }
 
+  /* Icon item styles */
   .nav__icons .icon__item {
-    padding: 0.4rem;
+    padding: 0.4rem; /* Adds padding */
   }
 }
 
-/*
-======================
-Hero Area
-======================
-*/
-
-.hero,
-.hero .glide__slides {
-  background-color: var(--primaryColor);
-  position: relative;
-  width: 100%;
-  height: 100vh;
-}
-
-.hero .glide__bullet {
-  background-color: #222;
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.hero .glide__arrow {
-  padding: 1.5rem 1.7rem;
-  opacity: 0;
-  border: none;
-  background-color: var(--grey);
-  transition: all 0.5s ease-in-out 0.2s;
-}
-
-.glide__arrow:hover {
-  background-color: var(--black);
-}
-
-.glide__arrow--left {
-  left: 20rem;
-}
-
-.glide__arrow--right {
-  position: absolute;
-  right: 20rem;
-}
-
-.hero:hover .glide__arrow {
-  opacity: 1;
-}
-
-.hero:hover .glide__arrow--left {
-  left: 23rem;
-}
-
-.hero:hover .glide__arrow--right {
-  right: 23rem;
-}
-
-.hero .glide__arrow svg {
-  height: 1.8rem;
-  width: 1.8rem;
-  fill: var(--primaryColor);
-}
-
-.hero .glide__arrow {
-  border-radius: 50%;
-}
-
-.hero__center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  max-width: 114rem;
-  margin: 0 auto;
-  height: 100%;
-  padding-top: 3rem;
-}
-
-.hero__left {
-  padding: 0 3rem;
-  flex: 0 0 50%;
-}
-
-.hero__btn {
-  display: inline-block;
-  font-weight: 700;
-  font-size: 1.4rem;
-  background-color: var(--black);
-  color: var(--primaryColor);
-  cursor: pointer;
-  margin-top: 1rem;
-  padding: 1.5rem 4rem;
-  border: 1px solid var(--black);
-  transition: all 0.3s ease-in-out;
-}
-
-.hero__btn:focus {
-  outline: none;
-}
-
-.hero__left .hero__btn:hover {
-  font-weight: 700;
-  background-color: transparent;
-  color: var(--black);
-}
-
-.hero__left h1 {
-  margin: 1rem 0;
-}
-
-.hero__left p {
-  margin-bottom: 1rem;
-}
-
-.hero__right {
-  flex: 0 0 50%;
-  position: relative;
-  text-align: center;
-}
-
-.hero__right img.banner_03 {
-  width: 70%;
-}
-
 /*
 ======================
 Hero Media Query