/* --------------- GLOBAL STYLES --------------- */

h1,h2,h3,h4,h5 {font-family: "Bricolage Grotesque", cursive;}
strong {font-weight:600;}

img {width:100%; border-radius:16px; margin: 0;}
.fullimg { max-width:100%;  margin:0 auto; display:block; border-radius:0;}
.img-blend {mix-blend-mode:luminosity;}


*, *::before, *::after {
    box-sizing: border-box;
  }

  .text-right {
    text-align: right;
  }


  @media (min-width: 900px) {
    img {margin: 1rem 0;}
    .fullimg { max-width:90%; border-radius:16px; margin:0 auto;}

    .narrow-text-1 {width:90%;}
  }


/* --------------- NAV --------------- */

header {
  width: 90%;
  max-width: var(--grid-max-width);
  margin: auto;
}

.grid-container.nav{
  grid-template-columns: 1fr;
  padding-block: 5rem 2rem;
}

.logo {font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-style: normal;  font-size:2.5rem; line-height:0.9; margin:0; }
.tagline {font-size: 1rem; display:inline-block; color: hsl(143, 42%, 30%);line-height:1.2;font-weight:500; }

@media (min-width: 600px) {
    .logo {margin:0 1rem 0 0;}
  }




/* --------------- HERO --------------- */

.hero-banner { 
  display: grid;
  width:90%;
  grid-template-columns:(1fr);
  background-color:hsl(113, 33%, 90%);
  padding: 2rem;
  border-radius: 16px;
  max-width: var(--grid-max-width);
  align-items:center;
  margin: 0 auto;
}

      
.hero-image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 0.5rem;
        border-radius: 16px;
        overflow:hidden;
        height:100%;
        min-height:200px;
      }
      
.hero-image-grid img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin:0;
    border-radius:0;
      }
      
      @media (min-width: 900px) {
        
        .hero-banner { 
          display: grid;
          width:90%;
          grid-template-columns:repeat(2, 1fr);
          column-gap: 3rem;
          /*background-color: #e5eee4;*/
          background-color:hsl(113, 33%, 90%);
          padding: 3rem;
          border-radius: 16px;
          max-width: var(--grid-max-width);
          align-items:center;
          min-height:600px;

        }
        
        .hero-image-grid {
          grid-template-columns: 1fr;
          min-height:300px;
        }
        .hero-image-grid .image1, .hero-image-grid .image2 {display:none;}
        .hero.section {padding:5rem;}
        .hero {padding:6rem 0;}


      }
      
      
      @media (min-width: 1200px) {
        .hero-image-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .hero-image-grid .image1, .hero-image-grid .image2 {display:block;}

      }




/* --------------- SECTIONS --------------- */


.caption {
    font-size: 1rem;
    line-height:1.3;
  }

  .icon-list {
    list-style: none;
    padding: 0;
  }
  
  .icon-list li {
    position: relative;
    padding-left: 36px;
    /*margin-bottom: 12px;*/
    line-height:1.4;
    color:#185B33;
  }
  
  .icon-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    width: 24px;
    height: 24px;
    background-image: url("../images/check-circle-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
  }


/* --------------- COMPONENTS --------------- */


/* White Banner */

.white-banner {
    width: 90%; 
    margin:-5rem auto 0 auto; 
    position:relative; 
    z-index: 2;
    padding:2rem; 
    background-color: #ffffff; 
    border-radius: 16px;
    max-width:var(--grid-max-width);
  }

  .white-banner::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Callout Banner */

  .callout-banner {
    display: grid;
    width:90%;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border-radius: 16px;
    /*box-shadow: 0 8px 30px rgba(2,6,23,0.15);*/
    /*margin: 0 auto;*/
    overflow: hidden;
    /*background-color:#e5eee4;*/
    background-color:hsl(113, 33%, 90%);
  
  }

  .callout-content {
    display: flex;
    flex-direction: column;
    gap: 0rem;
  }

  .callout-visual {
    position: relative;
    height:100%;
  }

  .callout-visual .frame {
    width: 100%;
    height:100%;
    border-radius: 16px;
    overflow: hidden;
    margin:0;
  }

  .callout-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin:0;
  }

      /* CTA Banner */


  .cta-banner {
  display: grid;
  width:90%;
  grid-template-columns: 1fr;
  column-gap: 3rem;
  background-color:hsl(113, 33%, 90%);
  padding: 2rem;
  border-radius: 16px;
  max-width: var(--grid-max-width);
  align-items:center;
  /*margin: 0 auto;*/
  
}

.cta-text-left, .cta-text-right {
  grid-column: 1; 
}

  
  .cta-full {
    grid-column: 1 / -1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  
  .cta-full hr {
    width: 100%;
    border: none;
    border-top: 1px solid #cdd8ce;
  }
  


  @media (min-width: 900px) {

    .white-banner {
        width: 70%; 
        margin-top:-12rem; 
        padding:4rem; 
      }

      .green-cta-banner{
        /*margin: 8rem auto;*/
        padding: 4rem;
      }
      .banner-top {
        gap: 40px;
      }

      .callout-banner {
        grid-template-columns: 1fr minmax(260px, 480px);
        max-width:var(--grid-max-width);
        gap: 3rem;
        padding: 2rem;
        border-radius: 16px;
        min-height:600px;
        /*margin:0 auto;*/
      }


      .callout-visual .frame {
        border-radius: 16px;
      }

      .callout-content {
        gap: 0rem;
        padding:0 3rem;
      }

      .cta-banner {
        grid-template-columns: 1fr 1fr;
        padding: 8rem;

      }

      .cta-text-right {
        grid-column: 2;
      }
}


    


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





 
    

  

  
  

     


      .banner-image{
        flex:1;
        overflow:hidden;       /* optional for style */
      }
      
      .banner-image img{
        height: 100%;
        object-fit: cover;  /* fills container, crops image */
        display: block;
        border-radius: 8px;
      }