:root > * {
  --md-primary-fg-color:        #0B072D;
  --md-primary-fg-color--light: #0B072D;
  --md-primary-fg-color--dark:  #0a0722;

  --md-code-bg-color: #f1f1f1;
  --md-code-fg-color: #131313;

  /* Code highlighting color shades */
  --md-code-hl-number-color:           rgb(192, 35, 35);
  --md-code-hl-special-color:          rgb(196, 20, 79);
  --md-code-hl-function-color:         rgb(152, 63, 168);
  --md-code-hl-constant-color:         rgb(97, 77, 197);
  --md-code-hl-keyword-color:          rgb(44, 85, 161);
  --md-code-hl-string-color:           #007100;
  --md-code-hl-generic-color:          #000000;
  --md-code-hl-name-color:             var(--md-code-fg-color);
  --md-code-hl-operator-color:         var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color:      var(--md-default-fg-color--light);
  --md-code-hl-comment-color:          var(--md-default-fg-color--light);
  --md-code-hl-variable-color:         var(--md-default-fg-color--light);

  /* --md-accent-fg-color:                #C0035E; */

  --md-code-font: "Roboto Mono", monospace;

  --md-primary-bg-color:        #ffffff;
  --md-default-bg-color:        #FAFAFA;

  --font-heading: '__Poppins_c3367d', '__Poppins_Fallback_c3367d', var(--font-system), sans-serif;
  --font-body: '__Inter_1870e5', '__Inter_Fallback_1870e5', var(--font-system), sans-serif;

}

/* -----------------------------------------------------------*/
/*                Marqo Cloud vs OS Buttons                   */
/* -----------------------------------------------------------*/

.marqo-headers {
  font-size: 18px !important;
  font-family: 'YourCustomFont', sans-serif;
  font-weight: bold;
  text-align: center;
  background-color: #ffffff;
  padding: 12px 35px;
  margin: 0px 10px;
  border-radius: 20px;
  /* display: inline-block; */
  /* box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.09); */
  transition: all 0.3s ease;
  border: 0.5px;
  color: black;
}

input[type="radio"]#marqo-cloud:checked ~ .tabbed-labels label[for="marqo-cloud"] .marqo-headers,
input[type="radio"]#marqo-open-source:checked ~ .tabbed-labels label[for="marqo-open-source"] .marqo-headers {
  color: inherit;
  background-color: #150c5f;
  color: #ffffff;
  /* box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.15); */
}

a:hover, .md-typeset a:hover {
  color: #C0035E !important; /* Use !important to override any existing styles */
}

