/* ================================
   Color Palette
   ================================ */
   :root {
    /* Primary Colors */
    --color-primary: #ffffff; 
    --color-secondary: #007681;
    --color-accent: #007681;

    --color-primary-inverted: #111111; 
    --color-secondary-inverted: #ffffff;
    --color-accent-inverted: #ffffff;

    /* Neutral Colors */
    --color-white: #ffffff;
    --color-light-gray: #f4f4f4;
    --color-gray: #cccccc;
    --color-dark-gray: #333333;
    --color-black: #000000;

    /* Background Colors */
    --color-background: var(--color-light-gray);
    --color-background-alt: var(--color-white);

    /* Text Colors */
    --color-text: var(--color-dark-gray);
    --color-text-light: var(--color-gray);
    --color-text-inverted: var(--color-white);

    /* Border Colors */
    --color-border: var(--color-gray);
    --color-border-light: var(--color-light-gray);
    --color-border-dark: var(--color-dark-gray);

    /* Additional Colors */
    --color-muted: #95a5a6;
    --color-link: var(--color-primary);
    --color-link-hover: var(--color-primary-dark);

    /* Container Sizing */
    --container-max-width: 90vw;
    --height-units: 60px;
    --margin-units: 20px;
    --padding-units: 12px;
}

*{
    font-family: "Open Sans", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

        #section1{
            padding:25px;
            min-height: max(600px,80vh) !important;
        }

        @media (max-width: 576px) {
            #section1 {
                min-height: max(300px,40vh) !important;
            }
        }

        .section1-a{
            background-image: url("../common/img/abq-bg-1.jpg");
        }

        .section1-a:before,
        .section1-b:before,
        .section1-c:before{
            content: "Hot Tubs";
            position: relative;
            height:auto;
            width: 100%;
            background-color: var(--color-accent);
            padding: 10px;
            color: var(--color-accent-inverted);
            border-radius: 20px;
        }

        .section1-d:before,
        .section1-e:before{
            content: "Swim Spas";
            position: relative;
            height:auto;
            width: 100%;
            background-color: var(--color-accent);
            padding: 10px;
            color: var(--color-accent-inverted);
            border-radius: 20px;
        }

        .section1-b{
            background-image: url("../common/img/abq-bg-2.jpg");
        }

        .section1-c{
            background-image: url("../common/img/abq-bg-3.jpg");
        }

        .section1-d{
            background-image: url("../common/img/endless-confirm-rights.jpg");
        }

        .section1-e{
            background-image: url("../common/img/swim-spas-endless-confirm-rights.webp");
        }

        #section2{
            background-image: url("../common/img/install.jpg");
            background-blend-mode: overlay;
            background-color: var(--color-primary);
        }

        #section3{
            background-color: var(--color-grey);
            color: var(--color-black);
        }

        #section4{
            background-image: url("../common/img/section4.jpg");
            background-blend-mode: overlay;
            background-color: #ccc;
            color: var(--color-black);
        }

        #section5{
            background-image: url("../common/img/endless-confirm-rights-2.webp");
            background-blend-mode: overlay;
            background-color: var(--color-dark-gray);
            color: var(--color-white);
        }

        #contact{
            background-image: url("../common/img/contact.jpg");
            background-blend-mode: overlay;
            background-color: var(--color-grey);
            padding:50px;
            margin-top:100px;
            min-height: 500px;
        }

        #contact .section-inlay {
        	background-color: var(--color-primary);
        	margin: 0 auto;
        	max-width: min(90vw,1200px);
        	padding: 25px;
        }

        #intro {
            padding: 50px;
            box-shadow: 2px 1px 11px var(--color-accent);
            margin: 0px 0px 40px 0px;
        }