p {
  font-weight: 300;
}

strong {
  font-weight: 600;
}

h1 {
  font-family: inherit;
  letter-spacing: 1.5px;
  color: white;
  font-weight: 400;
  font-size: 2.4em;
}

#members-content {  
    width: 90%;
    max-width: 1280px;
    margin: 100px auto;
    padding: 4em 1.315vw;
}
#members-content h1 { font-family: inherit;
    letter-spacing: 1.5px;
    font-weight: 100;
    font-size: var(--font-size-tertiary);
    color: var(--primary-color);
}


.header-nav { 
				margin: 0;
    			width: 100%;
    			display: inline-block;
    			padding: 24px 0px 0 0px; 
			}
			.header-nav li {
				padding: 0;
    			margin: 0;
    			width: 20px;
    			height: 20px;
    			float: left;
    			border-radius: 50%;
    			background: #f2f2f200;
    			margin-right: 14px;
    			border: 3px solid #999;
    			transition: 300ms all;
				cursor: pointer;
			}

			.header-nav li:hover { 
			    background: var(--primary-color);
    			border-color: var(--primary-color);
			}
			.header-nav li.active {     
				background: var(--primary-color);
    			border-color: var(--primary-color); 
			}

    /* Buttons */

.social-btns {padding:0; margin:0; }
.social-btns li {
    margin: 8px;
    display: inline-block;
    vertical-align: top;
}
/* Parting Button */
.social-btn-part {
    width: 40px;
    line-height: 40px;
    text-align: center;
    display: block;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    transition: 300ms all;
}

.social-btns :after { content:unset; }

.social-btn-part:after {
    top: 0;
    bottom: 50%;
}

.social-btn-part:before {
    top: 50%;
    bottom: 0;
}

.social-btn-part:hover {
    color: #fff;
}

.social-btn-part:hover { color:var(--primary-color-light);
    border-color:var(--primary-color-light); }
.social-btn-part.twitter:hover {
    background: #4cc4f2;    
}

.social-btn-part.facebook:hover {
    background: #3b5998;
}

.social-btn-part.linkedin:hover {
    background: #0a66c2;
}

.social-btn-part.google:hover {
    background: #dd4b39;
}

.social-btn-part.pinterest:hover {
    background: #cb2027;
}

.social-btn-part.instagram:hover {
    background: #9b6954;
}

.social-btn-part.tumblr:hover {
    background: #32506d;
}

.member-group { color: #99999975;
    border-bottom: 1px solid;
    height: unset;
    padding: 14px 0;
    transition: 300ms all;
    cursor: pointer;
    display:inline-block;
    width: 24.82%;
    font-size:1.2rem;
    text-transform:uppercase;
}
   
    .member-group:hover { color: var(--primary-color-orange); }


.member {     
    background: #333;
    text-align: center;
    display: grid;
    align-items: center; 
    overflow:hidden;
    position: relative;
    cursor: pointer;
    float:left;
    filter:saturate(0);
    transition:300ms all;
}
.member.active { pointer-events:none;}
.member.active, .member:hover { filter:saturate(1); }

.member h3, .member p { padding:0; margin:0 0 7px 0; }
.member h3 { text-transform: capitalize; }

.member:before {
    content:"";
    position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:inline-block;
    background-color:var(--primary-color);
    opacity:0;
    transition:300ms all;
    z-index:0;
}

.member div { opacity:0; transition:300ms all; z-index:1; padding:1.315vw; }

.member:hover div, .member:hover:before  { opacity:1; }

.bio { background: var(--primary-color); color:var(--primary-color-light); padding: 1.315vw;}
.bio h2 { margin-top:0; color:inherit;}
.bio h2 strong { font-size: 1rem;
    font-weight: 100; }
.bio p {
    width: 100%;
    text-align: justify; color:inherit; color:inherit; margin:0;}


       /* ====================================================
   Base Reset / Boilerplate
   ==================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Optional: Basic styling for a nav container */
.news-by-contry {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap on smaller screens */
  list-style: none; /* Remove bullet points from the list */
}

/* ====================================================
   Default (Desktop First)
   ==================================================== */
.news-by-contry li {
  /* Because there are 5 items, 20% each fits in one row */
  width: 20%;
  text-align: center;
}

/* Basic link styling (tweak as desired) */
.news-by-contry li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  color: #333;
}

/* ====================================================
   Medium Screens (Tablet)
   Example breakpoint: 992px
   ==================================================== */
@media only screen and (max-width: 992px) {
  .news-by-contry li {
    width: 50%;
  }
}

/* ====================================================
   Small Screens (Mobile)
   Example breakpoint: 600px
   ==================================================== */