.marqo-headers:hover {
  background-color: #f7f7f7;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

/* Target the before pseudo-element on the tabbed-labels--linked class */
.tabbed-labels--linked::before {
  content: none !important; /* Remove the content (the line) */
  display: none !important; /* Ensure it doesn’t display */
  border-bottom: none !important; /* Just in case it’s a border */
  background: none !important; /* Remove any background */
}


/* -----------------------------------------------------------*/
/*                     General Styling                        */
/* -----------------------------------------------------------*/

/* .md-typeset .tabbed-labels>label>[href]:first-child {
  font-size: 16px !important;
} */

.md-version {
  display: block;
}

.md-search__form {
  border-radius: 5rem;
}

.md-header__topic .md-ellipsis {
  margin-top: 0.05rem;
  opacity: 1.0;
  font-size: 16px;
  display: none;
}

.md-grid {
  max-width: 90%; 
}

.md-header__inner {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.md-banner {
  background-color: #00FFAA; /* marqo green */
  color: #020659; /*midnight blue*/
}

.md-banner--warning {
  background-color: var(--md-warning-bg-color);
  color: var(--md-warning-fg-color);
}

.md-typeset h1 {
  font-size: 2.4em;
  color: #150c5f;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 0.5em;
}

.md-typeset h2 {
  color: #150c5f;
  font-weight: 400;
  font-weight: bold;
}

.md-typeset h1 {
  font: 'Times New Roman';
  color: #150c5f;
  font-weight: bold;
}

.md-typeset h3 {
  color: #150c5f;
  font-weight: 400;
}

.md-typeset p,
.md-typeset li,
.md-typeset th,
.md-typeset tr,
.md-typeset div,
.md-typeset text,
.md-typeset ol {
  font-size: 16px;
}


.md-typeset code {
  font-size: 14px;
}

.md-typeset h1 code, 
.md-typeset h2 code, 
.md-typeset h3 code, 
.md-typeset h4 code, 
.md-typeset h5 code, 
.md-typeset h6 code {
  font-size: inherit;
}


.md-content {
  border-left: #E5E5E5 0.7px solid;
  min-height: 80vh;
}

.md-content a {
  color: #017c3c;
}

.md-main__inner {
  margin-top: 0rem;
}

.md-header--shadow {
  box-shadow: none;
}

.md-typeset {
  font-size: 0.7rem;
  line-height: 1.5;
}

/* -----------------------------------------------------------*/
/*                     Nav & Side Bar                         */
/* -----------------------------------------------------------*/

/* Base style for the tabs */
.md-tabs {
  margin-top: 0rem;
  background: #FAFAFA;
  border-bottom: #E5E5E5 0.7px solid;
  font-size: 1.1em;
}

/* Style for each link in the tabs */
.md-tabs__link {
  font-size: 1.3em;
  font-weight: 500;
  line-height: 3.7;
  margin: 0 0 0.5em;
}

/* Style for active tab */
.md-tabs__item--active, .md-tabs__item--active .md-tabs__link {
  color: #C0035E !important;
  /* border-bottom: #C0035E 2px solid; */
}

/* Additional specificity to prevent overrides */
.md-tabs__item:not(.md-tabs__item--active) .md-tabs__link {
  color: black !important;
  opacity: 1.0;
}

/* Style for hovered tabs */
.md-tabs__item:hover, .md-tabs__item:hover .md-tabs__link {
  color: #C0035E !important;
}

.div.tabbed-labels::before {
  display: none;
}

.js .md-typeset .tabbed-labels:before {
  width: 0;
}

/* Active sidebar link */
.md-nav__link--active {
  color: #C0035E !important;
  opacity: 1.0;
}

.md-nav__link:hover {
  color: #C0035E !important;
}

.md-nav__link .md-nav__container {
  color: black;
}

/* General link styling */
.md-nav__link {
  font-size: 1.05em;
  opacity: 1.0;
}

/* Section label styling */
.md-nav__item--section label {
  --md-default-fg-color--light: #36464e;
}

.md-nav__title {
  color: black;
  padding-top: 0.8em;
  font-size: 16px;
}

/* Allows for images in nav bar */
.custom-nav-item-icons img {
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
}

/* Default - Hide custom nav item icons */
.md-sidebar .custom-nav-item-icons {
  display: none;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  margin-top: 0rem;
}

/* Show the custom nav item icons on mobile devices */
@media (max-width: 1220px) {
  .md-sidebar .custom-nav-item-icons {
    display: inline-block; 
  }
}

/* Ensuring the text color in the LHS bar titles is black */
.md-nav__item--section label {
  color: black !important;
}

.no-wrap {
  white-space: nowrap;
}

/* -----------------------------------------------------------*/
/*                        Footer                              */
/* -----------------------------------------------------------*/

/* .container.footer-container {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  display: block;
}
  
.footer {
background-color: #0B072D;
padding-top: 70px;
padding-bottom: 30px;
}

.footer-pages {
color: #fff;
text-transform: none;
margin-bottom: 5px;
font-size: 14px;
text-decoration: none;
display: block;
}

.company-footer-list {
min-width: 160px;
text-align: left;
}

.footer-block {
justify-content: left;
width: 75%;
margin-left: 20px;
margin-right: 20px;
display: flex;
}
.container.footer-container {
flex-direction: row;
justify-content: center;
align-items: center;
display: flex;
}

.getting-started-container.footer-container {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
display: block;
}

.md-footer-meta {
background-color: #0B072D;
}

.company {
font-size: 16px; 
}

.company-footer-list a:hover{
color: #00ffaa;
} */

/* -----------------------------------------------------------*/
/*                      Mobile Styles                         */
/* -----------------------------------------------------------*/
@media only screen and (max-width: 768px) { 
  
  .md-grid {
    max-width: 100%;
  }
    
  .footer-block {
      flex-direction: column; /* Stack footer blocks vertically */
      width: 100%; /* Take up full width */
      margin-left: 10px; /* Adjust margins for mobile */
      margin-right: 10px;
  }

  .company-footer-list {
    display: block; /* Stack the divs vertically */
    width: 1vw;    /* Take up full width */
    margin-bottom: 20px; /* Add some space between the divs */
    margin-top: 5%;
    margin-left: 10%;
  }

  .footer-pages {
      font-size: 12px; /* Slightly reduce font size for mobile */
  }

  .company {
      font-size: 14px; /* Slightly reduce font size for mobile */
  }
  #mc_embed_shell {
    padding-right: 0px;
  }

}

@media only screen and (max-width: 768px) { 

  .md-grid {
    max-width: 100%;
  }
    
  .footer-block {
      flex-direction: column; /* Stack footer blocks vertically */
      width: 100%; /* Take up full width */
      margin-left: 10px; /* Adjust margins for mobile */
      margin-right: 10px;
  }

  .company-footer-list {
    display: block; /* Stack the divs vertically */
    width: 1vw;    /* Take up full width */
    margin-bottom: 20px; /* Add some space between the divs */
    margin-top: 5%;
    margin-left: 10%;
  }

  .footer-pages {
      font-size: 12px; /* Slightly reduce font size for mobile */
  }

  .company {
      font-size: 14px; /* Slightly reduce font size for mobile */
  }
  #mc_embed_shell {
    padding-right: 0px;
  }

}

/* -----------------------------------------------------------*/
/*           Subscribe to our mailing list css                */
/* -----------------------------------------------------------*/

