/*  ------------------------------------------------------------------------------------------------------------------------------------  */
/*  ----------------------------------------------------------------------------------------------------------------------- STYLE RESET   */
/*  ------------------------------------------------------------------------------------------------------------------------------------  */
/* -------------------------------------------------------------------------------------------------------------------------------------
    Credit to this bnch, plus my own tweaks:; 
    
    Eric Meyer                  :: http://meyerweb.com
    HTML5 Doctor                :: http://html5doctor.com
    and the HTML5 Boilerplate   :: http://html5boilerplate.com
------------------------------------------------------------------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}                                   

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
    don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {
    clear: both;
    display: block; 
    height: 1px; 
    border: 0; 
    border-top: 4px solid rgba(100,100,100,0.2); 
    margin: 30px 0; 
    padding: 0;
}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font-size: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
    gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }


/* Roxy Adds
-------------------------------------------------------------------------------*/

div, header, nav, main, footer, input, label, textarea, a, section, article {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

label {
    cursor: default;
}

.clear {
    clear: both;
    display: block;
    height: 0;
}

.nowrap {
    white-space: nowrap !important;
}

.shout{
    text-transform: uppercase;
}



/*  --------------------------------------------------------------------------  */
/*  -------------------------------- For wide screen browsers (wider than 1024) */
/*  --------------------------------------------------------------------------  */


 h1:after { /*  toggle inline/none for checking responsive stylesheets  */
    display:  none;
    color: red;
 }

html, body {
  height: 100%;
}

body {
    position: relative;
    font: 400 11pt Roboto, Arial, Verdana, sans-serif;
    background: #cfe4dc url('../images/bg-body.png') center top repeat-x;
    color: #2b2f40;
}

body { /* -- Grid Container  */
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

a {
    color: #2ca387; 
    text-decoration: none; 
    outline: 0;
    -webkit-transition: all .35s;
    -o-transition: all .35s;
    transition: all .35s;
    }
a:hover {
    color: #006969;
    text-decoration: none;
    }
a img {
    border: none;
}

button:focus {
    outline: 0;
    text-decoration: none;
}

.clear {clear: both;}

h1 {
    margin: 0;
    padding: 0 0 20px;
    font: 900 30pt Roboto, Arial, Verdana, sans-serif;
    line-height: 100%;
    letter-spacing: -1px;
    color: #3a4050;
}


h2 {
    margin: 0;
    padding: 10px 0 20px;
    font: 700 18pt Roboto, Arial, Verdana, sans-serif;
    line-height: 120%;
    letter-spacing: 0;
    color: #3a4050;
}


h3 {
    margin: 0;
    padding: 10px 0 10px;
    font: 500 13pt Roboto, Arial, Verdana, sans-serif;
    line-height: 120%; 
    color: #3a4050;
}

h4 {
    margin: 0;
    padding: 5px 0 10px;
    font: 500 12pt Roboto, Arial, Verdana, sans-serif;
    line-height: 120%; 
    color: #3a4050;
}



p {
    margin: 10px 0 20px;
    line-height: 150%;
    text-align: left;
}

p.intro {
    margin: 10px 0 80px;
    font-weight: 300;
    font-size: 18pt;
}
p.intro + p {
    margin: -70px 0 80px;
}

p.intro + h2 {
    margin: -70px 0 80px;
}

strong {
    font-weight: 700;
}


ul {
    overflow: hidden; /*  fixes float edge bug  */
    }
ol {
    margin: 0 0 0 18px;
    }
ul li, ol li {
    margin: 0 0 10px;
    line-height: 140%;
    text-align: left;
}
ol li {
    background: none;
}

.content {
    margin: auto;
    padding: 0;
    width: 100%;
    max-width: 1750px;
}




/*  ----------------------------------------------- HEADER  */

header {
    position: relative;
    display: block;
    margin: auto;
    width: calc(100% - 150px);
    height: 180px;
    flex-shrink: 0;
    border-bottom: #2ca387 7px solid;
    }
header .content {
    position: relative;
    z-index: 500;
    padding: 0; 
}

.bannerimage {
    position: absolute;
    top: 0;
    margin-left: auto;
    margin-right: auto;
    left: -450px;
    right: 0;
    width: 100%;
    height: 320px;
    background:  url('../images/bg-banner.png') center top no-repeat;
    background-size: contain;
}


a#logo {
    position: absolute;
    top: 52px;
    left: 0;
    width: 337px;
    height: 92px;
    background: url('../images/bg-logoG.svg') no-repeat left top;
    background-size: contain;
    z-index: 200;
}


/*  -- Main Navigation */

.banner {
    position: absolute;
    bottom: 0;    
    width: 100%;
    z-index: 100;
    padding: 0;
}

.navigation {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 10px;
}


form.smart .tab input, 
form.smart .tab label  {
    display: none;
    }
form.smart nav {
    padding: 0;
    }
form.smart nav ul {
    margin: 0;
    text-align: right;
    }
form.smart nav li {
    margin: 0;
    display: inline-block;
    }
form.smart nav li a {
    display: inline-block;
    margin: 0;
    margin: 0 0 0 50px;
    color: #2ca387;
    font-size: 11pt;
    font-weight: 700;
    line-height: 70px;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    }
form.smart nav li a:hover {
    color: #006969;
}

.pg-home form.smart nav ul li.btn-home a,
.pg-about form.smart nav ul li.btn-about a,
.pg-info form.smart nav ul li.btn-info a,
.pg-contact form.smart nav ul li.btn-contact a {
    color: #006969;
    background: transparent;
}



/*  ------------------------------------------------- CONTENT  */

main {
    flex-grow: 1;
    flex-shrink: 0;
    position: relative;
    margin: auto;
    width: calc(100% - 150px);
    padding: 100px 0;
    }
main ul li {
    margin: 0 0 5px;
    padding: 0 0 0 18px;
    background: url('../images/bullet.gif') no-repeat 0 3px;
}


/*  home - section 1  */


.serviceteasergrid { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr 1fr 1fr;
    }
.serviceteasergrid a {
    display: block;
    }
.serviceteasergrid a span.teaserimage {
    display: block;
    padding: 250px 0 0;
    border-radius: 5px 5px 0 0;
    }
.serviceteasergrid a.serv-industrial span.teaserimage {
    background: url(../images/bg-industrial-cleaning.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a.serv-professional span.teaserimage {
    background: url(../images/bg-professional-cleaners.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a.serv-home span.teaserimage {
    background: url(../images/bg-home-cleaning.jpg) center top no-repeat;
    background-size: cover;
}
.serviceteasergrid a span.teaserlink {
    display: block;
    padding: 15px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 0 0 5px 5px;
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    }
.serviceteasergrid a:hover span.teaserlink {
    background: #006969;
}




/*  home - section 2  */

.pg-home .section2 {
    margin: 100px 0 0;
    }
.pg-home .section2 .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.pg-home .section2 img {
    border-radius: 5px;
}
.about {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}

/*  areas + reviews grid   */

.area_review_grid {
    margin: 100px 0 0;
    }
.area_review_grid .content  { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  auto 400px;
    }


.areagrid  {
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  1fr 1fr;   
}


.googlereviews {
    width: 400px;
    overflow: hidden;
    margin: 20px auto 0;
    position: relative; /* Create positioning context */
    padding-bottom: 30px; /* Add some space for the pagination */
    }
.googlereviews .swiper-container {
    width: 100%; /* Take full width of the outer container */
    height: auto;
    padding: 0;
    margin: 0;
    background-color: #0069aa;
    color: #fff;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
.googlereviews .swiper-container h3 {
    padding: 10px 0 10px 20px; 
    background: #ddd;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}    
.googlereviews .swiper-wrapper {
    display: flex;
    width: 100%; /* Ensure wrapper tries to be full width */
    }
.googlereviews .swiper-slide {
    padding: 30px 40px; /* Top/Bottom | Left/Right */
    text-align: left;
    box-sizing: border-box;
    width: 100%;
    flex-shrink: 0;
    display: flex; /* Enable flexbox */
    flex-direction: column;
    justify-content: center; /* Vertically center content */
    align-items: left; /* Horizontally center content (optional) */
    /* height will be dynamically set by JavaScript */
    cursor: default;
    }
.googlereviews .swiper-slide span {
    display: block;
    margin: 10px 0 0;
}
.googlereviews .swiper-pagination {
    text-align: center;
    margin-top: 10px; /* Remove default top margin */
    position: absolute; /* Position relative to .swiper-outer-container */
    bottom: 10px; /* Place at the bottom */
    left: 0;
    width: 100%; /* Make it full width for centering */
}
.swiper-pagination-bullet {
    /* Style the bullets if needed */
    margin: 0 5px;
    cursor: pointer;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
    opacity: 0.8;
}
.swiper-pagination-bullet-active {
    background: #333;
    opacity: 1;
}

.review-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-gap: 5px;
    margin: 0 0 50px;
    padding: 0;    
}

a.review-cta {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    border: 2px solid #0069aa;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none; /* Remove default link underline */
    color: inherit; /* Inherit text color from parent */
    overflow: hidden; /* This is crucial to clip the span's background */
}
a.review-cta:hover {
border-color: #009bfb;    
}
a.review-cta img {
    padding: 5px 10px;
    }
a.review-cta span {
    display: block;
    background: #0069aa;
    color: #fff;
    padding: 12px;
    flex-grow: 1;
    text-align: center;
}
a.review-cta:hover span {
    background: #009bfb;
}

/*  information - section 1  */

.pg-info .section1 .productblock { /* -- Grid Container  */
    display: grid; 
    grid-template-columns: 330px auto; 
    grid-gap: 30px;
    margin: 0 0 50px;
    padding: 0;
    }
.pg-info .section1 img {
    border-radius: 5px;
}

.pg-info .section1 .productblockcontent{
    padding: 40px 50px 20px;
    background: #e1f3f9;
    border-radius: 5px;
}

.pg-info .section1 .productblockcontent h3 {
    padding: 0;
}

p.cta {
    display: block;
    text-align: right;
    }
p.cta a {
    display: inline-block;
    padding: 15px 30px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    font-size: 110%;
    }
p.cta a:hover {
    background: #006969;
}


/*  home - Info Detail Page  */

.infodetailgrid {
    margin: 0;
    }
.infodetailgrid .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.infodetailgrid img {
    border-radius: 5px;
    margin: 0 0 10px;
}
.infopanel p.sub a {
position: relative;
    display: block;
    margin: 0 0 5px;
    padding: 10px 15px;
    background: #2ca387;
    color: #f6f6f7;
    border-radius: 5px;
    text-align: left;
    font-weight: 700;
}
.infopanel p.sub a:hover,
.pg-info-industrial .infopanel p.sub a.serv-industrial,
.pg-info-professional .infopanel p.sub a.serv-professional,
.pg-info-home .infopanel p.sub a.serv-home {
    background: #006969;
}


.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.infopanel p.sub a span {
    position: absolute;
    right: 10px;
    line-height: 22px;
    font-size: 80%;
}


.infobgblock {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}


/*  contact  */

.pg-contact .section1 {
    margin: 0;
    padding: 0;
}

.pg-contact .section1 .content { /* -- Grid Container  */
    display: grid; 
    grid-template-columns: auto 400px; 
    grid-gap: 30px;
    }
.pg-contact .section1 .content h3 {
    padding: 0 0 20px;
}

.contacts {
    padding: 0;
    }
.contacts .contactgrid { /* -- Grid Container & Item  */
    display: grid; 
    grid-template-columns: 20px auto; 
    grid-gap: 20px;
    }

.contacts .contacticon {
    margin: 6px 0 0;
    height:  20px;
    width: 20px;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    }
.contacts .ci-address  { background-image: url('../images/ci-address.png');  }
.contacts .ci-landline { background-image: url('../images/ci-landline.png'); }
.contacts .ci-mobile   { background-image: url('../images/ci-mobile.png');   }
.contacts .ci-email    { background-image: url('../images/ci-email.png');    }
.contacts .ci-facebook { background-image: url('../images/ci-facebook.png'); }
.contacts .ci-instagram { background-image: url('../images/ci-instagram.png'); }
.contacts p {
    margin: 0 0 10px;
    }
.contacts strong {
    display: block;
}



/*  Feedback Form  */

form#ValidatedForm {
    position: relative;
    margin: 0;
    padding: 50px;
    background: rgba(44,163,135,0.3);
    border-radius: 5px;
    }
form#ValidatedForm .textfield,
form#ValidatedForm .valid {
    display: block;
    margin: 0 0 10px;
    padding: 10px;
    width: 100%;
    height: 40px;
    border: none;
    background-color: #fff !important;
    border-bottom: #2ca387 3px solid;
    border-radius: 5px;
    color: #1b1f1d !important;   
    }
form#ValidatedForm .textarea {
    height: 200px; 
    }
form#ValidatedForm .g-recaptcha {
    display: block;
    float: right;
    margin: 0 0 10px;
    }
form#ValidatedForm .submit {
    clear: both;
    display: inline-block;
    float: right;
    margin: 0;
    padding: 18px 50px;
    background: #2ca387;
    border: none;
    border-radius: 5px;
    font-weight: 700;
    font-size: 9pt;
    color: #f6f6f7;
    text-transform: uppercase;
    }
form#ValidatedForm .submit:hover {
    background: #006969;
    }
