:root {
    --color-primary: #0B4F6C;        /* Main accent color (Deep Navy) */
    --color-primary-dark: #073549;      /* Darker shade for hover states */
    --color-secondary: #1DB9C3;        /* Secondary accent (Soft Teal) */
    --color-secondary-dark: #1598A1;   /* Darker secondary for hover states */
    --color-bg-page: linear-gradient(90deg, var(--color-primary) 70%, var(--color-secondary) 100%);          /* Page background (Off-White) */
    --color-text-main: #333333;        /* Main text color (Dark Gray) */
    --color-text-light: #FFFFFF;       /* Light text for headers, hero, footer */
    --color-shadow-card: rgba(11, 79, 108, 0.12); /* Card shadow color */
}
body {
    background: var(--color-bg-page);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

header, footer {
    background: linear-gradient(90deg, var(--color-primary) 70%, var(--color-secondary) 100%);
    color: var(--color-text-light);
}
header nav a {
    color: var(--color-text-light);
}
header nav a:hover {
    color: #ffe082;
}
.section-title {
    color: var(--color-primary);
}
.section-title::after {
    background: linear-gradient(90deg, var(--color-primary) 60%, var(--color-secondary) 100%);
}
.section-box {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 2px 16px var(--color-shadow-card);
    border-left: 6px solid var(--color-primary);
    padding: 3rem 2rem;
    margin-bottom: 0;
}
.card-title {
    color: var(--color-primary);
}
.card-text {
    color: var(--color-text-main);
}
form .btn-primary {
    background: linear-gradient(90deg, var(--color-primary) 70%, var(--color-secondary) 100%);
    border: none;
    color: var(--color-text-light);
}
form .btn-primary:hover {
    background: linear-gradient(90deg, var(--color-primary-dark) 70%, var(--color-secondary-dark) 100%);
}
footer {
    background: linear-gradient(90deg, var(--color-primary) 70%, var(--color-secondary) 100%);
    color: var(--color-text-light);
}
#hero, .hero-section {
    position: relative;
    background: url('/images/heroshot.png') no-repeat center center;
    background-size: cover;
    color: var(--color-text-light);
    border-radius: 0 0 30px 30px;
    box-shadow: 0 4px 24px var(--color-shadow-card);
    margin-bottom: 2rem;
    overflow: hidden;
}
#hero::before, .hero-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(120deg, rgba(0, 123, 255, 0.65) 0%, rgba(255, 193, 7, 0.45) 100%);
    z-index: 1;
}
#hero .container, .hero-section .container {
    position: relative;
    z-index: 2;
}
.hero-title, .hero-section h2, .hero-section p, .hero-section a {
    color: var(--color-text-light);
}
.card-img-top {
    width: 100%;
    height: 220px;
    object-fit: cover;
    aspect-ratio: 16/9;
    display: block;
    border-radius: 0;
    background: #eee;
    transition: height 0.2s;
}
section {
    margin-bottom: 3.5rem;
}
section + section {
    margin-top: 3.5rem;
}
@media (max-width: 767px) {
    #hero::before, .hero-section::before {
        background: linear-gradient(120deg, rgba(0, 123, 255, 0.85) 0%, rgba(255, 193, 7, 0.65) 100%);
    }
    .section-box {
        border-left: none;
        border-top: 6px solid var(--color-primary);
    }
    .card-img-top {
        height: 140px;
        aspect-ratio: 16/9;
    }
    section {
        margin-bottom: 2rem;
    }
    section + section {
        margin-top: 2rem;
    }
}