/* Global Styles */
body {
    font-family: sans-serif;
    color: #111;
}

/* Full-page fixed background image for all pages */
.hero-bg {
    background-image: url('/SiteImages/FrontPage1600_800.jpg');
    background-size: cover;        /* Ensures image always covers background */
    background-position: center;   /* Centers the image */
    background-repeat: no-repeat;  /* Prevents tiling */
    position: fixed;               /* Keeps background in place during scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;                   /* Covers full page height */
    z-index: -1;                    /* Behind all content */
}

/* Optional dark overlay over the background for text readability */
.hero-bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);   /* Adjust 0.4 for darker/lighter overlay */
}

/* Hero section content container */
.hero-content {
    min-height: 100vh;              /* Fill viewport */
    position: relative;
    z-index: 1;                     /* Above background */
}

/* Semi-transparent overlay for sections */
.section-overlay {
    background: rgba(255, 255, 255, 0.35); /* Adjust 0.35 for more/less transparency */
}

/* Box styling inside sections */
.box-style {
    background-color: rgba(255, 255, 255, 0.45); /* Adjust 0.45 for more/less transparency */
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Slideshow styles */
.slideshow-container {
    position: relative;
    max-width: 85%;
    margin: auto;
    overflow: hidden;
}
.slide {
    display: none;
    width: 100%;
    height: 100%;
}

.fade {
    animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
    from {
        opacity: 0.4;
    }

    to {
        opacity: 1;
    }
}
/*.slide {
    display: none;
    width: 100%;
}

.fade {
    animation: fadeEffect 1.5s;
}

@keyframes fadeEffect {
    from { opacity: .4 }
    to { opacity: 1 }
}*/

/* Responsive text adjustments */
@media (max-width: 640px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    .hero-btn { font-size: 1rem; padding: 0.5rem 1rem; }
}

/* Slideshow caption styling */
.slideshow-caption {
    text-align: center;
    margin-top: 0.5rem;
    font-weight: 600;
}