update style.css: implement sliding image animation and adjust styles…

… for improved layout and visual appeal

things/css/style.css

@@ -208,47 +208,44 @@ nav ul li a {
 
 
 /* slideshow*/
+
+
+@keyframes slide-horizontal {
+    0% { transform: translateX(0); }
+    20% { transform: translateX(-300px); }
+    40% { transform: translateX(-600px); }
+    60% { transform: translateX(-300px); }
+    80% { transform: translateX(0); }
+}
+/* slideshow */
+
+
+
 .sliding-img {
     overflow: hidden;
-    width: auto; /* Adjust width as needed */
-    height: auto; /* Adjust height as needed */
+    width: 300px; /* Adjust for the number of options */
     position: relative;
-    border: 2px solid #333;
+
     display: flex;
     align-items: center;
 }
 
 .sliding-img .img-wrapper {
     display: flex;
-    width: calc(300px *2); /* Adjust for the number of options */
+    width: calc(300px ); /* Adjust for the number of options */
     animation: slide-horizontal 30s ease-in-out infinite;
 }
 
 .sliding-img div {
     flex: 0 0 300px; /* Matches the container width */
-    text-align: center;
-}
 
-@keyframes slide-horizontal {
-    0% { transform: translateX(0); }
-    20% { transform: translateX(-300px); }
-    40% { transform: translateX(-600px); }
-    60% { transform: translateX(-900px); }
-    80% { transform: translateX(-600px); }
-    90% { transform: translateX(-300px); }
-    100% { transform: translateX(0); }
 }
-/* slideshow */
-
-
-
-
 .services-info img {
     display: flex;
     align-self: center;
     height: 200px;
-    padding: 1em;
-
+    border-radius: 1em;
+    border: 3px solid #442020;
 }