@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
body, input { font-family: "Inter", -apple-system, Helvetica, Arial, sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

:root {
  --md-primary-fg-color:        #224ba5;
  --md-primary-fg-color--light: #0077B6;
  --md-primary-fg-color--dark:  #03045E;

  --md-accent-fg-color:                #0077B6;
  --md-accent-fg-color--transparent:   hsla(#{hex2hsl(0077B6)}, 0.1);
  --md-accent-bg-color:                hsla(0, 0%, 100%, 1);
  --md-accent-bg-color--light:         hsla(0, 0%, 100%, 0.7);
}

[data-md-color-scheme="legaldigital"] {
  --md-primary-fg-color:        #1e4190;
  --md-primary-fg-color--light: #ed3e89;
  --md-primary-fg-color--dark:  #03045E;
}


/* .md-tabs__link {
    position: relative;
    display: block;
    transition: opacity 0.35s ease-in-out;
}

.md-tabs__link:hover {
    text-decoration: none;
    opacity: 1;
}

.md-tabs__link:before {
    content: "";
    position: absolute;
    right: 100%;
    bottom: -6px;
    left: 0px;
    height: 1px;
    background: #fff;
    opacity: 0.25;
    transition: all 0.35s ease-in-out;
}

.md-tabs__link:hover:before {
    right: 0px;
    opacity: 0.5;
}

*/


.md-typeset a {
    text-decoration: underline;
}

.md-header__topic:first-child {
  font-weight: 500;
  }


  
/* Set the height of the hero section */
.hero {
  height: 400px;
  position: relative; /* this is needed to position the content div */
}

/* Add a semi-transparent overlay to the hero background */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1); /* adjust the opacity to your preference */
  background-size: cover;
  background-position: center;
}

/* Style the hero content */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-78%, -10%); /* center the content */
  text-align: left;
  color: #fff;
}

/* Style the hero title */
.hero-content h1 {
  color: white;
  font-size: 48px;
  margin-bottom: 0;
}

/* Style the hero subtitle */
.hero-content p {
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 20px;
}


/* Announcement bar using as a hero */


.md-banner {
  position: relative;
  z-index: 1; /* Added this line to position the text above the overlay */
  background-image: url('../assets/images/banner_cube.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 70px;
}

.md-banner::before {
  content: '';
  position: absolute;
  z-index: 0; /* Added this line to place the overlay behind the text */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.35); /* Tune the opacity value to your preference */
  pointer-events: none; /* Added this line to make the overlay element non-clickable */
}


/* Style the banner title */
.md-banner h1 {
  color: white;
  font-size: 2.6rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
  margin-bottom: 0;
}

/* Style the banner subtitle */
.md-banner p {
  margin-top: 0;
  font-size: 1.2rem;
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

.md-banner .button {
  background-color: #fff;
  position: relative;
  z-index: 1;
  color: var(--md-accent-fg-color);
  padding: 0.5rem 1rem;
  border: 1px solid var(--md-accent-fg-color);
  transition: all 0.3s ease;
  border-radius: .2rem;
  box-shadow: var(--md-shadow-z1);
  margin: 2.5625em 0;
  page-break-inside: avoid;
}

.md-banner .button:hover {
  background-color: var(--md-accent-fg-color);
  color: #fff;
  border-color: var(--md-accent-fg-color);
}

.md-banner .md-icon {
  position: relative;
  z-index: 2;
}