/* extra.css */

/* Import Poppins font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

/* Apply Poppins font to the header */
.md-header {
    font-family: 'Poppins', sans-serif;
  }

/* Custom primary color for light mode (default scheme) */
:root {
    --md-primary-fg-color: #000000;        /* Primary color TODO: Ask About 202020 */
    --md-primary-fg-color--light: #4a4a4a; /* Light variant */
    --md-primary-fg-color--dark: #000000;  /* Dark variant */
    --link-color-light: #A11F7F;       /* Link color in light mode */
    --link-hover-color-light: #DB3EB1; /* Link hover color in light mode */
    --link-color-dark: #DB3EB1;        /* Link color in dark mode */
    --link-hover-color-dark: #A11F7F;  /* Link hover color in dark mode */
}

/* Custom link and accent colors for light mode (default scheme) */
[data-md-color-scheme="default"] {
    --md-accent-fg-color: var(--link-hover-color-light); /* Accent color */
    --md-typeset-a-color: var(--link-color-light);       /* Default link color */
    --h1-color: #333; /* Black */
}

/* Custom link and accent colors for dark mode (slate scheme) */
[data-md-color-scheme="slate"] {
    --md-accent-fg-color: var(--link-hover-color-dark); /* Accent color */
    --md-typeset-a-color: var(--link-color-dark);       /* Default link color */
    --md-default-bg-color: #202020;        /* Preserve custom background color */
    --h1-color: #ededed; /* White */
}

/* Apply link colors to main content */
.md-typeset a {
    color: var(--md-typeset-a-color);
}

/* .md-grid {
    max-width: initial;
} */

/* Change link color on hover and focus in main content */
.md-typeset a:hover,
.md-typeset a:focus {
    color: var(--md-accent-fg-color);
}

/* Apply default link color to side navigation links */
.md-nav__link {
    color: inherit;
}

/* Change side navigation link color on hover and focus */
.md-nav__link:hover,
.md-nav__link:focus {
    color: #DB3EB1;
}

/* Apply active link color in side navigation */
.md-nav__link--active {
    color: #A11F7F;
}

/* Exclude footer links from custom styles */
.md-footer a {
    color: inherit;
}

.md-footer a:hover,
.md-footer a:focus {
    color: inherit;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 36px; /* Adjust the height as needed */
  width: auto;  /* Maintain aspect ratio */
}

/* Remove the default box-shadow and position the header */
.md-header {
    box-shadow: none;
}

.md-tabs {
    position: relative; /* establish a positioning context */
    overflow: visible;  /* allow pseudo-elements to extend outside */
  }

  .md-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px; /* positions the gradient 30px below the bottom edge of .md-tabs */
    height: 30px;
    background: linear-gradient(to bottom, #DB3EB1, #A11F7F);
  }


/* Ensure the sidebar doesn't overlap with the gradient bar */
.md-sidebar, .md-sidebar__inner {
    padding-top: 28px; /* Matches the height of the gradient bar */
}

.md-content__inner {
    padding-top: 40px; /* Reset the padding */
}

/* Custom styling for documentation headings */
/* h1:first-of-type { */
    /* color: var(--link-color-light); Set your desired color */
    /* font-weight: bold; Make the text bold */
/* } */

/* Hide the Back-to-Top button by default */
.md-footer-nav__top {
    display: none;
  }


  /* extra.css */
.horizontal-cards {
    display: flex;
    flex-direction: row;
    gap: 1rem; /* Adjust spacing as needed */
  }


@media (min-width: 768px) {
.fixed-width {
    width: 370px;
}
}

/* Custom Pink Admonition */

