Select Box Drop Down Icon Changed

src/App.css

@@ -33,3 +33,18 @@ input::-webkit-inner-spin-button {
 ::-webkit-scrollbar-thumb:hover {
   background: #b30000; 
 }
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z' fill='gray' /><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-repeat: no-repeat;
+  background-position-x: 1%;
+  background-position-y: 50%;
+  border: 1px solid #dfdfdf;
+  border-radius: 2px;
+  /* margin-right: 2rem; */
+  padding: 1rem;
+  padding-right: 2rem;
+  cursor: pointer;
+}

src/view/services/index.js

@@ -220,9 +220,9 @@ const Services = ({
                 </g>
               </svg>
             </div>
-            <div className="flex items-center  mx-4 pl-6 border-l-2 border-gray-300">
+            <div className="flex items-center   mx-6 pl-6 border-l-2 border-gray-300">
               <div
-                className={`flex w-32 border-2 p-2 mx-2 justify-center items-center rounded-md cursor-pointer
+                className={`flex w-32 border-2 p-2 px-4  mx-2 justify-center items-center rounded-md cursor-pointer
                       hover:border-red52 hover:text-red52 hover:bg-pinkF5 
                     ${filterCheck == 'Online'
                     ? "border-red52 text-red52 bg-pinkF5"