m

css/global.css

@@ -1,7 +1,59 @@
 body {
     background-color: black;
     font-family: Roboto, serif;
+    margin: 0;
+    padding: 0;
+  }
+
+.wrapper {
+    max-width: 1600px;
     margin: 0 auto;
+    padding: 0 40px; 
     box-sizing: border-box;
-    max-width: 1400px;
+}
+.icon-small-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 23px;  
+    height: 23px; 
+    background-color: #000; 
+    border-radius: 50%; 
+    position: relative;
+    left: -10px;
+}
+
+.icon-small-container img {
+    width: 80%; 
+    height: 50%; 
+
+
+}
+.icon-big-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;  
+    height: 50px; 
+    background-color: #000; 
+    border-radius: 50%; 
+}
+
+.icon-big-container img {
+    width: 80%; 
+    height: 50%; 
+    object-fit: contain; 
+}
+.icon-big-container .white {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;  
+    height: 50px; 
+    background-color: #ffffff; 
+    border-radius: 50%; 
+}
+
+.white-background {
+    background-color: #fff; 
 }

css/style.css

@@ -1,36 +1,32 @@
 
 .centered-left-image {
     position: absolute;
-    top: -15; /* Adjust as needed to position the image higher */
-    left: -230px; /* Adjust as needed to position the image further left */
-    width: 150px; /* Adjust the width as needed */
+    top: -15px; 
+    left: -150px; 
+    width: 150px; 
     height: auto; 
-    z-index: -1; /* Place the image behind other content */
+    z-index: -1; 
 }
 body.home-page {
     background-color: #141414;
 }
-.icon-container {
+.icon-small-container {
     display: flex;
     justify-content: center;
     align-items: center;
-}
-
-.icon {
-    width: 40px;
-    height: 40px;
-    background-color: #000;
+    width: 23px; 
+    height: 23px; 
+    background-color: #000; 
     border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-right: 0.5em; /* Adjust spacing between icon and text */
+    position: relative;
+    left: -10px;
 }
 
-.icon img {
-    max-width: 50%; /* Ensure the image fits within the container */
-    max-height: 50%;
-    fill: #fff; /* Assuming the icon is an SVG and you want to change its color */
+.icon-small-container img {
+    width: 80%; 
+    height: 50%; 
+
+
 }
 
 
@@ -98,8 +94,8 @@ nav ul li a {
     grid-template-columns: 1fr 1fr;
     align-items: start;
     padding: 2em 0;
-    position: relative;
-    gap: 4em;
+    /*position: relative;*/
+    gap: 2em;
 
 }
 .left-homecontent {
@@ -130,10 +126,10 @@ nav ul li a {
     align-items: center;
 }
 
-.btn .icon {
+/*.btn .icon {
     margin-right: 0.5em;
     max-height: 20px; 
-}
+}*/
 .left-homecontent h2 {
     margin-top: 5em;
     font-size: 1em;
@@ -152,22 +148,22 @@ nav ul li a {
 }
 .right-homecontent {
     position: relative;
-    flex: 1;
     display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
+    justify-content: center; /* Centering the content */
+    align-items: center; /* Centering the content */
+    padding: 2em; /* Adding padding if necessary */
 }
 
 .homepage-office {
-    width: 130%; /* Adjust width as needed */
+    width: 200%;
     height: auto;
-    position: absolute;
-    left: -20%; /* Adjust to position within the container */
-    top: -10%; /* Adjust to position higher */
+    position: relative;
+    right: 0; /* Adjust as needed */
+    top: 0; /* Adjust as needed */
     z-index: 0;
 }
 .footer {
-    background-color: #141414;
+    background-color: #000000;
     color: #fff;
     padding: 2em;
     font-family: Georgia, 'Times New Roman', Times, serif;;
@@ -351,16 +347,17 @@ nav ul li a {
     background-color: #f7f7f7; 
     padding: 2em;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     text-align: left; /* Align text to the left inside boxes */
     font-family: 'Times New Roman', Times, serif
 
 }
 
-.service-box img {
+
+
+/*.service-box img {
     max-width: 40px;
     margin-bottom: 1em;
-}
+}*/
 
 .service-box h4 {
     font-size: 1.4em;
@@ -456,73 +453,11 @@ nav ul li a {
     align-items: center;
 }
 
-.cta-button .icon {
+/*.cta-button .icon {
     margin-right: 0.5em;
     max-height: 20px;
-}
-.process-section {
-    background-color: #ffffff;
-    color: #000000;
-    padding: 4em 2em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-sizing: border-box;
-}
+}*/
 
-.process-container {
-    max-width: 900px;
-    width: 100%;
-    margin: 0 auto;
-    text-align: center;
-    padding: 0 2em;
-}
-
-.process-heading h5 {
-    font-size: 1.8em;
-    color: #64CCC5;
-    margin-bottom: 0.5em;
-}
-
-.process-heading h2 {
-    font-size: 2.5em;
-    margin-bottom: 2em;
-}
-
-.process-grid {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr); /* 4 columns grid */
-    gap: 2em;
-    align-items: stretch;
-}
-
-.process-box {
-    background-color: #f7f7f7;
-    padding: 2em;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    text-align: left;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-}
-
-.process-box img {
-    width: 50px;
-    margin-bottom: 1em;
-}
-
-.process-box h4 {
-    font-size: 1.5em;
-    margin-bottom: 0.5em;
-    color: #141414;
-}
-
-.process-box p {
-    font-size: 1em;
-    color: #242323;
-}