@charset "UTF-8";

:root {
    --primary: #036b38;
    --secondary: #91c853;
    --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --text-shadow: 2px 3px 4px rgba(0,0,0,.5);
}

body {
    font-size: 18px;
    max-width: 1920px;
    margin: 0 auto;
    box-shadow: var(--shadow);
    background-color: #fff;
    color: #222; }

section:not(.landing):not(.header) { padding: 4rem 0; }
section:not(.header):not(.landing) { border-top: solid 1px rgba(0,0,0,.15); }
section:not(.header) h1 { color: var(--bs-danger); }
section:not(.header) h2 { color: var(--bs-success); }

a {
    text-decoration: none;
    transition: all .15s ease; }

.bi { margin-top: -4px; }
.shadow-0 { box-shadow: none; }
.btn:focus { box-shadow: none; }
.badge:hover { color: #222;  }
.bg-light { background-color: #f6f6f6; }
.bg-gradient { background-image: linear-gradient(180deg, rgba(89,152,211,1.5) 0%, rgba(162,207,242,.5) 100%) !important; }
address { margin-bottom: 0; }
button:focus:not(:focus-visible) { box-shadow: none; }

.lead {
    font-size: 1.5rem;
    font-weight: 400;}

.text-underline:hover { text-decoration: none; }

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center; }


/* ******************************************** Content ******************************************** */

header  {
    padding: 1rem;
    display: flex;
    justify-content: space-between; }

header h1 { 
    text-transform: uppercase;
    margin-bottom: 0;
    font-size: 1.25rem;
    color: #333; }

header h1 a { font-weight: 400; }

header a { 
    text-transform: uppercase;
    font-weight: 300;
    color: #333; }
    
header a:hover { color: #000; }
    
nav, nav div {
    display: flex;
    justify-content: space-between;
    align-items: center; }

.bi-home { margin-top: -2px; }

.nav-link {
    padding: 0 0.5rem;
    color: #222;
    display: flex;
    justify-content: center;
    align-items: center; }

.nav-link:hover { color: var(--primary); }

.nav-link.home { 
    font-weight: 400;
    text-transform: uppercase;
    color: var(--primary); }
    
.nav-link.home:hover { color: #222; }


/* Landing */
#landing {
    padding: 4rem 0;
    display: flex;
    justify-content: center; }
    
#landing small {
    display: block;
    font-size: 43%; }
    
#landing h1 { text-transform: uppercase; }
    
#landing .h1-2 { 
    color: var(--bs-success);
    font-weight: 300 !important; }
    
#landing .btn { margin-top: 1.2rem; }

#landing p { margin-bottom: 0; }

#landing img, #benefits img {
    border-radius: .5rem;
    box-shadow: var(--shadow);
    float: right;
    margin-left: 2rem;
    margin-bottom: .5rem;
    max-width: 100%;
    height: auto; }

#landing .btn { box-shadow: 0 .5rem 1rem rgba(0,0,0,.15); }
#landing .btn:hover { box-shadow: inset 0 .5rem 1rem rgba(0,0,0,.15); }


/* Gallery */
#gallery .row>* { 
    overflow: hidden;
    padding: 0; }

#gallery img { 
    border: solid 3px #fff;
    max-width: 100%;
    height: auto; }

#gallery a img { transition: all .15s ease; }

#gallery a:hover img { 
    transform: scale(1.2);
    filter: contrast(125%); }

.before-after img { transition: all .15s ease; }
.before-after:hover img { filter: contrast(125%); }


/* Benefits */
#benefits { 
    border-top: none;
    padding: 6rem 0 !important; }

#benefits li { 
    margin-top: .5rem;
    list-style-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-check2-circle mr-1' fill='green' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>"); }
    
    
/* Contact Form */
.template-outside { margin: 1rem; }
.quform-input input, .quform-elements .quform-huge.quform-element textarea { width: 100%; }
.quform-group-alignment-left > .quform-group-elements > .quform-group-row > .quform-element:not(.w-100) { width: 49.3%; }
.quform-theme-light-light .quform-element > .quform-spacer > label { font-weight: normal; }
.template-outside { margin: 2rem  1rem; }
.quform-inner h2 { margin-bottom: 1rem; }

    
/* Footer */
footer {
    font-size: 1.5rem;
    text-align: center;
    padding: 0; }

#contact, #contact h2, #contact address { color: rgb(33,37,41); }
.footer-inner { padding: 4rem 1rem; }

.bg-footer {
    padding: 0;
    background-position: center;
    background-size: cover; }


/* MSWD */
.mswd-links p {
    font-size: 13px !important;
    display: block;
    margin-top: .25rem;
    line-height: 1.25rem;
    text-align: center; }

.mswd-links a {
    transition: all .15s ease;
    text-decoration: underline;
    color: inherit;
    font-size: inherit; }

.mswd-links a:hover {
    opacity: .7;
    text-decoration: none; }


/* ******************************************** REPONSIVE ******************************************** */

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (max-width: 991px) {
    #benefits img {
        float: none;
        margin-left: 0;
        margin-bottom: 2rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
    #landing {
        padding-top: 2rem; }
    
    #landing img {
        width: 300px;
        height: 225px; }
        
    #contact h2 { 
        margin-top: 1.5rem;
        padding-left: 1rem; }
}

@media (max-width: 767px) {
    section:not(.landing):not(.header) { padding: 2rem 0; }
    
    /* Header */
    header { background-color: #f8f8f8; }
    header h1 { text-align: center; }
    header nav { flex-direction: column; }
    nav div { margin-top: 1rem; }
    
    /* Landing */
    #landing {
        height: auto;
        align-items: flex-start;
        padding: 2rem 0 3rem 0; }

    .landing-flex {
        display: flex;
        flex-direction: column; }
    
    #landing .ms-3 { margin-left: 0 !important; }
    #landing h1 { margin: 0 0 1rem 0; }
    
    #landing img, #benifits img { 
        float: none;
        margin-left: 0;
        margin-bottom: 0; }
    
    .order1 { order: 1; }
    .order2 { order: 2; }
    
    .order3 { 
        margin-top: 1.5rem !important;
        margin-bottom: 0 !important;
        order: 3; }
    
    .order4 { order: 4; }
    .order5 { order: 5; }
    
    .fs-5 { font-size: 1rem !important; }
    
    /* Gallery */
    #gallery a img { display: none; }
    
    /* Benefits */
    #benefits { padding: 2rem 0 !important; }
    
    #benefits h1 { 
        margin-bottom: 1rem;
        margin-top: 1rem; }
        
    #benefits .list-style-none { padding-left: 1rem; }
        
    /* Footer */
    .footer-inner { padding: 2rem 1rem; }
    
}