:root {

    --CaseydarkBlue: #004391;
    --CaseyGrayBlue: #003745;
    --CaseylightBlue: #00ade9;
    --Caseygray: #f6f6f6;
    --CaseyRed: #e51b24;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #fff;
}

/*-----------Utilities--------------------*/

#trigger {
    left: 0;
    top: 27vh;
}

.text-light-blue {
    color: var(--CaseylightBlue) !important;
}

.text-dark-blue {
    color: var(--CaseydarkBlue) !important;
}

.text-small {
    font-size: .875rem;
}

.light-blue {
    background-color: var(--CaseylightBlue);
}

.dark-blue {
    background-color: var(--CaseydarkBlue);
}

.gray-blue {
    background-color: var(--CaseyGrayBlue);
}

.red {
    background-color: var(--CaseyRed);
}

.gray {
    background-color: var(--Caseygray);
}

.border-blue {
    border-color: var(--CaseylightBlue) !important;
}

.border-dark-blue {
    border-color: var(--CaseydarkBlue) !important;
}

.serif {
    font-family: 'Exo 2', sans-serif;
}

.max {
    max-width: max-content;
}

.opacity-90 {
    opacity: .9;
}

.opacity-80 {
    opacity: .8;
}

.opacity-70 {
    opacity: .7;
}

.headline-border {
    opacity: .5;
}

.special {
    position: relative;
    display: flex;
}

.special::after {
    content: '';
    display: flex;
    align-self: center;
    flex: 1 1 auto;
    margin-left: .75rem;
    border-top: 1px solid rgb(255, 255, 255, .5);
}

/*---------Animations/Transitions-------------*/


.appear {
    transition: opacity .75s ease-in-out .35s;
    opacity: 0;
}

.appear.in {
    opacity: 1;
}

.move .serve-container {
    transform: translateX(120%);
    opacity: 0;
    transition: all .75s ease-in-out .5s;
}

.move.in .serve-container {
    transform: translateX(0);
    opacity: 1;
}

[data-target-link="index"] #bottom-banner .appear {
    transition: opacity .75s ease-in-out 1.25s, background-color .35s ease-in-out 0s;
}

/*---------Header/Nav-------------*/

header.border-top {
    border-color: var(--CaseydarkBlue) !important;
}

#top-bar p {
    font-size: .85rem;
}

#social-top p {
    font-size: 1.125rem;
}

.navbar-brand img {
    max-width: 75% !important;
    transition: max-width .5s ease;
    transform-origin: center left;
}

.navbar-brand img.small {
    max-width: 70% !important;
}

nav.navbar {
    background-color: #fff;
    border-bottom: 2px solid var(--HockmanBlue) !important;
    transition: padding .5s ease;
}

/*overlay menu stuff*/

nav {
    /*box-shadow: 4px 4px 4px -4px rgb(0, 0, 0, .125);*/
    padding: .75rem 0;
}

.navbar {
    transition: background-color .75s ease;
}

nav ul {
    display: flex;
    position: fixed;
    pointer-events: none;
    min-height: 100vh;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    z-index: 10;
    background-color: var(--CaseylightBlue);
    flex-direction: column;
    list-style: none;
    align-items: center;
    flex: 1 1 auto;
    justify-content: start;
    padding: 0;
    padding-top: 2rem;
    margin: 0;
    opacity: 0;
    transform: translateY(0%);
    transition: all .5s ease;
}

nav ul.in {
    pointer-events: all;
    transform: translateY(0);
    opacity: 1;
}

nav ul li {
    margin: 1rem 2rem;
}

nav ul li a.nav-link {
    position: relative;
    padding: .5rem !important;
    display: block;
    font-size: 1.5rem;
    opacity: .7;
    color: #fff !important;
    font-family: 'Exo 2', sans-serif;
}

nav ul li a.nav-link.active,
nav ul li a.nav-link:hover,
nav ul li a.nav-link:focus{
    opacity: 1;
}

nav ul li a::before {
    content: "";
    position: absolute;
    top: -0.25rem;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.1375rem;
    background-color: #fff;
    transform: scale(0);
    transition: transform .25s ease-in-out;
    transform-origin: center;
    display: block;
}

nav ul li a:hover::before,
nav ul li a.active::before {
    transform: scale(1.0);
}

nav button {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 2.5rem;
    border: 0;
    margin-left: auto;
    /*background: #fff url(../images/three-dots.svg);*/
    /*background-size: 95%;*/
    /*background-position: center;*/
}

nav button:hover {
    cursor: pointer;
}

