alignments on the image in the login page section left side

src/pages/nearle/login.js

@@ -171,17 +171,14 @@ const Login = () => {
         }}
       >
         {/* Logo at the top-left corner */}
-        <Box
-          component="img"
+        <img
           src={expressImage}
           alt="Operate your dispatch"
-          sx={{
+          style={{
             position: 'absolute',
             top: 48,
             left: 48,
-            maxHeight: 48,
-            width: 'auto',
-            height: 'auto'
+            maxHeight: 60
           }}
         />
 
@@ -210,12 +207,12 @@ const Login = () => {
         />
 
         <Box sx={{ position: 'relative', maxWidth: 430 }}>
-          <Typography sx={{ fontSize: 34, fontWeight: 700, lineHeight: 1.18, letterSpacing: '-0.02em', mb: 2 }}>
+          <Typography sx={{ fontSize: 40, fontWeight: 700, lineHeight: 1.18, letterSpacing: '-0.02em', mb: 2 }}>
             Operate your dispatch,
             <br />
             end to end.
           </Typography>
-          <Typography sx={{ fontSize: 16, color: 'rgba(255,255,255,0.82)', mb: 4, lineHeight: 1.6 }}>
+          <Typography sx={{ fontSize: 17.5, color: 'rgba(255,255,255,0.85)', mb: 4, lineHeight: 1.6 }}>
             Orders, AI route optimisation, live rider tracking and billing — all in the NearlExpress operator console.
           </Typography>
 
@@ -237,7 +234,7 @@ const Login = () => {
                 >
                   ✓
                 </Box>
-                <Typography sx={{ fontSize: 14.5, color: 'rgba(255,255,255,0.9)' }}>{t}</Typography>
+                <Typography sx={{ fontSize: 16, color: 'rgba(255,255,255,0.9)' }}>{t}</Typography>
               </Stack>
             ))}
           </Stack>