Merge branch 'main' into main

about.css

@@ -1,48 +1,97 @@
-body {
-    font-family: 'Arial', sans-serif;
+* {
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
-    background-color: #f4f4f4;
-    color: #333;
 }
 
-.container {
-    width: 80%;
-    margin: 20px auto;
-    padding: 20px;
-    background: white;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
+body {
+    font-family: 'Arial', sans-serif;
+    line-height: 1.6;
+    background-color: #f7f9fc;
+    color: #333;
 }
 
-h1,
-h2 {
+header {
+    background: #4a4e69;
+    color: white;
+    padding: 20px 0;
     text-align: center;
-    color: #2C3E50;
 }
 
-p {
-    line-height: 1.6;
-    margin-bottom: 20px;
-    text-align: justify;
+header nav ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+header nav ul li {
+    display: inline;
+    margin: 0 15px;
 }
 
-.banner {
-    background-color: #7ab7df;
+header nav ul li a {
     color: white;
-    padding: 10px 0;
-    margin-bottom: 20px;
-    text-align: center;
-    border-radius: 8px 8px 0 0;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s;
+}
+
+header nav ul li a:hover {
+    text-decoration: underline;
+    color: #d9d9d9;
 }
 
-.banner h1 {
+h1 {
     margin: 0;
-    font-size: 2em;
+    font-size: 2.5em;
+}
+
+.intro, .benefits, .features, .testimonials, .cta {
+    padding: 20px;
+    background: #ffffff;
+    margin: 20px;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.intro:hover, .benefits:hover, .features:hover, .testimonials:hover, .cta:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
+}
+
+.intro {
+    border-left: 5px solid #4a4e69;
+}
+
+h2, h3 {
+    margin-bottom: 15px;
+    color: #4a4e69;
 }
 
-.section {
+ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul li {
+    margin-bottom: 10px;
+    padding-left: 20px;
+    position: relative;
+}
+
+ul li:before {
+    content: "✔";
+    color: #4a4e69;
+    position: absolute;
+    left: 0;
+}
+
+blockquote {
     margin: 20px 0;
+    padding: 10px;
+    background: #f0f4f8;
+    border-left: 5px solid #4a4e69;
+    font-style: italic;
 }
 
 .section p{
@@ -55,44 +104,62 @@ p {
     justify-content: space-around;
     margin-top: 20px;
 }
+blockquote p {
+    margin: 0;
+}
 
-.card {
-    background: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 20px;
-    width: 30%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.cta {
     text-align: center;
-    margin: 0 10px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    background: #4a4e69;
+    color: white;
+    border-radius: 5px;
 }
 
-.card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+.cta-button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin-top: 15px;
+    background: #ffffff;
+    color: #4a4e69;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background 0.3s, color 0.3s, transform 0.3s;
 }
 
+.cta-button:hover {
+    background: #4a4e69;
+    color: white;
+    transform: translateY(-2px);
+}
 
-.card h3 {
-    color: #2C3E50;
-    margin-bottom: 10px;
+footer {
+    text-align: center;
+    padding: 10px 0;
+    background: #4a4e69;
+    color: white;
+    position: relative;
+    bottom: 0;
+    width: 100%;
 }
 
-.card p {
-    color: #555;
-    font-size: 1em;
+footer nav ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 10px 0 0 0;
+}
+
+footer nav ul li {
+    display: inline;
+    margin: 0 15px;
 }
 
-/* Responsive design for smaller screens */
-@media (max-width: 768px) {
-    .cards {
-        flex-direction: column;
-        align-items: center;
-    }
+footer nav ul li a {
+    color: white;
+    text-decoration: none;
+    transition: color 0.3s;
+}
 
-    .card {
-        width: 80%;
-        margin-bottom: 20px;
-    }
-}
+footer nav ul li a:hover {
+    text-decoration: underline;
+    color: #d9d9d9;
+}