:root{
    --green:#548078;
    --lgreen:#E5F1EF;
    --dgreen:#396A61;
    --pink:#D77770;
    --dpink:#C94940;
    --black:#2d2d2d;
    --cream:#F9E8DC;
    --materialIcon:'Material Symbols Rounded';
    --size-sm: 0.85rem;
    --size-p: 1.0625rem;
    --size-h6: 1.25rem;
    --size-h5: 1.56rem;
    --size-h4: 1.95rem;
    --size-h3: 2.44rem;
    --size-h2: 3.05rem;
    --size-h1: 3.62rem;
}
*, *::before, *::after {box-sizing: border-box;}
html{scroll-behavior: smooth;}
body{margin: 0;font-family: "Poppins", sans-serif;}
a{text-decoration:none;transition:0.3s ease-out;}
h2{font-size: var(--size-h2);font-weight: 700;color:var(--dgreen);}
h3{font-size: var(--size-h3);color:var(--black);}
h4{font-size: var(--size-h4);}
h5{font-size: var(--size-h5);}
h6{font-size: var(--size-h6);}
p{font-size: var(--size-p);}
h1, h2, h3, h4, h5, h6{line-height:1.1;margin-block-start:0;margin-block-end:0.8rem;}
* + h1,
* + h2,
* + h3,
* + h4,
* + h5,
* + h6 {
    margin-block-start: 2.5rem;
}
ul, ol, blockquote{margin-block-start:0;margin-block-end:0.8rem;}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p{margin-block-start:0.5rem;}
.text a, table a, details a{color:var(--dpink);}
.text a:hover, table a:hover, details a:hover{text-decoration: underline;color:var(--pink);}
.smallerTopMargin{margin-top: 5rem;}