:root {
    --md-admonition-icon--magnifying-glass: url('data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgZmlsbD0iIzAwMDAwMCI+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KICAgIC5zdDB7ZmlsbDojMDAwMDAwO30KICA8L3N0eWxlPgogIDxnPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTMzMi45OTgsMjkxLjkxOGM1Mi4yLTcxLjg5NSw0NS45NDEtMTczLjMzOC0xOC44MzQtMjM4LjEyM2MtNzEuNzM2LTcxLjcyOC0xODguNDY4LTcxLjcyOC0yNjAuMTk1LDAKICAgICAgYy03MS43NDYsNzEuNzQ1LTcxLjc0NiwxODguNDU4LDAsMjYwLjIwNGM2NC43NzUsNjQuNzc1LDE2Ni4yMTgsNzEuMDM0LDIzOC4xMDQsMTguODQ0bDE0LjIyMiwxNC4yMDNsNDAuOTE2LTQwLjkxNgogICAgICBMMzMyLjk5OCwyOTEuOTE4eiBNMjc4LjQ4OCwyNzguMzMzYy01Mi4xNDQsNTIuMTM0LTEzNi42OTksNTIuMTQ0LTE4OC44NTIsMGMtNTIuMTUyLTUyLjE1My01Mi4xNTItMTM2LjcxNywwLTE4OC44NjEKICAgICAgYzUyLjE1NC01Mi4xNDQsMTM2LjcwOC01Mi4xNDQsMTg4Ljg1MiwwQzMzMC42NCwxNDEuNjE2LDMzMC42NCwyMjYuMTgsMjc4LjQ4OCwyNzguMzMzeiIvPgogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTEwOS4zMDMsMTE5LjIxNmMtMjcuMDc4LDM0Ljc4OC0yOS4zMjQsODIuNjQ2LTYuNzU2LDExOS42MTRjMi4xNDIsMy40ODksNi43MDksNC42MDMsMTAuMjA4LDIuNDYKICAgICAgYzMuNDktMi4xNDIsNC41OTQtNi43MDksMi40NjItMTAuMTk4djAuMDA4Yy0xOS4zODctMzEuNy0xNy40NS03Mi45NjIsNS43ODItMTAyLjc3MWMyLjUyNi0zLjIyOCwxLjk0Ni03Ljg5OC0xLjI5Mi0xMC40MDUKICAgICAgQzExNi40OCwxMTUuMzk5LDExMS44MTEsMTE1Ljk3OSwxMDkuMzAzLDExOS4yMTZ6Ii8+CiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTAxLjQ5OSw0MzguNTkxTDM2My4zNDEsMzE1LjE3OGwtNDcuOTgsNDcuOThsMTIzLjQwMywxMzguMTY4YzEyLjU0OCwxNi4yMzQsMzUuMTQ0LDEzLjg0OCw1NS40NDctNi40NTYKICAgICAgQzUxNC41MDUsNDc0LjU3Niw1MTcuNzQzLDQ1MS4xMzgsNTAxLjQ5OSw0MzguNTkxeiIvPgogIDwvZz4KPC9zdmc+Cg==');
}
  .md-typeset .admonition.magnifying-glass,
  .md-typeset details.magnifying-glass {
    border-color: rgb(219, 62, 177);
  }
  .md-typeset .magnifying-glass > .admonition-title,
  .md-typeset .magnifying-glass > summary {
    background-color: rgba(219, 62, 177, 0.1);
  }
  .md-typeset .magnifying-glass > .admonition-title::before,
  .md-typeset .magnifying-glass > summary::before {
    background-color: rgb(219, 62, 177);
    -webkit-mask-image: var(--md-admonition-icon--magnifying-glass);
            mask-image: var(--md-admonition-icon--magnifying-glass);
  }

