/* Explain: App-specific layout and structural CSS utilities. */
.ks-shell {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

@media (min-width: 768px) {
    .ks-shell {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.ks-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (min-width: 768px) {
    .ks-section {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
}

.bg-brand-gradient {
    background-image: linear-gradient(135deg, #00344f 0%, #004E78 45%, #0C81B0 100%);
}

.hero-overlay {
    background-image: linear-gradient(90deg, rgba(0, 26, 42, .78) 0%, rgba(0, 52, 80, .62) 48%, rgba(0, 52, 80, .26) 100%);
}

.section-band-dark {
    background-color: var(--primary-color);
    color: #ffffff;
}

.ks-header {
    transition: box-shadow .3s ease;
}

.ks-header.is-scrolled {
    box-shadow: 0 10px 30px rgba(0, 40, 60, .10);
}