:root {
  --admonition-border-left-width: 0.2rem;
  --base-border-radius: 0.5rem;

  /* Primary and Secondary Colors */
  --color-primary: #425D94;
  --color-secondary: #51606f;

  /* Primary and Secondary Containers */
  --color-primary-container: #D8E3FC;
  --color-secondary-container: #d4e4f6;

  /* Surface and Tertiary Colors */
  --color-surface: #f7f9ff;
  --color-tertiary: #67587a;
  --color-tertiary-container: #eddcff;

  /* Error Colors */
  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
}



.md-header {
  background-color: #425D94 !important;
  color: #D8E3FC !important;
}

.md-tabs {
  background-color: #425D94 !important;
  box-shadow: 0 0px 12px -2px gray;
}

.md-tabs__link {
  font-size: 20px !important;
  color: #f7f9ff;
  font-weight: 450;
}

.md-tabs__item--active {
  font-size: 20px !important;
  font-weight: 850 !important;
  color: #D8E3FC;
  position: relative; /* Allow positioning of the pseudo-element */
}

.md-tabs__item--active::after {
  content: ""; /* Creates the underline effect */
  display: block;
  width: 100%; /* Span the width of the link */
  height: 5px; /* Thickness of the underline */
  background-color: #D8E3FC; /* Adjust to match your active color */
  color: #D8E3FC !important;
  position: absolute; /* Position relative to the parent */
  bottom: 0px; /* Moves the underline lower */
  left: 0;
  font-weight: bold !important;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.md-tabs__link:hover {
  font-size: 20px !important;
  color: #D8E3FC !important;
  position: relative; /* Allow positioning of the pseudo-element */
}




.md-header__button.md-logo {
  display: none !important;
}

.md-header__title {
  font-size: 50px !important;
  margin-left: 10px !important;
  color: #D8E3FC;
}

.md-search__form {
  border-radius: var(--base-border-radius);
  font-family: 'Outfit' !important;
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  border-top-right-radius: var(--base-border-radius);
  border-top-left-radius: var(--base-border-radius);
  font-family: 'Outfit' !important;
}

[dir="ltr"] .md-search__output {
  border-bottom-right-radius: var(--base-border-radius);
  border-bottom-left-radius: var(--base-border-radius);
  font-family: 'Outfit' !important;
}

p {
  font-size: 22px !important;
}

.md-typeset .grid.cards > ul > li {
  border-radius: 20px !important;
  margin: 5px !important;
}


.grid-text {
  color: gray !important;
}

/* Hide page titles */
.md-content title {
  display: none !important;
}

/* Optional: Add transparency to the content area */
.md-content {

  padding: 2rem; /* Add padding for readability */
  border-radius: 8px; /* Rounded corners for the content box */
}



/* Logo container to position both images */
.logo-container {
  position: relative;
  width: 300px; /* Adjust width */
  height: 300px; /* Adjust height */
  margin: 0 auto; /* Center the container */
  overflow: hidden; /* Prevent overflow */
  background-color: transparent; /* Fully transparent background */
}

/* Shared styles for both logos */
.logo-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Prevent distortion */
  background: transparent; /* Ensure no background color */
  border: none; /* Remove any border effects */
  box-shadow: none; /* Remove shadow effects */
  transform: translate(-50%, -50%);
}

/* Regular logo (default state) */
.logo.regular {
  z-index: 1;
  opacity: 1;
  transition: opacity 0.7s ease-in-out;
  pointer-events: none !important;
}


.home-header {
  font-size: 1.5rem !important;
  font-weight: bold !important;
  color: #425D94 !important;
}

.md-header__button {
  color: #D8E3FC !important;
}

.md-nav__title {
  color: #D8E3FC !important;
  background-color: #425D94 !important;
}

.features-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1rem;
}

h2 img {
  height: 1.5em; /* Scale image to match font size */
  vertical-align: middle; /* Align icon with text */
  margin-right: 0.5em; /* Add space between icon and text */
  background: none !important; /* Remove any background */
  box-shadow: none !important; /* Remove any shadow */
}

h2, h2 img {
  pointer-events: none !important;
}

.no-click-logo {
  pointer-events: none !important;
  background: none !important; /* Remove any background */
  box-shadow: none !important; /* Remove any shadow */
  width: 40% !important;
}

/* Initial state of elements (hidden with opacity) */
.fade-section {
  opacity: 0; /* Start invisible */
  transform: translateY(20px); /* Slight downward shift */
  transition: opacity 1.5s ease, transform 1.5s ease; /* Smooth fade and shift */
}

