:root {
    --bs-body-bg: darkgrey;
}
@font-face {
    font-family: 'sage-headline-black';
    src: local('sage-headline-black'), url(./assets/fonts/Sage_Headline-Black.woff2) format('woff2');
}

@font-face {
    font-family: 'sage-text-regular';
    src: local('sage-text-regular'), url(./assets/fonts/Sage_Text-Regular.woff2) format('woff2');
    
}

@font-face {
    font-family: 'sage-text-bold';
    src: local('sage-text-bold'), url(./assets/fonts/Sage_Text-Bold.woff2) format('woff2'); 
}

@font-face {
    font-family: 'sage-text-medium';
    src: local('sage-text-medium'), url(./assets/fonts/Sage_Text-Medium.woff2) format('woff2'); 
}
body{
    font-family: 'sage-text-regular';
}
#infocenterheader {
    font-family: 'sage-headline-black';

}

#fixedmenubar {
    font-family: 'sage-text-medium';
    color: white; 
    background-color: black;
}


.sage-icon {
    width: 50px;
    height: auto;
    padding: 10px 12px;
}

/* Base styles for the chatbot icon container */
.chatbot-icon {
  position: fixed; /* Keep the icon in the same spot on the screen */

  bottom: 20px; /* Adjust vertical distance from the bottom */
  right: 20px; /* Adjust horizontal distance from the right */
  z-index: 999; /* Ensure the icon is on top of other content */
  transition: transform 0.3s ease-in-out; /* Smooth transition for the hover effect */
  cursor: pointer;
}

/* Styles for the image itself */
.chatbot-icon img {
  width: 58px; /* Adjust the icon's size as needed */
  height: auto;
  object-position: 0% 0%; /* X then Y */
  border-radius: 50%; /* Optional: for a round icon */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow */
}

/* Hover effect */
.chatbot-icon:hover {
  transform: translateY(-10px); /* Move the icon up slightly on hover */
}