/* Base styles for all custom buttons */
.button-wrapper {
  display: inline-flex; /* Align buttons in a row */
  flex-direction: column; /* Stack items vertically */
  align-items: flex-start; /* Align items to the start (left) */
  margin-right: 10px; /* Add margin between buttons */
}

.custom-button {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Font family */
  display: inline-flex; /* Align text and SVG */
  align-items: center; /* Center items vertically */
  padding: 15px 30px; /* Padding for larger buttons */
  color: rgb(252, 252, 252); /* Text color */
  border-radius: 5px; /* Rounded corners */
  font-size: 23px; /* Original font size for larger buttons */
  font-weight: 600; /* Font weight */
  position: relative; /* Required for the pseudo-element positioning */
  overflow: hidden; /* Keeps the glow within button boundaries */
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Include transition for box-shadow */
  margin: 5px; /* Space between buttons */
}

/* Styles for buttons inside button-container */
.button-container .custom-button {
  padding: 10px 15px; /* Smaller padding for buttons inside the container */
  font-size: clamp(
    14px,
    2vw,
    18px
  ); /* Font size adapts but does not exceed 18px */
  flex: 0 1 auto; /* Allow buttons to shrink, but not grow beyond their content */
  min-width: 0; /* Prevent overflow */
  max-width: 100%; /* Prevent button from growing too wide */
  white-space: nowrap; /* Prevent text wrapping */
  text-overflow: ellipsis; /* Add ellipsis for overflow text */
  margin-right: 10px; /* Space between buttons */
  overflow: hidden; /* Hide overflow */
  box-sizing: border-box; /* Include padding in width/height calculations */
}

/* Additional styles to ensure buttons do not grow too wide */
.button-container {
  display: flex; /* Flexbox to align buttons */
  flex-wrap: wrap; /* Allow buttons to wrap if they overflow */
  gap: 10px; /* Space between buttons */
}

/* Media queries to set max font size based on screen width */
@media (max-width: 600px) {
  .button-container .custom-button {
    font-size: clamp(12px, 3vw, 16px); /* Smaller font size for small screens */
  }
}

@media (max-width: 400px) {
  .button-container .custom-button {
    font-size: 14px; /* Fixed font size for very small screens */
  }
}

/* Last button adjustment to avoid extra margin on the right */
.button-container .custom-button:last-child {
  margin-right: 0; /* Remove margin from the last button */
}

/* Arrow styling */
.arrow-svg {
  margin-left: 10px; /* Space between button text and arrow */
  margin-top: 4px; /* Adjust this value to move the arrow down */
  transition: transform 0.3s ease; /* Transition effect for hover */
  transform: rotate(179deg); /* Rotate to point down */
}