.fade-section, .fade-section * {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}



/* When the element is in view, apply these styles */
.fade-section.visible {
  opacity: 1;
  transform: translateY(0); /* Bring back to its original position */
}


/* Contact page container */
.contact-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #F9F9FF;
  border-radius: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* Contact message styling */
.contact-message {
  font-size: 1rem;
  color: #425D94;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* Contact info block */
.contact-info {
  text-align: center;
  margin-top: 2rem;
}

.contact-info a {
  color: #1E88E5;
  text-decoration: none;
  font-weight: bold;
}


@media (max-width: 768px) {
  .features-container {
    gap: 1rem; /* Keep a moderate gap between boxes */
    padding: 0 0rem; /* Slight padding on the sides for aesthetics */
  }

  /* Adjust icon size to fit with larger feature boxes */
  h2 img {
    height: 1.5em;
    vertical-align: middle;
    margin-right: 0.5em;
  }

  h1 {
    align-items: center !important;
    justify-content: center !important;
    margin: 10 auto !important;
  }

  .md-header__title {
    font-size: 25px !important;
  }

  .contact-container {
    margin: 0 auto;
    margin-left: -40px !important;
    width: 125% !important;
    padding: 1rem;
    background: #F9F9FF;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* General Reset */
img, video {
  display: block;
  max-width: 100%;
  height: auto;
  border: none !important;
  margin: 0;
  padding: 0;
  background: transparent !important;
  pointer-events: none !important;
}

/* Screenshot Styles */
.screenshot-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center image and text */
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  pointer-events: none !important;
}

.screenshot {
  width: 100%; /* Make the image responsive */
  border-radius: 20px; /* Rounded corners */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Smooth shadow */
  object-fit: cover; /* Crop and zoom image */
  overflow: hidden !important;
  pointer-events: none !important;
}


.video-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.video-container-cli {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: #F9F9FF !important;
}

.cli {
  width: 80%;
  height: auto;
  display: block;
  border-radius: 30px;
  background-color: #F9F9FF !important;
}


.fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0; /* Initially invisible */
  transition: opacity 1s ease-in-out; /* Smooth fade effect */
  pointer-events: none; /* Prevent interaction */
}


/* Retain MkDocs Material grid properties */
.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive column layout */
  gap: 1rem; /* Default spacing between items */
}

/* Additional customization for your custom grid */
.custom-grid > ul > li {
  border-radius: 12px; /* Custom rounded corners */
  background-color: #F9F9FF !important; /* Light blue background */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 1rem; /* Custom padding inside cards */
  color: #425D94;
}


/* Custom icon styling for large icons */
.custom-grid .lg.middle {
  color: #425D94; /* Adjust icon color */
  margin-right: 0.5rem; /* Space between icon and text */
}


:root > * {
  --md-footer-bg-color: #FFF;
  --md-footer-bg-color--dark: #FFF;
}

/* Feature Grid */
.feature-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Spacing between blocks */
  justify-content: center;
  align-items: center;
}