form#ValidatedForm label.error {
    display: block;
    margin: 0 0 15px 5px;
    width: 100%;
    color: #7f0000;
    font-weight: 700;
    text-shadow: 0 0 1px #000;
    }
.formconfirmation {
    margin: 0 0 70px;
    padding: 70px;
    background: #f6f6f7;
    border-radius: 5px;
    }
.fc-win h2 {
    padding: 0 0 20px;
    color: #135626;
    }
.fc-fail h2 {
    color: red;
}


.pg-contact .section2 {
    padding: 0;
    }
.pg-contact .section2 iframe {
    display: block;
    width: 100%;
    height: 500px;
}

/*  -- Page: About  */

.aboutgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 50px;
    margin: 0 0 50px;
    }
.aboutgrid img {
border-radius: 5px 5px 0 0;   
}

.block {
    border-radius: 5px;
    background: #e1f3f9;
}
.block-content {
    padding: 40px 50px 30px;
}

.aboutcta {
    margin: 50px 0 0;
    }
.aboutcta .content { /* -- Grid Container  */
    display: grid;
    grid-gap: 30px;
    grid-template-columns:  35% auto;
    }
.aboutcta img {
    border-radius: 5px;
}
.about {
    padding: 40px 50px 30px;
    background: #e1f3f9;
    border-radius: 5px;
}