header{display: flex;gap:40px;justify-content: space-between;align-items: center;margin:20px 3%;}
header .logo img{max-width: 200px;}
header nav{flex:1;}
header nav ul{list-style-type: none;display: flex;gap:5%;justify-content: flex-end;font-size: 1.15rem;font-weight: 500;padding-left: 0;}
header nav ul li a{color:#000;border-bottom: 2px solid transparent;}
header nav ul li a:hover{border-bottom: 2px solid var(--pink);}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    padding:0.5rem;
    z-index:1001;
    position:relative;
}
.nav-toggle .material-symbols-rounded{font-size:2rem;color:#000;}
.nav-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

.visuallyHidden{
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

main > * + * {margin-top: 10rem;}

.hero{margin-bottom: 8rem; position: relative;background-image: url(./images/hero-poppies.webp);background-position: center;background-size: cover;min-height:600px;display: flex;align-items: center;justify-content: space-between;gap:80px;padding-inline:5%;}
.hero::before{position: absolute;top:0;bottom:0;left: 0;right: 0;content:"";width:100%;height:100%;background-color:rgba(0,0,0,0.6);}
.hero .airQuality{position: relative;flex: 1;text-align: center;}
.hero .text{color:#FFF;position: relative;z-index: 1;max-width: 50%;}
.hero .text h2{font-size: 3rem;color:#FFF;}

.pageTitle{margin-bottom: 8rem; position: relative;background-position: center;background-size: cover;height:400px;display: flex;align-items: center;}
.pageTitle::before{position: absolute;top:0;bottom:0;left: 0;right: 0;content:"";width:100%;height:100%;background-color:rgba(0,0,0,0.6);}
.pageTitle h1{margin-inline:5%;color:#FFF;position: relative;z-index: 1;max-width: 50%;font-size: 4rem;}

a.btn{display:inline-block;background-color: var(--dpink);color:#FFF;font-weight:500;border-radius: 5px;padding:10px 20px;margin-top:5px;text-decoration: none !important;}
a.btn:hover{background-color: var(--pink);color:#FFF;}
a.btn + a.btn{margin-left: 20px;}

/* Blocks */
.contentWrap{margin-inline: 5%;}

.textImage{margin-inline: 5%;display: flex;gap: 80px;align-items: center;}
.textImage .text{flex-basis: 55%;}
.textImage .image{flex: 1;overflow: hidden;border-radius: 30px;text-align:center;}
.textImage .image img{display: block;max-width: 100%;width: 100%;}
.textImage.swapped .image{order:-1;}

.textBox{margin-inline: 5%;display: flex;gap:80px;align-items: center;}
.textBox .text{flex:1;}
.textBox .box{flex:0 0 30%;background-color: var(--lgreen);padding:40px;box-sizing: border-box;border-radius: 15px;}
.textBox .box h2{font-size: var(--size-h4);}
.textBox .box h3{font-size: var(--size-h5);}
.textBox .box > *:first-child{margin-top:0;}
.textBox .box > *:last-child{margin-bottom:0;}

.inlineBanner {position: relative;margin-inline: 5%;border-radius: 20px;overflow: hidden; background-size:cover;background-position: center;min-height: 500px;display: flex;align-items: center;padding:40px;}
.inlineBanner::before{position: absolute;top:0;bottom:0;left: 0;right: 0;content:"";width:100%;height:100%;background-color:rgba(0,0,0,0.6);}
.inlineBanner .text{position: relative;z-index: 1;color:#FFF;max-width:60%;}
.inlineBanner .text h2{color:#FFF;}
.inlineBanner .text a{color:#FFF;text-decoration: underline;}
.inlineBanner .text a:hover{opacity: .8;}

hr.divider{background-image: url(./images/divider.png);background-position: center;background-size: contain;background-repeat: no-repeat;height:50px;border: none;}

.showHide{margin-inline: 5%;}
.showHide h2{margin-bottom: 20px;}
.showHide details{border-top: 1px solid var(--green);}
.showHide details:last-of-type{border-bottom: 1px solid var(--green);}
.showHide details summary > * {display: inline;}
.showHide details summary{cursor:pointer;list-style: none;position: relative;padding: 25px 35px 25px 0;}
summary::-webkit-details-marker{display: none;}
.showHide details summary::after{
	font-family: var(--materialIcon);
    font-weight:600;
    font-size: 1.65em;
	content:"\e313";
    position: absolute;
    right: .75em;
    height: .75em;
    width: .75em;
    color:#000;
  }
.showHide details[open] summary::after{content:"\e316";}
.showHide details[open]{padding-bottom:25px;}
.showHide details[open] summary{padding-bottom:0;}
.showHide details[open] summary h3{color:var(--pink);}
.showHide details summary:hover::after{color: var(--green);}
.showHide details summary h3{font-size: var(--size-h6);font-weight:600;}
.showHide details summary:hover h3{color:var(--pink);}

.columns {
    --cols: 1;
    margin-inline: 5%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--minmax), 1fr));
    gap: var(--gap);
  
}
.columns.two{ --cols: 2; --gap: 80px; --minmax:350px;}
.columns.three{ --cols: 3; --gap: 50px; --minmax:350px;}
.columns.four{ --cols: 4; --gap: 50px; --minmax:250px;}

.centeredText {margin-inline: 20%;text-align: center;}
.centeredText.RemoveBtmMargin{margin-bottom:-6rem;}

.cardWrapper{margin-inline:5%;}
.cardWrap{display: flex;flex-wrap: wrap;gap: 30px;margin:40px 0;justify-content: space-evenly;}
.cardWrap.two{--cols: 2;}
.cardWrap.three{--cols: 3;}
.cardWrap.four{--cols: 4;}
.cardWrap .card{border-radius: 8px;box-shadow: rgba(100, 100, 111, 0.2) 0 7px 28px 0;padding:30px 20px;flex: 0 0 calc((100% - (var(--cols) - 1) * 30px) / var(--cols));min-width:255px;color:#000 !important;background-color: #FFF;transition: 0.3s ease-out;}
.cardWrap.three .card{min-width:320px;}
.cardWrap.four .card{min-width:255px;}
.cardWrap .card img{width: 100%;max-width: 100%;margin:0 auto 20px;border-radius: 8px;}
.card > :is(h2, h3):first-child, .card > :is(h2, h3):first-of-type {margin-top: 0;}
.cardWrap .card h2, .cardWrap .card h3{font-size: var(--size-h5)}

.cardWrap.callouts .card{position: relative;overflow: hidden; background-size:cover;background-position: center;min-height: 400px;display: flex;align-items:flex-end;}
.cardWrap.callouts .card::before{position: absolute;inset: 0;content:"";width:100%;height:100%;background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 65%); transition: opacity .3s ease-out;opacity: 1;}
.cardWrap.callouts .card::after{position: absolute;inset: 0;content:"";width:100%;height:100%;background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(111, 37, 31, 0.65) 65%); transition: opacity .3s ease-out;opacity: 0;}
.cardWrap.callouts .card:hover::after {opacity: 1;}
.cardWrap.callouts .card .text{position: relative;z-index:1;color:#FFF;}
.cardWrap.callouts .card h2{color:#FFF;font-size: var(--size-h4);margin-top: 15px;margin-bottom: 0;}

.counterNewsletter{margin-inline: 15%;display: flex;gap:80px;justify-content: space-between;align-items: center;}
.counterWrap{flex:1;display: flex;gap:60px;justify-content: center;}

.counterWrap .countContent{display: flex;gap:10px;align-items: center;}
.counterWrap .countContent .material-symbols-rounded{font-size: 3rem;color:var(--pink);}

.counterWrap .counter{display: flex;flex-direction: column;text-align: center;}
.counterWrap .counter .count{font-size: 4rem;font-weight: bold;line-height: 100%;color:var(--dgreen);}

.collaborative h3{margin-bottom: 20px;}
/* ---------- LOGO TICKER ---------- */
    .logo-ticker {--ticker-speed: 35s;--logo-height: 140px;--logo-gap: 3rem;width: 100%;overflow: hidden;-webkit-mask-image: linear-gradient(
            to right,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );mask-image: linear-gradient(
            to right,
            transparent,
            #000 10%,
            #000 90%,
            transparent
        );}
 
    .logo-ticker__track {display: flex;align-items: center;gap: var(--logo-gap);width: max-content;}
    .logo-ticker__track.is-ready {animation: scroll-ticker var(--ticker-speed) linear infinite;}

    .logo-ticker:hover .logo-ticker__track,
    .logo-ticker:focus-within .logo-ticker__track {animation-play-state: paused;}
    .logo-ticker__item {flex: 0 0 auto;display: flex;align-items: center;justify-content: center;height: var(--logo-height);}
    .logo-ticker__item img {height: 100%;width: auto;display: block;}

    @keyframes scroll-ticker{
        from{ transform:translateX(0); }
        to{ transform:translateX(var(--ticker-shift, -50%)); }
    }

/*** MISC ***/
iframe{border-radius: 10px;}
iframe[src*="youtube.com"],
iframe[src*="youtu.be"], iframe[src*="google.com/maps"]{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/*** TABLE ***/
table {
    border-collapse: collapse; /* borders are collapsed into a single border when possible */
    border: 1px solid #d4d4d4;
    border-spacing: 0; /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */
    margin: 0 0 10px;
    text-align: left;
}
table tr:nth-child(even) {background-color: #ededed;}
table th, thead td {background-color: #ededed}
table td, table th {padding: 15px; border: 1px solid #d4d4d4; vertical-align: top;}
table th {font-weight: bold;}
table thead td{background-color:#002157;color:#FFF;font-size:1.05em;padding-top:15px !important;padding-bottom:15px !important;}
table li{font-size:inherit !important;}
table td p{font-size:inherit !important;}

.testimonials{margin-inline:25%;}
.embla__viewport {overflow: hidden;}
.embla__container {display: flex;touch-action: pan-y pinch-zoom;}
.embla__slide {flex: 0 0 100%;min-width: 0;}
.testimonials .embla__slide{color:var(--black);}
.embla button {background-color: #FFF;border: 2px solid var(--green);border-radius: 50%;width: 40px;height: 40px;cursor: pointer;padding: 0;display: inline-flex;align-items: center;justify-content: center;color: var(--dpink);transition: 0.3s ease-out;}
.embla button:hover{background-color: var(--green);color:#FFF;}


/* Footer */
footer{margin-top: 10rem;padding:40px 5% 20px;background-color: var(--green);color:#FFF;}
footer .logo{max-width: 145px;}
footer a{color:#FFF !important;}
footer a:hover{opacity: .5;}
footer .text{text-align: center;}
footer .footerInfo{display: flex;align-items:center;justify-content: space-between;gap:40px;}
footer .socials{display: flex;gap:15px;}
footer .socials a{font-size:1.35rem;}
footer .copy{margin-top:30px;text-align: center;}
footer .copy p{font-size: .8rem;}

/* SOCIAL ICONS */
@font-face {
    font-family: social;
    src: url(./social-font/social-media.ttf);
    src: url(./social-font/social-media.woff);
}
i[class*="icon"]{font-family: social;font-style: normal;font-weight: 400;font-size: 1.75rem;}

.icon-tiktok:before {
  content: "\e901";
}
.icon-x:before {
  content: "\e900";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-youtube:before {
  content: "\ea9d";
}

/* Back To Top */
#topBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: 2px solid var(--cream); /* Remove borders */
    outline: none; /* Remove outline */
    background-color:var(--pink); /* Set a background color */
    color: #FFF; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    border-radius: 50px; /* Rounded corners */
    font-size: 1rem; /* Increase font size */
    transition: all 0.25s ease-in;
    line-height: 1px;
}
#topBtn:hover {background-color:var(--dpink);}

@media (max-width:1179px){
    .textImage, .textBox{flex-direction: column;gap:40px;}
    .textImage.swapped .image{order:0;}
}

@media (max-width:1099px){
    .nav-toggle{display:inline-flex;}
    header nav{
        flex:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:var(--pink);
        visibility:hidden;
        opacity:0;
        transition:opacity 0.25s ease, visibility 0.25s ease;
        z-index:1000;
    }
    body.nav-open header nav{visibility:visible;opacity:1;}
    header nav ul{
        flex-direction:column;
        justify-content:center;
        align-items:center;
        height:100%;
        gap:2rem;
        font-size:1.5rem;
    }
    header nav ul li a{color:#fff;border-bottom:none;}
    header nav ul li a:hover, header nav ul li a:focus-visible{border-bottom:none;opacity:0.75;}
    header nav ul li a:focus-visible{outline:2px solid #fff;outline-offset:4px;}
    body.nav-open{overflow:hidden;}
    .hero .text, .inlineBanner .text{max-width: 100%;}
    .counterWrap{flex-direction: column;}
}

@media (max-width:884px){
    .hero{flex-direction: column;padding-block:10% 5%;}
    .logo-ticker{--logo-gap:2rem;}
    footer .footerInfo{flex-direction: column;justify-content: center;text-align: center;}
}
@media (max-width:600px){
    main > * + * {margin-top: 5rem;}
     .logo-ticker{--logo-gap:1rem;}
    .counterNewsletter{flex-direction: column;}
    .centeredText{margin-inline: 15%;}
    .testimonials{margin-inline:10%;}
	.centeredText.RemoveBtmMargin{margin-bottom: -3rem;}
}