/*** Re-branding ***/
:root {
    --btn-border-radius: 0px;
    --primary-color: #3d77ae;
    --primary-color-hover: #035fc1;

    --secondary-color: #041086;
}

/*** Components for this project ***/
header img {
    max-height:140px;
}

#mobilenav {
    background-color: #dedede;
}

.quote-pic {
    border-right:none;
    margin-bottom:30px;
}

.quote {
    background-image: url(/plugins/templates/aielectrics/images/quote-open.png);
    background-position: 20px 4px;
    background-repeat: no-repeat;
}

/* .quote p:first-child { */
.quote p {
    padding-left:80px;
}

.banner {
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 400px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .banner h1 {
        color: #fff;
        font-size: 3rem;
    }

    .banner h2 {
        color: #fff;
    }

#banner_header {
    background-image: url(/plugins/templates/aielectrics/images/header.jpg);
}

section h2 {
    color: var(--secondary-color);
}

section.section-pale-blue {
    background-color: rgba(61, 121, 176,0.3);
}

footer {
    background-color:#3d77ae;
    color: #fff;
}

    footer a {
        color:#fff;
    }

/*** Bootstrap breakpoints ***/

    /* XS breakpoint */
    @media (max-width: 575.98px) {
        header img {
            max-height:120px;
        }
    }

    /* S breakpoint */
    @media (min-width: 576px) and (max-width: 767.98px) {
        header img {
            max-height:120px;
        }
    }

    /* M breakpoint */
    @media (min-width: 768px) and (max-width: 991.98px) {
        .bg-md-transparent {
            background-color: transparent !important;
        }

        .quote-pic {
            /* border-right:4px solid var(--primary-color); */
            margin-bottom:0;
        }
    }

    /* L breakpoint */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .bg-md-transparent {
            background-color: transparent !important;
        }

        section .float-lg-end {
            margin-bottom: 0 !important;
            padding-left:12px;
        }

        section .float-lg-start {
            margin-bottom: 0 !important;
            padding-right:12px;
        }

        .quote-pic {
            /* border-right:4px solid var(--primary-color); */
            margin-bottom:0;
        }
    }

    /* XL breakpoint */
    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .bg-md-transparent {
            background-color: transparent !important;
        }

        section .float-lg-end {
            margin-bottom: 0 !important;
            padding-left:12px;
        }

        section .float-lg-start {
            margin-bottom: 0 !important;
            padding-right:12px;
        }

        .quote-pic {
            /* border-right:4px solid var(--primary-color); */
            margin-bottom:0;
        }
    }

    /* Extra extra large devices (larger desktops, 1400px and up) */
    @media (min-width: 1400px) {
        .bg-md-transparent {
            background-color: transparent !important;
        }

        section .float-lg-end {
            margin-bottom: 0 !important;
            padding-left:12px;
        }

        section .float-lg-start {
            margin-bottom: 0 !important;
            padding-right:12px;
        }

        .quote-pic {
            /* border-right:4px solid var(--primary-color); */
            margin-bottom:0;
        }
    }

/*** Components that need the re-brand ***/
a {
    color: var(--primary-color);
}

.btn {
    border-radius: var(--btn-border-radius);
}
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:hover,
    .btn-primary:active  {
        background-color: var(--primary-color-hover) !important;
        border-color: var(--primary-color-hover) !important;
    }

.text-secondary {
    color: var(--primary-color-hover) !important;
}



/*** Bootstrap fixes ***/
img {
    max-width: 100%;
}

section .float-lg-start,
section .float-lg-end {
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 30px;
    max-height: 400px;
}

.partner-logos img {
    max-height: 200px;
    max-width: 200px;
}



.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.whatsapp-float .hover-only {
    display:none;
}

.whatsapp-float:hover .hover-only {
    display:inline;
    font-size: 22px;
    padding-left: 13px;
}

.whatsapp-float:hover {
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
}