adding js

styles.css

@@ -157,6 +157,110 @@ footer a:hover {
     text-decoration: underline;
 }
 
+/* Contact Page Styles */
+.contact-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-top: 20px;
+}
+
+.contact-item {
+    background-color: #f5e1c4;
+    padding: 25px;
+    border-radius: 10px;
+    border-left: 5px solid #daa520;
+}
+
+.contact-item h3 {
+    color: #8b4513;
+    font-size: 22px;
+    margin-bottom: 15px;
+}
+
+.contact-form-section {
+    background-color: #fffaf0;
+}
+
+.contact-form {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    color: #8b4513;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.form-group input,
+.form-group select,
+.form-group textarea {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid #daa520;
+    border-radius: 5px;
+    font-family: 'Georgia', serif;
+    font-size: 16px;
+    background-color: #fff;
+}
+
+.form-group input:focus,
+.form-group select:focus,
+.form-group textarea:focus {
+    outline: none;
+    border-color: #8b4513;
+    box-shadow: 0 0 5px rgba(139, 69, 19, 0.3);
+}
+
+.submit-btn {
+    background-color: #8b4513;
+    color: white;
+    padding: 15px 30px;
+    border: none;
+    border-radius: 5px;
+    font-size: 18px;
+    font-family: 'Georgia', serif;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.submit-btn:hover {
+    background-color: #daa520;
+}
+
+/* About Page Styles */
+.story-origins,
+.story-mission,
+.story-team {
+    background-color: #fffaf0;
+}
+
+.values-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 25px;
+    margin-top: 25px;
+}
+
+.value-item {
+    background-color: #f5e1c4;
+    padding: 25px;
+    border-radius: 10px;
+    border-left: 5px solid #daa520;
+}
+
+.value-item h3 {
+    color: #8b4513;
+    font-size: 22px;
+    margin-bottom: 15px;
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
     .main-nav ul {
@@ -175,4 +279,9 @@ footer a:hover {
     section {
         padding: 20px;
     }
+    
+    .contact-details,
+    .values-list {
+        grid-template-columns: 1fr;
+    }
 }