diff --git a/css/style.css b/css/style.css
index ac5f2d9..7587253 100644
--- a/css/style.css
+++ b/css/style.css
@@ -10,57 +10,71 @@ body {
 a {
     color: #000;
     text-decoration: none;
-
+    position: relative;
 }
 
-
 .container {
+    padding-top: 50px;
     width: 100%;
     max-width: 1150px;
+    display: flex;
     margin: 0 auto;
     box-sizing: border-box;
 }
 
-.welcome {
+.header-welcome {
     width: 100%;
     height: 30px;
     background-color: #d9e1e6;
     color: #868f93;
 }
 
-.close {
+.header-welcome__close {
     float: right;
     padding-right: 5px;
     font-size: 100%;
     font-weight: 600;
 }
 
-.welcome_msg {
+.header-welcome__msg {
     line-height: 30px;
+    max-width: 1150px;
+    margin-left: auto;
+    margin-right: auto;
     text-align: center;
     font-size: 10px;
     text-transform: uppercase;
 }
 
+
+
 /*logo line*/
 
-.logo_line {
+.header-line {
     height: 97px;
     text-transform: uppercase;
     color: #000;
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
+    margin-left: auto;
+    margin-right: auto;
     column-gap: 25px;
+    border-bottom: 2px solid #e1e1e1;
+}
+
+.header-line:last-child 
+{
+    height: 70px;
 }
 
 
-.logo {
+.header-line__logo {
     font-size: 24px;
     font-family: 'Intro demo';
 }
 
-.cart {
+.header-line__cart {
     line-height: 40px;
     border: 2px solid;
     font-size: 12px;
@@ -80,12 +94,16 @@ a {
 
 .link_content {
     display: flex;
+    width: 100%;
+    max-width: 1150px;
     justify-content: space-between;
     align-items: center;
+    margin-left: auto;
+    margin-right: auto;
     width: 100%;
 }
 
-.nav_group {
+.header-line__nav {
     max-width: 545px;
     display: flex;
     justify-content: space-between;
@@ -93,20 +111,42 @@ a {
 
 }
 
-.nav_link {
+.header-line__link {
     font-size: 12px;
     margin: 0 25px;
 }
 
-.link_content div {
-    float: left;
+a:after {
+	display: block;
+	position: absolute;
+	left: 0;
+	width: 0;
+	height: 1px; 
+	background-color: #5b5b5b; 
+	content: "";
+	transition: width 0.3s ease-out; 
 }
 
-.icons {
-    line-height: 28px;
+a:hover:after,
+a:focus:after {
+	width: 100%; 
+
 }
 
-.heart {
+
+
+.header-line__icons
+{
+    display: flex;
+}
+
+.icon {
+    
+    font-size: 16px;
+
+}
+
+.header-line__heart {
     content: "";
     border-right: 1px dashed #999999;
     border-right-width: 1px;
@@ -114,7 +154,7 @@ a {
 
 }
 
-.search {
+.header-line__search {
     padding: 0 14px;
 }
 
@@ -126,12 +166,12 @@ a {
 }
 
 
-.main_image {
+.container__main-img {
     height: 683px;
     width: 657px;
 }
 
-.alt_images {
+.container-photos-alt {
     display: flex;
     flex-direction: row;
     width: 146px;
@@ -140,75 +180,84 @@ a {
 
 }
 
-.alt_image {
+.container__alt-img {
     width: 146px;
     height: 170px;
     margin-right: 24px;
 
 }
 
-.alt_image:hover {
+.container__alt-img:hover {
     box-shadow: 1px 1px 1px #cbcdce;
 }
 
-.exit {
+
+/*Container text*/ 
+
+.container-text 
+{
+    margin-left: 29px;
     font-size: 14px;
 }
 
-.text {
-    margin-left: 29px;
-}
-
-.product_name h2 {
+.container-text__product_name h2
+{
     line-height: 36px;
     font-size: 24px;
     margin-bottom: 0;
 }
 
-.review {
-
+.container-text__review
+{
     line-height: 25px;
     font-size: 14px;
     color: #555555;
 }
 
-.review a {
+.fa-star
+{
+    color: #ded3aa;
+}
+
+.container-text__review a
+{
     font-size: 12px;
     color: #000;
 }
 
-.price {
+.container-text__price {
     margin-top: 15px;
     font-size: 24px;
     color: #68899a;
 }
 
-.inform {
+.container-text__inform {
     font-size: 14px;
     line-height: 24px;
     margin-top: 18px;
 }
 
-.inform p {
+.container-text__inform p 
+{
     margin: 0 0;
 }
 
-.inform a {
+.container-text__inform a {
     color: #68899a;
 }
 
-.about {
+.container-text__about {
     margin-top: 30px;
     font-size: 14px;
     color: #555555;
 }
 
-.about ul {
+.container-text__about ul {
     padding-left: 0;
     list-style-position: inside;
 }
 
-.selectors {
+.container-text-selectors {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -219,16 +268,11 @@ a {
 
 }
 
-.color {
+.container-text-selectors__selector {
     width: 196px;
 }
 
-.size {
-    width: 196px;
-
-}
-
-.selectors select {
+.container-text-selectors__selector select {
     font-size: 13px;
     color: #707070;
     width: 168px;
@@ -244,6 +288,11 @@ a {
     appearance: none;
 }
 
+select, input
+{
+    outline: none;
+}
+
 select:not([multiple]) {
     padding-right: 1.2em;
     background-repeat: no-repeat;
@@ -266,14 +315,25 @@ input {
     text-align: center;
 }
 
-.qty_counter {
+.container-text-selectors__counter {
     display: flex;
     align-items: center;
 
 }
 
+.container-text-selectors__counter input {
+    padding: 5px;
+    font-size: 13px;
+    color: #707070;
+    width: 34px;
+    height: 33px;
+    padding: 0;
+    border-radius: 0;
+    border: 1px solid #e1e1e1;
+}
 
-.buttons {
+
+.container-text-selectors__buttons {
     display: flex;
     flex-direction: column;
     border-radius: 0;
@@ -281,19 +341,19 @@ input {
     border-left: none;
 }
 
-.buttons button {
+.container-text-selectors__buttons button {
     border-radius: 0;
     border: 0px;
     background-color: #fff;
     height: 16.5px;
 }
 
-.buttons button:first-child {
+.container-text-selectors__buttons button:first-child {
 
     border-bottom: 0.5px solid #e1e1e1;
 }
 
-.buttons button:last-child {
+.container-text-selectors__buttons button:last-child {
 
     border-top: 0.5px solid #e1e1e1;
 }
@@ -316,16 +376,7 @@ input {
     border-top: 2px solid #cccccc;
 }
 
-.selectors .qty input {
-    padding: 5px;
-    font-size: 13px;
-    color: #707070;
-    width: 34px;
-    height: 33px;
-    padding: 0;
-    border-radius: 0;
-    border: 1px solid #e1e1e1;
-}
+
 
 
 footer {
@@ -338,7 +389,7 @@ footer {
 }
 
 
-@media screen and (max-width: 1150px) {
+@media screen and (max-width: 1420px) {
 
 
     .container {
@@ -346,66 +397,66 @@ footer {
         padding-right: 5px;
         display: flex;
         justify-content: space-around;
+        flex-direction: column;
     }
 
+    .icon
+    {
+        padding-left:15px ;
+        padding-right:15px;
+    }
 
-    .val {
+    .header-line {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .header-line__val {
         width: auto;
     }
 
-    .cart {
+    .header-line__cart {
         width: 100%;
         max-width: 124px;
         min-width: 80px;
     }
 
-    .link_content {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .nav_group {
+    .header-line__nav {
         display: none;
     }
 
-    .photos {
+    .container-photos {
         display: flex;
         flex-direction: column;
         align-items: center;
     }
 
-
-    .main_image {
+    .container__main-img {
         width: 90%;
         max-width: 657px;
         height: auto;
     }
 
-    .alt_images {
+    .container-photos-alt 
+    {
 
         width: 100%;
         overflow-x: scroll;
         padding-bottom: 10px;
     }
 
-    .alt_image {
+    .container_alt-img {
         width: 100%;
         max-width: 146px;
         height: auto;
 
     }
 
-    .alt_image:last-child {
+    .container_alt-img:last-child {
         margin-right: 0;
     }
 
-    .main_content {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-    }
-
-    .text {
+    .container-text {
         padding-top: 25px;
         display: flex;
         flex-direction: column;
@@ -413,7 +464,7 @@ footer {
         margin-left: 7px;
     }
 
-    .selectors {
+    .container-text-selectors {
         display: flex;
         flex-direction: column;
 
diff --git a/index.html b/index.html
index 7d56a6e..5efe20c 100644
--- a/index.html
+++ b/index.html
@@ -13,56 +13,54 @@
 </head>
 <body>
 
-<header class="header">
-    <div class="welcome">
-        <div class="welcome_msg">
-            start selling your products or buy them from anywhere! <span class="close">&times;</span>
-        </div>
+<header>
+    <div class="header-welcome">
+        <div class="header-welcome__msg">
+            start selling your products or buy them from anywhere <span class="header-welcome__close">&times;</span>
+       </div>
     </div>
-        <div class="logo_line">
-            <div class="val">USD</div>
-            <div class="logo"><h1><b>bonfire</b></h1></div>
-            <a href="#" class="cart"><b>cart(3)</b></a>
+        <div class="header-line">
+            <div class="header-line__val">USD</div>
+            <div class="header-line__logo"><h1><b>bonfire</b></h1></div>
+            <a href="#" class="header-line__cart"><b>cart(3)</b></a>
         </div>
-    <div class="link_line">
-            <div class="link_content">
-                <div class="menu"><i class="fa-solid fa-bars"></i></div>
-                <nav class="nav_group">
-                    <a class="nav_link" href="#">home</a>
-                    <a class="nav_link" href="#">men</a>
-                    <a class="nav_link" href="#">women</a>
-                    <a class="nav_link" href="#">lookbook</a>
-                    <a class="nav_link" href="#">about</a>
-                    <a class="nav_link" href="#">blog</a>
+    <div class="header-line">
+                <div class="header-line__menu icon"><i class="fa-solid fa-bars"></i></div>
+                <nav class="header-line__nav">
+                    <a class="header-line__link" href="#">home</a>
+                    <a class="header-line__link" href="#">men</a>
+                    <a class="header-line__link" href="#">women</a>
+                    <a class="header-line__link" href="#">lookbook</a>
+                    <a class="header-line__link" href="#">about</a>
+                    <a class="header-line__link" href="#">blog</a>
                 </nav>
-                <div class="icons">
-                    <div class="heart"><i class="fa-regular fa-heart"></i></div>
-                    <div class="search"><i class="fa-solid fa-magnifying-glass"></i></div>
+                <div class="header-line__icons">
+                    <div class="header-line__heart icon"><i class="fa-regular fa-heart"></i></div>
+                    <div class="header-line__search icon"><i class="fa-solid fa-magnifying-glass"></i></div>
                 </div>
-            </div>
+            
     </div>
 </header>
 <div class="container">
-    <div class="main_content">
-        <div class="photos">
-            <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="main_image">
-            <div class="alt_images">
-                <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="alt_image">
-                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604291.jpg" alt="" class="alt_image">
-                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604289.jpg" alt="" class="alt_image">
-                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604287.jpg" alt="" class="alt_image">
+        <div class="container-photos">
+            <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="container__main-img">
+            <div class="container-photos-alt">
+                <img src="https://d13qso5xfejx18.cloudfront.net/product-media/57Y3/1000/1000/IMG6939.jpg" alt="" class="container__alt-img">
+                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604291.jpg" alt="" class="container__alt-img">
+                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604289.jpg" alt="" class="container__alt-img">
+                <img src="https://image1.superdry.com/static/images/optimised/zoom/upload9223368955665604287.jpg" alt="" class="container__alt-img">
             </div>
         </div>
-        <div class="text">
-            <a href="#" class="exit">Back to Woman</a>
-            <div class="product_name"><h2>The Atelier Tailored Coat</h2></div>
-            <div class="review">Star 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div>
-            <div class="price"><b>$499.00</b></div>
-            <div class="inform">
+        <div class="container-text">
+            <a href="#">Back to Woman</a>
+            <div class="container-text__product_name"><h2>The Atelier Tailored Coat</h2></div>
+            <div class="container-text__review"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i> 3 Review(s) | <b><u><a href="#">ADD A REVIEV</a></u></b></div>
+            <div class="container-text__price"><b>$499.00</b></div>
+            <div class="container-text__inform">
                 <p><b>Availability :</b> <a href="#">In stock</a></p>
                 <p><b>Product Code :</b> <a href="#">#4657</a></p>
                 <p><b>Tags :</b> <a href="#">Fashion, Hood, Classic</a></p>
-                <div class="about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but-
+                <div class="container-text__about">Sleek, polished, and boasting an impeccably modern fit, this blue, 2-but-
                     ton Lazio suit features a notch lapel, flap pockets, and accompanying flat
                     front trousers—all in pure wool by Vitale Barberis Canonico.
                     <ul>
@@ -73,9 +71,9 @@
                     </ul>
                 </div>
             </div>
-            <div class="selectors">
+            <div class="container-text-selectors">
 
-                <div class="color"><b>color</b>
+                <div class="container-text-selectors__selector"><b>color</b>
                     <p><select name="color">
                         <option value="" selected hidden>Select Color</option>
                         <option value="gray">Gray</option>
@@ -83,7 +81,7 @@
                         <option value="yellow">Yellow</option>
                     </select></p>
                 </div>
-                <div class="size"><b>size</b>
+                <div class="container-text-selectors__selector"><b>size</b>
                     <p><select name="size">
                         <option selected hidden value="">Select Size</option>
                         <option value="51">51</option>
@@ -92,10 +90,10 @@
                     </select>
                     </p>
                 </div>
-                <div class="qty"><b>qty</b>
-                    <div class="qty_counter">
+                <div class="container-text-selectors__selector"><b>qty</b>
+                    <div class="container-text-selectors__counter">
                         <p><input type="number" name="qty" min="1" max="10" value="1">
-                        <div class="buttons">
+                        <div class="container-text-selectors__buttons">
                             <button>
                                 <div class="count_up"></div>
                             </button>
@@ -107,10 +105,14 @@
                     </div>
                 </div>
             </div>
-            <div class="product_buttons"></div>
+            <div class="container-text-buttons">
+                <div class="buttons">
+                    button.button
+                </div>
+            </div>
             <div class="share"></div>
         </div>
-    </div>
+
 </div>