/* 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;
}



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

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

.brf-storesign {
    width: 75%; /* Set the image width to 50% of its container */
  max-width: 100%; /* Ensure the image remains responsive */
  display: block;
  margin: 20px auto; /* Center the image horizontally and add space around it */
  /* Additional styles if needed */
}


.prob {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}
  

.resolution {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}


.exploration {
  text-align: center; /* Aligns text content within the element */
  margin: 0 auto; /* Horizontal centering by setting left and right margins to auto */
  /* Additional styles if needed */
}

.discovery-call__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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}


.market-research {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.analysis-image {
  width: 75%; /* Set the image width to 50% of its container */
  max-width: 100%; /* Ensure the image remains responsive */
  display: block;
  margin: 20px auto; /* Center the image horizontally and add space around it */
  /* Additional styles if needed */
}


.visuals {
   text-align: center; /* Aligns text content within the element */
  margin: 0 auto; /* Horizontal centering by setting left and right margins to auto */
  /* Additional styles if needed */
}


.sketches {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.sketches-container {
  text-align: center; /* Center-align the content */
  margin-top: 20px; /* Add top margin for separation */
  /* Add any other styles as needed */
}

/* Style for the logo sketches image */
.sketches-logo {
  width: 900px; /* Set the image width to 800 pixels */
  max-width: 100%; /* Allow the image to be responsive within its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove default inline styling */
  margin: 0 auto; /* Center the image horizontally */
  /* Add any other styles as needed */
}


.sketches-Ideas {
  display: block;
  margin: 0 auto; /* This centers the image horizontally */
  /* Additional styling for your image */
}

.colors {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.brf-color-set-1 {
  width: 900px; /* Set the image width to 800 pixels */
  max-width: 100%; /* Allow the image to be responsive within its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove default inline styling */
  margin: 0 auto; /* Center the image horizontally */
  /* Add any other styles as needed */
}

.brf-color-set-2 {
  width: 50%; /* Reduce the image size to 50% of its original size */
  max-width: 100%; /* Allow the image to be responsive within its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove default inline styling */
  margin: 0 auto; /* Center the image horizontally */
  /* Add any other styles as needed */
}



  
.font {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.fonts-image {
  display: block;
  margin: 0 auto; /* This centers the image horizontally */
  /* Additional styling for your image */
}


.ab-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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.centered-section {
  text-align: center; /* Centers the content within this section */
}

.centered-section p,
.centered-section img {
  display: block; /* Ensures elements stack vertically */
  margin: 0 auto 20px; /* Centers the elements horizontally and adds 20px bottom margin */
  /* Additional styling for your elements */
}

.centered-section p {
  text-align: center; /* Center-align the text within paragraphs */
  /* Other styles as needed */
}
.four-ideas {
  display: block;
  margin: 0 auto 20px; /* This centers the image horizontally and adds 20px bottom margin */
  /* Additional styling for your image */
}


.finalresult {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.three-logos {
  display: block;
  margin: 0 auto 20px; /* This centers the image horizontally and adds 20px bottom margin */
  /* Additional styling for your image */
}


.clientfollowup {
  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: #000000;
  text-align: center;
  margin: 0 auto; /* center the element horizontally */
  margin-top: 30px;
  margin-bottom: 30px;
}

.apparel {
   width: 75%; /* Set the image width to 50% of its container */
  max-width: 100%; /* Ensure the image remains responsive */
  display: block;
  margin: 20px auto; /* Center the image horizontally and add space around it */
  /* Additional styles if needed */
}


.finalization {
  text-align: center; /* Aligns text content within the element */
  margin: 0 auto; /* Horizontal centering by setting left and right margins to auto */
  /* Additional styles if needed */
}

.next-case-study {
text-align: center;
}

.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 */
}