/* --- Global Variables (Color Palette & Functional) --- */
:root {
    --ocean-dark: #2F5C6A;          /* Deep, muted blue/teal */
    --ocean-mid: #5E8F9B;           /* Mid-tone blue-green */
    --ocean-light: #A0C5CC;         /* Light, faded blue-green */
    --ocean-foam: #E1E9EC;          /* Greenish grey / Off-white */
    --text-main: #1A3B45;           /* Very dark, subtle blue for primary text */
    --nav-accent: #224A53;          /* Slightly darker blue/teal for nav background */
    --coral-accent: #FFA07A;        /* Earthy, coral orangey, lighter accent color */
    --ocean-bright-light: #C0E8F0;  /* A brighter version of light ocean tones (for H2 and nav text) */
    --grey: #CCCCCC;                /* Light grey */
    --pale_grey :#EEEEEE;           /* Very pale grey */
    --white :#FFFFFF;               /* Pure white */
    --ocean-water: #83A59C;         /* Pale grayish green for visited links */

    /* Functional Colors */
    --bg-light-transparent: rgba(255, 255, 255, 0.9); /* Semi-opaque white for content boxes */
    --border-light: #DDD;
}

 
/* Custom styling for the sub-section navigation buttons */
.sub-section-nav .btn {
    color: var(--ocean-dark); /* Text color */
    border-color: var(--ocean-dark); /* Border color */
    background-color: transparent; /* Transparent background by default */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.sub-section-nav .btn:hover,
.sub-section-nav .btn.active {
    color: #fff; /* White text on hover/active */
    background-color: var(--ocean-dark); /* Solid background on hover/active */
    border-color: var(--ocean-dark); /* Border color matches background */
}