@media only screen and (max-width: 600px) {
  .news-by-contry li {
    width: 100%;
  }
}

/* ====================================================
   High-DPI Displays (Retina / HiDPI)
   For example, 2dppx means 2 device pixels per CSS pixel
   ==================================================== */
@media only screen and (min-resolution: 2dppx),
       /* Some older browser prefixes (optional) */
       only screen and (min--moz-device-pixel-ratio: 2),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {  


}

    /*NEWS CSS */

    .featured-img-wrapper {     
        width: 100%;
        float: left;
        min-height: 180px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
    }

    .category:after { 
        content: "";
        width: 0;
        height: 0;        
        border-left: 33.33px solid transparent;
        position: absolute;
        left: -32.8px;
        top: 1px;
    }
    
    .card.zambia .category { background-color:orange;}
    .card.zambia .category:after { border-bottom: 33.33px solid orange;  }
    .card.zimbabwe .category { background-color:green;}
    .card.zimbabwe .category:after { border-bottom: 33.33px solid green;  }
    .card.namibia .category { background-color:purple;}
    .card.namibia .category:after { border-bottom: 33.33px solid purple;  }
    .card.southafrica .category { background-color:teal;}
    .card.southafrica .category:after { border-bottom: 33.33px solid teal;  }

    

    .featured-img-wrapper img { width: -webkit-fill-available; }
    .news-by-contry .news-btn {     color: #999;
    border-bottom: 1px solid;
    height: unset;
    padding: 14px 0;
    transition: 300ms all;
    cursor: pointer;   
    font-size: 1.2rem; }

    .article-content._next { margin-top:3.35em; padding:unset;}    
    .article-content._next .featured-img-wrapper { width: 100%; float:left; overflow:hidden;}
    .article-content._next p { font-size:inherit; color:var(--primary-color-dark);}
    .article-content._next .title { 
      display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    text-wrap-style: pretty;
}
    
    .article-content._next .meta { text-align:left;
    border-top: 1px solid #25282a21;
    border-bottom: 1px solid #25282a21;
     }
    .next-news-wrapper { padding:24px; text-align: left; font-size:14px; width:100%; min-height:220px;}
    .next-news-wrapper p{
        display: -webkit-box;
        line-clamp:1;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .next-news-wrapper .meta { color:var(--primary-color-dark);     display: inline-block;
        width: 100%;}
    .next-news-wrapper .meta .meta__date { float:left; }
    .next-news-wrapper .meta .meta__reading-time { float:right; }

    
    .cards {       
        width:100%;
    }

    .cards h3 {     
        color: var(--primary-color-dark);
        font-weight: 100;
        border-bottom: 1px solid #25282a40;
        margin-bottom: 1.35em;
        padding-bottom: 1em;
        text-align: left; 
        display:inline-block;
        width:100%;
    }

    .transition-all {
      transition-property: all;
      transition-timing-function: cubic-bezier(.4,0,.2,1);
      transition-duration: .2s;
    }

    .ease-out {
      animation-timing-function: cubic-bezier(0,0,.2,1);
    }

    .size-5 {
      width: 1.25rem;
      height: 1.25rem;
    }

    .text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

    .card {
        width: 100%; /* Adjust the width to fit three cards in a row, accounting for margins */
        box-sizing: border-box; /* Include padding and border in element's total width and height */
       
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
        text-align: center;
        position: relative;   
        
        transition: 300ms all;
        transform: translate(0px, 0px);

        cursor: pointer;
    }

    .card > * { pointer-events:none;}

    .card:hover { transform: translate(0px, -5px); background: var(--primary-color-blue); }

    .card:hover .opacity-0 { opacity:1; transform: translateX(0);}

    .opacity-0 { opacity:0; transform: translateX(-0.5rem); }
    .opacity-1 { opacity:1; }
    /* Optional: Ensure the cards have a consistent height */
    .card > * {
        flex-grow: 1;
    }
    
    .card button { width:100%; margin-top: 0.35em; }
    .card .featured-img-wrapper { margin:0; }
    .card .category {     
        position: absolute;
    bottom: 0;
    right: 0;
    background: var(--primary-color);
    color: var(--primary-color-light);
    width: auto;
    text-transform: uppercase;
    border: none;
    line-height: 2;
    padding-right: 10px;
    }

    /* multiple rows supporting css */
    .card { margin-bottom: 2.35em; }

    .link-btn { 
        width: 100%;
    margin-top: 0.35em;
    background: none;
    color: var(--primary-color-light);
    padding: 10px 20px;
    border-radius: 8px;
    /*border: 1px solid var(--primary-color-light);*/
    background-color:var(--primary-color);
    cursor: pointer;
    transition: 300ms all;
    font-size: inherit;
    display: inline-block;
    text-align: center;
    transition:300ms all;
}
    .link-btn:hover {
        background: var(--primary-color-orange);
    border-color: var(--primary-color-orange);
    color: var(--primary-color-light);
    transform: translate(0px, -2px);
    }

    input[type="radio"] {
  position: absolute;
  left: -9999px;
}
    /* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

.filters label { 
  width:100%;
}

    /* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
*:has([value="All"]:checked) .filters [for="All"],
*:has([value="Zambia"]:checked) .filters [for="Zambia"],
*:has([value="Namibia"]:checked) .filters [for="Namibia"],
*:has([value="SA"]:checked) .filters [for="SA"],
*:has([value="Zimbabwe"]:checked) .filters [for="Zimbabwe"]{ 
  color: var(--primary-color);
}

*:has([value="All"]:checked) .cards [data-category],
*:has([value="Zambia"]:checked) .cards [data-category~="Zambia"],
*:has([value="Namibia"]:checked) .cards [data-category~="Namibia"],
*:has([value="SA"]:checked) .cards [data-category~="SA"],
*:has([value="Zimbabwe"]:checked) .cards [data-category~="Zimbabwe"]{
  display: flex;
}

.hide { display:none!important; }
.card-decal{
    border-bottom: 7px solid;
    border-color: inherit;
    -webkit-box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
    -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.5);
    box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);   
}

.decal-circles-transparent { 
                cursor:pointer; 
                transition: 300ms all;
                transform: translate(0px, 0px);
                 
              }      
              .decal-circles-transparent:hover {
                transform: translate(0px, -1px);
              }        

              /*.decal-circles-transparent:hover figure { transform: scale(1.2); }*/

              .decal-circles-transparent:hover .opacity-0 { opacity:1; transform: translateX(0);}

              .opacity-0 { opacity:0; transform: translateX(-0.5rem); }
              .opacity-1 { opacity:1; }

              .decal-circles-transparent:after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; display:inline-block; z-index:-1; background-image: radial-gradient(circle at 1% 52%, rgba(139, 139, 139, 0.05) 0%, rgba(139, 139, 139, 0.05) 50%, rgba(21, 21, 21, 0.05) 50%, rgba(21, 21, 21, 0.05) 100%), radial-gradient(circle at 41% 28%, rgba(81, 81, 81, 0.05) 0%, rgba(81, 81, 81, 0.05) 50%, rgba(7, 7, 7, 0.05) 50%, rgba(7, 7, 7, 0.05) 100%), radial-gradient(circle at 48% 1%, rgba(93, 93, 93, 0.05) 0%, rgba(93, 93, 93, 0.05) 50%, rgba(7, 7, 7, 0.05) 50%, rgba(7, 7, 7, 0.05) 100%), linear-gradient(255deg, #fcfcfc00, var(--primary-color));}
 
  .card figure {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    min-height: 240px;
    /*background: url(https://africagreenco.com/img/services/1-600.webp);
    background-size: cover;
    background-repeat: no-repeat;*/
  }  
  
  [meta-cath="construction"] figure{
    background: url(https://africagreenco.com/img/news/construction.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="newsletter"] figure{
    background: url(https://africagreenco.com/img/news/newsletter.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
  }

  [meta-cath="legal"] figure{
    background: url(https://africagreenco.com/img/news/legal.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="management"] figure{
    background: url(https://africagreenco.com/img/news/management.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="market"] figure{
    background: url(https://africagreenco.com/img/news/market.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="market-2"] figure{
    background: url(https://africagreenco.com/img/news/market-2.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="savings"] figure{
    background: url(https://africagreenco.com/img/news/savings.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="signature"] figure{
    background: url(https://africagreenco.com/img/news/signature.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }

  [meta-cath="solar"] figure{
    background: url(https://africagreenco.com/img/news/solar.webp);
    background-size: cover;
    background-repeat: no-repeat;
  }  

.cards-nav button{ border:none; padding:1rem; }
.cards-nav button svg { fill:var(--primary-color); }
.cards-nav button:hover svg { fill:var(--primary-color-orange); }

.featured-media div { padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center; }
.featured-media img,svg { max-height:50px; max-width: 200px; }  

.card figure .meta { background: var(--primary-color-green);
    padding: 0.5rem 1.5rem;
    position: absolute;
    bottom: 0;
    right: 0; color:var(--primary-color-light);     display: inline-block;
        width: 100%; }
    .card figure .meta .meta__date { float:right; }
    .card figure .meta .meta__reading-time { float:right;}
    .card figure .meta__source { float:left; text-transform:uppercase; font-weight: 600;}