.navbar-brand img ,.footer-logo {
  width: 250px;
}

.offcanvas-header img  {
  width: 250px;
}


/* custom.css */

/* Define the purple color */
:root {
  --primary-purple: #A020F0; /* Use the hex code for the purple color */
}

/* Style for the Intro.js tooltip */
.introjs-tooltip {
  background-color: #f8f9fa; /* Light background color */
  color: #343a40; /* Dark text color */
  border: 1px solid #ced4da; /* Light border color */
  border-radius: 0.5rem; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
  max-width: 400px; /* Max width for tooltip */
}

/* Style for the tooltip header */
.introjs-tooltip-header {
  font-weight: bold; /* Bold text */
  margin-bottom: 0.5rem; /* Space below the header */
}

/* Style for the tooltip text */
.introjs-tooltiptext {
  font-size: 1rem; /* Normal font size */
  line-height: 1.5; /* Line height for readability */
}

/* Style for the tooltip buttons */
.introjs-button {
  background-color: var(--primary-purple); /* Purple background color */
  color: #fff; /* White text color */
  border: none; /* Remove border */
  padding: 0.5rem 1rem; /* Padding for buttons */
  border-radius: 0.25rem; /* Slightly rounded corners */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s; /* Transition effect */
}

.introjs-button:hover {
  background-color: #7D3C98; /* Darker purple on hover */
}

/* Style for the highlight layer */
.introjs-helperLayer {
  background: rgba(160, 32, 240, 0.1); /* Purple highlight with transparency */
  border: 1px dotted var(--primary-purple); /* Purple border */
}

/* Style for the "Add Author" button */
.add-author-button {
  background-color: var(--primary-purple); /* Purple background color */
  color: white; /* White text color */
  border: none; /* Remove border */
  padding: 0.5rem 1rem; /* Padding */
  border-radius: 0.5rem; /* Rounded corners */
  font-size: 1rem; /* Font size */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s; /* Transition effect */
}

.add-author-button:hover {
  background-color: #7D3C98; /* Darker purple on hover */
}



.tagify {
  --tag-bg: #6f42c1; /* Background color */
  --tag-hover: #5a32a6; /* Hover color */
  --tag-text-color: #fff; /* Text color */
  --tag-remove-bg: transparent; /* Remove button background */
  --tag-remove-bg-hover: rgba(255, 255, 255, 0.5); /* Remove button hover background */
  --tags-hover: none;
  --tags-border-radius: 0.25rem; /* Border radius */
  --tag-text-padding: 0.4rem; /* Padding */
  --tags-border: 1px solid #ced4da;
  --tags-box-shadow: 0 0 0 0.2rem rgba(108,117,125,.25);
  --tag-remove-color: #fff; /* Remove button text color */
}

.tagify__tag {
  background-color: var(--tag-bg);
  color: var(--tag-text-color);
  border-radius: var(--tags-border-radius);
  padding: var(--tag-text-padding);
}

.tagify__tag:hover {
  background-color: var(--tag-hover);
}

.tagify__tag__removeBtn {
  background-color: var(--tag-remove-bg);
  color: var(--tag-remove-color);
  cursor: pointer;
}

.tagify__tag__removeBtn:hover {
  background-color: var(--tag-remove-bg-hover);
  color: var(--tag-remove-color);
}

.tagify__tag__removeBtn::after {
  content: '×'; /* Content of the remove button */
  font-size: 14px;
}