:root {
    --md-admonition-icon--brain: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAyOTcgMjk3IiB4bWw6c3BhY2U9InByZXNlcnZlIiBzdHJva2U9IiMwMDAwMDAiPjxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIj48L2c+PGcgaWQ9IlNWR1JlcG9fdHJhY2VyQ2FycmllciIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L2c+PGcgaWQ9IlNWR1JlcG9faWNvbkNhcnJpZXIiPiA8Zz4gPGc+IDxnPiA8cGF0aCBkPSJNMTcwLjc1NSwxNTQuNDk1bC0xMy45NC0xMy45NDFjMi4yMjEtNC4xNDIsNC4wMi04LjQ4NCw1LjM3OC0xMi45ODRoMTkuNzE1YzMuMzE0LDAsNi0yLjY4Nyw2LTZWOTIuMjUxIGMwLTMuMzE0LTIuNjg3LTYtNi02aC0xOS43MTVjLTEuMzU4LTQuNS0zLjE1Ny04Ljg0Mi01LjM3OS0xMi45ODNsMTMuOTQxLTEzLjk0MmMyLjM0NC0yLjM0MywyLjM0NC02LjE0MiwwLTguNDg1TDE1MC4wMjQsMzAuMTEgYy0yLjM0Mi0yLjM0NC02LjE0My0yLjM0NC04LjQ4NSwwbC0xMy45NDEsMTMuOTQxYy00LjE0Mi0yLjIyMi04LjQ4NC00LjAyMS0xMi45ODQtNS4zNzlWMTguOTU2YzAtMy4zMTQtMi42ODctNi02LTZINzkuMjk1IGMtMy4zMTQsMC02LDIuNjg3LTYsNnYxOS43MTVjLTQuNSwxLjM1OC04Ljg0MiwzLjE1Ny0xMi45ODMsNS4zNzlsLTEzLjk0LTEzLjk0MWMtMS4xMjYtMS4xMjYtMi42NTItMS43NTgtNC4yNDMtMS43NTggYy0xLjU5MSwwLTMuMTE3LDAuNjMyLTQuMjQyLDEuNzU3TDE3LjE1Myw1MC44MzljLTIuMzQ0LDIuMzQ0LTIuMzQ0LDYuMTQzLTAuMDAxLDguNDg2bDEzLjk0MSwxMy45NDIgYy0yLjIyMiw0LjE0Mi00LjAyMSw4LjQ4NC01LjM3OSwxMi45ODNINmMtMy4zMTQsMC02LDIuNjg3LTYsNnYyOS4zMThjMCwzLjMxNCwyLjY4Nyw2LDYsNmgxOS43MTQgYzEuMzU4LDQuNDk5LDMuMTU3LDguODQxLDUuMzc5LDEyLjk4NGwtMTMuOTQsMTMuOTQxYy0yLjM0NCwyLjM0My0yLjM0NCw2LjE0MiwwLDguNDg1bDIwLjczMSwyMC43MzEgYzIuMzQxLDIuMzQzLDYuMTQyLDIuMzQ0LDguNDg1LDAuMDAxbDEzLjk0MS0xMy45NGM0LjE0MywyLjIyMiw4LjQ4NSw0LjAyMSwxMi45ODQsNS4zNzl2MTkuNzE1YzAsMy4zMTQsMi42ODcsNiw2LDZoMjkuMzE4IGMzLjMxNCwwLDYtMi42ODcsNi02VjE3NS4xNWM0LjQ5OS0xLjM1OCw4Ljg0MS0zLjE1NywxMi45ODMtNS4zNzlsMTMuOTQyLDEzLjk0MWMyLjM0MiwyLjM0Miw2LjE0MywyLjM0Myw4LjQ4NS0wLjAwMSBsMjAuNzMxLTIwLjczMUMxNzMuMDk5LDE2MC42MzcsMTczLjA5OSwxNTYuODM4LDE3MC43NTUsMTU0LjQ5NXogTTkzLjk1NCwxMjkuMzM5Yy0xMi4zNjcsMC0yMi40MjktMTAuMDYyLTIyLjQyOS0yMi40MjkgYzAtMTIuMzY4LDEwLjA2Mi0yMi40MjksMjIuNDI5LTIyLjQyOWMxMi4zNjcsMCwyMi40MjksMTAuMDYxLDIyLjQyOSwyMi40MjlDMTE2LjM4MywxMTkuMjc3LDEwNi4zMjEsMTI5LjMzOSw5My45NTQsMTI5LjMzOXoiPjwvcGF0aD4gPHBhdGggZD0iTTI5Ni44OTksMjEyLjU5OGwtMy43NzQtMjAuNDU4Yy0wLjI4OS0xLjU2Ni0xLjE4OC0yLjk1MS0yLjQ5OC0zLjg1NWMtMS4zMTEtMC45MDItMi45MjMtMS4yNDctNC40OTEtMC45NTggbC0xMi41MDIsMi4zMDdjLTEuMjM5LTIuMjY2LTIuNjQzLTQuNDMyLTQuMjA0LTYuNDg4bDcuMjA5LTEwLjQ3MWMwLjkwMi0xLjMxMSwxLjI0Ny0yLjkyNiwwLjk1OC00LjQ5MSBzLTEuMTg4LTIuOTUxLTIuNDk4LTMuODU0bC0xNy4xMzYtMTEuNzk4Yy0yLjcyOC0xLjg3Ni02LjQ2NS0xLjE5LTguMzQ1LDEuNTRsLTcuMjA4LDEwLjQ3Yy0yLjQ3OS0wLjcyNS01LjAwMi0xLjI2NC03LjU2LTEuNjEyIGwtMi4zMDctMTIuNTAyYy0wLjYwMS0zLjI1OS0zLjczNi01LjQxNy02Ljk4OS00LjgxMmwtMjAuNDU4LDMuNzc0Yy0xLjU2NiwwLjI4OS0yLjk1MSwxLjE4OC0zLjg1NSwyLjQ5OCBjLTAuOTAyLDEuMzExLTEuMjQ3LDIuOTI2LTAuOTU4LDQuNDkxbDIuMzA3LDEyLjUwMmMtMi4yNjYsMS4yMzktNC40MzIsMi42NDMtNi40ODgsNC4yMDRsLTEwLjQ3MS03LjIwOSBjLTEuMzExLTAuOTAxLTIuOTI0LTEuMjQ3LTQuNDkyLTAuOTU4Yy0xLjU2NSwwLjI4OS0yLjk1MSwxLjE4OC0zLjg1NCwyLjQ5OGwtMTEuNzk4LDE3LjEzNiBjLTAuOTAyLDEuMzExLTEuMjQ3LDIuOTI2LTAuOTU4LDQuNDkyYzAuMjg5LDEuNTY1LDEuMTg4LDIuOTUxLDIuNDk4LDMuODU0bDEwLjQ3LDcuMjA4Yy0wLjcyNSwyLjQ3OC0xLjI2NCw1LjAwMi0xLjYxMiw3LjU2IGwtMTIuNTAzLDIuMzA3Yy0xLjU2NSwwLjI4OS0yLjk1MSwxLjE4OC0zLjg1NCwyLjQ5OGMtMC45MDIsMS4zMTEtMS4yNDcsMi45MjYtMC45NTgsNC40OTFsMy43NzUsMjAuNDU4IGMwLjYwMiwzLjI1OSwzLjczNSw1LjQxOSw2Ljk5LDQuODEybDEyLjUwMi0yLjMwN2MxLjIzOCwyLjI2NSwyLjY0NCw0LjQzMiw0LjIwNCw2LjQ4OGwtNy4yMDgsMTAuNDcgYy0wLjkwMywxLjMxMS0xLjI0OCwyLjkyNi0wLjk1OSw0LjQ5MXMxLjE4OCwyLjk1MSwyLjQ5OCwzLjg1NGwxNy4xMzYsMTEuNzk4YzIuNzI3LDEuODc2LDYuNDY1LDEuMTksOC4zNDUtMS41NGw3LjIwOC0xMC40NyBjMi40NzgsMC43MjYsNS4wMDIsMS4yNjQsNy41NiwxLjYxM2wyLjMwNywxMi41MDJjMC41MzMsMi44OTEsMy4wNTYsNC45MTIsNS44OTQsNC45MTJjMC4zNjEsMCwwLjcyOC0wLjAzMiwxLjA5NS0wLjEwMSBsMjAuNDU4LTMuNzc0YzEuNTY2LTAuMjg5LDIuOTUxLTEuMTg4LDMuODU1LTIuNDk4YzAuOTAyLTEuMzExLDEuMjQ3LTIuOTI2LDAuOTU4LTQuNDkxbC0yLjMwNy0xMi41MDIgYzIuMjY2LTEuMjM5LDQuNDMyLTIuNjQzLDYuNDg3LTQuMjA0bDEwLjQ3MSw3LjIwOWMxLjMxLDAuOTAxLDIuOTIxLDEuMjQ0LDQuNDkxLDAuOTU4YzEuNTY1LTAuMjg5LDIuOTUxLTEuMTg4LDMuODU0LTIuNDk4IGwxMS43OTgtMTcuMTM2YzEuODc5LTIuNzMsMS4xOS02LjQ2NS0xLjU0LTguMzQ1bC0xMC40Ny03LjIwOGMwLjcyNi0yLjQ3OCwxLjI2NC01LjAwMiwxLjYxMy03LjU2bDEyLjUwMi0yLjMwNyBDMjk1LjM0NiwyMTguOTg1LDI5Ny41MDEsMjE1Ljg1NiwyOTYuODk5LDIxMi41OTh6IE0yMzkuNDEsMjIyLjgxOGMtNC40MzIsNi40MzYtMTMuMjcyLDguMDY5LTE5LjcxMiwzLjYzNyBjLTYuNDM3LTQuNDMzLTguMDY4LTEzLjI3NS0zLjYzNi0xOS43MTJjMi4xNDctMy4xMTgsNS4zNzktNS4yMTMsOS4xMDItNS45MDFjMC44NjctMC4xNiwxLjczNy0wLjIzOSwyLjYwMS0wLjIzOSBjMi44NDMsMCw1LjYxNywwLjg1Nyw4LjAwOCwyLjUwNEMyNDIuMjA5LDIwNy41MzcsMjQzLjg0LDIxNi4zOCwyMzkuNDEsMjIyLjgxOHoiPjwvcGF0aD4gPC9nPiA8L2c+IDwvZz4gPC9nPjwvc3ZnPg==')
  }
  .md-typeset .admonition.brain,
  .md-typeset details.brain {
    border-color: rgb(43, 155, 70);
  }
  .md-typeset .brain > .admonition-title,
  .md-typeset .brain > summary {
    background-color: rgba(43, 155, 70, 0.1);
  }
  .md-typeset .brain > .admonition-title::before,
  .md-typeset .brain > summary::before {
    background-color: rgb(43, 155, 70);
    -webkit-mask-image: var(--md-admonition-icon--brain);
            mask-image: var(--md-admonition-icon--brain);
  }

.md-typeset h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600; /* Adjust as needed */
  color: var(--h1-color);
}

.md-typeset h2 {
  font-weight: 600; /* Adjust as needed */
  color: var(--h1-color);
}

.md-typeset .md-button {
  background-color: #db3fb1; /* Set background color */
  border: none; /* Remove existing border */
  border-radius: 10px; /* Rounded corners */
  color: #ffffff; /* Text color */
  cursor: pointer;
  display: inline-flex; /* Use flexbox for alignment */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
  font-family: 'Poppins', sans-serif; /* Set font */
  font-size: 16px; /* Adjust font size */
  font-weight: 700; /* Bold text */
  padding: 3px 18px; /* Adjust padding */
  text-decoration: none; /* Remove underline */
  transition: background-color 125ms, transform 125ms; /* Smooth transitions */
}

.md-typeset .md-button:hover {
  background-color: #a11f7f; /* Darker shade on hover */
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.nav-mobile {
  display: none;
}
.nav-desktop {
  display: inline;
}

@media screen and (max-width: 1220px) {
  .nav-desktop {
    display: none;
  }
  .nav-mobile {
    display: inline;
  }
}