/* Global Overrides: Redefine the :root variables */
:root {
  --cassiopeia-color-primary: #f5f5f5; /* Light gray */
  --cassiopeia-color-hover: #c7c7c7; /* Lighter gray for hover */
  --cassiopeia-color-link: #4a4a4a; /* Dark gray for links */
  --link-color: #4a4a4a;
  --link-hover-color: #c7c7c7;
}

/* Set a light gray background for the entire page */
body {
    background-color: #f5f5f5; /* Light gray */
    color: #4a4a4a; /* Dark gray for text */
    font-size: 11px;
    line-height: 1.5;
}

/* Force text color and font size for all elements in the container-header */
.container-header,
.container-header * {
    color: #4a4a4a !important; /* Force dark gray text */
    font-size: 11px !important; /* Force text size */
    line-height: 1.5 !important; /* Ensure consistent spacing */
    background-color: transparent !important; /* Remove background color */
    border: none !important; /* Remove borders */
    box-shadow: none !important; /* Remove shadows */
}

/* Remove gradient from full-width header container */
.container-header.full-width {
    background: none !important; /* Remove any gradient or background image */
    background-color: transparent !important; /* Set background to transparent */
}

/* Make container-footer footer full-width dark grey */
.container-footer.footer.full-width {
    background: #4a4a4a !important; /* Set a solid dark grey background */
    background-image: none !important; /* Remove any gradient or background image */
    color: #ffffff !important; /* White text for better contrast */
    padding: 20px; /* Optional: Add padding for better spacing */
}

/* Set font size for all form elements within container-footer footer to 11px */
.container-footer.footer.full-width input,
.container-footer.footer.full-width textarea,
.container-footer.footer.full-width select,
.container-footer.footer.full-width button {
    font-size: 11px !important; /* Set font size to 11px */
    line-height: 1.5; /* Ensure proper spacing */
}

/* Adjust site-description text to 14px */
.site-description {
    font-size: 14px !important; /* Set size to 14px */
    line-height: 1.5; /* Optional: Adjust line height */
    color: inherit; /* Use the inherited text color */
}

/* Remove underline from links and apply hover effects */
a {
    color: var(--link-color); /* Use updated link color */
    text-decoration: none;
}

a:hover {
    background-color: rgba(128, 128, 128, 0.2); /* Opaque gray */
    color: var(--link-hover-color); /* Use updated hover color */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Make headers bold and 12px in size */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    font-size: 12px;
}

/* Style buttons with dark grey background, white text, and 11px font size */
button {
    background-color: #4a4a4a; /* Dark grey */
    color: #ffffff; /* White text */
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}
.btn {
    background-color: #4a4a4a; /* Dark grey */
    color: #ffffff; /* White text */
    font-size: 11px;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:hover, .btn:hover {
    background-color: #3a3a3a; /* Slightly darker grey */
}

/* Style tags with dark grey background, white text, and 11px font size */
.tag, .badge {
    background-color: #4a4a4a; /* Dark grey */
    color: #ffffff; /* White text */
    font-size: 11px;
    padding: 3px 7px;
    border-radius: 3px;
    display: inline-block;
    text-transform: capitalize; /* Optional: Makes the text easier to read */
}

.tag:hover, .badge:hover {
    background-color: #3a3a3a; /* Slightly darker grey */
    cursor: pointer;
}

/* Apply fade-in effect for all elements on scroll */
.hidden {
    opacity: 0;
    transform: translateY(20px); /* Slightly move elements down */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Make the main menu horizontal */
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list {
    display: flex; /* Use flexbox for horizontal layout */
    flex-direction: row; /* Align items in a row */
    justify-content: center; /* Optional: Center the menu items */
    list-style: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

/* Style individual menu items */
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li {
    display: inline-block; /* Ensure items are inline */
    margin: 0 15px; /* Add spacing between items */
}

/* Style the links inside menu items */
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a {
    text-decoration: none; /* Remove underline */
    color: #4a4a4a; /* Set link color */
    padding: 5px 10px; /* Add padding around links */
    display: inline-block; /* Ensure clickable area is consistent */
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Add hover animation */
}

/* Hover effect for menu links */
.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list > li > a:hover {
    color: #ffffff; /* Change text color on hover */
    background-color: #4a4a4a; /* Dark gray background on hover */
    border-radius: 5px; /* Optional: Add rounded corners */
}
.metismenu.mod-menu .mm-toggler:after {
  border-top: 0;
    border-left: 0;
    border-right: 0;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.5s, transform 1.5s;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}