feat: add contact form and about page accordion feature

src/styles/about.css

@@ -9,20 +9,25 @@ body {
   max-width: 1000px;
   margin: 30px auto;
   padding: 0 20px;
-  color: #495057;
+  color: var(--text-color);
   line-height: 1.6;
 }
 
 .about-section h1,
 .about-section h2 {
-  color: #495057;
-  margin-bottom: 20px;
+  color: var(--text-color);
+  margin-bottom: var(--margin-medium);
+}
+
+.i-am {
+  color: #ea7e0b;
+  font-weight: bold;
 }
 
 .about-section h1 {
   font-size: 2.5rem;
   text-align: center;
-  margin-bottom: 20px;
+  margin-bottom: var(--margin-medium);
 }
 
 .about-section h2 {
@@ -32,11 +37,18 @@ body {
 .about-section p {
   margin-bottom: 5px;
   font-size: 1.05rem;
-  text-align: left;
+  text-align: center;
+}
+
+.click {
+  font-weight: bold;
+  color:#ea7e0b;
+  margin-top: 20px;
+  text-align: center;
 }
 
 .about-section a {
-  color: #2e97be;
+  color: var(--primary-color);
   text-decoration: underline;
 }
 
@@ -44,112 +56,161 @@ body {
   text-decoration: none;
 }
 
-/*? ↓ Contact Section Styles ↓ */
-
-.contact-section {
-  max-width: 1200px;
-  margin: 80px auto;
-  padding: 0 20px;
-  color: #495057;
-  background-color: #d3e9f1;
-}
-
-.contact-section h2 {
-  font-size: 2rem;
-  margin: 20px 0px;
-  text-align: center;
-}
-
-.contact-section p {
-  text-align: center;
-  margin-bottom: 40px;
-  font-size: 1.1rem;
-  line-height: 1.5;
-}
-
-/*? ↓ Contact Form Styles ↓ */
-
-#contact-form {
-  background-color: #ffffff;
-  border: 1px solid #dee2e6;
-  border-radius: 10px;
-  padding: 30px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
-}
-
-#contact-form fieldset {
-  border: none;
-  padding: 0;
-}
-
-#contact-form legend {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 25px;
-  color: #2e97be;
-  text-align: center;
-}
-
-#contact-form label {
-  display: block;
-  margin-bottom: 8px;
+.accordion {
   margin-top: 20px;
+}
+
+.accordion-item {
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+
+.accordion-header {
+  background-color: #f7f7f7;
+  padding: 15px;
+  cursor: pointer;
+  border-bottom: 1px solid #ddd;
+}
+
+.accordion-content {
+  display: none; /* Hide content by default */
+  padding: 15px;
+  background-color: #fff;
+}
+
+.w3-acag21 {
+  color: #ea7e0b;
+}
+
+/*? ↓ Contact Section Styles ↓ */
+/* Base styles */
+.contact-module {
+  max-width: 1000px;
+  margin: 2rem auto;
+  padding: 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  color: #333;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Flex layout for side-by-side fields */
+.form-sections {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.contact-fields,
+.message-submit {
+  flex: 1;
+  min-width: 320px;
+}
+
+/* Fieldset styling */
+fieldset {
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+legend {
+  padding: 0 0.5rem;
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+/* Input groups */
+.contact-fields > div,
+.message-field {
+  margin-bottom: 1rem;
+}
+
+label {
+  display: block;
+  margin-bottom: 0.4rem;
   font-weight: 500;
 }
 
-#contact-form input,
-#contact-form textarea {
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+textarea {
   width: 100%;
-  padding: 12px;
-  margin-top: 5px;
-  border: 1px solid #dee2e6;
-  border-radius: 8px;
-  box-sizing: border-box;
-  font-size: 1rem;
-  background-color: #f8f9fa;
+  padding: 0.6rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 0.95rem;
+  transition: border-color 0.3s ease;
 }
 
-#contact-form input:focus,
-#contact-form textarea:focus {
-  border-color: #2e97be;
+input:focus,
+textarea:focus {
+  border-color: #007acc;
   outline: none;
-  background-color: #fff;
-  box-shadow: 0 0 0 3px rgba(46, 151, 190, 0.2);
 }
 
-#contact-form small {
-  display: block;
-  margin-top: 5px;
-  color: #868e96;
-  font-size: 0.875rem;
+/* Required asterisk */
+.req-ask {
+  color: red;
+  margin-left: 0.2rem;
 }
 
-#contact-form .radio-group {
+/* Preferred method section */
+.preferred-method {
+  margin-top: 1rem;
+  text-align: center;
+}
+
+.radio-group {
   display: flex;
-  gap: 20px;
-  margin-top: 10px;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-top: 0.5rem;
 }
 
-#contact-form .radio-group label {
-  display: inline-block;
-  margin-top: 0;
+.radio-group label {
   font-weight: normal;
 }
 
-#contact-form button[type="submit"] {
-  margin-top: 30px;
-  padding: 12px 25px;
+/* Button */
+button[type="submit"] {
+  margin:20px 0px 20px 0px;
+  padding: 8px 25px;
   background-color: #ea7e0b;
-  color: #fff;
+  color: white;
   border: none;
   border-radius: 50px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
   font-size: 1rem;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
 }
 
-#contact-form button[type="submit"]:hover {
-  background-color: #2781a5;
-  box-shadow: 0 4px 8px rgba(46, 151, 190, 0.2);
+button[type="submit"]:hover {
+  background-color: #2e97be;
 }
+
+/* Responsive tweaks */
+@media (max-width: 768px) {
+  .form-sections {
+    flex-direction: column;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+.form-note {
+  color: red;
+  font-size: 0.9rem;
+  text-align: left;
+}