/* Custom styles */
html {
    scroll-behavior: smooth;
}

.bg-primary-dark {
    background-color: #0077B3;
}

.bg-secondary-dark {
    background-color: #73AB33;
}

.hover\:bg-primary-dark:hover {
    background-color: #0077B3;
}

.hover\:bg-secondary-dark:hover {
    background-color: #73AB33;
}

/* Hero canvas styles */
#hero-canvas {
    opacity: 0.4;
    pointer-events: none;
}

/* Fixed hero section height */
#home {
    height: auto; /* Allow home section to fit all content including nav */
}

/* Navigation styles within home */
#home nav {
    width: 100%;
    position: relative;
    z-index: 20; /* Higher z-index than hero content */
}

/* Hero content section */
#home .py-20 {
    height: 300px; /* Fixed height for hero content area */
    display: flex;
    align-items: center;
}

/* Make container fill the full height */
#home .container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* Hero content elements */
#hero-text, #hero-entwicklung, #hero-beratung, #hero-service, #hero-retrofitting, #hero-schulung, #hero-fertigung {
    height: 100%;
    width: 100%;
    opacity: 0;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}

/* Active hero content */
.hero-active {
    opacity: 1 !important;
    display: flex !important;
    position: relative !important;
}

/* Hero page transitions */
.hero-page {
    width: 100%;
    position: relative;
    transition: opacity 0.3s ease;
    height: 100%;
    display: flex;
    align-items: center;
}

/* 
Hero section tech pattern and other decorative elements are commented out
for now while we implement the new transition functionality
*/

/* View elements */
#startseite-view, #entwicklung-view,#software-view {
    width: 100%;
    opacity: 0;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease;
}