/*
 * =========================================================
 * are.al - Procedural Fluid Background
 * =========================================================
 *
 * This file contains ONLY the custom CSS for the WebGL
 * background and the small overrides needed to place it
 * behind the existing Mobirise content.
 * =========================================================
 */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #000;
}

/*
 * The WebGL canvas covers the complete viewport and sits
 * behind the existing page.
 */
#backgroundCanvas {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    display: block;

    z-index: 0;

    pointer-events: none;
}

/*
 * The existing hero section must be transparent so the
 * procedural background can be seen.
 */
#hero-17-ue3n69jQHG {
    position: relative;
    z-index: 1;

    background-color: transparent !important;
    background-image: none !important;
}

/*
 * Keep the existing content above the canvas.
 */
#hero-17-ue3n69jQHG .container-fluid,
#hero-17-ue3n69jQHG .container,
#hero-17-ue3n69jQHG .row,
#hero-17-ue3n69jQHG .content-wrap {
    position: relative;
    z-index: 2;
}

/*
 * The original page used orange typography. Keep the
 * hierarchy but make the text readable over green.
 */
#hero-17-ue3n69jQHG .mbr-section-title,
#hero-17-ue3n69jQHG .mbr-text {
    color: #ffffff !important;
}

/*
 * Keep the buttons above the canvas.
 */
#hero-17-ue3n69jQHG .mbr-section-btn {
    position: relative;
    z-index: 3;
}

/* =========================================================
 * are.al — DARK FOREST GREEN THEME
 * ========================================================= */

html,
body {
    background: #000703 !important;
}

/* Canvas itself is almost black with only a hint of green. */
#backgroundCanvas {
    background: #000a04 !important;
}

/* Make the Mobirise hero transparent. */
#hero-17-ue3n69jQHG {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    background-image: none !important;
}

/* Keep all content above the WebGL canvas. */
#hero-17-ue3n69jQHG .container-fluid,
#hero-17-ue3n69jQHG .container,
#hero-17-ue3n69jQHG .row,
#hero-17-ue3n69jQHG .content-wrap,
#hero-17-ue3n69jQHG .mbr-section-btn {
    position: relative;
    z-index: 2;
}

/* ---------------------------------------------------------
 * Typography
 * --------------------------------------------------------- */

#hero-17-ue3n69jQHG .mbr-section-title {
    color: #4f765b !important;
}

#hero-17-ue3n69jQHG .mbr-text {
    color: #365943 !important;
}

#hero-17-ue3n69jQHG a {
    color: #8fb89d !important;
}

/* ---------------------------------------------------------
 * Buttons
 * --------------------------------------------------------- */

/* Override Mobirise .btn-success, which was responsible for
 * the very bright turquoise/green buttons in the screenshot. */
#hero-17-ue3n69jQHG .btn.btn-success {
    background: #123a27 !important;
    border-color: #1b5338 !important;
    color: #a4c9b1 !important;
    box-shadow: none !important;
}

#hero-17-ue3n69jQHG .btn.btn-success:hover,
#hero-17-ue3n69jQHG .btn.btn-success:focus {
    background: #194d34 !important;
    border-color: #286b49 !important;
    color: #c0ddc9 !important;
}

/* Icons inherit the button text color. */
#hero-17-ue3n69jQHG .btn.btn-success .mbr-iconfont {
    color: inherit !important;
}

/* Links outside the buttons. */
#hero-17-ue3n69jQHG a:not(.btn) {
    color: #6f9d7d !important;
}

#hero-17-ue3n69jQHG a:not(.btn):hover {
    color: #91bd9e !important;
}

/* =========================================================
 * are.al — ORANGE TYPOGRAPHY / FOREST GREEN BACKGROUND
 * ========================================================= */

/* Main heading: restore the warm orange from the original page. */
#hero-17-ue3n69jQHG .mbr-section-title,
#hero-17-ue3n69jQHG h1,
#hero-17-ue3n69jQHG h2 {
    color: #f5a000 !important;
}

/* Intro text: orange, slightly darker than the heading. */
#hero-17-ue3n69jQHG .mbr-text,
#hero-17-ue3n69jQHG p {
    color: #d98200 !important;
}

/* Any normal links outside the green buttons remain orange. */
#hero-17-ue3n69jQHG a:not(.btn) {
    color: #d98200 !important;
}

#hero-17-ue3n69jQHG a:not(.btn):hover {
    color: #f5a000 !important;
}

/* Buttons deliberately remain dark forest green. */
#hero-17-ue3n69jQHG .btn.btn-success {
    background: #123a27 !important;
    border-color: #1b5338 !important;
    color: #a4c9b1 !important;
}