/*
::Table Of Contents

1.) Global Settings And Bootstrap Overwrite
    1.1) Color Theme And Grouping
2.) Header Section Style
    2.1) Sticky Header
    2.2) Main Navigation
    2.3) Toggle Menu Animation
    2.4) Sub Menu Implementaion
3.) Footer Section Style
4.) Content Area Style
    4.1) Home Page Content
    4.2) Inner Page Content
5.) Media Query Conditions
=========================================================*/

/*
1.) Global Settings And Bootstrap Overwrite
=========================================================*/
:root {
    --darkGrey  : #333333;
    --lightGrey : #f2f2f2;
    --lightRed  : #f3484a;
    --white     : #ffffff;
    --black     : #000000;
}
*:focus {
    outline: none !important;
    box-shadow: none !important;
}
a, button, img, *::after, *::before, .navbar, .navbar-brand img {
    transition: all 0.3s;
}
h1, .h1, h2, .h2, h4, .h4, h5, .h5, h6, .h6 {
    font-weight: 700;
}
h1, .h1, h2, .h2, h4, .h4, h5, .h5, h6, .h6 {
    text-transform: uppercase;
}
h1 {
    text-align: center;
}
h1 {
    font-size: 3.5rem;
    margin-bottom: 0;
    text-align: center;
}
h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    padding-top: 25px;
    position: relative;
    text-transform: uppercase;
}
h2::after, h2::before, h2 > span::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: var(--lightRed);
    position: absolute;
    top: 0
}
h2::before {
    left: 0;
}
h2::after {
    left: 20px;
}
h2 > span::before {
    left: 40px;
}
h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--black);
    position: relative;
    text-transform: uppercase;
}
h3::after {
    content: '';
    width: 60px;
    height: 6px;
    border-radius: 30rem;
    background-color: var(--lightRed);
    position: absolute;
    left: 0;
    bottom: -3px;
}
p {
    margin-bottom: 1.5rem;
}
#header ul, #header ol, #footer ul, #footer ol {
    list-style: none;
    margin: 0;
    padding: 0
}
#header .nav-link {
    font-size: 1.25rem;
}
p a, #header a:hover, #footer a:hover {
    text-decoration: none;
}
p a {
    font-weight: 700;
    text-transform: uppercase;
}
p a:hover, p a:focus {
    text-decoration: underline;
}
label {
    font-size: 1rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
label::after {
    content: '*';
    color: var(--lightRed);
    font-size: 1.5rem;
    font-weight: bold;
}
label a {
    color: inherit
}
label a:hover {
    color: var(--lightRed);
    text-decoration: none;
}
html {
    font-size: 14px;
}
body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
    color: var(--darkGrey);
}
.container-fluid {
    max-width: 1200px !important;
}
.form-control {
    font-size: 1.25rem;
    border-radius: 0;
    padding: 0.75rem 1rem;
    height: auto;
}
textarea.form-control {
    height: 160px;
}
.btn {
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 0;
}
.btn-primary {
    background-color: var(--lightRed);
    border-color: var(--lightRed);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--black);
    border-color: var(--black);
}
    /*
    1.1) Color Theme And Grouping
    =====================================================*/
    .animatedIcon span, .navbar-nav>li:hover>a::after, .navbar-nav>li>a.active::after, #footer {
        background-color: var(--lightRed) 
    }
    .form-control::placeholder, #header a, #header li:hover>*.active {
        color: var(--darkGrey) 
    }
    h1 > span, p a, p a:hover, p a:focus, #header li.nav-item:hover>a, #header li li:hover>a, #header a:hover {
        color: var(--lightRed)
    }
    h1, #footer a:hover {
        color: var(--white)
    }
    .navbar-nav {
        border-top: 4px solid var(--lightRed);
    }
    .form-control, .form-control:focus {
        border-color: var(--darkGrey);
    }
