Merge branch 'update'

consumerWebsite/public/css/learnmore.css

@@ -1,6 +1,102 @@
-img {
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+#map {
     display: block;
     margin: auto;
     max-width: 100%;
     max-height: 100vh;
-}
+}
+
+#map-container {
+    position: relative;
+}
+
+#north {
+    top: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#south {
+    top: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#east {
+    top: 50%;
+    left: 60%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+#west {
+    top: 50%;
+    left: 40%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+#central {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.info-box {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    font-size: 12px;
+}
+
+#north h3 {
+    color: #34d0db;
+}
+
+#south h3 {
+    color: #2ecc71;
+}
+
+#east h3 {
+    color: #3498db;
+}
+
+#west h3 {
+    color: #e74c3c;
+}
+
+.additional-info-box {
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 20px auto; /* Center horizontally */
+    max-width: 300px auto; /* Adjust the maximum width as needed */
+    text-align: center; /* Center text horizontally */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-item {
+    margin-bottom: 10px;
+}
+
+.info-label {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.info-value {
+    color: #007bff; /* Adjust the color as needed */
+}
+
+.info-box.active {
+    background-color: #213f6d; 
+    color: #fff;
+}