/* Reset default margin and padding */
body, h1, h2, h3, h4, p {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Taviraj', serif; /* Set body text font-family to Taviraj */
  font-size: 18px;
  margin: 0 80px 0; /* Updated margin: 0 at the top, 80px on left and right sides */
}


/* General styles for paragraphs */
p {
  font-family: 'Taviraj', serif; /* Set paragraphs font-family to Taviraj */
  color: #000000;
  font-weight: normal;
  font-size: 16px;
  margin: 24px 10px;
}


/* General styles for headings */
h1, h2, h3, h4 {
  font-family: 'Work Sans', sans-serif; /* Set headings font-family to Work Sans */
}

/* Individual heading styles */
h1 {
  font-size: 36px;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 24px;
}

.navbar {
  background-color: #434F5B;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 2;
}


.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navbar li {
  margin: 0 20px;
}


a {
  text-decoration: none;
  color: inherit; /* Inherit color from parent */
}


.navbar .nav-link:hover {
  color: #ABD060;
}

.project-title {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

.project-summary {
  font-size: 16px;
  font-weight: lighter;
  text-align: center;
  margin-bottom: 30px;
}

.prototype-container {
  text-align: center; /* Center-align the content */
}

.prototype {
  background-color: transparent; /* Remove background color */
  color: #000000; /* Set text color to black */
  padding: 0; /* Remove padding */
  text-decoration: underline; /* Add underline to the link */
  display: inline-block; /* Change to inline block to center */
  border: none; /* Remove border */
  cursor: pointer; /* Change cursor on hover (optional) */
  margin: 0 auto; /* Center the link horizontally */
}


.problem {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}
  
.solution {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.research {
  text-align: center;
}

.user-surveys {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}


.button-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.button-container a {
  text-decoration: underline; /* Add underline to the link */
  color: #000000; /* Set text color to black */
  margin: 0 25px;
}

.Excursion,
.Scuba-Survey {
  display: inline-block;
}

.Scuba-Survey {
  margin-left: 50px;
}


.flex-container {
  display: flex;
  justify-content: space-around; /* Adjust as needed */
  align-items: center; /* Align items vertically */
  flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.flex-container > div {
  width: 200px; /* Adjust width as needed */
  text-align: center; /* Center align text */
  margin: 10px; /* Add some space between items */
  border: 1px solid #ccc; /* Optional: add borders for clarity */
  padding: 10px; /* Optional: add padding for spacing */
}

.analysis {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.link-container {
  display: flex;
  justify-content: center;
  margin-top: 50px; /* Adjust the top margin as needed */
}


.link-analysis {
  color: #000000; /* Text color */
  text-decoration: underline; /* Add underline to the link */
  border: none; /* Remove border */
  padding: 0; /* Remove padding */
  display: inline; /* Set back to inline for default link behavior */
  margin: 0; /* Remove margin */
  cursor: pointer; /* Change cursor on hover (optional) */
  text-align: center;
}

.logo-container {
  display: flex;
  justify-content: space-between; /* Evenly space items */
  align-items: center; /* Align items vertically */
  width: 90%; /* Adjust width as needed */
  max-width: 1200px; /* Set max-width for responsiveness */
  margin: 0 auto; /* Center the container */
}


/* Apply common styles to each image */
.logo-container img {
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
}

/* Larger logo specific styling */
.larger-logo {
  width: 25%; /* Adjust size for the larger logo */
}

.smaller-logo {
  width: 15%; /* Adjust size for smaller logos */
}


.user-stories-sa {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
 }

/* Two-column layout */
.row {
  display: flex;
  flex-direction: row; /* Arrange columns in a row */
  align-items: flex-start; /* Align items at the start of the flex container */
}

/* Style for each column */
.column {
  flex: 1; /* Equal width for both columns */
  padding: 10px;
  margin-bottom: 20px;
}

/* Additional styling for user needs column */
.as-user,
.as-owner {
  text-align: center; /* Center-align headings if desired */
  margin-top: 0; /* Adjust top margin for headings */
}

/* Style for the second column (right column) */
.column:nth-child(2) {
  margin-top: -2px; /* Adjust the value as needed */
  margin-bottom: 22px; /* Adjust the bottom margin to counteract the negative top margin */
}

.our-users {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
 }


.g-clark,
.MHerbert,
.DKuhn {
  width: 75%; /* Set width to 75% of the parent container */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
  display: block; /* Ensure images are treated as blocks */
  margin: 0 auto; /* Center-align the images */
  border: 2px solid #CDCDCD; /* Add a 2px solid border with the color #CDCDCD */
  padding: 5px; /* Add some padding around the images */
}

.Architecture {
   text-align: center;
}

.sitemap {
 height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.sitemap-image {
 width: 75%; /* Set width to 75% of the parent container */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
  display: block; /* Ensure images are treated as blocks */
  margin: 0 auto; /* Center-align the images */
  border: 2px solid #CDCDCD; /* Add a 2px solid border with the color #CDCDCD */
  padding: 5px; /* Add some padding around the images */
}


.userflow {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}


.multi,
.cave,
.dive-photos,
.newsletter,
.rep {
  width: 80%; /* Set width to 80% of the parent container */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
  display: block; /* Ensure images are treated as blocks */
  margin: 0 auto; /* Center-align the images */
}


.wireframe {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.wireframe-slides-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Adjust as needed to add space between images */
}

.wireframe-slides {
  flex-basis: calc(40% - 10px); /* Set width for each image with space between */
  height: auto;
  margin-bottom: 20px; /* Add spacing between rows */
}

.user-testing-sa {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.results-summary-sa {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.problem1 {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.problem2 {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.results {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.link-container a {
  text-decoration: underline;
}


  .thoughts {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.identity {
   text-align: center;
}

.logo-sketch {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.image-container {
  display: flex;
  justify-content: space-between; /* Distribute space between items */
  margin: 0 auto; /* Center the container horizontally */
  max-width: 900px; /* Adjust as needed */
}

.image-logo {
  width: calc(45% - 10px); /* Increase width for larger images */
  margin-right: 10px; /* Add spacing between images */
  /* Add any other styles as desired */
}

/* To remove margin-right from the last image in the row */
.image-logo:last-child {
  margin-right: 0;
}


.color-palette {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.style-tile {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.style-image {
  width: 42.1875%; /* 75% of 56.25% (reduced by another 25%) */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
  display: block; /* Ensure images are treated as blocks */
  margin: 0 auto; /* Center-align the images */
  border: 2px solid #CDCDCD; /* Add a 2px solid border with the color #CDCDCD */
  padding: 5px; /* Add some padding around the images */
}


.high-fid-wireframe {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.high-fid-wireframe-slides-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Adjust as needed to add space between images */
}

.high-fid-wireframe-slides {
  flex-basis: calc(40% - 10px); /* Set width for each image with space between */
  height: auto;
  margin-bottom: 20px; /* Add spacing between rows */
}



.mockup {
 height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}


.preference-testing {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

/* Flexbox setup for each preference test section */
.pref-test-section {
  margin-bottom: 20px;
}

/* Style for each set of two images */
.pref-test-section .pref-test-images {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px; /* Add space between the two images */
}

/* Style for individual images within each set */
.pref-test-section .pref-test-images .pref-test-image {
  width: 48%; /* Adjust the width for individual images */
  max-width: 100%;
  border: 2px solid #BDBDBD; /* Add a border with the color #BDBDBD */
  box-sizing: border-box;
}

.pref-test-title {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
 }

.pref-test-description {
  text-align: center;
}

  
.end-result {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.final  {
  width: 42.1875%; /* 75% of 56.25% (reduced by another 25%) */
  height: auto; /* Maintain aspect ratio */
  max-width: 100%; /* Ensure images don't exceed their natural size */
  display: block; /* Ensure images are treated as blocks */
  margin: 0 auto; /* Center-align the images */
  border: 2px solid #CDCDCD; /* Add a 2px solid border with the color #CDCDCD */
  padding: 5px; /* Add some padding around the images */
}


.conclusion {
text-align: center;
}

.what-worked {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.project-concerns {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
} 

.surprised {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
} 

.better-me {
  height: 21px;
  font-family: 'Work Sans', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ED0707;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
} 

.site-footer {
  width: 100%;
  background-color: #434F5B;
  color: white;
  text-align: center;
  padding: 20px 0;
  position: relative;
  bottom: 0;
  left: 0;
}

.footer-content {
  display: flex;
  flex-direction: column; /* Align items in a column */
  align-items: center; /* Center-align items */
  padding-bottom: 10px; /* Adjust bottom padding */
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 10px 0; /* Add margin between links and the bottom text */
}

.footer-links a {
  color: #FAFAFA;
  text-decoration: none;
  margin-right: 10px;
  font-size: 14px;
}

.footer-bottom p {
  color: #FAFAFA;
  font-size: 14px;
  margin-top: 10px; /* Add margin at the top of the copyright text */
}

/* Mobile styles */
@media screen and (max-width: 599px) {
  body {
    padding-top: 80px;
    margin: 0 10px; /* Adjusted margin for smaller screens */
  }

  h1 {
    font-size: 24px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* Add other mobile-specific styles as needed */

  .spacing-break {
    margin-bottom: 20px; /* Adjust the margin as needed */
  }

  .architecture-heading {
    margin-top: 20px; /* Adjust the margin as needed */
  }

  /* Add styles to address overlapping text on mobile devices */
  .column {
    margin-bottom: 20px; /* Add margin between columns to prevent overlapping */
  }

  .desires {
    margin-bottom: 10px; /* Add margin between desires to improve readability */
  }

  /* Add space below the images of personas */
  .g-clark,
  .MHerbert,
  .DKuhn {
    margin-bottom: 40px; /* Adjust the margin as needed */
  }

  /* Two-column layout */
  .row {
    display: flex;
    flex-direction: column; /* Change to column layout for mobile */
    align-items: flex-start; /* Align items at the start of the flex container */
    margin-bottom: 100px; /* Adjust margin after the user stories section */
  }

  /* Style for each column */
  .column {
    flex: 1; /* Equal width for both columns */
    padding: 10px;
    margin-bottom: 20px;
  }

  /* Additional styling for user needs column */
  .as-user,
  .as-owner {
    text-align: center; /* Center-align headings if desired */
    margin-top: 0; /* Adjust top margin for headings */
  }

  /* Style for the second column (right column) */
  .column:nth-child(2) {
    margin-top: -2px; /* Adjust the value as needed */
    margin-bottom: 22px; /* Adjust the bottom margin to counteract the negative top margin */
  }

  /* Add margin to the Our Users section */
  .our-users {
    margin-bottom: 80px; /* Move the title down by 4 rows */
  }

  /* Add margin to reduce space between Our Users and User Details */
  .user-details {
    margin-top: 10px; /* Adjust the margin as needed */
  }
}




/* Larger screens */
@media screen and (min-width: 600px) {
  body {
    padding-top: 80px;
  }

  h1 {
    font-size: 36px; /* Reset font size for larger screens */
  }

  /* Add other tablet-specific styles as needed */
}

/* Tablet and larger screens */
@media screen and (min-width: 768px) {
  body {
    margin: 0 40px; /* Adjusted margin for larger screens */
  }

  /* Add other tablet-specific styles as needed */
}

/* Larger screens */
@media screen and (min-width: 1200px) {
  body {
    margin: 0 80px; /* Adjusted margin for larger screens */
  }

  /* Add other desktop-specific styles as needed */
}