/*  -- Page: Landing1  */

.landing1grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 50px;
    margin: 0 0 50px;
}

/*  -------------------------------- FOOTER  */

footer {
    flex-shrink: 0;
    margin: 0;
    padding: 50px 75px;
    background: #2ca387;
}

.footergrid{ /* -- Grid Container   */
    display: grid;
    grid-gap: 50px;
    grid-template-columns: 350px auto 220px;
    margin: 0;
    padding: 0;
}

a#footerlogo {
    display: block;
    margin: 15px 0 0;
    width: 337px;
    height: 92px;
    background: url('../images/bg-logoW.svg') no-repeat left top;
    background-size: contain;
}

footer ul {
    margin: 0;
    padding: 0;
    }
footer .footercenter ul li {
    display: block;
    margin: 0 0 2px;
    padding: 0;
    font-weight: 400;
    font-size:  9pt;
    background: none;
    text-align: left;
    color: #f6f6f7;
    }
footer .footercenter ul li.copyright {
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 11pt;
    border: none;
    }
footer .footercenter ul li.copyright a,
footer .footercenter ul li.copyright a:hover {
    border: none;
}
footer .footercenter ul li a {
    display: inline-block;
    padding: 5px 0;
    color: #f6f6f7;
    border-bottom: #f6f6f7 dotted 2px;
    }
footer .footercenter ul li a:hover {
    color: #f6f6f7;
    border-bottom: #f6f6f7 solid 2px;
}

footer .footercenter span.footerlinkdiv {
    display: inline-block;
    padding: 0 10px;
}

footer ul.credits {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footerright p {
    text-align: right;
    color: #f6f6f7;
}

footer ul.socials {
    text-align: right;
    }
footer ul.socials li {
    display: inline;
    margin: 0 0 10px 10px;
    padding: 0;
    text-align: right;
    }
footer ul.socials li a {
    display: inline-block;
    padding: 0;
    height: 40px;
    width: 40px;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 40px;
    -webkit-transition: none .35s;
    -o-transition: none .35s;
    transition: none .35s;
    }
footer ul.socials li a:hover {
    background-position: left bottom;    
}

footer ul.socials li a.facebook {
    background-image: url('../images/bg-social-facebook.png');
}

footer ul.socials li a.instagram {
    background-image: url('../images/bg-social-instagram.png');
}

footer ul.socials li a.linkedin {
    background-image: url('../images/bg-social-linkedin.png');
}

footer ul.socials li a.whatsapp {
    background-image: url('../images/bg-social-whatsapp.png');
}