image changes

.gitignore

@@ -1,2 +1,3 @@
 .vscode
-.DS_Store
+.DS_Store
+.vscode

assets/css/mobile.css

@@ -31,6 +31,11 @@
 
 #about-us{
     margin: .2rem;
+    flex-direction: column;
+}
+
+#about-us .flex-items{
+    width: 100%;
 }
 
 #contact-us{

assets/css/style.css

@@ -12,7 +12,7 @@
     --bg-background:#211818;
     --text-color:#eee4e4;
     --nav-color: rgb(57, 69, 69,0.7);
-    --primary-color: rgb(24, 65, 177);
+    --primary-color: rgb(38, 90, 231);
     --secondary-color: rgb(197, 48, 48);
     --light-primary-color: rgb(121, 151, 235);
     --sports-color: #f99500;
@@ -43,7 +43,7 @@ a{
 /* header */
 header.hero{
 
-    background: url('../images/business-background-design/242.jpg') no-repeat center center/cover;;
+    background: url('../images/hero_back.jpg') no-repeat center center/cover;;
     height: 70vh;
     position: relative;
     color: #fff;
@@ -199,6 +199,11 @@ header.hero{
     #services .grid-title{
         grid-column: 1/3;
     }
+
+    #about-us img{
+        height: 10rem;
+        width: 16rem;
+    }
 }
 
 #services .grid-item{
@@ -225,6 +230,11 @@ header.hero{
     margin-top: .2rem;
 }
 
+#services .grid-item img{
+    width: 100%
+}
+
+
 
 /* keymarkets */
 
@@ -243,12 +253,30 @@ header.hero{
 }
 
 
-#key-markets .panel .map-img.eu{
-    background: url('../images/download.jpeg') no-repeat center center/cover;
+#key-markets .panel .map-img.ceu{
+    background: url('../images/centralEurope.gif') no-repeat center center/cover;
+    width: 100%;
+    height: 20rem;
+    border: 1px solid black;
+}
+
+#key-markets .panel .map-img.eeu{
+    background: url('../images/ee.webp') no-repeat center center/cover;
+    width: 100%;
+    height: 20rem;
+    border: 1px solid black;
+}
+
+#key-markets .panel .map-img.ch{
+    background: url('../images/china-map.gif') no-repeat center center/cover;
     width: 100%;
     height: 20rem;
     border: 1px solid black;
 }
+
+
+
+
 #key-markets .panel .map-img{
     margin-right: .4rem;
     border-radius: 10px;
@@ -266,10 +294,14 @@ header.hero{
     border-radius: 10px;
     padding: 1rem;
     display: flex;
-    justify-content: flex-start;
+    justify-content: space-between;
     gap: 3rem;
 }
 
+#about-us img {
+    height: 20rem;
+}
+
 #about-us .flex-items{
    display: flex;
    flex-direction: column;

index.html

@@ -11,6 +11,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     />
+    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico">
     <link
       href="https://fonts.googleapis.com/css2?family=Alata&family=Open+Sans:wght@300;400&family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Staatliches&display=swap"
       rel="stylesheet"
@@ -106,7 +107,7 @@ <h1>
       <section id="services" class="bg-light">
         <h2 class="grid-title">Our Services</h2>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/eletronics.avif" alt="" />
           <h3 class="text-ent bg-dark">Electronics</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus quia
@@ -117,7 +118,7 @@ <h3 class="text-ent bg-dark">Electronics</h3>
           </p>
         </div>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/pharma.avif" alt="" />
           <h3 class="text-tech bg-dark">Pharmaceuticals</h3>
           <p>
             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam eum
@@ -126,7 +127,7 @@ <h3 class="text-tech bg-dark">Pharmaceuticals</h3>
           </p>
         </div>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/cosmetics.avif" alt="" />
           <h3 class="text-sports bg-dark">Cosmetics</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus
@@ -136,7 +137,7 @@ <h3 class="text-sports bg-dark">Cosmetics</h3>
           </p>
         </div>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/retail-store.avif" alt="" />
           <h3 class="text-ent bg-dark">Retail Shops</h3>
           <p>
             Lorem, ipsum dolor sit amet consectetur adipisicing elit. Porro,
@@ -146,7 +147,7 @@ <h3 class="text-ent bg-dark">Retail Shops</h3>
           </p>
         </div>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/logistics.avif" alt="" />
           <h3 class="text-tech bg-dark">Logistics</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
@@ -157,7 +158,7 @@ <h3 class="text-tech bg-dark">Logistics</h3>
           </p>
         </div>
         <div class="grid-item">
-          <img src="./assets/images/logo.jpeg" alt="" />
+          <img src="./assets/images/importExport.avif" alt="" />
           <h3 class="text-sports bg-dark">Import/Export</h3>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem
@@ -176,24 +177,24 @@ <h2>Our Key Markets</h2>
           <button class="btn btn-secondary">China</button>
         </ul>
         <div class="panel eu ">
-          <div class="map-img eu"></div>
+          <div class="map-img ceu"></div>
           <p class="eu bg-dark">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
             vero pariatur fugit laborum consectetur. Ducimus quos earum, eius
             sit commodi quam ipsa ut. Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore inventore debitis doloribus fugit? Quos ea dolor earum autem recusandae, illum iure ducimus quaerat!
-            <button class="btn">Next</button>
+            <!-- <button class="btn">Next</button> -->
           </p>
         </div>
         <div class="panel ceu hide ">
-          <div class="map-img eu"></div>
+          <div class="map-img eeu"></div>
           <p class="eu bg-primary">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
             vero pariatur fugit laborum consectetur. Ducimus quos earum, eius
             sit commodi quam ipsa ut.
           </p>
         </div>
         <div class="panel ch hide"> 
-          <div class="map-img eu"></div>
+          <div class="map-img ch"></div>
           <p class="eu bg-secondary">
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
             vero pariatur fugit laborum consectetur. Ducimus quos earum, eius
@@ -209,7 +210,7 @@ <h2>About Us</h2>
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error aut dignissimos voluptates ipsa cumque fuga quam ipsum, numquam placeat nesciunt, beatae voluptatum id. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam iste quidem saepe obcaecati voluptate ipsam, doloremque beatae reiciendis, eum dignissimos nam, quisquam alias vero.
           </p>
         </div>
-        <img src="./assets/images/arving-logo.jpg" alt="">
+        <img src="./assets/images/ARVIN GROUP_logo 3_page-0001.jpg" alt="">
       </section>
 
       <section id="contact-us" class="bg-light">