/* styles.css */

:root {
    --deep-teal: #004d4d;
    --lime-mist: #c3f73a;
    --mist-gray: #e5e5e5;
}

body, html {
    height: 100%;
}

/* ── Navbar ──────────────────────────────── */
.custom-navbar {
    background-color: var(--deep-teal);
}

.custom-navbar .navbar-brand {
    color: var(--lime-mist);
    font-weight: bold;
}

.custom-navbar .navbar-brand:hover {
    color: white;
}

.custom-navbar .nav-link {
    color: var(--lime-mist);
    font-weight: bold;
    font-size: 1.1rem;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link.active {
    color: white;
}

/* ── Hero (home page) ────────────────────── */
.hero-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-1920x800-exp2.webp');
    min-height: 420px;
    height: 55vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 90%;
}

header {
    position: relative;
}

/* ── Page banner (inner pages) ───────────── */
.page-banner {
    background-color: var(--deep-teal);
    color: white;
    text-align: center;
    padding: calc(65px + 2.5rem) 2rem 2rem;
}

/* ── Main ────────────────────────────────── */
main {
    padding-bottom: 2rem;
}

/* ── CTA section ─────────────────────────── */
.cta-section {
    background-color: var(--deep-teal);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}

.cta-section .btn,
.cta-btn {
    background-color: var(--lime-mist);
    color: var(--deep-teal);
    font-weight: bold;
    border: none;
}

.cta-section .btn:hover,
.cta-btn:hover {
    background-color: white;
    color: var(--deep-teal);
}

/* ── Footer ──────────────────────────────── */
.custom-footer {
    background-color: var(--deep-teal);
    color: var(--lime-mist);
}

.footer-link {
    color: var(--lime-mist);
    text-decoration: none;
}

.footer-link:hover {
    color: white;
}

/* ── Contact form ────────────────────────── */
.custom-form {
    background-color: var(--mist-gray);
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.btn-custom {
    background-color: var(--deep-teal);
    color: var(--lime-mist);
    border: none;
}

.btn-custom:hover {
    background-color: var(--lime-mist);
    color: var(--deep-teal);
}