/* Individual Feature Block */
.feature-block {
  display: flex;
  align-items: center;
  background-color: var(--color-surface, #f7f9ff); /* Optional: Use a CSS variable */
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 600px;
  width: 100%;
  height: auto;
}

/* Feature Image */
.feature-image {
  flex-shrink: 0;
  width: 120px; /* Adjust as needed */
  height: 120px; /* Adjust as needed */
  background-color: black; /* Placeholder for the image */
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.feature-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Feature Text */
.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-text h2 {
  font-size: 1.5rem;
  margin: 0 0 10px 0;
  color: var(--color-primary, #425D94);
}

.feature-text p {
  font-size: 1rem;
  color: var(--color-secondary, #51606f);
}

/* CLI Showcase Container */
.cli-showcase {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #F9F9FF !important; /* Background color */
  border-radius: 30px; /* Rounded corners */
  width: 100%; /* Full-width block */
  padding: 20px 0; /* Padding for block height */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Strong shadow */
  font-family: 'Courier New', Courier, monospace; /* Monospaced font */
  color: var(--color-primary, #425D94); /* CLI text color */
}

/* CLI Command Text */
.cli-command {
  font-size: 45pt; /* Large font size */
  font-weight: bold; /* Bold text */
  line-height: 2; /* Keep line height minimal */
  color: #425D94; /* Primary color for text */
  display: flex; /* Use flex for alignment */
  align-items: center; /* Align vertically */
}

/* Blinking Cursor */
.blinking-cursor {
  display: flex; /* Treat the cursor as inline */
  width: 0.6em; /* Width proportional to the font size */
  font-size: 40pt !important;
  background-color: #425D94; /* Same as text color */
  animation: blink 1s steps(1, start) infinite; /* Blinking animation */
  margin-left: 10px; /* Space between text and cursor */
}

/* Blinking Animation */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


@media (max-width: 768px) {
  /* CLI Showcase Container */
.cli-showcase {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #F9F9FF !important; /* Background color */
  border-radius: 20px; /* Rounded corners */
  width: 100%; /* Full-width block */
  padding: 50px 0; /* Padding for block height */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2); /* Strong shadow */
  font-family: 'Courier New', Courier, monospace; /* Monospaced font */
  color: var(--color-primary, #425D94); /* CLI text color */
}

/* CLI Command Text */
.cli-command {
  font-size: 30pt; /* Large font size */
  font-weight: bold; /* Bold text */
  line-height: 2; /* Keep line height minimal */
  color: #425D94; /* Primary color for text */
  display: flex; /* Use flex for alignment */
  margin-left: 2px !important;
  align-items: center; /* Align vertically */
}

/* Blinking Cursor */
.blinking-cursor {
  display: flex; /* Treat the cursor as inline */
  width: 0.6em; /* Width proportional to the font size */
  font-size: 30pt !important;
  background-color: #425D94; /* Same as text color */
  animation: blink 1s steps(1, start) infinite; /* Blinking animation */
  margin-left: 10px; /* Space between text and cursor */
}

/* Blinking Animation */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
}

.custom-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust for smaller screens */
  gap: 2.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.custom-grid-2 > ul > li {
  border-radius: 12px;
  background-color: #F9F9FF !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lighter shadow */
  padding: 2rem; /* Slightly smaller padding for mobile */
  color: #425D94;
  font-size: 10px; 
  line-height: 1.4;
  min-height: 250px; /* Use min-height instead of fixed height */
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .custom-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
  }

  .custom-grid-2 > ul > li {
    padding: 1.5rem;
    font-size: 8px; /* Adjust font size for smaller screens */
  }
}


/* Custom icon styling for large icons in custom-grid-2 */
.custom-grid-2 .lg.middle {
  color: #425D94; /* Adjust icon color */
  margin-right: 0.5rem; /* Space between icon and text */
  font-size: 1rem; /* Adjust icon size */
}

/* Reduce padding/margins for mobile view */
@media (max-width: 768px) {
  .md-container {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
  }
  
  .md-typeset {
    margin-left: 0px;
    margin-right: 0px;
  }
}

/* Popup Styles */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-container {
  background: #fffbf0;
  border-radius: 35px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 75%;
  width: 90%;
  animation: slideIn 0.3s ease-out;
}

.popup-content {
  padding: 2rem;
  position: relative;
}

.popup-header {
  background: linear-gradient(135deg, #ffd966 0%, #ffed4e 100%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 2rem;
  border-radius: 35px 35px 0 0;
}

.popup-warning-icon {
  width: 28px;
  height: 28px;
  color: #c67c1b;
  flex-shrink: 0;
}

.popup-header h1 {
  margin: 0;
  color: #c67c1b;
  font-size: 1.5rem;
  flex: 1;
}

.popup-header .popup-close {
  position: static;
  top: auto;
  right: auto;
  font-size: 1.7rem;
  color: #c67c1b;
  opacity: 1.0;
  padding: 0;
  margin: 0;
}

.popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--md-default-fg-color);
  opacity: 0.7;
  transition: opacity 0.2s;
}

.popup-close:hover {
  opacity: 0.7;
}

.popup-content h2 {
  display: none;
}

.popup-content a {
  color: #c67c1b;
  font-weight: 600;
  text-decoration: underline;
  transition: opacity 0.2s;
}

.popup-content a:hover {
  opacity: 0.8;
}

.popup-content p {
  margin: 0 0 1.5rem 0;
  color: var(--md-default-fg-color);
  line-height: 1.6;
}

.popup-action {
  background-color: var(--md-primary-fg-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: opacity 0.2s;
}

.popup-action:hover {
  opacity: 0.9;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floating-warning-button {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd966 0%, #ffed4e 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
}

.floating-warning-button:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.floating-warning-button svg {
  width: 32px;
  height: 32px;
  color: #c67c1b;
}

@keyframes pulse {
  0% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  50% {
    box-shadow: 0 4px 20px rgba(198, 124, 27, 0.4);
  }
  100% {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

.floating-warning-button {
  animation: pulse 2s infinite;
}