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

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


img {width:100%; border-radius:20px; margin: 0;}
.fullimg { width:100%; 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;}
    .narrow-text-1 {width:90%;}
  }

/* link with icon */

  .download-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    text-decoration: none;
  }
  
  .download-link:hover {
    color:hsl(158, 40%, 20%);
    text-underline-offset: 0.2em;
  }
  
  .download-icon {
    width: 30px;
    height: 30px;
  }
  
  .download-meta {
    font-weight: 400;
    font-size:14px;
    margin-left: 0.25rem;
  }









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

.logo {font-family: "Bricolage Grotesque", cursive; 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 { background:#47825f; color:#ECF4E5; padding:0 0 2rem 0; margin:0;}
.hero.section {padding:0rem;}

.ripped-border {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0 !important;
  margin:0;
  background-color:#47825f;
}

.headline {
    display: inline-flex;      /* keep text + image inline */
    align-items: center;       /* vertically center text & image */
    gap: 0.5rem;               /* space between them */
   }

.leaf{ height:0.75em; width:auto; margin:0; white-space: nowrap;
}

.fullimg { width:100%; padding:5px 0px; }

      
.hero-image-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        gap: 0rem;
        border-radius: 2rem;
        overflow:hidden;
        height:100%;
        min-height:300px;

      }
      
.hero-image-grid img { 
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin:0;
    border-radius:0;
      }
      
      @media (min-width: 900px) {
        .hero-image-grid {
          grid-template-columns: 1fr;
        }
        .hero-image-grid .image1, .hero-image-grid .image2 {display:none;}
        .hero.section {padding:5rem;}
        .hero {padding:4rem 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;
    color: #888888;
    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 --------------- */


/* border-card */

.border-card {
  border: 1px solid;
  height:100%;
  padding: 20px 40px 30px 40px;
  border-radius: 12px;
}

.blank-card {
  height:100%;
  padding: 20px 40px 30px 40px;
}

  @media (min-width: 900px) {

   
   .border-card, .blank-card {

    min-height: 300px;

   }

   
}


    


  /* --------------- 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;
      }