/*---------Homepage Banner-------------*/

.banner {
    background-size: cover !important;
    background-position: center !important;
    background-attachment: scroll !important;
    --bs-aspect-ratio: 56.25%;
}

.home-banner {
    background: linear-gradient(180deg, rgba(229, 27, 36, 0.64) 0%, rgba(0, 174, 219, 0.59) 100%), url(../images/home-page-banner.jpg);
}

.about-banner {
    background: linear-gradient(180deg, rgba(229, 27, 36, 0.64) 0%, rgba(0, 174, 219, 0.59) 100%), url(../images/about-us-banner-top.jpg);
}

.plumbing-banner {
    background: linear-gradient(180deg, rgba(229, 27, 36, 0.64) 0%, rgba(0, 174, 219, 0.59) 100%), url(../images/plumbing-banner.jpg);
}

.heating-banner {
    background: linear-gradient(180deg, rgba(229, 27, 36, 0.64) 0%, rgba(0, 174, 219, 0.59) 100%), url(../images/heating-banner.jpg);
}

.gas-fitting-banner {
    background: linear-gradient(180deg, rgba(229, 27, 36, 0.64) 0%, rgba(0, 174, 219, 0.59) 100%), url(../images/gas-fitting-banner.jpg);
}

.banner-text hr.divider {
    background-color: var(--CaseylightBlue);
    width: 3.75rem;
    height: .25rem;
}

.banner-text p {
    font-size: 1.2rem;
}

.banner-text h1,
.banner-text h2,
.banner-text p {
    text-shadow: 2px 1px 3px rgb(0 0 0 / 75%);
}

.banner-text h1,
.banner h2,
.banner-text p,
.banner-text hr,
.banner-text a.btn {
    transition: all .25s linear .35s;
    transform: translateY(-4rem);
    opacity: 0;
}

.banner-text h1.in,
.banner-text h2.in,
.banner-text a.btn.in {
    transform: translateY(0);
    opacity: 1;
}

.banner-text p.in,
.banner-text hr.in {
    transform: translateY(0);
    opacity: .9;
}

/*---------Breadcrumb Menu-------------*/



/*---------Home Page-------------*/

#bottom-banner {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.67) 0%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .67) 100%), url(../images/home-page-banner-bottom.jpg);
    background-size: cover;
    background-position: center;
}

.rounded-circle:not(form .rounded-circle) {
    border: 3px solid var(--CaseydarkBlue);
    padding: .25rem;
}

.double {
    display: flex;
}

.double::before,
.double::after {
    content: '';
    display: flex;
    flex: 1 1 auto;
    border-top: 1px solid var(--bs-gray-dark);
    align-self: center;
    opacity: .35;
    max-width: 5.5rem;
}

.double::before {
    margin-right: .625rem;
    margin-left: auto;
}

.double::after {
    margin-left: .625rem;
    margin-right: auto;
}

.rounded-pill{
    transition: background-color .35s ease-in-out;
    border-color: #f3f3f3 !important;
     font-size: .80rem;
}

.rounded-pill:hover{
    background-color: var(--CaseyRed) !important;
}

#bottom-banner {
    --bs-aspect-ratio: 100%;
}

#bottom-banner a.btn {
    font-size: .85rem;
}

#widgets p,
#widgets ul {
    opacity: .75;
}

.bar {
    opacity: 0;
    transform: translateX(105%);
    transition: all .5s ease;
    pointer-events: none;
    right: 0 !important;
    bottom: 1rem;
    z-index: 100;
}

.bar.in {
    opacity: .85;
    transform: translateX(0);
    pointer-events: all;
}

.bar-icon {
    width: 3rem;
    height: 3rem;
}

.bar-icon{
    transition: background-color .5s ease-in-out;
}

.bar-icon:hover{
    background-color: var(--CaseyRed);
}

.tile .appear{
    transform: scale(0);
    transition: all .75s;
}

.tile .appear.in{
    transform: scale(1.0);
}

#galleryCarouselModal {
    background: rgb(0 173 233 / .65);
}

#galleryCarouselModal .modal-header button {

    background-image: url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="%23fff"%3e%3cpath d="M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z"/%3e%3c/svg%3e');
}

#testimonialCarousel .carousel-indicators {
    bottom: -2rem;
}

.zoom-holder img{
    transform: scale(1.0);
    opacity: 1;
    transition: all 1s ease-in-out;
}

.zoom-holder:hover img{
    transform: scale(1.1);
    opacity: .9;
    cursor: pointer;
}

