diff --git a/css/slicez.css b/css/slicez.css
index 2c7af9b..41307f6 100644
--- a/css/slicez.css
+++ b/css/slicez.css
@@ -94,58 +94,8 @@ ul{
     z-index: 1;
     transition: var(--main-transition);
 }
-
-/* .main-title::before{
-    content: "";
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: var(--main-color);
-    position: absolute;
-    top: 50%;
-    left: -30px;
-    transform: translateY(-50%);
-}
-.main-title::after{
-    content: "";
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background-color: var(--main-color);
-    position: absolute;
-    top: 50%;
-    right: -30px;
-    transform: translateY(-50%);
-} */
-/* .main-title:hover::before{
-    z-index: -1;
-    animation: left-move 0.5s linear forwards;
-}
-.main-title:hover::after{
-    z-index: -1;
-    animation: right-move 0.5s linear forwards;
-}
-.main-title:hover{
-    color: var(--section-background);
-    border: 1px solid var(--section-background) ;
-    transition-delay: 0.5s;
-}
-.dots{
-    background-image: url('../imgs/dots.png');
-    width: 186px;
-    height: 204px;
-    background-repeat: no-repeat;
-    position: absolute;
-}
-.dots-up{
-    top: 200px;
-    right: 0;
-}
-.dots-down{
-    bottom: 200px;
-    left: 0;
-} */
 /* component main title */
