/* custom-enhancements.css */

/* 1. Adjust Header Width Properly */
.elementor-location-header > .e-con, 
.elementor-location-header .e-con-boxed, 
.elementor-location-header .e-con-inner {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

/* 2. Responsive Fixes */
html, body {
    overflow-x: hidden;
}

img {
    max-width: 100% !important;
    height: auto !important;
}

/* Ensure containers don't overflow on mobile */
@media (max-width: 768px) {
    .e-con-inner, .elementor-container, .elementor-widget-container {
        max-width: 100vw !important;
        overflow-x: hidden;
    }
    
    .elementor-location-header .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* 3. Custom Animations */
/* Initially hide elements that will be animated */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class added via JS when element enters viewport */
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header hover animations */
.elementor-nav-menu a {
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.elementor-nav-menu a:hover {
    color: #17b1b1 !important;
    transform: translateY(-2px);
}