a {
  position: relative;
  color: #00b3b3;
  text-decoration: none;
}
a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #00e6e6;
  left: 0;
  bottom: -5px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
a:hover::after {
  transform: scaleX(1);
}

button:hover, .button:hover {
  background-color: #5a9e64;  /* Change to a color that fits your theme */
  color: white;
  transition: all 0.3s ease;
  transform: translateY(-3px);
}

* Container for images with blending effect */
.image-blend-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Image Styling */
.image-blend-container img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover; /* Ensure images cover the container area */
    filter: brightness(0.8) sepia(0.5) contrast(1.2); /* Add a slight filter for blending */
}

/* Overlay to match the background color */
.image-blend-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(253, 242, 233, 0.7); /* Match the website background color */
    border-radius: 10px; /* Optional: rounded corners for a smoother look */
    transition: background-color 0.3s ease; /* Smooth transition effect */
}

/* Hover Effect - make the overlay darker when hovering */
.image-blend-container:hover::before {
    background-color: rgba(253, 242, 233, 0.9); /* Darker on hover */
}






image-container {
  position: relative;
  overflow: hidden;
  border-radius: 15px; /* Optional: Adjust as needed */
  background-color: #E6E6FA; /* Replace with your chosen color */
}

.image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.05); /* Slight zoom on hover */
  opacity: 0.9; /* Slight transparency on hover */
}

/* Full header background */
.ast-site-header {
    background-color: #f4f4f9; /* Soft off-white background */
}

/* Menu background */
.main-header-menu {
    background-color: #b8d8b8; /* Soft Sage Green */
    padding: 10px 0; /* Add some padding for a balanced look */
    border-radius: 10px; /* Rounded corners for a modern feel */
}

/* Main menu links styling */
.main-header-menu a {
    color: #333333; /* Dark grey color for text */
    font-size: 18px; /* Slightly larger font for readability */
    font-weight: 500; /* Semi-bold for emphasis */
    letter-spacing: 1px; /* Spacing between letters */
    text-transform: uppercase; /* Uppercase for sophistication */
    padding: 12px 20px; /* Adjust padding for a balanced look */
    transition: color 0.3s, background-color 0.3s ease-in-out; /* Smooth transitions */
}

/* Menu link hover color */
.main-header-menu a:hover,
.main-header-menu .current-menu-item a {
    color: #ffffff; /* White text on hover */
    background-color: #6a8d73; /* Darker green background on hover */
    border-radius: 5px; /* Rounded corners on hover */
}

/* Submenu (dropdown) styling */
.main-header-menu .menu-item-has-children > a::after {
    content: " ▼"; /* Add an arrow to indicate dropdown */
    font-size: 14px;
}

/* Submenu links styling */
.main-header-menu .sub-menu a {
    color: #333333; /* Dark grey text for submenu items */
    padding: 10px 20px; /* Padding for submenu items */
    background-color: #ffffff; /* White background for submenu */
    border-radius: 5px; /* Rounded corners for submenu items */
}

/* Submenu hover effect */
.main-header-menu .sub-menu a:hover {
    background-color: #f0f1f3; /* Light hover effect for submenu */
    color: #333333; /* Dark text on hover */
}

/* Adjust the spacing for a neat appearance */
.main-header-menu li {
    margin: 0 10px; /* Space out the menu items */
}

/* Active menu item styling */
.main-header-menu .current-menu-item > a {
    color: #6a8d73; /* Light green for active menu item */
    font-weight: bold; /* Bold active menu item */
}

/* Mobile menu: Adjust font size and padding for smaller screens */
@media (max-width: 768px) {
    .main-header-menu a {
        font-size: 16px; /* Smaller font on mobile */
        padding: 10px 15px; /* Less padding on mobile */
    }
}











/* Floating Feedback Section on the Right Side */
#feedback-section {
    position:relative;
    right: 20px;
    bottom: 20px;
    width: 300px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    transition: all 0.3s ease;
}

/* Feedback Form Heading */
#feedback-section h2 {
    font-size: 20px;
    color: #333333;
    margin-bottom: 15px;
}

/* Feedback Form Inputs and Textarea */
#feedback-section input[type="text"],
#feedback-section input[type="email"],
#feedback-section textarea {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* Submit Button Styling */
#feedback-section button[type="submit"] {
    background-color: #5cb85c;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Button Hover Effect */
#feedback-section button[type="submit"]:hover {
    background-color: #4cae4c;
}

/* Success Message Styling */
#feedback-section .feedback-thanks {
    font-size: 16px;
    color: #28a745;
    display: none; /* Hidden by default, show after form submission */
}

/* Optional: Close button to hide the feedback form */
#feedback-section .close-feedback {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #333;
    background: none;
    border: none;
}


/* Hide sticky bar on desktop and show on mobile */
@media (max-width: 768px) {
    .your-sticky-bar-class {
        display: block !important;  /* Show sticky bar */
    }
}

/* Hide sticky bar on devices larger than 768px */
@media (min-width: 769px) {
    .your-sticky-bar-class {
        display: none !important;  /* Hide sticky bar */
    }
}