/* ============================================================
   COLORADO POOL PROS
   SHARED SITE FOOTER

   /assets/css/site-footer.css
   ============================================================ */


/* ============================================================
   FOOTER
   ============================================================ */

.cpp-footer {

    padding:
        67px 0 29px;

    color:
        rgba(217,231,239,.72);

    background:
        #02172d;

}


/* ============================================================
   LOGO
   ============================================================ */

.footer-logo {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #fff;

    font-size:
        1.3125em;

    font-weight:
        700;

    line-height:
        1.1;

}


.footer-logo span {

    color:
        var(--cpp-cyan, #16c5df);

}


/* ============================================================
   COPY
   ============================================================ */

.footer-copy {

    max-width:
        390px;

    color:
        rgba(212,228,237,.68);

    font-size:
        1em;

    line-height:
        1.75;

}


/* ============================================================
   HEADINGS
   ============================================================ */

.footer-heading {

    margin-bottom:
        17px;

    color:
        #fff;

    font-size:
        1em;

    font-weight:
        700;

    letter-spacing:
        .7px;

    text-transform:
        uppercase;

}


/* ============================================================
   LINKS
   ============================================================ */

.footer-links {

    margin:
        0;

    padding:
        0;

    list-style:
        none;

}


.footer-links li {

    margin-bottom:
        9px;

}


.footer-links a {

    color:
        rgba(210,226,235,.66);

    font-size:
        1em;

    text-decoration:
        none;

    transition:
        color .2s ease;

}


.footer-links a:hover {

    color:
        var(--cpp-cyan, #16c5df);

}


/* ============================================================
   BOTTOM
   ============================================================ */

.footer-bottom {

    margin-top:
        47px;

    padding-top:
        23px;

    color:
        rgba(192,210,221,.48);

    border-top:
        1px solid rgba(255,255,255,.08);

    font-size:
        1em;

}


/* ============================================================
   FOOTER BUTTON
   ============================================================ */

/*
 * This makes the footer independent from pages
 * that may not already contain the homepage
 * .cpp-btn styles.
 */

.cpp-footer .cpp-btn {

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    padding:
        0 23px;

    border:
        1px solid transparent;

    border-radius:
        3px;

    font-size:
        1em;

    font-weight:
        700;

    letter-spacing:
        .8px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.cpp-footer .cpp-btn-primary {

    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            #0789c2,
            #16c5df
        );

    box-shadow:
        0 12px 30px
        rgba(4,169,211,.24);

}


.cpp-footer .cpp-btn-primary:hover {

    color:
        #fff;

    transform:
        translateY(-2px);

    box-shadow:
        0 18px 38px
        rgba(4,169,211,.31);

}


/* ============================================================
   MOBILE
   ============================================================ */

@media
(max-width: 767px) {

    .cpp-footer {

        padding:
            55px 0 26px;

    }


    .footer-bottom {

        margin-top:
            38px;

    }

}