/*
2.) Header Section Style
=========================================================*/

    /*
    2.1.) Sticky Header
    =====================================================*/
    .navbar {
        padding: 1rem;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
    }
    .navbar-brand img {
        width: 250px
    }
    .stickyHeader .navbar-brand img {
        width: 125px
    }
    /*
    2.2.) Main Navigation
    =====================================================*/
    #header {
        position: relative;
        z-index: 10;
    }
    #header .navbar-nav {
        margin-top: 1rem;
    }
    #header .navbar-toggler {
        border: none;
        padding: 0
    }
    .navbar-expand-sm .navbar-nav .nav-link {
        padding: 1rem 0;
    }
    .navbar-nav .nav-link.active {
        font-weight: 700;
    }
    .navbar-nav > li {
        text-transform: uppercase;
    }
    .navbar-nav .nav-link, .navbar-nav>li {
        position: relative;
    }
    .navbar-nav > li > a::after {
        content: '';
        width: 0;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .navbar-nav > li:hover > a::after, .navbar-nav > li > a.active::after {
        width: 100%;
    }
    /*
    2.3) Toggle Menu Animation
    =====================================================*/
    .animatedIcon {
        width: 30px;
        height: 20px;
        position: relative;
        margin: 0px;
        transform: rotate(0deg);
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    .animatedIcon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    .animatedIcon span:nth-child(1) {
        top: 0px;
    }
    .animatedIcon span:nth-child(2), .animatedIcon span:nth-child(3) {
        top: 10px;
    }
    .animatedIcon span:nth-child(4) {
        top: 20px;
    }
    .animatedIcon.open span:nth-child(1) {
        top: 11px;
        width: 0%;
        left: 50%;
    }
    .animatedIcon.open span:nth-child(2) {
        transform: rotate(45deg);
    }
    .animatedIcon.open span:nth-child(3) {
        transform: rotate(-45deg);
    }
    .animatedIcon.open span:nth-child(4) {
        top: 11px;
        width: 0%;
        left: 50%;
    }
/*
2.) Content Area Style
=========================================================*/
#content {
    padding-top: 107px;
    padding-bottom: 50px;
}
#content > * {
    margin-bottom: 1.5rem;
}
#content > *.serviceSection {
    margin-bottom: 4rem;
}
.commonBanner {
    position: relative;
    background-color: var(--black);
}
.commonBanner > img, .landingSectionGraphic > img {
    width: 100%;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: right top;
    opacity: 0.5;
}
.landingSectionGraphic > img {
    object-position: center center;
}
.landingSection ul {
    text-transform: uppercase;
}
.commonBannerContent {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.landingSectionGraphic, .serviceHighlights, .serviceListGraphic, .formContent {
    background-color: var(--white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.serviceHighlights {
    display: flex;
    flex-direction: column;
    padding: 10px;
    flex:1 0 100%;
}
.serviceHighlights > .btn {
    margin-top: auto;
}
.formContent {
    padding: 1rem;
}
#content > .mapContainer {
    margin-bottom: 0;
}
.addressContainer {
    font-size: 1.25rem;
    line-height: 1.2;
    background-color: var(--white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 15px;
}
.addressContainer > span {
    display: flex;
    margin-bottom: 1rem;
}
.addressContainer > span:last-child {
    margin-bottom: 0;
}
.addressContainer i {
    font-size: 1rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--lightRed);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}
.addressContainer > span > span {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.addressContainer > span > span > span, .addressContainer > span > span> strong {
    display: block;
}
.addressContainer a {
    text-decoration: none;
    color: inherit;
}
.addressContainer a:hover {
    color: var(--lightRed)
}
.form-check-input {
    margin-top: 0;
    flex: 1 0 28px;
    max-width: 28px;
}
.form-check-label {
    line-height: 1;
}
.privacyPolicy p a {
    text-transform: none;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}
/*
5.) Media Query Conditions
=========================================================*/
@media only screen and (min-width:575px) {
    .navbar {
        padding: 1rem;
    }
    #header .navbar-nav {
        border-top: none;
        margin-top: 0
    }
    .navbar-nav>li {
        margin-left: 2rem;
    }
}