/* Hover effect for buttons with custom colors */
.custom-button-color:hover {
  filter: brightness(85%); /* Slightly darken button on hover */
  transition: filter 0.3s ease; /* Transition for filter */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Default text color for custom color buttons */
.custom-button-color {
  color: #fff; /* Default text color for readability */
}

/* Default text color for custom color buttons on hover */
.custom-button-color:hover {
  color: #fff; /* Maintain text color on hover */
}

/* Container for buttons */
.button-container {
  display: flex; /* Enable flexbox layout */
  flex-wrap: nowrap; /* Prevent wrapping of buttons */
  justify-content: flex-start; /* Align buttons to the left */
  width: 100%; /* Full width of the parent */
  gap: 10px; /* Space between buttons */
}

/* Blue button styles */
.custom-button-blue {
  background-color: #0073e6; /* Blue color */
}
.custom-button-blue:hover {
  background-color: #005bb5; /* Darker blue on hover */
  color: #e0e0e0; /* Light grey text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Green button styles */
.custom-button-green {
  background-color: #28a745; /* Green color */
}
.custom-button-green:hover {
  background-color: #218838; /* Darker green on hover */
  color: #e0e0e0; /* Light grey text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Red button styles */
.custom-button-red {
  background-color: #dc3545; /* Red color */
}
.custom-button-red:hover {
  background-color: #c82333; /* Darker red on hover */
  color: #e0e0e0; /* Light grey text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Brown button styles */
.custom-button-brown {
  background-color: #6f4f28; /* Brown color */
}
.custom-button-brown:hover {
  background-color: #5d3a1b; /* Darker brown on hover */
  color: #e0e0e0; /* Light grey text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Purple button styles */
.custom-button-purple {
  background-color: #6253a7; /* Purple color */
}
.custom-button-purple:hover {
  background-color: #5a32a3; /* Darker purple on hover */
  color: #e0e0e0; /* Light grey text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Pink button styles */
.custom-button-pink {
  background-color: #e83e8c; /* Pink color */
}
.custom-button-pink:hover {
  background-color: #d6336c; /* Darker pink on hover */
  color: #ffffff; /* White text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Orange button styles */
.custom-button-orange {
  background-color: #c76636; /* Orange color */
}
.custom-button-orange:hover {
  background-color: #9e4e2c; /* Darker orange on hover */
  color: #ffffff; /* White text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Teal button styles */
.custom-button-teal {
  background-color: #20c997; /* Teal color */
}
.custom-button-teal:hover {
  background-color: #1aa573; /* Darker teal on hover */
  color: #ffffff; /* White text color on hover */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* White button styles */
.custom-button-white {
  background-color: rgb(248, 249, 251); /* White color */
  color: #323232; /* Dark grey text color */
}
.custom-button-white:hover {
  background-color: rgba(
    248,
    249,
    251,
    0.818
  ); /* Slightly darker white on hover */
  color: #323232; /* Dark grey text color */
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.15),
    0 100px 80px rgba(255, 255, 255, 0.02),
    0 42px 33px rgba(255, 255, 255, 0.024),
    0 22px 18px rgba(255, 255, 255, 0.028),
    0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04),
    0 3px 2px rgba(255, 255, 255, 0.07);
}

/* Utility classes for alignment */
.custom-button.left {
  float: left;
}
.custom-button.right {
  float: right;
}
.download-message {
  font-size: 16px !important;
  display: none; /* Ensure it's hidden by default */
  margin-top: 5px; /* Space above message */
  color: #d9534f; /* Change color as needed */
  font-weight: bold; /* Make the text bold */
  font-size: 14px; /* Adjust font size as needed */
}

.download-message a {
  color: #007bff; /* Change to your desired link color */
  cursor: pointer; /* Change the cursor to a pointer on hover */
  transition: color 0.3s ease; /* Smooth transition for color change */
}

.download-message a:hover {
  color: #0056b3; /* Darker color on hover */
}
/* Discord-style Modal with macOS Close Button */
.modal-report {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-report-content {
  background-color: #36393f;
  margin: 60px auto;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(32, 34, 37, 0.6), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
  width: 440px;
  max-width: 90%;
  color: #dcddde;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Other styles remain the same... */

/* Updated Close Button Style */
.modal-report-close {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  background-color: #ff5f57;
  border-radius: 50%;
  color: #000000;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 1001;
}

.modal-report-close::before {
  content: "×";
  font-size: 16px;
  position: relative;
  top: -2px;
  line-height: 1;
}

.modal-report-close:hover {
  background-color: #ff3b30;
}

/* Ensure modal content remains centered despite the button */
.modal-report-content {
  position: relative;
  padding: 20px 20px 30px;
}

/* Rest of the styles remain unchanged */
.modal-report-columns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-report-column {
  background-color: #2f3136;
  border-radius: 3px;
  padding: 16px;
}

.modal-report-column h2 {
  color: #ffffff;
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.modal-report-column p,
.modal-report-column textarea {
  color: #b9bbbe;
  font-size: 14px;
  line-height: 18px;
}

.modal-report-column a {
  color: #00b0f4;
  text-decoration: none;
}

.modal-report-column a:hover {
  text-decoration: underline;
}

.modal-report-submit {
  background-color: #5865f2;
  border: none;
  color: white;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  margin-top: 20px;
  align-self: flex-end;
}

.modal-report-submit:hover {
  background-color: #4752c4;
}

#reportMessage {
  width: 100%;
  padding: 10px;
  margin-top: 8px;
  box-sizing: border-box;
  border: none;
  border-radius: 3px;
  background-color: #40444b;
  color: #dcddde;
  resize: vertical;
  font-size: 14px;
  line-height: 18px;
}

#reportMessage::placeholder {
  color: #72767d;
}

/* Fade-in animation for smooth visibility */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Base styles for the custom toggle */
.custom-toggle {
  margin-bottom: 15px;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  position: relative; /* Required for absolute positioning of child elements */
}

.padding-custom {
  padding: 0px; /* Add custom padding */
  background-color: #282828 !important; /* Custom color for the padding area */
  border-radius: 5px; /* Add rounding, if needed */
}

.custom-toggle-title {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; /* Updated font-family */
  font-style: normal; /* Ensure normal font style */
  font-weight: 600; /* Match font weight to button */
  position: relative; /* Ensure proper positioning of child elements */
  padding-left: 30px; /* Add padding to the left to accommodate the arrow */
  background: #292929; /* Default dark background */
  color: #ffffff; /* White text */
  padding: 10px 25px;
  border: 1px solid #343439; /* Border for the toggle title */
  font-size: 20px;
  transition: background-color 0.3s ease;
}

.custom-toggle-title:hover {
  background: #383838; /* Darker background on hover */
}

.custom-toggle-content {
  background: #212122; /* Darker background for content */
  color: #d8d4d4; /* Light text color */
  padding: 15px;
  border: 1px solid #3a3738; /* Border for content area */
  border-top: none; /* Remove top border to connect with the title */
  display: none; /* Content is hidden by default */
  max-height: 0; /* Hidden initially for animation */
  overflow: hidden; /* Hide overflow during transition */
  transition: max-height 0.3s ease; /* Transition for height */
}

/* Green background toggle styles */
.custom-toggle.green-background .custom-toggle-title {
  background: #3c8c4e; /* Green background */
  border-color: #45a35b; /* Green border */
}

.custom-toggle.green-background .custom-toggle-title:hover {
  background: #218838; /* Darker green on hover */
  border-color: #1e7e34; /* Even darker border on hover */
}

.green-background {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-style: normal; /* Ensure normal font style */
  display: inline-block;
  padding: 15px 30px;
  color: rgb(252, 252, 252);
  border-radius: 5px;
  font-size: 23px;
  font-weight: 600;
  position: relative; /* Required for the pseudo-element positioning */
  overflow: hidden; /* Keeps the glow within button boundaries */
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; /* Include transition for box-shadow */
  margin: 5px;
  background-color: #28a745; /* Green background */
}

.default-background {
  background-color: #292929; /* Default background, adjust as needed */
}

/* Style for the arrow */
.toggle-arrow {
  position: absolute; /* Position arrow absolutely within title */
  top: 13%;
  left: -3px; /* Ensure it’s within the padding area */
  transform: translateY(-20%) rotate(270deg); /* Center vertically and set initial rotation */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #a29f9f; /* Arrow color */
  margin-right: 0px;
  transition: transform 0.3s ease, top 0.3s ease; /* Smooth transform for opening */
}

.toggle-arrow.green-arrow {
  border-top-color: rgb(242, 245, 242); /* Change arrow color to green */
}

/* Open state styles */
.custom-toggle.open .toggle-arrow {
  transform: translateX(20%) rotate(360deg); /* Move arrow upwards and rotate */
  top: 0; /* Move to the top of the title */
}

.custom-toggle.open .custom-toggle-content {
  display: block; /* Show content when open */
  max-height: 1000px; /* Allow content to be visible */
}

/* Rotate the arrow when the content is visible */
.custom-toggle
  .custom-toggle-content.show
  + .custom-toggle-title
  .toggle-arrow {
  transform: rotate(180deg);
}

/* Container for tabs */
.custom-tabs {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Helvetica", "Arial", sans-serif;
  border-radius: 10px;
  overflow: hidden;
  background: #333333;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  margin: 30px 0;
}

/* Main title above tabs */
.custom-tabs-main-title {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-align: left;
  padding: 15px 20px;
  background: #333333;
  border-bottom: 1px solid #424242;
}

/* Tab titles container */
.custom-tabs-titles {
  list-style: none;
  margin: 0;
  padding: 10px 10px 0;
  display: flex;
  background: #333333;
  border-bottom: 1px solid #424242;
}

/* Individual tab title */
.custom-tab-title {
  padding: 8px 13px;
  cursor: pointer;
  color: #a0a0a0;
  transition: all 0.2s ease;
  border-radius: 6px 6px 0 0;
  margin-right: 2px;
  font-size: 13px;
  font-weight: 500;
  background: #323232; /* Subtle background color for inactive tabs */
}

/* Hover effect */
.custom-tab-title:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
}

/* Active tab title */
.custom-tab-title.active {
  background: #2a2a2a;
  color: #ffffff;
}

/* Tab content */
.custom-tabs-content .custom-tab-content {
  padding: 20px;
  background: #2a2a2a;
  color: #e0e0e0;
  display: none;
  font-size: 14px;
  line-height: 1.6;
}

/* Show the active tab content */
.custom-tabs-content .custom-tab-content.active {
  display: block;
}

/* Responsive design */
@media (max-width: 768px) {
  .custom-tabs-titles {
    flex-wrap: wrap;
  }
  .custom-tab-title {
    flex-grow: 1;
    text-align: center;
    margin-bottom: 5px;
  }
}

/* Base styles for alert types */
.alert-info,
.alert-success,
.alert-warning,
.alert-error,
.alert-note,
.alert-announce,
.alert-custom {
  border-radius: 5px;
  padding: 15px; /* Adjust padding to match the design */
  margin: 3px 0;
  font-size: 16px;
  border: 1px solid transparent; /* Default border */
}

/* Specific types of alert announcements */

.alert-info {
  color: #e1e1e1; /* Light grey text color for better readability on dark backgrounds */
  background-color: #0073aa; /* A vibrant blue for the info background */
  border: 1px solid #005d8c; /* Slightly darker blue for the border to define edges */
  margin: 10px 0;
  border-radius: 4px;
}

.alert-success {
  color: #fcf9f9; /* Light grey text color for better readability on dark backgrounds */
  background-color: #46b450; /* Example color for success alerts */
  border: 1px solid #46b450; /* Slightly darker yellow for the border */
  margin: 10px 0;
  border-radius: 4px;
}

.alert-warning {
  color: #1e1d1d; /* Dark text color for better readability on bright backgrounds */
  background-color: #cdb776; /* Bright yellow for warning alerts */
  border: 1px solid #dadad9; /* Slightly darker yellow for the border */
  margin: 10px 0;
  border-radius: 4px;
  font-weight: 399;
}

.alert-error {
  color: #f8f9fa; /* Light text color for better readability on dark background */
  background-color: #dc3232; /* Red background color for error alerts */
  border: 1px solid #b71c1c; /* Darker red for the border to define the alert */
  margin: 10px 0;
  border-radius: 4px;
}

.alert-custom {
  color: #fff; /* Light text color for better readability */
  margin: 10px 0; /* Same margin as others */
  border-radius: 4px;
}

/* Base styles for note alerts */
.alert-note {
  border-radius: 5px;
  margin: 10px 0;
  font-size: 16px;
  background-color: #333; /* Dark background for note alerts */
  border: 1px solid transparent; /* Default border */
}

.alert-announce {
  margin: 3px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9; /* Adjust color as needed */
  color: #333;
}

/* General styles for images inside all alert types */
.alert-info img,
.alert-success img,
.alert-warning img,
.alert-error img,
.alert-note img,
.alert-announce img,
.alert-custom img {
  margin-bottom: 5px; /* Adjust spacing below the image */
  margin-top: 5px; /* Adjust spacing above the image */
}

.alert-info p img,
.alert-success p img,
.alert-warning p img,
.alert-error p img,
.alert-note p img,
.alert-announce p img,
.alert-custom p img {
  margin-left: 5px; /* Adds space between the text and the image */
}

.numbered-item {
  display: flex;
  align-items: center;
  margin-bottom: -5px; /* No extra space between list items */
  padding: 0; /* Ensure no padding is applied */
}

.number-svg {
  width: 24px; /* Adjust size as needed */
  height: auto;
  margin-right: 5px; /* Space between number and content */
  padding: 0; /* Ensure no padding is applied */
}

.number-content {
  font-size: 16px;
  margin: 0; /* Remove any margin */
  padding: 0; /* Remove any padding */
  line-height: 1.2; /* Adjust line-height if needed */
}

/* STYLE FOR INFO SHORTCODE */

.info-box {
  position: relative;
  background-color: #29253e; /* Background color similar to the GitHub Projects banner */
  background-image: url("../img/background-banner.webp"),
    url("../img/background-on-top.webp"); /* Add multiple background images */
  background-repeat: no-repeat, no-repeat; /* Ensure both images do not repeat */
  background-position: left 20px, top left; /* Adjust positions for both images */
  background-size: cover, auto; /* Adjust sizes for both images */
  border-style: solid;
  border-width: 1px;
  border-radius: 6px; /* Same border radius as the rounded-2 class */
  padding: 15px;
  margin: 10px 0;
}

.info-header {
  display: flex;
  align-items: flex-start; /* Align items to the top */
  margin-bottom: 1px;
}

.info-icon {
  font-size: 24px; /* Adjust size as needed */
  margin-right: 5px; /* Space between icon and title */
}

.info-title {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 600;
  font-size: 25px; /* Title font size */
  color: rgb(224, 224, 224); /* White color for title text */
  margin: 0;
}

.info-content {
  font-size: 16px; /* Ensure content font size is consistent */
  color: #dddddd; /* Light gray text color for readability */
}

.info-content a {
  color: #56b48c; /* Matching link color */
  text-decoration: underline;
}

.info-content a:hover {
  color: #4a9675; /* Matching link color */
  text-decoration: underline;
}

/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip text box */
.tooltip-box {
  visibility: hidden;
  background-color: #36393f;
  color: #dcddde; /* Light text color for better readability */
  text-align: left; /* Left-align text */
  padding: 6px 8px; /* Increased padding for a modern look */
  border-radius: 8px; /* Softer border radius */
  position: absolute;
  z-index: 10000;
  top: 110%; /* Position tooltip just below the button */
  left: 50%; /* Center horizontally */
  transform: translateX(-50%); /* Center the tooltip */
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  white-space: normal; /* Allow text to wrap within the tooltip */
  width: 383px; /* Fixed width for the tooltip */
  max-width: calc(100vw - 30px); /* Ensure it fits within the viewport */
  box-sizing: border-box; /* Ensure padding is included in width */
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.5; /* Improve text readability */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
  /* Add the explicit shadow here */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.15); /* Standard shadow */
}

/* Tooltip Arrow */
.tooltip-box::after {
  content: "";
  position: absolute;
  top: -10px; /* Adjusted position for better alignment */
  border-width: 10px; /* Increased arrow size for better visibility */
  border-style: solid;
  border-color: transparent transparent #212830 transparent; /* Arrow pointing up with matching background color */

  /* Smoothen the corners for a more polished appearance */
  border-radius: 3px;

  /* Center the arrow */
  left: 50%;
  margin-left: -10px; /* Adjusted margin to center the arrow */

  /* Improved shadow for a more elegant look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Arrow position for left-aligned tooltip */
.tooltip-container-left .tooltip-box::after {
  left: 10px; /* Margin from the left edge */
  margin-left: 0; /* Reset margin */
}

/* Arrow position for right-aligned tooltip */
.tooltip-container-right .tooltip-box::after {
  right: 10px; /* Margin from the right edge */
  left: auto; /* Remove left alignment */
  margin-left: 0; /* Reset margin */
}

/* Show the tooltip on hover */
.tooltip-container:hover .tooltip-box {
  visibility: visible;
  opacity: 1;
}

/* Tooltip text area */
.tooltip-text {
  color: #dcddde;
  background-color: #2f3136; /* Custom background color for text */
  padding: 10px;
  border-radius: 5px;
  position: relative;
  z-index: 1; /* Ensure text is above the arrow */
  margin-bottom: 10px; /* Space between text and link */
}

/* Tooltip link */
.tooltip-link {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 20px;
  font-weight: 900;
  display: block; /* Ensures the link takes up the entire width */
  color: #537a53; /* Link color */
  text-decoration: none;
  padding: 10px; /* Add padding inside the link */
  background-color: #282626; /* Set the background color to match the hover color */
  margin: 10px 0; /* Add margin around the link */
  border-radius: 5px; /* Rounded corners for the link */
  position: relative; /* Relative positioning for the arrow */
  transition: background-color 0.3s ease; /* Smooth background transition */
}

/* Add link emoji after the tooltip link */
.tooltip-link::after {
  content: "🔗"; /* Link emoji */
  position: absolute;
  right: 10px; /* Position emoji 10px from the right */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Ensure the emoji is perfectly centered */
  font-size: 16px; /* Size of the emoji */
  color: #ffffff; /* Same color as the link */
  transition: color 0.3s ease; /* Smooth transition for the emoji color */
}

/* Hover effect for the link */
.tooltip-link:hover {
  background-color: #151515; /* Keep this the same or adjust if you want a different hover effect */
  color: #358541; /* Change text color on hover */
  text-decoration: none; /* Keep the text without underline */
}

.tooltip-link:hover::after {
  color: #fff; /* Change arrow color on hover */
}

/* Button styling */
.info-download-button {
  background-color: #212830;
  color: #f0f6fc;
  border: 1px solid #3d444d;
  border-radius: 6px;
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
  display: inline-block;
  margin-top: 25px; /* Add margin to the top of the button */
  margin-right: 5px;
}

.info-download-button:hover {
  background-color: #2a343d; /* Slightly lighter on hover */
}

/* Why Info Tooltip Styles */
.why-info-container {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 0;
  z-index: 999; /* Ensure it's above other elements */
}

/* Force the container to break out of any stacking context */
.why-info-container * {
  position: relative;
  z-index: inherit;
}

/* Question mark icon hover effect - minimal change */
.why-info-icon {
  transition: opacity 0.2s ease;
}

.why-info-container:hover .why-info-icon {
  opacity: 0.8;
}

/* Tooltip box */
.why-info-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 9999; /* Very high z-index to appear above everything */
  background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
  color: #f3f4f6;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  width: 280px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateY(5px) scale(0.95);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  pointer-events: none; /* Prevent tooltip from interfering with hover */
}

/* Tooltip positioning - default right */
.why-info-right .why-info-tooltip {
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%) translateX(5px) scale(0.95);
}

.why-info-left .why-info-tooltip {
  top: 50%;
  right: calc(100% + 12px);
  transform: translateY(-50%) translateX(-5px) scale(0.95);
}

.why-info-center .why-info-tooltip {
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-5px) scale(0.95);
}

/* Tooltip arrows */
.why-info-tooltip::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

/* Right positioned tooltip arrow */
.why-info-right .why-info-tooltip::before {
  top: 50%;
  left: -6px;
  transform: translateY(-50%);
  border-width: 6px 6px 6px 0;
  border-color: transparent #374151 transparent transparent;
}

/* Left positioned tooltip arrow */
.why-info-left .why-info-tooltip::before {
  top: 50%;
  right: -6px;
  transform: translateY(-50%);
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #374151;
}

/* Center positioned tooltip arrow */
.why-info-center .why-info-tooltip::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: #374151 transparent transparent transparent;
}

/* Show tooltip on hover */
.why-info-container:hover .why-info-tooltip {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) scale(1) !important;
}

.why-info-left:hover .why-info-tooltip {
  transform: translateY(-50%) translateX(0) scale(1) !important;
}

.why-info-center:hover .why-info-tooltip {
  transform: translateX(-50%) translateY(0) scale(1) !important;
}

/* Tooltip content styling */
.why-info-content {
  margin: 0;
  font-size: 14px;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .why-info-tooltip {
    width: 240px;
    font-size: 13px;
    padding: 10px 14px;
  }

  /* On mobile, always show tooltips below */
  .why-info-left .why-info-tooltip,
  .why-info-right .why-info-tooltip {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(5px) scale(0.95);
  }

  .why-info-left .why-info-tooltip::before,
  .why-info-right .why-info-tooltip::before {
    top: -6px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #374151 transparent;
  }

  .why-info-container:hover .why-info-tooltip {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}