#mc_embed_shell {
background-color: #0B072D;
color: #00ffaa;
width: 100%;
padding-top: 0px;
padding-right: 50px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
#mc_embed_signup {
background: #170e50;
clear: left;
font-family: 'Roboto', sans-serif;
color: #00ffaa;
width: 100%;
max-width: 320px;
margin: 0 auto;
padding: 20px;
border-radius: 20px;
}
#mc_embed_signup h2 {
color: #00ffaa;
font-size: 30px;
}
#mc_embed_signup .indicates-required,
#mc_embed_signup label {
color: #ffffff;
}
#mc_embed_signup input[type="email"],
#mc_embed_signup input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ffffff;
background: #fff;
color: #000;
margin-bottom: 10px;
border-radius: 5px;
}
#mc_embed_signup .asterisk {
color: red;
}
#mc_embed_signup .button {
background: #00ffaa;
border: none;
display: inline-block;
color: #080134;
height: 40px;
text-align: center;
padding-right: 30px;
cursor: pointer;
padding-left: 30px;
border-radius: 50px;
font-weight: bold;
transition: all 0.4s ease;
}
#mc_embed_signup .button:hover {
background: #00dd99;
}
#mce-responses {
padding-bottom: 10px;
}

/* -----------------------------------------------------------*/
/*            Boxes for Product section                       */
/* -----------------------------------------------------------*/

/* Base styles */
.info-box-container-product {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap to the next line */
  justify-content: space-between;
  gap: 1em;
}

.info-box-product {
  flex: 1;
  cursor: pointer;
  padding: 0.9em;
  /* margin-bottom: 1em; */
  border-radius: 16px;
  transition: background-color 0.3s ease;
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin: 0.5em;
  transition: transform 0.2s;
}

/* Responsive styles */
@media (max-width: 768px) {
  .info-box-container-product {
    flex-direction: column; /* Stack the boxes vertically on small screens */
    gap: 1em; /* Adjust gap between items */
  }

  .info-box-product {
    flex: 1 0 100%; /* Each box takes up full width */
    margin: 0.5em 0; /* Adjust margin to avoid overflow */
  }
}

.info-box-product h2 {
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 1px;
  font-weight: 600;
}

/* -----------------------------------------------------------*/
/*          Boxes for Home Page section                       */
/* -----------------------------------------------------------*/

/* Base styles */
.info-box-container {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap to the next line */
  justify-content: space-between;
  gap: 1em;
}

.info-box {
  flex: 1;
  cursor: pointer;
  padding: 2em;
  margin-bottom: 1em;
  border-radius: 16px;
  transition: background-color 0.3s ease;
  background-color: #f2f2f2;
  box-sizing: border-box;
  margin: 0.5em;
  transition: transform 0.2s;
}

/* Responsive styles */
@media (max-width: 768px) {
  .info-box-container {
    flex-direction: column; /* Stack the boxes vertically on small screens */
    gap: 1em; /* Adjust gap between items */
  }

  .info-box {
    flex: 1 0 100%; /* Each box takes up full width */
    margin: 0.5em 0; /* Adjust margin to avoid overflow */
  }
}

h2 {
  margin-top: 0;
}

.info-box h2 {
  font-size: 1.3em;
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
}

.info-box p {
  font-size: 16px;
  margin: 0;
  margin-bottom: 1em;
  /* color: black; */
}

/* .info-box li {
  color: black;
} */

.info-box a {
  color: #27ae60;
  text-decoration: none;
}


/* -----------------------------------------------------------*/
/*          Boxes for 'Can We Help?' section                  */
/* -----------------------------------------------------------*/
.help-section {
  text-align: left;
  padding: 20px;
}

.help-links {
  display: flex;
  flex-wrap: wrap; /* Allows boxes to wrap to the next line on smaller screens */
  gap: 20px; /* Space between the boxes */
}

.help-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2; /* Light grey background */
  padding: 20px;
  border-radius: 8px; /* Rounded corners */
  width: 150px; /* Fixed width */
  height: 100px; /* Fixed height */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.2s; /* Animation for hover effect */
}

.md-nav__icon .md-icon {
  color: black;
}

.help-box img {
  max-width: 40px; /* Adjust the icon size */
  margin-bottom: 10px; /* Space between the icon and text */
}

.help-box p {
  margin: 0;
  font-size: 16px;
  color: #333; /* Darker text color */
  text-align: center;
}

.help-box:hover {
  transform: scale(1.05); /* Slightly increase size on hover */
}

/* Responsive styles */
@media (max-width: 768px) {
  .help-links {
    flex-direction: column; /* Stack the boxes vertically on small screens */
    gap: 10px; /* Adjust gap between items */
  }

  .help-box {
    width: 100%; /* Full width on smaller screens */
    height: auto; /* Allow height to adjust based on content */
    padding: 16px; /* Adjust padding for smaller screens */
  }

  .help-box img {
    max-width: 30px; /* Smaller icon size on mobile */
  }

  .help-box p {
    font-size: 14px; /* Slightly smaller text size for better fit on mobile */
  }
}