/* Custom CSS to add gradient background to header */
.navbar-main {
    background: linear-gradient(100deg, #0E1928 0%, #1A2331 55%, #2C2B2F 100%);
    min-height: 80px;
    position: relative;
    z-index: 10;
}

.navbar-main .container {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* Ensure text remains visible over the gradient background */
.navbar-main .logo,
.navbar-main .nav-link,
.navbar-main .btn {
    color: white;
}

/* Adjust for the mobile menu toggle */
.navbar-main .menu-toggle {
    color: white;
}

/* Apply gradient background to older navbar style as well */
.sg-navbar {
    background: linear-gradient(100deg, #0E1928 0%, #1A2331 55%, #2C2B2F 100%) !important;
    position: relative;
    z-index: 10;
}

/* Ensure text remains visible on older navbar */
.sg-navbar .sg-brand,
.sg-navbar .sg-links a,
.sg-navbar .sg-search input,
.sg-navbar .sg-menu-btn {
    color: white !important;
}

.sg-navbar .sg-brand-text {
    color: white !important;
}

/* Banner section below header */
.banner-section {
    width: 100%;
    height: 200px;
    background: url('../assets/imagenes/banner/banner_header.png') repeat-x center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content {
    text-align: center;
    color: white;
    padding: 20px;
}

.banner-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

.banner-content p {
    font-size: 1.2rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}