Update style.css

static/style.css

@@ -513,3 +513,90 @@ footer {
 .tab {
   display: inline-block;
 }
+
+body {
+    background-color: #ffffff; /* White background */
+    text-align: center; /* Center-align content */
+    margin: 0; /* Remove default margin */
+    padding: 0; /* Remove default padding */
+    font-family: 'Nico Moji', sans-serif;
+}
+
+h1 {
+    font-size: 36px; /* Adjust the font size as needed */
+    margin-top: 100px; /* Add spacing from the top */
+}
+
+#heading {
+    font-family: 'Nico Moji', sans-serif; /* Use the Nico Moji font */
+    font-size: 60px; /* Adjust the font size as needed */
+    font-weight: 400; /* Make the text bold */
+    color: #000000; /* Black color */
+    margin-top: 20px; /* Add spacing from the top */
+}
+
+.dual-headings {
+    display: flex; /* Use flexbox to create side-by-side headings */
+    justify-content: center; /* Center the headings horizontally */
+    margin-top: 20px; /* Add spacing from the top */
+    font-size: 50px;
+}
+
+.dual-heading {
+    flex: 1; /* Allow headings to share available space equally */
+    padding: 20px; /* Add padding around each heading */
+    /*border: 1px solid #000000; /* Add a border for visual separation (optional) */
+}
+
+.team-member {
+    width: 291px; /* Set the width */
+    height: 291px; /* Set the height */
+    max-width: 100%; /* Ensure images don't exceed their container */
+    height: auto; /* Maintain aspect ratio */
+    border-radius: 50%; /* Make the image circular */
+    margin: 20px; /* Add spacing around each image */
+    
+}
+
+.team-member-container {
+    flex-basis: calc(50% - 40px); /* Set width for 2 items per row, with spacing */
+    display: flex; /* Use flexbox to control image and caption layout */
+    flex-direction: column; /* Stack image and caption vertically */
+    align-items: center; /* Center-align image and caption */
+    margin: 20px; /* Add spacing around each image container */
+}
+
+/* Media query for adjusting font size and position */
+@media screen and (max-width: 1440px) {
+    #heading {
+        font-size: 60px; /* Increase font size for wider screens */
+        left: 378px; /* Adjust left position for wider screens */
+    }
+    .dual-heading {
+        font-size: 50px;
+        left: 299px;
+    }
+    .caption {
+        font-size: 20px; /* Adjust caption font size for wider screens */
+    }
+}
+
+/* Media queries for responsiveness */
+@media screen and (max-width: 768px) {
+    .team-member-container {
+        flex-basis: calc(100% - 40px); /* Set width for 1 item per row, with spacing */
+    }
+}
+
+.sub-h1 {
+    background-color: #000000; /* Black strip background color */
+    color: #ffffff; /* White text color */
+    padding: 2px 0; /* Add padding to top and bottom */
+    font-size: 45px;
+}      
+
+.caption {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 20px; /* Caption font size */
+    margin-top: 5px; /* Adjust the spacing between image and caption */
+}