#2992 done with changes

assets/css/ContactUs.css

@@ -1,59 +1,71 @@
-.footer-widget-pb-100 {
-    background-color: rgb(0, 59, 117);
-}
+/* General background for footer and contact section */
+.footer-widget-pb-100, 
 .col-lg-3-col-md-5-col-sm-5 {
     background-color: rgb(0, 59, 117);
 }
-.contact-custom-margin-big {
-    background-color: rgb(0, 59, 117);
-    width: 300px;
-    margin: 20% 0 0 -7%;
-}
+
+/* Contact section styling */
 .contact {
-    width:1200px;
-    height: auto;
+    width: 100%;
+    max-width: 1200px;
     background-color: rgb(255, 255, 255);
     align-self: center;
-    margin: 13% 0 0 10%;
+    margin: 10% auto;
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding: 20px;
 }
+
+/* Contact information section */
 .contact .informations {
     background-color: rgb(250, 250, 250);
     box-shadow: 5px 5px 10px grey;
-    height: 450px;
-    width: 1000px;
-    margin: 5%;
+    width: 100%;
+    max-width: 1000px;
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    padding: 20px;
 }
+
+/* Find us section in contact */
 .informations .findus {
-    height: 500px;
-    width:350px;
+    width: 350px;
     background-color: rgb(18, 18, 95);
-    margin: -2.5% 0 0 5%;
     box-shadow: 5px 5px 10px grey;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 20px;
 }
-.findus p, .findus h3 {
+
+/* Text styling inside the 'find us' section */
+.findus p, 
+.findus h3 {
     color: white;
-    margin:  0 0 10%;
+    margin: 0 0 10px;
 }
+
+/* Form title */
 .form h3 {
     text-align: center;
-    margin: 5%;
+    margin: 5% 0;
 }
+
+/* Form styling */
 .informations form {
     display: flex;
     flex-direction: column;
-    margin: 5% 0 0 10%;
+    margin-left: 10%;
 }
-.informations form input {
-    width: 500px;
+
+/* Input field styling */
+.informations form input, 
+.informations form textarea {
+    width: 100%;
+    max-width: 500px;
     height: 40px;
     margin-bottom: 5%;
     font-size: 18px;
@@ -62,15 +74,13 @@
     border-radius: 5px;
     padding-left: 4%;
 }
+
+/* Textarea specific styling */
 .informations form textarea {
-    width: 500px;
     height: 100px;
-    font-size: 18px;
-    border: none;
-    border-bottom: 2px solid black;
-    border-radius: 5px;
-    padding-left: 4%;
 }
+
+/* Submit button styling */
 .form button {
     width: 100px;
     height: 40px;
@@ -81,3 +91,50 @@
     border: none;
     border-radius: 10px;
 }
+
+/* Media Query for Small Screens */
+@media (max-width: 768px) {
+    .contact {
+        margin: 10% 5%;
+        width: 90%;
+    }
+
+    .informations {
+        flex-direction: column;
+        width: 100%;
+    }
+
+    .informations form {
+        margin: 5% 0;
+    }
+
+    .informations form input, 
+    .informations form textarea {
+        width: 100%;
+    }
+
+    .form button {
+        margin: 3% 0 0 40%;
+    }
+}
+
+/* Media Query for Very Small Screens */
+@media (max-width: 450px) {
+    .contact {
+        margin: 15% 5%;
+    }
+
+    .informations .findus {
+        width: 100%;
+        margin: 10px 0;
+    }
+
+    .informations form {
+        margin-left: 0;
+    }
+
+    .form button {
+        width: 90%;
+        margin: 10px 0;
+    }
+}

assets/css/about(inlines).css

@@ -1,12 +1,12 @@
 #progressBar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 0%;
-    height: 8px;
-    background-color: #f76b45;
-    z-index: 9999;
-  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 0%;
+  height: 8px;
+  background-color: #f76b45;
+  z-index: 9999;
+}
 .circle {
 position: absolute;
 width: 25px;
@@ -29,7 +29,7 @@ z-index: 9999;
 
 @media (max-width: 720px) {
 .circle-container {
-  display: none;
+display: none;
 }
 }
 
@@ -70,17 +70,20 @@ transform: scaleX(1); /* Shrink to zero width */
 }
 
 .blog-content {
-  text-align: left;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: 80%;
-  /* Adjust this value to increase or decrease the margins */
+text-align: left;
+margin-left: auto;
+margin-right: auto;
+max-width: 80%;
+/* Adjust this value to increase or decrease the margins */
 }
 
 @media (max-width:768px) {
-  .blog-content{
-    max-width: 100%;
-  }
+.blog-content{
+  max-width: 100%;
+}
+
+
+
+
 
-
 }

assets/css/about.css

@@ -171,7 +171,80 @@
   visibility: hidden;
 }
 
+@media (max-width: 768px) {
+  /* Title Adjustments */
+  .card h2 {
+      font-size: 1.25rem; /* Adjust size for readability on mobile */
+      margin-bottom: 15px; /* Reduced margin */
+      text-align: center; /* Center-align titles */
+  }
+
+  /* Flex Container Adjustments for row-card */
+  .row-card {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 15px; /* Add spacing between items */
+      justify-content: center; /* Center items on smaller screens */
+  }
+
+  /* Adjust column layout for smaller screens */
+  .col-md-4 {
+      flex: 1 1 100%; /* Ensure it takes full width on small screens */
+      max-width: 100%;
+      padding: 10px;
+  }
+
+  /* Full-width services */
+  .service {
+      width: 100%;
+      padding: 20px;
+      box-sizing: border-box; /* Include padding in width calculation */
+  }
+
+  /* Adjust shadow cards */
+  .shadow1, .shadow2 {
+      width: 100%;
+      left: 0;
+      box-sizing: border-box; /* Include padding and margin in width calculation */
+  }
+
+  /* Adjust the layout of good-card */
+  .good-card {
+      display: flex;
+      flex-direction: column; 
+      gap: 15px; /* Add gap between items */
+      margin-top: 20px; /* More space between sections */
+  }
+
+  /* Ensure white-card and color-card are full-width */
+  .white-card, .color-card {
+      width: 100%;
+      max-width: 100%;
+      padding: 20px;
+      box-sizing: border-box; /* Ensure padding doesn't affect width */
+  }
+
+  /* Make sure images are responsive */
+  .card-image {
+      width: 100%; /* Ensure images fit their container */
+      height: auto; /* Maintain aspect ratio */
+  }
+
+  /* Ensure button sizes are mobile-friendly */
+  .button {
+      width: 100%;
+      padding: 12px;
+      font-size: 1.1rem; /* Make buttons larger and easier to tap */
+      box-sizing: border-box;
+  }
+}
+
+
+.social-icons{
+
+
 .social-icons {
+
   text-align: left;
 }
 
@@ -524,4 +597,4 @@ body.dark-mode .about-section {
   .service p {
     font-size: 14px;
   }
-}
+}