+
 /* start header */
 header{
     background-color: white;
@@ -252,26 +202,16 @@ header .mega-menu{
     position: absolute;
     width: 30%;
     right: 0;
-    background-color: var(--section-background);
+    background-color:white;
     display: flex;
-    padding: 20px;
+    padding: 10px;
     gap: 40px;
     z-index: -1;
-    border-bottom: 4px solid var(--main-color);
+    border-bottom: 4px solid var(--section-background);
     top: calc(100% + 50px );
     opacity: 0;
     transition: top var(--main-transition), opacity var(--main-transition);
 }
-/* @media (max-width:767px) {
-    header .bars.mega .bar:hover {
-        
-        width: 30%; */
-        /* right: 0; */
-        
-        /* padding: 20px; */
-        /* gap: 40px;
-    }
-} */
 @media (max-width:767px){
     header .bars.mega{
         position: absolute;
@@ -335,14 +275,14 @@ header .mega-menu .links li::before{
         left: 0;
         width: 0;
         height: 100%;
-        background-color:/* #fafafa*/ var(--section-background); 
+        background-color:var(--text-color); 
         z-index: -1;
         transition: var(--main-transition);
     }
 }
 header .mega-menu .links :hover::before{
     width: 100%;
-    background-color: rgba(98, 76, 157, 0.249);
+    /* background-color: rgba(98, 76, 157, 0.249); */
 }
 header .mega-menu .links li a{
     color: var(--main-color);
@@ -366,17 +306,15 @@ header .mega-menu .links li a i{
     header .mega .links2 li a i{
         margin-right: 15px;
     }
-    /* header .bars .bar:hover .mega{
-        display: flex;
-    } */
 }
 /* end header */
 /* start landing */
 .landing{
     position: relative;
     background-color: var(--section-background);
-    /* background-image: url(../imgs/bk21.jpg); */
+    background-image: url(../imgs/landingBack.png);
     background-size: cover;
+    height: 100vh;
 }
 .landing .container{
     display: flex;
@@ -384,16 +322,13 @@ header .mega-menu .links li a i{
     align-items: center;
 }
 .landing .text{
-    flex: 1;
-    text-align: center;
-    align-items: center;
+    margin-top: 10%;
+    margin-left: 10%;
 }
 .landing .text h2{
     font-size: 40px;
     letter-spacing: 0px;
     margin: 0;
-    /* color: whitesmoke;
-     */
     color: var(--main-color);
 }
 .landing .text p{
@@ -401,7 +336,6 @@ header .mega-menu .links li a i{
     line-height: 1.7;
     margin: 5px 0 0;
     color: var(--text-color);
-    /* max-width: 500px; */
 }
 @media (max-width:991px){
     .landing .text h2{
@@ -426,7 +360,7 @@ header .mega-menu .links li a i{
 .landing .go-down{
     position: absolute;
     color: var(--main-color);
-    bottom: 25PX;
+    bottom: 75PX;
     left: 50%;
     transform: translateX(-50%);
     transition: var(--main-transition);
@@ -458,9 +392,6 @@ header .mega-menu .links li a i{
         text-align: center;
     }
 }
-/* .about .container .images{
-    flex: 1;
-} */
 .about .container .img{
     width: 300px;
     height: 300px;
@@ -482,7 +413,6 @@ header .mega-menu .links li a i{
     flex: 1;
     margin: 20px;
     padding: 10px;
-    /* background-color: #5348793e; */
     margin: 20px;
     padding: 30px;
     border-radius: 10px;
@@ -516,28 +446,111 @@ header .mega-menu .links li a i{
 .services{
     padding-top: var(--main-padding-top);
     padding-bottom: var(--main-padding-bottom);
-    background-color: var(--section-background);
+    background-color: whitesmoke;
     position: relative;
 }
 .services .container{
+    padding-top: var(--main-padding-bottom);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
     gap: 50px;
 }
+.services .main-title{
+    color: var(--section-background);
+}
+.services h4{
+    color: var(--section-background);
+    text-align: center;
+    margin: auto  0px;
+    display: block;
+    font-size: 40px;
+    font-weight: 600;
+    letter-spacing: 0.8;
+}
+.services p{
+    font-size: 20px;
+    color: var(--section-background);
+    text-align: center;
+    margin: 0px 40px;
+    padding: 30px 30px;
+}
 .services .box{
-    background-color:  #6a5c9c3e;
-    counter-increment: services;
+    background-image: url(../imgs/mainBackground.png);
+    background-size:cover;
+    width: 300px;
     transition: var(--main-transition);
     position: relative;
-    border-radius: 20px 0px 20px 0px;
-    height: max-content;
-    border-top: var(--main-color) 3px solid;
+    height: 500px;
+}
+.services .box .info h2{
+    z-index: -1;
+}
+.services .box h2{
+    color:var(--section-background);
+    margin-top: 80%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: 600;
+    letter-spacing: 0.8;
+}
+.services .box .mainBackground{
+    max-width: 100%;
+}
+.services .box .serviceImage{
+    max-width: 100%;
+    display: none;
+}
+.services .box:hover,
+.services .box:hover  h2,
+.services .box:hover p{
+    color:whitesmoke;
     transition: var(--main-transition);
 }
-/* .services .box:hover{
-    border-top: var(--main-color) 3px solid;
+.services .adCreactive:hover{
+    background-image: url(../imgs/adCreactive.png);
+}
+.services .socialMedia:hover{
+    background-image: url(../imgs/socialMedia.png);
+}
+.services .email:hover{
+    background-image: url(../imgs/email.png);
+}
+.services .webDesign:hover{
+    background-image: url(../imgs/webDesign.png);
+}
+.services .presentation:hover{
+    background-image: url(../imgs/presentation.png);
+}
+.services .packaging:hover{
+    background-image: url(../imgs/packaging.png);
+}
+.services .eBook:hover{
+    background-image: url(../imgs/eBook.png);
+}
+.services .printDesign:hover{
+    background-image: url(../imgs/printDesign.png);
+}
+.services .motionDesign:hover{
+    background-image: url(../imgs/motionDesign.png);
+}
+.services .illustration:hover{
+    background-image: url(../imgs/illustration.png);
+}
+.services .brandIdentity:hover{
+    background-image: url(../imgs/brandIdentity.png);
+}
+.services .concept:hover{
+    background-image: url(../imgs/concept.png);
+}
+.services .video:hover{
+    background-image: url(../imgs/video.png);
+}
+.services .digitalMarkiting:hover{
+    background-image: url(../imgs/digitalMarkiting.png);
     transition: var(--main-transition);
-}  */
+}
 .services .box > i{
     margin: 30px auto 15px;
     display: block;
@@ -574,14 +587,20 @@ header .mega-menu .links li a i{
 .portfolio .main-title{
     color: var(--section-background);
 }
+@media (min-width:767px) {
+    .portfolio .slider-container {
+        -webkit-mask: linear-gradient(90deg,#0000 ,#000 10% 90%,#0000)
+    }
+}
 .portfolio .image-container{
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px,1fr));
     gap: 10px;
     flex-wrap: wrap;
-    /* margin-top: 100px; */
     height: 70vh;
     background-color: whitesmoke;
+    z-index: 99;
+    scrollbar-width: none;
 }
 @media (max-width:767px){
     .portfolio .image-container{
@@ -641,14 +660,7 @@ header .mega-menu .links li a i{
     transition: 0.5s;
     border-radius: 20px;
     padding: 0px;
-    /* margin-right: 20%;
-    margin-left: 20%; */
 }
-/* @media (max-width:767px){
-.portfolio .image-container img{
-    max-width: 80%;
-}
-} */
 .portfolio .image-container .caption{
     position: absolute;
     text-align: center;
@@ -692,11 +704,6 @@ header .mega-menu .links li a i{
     margin: auto;
     overflow: hidden;
 }
-/* @media (max-width:767px){
-    .portfolio .slider-container {
-        width: 100%;
-    }
-} */
 .portfolio  .slider {
     display: flex;
     transition: transform 0.5s ease-in-out;
@@ -777,13 +784,16 @@ header .mega-menu .links li a i{
     from {opacity: .4}
     to {opacity: 1}
 }
+/*end portfolio*/
 
-
-/* end feedback */
+/* start feedback */
 .feedback {
     padding-top: var(--main-padding-top);
     padding-bottom: var(--main-padding-bottom);
-    background-color:whitesmoke;
+    background-image: url(../imgs/halfLogo.png);
+    background-size:contain;
+    background-repeat: no-repeat;
+    background-position-x: right;
     position: relative;
 }
 .feedback .main-title{
@@ -794,8 +804,6 @@ header .mega-menu .links li a i{
 }
 .feedback .container {
     display: flex;
-    /* justify-content: center;
-    align-items: center ; */
 }
 .feedback .box{
     position: relative;
@@ -821,7 +829,6 @@ header .mega-menu .links li a i{
         height:fit-content;
     }
 }
-
 .feedback .box::after{
     content: '';
     position: absolute;
@@ -845,8 +852,6 @@ header .mega-menu .links li a i{
     right: 180px;
     border: 5px solid var(--section-background);
 }
-
-
 @media (max-width:767px) {
     .feedback .box img{
         width: 70px;
@@ -908,7 +913,6 @@ header .mega-menu .links li a i{
 .feedback .sliderF-container {
     position: relative;
     width: 300%;
-    margin: auto;
     overflow: hidden;
 }
 .feedback .sliderF {
@@ -919,7 +923,6 @@ header .mega-menu .links li a i{
     min-width: 100%;
     height: 120%;
 }
-
 .feedback .prev-btnF,
 .feedback .next-btnF {
     position: absolute;
@@ -938,7 +941,7 @@ header .mega-menu .links li a i{
     .feedback .prev-btnF,
     .feedback .next-btnF{
         border: none;
-}
+    }
 }
 .feedback .prev-btnF {
     left: 0;
@@ -962,7 +965,6 @@ header .mega-menu .links li a i{
     from {opacity: .4}
     to {opacity: 1}
 }
-
 .feedback .dotsF{
     display: block;
     margin: 0 auto ;
@@ -985,51 +987,38 @@ header .mega-menu .links li a i{
     from {opacity: .4}
     to {opacity: 1}
 }
-/* #i1:checked ~ #slide1,
-#i2:checked ~ #slide2,
-#i3:checked ~ #slide3,
-#i4:checked ~ #slide4 {
-	z-index: 9;
-	animation: scroll 1s ease-in-out;
-}
-#i1:checked ~ #nav_slide #dot1 ,
-#i2:checked ~ #nav_slide #dot2 ,
-#i3:checked ~ #nav_slide #dot3 ,
-#i4:checked ~ #nav_slide #dot4 {
-    background-color: var(--main-color);
-} */
-
 /* end feedback */
 
-/* @media (max-width:767px){
-    .portfolio  .prev-btn ,
-    .portfolio  .next-btn {
-    display: none;
-}
-} */
-/* end work */
+/* start clients */
 .clients{
     background-color: var(--section-background);
 }
 .clients .logos{
     width: 100%;
-
 }
+.logosMobile{
+    display: none;
+}
+@media (max-width:767px){
+    .clients .logos{
+        display: none;
+    }
+    .logosMobile{
+        display: flex;
+        width: 100%;
+    }
+}
+/* end clients */
+
 /* start stats */
 .stats{
-    padding-top: var(--main-padding-top);
-    padding-bottom: var(--main-padding-bottom);
-    background-color: whitesmoke;
-    /* min-height: 300px; */
+    background-color: var(--section-background);
     position: relative;
 }
 .stats .container{
-    /* padding: 0;
-    margin: 0; */
-    /* margin-left: calc(100%-); */
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(360px,1fr));
-    gap: 0px;
+    gap: 30px;
 }
 @media (max-width:767px) {
     .stats .container{
@@ -1037,10 +1026,8 @@ header .mega-menu .links li a i{
     }
 }
 .stats h2 {
-    /* width: fit-content; */
     margin: 0 auto 50px;
     position: relative;
-
 }
 @media (max-width:767px) {
     .stats h2{
@@ -1049,43 +1036,17 @@ header .mega-menu .links li a i{
 }
 .stats .box{
     background-color: var(--section-background);
-    /* width: 100%; */
+    width: 100%;
     padding: 30px 10px;
     text-align: center;
     position: relative;
     transition: var(--main-transition);
-    /* overflow: hidden; */
 }
 @media (max-width:767px) {
     .stats .box{
         width: 100%;
     }
 }
-
-/* .stats .box::before,
-.stats .box::after{
-    content: "";
-    position: absolute;
-    width: 5px;
-    background-color: var(--main-color);
-    transition: 1s;
-    height: 0;
-} */
-/* .stats .box::before{
-    right: 0;
-    top: 0;
-} */
-/* .stats .box::after{
-    left: 0;
-    bottom: 0;
-} */
-/* .stats .box:hover::before,
-.stats .box:hover::after{
-    height: 100%;
-} */
-/* .stats .box:hover{
-    opacity: 1;
-} */
 .stats .box .number{
     display: block;
     font-size: 25px;
@@ -1098,6 +1059,7 @@ header .mega-menu .links li a i{
     font-size: 20px;
     color: whitesmoke;
 }
+/* end stats */
 
 /* start footer */
 .footer{
@@ -1122,26 +1084,13 @@ header .mega-menu .links li a i{
 .footer .box .social{
     display: flex;
 }
-/* @media (max-width:767px){
-    .footer .box .social{
-        justify-content: center ;
-        text-align: center;
-
-    }
-} */
 .footer .box .social li{
     margin-left: 8px;
 }
 .footer .box .social li .ico{
     width: 30px;
     height: 30px;
-    /* margin-left: 4px; */
 }
-/* .footer .box .social li .fa-linkedin{
-    color: var(--main-color);
-    border: 2px solid var(--main-color);
-    border-radius: 50%;
-} */
 .footer .box .social li a{
     background-color:var(--section-background) ;
     color:white;
@@ -1153,11 +1102,6 @@ header .mega-menu .links li a i{
     font-size: 20px;
     transition: var(--main-transition);
 }
-/* @media (max-width:767px){
-    .footer .box .social li a{
-        margin-left: 12px;
-    }
-} */
 .footer .box .line{
     display: flex;
     align-items: center;
@@ -1167,7 +1111,6 @@ header .mega-menu .links li a i{
 @media (max-width:767px){
     .footer .box .line{
         text-align: center;
-        /* justify-content: center; */
         width:max-content;
     }
 }
@@ -1196,7 +1139,6 @@ header .mega-menu .links li a i{
 .footer .box .line .info:hover,
 .footer .box .line a:hover{
     color: var(--text-color);
-
 }
 .footer .box .line .info{
     flex: 1;
@@ -1223,6 +1165,7 @@ header .mega-menu .links li a i{
     padding: 0 5px;
 }
 /* end footer */
+
 /* start animation */
 @keyframes up-down {
     0%,100%{
@@ -1248,52 +1191,4 @@ header .mega-menu .links li a i{
         transform: translateY(-5px);
     }
 }
-@keyframes left-move{
-    50%{
-        left: 0;
-        width: 12px;
-        height: 12px;
-    }
-    100%{
-        left: 0;
-        border-radius: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-@keyframes right-move{
-    50%{
-        right: 0;
-        width: 12px;
-        height: 12px;
-    }
-    100%{
-        right: 0;
-        border-radius: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-@keyframes moving-arrow {
-    100%{
-        transform: translateX(10px);
-    }
-}
-@keyframes flashing{
-    0% , 40%{
-        opacity: 1;
-    }
-    100%{
-        opacity: 0;
-        width: 200%;
-        height: 200%;
-    }
-}
-@keyframes change-background {
-    0% , 100%{
-        background-image: url('../imgs/discount-background1.jpg');
-    }
-    50%{
-        background-image: url('../imgs/discount-background2.jpg');
-    }
-}
\ No newline at end of file
+/* end animation */
\ No newline at end of file
diff --git a/imgs/adCreactive.png b/imgs/adCreactive.png
new file mode 100644
index 0000000..7fa6dd0
Binary files /dev/null and b/imgs/adCreactive.png differ
diff --git a/imgs/brandIdentity.png b/imgs/brandIdentity.png
new file mode 100644
index 0000000..3423f86
Binary files /dev/null and b/imgs/brandIdentity.png differ
diff --git a/imgs/concept.png b/imgs/concept.png
new file mode 100644
index 0000000..6675e2e
Binary files /dev/null and b/imgs/concept.png differ
diff --git a/imgs/digitalMarkiting.png b/imgs/digitalMarkiting.png
new file mode 100644
index 0000000..13680dd
Binary files /dev/null and b/imgs/digitalMarkiting.png differ
diff --git a/imgs/eBook.png b/imgs/eBook.png
new file mode 100644
index 0000000..66bdb41
Binary files /dev/null and b/imgs/eBook.png differ
diff --git a/imgs/email.png b/imgs/email.png
new file mode 100644
index 0000000..98b8277
Binary files /dev/null and b/imgs/email.png differ
diff --git a/imgs/halfLogo.png b/imgs/halfLogo.png
new file mode 100644
index 0000000..3a632fb
Binary files /dev/null and b/imgs/halfLogo.png differ
diff --git a/imgs/illustration.png b/imgs/illustration.png
new file mode 100644
index 0000000..2f12c1d
Binary files /dev/null and b/imgs/illustration.png differ
diff --git a/imgs/interior.png b/imgs/interior.png
new file mode 100644
index 0000000..b178158
Binary files /dev/null and b/imgs/interior.png differ
diff --git a/imgs/landingBack.png b/imgs/landingBack.png
new file mode 100644
index 0000000..4db298c
Binary files /dev/null and b/imgs/landingBack.png differ
diff --git a/imgs/logo.png b/imgs/logo.png
new file mode 100644
index 0000000..75b9f87
Binary files /dev/null and b/imgs/logo.png differ
diff --git a/imgs/mainBackground.png b/imgs/mainBackground.png
new file mode 100644
index 0000000..fe1b86f
Binary files /dev/null and b/imgs/mainBackground.png differ
diff --git a/imgs/motionDesign.png b/imgs/motionDesign.png
new file mode 100644
index 0000000..6b2e35a
Binary files /dev/null and b/imgs/motionDesign.png differ
diff --git a/imgs/packaging.png b/imgs/packaging.png
new file mode 100644
index 0000000..3b00814
Binary files /dev/null and b/imgs/packaging.png differ
diff --git a/imgs/presentation.png b/imgs/presentation.png
new file mode 100644
index 0000000..ce7683f
Binary files /dev/null and b/imgs/presentation.png differ
diff --git a/imgs/printDesign.png b/imgs/printDesign.png
new file mode 100644
index 0000000..a25e749
Binary files /dev/null and b/imgs/printDesign.png differ
diff --git a/imgs/slicez-UXU.png b/imgs/slicez-UXU.png
new file mode 100644
index 0000000..516de1c
Binary files /dev/null and b/imgs/slicez-UXU.png differ
diff --git a/imgs/socialMedia.png b/imgs/socialMedia.png
new file mode 100644
index 0000000..6968fc9
Binary files /dev/null and b/imgs/socialMedia.png differ
diff --git a/imgs/video.png b/imgs/video.png
new file mode 100644
index 0000000..3a986e0
Binary files /dev/null and b/imgs/video.png differ
diff --git a/imgs/webDesign.png b/imgs/webDesign.png
new file mode 100644
index 0000000..4916f63
Binary files /dev/null and b/imgs/webDesign.png differ
diff --git a/index.html b/index.html
index bd513e2..d3c24cf 100644
--- a/index.html
+++ b/index.html
@@ -15,11 +15,11 @@
     <title>Slicez</title>
 </head>
 <body>
-    <script src="./js/script.js"></script>
+    
     <!-- start header -->
     <header>
         <div class="container">
-            <a href="#"> <img class="logo" src="./imgs/slicez-UXUI$.png"></a>
+            <a href="#"> <img class="logo" src="./imgs/logo.png"></a>
             <label class="bar">
                 <input type="checkbox" class="bar"/>
                 <i class="fa-solid fa-bars"></i>
@@ -37,7 +37,7 @@
                                 <a href="#services"><i class="fa-solid fa-building"></i>Services</a>
                             </li>
                             <li>
-                                <a href="#work"><i class="fa-solid fa-square-check"></i>Our Works</a>
+                                <a href="#portfolio"><i class="fa-solid fa-square-check"></i>Our Works</a>
                             </li>
                             <li>
                                 <a href="#clients"><i class="fa-solid fa-users"></i>Clients</a>
@@ -69,7 +69,7 @@
                                     <a href="#services"><i class="fa-solid fa-building"></i>Services</a>
                                 </li>
                                 <li>
-                                    <a href="#work"><i class="fa-solid fa-square-check"></i>Our Works</a>
+                                    <a href="#portfolio"><i class="fa-solid fa-square-check"></i>Our Works</a>
                                 </li>
                                 <li>
                                     <a href="#clients"><i class="fa-solid fa-users"></i>Clients</a>
@@ -114,9 +114,6 @@ <h2>Welcome To SLICEZ World</h2>
                 <h3 class="header">About US...</h3>
                 <p>In 2019, Slicez launched amidst the challenges of the COVID-19 pandemic, demonstrating resilience and determination. Despite the difficult circumstances, the company focused on providing effective digital marketing support to clients, helping them navigate the changing business landscape. Slicez emphasizes the importance of adaptability and remains committed to offering top-notch design and marketing solutions within any budget. Positioned in a dynamic industry, the company is dedicated to outshining the competition, guided by a strong management team that prioritizes ongoing education and innovation. Unlike others, Slicez refuses to settle for mediocrity and tirelessly pursues the triumph of its customers, recognizing the intertwining of their success with its own journey.</p>
             </div>
-            <!-- <a href="#home" class="go-up">
-                <i class="fa-solid fa-angles-up fa-2x"></i>     
-            </a> -->
         </div>
     </div>
     <!-- end About -->
@@ -124,77 +121,92 @@ <h3 class="header">About US...</h3>
     <!-- start Services -->
     <div class="services" id="services">
         <h2 class="main-title">Services</h2>
+        <h4>You Can Select The Service That You Need Here.</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, fugiat? Iusto distinctio quam laborum laboriosam sed fuga illo quasi. Sint assumenda veniam libero dolore sapiente odio. Praesentium, nulla omnis? Officia!</p>
         <div class="container">
-            <div class="box">
-                <i class="fa-solid fa-bullhorn  fa-4x"></i>
-                <h3>Ad Creative</h3>
-                <a class="contButton" href="#contact">contact us</a>
-                
+            <div class="adCreactive box">
+                <div class="info">
+                    <h2>Ad Creative</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>       
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-hashtag fa-4x"></i> 
-                <h3>Social Media Creative</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="socialMedia box">
+                <div class="info">
+                    <h2>Social Media Creative</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>    
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-envelope fa-4x"></i>
-                <h3>Email Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="email box">
+                <div class="info">
+                    <h2>Email Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-display fa-4x"></i>
-                <h3>Web Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="webDesign box">
+                <div class="info">
+                    <h2>Web Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-person-chalkboard fa-4x"></i>
-                <h3>Presentation Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="presentation box">
+                <div class="info">
+                    <h2>Presentation Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-box-open"></i>
-                <h3>Packaging  Merch Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="packaging box">
+                <div class="info">
+                    <h2>Packaging<br>Merch Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-book fa-4x"></i>
-                <h3>eBook Digital Report Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="eBook box">
+                <div class="info">
+                    <h2>eBook Digital<br>Report Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-print fa-4x"></i>
-                <h3>Print Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="printDesign box">
+                <div class="info">
+                    <h2>Print Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-clapperboard"></i>
-                <h3>Motion Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="motionDesign box">
+                <div class="info">
+                    <h2>Motion Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-people-group fa-4x"></i>
-                <h3>Illustration Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="illustration box">
+                <div class="info">
+                    <h2>Illustration<br>Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-address-card fa-4x"></i>
-                <h3>Brand Identity Design</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="brandIdentity box">
+                <div class="info">
+                    <h2>Brand Identity Design</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-people-group fa-4x"></i>
-                <h3>Concept Creation</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="concept box">
+                <div class="info">
+                    <h2>Concept<br>Creation</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
-            <div class="box">
-                <i class="fa-solid fa-video fa-4x"></i>
-                <h3>Video Production</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            <div class="video box">
+            <div class="info">
+                <h2>Video<br>Production</h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> 
             </div>
-            <div class="box">
-                <i class="fa-solid fa-person-rays fa-4x"></i>
-                <h3>Digital Marketing <br> Consulting</h3>
-                <a class="contButton" href="#contact">contact us</a>
+            </div>
+            <div class="digitalMarkiting box">
+                <div class="info">
+                    <h2>Digital<br>Marketing<br> Consulting</h2>
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>  
+                </div>
             </div>
         </div>
     </div>
@@ -320,10 +332,8 @@ <h3>Digital Marketing <br> Consulting</h3>
     <div class="feedback" id="feedback">
         <h2 class="main-title">FeedBacks</h2>
         <div class="container">
-            
             <div class="sliderF-container">
                 <div class="sliderF">
-                    
                     <div class="slideF" id="slide1">
                     <div class="box">
                         <img src="./imgs/p5.jpg" alt="">
@@ -436,6 +446,7 @@ <h3>Mazaj food</h3>
     <!-- start Clients -->
     <div class="clients" id="clients">
         <img class="logos" src="./imgs/logos-slicez.png" alt="">
+        <img class="logosMobile" src="./imgs/slicez-UXU.png" alt="">
     </div>
     <!-- end Clients -->
 
@@ -457,33 +468,32 @@ <h3>Mazaj food</h3>
                     </li>
                     <li>
                         <a href="https://www.instagram.com/slice.z/?fbclid=IwAR0HUhjabW974hzEfc86_pwAp8ZssJE-bTjNbyCcyc3NGv-gcDShl_lQKfU"  target="_blank">
-                            <!-- <i class="fa-brands fa-instagram"></i> -->
                             <img class="ico" src="./imgs/SZ-19.png" alt="">
                         </a>
                     </li>
-                    <!-- <li>
+                    <li>
                         <a  href="https://www.linkedin.com/company/slicez/?viewAsMember=true"  target="_blank">
                             <i class="fa-brands fa-linkedin ico"></i>
                         </a>
-                    </li> -->
+                    </li>
                 </ul>
             </div>
             <div class="box">
                 <div class="line">
                     <i class="fa-solid fa-location-dot"></i>
-                    <div class="info">Algeria ,Eloude ,Moustafawi Center</div>
+                    <div class="info"><a href="https://maps.app.goo.gl/HKydJgj8XFLPg9Fk6" target="_blank">Algeria ,Eloude ,Moustafawi Center</a> </div>
                 </div>
                 <div class="line">
                     <i class="fa-solid fa-envelope"></i>
-                    <a href="mailto:CNT@SLICEZ.PRO">CNT@SLICEZ.PRO</a>
+                    <a href="mailto:CNT@SLICEZ.PRO" target="_blank">CNT@SLICEZ.PRO</a>
                 </div> 
                 <div class="line">
                     <i class="fa-solid fa-phone-volume"></i>
-                    <a href="tel:+213 775444324">+213 775444324</a>
+                    <a href="tel:+213 775444324" target="_blank">+213 775444324</a>
                 </div>
             </div>
         </div>
-        <p class="copyright">Made With <i class="fa-solid fa-heart"></i> By Bayan </p>
+        <p class="copyright">Made With <i class="fa-solid fa-heart"></i> By BayanDev </p>
     </div>
     <!-- end footer -->
 
@@ -491,5 +501,6 @@ <h3>Mazaj food</h3>
     <div class="container">
     <a href="#" class="btn btn-primary p-3 back-to-top"><i class="fa fa-angle-double-up"></i></a>
     </div>
+    <script src="./js/script.js"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index e638305..424943c 100644
--- a/js/script.js
+++ b/js/script.js
@@ -67,6 +67,20 @@ document.querySelectorAll('.dot').forEach((dot, index) => {
 });
 
 
+ // Back to top button
+$(window).scroll(function () {
+    if ($(this).scrollTop() > 100) {
+        $('.back-to-top').fadeIn('slow');
+    } else {
+        $('.back-to-top').fadeOut('slow');
+    }
+});
+$('.back-to-top').click(function () {
+    $('html, body').animate({scrollTop: 0}, 1500, 'easeInOutExpo');
+    return false;
+});
+
+