/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

:root {
    /* TEAL */
    --teal: #0b6f7a;
    --tealLight: #3a98a3;
    --tealDark: #064a52;
    /* PINK */
    --pink: #ac0f69;
    /* GREEN */
    --greenDark: #1a241e;
    --greenMuted: #4f5f55;
    /* NEUTRALS */
    --bg: #f7f9f8;
    --panel: #ffffff;
    /* WAVES (brand-tuned) */
    --wave-back: rgba(58, 152, 163, 0.22);
    --wave-front: rgba(11, 111, 122, 0.42);
}

body {
    background: linear-gradient(135deg, rgba(11, 111, 122, 0.12) 0%, rgba(58, 152, 163, 0.08) 35%, rgba(247, 249, 248, 1) 65%, rgba(172, 15, 105, 0.06) 100%);
    color: var(--greenDark);
}

.text-muted-custom {
    color: var(--greenMuted);
}

/* BUTTON SYSTEM (fixed & consistent) */
.btn-brand {
    background: linear-gradient(135deg, var(--teal), var(--tealDark));
    color: #fff;
    border: none;
}

    .btn-brand:hover {
        background: linear-gradient(135deg, var(--tealDark), var(--teal));
        color: #fff;
    }

.btn-outline-brand {
    border: 2px solid var(--pink);
    color: var(--pink);
    background: transparent;
}

    .btn-outline-brand:hover {
        background: var(--pink);
        color: #fff;
    }

.section {
    padding: 6rem 0;
    position: relative;
}

.section-hero {
    height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(11, 111, 122, 0.16) 0%, rgba(247, 249, 248, 1) 85%);
    overflow: hidden;
    position: relative;
}

.hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

#waveCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-content {
    position: relative;
    z-index: 5;
}

.hero-inner {
    max-width: 960px;
    transform: translateY(-8vh);
}

.card {
    border-radius: 20px;
    border: 1px solid rgba(26, 36, 30, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        border-color: rgba(11, 111, 122, 0.35);
    }

.card-highlight {
    border: 2px solid var(--tealLight);
    background: linear-gradient(180deg, rgba(11, 111, 122, 0.06) 0%, #ffffff 100%);
    box-shadow: 0 24px 48px rgba(11, 111, 122, 0.18);
}