ul.service{
    list-style-type: none;
    padding: 0;
}

ul.plumbing li{
    margin-bottom: .375rem;
}

ul.plumbing li::before{
    font-family: 'bootstrap-icons';
    content: '\F30B';
    margin-right: .5rem;
    color: var(--CaseylightBlue);
}

ul.heating li::before{
    font-family: 'bootstrap-icons';
    content: '\F7F6';
    margin-right: .5rem;
    color: var(--CaseyRed);
}

ul.gas li{
    display: flex;
}

ul.gas li::before{
    display: flex;
    content: '';
    width: 1rem;
    height: 1rem;
    background-image: url(../images/pipe.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    align-self: center;
    margin-right: .5rem;
}


/*---------Footer-------------*/



/*------------Contact Form Stuff------------*/

.mt-6 {
    display: none;
}

label {
    display: none;
}

.contact-icon{
    height: 1.875rem;
    width: 1.875rem;
}

.contact-link,
.contact-link span{
    transition: all .5s ease-in-out;
}

.contact-link:hover{
    color: var(--CaseyRed) !important;
}

.contact-link:hover span{
    background-color: var(--CaseyRed) !important;
}

/*-------------------Media Queries--------------------*/

/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .container:not(#offerModal .container) {
        width: 90%;
    }

    .serve-container {
        width: 90%;
        margin: 0 auto;
    }

    footer p {
        font-size: .75rem;
    }

    .container.full {
        width: 100% !important;
    }

}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .banner {
        --bs-aspect-ratio: 42.85%;
    }

    #bottom-banner {
        --bs-aspect-ratio: 50%;
    }

    nav ul li a.nav-link{
        font-size: 2rem;
    }

    nav ul li{
        margin: 2rem 0;
    }

    #trigger {
        top: 80vh;
    }

    ul.service{
        width: 84%;
        columns: 2;
        break-inside: avoid;
    }
}

/*// Ipad Specific*/
@media (max-width: 1024px) and (orientation: landscape) {}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    #top-bar p {
        font-size: .875rem;
    }

    #social-top p {
        font-size: 1.34rem;
    }

    .navbar-brand img {
        max-width: 85% !important;
    }

    .navbar-collapse {
        border-top: 1px solid rgb(255, 255, 255, .1) !important;
    }

    .navbar .nav-item .nav-link {
        /*font-size: .9rem;*/
        background-color: transparent;
    }

    /*overlay menu stuff*/

nav {
    /*box-shadow: 4px 4px 4px -4px rgb(0, 0, 0, .125);*/
    padding: .75rem 0;
}

.navbar {
    transition: background-color .75s ease;
}

.navbar-toggler:focus {
        box-shadow: none;
    }

    .navbar-toggler {
        color: #737373 !important;
    }

    .navbar-nav .nav-link {
        position: relative;
    }

    nav {
        padding: .75rem 0;
    }

    .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: .1875rem;
        background-color: var(--CaseylightBlue);
        transform: scale(0);
        transition: transform 250ms ease-in-out;
        transform-origin: center;
    }

    .navbar-nav .nav-link.active::before,
    .navbar-nav .nav-link:hover::before {
        transform: scale(1.0);
    }

    li.nav-item.mx-lg-3 {
        max-width: max-content;
    }

    nav ul {
        position: relative;
        pointer-events: all;
        min-height: auto;
        width: 100%;
        background-color: transparent;
        flex-direction: column;
        list-style: none;
        align-items: center;
        flex: 1 1 auto;
        justify-content: flex-end;
        padding: 0;
        /*padding-top: 4rem;*/
        opacity: 1;
        transform: translateY(0);
        transition: unset;
        top: unset;
        bottom: unset;
        left: unset;
    }

    nav ul li {
        margin-top: 0;
        margin-bottom: 0;
    }

    nav ul li a.nav-link {
        position: relative;
        font-size: 1rem;
        opacity: .97;
        color: #6c757d !important;
    }


    .banner h1 {
        font-size: 3rem !important;
    }

    .banner {
        --bs-aspect-ratio: 33%;
    }

    .banner-text p {
        font-size: 2rem;
    }

    ul.service{
        width: 52%;
    }

    #bottom-banner {
        --bs-aspect-ratio: 42.85%;
    }

    #widgets {
        padding-bottom: 6.5rem !important;
    }

    #trigger {
        top: 40vh;
    }

}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    /*.navbar .nav-item .nav-link {
        font-size: .9rem;
    }*/

    .banner {
        background-attachment: fixed !important;
    }
}